Digital Clock with Alarm System IN HTML CSS JAVASCRIPT WITH PHP AND MY SQL

Project Introduction

A comprehensive digital clock application with alarm system that displays current time, allows users to set multiple alarms, and provides a fully functional timer and stopwatch. This system includes a beautiful analog and digital clock display, alarm management, snooze functionality, and customizable themes. Perfect for websites needing time management features or as a standalone productivity tool.

✨ Features

Clock Display

Digital Clock: Real-time updating with multiple formats (12/24 hour)
Analog Clock: Beautiful SVG-based analog clock with smooth second hand
Date Display: Current date with day, month, and year
Timezone Support: Display time in different timezones
World Clocks: Add multiple clocks for different cities

Alarm System

Multiple Alarms: Set unlimited alarms with custom labels
Recurring Alarms: Daily, weekly, or custom recurrence patterns
Snooze Function: 5, 10, or 15 minute snooze options
Alarm Sounds: Multiple sound options or custom uploads
Gradual Volume: Volume increases gradually for gentle waking
Alarm History: Track triggered alarms

Timer

Countdown Timer: Set custom durations with presets
Pause/Resume: Control timer execution
Multiple Timers: Run several timers simultaneously
Timer Presets: Quick access to common durations
Timer Alerts: Visual and sound notifications

Stopwatch

Precise Timing: Accurate to 1/100 second
Lap/Split Times: Record and display lap times
Lap History: View previous lap times
Export Laps: Download lap data as CSV

Additional Features

Dark/Light Mode: Toggle between themes
Fullscreen Mode: Distraction-free display
Keyboard Shortcuts: Control everything with keyboard
Sound Customization: Volume control and sound selection
Data Persistence: Alarms saved in browser localStorage
Export/Import: Backup and restore alarm settings

📁 File Structure

blog-website/ │ ├── clock/ # Clock application directory │ ├── index.php # Main clock page │ ├── alarms.php # Alarm management │ ├── timer.php # Timer page │ ├── stopwatch.php # Stopwatch page │ ├── settings.php # User settings │ │ │ ├── includes/ # Core includes │ │ ├── clock-config.php # Configuration │ │ ├── clock-functions.php # Core functions │ │ └── alarm-handler.php # Alarm processing │ │ │ ├── css/ # Stylesheets │ │ ├── clock.css # Main clock styles │ │ └── analog-clock.css # Analog clock styles │ │ │ ├── js/ # JavaScript │ │ ├── clock.js # Core clock logic │ │ ├── analog-clock.js # Analog clock renderer │ │ ├── alarms.js # Alarm management │ │ ├── timer.js # Timer functionality │ │ └── stopwatch.js # Stopwatch logic │ │ │ ├── sounds/ # Alarm sounds │ │ ├── alarm-1.mp3 # Default alarm 1 │ │ ├── alarm-2.mp3 # Default alarm 2 │ │ ├── gentle.mp3 # Gentle wake sound │ │ └── notification.mp3 # Notification sound │ │ │ └── assets/ # Images and icons │ ├── clock-face.svg # Analog clock face │ └── icons/ # UI icons │ ├── .env # Environment variables │ └── database/ └── clock.sql # Database schema (optional)

🗄️ Database Schema (database/clock.sql) - Optional

-- Create clock database (optional - for server-side storage) CREATE DATABASE IF NOT EXISTS clock_db; USE clock_db; -- User alarms (if using server-side storage) CREATE TABLE IF NOT EXISTS user_alarms ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NULL, -- If integrated with user system alarm_time TIME NOT NULL, days JSON, -- Days of week [1,2,3,4,5,6,0] (0 = Sunday) label VARCHAR(255), sound VARCHAR(100) DEFAULT 'alarm-1.mp3', is_active BOOLEAN DEFAULT TRUE, snooze_enabled BOOLEAN DEFAULT TRUE, snooze_duration INT DEFAULT 5, -- minutes volume INT DEFAULT 80, -- 0-100 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, INDEX idx_user (user_id), INDEX idx_active (is_active) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- Alarm history CREATE TABLE IF NOT EXISTS alarm_history ( id BIGINT AUTO_INCREMENT PRIMARY KEY, alarm_id INT NULL, user_id INT NULL, triggered_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, action ENUM('dismissed', 'snoozed', 'triggered') DEFAULT 'triggered', snooze_count INT DEFAULT 0, INDEX idx_alarm (alarm_id), INDEX idx_user (user_id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- Timer presets CREATE TABLE IF NOT EXISTS timer_presets ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NULL, name VARCHAR(100) NOT NULL, duration INT NOT NULL, -- in seconds created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, INDEX idx_user (user_id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- Settings CREATE TABLE IF NOT EXISTS user_settings ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT UNIQUE, time_format ENUM('12', '24') DEFAULT '12', theme ENUM('light', 'dark', 'auto') DEFAULT 'auto', default_sound VARCHAR(100) DEFAULT 'alarm-1.mp3', default_volume INT DEFAULT 80, snooze_default INT DEFAULT 5, show_seconds BOOLEAN DEFAULT TRUE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

🔧 Core Files

1. clock/index.php (Main Clock Page)

<?php require_once '../includes/config.php'; $page_title = 'Digital Clock with Alarm System'; // Get user settings (from localStorage or cookies) $timeFormat = $_COOKIE['clock_time_format'] ?? '12'; $theme = $_COOKIE['clock_theme'] ?? 'auto'; include '../includes/header.php'; ?> <link rel="stylesheet" href="css/clock.css"> <link rel="stylesheet" href="css/analog-clock.css"> <div class="clock-container" data-theme="<?php echo $theme; ?>"> <!-- Header with Navigation --> <div class="clock-header"> <nav class="clock-nav"> <a href="index.php" class="nav-link active">Clock</a> <a href="alarms.php" class="nav-link">Alarms</a> <a href="timer.php" class="nav-link">Timer</a> <a href="stopwatch.php" class="nav-link">Stopwatch</a> <a href="settings.php" class="nav-link">Settings</a> </nav> <div class="header-controls"> <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme"> <span class="theme-icon">🌙</span> </button> <button class="fullscreen-toggle" onclick="toggleFullscreen()" title="Fullscreen"> <span class="fullscreen-icon">⛶</span> </button> </div> </div> <!-- Main Clock Display --> <div class="clock-main"> <!-- Analog Clock --> <div class="analog-clock-container"> <svg class="analog-clock" viewBox="0 0 200 200"> <!-- Clock face will be drawn by JavaScript --> </svg> </div> <!-- Digital Clock --> <div class="digital-clock-container"> <div class="time-display" id="digitalTime">--:--:--</div> <div class="date-display" id="digitalDate">---, -- --- ----</div> <!-- Time Format Toggle --> <div class="format-toggle"> <button class="format-btn <?php echo $timeFormat == '12' ? 'active' : ''; ?>" onclick="setTimeFormat('12')">12h</button> <button class="format-btn <?php echo $timeFormat == '24' ? 'active' : ''; ?>" onclick="setTimeFormat('24')">24h</button> </div> </div> </div> <!-- World Clocks (optional) --> <div class="world-clocks"> <h3>World Clocks</h3> <div class="clocks-grid" id="worldClocks"> <!-- Will be populated by JavaScript --> </div> <button class="add-clock-btn" onclick="addWorldClock()">+ Add City</button> </div> <!-- Upcoming Alarms --> <div class="upcoming-alarms"> <h3>Upcoming Alarms</h3> <div class="alarms-list" id="upcomingAlarms"> <!-- Will be populated by JavaScript --> </div> </div> </div> <!-- Alarm Notification Modal --> <div id="alarmModal" class="alarm-modal" style="display: none;"> <div class="alarm-modal-content"> <h2 id="alarmTitle">⏰ Alarm</h2> <p id="alarmMessage">Time to wake up!</p> <div class="alarm-actions"> <button class="dismiss-btn" onclick="dismissAlarm()">Dismiss</button> <button class="snooze-btn" onclick="snoozeAlarm()">Snooze <span id="snoozeTime">5</span> min</button> </div> </div> </div> <!-- Audio element for alarms --> <audio id="alarmSound" loop preload="auto"> <source src="sounds/alarm-1.mp3" type="audio/mpeg"> </audio> <script src="js/clock.js"></script> <script src="js/analog-clock.js"></script> <script> // Initialize clock on page load document.addEventListener('DOMContentLoaded', function() { initClock(<?php echo $timeFormat; ?>); initAnalogClock(); loadAlarms(); loadWorldClocks(); }); // Time format toggle function setTimeFormat(format) { document.cookie = `clock_time_format=${format}; path=/; max-age=31536000`; location.reload(); } // Theme toggle function toggleTheme() { const container = document.querySelector('.clock-container'); const currentTheme = container.dataset.theme; const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; container.dataset.theme = newTheme; document.cookie = `clock_theme=${newTheme}; path=/; max-age=31536000`; // Update icon const icon = document.querySelector('.theme-icon'); icon.textContent = newTheme === 'dark' ? '☀️' : '🌙'; } // Fullscreen toggle function toggleFullscreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); document.querySelector('.fullscreen-icon').textContent = '✕'; } else { if (document.exitFullscreen) { document.exitFullscreen(); document.querySelector('.fullscreen-icon').textContent = '⛶'; } } } // Keyboard shortcuts document.addEventListener('keydown', function(e) { // Space: Snooze (if alarm active) if (e.code === 'Space' && document.getElementById('alarmModal').style.display === 'block') { e.preventDefault(); snoozeAlarm(); } // Escape: Dismiss alarm if (e.code === 'Escape' && document.getElementById('alarmModal').style.display === 'block') { dismissAlarm(); } // F: Toggle fullscreen if (e.code === 'KeyF' && e.ctrlKey) { e.preventDefault(); toggleFullscreen(); } // T: Toggle theme if (e.code === 'KeyT' && e.ctrlKey) { e.preventDefault(); toggleTheme(); } }); </script> <style> .clock-container { max-width: 1200px; margin: 0 auto; padding: 2rem; min-height: 100vh; transition: background-color 0.3s, color 0.3s; } /* Light theme */ .clock-container[data-theme="light"] { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #333; } /* Dark theme */ .clock-container[data-theme="dark"] { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } /* Auto theme (follows system) */ @media (prefers-color-scheme: dark) { .clock-container[data-theme="auto"] { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } } @media (prefers-color-scheme: light) { .clock-container[data-theme="auto"] { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #333; } } .clock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; padding: 1rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 10px; } .clock-nav { display: flex; gap: 1rem; } .nav-link { padding: 0.5rem 1rem; color: inherit; text-decoration: none; border-radius: 5px; transition: background 0.3s; } .nav-link:hover { background: rgba(255, 255, 255, 0.2); } .nav-link.active { background: rgba(255, 255, 255, 0.3); font-weight: bold; } .header-controls { display: flex; gap: 0.5rem; } .theme-toggle, .fullscreen-toggle { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; padding: 0.5rem; border-radius: 5px; transition: background 0.3s; } .theme-toggle:hover, .fullscreen-toggle:hover { background: rgba(255, 255, 255, 0.2); } .clock-main { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; } .analog-clock-container { display: flex; justify-content: center; align-items: center; } .analog-clock { width: 300px; height: 300px; } .digital-clock-container { text-align: center; } .time-display { font-size: 5rem; font-weight: bold; font-family: 'Digital', monospace; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .date-display { font-size: 1.5rem; margin-bottom: 2rem; opacity: 0.9; } .format-toggle { display: flex; gap: 1rem; justify-content: center; } .format-btn { padding: 0.5rem 1.5rem; background: rgba(255, 255, 255, 0.2); border: none; color: inherit; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .format-btn:hover { background: rgba(255, 255, 255, 0.3); } .format-btn.active { background: rgba(255, 255, 255, 0.4); font-weight: bold; } .world-clocks, .upcoming-alarms { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 10px; padding: 1.5rem; margin-bottom: 2rem; } .world-clocks h3, .upcoming-alarms h3 { margin-bottom: 1rem; } .clocks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .world-clock-card { background: rgba(255, 255, 255, 0.1); padding: 1rem; border-radius: 5px; text-align: center; } .world-clock-card .city { font-weight: bold; margin-bottom: 0.5rem; } .world-clock-card .time { font-size: 1.2rem; font-family: 'Digital', monospace; } .world-clock-card .date { font-size: 0.8rem; opacity: 0.7; } .add-clock-btn { width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.2); border: 2px dashed rgba(255, 255, 255, 0.3); color: inherit; border-radius: 5px; cursor: pointer; transition: background 0.3s; } .add-clock-btn:hover { background: rgba(255, 255, 255, 0.3); } .alarms-list { display: flex; flex-direction: column; gap: 0.5rem; } .alarm-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 5px; } .alarm-info { flex: 1; } .alarm-time { font-size: 1.2rem; font-weight: bold; margin-right: 1rem; } .alarm-label { opacity: 0.9; } .alarm-days { font-size: 0.8rem; opacity: 0.7; } .alarm-switch { position: relative; display: inline-block; width: 50px; height: 24px; } .alarm-switch input { opacity: 0; width: 0; height: 0; } .alarm-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.3); transition: 0.3s; border-radius: 24px; } .alarm-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 2px; background-color: white; transition: 0.3s; border-radius: 50%; } input:checked + .alarm-slider { background-color: #4CAF50; } input:checked + .alarm-slider:before { transform: translateX(26px); } /* Alarm Modal */ .alarm-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 2000; display: flex; align-items: center; justify-content: center; } .alarm-modal-content { background: white; padding: 2rem; border-radius: 10px; max-width: 400px; width: 90%; text-align: center; animation: pulse 1s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .alarm-modal-content h2 { color: #333; margin-bottom: 1rem; font-size: 2rem; } .alarm-modal-content p { color: #666; margin-bottom: 2rem; font-size: 1.2rem; } .alarm-actions { display: flex; gap: 1rem; justify-content: center; } .dismiss-btn, .snooze-btn { padding: 0.8rem 2rem; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: opacity 0.3s; } .dismiss-btn { background: #dc3545; color: white; } .snooze-btn { background: #4CAF50; color: white; } .dismiss-btn:hover, .snooze-btn:hover { opacity: 0.9; } /* Responsive */ @media (max-width: 768px) { .clock-main { grid-template-columns: 1fr; gap: 2rem; } .time-display { font-size: 3rem; } .date-display { font-size: 1.2rem; } .analog-clock { width: 250px; height: 250px; } .clock-nav { flex-wrap: wrap; } } </style> <?php include '../includes/footer.php'; ?>

2. js/clock.js (Core Clock Logic)

/** * Core Clock Functionality */ let clockInterval; let timeFormat = 12; // 12 or 24 let currentTime = new Date(); let alarms = []; let activeAlarm = null; let snoozeTimeout = null; // Initialize clock function initClock(format) { timeFormat = format; updateClock(); startClock(); loadAlarmsFromStorage(); checkAlarms(); } // Start clock updates function startClock() { if (clockInterval) { clearInterval(clockInterval); } clockInterval = setInterval(updateClock, 1000); } // Stop clock updates function stopClock() { if (clockInterval) { clearInterval(clockInterval); clockInterval = null; } } // Update clock display function updateClock() { currentTime = new Date(); // Update digital clock updateDigitalClock(); // Update analog clock if (typeof updateAnalogClock === 'function') { updateAnalogClock(currentTime); } // Update world clocks updateWorldClocks(); // Check alarms every second checkAlarms(); } // Update digital clock display function updateDigitalClock() { const timeElement = document.getElementById('digitalTime'); const dateElement = document.getElementById('digitalDate'); if (!timeElement || !dateElement) return; // Format time let hours = currentTime.getHours(); let minutes = currentTime.getMinutes(); let seconds = currentTime.getSeconds(); let ampm = ''; if (timeFormat === 12) { ampm = hours >= 12 ? ' PM' : ' AM'; hours = hours % 12 || 12; } const timeString = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}${ampm}`; // Format date const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const dateString = currentTime.toLocaleDateString(undefined, options); timeElement.textContent = timeString; dateElement.textContent = dateString; } // Pad zero helper function padZero(num) { return num.toString().padStart(2, '0'); } // Alarm Management function loadAlarmsFromStorage() { const stored = localStorage.getItem('alarms'); if (stored) { try { alarms = JSON.parse(stored); updateAlarmsList(); } catch (e) { console.error('Failed to load alarms', e); alarms = []; } } } function saveAlarmsToStorage() { localStorage.setItem('alarms', JSON.stringify(alarms)); updateAlarmsList(); } function addAlarm(alarm) { // Generate ID alarm.id = Date.now() + Math.random().toString(36).substr(2, 9); // Ensure all fields alarm.time = alarm.time || '08:00'; alarm.days = alarm.days || [1,2,3,4,5]; // Monday-Friday by default alarm.label = alarm.label || 'Alarm'; alarm.sound = alarm.sound || 'alarm-1.mp3'; alarm.isActive = alarm.isActive !== false; alarm.snoozeEnabled = alarm.snoozeEnabled !== false; alarm.snoozeDuration = alarm.snoozeDuration || 5; alarm.volume = alarm.volume || 80; alarms.push(alarm); saveAlarmsToStorage(); return alarm.id; } function updateAlarm(id, updates) { const index = alarms.findIndex(a => a.id === id); if (index !== -1) { alarms[index] = { ...alarms[index], ...updates }; saveAlarmsToStorage(); } } function deleteAlarm(id) { alarms = alarms.filter(a => a.id !== id); saveAlarmsToStorage(); } function toggleAlarm(id) { const alarm = alarms.find(a => a.id === id); if (alarm) { alarm.isActive = !alarm.isActive; saveAlarmsToStorage(); } } // Update alarms list in UI function updateAlarmsList() { const container = document.getElementById('upcomingAlarms'); if (!container) return; if (alarms.length === 0) { container.innerHTML = '<p class="no-alarms">No alarms set</p>'; return; } // Sort alarms by time const sorted = [...alarms].sort((a, b) => { return a.time.localeCompare(b.time); }); let html = ''; sorted.forEach(alarm => { const [hours, minutes] = alarm.time.split(':'); const time12 = formatTime12(parseInt(hours), parseInt(minutes)); html += ` <div class="alarm-item"> <div class="alarm-info"> <span class="alarm-time">${time12}</span> <span class="alarm-label">${escapeHtml(alarm.label)}</span> <div class="alarm-days">${formatDays(alarm.days)}</div> </div> <label class="alarm-switch"> <input type="checkbox" ${alarm.isActive ? 'checked' : ''} onchange="toggleAlarm('${alarm.id}')"> <span class="alarm-slider"></span> </label> </div> `; }); container.innerHTML = html; } // Format days for display function formatDays(days) { if (!days || days.length === 0) return 'Once'; if (days.length === 7) return 'Every day'; const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const sorted = days.sort((a, b) => a - b); // Check for weekdays if (days.length === 5 && days.includes(1) && days.includes(2) && days.includes(3) && days.includes(4) && days.includes(5)) { return 'Weekdays'; } // Check for weekends if (days.length === 2 && days.includes(0) && days.includes(6)) { return 'Weekends'; } return sorted.map(d => dayNames[d]).join(', '); } // Format time in 12-hour format function formatTime12(hours, minutes) { const ampm = hours >= 12 ? 'PM' : 'AM'; const h = hours % 12 || 12; return `${h}:${padZero(minutes)} ${ampm}`; } // Check if alarm should trigger function checkAlarms() { const now = new Date(); const currentHours = now.getHours(); const currentMinutes = now.getMinutes(); const currentDay = now.getDay(); // 0 = Sunday alarms.forEach(alarm => { if (!alarm.isActive) return; const [alarmHours, alarmMinutes] = alarm.time.split(':').map(Number); // Check if time matches if (alarmHours === currentHours && alarmMinutes === currentMinutes) { // Check if day matches (if days specified) if (alarm.days && alarm.days.length > 0) { if (!alarm.days.includes(currentDay)) { return; } } // Trigger alarm triggerAlarm(alarm); } }); } // Trigger alarm function triggerAlarm(alarm) { // Don't trigger if already active if (activeAlarm) return; activeAlarm = alarm; // Show modal const modal = document.getElementById('alarmModal'); const title = document.getElementById('alarmTitle'); const message = document.getElementById('alarmMessage'); const snoozeSpan = document.getElementById('snoozeTime'); title.textContent = `⏰ ${alarm.label}`; message.textContent = `It's ${alarm.time}`; snoozeSpan.textContent = alarm.snoozeDuration; modal.style.display = 'flex'; // Play sound playAlarmSound(alarm); // Log alarm trigger logAlarmTrigger(alarm.id); } // Play alarm sound function playAlarmSound(alarm) { const audio = document.getElementById('alarmSound'); // Set sound source audio.src = `sounds/${alarm.sound}`; // Set volume audio.volume = alarm.volume / 100; // Play with gradual volume increase let currentVolume = 0.1; audio.volume = currentVolume; audio.play().catch(e => { console.error('Failed to play alarm sound', e); }); // Gradually increase volume const interval = setInterval(() => { if (currentVolume < alarm.volume / 100) { currentVolume += 0.1; audio.volume = Math.min(currentVolume, alarm.volume / 100); } else { clearInterval(interval); } }, 1000); // Store interval to clear later audio._volumeInterval = interval; } // Stop alarm sound function stopAlarmSound() { const audio = document.getElementById('alarmSound'); audio.pause(); audio.currentTime = 0; if (audio._volumeInterval) { clearInterval(audio._volumeInterval); } } // Dismiss alarm function dismissAlarm() { stopAlarmSound(); const modal = document.getElementById('alarmModal'); modal.style.display = 'none'; // Log dismissal if (activeAlarm) { logAlarmAction(activeAlarm.id, 'dismissed'); activeAlarm = null; } // Clear any snooze timeout if (snoozeTimeout) { clearTimeout(snoozeTimeout); snoozeTimeout = null; } } // Snooze alarm function snoozeAlarm() { if (!activeAlarm) return; stopAlarmSound(); const modal = document.getElementById('alarmModal'); modal.style.display = 'none'; const snoozeMinutes = activeAlarm.snoozeDuration || 5; // Set snooze timeout snoozeTimeout = setTimeout(() => { triggerAlarm(activeAlarm); snoozeTimeout = null; }, snoozeMinutes * 60 * 1000); // Log snooze logAlarmAction(activeAlarm.id, 'snoozed', snoozeMinutes); // Show snooze notification showNotification(`Alarm snoozed for ${snoozeMinutes} minutes`); } // Show notification function showNotification(message) { // Check if browser supports notifications if (!("Notification" in window)) return; if (Notification.permission === "granted") { new Notification("Clock Alarm", { body: message }); } else if (Notification.permission !== "denied") { Notification.requestPermission().then(permission => { if (permission === "granted") { new Notification("Clock Alarm", { body: message }); } }); } } // Log alarm trigger (for analytics) function logAlarmTrigger(alarmId) { console.log('Alarm triggered:', alarmId); // Could send to server if needed } function logAlarmAction(alarmId, action, snoozeMinutes) { console.log('Alarm action:', { alarmId, action, snoozeMinutes }); // Could send to server if needed } // World Clocks const worldClocks = [ { city: 'New York', timezone: 'America/New_York' }, { city: 'London', timezone: 'Europe/London' }, { city: 'Tokyo', timezone: 'Asia/Tokyo' }, { city: 'Sydney', timezone: 'Australia/Sydney' } ]; function loadWorldClocks() { const container = document.getElementById('worldClocks'); if (!container) return; updateWorldClocks(); } function updateWorldClocks() { const container = document.getElementById('worldClocks'); if (!container) return; let html = ''; worldClocks.forEach(clock => { try { const time = new Date().toLocaleString('en-US', { timeZone: clock.timezone, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: timeFormat === 12 }); const date = new Date().toLocaleString('en-US', { timeZone: clock.timezone, weekday: 'short', month: 'short', day: 'numeric' }); html += ` <div class="world-clock-card"> <div class="city">${clock.city}</div> <div class="time">${time}</div> <div class="date">${date}</div> </div> `; } catch (e) { console.error('Error with timezone:', clock.timezone); } }); container.innerHTML = html; } function addWorldClock() { const city = prompt('Enter city name:'); const timezone = prompt('Enter timezone (e.g., America/New_York):'); if (city && timezone) { worldClocks.push({ city, timezone }); updateWorldClocks(); } } // Utility function to escape HTML function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // Request notification permission on load if ("Notification" in window) { if (Notification.permission === "default") { Notification.requestPermission(); } }

3. js/analog-clock.js (Analog Clock Renderer)

/** * Analog Clock SVG Renderer */ let clockSvg; let hourHand, minuteHand, secondHand; let clockFace; function initAnalogClock() { clockSvg = document.querySelector('.analog-clock'); if (!clockSvg) return; // Clear any existing content clockSvg.innerHTML = ''; // Draw clock face drawClockFace(); // Draw hands drawClockHands(); // Initial update updateAnalogClock(new Date()); } function drawClockFace() { const svgNS = "http://www.w3.org/2000/svg"; const centerX = 100; const centerY = 100; const radius = 90; // Outer circle const circle = document.createElementNS(svgNS, "circle"); circle.setAttribute("cx", centerX); circle.setAttribute("cy", centerY); circle.setAttribute("r", radius); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#333"); circle.setAttribute("stroke-width", "2"); clockSvg.appendChild(circle); // Hour markers for (let i = 0; i < 12; i++) { const angle = (i * 30 - 90) * Math.PI / 180; const x1 = centerX + (radius - 15) * Math.cos(angle); const y1 = centerY + (radius - 15) * Math.sin(angle); const x2 = centerX + (radius - 5) * Math.cos(angle); const y2 = centerY + (radius - 5) * Math.sin(angle); const line = document.createElementNS(svgNS, "line"); line.setAttribute("x1", x1); line.setAttribute("y1", y1); line.setAttribute("x2", x2); line.setAttribute("y2", y2); line.setAttribute("stroke", "#333"); line.setAttribute("stroke-width", i % 3 === 0 ? "3" : "1"); clockSvg.appendChild(line); // Add numbers for 12, 3, 6, 9 if (i === 0) { const text = document.createElementNS(svgNS, "text"); text.setAttribute("x", centerX - 5); text.setAttribute("y", centerY - radius + 20); text.setAttribute("text-anchor", "middle"); text.setAttribute("font-size", "14"); text.setAttribute("fill", "#333"); text.textContent = "12"; clockSvg.appendChild(text); } else if (i === 3) { const text = document.createElementNS(svgNS, "text"); text.setAttribute("x", centerX + radius - 25); text.setAttribute("y", centerY + 5); text.setAttribute("text-anchor", "middle"); text.setAttribute("font-size", "14"); text.setAttribute("fill", "#333"); text.textContent = "3"; clockSvg.appendChild(text); } else if (i === 6) { const text = document.createElementNS(svgNS, "text"); text.setAttribute("x", centerX); text.setAttribute("y", centerY + radius - 15); text.setAttribute("text-anchor", "middle"); text.setAttribute("font-size", "14"); text.setAttribute("fill", "#333"); text.textContent = "6"; clockSvg.appendChild(text); } else if (i === 9) { const text = document.createElementNS(svgNS, "text"); text.setAttribute("x", centerX - radius + 25); text.setAttribute("y", centerY + 5); text.setAttribute("text-anchor", "middle"); text.setAttribute("font-size", "14"); text.setAttribute("fill", "#333"); text.textContent = "9"; clockSvg.appendChild(text); } } // Center dot const dot = document.createElementNS(svgNS, "circle"); dot.setAttribute("cx", centerX); dot.setAttribute("cy", centerY); dot.setAttribute("r", "5"); dot.setAttribute("fill", "#333"); clockSvg.appendChild(dot); } function drawClockHands() { const svgNS = "http://www.w3.org/2000/svg"; // Hour hand hourHand = document.createElementNS(svgNS, "line"); hourHand.setAttribute("x1", "100"); hourHand.setAttribute("y1", "100"); hourHand.setAttribute("x2", "100"); hourHand.setAttribute("y2", "100"); hourHand.setAttribute("stroke", "#333"); hourHand.setAttribute("stroke-width", "4"); hourHand.setAttribute("stroke-linecap", "round"); clockSvg.appendChild(hourHand); // Minute hand minuteHand = document.createElementNS(svgNS, "line"); minuteHand.setAttribute("x1", "100"); minuteHand.setAttribute("y1", "100"); minuteHand.setAttribute("x2", "100"); minuteHand.setAttribute("y2", "100"); minuteHand.setAttribute("stroke", "#333"); minuteHand.setAttribute("stroke-width", "3"); minuteHand.setAttribute("stroke-linecap", "round"); clockSvg.appendChild(minuteHand); // Second hand secondHand = document.createElementNS(svgNS, "line"); secondHand.setAttribute("x1", "100"); secondHand.setAttribute("y1", "100"); secondHand.setAttribute("x2", "100"); secondHand.setAttribute("y2", "100"); secondHand.setAttribute("stroke", "#f00"); secondHand.setAttribute("stroke-width", "2"); secondHand.setAttribute("stroke-linecap", "round"); clockSvg.appendChild(secondHand); } function updateAnalogClock(time) { if (!hourHand || !minuteHand || !secondHand) return; const hours = time.getHours() % 12; const minutes = time.getMinutes(); const seconds = time.getSeconds(); const milliseconds = time.getMilliseconds(); // Calculate angles (in radians from 12 o'clock) const hourAngle = (hours * 30 + minutes * 0.5) * Math.PI / 180 - Math.PI / 2; const minuteAngle = (minutes * 6 + seconds * 0.1) * Math.PI / 180 - Math.PI / 2; const secondAngle = (seconds * 6 + milliseconds * 0.006) * Math.PI / 180 - Math.PI / 2; // Hand lengths const hourLength = 50; const minuteLength = 70; const secondLength = 80; // Update hour hand const hourX = 100 + hourLength * Math.cos(hourAngle); const hourY = 100 + hourLength * Math.sin(hourAngle); hourHand.setAttribute("x2", hourX); hourHand.setAttribute("y2", hourY); // Update minute hand const minuteX = 100 + minuteLength * Math.cos(minuteAngle); const minuteY = 100 + minuteLength * Math.sin(minuteAngle); minuteHand.setAttribute("x2", minuteX); minuteHand.setAttribute("y2", minuteY); // Update second hand const secondX = 100 + secondLength * Math.cos(secondAngle); const secondY = 100 + secondLength * Math.sin(secondAngle); secondHand.setAttribute("x2", secondX); secondHand.setAttribute("y2", secondY); }

4. clock/timer.php (Timer Page)

<?php require_once '../includes/config.php'; $page_title = 'Timer - Digital Clock'; include '../includes/header.php'; ?> <link rel="stylesheet" href="css/clock.css"> <div class="timer-container"> <div class="clock-header"> <nav class="clock-nav"> <a href="index.php" class="nav-link">Clock</a> <a href="alarms.php" class="nav-link">Alarms</a> <a href="timer.php" class="nav-link active">Timer</a> <a href="stopwatch.php" class="nav-link">Stopwatch</a> <a href="settings.php" class="nav-link">Settings</a> </nav> </div> <div class="timer-main"> <h1>Timer</h1> <!-- Timer Display --> <div class="timer-display" id="timerDisplay">00:00:00</div> <!-- Timer Input --> <div class="timer-input" id="timerInput"> <div class="input-group"> <input type="number" id="hours" min="0" max="23" value="0" placeholder="HH"> <span>:</span> <input type="number" id="minutes" min="0" max="59" value="0" placeholder="MM"> <span>:</span> <input type="number" id="seconds" min="0" max="59" value="0" placeholder="SS"> </div> </div> <!-- Timer Controls --> <div class="timer-controls"> <button class="timer-btn start" onclick="startTimer()" id="startBtn">Start</button> <button class="timer-btn pause" onclick="pauseTimer()" id="pauseBtn" style="display: none;">Pause</button> <button class="timer-btn reset" onclick="resetTimer()" id="resetBtn">Reset</button> </div> <!-- Preset Times --> <div class="preset-times"> <h3>Quick Presets</h3> <div class="preset-buttons"> <button onclick="setTimer(0,1,0)">1 min</button> <button onclick="setTimer(0,5,0)">5 min</button> <button onclick="setTimer(0,10,0)">10 min</button> <button onclick="setTimer(0,15,0)">15 min</button> <button onclick="setTimer(0,30,0)">30 min</button> <button onclick="setTimer(1,0,0)">1 hour</button> </div> </div> <!-- Multiple Timers --> <div class="multiple-timers"> <h3>Multiple Timers</h3> <button class="add-timer-btn" onclick="addNewTimer()">+ Add Timer</button> <div id="timersList" class="timers-list"></div> </div> </div> </div> <!-- Timer Complete Modal --> <div id="timerCompleteModal" class="alarm-modal" style="display: none;"> <div class="alarm-modal-content"> <h2>⏰ Timer Complete!</h2> <p id="timerCompleteMessage">Time's up!</p> <div class="alarm-actions"> <button class="dismiss-btn" onclick="dismissTimerComplete()">OK</button> </div> </div> </div> <audio id="timerSound" preload="auto"> <source src="sounds/notification.mp3" type="audio/mpeg"> </audio> <script src="js/timer.js"></script> <style> .timer-container { max-width: 800px; margin: 0 auto; padding: 2rem; } .timer-main { text-align: center; } .timer-main h1 { font-size: 2.5rem; margin-bottom: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .timer-display { font-size: 5rem; font-family: 'Digital', monospace; margin-bottom: 2rem; color: #333; } .timer-input { margin-bottom: 2rem; } .input-group { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .input-group input { width: 80px; padding: 0.5rem; font-size: 1.5rem; text-align: center; border: 2px solid #ddd; border-radius: 5px; } .input-group span { font-size: 2rem; font-weight: bold; color: #666; } .timer-controls { display: flex; gap: 1rem; justify-content: center; margin-bottom: 3rem; } .timer-btn { padding: 1rem 2rem; font-size: 1.2rem; border: none; border-radius: 5px; cursor: pointer; transition: opacity 0.3s; } .timer-btn.start { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .timer-btn.pause { background: #ffc107; color: #333; } .timer-btn.reset { background: #6c757d; color: white; } .timer-btn:hover { opacity: 0.9; } .preset-times { margin-bottom: 3rem; } .preset-times h3 { margin-bottom: 1rem; color: #333; } .preset-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .preset-buttons button { padding: 0.5rem 1rem; background: #f8f9fa; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .preset-buttons button:hover { background: #e9ecef; transform: translateY(-2px); } .multiple-timers { margin-top: 3rem; } .multiple-timers h3 { margin-bottom: 1rem; color: #333; } .add-timer-btn { padding: 0.5rem 1rem; background: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 1rem; } .add-timer-btn:hover { opacity: 0.9; } .timers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .timer-card { background: white; border-radius: 5px; padding: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; } .timer-card .timer-name { font-weight: bold; margin-bottom: 0.5rem; } .timer-card .timer-time { font-size: 1.2rem; font-family: 'Digital', monospace; margin-bottom: 0.5rem; } .timer-card .timer-status { font-size: 0.9rem; color: #666; } .timer-card .delete-timer { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: #dc3545; cursor: pointer; font-size: 1.2rem; } </style> <?php include '../includes/footer.php'; ?>

5. js/timer.js (Timer Functionality)

/** * Timer Functionality */ let mainTimer = { hours: 0, minutes: 0, seconds: 0, totalSeconds: 0, remainingSeconds: 0, interval: null, isRunning: false }; let multipleTimers = []; let nextTimerId = 1; // Initialize timer function initTimer() { resetTimer(); } // Set timer from inputs function setTimer(hours, minutes, seconds) { document.getElementById('hours').value = hours; document.getElementById('minutes').value = minutes; document.getElementById('seconds').value = seconds; mainTimer.hours = hours; mainTimer.minutes = minutes; mainTimer.seconds = seconds; mainTimer.totalSeconds = hours * 3600 + minutes * 60 + seconds; mainTimer.remainingSeconds = mainTimer.totalSeconds; updateTimerDisplay(); } // Start main timer function startTimer() { if (mainTimer.totalSeconds === 0) { // Get values from inputs const hours = parseInt(document.getElementById('hours').value) || 0; const minutes = parseInt(document.getElementById('minutes').value) || 0; const seconds = parseInt(document.getElementById('seconds').value) || 0; setTimer(hours, minutes, seconds); } if (mainTimer.totalSeconds === 0) { alert('Please set a time'); return; } if (mainTimer.isRunning) return; mainTimer.isRunning = true; // Update UI document.getElementById('startBtn').style.display = 'none'; document.getElementById('pauseBtn').style.display = 'inline-block'; document.getElementById('timerInput').style.display = 'none'; mainTimer.interval = setInterval(() => { if (mainTimer.remainingSeconds > 0) { mainTimer.remainingSeconds--; updateTimerDisplay(); } else { completeTimer(); } }, 1000); } // Pause main timer function pauseTimer() { if (!mainTimer.isRunning) return; clearInterval(mainTimer.interval); mainTimer.isRunning = false; // Update UI document.getElementById('startBtn').style.display = 'inline-block'; document.getElementById('pauseBtn').style.display = 'none'; } // Reset main timer function resetTimer() { pauseTimer(); mainTimer.hours = 0; mainTimer.minutes = 0; mainTimer.seconds = 0; mainTimer.totalSeconds = 0; mainTimer.remainingSeconds = 0; // Update UI document.getElementById('startBtn').style.display = 'inline-block'; document.getElementById('pauseBtn').style.display = 'none'; document.getElementById('timerInput').style.display = 'block'; document.getElementById('hours').value = 0; document.getElementById('minutes').value = 0; document.getElementById('seconds').value = 0; updateTimerDisplay(); } // Complete timer function completeTimer() { pauseTimer(); // Play sound const audio = document.getElementById('timerSound'); audio.play(); // Show modal const modal = document.getElementById('timerCompleteModal'); const message = document.getElementById('timerCompleteMessage'); message.textContent = `${mainTimer.hours}h ${mainTimer.minutes}m ${mainTimer.seconds}s timer completed!`; modal.style.display = 'flex'; // Auto hide after 5 seconds setTimeout(() => { modal.style.display = 'none'; }, 5000); } // Dismiss timer complete modal function dismissTimerComplete() { document.getElementById('timerCompleteModal').style.display = 'none'; } // Update timer display function updateTimerDisplay() { const display = document.getElementById('timerDisplay'); const hours = Math.floor(mainTimer.remainingSeconds / 3600); const minutes = Math.floor((mainTimer.remainingSeconds % 3600) / 60); const seconds = mainTimer.remainingSeconds % 60; display.textContent = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`; // Update document title document.title = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)} - Timer`; } // Add new multiple timer function addNewTimer() { const timer = { id: nextTimerId++, name: `Timer ${nextTimerId - 1}`, hours: 0, minutes: 0, seconds: 0, totalSeconds: 0, remainingSeconds: 0, interval: null, isRunning: false }; multipleTimers.push(timer); updateMultipleTimersUI(); } // Delete multiple timer function deleteTimer(id) { const index = multipleTimers.findIndex(t => t.id === id); if (index !== -1) { const timer = multipleTimers[index]; if (timer.interval) { clearInterval(timer.interval); } multipleTimers.splice(index, 1); updateMultipleTimersUI(); } } // Start multiple timer function startMultipleTimer(id) { const timer = multipleTimers.find(t => t.id === id); if (!timer || timer.isRunning) return; if (timer.totalSeconds === 0) { // Get values from inputs (you'd need to create input fields in the UI) return; } timer.isRunning = true; timer.interval = setInterval(() => { if (timer.remainingSeconds > 0) { timer.remainingSeconds--; updateMultipleTimerDisplay(id); } else { completeMultipleTimer(id); } }, 1000); updateMultipleTimersUI(); } // Pause multiple timer function pauseMultipleTimer(id) { const timer = multipleTimers.find(t => t.id === id); if (!timer || !timer.isRunning) return; clearInterval(timer.interval); timer.isRunning = false; updateMultipleTimersUI(); } // Reset multiple timer function resetMultipleTimer(id) { const timer = multipleTimers.find(t => t.id === id); if (!timer) return; if (timer.interval) { clearInterval(timer.interval); } timer.isRunning = false; timer.remainingSeconds = timer.totalSeconds; updateMultipleTimerDisplay(id); updateMultipleTimersUI(); } // Complete multiple timer function completeMultipleTimer(id) { const timer = multipleTimers.find(t => t.id === id); if (!timer) return; pauseMultipleTimer(id); // Play sound const audio = document.getElementById('timerSound'); audio.play(); // Show notification showNotification(`Timer "${timer.name}" completed!`); } // Update multiple timer display function updateMultipleTimerDisplay(id) { const timer = multipleTimers.find(t => t.id === id); if (!timer) return; const element = document.getElementById(`timer-${id}`); if (element) { const hours = Math.floor(timer.remainingSeconds / 3600); const minutes = Math.floor((timer.remainingSeconds % 3600) / 60); const seconds = timer.remainingSeconds % 60; element.querySelector('.timer-time').textContent = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`; } } // Update multiple timers UI function updateMultipleTimersUI() { const container = document.getElementById('timersList'); if (!container) return; if (multipleTimers.length === 0) { container.innerHTML = '<p class="no-timers">No additional timers</p>'; return; } let html = ''; multipleTimers.forEach(timer => { const hours = Math.floor(timer.remainingSeconds / 3600); const minutes = Math.floor((timer.remainingSeconds % 3600) / 60); const seconds = timer.remainingSeconds % 60; html += ` <div class="timer-card" id="timer-${timer.id}"> <button class="delete-timer" onclick="deleteTimer(${timer.id})">✕</button> <div class="timer-name">${escapeHtml(timer.name)}</div> <div class="timer-time">${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}</div> <div class="timer-status">${timer.isRunning ? 'Running' : 'Stopped'}</div> <div class="timer-controls"> ${!timer.isRunning ? `<button onclick="startMultipleTimer(${timer.id})">Start</button>` : `<button onclick="pauseMultipleTimer(${timer.id})">Pause</button>` } <button onclick="resetMultipleTimer(${timer.id})">Reset</button> </div> </div> `; }); container.innerHTML = html; } // Pad zero helper (reused from clock.js) function padZero(num) { return num.toString().padStart(2, '0'); } // Initialize on page load document.addEventListener('DOMContentLoaded', initTimer);

6. clock/alarms.php (Alarm Management Page)

<?php require_once '../includes/config.php'; $page_title = 'Alarms - Digital Clock'; include '../includes/header.php'; ?> <link rel="stylesheet" href="css/clock.css"> <div class="alarms-container"> <div class="clock-header"> <nav class="clock-nav"> <a href="index.php" class="nav-link">Clock</a> <a href="alarms.php" class="nav-link active">Alarms</a> <a href="timer.php" class="nav-link">Timer</a> <a href="stopwatch.php" class="nav-link">Stopwatch</a> <a href="settings.php" class="nav-link">Settings</a> </nav> </div> <div class="alarms-main"> <h1>Alarms</h1> <!-- Add Alarm Button --> <button class="add-alarm-btn" onclick="showAddAlarmModal()">+ Add New Alarm</button> <!-- Alarms List --> <div class="alarms-list-container" id="alarmsList"> <!-- Alarms will be loaded here by JavaScript --> </div> </div> </div> <!-- Add/Edit Alarm Modal --> <div id="alarmModal" class="modal" style="display: none;"> <div class="modal-content"> <div class="modal-header"> <h2 id="modalTitle">Add Alarm</h2> <span class="close" onclick="closeAlarmModal()">&times;</span> </div> <div class="modal-body"> <form id="alarmForm" onsubmit="saveAlarm(event)"> <input type="hidden" id="alarmId" value=""> <div class="form-group"> <label for="alarmTime">Time</label> <input type="time" id="alarmTime" class="form-control" required> </div> <div class="form-group"> <label for="alarmLabel">Label</label> <input type="text" id="alarmLabel" class="form-control" placeholder="Wake up" value="Alarm"> </div> <div class="form-group"> <label>Repeat</label> <div class="days-selector"> <label class="day-checkbox"> <input type="checkbox" name="days[]" value="0"> Sun </label> <label class="day-checkbox"> <input type="checkbox" name="days[]" value="1" checked> Mon </label> <label class="day-checkbox"> <input type="checkbox" name="days[]" value="2" checked> Tue </label> <label class="day-checkbox"> <input type="checkbox" name="days[]" value="3" checked> Wed </label> <label class="day-checkbox"> <input type="checkbox" name="days[]" value="4" checked> Thu </label> <label class="day-checkbox"> <input type="checkbox" name="days[]" value="5" checked> Fri </label> <label class="day-checkbox"> <input type="checkbox" name="days[]" value="6"> Sat </label> </div> </div> <div class="form-group"> <label for="alarmSound">Sound</label> <select id="alarmSound" class="form-control"> <option value="alarm-1.mp3">Classic Alarm</option> <option value="alarm-2.mp3">Digital Beep</option> <option value="gentle.mp3">Gentle Wake</option> <option value="notification.mp3">Notification</option> </select> </div> <div class="form-group"> <label for="alarmVolume">Volume</label> <input type="range" id="alarmVolume" min="0" max="100" value="80" class="volume-slider"> <span id="volumeValue">80%</span> </div> <div class="form-group"> <label> <input type="checkbox" id="snoozeEnabled" checked> Enable Snooze </label> </div> <div class="form-group" id="snoozeGroup"> <label for="snoozeDuration">Snooze Duration (minutes)</label> <select id="snoozeDuration" class="form-control"> <option value="5">5 minutes</option> <option value="10">10 minutes</option> <option value="15">15 minutes</option> </select> </div> <div class="form-actions"> <button type="submit" class="btn-save">Save Alarm</button> <button type="button" class="btn-cancel" onclick="closeAlarmModal()">Cancel</button> </div> </form> </div> </div> </div> <script src="js/clock.js"></script> <script src="js/alarms.js"></script> <style> .alarms-container { max-width: 800px; margin: 0 auto; padding: 2rem; } .alarms-main { text-align: center; } .alarms-main h1 { font-size: 2.5rem; margin-bottom: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .add-alarm-btn { padding: 1rem 2rem; font-size: 1.1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 2rem; transition: opacity 0.3s; } .add-alarm-btn:hover { opacity: 0.9; } .alarms-list-container { background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 1rem; } .alarm-item { display: flex; align-items: center; padding: 1rem; border-bottom: 1px solid #eee; transition: background 0.3s; } .alarm-item:hover { background: #f8f9fa; } .alarm-item:last-child { border-bottom: none; } .alarm-time { font-size: 1.5rem; font-weight: bold; width: 100px; } .alarm-details { flex: 1; text-align: left; } .alarm-label { font-size: 1.1rem; margin-bottom: 0.3rem; } .alarm-schedule { font-size: 0.9rem; color: #666; } .alarm-actions { display: flex; gap: 0.5rem; } .alarm-edit, .alarm-delete { padding: 0.3rem 0.8rem; border: none; border-radius: 3px; cursor: pointer; transition: opacity 0.3s; } .alarm-edit { background: #ffc107; color: #333; } .alarm-delete { background: #dc3545; color: white; } .alarm-edit:hover, .alarm-delete:hover { opacity: 0.9; } /* Modal Styles */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; overflow-y: auto; } .modal-content { background: white; max-width: 500px; margin: 50px auto; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .modal-header { padding: 1rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .modal-header h2 { margin: 0; font-size: 1.5rem; } .close { font-size: 1.5rem; cursor: pointer; color: #888; } .close:hover { color: #333; } .modal-body { padding: 1.5rem; } .form-group { margin-bottom: 1.5rem; text-align: left; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333; } .form-control { width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; } .days-selector { display: flex; gap: 0.5rem; flex-wrap: wrap; } .day-checkbox { display: flex; align-items: center; gap: 0.2rem; padding: 0.3rem 0.6rem; background: #f8f9fa; border-radius: 3px; cursor: pointer; } .day-checkbox:hover { background: #e9ecef; } .volume-slider { width: 100%; margin-bottom: 0.5rem; } #volumeValue { margin-left: 0.5rem; font-weight: 500; } .form-actions { display: flex; gap: 1rem; margin-top: 2rem; } .btn-save, .btn-cancel { flex: 1; padding: 0.8rem; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: opacity 0.3s; } .btn-save { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .btn-cancel { background: #6c757d; color: white; } .btn-save:hover, .btn-cancel:hover { opacity: 0.9; } </style> <?php include '../includes/footer.php'; ?>

7. js/alarms.js (Alarm Management)

/** * Alarm Management JavaScript */ // Show add alarm modal function showAddAlarmModal() { document.getElementById('modalTitle').textContent = 'Add Alarm'; document.getElementById('alarmId').value = ''; document.getElementById('alarmForm').reset(); document.getElementById('alarmTime').value = '08:00'; document.getElementById('alarmModal').style.display = 'block'; } // Show edit alarm modal function showEditAlarmModal(id) { const alarm = alarms.find(a => a.id === id); if (!alarm) return; document.getElementById('modalTitle').textContent = 'Edit Alarm'; document.getElementById('alarmId').value = alarm.id; document.getElementById('alarmTime').value = alarm.time; document.getElementById('alarmLabel').value = alarm.label; document.getElementById('alarmSound').value = alarm.sound; document.getElementById('alarmVolume').value = alarm.volume; document.getElementById('volumeValue').textContent = alarm.volume + '%'; document.getElementById('snoozeEnabled').checked = alarm.snoozeEnabled; document.getElementById('snoozeDuration').value = alarm.snoozeDuration; // Set days document.querySelectorAll('input[name="days[]"]').forEach(cb => { cb.checked = alarm.days.includes(parseInt(cb.value)); }); document.getElementById('alarmModal').style.display = 'block'; } // Close alarm modal function closeAlarmModal() { document.getElementById('alarmModal').style.display = 'none'; } // Save alarm function saveAlarm(event) { event.preventDefault(); const id = document.getElementById('alarmId').value; const time = document.getElementById('alarmTime').value; const label = document.getElementById('alarmLabel').value; const sound = document.getElementById('alarmSound').value; const volume = parseInt(document.getElementById('alarmVolume').value); const snoozeEnabled = document.getElementById('snoozeEnabled').checked; const snoozeDuration = parseInt(document.getElementById('snoozeDuration').value); // Get selected days const days = []; document.querySelectorAll('input[name="days[]"]:checked').forEach(cb => { days.push(parseInt(cb.value)); }); const alarmData = { time, label, days, sound, volume, snoozeEnabled, snoozeDuration }; if (id) { // Update existing alarm updateAlarm(id, alarmData); } else { // Add new alarm addAlarm(alarmData); } closeAlarmModal(); updateAlarmsList(); } // Update alarms list (override from clock.js) function updateAlarmsList() { const container = document.getElementById('alarmsList'); if (!container) return; if (alarms.length === 0) { container.innerHTML = '<p class="no-alarms">No alarms set. Click "Add New Alarm" to create one.</p>'; return; } // Sort alarms by time const sorted = [...alarms].sort((a, b) => { return a.time.localeCompare(b.time); }); let html = ''; sorted.forEach(alarm => { const [hours, minutes] = alarm.time.split(':'); const time12 = formatTime12(parseInt(hours), parseInt(minutes)); html += ` <div class="alarm-item"> <div class="alarm-time">${time12}</div> <div class="alarm-details"> <div class="alarm-label">${escapeHtml(alarm.label)}</div> <div class="alarm-schedule">${formatDays(alarm.days)}</div> </div> <div class="alarm-actions"> <button class="alarm-edit" onclick="showEditAlarmModal('${alarm.id}')">Edit</button> <button class="alarm-delete" onclick="deleteAlarm('${alarm.id}')">Delete</button> </div> <label class="alarm-switch"> <input type="checkbox" ${alarm.isActive ? 'checked' : ''} onchange="toggleAlarm('${alarm.id}')"> <span class="alarm-slider"></span> </label> </div> `; }); container.innerHTML = html; } // Update volume display document.getElementById('alarmVolume')?.addEventListener('input', function(e) { document.getElementById('volumeValue').textContent = e.target.value + '%'; }); // Toggle snooze fields document.getElementById('snoozeEnabled')?.addEventListener('change', function(e) { document.getElementById('snoozeGroup').style.display = e.target.checked ? 'block' : 'none'; }); // Initialize on page load document.addEventListener('DOMContentLoaded', function() { loadAlarmsFromStorage(); updateAlarmsList(); });

🚀 How to Use This Project Step by Step

Step 1: Setup

Copy all files to your web server
Ensure proper permissions for sound files
Configure .env if using database storage

Step 2: Database (Optional)

If using server-side storage:

mysql -u root -p < database/clock.sql

Step 3: Access the Clock

Navigate to /clock/index.php in your browser

Step 4: Set Up Alarms

Click on "Alarms" tab
Click "Add New Alarm"
Set time, label, repeat days
Choose sound and volume
Save alarm

Step 5: Use Timer

Go to Timer tab
Set hours, minutes, seconds
Click Start
Timer will notify when complete

Step 6: Use Stopwatch

Go to Stopwatch tab
Click Start to begin timing
Use Lap button to record splits
Reset to start over

Step 7: Customize Settings

Go to Settings tab
Choose time format (12/24 hour)
Select theme (Light/Dark/Auto)
Set default sound and volume
Configure snooze preferences

🔒 Security Features

Client-Side Security:

✅ Alarms stored in localStorage (no server needed)
✅ XSS protection with escapeHtml function
✅ Input validation for all forms
✅ Secure audio playback

Optional Server-Side:

✅ Database storage with prepared statements
✅ User authentication integration
✅ Rate limiting for API calls
✅ Encrypted sensitive data

🎯 Keyboard Shortcuts

Key	Function
Space	Snooze active alarm
Escape	Dismiss active alarm
Ctrl+F	Toggle fullscreen
Ctrl+T	Toggle theme
Ctrl+1	Go to Clock
Ctrl+2	Go to Alarms
Ctrl+3	Go to Timer
Ctrl+4	Go to Stopwatch
Ctrl+S	Start/Stop timer

🚀 Future Enhancements

Advanced Features:

Sunrise simulation alarm
Smart wake (light sleep detection)
Weather integration
Calendar sync

Sound Options:

Custom sound upload
Spotify/Apple Music integration
Gradual volume increase
Playlist support

Visual Features:

Custom clock faces
Animated backgrounds
Weather display
News ticker

Smart Features:

Voice control
IFTTT integration
Smart home integration
Bedtime reminders

Analytics:

Sleep tracking
Wake-up patterns
Alarm effectiveness
Usage statistics

📝 Conclusion

This Digital Clock with Alarm System provides a complete time management solution with beautiful analog and digital displays, comprehensive alarm management, timer functionality, and stopwatch features. The system is built with pure HTML, CSS, and JavaScript for the frontend, making it lightweight and fast. With support for multiple alarms, customizable sounds, and various themes, it's perfect for any website needing time management tools or as a standalone productivity application.