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

s1

Browse source
This commit is contained in:
Alpha 2017-08-23 19:24:50 +02:00
parent ad21f5a5af
commit c379a4cf92
4 changed files with 46 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
css/clock.css
View file

@ -10,18 +10,27 @@
font-style: normal;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
body, html {
height: 100vh;
width: 100vw;
}
.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-delay: 3s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#Date {
@ -50,42 +59,33 @@ ul li {
#point {
position: relative;
-moz-animation: mymove 1s ease infinite;
-webkit-animation: mymove 1s ease infinite;
animation: mymove 1s ease infinite;
padding-left: 10px;
padding-right: 10px;
}
/* Simple Animation */
@-webkit-keyframes mymove {
0% {opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
50% {
opacity: 0;
text-shadow: none;
}
100% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
}
@-moz-keyframes mymove {
@keyframes mymove {
0% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
50% {
opacity: 0;
text-shadow: none;
}
100% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
};
}
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

25
css/style.css
View file

@ -42,29 +42,14 @@ canvas{
/* ---- particles.js container ---- */
#particles-js{
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: #000000;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.cliff{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 30%;
width: 50%;
display:none
}

20
index.php
View file

@ -9,24 +9,14 @@
<script src="plugins/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").fadeIn(3000);
});
</script>
<script src="plugins/clock.js"></script>
<body>
<div id="particles-js">
<div id="particles-js"></div>
<div id="div1" class="cliff">
<div class="clock">
<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
@ -35,12 +25,8 @@ $(document).ready(function(){
<li id="point">:</li>
<li id="sec"></li>
</ul>
</div>
</div><br>
</div>
<script src="particles.js"></script>
<script src="load.js"></script>

2
plugins/clock.js
View file

@ -2,7 +2,7 @@
$(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= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var dayNames= ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"]
// Create a newDate() object
var newDate = new Date();