<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" c>
<title>Analog Clock</title>
<style>
/* Reset and Center Layout */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Clock Face Configuration */
.clock {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* Center Pivot Point */
.clock::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
/* Generic Hand Settings */
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom; /* Rotates from the center of the clock */
transform: translateX(-50%) rotate(0deg);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Specific Hand Styles */
.hour {
width: 6px;
height: 25%;
}
.minute {
width: 4px;
height: 38%;
}
.second {
width: 2px;
height: 45%;
}
/* Visual Hour Markers */
.marker {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 1.25rem;
font-weight: bold;
}
.m12 { transform: rotate(0deg); }
.m3 { transform: rotate(90deg); }
.m6 { transform: rotate(180deg); }
.m9 { transform: rotate(270deg); }
</style>
</head>
<body>
<!-- HTML Structure -->
<div class="clock">
<!-- Hour Markers -->
<div class="marker m12">12</div>
<div class="marker m3">3</div>
<div class="marker m6">6</div>
<div class="marker m9">9</div>
<!-- Clock Hands -->
<div class="hand hour" id="hour-hand"></div>
<div class="hand minute" id="minute-hand"></div>
<div class="hand second" id="second-hand"></div>
</div>
<!-- JavaScript Functionality -->
<script>
const hourHand = document.getElementById('hour-hand');
const minuteHand = document.getElementById('minute-hand');
const secondHand = document.getElementById('second-hand');
function updateClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
// Calculate the degree rotations
const secondDegrees = (seconds / 60) * 360;
const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6);
const hourDegrees = ((hours % 12) / 12) * 360 + ((minutes / 60) * 30);
// Apply CSS transformations
secondHand.style.transform = `translateX(-50%) rotate(${secondDegrees}deg)`;
minuteHand.style.transform = `translateX(-50%) rotate(${minuteDegrees}deg)`;
hourHand.style.transform = `translateX(-50%) rotate(${hourDegrees}deg)`;
}
// Run the clock immediately and update every second
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>