From f1048f27a86d665614d9a2468dbbbc3c82b821b4 Mon Sep 17 00:00:00 2001
From: kdurmaz-byte <kdurmaz@esteticderm.com.tr>
Date: Mon, 17 Aug 2026 05:15:14 +0300
Subject: [PATCH] Add multi-timezone digital clock application

---
 digital-clock.html | 251 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 251 insertions(+)
 create mode 100644 digital-clock.html
diff --git a/digital-clock.html b/digital-clock.html
new file mode 100644
index 00000000..5b2c40f5
--- /dev/null
+++ b/digital-clock.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Timezone Digital Clock</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            width: 100%;
+        }
+
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 40px;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .clocks-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 20px;
+        }
+
+        .clock-card {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .clock-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .timezone-name {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+
+        .timezone-info {
+            font-size: 0.9rem;
+            color: #666;
+            text-align: center;
+            margin-bottom: 15px;
+        }
+
+        .digital-time {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #fff;
+            font-size: 2.2rem;
+            font-weight: bold;
+            text-align: center;
+            padding: 20px;
+            border-radius: 10px;
+            font-family: 'Courier New', monospace;
+            letter-spacing: 2px;
+            margin-bottom: 15px;
+            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .am-pm {
+            font-size: 1rem;
+            font-weight: 600;
+        }
+
+        .date-display {
+            text-align: center;
+            color: #666;
+            font-size: 0.95rem;
+            margin-bottom: 10px;
+        }
+
+        .day-display {
+            text-align: center;
+            color: #888;
+            font-size: 0.85rem;
+            font-weight: 500;
+        }
+
+        .offset-info {
+            text-align: center;
+            font-size: 0.85rem;
+            color: #999;
+            margin-top: 10px;
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 1.8rem;
+            }
+
+            .clocks-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .digital-time {
+                font-size: 1.8rem;
+            }
+        }
+
+        /* Animation for clock update */
+        @keyframes pulse {
+            0% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.8;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+
+        .clock-card.updating {
+            animation: pulse 0.3s ease;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🌍 World Clock</h1>
+            <p>Current time across different time zones</p>
+        </div>
+        <div class="clocks-grid" id="clocksContainer"></div>
+    </div>
+
+    <script>
+        // Define timezones to display
+        const timezones = [
+            { name: 'New York', tz: 'America/New_York', emoji: '🗽' },
+            { name: 'Los Angeles', tz: 'America/Los_Angeles', emoji: '🌴' },
+            { name: 'London', tz: 'Europe/London', emoji: '☕' },
+            { name: 'Paris', tz: 'Europe/Paris', emoji: '🗼' },
+            { name: 'Tokyo', tz: 'Asia/Tokyo', emoji: '🗾' },
+            { name: 'Sydney', tz: 'Australia/Sydney', emoji: '🦘' },
+            { name: 'Dubai', tz: 'Asia/Dubai', emoji: '🏜️' },
+            { name: 'Singapore', tz: 'Asia/Singapore', emoji: '🏝️' },
+            { name: 'Hong Kong', tz: 'Asia/Hong_Kong', emoji: '🏙️' },
+            { name: 'Mumbai', tz: 'Asia/Kolkata', emoji: '🇮🇳' },
+            { name: 'Bangkok', tz: 'Asia/Bangkok', emoji: '🏛️' },
+            { name: 'Mexico City', tz: 'America/Mexico_City', emoji: '🌮' }
+        ];
+
+        const container = document.getElementById('clocksContainer');
+
+        // Create clock cards
+        function createClockCards() {
+            container.innerHTML = '';
+            timezones.forEach((timezone, index) => {
+                const card = document.createElement('div');
+                card.className = 'clock-card';
+                card.id = `clock-${index}`;
+                card.innerHTML = `
+                    <div class="timezone-name">${timezone.emoji} ${timezone.name}</div>
+                    <div class="timezone-info">${timezone.tz}</div>
+                    <div class="digital-time" id="time-${index}">--:--:--</div>
+                    <div class="date-display" id="date-${index}">---</div>
+                    <div class="day-display" id="day-${index}">---</div>
+                    <div class="offset-info" id="offset-${index}">UTC+0</div>
+                `;
+                container.appendChild(card);
+            });
+        }
+
+        // Update clock display
+        function updateClocks() {
+            timezones.forEach((timezone, index) => {
+                const timeElement = document.getElementById(`time-${index}`);
+                const dateElement = document.getElementById(`date-${index}`);
+                const dayElement = document.getElementById(`day-${index}`);
+                const offsetElement = document.getElementById(`offset-${index}`);
+                const card = document.getElementById(`clock-${index}`);
+
+                // Get current time in specific timezone
+                const now = new Date();
+                const timeString = now.toLocaleString('en-US', {
+                    timeZone: timezone.tz,
+                    hour12: false,
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit'
+                });
+
+                const dateString = now.toLocaleString('en-US', {
+                    timeZone: timezone.tz,
+                    year: 'numeric',
+                    month: 'short',
+                    day: '2-digit'
+                });
+
+                const dayString = now.toLocaleString('en-US', {
+                    timeZone: timezone.tz,
+                    weekday: 'long'
+                });
+
+                // Calculate UTC offset
+                const tzDate = new Date(now.toLocaleString('en-US', { timeZone: timezone.tz }));
+                const utcDate = new Date(now.toLocaleString('en-US', { timeZone: 'UTC' }));
+                const offset = Math.round((tzDate - utcDate) / (1000 * 60 * 60));
+                const offsetSign = offset >= 0 ? '+' : '';
+                const offsetString = `UTC${offsetSign}${offset}`;
+
+                // Update elements
+                timeElement.textContent = timeString;
+                dateElement.textContent = dateString;
+                dayElement.textContent = dayString;
+                offsetElement.textContent = offsetString;
+
+                // Add animation
+                card.classList.add('updating');
+                setTimeout(() => card.classList.remove('updating'), 300);
+            });
+        }
+
+        // Initialize and start updating
+        createClockCards();
+        updateClocks();
+        setInterval(updateClocks, 1000);
+    </script>
+</body>
+</html>
