diff --git a/css/style.css b/css/style.css index 429d7c8..c30fa37 100644 --- a/css/style.css +++ b/css/style.css @@ -2223,3 +2223,82 @@ a:hover { color: #fff; text-shadow: none; } font-size: 0.55rem; } } + +/* ============================ + CHAT SUB-ROW (Below Chat) + ============================ */ +.chat-sub-row { + display: flex; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.chat-sub-panel { + flex: 1; + min-width: 0; +} + +/* ============================ + SERVER CLOCK / UPTIME + ============================ */ +.clock-display { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0.75rem 0.5rem !important; + gap: 0.25rem; +} + +.clock-time { + font-family: 'Orbitron', var(--font-mono); + font-size: 1.6rem; + font-weight: 700; + color: var(--status-green); + text-shadow: 0 0 12px var(--status-green-glow), 0 0 25px rgba(0, 204, 51, 0.15); + letter-spacing: 3px; + line-height: 1; +} + +.clock-date { + font-family: var(--font-mono); + font-size: 0.55rem; + color: var(--text-secondary); + letter-spacing: 2px; +} + +.clock-uptime-row { + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: 0.35rem; + padding-top: 0.35rem; + border-top: 1px solid var(--border); + width: 100%; + justify-content: center; +} + +.clock-uptime-label { + font-family: var(--font-mono); + font-size: 0.45rem; + letter-spacing: 2px; + color: var(--text-secondary); +} + +.clock-uptime-val { + font-family: 'Orbitron', var(--font-mono); + font-size: 0.7rem; + font-weight: 600; + color: var(--status-green); + text-shadow: 0 0 6px var(--status-green-glow); +} + +/* Chat sub-row responsive */ +@media (max-width: 768px) { + .chat-sub-row { + flex-direction: column; + } + .clock-time { + font-size: 1.2rem; + } +} diff --git a/index.html b/index.html index a58ff4b..c1168bb 100644 --- a/index.html +++ b/index.html @@ -166,6 +166,43 @@ + + +
+ +
+
+ NOW PLAYING + ● STREAMING +
+
+
---
+
---
+
---
+
+ + + +
+
+
+ + +
+
+ SERVER TIME + ● SYNCED +
+
+
00:00:00
+
----/--/--
+
+ UPTIME + --- +
+
+
+
@@ -224,25 +261,6 @@ - -
-
- NOW PLAYING - ● STREAMING -
-
-
---
-
---
-
---
-
- - - -
-
-
- -
@@ -568,5 +586,6 @@ + diff --git a/js/clock.js b/js/clock.js new file mode 100644 index 0000000..224d1b7 --- /dev/null +++ b/js/clock.js @@ -0,0 +1,63 @@ +/* =================================================== + JAESWIFT.XYZ — Server Clock + Uptime + eDEX-UI inspired digital clock with live uptime + =================================================== */ + +(function () { + 'use strict'; + + var clockEl = document.getElementById('serverClock'); + var dateEl = document.getElementById('serverDate'); + var uptimeEl = document.getElementById('serverUptime'); + if (!clockEl) return; + + // Update clock every second + function updateClock() { + var now = new Date(); + var h = String(now.getHours()).padStart(2, '0'); + var m = String(now.getMinutes()).padStart(2, '0'); + var s = String(now.getSeconds()).padStart(2, '0'); + clockEl.textContent = h + ':' + m + ':' + s; + + var year = now.getFullYear(); + var month = String(now.getMonth() + 1).padStart(2, '0'); + var day = String(now.getDate()).padStart(2, '0'); + var days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; + dateEl.textContent = year + '/' + month + '/' + day + ' // ' + days[now.getDay()]; + } + + // Format uptime from seconds + function formatUptime(secs) { + var d = Math.floor(secs / 86400); + var h = Math.floor((secs % 86400) / 3600); + var m = Math.floor((secs % 3600) / 60); + var parts = []; + if (d > 0) parts.push(d + 'd'); + parts.push(h + 'h'); + parts.push(m + 'm'); + return parts.join(' '); + } + + // Fetch uptime from stats API + function fetchUptime() { + fetch('/api/stats') + .then(function (r) { return r.json(); }) + .then(function (data) { + if (data && data.uptime_seconds) { + uptimeEl.textContent = formatUptime(data.uptime_seconds); + } else if (data && data.uptime) { + uptimeEl.textContent = data.uptime; + } + }) + .catch(function () {}); + } + + // Init + updateClock(); + setInterval(updateClock, 1000); + + // Fetch uptime every 30s + fetchUptime(); + setInterval(fetchUptime, 30000); + +})(); diff --git a/js/globe.js b/js/globe.js index 4cd812f..bc036e4 100644 --- a/js/globe.js +++ b/js/globe.js @@ -78,9 +78,9 @@ return c.type === 'Mesh' && c.geometry && c.geometry.type === 'SphereGeometry'; }); if (globeMesh && globeMesh.material) { - globeMesh.material.color.setHex(0x050505); - globeMesh.material.emissive.setHex(0x001a00); - globeMesh.material.emissiveIntensity = 0.15; + globeMesh.material.color.setHex(0x1a1a2e); + globeMesh.material.emissive.setHex(0x003a00); + globeMesh.material.emissiveIntensity = 0.4; } }) (container);