Spaces:

lior007
/

my-clock

Running

File size: 9,615 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elegant Digital Clock</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
        
        .clock-container {
            font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
            transition: all 0.5s ease;
        }
        
        .clock-face {
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 
                        inset 0 0 10px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }
        
        .time-segment {
            transition: all 0.3s ease;
        }
        
        .time-segment:hover {
            transform: scale(1.05);
            text-shadow: 0 0 15px rgba(0, 255, 255, 1);
        }
        
        .date-display {
            letter-spacing: 2px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
        }
        
        .theme-btn {
            transition: all 0.3s ease;
        }
        
        .theme-btn:hover {
            transform: rotate(15deg) scale(1.1);
        }
        
        .glow {
            animation: glow 2s infinite alternate;
        }
        
        @keyframes glow {
            from {
                box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
            }
            to {
                box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
            }
        }
    </style>
</head>
<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4 transition-colors duration-500">
    <div class="clock-container w-full max-w-md">
        <div class="clock-face bg-gray-800 bg-opacity-70 rounded-2xl p-8 border border-cyan-400 border-opacity-30 relative overflow-hidden">
            <!-- Theme toggle button -->
            <button id="themeToggle" class="theme-btn absolute top-4 right-4 text-cyan-400 text-xl hover:text-cyan-300">
                <i class="fas fa-moon"></i>
            </button>
            
            <!-- Time display -->
            <div class="time-display flex justify-center items-center mb-6">
                <div id="hours" class="time-segment text-6xl font-bold text-cyan-400 mr-2">00</div>
                <div class="text-6xl font-bold text-cyan-400 opacity-70">:</div>
                <div id="minutes" class="time-segment text-6xl font-bold text-cyan-400 mx-2">00</div>
                <div class="text-6xl font-bold text-cyan-400 opacity-70">:</div>
                <div id="seconds" class="time-segment text-6xl font-bold text-cyan-400 ml-2">00</div>
            </div>
            
            <!-- AM/PM indicator -->
            <div id="ampm" class="text-xl font-semibold text-cyan-300 text-center mb-1">AM</div>
            
            <!-- Date display -->
            <div id="date" class="date-display text-lg text-gray-300 text-center mt-4"></div>
            
            <!-- Additional features -->
            <div class="flex justify-center mt-6 space-x-4">
                <button id="formatToggle" class="glow bg-cyan-800 bg-opacity-50 hover:bg-opacity-70 text-cyan-300 px-4 py-2 rounded-full flex items-center">
                    <i class="fas fa-exchange-alt mr-2"></i> 24H/12H
                </button>
                <button id="stopwatchBtn" class="glow bg-cyan-800 bg-opacity-50 hover:bg-opacity-70 text-cyan-300 px-4 py-2 rounded-full flex items-center">
                    <i class="fas fa-stopwatch mr-2"></i> Stopwatch
                </button>
            </div>
        </div>
        
        <!-- Footer with greeting -->
        <div id="greeting" class="text-center mt-6 text-xl text-gray-300"></div>
    </div>

    <script>
        // DOM elements
        const hoursElement = document.getElementById('hours');
        const minutesElement = document.getElementById('minutes');
        const secondsElement = document.getElementById('seconds');
        const ampmElement = document.getElementById('ampm');
        const dateElement = document.getElementById('date');
        const greetingElement = document.getElementById('greeting');
        const themeToggle = document.getElementById('themeToggle');
        const formatToggle = document.getElementById('formatToggle');
        const stopwatchBtn = document.getElementById('stopwatchBtn');
        const body = document.body;
        const clockFace = document.querySelector('.clock-face');
        
        // State variables
        let is24HourFormat = true;
        let isDarkTheme = true;
        let isStopwatchMode = false;
        let stopwatchStartTime = 0;
        let stopwatchInterval = null;
        
        // Initialize clock
        updateClock();
        setInterval(updateClock, 1000);
        
        // Theme toggle
        themeToggle.addEventListener('click', () => {
            isDarkTheme = !isDarkTheme;
            
            if (isDarkTheme) {
                body.classList.remove('bg-gray-100');
                body.classList.add('bg-gray-900');
                clockFace.classList.remove('bg-gray-200', 'text-gray-800');
                clockFace.classList.add('bg-gray-800', 'text-cyan-400');
                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
                document.querySelectorAll('.glow').forEach(el => {
                    el.classList.remove('bg-gray-300', 'text-gray-800');
                    el.classList.add('bg-cyan-800', 'text-cyan-300');
                });
            } else {
                body.classList.remove('bg-gray-900');
                body.classList.add('bg-gray-100');
                clockFace.classList.remove('bg-gray-800', 'text-cyan-400');
                clockFace.classList.add('bg-gray-200', 'text-gray-800');
                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
                document.querySelectorAll('.glow').forEach(el => {
                    el.classList.remove('bg-cyan-800', 'text-cyan-300');
                    el.classList.add('bg-gray-300', 'text-gray-800');
                });
            }
        });
        
        // Format toggle
        formatToggle.addEventListener('click', () => {
            is24HourFormat = !is24HourFormat;
            updateClock();
        });
        
        // Stopwatch toggle
        stopwatchBtn.addEventListener('click', () => {
            isStopwatchMode = !isStopwatchMode;
            
            if (isStopwatchMode) {
                stopwatchStartTime = Date.now();
                stopwatchInterval = setInterval(updateStopwatch, 10);
                stopwatchBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop';
            } else {
                clearInterval(stopwatchInterval);
                stopwatchBtn.innerHTML = '<i class="fas fa-stopwatch mr-2"></i> Stopwatch';
                setTimeout(updateClock, 100); // Return to normal clock
            }
        });
        
        // Update clock function
        function updateClock() {
            if (isStopwatchMode) return;
            
            const now = new Date();
            let hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();
            const ampm = hours >= 12 ? 'PM' : 'AM';
            
            // Format hours based on 12/24 hour setting
            if (!is24HourFormat) {
                hours = hours % 12 || 12;
            }
            
            // Update time display
            hoursElement.textContent = hours.toString().padStart(2, '0');
            minutesElement.textContent = minutes.toString().padStart(2, '0');
            secondsElement.textContent = seconds.toString().padStart(2, '0');
            
            // Update AM/PM display
            ampmElement.textContent = is24HourFormat ? '' : ampm;
            
            // Update date
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            dateElement.textContent = now.toLocaleDateString(undefined, options);
            
            // Update greeting
            updateGreeting(hours);
        }
        
        // Update stopwatch function
        function updateStopwatch() {
            const elapsed = Date.now() - stopwatchStartTime;
            const milliseconds = Math.floor(elapsed % 1000 / 10);
            const seconds = Math.floor(elapsed / 1000) % 60;
            const minutes = Math.floor(elapsed / (1000 * 60)) % 60;
            const hours = Math.floor(elapsed / (1000 * 60 * 60));
            
            hoursElement.textContent = hours.toString().padStart(2, '0');
            minutesElement.textContent = minutes.toString().padStart(2, '0');
            secondsElement.textContent = seconds.toString().padStart(2, '0');
            ampmElement.textContent = milliseconds.toString().padStart(2, '0');
            dateElement.textContent = 'Stopwatch';
        }
        
        // Update greeting based on time of day
        function updateGreeting(hours) {
            let greeting = '';
            
            if (hours < 12) {
                greeting = 'Good Morning!';
            } else if (hours < 18) {
                greeting = 'Good Afternoon!';
            } else {
                greeting = 'Good Evening!';
            }
            
            greetingElement.textContent = greeting;
        }
    </script>
</body>
</html>