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:
@@ -149,6 +149,14 @@
|
||||
|
||||
.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);
|
||||
border-bottom: 1px solid var(--border); }
|
||||
.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>
|
||||
</nav>
|
||||
<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 & servers"
|
||||
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> running</span></div>
|
||||
@@ -335,6 +347,17 @@
|
||||
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
|
||||
async function pollNotifications() {
|
||||
try {
|
||||
|
||||
Reference in New Issue
Block a user