index.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <link rel="stylesheet" href="css/materialize.min.css">
   5   <link rel="stylesheet" href="css/splashscreen.css">
   6   <style>
   7   /* Simple example of css used to stylize the login screen */
   8   * {
   9     /* webkit2 is very slow, this is supposed to speed up animations */
  10     backface-visibility: hidden;
  11   }
  12   body {
  13     display: flex;
  14     min-height: 100vh;
  15     flex-direction: column;
  16     color: white;
  17     background-color: #37474f;
  18     background: -webkit-radial-gradient(center, ellipse cover, #455a64 10%, #263238 100%);
  19     overflow: hidden;
  20   }
  21   main {
  22     flex: 1 0 auto;
  23   }
  24   input {
  25     color: white;
  26   }
  27   .caret {
  28     fill: grey !important;
  29   }
  30   .power-button {
  31     fill: white;
  32   }
  33   .power-button:hover {
  34     fill: #01579b;
  35   }
  36   .power-button:active {
  37     fill: #4dd0e1;
  38   }
  39   div#console {
  40     z-index: 9999;
  41     position: absolute;
  42     top: 10px;
  43   }
  44   div#console .terminal {
  45     overflow-y: scroll;
  46     background-color: rgba(0,0,0,0.8);
  47     font-size: 14pt;
  48     color: white;
  49     height: 30vh;
  50     width: 85vw;
  51     resize: both;
  52   }
  53   div#console .terminal text {
  54     display: block;
  55     padding: 0;
  56     margin: 0;
  57   }
  58   .welcome-text {
  59     font-size: 3vh;
  60     font-weight: lighter;
  61   }
  62
  63   </style>
  64 </head>
  65 <!-- Load dependencies -->
  66 <script src="js/jquery-3.4.1.min.js"></script>
  67 <script src="js/moment-with-locales.js"></script>
  68 <script src="js/jquery-ui.min.js"></script>
  69 <script src="js/materialize.min.js"></script>
  70 <!-- <script src="js/lightdm-sample.js"></script> -->
  71
  72 <!-- Load Utility functions -->
  73 <script src="js/_utils.js"></script>
  74
  75 <!--  Load Plugins first -->
  76 <script src="js/splashscreen.js"></script>
  77 <!-- <script src="js/another_plugin.js"></script> -->
  78
  79 <!-- Load Login Manager, depends on plugins -->
  80 <script src="js/LoginManager.js"></script>
  81
  82 <!-- Load example theme -->
  83 <script src="js/theme.js"></script>
  84
  85 <body>
  86   <header></header>
  87   <main>
  88     <div class="container">
  89       <div class="row" style="margin-top: 15vh;"></div>
  90
  91       <div class="row">
  92         <div style="width: 100%; text-align: center"  class="col s12">
  93           <img class="" src="images/archlinux-logo.svg">
  94         </div>
  95       </div>
  96       <div class="row" style="margin-top: 10vh;"></div>
  97       <div class="row">
  98         <div class="col s12" style="text-align: center">
  99           <h1 class="welcome-text">Welcome back</h1>
 100         </div>
 101       </div>
 102
 103       <!-- User & Password Selections  -->
 104       <div class="row ">
 105         <!-- User Select -->
 106         <div class="row">
 107           <div class="input-field col s4 offset-s4">
 108             <select id="selectUser"></select>
 109             <label>User</label>
 110           </div>
 111         </div>
 112
 113         <!-- Password field -->
 114         <div class="row">
 115           <div class="input-field col s4 offset-s4">
 116             <input id="inputPassword" type="password">
 117             <label for="inputPassword">Password</label>
 118           </div>
 119         </div>
 120         <!-- End Password field -->
 121       </div>
 122       <!-- End User & Password Selections  -->
 123
 124     </div>
 125   </main>
 126
 127 <!-- Bottom footer contains Session selection & power buttons -->
 128   <footer >
 129     <div class="row">
 130       <!-- Window Manager Select -->
 131       <div class="input-field col s2 offset-s1">
 132         <select id="selectSession"></select>
 133         <label>Select Session</label>
 134       </div>
 135       <!-- End Window Manager Select -->
 136
 137       <!-- Power button column  -->
 138       <div class="col right">
 139         <div class="row">
 140           <!-- Hibernate Button -->
 141           <div  id="buttonHibernate" class="col S4">
 142             <svg viewBox="0 0 297.613 297.613" width="40px" height="40px" class="power-button">
 143               <g>
 144                 <path d="M148.807,50.869c-4.971,0-9,4.029-9,9v46.438c0,4.971,4.029,9,9,9s9-4.029,9-9V59.869
 145                 C157.807,54.898,153.777,50.869,148.807,50.869z"/>
 146                 <path d="M178.859,127.754c2.303,0,4.606-0.879,6.364-2.636L212.17,98.17c3.515-3.515,3.515-9.213,0-12.728
 147                 c-3.515-3.515-9.213-3.515-12.728,0l-26.948,26.948c-3.515,3.515-3.515,9.213,0,12.728
 148                 C174.252,126.875,176.556,127.754,178.859,127.754z"/>
 149                 <path d="M237.744,139.807h-46.438c-4.971,0-9,4.029-9,9s4.029,9,9,9h46.438c4.971,0,9-4.029,9-9S242.715,139.807,237.744,139.807z"
 150                 />
 151                 <path d="M185.22,172.493c-3.515-3.515-9.213-3.515-12.728,0c-3.515,3.515-3.515,9.213,0,12.728l26.95,26.95
 152                 c1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636c3.515-3.515,3.515-9.213,0-12.728L185.22,172.493z"/>
 153                 <path d="M148.807,182.307c-4.971,0-9,4.029-9,9v46.438c0,4.971,4.029,9,9,9s9-4.029,9-9v-46.438
 154                 C157.807,186.336,153.777,182.307,148.807,182.307z"/>
 155                 <path d="M112.391,172.495l-26.948,26.948c-3.515,3.515-3.515,9.213,0,12.728c1.757,1.757,4.061,2.636,6.364,2.636
 156                 s4.606-0.879,6.364-2.636l26.948-26.948c3.515-3.515,3.515-9.213,0-12.728C121.604,168.98,115.905,168.98,112.391,172.495z"/>
 157                 <path d="M115.307,148.807c0-4.971-4.029-9-9-9H59.869c-4.971,0-9,4.029-9,9s4.029,9,9,9h46.438
 158                 C111.277,157.807,115.307,153.777,115.307,148.807z"/>
 159                 <path d="M98.17,85.443c-3.515-3.515-9.213-3.515-12.728,0c-3.515,3.515-3.515,9.213,0,12.728l26.95,26.95
 160                 c1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636c3.515-3.515,3.515-9.213,0-12.728L98.17,85.443z"/>
 161                 <path d="M148.807,0C66.754,0,0,66.754,0,148.807s66.754,148.807,148.807,148.807s148.807-66.754,148.807-148.807
 162                 S230.859,0,148.807,0z M148.807,279.613C76.68,279.613,18,220.934,18,148.807S76.68,18,148.807,18s130.807,58.68,130.807,130.807
 163                 S220.934,279.613,148.807,279.613z"/>
 164               </g>
 165             </svg>
 166             <!-- <img id="buttonHibernate" class="right power-button" src="images/hibernate.svg" width="40px" height="40px"> -->
 167           </div>
 168           <!-- End Hibernate Button -->
 169           <!-- Restart Button -->
 170           <div id="buttonRestart" class="col s4">
 171             <svg class="power-button"  height="40px" width="40px" viewBox="0 0 1000 1000" >
 172               <g>
 173                 <path d="M506,984.1c-98.1,0-192.5-29.2-273.1-84.4C154.1,845.9,93.6,770.9,
 174                 57.6,682.9c-9.9-24.3-17.9-49.6-23.7-75.2c-3.2-13.9,5.5-27.7,
 175                 19.4-30.9c13.9-3.2,27.7,5.5,30.9,19.4c5.2,22.8,12.3,45.4,21.2,67.1C137.5,
 176                 742,191.6,809,262,857.2c72,49.3,156.4,75.3,244,75.3c238.5,0,432.5-194,
 177                 432.5-432.5c0-238.5-194-432.5-432.5-432.5c-87.6,0-172,26-244,75.3C191.7,191,
 178                 137.5,257.9,105.4,336.5C100,349.7,85,356,71.8,
 179                 350.7c-13.2-5.4-19.5-20.4-14.1-33.6c35.9-88,96.5-162.9,
 180                 175.2-216.8c80.6-55.2,175-84.3,273.1-84.3c129.3,0,250.8,50.4,
 181                 342.3,141.8C939.6,249.1,990,370.7,990,500c0,129.3-50.4,250.9-141.8,
 182                 342.3C756.8,933.7,635.2,984.1,506,984.1z"/>
 183                 <path d="M82.3,352.6c-10.5,0-20.3-6.5-24.1-16.8L11.6,211.6c-5-13.3,1.8-28.2,
 184                 15.1-33.2c13.3-5,28.2,1.8,33.2,15.1l38.5,102.8l106.2-26.1c13.8-3.4,27.8,
 185                 5.1,31.2,18.9c3.4,13.8-5.1,27.8-18.9,31.2L88.4,351.8C86.4,352.3,84.3,
 186                 352.6,82.3,352.6z"/>
 187               </g>
 188             </svg>
 189
 190             <!-- <img id="buttonRestart" class="power-button" src="images/restart.svg" width="40px" height="40px"> -->
 191           </div>
 192           <!-- End Restart Button -->
 193           <!-- Shutdown Button -->
 194           <div id="buttonShutdown" class="col s4">
 195
 196             <svg class="power-button"  height="40px" width="40px" viewBox="0 0 56 56">
 197               <g>
 198                 <path d="M35.31,5.042c-0.532-0.155-1.085,0.15-1.24,0.68s0.149,
 199                 1.085,0.68,1.24C44.906,9.932,52,19.405,52,30c0,13.233-10.767,
 200                 24-24,24S4,43.233,4,30C4,19.392,11.105,9.915,21.279,
 201                 6.953c0.53-0.154,0.835-0.709,0.681-1.239
 202                 c-0.153-0.53-0.708-0.839-1.239-0.681C9.698,8.241,2,18.508,2,
 203                 30c0,14.337,
 204                 11.663,26,26,26s26-11.663,26-26
 205                 C54,18.522,46.314,8.26,35.31,5.042z"/>
 206                 <path d="M28,27c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,
 207                 0.447-1,1v25C27,
 208                 26.553,27.447,27,28,27z"/>
 209               </g>
 210             </svg>
 211             <!-- <img id="buttonShutdown" class="power-button" src="images/shutdown.svg" width="40px" height="40px"> -->
 212           </div>
 213           <!-- End Shutdown Button -->
 214         </div>
 215       </div>
 216       <!-- End Power button column  -->
 217     </div>
 218   </footer>
 219
 220   <script>
 221
 222     /* Use custom logging for debugging without a browser.
 223        Pass true to show logger output on screen */
 224     const log = new Logger(false);
 225     /* Define this fuction so lightdm doesn't crash, gets redefined
 226     in login manager. */
 227     window.authentication_complete = function() {};
 228   </script>
 229 </body>
 230 </html>