<head>
<link rel="stylesheet" href="css/materialize.min.css">
<style>
- #splash-screen {
+ #splash-screen {
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
overflow: hidden;
+ background:-webkit-radial-gradient(center, ellipse cover,
+ #9e9e9e 0%, #757575 100%);
}
.clock {
display: none;
display: flex;
min-height: 100vh;
flex-direction: column;
- background-color: white;
+ background-color: #37474f;
+ background:-webkit-radial-gradient(center, ellipse cover,
+ rgba(55,71,79,1) 0%, rgba(38,50,56,1) 100%);
+ color: white;
overflow: hidden;
}
main {
flex: 1 0 auto;
}
+ input {
+ color: white;
+ }
+ .caret {
+ fill: grey !important;
+ }
.power-button {
- fill: black;
+ fill: white;
}
.power-button:hover {
fill: #01579b;
<script src="js/theme.js"></script>
<body>
- <!-- Debug Console -->
- <div id="console" class="row">
- <div class="col s3">
- <div class="row">
- <div class="switch">
- <label>
- <input type="checkbox" checked="true">
- <span class="lever"></span>
- Auto
- </label>
- </div>
- </div>
-
- <div class="row">
- <div class="input-field col ">
- <input id="inputEvent" >
- <label for="inputEvent">Event</label>
- </div>
- <a id="buttonTrigger" class="waves-effect waves-light btn">Trigger</a>
- </div>
-
- </div>
- <div class="col s9">
- <div contentEditable="true" class="terminal"></div>
- </div>
- </div>
-<!-- End Debug Console -->
-
<div id="splash-screen">
<!--TODO autogenerate this content -->
<img class="splash-screen-img" src="images/splash-screen.jpg">
</footer>
<script>
-const log = new logger();
+// hide enverything until fully loaded
+$("body").append(`<div id="block" style="position: absolute;background-color: black;
+width: 100%; height: 100vh; z-index:9999;"></div>`);
+
+// pass true to logger to show
+const log = new logger(true);
// create singleton
const greeter = new LoginManager();
}).on("inactive", function() {
$(".active-appear").fadeOut();
});
+
+ setTimeout(() => $("#block").remove(), 100);
});
class logger {
- constructor() {
+ constructor(show=false) {
+ if (show) $("body").prepend(` <!-- Debug Console -->
+ <div id="console" class="row">
+ <div class="col s3">
+ <div class="row">
+ <div class="switch">
+ <label>
+ <input type="checkbox" checked="true">
+ <span class="lever"></span>
+ Auto
+ </label>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="input-field col ">
+ <input id="inputEvent" >
+ <label for="inputEvent">Event</label>
+ </div>
+ <a id="buttonTrigger" class="waves-effect waves-light btn">Trigger</a>
+ </div>
+
+ </div>
+ <div class="col s9">
+ <div contentEditable="true" class="terminal"></div>
+ </div>
+ </div>
+ <!-- End Debug Console -->`);
+
window.onerror = (e) => {
this.error(e);
};
class LoginManager {
constructor() {
this.use_splash = true;
+
$(document).ready(() => {
this._init();
});
}
_init() {
- this.lightdm = typeof (lightdm) == "undefined" ? {} : lightdm;
+ this.lightdm = typeof(lightdm) == "undefined" ? {} : lightdm;
if (this.use_splash) {
this.splash = new SplashScreen();
}
- $(this).trigger("ready");
+ $(this.splash).on("ready", () => {
+ $(this).trigger("ready");
+ });
+
}
window.show_prompt = auth_cb;
window.authentication_complete = auth_complete_cb;
- if (typeof this.lightdm.authenticate != "function") {
- log.error("lighdm does not contain authenticate");
+ if (!this.lightdm.authenticate) {
+ log.error("lightdm does not contain authenticate");
$(this).trigger("deny");
return;
}