diff --git a/index.js b/index.js index 5b1c39c..6520916 100644 --- a/index.js +++ b/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); - -console.log('.'); \ No newline at end of file +app.listen(process.env.port || 8080, () =>{ + console.log('Clock-Server is running');} +) diff --git a/package.json b/package.json index 4697c28..fc10efe 100644 --- a/package.json +++ b/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", - "path": "^0.12.7" - }, - "devDependencies": {} + "express": "^4.16.4" + } } diff --git a/page/css/BebasNeue Regular.ttf b/page/css/BebasNeue Regular.ttf new file mode 100755 index 0000000..2fff54c Binary files /dev/null and b/page/css/BebasNeue Regular.ttf differ diff --git a/page/css/clock.css b/page/css/clock.css index 076fe1d..b00b746 100644 --- a/page/css/clock.css +++ b/page/css/clock.css @@ -1,70 +1,67 @@ /* If you want you can use font-face */ @font-face { - font-family: 'BebasNeueRegular'; - src: url('BebasNeue-webfont.eot'); - src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), - url('BebasNeue-webfont.woff') format('woff'), - url('BebasNeue-webfont.ttf') format('truetype'), - url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'BebasNeueRegular'; + src: url('BebasNeue\ Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; } -body, html { +body, +html { height: 100vh; width: 100vw; user-select: none; } .clock { - width: 800px; - margin: 0 auto; - padding: 30px; - color: #fff; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - overflow: hidden; - z-index: 10; - opacity: 0; - animation-name: show; - animation-duration: 3s; - animation-fill-mode: forwards; - pointer-events: none; + width: 800px; + margin: 0 auto; + padding: 30px; + color: #fff; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; + z-index: 10; + opacity: 0; + animation-name: show; + animation-duration: 3s; + animation-fill-mode: forwards; + pointer-events: none; } #date { - font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; - font-size: 36px; - text-align: center; - text-shadow: 0 0 5px #00c6ff; + font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; + font-size: 36px; + text-align: center; + text-shadow: 0 0 5px #00c6ff; } ul { - width: 800px; - margin: 0 auto; - padding: 0px; - list-style: none; - text-align: center; + width: 800px; + margin: 0 auto; + padding: 0px; + list-style: none; + text-align: center; } ul li { - display: inline; - font-size: 10em; - text-align: center; - font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; - text-shadow: 0 0 5px #00c6ff; + display: inline; + font-size: 10em; + text-align: center; + font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; + text-shadow: 0 0 5px #00c6ff; } .point { - position: relative; - padding-left: 10px; - padding-right: 10px; - animation: flash 1s ease infinite; - top: -11px; - opacity: 0; + position: relative; + padding-left: 10px; + padding-right: 10px; + animation: flash 1s ease infinite; + top: -11px; + 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; } diff --git a/page/js/clock.js b/page/js/clock.js index 687e9e8..256e016 100644 --- a/page/js/clock.js +++ b/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ä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(); - var minutes = date.getMinutes(); - var hours = date.getHours(); - - - $('#date').html(dayNames[date.getDay()] + " " + date.getDate() + ' ' + monthNames[date.getMonth()] + ' ' + date.getFullYear()); - $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); - $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); - $("#hours").html(( hours < 10 ? "0" : "" ) + hours); + const seconds = date.getSeconds(); + const minutes = date.getMinutes(); + const hours = date.getHours(); + + $('#date').html(dayNames[date.getDay()] + " " + date.getDate() + ' ' + monthNames[2] + ' ' + date.getFullYear()); + $("#sec").html(twoDigits(seconds)); + $("#min").html(twoDigits(minutes)); + $("#hours").html(twoDigits(hours)); $('.point').css('animation-name', 'flash'); }