index.js

@@ -1,15 +1,8 @@
 const express = require('express');
 const app = express();
-const path = require('path');
-const router = express.Router();
-
-router.get('/',function(req,res){
-  res.sendFile(path.join(__dirname+'/page/index.html'));
-});
 
 app.use(express.static('page'));
 
-app.use('/', router);
+app.listen(process.env.port || 8080, () =>{
-app.listen(process.env.port || 8080);
+  console.log('Clock-Server is running');}
-
+)
-console.log('.');

package.json

@@ -4,7 +4,7 @@
   "description": "Hosts Global Cliffbreak Time",
   "main": "index.js",
   "scripts": {
-    "start": "node index.js"
+    "start": "node ."
   },
   "repository": {
     "type": "git",
@@ -13,8 +13,6 @@
   "author": "Alpha, SimGie",
   "license": "ISC",
   "dependencies": {
-    "express": "^4.16.4",
+    "express": "^4.16.4"
-    "path": "^0.12.7"
+  }
-  },
-  "devDependencies": {}
 }

page/css/clock.css

@@ -1,70 +1,67 @@
 /* If you want you can use font-face */
 @font-face {
-    font-family: 'BebasNeueRegular';
+  font-family: 'BebasNeueRegular';
-    src: url('BebasNeue-webfont.eot');
+  src: url('BebasNeue\ Regular.ttf') format('truetype');
-    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
+  font-weight: normal;
-         url('BebasNeue-webfont.woff') format('woff'),
+  font-style: normal;
-         url('BebasNeue-webfont.ttf') format('truetype'),
-         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
 }
 
-body, html {
+body,
+html {
   height: 100vh;
   width: 100vw;
   user-select: none;
 }
 
 .clock {
-    width: 800px;
+  width: 800px;
-    margin: 0 auto;
+  margin: 0 auto;
-    padding: 30px;
+  padding: 30px;
-    color: #fff;
+  color: #fff;
-    position: absolute;
+  position: absolute;
-    left: 50%;
+  left: 50%;
-    top: 50%;
+  top: 50%;
-    transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
-    overflow: hidden;
+  overflow: hidden;
-    z-index: 10;
+  z-index: 10;
-    opacity: 0;
+  opacity: 0;
-    animation-name: show;
+  animation-name: show;
-    animation-duration: 3s;
+  animation-duration: 3s;
-    animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
-    pointer-events: none;
+  pointer-events: none;
 }
 
 #date {
-    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+  font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
-    font-size: 36px;
+  font-size: 36px;
-    text-align: center;
+  text-align: center;
-    text-shadow: 0 0 5px #00c6ff;
+  text-shadow: 0 0 5px #00c6ff;
 
 }
 
 ul {
-    width: 800px;
+  width: 800px;
-    margin: 0 auto;
+  margin: 0 auto;
-    padding: 0px;
+  padding: 0px;
-    list-style: none;
+  list-style: none;
-    text-align: center;
+  text-align: center;
 }
 
 ul li {
-    display: inline;
+  display: inline;
-    font-size: 10em;
+  font-size: 10em;
-    text-align: center;
+  text-align: center;
-    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+  font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
-    text-shadow: 0 0 5px #00c6ff;
+  text-shadow: 0 0 5px #00c6ff;
 }
 
 .point {
-    position: relative;
+  position: relative;
-    padding-left: 10px;
+  padding-left: 10px;
-    padding-right: 10px;
+  padding-right: 10px;
-    animation: flash 1s ease infinite;
+  animation: flash 1s ease infinite;
-    top: -11px;
+  top: -11px;
-    opacity: 0;
+  opacity: 0;
 }
 
 @keyframes flash {
@@ -72,10 +69,12 @@ ul li {
     opacity: 0;
     text-shadow: none;
   }
+
   50% {
     opacity: 1.0;
     text-shadow: 0 0 20px #00c6ff;
   }
+
   100% {
     opacity: 0;
     text-shadow: none;
@@ -86,6 +85,7 @@ ul li {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

page/js/clock.js

@@ -1,28 +1,30 @@
-var offset = 49020000;
+const offset = 49020000;
 
 $(document).ready(function() {
 	// Create two variable with the names of the months and days in an array
-	var monthNames = [ "Januar" , "Febuar" , "M<EFBFBD>rz" , "April" , "Mai" , "Juni" , "Juli" , "August" , "September" , "Oktober" , "November" , "Dezember" ];
+	var monthNames = [ "Januar" , "Febuar" , "März" , "April" , "Mai" , "Juni" , "Juli" , "August" , "September" , "Oktober" , "November" , "Dezember" ];
 	var dayNames= [ "Sonntag" , "Montag" , "Dienstag" , "Mittwoch" , "Donnerstag" , "Freitag" , "Samstag" ];
 
 	timeTick();
 	setInterval(timeTick, 1000);
 
+	function twoDigits (n) {
+		return (n < 10 ? '0': '') + n;
+	}
 
 	function timeTick() {
 		$('.point').css('animation-name', 'none');
-		var date = new Date();
+		const date = new Date();
 		date.setTime(date.getTime() - offset);
 
-		var seconds = date.getSeconds();
+		const seconds = date.getSeconds();
-		var minutes = date.getMinutes();
+		const minutes = date.getMinutes();
-		var hours = date.getHours();
+		const hours = date.getHours();
-
+	
-
+		$('#date').html(dayNames[date.getDay()] + " " + date.getDate() + ' ' + monthNames[2] + ' ' + date.getFullYear());
-		$('#date').html(dayNames[date.getDay()] + " " + date.getDate() + ' ' + monthNames[date.getMonth()] + ' ' + date.getFullYear());
+		$("#sec").html(twoDigits(seconds));
-		$("#sec").html(( seconds  < 10 ? "0" : "" ) + seconds);
+		$("#min").html(twoDigits(minutes));
-		$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
+		$("#hours").html(twoDigits(hours));
-		$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
 
 		$('.point').css('animation-name', 'flash');
 	}