clock is working

diff --git a/index.html b/index.html
index ee860f1..e308ee0 100644 (file)
--- a/index.html
+++ b/index.html
@@ -14,8 +14,6 @@
         }
 
         body {
-            background: linear-gradient(transparent, SlateGray);
-            background-color: #ffffff;
             font-family: 'sans-serif';
             font-size: 24px;
         }
@@ -96,6 +94,12 @@
         input#entry:focus::placeholder {
             color: rgba(255, 255, 255, 0.3);
         }
+
+
+
+       body {
+               background-color: black;
+       }
        #splash-screen {
                width: 100%;
                height: 100%;
@@ -104,19 +108,21 @@
                overflow: hidden;
        }
        #clock {
-
+               display: none;
        }
-       .splash-screen-text {
-               position: relative;
-               top: -100%;
+       .splash-screen-content {
+               position: absolute;
+               width: 100%;
+               height: 100%;
+               top: 0;
        }
        .splash-screen-img {
 /*             height: 100%;
                width: 100%;*/:
                border: 8px solid red;
        }
-       .blur {
-               filter: blur(8px) contrast(127%) brightness(140%);
+       .filter{
+               filter: blur(15px) contrast(127%) brightness(80%);
        }
        .vignette {
                width: 100%;
@@ -181,55 +187,80 @@ var centerImage = function($img) {
 
 
 var usr_opt = {
-//     "clock": {
-//             "css": {
-//                     "color": "black"
-//             }
-//     }
+       "splash-screen":{
+               "filter": false,
+               "clock": {
+               }
+       }
 };
 var def_opt = {
        "splash-screen": {
                "fit": true,
                "filter": true,
-               "vignette": true
-       },
-       "clock": {
-               "format": "HH:MM",
-               "css": {        
-                       "color": "white",
-                       "text-align": "center",
-                       "font-size": "60pt",    
-                       "font-family": "Noto Sans"
+               "vignette": true,
+               "clock": {
+                       "format": "LT",
+                       "css": {        
+                               "color": "white",
+                               "text-align": "center",
+                               "font-size": "60pt",    
+                               "font-family": "Noto Sans",
+                               "margin-top": "calc(50vh - 90pt)",
+                               "text-shadow": "rgba(0, 0, 0, 0.8) 0px 7px 10px",
+                       }
                }
        }
 };
 var eff_opt = {};
-var initClock = function() {
-       var $clock = $("#clock");       
+var $ss_clock;
+var $vignette;
 
-       if (!eff_opt["clock"]) {
-               $clock.hide();
-               return;
-       }
-
-       // apply css styles
-       $clock.css(eff_opt.clock.css);
 
-       if (eff_opt.clock.css.color) {
+var initClock = function($clock, opts) {
 
+       if (typeof opts != "object") {
+               return -1;
        }
+       $clock.show();
+       console.log("hi");
+       
+       // apply css styles
+       $clock.css(opts.css);
+       
+       // start clock
+       $clock.text(moment().format(opts.format || def_opt.clock.format));
+       setInterval(() => {
+               $clock.text(moment().format(opts.format || def_opt.clock.format));
+       }, 500);
+       console.log(opts);
+
 
 }
 var init = function() {
-       $('.splash-screen-img').each(function () {
+       // initilize golbal values
+       $vignette = $("#vignette");
+       $ss_clock = $("#clock");
+
+       // adjust each background image
+       let $imgs = $('.splash-screen-img');
+       $imgs.each(function () {
                adjustBackground($(this));
        });
-
        // copy the default options into the effective
        $.extend(true, eff_opt, def_opt);               
        $.extend(true, eff_opt, usr_opt);
        console.log(eff_opt);                   
-       initClock();
+
+       let ss = eff_opt["splash-screen"]
+       if (typeof ss == "object") {
+               if (ss.filter == true)
+                       $imgs.addClass("filter");       
+               if (ss.vignette == true)
+                       $vignette.show();
+               if (typeof ss.clock == "object")
+                       initClock($ss_clock, ss.clock);
+       }
+
 }
 $(document).ready(function() {
        init(); 
@@ -239,9 +270,9 @@ $(document).ready(function() {
 <body id="body">
 <div class="container">
        <div id="splash-screen">
-               <img class="splash-screen-img blur" src="images/splash-screen.jpg"> 
+               <img class="splash-screen-img" src="images/splash-screen.jpg"> 
                <div class="vignette"></div>
-               <div class="splash-screen-text">
+               <div class="splash-screen-content">
                        <div id="clock">12:48</div>     
                </div>
        </div>