Add sidebar clock (24h time + day-of-week date)

Small clock in the sidebar footer: HH:MM (24h) with weekday+date below; collapsed
sidebar shows just the time.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-05 20:44:55 +01:00
parent 7f12820eb3
commit 9c083dc6d9

View File

@@ -149,6 +149,14 @@
.side-foot { margin-top: auto; padding: 8px 0; border-top: 1px solid var(--border); } .side-foot { margin-top: auto; padding: 8px 0; border-top: 1px solid var(--border); }
.side-clock { padding: 12px 18px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.side-clock .clk-time { font-size: 20px; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
.side-clock .clk-date { font-size: 11px; color: var(--muted); margin-top: 2px; }
html.collapsed .side-clock { padding: 10px 0; }
html.collapsed .side-clock .clk-time { font-size: 12px; }
html.collapsed .side-clock .clk-date { display: none; }
.side-status { padding: 10px 18px 12px; font-size: 12px; color: var(--muted); .side-status { padding: 10px 18px 12px; font-size: 12px; color: var(--muted);
border-bottom: 1px solid var(--border); } border-bottom: 1px solid var(--border); }
.side-status .ss-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; .side-status .ss-row { display: flex; align-items: center; gap: 6px; margin-top: 3px;
@@ -302,6 +310,10 @@
<a href="https://simplex.chat/downloads/" target="_blank" rel="noopener" class="nav-sep"><span class="ico"><i class="fa-solid fa-download"></i></span><span class="lbl">Get App</span></a> <a href="https://simplex.chat/downloads/" target="_blank" rel="noopener" class="nav-sep"><span class="ico"><i class="fa-solid fa-download"></i></span><span class="lbl">Get App</span></a>
</nav> </nav>
<div class="side-foot"> <div class="side-foot">
<div class="side-clock" id="side-clock">
<div class="clk-time" id="clk-time">--:--</div>
<div class="clk-date ss-text" id="clk-date"></div>
</div>
<a href="/network" class="side-status" id="side-status" title="View SimpleX network &amp; servers" <a href="/network" class="side-status" id="side-status" title="View SimpleX network &amp; servers"
style="display:block;text-decoration:none;{% if nav_active == 'network' %}background:var(--bg);{% endif %}"> style="display:block;text-decoration:none;{% if nav_active == 'network' %}background:var(--bg);{% endif %}">
<div class="ss-row"><span class="ss-dot" id="ss-dot"></span><span class="ss-text"><span id="ss-running">/</span>&nbsp;running</span></div> <div class="ss-row"><span class="ss-dot" id="ss-dot"></span><span class="ss-text"><span id="ss-running">/</span>&nbsp;running</span></div>
@@ -335,6 +347,17 @@
localStorage.setItem('sidebar-collapsed', collapsed ? '1' : ''); localStorage.setItem('sidebar-collapsed', collapsed ? '1' : '');
} }
// Sidebar clock: 24h time + day-of-week date
function tickClock() {
const now = new Date();
const te = document.getElementById('clk-time');
const de = document.getElementById('clk-date');
if (te) te.textContent = now.toLocaleTimeString('en-GB', {hour: '2-digit', minute: '2-digit', hour12: false});
if (de) de.textContent = now.toLocaleDateString('en-GB', {weekday: 'short', day: '2-digit', month: 'short', year: 'numeric'});
}
tickClock();
setInterval(tickClock, 1000);
// Poll for unread notifications and update the sidebar badge // Poll for unread notifications and update the sidebar badge
async function pollNotifications() { async function pollNotifications() {
try { try {