Move New/Load/Save below host input; double transport button size
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX
This commit is contained in:
+17
-13
@@ -8,23 +8,27 @@
|
||||
<body>
|
||||
|
||||
<header id="connection-bar">
|
||||
<label>Host <input id="host" type="text"></label>
|
||||
<button id="btn-connect">Connect</button>
|
||||
<span id="conn-status" class="status-disconnected">Disconnected</span>
|
||||
<span id="sud-controls">
|
||||
<div id="conn-row">
|
||||
<label>Host <input id="host" type="text"></label>
|
||||
<button id="btn-connect">Connect</button>
|
||||
<span id="conn-status" class="status-disconnected">Disconnected</span>
|
||||
<span id="sud-controls">
|
||||
<button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">▶</button>
|
||||
<button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">▮▮</button>
|
||||
<button id="btn-sud-stop" class="transport-btn transport-stop" title="Stop">■</button>
|
||||
<span id="header-countdown" class="hidden">
|
||||
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">-:--:--</span></span>
|
||||
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">ramp</span><span id="hdr-step-remaining">-:--:--</span></span>
|
||||
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">hold</span><span id="hdr-hold-remaining">-:--:--</span></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="file-row">
|
||||
<button id="btn-sud-new">New</button>
|
||||
<button id="btn-sud-load">Load…</button>
|
||||
<input type="file" id="sud-file-input" accept="application/json" class="hidden">
|
||||
<button id="btn-sud-save">Save…</button>
|
||||
<button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">▶</button>
|
||||
<button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">▮▮</button>
|
||||
<button id="btn-sud-stop" class="transport-btn transport-stop" title="Stop">■</button>
|
||||
<span id="header-countdown" class="hidden">
|
||||
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">-:--:--</span></span>
|
||||
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">ramp</span><span id="hdr-step-remaining">-:--:--</span></span>
|
||||
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">hold</span><span id="hdr-hold-remaining">-:--:--</span></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="layout">
|
||||
|
||||
+15
-6
@@ -63,12 +63,21 @@ button:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
header#connection-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
flex-direction: column;
|
||||
gap: 0.4em;
|
||||
padding: 0.6em 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
#conn-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
#file-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
}
|
||||
#host { width: 18em; }
|
||||
|
||||
.status-connected { color: var(--green); font-weight: bold; }
|
||||
@@ -118,11 +127,11 @@ header#connection-bar {
|
||||
/* --- Transport buttons (circular, coloured) --- */
|
||||
|
||||
.transport-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user