23 lines
18 KiB
HTML
23 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Stride · Navigation concepts</title>
|
||
<style>
|
||
*{box-sizing:border-box}body{margin:0;background:#101416;color:#eeeae4;font:14px "Segoe UI",sans-serif}button,select{font:inherit;color:inherit;cursor:pointer}button{border:0}a{color:inherit;text-decoration:none}.studio{background:#22282b;padding:18px 5%;border-bottom:1px solid #41484a}.studio-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.studio h1{font-size:18px;margin:0 0 4px}.studio p{margin:0;color:#aeb8bb;font-size:12px}.controls{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.controls button,.view button{background:#30383b;padding:9px 13px;border-radius:5px;color:#b7c1c3}.controls button.active,.view button.active{background:#ff956a;color:#171b1d}.view{display:flex;gap:5px}.concept-note{display:flex;gap:16px;align-items:center;padding:18px 5%;background:#181d20;color:#aeb8bb;font-size:13px;line-height:1.6}.concept-note strong{color:#eeeae4;white-space:nowrap}.shell{max-width:1320px;margin:auto;padding:0 40px 40px}.header{height:90px;display:flex;align-items:center;gap:36px;border-bottom:1px solid #303638}.logo{font-size:29px;font-weight:750;letter-spacing:-1.5px;display:flex;align-items:center;gap:9px}.logo b{font-size:27px;background:#ff8659;color:#161a1c;border-radius:5px;width:32px;height:32px;text-align:center;font-style:italic}.logo i{color:#ff8659;font-style:normal}.nav{display:flex;gap:28px;height:100%;align-items:center}.nav button{background:none;color:#aab5b7;height:100%;position:relative;padding:0}.nav button.current{color:#eeeae4}.nav button.current:after{content:"";height:2px;background:#ff956a;position:absolute;bottom:0;left:0;right:0}.header-tools{margin-left:auto;display:flex;align-items:center;gap:12px}.primary{background:#ff8659;color:#161a1c;border-radius:5px;padding:11px 16px;font-weight:600;font-size:12px}.avatar{border:1px solid #4b5154;background:#302924;border-radius:50%;width:35px;height:35px;color:#ffc6ab}.secondary{background:#242b2e;color:#c9d0d1;border:1px solid #3b4549;border-radius:5px;padding:10px 14px}.runner-picker{position:relative}.picker-button{background:#242b2e;border:1px solid #3b4549;border-radius:6px;padding:10px 15px}.popup{position:absolute;top:48px;right:0;width:245px;background:#242b2e;border:1px solid #485154;padding:8px;border-radius:8px;z-index:4;box-shadow:0 10px 40px #0008}.popup button{display:block;width:100%;background:none;text-align:left;padding:11px;border-radius:4px}.popup button:hover{background:#343d40}.popup small{display:block;color:#aab5b7;margin-top:3px}.intro{display:flex;justify-content:space-between;align-items:center;margin:30px 0 22px}.intro h2{font-size:33px;letter-spacing:-1px;margin:0 0 6px}.intro p{color:#a0aaac;margin:0;font-size:13px}.tag{display:inline-flex;align-items:center;gap:6px;color:#b8cbbb;background:#202b25;border:1px solid #3f5145;border-radius:5px;font-size:11px;padding:7px 10px}.back{color:#f3ad8d;font-size:12px;display:inline-block;margin-bottom:12px;background:none;padding:0}.route{height:230px;border:1px solid #30383b;background:#181f22;border-radius:8px;position:relative;overflow:hidden}.route svg{width:100%;height:100%;position:absolute;inset:0}.route-label{position:relative;padding:25px;max-width:45%;z-index:1}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#a0aaac;margin-bottom:12px}.route h3{font-size:28px;margin:0 0 12px;font-weight:600}.route p{color:#aab5b7;font-size:12px}.route a{color:#f3ad8d;font-size:12px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.stat{padding:19px 21px;background:#1a1f22;border:1px solid #303638;border-radius:7px}.stat:first-child{background:#24211f;border-color:#72503e}.stat strong{display:block;font-size:32px;font-weight:500;margin-top:8px;letter-spacing:-1px}.stat:first-child strong{color:#ff9a74}.stat small{font-size:12px;color:#a8b2b4;margin-left:5px;letter-spacing:0}.stat p{font-size:11px;color:#9ea9ac;margin:5px 0 0}.chart-panel{display:grid;grid-template-columns:3fr 1fr;gap:16px}.panel{border:1px solid #303638;border-radius:7px;background:#1a1f22;padding:20px 23px}.panel h3{margin:0;font-size:17px;font-weight:600}.panel-head{display:flex;justify-content:space-between}.panel-head span{font-size:11px;color:#a0aaac}.bars{height:120px;display:flex;align-items:end;gap:7%;padding:12px 15px 0;border-bottom:1px solid #485154;margin-top:10px}.bars i{flex:1;background:#596367}.bars i:last-child{background:#ff956a}.axis{display:flex;justify-content:space-around;font-size:9px;color:#a0aaac;margin:9px 0 0}.ascent strong{font-weight:400;font-size:40px;color:#ff9a74;display:block;margin-top:8px}.ascent svg{width:100%;height:40px;margin-top:15px}.badges{display:flex;flex-wrap:wrap;gap:8px;margin:21px 0}.badge{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid #886b34;border-radius:6px;background:#30291e;font-size:12px}.badge em{color:#f3cb78;font-style:normal;font-size:11px}.badge strong{font-size:15px}.badge small{font-size:10px;font-weight:400}.history{padding:0;overflow:hidden}.history .panel-head{padding:20px 23px}.row{display:grid;grid-template-columns:minmax(160px,3fr) 1fr 1fr 1fr 1fr;gap:12px;padding:17px 23px;border-top:1px solid #303638;align-items:center;font-size:12px}.row small{display:block;color:#9ea9ac;font-size:10px;margin-top:5px}.row.head{font-size:9px;color:#a0aaac;letter-spacing:1px;padding:10px 23px}.visibility{font-size:10px;background:#29342d;color:#bdd0bd;border:1px solid #3a4a40;border-radius:4px;padding:4px 8px;width:max-content}.private{background:#272c30;color:#b2bbbd;border-color:#41494d}.friends-page{display:none;padding:32px 0}.friends-heading{display:flex;justify-content:space-between;align-items:center}.friend-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.friend-card{background:#1a1f22;border:1px solid #3c4548;border-radius:8px;text-align:left;padding:24px;cursor:pointer}.friend-card h3{font-size:19px;margin:14px 0 5px}.friend-card p{color:#a0aaac;font-size:12px;margin:0 0 22px}.friend-card span{color:#f3ad8d;font-size:12px}.account-menu{position:relative}.account-menu .popup{top:45px}.mobile-nav{display:none}.minimal .header{height:75px}.minimal .nav{margin-left:auto}.minimal .header-tools{margin-left:0}.minimal .nav{gap:16px}.minimal .nav button.current:after{display:none}.minimal .nav button{padding:9px 12px;height:auto;border-radius:5px}.minimal .nav button.current{background:#292f32}.runner-mode .nav{display:none}.runner-mode .header-tools{gap:16px}.runner-mode .header{height:80px}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:2px solid #ff956a;outline-offset:4px}
|
||
@media(max-width:700px){.studio{padding:16px}.studio-top{align-items:start;flex-direction:column;gap:12px}.concept-note{padding:14px 16px;display:block}.concept-note strong{display:block}.shell{padding:0 16px 25px}.header{height:72px;gap:20px}.logo{font-size:23px}.logo b{width:28px;height:28px;font-size:23px}.nav{gap:16px}.header-tools .primary{display:none}.header-tools{gap:7px}.intro h2{font-size:28px}.intro{align-items:start}.tag{font-size:10px}.stats{grid-template-columns:repeat(2,1fr);gap:10px}.stat{padding:15px}.stat strong{font-size:29px}.chart-panel{grid-template-columns:1fr}.ascent{display:none}.route{height:215px}.route-label{max-width:65%;padding:20px}.route h3{font-size:23px}.row{grid-template-columns:minmax(130px,2fr) 1fr 1fr;padding:15px;gap:8px}.row>:nth-child(3),.row>:nth-child(5){display:none}.panel-head{gap:10px}.friend-cards{grid-template-columns:1fr}.header .nav{display:none}.mobile-nav{display:flex;gap:20px;border-bottom:1px solid #303638;padding:14px 0}.mobile-nav button{background:none;color:#b8c3c5;padding:0;font-size:12px}.picker-button{font-size:11px;padding:9px}.runner-mode .mobile-nav{display:none}.minimal .mobile-nav{justify-content:flex-end}.intro p{max-width:260px;line-height:1.6}.concept-note{font-size:12px}}
|
||
</style>
|
||
<div class="studio"><div class="studio-top"><div><h1>Stride / Navigation concepts</h1><p>Interactive mockups · sample data · app unchanged</p></div><div class="view"><button class="active" data-view="own">My dashboard</button><button data-view="friend">Friend’s dashboard</button></div></div><div class="controls"><button class="active" data-concept="tabs">A · Top navigation</button><button data-concept="runner">B · Runner switcher</button><button data-concept="minimal">C · Minimal header</button></div></div>
|
||
<div class="concept-note"><strong id="concept-title">A · Top navigation</strong><span id="concept-description">Dashboard and Friends stay visible. Imports and account settings move into the top bar. Familiar navigation, more room for your runs.</span></div>
|
||
<div class="shell" id="shell"><header class="header"><a class="logo" href="#" id="home"><b>s</b>stride<i>.</i></a><nav class="nav"><button class="current" data-page="dashboard">Dashboard</button><button data-page="friends">Friends <small>3</small></button></nav><div class="header-tools"><div class="runner-picker" id="runner-picker" hidden><button class="picker-button" id="picker-toggle">My dashboard ▾</button><div class="popup" id="picker-menu" hidden><button data-person="own">My dashboard<small>All your runs</small></button><button data-person="friend">Alex Morgan<small>Friend · shared runs</small></button><button data-page="friends">Manage friends →</button></div></div><button class="primary" id="import">＋ Import run</button><div class="account-menu"><button class="avatar" id="account-toggle" aria-label="Account menu">P</button><div class="popup" id="account-popup" hidden><button>Settings & Garmin sync</button><button>Import runs</button><button>Sign out</button></div></div></div></header><nav class="mobile-nav"><button data-page="dashboard">Dashboard</button><button data-page="friends">Friends · 3</button><button id="mobile-import">＋ Import</button></nav>
|
||
<div id="dashboard"><div class="intro"><div><button class="back" id="back-friends" hidden>← Friends</button><h2 id="page-title">Your running</h2><p id="page-subtitle">Distance, effort, and your recent sessions.</p></div><span class="tag" id="friend-tag" hidden>✓ Friends · Shared runs</span></div>
|
||
<div class="route"><svg viewBox="0 0 1100 230" preserveAspectRatio="xMidYMid slice"><g stroke="#2b3439" stroke-width="1" fill="none"><path d="M420 0V230M520 0V230M650 0V230M800 0V230M920 0V230M350 40H1100M350 100H1100M350 170H1100"/><path d="M400 230L1100 0M480 0L1000 230"/></g><path d="M630 172L627 60L735 48L815 88L898 65L922 135L826 180L744 165L710 104L630 172" fill="none" stroke="#ff956a" stroke-width="3" stroke-linejoin="round"/><circle cx="630" cy="172" r="6" fill="#eeeae4" stroke="#ff956a" stroke-width="3"/></svg><div class="route-label"><div class="eyebrow">LATEST RUN</div><h3>Morning riverside</h3><p>2 Oct 2026 · 8.20 km</p><a href="#">View run →</a></div></div>
|
||
<div class="stats"><div class="stat"><div class="eyebrow">DISTANCE LOGGED</div><strong><span id="distance">186.4</span><small>km</small></strong><p class="scope">Across all your activities</p></div><div class="stat"><div class="eyebrow">ACTIVITIES</div><strong id="count">24</strong><p>Recorded sessions</p></div><div class="stat"><div class="eyebrow">TIME ON YOUR FEET</div><strong id="duration">18:42:10</strong><p>Total recorded timer time</p></div><div class="stat"><div class="eyebrow">AVERAGE PACE</div><strong><span id="pace">6:01</span><small>/km</small></strong><p>Weighted by distance</p></div></div>
|
||
<div class="chart-panel"><section class="panel"><div class="panel-head"><h3>Training volume</h3><span>Last 8 weeks</span></div><div class="bars"><i style="height:28%"></i><i style="height:50%"></i><i style="height:40%"></i><i style="height:67%"></i><i style="height:48%"></i><i style="height:83%"></i><i style="height:65%"></i><i style="height:53%"></i></div><div class="axis"><span>10 Aug</span><span>17 Aug</span><span>24 Aug</span><span>31 Aug</span><span>7 Sep</span><span>14 Sep</span><span>21 Sep</span><span>28 Sep</span></div></section><section class="panel ascent"><div class="eyebrow">TOTAL ASCENT</div><strong><span id="ascent">1,420</span><small>m</small></strong><svg viewBox="0 0 240 40"><path d="M0 35L25 20L40 28L65 6L85 22L110 3L135 29L160 16L190 32L215 22L240 37" fill="none" stroke="#cc8868"/></svg></section></div>
|
||
<div class="badges" aria-label="Personal records"><span class="badge"><em>★</em> 1 km <strong>4:12<small>/km</small></strong></span><span class="badge"><em>★</em> 2 km <strong>4:26<small>/km</small></strong></span><span class="badge"><em>★</em> 5 km <strong>4:48<small>/km</small></strong></span><span class="badge"><em>★</em> 10 km <strong>5:03<small>/km</small></strong></span></div>
|
||
<section class="panel history"><div class="panel-head"><h3 id="history-title">Your activities</h3><span id="history-count">24 activities</span></div><div class="row head"><span>ACTIVITY</span><span>DISTANCE</span><span>TIME</span><span>AVG. PACE</span><span>VISIBILITY</span></div><div class="row"><span><b>Morning riverside</b><small>2 Oct 2026 · Running</small></span><b>8.20 km</b><span>46:44</span><span>5:42 /km</span><span class="visibility">Friends</span></div><div class="row" id="private-row"><span><b>Recovery jog</b><small>30 Sep 2026 · Running</small></span><b>3.40 km</b><span>23:14</span><span>6:50 /km</span><span class="visibility private">Private</span></div><div class="row"><span><b>Sunday long run</b><small>27 Sep 2026 · Running</small></span><b>14.60 km</b><span>1:25:10</span><span>5:50 /km</span><span class="visibility">Friends</span></div></section></div>
|
||
<div class="friends-page" id="friends-page"><div class="friends-heading"><div><h2 style="font-size:30px;margin:0">Your circle</h2><p style="color:#a0aaac">Open a friend’s dashboard to catch up on their running.</p></div><button class="primary" id="add-friend">＋ Add friend</button></div><div class="friend-cards"><button class="friend-card" data-person="friend"><div class="avatar" style="display:grid;place-items:center">A</div><h3>Alex Morgan</h3><p>Latest run · Today</p><span>View dashboard →</span></button><button class="friend-card" data-person="friend"><div class="avatar" style="display:grid;place-items:center">J</div><h3>Jamie Lee</h3><p>Latest run · Yesterday</p><span>View dashboard →</span></button><button class="friend-card" data-person="friend"><div class="avatar" style="display:grid;place-items:center">S</div><h3>Sam Rivera</h3><p>Latest run · Monday</p><span>View dashboard →</span></button></div><p style="color:#a0aaac;font-size:12px">Friend requests and connection management live here.</p></div>
|
||
<p id="demo-message" hidden style="color:#f3ad8d;padding:15px 0" role="status"></p></div>
|
||
<script>
|
||
const $=id=>document.getElementById(id);let view='own',concept='tabs';const notes={tabs:['A · Top navigation','Dashboard and Friends stay visible. Imports and account settings move into the top bar. Familiar navigation, more room for your runs.'],runner:['B · Runner switcher','One dashboard surface: switch between yourself and accepted friends. Switch quickly between runners, with friends management inside the picker.'],minimal:['C · Minimal header','Small, quiet navigation beside the logo. Your runs take the focus; Friends stays one click away and account tools sit under your avatar.']};
|
||
function setView(next,name='Alex Morgan'){view=next;const friend=view==='friend';$('page-title').textContent=friend?name+'’s running':'Your running';$('page-subtitle').textContent=friend?'Activities shared with friends.':'Distance, effort, and your recent sessions.';$('friend-tag').hidden=!friend;$('back-friends').hidden=!friend;$('import').hidden=friend;$('mobile-import').hidden=friend;$('private-row').hidden=friend;$('distance').textContent=friend?'148.2':'186.4';$('count').textContent=friend?'18':'24';$('duration').textContent=friend?'14:12:10':'18:42:10';$('pace').textContent=friend?'5:45':'6:01';$('ascent').textContent=friend?'1,120':'1,420';document.querySelector('.scope').textContent=friend?'Across shared activities':'Across all your activities';$('history-title').textContent=friend?'Shared activities':'Your activities';$('history-count').textContent=friend?'18 shared activities':'24 activities';$('picker-toggle').textContent=(friend?name:'My dashboard')+' ▾';document.querySelectorAll('[data-view]').forEach(b=>b.classList.toggle('active',b.dataset.view===view));$('dashboard').hidden=false;$('friends-page').style.display='none';$('picker-menu').hidden=true;document.querySelectorAll('[data-page]').forEach(b=>b.classList.toggle('current',b.dataset.page==='dashboard'));$('demo-message').hidden=true}
|
||
function showFriends(){$('dashboard').hidden=true;$('friends-page').style.display='block';$('picker-menu').hidden=true;document.querySelectorAll('[data-page]').forEach(b=>b.classList.toggle('current',b.dataset.page==='friends'))}
|
||
document.querySelectorAll('[data-view]').forEach(b=>b.onclick=()=>setView(b.dataset.view));document.querySelectorAll('[data-concept]').forEach(b=>b.onclick=()=>{concept=b.dataset.concept;$('shell').className='shell '+(concept==='runner'?'runner-mode':concept==='minimal'?'minimal':'');$('runner-picker').hidden=concept!=='runner';$('concept-title').textContent=notes[concept][0];$('concept-description').textContent=notes[concept][1];document.querySelectorAll('[data-concept]').forEach(x=>x.classList.toggle('active',x===b))});document.querySelectorAll('[data-page]').forEach(b=>b.onclick=()=>b.dataset.page==='friends'?showFriends():setView('own'));document.querySelectorAll('[data-person]').forEach(b=>b.onclick=()=>setView(b.dataset.person,b.querySelector('h3')?.textContent||'Alex Morgan'));$('back-friends').onclick=showFriends;$('home').onclick=e=>{e.preventDefault();setView('own')};$('picker-toggle').onclick=()=>$('picker-menu').hidden=!$('picker-menu').hidden;$('account-toggle').onclick=()=>$('account-popup').hidden=!$('account-popup').hidden;document.querySelectorAll('#account-popup button,#import,#mobile-import,#add-friend,.route a').forEach(b=>b.onclick=e=>{e.preventDefault();$('demo-message').textContent='Mockup only — '+b.textContent.trim()+' opens the corresponding app screen.';$('demo-message').hidden=false;$('account-popup').hidden=true});
|
||
</script></html> |