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-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 & servers"
|
<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 %}">
|
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>
|
<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' : '');
|
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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user