<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffffff;
font-family: Arial, sans-serif;
}

.clock {
width: 300px;
height: 300px;
border: 10px solid #333;
border-radius: 50%;
position: relative;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom center;
background-color: #333;
border-radius: 50% 50% 0 0;
transform: translateX(-50%);
z-index: 10;
}

.hour {
width: 6px;
height: 80px;
}

.minute {
width: 4px;
height: 100px;
background-color: #666;
}

.second {
width: 2px;
height: 110px;
background-color: #d32f2f;
z-index: 20;
}

.center-dot {
width: 16px;
height: 16px;
background-color: #333;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 30;
}

.marker {
position: absolute;
width: 4px;
height: 10px;
background-color: #333;
left: 50%;
transform: translateX(-50%);
}

.marker[data-hour="12"] { top: 15px; }
.marker[data-hour="3"] { top: 50%; right: 15px; transform: rotate(90deg) translateX(0); transform-origin: center; }
.marker[data-hour="6"] { bottom: 15px; }
.marker[data-hour="9"] { top: 50%; left: 15px; transform: rotate(-90deg) translateX(0); transform-origin: center; }

.marker:nth-child(2) { top: 15px; } /* 12 */
.marker:nth-child(3) { right: 15px; top: 50%; transform: rotate(90deg); } /* 3 */
.marker:nth-child(4) { bottom: 15px; } /* 6 */
.marker:nth-child(5) { left: 15px; top: 50%; transform: rotate(-90deg); } /* 9 */

/* Additional small markers */
.clock::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: 0;
}

.clock:hover {
cursor: pointer;
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

</style></head>
<body>

<div class="clock">
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>
<div class="hand hour" id="hourHand"></div>
<div class="hand minute" id="minuteHand"></div>
<div class="hand second" id="secondHand"></div>
<div class="center-dot"></div>
</div>

<script>
function updateClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

const hourDeg = (hours % 12) * 30 + minutes * 0.5;
const minuteDeg = minutes * 6 + seconds * 0.1;
const secondDeg = seconds * 6;

document.getElementById('hourHand').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
document.getElementById('minuteHand').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
document.getElementById('secondHand').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);
updateClock(); // Initial call
</script></body>
</html>