OSDN Git Service

[更新]:画像を横幅で決まるように調整フォントをfont-family: sans-serifに変更
[alterlinux/lightdm-webkit2-theme-alter.git] / index.html
index b18699a..799fe16 100644 (file)
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<!DOCTYPE HTML>
 <html>
 <head>
-       <style>
-               html, body {
-                       width: 100%;
-                       height: 100%;
-                       overflow: hidden;
-                       opacity: 1;
-                       margin: 0;
-                       background-color: #ffffff;
-                       transition: opacity 2s, background-color 2s, background-position 2s;
-                       transition-timing-function: ease-in;
-               }
-
-               body {
-                       background: linear-gradient(transparent, SlateGray);
-                       background-color: #ffffff;
-                       font-family: 'sans-serif';
-                       font-size: 24px;
-               }
-
-               html.session_starting {
-                       opacity: 0;
-               }
-
-               .session_starting body {
-                       opacity: 0;
-                       background-color: rgba(0, 0, 0, 0);
-                       background-position-y: -100%;
-               }
-
-               .container {
-                       width: 100%;
-                       height: 100%;
-                       display: -webkit-flex;
-                       display: flex;
-                       -webkit-flex-direction: column;
-                       flex-direction: column;
-               }
-
-               .topBox, .inputBox, .messageBox {
-                       width: 100%;
-                       height: 33.33%;
-                       text-align: center;
-               }
-
-               .inputBox {
-                       position: relative;
-               }
-
-               .wrapper {
-                       height: 85px;
-                       width: 350px;
-                       position: absolute;
-                       left: 0;
-                       right: 0;
-                       top: 0;
-                       bottom: 0;
-                       margin: auto;
-               }
-
-               .topBox {
-                       text-align: right;
-                       padding: 15px;
-                       box-sizing: border-box;
-               }
-
-               .messageBox {
-                       text-align: center;
-                       visibility: hidden;
-               }
-
-               input#entry {
-                       outline: none;
-                       background: rgba(0, 0, 0, 0.05);
-                       box-shadow: none;
-                       box-sizing: border-box;
-                       line-height: normal;
-                       transition: .3s ease;
-                       border: none !important;
-                       padding: 14px 4% !important;
-                       font-size: 16px;
-                       color: #666;
-                       background-color: #fff;
-                       width: 100%;
-                       font-weight: 400;
-                       border-radius: 3px !important;
-               }
-
-               input#entry:focus {
-                       background: rgba(0, 0, 0, 0.1);
-                       color: rgba(0, 0, 0, 0.75);
-               }
-
-               input#entry:focus::placeholder {
-                       color: rgba(255, 255, 255, 0.3);
-               }
-       </style>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="css/materialize.min.css">
+  <link rel="stylesheet" href="css/splashscreen.css">
+  <link rel="stylesheet" href="css/theme.css">
 </head>
-
-<body id="body">
-<div class="container">
-       <div class="topBox">
-               <img onclick="javascript:lightdm.shutdown();" src="power_button.png"/>
-       </div>
-       <div class="inputBox">
-               <div class="wrapper">
-                       <div id="prompt"></div>
-                       <form action="javascript:handle_input();">
-                               <input id="entry" />
-                       </form>
-               </div>
-       </div>
-       <div class="messageBox" id="messages"></div>
-</div>
-<script>
-       /*********************************************************/
-       /*               Callbacks for the greeter               */
-       /*********************************************************/
-
-       /**
-        * show_prompt callback.
-        */
-       window.show_prompt = function(text, type) {
-               // type is either "text" or "password"
-               let prompt = document.getElementById("prompt"),
-                       entry = document.getElementById("entry");
-
-               entry.placeholder = text.charAt(0).toUpperCase() + text.slice(1, -1);
-
-               // clear entry
-               entry.value = "";
-               entry.type = type;
-       };
-
-       /**
-        * show_message callback.
-        */
-       window.show_message = function(text, type) {
-               if (0 === text.length) {
-                       return;
-               }
-               let messages = document.getElementById('messages');
-               messages.style.visibility = "visible";
-               // type is either "info" or "error"
-               if (type == 'error') {
-                       text = `<p style="color:red;">${text}</p>`;
-               }
-               messages.innerHTML = `${messages.innerHTML}${text}`;
-       };
-
-       /**
-        * authentication_complete callback.
-        */
-       ac = function(session_key) {
-               if (lightdm.is_authenticated) {
-                       // Start default session
-                       document.documentElement.addEventListener('transitionend', () => lightdm.start_session_sync(session_key));
-                       document.documentElement.className = 'session_starting';
-               } else {
-                       show_message("Authentication Failed", "error");
-                       setTimeout(start_authentication, 3000);
-               }
-       };
-
-       /**
-        * autologin_timer_expired callback.
-        */
-       function autologin_timer_expired(username) {
-               /* Stub.  Does nothing. */
-       }
-
-       /*******************************************************************/
-       /*                Functions local to this theme                    */
-       /*******************************************************************/
-
-       /**
-        * clear_messages
-        */
-       function clear_messages() {
-               let messages = document.getElementById("messages");
-               messages.innerHTML = "";
-               messages.style.visibility = "hidden";
-       }
-
-       /**
-        * Kickoff the authentication process
-        */
-       window.start_authentication = function() {
-               clear_messages();
-               // start without providing "user" to make the greeter prompt for "user"
-               lightdm.authenticate();
-       };
-
-       /**
-        * handle the input from the entry field.
-        */
-       window.handle_input = function() {
-       //      let entry = document.getElementById("entry");
-       //      lightdm.respond(entry.value);
-       };
-
-       function login(username, password, callback) {
-               // set default values
-               username = username || lightdm.select_user; 
-               password = password || "";
-               //      session_key = session_key || lightdm.sessions[0].key;
-
-               auth_cb = function() {
-                       lightdm.respond(password);
-               }
-               auth_complete_cb = function() {
-                       if (typeof callback == "function")
-                               callback(lightdm.is_authenticated);
-               }
-               window.show_prompt = auth_cb; 
-               window.authentication_complete = auth_complete_cb; 
-
-
-               lightdm.authenticate(username);
-                       
-
-       }
-</script>
-<!--<script src="../_vendor/js/mock.js"></script>-->
-<script>
-       //TODO: make sure that lightdm is not referenced until pages has finished loading
-       setTimeout(() => login("jay", "", () => {
-               for(var x = 0; x < lightdm.sessions.length; x++){
-               show_message(lightdm.sessions[x].key, "info");
-       } 
-       ac("i3");                       
-       }) , 10);
-</script>
+<!-- Load dependencies -->
+<script src="js/jquery-3.4.1.min.js"></script>
+<script src="js/moment-with-locales.js"></script>
+<script src="js/jquery-ui.min.js"></script>
+<script src="js/materialize.min.js"></script>
+
+
+<!-- Sample lightdm object (for browser use only) -->
+<!-- <script src="js/lightdm-sample.js"></script> -->
+
+<!-- Load Utility functions -->
+<script src="js/_utils.js"></script>
+
+<!--  Load Plugins first -->
+<script src="js/splashscreen.js"></script>
+<!-- <script src="js/another_plugin.js"></script> -->
+
+<!-- Load Login Manager, depends on plugins -->
+<script src="js/LoginManager.js"></script>
+
+<!-- Load example theme -->
+<script src="js/theme.js"></script>
+
+<body>
+  <header></header>
+  <main>
+    <div class="container">
+      <div class="row" style="margin-top: 15vh;"></div>
+
+      <div class="row">
+        <div style="text-align: center"  class="col s12">
+          <!-- <img class="logo-ubuntu" src="images/ubuntu_logo.svg"> -->
+          <!-- <img class="logo-arch" src="images/arch_logo.svg"> -->
+          <img class="logo-alter" src="images/alter_logo.svg">
+        </div>
+      </div>
+      <div class="row" style="margin-top: 5vh;"></div>
+      <div class="row">
+        <div class="col s12" style="text-align: center">
+          <h1 class="welcome-text"><script>document.write(text[1])</script></h1>
+        </div>
+      </div>
+
+      <!-- User & Password Selections  -->
+      <div class="row ">
+        <!-- User Select -->
+        <div class="row">
+          <div class="input-field col s4 offset-s4">
+            <select id="selectUser"></select>
+            <label><script>document.write(text[3])</script></label>
+          </div>
+        </div>
+
+        <!-- Password field -->
+        <div class="row">
+          <div class="input-field col s4 offset-s4">
+            <input id="inputPassword" type="password">
+            <label for="inputPassword"><script>document.write(text[4])</script></label>
+          </div>
+        </div>
+        <!-- End Password field -->
+      </div>
+      <!-- End User & Password Selections  -->
+
+    </div>
+  </main>
+
+<!-- Bottom footer contains Session selection & power buttons -->
+  <footer >
+    <div class="row">
+      <!-- Window Manager Select -->
+      <div class="input-field col s2 offset-s1">
+        <select id="selectSession"></select>
+        <label><script>document.write(text[2])</script></label>
+      </div>
+      <!-- End Window Manager Select -->
+
+      <!-- Power button column  -->
+      <div class="col right" style="margin-right: 10px;">
+        <div class="row">
+          <!-- Hibernate Button -->
+          <div  id="buttonHibernate" class="col S4">
+            <svg viewBox="0 0 44.693 44.693" width="40px" height="40px" class="power-button">
+              <path d="M22.347,44.693c-3.017,0-5.942-0.591-8.698-1.757c-2.662-1.126-5.051-2.737-7.104-4.788
+               c-2.052-2.053-3.662-4.441-4.787-7.104C0.592,28.289,0,25.362,0,22.347c0-3.017,0.592-5.942,1.758-8.699
+               c1.125-2.661,2.735-5.051,4.787-7.103c2.053-2.052,4.441-3.662,7.104-4.788C16.404,0.592,19.33,0,22.347,0s5.942,0.592,8.698,1.757
+               c2.662,1.126,5.051,2.736,7.104,4.788c2.051,2.052,3.662,4.441,4.787,7.103c1.166,2.757,1.758,5.683,1.758,8.699
+               c0,3.016-0.592,5.942-1.758,8.698c-1.125,2.662-2.736,5.051-4.787,7.104c-2.053,2.051-4.441,3.662-7.104,4.788
+               C28.289,44.103,25.363,44.693,22.347,44.693z M22.347,3.534c-10.373,0-18.812,8.439-18.812,18.813s8.438,18.812,18.812,18.812
+               s18.812-8.438,18.812-18.812S32.72,3.534,22.347,3.534z"/>
+              <path d="M33.072,29.529c-6.354,1.064-12.367-3.223-13.432-9.575c-0.725-4.32,1.027-8.482,4.219-11.04
+               c-0.852-0.025-1.719,0.031-2.592,0.177c-7.164,1.2-11.998,7.981-10.797,15.146s7.982,11.998,15.146,10.797
+               c3.794-0.635,6.936-2.838,8.871-5.832C34.029,29.338,33.557,29.447,33.072,29.529z"/>
+            </svg>
+          </div>
+          <!-- End Hibernate Button -->
+
+          <!-- Restart Button -->
+          <div id="buttonRestart" class="col s4">
+            <svg class="power-button"  height="40px" width="40px" viewBox="0 0 50.076 44.694" >
+              <g>
+                <path d="M50.076,26.094l-7.258-8.435l-7.544,8.179l5.542,0.096c-1.689,8.741-9.475,15.226-18.471,15.226
+                       c-10.373,0-18.811-8.438-18.811-18.812S11.973,3.535,22.346,3.535c6.002,0,11.684,2.896,15.22,7.753l1.443-3.829
+                       c-1.79-1.998-3.937-3.678-6.31-4.92C29.529,0.879,25.949,0,22.346,0c-3.016,0-5.941,0.592-8.698,1.758
+                       c-2.661,1.125-5.051,2.736-7.103,4.788c-2.051,2.052-3.662,4.441-4.788,7.103C0.591,16.404,0,19.331,0,22.348
+                       c0,3.016,0.591,5.942,1.757,8.698c1.126,2.661,2.737,5.051,4.788,7.103c2.052,2.052,4.441,3.663,7.103,4.788
+                       c2.757,1.166,5.683,1.758,8.698,1.758c5.41,0,10.631-1.959,14.699-5.515c3.914-3.421,6.513-8.088,7.352-13.185L50.076,26.094z"/>
+              </g>
+            </svg>
+          </div>
+          <!-- End Restart Button -->
+
+          <!-- Shutdown Button -->
+          <div id="buttonShutdown" class="col s4">
+            <svg class="power-button"  height="40px" width="40px" viewBox="0 0 44.771 46.559">
+              <g>
+               <path d="M22.386,46.559c-3.021,0-5.953-0.592-8.714-1.76c-2.666-1.127-5.06-2.741-7.115-4.797
+                       c-2.055-2.055-3.669-4.449-4.797-7.115C0.592,30.127,0,27.195,0,24.174c0-3.619,0.885-7.215,2.559-10.399
+                       c1.619-3.081,3.973-5.781,6.807-7.812l2.059,2.873c-4.939,3.538-7.889,9.271-7.889,15.338c0,10.395,8.457,18.851,18.851,18.851
+                       s18.851-8.456,18.851-18.851c0-6.066-2.949-11.8-7.889-15.338l2.059-2.873c2.834,2.03,5.188,4.73,6.807,7.812
+                       c1.674,3.185,2.559,6.78,2.559,10.399c0,3.021-0.592,5.953-1.76,8.713c-1.128,2.666-2.742,5.061-4.797,7.115
+                       c-2.056,2.056-4.449,3.67-7.115,4.797C28.339,45.967,25.407,46.559,22.386,46.559z"/>
+               <rect x="20.93" width="3" height="22"/>
+              </g>
+            </svg>
+          </div>
+          <!-- End Shutdown Button -->
+
+        </div>
+      </div>
+      <!-- End Power button column  -->
+    </div>
+  </footer>
+
+  <script>
+
+    /* Use custom logging for debugging without a browser.
+       Pass true to show logger output on screen */
+    const log = new Logger(false);
+
+    /* Define this fuction so lightdm doesn't crash, gets redefined
+    in login manager. */
+    window.authentication_complete = function() {};
+  </script>
 </body>
 </html>