feat(examples): polish workout phone UI
Give the workout exemplar a durable gym-floor command-slate direction, serve focused CSS, keep the first viewport centered on one action, and extend the HTTP E2E to verify stylesheet delivery. req: examples/001 req: local/001 req: local/003 req: host/002
This commit is contained in:
slhx agent
@@ -0,0 +1,19 @@
|
||||
# Workout exemplar design
|
||||
|
||||
Direction: gym-floor command slate — one heavy next action, thumb-safe command rail, and an inspectable private ledger. req: examples/001
|
||||
|
||||
Preserve:
|
||||
- First viewport shows one obvious action path before logs or host details.
|
||||
- Controls stay large enough for sweaty one-handed use; forms remain secondary to tap actions.
|
||||
- Local truth is visible as a ledger/export, not hidden behind dashboard metrics. req: local/001 req: local/003
|
||||
- Host capabilities read as a boundary surface, not as app state or a native framework. req: host/002
|
||||
|
||||
Avoid:
|
||||
- Dashboard/KPI cards, fake charts, bottom-nav app chrome, glass/gradient hero filler, and hidden client state.
|
||||
- Equal-weight action grids that make “what now?” ambiguous.
|
||||
- Styling that requires handwritten selector UI JavaScript.
|
||||
|
||||
Accessibility and responsive boundaries:
|
||||
- Keep semantic buttons/forms/labels and visible focus rings.
|
||||
- Minimum tap target is defined by `--tap`; do not reduce it for density.
|
||||
- Narrow screens are the primary material; wide screens may split the command slate and ledger but must not hide the current action.
|
||||
@@ -667,8 +667,8 @@ mod tests {
|
||||
let html = render(&WorkoutState::demo()).to_string();
|
||||
assert!(html.contains("Now-first Workout Copilot"));
|
||||
assert!(html.contains("Complete set"));
|
||||
assert!(html.contains("Export via browser/PWA share"));
|
||||
assert!(html.contains("Request native haptic"));
|
||||
assert!(html.contains("Share export"));
|
||||
assert!(html.contains("Haptic"));
|
||||
assert!(!html.contains(&format!("<{}", "script")));
|
||||
assert!(!html.contains("querySelector"));
|
||||
}
|
||||
|
||||
@@ -24,6 +24,7 @@ async fn main() {
|
||||
pub fn app(state: AppState) -> Router {
|
||||
Router::new()
|
||||
.route("/", get(page).post(interact))
|
||||
.route("/workout.css", get(workout_css))
|
||||
.route(runtime_js_path(), get(runtime))
|
||||
.with_state(state)
|
||||
}
|
||||
@@ -41,6 +42,13 @@ async fn interact(
|
||||
request.dispatch_async(workout_app::registry(state)).await
|
||||
}
|
||||
|
||||
async fn workout_css() -> impl IntoResponse {
|
||||
(
|
||||
[("content-type", "text/css; charset=utf-8")],
|
||||
include_str!("../templates/workout.css"),
|
||||
)
|
||||
}
|
||||
|
||||
async fn runtime() -> impl IntoResponse {
|
||||
runtime_js()
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>hemx workout example</title>
|
||||
<link rel="stylesheet" href="/workout.css">
|
||||
<script +src="self.runtime_src" defer></script>
|
||||
</head>
|
||||
<body>{+= self.body =+}</body>
|
||||
|
||||
@@ -0,0 +1,217 @@
|
||||
@layer tokens, base, composition, blocks;
|
||||
|
||||
@layer tokens {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--surface: #11130f;
|
||||
--surface-2: #171a14;
|
||||
--ink: #f7f3e8;
|
||||
--muted: #aaa38f;
|
||||
--line: #35392d;
|
||||
--accent: #d7ff4f;
|
||||
--accent-ink: #172100;
|
||||
--warn: #ffba52;
|
||||
--shadow: 0 18px 70px rgb(0 0 0 / 0.38);
|
||||
--radius: 24px;
|
||||
--space: clamp(1rem, 4vw, 1.6rem);
|
||||
--tap: 3.35rem;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* { box-sizing: border-box; }
|
||||
html { background: var(--surface); }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100svh;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(135deg, rgb(215 255 79 / 0.09), transparent 34rem),
|
||||
radial-gradient(circle at 50% -14rem, rgb(255 186 82 / 0.18), transparent 28rem),
|
||||
var(--surface);
|
||||
}
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
button {
|
||||
min-height: var(--tap);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
padding: 0.85rem 1.1rem;
|
||||
color: var(--ink);
|
||||
background: var(--surface-2);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
button:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: 3px solid var(--accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 0.8rem 0.9rem;
|
||||
color: var(--ink);
|
||||
background: #0c0e0b;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-block: 0;
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
font: 0.86rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
@layer composition {
|
||||
.workout-app {
|
||||
width: min(100%, 31rem);
|
||||
margin-inline: auto;
|
||||
padding: var(--space);
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
.command-slate,
|
||||
.action-rail,
|
||||
.ledger,
|
||||
.host-boundary {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: rgb(23 26 20 / 0.92);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@layer blocks {
|
||||
.command-slate {
|
||||
min-height: 42svh;
|
||||
padding: clamp(1.2rem, 8vw, 2.3rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
background:
|
||||
linear-gradient(180deg, transparent, rgb(0 0 0 / 0.22)),
|
||||
repeating-linear-gradient(90deg, rgb(215 255 79 / 0.08) 0 1px, transparent 1px 18px),
|
||||
#181c12;
|
||||
}
|
||||
.eyebrow {
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
.command-slate h1 {
|
||||
max-width: 12ch;
|
||||
font-size: clamp(2.3rem, 14vw, 4.4rem);
|
||||
line-height: 0.92;
|
||||
letter-spacing: -0.08em;
|
||||
}
|
||||
.proofline {
|
||||
color: var(--muted);
|
||||
font-weight: 750;
|
||||
}
|
||||
.action-rail {
|
||||
position: sticky;
|
||||
top: 0.6rem;
|
||||
z-index: 1;
|
||||
padding: 0.7rem;
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.primary-action {
|
||||
color: var(--accent-ink);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
.quiet-action {
|
||||
color: var(--muted);
|
||||
}
|
||||
.micro-form,
|
||||
.voice-strip {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.55rem;
|
||||
align-items: end;
|
||||
}
|
||||
.micro-form label,
|
||||
.voice-strip label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.ledger,
|
||||
.host-boundary {
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
.section-heading {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ledger h2,
|
||||
.host-boundary h2 {
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.ledger h3 {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.ledger pre {
|
||||
border-left: 3px solid var(--accent);
|
||||
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 {
|
||||
width: min(100%, 64rem);
|
||||
grid-template-columns: minmax(20rem, 1.08fr) minmax(20rem, 0.92fr);
|
||||
align-items: start;
|
||||
}
|
||||
.command-slate,
|
||||
.action-rail {
|
||||
grid-column: 1;
|
||||
}
|
||||
.ledger,
|
||||
.host-boundary {
|
||||
grid-column: 2;
|
||||
}
|
||||
.action-rail {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,37 +1,41 @@
|
||||
<main data-hemx-root="workout" class="workout-app">
|
||||
<section class="hero">
|
||||
<section class="command-slate" aria-labelledby="next-action-heading">
|
||||
<p class="eyebrow">Now-first Workout Copilot</p>
|
||||
<h1 data-hemx-slot="next_action">{+ self.next_action +}</h1>
|
||||
<p data-hemx-slot="status">{+ self.status +}</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>
|
||||
</section>
|
||||
|
||||
<section class="actions" aria-label="Current workout action">
|
||||
<button type="button" data-hemx-handle="complete_set">Complete set</button>
|
||||
<form data-hemx-handle="change_weight" method="post">
|
||||
<label>Weight <input name="kg" value="52.5" inputmode="decimal"></label>
|
||||
<button type="submit">Update weight</button>
|
||||
<section class="action-rail" aria-label="Current workout action">
|
||||
<button class="primary-action" type="button" data-hemx-handle="complete_set">Complete set</button>
|
||||
<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>
|
||||
</form>
|
||||
<button type="button" data-hemx-handle="skip_exercise">Skip exercise</button>
|
||||
<form data-hemx-handle="record_note" method="post">
|
||||
<label>Voice note <input name="text" value="left shoulder felt tight"></label>
|
||||
<button type="submit">Record dictated note</button>
|
||||
<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>
|
||||
<button type="submit">Record</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="local-truth">
|
||||
<h2>Private event log</h2>
|
||||
<section class="ledger" aria-labelledby="event-log-heading">
|
||||
<div class="section-heading">
|
||||
<h2 id="event-log-heading">Private event log</h2>
|
||||
<button type="button" data-hemx-handle="replay_export">Replay export</button>
|
||||
</div>
|
||||
<pre data-hemx-slot="event_log">{+ self.event_log +}</pre>
|
||||
<h3>Replay export</h3>
|
||||
<h3>Export payload</h3>
|
||||
<pre data-hemx-slot="export_payload">{+ self.export_payload +}</pre>
|
||||
<button type="button" data-hemx-handle="replay_export">Replay exported log</button>
|
||||
</section>
|
||||
|
||||
<section class="host">
|
||||
<h2>Export host boundary</h2>
|
||||
<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>
|
||||
<button type="button" data-hemx-handle="export_log">Export via browser/PWA share</button>
|
||||
<button type="button" data-hemx-handle="record_share_result">Record 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">Record haptic acknowledged</button>
|
||||
<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>
|
||||
|
||||
@@ -54,10 +54,19 @@ fn workout_is_e2e_working_over_http() {
|
||||
assert!(home.text().contains("Now-first Workout Copilot"));
|
||||
assert!(home.text().contains("Private event log"));
|
||||
assert!(home.text().contains("Replay export"));
|
||||
assert!(home
|
||||
.text()
|
||||
.contains("<link rel=\"stylesheet\" href=\"/workout.css\""));
|
||||
assert!(home
|
||||
.text()
|
||||
.contains(&format!("<script src=\"{}\" defer", runtime_js_path())));
|
||||
|
||||
let css = get(&server, "/workout.css");
|
||||
assert_eq!(css.status, 200);
|
||||
assert!(css.header("content-type").contains("text/css"));
|
||||
assert!(css.text().contains(".command-slate"));
|
||||
assert!(css.text().contains("min-height: var(--tap)"));
|
||||
|
||||
let runtime = get(&server, runtime_js_path());
|
||||
assert_eq!(runtime.status, 200);
|
||||
assert!(runtime.header("content-type").contains("javascript"));
|
||||
@@ -76,7 +85,7 @@ fn workout_is_e2e_working_over_http() {
|
||||
let replayed = post(
|
||||
&server,
|
||||
"/",
|
||||
&handle_body_from_html(&home.text(), "Replay exported log"),
|
||||
&handle_body_from_html(&home.text(), "Replay export"),
|
||||
);
|
||||
assert_effect_response(&replayed);
|
||||
let replayed_batch = replayed.effects();
|
||||
|
||||
Reference in New Issue
Block a user