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; font-style: normal;
} }
.container { body, html {
width: 960px; height: 100vh;
margin: 0 auto; width: 100vw;
overflow: hidden;
} }
.clock { .clock {
width: 800px; width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 30px; padding: 30px;
color: #fff; 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 { #Date {
@ -50,42 +59,33 @@ ul li {
#point { #point {
position: relative; position: relative;
-moz-animation: mymove 1s ease infinite; animation: mymove 1s ease infinite;
-webkit-animation: mymove 1s ease infinite;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
/* Simple Animation */ /* Simple Animation */
@-webkit-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;
}
}
@-moz-keyframes mymove {
0% { 0% {
opacity: 1.0; opacity: 1.0;
text-shadow: 0 0 20px #00c6ff; text-shadow: 0 0 20px #00c6ff;
} }
50% { 50% {
opacity: 0; opacity: 0;
text-shadow: none; text-shadow: none;
} }
100% { 100% {
opacity: 1.0; opacity: 1.0;
text-shadow: 0 0 20px #00c6ff; 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 container ---- */
#particles-js{ #particles-js{
width: 100%; width: 100vw;
height: 100%; height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: #000000; background-color: #000000;
background-image: url(''); background-image: url('');
background-size: cover; background-size: cover;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; 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 src="plugins/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").fadeIn(3000);
});
</script>
<script src="plugins/clock.js"></script> <script src="plugins/clock.js"></script>
<body> <body>
<div id="particles-js"> <div id="particles-js"></div>
<div class="clock">
<div id="div1" class="cliff">
<div class="clock">
<div id="Date"></div> <div id="Date"></div>
<ul> <ul>
<li id="hours"></li> <li id="hours"></li>
@ -35,12 +25,8 @@ $(document).ready(function(){
<li id="point">:</li> <li id="point">:</li>
<li id="sec"></li> <li id="sec"></li>
</ul> </ul>
</div>
</div><br>
</div> </div>
<script src="particles.js"></script> <script src="particles.js"></script>
<script src="load.js"></script> <script src="load.js"></script>

2
plugins/clock.js
View file

@ -2,7 +2,7 @@
$(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 = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 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 // Create a newDate() object
var newDate = new Date(); var newDate = new Date();