feat(workout): complete mobile session flow
Make Workout Copilot behave like a finished phone-first session: rest/next state, progress, undo recovery, finish/export, replayable local log, and host proof controls tucked behind product states. req: examples/001 req: local/001 req: local/003 req: local/004 req: host/002
This commit is contained in:
slhx agent
@@ -5,6 +5,7 @@
|
||||
color-scheme: dark;
|
||||
--surface: #11130f;
|
||||
--surface-2: #171a14;
|
||||
--surface-3: #202518;
|
||||
--ink: #f7f3e8;
|
||||
--muted: #aaa38f;
|
||||
--line: #35392d;
|
||||
@@ -46,7 +47,8 @@
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
button:focus-visible,
|
||||
input:focus-visible {
|
||||
input:focus-visible,
|
||||
summary:focus-visible {
|
||||
outline: 3px solid var(--accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
@@ -71,6 +73,14 @@
|
||||
white-space: pre-wrap;
|
||||
font: 0.86rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
summary {
|
||||
cursor: pointer;
|
||||
min-height: var(--tap);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
font-weight: 850;
|
||||
}
|
||||
}
|
||||
|
||||
@layer composition {
|
||||
@@ -83,8 +93,8 @@
|
||||
}
|
||||
.command-slate,
|
||||
.action-rail,
|
||||
.ledger,
|
||||
.host-boundary {
|
||||
.finish-card,
|
||||
.ledger {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: rgb(23 26 20 / 0.92);
|
||||
@@ -94,7 +104,7 @@
|
||||
|
||||
@layer blocks {
|
||||
.command-slate {
|
||||
min-height: 42svh;
|
||||
min-height: 44svh;
|
||||
padding: clamp(1.2rem, 8vw, 2.3rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -112,13 +122,26 @@
|
||||
font-size: 0.78rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
.progress-pill {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
border: 1px solid rgb(215 255 79 / 0.38);
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.75rem;
|
||||
color: var(--accent);
|
||||
background: rgb(215 255 79 / 0.08);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
.command-slate h1 {
|
||||
max-width: 12ch;
|
||||
font-size: clamp(2.3rem, 14vw, 4.4rem);
|
||||
max-width: 13ch;
|
||||
font-size: clamp(2.2rem, 13vw, 4.4rem);
|
||||
line-height: 0.92;
|
||||
letter-spacing: -0.08em;
|
||||
}
|
||||
.proofline {
|
||||
.session-status,
|
||||
.recovery-status,
|
||||
.finish-card p {
|
||||
color: var(--muted);
|
||||
font-weight: 750;
|
||||
}
|
||||
@@ -128,7 +151,7 @@
|
||||
z-index: 1;
|
||||
padding: 0.7rem;
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
.primary-action {
|
||||
color: var(--accent-ink);
|
||||
@@ -139,6 +162,11 @@
|
||||
.quiet-action {
|
||||
color: var(--muted);
|
||||
}
|
||||
.secondary-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.55rem;
|
||||
}
|
||||
.micro-form,
|
||||
.voice-strip {
|
||||
display: grid;
|
||||
@@ -156,20 +184,47 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.ledger,
|
||||
.host-boundary {
|
||||
.finish-card,
|
||||
.ledger {
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
.finish-card {
|
||||
background:
|
||||
linear-gradient(135deg, rgb(255 186 82 / 0.12), transparent 20rem),
|
||||
var(--surface-2);
|
||||
}
|
||||
.finish-card h2 {
|
||||
margin-block-start: 0.2rem;
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.share-action {
|
||||
color: var(--accent-ink);
|
||||
background: var(--warn);
|
||||
border-color: var(--warn);
|
||||
}
|
||||
.host-proof {
|
||||
border-top: 1px dashed var(--line);
|
||||
padding-block-start: 0.35rem;
|
||||
}
|
||||
.host-proof p {
|
||||
margin-block-end: 0.7rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.host-actions {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
.section-heading {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ledger h2,
|
||||
.host-boundary h2 {
|
||||
.ledger h2 {
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
@@ -184,17 +239,6 @@
|
||||
padding: 0.75rem 0.9rem;
|
||||
background: #0c0e0b;
|
||||
}
|
||||
.host-boundary {
|
||||
border-style: dashed;
|
||||
}
|
||||
.host-boundary p {
|
||||
color: var(--muted);
|
||||
}
|
||||
.host-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
@media (min-width: 46rem) {
|
||||
.workout-app {
|
||||
@@ -206,8 +250,8 @@
|
||||
.action-rail {
|
||||
grid-column: 1;
|
||||
}
|
||||
.ledger,
|
||||
.host-boundary {
|
||||
.finish-card,
|
||||
.ledger {
|
||||
grid-column: 2;
|
||||
}
|
||||
.action-rail {
|
||||
|
||||
@@ -1,23 +1,48 @@
|
||||
<main data-hemx-root="workout" class="workout-app">
|
||||
<section class="command-slate" aria-labelledby="next-action-heading">
|
||||
<p class="eyebrow">Now-first Workout Copilot</p>
|
||||
<p class="progress-pill" data-hemx-slot="progress">{+ self.progress +}</p>
|
||||
<h1 id="next-action-heading" data-hemx-slot="next_action">{+ self.next_action +}</h1>
|
||||
<p class="proofline" data-hemx-slot="status">{+ self.status +}</p>
|
||||
<p class="session-status" data-hemx-slot="status">{+ self.status +}</p>
|
||||
</section>
|
||||
|
||||
<section class="action-rail" aria-label="Current workout action">
|
||||
<button class="primary-action" type="button" data-hemx-handle="complete_set">Complete set</button>
|
||||
<button class="primary-action" type="button" data-hemx-handle="complete_set">
|
||||
<span data-hemx-slot="primary_action">{+ self.primary_action +}</span>
|
||||
</button>
|
||||
<p class="recovery-status" data-hemx-slot="recovery_status">{+ self.recovery_status +}</p>
|
||||
<div class="secondary-actions">
|
||||
<button class="quiet-action" type="button" data-hemx-handle="undo_last_action">Undo last action</button>
|
||||
<button class="quiet-action" type="button" data-hemx-handle="skip_exercise">Skip exercise</button>
|
||||
</div>
|
||||
<form class="micro-form" data-hemx-handle="change_weight" method="post">
|
||||
<label>Weight <input name="kg" value="52.5" inputmode="decimal" aria-label="Weight in kilograms"></label>
|
||||
<button type="submit">Update</button>
|
||||
<label>Adjust weight <input name="kg" value="52.5" inputmode="decimal" aria-label="Weight in kilograms"></label>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
<button class="quiet-action" type="button" data-hemx-handle="skip_exercise">Skip</button>
|
||||
<form class="voice-strip" data-hemx-handle="record_note" method="post">
|
||||
<label>Dictate note <input name="text" value="left shoulder felt tight"></label>
|
||||
<label>Session note <input name="text" value="left shoulder felt tight"></label>
|
||||
<button type="submit">Record</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="finish-card" aria-labelledby="finish-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Finish & recover</p>
|
||||
<h2 id="finish-heading">Your session is a replayable local log.</h2>
|
||||
</div>
|
||||
<p data-hemx-slot="host_status">{+ self.host_status +}</p>
|
||||
<button class="share-action" type="button" data-hemx-handle="export_log">Share export</button>
|
||||
<details class="host-proof">
|
||||
<summary>Host proof panel</summary>
|
||||
<p>Development-only host results return through app code before UI effects.</p>
|
||||
<div class="host-actions">
|
||||
<button type="button" data-hemx-handle="record_share_result">Mark share completed</button>
|
||||
<button type="button" data-hemx-handle="request_native_haptic">Request native haptic</button>
|
||||
<button type="button" data-hemx-handle="record_native_haptic_ack">Mark haptic acknowledged</button>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="ledger" aria-labelledby="event-log-heading">
|
||||
<div class="section-heading">
|
||||
<h2 id="event-log-heading">Private event log</h2>
|
||||
@@ -27,15 +52,4 @@
|
||||
<h3>Export payload</h3>
|
||||
<pre data-hemx-slot="export_payload">{+ self.export_payload +}</pre>
|
||||
</section>
|
||||
|
||||
<section class="host-boundary" aria-labelledby="host-heading">
|
||||
<h2 id="host-heading">Host boundary</h2>
|
||||
<p data-hemx-slot="host_status">{+ self.host_status +}</p>
|
||||
<div class="host-actions">
|
||||
<button type="button" data-hemx-handle="export_log">Share export</button>
|
||||
<button type="button" data-hemx-handle="record_share_result">Share done</button>
|
||||
<button type="button" data-hemx-handle="request_native_haptic">Haptic</button>
|
||||
<button type="button" data-hemx-handle="record_native_haptic_ack">Haptic done</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user