-<!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 {
- 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);
- }
-
-
-
- body {
- background-color: black;
- }
- #splash-screen {
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 999;
- overflow: hidden;
- }
- .clock {
- display: none;
- }
- #splash-screen-content {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- }
- .splash-screen-img {
-/* height: 100%;
- width: 100%; */
- /* border: 8px solid red; */
- }
- .filter{
- filter: blur(15px) contrast(127%) brightness(80%);
- }
- .vignette {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- box-shadow: inset 0 0 100px black;
- z-index: 2;
- }
- </style>
+ <link rel="stylesheet" href="css/materialize.min.css">
+ <link rel="stylesheet" href="css/splashscreen.css">
+ <link rel="stylesheet" href="css/theme.css">
</head>
+<!-- Load dependencies -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/moment-with-locales.js"></script>
-<script>
-
-class LoginManager {
- constructor() {
- this.$content;
- this.$ss_clock;
- this.$vignette;
- this.usr_opt = {
- "splash-screen":{
- "filter": false,
- }
- };
-
- this.def_opt = {
- "splash-screen": {
- "fit": true,
- "filter": true,
- "vignette": true,
- "clock": [{
- "format": ["h:MM", "A"],
- "css": [{
- "font-size": "60pt",
- },{
- "font-size": "30pt"
- }],
- "parent-css": {
- "color": "white",
- "font-family": "Noto Sans",
- "text-align": "center",
- "margin-top": "calc(50vh - 90pt)",
- "text-shadow": "rgba(0, 0, 0, 0.8) 0px 7px 10px",
- }
- }]
- }
- };
- this.eff_opt = {};
-
- this.splash= {};
-
- this.clock = setInterval(() => {
- $(this).trigger("tick");
- }, 100000);
-
- }
-
- init() {
- // initailize globals
- this.$content = $("#splash-screen-content");
-
- // adjust each background image
- let $imgs = $('.splash-screen-img');
- let self = this;
- $imgs.each(function () {
- self.adjustBackground($(this));
- });
-
- // copy the default options into the effective
- $.extend(true, this.eff_opt, this.def_opt);
- $.extend(true, this.eff_opt, this.usr_opt);
-
- let ss = this.eff_opt["splash-screen"];
- if (typeof ss == "object") {
- // initilize global values if specfied in the config
- if (ss.filter == true) {
- $imgs.addClass("filter");
- }
- if (ss.vignette == true) {
- this.splash.$vignette = $("#vignette");
- this.splash.$vignette.show();
- }
- if (typeof ss.clock == "object") {
- this.initClock(ss.clock);
- }
-
- }
+<script src="js/jquery-ui.min.js"></script>
+<script src="js/materialize.min.js"></script>
+<!-- <script src="js/lightdm-sample.js"></script> -->
- /* trigger ready event to signigy init has completed and the
- login manager is ready */
- $(this).trigger("ready");
- }
+<!-- Load Utility functions -->
+<script src="js/_utils.js"></script>
- /**
- * Creates clock elements based on the usr config
- */
- initClock(opts) {
- if (typeof opts != "object")
- return -1;
- // handle arrays and a single clock object
- if (!Array.isArray(opts))
- opts = [opts];
+<!-- Load Plugins first -->
+<script src="js/splashscreen.js"></script>
+<!-- <script src="js/another_plugin.js"></script> -->
- for (let i in opts) {
- let $clock = $("<div class='clock'></div>");
- this.$content.append($clock);
- this.startClock($clock, opts[i]);
- }
- }
-
- /**
- * Applys the css specfied in the argument opts to the jQuery oboject $clock.
- * Subscribes the clock to a tick event
- */
- startClock($clock, opts) {
- if (typeof opts != "object") {
- console.error("Clock opts is not a valid object");
- return -1;
- }
- // handle multiple formats for multiple clocks on the same line
- if(typeof opts.format == "string")
- opts.format = [opts.format];
+<!-- Load Login Manager, depends on plugins -->
+<script src="js/LoginManager.js"></script>
- // ensure the format is now an array
- if(!Array.isArray(opts.format)) {
- console.error(`Specfied clock format is not a valid type.
- Type can be a single string or Array.`);
- return -1;
- }
-
- if(!Array.isArray(opts.css))
- opts.css = [opts.css];
-
- for (let i in opts.format) {
- // if (i >= opts.css.length)
- // break;
+<!-- Load example theme -->
+<script src="js/theme.js"></script>
- let $format = $("<sub></sub>");
- // create text field in clock
- $clock.append($format);
+<body>
+ <header></header>
+ <main>
+ <div class="container">
+ <div class="row" style="margin-top: 15vh;"></div>
- // apply css styles
- if (i < opts.css.length && typeof opts.css[i] == "object")
- $format.css(opts.css[i]);
-
- // start clock
- $format.text(moment().format(opts.format[i]));
- $(this).on("tick", () => {
- $format.text(moment().format(opts.format[i]));
- });
- }
-
- if (typeof opts["parent-css"] == "object")
- $clock.css(opts["parent-css"]);
- $clock.show();
- }
-
- /**
- * Scale an image up or down until it's larger than or equal to the viewport
- * and then center it.
- */
- adjustBackground ($img) {
- var viewportWidth = screen.width;
- var viewportHeight = screen.height;
- var viewportAspect = viewportWidth/viewportHeight;
- var imgWidth = $img.width();
- var imgHeight = $img.height();
- var imgAspect = imgWidth/imgHeight;
-
- /* First determine what is
- the limiting factor (ie. if the image is wider, then the height is
- is the limiting factor and needs to be adjustested */
- if (imgAspect < viewportAspect) {
- /* The view port is wider compared to its height than
- the image is compared to the image height meaning
- the width is the limiting dimension. Therefore we
- set image width = view ports width use the aspect
- ratio to set the correct height */
- $img.width(viewportWidth);
- $img.height(viewportWidth/imgAspect);
- } else {
- /* The image is wider than it is tall compared to the
- viewport so we adjust the to fit */
- $img.height(viewportHeight);
- $img.width(viewportHeight*imgAspect);
- }
- this.centerImage($img);
- }
-
- centerImage ($img) {
- var overlapWidth = $img.width() - screen.width;
- var overlapHeight = $img.height() - screen.height;
-
- console.log("overlapwidth: " + overlapWidth + " overlapHeight " + overlapHeight);
- // image overlaps viewport, move the image back
- // half the length of the overlap
- $img.css({
- position: "relative",
- right: overlapWidth/2,
- bottom: overlapHeight/2
- });
- }
-
- login(username, password, callback) {
- // set default values
- if (typeof lightdm == 'undefined') {
- console.warn("Cannot attempt login without lightdm");
- // call async so that events can be binded in cascade
- setTimeout(() => $(this).trigger("access-deny"));
- return;
- }
- username = username || lightdm.select_user;
- password = password || "";
- // session_key = session_key || lightdm.sessions[0].key;
-
- let auth_cb = () => {
- lightdm.respond(password);
- }
- let auth_complete_cb = () => {
- if (typeof callback == "function")
- callback(lightdm.is_authenticated);
-
- $(this).trigger(lightdm.is_authenticated ? "access-grant" : "access-deny");
- }
- window.show_prompt = auth_cb;
- window.authentication_complete = auth_complete_cb;
- lightdm.authenticate(username);
- }
-}
-
-// create singleton
-const greeter = new LoginManager();
+ <div class="row">
+ <div style="width: 100%; text-align: center" class="col s12">
+ <img class="" src="images/archlinux-logo.svg">
+ </div>
+ </div>
+ <div class="row" style="margin-top: 10vh;"></div>
+ <div class="row">
+ <div class="col s12" style="text-align: center">
+ <h1 class="welcome-text">Welcome back</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>User</label>
+ </div>
+ </div>
-$(document).ready(function() {
- greeter.init();
- greeter.login("jay", "");
- $(greeter).on("access-grant", () => {
- lightdm.start_session_sync("i3");
- }).on("access-deny", () => console.log("denied!"));
-});
+ <!-- Password field -->
+ <div class="row">
+ <div class="input-field col s4 offset-s4">
+ <input id="inputPassword" type="password">
+ <label for="inputPassword">Password</label>
+ </div>
+ </div>
+ <!-- End Password field -->
+ </div>
+ <!-- End User & Password Selections -->
-</script>
-<body id="body">
-<div class="container">
- <div id="splash-screen">
- <img class="splash-screen-img" src="images/splash-screen.jpg">
- <div class="vignette"></div>
- <div id="splash-screen-content">
- <!--<div id="clock"></div> -->
- </div>
- </div>
- <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>
+ </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>Select Session</label>
+ </div>
+ <!-- End Window Manager Select -->
+
+ <!-- Power button column -->
+ <div class="col right">
+ <div class="row">
+ <!-- Hibernate Button -->
+ <div id="buttonHibernate" class="col S4">
+ <svg viewBox="0 0 297.613 297.613" width="40px" height="40px" class="power-button">
+ <g>
+ <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
+ C157.807,54.898,153.777,50.869,148.807,50.869z"/>
+ <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
+ 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
+ C174.252,126.875,176.556,127.754,178.859,127.754z"/>
+ <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"
+ />
+ <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
+ 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"/>
+ <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
+ C157.807,186.336,153.777,182.307,148.807,182.307z"/>
+ <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
+ 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"/>
+ <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
+ C111.277,157.807,115.307,153.777,115.307,148.807z"/>
+ <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
+ 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"/>
+ <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
+ 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
+ S220.934,279.613,148.807,279.613z"/>
+ </g>
+ </svg>
+ <!-- <img id="buttonHibernate" class="right power-button" src="images/hibernate.svg" width="40px" height="40px"> -->
+ </div>
+ <!-- End Hibernate Button -->
+ <!-- Restart Button -->
+ <div id="buttonRestart" class="col s4">
+ <svg class="power-button" height="40px" width="40px" viewBox="0 0 1000 1000" >
+ <g>
+ <path d="M506,984.1c-98.1,0-192.5-29.2-273.1-84.4C154.1,845.9,93.6,770.9,
+ 57.6,682.9c-9.9-24.3-17.9-49.6-23.7-75.2c-3.2-13.9,5.5-27.7,
+ 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,
+ 742,191.6,809,262,857.2c72,49.3,156.4,75.3,244,75.3c238.5,0,432.5-194,
+ 432.5-432.5c0-238.5-194-432.5-432.5-432.5c-87.6,0-172,26-244,75.3C191.7,191,
+ 137.5,257.9,105.4,336.5C100,349.7,85,356,71.8,
+ 350.7c-13.2-5.4-19.5-20.4-14.1-33.6c35.9-88,96.5-162.9,
+ 175.2-216.8c80.6-55.2,175-84.3,273.1-84.3c129.3,0,250.8,50.4,
+ 342.3,141.8C939.6,249.1,990,370.7,990,500c0,129.3-50.4,250.9-141.8,
+ 342.3C756.8,933.7,635.2,984.1,506,984.1z"/>
+ <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,
+ 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,
+ 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,
+ 352.6,82.3,352.6z"/>
+ </g>
+ </svg>
+
+ <!-- <img id="buttonRestart" class="power-button" src="images/restart.svg" width="40px" height="40px"> -->
+ </div>
+ <!-- End Restart Button -->
+ <!-- Shutdown Button -->
+ <div id="buttonShutdown" class="col s4">
+
+ <svg class="power-button" height="40px" width="40px" viewBox="0 0 56 56">
+ <g>
+ <path d="M35.31,5.042c-0.532-0.155-1.085,0.15-1.24,0.68s0.149,
+ 1.085,0.68,1.24C44.906,9.932,52,19.405,52,30c0,13.233-10.767,
+ 24-24,24S4,43.233,4,30C4,19.392,11.105,9.915,21.279,
+ 6.953c0.53-0.154,0.835-0.709,0.681-1.239
+ c-0.153-0.53-0.708-0.839-1.239-0.681C9.698,8.241,2,18.508,2,
+ 30c0,14.337,
+ 11.663,26,26,26s26-11.663,26-26
+ C54,18.522,46.314,8.26,35.31,5.042z"/>
+ <path d="M28,27c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,
+ 0.447-1,1v25C27,
+ 26.553,27.447,27,28,27z"/>
+ </g>
+ </svg>
+ <!-- <img id="buttonShutdown" class="power-button" src="images/shutdown.svg" width="40px" height="40px"> -->
+ </div>
+ <!-- End Shutdown Button -->
</div>
+ </div>
+ <!-- End Power button column -->
</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.
- */
- var 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 {
- window.show_message("Authentication Failed", "error");
- setTimeout(window.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();
- };
+ </footer>
- /**
- * handle the input from the entry field.
- */
- window.handle_input = function() {
- // let entry = document.getElementById("entry");
- // lightdm.respond(entry.value);
- };
+ <script>
-
-// setTimeout(() => login("jay", "", () => {
-// for(var x = 0; x < lightdm.sessions.length; x++){
-// window.show_message(lightdm.sessions[x].key, "info");
-// }
-// ac("i3");
-// }) , 10);
-</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>
OSDN Git Service
