From a666b77461507002e0abedba832268486431fe0d Mon Sep 17 00:00:00 2001
From: pehlivanovicparis-cloud <pehlivanovicparis@gmail.com>
Date: Fri, 1 May 2026 15:45:09 -0400
Subject: [PATCH] Add digital clock displaying current time in multiple time
 zones

---
 timezone-clock.html | 344 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 344 insertions(+)
 create mode 100644 timezone-clock.html
diff --git a/timezone-clock.html b/timezone-clock.html
new file mode 100644
index 00000000..9bbf6ce6
--- /dev/null
+++ b/timezone-clock.html
@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>World Digital Clock - Multiple Time Zones</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;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            width: 100%;
+        }
+
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 50px;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        .clocks-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+
+        .clock-card {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+            text-align: center;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .clock-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
+        }
+
+        .timezone-name {
+            font-size: 1.3em;
+            font-weight: bold;
+            color: #667eea;
+            margin-bottom: 15px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .time-display {
+            font-size: 3em;
+            font-weight: bold;
+            color: #333;
+            font-family: 'Courier New', monospace;
+            margin: 20px 0;
+            letter-spacing: 2px;
+        }
+
+        .date-display {
+            font-size: 0.95em;
+            color: #666;
+            margin-top: 15px;
+            border-top: 1px solid #eee;
+            padding-top: 15px;
+        }
+
+        .utc-offset {
+            font-size: 0.85em;
+            color: #999;
+            margin-top: 10px;
+            font-style: italic;
+        }
+
+        .controls {
+            text-align: center;
+            margin-top: 30px;
+        }
+
+        .btn {
+            background: white;
+            color: #667eea;
+            border: 2px solid white;
+            padding: 12px 30px;
+            margin: 0 10px;
+            border-radius: 25px;
+            font-size: 1em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .btn:hover {
+            background: transparent;
+            color: white;
+        }
+
+        .format-toggle {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 30px;
+        }
+
+        .format-btn {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: 2px solid white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 0.95em;
+            transition: all 0.3s ease;
+        }
+
+        .format-btn.active {
+            background: white;
+            color: #667eea;
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 1.8em;
+            }
+
+            .time-display {
+                font-size: 2em;
+            }
+
+            .clocks-grid {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🌍 World Digital Clock</h1>
+            <p>Current time across different time zones</p>
+        </div>
+
+        <div class="format-toggle">
+            <button class="format-btn active" onclick="setFormat('12h')">12-Hour</button>
+            <button class="format-btn" onclick="setFormat('24h')">24-Hour</button>
+        </div>
+
+        <div class="clocks-grid" id="clocksGrid"></div>
+
+        <div class="controls">
+            <button class="btn" onclick="addTimezone()">+ Add Time Zone</button>
+            <button class="btn" onclick="resetTimezones()">Reset to Default</button>
+        </div>
+    </div>
+
+    <script>
+        // Default time zones to display
+        const defaultTimezones = [
+            { name: 'New York', timezone: 'America/New_York' },
+            { name: 'London', timezone: 'Europe/London' },
+            { name: 'Tokyo', timezone: 'Asia/Tokyo' },
+            { name: 'Sydney', timezone: 'Australia/Sydney' },
+            { name: 'Dubai', timezone: 'Asia/Dubai' },
+            { name: 'São Paulo', timezone: 'America/Sao_Paulo' }
+        ];
+
+        let timezones = [...defaultTimezones];
+        let timeFormat = '12h';
+
+        // Available time zones for adding
+        const availableTimezones = [
+            { name: 'New York', timezone: 'America/New_York' },
+            { name: 'Los Angeles', timezone: 'America/Los_Angeles' },
+            { name: 'London', timezone: 'Europe/London' },
+            { name: 'Paris', timezone: 'Europe/Paris' },
+            { name: 'Tokyo', timezone: 'Asia/Tokyo' },
+            { name: 'Sydney', timezone: 'Australia/Sydney' },
+            { name: 'Dubai', timezone: 'Asia/Dubai' },
+            { name: 'Mumbai', timezone: 'Asia/Kolkata' },
+            { name: 'Beijing', timezone: 'Asia/Shanghai' },
+            { name: 'São Paulo', timezone: 'America/Sao_Paulo' },
+            { name: 'Moscow', timezone: 'Europe/Moscow' },
+            { name: 'Bangkok', timezone: 'Asia/Bangkok' },
+            { name: 'Singapore', timezone: 'Asia/Singapore' },
+            { name: 'Hong Kong', timezone: 'Asia/Hong_Kong' },
+            { name: 'Istanbul', timezone: 'Europe/Istanbul' },
+            { name: 'Mexico City', timezone: 'America/Mexico_City' },
+            { name: 'Toronto', timezone: 'America/Toronto' },
+            { name: 'UTC', timezone: 'UTC' }
+        ];
+
+        function formatTime(date, format) {
+            let hours = date.getHours();
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            const seconds = String(date.getSeconds()).padStart(2, '0');
+
+            if (format === '12h') {
+                const ampm = hours >= 12 ? 'PM' : 'AM';
+                hours = hours % 12;
+                hours = hours ? hours : 12;
+                hours = String(hours).padStart(2, '0');
+                return `${hours}:${minutes}:${seconds} ${ampm}`;
+            } else {
+                hours = String(hours).padStart(2, '0');
+                return `${hours}:${minutes}:${seconds}`;
+            }
+        }
+
+        function formatDate(date) {
+            const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
+            return date.toLocaleDateString('en-US', options);
+        }
+
+        function getUTCOffset(timezone) {
+            const date = new Date();
+            const formatter = new Intl.DateTimeFormat('en-US', {
+                timeZone: timezone,
+                hour12: false,
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+
+            const tzTime = new Date(formatter.format(date));
+            const offset = date.getTime() - tzTime.getTime();
+            const offsetHours = Math.floor(offset / (1000 * 60 * 60));
+            const offsetMinutes = Math.floor((offset % (1000 * 60 * 60)) / (1000 * 60));
+
+            const sign = offsetHours >= 0 ? '+' : '-';
+            const absHours = Math.abs(offsetHours);
+            const absMinutes = Math.abs(offsetMinutes);
+
+            return `UTC ${sign}${String(absHours).padStart(2, '0')}:${String(absMinutes).padStart(2, '0')}`;
+        }
+
+        function getTimeInTimezone(timezone) {
+            const date = new Date();
+            const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
+            const tzDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
+            const offset = tzDate - utcDate;
+            return new Date(date.getTime() + offset);
+        }
+
+        function renderClocks() {
+            const grid = document.getElementById('clocksGrid');
+            grid.innerHTML = '';
+
+            timezones.forEach((tz, index) => {
+                const timeInTz = getTimeInTimezone(tz.timezone);
+                const time = formatTime(timeInTz, timeFormat);
+                const date = formatDate(timeInTz);
+                const offset = getUTCOffset(tz.timezone);
+
+                const card = document.createElement('div');
+                card.className = 'clock-card';
+                card.innerHTML = `
+                    <div class="timezone-name">${tz.name}</div>
+                    <div class="time-display">${time}</div>
+                    <div class="date-display">${date}</div>
+                    <div class="utc-offset">${offset}</div>
+                    ${timezones.length > 1 ? `<button onclick="removeTimezone(${index})" style="margin-top: 15px; background: #ff6b6b; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer;">Remove</button>` : ''}
+                `;
+                grid.appendChild(card);
+            });
+        }
+
+        function setFormat(format) {
+            timeFormat = format;
+            document.querySelectorAll('.format-btn').forEach(btn => btn.classList.remove('active'));
+            event.target.classList.add('active');
+            renderClocks();
+        }
+
+        function addTimezone() {
+            const availableNames = availableTimezones.map(tz => tz.name);
+            const currentNames = timezones.map(tz => tz.name);
+            const notAdded = availableTimezones.filter(tz => !currentNames.includes(tz.name));
+
+            if (notAdded.length === 0) {
+                alert('All available time zones are already added!');
+                return;
+            }
+
+            const name = prompt(
+                'Enter time zone name:\n\n' + 
+                notAdded.map((tz, i) => `${i + 1}. ${tz.name}`).join('\n')
+            );
+
+            if (name) {
+                const found = availableTimezones.find(tz => tz.name.toLowerCase() === name.toLowerCase());
+                if (found && !timezones.find(t => t.name === found.name)) {
+                    timezones.push(found);
+                    renderClocks();
+                } else {
+                    alert('Time zone not found or already added!');
+                }
+            }
+        }
+
+        function removeTimezone(index) {
+            if (timezones.length > 1) {
+                timezones.splice(index, 1);
+                renderClocks();
+            }
+        }
+
+        function resetTimezones() {
+            timezones = [...defaultTimezones];
+            renderClocks();
+        }
+
+        // Initial render
+        renderClocks();
+
+        // Update clocks every second
+        setInterval(renderClocks, 1000);
+    </script>
+</body>
+</html>
