Spaces:

tuhbooh
/

RelaxWithTime

Running

App Files Files Community

tuhbooh commited on Jan 31

Commit

7b958aa

verified ·

1 Parent(s): 18e8518

Update index.html

Browse files

Files changed (1) hide show

index.html +50 -50

index.html CHANGED Viewed

@@ -3,59 +3,51 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Sài Gòn Sync - World Clock Edition</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700;800&family=Inter:wght@400;600;800&display=swap');
         body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: #050508; color: #fff; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; }
         .bg-glow { position: fixed; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(0,0,0,0) 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; }
-        .main-container { position: relative; z-index: 10; width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; padding: 20px; }
-        /* Dropdown Style */
-        .tz-select {
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            color: #a5b4fc;
-            padding: 5px 15px;
-            border-radius: 10px;
-            font-size: 10px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 15px;
-            outline: none;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-        .tz-select:hover { background: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.5); }
-        .tz-select option { background: #0a0a0f; color: #fff; }
         .clock-wrapper { display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: clamp(3rem, 15vw, 6.5rem); font-weight: 800; line-height: 1; gap: 4px; margin-bottom: 10px; }
         .digit-column { height: 1.1em; overflow: hidden; position: relative; width: 0.65em; text-align: center; }
         .digit-strip { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
         .digit-val { height: 1.1em; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
         .sep { color: #4f46e5; opacity: 0.8; margin: 0 2px; padding-bottom: 10px; }
         .stats-bar { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 12px 30px; display: flex; gap: 30px; margin-top: 30px; }
         .stat-box { display: flex; flex-direction: column; align-items: center; }
         .stat-label { font-size: 8px; text-transform: uppercase; letter-spacing: 2px; color: #6366f1; margin-bottom: 2px; }
-        .stat-data { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }
     </style>
 </head>
 <body onclick="lockScreen()">
     <div class="bg-glow"></div>
-    <div class="main-container">
         <select id="timezone-selector" class="tz-select" onchange="changeTimezone()">
             <option value="Asia/Ho_Chi_Minh">🇻🇳 Sài Gòn (GMT+7)</option>
             <option value="Asia/Singapore">🇸🇬 Singapore (GMT+8)</option>
             <option value="Asia/Tokyo">🇯🇵 Tokyo (GMT+9)</option>
-            <option value="Asia/Seoul">🇰🇷 Seoul (GMT+9)</option>
             <option value="Europe/London">🇬🇧 London (GMT+0)</option>
-            <option value="Europe/Paris">🇫🇷 Paris (GMT+1)</option>
             <option value="America/New_York">🇺🇸 New York (GMT-5)</option>
-            <option value="America/Los_Angeles">🇺🇸 Los Angeles (GMT-8)</option>
-            <option value="Australia/Sydney">🇦🇺 Sydney (GMT+11)</option>
-            <option value="Asia/Bangkok">🇹🇭 Bangkok (GMT+7)</option>
         </select>
         <div class="clock-wrapper">
@@ -88,24 +80,14 @@
                 const strip = document.getElementById(id);
                 for(let i=0; i<=9; i++) {
                     const div = document.createElement('div');
-                    div.className = 'digit-val';
-                    div.innerText = i;
-                    strip.appendChild(div);
                 }
             });
         }
-        function setDigit(id, val) {
-            document.getElementById(id).style.transform = `translateY(-${val * 1.1}em)`;
-        }
-        function changeTimezone() {
-            selectedTimezone = document.getElementById('timezone-selector').value;
-        }
-        async function lockScreen() {
-            if ('wakeLock' in navigator) { try { wakeLock = await navigator.wakeLock.request('screen'); } catch(e){} }
-        }
         async function sync() {
             const start = performance.now();
@@ -114,8 +96,17 @@
                 const d = await r.json();
                 const ping = Math.round(performance.now() - start);
                 serverOffset = (d.ts * 1000 + ping/2) - Date.now();
-                document.getElementById('v-ping').innerText = ping + "ms";
-                document.getElementById('v-offset').innerText = Math.round(serverOffset) + "ms";
                 document.getElementById('v-ip').innerText = d.ip;
             } catch(e){}
         }
@@ -123,13 +114,22 @@
         function update() {
             const now = new Date(Date.now() + serverOffset);
-            // Format theo múi giờ ĐÃ CHỌN
             const formatter = new Intl.DateTimeFormat('en-GB', {
-                timeZone: selectedTimezone,
-                hour: '2-digit', minute: '2-digit', second: '2-digit',
-                hour12: false
             });
             const parts = formatter.formatToParts(now);
             const h = parts.find(p => p.type === 'hour').value;
             const m = parts.find(p => p.type === 'minute').value;

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Sài Gòn Sync - Premium Countdown</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700;800&family=Inter:wght@400;600;800&display=swap');
         body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: #050508; color: #fff; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; }
         .bg-glow { position: fixed; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(0,0,0,0) 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; }
+        .main-container { position: relative; z-index: 10; width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; padding: 20px; transition: all 0.5s; }
+        .tz-select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #a5b4fc; padding: 5px 15px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; outline: none; cursor: pointer; }
         .clock-wrapper { display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: clamp(3rem, 15vw, 6.5rem); font-weight: 800; line-height: 1; gap: 4px; margin-bottom: 10px; }
         .digit-column { height: 1.1em; overflow: hidden; position: relative; width: 0.65em; text-align: center; }
         .digit-strip { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
         .digit-val { height: 1.1em; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
         .sep { color: #4f46e5; opacity: 0.8; margin: 0 2px; padding-bottom: 10px; }
         .stats-bar { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 12px 30px; display: flex; gap: 30px; margin-top: 30px; }
         .stat-box { display: flex; flex-direction: column; align-items: center; }
         .stat-label { font-size: 8px; text-transform: uppercase; letter-spacing: 2px; color: #6366f1; margin-bottom: 2px; }
+        .stat-data { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; transition: color 0.3s; }
+        /* Countdown Overlay */
+        #countdown-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.9); display: none; z-index: 100;
+            flex-direction: column; align-items: center; justify-content: center;
+        }
+        #countdown-num { font-size: 15rem; font-weight: 900; color: #f87171; text-shadow: 0 0 50px rgba(248, 113, 113, 0.5); font-family: 'JetBrains Mono'; }
     </style>
 </head>
 <body onclick="lockScreen()">
     <div class="bg-glow"></div>
+    <div id="countdown-overlay">
+        <div class="text-white text-xl tracking-[10px] mb-8 font-bold">HAPPY NEW YEAR IN</div>
+        <div id="countdown-num">10</div>
+    </div>
+    <div class="main-container" id="main-ui">
         <select id="timezone-selector" class="tz-select" onchange="changeTimezone()">
             <option value="Asia/Ho_Chi_Minh">🇻🇳 Sài Gòn (GMT+7)</option>
             <option value="Asia/Singapore">🇸🇬 Singapore (GMT+8)</option>
             <option value="Asia/Tokyo">🇯🇵 Tokyo (GMT+9)</option>
             <option value="Europe/London">🇬🇧 London (GMT+0)</option>
             <option value="America/New_York">🇺🇸 New York (GMT-5)</option>
         </select>
         <div class="clock-wrapper">
                 const strip = document.getElementById(id);
                 for(let i=0; i<=9; i++) {
                     const div = document.createElement('div');
+                    div.className = 'digit-val'; div.innerText = i; strip.appendChild(div);
                 }
             });
         }
+        function setDigit(id, val) { document.getElementById(id).style.transform = `translateY(-${val * 1.1}em)`; }
+        function changeTimezone() { selectedTimezone = document.getElementById('timezone-selector').value; }
+        async function lockScreen() { if ('wakeLock' in navigator) { try { wakeLock = await navigator.wakeLock.request('screen'); } catch(e){} } }
         async function sync() {
             const start = performance.now();
                 const d = await r.json();
                 const ping = Math.round(performance.now() - start);
                 serverOffset = (d.ts * 1000 + ping/2) - Date.now();
+                const offsetAbs = Math.round(Math.abs(serverOffset));
+                const elPing = document.getElementById('v-ping');
+                const elOffset = document.getElementById('v-offset');
+                elPing.innerText = ping + "ms";
+                elPing.style.color = ping < 150 ? "#4ade80" : (ping < 400 ? "#facc15" : "#f87171");
+                elOffset.innerText = offsetAbs + "ms";
+                elOffset.style.color = offsetAbs < 10 ? "#4ade80" : (offsetAbs < 200 ? "#facc15" : "#f87171");
                 document.getElementById('v-ip').innerText = d.ip;
             } catch(e){}
         }
         function update() {
             const now = new Date(Date.now() + serverOffset);
+            // Logic Countdown năm mới
+            const nextYear = now.getFullYear() + 1;
+            const newYearTime = new Date(`Jan 1, ${nextYear} 00:00:00`).toLocaleString("en-US", {timeZone: selectedTimezone});
+            const diff = (new Date(newYearTime) - now) / 1000;
+            const overlay = document.getElementById('countdown-overlay');
+            if (diff > 0 && diff <= 10) {
+                overlay.style.display = 'flex';
+                document.getElementById('countdown-num').innerText = Math.ceil(diff);
+            } else {
+                overlay.style.display = 'none';
+            }
             const formatter = new Intl.DateTimeFormat('en-GB', {
+                timeZone: selectedTimezone, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
             });
             const parts = formatter.formatToParts(now);
             const h = parts.find(p => p.type === 'hour').value;
             const m = parts.find(p => p.type === 'minute').value;