Replace the big clock with a timer pill in the frozen day bar

The full-width asleep/awake card becomes a compact colored pill next to
the day controls: state emoji plus the live counter, with "since" moved
to the tooltip. One glance at the pinned bar now gives both the day and
the current state.
This commit is contained in:
Alexander Heldt
2026-07-13 20:40:01 +00:00
parent 0009e63d23
commit c103082ca5
4 changed files with 29 additions and 43 deletions
+6 -6
View File
@@ -82,12 +82,12 @@
<input type="date" id="day-picker" />
<button type="button" id="day-today" class="ghost">Today</button>
<button type="button" id="day-next" class="ghost" aria-label="Next day"></button>
</section>
<section id="big-clock" class="big-clock" hidden>
<div class="bc-label" id="bc-label"></div>
<div class="bc-time" id="bc-time">0:00</div>
<div class="bc-since" id="bc-since"></div>
<!-- Compact asleep/awake counter (the old big clock); hidden until a
sleep event exists. Hover/long-press shows "since" via title. -->
<div id="bar-clock" class="bar-clock" hidden>
<span id="bar-clock-icon" aria-hidden="true"></span>
<span id="bar-clock-time"></span>
</div>
</section>
<section class="quick-actions">