Skip to content

Instantly share code, notes, and snippets.

@trepidity

trepidity/assessment-showcase.html

Last active March 24, 2026 22:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save trepidity/e92fc3c65aefb6e361a3009c4ba2891b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save trepidity/e92fc3c65aefb6e361a3009c4ba2891b to your computer and use it in GitHub Desktop.
Download ZIP
Jason Trainer — Program Builder Improvement Proposals (March 2026)
Raw
assessment-showcase.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movement Assessment Feature — Jason Trainer</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #f7f8fa; color: #1a1a1a; }
.header { background: #1A365D; color: white; padding: 32px 40px; text-align: center; }
.header h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.header p { font-size: 15px; opacity: 0.8; max-width: 600px; margin: 0 auto; line-height: 1.5; }
.flow-section { max-width: 1100px; margin: 40px auto; padding: 0 24px; }
.flow-section h2 { font-size: 20px; font-weight: 700; color: #1A365D; margin-bottom: 6px; }
.flow-section .subtitle { font-size: 14px; color: #666; margin-bottom: 24px; }
.flow-diagram { display: flex; align-items: center; justify-content: center; gap: 0; margin: 32px auto 48px; flex-wrap: wrap; max-width: 900px; }
.flow-step { background: white; border: 2px solid #e2e8f0; border-radius: 12px; padding: 14px 18px; text-align: center; min-width: 130px; }
.flow-step.active { border-color: #1A365D; background: #EBF0F7; }
.flow-step.new { border-color: #ED8936; background: #FFFAF0; }
.flow-step .label { font-size: 11px; text-transform: uppercase; font-weight: 700; color: #888; letter-spacing: 0.5px; }
.flow-step .label.new-label { color: #ED8936; }
.flow-step .name { font-size: 14px; font-weight: 600; margin-top: 4px; }
.flow-arrow { font-size: 20px; color: #cbd5e0; padding: 0 6px; }
.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 16px; }
.screens.three-col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) { .screens, .screens.three-col { grid-template-columns: 1fr; } }
.screen { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e8ecf0; }
.screen-header { background: #f0f2f5; padding: 10px 16px; font-size: 12px; font-weight: 600; color: #666; border-bottom: 1px solid #e8ecf0; display: flex; align-items: center; gap: 8px; }
.screen-header .dot { width: 8px; height: 8px; border-radius: 50%; }
.screen-header .dot.r { background: #ff5f57; }
.screen-header .dot.y { background: #febd2f; }
.screen-header .dot.g { background: #28c840; }
.screen-body { padding: 0; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-new { background: #FFF3E0; color: #E65100; }
.divider { border: none; border-top: 2px dashed #e2e8f0; margin: 48px 0; }
/* Phone frame */
.phone { max-width: 375px; margin: 0 auto; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.1); border: 1px solid #e0e0e0; }
.phone-notch { height: 28px; background: #f0f2f5; display: flex; align-items: center; justify-content: center; }
.phone-notch-inner { width: 120px; height: 6px; background: #ccc; border-radius: 3px; }
.phone-body { min-height: 580px; }
</style>
</head>
<body>
<!-- Hero -->
<div class="header">
<h1>Movement Assessment Feature</h1>
<p>A new diagnostic flow that lets trainers assess trainees' movement quality through video before assigning programs.</p>
</div>
<!-- Onboarding Flow Diagram -->
<div class="flow-section">
<h2>How It Fits Into Onboarding</h2>
<p class="subtitle">The assessment slots into the existing invite flow — trainees complete it before they can access the app.</p>
<div class="flow-diagram">
<div class="flow-step active">
<div class="label">Step 1</div>
<div class="name">Accept Invite</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step active">
<div class="label">Step 2</div>
<div class="name">Data Consent</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step new">
<div class="label new-label">New Step</div>
<div class="name">Assessment</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step active">
<div class="label">Step 3</div>
<div class="name">Today's Workout</div>
</div>
</div>
</div>
<hr class="divider" style="max-width:1100px;margin:0 auto 48px;">
<!-- TRAINER SIDE -->
<div class="flow-section">
<h2>Trainer: Create Assessment Templates</h2>
<p class="subtitle">Trainers build reusable assessment templates with movements they want to evaluate — then attach them to invites.</p>
<div class="screens">
<!-- Template List -->
<div class="screen">
<div class="screen-header">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
/trainer/assessments
</div>
<div class="screen-body" style="font-family:system-ui;">
<div style="display:flex;min-height:420px;">
<div style="width:180px;background:#1A365D;padding:16px 0;flex-shrink:0;">
<div style="padding:0 12px 16px;color:white;font-size:15px;font-weight:700;">Jason Trainer</div>
<div style="padding:4px 12px;font-size:12px;color:rgba(255,255,255,0.5);">
<div style="padding:6px 10px;border-radius:5px;margin-bottom:1px;">Dashboard</div>
<div style="padding:6px 10px;border-radius:5px;margin-bottom:1px;">Programs</div>
<div style="padding:6px 10px;border-radius:5px;margin-bottom:1px;">Exercises</div>
<div style="padding:6px 10px;border-radius:5px;margin-bottom:1px;">Trainees</div>
<div style="padding:6px 10px;border-radius:5px;margin-bottom:1px;background:rgba(255,255,255,0.15);color:white;font-weight:600;">Assessments</div>
<div style="padding:6px 10px;border-radius:5px;">Glossary</div>
</div>
</div>
<div style="flex:1;padding:20px 24px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;">
<div style="font-size:18px;font-weight:700;color:#1A365D;">Assessments</div>
<button style="padding:8px 16px;background:#1A365D;color:white;border:none;border-radius:7px;font-size:12px;font-weight:600;">+ Create Assessment</button>
</div>
<div style="background:#f8f9fa;border:1px solid #e2e8f0;border-radius:8px;padding:14px 16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;">
<div>
<div style="font-size:14px;font-weight:600;">New Client Movement Screen</div>
<div style="font-size:11px;color:#888;margin-top:3px;">5 movements · Created Mar 10</div>
</div>
<div style="display:flex;gap:6px;">
<span style="font-size:10px;color:#555;background:#e8ecf0;padding:3px 8px;border-radius:10px;">Used 8x</span>
<button style="padding:4px 10px;border:1px solid #e2e8f0;background:white;border-radius:5px;font-size:11px;color:#555;">Edit</button>
</div>
</div>
<div style="background:#f8f9fa;border:1px solid #e2e8f0;border-radius:8px;padding:14px 16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;">
<div>
<div style="font-size:14px;font-weight:600;">Olympic Lifting Readiness</div>
<div style="font-size:11px;color:#888;margin-top:3px;">8 movements · Created Feb 22</div>
</div>
<div style="display:flex;gap:6px;">
<span style="font-size:10px;color:#555;background:#e8ecf0;padding:3px 8px;border-radius:10px;">Used 3x</span>
<button style="padding:4px 10px;border:1px solid #e2e8f0;background:white;border-radius:5px;font-size:11px;color:#555;">Edit</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Create Form -->
<div class="screen">
<div class="screen-header">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
/trainer/assessments/new
</div>
<div class="screen-body" style="padding:20px 24px;font-family:system-ui;">
<div style="font-size:18px;font-weight:700;color:#1A365D;margin-bottom:16px;">Create Assessment</div>
<label style="display:block;font-size:11px;font-weight:600;color:#555;margin-bottom:4px;">Assessment Name</label>
<input style="width:100%;padding:8px 12px;border:1px solid #cbd5e0;border-radius:7px;font-size:13px;margin-bottom:12px;box-sizing:border-box;" value="New Client Movement Screen" />
<label style="display:block;font-size:11px;font-weight:600;color:#555;margin-bottom:4px;">Instructions for Trainee</label>
<textarea style="width:100%;padding:8px 12px;border:1px solid #cbd5e0;border-radius:7px;font-size:12px;margin-bottom:16px;box-sizing:border-box;height:44px;resize:none;font-family:inherit;">Film each movement from the side. Bodyweight only.</textarea>
<label style="display:block;font-size:11px;font-weight:600;color:#555;margin-bottom:8px;">Movements</label>
<div style="background:#f8f9fa;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-bottom:6px;display:flex;gap:8px;">
<div style="color:#ccc;font-size:14px;">☰</div>
<div style="flex:1;">
<div style="display:flex;gap:6px;align-items:center;margin-bottom:4px;">
<span style="background:#1A365D;color:white;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;">1</span>
<input style="flex:1;padding:6px 10px;border:1px solid #cbd5e0;border-radius:5px;font-size:12px;" value="Bodyweight Squat" />
</div>
<textarea style="width:100%;padding:4px 10px;border:1px solid #e8ecf0;border-radius:5px;font-size:11px;color:#666;height:28px;resize:none;font-family:inherit;">Full depth, feet shoulder width</textarea>
</div>
</div>
<div style="background:#f8f9fa;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-bottom:6px;display:flex;gap:8px;">
<div style="color:#ccc;font-size:14px;">☰</div>
<div style="flex:1;">
<div style="display:flex;gap:6px;align-items:center;margin-bottom:4px;">
<span style="background:#1A365D;color:white;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;">2</span>
<input style="flex:1;padding:6px 10px;border:1px solid #cbd5e0;border-radius:5px;font-size:12px;" value="Overhead Squat" />
</div>
<textarea style="width:100%;padding:4px 10px;border:1px solid #e8ecf0;border-radius:5px;font-size:11px;color:#666;height:28px;resize:none;font-family:inherit;">PVC pipe, wide grip overhead</textarea>
</div>
</div>
<button style="width:100%;padding:10px;border:2px dashed #cbd5e0;border-radius:8px;background:white;color:#1A365D;font-size:12px;font-weight:600;margin-bottom:16px;">+ Add Movement</button>
<button style="padding:10px 24px;background:#1A365D;color:white;border:none;border-radius:7px;font-size:13px;font-weight:600;">Save Assessment</button>
</div>
</div>
</div>
</div>
<!-- Invite with Assessment -->
<div class="flow-section">
<h2>Trainer: Attach Assessment to Invite</h2>
<p class="subtitle">When inviting a new trainee, the trainer can optionally select which assessment they should complete.</p>
<div style="max-width:460px;margin:0 auto;">
<div class="screen">
<div class="screen-header">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
Invite Trainee Modal
</div>
<div class="screen-body" style="padding:24px;font-family:system-ui;">
<div style="font-size:16px;font-weight:700;color:#1A365D;margin-bottom:16px;">Invite Trainee</div>
<label style="display:block;font-size:11px;font-weight:600;color:#555;margin-bottom:4px;">Email Address</label>
<input style="width:100%;padding:9px 12px;border:1px solid #cbd5e0;border-radius:7px;font-size:13px;margin-bottom:14px;box-sizing:border-box;" value="sarah@example.com" />
<label style="display:block;font-size:11px;font-weight:600;color:#555;margin-bottom:4px;">Movement Assessment <span style="color:#aaa;font-weight:400;">(optional)</span></label>
<select style="width:100%;padding:9px 12px;border:1px solid #cbd5e0;border-radius:7px;font-size:13px;margin-bottom:4px;box-sizing:border-box;background:white;">
<option>New Client Movement Screen (5 movements)</option>
</select>
<p style="font-size:11px;color:#888;margin-bottom:20px;">Trainee will complete this before accessing the app</p>
<div style="display:flex;gap:8px;justify-content:flex-end;">
<button style="padding:9px 18px;background:white;color:#555;border:1px solid #e2e8f0;border-radius:7px;font-size:13px;">Cancel</button>
<button style="padding:9px 18px;background:#1A365D;color:white;border:none;border-radius:7px;font-size:13px;font-weight:600;">Send Invite</button>
</div>
</div>
</div>
</div>
</div>
<hr class="divider" style="max-width:1100px;margin:24px auto 48px;">
<!-- TRAINEE SIDE -->
<div class="flow-section">
<h2>Trainee: Complete Assessment (Mobile)</h2>
<p class="subtitle">After accepting the invite and consenting to data sharing, the trainee sees one movement at a time. They film each movement, then submit everything to the trainer.</p>
<div class="screens three-col">
<!-- Step: Recording -->
<div class="phone">
<div class="phone-notch"><div class="phone-notch-inner"></div></div>
<div class="phone-body" style="font-family:system-ui;background:#f7f8fa;display:flex;flex-direction:column;">
<div style="padding:14px 16px 0;">
<div style="display:flex;justify-content:space-between;font-size:11px;color:#666;margin-bottom:4px;">
<span>Movement 2 of 5</span>
<span>40%</span>
</div>
<div style="height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden;">
<div style="width:40%;height:100%;background:#1A365D;border-radius:2px;"></div>
</div>
</div>
<div style="padding:16px 16px 8px;">
<div style="font-size:18px;font-weight:700;color:#1A365D;">Overhead Squat</div>
<div style="font-size:12px;color:#555;margin-top:4px;line-height:1.4;">PVC pipe or empty bar, wide grip overhead. Squat to full depth.</div>
</div>
<div style="margin:0 16px;background:#e2e8f0;border-radius:10px;height:140px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;">
<div style="width:40px;height:40px;background:#1A365D;border-radius:50%;display:flex;align-items:center;justify-content:center;">
<span style="color:white;font-size:16px;">▶</span>
</div>
<span style="font-size:11px;color:#666;">Watch demo</span>
</div>
<div style="margin:12px 16px;padding:28px 16px;border:2px dashed #cbd5e0;border-radius:10px;text-align:center;">
<div style="font-size:28px;margin-bottom:6px;">📷</div>
<div style="font-size:13px;font-weight:600;color:#1A365D;">Record or upload video</div>
<div style="font-size:11px;color:#888;margin-top:2px;">Tap to open camera</div>
</div>
<div style="margin-top:auto;padding:12px 16px 20px;display:flex;gap:10px;">
<button style="flex:1;padding:12px;border-radius:8px;border:2px solid #1A365D;background:white;color:#1A365D;font-size:13px;font-weight:600;">Back</button>
<button style="flex:2;padding:12px;border-radius:8px;border:none;background:#cbd5e0;color:#888;font-size:13px;font-weight:600;">Next</button>
</div>
</div>
</div>
<!-- Step: Video Uploaded -->
<div class="phone">
<div class="phone-notch"><div class="phone-notch-inner"></div></div>
<div class="phone-body" style="font-family:system-ui;background:#f7f8fa;display:flex;flex-direction:column;">
<div style="padding:14px 16px 0;">
<div style="display:flex;justify-content:space-between;font-size:11px;color:#666;margin-bottom:4px;">
<span>Movement 2 of 5</span>
<span>40%</span>
</div>
<div style="height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden;">
<div style="width:40%;height:100%;background:#1A365D;border-radius:2px;"></div>
</div>
</div>
<div style="padding:16px 16px 8px;">
<div style="font-size:18px;font-weight:700;color:#1A365D;">Overhead Squat</div>
<div style="font-size:12px;color:#555;margin-top:4px;line-height:1.4;">PVC pipe or empty bar, wide grip overhead. Squat to full depth.</div>
</div>
<div style="margin:0 16px;background:#1a1a1a;border-radius:10px;height:160px;display:flex;align-items:center;justify-content:center;position:relative;">
<div style="width:40px;height:40px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;">
<span style="font-size:16px;margin-left:2px;">▶</span>
</div>
<div style="position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.7);color:white;padding:2px 6px;border-radius:3px;font-size:10px;">0:14</div>
<div style="position:absolute;top:-6px;right:-6px;width:24px;height:24px;background:#38a169;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid white;">
<span style="color:white;font-size:12px;">✓</span>
</div>
</div>
<div style="text-align:center;margin-top:10px;">
<button style="padding:6px 16px;border-radius:6px;border:1px solid #e2e8f0;background:white;color:#666;font-size:11px;">Re-record video</button>
</div>
<div style="margin-top:auto;padding:12px 16px 20px;display:flex;gap:10px;">
<button style="flex:1;padding:12px;border-radius:8px;border:2px solid #1A365D;background:white;color:#1A365D;font-size:13px;font-weight:600;">Back</button>
<button style="flex:2;padding:12px;border-radius:8px;border:none;background:#1A365D;color:white;font-size:13px;font-weight:600;">Next →</button>
</div>
</div>
</div>
<!-- Review & Submit -->
<div class="phone">
<div class="phone-notch"><div class="phone-notch-inner"></div></div>
<div class="phone-body" style="font-family:system-ui;background:#f7f8fa;display:flex;flex-direction:column;">
<div style="padding:16px 16px 8px;">
<div style="font-size:18px;font-weight:700;color:#1A365D;">Review & Submit</div>
<div style="font-size:12px;color:#555;margin-top:4px;">Review your videos before submitting</div>
</div>
<div style="padding:0 16px 8px;">
<div style="height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden;">
<div style="width:100%;height:100%;background:#38a169;border-radius:2px;"></div>
</div>
<div style="font-size:10px;color:#38a169;margin-top:3px;font-weight:600;">5 of 5 movements recorded</div>
</div>
<div style="padding:0 16px;">
<div style="display:flex;align-items:center;padding:11px 0;border-bottom:1px solid #e2e8f0;gap:10px;">
<div style="width:48px;height:36px;background:#1a1a1a;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:8px;">▶</span></div>
<div style="flex:1;font-size:13px;font-weight:600;">Bodyweight Squat</div>
<div style="width:18px;height:18px;background:#38a169;border-radius:50%;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:10px;">✓</span></div>
</div>
<div style="display:flex;align-items:center;padding:11px 0;border-bottom:1px solid #e2e8f0;gap:10px;">
<div style="width:48px;height:36px;background:#1a1a1a;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:8px;">▶</span></div>
<div style="flex:1;font-size:13px;font-weight:600;">Overhead Squat</div>
<div style="width:18px;height:18px;background:#38a169;border-radius:50%;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:10px;">✓</span></div>
</div>
<div style="display:flex;align-items:center;padding:11px 0;border-bottom:1px solid #e2e8f0;gap:10px;">
<div style="width:48px;height:36px;background:#1a1a1a;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:8px;">▶</span></div>
<div style="flex:1;font-size:13px;font-weight:600;">Romanian Deadlift</div>
<div style="width:18px;height:18px;background:#38a169;border-radius:50%;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:10px;">✓</span></div>
</div>
<div style="display:flex;align-items:center;padding:11px 0;border-bottom:1px solid #e2e8f0;gap:10px;">
<div style="width:48px;height:36px;background:#1a1a1a;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:8px;">▶</span></div>
<div style="flex:1;font-size:13px;font-weight:600;">Push-up</div>
<div style="width:18px;height:18px;background:#38a169;border-radius:50%;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:10px;">✓</span></div>
</div>
<div style="display:flex;align-items:center;padding:11px 0;gap:10px;">
<div style="width:48px;height:36px;background:#1a1a1a;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:8px;">▶</span></div>
<div style="flex:1;font-size:13px;font-weight:600;">Walking Lunge</div>
<div style="width:18px;height:18px;background:#38a169;border-radius:50%;display:flex;align-items:center;justify-content:center;"><span style="color:white;font-size:10px;">✓</span></div>
</div>
</div>
<div style="margin-top:auto;padding:14px 16px 20px;">
<button style="width:100%;padding:14px;border-radius:8px;border:none;background:#1A365D;color:white;font-size:14px;font-weight:600;">Submit to Trainer</button>
</div>
</div>
</div>
</div>
</div>
<hr class="divider" style="max-width:1100px;margin:24px auto 48px;">
<!-- TRAINER REVIEW -->
<div class="flow-section">
<h2>Trainer: Review Submitted Videos</h2>
<p class="subtitle">After the trainee submits, the trainer reviews each movement video and can leave feedback on form, mobility, and areas to work on.</p>
<div class="screen" style="max-width:900px;margin:0 auto;">
<div class="screen-header">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
/trainer/trainees/sarah/assessments/review
</div>
<div class="screen-body" style="padding:24px;font-family:system-ui;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;">
<div>
<div style="font-size:18px;font-weight:700;color:#1A365D;">New Client Movement Screen</div>
<div style="font-size:12px;color:#888;margin-top:3px;">Sarah Chen · Submitted Mar 23, 2026</div>
</div>
<span style="background:#c6f6d5;color:#276749;padding:5px 12px;border-radius:12px;font-size:11px;font-weight:600;">Completed</span>
</div>
<div style="background:#f8f9fa;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;margin-bottom:14px;">
<div style="display:flex;">
<div style="width:260px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;min-height:140px;">
<div style="width:40px;height:40px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;">
<span style="font-size:16px;margin-left:2px;">▶</span>
</div>
<div style="position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.7);color:white;padding:2px 6px;border-radius:3px;font-size:10px;">0:12</div>
</div>
<div style="flex:1;padding:14px 16px;">
<span style="font-size:9px;text-transform:uppercase;color:#888;font-weight:600;letter-spacing:0.4px;">Movement 1 of 5</span>
<div style="font-size:14px;font-weight:600;margin-top:2px;">Bodyweight Squat</div>
<div style="font-size:11px;color:#888;margin-top:2px;">Full depth, feet shoulder width</div>
<div style="margin-top:10px;">
<label style="font-size:10px;font-weight:600;color:#555;display:block;margin-bottom:3px;">Your Feedback</label>
<textarea style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:11px;height:48px;resize:none;font-family:inherit;box-sizing:border-box;">Good depth. Slight knee valgus at the bottom — add banded squats to warm-up.</textarea>
</div>
</div>
</div>
</div>
<div style="background:#f8f9fa;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;margin-bottom:14px;">
<div style="display:flex;">
<div style="width:260px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;min-height:140px;">
<div style="width:40px;height:40px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;">
<span style="font-size:16px;margin-left:2px;">▶</span>
</div>
<div style="position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.7);color:white;padding:2px 6px;border-radius:3px;font-size:10px;">0:14</div>
</div>
<div style="flex:1;padding:14px 16px;">
<span style="font-size:9px;text-transform:uppercase;color:#888;font-weight:600;letter-spacing:0.4px;">Movement 2 of 5</span>
<div style="font-size:14px;font-weight:600;margin-top:2px;">Overhead Squat</div>
<div style="font-size:11px;color:#888;margin-top:2px;">PVC pipe, wide grip overhead</div>
<div style="margin-top:10px;">
<label style="font-size:10px;font-weight:600;color:#555;display:block;margin-bottom:3px;">Your Feedback</label>
<textarea style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:11px;height:48px;resize:none;font-family:inherit;box-sizing:border-box;">Limited thoracic extension — bar drifts forward. Prioritize t-spine mobility work.</textarea>
</div>
</div>
</div>
</div>
<button style="padding:10px 24px;background:#1A365D;color:white;border:none;border-radius:7px;font-size:13px;font-weight:600;margin-top:8px;">Save Feedback</button>
</div>
</div>
</div>
<div style="text-align:center;padding:40px 24px 48px;color:#888;font-size:13px;">
Built for Jason Trainer · Movement Assessment Feature · March 2026
</div>
</body>
</html>
Raw
mobile-redesign-dark-power.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jason Trainer — Dark Power Design</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'DM Sans', -apple-system, sans-serif;
background: #050505;
color: #fff;
min-height: 100vh;
overflow-x: hidden;
}
/* ===== Page Layout ===== */
.page-header {
text-align: center;
padding: 48px 20px 16px;
}
.page-header h1 {
font-family: 'Space Grotesk', sans-serif;
font-size: 36px;
font-weight: 700;
letter-spacing: -1px;
background: linear-gradient(135deg, #FF6B35, #FF9F1C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-header p {
color: #555;
font-size: 15px;
margin-top: 8px;
}
.screen-nav {
display: flex;
justify-content: center;
gap: 8px;
padding: 24px 20px;
flex-wrap: wrap;
}
.screen-nav button {
background: #1a1a1a;
border: 1px solid #2a2a2a;
color: #888;
padding: 10px 20px;
border-radius: 100px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.screen-nav button:hover {
border-color: #FF6B35;
color: #FF6B35;
}
.screen-nav button.active {
background: linear-gradient(135deg, #FF6B35, #FF9F1C);
border-color: transparent;
color: white;
}
.screens-container {
display: flex;
justify-content: center;
padding: 20px;
}
.phone-showcase {
position: relative;
}
/* Phone Frame */
.phone-frame {
width: 375px;
height: 812px;
background: #000;
border-radius: 48px;
padding: 12px;
box-shadow:
0 0 0 2px #1a1a1a,
0 0 0 4px #111,
0 20px 80px rgba(255,107,53,0.15),
0 40px 120px rgba(0,0,0,0.8);
position: relative;
}
.phone-inner {
width: 100%;
height: 100%;
border-radius: 38px;
overflow: hidden;
position: relative;
background: #0D0D0D;
}
/* Dynamic Island */
.dynamic-island {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 126px;
height: 36px;
background: #000;
border-radius: 20px;
z-index: 50;
}
/* Screen containers */
.screen {
display: none;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: flex; flex-direction: column; }
/* ================================================================
SCREEN 1: HOME DASHBOARD
================================================================ */
.home {
background: #0D0D0D;
padding-bottom: 80px;
}
.home .top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 56px 24px 0;
}
.home .avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #FF6B35, #FF9F1C);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: white;
}
.home .top-icons {
display: flex;
gap: 12px;
}
.home .icon-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: #1a1a1a;
border: 1px solid #222;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
position: relative;
}
.home .icon-btn .badge {
position: absolute;
top: -2px;
right: -2px;
width: 18px;
height: 18px;
background: #FF6B35;
border-radius: 50%;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
border: 2px solid #0D0D0D;
}
.home .greeting {
padding: 20px 24px 0;
}
.home .greeting .sub {
font-size: 14px;
color: #666;
font-weight: 500;
}
.home .greeting h1 {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px;
font-weight: 700;
color: #fff;
margin-top: 2px;
letter-spacing: -0.5px;
}
/* Today's Mission Card */
.mission-card {
margin: 20px 20px 0;
background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
border-radius: 24px;
padding: 24px;
border: 1px solid #222;
position: relative;
overflow: hidden;
}
.mission-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #FF6B35, #FF9F1C, #FF6B35);
}
.mission-card::after {
content: '';
position: absolute;
right: -30px;
bottom: -30px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255,107,53,0.08) 0%, transparent 70%);
border-radius: 50%;
}
.mission-card .mission-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.mission-card .mission-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #FF6B35;
font-weight: 700;
}
.mission-card .mission-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
color: #fff;
margin-top: 8px;
letter-spacing: -0.3px;
}
.mission-card .mission-sub {
font-size: 13px;
color: #666;
margin-top: 4px;
}
.mission-card .mission-ring {
width: 64px;
height: 64px;
position: relative;
flex-shrink: 0;
}
.mission-card .mission-ring svg {
width: 64px;
height: 64px;
transform: rotate(-90deg);
}
.mission-card .mission-ring .ring-bg {
fill: none;
stroke: #2a2a2a;
stroke-width: 5;
}
.mission-card .mission-ring .ring-fill {
fill: none;
stroke: url(#orangeGrad);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 163.36;
stroke-dashoffset: 106.18;
}
.mission-card .ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 15px;
font-weight: 800;
color: #FF6B35;
}
.mission-card .progress-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px;
}
.mission-card .progress-bar {
flex: 1;
height: 6px;
background: #2a2a2a;
border-radius: 3px;
overflow: hidden;
}
.mission-card .progress-fill {
width: 35%;
height: 100%;
background: linear-gradient(90deg, #FF6B35, #FF9F1C);
border-radius: 3px;
transition: width 0.5s ease;
}
.mission-card .progress-label {
font-size: 12px;
font-weight: 700;
color: #FF9F1C;
white-space: nowrap;
}
/* Stats Row */
.stats-row {
display: flex;
gap: 12px;
padding: 20px 20px 0;
}
.stat-card {
flex: 1;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 18px;
padding: 16px 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,107,53,0.3), transparent);
}
.stat-card .stat-emoji { font-size: 22px; margin-bottom: 6px; }
.stat-card .stat-val {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
color: #fff;
}
.stat-card .stat-label {
font-size: 10px;
color: #555;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 4px;
font-weight: 600;
}
/* Workout Section */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 24px 12px;
}
.section-header h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.section-header .see-all {
font-size: 13px;
color: #FF6B35;
font-weight: 600;
letter-spacing: 0.3px;
}
.exercise-list {
padding: 0 20px;
}
.exercise-card {
display: flex;
align-items: center;
gap: 14px;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 18px;
padding: 16px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.exercise-card.completed {
opacity: 0.5;
}
.exercise-card.completed::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #27AE60;
}
.exercise-card.current::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #FF6B35, #FF9F1C);
}
.exercise-icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.exercise-icon-wrap.warmup { background: rgba(255,159,28,0.1); }
.exercise-icon-wrap.primary { background: rgba(255,107,53,0.12); }
.exercise-icon-wrap.accessory { background: rgba(255,107,53,0.06); }
.exercise-info { flex: 1; }
.exercise-info h4 {
font-size: 14px;
font-weight: 700;
color: #fff;
}
.exercise-info .exercise-meta {
font-size: 12px;
color: #555;
margin-top: 3px;
}
.exercise-info .exercise-meta span {
color: #FF9F1C;
font-weight: 600;
}
.exercise-check {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.exercise-check.done {
background: linear-gradient(135deg, #27AE60, #2ECC71);
border: none;
color: white;
font-size: 13px;
font-weight: 800;
}
/* Bottom Nav */
.bottom-nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 12px 8px 28px;
background: linear-gradient(180deg, transparent 0%, #0D0D0D 30%);
z-index: 10;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: pointer;
position: relative;
}
.nav-item .nav-icon {
font-size: 22px;
opacity: 0.35;
transition: all 0.2s;
}
.nav-item .nav-label {
font-size: 10px;
color: #444;
font-weight: 600;
letter-spacing: 0.3px;
transition: all 0.2s;
}
.nav-item.active .nav-icon {
opacity: 1;
}
.nav-item.active .nav-label {
color: #FF6B35;
}
.nav-item.active::before {
content: '';
position: absolute;
top: -12px;
width: 20px;
height: 3px;
background: #FF6B35;
border-radius: 2px;
}
/* ================================================================
SCREEN 2: ONBOARDING / DAILY BRIEFING
================================================================ */
.onboarding {
background: #0D0D0D;
padding-bottom: 80px;
}
.onboarding .ob-header {
padding: 56px 24px 0;
text-align: center;
}
.onboarding .ob-step {
font-size: 11px;
color: #FF6B35;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
}
.onboarding .ob-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 26px;
font-weight: 700;
color: #fff;
margin-top: 12px;
letter-spacing: -0.5px;
line-height: 1.2;
}
.onboarding .ob-sub {
font-size: 14px;
color: #555;
margin-top: 8px;
line-height: 1.5;
}
.onboarding .ob-visual {
margin: 28px 24px 0;
background: #111;
border-radius: 24px;
border: 1px solid #1a1a1a;
padding: 28px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.onboarding .ob-visual::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #FF6B35, #FF9F1C);
}
.onboarding .ob-big-icon {
font-size: 56px;
margin-bottom: 12px;
}
.onboarding .ob-focus-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #555;
font-weight: 600;
}
.onboarding .ob-focus-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 20px;
font-weight: 700;
color: #fff;
margin-top: 6px;
}
.onboarding .ob-details {
padding: 20px 24px 0;
}
.ob-detail-row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid #1a1a1a;
}
.ob-detail-row:last-child { border-bottom: none; }
.ob-detail-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255,107,53,0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.ob-detail-text h4 {
font-size: 14px;
font-weight: 700;
color: #fff;
}
.ob-detail-text p {
font-size: 12px;
color: #555;
margin-top: 2px;
}
.onboarding .ob-cta {
margin: 28px 24px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.btn-primary {
background: linear-gradient(135deg, #FF6B35, #FF9F1C);
border: none;
color: white;
padding: 16px;
border-radius: 16px;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.3px;
text-align: center;
}
.btn-secondary {
background: transparent;
border: 1px solid #333;
color: #888;
padding: 16px;
border-radius: 16px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.onboarding .ob-progress-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 28px;
}
.ob-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #333;
}
.ob-dot.active {
width: 24px;
border-radius: 4px;
background: linear-gradient(90deg, #FF6B35, #FF9F1C);
}
/* ================================================================
SCREEN 3: CALENDAR
================================================================ */
.calendar-screen {
background: #0D0D0D;
padding-bottom: 80px;
}
.cal-header {
padding: 56px 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.cal-header h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: 24px;
font-weight: 700;
}
.cal-month-nav {
display: flex;
gap: 8px;
}
.cal-month-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: #1a1a1a;
border: 1px solid #222;
color: #888;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
}
.cal-month-label {
padding: 20px 24px 0;
font-size: 16px;
font-weight: 700;
color: #FF6B35;
}
.cal-week-labels {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 16px 16px 8px;
text-align: center;
}
.cal-week-labels span {
font-size: 11px;
color: #444;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 0 12px;
gap: 4px;
}
.cal-day {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
color: #555;
position: relative;
cursor: pointer;
gap: 3px;
}
.cal-day.other-month { color: #2a2a2a; }
.cal-day.has-workout { color: #fff; }
.cal-day.has-workout::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #FF6B35;
}
.cal-day.completed { color: #27AE60; }
.cal-day.completed::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #27AE60;
}
.cal-day.today {
background: linear-gradient(135deg, #FF6B35, #FF9F1C);
color: #fff;
font-weight: 800;
}
.cal-day.today::after { display: none; }
.cal-day.rest-day { color: #333; }
/* Weekly Summary */
.cal-week-summary {
margin: 20px 20px 0;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 20px;
padding: 20px;
}
.cal-week-summary h4 {
font-size: 13px;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 14px;
}
.cal-summary-stats {
display: flex;
justify-content: space-around;
}
.cal-stat {
text-align: center;
}
.cal-stat .val {
font-family: 'Space Grotesk', sans-serif;
font-size: 24px;
font-weight: 700;
color: #fff;
}
.cal-stat .val.orange { color: #FF6B35; }
.cal-stat .val.green { color: #27AE60; }
.cal-stat .label {
font-size: 11px;
color: #555;
margin-top: 4px;
font-weight: 500;
}
/* Upcoming */
.cal-upcoming {
margin: 16px 20px 0;
}
.cal-upcoming h4 {
font-size: 15px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}
.cal-upcoming-card {
display: flex;
align-items: center;
gap: 14px;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 16px;
padding: 14px 16px;
margin-bottom: 8px;
}
.cal-upcoming-day {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(255,107,53,0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cal-upcoming-day .day-name {
font-size: 10px;
color: #FF6B35;
font-weight: 700;
text-transform: uppercase;
}
.cal-upcoming-day .day-num {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.cal-upcoming-info h5 {
font-size: 14px;
font-weight: 700;
color: #fff;
}
.cal-upcoming-info p {
font-size: 12px;
color: #555;
margin-top: 2px;
}
/* ================================================================
SCREEN 4: ANALYTICS / PROGRESS
================================================================ */
.analytics {
background: #0D0D0D;
padding-bottom: 80px;
}
.analytics .an-header {
padding: 56px 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.analytics .an-header h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: 24px;
font-weight: 700;
}
.an-period {
background: #1a1a1a;
border: 1px solid #222;
border-radius: 100px;
padding: 8px 16px;
font-size: 13px;
color: #FF6B35;
font-weight: 600;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
}
/* Streak Banner */
.streak-banner {
margin: 20px 20px 0;
background: linear-gradient(135deg, #1a1a1a, #111);
border: 1px solid #222;
border-radius: 20px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
}
.streak-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #FF6B35, #FF9F1C, #FF6B35);
}
.streak-fire {
font-size: 40px;
}
.streak-info h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px;
font-weight: 800;
color: #fff;
}
.streak-info h3 span { color: #FF6B35; }
.streak-info p {
font-size: 13px;
color: #555;
margin-top: 2px;
}
/* Chart Card */
.chart-card {
margin: 16px 20px 0;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 20px;
padding: 20px;
}
.chart-card h4 {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.chart-card .chart-sub {
font-size: 12px;
color: #555;
margin-bottom: 16px;
}
/* Bar chart */
.bar-chart {
display: flex;
align-items: flex-end;
gap: 8px;
height: 120px;
padding: 0 4px;
}
.bar-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
height: 100%;
justify-content: flex-end;
}
.bar {
width: 100%;
border-radius: 6px 6px 2px 2px;
min-height: 4px;
transition: height 0.5s ease;
}
.bar.orange { background: linear-gradient(180deg, #FF6B35, #FF9F1C); }
.bar.dim { background: #2a2a2a; }
.bar.green { background: linear-gradient(180deg, #27AE60, #2ECC71); }
.bar-label {
font-size: 10px;
color: #444;
font-weight: 600;
}
/* Weekly rings */
.weekly-rings {
display: flex;
justify-content: space-around;
margin: 16px 20px 0;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 20px;
padding: 20px 12px;
}
.ring-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.mini-ring {
width: 48px;
height: 48px;
position: relative;
}
.mini-ring svg {
width: 48px;
height: 48px;
transform: rotate(-90deg);
}
.mini-ring .ring-bg {
fill: none;
stroke: #2a2a2a;
stroke-width: 4;
}
.mini-ring .ring-fill {
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 125.66;
}
.mini-ring .ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 11px;
font-weight: 800;
color: #fff;
}
.ring-label {
font-size: 10px;
color: #555;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Achievement cards */
.achievements-section {
padding: 0 20px;
margin-top: 16px;
}
.achievements-section h4 {
font-size: 15px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}
.achievement-card {
display: flex;
align-items: center;
gap: 14px;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 16px;
padding: 14px 16px;
margin-bottom: 8px;
}
.achievement-card .ach-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.achievement-card .ach-icon.gold {
background: linear-gradient(135deg, rgba(255,159,28,0.15), rgba(255,107,53,0.1));
}
.achievement-card .ach-icon.silver {
background: rgba(255,255,255,0.05);
}
.achievement-card .ach-info h5 {
font-size: 14px;
font-weight: 700;
color: #fff;
}
.achievement-card .ach-info p {
font-size: 12px;
color: #555;
margin-top: 2px;
}
.achievement-card .ach-date {
margin-left: auto;
font-size: 11px;
color: #444;
flex-shrink: 0;
}
/* ===== Utility ===== */
.glow-line {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,107,53,0.2), transparent);
margin: 0 24px;
}
/* ===== Mobile Responsive ===== */
@media (max-width: 500px) {
.phone-frame {
width: 100%;
height: 100vh;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.phone-inner {
border-radius: 0;
}
.dynamic-island {
display: none;
}
.phone-showcase {
width: 100%;
}
.page-header {
padding: 16px 20px 8px;
}
.page-header h1 {
font-size: 24px;
}
.screen-nav {
padding: 8px 12px;
gap: 4px;
}
.screen-nav button {
padding: 8px 14px;
font-size: 12px;
}
.screens-container {
padding: 0;
}
body {
padding: 0;
}
}
</style>
<!-- SVG Gradient Definition -->
<svg width="0" height="0">
<defs>
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FF6B35"/>
<stop offset="100%" style="stop-color:#FF9F1C"/>
</linearGradient>
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#27AE60"/>
<stop offset="100%" style="stop-color:#2ECC71"/>
</linearGradient>
</defs>
</svg>
</head>
<body>
<div class="page-header">
<h1>Dark Power</h1>
<p>4 screens — tap to navigate between them</p>
</div>
<div class="screen-nav">
<button class="active" onclick="showScreen('home', this)">Home</button>
<button onclick="showScreen('onboarding', this)">Daily Briefing</button>
<button onclick="showScreen('calendar', this)">Calendar</button>
<button onclick="showScreen('analytics', this)">Analytics</button>
</div>
<div class="screens-container">
<div class="phone-showcase">
<div class="phone-frame">
<div class="phone-inner">
<div class="dynamic-island"></div>
<!-- ==================== HOME SCREEN ==================== -->
<div class="screen home active" id="screen-home">
<div class="top-bar">
<div class="avatar">S</div>
<div class="top-icons">
<div class="icon-btn">🔔<div class="badge">2</div></div>
<div class="icon-btn">⚙️</div>
</div>
</div>
<div class="greeting">
<div class="sub">Good evening</div>
<h1>Sarah's Training</h1>
</div>
<div class="mission-card">
<div class="mission-top">
<div>
<div class="mission-label">Today's Mission</div>
<div class="mission-title">Lower Body Power</div>
<div class="mission-sub">Olympic Strength · Week 4, Day 2</div>
</div>
<div class="mission-ring">
<svg viewBox="0 0 56 56">
<circle class="ring-bg" cx="28" cy="28" r="26"/>
<circle class="ring-fill" cx="28" cy="28" r="26"/>
</svg>
<div class="ring-text">35%</div>
</div>
</div>
<div class="progress-row">
<div class="progress-bar"><div class="progress-fill"></div></div>
<div class="progress-label">2 of 6</div>
</div>
</div>
<div class="stats-row">
<div class="stat-card">
<div class="stat-emoji">🔥</div>
<div class="stat-val">12</div>
<div class="stat-label">Streak</div>
</div>
<div class="stat-card">
<div class="stat-emoji">⏱</div>
<div class="stat-val">48m</div>
<div class="stat-label">Est. Time</div>
</div>
<div class="stat-card">
<div class="stat-emoji">📈</div>
<div class="stat-val">+8%</div>
<div class="stat-label">Volume</div>
</div>
</div>
<div class="section-header">
<h3>Exercises</h3>
<span class="see-all">See all →</span>
</div>
<div class="exercise-list">
<div class="exercise-card completed">
<div class="exercise-icon-wrap warmup">🏃</div>
<div class="exercise-info">
<h4>Dynamic Warm-up</h4>
<div class="exercise-meta">10 min · Mobility</div>
</div>
<div class="exercise-check done">✓</div>
</div>
<div class="exercise-card completed">
<div class="exercise-icon-wrap primary">🏋️</div>
<div class="exercise-info">
<h4>Barbell Back Squat</h4>
<div class="exercise-meta">5×5 · <span>185 lbs</span></div>
</div>
<div class="exercise-check done">✓</div>
</div>
<div class="exercise-card current">
<div class="exercise-icon-wrap primary">🦵</div>
<div class="exercise-info">
<h4>Romanian Deadlift</h4>
<div class="exercise-meta">4×8 · <span>135 lbs</span></div>
</div>
<div class="exercise-check"></div>
</div>
<div class="exercise-card">
<div class="exercise-icon-wrap accessory">💪</div>
<div class="exercise-info">
<h4>Bulgarian Split Squat</h4>
<div class="exercise-meta">3×10 · <span>50 lbs</span></div>
</div>
<div class="exercise-check"></div>
</div>
<div class="exercise-card">
<div class="exercise-icon-wrap accessory">🦶</div>
<div class="exercise-info">
<h4>Calf Raises</h4>
<div class="exercise-meta">4×15 · <span>90 lbs</span></div>
</div>
<div class="exercise-check"></div>
</div>
<div class="exercise-card">
<div class="exercise-icon-wrap warmup">🧘</div>
<div class="exercise-info">
<h4>Cool Down Stretch</h4>
<div class="exercise-meta">5 min · Recovery</div>
</div>
<div class="exercise-check"></div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item active">
<div class="nav-icon">🏠</div>
<div class="nav-label">Home</div>
</div>
<div class="nav-item">
<div class="nav-icon">📅</div>
<div class="nav-label">Calendar</div>
</div>
<div class="nav-item">
<div class="nav-icon">📊</div>
<div class="nav-label">Progress</div>
</div>
<div class="nav-item">
<div class="nav-icon">💬</div>
<div class="nav-label">Chat</div>
</div>
<div class="nav-item">
<div class="nav-icon">👤</div>
<div class="nav-label">Profile</div>
</div>
</div>
</div>
<!-- ==================== DAILY BRIEFING / ONBOARDING ==================== -->
<div class="screen onboarding" id="screen-onboarding">
<div class="ob-header">
<div class="ob-step">Day 23 of 84</div>
<div class="ob-title">Today's Focus:<br>Explosive Power</div>
<div class="ob-sub">Your coach designed today's session to build lower body strength and power output.</div>
</div>
<div class="ob-visual">
<div class="ob-big-icon">⚡</div>
<div class="ob-focus-label">Primary Focus</div>
<div class="ob-focus-title">Lower Body Power</div>
</div>
<div class="ob-details">
<div class="ob-detail-row">
<div class="ob-detail-icon">🎯</div>
<div class="ob-detail-text">
<h4>6 Exercises</h4>
<p>3 blocks: warm-up, primary, accessory</p>
</div>
</div>
<div class="ob-detail-row">
<div class="ob-detail-icon">⏱</div>
<div class="ob-detail-text">
<h4>~48 Minutes</h4>
<p>Including rest periods</p>
</div>
</div>
<div class="ob-detail-row">
<div class="ob-detail-icon">💪</div>
<div class="ob-detail-text">
<h4>Main Lift: Back Squat</h4>
<p>5×5 at 185 lbs — aim for depth</p>
</div>
</div>
<div class="ob-detail-row">
<div class="ob-detail-icon">📝</div>
<div class="ob-detail-text">
<h4>Coach's Note</h4>
<p>Focus on bracing. Watch the video before your first set.</p>
</div>
</div>
</div>
<div class="ob-cta">
<div class="btn-primary">Start Workout →</div>
<div class="btn-secondary">Review Exercises First</div>
</div>
<div class="ob-progress-dots">
<div class="ob-dot"></div>
<div class="ob-dot"></div>
<div class="ob-dot active"></div>
<div class="ob-dot"></div>
</div>
<div class="bottom-nav">
<div class="nav-item active">
<div class="nav-icon">🏠</div>
<div class="nav-label">Home</div>
</div>
<div class="nav-item">
<div class="nav-icon">📅</div>
<div class="nav-label">Calendar</div>
</div>
<div class="nav-item">
<div class="nav-icon">📊</div>
<div class="nav-label">Progress</div>
</div>
<div class="nav-item">
<div class="nav-icon">💬</div>
<div class="nav-label">Chat</div>
</div>
<div class="nav-item">
<div class="nav-icon">👤</div>
<div class="nav-label">Profile</div>
</div>
</div>
</div>
<!-- ==================== CALENDAR ==================== -->
<div class="screen calendar-screen" id="screen-calendar">
<div class="cal-header">
<h2>Calendar</h2>
<div class="cal-month-nav">
<div class="cal-month-btn">‹</div>
<div class="cal-month-btn">›</div>
</div>
</div>
<div class="cal-month-label">March 2026</div>
<div class="cal-week-labels">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class="cal-grid">
<div class="cal-day other-month">23</div>
<div class="cal-day other-month">24</div>
<div class="cal-day other-month">25</div>
<div class="cal-day other-month">26</div>
<div class="cal-day other-month">27</div>
<div class="cal-day other-month">28</div>
<div class="cal-day rest-day">1</div>
<div class="cal-day completed">2</div>
<div class="cal-day completed">3</div>
<div class="cal-day completed">4</div>
<div class="cal-day completed">5</div>
<div class="cal-day completed">6</div>
<div class="cal-day rest-day">7</div>
<div class="cal-day rest-day">8</div>
<div class="cal-day completed">9</div>
<div class="cal-day completed">10</div>
<div class="cal-day completed">11</div>
<div class="cal-day completed">12</div>
<div class="cal-day completed">13</div>
<div class="cal-day rest-day">14</div>
<div class="cal-day rest-day">15</div>
<div class="cal-day completed">16</div>
<div class="cal-day completed">17</div>
<div class="cal-day completed">18</div>
<div class="cal-day completed">19</div>
<div class="cal-day completed">20</div>
<div class="cal-day rest-day">21</div>
<div class="cal-day rest-day">22</div>
<div class="cal-day completed">23</div>
<div class="cal-day today">24</div>
<div class="cal-day has-workout">25</div>
<div class="cal-day has-workout">26</div>
<div class="cal-day has-workout">27</div>
<div class="cal-day rest-day">28</div>
<div class="cal-day rest-day">29</div>
<div class="cal-day has-workout">30</div>
<div class="cal-day has-workout">31</div>
<div class="cal-day other-month">1</div>
<div class="cal-day other-month">2</div>
<div class="cal-day other-month">3</div>
<div class="cal-day other-month">4</div>
<div class="cal-day other-month">5</div>
</div>
<div class="cal-week-summary">
<h4>This Week</h4>
<div class="cal-summary-stats">
<div class="cal-stat">
<div class="val orange">4/5</div>
<div class="label">Workouts</div>
</div>
<div class="cal-stat">
<div class="val green">87%</div>
<div class="label">Completion</div>
</div>
<div class="cal-stat">
<div class="val">3h 12m</div>
<div class="label">Total Time</div>
</div>
</div>
</div>
<div class="cal-upcoming">
<h4>Coming Up</h4>
<div class="cal-upcoming-card">
<div class="cal-upcoming-day">
<div class="day-name">Wed</div>
<div class="day-num">25</div>
</div>
<div class="cal-upcoming-info">
<h5>Upper Body Hypertrophy</h5>
<p>7 exercises · ~55 min</p>
</div>
</div>
<div class="cal-upcoming-card">
<div class="cal-upcoming-day">
<div class="day-name">Thu</div>
<div class="day-num">26</div>
</div>
<div class="cal-upcoming-info">
<h5>Olympic Technique</h5>
<p>5 exercises · ~40 min</p>
</div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item">
<div class="nav-icon">🏠</div>
<div class="nav-label">Home</div>
</div>
<div class="nav-item active">
<div class="nav-icon">📅</div>
<div class="nav-label">Calendar</div>
</div>
<div class="nav-item">
<div class="nav-icon">📊</div>
<div class="nav-label">Progress</div>
</div>
<div class="nav-item">
<div class="nav-icon">💬</div>
<div class="nav-label">Chat</div>
</div>
<div class="nav-item">
<div class="nav-icon">👤</div>
<div class="nav-label">Profile</div>
</div>
</div>
</div>
<!-- ==================== ANALYTICS ==================== -->
<div class="screen analytics" id="screen-analytics">
<div class="an-header">
<h2>Progress</h2>
<div class="an-period">This Month ▾</div>
</div>
<div class="streak-banner">
<div class="streak-fire">🔥</div>
<div class="streak-info">
<h3><span>12 Day</span> Streak!</h3>
<p>Your longest streak was 18 days</p>
</div>
</div>
<div class="chart-card">
<h4>Weekly Volume</h4>
<div class="chart-sub">Total sets completed per week</div>
<div class="bar-chart">
<div class="bar-col">
<div class="bar dim" style="height:40%"></div>
<div class="bar-label">W1</div>
</div>
<div class="bar-col">
<div class="bar dim" style="height:55%"></div>
<div class="bar-label">W2</div>
</div>
<div class="bar-col">
<div class="bar dim" style="height:65%"></div>
<div class="bar-label">W3</div>
</div>
<div class="bar-col">
<div class="bar orange" style="height:82%"></div>
<div class="bar-label">W4</div>
</div>
</div>
</div>
<div class="weekly-rings">
<div class="ring-item">
<div class="mini-ring">
<svg viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="20"/>
<circle class="ring-fill" cx="22" cy="22" r="20" stroke="#FF6B35" style="stroke-dashoffset: 25.13"/>
</svg>
<div class="ring-text">80%</div>
</div>
<div class="ring-label">Workouts</div>
</div>
<div class="ring-item">
<div class="mini-ring">
<svg viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="20"/>
<circle class="ring-fill" cx="22" cy="22" r="20" stroke="#FF9F1C" style="stroke-dashoffset: 37.70"/>
</svg>
<div class="ring-text">70%</div>
</div>
<div class="ring-label">Volume</div>
</div>
<div class="ring-item">
<div class="mini-ring">
<svg viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="20"/>
<circle class="ring-fill" cx="22" cy="22" r="20" stroke="#27AE60" style="stroke-dashoffset: 12.57"/>
</svg>
<div class="ring-text">90%</div>
</div>
<div class="ring-label">Form</div>
</div>
<div class="ring-item">
<div class="mini-ring">
<svg viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="20"/>
<circle class="ring-fill" cx="22" cy="22" r="20" stroke="#FF6B35" style="stroke-dashoffset: 50.27"/>
</svg>
<div class="ring-text">60%</div>
</div>
<div class="ring-label">Goals</div>
</div>
</div>
<div class="achievements-section">
<h4>Recent Achievements</h4>
<div class="achievement-card">
<div class="ach-icon gold">🏆</div>
<div class="ach-info">
<h5>Iron Consistency</h5>
<p>10 workouts completed in a row</p>
</div>
<div class="ach-date">2 days ago</div>
</div>
<div class="achievement-card">
<div class="ach-icon gold">⚡</div>
<div class="ach-info">
<h5>PR Crusher</h5>
<p>New personal record on Back Squat</p>
</div>
<div class="ach-date">5 days ago</div>
</div>
<div class="achievement-card">
<div class="ach-icon silver">📹</div>
<div class="ach-info">
<h5>Form Check Pro</h5>
<p>Uploaded 5 form check videos</p>
</div>
<div class="ach-date">1 week ago</div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item">
<div class="nav-icon">🏠</div>
<div class="nav-label">Home</div>
</div>
<div class="nav-item">
<div class="nav-icon">📅</div>
<div class="nav-label">Calendar</div>
</div>
<div class="nav-item active">
<div class="nav-icon">📊</div>
<div class="nav-label">Progress</div>
</div>
<div class="nav-item">
<div class="nav-icon">💬</div>
<div class="nav-label">Chat</div>
</div>
<div class="nav-item">
<div class="nav-icon">👤</div>
<div class="nav-label">Profile</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showScreen(name, btn) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.querySelectorAll('.screen-nav button').forEach(b => b.classList.remove('active'));
document.getElementById('screen-' + name).classList.add('active');
btn.classList.add('active');
if (window.__recordEvent) {
window.__recordEvent({ type: 'click', choice: name, text: 'Viewing: ' + name });
}
}
</script>
</body>
</html>
Raw
mobile-redesign-soft-vitality.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jason Trainer — Soft Vitality Design</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
background: #F8F6FF;
color: #1a1a2e;
min-height: 100vh;
overflow-x: hidden;
}
/* ===== Page Layout ===== */
.page-header {
text-align: center;
padding: 48px 20px 16px;
}
.page-header h1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px;
font-weight: 700;
letter-spacing: -1px;
background: linear-gradient(135deg, #6C5CE7, #A78BFA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-header p {
color: #8B8BA8;
font-size: 15px;
margin-top: 8px;
}
.screen-nav {
display: flex;
justify-content: center;
gap: 8px;
padding: 24px 20px;
flex-wrap: wrap;
}
.screen-nav button {
background: #EEECF5;
border: 1px solid #E0DCF0;
color: #6B6B8D;
padding: 10px 20px;
border-radius: 100px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.screen-nav button:hover {
border-color: #6C5CE7;
color: #6C5CE7;
}
.screen-nav button.active {
background: linear-gradient(135deg, #6C5CE7, #A78BFA);
border-color: transparent;
color: white;
}
.screens-container {
display: flex;
justify-content: center;
padding: 20px;
}
.phone-showcase {
position: relative;
}
/* Phone Frame */
.phone-frame {
width: 375px;
height: 812px;
background: #E0DCF0;
border-radius: 48px;
padding: 12px;
box-shadow:
0 0 0 2px #D0CBE5,
0 0 0 4px #E0DCF0,
0 20px 80px rgba(108,92,231,0.12),
0 40px 120px rgba(0,0,0,0.08);
position: relative;
}
.phone-inner {
width: 100%;
height: 100%;
border-radius: 38px;
overflow: hidden;
position: relative;
background: #F8F6FF;
}
/* Dynamic Island */
.dynamic-island {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 126px;
height: 36px;
background: #1a1a2e;
border-radius: 20px;
z-index: 50;
}
/* Screen containers */
.screen {
display: none;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: flex; flex-direction: column; }
/* ================================================================
SCREEN 1: HOME DASHBOARD
================================================================ */
.home {
background: #F8F6FF;
padding-bottom: 80px;
}
.home .top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 56px 24px 0;
}
.home .avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #6C5CE7, #A78BFA);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: white;
}
.home .top-icons {
display: flex;
gap: 12px;
}
.home .icon-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
position: relative;
}
.home .icon-btn .badge {
position: absolute;
top: -2px;
right: -2px;
width: 18px;
height: 18px;
background: #6C5CE7;
border-radius: 50%;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: white;
border: 2px solid #F8F6FF;
}
.home .greeting {
padding: 20px 24px 0;
}
.home .greeting .sub {
font-size: 14px;
color: #6B6B8D;
font-weight: 500;
}
.home .greeting h1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 28px;
font-weight: 700;
color: #1a1a2e;
margin-top: 2px;
letter-spacing: -0.5px;
}
/* Today's Mission Card */
.mission-card {
margin: 20px 20px 0;
background: linear-gradient(135deg, #6C5CE7 0%, #A78BFA 100%);
border-radius: 24px;
padding: 24px;
border: none;
position: relative;
overflow: hidden;
}
.mission-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
}
.mission-card::after {
content: '';
position: absolute;
right: -30px;
bottom: -30px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
border-radius: 50%;
}
.mission-card .mission-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.mission-card .mission-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.8);
font-weight: 700;
}
.mission-card .mission-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
font-weight: 700;
color: #fff;
margin-top: 8px;
letter-spacing: -0.3px;
}
.mission-card .mission-sub {
font-size: 13px;
color: rgba(255,255,255,0.7);
margin-top: 4px;
}
.mission-card .mission-ring {
width: 64px;
height: 64px;
position: relative;
flex-shrink: 0;
}
.mission-card .mission-ring svg {
width: 64px;
height: 64px;
transform: rotate(-90deg);
}
.mission-card .mission-ring .ring-bg {
fill: none;
stroke: rgba(255,255,255,0.2);
stroke-width: 5;
}
.mission-card .mission-ring .ring-fill {
fill: none;
stroke: white;
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 163.36;
stroke-dashoffset: 106.18;
}
.mission-card .ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 15px;
font-weight: 800;
color: #fff;
}
.mission-card .progress-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px;
}
.mission-card .progress-bar {
flex: 1;
height: 6px;
background: rgba(255,255,255,0.2);
border-radius: 3px;
overflow: hidden;
}
.mission-card .progress-fill {
width: 35%;
height: 100%;
background: white;
border-radius: 3px;
transition: width 0.5s ease;
}
.mission-card .progress-label {
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.9);
white-space: nowrap;
}
/* Stats Row */
.stats-row {
display: flex;
gap: 12px;
padding: 20px 20px 0;
}
.stat-card {
flex: 1;
background: #F5F3FF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 18px;
padding: 16px 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(108,92,231,0.3), transparent);
}
.stat-card .stat-emoji { font-size: 22px; margin-bottom: 6px; }
.stat-card .stat-val {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
}
.stat-card .stat-label {
font-size: 10px;
color: #8B8BA8;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 4px;
font-weight: 600;
}
/* Workout Section */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 24px 12px;
}
.section-header h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
}
.section-header .see-all {
font-size: 13px;
color: #6C5CE7;
font-weight: 600;
letter-spacing: 0.3px;
}
.exercise-list {
padding: 0 20px;
}
.exercise-card {
display: flex;
align-items: center;
gap: 14px;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 18px;
padding: 16px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.exercise-card.completed {
opacity: 0.5;
}
.exercise-card.completed::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #27AE60;
}
.exercise-card.current::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #6C5CE7, #A78BFA);
}
.exercise-icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.exercise-icon-wrap.warmup { background: #FFF3E0; }
.exercise-icon-wrap.primary { background: #EDE7F6; }
.exercise-icon-wrap.accessory { background: #E8F5E9; }
.exercise-info { flex: 1; }
.exercise-info h4 {
font-size: 14px;
font-weight: 700;
color: #1a1a2e;
}
.exercise-info .exercise-meta {
font-size: 12px;
color: #8B8BA8;
margin-top: 3px;
}
.exercise-info .exercise-meta span {
color: #A78BFA;
font-weight: 600;
}
.exercise-check {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #D0CBE5;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.exercise-check.done {
background: linear-gradient(135deg, #27AE60, #2ECC71);
border: none;
color: white;
font-size: 13px;
font-weight: 800;
}
/* Bottom Nav */
.bottom-nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 12px 8px 28px;
background: #FFFFFF;
border-top: 1px solid #EEECF5;
z-index: 10;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: pointer;
position: relative;
}
.nav-item .nav-icon {
font-size: 22px;
opacity: 0.35;
transition: all 0.2s;
}
.nav-item .nav-label {
font-size: 10px;
color: #A0A0BB;
font-weight: 600;
letter-spacing: 0.3px;
transition: all 0.2s;
}
.nav-item.active .nav-icon {
opacity: 1;
}
.nav-item.active .nav-label {
color: #6C5CE7;
}
.nav-item.active::before {
content: '';
position: absolute;
top: -12px;
width: 20px;
height: 3px;
background: #6C5CE7;
border-radius: 2px;
}
/* ================================================================
SCREEN 2: ONBOARDING / DAILY BRIEFING
================================================================ */
.onboarding {
background: #F8F6FF;
padding-bottom: 80px;
}
.onboarding .ob-header {
padding: 56px 24px 0;
text-align: center;
}
.onboarding .ob-step {
font-size: 11px;
color: #6C5CE7;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
}
.onboarding .ob-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 26px;
font-weight: 700;
color: #1a1a2e;
margin-top: 12px;
letter-spacing: -0.5px;
line-height: 1.2;
}
.onboarding .ob-sub {
font-size: 14px;
color: #8B8BA8;
margin-top: 8px;
line-height: 1.5;
}
.onboarding .ob-visual {
margin: 28px 24px 0;
background: #FFFFFF;
border-radius: 24px;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
padding: 28px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.onboarding .ob-visual::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #6C5CE7, #A78BFA);
}
.onboarding .ob-big-icon {
font-size: 56px;
margin-bottom: 12px;
}
.onboarding .ob-focus-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #8B8BA8;
font-weight: 600;
}
.onboarding .ob-focus-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin-top: 6px;
}
.onboarding .ob-details {
padding: 20px 24px 0;
}
.ob-detail-row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid #EEECF5;
}
.ob-detail-row:last-child { border-bottom: none; }
.ob-detail-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(108,92,231,0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.ob-detail-text h4 {
font-size: 14px;
font-weight: 700;
color: #1a1a2e;
}
.ob-detail-text p {
font-size: 12px;
color: #8B8BA8;
margin-top: 2px;
}
.onboarding .ob-cta {
margin: 28px 24px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.btn-primary {
background: linear-gradient(135deg, #6C5CE7, #A78BFA);
border: none;
color: white;
padding: 16px;
border-radius: 16px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.3px;
text-align: center;
}
.btn-secondary {
background: transparent;
border: 1px solid #D0CBE5;
color: #6B6B8D;
padding: 16px;
border-radius: 16px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.onboarding .ob-progress-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 28px;
}
.ob-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D0CBE5;
}
.ob-dot.active {
width: 24px;
border-radius: 4px;
background: linear-gradient(90deg, #6C5CE7, #A78BFA);
}
/* ================================================================
SCREEN 3: CALENDAR
================================================================ */
.calendar-screen {
background: #F8F6FF;
padding-bottom: 80px;
}
.cal-header {
padding: 56px 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.cal-header h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 24px;
font-weight: 700;
color: #1a1a2e;
}
.cal-month-nav {
display: flex;
gap: 8px;
}
.cal-month-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
color: #6B6B8D;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
}
.cal-month-label {
padding: 20px 24px 0;
font-size: 16px;
font-weight: 700;
color: #6C5CE7;
}
.cal-week-labels {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 16px 16px 8px;
text-align: center;
}
.cal-week-labels span {
font-size: 11px;
color: #A0A0BB;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 0 12px;
gap: 4px;
}
.cal-day {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
color: #8B8BA8;
position: relative;
cursor: pointer;
gap: 3px;
}
.cal-day.other-month { color: #D0CBE5; }
.cal-day.has-workout { color: #1a1a2e; }
.cal-day.has-workout::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #6C5CE7;
}
.cal-day.completed { color: #27AE60; }
.cal-day.completed::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #27AE60;
}
.cal-day.today {
background: linear-gradient(135deg, #6C5CE7, #A78BFA);
color: #fff;
font-weight: 800;
}
.cal-day.today::after { display: none; }
.cal-day.rest-day { color: #D0CBE5; }
/* Weekly Summary */
.cal-week-summary {
margin: 20px 20px 0;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 20px;
padding: 20px;
}
.cal-week-summary h4 {
font-size: 13px;
color: #6B6B8D;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 14px;
}
.cal-summary-stats {
display: flex;
justify-content: space-around;
}
.cal-stat {
text-align: center;
}
.cal-stat .val {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 24px;
font-weight: 700;
color: #1a1a2e;
}
.cal-stat .val.orange { color: #6C5CE7; }
.cal-stat .val.green { color: #27AE60; }
.cal-stat .label {
font-size: 11px;
color: #8B8BA8;
margin-top: 4px;
font-weight: 500;
}
/* Upcoming */
.cal-upcoming {
margin: 16px 20px 0;
}
.cal-upcoming h4 {
font-size: 15px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 12px;
}
.cal-upcoming-card {
display: flex;
align-items: center;
gap: 14px;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 16px;
padding: 14px 16px;
margin-bottom: 8px;
}
.cal-upcoming-day {
width: 48px;
height: 48px;
border-radius: 14px;
background: #EDE7F6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cal-upcoming-day .day-name {
font-size: 10px;
color: #6C5CE7;
font-weight: 700;
text-transform: uppercase;
}
.cal-upcoming-day .day-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
}
.cal-upcoming-info h5 {
font-size: 14px;
font-weight: 700;
color: #1a1a2e;
}
.cal-upcoming-info p {
font-size: 12px;
color: #8B8BA8;
margin-top: 2px;
}
/* ================================================================
SCREEN 4: ANALYTICS / PROGRESS
================================================================ */
.analytics {
background: #F8F6FF;
padding-bottom: 80px;
}
.analytics .an-header {
padding: 56px 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.analytics .an-header h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 24px;
font-weight: 700;
color: #1a1a2e;
}
.an-period {
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 100px;
padding: 8px 16px;
font-size: 13px;
color: #6C5CE7;
font-weight: 600;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: pointer;
}
/* Streak Banner */
.streak-banner {
margin: 20px 20px 0;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 20px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
}
.streak-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #6C5CE7, #A78BFA, #6C5CE7);
}
.streak-fire {
font-size: 40px;
}
.streak-info h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 28px;
font-weight: 800;
color: #1a1a2e;
}
.streak-info h3 span { color: #6C5CE7; }
.streak-info p {
font-size: 13px;
color: #8B8BA8;
margin-top: 2px;
}
/* Chart Card */
.chart-card {
margin: 16px 20px 0;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 20px;
padding: 20px;
}
.chart-card h4 {
font-size: 14px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 4px;
}
.chart-card .chart-sub {
font-size: 12px;
color: #8B8BA8;
margin-bottom: 16px;
}
/* Bar chart */
.bar-chart {
display: flex;
align-items: flex-end;
gap: 8px;
height: 120px;
padding: 0 4px;
}
.bar-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
height: 100%;
justify-content: flex-end;
}
.bar {
width: 100%;
border-radius: 6px 6px 2px 2px;
min-height: 4px;
transition: height 0.5s ease;
}
.bar.orange { background: linear-gradient(180deg, #6C5CE7, #A78BFA); }
.bar.dim { background: #E8E5F5; }
.bar.green { background: linear-gradient(180deg, #27AE60, #2ECC71); }
.bar-label {
font-size: 10px;
color: #A0A0BB;
font-weight: 600;
}
/* Weekly rings */
.weekly-rings {
display: flex;
justify-content: space-around;
margin: 16px 20px 0;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 20px;
padding: 20px 12px;
}
.ring-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.mini-ring {
width: 48px;
height: 48px;
position: relative;
}
.mini-ring svg {
width: 48px;
height: 48px;
transform: rotate(-90deg);
}
.mini-ring .ring-bg {
fill: none;
stroke: #E8E5F5;
stroke-width: 4;
}
.mini-ring .ring-fill {
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 125.66;
}
.mini-ring .ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 11px;
font-weight: 800;
color: #1a1a2e;
}
.ring-label {
font-size: 10px;
color: #8B8BA8;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Achievement cards */
.achievements-section {
padding: 0 20px;
margin-top: 16px;
}
.achievements-section h4 {
font-size: 15px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 12px;
}
.achievement-card {
display: flex;
align-items: center;
gap: 14px;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(108,92,231,0.08);
border-radius: 16px;
padding: 14px 16px;
margin-bottom: 8px;
}
.achievement-card .ach-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.achievement-card .ach-icon.gold {
background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(167,139,250,0.1));
}
.achievement-card .ach-icon.silver {
background: rgba(108,92,231,0.05);
}
.achievement-card .ach-info h5 {
font-size: 14px;
font-weight: 700;
color: #1a1a2e;
}
.achievement-card .ach-info p {
font-size: 12px;
color: #8B8BA8;
margin-top: 2px;
}
.achievement-card .ach-date {
margin-left: auto;
font-size: 11px;
color: #A0A0BB;
flex-shrink: 0;
}
/* ===== Utility ===== */
.glow-line {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(108,92,231,0.2), transparent);
margin: 0 24px;
}
/* ===== Mobile Responsive ===== */
@media (max-width: 500px) {
.phone-frame {
width: 100%;
height: 100vh;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.phone-inner {
border-radius: 0;
}
.dynamic-island {
display: none;
}
.phone-showcase {
width: 100%;
}
.page-header {
padding: 16px 20px 8px;
}
.page-header h1 {
font-size: 24px;
}
.screen-nav {
padding: 8px 12px;
gap: 4px;
}
.screen-nav button {
padding: 8px 14px;
font-size: 12px;
}
.screens-container {
padding: 0;
}
body {
padding: 0;
}
}
</style>
<!-- SVG Gradient Definition -->
<svg width="0" height="0">
<defs>
<linearGradient id="purpleGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="100%" style="stop-color:#A78BFA"/>
</linearGradient>
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#27AE60"/>
<stop offset="100%" style="stop-color:#2ECC71"/>
</linearGradient>
</defs>
</svg>
</head>
<body>
<div class="page-header">
<h1>Soft Vitality</h1>
<p>4 screens — tap to navigate between them</p>
</div>
<div class="screen-nav">
<button class="active" onclick="showScreen('home', this)">Home</button>
<button onclick="showScreen('onboarding', this)">Daily Briefing</button>
<button onclick="showScreen('calendar', this)">Calendar</button>
<button onclick="showScreen('analytics', this)">Analytics</button>
</div>
<div class="screens-container">
<div class="phone-showcase">
<div class="phone-frame">
<div class="phone-inner">
<div class="dynamic-island"></div>
<!-- ==================== HOME SCREEN ==================== -->
<div class="screen home active" id="screen-home">
<div class="top-bar">
<div class="avatar">S</div>
<div class="top-icons">
<div class="icon-btn">🔔<div class="badge">2</div></div>
<div class="icon-btn">⚙️</div>
</div>
</div>
<div class="greeting">
<div class="sub">Good evening</div>
<h1>Sarah's Training</h1>
</div>
<div class="mission-card">
<div class="mission-top">
<div>
<div class="mission-label">Today's Mission</div>
<div class="mission-title">Lower Body Power</div>
<div class="mission-sub">Olympic Strength · Week 4, Day 2</div>
</div>
<div class="mission-ring">
<svg viewBox="0 0 56 56">
<circle class="ring-bg" cx="28" cy="28" r="26"/>
<circle class="ring-fill" cx="28" cy="28" r="26"/>
</svg>
<div class="ring-text">35%</div>
</div>
</div>
<div class="progress-row">
<div class="progress-bar"><div class="progress-fill"></div></div>
<div class="progress-label">2 of 6</div>
</div>
</div>
<div class="stats-row">
<div class="stat-card">
<div class="stat-emoji">🔥</div>
<div class="stat-val">12</div>
<div class="stat-label">Streak</div>
</div>
<div class="stat-card">
<div class="stat-emoji">⏱</div>
<div class="stat-val">48m</div>
<div class="stat-label">Est. Time</div>
</div>
<div class="stat-card">
<div class="stat-emoji">📈</div>
<div class="stat-val">+8%</div>
<div class="stat-label">Volume</div>
</div>
</div>
<div class="section-header">
<h3>Exercises</h3>
<span class="see-all">See all →</span>
</div>
<div class="exercise-list">
<div class="exercise-card completed">
<div class="exercise-icon-wrap warmup">🏃</div>
<div class="exercise-info">
<h4>Dynamic Warm-up</h4>
<div class="exercise-meta">10 min · Mobility</div>
</div>
<div class="exercise-check done">✓</div>
</div>
<div class="exercise-card completed">
<div class="exercise-icon-wrap primary">🏋️</div>
<div class="exercise-info">
<h4>Barbell Back Squat</h4>
<div class="exercise-meta">5×5 · <span>185 lbs</span></div>
</div>
<div class="exercise-check done">✓</div>
</div>
<div class="exercise-card current">
<div class="exercise-icon-wrap primary">🦵</div>
<div class="exercise-info">
<h4>Romanian Deadlift</h4>
<div class="exercise-meta">4×8 · <span>135 lbs</span></div>
</div>
<div class="exercise-check"></div>
</div>
<div class="exercise-card">
<div class="exercise-icon-wrap accessory">💪</div>
<div class="exercise-info">
<h4>Bulgarian Split Squat</h4>
<div class="exercise-meta">3×10 · <span>50 lbs</span></div>
</div>
<div class="exercise-check"></div>
</div>
<div class="exercise-card">
<div class="exercise-icon-wrap accessory">🦶</div>
<div class="exercise-info">
<h4>Calf Raises</h4>
<div class="exercise-meta">4×15 · <span>90 lbs</span></div>
</div>
<div class="exercise-check"></div>
</div>
<div class="exercise-card">
<div class="exercise-icon-wrap warmup">🧘</div>
<div class="exercise-info">
<h4>Cool Down Stretch</h4>
<div class="exercise-meta">5 min · Recovery</div>
</div>
<div class="exercise-check"></div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item active">
<div class="nav-icon">🏠</div>
<div class="nav-label">Home</div>
</div>
<div class="nav-item">
<div class="nav-icon">📅</div>
<div class="nav-label">Calendar</div>
</div>
<div class="nav-item">
<div class="nav-icon">📊</div>
<div class="nav-label">Progress</div>
</div>
<div class="nav-item">
<div class="nav-icon">💬</div>
<div class="nav-label">Chat</div>
</div>
<div class="nav-item">
<div class="nav-icon">👤</div>
<div class="nav-label">Profile</div>
</div>
</div>
</div>
<!-- ==================== DAILY BRIEFING / ONBOARDING ==================== -->
<div class="screen onboarding" id="screen-onboarding">
<div class="ob-header">
<div class="ob-step">Day 23 of 84</div>
<div class="ob-title">Today's Focus:<br>Explosive Power</div>
<div class="ob-sub">Your coach designed today's session to build lower body strength and power output.</div>
</div>
<div class="ob-visual">
<div class="ob-big-icon">⚡</div>
<div class="ob-focus-label">Primary Focus</div>
<div class="ob-focus-title">Lower Body Power</div>
</div>
<div class="ob-details">
<div class="ob-detail-row">
<div class="ob-detail-icon">🎯</div>
<div class="ob-detail-text">
<h4>6 Exercises</h4>
<p>3 blocks: warm-up, primary, accessory</p>
</div>
</div>
<div class="ob-detail-row">
<div class="ob-detail-icon">⏱</div>
<div class="ob-detail-text">
<h4>~48 Minutes</h4>
<p>Including rest periods</p>
</div>
</div>
<div class="ob-detail-row">
<div class="ob-detail-icon">💪</div>
<div class="ob-detail-text">
<h4>Main Lift: Back Squat</h4>
<p>5×5 at 185 lbs — aim for depth</p>
</div>
</div>
<div class="ob-detail-row">
<div class="ob-detail-icon">📝</div>
<div class="ob-detail-text">
<h4>Coach's Note</h4>
<p>Focus on bracing. Watch the video before your first set.</p>
</div>
</div>
</div>
<div class="ob-cta">
<div class="btn-primary">Start Workout →</div>
<div class="btn-secondary">Review Exercises First</div>
</div>
<div class="ob-progress-dots">
<div class="ob-dot"></div>
<div class="ob-dot"></div>
<div class="ob-dot active"></div>
<div class="ob-dot"></div>
</div>
<div class="bottom-nav">
<div class="nav-item active">
<div class="nav-icon">🏠</div>
<div class="nav-label">Home</div>
</div>
<div class="nav-item">
<div class="nav-icon">📅</div>
<div class="nav-label">Calendar</div>
</div>
<div class="nav-item">
<div class="nav-icon">📊</div>
<div class="nav-label">Progress</div>
</div>
<div class="nav-item">
<div class="nav-icon">💬</div>
<div class="nav-label">Chat</div>
</div>
<div class="nav-item">
<div class="nav-icon">👤</div>
<div class="nav-label">Profile</div>
</div>
</div>
</div>
<!-- ==================== CALENDAR ==================== -->
<div class="screen calendar-screen" id="screen-calendar">
<div class="cal-header">
<h2>Calendar</h2>
<div class="cal-month-nav">
<div class="cal-month-btn">‹</div>
<div class="cal-month-btn">›</div>
</div>
</div>
<div class="cal-month-label">March 2026</div>
<div class="cal-week-labels">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class="cal-grid">
<div class="cal-day other-month">23</div>
<div class="cal-day other-month">24</div>
<div class="cal-day other-month">25</div>
<div class="cal-day other-month">26</div>
<div class="cal-day other-month">27</div>
<div class="cal-day other-month">28</div>
<div class="cal-day rest-day">1</div>
<div class="cal-day completed">2</div>
<div class="cal-day completed">3</div>
<div class="cal-day completed">4</div>
<div class="cal-day completed">5</div>
<div class="cal-day completed">6</div>
<div class="cal-day rest-day">7</div>
<div class="cal-day rest-day">8</div>
<div class="cal-day completed">9</div>
<div class="cal-day completed">10</div>
<div class="cal-day completed">11</div>
<div class="cal-day completed">12</div>
<div class="cal-day completed">13</div>
<div class="cal-day rest-day">14</div>
<div class="cal-day rest-day">15</div>
<div class="cal-day completed">16</div>
<div class="cal-day completed">17</div>
<div class="cal-day completed">18</div>
<div class="cal-day completed">19</div>
<div class="cal-day completed">20</div>
<div class="cal-day rest-day">21</div>
<div class="cal-day rest-day">22</div>
<div class="cal-day completed">23</div>
<div class="cal-day today">24</div>
<div class="cal-day has-workout">25</div>
<div class="cal-day has-workout">26</div>
<div class="cal-day has-workout">27</div>
<div class="cal-day rest-day">28</div>
<div class="cal-day rest-day">29</div>
<div class="cal-day has-workout">30</div>
<div class="cal-day has-workout">31</div>
<div class="cal-day other-month">1</div>
<div class="cal-day other-month">2</div>
<div class="cal-day other-month">3</div>
<div class="cal-day other-month">4</div>
<div class="cal-day other-month">5</div>
</div>
<div class="cal-week-summary">
<h4>This Week</h4>
<div class="cal-summary-stats">
<div class="cal-stat">
<div class="val orange">4/5</div>
<div class="label">Workouts</div>
</div>
<div class="cal-stat">
<div class="val green">87%</div>
<div class="label">Completion</div>
</div>
<div class="cal-stat">
<div class="val">3h 12m</div>
<div class="label">Total Time</div>
</div>
</div>
</div>
<div class="cal-upcoming">
<h4>Coming Up</h4>
<div class="cal-upcoming-card">
<div class="cal-upcoming-day">
<div class="day-name">Wed</div>
<div class="day-num">25</div>
</div>
<div class="cal-upcoming-info">
<h5>Upper Body Hypertrophy</h5>
<p>7 exercises · ~55 min</p>
</div>
</div>
<div class="cal-upcoming-card">
<div class="cal-upcoming-day">
<div class="day-name">Thu</div>
<div class="day-num">26</div>
</div>
<div class="cal-upcoming-info">
<h5>Olympic Technique</h5>
<p>5 exercises · ~40 min</p>
</div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item">
<div class="nav-icon">🏠</div>
<div class="nav-label">Home</div>
</div>
<div class="nav-item active">
<div class="nav-icon">📅</div>
<div class="nav-label">Calendar</div>
</div>
<div class="nav-item">
<div class="nav-icon">📊</div>
<div class="nav-label">Progress</div>
</div>
<div class="nav-item">
<div class="nav-icon">💬</div>
<div class="nav-label">Chat</div>
</div>
<div class="nav-item">
<div class="nav-icon">👤</div>
<div class="nav-label">Profile</div>
</div>
</div>
</div>
<!-- ==================== ANALYTICS ==================== -->
<div class="screen analytics" id="screen-analytics">
<div class="an-header">
<h2>Progress</h2>
<div class="an-period">This Month ▾</div>
</div>
<div class="streak-banner">
<div class="streak-fire">🔥</div>
<div class="streak-info">
<h3><span>12 Day</span> Streak!</h3>
<p>Your longest streak was 18 days</p>
</div>
</div>
<div class="chart-card">
<h4>Weekly Volume</h4>
<div class="chart-sub">Total sets completed per week</div>
<div class="bar-chart">
<div class="bar-col">
<div class="bar dim" style="height:40%"></div>
<div class="bar-label">W1</div>
</div>
<div class="bar-col">
<div class="bar dim" style="height:55%"></div>
<div class="bar-label">W2</div>
</div>
<div class="bar-col">
<div class="bar dim" style="height:65%"></div>
<div class="bar-label">W3</div>
</div>
<div class="bar-col">
<div class="bar orange" style="height:82%"></div>
<div class="bar-label">W4</div>
</div>
</div>
</div>
<div class="weekly-rings">
<div class="ring-item">
<div class="mini-ring">
<svg viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="20"/>
<circle class="ring-fill" cx="22" cy="22" r="20" stroke="#6C5CE7" style="stroke-dashoffset: 25.13"/>
</svg>
<div class="ring-text">80%</div>
</div>
<div class="ring-label">Workouts</div>
</div>
<div class="ring-item">
<div class="mini-ring">
<svg viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="20"/>
<circle class="ring-fill" cx="22" cy="22" r="20" stroke="#A78BFA" style="stroke-dashoffset: 37.70"/>
</svg>
<div class="ring-text">70%</div>
</div>
<div class="ring-label">Volume</div>
</div>
<div class="ring-item">
<div class="mini-ring">
<svg viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="20"/>
<circle class="ring-fill" cx="22" cy="22" r="20" stroke="#27AE60" style="stroke-dashoffset: 12.57"/>
</svg>
<div class="ring-text">90%</div>
</div>
<div class="ring-label">Form</div>
</div>
<div class="ring-item">
<div class="mini-ring">
<svg viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="20"/>
<circle class="ring-fill" cx="22" cy="22" r="20" stroke="#6C5CE7" style="stroke-dashoffset: 50.27"/>
</svg>
<div class="ring-text">60%</div>
</div>
<div class="ring-label">Goals</div>
</div>
</div>
<div class="achievements-section">
<h4>Recent Achievements</h4>
<div class="achievement-card">
<div class="ach-icon gold">🏆</div>
<div class="ach-info">
<h5>Iron Consistency</h5>
<p>10 workouts completed in a row</p>
</div>
<div class="ach-date">2 days ago</div>
</div>
<div class="achievement-card">
<div class="ach-icon gold">⚡</div>
<div class="ach-info">
<h5>PR Crusher</h5>
<p>New personal record on Back Squat</p>
</div>
<div class="ach-date">5 days ago</div>
</div>
<div class="achievement-card">
<div class="ach-icon silver">📹</div>
<div class="ach-info">
<h5>Form Check Pro</h5>
<p>Uploaded 5 form check videos</p>
</div>
<div class="ach-date">1 week ago</div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item">
<div class="nav-icon">🏠</div>
<div class="nav-label">Home</div>
</div>
<div class="nav-item">
<div class="nav-icon">📅</div>
<div class="nav-label">Calendar</div>
</div>
<div class="nav-item active">
<div class="nav-icon">📊</div>
<div class="nav-label">Progress</div>
</div>
<div class="nav-item">
<div class="nav-icon">💬</div>
<div class="nav-label">Chat</div>
</div>
<div class="nav-item">
<div class="nav-icon">👤</div>
<div class="nav-label">Profile</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showScreen(name, btn) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.querySelectorAll('.screen-nav button').forEach(b => b.classList.remove('active'));
document.getElementById('screen-' + name).classList.add('active');
btn.classList.add('active');
if (window.__recordEvent) {
window.__recordEvent({ type: 'click', choice: name, text: 'Viewing: ' + name });
}
}
</script>
</body>
</html>
Raw
program-builder-proposals.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Program Builder Improvements — Design Proposals</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #f7f8fa; color: #1a1a1a; }
.header { background: #1A365D; color: white; padding: 32px 40px; text-align: center; }
.header h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.header p { font-size: 15px; opacity: 0.8; max-width: 640px; margin: 0 auto; line-height: 1.5; }
.section { max-width: 1000px; margin: 40px auto; padding: 0 24px; }
.section h2 { font-size: 22px; font-weight: 700; color: #1A365D; margin-bottom: 6px; }
.section .subtitle { font-size: 14px; color: #666; margin-bottom: 24px; line-height: 1.5; }
.change-tag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.change-tag.simple { background: #E8F5E9; color: #2E7D32; }
.change-tag.needs-input { background: #FFF3E0; color: #E65100; }
.screen { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e8ecf0; margin-bottom: 32px; }
.screen-header { background: #f0f2f5; padding: 10px 16px; font-size: 12px; font-weight: 600; color: #666; border-bottom: 1px solid #e8ecf0; display: flex; align-items: center; gap: 8px; }
.screen-header .dot { width: 8px; height: 8px; border-radius: 50%; }
.screen-header .dot.r { background: #ff5f57; }
.screen-header .dot.y { background: #febd2f; }
.screen-header .dot.g { background: #28c840; }
.screen-body { padding: 0; }
.divider { border: none; border-top: 2px dashed #e2e8f0; margin: 48px auto; max-width: 1000px; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .before-after { grid-template-columns: 1fr; } }
.before-after .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.before-after .label.before { color: #999; }
.before-after .label.after { color: #2E7D32; }
.option-card { background: white; border: 2px solid #e2e8f0; border-radius: 16px; overflow: hidden; margin-bottom: 24px; }
.option-card.recommended { border-color: #1A365D; }
.option-header { padding: 16px 20px; border-bottom: 1px solid #e8ecf0; display: flex; justify-content: space-between; align-items: center; }
.option-header h3 { font-size: 17px; font-weight: 700; color: #1A365D; }
.option-badge { padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.option-badge.rec { background: #1A365D; color: white; }
.option-body { padding: 20px; }
.option-desc { font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 16px; }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.pros h4, .cons h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.pros h4 { color: #2E7D32; }
.cons h4 { color: #C62828; }
.pros li, .cons li { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 4px; }
/* Table styles for mockups */
.ex-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ex-table th { text-align: left; padding: 6px 10px; color: #888; font-size: 11px; font-weight: 600; border-bottom: 1px solid #e2e8f0; text-transform: uppercase; letter-spacing: 0.3px; }
.ex-table td { padding: 8px 10px; border-bottom: 1px solid #f0f2f5; }
.ex-table .exercise-name { font-weight: 600; color: #1A365D; }
.ex-table .dim { color: #aaa; }
.ex-table .actions { display: flex; gap: 4px; }
.ex-table .btn-sm { padding: 3px 8px; border-radius: 4px; font-size: 11px; border: none; cursor: pointer; }
.ex-table .btn-edit { background: #f0f2f5; color: #555; }
.ex-table .btn-del { background: #FEE2E2; color: #C62828; }
.block-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f8f9fa; border-bottom: 1px solid #e8ecf0; }
.block-name { font-size: 15px; font-weight: 700; color: #1A365D; }
.block-actions { display: flex; gap: 6px; }
.block-btn { padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; border: none; cursor: pointer; }
.block-btn.remove { background: #C62828; color: white; }
.block-btn.add { background: none; color: #1A365D; border: 1px dashed #1A365D; font-size: 12px; }
.series-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-right: 6px; }
.series-a { background: #E3F2FD; color: #1565C0; }
.series-b { background: #F3E5F5; color: #7B1FA2; }
.series-c { background: #FFF3E0; color: #E65100; }
.series-none { background: #f0f2f5; color: #999; }
.superset-group { border-left: 3px solid; padding-left: 0; margin: 0; }
.superset-group.group-a { border-color: #1565C0; }
.superset-group.group-b { border-color: #7B1FA2; }
.group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px 2px; }
.group-label.a { color: #1565C0; }
.group-label.b { color: #7B1FA2; }
.footer-note { text-align: center; padding: 40px 24px 48px; color: #888; font-size: 13px; }
</style>
</head>
<body>
<div class="header">
<h1>Program Builder Improvements</h1>
<p>Three proposed changes: reorder columns, add superset/triset grouping, and default to 4-week phases.</p>
</div>
<!-- ============================================ -->
<!-- CHANGE 1: COLUMN REORDER -->
<!-- ============================================ -->
<div class="section">
<span class="change-tag simple">Straightforward Change</span>
<h2>Change 1: Move Tempo to End</h2>
<p class="subtitle">Tempo is the least-used column for most exercises. Moving it after Rest keeps the most important data (Sets, Reps, Rest) together and left-aligned where the eye lands first.</p>
<div class="before-after">
<!-- Before -->
<div>
<div class="label before">Before</div>
<div class="screen">
<div class="screen-header"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>Current column order</div>
<div class="screen-body" style="padding:0;">
<div class="block-header">
<span class="block-name">Primary</span>
</div>
<table class="ex-table">
<thead><tr>
<th>Exercise</th><th>Sets</th><th>Reps</th><th style="background:#FFF3E0;">Tempo</th><th>Rest (s)</th><th>Actions</th>
</tr></thead>
<tbody>
<tr><td class="exercise-name">Bench Press</td><td>4</td><td>8</td><td style="background:#FFF8F0;">3-1-1-0</td><td>120</td><td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td></tr>
<tr><td class="exercise-name">Overhead Press</td><td>3</td><td>10</td><td style="background:#FFF8F0;" class="dim">-</td><td>90</td><td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- After -->
<div>
<div class="label after">After</div>
<div class="screen">
<div class="screen-header"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>New column order</div>
<div class="screen-body" style="padding:0;">
<div class="block-header">
<span class="block-name">Primary</span>
</div>
<table class="ex-table">
<thead><tr>
<th>Exercise</th><th>Sets</th><th>Reps</th><th>Rest (s)</th><th style="background:#E8F5E9;">Tempo</th><th>Actions</th>
</tr></thead>
<tbody>
<tr><td class="exercise-name">Bench Press</td><td>4</td><td>8</td><td>120</td><td style="background:#F1F8E9;">3-1-1-0</td><td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td></tr>
<tr><td class="exercise-name">Overhead Press</td><td>3</td><td>10</td><td>90</td><td style="background:#F1F8E9;" class="dim">-</td><td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<hr class="divider">
<!-- ============================================ -->
<!-- CHANGE 2: DEFAULT 4-WEEK PHASE -->
<!-- ============================================ -->
<div class="section">
<span class="change-tag simple">Straightforward Change</span>
<h2>Change 2: Default Phase = 4 Weeks</h2>
<p class="subtitle">Currently defaults to 1 week. A 4-week block is the standard training phase — this saves a step for every new program.</p>
<div class="before-after">
<div>
<div class="label before">Before</div>
<div style="background:white;border:1px solid #e8ecf0;border-radius:12px;padding:20px;font-family:system-ui;">
<label style="font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:4px;">Duration (weeks)</label>
<input style="padding:8px 12px;border:1px solid #cbd5e0;border-radius:7px;font-size:14px;width:80px;text-align:center;" value="1" />
<span style="font-size:12px;color:#aaa;margin-left:8px;">← Default</span>
</div>
</div>
<div>
<div class="label after">After</div>
<div style="background:white;border:1px solid #e8ecf0;border-radius:12px;padding:20px;font-family:system-ui;">
<label style="font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:4px;">Duration (weeks)</label>
<input style="padding:8px 12px;border:1px solid #cbd5e0;border-radius:7px;font-size:14px;width:80px;text-align:center;" value="4" />
<span style="font-size:12px;color:#2E7D32;font-weight:600;margin-left:8px;">← New default</span>
</div>
</div>
</div>
</div>
<hr class="divider">
<!-- ============================================ -->
<!-- CHANGE 3: SUPERSET/TRISET SERIES -->
<!-- ============================================ -->
<div class="section">
<span class="change-tag needs-input">Needs Jason's Input</span>
<h2>Change 3: Superset & Triset Grouping (A/B Series)</h2>
<p class="subtitle">Exercises within a block need to be grouped into series — A1/A2 for supersets, A1/A2/A3 for trisets. Three design options below. Which feels most natural for building programs?</p>
</div>
<!-- OPTION A -->
<div class="section">
<div class="option-card recommended">
<div class="option-header">
<h3>Option A: Series Letter Tags</h3>
<span class="option-badge rec">Recommended</span>
</div>
<div class="option-body">
<p class="option-desc">Each exercise gets an optional series letter (A, B, C...) with an auto-number. Exercises with the same letter are performed together. Exercises without a letter are standalone. Simple dropdown or click-to-assign.</p>
<div class="screen" style="max-width:700px;">
<div class="screen-header"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>Option A: Series tags on each exercise</div>
<div class="screen-body" style="padding:0;">
<div class="block-header">
<span class="block-name">Primary</span>
</div>
<table class="ex-table">
<thead><tr>
<th style="width:40px;"></th><th>Exercise</th><th>Sets</th><th>Reps</th><th>Rest (s)</th><th>Tempo</th><th>Actions</th>
</tr></thead>
<tbody>
<tr>
<td><span class="series-badge series-a">A1</span></td>
<td class="exercise-name">Bench Press</td><td>4</td><td>8</td><td>90</td><td>3-1-1-0</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
<tr>
<td><span class="series-badge series-a">A2</span></td>
<td class="exercise-name">Bent-Over Row</td><td>4</td><td>8</td><td>90</td><td>3-1-1-0</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
<tr style="border-top:2px solid #e2e8f0;">
<td><span class="series-badge series-b">B1</span></td>
<td class="exercise-name">Incline DB Press</td><td>3</td><td>12</td><td>60</td><td class="dim">-</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
<tr>
<td><span class="series-badge series-b">B2</span></td>
<td class="exercise-name">Lateral Raise</td><td>3</td><td>15</td><td>60</td><td class="dim">-</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
<tr>
<td><span class="series-badge series-b">B3</span></td>
<td class="exercise-name">Tricep Pushdown</td><td>3</td><td>12</td><td>60</td><td class="dim">-</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
</tbody>
</table>
<div style="padding:10px 16px;">
<span class="block-btn add">+ Add Exercise</span>
</div>
</div>
</div>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul>
<li>Familiar notation — most trainers already use A1/A2</li>
<li>Flexible — supports supersets, trisets, giant sets</li>
<li>Minimal UI change — just adds a column</li>
<li>Easy to read at a glance</li>
</ul></div>
<div class="cons"><h4>Cons</h4><ul>
<li>Trainer must manually assign letters</li>
<li>Visual grouping relies on sorting</li>
</ul></div>
</div>
</div>
</div>
</div>
<!-- OPTION B -->
<div class="section">
<div class="option-card">
<div class="option-header">
<h3>Option B: Visual Group Containers</h3>
</div>
<div class="option-body">
<p class="option-desc">Exercises are wrapped in visual containers that clearly show which ones are performed together. A "Create Superset" button groups selected exercises. The container shows the series letter and a colored left border.</p>
<div class="screen" style="max-width:700px;">
<div class="screen-header"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>Option B: Visual group containers</div>
<div class="screen-body" style="padding:0;">
<div class="block-header">
<span class="block-name">Primary</span>
</div>
<!-- Group A -->
<div style="margin:12px 12px 0;">
<div style="border:1px solid #BBDEFB;border-radius:10px;overflow:hidden;background:#FAFCFF;">
<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#E3F2FD;">
<span style="font-size:11px;font-weight:700;color:#1565C0;">SUPERSET A</span>
<button style="font-size:10px;color:#1565C0;background:none;border:none;cursor:pointer;">Ungroup</button>
</div>
<table class="ex-table" style="margin:0;">
<tbody>
<tr><td class="exercise-name">Bench Press</td><td>4</td><td>8</td><td>90</td><td>3-1-1-0</td><td class="actions"><span class="btn-sm btn-edit">Edit</span></td></tr>
<tr><td class="exercise-name">Bent-Over Row</td><td>4</td><td>8</td><td>90</td><td>3-1-1-0</td><td class="actions"><span class="btn-sm btn-edit">Edit</span></td></tr>
</tbody>
</table>
</div>
</div>
<!-- Group B -->
<div style="margin:8px 12px;">
<div style="border:1px solid #E1BEE7;border-radius:10px;overflow:hidden;background:#FDFAFF;">
<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#F3E5F5;">
<span style="font-size:11px;font-weight:700;color:#7B1FA2;">TRISET B</span>
<button style="font-size:10px;color:#7B1FA2;background:none;border:none;cursor:pointer;">Ungroup</button>
</div>
<table class="ex-table" style="margin:0;">
<tbody>
<tr><td class="exercise-name">Incline DB Press</td><td>3</td><td>12</td><td>60</td><td class="dim">-</td><td class="actions"><span class="btn-sm btn-edit">Edit</span></td></tr>
<tr><td class="exercise-name">Lateral Raise</td><td>3</td><td>15</td><td>60</td><td class="dim">-</td><td class="actions"><span class="btn-sm btn-edit">Edit</span></td></tr>
<tr><td class="exercise-name">Tricep Pushdown</td><td>3</td><td>12</td><td>60</td><td class="dim">-</td><td class="actions"><span class="btn-sm btn-edit">Edit</span></td></tr>
</tbody>
</table>
</div>
</div>
<div style="padding:10px 16px;">
<span class="block-btn add">+ Add Exercise</span>
<span class="block-btn add" style="margin-left:6px;">+ Create Superset</span>
</div>
</div>
</div>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul>
<li>Very clear visual grouping — impossible to miss</li>
<li>Auto-labels (Superset/Triset) based on count</li>
<li>Ungroup button makes it easy to break apart</li>
</ul></div>
<div class="cons"><h4>Cons</h4><ul>
<li>More complex UI — nested containers</li>
<li>Harder to reorder exercises between groups</li>
<li>Takes more vertical space</li>
</ul></div>
</div>
</div>
</div>
</div>
<!-- OPTION C -->
<div class="section">
<div class="option-card">
<div class="option-header">
<h3>Option C: Inline Tags + Color Bars</h3>
</div>
<div class="option-body">
<p class="option-desc">Hybrid approach: series letter tags like Option A, but with a colored left border to visually connect grouped exercises. Combines the simplicity of tags with the visual clarity of grouping.</p>
<div class="screen" style="max-width:700px;">
<div class="screen-header"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>Option C: Tags with color bars</div>
<div class="screen-body" style="padding:0;">
<div class="block-header">
<span class="block-name">Primary</span>
</div>
<table class="ex-table">
<thead><tr>
<th style="width:40px;"></th><th>Exercise</th><th>Sets</th><th>Reps</th><th>Rest (s)</th><th>Tempo</th><th>Actions</th>
</tr></thead>
<tbody>
<tr style="border-left:3px solid #1565C0;">
<td><span class="series-badge series-a">A1</span></td>
<td class="exercise-name">Bench Press</td><td>4</td><td>8</td><td>90</td><td>3-1-1-0</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
<tr style="border-left:3px solid #1565C0;">
<td><span class="series-badge series-a">A2</span></td>
<td class="exercise-name">Bent-Over Row</td><td>4</td><td>8</td><td>90</td><td>3-1-1-0</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
<tr style="height:6px;"><td colspan="7" style="padding:0;border:none;"></td></tr>
<tr style="border-left:3px solid #7B1FA2;">
<td><span class="series-badge series-b">B1</span></td>
<td class="exercise-name">Incline DB Press</td><td>3</td><td>12</td><td>60</td><td class="dim">-</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
<tr style="border-left:3px solid #7B1FA2;">
<td><span class="series-badge series-b">B2</span></td>
<td class="exercise-name">Lateral Raise</td><td>3</td><td>15</td><td>60</td><td class="dim">-</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
<tr style="border-left:3px solid #7B1FA2;">
<td><span class="series-badge series-b">B3</span></td>
<td class="exercise-name">Tricep Pushdown</td><td>3</td><td>12</td><td>60</td><td class="dim">-</td>
<td class="actions"><span class="btn-sm btn-edit">Edit</span><span class="btn-sm btn-del">Del</span></td>
</tr>
</tbody>
</table>
<div style="padding:10px 16px;">
<span class="block-btn add">+ Add Exercise</span>
</div>
</div>
</div>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul>
<li>Best of both worlds — tags + visual grouping</li>
<li>Clean table layout (no nesting)</li>
<li>Color bars make groups scannable at a glance</li>
<li>Familiar A1/A2 notation</li>
</ul></div>
<div class="cons"><h4>Cons</h4><ul>
<li>Slightly more visual complexity than A alone</li>
<li>Still needs manual letter assignment</li>
</ul></div>
</div>
</div>
</div>
</div>
<!-- TRAINEE VIEW -->
<hr class="divider">
<div class="section">
<h2>How Trainees Would See It</h2>
<p class="subtitle">Regardless of which option we choose, the trainee's daily view would show grouped exercises together with a visual indicator that they're a superset.</p>
<div class="before-after">
<div>
<div class="label before">Current (no grouping)</div>
<div style="max-width:375px;background:white;border-radius:16px;overflow:hidden;border:1px solid #e0e0e0;font-family:system-ui;">
<div style="padding:16px;">
<div style="font-size:11px;color:#888;text-transform:uppercase;font-weight:600;letter-spacing:0.3px;">Primary Block</div>
<div style="margin-top:12px;">
<div style="padding:12px 0;border-bottom:1px solid #f0f2f5;">
<div style="font-size:15px;font-weight:600;color:#1A365D;">Bench Press</div>
<div style="font-size:12px;color:#888;margin-top:2px;">4 × 8 · Rest 90s</div>
</div>
<div style="padding:12px 0;border-bottom:1px solid #f0f2f5;">
<div style="font-size:15px;font-weight:600;color:#1A365D;">Bent-Over Row</div>
<div style="font-size:12px;color:#888;margin-top:2px;">4 × 8 · Rest 90s</div>
</div>
<div style="padding:12px 0;border-bottom:1px solid #f0f2f5;">
<div style="font-size:15px;font-weight:600;color:#1A365D;">Incline DB Press</div>
<div style="font-size:12px;color:#888;margin-top:2px;">3 × 12 · Rest 60s</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="label after">With series grouping</div>
<div style="max-width:375px;background:white;border-radius:16px;overflow:hidden;border:1px solid #e0e0e0;font-family:system-ui;">
<div style="padding:16px;">
<div style="font-size:11px;color:#888;text-transform:uppercase;font-weight:600;letter-spacing:0.3px;">Primary Block</div>
<div style="margin-top:12px;">
<!-- Superset A -->
<div style="border-left:3px solid #1565C0;padding-left:12px;margin-bottom:12px;">
<div style="font-size:10px;font-weight:700;color:#1565C0;margin-bottom:6px;">SUPERSET A</div>
<div style="padding:8px 0;border-bottom:1px solid #f0f2f5;">
<div style="font-size:15px;font-weight:600;color:#1A365D;"><span style="color:#1565C0;margin-right:4px;">A1</span> Bench Press</div>
<div style="font-size:12px;color:#888;margin-top:2px;">4 × 8 · Rest 90s</div>
</div>
<div style="padding:8px 0;">
<div style="font-size:15px;font-weight:600;color:#1A365D;"><span style="color:#1565C0;margin-right:4px;">A2</span> Bent-Over Row</div>
<div style="font-size:12px;color:#888;margin-top:2px;">4 × 8 · Rest 90s</div>
</div>
</div>
<!-- Triset B -->
<div style="border-left:3px solid #7B1FA2;padding-left:12px;">
<div style="font-size:10px;font-weight:700;color:#7B1FA2;margin-bottom:6px;">TRISET B</div>
<div style="padding:8px 0;border-bottom:1px solid #f0f2f5;">
<div style="font-size:15px;font-weight:600;color:#1A365D;"><span style="color:#7B1FA2;margin-right:4px;">B1</span> Incline DB Press</div>
<div style="font-size:12px;color:#888;margin-top:2px;">3 × 12 · Rest 60s</div>
</div>
<div style="padding:8px 0;border-bottom:1px solid #f0f2f5;">
<div style="font-size:15px;font-weight:600;color:#1A365D;"><span style="color:#7B1FA2;margin-right:4px;">B2</span> Lateral Raise</div>
<div style="font-size:12px;color:#888;margin-top:2px;">3 × 15 · Rest 60s</div>
</div>
<div style="padding:8px 0;">
<div style="font-size:15px;font-weight:600;color:#1A365D;"><span style="color:#7B1FA2;margin-right:4px;">B3</span> Tricep Pushdown</div>
<div style="font-size:12px;color:#888;margin-top:2px;">3 × 12 · Rest 60s</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SUMMARY -->
<hr class="divider">
<div class="section">
<h2>Summary</h2>
<div style="background:white;border:1px solid #e8ecf0;border-radius:12px;padding:24px;font-size:14px;line-height:1.6;">
<table style="width:100%;border-collapse:collapse;">
<thead><tr style="border-bottom:2px solid #e2e8f0;">
<th style="text-align:left;padding:8px 12px;font-size:13px;color:#888;">Change</th>
<th style="text-align:left;padding:8px 12px;font-size:13px;color:#888;">Status</th>
<th style="text-align:left;padding:8px 12px;font-size:13px;color:#888;">Impact</th>
</tr></thead>
<tbody>
<tr style="border-bottom:1px solid #f0f2f5;">
<td style="padding:10px 12px;font-weight:600;">Tempo → end of columns</td>
<td style="padding:10px 12px;"><span style="background:#E8F5E9;color:#2E7D32;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;">Ready to build</span></td>
<td style="padding:10px 12px;color:#555;">UI only — reorder table headers and cells</td>
</tr>
<tr style="border-bottom:1px solid #f0f2f5;">
<td style="padding:10px 12px;font-weight:600;">Default phase = 4 weeks</td>
<td style="padding:10px 12px;"><span style="background:#E8F5E9;color:#2E7D32;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;">Ready to build</span></td>
<td style="padding:10px 12px;color:#555;">DB default + UI default value</td>
</tr>
<tr>
<td style="padding:10px 12px;font-weight:600;">A/B series (supersets)</td>
<td style="padding:10px 12px;"><span style="background:#FFF3E0;color:#E65100;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;">Needs Jason's pick</span></td>
<td style="padding:10px 12px;color:#555;">New DB field + UI for trainer & trainee views</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="footer-note">
Program Builder Improvements — Jason Trainer · March 2026
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment