{"tool":"get_design","slug":"pulse-fitness","title":"Pulse Fitness — Fitness App Landing","url":"/pulse-fitness","kind":"Live website","code":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Pulse Fitness — Fitness App Landing</title>\n<!--\nDIRECTION: A calm, focused fitness-app landing page that helps a visitor land, pick a plan, start a trial, and track a workout, with no clutter.\nPALETTE: background, surface, text, muted, border, primary — frozen in the :root block below, no other colours used.\nTYPE ROLES: display = Archivo, body = Inter, mono = none (not in spec, not used).\nLAYOUT: single column on phone, two columns for plans on tablet, three columns for plans/pricing on desktop, 1120px max width.\nMOTION: transform/opacity only, 200ms, on hover/focus and on the workout tracker reveal.\nONE THING TO AVOID: generic gym hype, fake screenshots, and any second accent colour.\nFLOW: Land -> Pick plan -> Start trial -> Track workout.\nNOTE: All interactions on this page are in-page only. Picking a plan updates the trial button and tracker; starting a trial reveals the workout tracker below. No account is created and no workout data leaves this page.\n-->\n<style>\n:root{\n  --color-bg:#F2F7F2;\n  --color-surface:#FFFFFF;\n  --color-text:#0E241A;\n  --color-muted:#4A5D52;\n  --color-border:#C8D8CE;\n  --color-primary:#1F7A4D;\n  --space-1:8px;\n  --space-2:16px;\n  --space-3:24px;\n  --space-4:32px;\n  --space-8:64px;\n  --radius:16px;\n}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{margin:0;background:var(--color-bg);color:var(--color-text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:17px;line-height:1.6}\nh1,h2,h3{font-family:Archivo,Inter,system-ui,sans-serif;line-height:1.15;margin:0 0 var(--space-2)}\np{margin:0 0 var(--space-2);color:var(--color-muted)}\na{color:var(--color-primary)}\n.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-2)}\nsection{padding:var(--space-8) 0}\nbutton,.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);padding:12px var(--space-3);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:transform 200ms,opacity 200ms}\nbutton:hover,.btn:hover{transform:translateY(-1px)}\n.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-surface)}\n.btn-primary:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--color-text);outline-offset:3px}\n.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2)}\n/* Nav */\nnav{background:var(--color-surface);border-bottom:1px solid var(--color-border)}\n.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding-top:var(--space-2);padding-bottom:var(--space-2);flex-wrap:wrap}\n.brand{font-family:Archivo,Inter,sans-serif;font-size:24px;font-weight:800;color:var(--color-text);text-decoration:none}\n.nav-links{display:flex;gap:var(--space-1);flex-wrap:wrap}\n.nav-links a{min-height:44px;display:inline-flex;align-items:center;padding:8px 12px;color:var(--color-text);text-decoration:none;font-weight:600}\n/* Hero */\n.hero h1{font-size:40px}\n.hero-grid{display:grid;gap:var(--space-4)}\n.hero-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-3)}\n.hero-card strong{font-size:32px;font-family:Archivo,Inter,sans-serif}\n.stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-2);margin-top:var(--space-3)}\n.stat{border-top:1px solid var(--color-border);padding-top:var(--space-2)}\n.stat b{display:block;font-size:20px}\n.stat span{color:var(--color-muted);font-size:15px}\n/* Cards / grids */\n.grid{display:grid;gap:var(--space-3)}\n.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-3)}\n.card.selected{border:2px solid var(--color-primary)}\n.card ul{margin:var(--space-2) 0;padding-left:20px;color:var(--color-muted)}\n.card li{margin-bottom:var(--space-1)}\n.price{font-family:Archivo,Inter,sans-serif;font-size:36px;font-weight:800;margin:var(--space-2) 0 0}\n.price span{font-size:16px;color:var(--color-muted);font-weight:400}\n.tag{display:inline-block;background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700;margin-bottom:var(--space-2)}\nblockquote{margin:0}\nblockquote p{color:var(--color-text);font-size:19px}\ncite{color:var(--color-muted);font-style:normal}\n/* Tracker */\n#tracker{display:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-3);margin-top:var(--space-3)}\n#tracker.open{display:block}\n.check-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-border);min-height:44px}\n.check-row:last-child{border-bottom:0}\n.check-row input{width:24px;height:24px;accent-color:var(--color-primary);flex-shrink:0;margin-top:2px}\n.check-row.done label{text-decoration:line-through;color:var(--color-muted)}\n#trial-status{font-weight:700;color:var(--color-primary)}\n/* CTA + footer */\n.cta{background:var(--color-text);color:var(--color-surface);border-radius:var(--radius);padding:var(--space-4)}\n.cta h2{color:var(--color-surface)}\n.cta p{color:var(--color-surface)}\nfooter{border-top:1px solid var(--color-border);padding:var(--space-4) 0 var(--space-8);color:var(--color-muted)}\nfooter p{font-size:15px}\n@media(min-width:720px){\n  .hero h1{font-size:56px}\n  .grid.two{grid-template-columns:1fr 1fr}\n  .hero-grid{grid-template-columns:1.2fr .8fr;align-items:start}\n}\n@media(min-width:1024px){\n  .grid.three{grid-template-columns:1fr 1fr 1fr}\n  .wrap{padding:0 var(--space-4)}\n}\n</style>\n</head>\n<body>\n<nav aria-label=\"Main navigation\">\n  <div class=\"wrap nav-inner\">\n    <a class=\"brand\" href=\"#top\">Pulse Fitness</a>\n    <div class=\"nav-links\">\n      <a href=\"#plans\">Workout plans</a>\n      <a href=\"#pricing\">Pricing</a>\n    </div>\n    <a class=\"btn btn-primary\" href=\"#pricing\">Start free trial</a>\n  </div>\n</nav>\n\n<main id=\"top\">\n  <!-- HERO: Land -->\n  <section class=\"hero\" aria-labelledby=\"hero-title\">\n    <div class=\"wrap hero-grid\">\n      <div>\n        <p class=\"eyebrow\">Train steady. Track honestly.</p>\n        <h1 id=\"hero-title\">Fitness that fits your week, not the other way round.</h1>\n        <p>Pick a plan, start a free trial, and track each workout in one calm place — strength, cardio, and mobility, without the noise.</p>\n        <p>\n          <a class=\"btn btn-primary\" href=\"#plans\">Pick your plan</a>\n          <a class=\"btn\" href=\"#pricing\">See pricing</a>\n        </p>\n        <p id=\"trial-status\" aria-live=\"polite\"></p>\n      </div>\n      <div class=\"hero-card\" aria-label=\"At a glance\">\n        <strong>3 plans</strong>\n        <p>Beginner, balanced, and strength-focused. Every plan lists exactly what a week includes before you commit.</p>\n        <div class=\"stat-row\">\n          <div class=\"stat\"><b>4×</b><span>workouts a week, max</span></div>\n          <div class=\"stat\"><b>30 min</b><span>typical session</span></div>\n          <div class=\"stat\"><b>7 days</b><span>free trial</span></div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- WORKOUT PLANS: Pick plan -->\n  <section id=\"plans\" aria-labelledby=\"plans-title\">\n    <div class=\"wrap\">\n      <p class=\"eyebrow\">Step 1 — Pick a plan</p>\n      <h2 id=\"plans-title\">Workout plans</h2>\n      <p>Choose one. Your choice updates the trial button and the workout tracker below, so you can see exactly what you would track.</p>\n      <div class=\"grid three\" role=\"group\" aria-label=\"Workout plans\">\n        <article class=\"card\" id=\"plan-starter\">\n          <span class=\"tag\">Starter</span>\n          <h3>Start Moving</h3>\n          <p>For getting back into a routine. Low impact, clear instructions, no equipment needed.</p>\n          <ul><li>3 sessions a week</li><li>Bodyweight + walking</li><li>Guided warm-ups</li></ul>\n          <button type=\"button\" data-plan=\"Start Moving\">Select Start Moving</button>\n        </article>\n        <article class=\"card\" id=\"plan-balanced\">\n          <span class=\"tag\">Most popular</span>\n          <h3>Balanced Week</h3>\n          <p>Strength, cardio, and mobility in one week, with rest days built in.</p>\n          <ul><li>4 sessions a week</li><li>Strength + cardio + mobility</li><li>Progress check-ins</li></ul>\n          <button type=\"button\" data-plan=\"Balanced Week\">Select Balanced Week</button>\n        </article>\n        <article class=\"card\" id=\"plan-strength\">\n          <span class=\"tag\">Advanced</span>\n          <h3>Build Strength</h3>\n          <p>Progressive strength training for people who already train regularly.</p>\n          <ul><li>4 sessions a week</li><li>Progressive overload plan</li><li>Form cues for main lifts</li></ul>\n          <button type=\"button\" data-plan=\"Build Strength\">Select Build Strength</button>\n        </article>\n      </div>\n    </div>\n  </section>\n\n  <!-- PRICING: Start trial -->\n  <section id=\"pricing\" aria-labelledby=\"pricing-title\">\n    <div class=\"wrap\">\n      <p class=\"eyebrow\">Step 2 — Start trial</p>\n      <h2 id=\"pricing-title\">Pricing tiers</h2>\n      <p>Every tier starts with a 7-day free trial. No payment details are collected on this page.</p>\n      <div class=\"grid three\">\n        <article class=\"card\">\n          <h3>Basic</h3>\n          <p class=\"price\">$0<span> / month after trial</span></p>\n          <ul><li>Starter plan only</li><li>Workout tracker</li><li>Weekly reminder</li></ul>\n          <button type=\"button\" class=\"trial-btn\" data-tier=\"Basic\">Start trial — Basic</button>\n        </article>\n        <article class=\"card selected\">\n          <h3>Plus</h3>\n          <p class=\"price\">$9<span> / month after trial</span></p>\n          <ul><li>All three workout plans</li><li>Workout tracker + history</li><li>Progress check-ins</li></ul>\n          <button type=\"button\" class=\"btn-primary trial-btn\" data-tier=\"Plus\">Start trial — Plus</button>\n        </article>\n        <article class=\"card\">\n          <h3>Pro</h3>\n          <p class=\"price\">$19<span> / month after trial</span></p>\n          <ul><li>Everything in Plus</li><li>Personalised weekly adjustments</li><li>Priority support</li></ul>\n          <button type=\"button\" class=\"trial-btn\" data-tier=\"Pro\">Start trial — Pro</button>\n        </article>\n      </div>\n\n      <!-- TRACK WORKOUT: revealed by Start trial, in-page only -->\n      <div id=\"tracker\" aria-live=\"polite\">\n        <h3>Track your workout</h3>\n        <p id=\"tracker-plan\">Pick a plan above, then tick off each part as you finish it. This tracker stays on this page.</p>\n        <div class=\"check-row\"><input type=\"checkbox\" id=\"w1\"><label for=\"w1\">Warm-up — 5 minutes, easy movement</label></div>\n        <div class=\"check-row\"><input type=\"checkbox\" id=\"w2\"><label for=\"w2\">Main workout — follow your selected plan</label></div>\n        <div class=\"check-row\"><input type=\"checkbox\" id=\"w3\"><label for=\"w3\">Cool-down and stretch — 5 minutes</label></div>\n        <p id=\"tracker-progress\">0 of 3 parts complete.</p>\n      </div>\n    </div>\n  </section>\n\n  <!-- CTA -->\n  <section aria-labelledby=\"cta-title\">\n    <div class=\"wrap\">\n      <div class=\"cta\">\n        <h2 id=\"cta-title\">Start with one workout this week.</h2>\n        <p>Pick a plan, start your 7-day trial, and track that first session below — right here, with no sign-up form on this page.</p>\n        <p><a class=\"btn btn-primary\" href=\"#plans\">Pick your plan</a></p>\n      </div>\n    </div>\n  </section>\n</main>\n\n<footer>\n  <div class=\"wrap\">\n    <p><strong>Pulse Fitness</strong> — built with skill A: BITON Frontend Skill, from the supplied Pulse Fitness spec. Palette: background, surface, text, muted, border, primary — frozen in the :root block at the top of this file. MCP not live yet — built from the supplied spec.</p>\n    <p>No account, payment, or workout data is collected by this page.</p>\n  </div>\n</footer>\n\n<script>\nlet selectedPlan = 'Balanced Week';\nconst status = document.getElementById('trial-status');\nconst tracker = document.getElementById('tracker');\nconst trackerPlan = document.getElementById('tracker-plan');\nconst progress = document.getElementById('tracker-progress');\ndocument.querySelectorAll('[data-plan]').forEach(function(btn){\n  btn.addEventListener('click', function(){\n    selectedPlan = btn.getAttribute('data-plan');\n    document.querySelectorAll('[data-plan]').forEach(function(b){ b.closest('.card').classList.remove('selected'); });\n    btn.closest('.card').classList.add('selected');\n    status.textContent = 'Selected plan: ' + selectedPlan + '. Now start a trial below to open your tracker.';\n    trackerPlan.textContent = 'Tracking: ' + selectedPlan + '. Tick off each part as you finish it. This tracker stays on this page.';\n    document.getElementById('plans').scrollIntoView({behavior:'smooth'});\n  });\n});\ndocument.querySelectorAll('.trial-btn').forEach(function(btn){\n  btn.addEventListener('click', function(){\n    tracker.classList.add('open');\n    status.textContent = 'Trial started (in-page demo): ' + btn.getAttribute('data-tier') + ' tier, ' + selectedPlan + ' plan. Your tracker is open below.';\n    trackerPlan.textContent = 'Tracking: ' + selectedPlan + ' (' + btn.getAttribute('data-tier') + ' trial). Tick off each part as you finish it.';\n    tracker.scrollIntoView({behavior:'smooth'});\n  });\n});\nfunction updateProgress(){\n  const boxes = tracker.querySelectorAll('input[type=\"checkbox\"]');\n  let done = 0;\n  boxes.forEach(function(box){\n    box.closest('.check-row').classList.toggle('done', box.checked);\n    if(box.checked) done++;\n  });\n  progress.textContent = done + ' of ' + boxes.length + ' parts complete.';\n}\ntracker.querySelectorAll('input[type=\"checkbox\"]').forEach(function(box){ box.addEventListener('change', updateProgress); });\n</script>\n</body>\n</html>\n","code_bytes":14092}