6 lines
20 KiB
HTML
6 lines
20 KiB
HTML
<!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>
|