(hopefully) fixed time + added cool stuff

Author: Yukaru-san

html/index.html

@@ -256,12 +256,15 @@ <h3 class="header">And there is literally nothing to be seen here either</h3>
 
     <br>
     <h2 class="header">Time you have already wasted on this page</h2>
-  
     <br>
 
+    <div id = "innerDIV">
+
+    </div>
+
     <!-- CLOCK -->
 
-    <div class="clock">
+    <div class="clock" id = "clockDIV">
       <div class="container-fluid">
         <div class="row">
 
@@ -322,7 +325,7 @@ <h2 class="header">Time you have already wasted on this page</h2>
 
   <!-- DECIMAL -->
 
-    <div class="dec">
+    <div class="dec" id = "numberDIV">
       <div class="container-fluid">
         <div class="row">
 

html/static/index/js/app.js

@@ -1,13 +1,20 @@
 // Prevent text marking on this page
 onselectstart = (e) => {e.preventDefault()}
 
-/* this JS handles the binary clock */
-var startTime = new Date().getTime();
+// Start date
+var d = new Date();
+// Covert current time to UTC
+var startTime = d.getTime() + d.getTimezoneOffset() * 60000;
+
+// Timer
+var timer;
 
 var main = function() {
 
-    window.setInterval(function() {clock()}, 1000);
+    // Update everys 1000 ms
+    timer = window.setInterval(function() {clock()}, 1000);
 
+    // Pre-Setup to make everything nice and dark
     var lighting = function(n,t) {
       if(n == 1) {
         $('.'+t+'-1').addClass('on').removeClass('off');
@@ -73,27 +80,60 @@ var main = function() {
     };
 
     var clock = function() {
-  
-      var currentTime = new Date(new Date().getTime() - startTime)
 
-      var hours = currentTime.getHours()-1;
-      var minutes = currentTime.getMinutes();
-      var seconds = currentTime.getSeconds();
-  
+      // Current Time
+      var d2 = new Date();
+      var currentTime = d2.getTime() + (d2.getTimezoneOffset() * 60000) - startTime;
+      
+      // Convert miliseconds
+      var seconds = currentTime / 1000;
+      var minutes = seconds / 60;
+      var hours = minutes / 60;
+
+      // Get within current limits
+      seconds = Math.floor(seconds % 60);
+      minutes = Math.floor(minutes % 60);
+      hours = Math.floor(hours % 24);
+
+      hours = 30;
+
+      // No-Life protection
+      if (hours >= 30) {
+        document.getElementById("clockDIV").innerHTML = "";
+        document.getElementById("numberDIV").innerHTML = "";
+
+        // Get some help.
+        var timeMsg = document.createElement("h1");
+        timeMsg.innerHTML = " > 30 GODDAMNED HOURS!";
+
+        var helpMsg = document.createElement("h3");
+        helpMsg.innerHTML = "If you didn't cheat on archiving this amount of time<br> you should really go out and get some help."
+        helpMsg.style.textAlign = "center";
+        helpMsg.style.color = "#4f4f66"
+
+        document.getElementById("innerDIV").appendChild(timeMsg);
+        document.getElementById("innerDIV").appendChild(helpMsg);
+
+        window.clearInterval(timer);
+      } 
+
+      // Calculate the binary lights
       var s2 = seconds % 10;
       var s1 = (seconds - s2) / 10 % 10;
       var m2 = minutes % 10;
       var m1 = (minutes - m2) / 10 % 10;
       var h2 = hours % 10;
       var h1 = (hours - h2) / 10 % 10;
 
+      // Make it bright (or dark lol)
       lighting(s2, 's-2');
       lighting(s1, 's-1');
       lighting(m2, 'm-2');
       lighting(m1, 'm-1');
       lighting(h2, 'h-2');
       lighting(h1, 'h-1');
 
+      // Display time number
       $('.dec-hour1 p').text(h1);
       $('.dec-hour2 p').text(h2);
       $('.dec-minute1 p').text(m1);