This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).
wget 'https://lists2.roe3.org/mdrone/stationclock/css.css'/* Centering stuff is not hard. */
body {
margin: 0;
background: silver;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}
/* The frame and the face of the clock */
div {
--size: 80vmin;
height: var(--size);
width: var(--size);
border: calc( var(--size) / 14 ) solid black;
border-radius: 50%;
box-sizing: border-box;
background: whitesmoke;
}
/* By default all hands point up */
[id^="anim-clock"] {
rotate: 0deg;
transform-origin: 50%;
transition: .1s;
transition-timing-function: cubic-bezier(.17,.67,1,1.5);
}
/*
Animates 60 steps in 58 seconds
On page load a delay is set which somewhat corresponds with the current seconds
*/
.ticking [id="anim-clock-second-hand"] {
animation-name: ticking;
animation-duration: 58s;
animation-timing-function: steps(60);
animation-fill-mode: forwards;
animation-delay: calc( (58 - var(--delay)) * -1s);
}
/* Minutes and hours respond to a simple change of custom attributes
set by javascript */
[id="anim-clock-minute-hand"] {
rotate: calc( var(--m) * 6deg );
}
[id="anim-clock-hour-hand"] {
rotate: calc( var(--h) * 30deg + var(--m) * .5deg );
}
/*
A hack.
Without it, when the minute hand goes from 59 to 0, it would rotate backwards.
Now it doesn’t animate, which is almost not noticeable, and a bit less annoying.
Works with the hour hand as well.
*/
[style*="--m: 0"] [id^="anim-clock"] {
transition: 0s;
}
/*
Very annoying, but this is, for now, the only way to
transition between steps() in a keyframe animation.
Had to write out every percentage.
*/
@keyframes ticking {
0% {
rotate: 0deg;
animation-timing-function: ease;
}
1.66666666% {
rotate: 6deg;
animation-timing-function: ease;
}
3.33333333% {
rotate: 12deg;
animation-timing-function: ease;
}
5% {
rotate: 18deg;
animation-timing-function: ease;
}
6.66666666% {
rotate: 24deg;
animation-timing-function: ease;
}
8.33333333% {
rotate: 30deg;
animation-timing-function: ease;
}
10% {
rotate: 36deg;
animation-timing-function: ease;
}
11.66666666% {
rotate: 42deg;
animation-timing-function: ease;
}
13.33333333% {
rotate: 48deg;
animation-timing-function: ease;
}
15% {
rotate: 54deg;
animation-timing-function: ease;
}
16.66666666% {
rotate: 60deg;
animation-timing-function: ease;
}
18.33333333% {
rotate: 66deg;
animation-timing-function: ease;
}
20% {
rotate: 72deg;
animation-timing-function: ease;
}
21.66666666% {
rotate: 78deg;
animation-timing-function: ease;
}
23.33333333% {
rotate: 84deg;
animation-timing-function: ease;
}
25% {
rotate: 90deg;
animation-timing-function: ease;
}
26.66666666% {
rotate: 96deg;
animation-timing-function: ease;
}
28.33333333% {
rotate: 102deg;
animation-timing-function: ease;
}
30% {
rotate: 108deg;
animation-timing-function: ease;
}
31.66666666% {
rotate: 114deg;
animation-timing-function: ease;
}
33.33333333% {
rotate: 120deg;
animation-timing-function: ease;
}
35% {
rotate: 126deg;
animation-timing-function: ease;
}
36.66666666% {
rotate: 132deg;
animation-timing-function: ease;
}
38.33333333% {
rotate: 138deg;
animation-timing-function: ease;
}
40% {
rotate: 144deg;
animation-timing-function: ease;
}
41.66666666% {
rotate: 150deg;
animation-timing-function: ease;
}
43.33333333% {
rotate: 156deg;
animation-timing-function: ease;
}
45% {
rotate: 162deg;
animation-timing-function: ease;
}
46.66666666% {
rotate: 168deg;
animation-timing-function: ease;
}
48.33333333% {
rotate: 174deg;
animation-timing-function: ease;
}
50% {
rotate: 180deg;
animation-timing-function: ease;
}
51.66666666% {
rotate: 186deg;
animation-timing-function: ease;
}
53.33333333% {
rotate: 192deg;
animation-timing-function: ease;
}
55% {
rotate: 198deg;
animation-timing-function: ease;
}
56.66666666% {
rotate: 204deg;
animation-timing-function: ease;
}
58.33333333% {
rotate: 210deg;
animation-timing-function: ease;
}
60% {
rotate: 216deg;
animation-timing-function: ease;
}
61.66666666% {
rotate: 222deg;
animation-timing-function: ease;
}
63.33333333% {
rotate: 228deg;
animation-timing-function: ease;
}
65% {
rotate: 234deg;
animation-timing-function: ease;
}
66.66666666% {
rotate: 240deg;
animation-timing-function: ease;
}
68.33333333% {
rotate: 246deg;
animation-timing-function: ease;
}
70% {
rotate: 252deg;
animation-timing-function: ease;
}
71.66666666% {
rotate: 258deg;
animation-timing-function: ease;
}
73.33333333% {
rotate: 264deg;
animation-timing-function: ease;
}
75% {
rotate: 270deg;
animation-timing-function: ease;
}
76.66666666% {
rotate: 276deg;
animation-timing-function: ease;
}
78.33333333% {
rotate: 282deg;
animation-timing-function: ease;
}
80% {
rotate: 288deg;
animation-timing-function: ease;
}
81.66666666% {
rotate: 294deg;
animation-timing-function: ease;
}
83.33333333% {
rotate: 300deg;
animation-timing-function: ease;
}
85% {
rotate: 306deg;
animation-timing-function: ease;
}
86.66666666% {
rotate: 312deg;
animation-timing-function: ease;
}
88.33333333% {
rotate: 318deg;
animation-timing-function: ease;
}
90% {
rotate: 324deg;
animation-timing-function: ease;
}
91.66666666% {
rotate: 330deg;
animation-timing-function: ease;
}
93.33333333% {
rotate: 336deg;
animation-timing-function: ease;
}
95% {
rotate: 342deg;
animation-timing-function: ease;
}
96.66666666% {
rotate: 348deg;
animation-timing-function: ease;
}
98.33333333% {
rotate: 354deg;
animation-timing-function: ease;
}
100% {
rotate: 360deg;
animation-timing-function: ease;
}
}
/* You have reached the end! */wget 'https://lists2.roe3.org/mdrone/stationclock/index.html'<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Station clock</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div>
<!--
Thank you, wikimedia
https://commons.wikimedia.org/wiki/File:Animated_clock.svg
-->
<svg viewBox="0 0 800 800">
<use transform="matrix(-1,0,0,1,800,0)" xlink:href="#one-half"/>
<g id="one-half">
<g id="one-fourth">
<path d="m400 40v107" stroke="#000" stroke-width="26.7"/>
<g id="one-twelfth">
<path d="m580 88.233-42.5 73.612" stroke="#000" stroke-width="26.7"/>
<g id="one-thirtieth">
<path id="one-sixtieth" d="m437.63 41.974-3.6585 34.808" stroke="#000" stroke-width="13.6" />
<use transform="rotate(6 400 400)" xlink:href="#one-sixtieth"/>
</g>
<use transform="rotate(12 400 400)" xlink:href="#one-thirtieth"/>
</g>
<use transform="rotate(30 400 400)" xlink:href="#one-twelfth"/>
<use transform="rotate(60 400 400)" xlink:href="#one-twelfth"/>
</g>
<use transform="rotate(90 400 400)" xlink:href="#one-fourth"/>
</g>
<path id="anim-clock-hour-hand" d="m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z" />
<path id="anim-clock-minute-hand" d="M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z" />
<path id="anim-clock-second-hand" fill="#a40000" d="M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z" />
</svg>
</div>
<script src="js.js"></script>
</body>
</html>
wget 'https://lists2.roe3.org/mdrone/stationclock/js.js'function tick(){
// get the current time
var now = new Date(Date.now());
var nowMinute = now.getMinutes();
var nowHour = now.getHours() % 12;
var nowSecond = now.getSeconds();
// here I try to start the second hand *exactly* at 00 seconds
// keep looping every .01 seconds until it’s 00 seconds
// This is only triggered in the last second of a minute
if(nowSecond > 58) {
//remove the ticking CSS animation
document.body.classList.remove('ticking');
//repeat this function every 10th of a second until it’s a whole minute.
setTimeout(tick,10);
}
// This part is usually triggered when it’s 00 seconds
// And on page load
else if(nowSecond < 59) {
document.body.style.setProperty('--s',nowSecond);
document.body.style.setProperty('--m',nowMinute);
document.body.style.setProperty('--h',nowHour);
/* This is used on page load, to set the seconds hand
in the right position */
countTo58 = (58 - nowSecond);
document.body.style.setProperty('--delay',countTo58);
/* Add the class .ticking to start the ticking CSS animation, indeed */
document.body.classList.add('ticking');
//Repeat this function around 2 seconds before the whole minute
setTimeout(tick,(countTo58*1000));
}
}
tick();