BASIC CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock with Controls and Dark Mode</title>
<style>
/* ====================================
I. General & Layout Styles
==================================== */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: sans-serif;
gap: 50px; /* Clock aur Controls ke beech ki jagah */
transition: background-color 0.5s, color 0.5s;
}
/* ====================================
II. Clock Dial Styles
==================================== */
.clock {
width: 300px;
height: 300px;
border: 15px solid #333;
border-radius: 50%;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background-color: #fff;
transition: border-color 0.5s, background-color 0.5s, box-shadow 0.5s;
}
/* Clock Center Pin */
.clock::after {
content: '';
position: absolute;
background-color: #333;
z-index: 10;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: background-color 0.5s;
}
/* ====================================
III. Hand Styles
==================================== */
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom;
border-radius: 5px;
z-index: 9;
transform: rotate(90deg); /* Default start position (3 o'clock) */
transition: background-color 0.5s;
}
.hour {
width: 6px;
height: 80px;
background-color: #333;
}
.minute {
width: 4px;
height: 110px;
background-color: #666;
}
.second {
width: 2px;
height: 130px;
background-color: #ff0000;
z-index: 8;
}
/* ====================================
IV. Number/Tick Mark Styles
==================================== */
.number {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: #333;
transition: color 0.5s;
}
/* Positioning Numbers */
.n1 { transform: rotate(30deg); }
.n2 { transform: rotate(60deg); }
.n3 { transform: rotate(90deg); }
.n4 { transform: rotate(120deg); }
.n5 { transform: rotate(150deg); }
.n6 { transform: rotate(180deg); }
.n7 { transform: rotate(210deg); }
.n8 { transform: rotate(240deg); }
.n9 { transform: rotate(270deg); }
.n10 { transform: rotate(300deg); }
.n11 { transform: rotate(330deg); }
.n12 { transform: rotate(0deg); }
/* Keep number text upright */
.number div {
transform: rotate(calc(-1 * var(--rotation-angle)));
display: inline-block;
padding-top: 10px;
}
/* ====================================
V. Control Panel Styles
==================================== */
.controls {
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 250px;
transition: background-color 0.5s, border-color 0.5s, color 0.5s;
}
.controls button {
padding: 10px 15px;
margin-right: 10px;
margin-bottom: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
#theme-toggle {
background-color: #333;
color: white;
width: 100%;
margin-bottom: 20px;
}
#apply-time {
background-color: #007bff;
color: white;
}
#reset-time {
background-color: #ffc107;
color: #333;
}
.controls label, .controls input {
display: block;
margin-bottom: 10px;
}
.controls input[type="number"] {
width: 60px;
padding: 5px;
margin-right: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
/* ====================================
VI. Dark Mode Overrides
==================================== */
body.dark-theme {
background-color: #121212;
color: #e0e0e0;
}
.clock.dark-theme {
border-color: #f0f0f0;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
background-color: #2c2c2c;
}
.clock.dark-theme::after {
background-color: #f0f0f0;
}
.clock.dark-theme .hour {
background-color: #f0f0f0;
}
.clock.dark-theme .minute {
background-color: #ccc;
}
.clock.dark-theme .number {
color: #e0e0e0;
}
.clock.dark-theme .second {
/* Second hand remains red for high visibility in both modes */
background-color: #ff4d4d;
}
body.dark-theme .controls {
background-color: #333;
border-color: #555;
color: #e0e0e0;
}
body.dark-theme .controls input[type="number"] {
background-color: #444;
color: #e0e0e0;
border-color: #666;
}
body.dark-theme #theme-toggle {
background-color: #e0e0e0;
color: #333;
}
</style>
</head>
<body>
<div class="clock" id="main-clock">
<div class="number n1" style="--rotation-angle: 30deg;"><div>1</div></div>
<div class="number n2" style="--rotation-angle: 60deg;"><div>2</div></div>
<div class="number n3" style="--rotation-angle: 90deg;"><div>3</div></div>
<div class="number n4" style="--rotation-angle: 120deg;"><div>4</div></div>
<div class="number n5" style="--rotation-angle: 150deg;"><div>5</div></div>
<div class="number n6" style="--rotation-angle: 180deg;"><div>6</div></div>
<div class="number n7" style="--rotation-angle: 210deg;"><div>7</div></div>
<div class="number n8" style="--rotation-angle: 240deg;"><div>8</div></div>
<div class="number n9" style="--rotation-angle: 270deg;"><div>9</div></div>
<div class="number n10" style="--rotation-angle: 300deg;"><div>10</div></div>
<div class="number n11" style="--rotation-angle: 330deg;"><div>11</div></div>
<div class="number n12" style="--rotation-angle: 0deg;"><div>12</div></div>
<div class="hand hour" id="hour"></div>
<div class="hand minute" id="minute"></div>
<div class="hand second" id="second"></div>
</div>
<div class="controls">
<h2>⏱️ Clock Controls</h2>
<button id="theme-toggle">🌙 Enable Dark Mode</button>
<hr>
<h3>Manual Time Set (12-hr format)</h3>
<label>Hour (0-11): <input type="number" id="set-hour" min="0" max="11" value="0"></label>
<label>Minute (0-59): <input type="number" id="set-minute" min="0" max="59" value="0"></label>
<label>Second (0-59): <input type="number" id="set-second" min="0" max="59" value="0"></label>
<button id="apply-time">Set Time</button>
<button id="reset-time">Live Time</button>
</div>
<script>
/* Global variables for time control */
let useManualTime = false;
let manualHours = 0;
let manualMinutes = 0;
let manualSeconds = 0;
function setClock() {
const hourHand = document.getElementById('hour');
const minuteHand = document.getElementById('minute');
const secondHand = document.getElementById('second');
let seconds, minutes, hours;
if (useManualTime) {
// Manually controlled time
seconds = manualSeconds;
minutes = manualMinutes;
hours = manualHours % 12;
// Update manual time every second
manualSeconds = (manualSeconds + 1) % 60;
if (manualSeconds === 0) {
manualMinutes = (manualMinutes + 1) % 60;
if (manualMinutes === 0) {
manualHours = (manualHours + 1) % 12;
}
}
} else {
// Live system time
const now = new Date();
seconds = now.getSeconds();
minutes = now.getMinutes();
hours = now.getHours() % 12;
}
// Calculations: 360 degrees / 60 seconds (or minutes) = 6 degrees per unit
// Hours: 360 degrees / 12 hours = 30 degrees per hour
const baseRotation = 90; // Hands start at 3 o'clock in CSS
// Second hand rotation
const secondsDegrees = (seconds * 6) + baseRotation;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
// Minute hand rotation (includes seconds contribution for smoothness)
const minutesDegrees = (minutes * 6) + (seconds / 60 * 6) + baseRotation;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
// Hour hand rotation (includes minutes contribution for smoothness)
const hoursDegrees = (hours * 30) + (minutes / 60 * 30) + baseRotation;
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
const clock = document.getElementById('main-clock');
const applyTimeBtn = document.getElementById('apply-time');
const resetTimeBtn = document.getElementById('reset-time');
const setHourInput = document.getElementById('set-hour');
const setMinuteInput = document.getElementById('set-minute');
const setSecondInput = document.getElementById('set-second');
// --- 1. Theme Toggle Logic ---
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-theme');
clock.classList.toggle('dark-theme');
if (body.classList.contains('dark-theme')) {
themeToggle.innerHTML = '🌞 Disable Dark Mode';
} else {
themeToggle.innerHTML = '🌙 Enable Dark Mode';
}
});
// --- 2. Set Manual Time Logic ---
applyTimeBtn.addEventListener('click', () => {
// Get values from inputs and convert to numbers
manualHours = parseInt(setHourInput.value);
manualMinutes = parseInt(setMinuteInput.value);
manualSeconds = parseInt(setSecondInput.value);
// Input validation (ensure values are within range)
manualHours = Math.max(0, Math.min(11, isNaN(manualHours) ? 0 : manualHours));
manualMinutes = Math.max(0, Math.min(59, isNaN(manualMinutes) ? 0 : manualMinutes));
manualSeconds = Math.max(0, Math.min(59, isNaN(manualSeconds) ? 0 : manualSeconds));
// Update inputs with validated values
setHourInput.value = manualHours;
setMinuteInput.value = manualMinutes;
setSecondInput.value = manualSeconds;
useManualTime = true;
applyTimeBtn.textContent = 'Manual Time Active';
resetTimeBtn.textContent = 'Reset to Live Time';
});
// --- 3. Reset to Live Time Logic ---
resetTimeBtn.addEventListener('click', () => {
useManualTime = false;
applyTimeBtn.textContent = 'Set Time';
resetTimeBtn.textContent = 'Live Time';
});
// Start the clock
setClock();
// Update the clock every 1000 milliseconds (1 second)
setInterval(setClock, 1000);
});
</script>
</body>
</html>