Skip to content

fix(theme): live switch reskins every module + readable accent text #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nseldeib wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(theme): live switch reskins every module + readable accent text #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 175 additions & 0 deletions .codeyam/design/site-redesign/01-gummy-mockup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Otterpace — Gummy</title>
<style>
:root{
--coral:#FF7357; --coral-deep:#ED524A; --cream:#FDF5EE; --lilacbg:#F5F0FA;
--ink:#292B38; --subtle:#6B6F80; --card:#fff; --go:#3DBC7D; --gold:#FACC4D;
--sky:#5B9EED; --lilac:#8C82DC;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,"SF Pro Display","Segoe UI",Roboto,sans-serif;color:var(--ink);
background:linear-gradient(180deg,#FFF3EC 0%,var(--cream) 30%,var(--lilacbg) 100%);
line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}

nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(255,243,236,.72);
border-bottom:1px solid rgba(255,115,87,.12)}
nav .wrap{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand img{width:34px;height:34px;border-radius:11px;box-shadow:0 4px 12px rgba(237,82,74,.28)}
nav .spacer{flex:1}
.navlinks{display:flex;gap:22px;color:var(--subtle);font-weight:600;font-size:15px}
.navlinks a:hover{color:var(--coral-deep)}
.pill-btn{background:var(--coral);color:#fff;font-weight:800;padding:11px 20px;border-radius:16px;
box-shadow:0 8px 18px rgba(237,82,74,.32),inset 0 -3px 0 rgba(0,0,0,.08);font-size:15px}

header.hero{padding:70px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(255,115,87,.25);
color:var(--coral-deep);font-weight:800;font-size:13px;padding:8px 15px;border-radius:100px;
box-shadow:0 6px 16px rgba(237,82,74,.12)}
h1{font-size:56px;line-height:1.04;letter-spacing:-.03em;margin:20px 0 16px;font-weight:850}
h1 .u{color:var(--coral-deep);position:relative}
.lead{font-size:20px;color:#4a4e5e;max-width:30ch}
.cta-row{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.cta-row img{height:52px;width:auto;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
.cta-note{margin-top:14px;color:var(--subtle);font-weight:600;font-size:14px}
.cta-note b{color:var(--go)}

.phone{position:relative;justify-self:center}
.phone img{width:min(280px,72vw);border-radius:38px;box-shadow:0 30px 60px rgba(41,43,56,.22);
border:9px solid #23252f;background:#23252f;display:block}
.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:-1}
.blob.a{width:220px;height:220px;background:radial-gradient(circle,#FFD7C9,transparent 70%);top:-30px;left:-40px}
.blob.b{width:200px;height:200px;background:radial-gradient(circle,#D9D2F5,transparent 70%);bottom:-20px;right:-30px}
.sticker{position:absolute;background:#fff;border-radius:18px;padding:11px 14px;font-weight:800;font-size:14px;
box-shadow:0 12px 26px rgba(41,43,56,.16);display:flex;align-items:center;gap:8px}
.sticker .dot{width:10px;height:10px;border-radius:50%}
.sticker.s1{top:36px;left:-18px}
.sticker.s2{bottom:60px;right:-24px}

section{padding:56px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 34px}
.sec-head h2{font-size:38px;letter-spacing:-.025em;font-weight:850}
.sec-head p{color:var(--subtle);font-size:18px;margin-top:10px}

/* theme gallery */
.themes{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 20px;scroll-snap-type:x mandatory}
.theme-card{scroll-snap-align:center;flex:0 0 auto;text-align:center}
.theme-card img{width:172px;border-radius:26px;border:6px solid #23252f;background:#23252f;
box-shadow:0 18px 36px rgba(41,43,56,.18);display:block}
.theme-card .name{margin-top:12px;font-weight:800;font-size:15px}
.theme-card .chip{font-size:12px;color:#fff;padding:3px 10px;border-radius:100px;display:inline-block;margin-top:4px;font-weight:700}

/* features */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{background:var(--card);border-radius:24px;padding:26px;box-shadow:0 12px 30px rgba(41,43,56,.07);
border:1px solid rgba(41,43,56,.05);transition:transform .18s}
.fcard:hover{transform:translateY(-6px)}
.fcard .emoji{font-size:30px;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
background:#FFF0EA;margin-bottom:14px}
.fcard h3{font-size:19px;letter-spacing:-.01em;margin-bottom:6px}
.fcard p{color:var(--subtle);font-size:15px}

/* buddy band */
.buddy{background:linear-gradient(135deg,#FFE7DE,#F3ECFB);border-radius:34px;padding:44px;display:grid;
grid-template-columns:1fr 1fr;gap:30px;align-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.buddy img{width:min(260px,70vw);border-radius:34px;border:8px solid #23252f;background:#23252f;justify-self:center;
box-shadow:0 22px 44px rgba(41,43,56,.2)}
.buddy h2{font-size:34px;letter-spacing:-.02em}
.buddy p{color:#4a4e5e;font-size:17px;margin-top:12px}
.quote{margin-top:18px;background:#fff;border-radius:18px 18px 18px 4px;padding:16px 18px;font-weight:600;
box-shadow:0 10px 24px rgba(41,43,56,.1);max-width:36ch}

/* final */
.final{text-align:center;background:var(--ink);color:#fff;border-radius:34px;padding:54px 30px;margin-bottom:20px}
.final h2{font-size:40px;letter-spacing:-.03em}
.final p{color:#c8cbd6;margin-top:10px;font-size:18px}
.final .cta-row{justify-content:center}

footer{text-align:center;color:var(--subtle);font-size:14px;padding:36px 0 60px}
footer .built{font-weight:700;color:#4a4e5e}
footer a:hover{color:var(--coral-deep)}
@media(max-width:820px){.hero-grid,.feat,.buddy{grid-template-columns:1fr}.feat{grid-template-columns:1fr 1fr}
h1{font-size:42px}.navlinks{display:none}}
</style>
</head>
<body>
<nav><div class="wrap">
<a class="brand"><img src="shots/icon.png" alt="Otterpace">Otterpace</a>
<div class="spacer"></div>
<div class="navlinks"><a href="#themes">Themes</a><a href="#coach">Coaching</a><a href="#privacy">Privacy</a><a href="#">GitHub</a></div>
<a class="pill-btn" href="#get">Get the app</a>
</div></nav>

<header class="hero"><div class="wrap"><div class="hero-grid">
<div>
<span class="eyebrow">🐾 Available now on the App Store</span>
<h1>A running coach who <span class="u">cheers</span>, never shames.</h1>
<p class="lead">Meet Buddy — a kind, injury-aware otter coach that keeps you moving toward your goal, one gentle nudge at a time.</p>
<div class="cta-row" id="get">
<a href="https://apps.apple.com/us/app/otterpace/id6784287408"><img src="shots/app-store-badge.svg" alt="Download on the App Store"></a>
<a style="cursor:not-allowed;opacity:.85"><img src="shots/play-badge-soon.svg" alt="Coming soon to Google Play"></a>
</div>
<div class="cta-note"><b>Free</b> · No accounts · Your health data never leaves your phone · Android <b>coming!</b></div>
</div>
<div class="phone">
<div class="blob a"></div><div class="blob b"></div>
<div class="sticker s1"><span class="dot" style="background:var(--go)"></span>Goal crushed</div>
<div class="sticker s2"><span class="dot" style="background:var(--coral)"></span>Buddy is proud</div>
<img src="shots/shot-otter.png" alt="Otterpace Today screen">
</div>
</div></div></header>

<section id="themes"><div class="wrap">
<div class="sec-head"><h2>One app. Five whole looks.</h2><p>Pick a design that feels like you — the entire app re-skins, mascot and all. Change it anytime.</p></div>
<div class="themes">
<div class="theme-card"><img src="shots/shot-otter.png" alt="Otter theme"><div class="name">Otter</div><span class="chip" style="background:var(--coral)">Warm &amp; friendly</span></div>
<div class="theme-card"><img src="shots/shot-bolt.png" alt="Bolt theme"><div class="name">Bolt</div><span class="chip" style="background:#17B7A6">Dark &amp; focused</span></div>
<div class="theme-card"><img src="shots/shot-orbit.png" alt="Orbit theme"><div class="name">Orbit</div><span class="chip" style="background:#3E7CA8">Cool &amp; cosmic</span></div>
<div class="theme-card"><img src="shots/shot-fieldnote.png" alt="Fieldnote theme"><div class="name">Fieldnote</div><span class="chip" style="background:#1F7E8C">Warm analog</span></div>
<div class="theme-card"><img src="shots/shot-garden.png" alt="Garden theme"><div class="name">Garden</div><span class="chip" style="background:#4E6B54">Quiet &amp; natural</span></div>
</div>
</div></section>

<section><div class="wrap">
<div class="sec-head"><h2>Coaching that's actually kind</h2><p>Practical, injury-aware guidance — no diagnoses, no shame, no nagging.</p></div>
<div class="feat">
<div class="fcard"><div class="emoji">🩺</div><h3>Injury-aware</h3><p>Backs off when your training load spikes. Sensible run/rest calls, never a diagnosis.</p></div>
<div class="fcard"><div class="emoji">💬</div><h3>Ask Buddy anything</h3><p>Conversational coaching that answers in plain language. Works offline; smarter with your own AI key.</p></div>
<div class="fcard"><div class="emoji">👟</div><h3>Gentle daily nudges</h3><p>Move toward your step goal with reminders that encourage — never guilt-trip.</p></div>
<div class="fcard"><div class="emoji">📅</div><h3>Weekly review</h3><p>What went well, what changed, and one kind focus for next week.</p></div>
<div class="fcard"><div class="emoji">🔒</div><h3>On-device &amp; private</h3><p>Apple Health is read on your phone and never uploaded. No accounts, no ads, no data sold.</p></div>
<div class="fcard"><div class="emoji">💛</div><h3>Open source</h3><p>Built in the open as a CodeYam showcase — check the code yourself.</p></div>
</div>
</div></section>

<section id="coach"><div class="wrap"><div class="buddy">
<div>
<h2>Say hi to Buddy.</h2>
<p>Buddy reads your steps, runs and rest days, then coaches you like a friend who wants you healthy for the long run.</p>
<div class="quote">“You blew past your step goal today 🎉 Tomorrow, keep it easy — a relaxed walk lets today settle in.”</div>
</div>
<img src="shots/shot-otter.png" alt="Buddy coaching card">
</div></div></section>

<section id="privacy"><div class="wrap"><div class="final">
<h2>Start moving with Buddy.</h2>
<p>Otterpace 1.0 is live on the App Store. Android is on the way.</p>
<div class="cta-row">
<a href="https://apps.apple.com/us/app/otterpace/id6784287408"><img src="shots/app-store-badge.svg" alt="Download on the App Store"></a>
<a style="cursor:not-allowed"><img src="shots/play-badge-soon.svg" alt="Coming soon to Google Play"></a>
</div>
</div></div></section>

<footer><div class="wrap">
<div class="built">Open source · Built with 💛 and CodeYam</div>
<div style="margin-top:8px">github.com/nseldeib/otterpace · hello@otterpace.com · Privacy Policy</div>
</div></footer>
</body></html>
129 changes: 129 additions & 0 deletions .codeyam/design/site-redesign/02-editorial-mockup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Otterpace — Editorial</title>
<style>
:root{--ink:#1c1d24;--paper:#F6F1E9;--paper2:#EFE7DA;--coral:#E0523F;--rule:#d8cdb9;--muted:#6f6a5f}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
-webkit-font-smoothing:antialiased;line-height:1.5}
.sans{font-family:-apple-system,"SF Pro Text","Segoe UI",sans-serif}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}

.masthead{border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:40}
.masthead .wrap{display:flex;align-items:center;height:64px;gap:16px}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:22px;letter-spacing:.02em}
.logo img{width:30px;height:30px;border-radius:8px}
.masthead .meta{margin-left:auto;font-family:-apple-system,sans-serif;font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);display:flex;gap:22px}
.masthead .meta a:hover{color:var(--coral)}

.kicker{font-family:-apple-system,sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
color:var(--coral);font-weight:700}

header{padding:64px 0 20px;border-bottom:1px solid var(--rule)}
header .top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
h1{font-size:88px;line-height:.94;letter-spacing:-.02em;font-weight:600;margin:22px 0 0;max-width:14ch}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:end;margin-top:26px}
.dek{font-size:22px;line-height:1.45;color:#3a382f;max-width:34ch}
.dek .drop{float:left;font-size:74px;line-height:.72;padding:8px 10px 0 0;color:var(--coral);font-weight:600}
.byline{font-family:-apple-system,sans-serif;font-size:13px;color:var(--muted);margin-top:22px;letter-spacing:.02em}
.badges{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.badges img{height:46px;width:auto;display:block}
.heroimg{align-self:stretch;position:relative}
.heroimg img{width:100%;max-width:250px;display:block;margin:0 auto;border:1px solid var(--rule);
box-shadow:0 24px 50px rgba(28,29,36,.16);background:#23252f;border-radius:4px}
.cap{font-family:-apple-system,sans-serif;font-size:11px;color:var(--muted);text-align:center;margin-top:10px;letter-spacing:.04em}

section{padding:56px 0;border-bottom:1px solid var(--rule)}
.sec-title{font-size:13px;font-family:-apple-system,sans-serif;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);display:flex;align-items:center;gap:14px;margin-bottom:30px}
.sec-title::after{content:"";flex:1;height:1px;background:var(--rule)}
.sec-title b{color:var(--ink);font-weight:700}

/* lookbook */
.look{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.look figure{text-align:center}
.look img{width:100%;border:1px solid var(--rule);background:#23252f;display:block;border-radius:3px;
box-shadow:0 12px 26px rgba(28,29,36,.12)}
.look figcaption{font-family:-apple-system,sans-serif;margin-top:12px}
.look .n{font-size:11px;color:var(--muted);letter-spacing:.16em}
.look .nm{font-weight:700;font-size:16px;font-family:"Iowan Old Style",Georgia,serif}
.look .ds{font-size:12px;color:var(--muted)}
.look-intro{font-size:26px;max-width:40ch;margin-bottom:26px;line-height:1.4}

/* feature index */
.idx{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.idx .item{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--rule);align-items:baseline}
.idx .num{font-size:15px;color:var(--coral);font-family:-apple-system,sans-serif;font-weight:700}
.idx h3{font-size:23px;font-weight:600;letter-spacing:-.01em}
.idx p{font-family:-apple-system,sans-serif;font-size:15px;color:var(--muted);margin-top:5px;line-height:1.5}

.pull{font-size:34px;line-height:1.35;letter-spacing:-.01em;max-width:24ch;margin:0 auto;text-align:center}
.pull b{color:var(--coral)}

footer{padding:44px 0 64px;font-family:-apple-system,sans-serif}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);align-items:center}
footer b{color:var(--ink)}
@media(max-width:860px){h1{font-size:52px}.hero-grid,.idx{grid-template-columns:1fr}.look{grid-template-columns:1fr 1fr 1fr}.masthead .meta{display:none}}
</style>
</head>
<body>
<div class="masthead"><div class="wrap">
<a class="logo"><img src="shots/icon.png" alt="">OTTERPACE</a>
<nav class="meta"><a href="#field">The Themes</a><a href="#coach">The Coach</a><a href="#ethos">Ethos</a><a href="#get">Get It</a></nav>
</div></div>

<header><div class="wrap">
<div class="top"><span class="kicker">Now available on the App Store · No. 001</span><span class="kicker" style="color:var(--muted)">iPhone · Android coming</span></div>
<h1>A kinder way to keep running.</h1>
<div class="hero-grid">
<div>
<p class="dek"><span class="drop">M</span>eet Buddy — an injury-aware otter coach that reads your steps and runs, then guides you like a friend who wants you healthy for the long haul. No diagnoses. No shame. Five whole-app looks to make it yours.</p>
<div class="badges" id="get">
<a href="https://apps.apple.com/us/app/otterpace/id6784287408"><img src="shots/app-store-badge.svg" alt="Download on the App Store"></a>
<a style="cursor:not-allowed"><img src="shots/play-badge-soon.svg" alt="Coming soon to Google Play"></a>
</div>
<div class="byline">Free · Privacy-first · Apple Health stays on your device · Open source</div>
</div>
<figure class="heroimg"><img src="shots/shot-otter.png" alt="Otterpace Today"><figcaption class="cap">Fig. 1 — Today, in the Otter look</figcaption></figure>
</div>
</div></header>

<section id="field"><div class="wrap">
<div class="sec-title"><b>The Collection</b> — five whole-app themes</div>
<p class="look-intro">Otterpace ships as one app in five complete identities — colors, type and mascot all shift together. Wear the one that fits your mood.</p>
<div class="look">
<figure><img src="shots/shot-otter.png" alt="Otter"><figcaption><div class="n">Nº 01</div><div class="nm">Otter</div><div class="ds">Warm &amp; friendly</div></figcaption></figure>
<figure><img src="shots/shot-bolt.png" alt="Bolt"><figcaption><div class="n">Nº 02</div><div class="nm">Bolt</div><div class="ds">Dark &amp; focused</div></figcaption></figure>
<figure><img src="shots/shot-orbit.png" alt="Orbit"><figcaption><div class="n">Nº 03</div><div class="nm">Orbit</div><div class="ds">Cool &amp; cosmic</div></figcaption></figure>
<figure><img src="shots/shot-fieldnote.png" alt="Fieldnote"><figcaption><div class="n">Nº 04</div><div class="nm">Fieldnote</div><div class="ds">Warm analog</div></figcaption></figure>
<figure><img src="shots/shot-garden.png" alt="Garden"><figcaption><div class="n">Nº 05</div><div class="nm">Garden</div><div class="ds">Quiet &amp; natural</div></figcaption></figure>
</div>
</div></section>

<section id="ethos"><div class="wrap">
<p class="pull">“A coach should back off when you’re tired, cheer when you win, and <b>never make you feel bad</b> for a rest day.”</p>
</div></section>

<section id="coach"><div class="wrap">
<div class="sec-title"><b>The Features</b> — what Buddy does</div>
<div class="idx">
<div class="item"><div class="num">01</div><div><h3>Injury-aware coaching</h3><p>Practical run/rest guidance that eases off when your training load spikes.</p></div></div>
<div class="item"><div class="num">02</div><div><h3>Ask Buddy anything</h3><p>Conversational answers in plain language. Works offline; smarter with your own AI key.</p></div></div>
<div class="item"><div class="num">03</div><div><h3>Gentle daily nudges</h3><p>Move toward your step goal with reminders that encourage, not scold.</p></div></div>
<div class="item"><div class="num">04</div><div><h3>Weekly review</h3><p>What went well, what changed, and one kind focus for the week ahead.</p></div></div>
<div class="item"><div class="num">05</div><div><h3>On-device &amp; private</h3><p>Apple Health read locally, never uploaded. No accounts, no ads, no data sold.</p></div></div>
<div class="item"><div class="num">06</div><div><h3>Open source</h3><p>Built in the open as a CodeYam showcase — read every line.</p></div></div>
</div>
</div></section>

<footer><div class="wrap">
<div><b>Otterpace</b> — a friendly AI running coach · Open source · Built with 💛 and CodeYam</div>
<div>github.com/nseldeib/otterpace · hello@otterpace.com · Privacy</div>
</div></footer>
</body></html>
Loading