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 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('.');
app.listen(process.env.port || 8080, () =>{
console.log('Clock-Server is running');}
)

8
package.json
View file

@ -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"
}
}

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 */
@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;
}

26
page/js/clock.js
View file

@ -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();
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');
}