Cliffbreak/Time-Service
3
1
Fork 1
Code Issues Pull requests Releases Wiki Activity

Add time offset, reorganize, snyc animation

Browse source
This commit is contained in:
Simon Giesel 2017-10-05 20:36:35 +02:00
parent a78be47e6b
commit 7ab487a831
7 changed files with 55 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
css/clock.css
View file

@ -28,12 +28,11 @@ body, html {
z-index: 10; z-index: 10;
opacity: 0; opacity: 0;
animation-name: show; animation-name: show;
animation-delay: 3s;
animation-duration: 3s; animation-duration: 3s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
#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;
@ -57,27 +56,28 @@ ul li {
text-shadow: 0 0 5px #00c6ff; text-shadow: 0 0 5px #00c6ff;
} }
#point { .point {
position: relative; position: relative;
animation: mymove 1s ease infinite;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
animation: flash 1s ease infinite;
top: -11px;
opacity: 0;
} }
/* Simple Animation */ @keyframes flash {
@keyframes mymove {
0% { 0% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
50% {
opacity: 0; opacity: 0;
text-shadow: none; text-shadow: none;
} }
100% { 50% {
opacity: 1.0; opacity: 1.0;
text-shadow: 0 0 20px #00c6ff; text-shadow: 0 0 20px #00c6ff;
} }
100% {
opacity: 0;
text-shadow: none;
}
} }
@keyframes show { @keyframes show {
@ -87,5 +87,4 @@ ul li {
100% { 100% {
opacity: 1; opacity: 1;
} }
} }

15
index.php → index.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<title>Global Cliffbreak Time</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="css/style.css"> <link rel="stylesheet" media="screen" href="css/style.css">
@ -8,8 +9,8 @@
</head> </head>
<script src="plugins/jquery-3.2.1.min.js"></script> <script src="js/jquery-3.2.1.min.js"></script>
<script src="plugins/clock.js"></script> <script src="js/clock.js"></script>
<body> <body>
@ -17,18 +18,18 @@
<div id="particles-js"></div> <div id="particles-js"></div>
<div class="clock"> <div class="clock">
<div id="Date"></div> <div id="date"></div>
<ul> <ul>
<li id="hours"></li> <li id="hours"></li>
<li id="point">:</li> <li class="point">:</li>
<li id="min"></li> <li id="min"></li>
<li id="point">:</li> <li class="point">:</li>
<li id="sec"></li> <li id="sec"></li>
</ul> </ul>
</div> </div>
<script src="particles.js"></script> <script src="js/particles.js"></script>
<script src="load.js"></script> <script src="js/load.js"></script>
</body> </body>
</html> </html>

29
js/clock.js Normal file
View file

@ -0,0 +1,29 @@
$(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 dayNames= [ "Sonntag" , "Montag" , "Dienstag" , "Mittwoch" , "Donnerstag" , "Freitag" , "Samstag" ];
var offset = 49020000;
timeTick();
setInterval(timeTick, 1000);
function timeTick() {
$('.point').css('animation-name', 'none');
var 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);
$('.point').css('animation-name', 'flash');
}
})

0
plugins/jquery-3.2.1.min.js → js/jquery-3.2.1.min.js vendored
View file

0
load.js → js/load.js
View file

0
particles.js → js/particles.js
View file

34
plugins/clock.js
View file

@ -1,34 +0,0 @@
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"]
// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval( function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
setInterval( function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
});