Clock Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital & Analog Clock</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 640px;
width: 100%;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 30px;
font-size: 2.5rem;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.clock-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
/* ===== Digital Clock ===== */
.digital-clock {
background: linear-gradient(135deg, #667eea, #764ba2);
padding: 30px;
border-radius: 15px;
color: white;
}
.digital-clock h2 {
font-size: 1.2rem;
margin-bottom: 15px;
opacity: 0.9;
}
.digital-time {
font-size: 3.5rem;
font-weight: bold;
font-family: 'Courier New', monospace;
letter-spacing: 2px;
margin-bottom: 10px;
}
.digital-date {
font-size: 1rem;
opacity: 0.9;
letter-spacing: 1px;
}
/* ===== Analog Clock ===== */
.analog-clock {
display: flex;
justify-content: center;
}
.clock-face {
width: 200px;
height: 200px;
border: 8px solid #667eea;
border-radius: 50%;
position: relative;
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.clock-face::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #667eea;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom center;
border-radius: 10px;
}
.hour-hand {
width: 6px;
height: 60px;
background: #667eea;
margin-left: -3px;
}
.minute-hand {
width: 4px;
height: 75px;
background: #764ba2;
margin-left: -2px;
}
.second-hand {
width: 2px;
height: 80px;
background: #ff6b6b;
margin-left: -1px;
}
/* Responsive */
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.clock-wrapper {
grid-template-columns: 1fr;
gap: 20px;
}
.digital-time {
font-size: 2.5rem;
}
.clock-face {
width: 180px;
height: 180px;
}
}
.theme-toggle {
margin-top: 20px;
}
.theme-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.theme-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.button-group {
display: flex;
gap: 10px;
justify-content: center;
}
.view-code-btn {
background: #27ae60;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
text-decoration: none;
display: inline-block;
}
.view-code-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4);
}
</style>
</head>
<body>
<div class="container">
<h1>⏰ Clock</h1>
<div class="clock-wrapper">
<!-- Digital Clock -->
<div class="digital-clock">
<h2>Digital</h2>
<div class="digital-time" id="digitalTime">00:00:00</div>
<div class="digital-date" id="digitalDate">Monday, Jan 01</div>
</div>
<!-- Analog Clock -->
<div class="analog-clock">
<div class="clock-face" id="clockFace">
<div class="hand hour-hand" id="hourHand"></div>
<div class="hand minute-hand" id="minuteHand"></div>
<div class="hand second-hand" id="secondHand"></div>
</div>
</div>
</div>
<div class="button-group">
<button class="theme-btn" onclick="toggleTheme()">🌙 Toggle Theme</button>
<a href="../view_code/clock_code.html" class="view-code-btn">👁️ View Code</a>
</div>
</div>
<script>
const digitalTime = document.getElementById('digitalTime');
const digitalDate = document.getElementById('digitalDate');
const hourHand = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');
const container = document.querySelector('.container');
// Days and months array
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function updateClock() {
const now = new Date();
// Digital Clock (12-hour format)
let hours = now.getHours();
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
// AM / PM
const ampm = hours >= 12 ? 'PM' : 'AM';
// Convert to 12-hour
hours = hours % 12;
hours = hours ? hours : 12; // 0 -> 12
hours = String(hours).padStart(2, '0');
digitalTime.textContent = `${hours}:${minutes}:${seconds} ${ampm}`;
// Date
const day = days[now.getDay()];
const date = String(now.getDate()).padStart(2, '0');
const month = months[now.getMonth()];
digitalDate.textContent = `${day}, ${month} ${date}`;
// Analog Clock
const hour = now.getHours() % 12;
const minute = now.getMinutes();
const second = now.getSeconds();
const hourDeg = (hour * 30) + (minute * 0.5);
const minuteDeg = (minute * 6) + (second * 0.1);
const secondDeg = second * 6;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
}
// Update clock every second
updateClock();
setInterval(updateClock, 1000);
// Theme Toggle
function toggleTheme() {
document.body.style.background = document.body.style.background === 'rgb(26, 26, 46)'
? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
: '#1a1a2e';
container.style.background = container.style.background === 'rgb(26, 26, 46)'
? 'white'
: '#1a1a2e';
container.style.color = container.style.color === 'white' ? '#333' : 'white';
// Update text colors in dark mode
if (container.style.background === '#1a1a2e') {
digitalTime.style.color = 'white';
digitalDate.style.color = 'rgba(255,255,255,0.7)';
document.querySelector('h1').style.color = '#667eea';
} else {
digitalTime.style.color = 'white';
digitalDate.style.color = 'rgba(255,255,255,0.9)';
document.querySelector('h1').style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
document.querySelector('h1').style.webkitBackgroundClip = 'text';
document.querySelector('h1').style.webkitTextFillColor = 'transparent';
}
}
</script>
</body>
</html>