diff options
| -rw-r--r-- | cancel.png | bin | 0 -> 1125 bytes | |||
| -rw-r--r-- | index.html | 26 | ||||
| -rw-r--r-- | petrichor.css | 67 | ||||
| -rw-r--r-- | petrichor.js | 10 | ||||
| -rw-r--r-- | reboot.png | bin | 0 -> 3790 bytes | |||
| -rw-r--r-- | shutdown.png | bin | 0 -> 3477 bytes |
6 files changed, 101 insertions, 2 deletions
diff --git a/cancel.png b/cancel.png Binary files differnew file mode 100644 index 0000000..4d6a0ca --- /dev/null +++ b/cancel.png @@ -1,6 +1,7 @@ <html> <head> <link rel="stylesheet" type="text/css" href="petrichor.css" /> + <script src="old/mock.js" type="text/javascript"></script> <script src="petrichor.js" type="text/javascript"></script> <script type="text/javascript"> start(); @@ -20,7 +21,30 @@ <div id="message-container"> <span id="message-label"></span> </div> + <a id="mask" href="#" onclick="hide_element('power-confirm');hide_element('mask');"></a> + <div id="power-confirm"> + <ul> + <li> + <a class="button" href="#" onclick="lightdm.shutdown();"> + <div class="icon" id="icon-shutdown"></div> + <span>Power off</span> + </a> + </li> + <li> + <a class="button" href="#" onclick="lightdm.restart();"> + <div class="icon" id="icon-reboot"></div> + <span>Restart</span> + </a> + </li> + <li> + <a class="button" href="#" onclick="hide_element('power-confirm');hide_element('mask');"> + <div class="icon" id="icon-cancel"></div> + <span>Cancel</span> + </a> + </li> + </ul> + </div> <select id="session-list" class="ease-opacity"></select> - <img id="shutdown" class="ease-opacity" src="iec5009.svg" onclick="lightdm.shutdown();" /> + <img id="shutdown" class="ease-opacity" src="iec5009.svg" onclick="show_element('power-confirm');show_element('mask');" /> </body> </html> diff --git a/petrichor.css b/petrichor.css index 72d1b6e..2e1d078 100644 --- a/petrichor.css +++ b/petrichor.css @@ -18,6 +18,71 @@ body,html transition: opacity ease 0.3s; } +#mask +{ + transition: visibility 0s linear 0.15s, opacity 0.15s linear; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background-color: rgba(0,0,0,0.6); + visibility: hidden; + opacity: 0; +} + +#power-confirm +{ + transition: visibility 0s linear 0.15s, opacity 0.15s linear; + text-align: center; + height: 150px; + margin-top: -75px; + width: 100%; + position: absolute; + left: 0; + top: 50%; + visibility: hidden; + opacity: 0; +} + +#power-confirm li +{ + list-style: none; + display: inline-block; + margin: 2em; +} + +#power-confirm li a +{ + text-decoration: none; + color: inherit; + font-size: 1.5em; + display: inline-block; +} + +#power-confirm li div +{ + display: block; + height: 96px; + width: 96px; + border-radius: 48px; +} + +#icon-shutdown +{ + background: url('shutdown.png') #C33; +} + +#icon-reboot +{ + background: url('reboot.png') #33C; +} + +#icon-cancel +{ + background: url('cancel.png') #3C3; +} + #shutdown { position: absolute; @@ -106,7 +171,7 @@ a.user transition: visibility 0s linear 0.15s, opacity 0.15s linear; } -#password-container.shown, #message-container.shown +#password-container.shown, #message-container.shown, #mask.shown, #power-confirm.shown { visibility: visible; opacity: 1; diff --git a/petrichor.js b/petrichor.js index b5e06ed..fa4a100 100644 --- a/petrichor.js +++ b/petrichor.js @@ -2,6 +2,16 @@ password_prompt = false; selected_user = null; time_remaining = 0 +function show_element(id) +{ + document.getElementById(id).classList.add("shown"); +} + +function hide_element(id) +{ + document.getElementById(id).classList.remove("shown"); +} + function show_prompt(text, type) { password_prompt = true; diff --git a/reboot.png b/reboot.png Binary files differnew file mode 100644 index 0000000..52695ec --- /dev/null +++ b/reboot.png diff --git a/shutdown.png b/shutdown.png Binary files differnew file mode 100644 index 0000000..d2a7b96 --- /dev/null +++ b/shutdown.png |
