Bring Glass Stage closer to the mockup: HUD chips, sleep card, chapter badge, A-B group, playlist banner and P2P strip

This commit is contained in:
Claude
2026-10-01 21:45:44 +00:00
parent 19973c75c0
commit 6bf2636864
3 changed files with 191 additions and 4 deletions

View File

@@ -164,6 +164,7 @@
<button id="stgPlay" class="stg-play" type="button" aria-label="Play or pause"><svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M9 5.5v13l10-6.5z"/></svg></button>
<button id="stgFwd" class="stg-skip" type="button" aria-label="Forward 10 seconds"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-3-6.2M20 4v4.5h-4.5"/><text x="12" y="15.5" text-anchor="middle" font-size="7.5" font-weight="700" fill="currentColor" stroke="none">10</text></svg></button>
</div>
<div class="stg-bot"><span class="stg-chip"><b id="stgZoom">Pinch 1.0×</b></span><span class="stg-chip"><i class="stg-dot"></i><b id="stgBuf">Buffered</b></span></div>
</div>
</div>
@@ -183,6 +184,7 @@
</div>
</div>
<span id="durTime" class="time">0:00</span>
<span id="chBadge" class="ch-badge" hidden></span>
<button id="fsMini" class="fs-mini" type="button" title="Fullscreen" aria-label="Fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg></button>
</div>
<button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button>
@@ -235,7 +237,8 @@
</div>
<div id="sleepStatus" class="sleep-status hidden">
<span id="sleepCountdown" class="sleep-countdown"></span>
<span class="sl-ic" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z"/></svg></span>
<span class="sl-txt"><span id="sleepCountdown" class="sleep-countdown"></span><small class="sl-sub">Audio fades out smoothly</small></span>
<button id="sleepCancelBtn" class="sleep-cancel">✕ Cancel</button>
</div>
@@ -335,6 +338,7 @@
<div class="upnext-header">
<span>Up next</span>
<span id="upnextCount" class="upnext-count">0</span>
<button id="upnextClear" class="upnext-clear" type="button">Clear</button>
</div>
<div id="upnextList" class="upnext-list"></div>
</div>
@@ -353,6 +357,7 @@
<section id="listPane" class="list-pane">
<div class="list-header">
<h2 id="listTitle">Search</h2>
<p id="listSub" class="list-sub"></p>
<div id="listActions" class="list-actions"></div>
</div>
<div id="listFilterBar" class="list-filter-bar hidden">
@@ -367,6 +372,7 @@
</div>
<div id="status" class="status hidden"></div>
<div id="cards" class="cards"></div>
<div id="p2pStrip" class="p2p-strip hidden"></div>
</section>
</div>
</main>