Spaces:

tuhbooh
/

RelaxWithTime

Running

App Files Files Community

tuhbooh commited on Jan 31

Commit

5ada4ba

verified ·

1 Parent(s): 7b958aa

Update index.html

Browse files

Files changed (1) hide show

index.html +56 -24

index.html CHANGED Viewed

@@ -3,45 +3,66 @@
 <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>
@@ -61,12 +82,12 @@
             <div class="digit-column"><div class="digit-strip" id="s2"></div></div>
         </div>
-        <div id="full-date" class="text-gray-500 text-[10px] tracking-[4px] uppercase font-medium">---</div>
         <div class="stats-bar">
-            <div class="stat-box"><span class="stat-label">Ping</span><span class="stat-data" id="v-ping">--</span></div>
-            <div class="stat-box"><span class="stat-label">Lệch</span><span class="stat-data" id="v-offset">--</span></div>
-            <div class="stat-box"><span class="stat-label">IP</span><span class="stat-data" id="v-ip">--</span></div>
         </div>
     </div>
@@ -85,9 +106,16 @@
             });
         }
-        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();
@@ -95,12 +123,14 @@
                 const r = await fetch('https://tuhbooh-networttools.hf.space');
                 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");
@@ -114,10 +144,11 @@
         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) {
@@ -127,6 +158,7 @@
                 overlay.style.display = 'none';
             }
             const formatter = new Intl.DateTimeFormat('en-GB', {
                 timeZone: selectedTimezone, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
             });

 <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 - The World's Most Accurate Clock</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; }
+        /* Hiệu ứng nền */
+        .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: 700px; display: flex; flex-direction: column; align-items: center; padding: 20px; }
+        /* Tiêu đề khẳng định thương hiệu */
+        .brand-title {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 10px;
+            letter-spacing: 5px;
+            font-weight: 800;
+            background: linear-gradient(to right, #6366f1, #a5b4fc, #6366f1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-transform: uppercase;
+            margin-bottom: 30px;
+            text-align: center;
+        }
+        .tz-select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #a5b4fc; padding: 6px 18px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 25px; outline: none; cursor: pointer; transition: 0.3s; }
+        .tz-select:hover { background: rgba(99, 102, 241, 0.15); border-color: #6366f1; }
+        .clock-wrapper { display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: clamp(3.5rem, 18vw, 7.5rem); font-weight: 800; line-height: 1; gap: 4px; margin-bottom: 15px; }
         .digit-column { height: 1.1em; overflow: hidden; position: relative; width: 0.65em; text-align: center; }
+        .digit-strip { transition: transform 0.6s 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 30px rgba(99, 102, 241, 0.4); }
+        .sep { color: #4f46e5; opacity: 0.8; margin: 0 4px; padding-bottom: 15px; }
+        .stats-bar { background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 15px 40px; display: flex; gap: 40px; margin-top: 40px; }
         .stat-box { display: flex; flex-direction: column; align-items: center; }
+        .stat-label { font-size: 7px; text-transform: uppercase; letter-spacing: 2px; color: #4f46e5; margin-bottom: 4px; font-weight: 600; }
+        .stat-data { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; transition: color 0.4s; }
         /* Countdown Overlay */
         #countdown-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: #000; display: none; z-index: 100;
             flex-direction: column; align-items: center; justify-content: center;
         }
+        #countdown-num { font-size: 18rem; font-weight: 900; color: #f87171; text-shadow: 0 0 60px rgba(248, 113, 113, 0.6); font-family: 'JetBrains Mono'; }
     </style>
 </head>
 <body onclick="lockScreen()">
     <div class="bg-glow"></div>
     <div id="countdown-overlay">
+        <div class="text-white text-2xl tracking-[15px] mb-10 font-black">HAPPY NEW YEAR</div>
         <div id="countdown-num">10</div>
     </div>
+    <div class="main-container">
+        <div class="brand-title">Đồng hồ chính xác nhất thế giới</div>
         <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>
             <div class="digit-column"><div class="digit-strip" id="s2"></div></div>
         </div>
+        <div id="full-date" class="text-gray-500 text-[11px] tracking-[5px] uppercase font-bold">---</div>
         <div class="stats-bar">
+            <div class="stat-box"><span class="stat-label">Network Ping</span><span class="stat-data" id="v-ping">--</span></div>
+            <div class="stat-box"><span class="stat-label">Time Offset</span><span class="stat-data" id="v-offset">--</span></div>
+            <div class="stat-box"><span class="stat-label">Server IP</span><span class="stat-data" id="v-ip">--</span></div>
         </div>
     </div>
             });
         }
+        function setDigit(id, val) {
+            const strip = document.getElementById(id);
+            if (strip) strip.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 r = await fetch('https://tuhbooh-networttools.hf.space');
                 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');
+                // Màu sắc động
                 elPing.innerText = ping + "ms";
                 elPing.style.color = ping < 150 ? "#4ade80" : (ping < 400 ? "#facc15" : "#f87171");
         function update() {
             const now = new Date(Date.now() + serverOffset);
+            // Logic New Year Countdown
             const nextYear = now.getFullYear() + 1;
+            const newYearStr = `Jan 1, ${nextYear} 00:00:00`;
+            const newYearDate = new Date(new Date(newYearStr).toLocaleString("en-US", {timeZone: selectedTimezone}));
+            const diff = (newYearDate - now) / 1000;
             const overlay = document.getElementById('countdown-overlay');
             if (diff > 0 && diff <= 10) {
                 overlay.style.display = 'none';
             }
+            // Update Clock
             const formatter = new Intl.DateTimeFormat('en-GB', {
                 timeZone: selectedTimezone, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
             });