feat: add Hermes WebUI provisioning and English Dragon HD Omni voices
Rebuild & Deploy / rebuild (push) Successful in 2m17s
Rebuild & Deploy / rebuild (push) Successful in 2m17s
This commit is contained in:
1 parent
47cc9c88a0
commit
6b8d55fc92
59 files changed
+1175
-70
No files matched your search
@@ -0,0 +1,73 @@
|
||||
<!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{displLine truncated
|
||||
@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>
|
||||
Reference in new issue
Block a user