feat: move NOW PLAYING below chat, add SERVER CLOCK panel, brighten globe - NOW PLAYING moved from right column to below JAE-AI chat (left) - New SERVER TIME panel with Orbitron digital clock + uptime counter (right) - Globe earth brightened with higher emissive values - Responsive chat-sub-row flex layout
This commit is contained in:
parent
b206b4e995
commit
da7518d3bf
4 changed files with 183 additions and 22 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
57
index.html
57
index.html
|
|
@ -166,6 +166,43 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Below Chat: Now Playing + Clock -->
|
||||
<div class="chat-sub-row">
|
||||
<!-- Now Playing -->
|
||||
<div class="panel hud-data-panel chat-sub-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">NOW PLAYING</span>
|
||||
<span class="panel-status-dot" id="npStatus">● STREAMING</span>
|
||||
</div>
|
||||
<div class="panel-content np-display">
|
||||
<div class="np-track" id="npTrack">---</div>
|
||||
<div class="np-artist" id="npArtist">---</div>
|
||||
<div class="np-album" id="npAlbum">---</div>
|
||||
<div class="np-visualiser">
|
||||
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
|
||||
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
|
||||
<span class="np-bar"></span><span class="np-bar"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server Clock + Uptime -->
|
||||
<div class="panel hud-data-panel chat-sub-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">SERVER TIME</span>
|
||||
<span class="panel-status-dot status-green">● SYNCED</span>
|
||||
</div>
|
||||
<div class="panel-content clock-display">
|
||||
<div class="clock-time" id="serverClock">00:00:00</div>
|
||||
<div class="clock-date" id="serverDate">----/--/--</div>
|
||||
<div class="clock-uptime-row">
|
||||
<span class="clock-uptime-label">UPTIME</span>
|
||||
<span class="clock-uptime-val" id="serverUptime">---</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Data Panels -->
|
||||
|
|
@ -224,25 +261,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Now Playing -->
|
||||
<div class="panel hud-data-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">NOW PLAYING</span>
|
||||
<span class="panel-status-dot" id="npStatus">● STREAMING</span>
|
||||
</div>
|
||||
<div class="panel-content np-display">
|
||||
<div class="np-track" id="npTrack">---</div>
|
||||
<div class="np-artist" id="npArtist">---</div>
|
||||
<div class="np-album" id="npAlbum">---</div>
|
||||
<div class="np-visualiser">
|
||||
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
|
||||
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
|
||||
<span class="np-bar"></span><span class="np-bar"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Network Graph -->
|
||||
<div class="panel hud-data-panel">
|
||||
<div class="panel-header">
|
||||
|
|
@ -568,5 +586,6 @@
|
|||
<script src="/js/chat.js"></script>
|
||||
<script src="/js/globe.js"></script>
|
||||
<script src="/js/processes.js"></script>
|
||||
<script src="/js/clock.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
63
js/clock.js
Normal file
63
js/clock.js
Normal file
|
|
@ -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);
|
||||
|
||||
})();
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue