Files
2026-10-02 16:07:24 -04:00

74 lines
29 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="light"><title>Hope — CLEAR design demo</title>
<style>
:root{--blue:#2454df;--ink:#192334;--muted:#586578;--line:#e3e8ef;--group:#f3f6fa;--pale:#edf3ff;--red:#b62b36;--green:#197447;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;color:var(--ink);background:#f4f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;color:inherit}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:hover:not(:disabled){filter:brightness(.96)}button:active:not(:disabled){transform:translateY(1px)}a{color:var(--blue)}[hidden]{display:none!important}.sheet{max-width:1140px;margin:auto;min-height:100vh;display:grid;grid-template-columns:1fr 438px;gap:90px;align-items:center;padding:56px 48px}.presentation{max-width:450px}.direction{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--muted)}.direction:before{content:"";width:25px;height:2px;background:var(--blue)}h1{font-size:76px;letter-spacing:-.04em;line-height:1.05;margin:28px 0 22px;font-weight:650}h1 span{display:block;font-weight:400;color:var(--blue)}.thesis{font-size:20px;line-height:1.6;margin:0;max-width:33ch;letter-spacing:-.015em}.design-notes{margin:34px 0 0;padding:0;list-style:none}.design-notes li{padding:17px 0;border-top:1px solid #dce3ec;font-size:14px;line-height:1.55;color:var(--muted)}.design-notes strong{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}.identity{margin-top:36px;display:flex;gap:22px;align-items:center}.app-icon{width:96px;height:96px;display:block}.small-icon{width:32px;height:32px}.icon-caption{margin:8px 0 0;color:var(--muted);font-size:12px}.trial{font-size:13px;line-height:1.6;color:var(--muted);margin:28px 0 0;max-width:43ch}.device-wrap{justify-self:center}.device{width:414px;padding:11px;background:#202733;border-radius:53px;box-shadow:0 22px 48px #26364b20,0 2px 4px #26364b25;position:relative}.device:before{content:"";position:absolute;left:-3px;top:160px;width:3px;height:62px;border-radius:2px;background:#384354}.screen{height:780px;overflow:hidden;border-radius:43px;background:white;display:flex;flex-direction:column;position:relative}.statusbar{height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 27px;font-size:14px;font-weight:650;position:relative}.island{position:absolute;left:50%;transform:translateX(-50%);top:10px;width:116px;height:30px;border-radius:18px;background:#18212b}.status-icons{display:flex;gap:6px;align-items:center}.status-icons svg{width:17px;height:17px}.demo-strip{font-size:10px;font-weight:600;letter-spacing:.03em;color:#52617b;text-align:center;padding:7px 6px;background:var(--pale)}.app-header{padding:22px 24px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.app-header h2{margin:0;font-size:36px;letter-spacing:-.035em;font-weight:700}.brand-mini{width:38px;height:38px}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-button{width:44px;height:44px;padding:10px;display:grid;place-items:center;border:0;background:transparent;border-radius:10px;color:var(--blue)}.app-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 18px}.welcome{padding:18px 0 25px}.welcome h3{font-size:28px;line-height:1.22;font-weight:600;letter-spacing:-.03em;margin:0 0 12px;max-width:10ch}.welcome p{font-size:15px;line-height:1.55;margin:0;color:var(--muted);max-width:29ch}.segmented{display:flex;background:#edf0f5;border-radius:9px;padding:3px;margin-bottom:14px}.segmented button{flex:1;min-height:44px;border:0;background:transparent;border-radius:7px;display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--muted)}.segmented button[aria-pressed=true]{background:white;color:var(--ink);box-shadow:0 1px 3px #18233815}.segmented .icon{width:18px;height:18px}.primary{width:100%;min-height:54px;border:0;border-radius:12px;background:var(--blue);color:#fff;display:flex;justify-content:center;align-items:center;gap:10px;font-weight:600;font-size:16px}.local-note{text-align:center;font-size:11px;color:var(--muted);margin:10px 0 0}.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin-top:33px;margin-bottom:9px}.section-heading h3{font-size:18px;letter-spacing:-.015em;margin:0}.section-heading span{font-size:11px;color:var(--muted)}.list{border-top:1px solid var(--line)}.conversation-row{border:0;border-bottom:1px solid var(--line);background:transparent;display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:17px 0;min-height:78px}.row-symbol{width:36px;height:36px;background:var(--group);border-radius:9px;display:grid;place-items:center;color:var(--muted);flex-shrink:0}.row-text{flex:1;min-width:0}.row-text strong{display:block;font-size:15px;font-weight:550;margin-bottom:5px}.row-text small{display:block;color:var(--muted);font-size:12px;line-height:1.4}.chevron{width:15px;height:15px;color:#8691a0}.tabbar{height:72px;flex-shrink:0;border-top:1px solid var(--line);display:flex;background:#fbfcfe;padding:7px 26px 4px}.tabbar button{flex:1;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:10px;min-height:55px;border-radius:8px}.tabbar button[aria-current=page]{color:var(--blue);font-weight:600}.home-indicator{height:19px;background:#fbfcfe;display:grid;place-items:start center;flex-shrink:0}.home-indicator:after{content:"";background:#222c38;width:122px;height:5px;border-radius:3px;margin-top:4px}.device-caption{text-align:center;margin:17px 0 0;color:var(--muted);font-size:12px}.back{border:0;background:transparent;color:var(--blue);padding:0 5px 0 0;display:flex;align-items:center;gap:3px;font-size:15px;min-height:44px}.conversation-heading{margin:10px 0 7px;font-size:25px;letter-spacing:-.025em}.conversation-meta{font-size:12px;color:var(--muted);margin:0 0 23px}.transcript{display:flex;flex-direction:column;gap:20px;padding-bottom:18px}.message{font-size:16px;line-height:1.5}.message small{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:600}.message.user{background:var(--group);padding:13px 15px;border-radius:12px}.message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.voice-panel{margin:8px 0 20px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}.mic-emblem{width:58px;height:58px;background:var(--pale);border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;color:var(--blue)}.mic-emblem .icon{width:28px;height:28px}.voice-panel h3{font-size:19px;margin:0 0 7px;font-weight:600}.voice-panel p{color:var(--muted);font-size:12px;line-height:1.5;margin:0}.state-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--blue);margin-right:5px}.voice-controls{display:flex;justify-content:center;gap:20px;margin-top:18px}.control{border:0;min-width:104px;background:var(--group);padding:12px 16px;border-radius:10px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}.control.end{color:var(--red);background:#fff1f2}.composer{display:flex;gap:8px;margin-top:18px}.composer input{width:0;flex:1;border:1px solid #c5ceda;background:white;border-radius:10px;padding:12px;font-size:15px;min-height:48px;color:var(--ink)}.composer input::placeholder{color:var(--muted)}.composer button{border:0;min-width:48px;background:var(--blue);color:white;border-radius:10px;display:grid;place-items:center}.hint{font-size:11px;color:var(--muted);line-height:1.5;margin-top:9px}.group-label{font-size:12px;color:var(--muted);margin:23px 0 8px 12px}.grouped{background:var(--group);border-radius:12px;overflow:hidden}.setting-row{padding:15px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:60px;border-bottom:1px solid var(--line);font-size:14px}.setting-row:last-child{border-bottom:0}.setting-row small{display:block;color:var(--muted);line-height:1.5;font-size:12px;margin-top:4px}.setting-row select{min-height:44px;max-width:155px;border:0;border-radius:7px;background:white;padding:0 10px;color:var(--blue);font-size:14px}.setting-row input{width:44px;height:44px;accent-color:var(--blue);flex-shrink:0}.danger-button{background:transparent;color:var(--red);border:0;text-align:left;width:100%;padding:15px 14px;font-size:15px}.settings-note{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 12px}.notice{background:var(--pale);color:#344976;padding:13px;border-radius:10px;font-size:13px;line-height:1.5;margin-top:16px}.notice button{border:0;background:var(--blue);color:white;border-radius:8px;padding:10px 14px;margin-top:10px;font-weight:600}.activity-intro{font-size:14px;color:var(--muted);line-height:1.5;margin:12px 0 25px}.event{display:flex;gap:14px;border-bottom:1px solid var(--line);padding:18px 0}.event .row-symbol{color:var(--blue);background:var(--pale)}.event strong{font-size:14px;display:block;margin:0 0 6px;font-weight:600}.event p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}.event time{display:block;font-size:11px;color:var(--muted);margin-top:8px}.live-note{font-size:12px;color:var(--muted);line-height:1.5;padding-top:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:950px){.sheet{gap:35px;padding:40px 28px;grid-template-columns:1fr 414px}h1{font-size:60px}.thesis{font-size:18px}.design-notes{margin-top:25px}}
@media(max-width:760px){.sheet{display:flex;flex-direction:column;padding:32px 20px;gap:30px}.presentation{width:100%;max-width:414px}.direction{font-size:12px}h1{font-size:48px;margin:18px 0 15px}h1 span{display:inline}.thesis{max-width:36ch;font-size:17px}.design-notes{display:none}.identity{margin-top:20px;gap:14px}.app-icon{width:58px;height:58px}.trial{margin-top:18px}.device-wrap{max-width:100%;width:414px}.device{width:100%;padding:8px;border-radius:45px}.screen{height:780px;border-radius:37px}.device-caption{line-height:1.5}}@media(max-width:430px){.sheet{padding:24px 12px}.device{padding:6px;border-radius:39px}.screen{border-radius:33px}.app-body{padding-left:20px;padding-right:20px}.app-header{padding-left:20px;padding-right:20px}.statusbar{padding-left:23px;padding-right:23px}.presentation{padding:0 8px}h1{font-size:44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style>
</head>
<body>
<svg aria-hidden="true" width="0" height="0" style="position:absolute"><defs>
<symbol id="hope-mark" viewBox="0 0 100 100"><rect width="100" height="100" rx="23" fill="#2454df"/><path d="M23 26h39a8 8 0 0 1 8 8v20a8 8 0 0 1-8 8H42L28 73V62h-5a8 8 0 0 1-8-8V34a8 8 0 0 1 8-8Z" fill="#fff"/><path d="M47 40h30a8 8 0 0 1 8 8v17a8 8 0 0 1-8 8h-3v10L61 73H47a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8Z" fill="#a9c0ff" stroke="#2454df" stroke-width="4"/></symbol>
<symbol id="mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11v2a7 7 0 0 0 14 0v-2M12 20v2M8 22h8"/></symbol>
<symbol id="bubble" viewBox="0 0 24 24"><path d="M5 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-6 4V6a2 2 0 0 1 2-2Z"/><path d="M7 9h10M7 13h6"/></symbol>
<symbol id="activity" viewBox="0 0 24 24"><path d="M3 12h4l3-8 4 16 3-8h4"/></symbol>
<symbol id="settings" viewBox="0 0 24 24"><path d="m10 3-.7 2.2-2 .9-2.2-.7-2 3.4 1.6 1.6v2.3L3 14.3l2 3.4 2.2-.7 2 .9.8 2.1h4l.8-2.1 2-.9 2.2.7 2-3.4-1.7-1.6v-2.3L21 8.8l-2-3.4-2.2.7-2-.9L14 3Z"/><circle cx="12" cy="11.5" r="3"/></symbol>
<symbol id="chevron" viewBox="0 0 24 24"><path d="m9 5 7 7-7 7"/></symbol><symbol id="arrow-back" viewBox="0 0 24 24"><path d="m15 5-7 7 7 7"/></symbol><symbol id="arrow" viewBox="0 0 24 24"><path d="M12 19V5m-6 6 6-6 6 6"/></symbol><symbol id="mic-muted" viewBox="0 0 24 24"><path d="m3 3 18 18M9 9v3a3 3 0 0 0 5 2M9 5a3 3 0 0 1 6 0v6M5 11v2a7 7 0 0 0 12 5M19 11v2M12 20v2"/></symbol><symbol id="stop" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></symbol><symbol id="check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
</defs></svg>
<main class="sheet">
<section class="presentation" aria-label="Design direction">
<a href="index.html" style="display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:none;margin-bottom:18px">← All three directions</a><div class="direction">Hope for iOS · Design direction CLEAR</div>
<h1>A little<br>more <span>clarity.</span></h1>
<p class="thesis">A conversation should feel easy to start. And just as easy to come back to.</p>
<ul class="design-notes"><li><strong>Conversation comes first.</strong>A welcoming home, a single starting point, and recent conversations within reach.</li><li><strong>Daylight, not a light show.</strong>White space, readable system type, and cobalt where there’s something to do.</li><li><strong>A mark that means something.</strong>Two voices, two overlapping bubbles. Distinct at 32 pixels. No glow required.</li></ul>
<div class="identity"><svg class="app-icon" role="img" aria-label="Hope app icon: overlapping speech bubbles on cobalt"><use href="#hope-mark"/></svg><div><svg class="small-icon" role="img" aria-label="Hope icon at 32 pixels"><use href="#hope-mark"/></svg><p class="icon-caption">An exchange, not an orb.</p></div></div>
<p class="trial">Interactive design demo. Try a conversation, switch to text, or explore Activity and Settings. All content is sample data; no microphone, network, or account access.</p>
</section>
<section class="device-wrap" aria-label="Interactive iPhone demo">
<div class="device"><div class="screen">
<div class="statusbar" aria-hidden="true"><span>9:41</span><span class="island"></span><span class="status-icons"><svg viewBox="0 0 20 20" fill="currentColor"><rect x="1" y="12" width="3" height="5" rx="1"/><rect x="6" y="9" width="3" height="8" rx="1"/><rect x="11" y="6" width="3" height="11" rx="1"/><rect x="16" y="3" width="3" height="14" rx="1"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9a14 14 0 0 1 18 0M6 12a9 9 0 0 1 12 0M9 15a4 4 0 0 1 6 0"/><circle cx="12" cy="18" r="1" fill="currentColor"/></svg><svg viewBox="0 0 25 16" fill="none" stroke="currentColor"><rect x="1" y="2" width="20" height="12" rx="3"/><rect x="3" y="4" width="16" height="8" rx="1" fill="currentColor"/><path d="M23 6v4" stroke-width="2"/></svg></span></div>
<div class="demo-strip">INTERACTIVE DEMO · SAMPLE DATA · NO MIC ACCESS</div>
<header class="app-header"><h2 id="page-title">Hope</h2><svg id="header-mark" class="brand-mini" aria-label="Hope" role="img"><use href="#hope-mark"/></svg></header>
<div class="app-body" id="app-body" tabindex="-1">
<section class="welcome"><h3>What’s on<br>your mind?</h3><p>Talk it through, make a plan,<br>or follow a little curiosity.</p></section>
<div class="segmented" aria-label="Conversation input"><button type="button" data-mode="voice" aria-pressed="true"><svg class="icon"><use href="#mic"/></svg>Voice</button><button type="button" data-mode="text" aria-pressed="false"><svg class="icon"><use href="#bubble"/></svg>Text</button></div>
<button class="primary" id="start"><svg class="icon"><use href="#mic"/></svg>Start a conversation</button><p class="local-note">A simulated conversation. Your mic stays off.</p>
<div class="section-heading"><h3>Recent conversations</h3><span>Sample data</span></div>
<div class="list" id="recent-list"><button class="conversation-row" data-sample="0"><span class="row-symbol"><svg class="icon"><use href="#bubble"/></svg></span><span class="row-text"><strong>A slower Sunday</strong><small>Today · A little room to recharge</small></span><svg class="icon chevron"><use href="#chevron"/></svg></button><button class="conversation-row" data-sample="1"><span class="row-symbol"><svg class="icon"><use href="#bubble"/></svg></span><span class="row-text"><strong>Something good for dinner</strong><small>Yesterday · What’s in the fridge</small></span><svg class="icon chevron"><use href="#chevron"/></svg></button><button class="conversation-row" data-sample="2"><span class="row-symbol"><svg class="icon"><use href="#bubble"/></svg></span><span class="row-text"><strong>A thought worth keeping</strong><small>Monday · An idea for the weekend</small></span><svg class="icon chevron"><use href="#chevron"/></svg></button></div>
</div>
<nav class="tabbar" aria-label="App navigation"><button data-page="home" aria-current="page"><svg class="icon"><use href="#bubble"/></svg>Talk</button><button data-page="activity"><svg class="icon"><use href="#activity"/></svg>Activity</button><button data-page="settings"><svg class="icon"><use href="#settings"/></svg>Settings</button></nav><div class="home-indicator" aria-hidden="true"></div><div id="announcement" class="sr-only" role="status" aria-live="polite"></div>
</div></div><p class="device-caption">CLEAR · An interactive proposal, not the live app</p>
</section>
</main>
<script>
(()=>{'use strict';
const body=document.getElementById('app-body'),title=document.getElementById('page-title'),mark=document.getElementById('header-mark'),homeHTML=body.innerHTML,announce=document.getElementById('announcement');
const samples=[{title:'A slower Sunday',user:'I’d like a quieter Sunday. Where should I start?',reply:'Leave the first hour unplanned. A walk, a slow breakfast, and one thing you’re looking forward to could be enough.'},{title:'Something good for dinner',user:'I have chickpeas, tomatoes, and a little feta.',reply:'Try warm chickpeas with tomatoes and olive oil, then crumble the feta on top. Some toasted bread would make it a lovely dinner.'},{title:'A thought worth keeping',user:'Maybe we could take the train to the coast this weekend.',reply:'That sounds like a good change of pace. Start with a morning train and leave the afternoon open for a walk by the water.'}];
let mode='voice',page='home',timers=[],muted=false,state='idle',events=[],voice='Ava',spoken=true,session=0;
const icon=(name)=>`<svg class="icon" aria-hidden="true"><use href="#${name}"/></svg>`;
function clearTimers(){timers.forEach(clearTimeout);timers=[];session++;}
function later(fn,ms){const current=session;timers.push(setTimeout(()=>{if(current===session)fn();},ms));}
function say(text){announce.textContent=text;}
function setPage(next){clearTimers();page=next;state='idle';title.textContent=next==='home'?'Hope':next==='activity'?'Activity':next==='settings'?'Settings':'Conversation';title.style.fontSize=next==='conversation'?'28px':'';mark.hidden=next!=='home';document.querySelectorAll('[data-page]').forEach(b=>{if(b.dataset.page===(next==='conversation'?'home':next))b.setAttribute('aria-current','page');else b.removeAttribute('aria-current');});body.scrollTop=0;}
function modePicker(){return `<div class="segmented" aria-label="Conversation input"><button data-mode="voice" aria-pressed="${mode==='voice'}">${icon('mic')}Voice</button><button data-mode="text" aria-pressed="${mode==='text'}">${icon('bubble')}Text</button></div>`;}
function updateMode(){body.querySelectorAll('[data-mode]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.mode===mode)));if(page==='home'){document.getElementById('start').innerHTML=icon(mode==='voice'?'mic':'bubble')+(mode==='voice'?'Start a conversation':'Write a message');body.querySelector('.local-note').textContent=mode==='voice'?'A simulated conversation. Your mic stays off.':'A local text demo. Nothing is sent.';}}
function home(){setPage('home');body.innerHTML=homeHTML;updateMode();}
function addMessage(role,text){const box=document.createElement('div');box.className='message '+(role==='You'?'user':'hope');const label=document.createElement('small');label.textContent=role;const p=document.createElement('p');p.textContent=text;box.append(label,p);document.getElementById('transcript').append(box);body.scrollTop=body.scrollHeight;}
function conversation(sample){setPage('conversation');muted=false;body.innerHTML=`<button class="back" id="back">${icon('arrow-back')}All conversations</button><h3 class="conversation-heading" id="conversation-title">New conversation</h3><p class="conversation-meta">Local demo · No audio is recorded</p><div id="transcript" class="transcript" role="log" aria-live="polite" aria-label="Conversation transcript"></div>${modePicker()}<div id="interaction"></div>`;if(sample){document.getElementById('conversation-title').textContent=sample.title;addMessage('You',sample.user);addMessage('Hope',sample.reply);}renderInteraction(!sample);}
function renderInteraction(startVoice){clearTimers();const el=document.getElementById('interaction');if(mode==='text'){state='text';el.innerHTML=`<form class="composer" id="text-form"><label for="message" class="sr-only">Message Hope</label><input id="message" placeholder="Message Hope…" maxlength="2000" autocomplete="off" required><button aria-label="Send message">${icon('arrow')}</button></form><p class="hint">Demo replies are prewritten. Your text stays on this page.</p>`;if(startVoice)document.getElementById('message').focus();}else{el.innerHTML=`<div class="voice-panel"><div class="mic-emblem" id="mic-emblem">${icon('mic')}</div><h3 id="voice-status">Ready to listen</h3><p id="voice-detail">Your real microphone is off.</p><div class="voice-controls"><button class="control" id="mute">${icon('mic-muted')}Mute</button><button class="control end" id="end">${icon('stop')}End</button></div></div><button class="primary" id="listen">${icon('mic')}Try a voice turn</button><p class="hint">Simulated voice only. No sound is played or recorded.</p>`;state='idle';if(startVoice)listen();}}
function status(next,heading,detail){state=next;const s=document.getElementById('voice-status');if(!s)return;s.textContent=heading;document.getElementById('voice-detail').textContent=detail;say(heading+'. '+detail);}
function listen(){clearTimers();muted=false;document.getElementById('mute').disabled=false;document.getElementById('end').disabled=false;document.getElementById('mute').innerHTML=icon('mic-muted')+'Mute';document.getElementById('mute').setAttribute('aria-pressed','false');document.getElementById('listen').disabled=true;document.getElementById('mic-emblem').innerHTML=icon('mic');status('listening','Listening…','Simulated mic on · Try Mute or End');later(()=>{addMessage('You','Help me make a little space in my day.');status('working','Thinking it through…','Mic paused · Preparing a sample reply');},2400);later(()=>{addMessage('Hope','Pick one thing that can wait, and give yourself ten minutes without a plan. What would you like that little break to feel like?');status('reply','Hope is replying','Simulated reply · No audio is playing');events.unshift({title:'A little space in the day',description:'Completed a simulated voice turn.'});},4100);later(()=>{status('idle','Ready when you are','Simulated mic off · Tap below to try again');document.getElementById('listen').disabled=false;},6200);}
function activity(){setPage('activity');body.innerHTML=`<p class="activity-intro">A simple record of your conversations.<br>Everything here is local sample data.</p><div class="section-heading"><h3>Today</h3><span>On this page</span></div><div id="activity-events"></div><div class="event"><span class="row-symbol">${icon('check')}</span><div><strong>A slower Sunday</strong><p>A sample conversation about making room to recharge.</p><time>9:12 AM · Sample</time></div></div><div class="section-heading"><h3>Yesterday</h3></div><div class="event"><span class="row-symbol">${icon('bubble')}</span><div><strong>Something good for dinner</strong><p>A sample conversation with a simple dinner idea.</p><time>6:24 PM · Sample</time></div></div><p class="live-note">Try a voice or text conversation to add a demo event here. This record resets when you reload.</p>`;events.forEach(e=>{const row=document.createElement('div');row.className='event';const symbol=document.createElement('span');symbol.className='row-symbol';symbol.innerHTML=icon('check');const detail=document.createElement('div');const strong=document.createElement('strong');strong.textContent=e.title;const p=document.createElement('p');p.textContent=e.description;const time=document.createElement('time');time.textContent='Just now · Demo';detail.append(strong,p,time);row.append(symbol,detail);document.getElementById('activity-events').append(row);});}
function settings(){setPage('settings');body.innerHTML=`<p class="activity-intro">Make Hope feel comfortable for you.</p><div class="group-label">Conversation</div><div class="grouped"><label class="setting-row" for="voice-choice"><span>Voice preference<small>Used for simulated voice only</small></span><select id="voice-choice"><option>Ava</option><option>Andrew</option><option>Emma</option></select></label><label class="setting-row" for="spoken"><span>Spoken replies<small>Preference only; no audio plays</small></span><input type="checkbox" id="spoken"></label></div><p class="settings-note">Preferences stay in this demo until you reload. Voice choice doesn’t change the sample transcript.</p><div class="group-label">About this demo</div><div class="grouped"><div class="setting-row"><span>Hope for iOS</span><span style="color:var(--muted)">CLEAR</span></div><div class="setting-row"><span>Data & privacy<small>No account, microphone, or network access.<br>All conversations are local examples.</small></span></div></div><div class="group-label">Account</div><div class="grouped"><div class="setting-row"><span>Demo account<small>You are not signed in to a real account.</small></span></div><button class="danger-button" id="signout">Simulate sign out</button></div><div id="account-message" role="status"></div>`;document.getElementById('voice-choice').value=voice;document.getElementById('spoken').checked=spoken;}
body.addEventListener('click',e=>{const button=e.target.closest('button');if(!button)return;if(button.dataset.mode){mode=button.dataset.mode;if(page==='home')updateMode();else renderInteraction(false);say(mode==='voice'?'Voice mode. Microphone access is simulated.':'Text mode. Messages stay on this page.');return;}if(button.dataset.sample!==undefined){conversation(samples[Number(button.dataset.sample)]);return;}switch(button.id){case'start':conversation();break;case'back':home();break;case'listen':listen();break;case'mute':muted=!muted;clearTimers();button.setAttribute('aria-pressed',String(muted));button.innerHTML=icon(muted?'mic':'mic-muted')+(muted?'Unmute':'Mute');if(muted){status('muted','Microphone muted','Simulation paused · Unmute to try again');document.getElementById('mic-emblem').innerHTML=icon('mic-muted');document.getElementById('listen').disabled=true;}else listen();break;case'end':clearTimers();status('ended','Conversation ended','Demo stopped · Your real mic was never on');document.getElementById('mute').disabled=true;document.getElementById('end').disabled=true;document.getElementById('listen').disabled=false;document.getElementById('listen').innerHTML=icon('mic')+'Start another voice turn';events.unshift({title:'Conversation ended',description:'Stopped the simulated conversation.'});break;case'signout':document.getElementById('account-message').innerHTML='<div class="notice"><strong>Simulated sign out</strong><br>No real account was signed out. This is only a design demo.<br><button id="reset-account">Return to demo account</button></div>';button.disabled=true;break;case'reset-account':document.getElementById('account-message').innerHTML='';document.getElementById('signout').disabled=false;say('Demo account restored. No real account action occurred.');break;}});
body.addEventListener('change',e=>{if(e.target.id==='voice-choice'){voice=e.target.value;say(voice+' selected for this demo.');}if(e.target.id==='spoken'){spoken=e.target.checked;say('Spoken replies '+(spoken?'enabled':'disabled')+' as a demo preference. No audio plays.');}});
body.addEventListener('submit',e=>{if(e.target.id!=='text-form')return;e.preventDefault();const field=document.getElementById('message'),text=field.value.trim();if(!text)return;addMessage('You',text);field.value='';addMessage('Hope','Let’s take it one step at a time. What’s the part you’d most like to talk through? (This is a prewritten demo reply.)');events.unshift({title:'Text conversation',description:'Sent a local demo message. Nothing was transmitted.'});field.focus();say('Local demo message added.');});
document.querySelector('.tabbar').addEventListener('click',e=>{const b=e.target.closest('[data-page]');if(!b)return;if(b.dataset.page==='home')home();else if(b.dataset.page==='activity')activity();else settings();body.focus({preventScroll:true});say(title.textContent+' page');});
})();
</script>
</body>
</html>