Add digital world clock feature with multi-timezone support (#4)

Copilot · web-flow · commit 94c806f9722b · 2025-10-10T17:09:06.000-04:00
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/src/static/index.html b/examples/src/static/index.html
@@ -8,9 +8,35 @@
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
     <link rel="icon" type="image/png" href="./playcanvas-logo.png" />
     <link rel="stylesheet" href="styles.css">
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body>
     <div id='app'></div>
+    
+    <!-- World Clocks Section -->
+    <div id="world-clocks" class="fixed bottom-4 right-4 bg-gray-900 bg-opacity-90 rounded-lg shadow-2xl p-6 backdrop-blur-sm border border-gray-700">
+        <h2 class="text-2xl font-bold text-white mb-4 text-center border-b border-gray-700 pb-2">World Clocks</h2>
+        <div class="grid grid-cols-2 gap-4">
+            <div class="clock-item bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition-colors">
+                <div class="text-sm text-gray-400 mb-1">New York</div>
+                <div id="clock-newyork" class="text-xl font-mono text-blue-400">--:--:--</div>
+            </div>
+            <div class="clock-item bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition-colors">
+                <div class="text-sm text-gray-400 mb-1">London</div>
+                <div id="clock-london" class="text-xl font-mono text-green-400">--:--:--</div>
+            </div>
+            <div class="clock-item bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition-colors">
+                <div class="text-sm text-gray-400 mb-1">Tokyo</div>
+                <div id="clock-tokyo" class="text-xl font-mono text-purple-400">--:--:--</div>
+            </div>
+            <div class="clock-item bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition-colors">
+                <div class="text-sm text-gray-400 mb-1">Local Time</div>
+                <div id="clock-local" class="text-xl font-mono text-orange-400">--:--:--</div>
+            </div>
+        </div>
+    </div>
+    
 	<script src="index.js"></script>
+    <script src="scripts/main.js"></script>
 </body>
 </html>
diff --git a/examples/src/static/scripts/main.js b/examples/src/static/scripts/main.js
@@ -0,0 +1,55 @@
+// World Clock Feature
+// Updates clocks for different time zones every second
+
+/**
+ * Updates all world clocks with current time
+ */
+function updateWorldClocks() {
+    const now = new Date();
+
+    // Time zone configurations
+    const timeZones = {
+        'clock-newyork': 'America/New_York',
+        'clock-london': 'Europe/London',
+        'clock-tokyo': 'Asia/Tokyo',
+        'clock-local': undefined // Local time zone
+    };
+
+    // Update each clock
+    Object.keys(timeZones).forEach((clockId) => {
+        const element = document.getElementById(clockId);
+        if (element) {
+            const timeZone = timeZones[clockId];
+            const options = {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false,
+                timeZone: timeZone
+            };
+
+            try {
+                const timeString = now.toLocaleTimeString('en-US', options);
+                element.textContent = timeString;
+            } catch (error) {
+                console.error(`Error updating clock ${clockId}:`, error);
+                element.textContent = 'Error';
+            }
+        }
+    });
+}
+
+// Initialize clocks when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeClocks);
+} else {
+    initializeClocks();
+}
+
+function initializeClocks() {
+    // Update clocks immediately
+    updateWorldClocks();
+
+    // Update clocks every second
+    setInterval(updateWorldClocks, 1000);
+}
