pcostesi/index.html

## index.html
<html>
<head>
<style>

.clock {
    border-radius: 5rem;
    width: 5rem;
    height: 5rem;
    border: 5px solid grey;
    position: relative;
}
.clock .hand {
    border-radius: 6px;
    border: 3px solid grey;
    height: 2rem;
    position: absolute;
    bottom: 50%;
    left: calc(50% - 3px);
    transform: rotateZ(0) translateY(3px);
    transform-origin: bottom center;
}
.clock .hand.hour {
    height: 1rem;
    transform: rotateZ(0) translateY(3px);
    transform-origin: bottom center;
}
</style>
</head>

<body>
<div class="clock">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div>

<script>
const clocky = (timestamp) => {
    const updateHand = (hand, deg) =>
        hand.style.transform = `rotateZ(${deg}deg) translateY(3px)`;

    const now = new Date()
    const offset = now.getTimezoneOffset()
    const minutes = (now / 1000 / 60) % 60
    const hours = ((now / 1000 /60 - offset) / 60) % 24

    const hourHands = [...document.querySelectorAll('.hand.hour')]
    const minuteHands = [...document.querySelectorAll('.hand.minute')]

    hourHands.forEach(hand => updateHand(hand, Math.floor(hours * 360 / 12)))
    minuteHands.forEach(hand => updateHand(hand, Math.floor(minutes * 360 / 60)))
    window.requestAnimationFrame(clocky)
}

window.requestAnimationFrame(clocky)
</script>
<body>
</html>
	<html>
	<head>
	<style>

	.clock {
	border-radius: 5rem;
	width: 5rem;
	height: 5rem;
	border: 5px solid grey;
	position: relative;
	}
	.clock .hand {
	border-radius: 6px;
	border: 3px solid grey;
	height: 2rem;
	position: absolute;
	bottom: 50%;
	left: calc(50% - 3px);
	transform: rotateZ(0) translateY(3px);
	transform-origin: bottom center;
	}
	.clock .hand.hour {
	height: 1rem;
	transform: rotateZ(0) translateY(3px);
	transform-origin: bottom center;
	}
	</style>
	</head>

	<body>
	<div class="clock">
	<div class="hand hour"></div>
	<div class="hand minute"></div>
	<div>

	<script>
	const clocky = (timestamp) => {
	const updateHand = (hand, deg) =>
	hand.style.transform = `rotateZ(${deg}deg) translateY(3px)`;

	const now = new Date()
	const offset = now.getTimezoneOffset()
	const minutes = (now / 1000 / 60) % 60
	const hours = ((now / 1000 /60 - offset) / 60) % 24

	const hourHands = [...document.querySelectorAll('.hand.hour')]
	const minuteHands = [...document.querySelectorAll('.hand.minute')]

	hourHands.forEach(hand => updateHand(hand, Math.floor(hours * 360 / 12)))
	minuteHands.forEach(hand => updateHand(hand, Math.floor(minutes * 360 / 60)))
	window.requestAnimationFrame(clocky)
	}

	window.requestAnimationFrame(clocky)
	</script>
	<body>
	</html>