123niel/Time-Service
1
0
Fork 0
forked from Cliffbreak/Time-Service
Code Issues Pull requests Releases Wiki Activity

Merge branch 'bessere-version-wie-von-moritz'

Browse source
This commit is contained in:
Niel 2019-01-22 13:09:03 +01:00
commit e5a718ace0
5 changed files with 64 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
index.js
View file

@ -1,15 +1,8 @@
const express = require('express'); const express = require('express');
const app = 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(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('.');

8
package.json
View file

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

BIN
page/css/BebasNeue Regular.ttf Executable file
View file

Binary file not shown.

88
page/css/clock.css
View file

@ -1,70 +1,67 @@
/* If you want you can use font-face */ /* If you want you can use font-face */
@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; height: 100vh;
width: 100vw; width: 100vw;
user-select: none; user-select: none;
} }
.clock { .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 { #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 { 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 { 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 { .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 { @keyframes flash {
@ -72,10 +69,12 @@ ul li {
opacity: 0; opacity: 0;
text-shadow: none; text-shadow: none;
} }
50% { 50% {
opacity: 1.0; opacity: 1.0;
text-shadow: 0 0 20px #00c6ff; text-shadow: 0 0 20px #00c6ff;
} }
100% { 100% {
opacity: 0; opacity: 0;
text-shadow: none; text-shadow: none;
@ -86,6 +85,7 @@ ul li {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }

26
page/js/clock.js
View file

@ -1,28 +1,30 @@
var offset = 49020000; const offset = 49020000;
$(document).ready(function() { $(document).ready(function() {
// Create two variable with the names of the months and days in an array // 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" ]; var dayNames= [ "Sonntag" , "Montag" , "Dienstag" , "Mittwoch" , "Donnerstag" , "Freitag" , "Samstag" ];
timeTick(); timeTick();
setInterval(timeTick, 1000); setInterval(timeTick, 1000);
function twoDigits (n) {
return (n < 10 ? '0': '') + n;
}
function timeTick() { function timeTick() {
$('.point').css('animation-name', 'none'); $('.point').css('animation-name', 'none');
var date = new Date(); const date = new Date();
date.setTime(date.getTime() - offset); 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'); $('.point').css('animation-name', 'flash');
} }