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

6 lines
20 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"><title>Hope / Prism</title><style>
*{box-sizing:border-box}body{margin:0;color:#302639;background:#eee9f3;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{border:0;background:none;color:inherit;min-height:44px;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #8b52ba;outline-offset:4px}a{color:inherit}h1,h2,p{margin:0}[hidden]{display:none!important}.stage{min-height:100vh;max-width:1230px;display:grid;grid-template-columns:1fr 400px 180px;align-items:center;gap:48px;padding:54px 42px;margin:auto}.intro{align-self:start;padding-top:55px}.back{display:inline-flex;align-items:center;min-height:44px;font-size:13px;text-decoration:none}.name{font-size:15px;margin:30px 0 20px;color:#674878}.intro h1{font-size:66px;line-height:1.07;letter-spacing:-.035em;font-weight:450}.intro h1 em{font-family:Georgia,serif;font-weight:400;color:#9251ad}.lede{font-size:17px;line-height:1.7;margin-top:26px;max-width:34ch;color:#675c6e}.features{margin-top:38px}.feature{padding:17px 0;border-top:1px solid #d7ccde;font-size:14px;line-height:1.6;color:#675c6e}.feature strong{display:block;font-size:15px;color:#302639;margin-bottom:4px}.phone{height:824px;width:390px;border:7px solid #fcfbfd;border-radius:48px;overflow:hidden;position:relative;background:linear-gradient(160deg,#fff 0%,#fdfbff 55%,#f0edf8 100%);box-shadow:0 6px 8px #5340640c;display:flex;flex-direction:column}.statusbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:12px 25px 0;font-size:14px;font-weight:600;flex-shrink:0}.island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:103px;height:27px;border-radius:20px;background:#292331}.header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 9px;flex-shrink:0}.header button{width:44px;background:#fff;border-radius:50%;font-size:20px}.wordmark{font-size:20px;font-weight:600;letter-spacing:-.03em}.wordmark span{font-weight:400;color:#9c80b0}.view{flex:1;overflow:auto;min-height:0;padding:0 22px 16px}.hero{text-align:center;padding-top:9px}.sculpture{height:108px;width:140px;margin:0 auto 10px;position:relative;filter:drop-shadow(0 9px 8px #b298ce22)}.sculpture .piece{position:absolute;width:67px;height:84px;border-radius:48% 50% 44% 52%;top:11px;left:31px;transform:rotate(-24deg);background:radial-gradient(ellipse at 22% 13%,#fff 0%,#fff9 14%,transparent 39%),conic-gradient(from 130deg,#cee9f6,#eed9f7,#e6a7d8,#fee0ca,#d9eaf5,#c7b1f0,#cee9f6);box-shadow:inset 2px 1px 2px #fff,inset -3px -2px 5px #baa2d455;border:1px solid #fff9}.sculpture .piece:nth-child(2){left:65px;top:12px;transform:rotate(24deg);width:51px;height:77px;background:radial-gradient(ellipse at 75% 17%,#fff 0%,#fff8 17%,transparent 44%),conic-gradient(from 30deg,#cceafb,#d5c0f5,#f3d2e8,#fee5dd,#d3eaf9)}.sculpture:after{content:'';position:absolute;bottom:2px;left:27px;width:90px;height:8px;background:#bb9dda35;filter:blur(8px);border-radius:50%}.hero h2{font-size:29px;line-height:1.14;font-weight:450;letter-spacing:-.03em}.hero h2 em{font-family:Georgia,serif;color:#9251ad;font-weight:400}.hero p{font-size:13px;color:#74627f;line-height:1.5;margin-top:10px}.topic{display:flex;align-items:center;justify-content:space-between;margin:24px 0 18px;font-size:12px;color:#766a7d}.topic span:first-child{padding:7px 11px;border:1px solid #e8dfed;border-radius:20px;background:#fff}.messages{display:flex;flex-direction:column;gap:20px}.message{font-size:15px;line-height:1.6}.message.user{padding:11px 14px;border-radius:14px;background:#f2eaf7;margin-left:28px}.message .who{font-size:11px;font-weight:600;color:#7c6688;margin-bottom:5px}.message p{white-space:pre-wrap;overflow-wrap:anywhere}.reply-title{font-size:20px;letter-spacing:-.02em;font-weight:500;margin:8px 0}.idea{margin-top:16px;display:flex;gap:12px;align-items:center}.idea-art{width:70px;height:76px;flex-shrink:0;overflow:hidden;border-radius:12px;position:relative;background:linear-gradient(150deg,#e3c1e8,#e5e3ff,#c5d9f2)}.idea-art:before{content:'';position:absolute;width:72px;height:72px;border-radius:50%;left:20px;top:25px;background:linear-gradient(140deg,#e7dbff,#a8bfe2);box-shadow:inset 1px 1px 2px #fff8}.idea-art:after{content:'';position:absolute;width:30px;height:30px;left:13px;top:10px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff9,#f5c7dc 35%,#d397c4);box-shadow:0 4px 5px #ae90b333}.idea-text{font-size:13px;line-height:1.6;color:#71607c}.idea-text strong{display:block;color:#45334e;font-size:14px;margin-bottom:3px}.actions{display:flex;gap:8px;margin-top:15px}.actions button{padding:0 12px;border-radius:24px;border:1px solid #e1d7e8;background:#fff;font-size:12px}.composer-shell{padding:10px 14px 12px;flex-shrink:0}.composer{border-radius:16px;background:#fff;padding:13px 14px 10px;box-shadow:0 4px 8px #8c76a313}.composer input{border:0;color:#45334e;background:transparent;width:100%;min-height:38px;outline-offset:0;font-size:15px}.composer input::placeholder{color:#786b82}.compose-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.mode{font-size:12px;display:flex;align-items:center;gap:7px}.tiny-pearl{width:19px;height:19px;border-radius:50%;background:conic-gradient(#e2c5ed,#cef0f8,#f6dcdf,#e2c5ed);border:1px solid #e0d2e7}.compose-buttons{display:flex;gap:5px}.compose-buttons button{width:44px;border-radius:50%}.compose-buttons .mic{background:#f3e8fa}.compose-buttons .send{background:#bd8ed5;color:#fff;font-size:23px}.footer{font-size:10px;text-align:center;color:#7b6b85;padding-bottom:19px}.home-indicator{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:110px;height:4px;background:#46344f;border-radius:4px}.nav-title{font-size:28px;font-weight:500;margin:22px 0 12px;letter-spacing:-.025em}.sub{font-size:14px;color:#71607c;line-height:1.6}.list{margin-top:23px}.list button{display:block;text-align:left;width:100%;padding:16px 0;border-bottom:1px solid #e6deeb}.list strong{display:block;font-size:15px;font-weight:500}.list small{display:block;font-size:12px;color:#71607c;line-height:1.6;margin-top:4px}.setting{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #e6deeb;padding:13px 0;font-size:14px}.setting select{max-width:160px;min-height:44px;border:0;color:#675276;background:#f5eff9;border-radius:8px;padding:0 8px}.notice{font-size:12px;color:#71607c;line-height:1.6;margin-top:19px}.voice-view{text-align:center;padding-top:32px}.voice-view .sculpture{width:200px;height:180px;margin-top:28px}.voice-view .piece{width:113px;height:140px;left:26px;top:15px}.voice-view .piece:nth-child(2){left:100px;width:85px;height:130px}.voice-view .sculpture:after{bottom:4px;left:40px;width:120px}.voice-view h2{font-size:34px;font-weight:400;letter-spacing:-.03em;margin-top:27px}.voice-state{font-size:14px;color:#87619c;margin:22px 0 10px}.timer{font-size:42px;font-weight:400;letter-spacing:-.035em;margin:17px 0}.voice-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:27px}.voice-controls button{height:56px;min-width:56px;background:#fff;border:1px solid #dfd2e8;border-radius:50%;font-size:14px;padding:0 15px}.voice-controls .main-mic{height:82px;min-width:82px;border:0;background:radial-gradient(circle at 30% 25%,#fff8,#dfc0ee 45%,#c7a0dd);box-shadow:0 0 0 15px #f0e4f844,0 0 0 30px #f0e4f822}.voice-back{margin-top:44px;font-size:13px;color:#8a589e}.icons .tile{width:145px;height:145px;border-radius:33px;background:#8e59a9;display:grid;place-items:center;overflow:hidden}.tile svg{width:120px;height:120px}.icons h2{font-size:17px;margin-top:20px;font-weight:500}.icons p{font-size:13px;color:#71607c;line-height:1.65;margin-top:12px}.small{display:flex;gap:14px;align-items:end;margin-top:24px}.small .tile{width:56px;height:56px;border-radius:13px}.small .tile svg{width:48px;height:48px}.small .tile:last-child{width:32px;height:32px;border-radius:8px}.small .tile:last-child svg{width:27px;height:27px}.icons .demo{font-size:11px;margin-top:34px}.mic svg{width:20px;height:20px}.light-status{font-size:12px;line-height:1.5;color:#87619c;margin:17px 0 0}.toast{font-size:12px;color:#78508b;margin-top:13px;line-height:1.5}@media(max-width:1100px){.stage{grid-template-columns:1fr 390px;gap:36px}.icons{grid-column:1;grid-row:2;max-width:330px}.phone-wrap{grid-column:2;grid-row:1 / span 2}.intro{padding-top:0}.intro h1{font-size:54px}}@media(max-width:730px){.stage{display:flex;flex-direction:column;padding:24px 14px;gap:28px}.intro{width:100%}.name{margin:15px 0}.intro h1{font-size:43px}.lede{font-size:15px;max-width:none;margin-top:18px}.features{display:none}.phone-wrap{width:100%}.phone{width:min(390px,100%);margin:auto}.icons{max-width:390px;width:100%;display:grid;grid-template-columns:100px 1fr;gap:0 20px}.icons>.tile{width:100px;height:100px;border-radius:23px;grid-row:1 / span 3}.icons>.tile svg{width:85px;height:85px}.icons h2{margin-top:0}.icons .demo{grid-column:1 / -1}.small{margin-top:14px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head><body><svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs><linearGradient id="gem" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#fff5ef"/><stop offset=".35" stop-color="#def3fb"/><stop offset=".65" stop-color="#e9c9f0"/><stop offset="1" stop-color="#f4afcf"/></linearGradient><linearGradient id="gem2"><stop stop-color="#dfc2f1"/><stop offset=".5" stop-color="#f8e2e5"/><stop offset="1" stop-color="#e1f2ff"/></linearGradient><symbol id="prism-icon" viewBox="0 0 100 100"><path d="M26 16C10 28 11 57 28 73C36 80 45 77 48 66L57 36C62 18 42 4 26 16Z" fill="url(#gem)" stroke="#fff7" stroke-width="1"/><path d="M69 21C54 11 42 29 47 46L58 77C63 91 85 78 85 59C85 39 81 29 69 21Z" fill="url(#gem2)" stroke="#fff8" stroke-width="1"/><path d="M29 19C18 26 17 42 20 50M68 24C77 31 79 39 80 48" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></symbol><symbol id="mic-symbol" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8"/></symbol></defs></svg><main class="stage"><section class="intro"><a class="back" href="new-index.html">← Compare the new directions</a><div class="name">Prism / a conversation that unfolds</div><h1>From a thought<br>to <em>something<br>you can use.</em></h1><p class="lede">A softer place to talk things through. Pearlescent details, quiet lavender, and useful answers with room to breathe.</p><div class="features"><div class="feature"><strong>Your answer is the main event.</strong>A compact sculptural identity leaves space for readable replies and the next step.</div><div class="feature"><strong>Write or speak from one place.</strong>A floating composer makes switching between voice and text effortless.</div><div class="feature"><strong>A little color, a lighter touch.</strong>Translucent pastel forms carry the personality. Controls stay simple.</div></div></section><section class="phone-wrap" aria-label="Interactive Prism demonstration"><div class="phone"><div class="statusbar"><span>9:41</span><div class="island" aria-hidden="true"></div><span aria-hidden="true">▮▮▮ ▰</span></div><header class="header"><button id="history" aria-label="Conversation history">☰</button><div class="wordmark">hope <span>/ prism</span></div><button id="settings" aria-label="Settings">···</button></header><section class="view" id="chat-view"><div class="hero"><div class="sculpture" aria-hidden="true"><div class="piece"></div><div class="piece"></div></div><h2>A little possibility,<br><em>Shane.</em></h2><p>Let’s see where your thoughts take us.</p></div><div class="topic"><span>A slower weekend</span><span>Sample conversation</span></div><div class="messages" id="messages" role="log" aria-label="Conversation" aria-live="polite"><article class="message user"><div class="who">You</div><p>I’d like a weekend that feels less busy.</p></article><article class="message"><div class="who">Hope</div><h2 class="reply-title">Leave a little room.</h2><p>Choose one thing you’ll look forward to, and leave the rest of the morning open. A walk with no destination is a good place to start.</p><div class="idea"><div class="idea-art" aria-hidden="true"></div><div class="idea-text"><strong>A morning, unplanned.</strong>Take a short walk. Stop somewhere new. Let the day find its own pace.</div></div><div class="actions"><button id="continue">Plan a quiet morning ↗</button><button id="copy">Copy reply</button></div><p class="toast" id="copy-status" role="status"></p></article></div><p class="light-status" id="chat-status" role="status"></p></section><section class="view" id="history-view" hidden><h2 class="nav-title">Your conversations</h2><p class="sub">Pick up a thought where you left it.</p><div class="list"><button id="open-thread"><strong>A slower weekend</strong><small>Today · Sample conversation</small></button><button id="open-idea"><strong>An idea taking shape</strong><small>Yesterday · Sample conversation</small></button></div><button class="voice-back" id="history-back">← Back to conversation</button><p class="notice">Example history only. Nothing is saved or loaded from your account.</p></section><section class="view" id="settings-view" hidden><h2 class="nav-title">Make it yours.</h2><p class="sub">The voice that meets you here.</p><div class="list"><label class="setting"><span>Hope’s voice</span><select id="voice-choice"><option>Ava</option><option>Andrew</option><option>Emma</option></select></label><label class="setting"><span>Read replies aloud</span><input id="spoken" type="checkbox" checked style="width:24px;height:24px;accent-color:#a36cba"></label><div class="setting"><span>Account</span><span>Shane · demo</span></div></div><p class="notice">Preferences apply to this sample only. No audio is played and no real account is connected.</p><button class="voice-back" id="settings-back">← Back to conversation</button><button class="voice-back" id="signout" style="display:block">Simulate sign out</button><p class="toast" id="settings-status" role="status"></p></section><section class="view voice-view" id="voice-view" hidden><div class="voice-state" id="voice-state" role="status">Listening · demo</div><div class="sculpture" aria-hidden="true"><div class="piece"></div><div class="piece"></div></div><h2 id="voice-heading">Take your time.<br>I’m here.</h2><p class="timer" id="timer">00:00</p><p class="sub" id="voice-description">Simulated voice · your microphone stays off</p><div class="voice-controls"><button id="pause" aria-label="Mute simulated microphone">Mute</button><button class="main-mic mic" id="demo-turn" aria-label="Try a simulated voice turn"><svg fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><use href="#mic-symbol"/></svg></button><button id="end" aria-label="End simulated conversation">End</button></div><button class="voice-back" id="transcript">Read the conversation ↗</button></section><div class="composer-shell" id="composer-shell"><form class="composer" id="composer"><label for="text-input" style="position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden">Message Hope</label><input id="text-input" placeholder="What’s on your mind…" maxlength="1200" autocomplete="off"><div class="compose-bottom"><div class="mode"><span class="tiny-pearl" aria-hidden="true"></span>Talk it through</div><div class="compose-buttons"><button type="button" class="mic" id="start-voice" aria-label="Start voice demonstration"><svg fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><use href="#mic-symbol"/></svg></button><button class="send" type="submit" aria-label="Send message">↑</button></div></div></form></div><div class="footer">Interactive concept · sample replies · no microphone access</div><div class="home-indicator" aria-hidden="true"></div></div></section><aside class="icons"><div class="tile"><svg role="img" aria-label="Prism icon: two pearlescent forms"><use href="#prism-icon"/></svg></div><h2>Two sides of a thought.</h2><p>Two reflective forms lean toward one another. A small sculptural identity on a rich lilac tile.</p><div class="small"><div class="tile"><svg aria-hidden="true"><use href="#prism-icon"/></svg></div><div class="tile"><svg aria-hidden="true"><use href="#prism-icon"/></svg></div></div><p class="demo">Try the mic, text composer, history, and settings. All activity happens on this page.</p></aside></main><script>
const $=id=>document.getElementById(id);let timeouts=[],clock=null,seconds=0,active=false,muted=false,busy=false;function clear(){timeouts.forEach(clearTimeout);timeouts=[];clearInterval(clock);clock=null;busy=false}function view(name){document.querySelectorAll('.view').forEach(v=>v.hidden=v.id!==name+'-view');$('composer-shell').hidden=name!=='chat';$('history').textContent=name==='chat'?'☰':'‹'}function add(role,text){const article=document.createElement('article');article.className='message'+(role==='You'?' user':'');const who=document.createElement('div');who.className='who';who.textContent=role;const p=document.createElement('p');p.textContent=text;article.append(who,p);$('messages').append(article);$('chat-view').scrollTop=$('chat-view').scrollHeight}function reply(text){if(busy)return;busy=true;add('You',text);$('chat-status').textContent='Hope is finding a starting point… · demo';$('voice-state').textContent='Putting a thought together · demo';$('voice-heading').textContent='One moment.';timeouts.push(setTimeout(()=>{add('Hope','Leave the first hour open. A slow breakfast, a nearby walk, and one small thing you’re looking forward to. You can decide what comes next when you get there. (Sample reply.)');$('chat-status').textContent='Sample reply ready';$('voice-state').textContent=muted?'Microphone muted · demo':'Hope’s reply is ready · demo';$('voice-heading').textContent='A little room to breathe.';busy=false},1600))}function start(){clear();active=true;muted=false;seconds=0;$('timer').textContent='00:00';$('pause').textContent='Mute';$('pause').setAttribute('aria-pressed','false');$('voice-state').textContent='Listening · demo';$('voice-heading').innerHTML='Take your time.<br>I’m here.';view('voice');clock=setInterval(()=>{$('timer').textContent=String(Math.floor(++seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0')},1000);timeouts.push(setTimeout(()=>{if(active&&!muted)reply('Help me plan a quiet morning.')},2400))}$('start-voice').onclick=start;$('demo-turn').onclick=()=>{if(!muted)reply('Help me plan a quiet morning.')};$('pause').onclick=()=>{muted=!muted;$('pause').textContent=muted?'Unmute':'Mute';$('pause').setAttribute('aria-pressed',String(muted));$('voice-state').textContent=muted?'Microphone muted · demo':'Listening · demo'};$('end').onclick=()=>{clear();active=false;view('chat');$('chat-status').textContent='Voice demo ended. Your conversation stays here.'};$('transcript').onclick=()=>view('chat');$('history').onclick=()=>{if(!$('chat-view').hidden)view('history');else view('chat')};$('settings').onclick=()=>view('settings');$('history-back').onclick=$('settings-back').onclick=()=>view('chat');$('open-thread').onclick=()=>view('chat');$('open-idea').onclick=()=>{add('Hope','Tell me the idea in its simplest form. We can work out the next step together. (Sample history.)');view('chat')};$('composer').onsubmit=e=>{e.preventDefault();const text=$('text-input').value.trim();if(text&&!busy){$('text-input').value='';reply(text)}};$('continue').onclick=()=>reply('Help me plan a quiet morning.');$('copy').onclick=async()=>{try{await navigator.clipboard.writeText('Choose one thing you’ll look forward to, and leave the rest of the morning open.');$('copy-status').textContent='Reply copied.'}catch{$('copy-status').textContent='Copy isn’t available here. Select the reply text to copy it.'}};$('voice-choice').onchange=e=>$('settings-status').textContent=e.target.value+' selected for this demo.';$('spoken').onchange=e=>$('settings-status').textContent='Spoken replies '+(e.target.checked?'enabled':'disabled')+' as a demo preference. No audio plays.';$('signout').onclick=()=>{clear();active=false;$('settings-status').textContent='Simulated sign out complete. Your real account was not accessed.'};
</script></body></html>