.1 | <?php $size = $_GET['size']??20; ?>
.2 | <!DOCTYPE html><html><meta name="viewport" content="width=device-width, initial-scale=1"><head><style>
.3 | html{background:#dfd;font-family:monospace}.x{font-family:serif}
.4 | a{color:#08f}a:visited{color:#f0f}
.5 | .r{width:5em;height:1.25em;font-family:serif;
.6 | background:#040;color:lime;font-size:<?php echo $size; ?>px;
.7 | position:relative;
.8 | border-bottom:8px solid #930}
.9 | /* Setup classes for different speeds */
10 | <?php
11 | # Calibrate to timezones
12 | if(!empty($_GET['t'])){$t=floatval($_GET['t']);}else{$t=0;}
13 | $chime=(time()-(86400-$t*3600));
14 |
15 | for($i=0;$i<24;$i++){echo'.e'.$i.'{animation:s 86400s linear infinite;animation-delay:'.(0-(($chime+1)%86400)-($i*3600)).'s;opacity:0;font-size:0.1px}';}
16 | for($i=0;$i<6;$i++){echo'.d'.$i.'{animation:k 3600s linear infinite;animation-delay:'.(0-(($chime-2998)%3600)-($i*600)).'s;opacity:0;font-size:0.1px}';}
17 | for($i=0;$i<10;$i++){echo'.c'.$i.'{animation:c 600s linear infinite;animation-delay:'.(0-(($chime-538)%600)-($i*60)).'s;opacity:0;font-size:0.1px}';}
18 | for($i=0;$i<6;$i++){echo'.b'.$i.'{animation: i 60s linear infinite;animation-delay:'.(0-(($chime-27)%60)-($i*10)).'s;opacity:0;font-size:0.1px}';}
19 | for($i=0;$i<10;$i++){echo'.a'.$i.'{animation:t 10s linear infinite;animation-delay:'.((10-($chime-27)%10)-$i).'s;opacity:0;font-size:0.1px}';} ?>
20 |
21 | <?php
22 | $t='
23 | /*Change numbers, tks to experimentation or math*/
24 | @keyframes t{
25 | 0%{opacity:1;font-size:'.$size.'px}
26 | 9.98%{opacity:1;font-size:'.$size.'px}
27 | 9.99%{opacity:0;font-size:'.$size.'px}
28 | 10%{opacity:0;font-size:0.1px}}
29 |
30 | @keyframes i{
31 | 35%{opacity:0;font-size:0.01px}
32 | 35.1%{opacity:0;font-size:'.$size.'px}
33 | 35.2%{opacity:1;font-size:'.$size.'px}
34 | 51.7%{opacity:1;font-size:'.$size.'px}
35 | 51.8%{opacity:0;font-size:'.$size.'px}
36 | 51.9%{opacity:0;font-size:0.1px}}
37 |
38 | @keyframes c{
39 | 0%{opacity:0;font-size:0.1px}
40 | 0.01%{opacity:0;font-size:'.$size.'px}
41 | 0.02%{opacity:1;font-size:'.$size.'px}
42 | 10.01%{opacity:1;font-size:'.$size.'px}
43 | 10.02%{opacity:0;font-size:'.$size.'px}
44 | 10.03%{opacity:0;font-size:0.1px}}
45 |
46 | @keyframes k{
47 | 0%{opacity:0;font-size:0.1px}
48 | 0.01%{opacity:0;font-size:'.$size.'px}
49 | 0.02%{opacity:1;font-size:'.$size.'px}
50 | 16.67%{opacity:1;font-size:'.$size.'px}
51 | 16.68%{opacity:0;font-size:'.$size.'px}
52 | 16.69%{opacity:0;font-size:0.1px}}
53 |
54 | @keyframes s{
55 | 0%{opacity:0;font-size:0.1px}
56 | 0.0001%{opacity:0;font-size:'.$size.'px}
57 | 0.0002%{opacity:1;font-size:'.$size.'px}
58 | 4.1657%{opacity:1;font-size:'.$size.'px}
59 | 4.1658%{opacity:0;font-size:'.$size.'px}
60 | 4.1659%{opacity:0;font-size:0.1px}}'; if(empty($_GET['hide'])){echo$t;}else{echo str_replace("20px","180px;color:#000",$t);}?>
61 | </style></head><body>
62 | <div style="background:#8f8;margin:3em;display:inline-block;padding:0.3em;max-width:72em"><div class="r"> <span class="e0">0</span><?php
63 | for($i=0;$i<15;$i++){echo'<span class="e'.$i.'">'.((24-$i)%24).':</span>';}
64 | for($i=15;$i<24;$i++){echo'<span class="e'.$i.'">0'.(24-$i).':</span>';}
65 | for($i=0;$i<6;$i++){echo'<span class="d'.$i.'">'.(5-$i).'</span>';}
66 | for($i=0;$i<10;$i++){echo'<span class="c'.$i.'">'.(9-$i).':</span>';}
67 | for($i=0;$i<6;$i++){echo'<span class="b'.$i.'">'.(5-$i).'</span>';}
68 | for($i=0;$i<10;$i++){echo'<span class="a'.$i.'">'.(9-$i).'</span>';} ?></div>
69 | <?php
70 | if(empty($_GET['size'])||isset($_GET['size'])&&$_GET['size']==20){$change = '<a href="67.php?size=150&t='.($_GET['t'] ?? 0 ).'">go big</a>';}else{$change = '<a href="67.php?size=20&t='.($_GET['t'] ?? 0 ).'">go to a normal size</a>';}
71 |
72 | if(empty($_GET['hide'])){echo'An experimental clock with only CSS, calibrated by PHP. It seems synced with UTC\'s reality. Math saved me from experimenting repeatedly with the leftmost digits. Feel free to <a href="source.php?f=67.php">view the source</a>, '.$change.', or <a href="67.php?t='.(($_GET['t']??0)+1).'&size='.($_GET['size']??20).'">use the TimeZone feature</a>';} ?>
73 | </div></body></html>