Files
hope-voice-api/design/hope-interface-proposal.html

44 lines
46 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 — interface proposal</title>
<style>
:root{color-scheme:light;--bg:#fffdfd;--side:#f8f3f6;--panel:#fff;--ink:#302b40;--quiet:#706074;--line:#e6dce3;--rose:#a64270;--wash:#f8eaf1;--on:#fff;--persona:#fff2f7;--hover:#eee5ec}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:14px}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--rose);outline-offset:4px}button{border:0;background:none;min-height:44px;border-radius:8px}button:hover{background:var(--hover)}button:disabled{cursor:default;opacity:.45}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon{display:inline-flex;align-items:center;justify-content:center;width:44px}.app{display:flex;height:100dvh}.sidebar{width:252px;flex-shrink:0;background:var(--side);display:flex;flex-direction:column;padding:28px 18px 16px;border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;padding:0 10px 28px;font-size:23px;letter-spacing:-.03em;font-weight:650}.brand-square{width:27px;height:27px;background:var(--rose);border-radius:6px;display:grid;place-items:center}.brand-square:after{content:"";width:11px;height:11px;background:#fff;border-radius:2px}.new{display:flex;gap:11px;align-items:center;background:var(--panel);padding:0 13px;width:100%;border:1px solid var(--line);font-weight:550}.search{display:flex;align-items:center;gap:10px;margin:13px 0 25px;padding:0 12px;color:var(--quiet);width:100%;text-align:left}.search kbd{margin-left:auto;font-size:11px}.group{margin-bottom:23px}.group-head{display:flex;align-items:center;justify-content:space-between;padding-left:12px;margin-bottom:4px;color:var(--quiet);font-size:12px;font-weight:600;height:28px}.navrow{display:flex;align-items:center;gap:11px;min-height:41px;padding:0 12px;width:100%;text-align:left;font-size:13px}.navrow svg{width:16px;height:16px}.navrow.active{background:var(--wash);color:var(--rose);font-weight:550}.navrow .count{margin-left:auto;font-size:11px;color:var(--quiet)}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}.profile{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px}.avatar{width:31px;height:31px;display:grid;place-items:center;background:var(--wash);border-radius:50%;color:var(--rose);font-size:12px;font-weight:650}.profile small{display:block;color:var(--quiet);margin-top:3px;font-size:11px}.profile svg{margin-left:auto;width:16px}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:82px;flex-shrink:0;padding:0 38px;display:flex;align-items:center;gap:12px}.heading{min-width:0}.heading strong{font-size:15px;font-weight:550}.heading small{display:block;margin-top:6px;color:var(--quiet);font-size:12px}.heading small span{margin:0 5px;color:var(--quiet)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:6px}.badge{font-size:11px;display:flex;align-items:center;gap:6px;color:var(--quiet);margin-right:15px}.badge svg{width:12px;height:12px}.content{flex:1;overflow:auto;min-height:0;scroll-behavior:smooth}.thread{max-width:740px;margin:0 auto;padding:46px 24px 40px}.date{text-align:center;font-size:11px;color:var(--quiet);margin-bottom:34px}.user-message{margin-left:auto;width:fit-content;max-width:85%;padding:15px 20px;background:var(--wash);border-radius:14px 14px 4px 14px;font-size:15px;line-height:1.6}.assistant{margin-top:38px}.assistant-heading{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;margin-bottom:18px}.mini-square{width:20px;height:20px;border-radius:4px;background:var(--rose);display:grid;place-items:center}.mini-square:after{content:"";width:7px;height:7px;background:var(--on);border-radius:1px}.prose{font-size:15px;line-height:1.8}.prose p{margin:0 0 17px}.prose h2{font-size:16px;font-weight:600;margin:28px 0 11px}.prose ul{padding-left:20px}.prose li{padding-left:4px;margin-bottom:9px}.prose a{color:var(--rose);text-decoration:underline;text-underline-offset:3px}.message-actions{display:flex;align-items:center;gap:1px;margin-top:12px;color:var(--quiet)}.message-actions button{min-height:36px;width:36px}.message-actions svg{width:16px;height:16px}.message-actions .time{font-size:11px;margin-left:8px}.composer-area{flex-shrink:0;width:100%;max-width:788px;margin:0 auto;padding:18px 24px 15px;background:var(--bg)}.composer{border:1px solid #cdbbc7;border-radius:14px;background:var(--panel);padding:16px 16px 12px}.composer:focus-within{border-color:var(--rose)}textarea{width:100%;min-height:48px;max-height:140px;resize:none;border:0;background:none;color:var(--ink);outline:none!important;font-size:15px;line-height:1.6;padding:0 2px}textarea::placeholder{color:var(--quiet)}.composer-tools{display:flex;align-items:center;gap:7px;margin-top:8px}.tool-label{display:flex;align-items:center;gap:7px;color:var(--quiet);font-size:12px;padding:0 10px}.composer-tools .icon{color:var(--quiet)}.mode-button{font-size:12px;color:var(--quiet);padding:0 10px;display:flex;align-items:center;gap:7px}.mode-button svg{width:13px;height:13px}.right-tools{margin-left:auto;display:flex;gap:8px;align-items:center}.voice-button{height:48px;min-width:124px;display:flex;gap:10px;align-items:center;justify-content:center;background:var(--rose);color:var(--on);border-radius:9px;padding:0 13px;font-size:13px;font-weight:550}.voice-button:hover{background:#8d345d}.voice-symbol{height:24px;width:24px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:3px;background:rgba(255,255,255,.12);border-radius:4px}.voice-symbol i{width:2px;height:2px;background:#fff;border-radius:50%;align-self:center;justify-self:center}.voice-symbol i:nth-child(3n){opacity:.5}.send-button{height:44px;width:44px;background:var(--ink);color:var(--bg);border-radius:8px}.send-button:hover{background:var(--rose)}.composer-note{display:flex;justify-content:space-between;font-size:11px;color:var(--quiet);padding:10px 3px 0;gap:12px}.composer-note .hint{display:flex;align-items:center;gap:5px}.composer-note svg{height:12px;width:12px}.mobile-menu{display:none}.demo-label{position:fixed;bottom:15px;left:18px;font-size:10px;color:var(--quiet);pointer-events:none;z-index:1}.sidebar-bottom{margin-bottom:24px}.empty{max-width:590px;margin:12vh auto 0;padding:0 24px;text-align:center}.empty .brand-square{margin:0 auto 26px;width:48px;height:48px;border-radius:10px}.empty .brand-square:after{width:19px;height:19px}.empty h1{font-size:30px;font-weight:550;letter-spacing:-.03em;margin:0 0 14px}.empty p{color:var(--quiet);line-height:1.7;font-size:15px}.prompts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:30px}.prompts button{border:1px solid var(--line);padding:0 14px;font-size:12px}.voice-session{max-width:720px;margin:0 auto;padding:28px 24px 20px;text-align:center}.voice-session .eyeline{color:var(--quiet);font-size:12px;margin:8px 0 24px}.persona{width:190px;height:190px;background:var(--persona);border-radius:14px;margin:0 auto;display:grid;grid-template-columns:repeat(13,1fr);gap:5px;padding:28px}.persona i{background:var(--rose);border-radius:50%;opacity:.22;aspect-ratio:1;transition:opacity .2s,transform .2s}.persona i:nth-child(3n){opacity:.8}.persona i:nth-child(7n){opacity:.4}.live .persona i{animation:breathe 2s ease-in-out infinite;animation-delay:calc(var(--n)*40ms)}@keyframes breathe{50%{opacity:1;transform:scale(.65)}}.voice-session h2{font-size:25px;font-weight:500;letter-spacing:-.02em;margin:25px 0 8px}.voice-session .sub{font-size:13px;color:var(--quiet);margin:0}.voice-transcript{margin:30px auto 0;max-width:450px;text-align:left;font-size:14px;line-height:1.7}.voice-transcript p{padding:14px 0;border-bottom:1px solid var(--line);margin:0}.voice-transcript strong{display:block;font-size:11px;color:var(--quiet);margin-bottom:5px}.voice-toolbar{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:22px}.voice-toolbar button{padding:0 15px;display:flex;gap:7px;align-items:center;font-size:13px;border:1px solid var(--line)}.voice-toolbar .end{background:var(--ink);color:var(--bg);border:0}.voice-toolbar .end svg{width:13px;height:13px;fill:currentColor;stroke:0}.session-strip{display:flex;align-items:center;gap:9px;background:var(--wash);color:var(--rose);padding:10px 13px;border-radius:9px;font-size:12px;margin-bottom:12px}.session-strip button{margin-left:auto;min-height:30px;font-size:12px}.live-dot{height:6px;width:6px;background:var(--rose);border-radius:50%}dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:24px;width:min(440px,calc(100% - 32px))}dialog::backdrop{background:rgba(30,20,30,.28)}dialog h2{font-size:18px;margin:0 0 12px}dialog p{color:var(--quiet);line-height:1.6;font-size:13px}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.dialog-row button{background:var(--wash);padding:0 13px;font-size:12px}.search-input{border:1px solid var(--line);border-radius:7px;width:100%;height:44px;padding:0 12px;background:var(--bg);color:var(--ink)}.menu-pop{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel);color:var(--ink);position:fixed;top:66px;right:26px;left:auto;margin:0;min-width:200px}.menu-pop button{display:block;width:100%;text-align:left;padding:0 13px;font-size:13px}.toast{position:fixed;bottom:190px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:8px;font-size:12px;z-index:5}.drawer-scrim{display:none}[hidden]{display:none!important}body.dark{color-scheme:dark;--bg:#201820;--side:#261e28;--panel:#2c2330;--ink:#fff2f7;--quiet:#cbb6c7;--line:#493a49;--rose:#f0a8c8;--wash:#3b2836;--on:#201820;--persona:#3b2836;--hover:#403141}.dark .voice-button:hover{background:#f5bdd6}.dark .voice-symbol{background:rgba(0,0,0,.12)}.dark .voice-symbol i{background:var(--on)}.dark .composer{border-color:#685365}
@media(min-width:1500px){.thread{padding-top:65px}.topbar{padding:0 48px}.composer-area{padding-bottom:25px}}@media(max-width:960px){.sidebar{width:220px}.topbar{padding:0 24px}.badge{display:none}.tool-label{display:none}}@media(max-width:720px){.sidebar{position:fixed;inset:0 auto 0 0;width:268px;z-index:4;transform:translateX(-100%);transition:transform .2s}.drawer-open .sidebar{transform:none}.drawer-open .drawer-scrim{display:block;position:fixed;inset:0;background:rgba(30,20,30,.3);z-index:3;border-radius:0;width:100%;height:100%}.mobile-menu{display:inline-flex}.topbar{height:70px;padding:0 12px;gap:6px}.heading strong{font-size:13px}.heading small{font-size:11px;margin-top:4px}.topbar-right{gap:0}.topbar-right .theme-top{display:none}.thread{padding:24px 22px 20px}.date{margin-bottom:24px}.user-message{font-size:14px;padding:13px 16px}.prose{font-size:14px;line-height:1.8}.assistant{margin-top:28px}.composer-area{padding:10px 12px max(12px,env(safe-area-inset-bottom))}.composer{padding:13px 12px 10px}.composer-note{font-size:10px;justify-content:center}.composer-note .keyhint{display:none}.mode-button{padding:0 5px;font-size:11px}.voice-button{min-width:112px;height:44px;padding:0 10px;font-size:12px;gap:8px}.voice-symbol{height:22px;width:22px}.composer-tools{gap:0}.right-tools{gap:6px}.empty{margin-top:9vh}.empty h1{font-size:26px}.voice-session{padding-top:15px}.persona{width:154px;height:154px;gap:4px;padding:22px}.voice-session h2{font-size:22px}.voice-transcript{margin-top:23px}.demo-label{display:none}.toast{bottom:185px;width:max-content;max-width:90%}.voice-toolbar button{padding:0 12px}.composer-tools>.icon{width:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.search{font-size:12px;gap:8px}.search kbd{white-space:nowrap}.voice-button{position:relative;width:48px;min-width:48px;height:48px;padding:0;border-radius:9px}.voice-symbol{width:30px;height:30px;gap:3px;background:none;padding:2px}.voice-symbol i{width:3px;height:3px}.voice-button #voiceLabel{position:absolute;bottom:57px;right:0;white-space:nowrap;background:var(--ink);color:var(--bg);font-size:11px;padding:7px 9px;border-radius:5px;opacity:0;pointer-events:none}.voice-button:hover #voiceLabel,.voice-button:focus-visible #voiceLabel{opacity:1}.right-tools:before{content:'Talk';font-size:11px;color:var(--quiet);margin-right:3px}.voice-session h2:focus{outline:none}.demo-label{max-width:220px;line-height:1.4}@media(max-width:720px){.voice-button{width:48px;min-width:48px;height:48px}.right-tools{gap:8px}.right-tools:before{font-size:11px}.voice-symbol{width:30px;height:30px}}
.settings-window{width:min(850px,calc(100% - 32px));max-height:90dvh;padding:0;overflow:auto}.settings-window>.dialog-head{padding:22px 26px;border-bottom:1px solid var(--line)}.settings-window h2{margin:0}.settings-subtitle{margin:6px 0 0!important}.settings-layout{display:flex;min-height:420px}.settings-nav{width:195px;flex-shrink:0;background:var(--side);padding:18px 12px;border-right:1px solid var(--line)}.settings-nav button{width:100%;text-align:left;padding:0 12px;font-size:13px;margin-bottom:4px}.settings-nav .selected{background:var(--wash);color:var(--rose);font-weight:600}.settings-nav .admin-link{border-top:1px solid var(--line);margin-top:18px;border-radius:0;padding-top:10px;min-height:54px}.admin-link span{font-size:9px;margin-left:4px;color:var(--quiet)}.settings-body{flex:1;min-width:0;padding:26px 30px}.settings-body h3{font-size:18px;font-weight:600;margin:0 0 8px}.settings-body h4{font-size:13px;margin:24px 0 12px}.settings-body p{margin:8px 0 20px}.account-heading{display:flex;gap:12px;align-items:center;margin:22px 0}.account-heading .avatar{width:44px;height:44px;font-size:16px}.account-heading small,.dialog-row small,.admin-account small{display:block;margin-top:5px;color:var(--quiet);font-size:11px;line-height:1.5}.field-label{display:block;font-size:12px;font-weight:550;margin:15px 0 8px}.settings-primary{background:var(--rose);color:var(--on);padding:0 16px;margin:15px 0;font-size:12px;font-weight:550}.settings-primary:hover{background:var(--ink);color:var(--bg)}.settings-preview{padding:14px 26px;background:var(--side);border-top:1px solid var(--line);color:var(--quiet);font-size:11px}.settings-body select,#createAccountDialog select{border:1px solid var(--line);padding:10px 12px;border-radius:7px;background:var(--panel);color:var(--ink);max-width:200px;font:inherit;font-size:12px;min-height:44px}.theme-options{display:flex;gap:8px;flex-wrap:wrap}.theme-options button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:0 12px;font-size:12px}.theme-options i{height:12px;width:12px;border-radius:50%}.theme-options .selected{border-color:var(--rose);background:var(--wash)}.danger-text{color:#a32438}.dark .danger-text{color:#ff9aab}.admin-title{display:flex;align-items:center;justify-content:space-between}.admin-title button{font-size:12px;color:var(--quiet);padding:0 10px}.admin-note{font-size:11px;padding:12px;background:var(--wash);line-height:1.6;border-radius:7px;margin:14px 0}.admin-account{display:flex;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid var(--line)}.admin-account>div{flex:1;min-width:0}.admin-account strong{font-size:13px}.admin-account button{padding:0 10px;font-size:12px;background:var(--wash)}.status-pill{font-size:10px;color:var(--quiet);background:var(--side);padding:6px 8px;border-radius:6px;white-space:nowrap}.status-pill.pending{color:var(--rose);background:var(--wash)}@media(max-width:720px){.settings-window{width:calc(100% - 20px);max-height:94dvh}.settings-window>.dialog-head{padding:17px}.settings-layout{display:block}.settings-nav{width:100%;display:flex;overflow-x:auto;gap:4px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line)}.settings-nav button{width:auto;white-space:nowrap;padding:0 10px;margin:0}.settings-nav .admin-link{border:0;margin:0;padding:0 10px;min-height:44px;border-radius:8px}.settings-body{padding:22px 18px;min-height:390px}.settings-preview{padding:12px 18px}.admin-account{gap:7px}.admin-account small{font-size:10px}.dialog-row{gap:12px}.settings-body select{max-width:145px}.settings-body .dialog-row strong{font-size:12px}}
</style></head><body>
<svg hidden><defs><symbol id="plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol><symbol id="search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></symbol><symbol id="folder" viewBox="0 0 24 24"><path d="M3 7V5h6l2 2h10v13H3Z"/></symbol><symbol id="pin" viewBox="0 0 24 24"><path d="m9 3 6 0-1 7 4 4H6l4-4ZM12 14v7"/></symbol><symbol id="more" viewBox="0 0 24 24"><circle cx="5" cy="12" r=".8"/><circle cx="12" cy="12" r=".8"/><circle cx="19" cy="12" r=".8"/></symbol><symbol id="chevron" viewBox="0 0 24 24"><path d="m8 10 4 4 4-4"/></symbol><symbol id="attach" viewBox="0 0 24 24"><path d="m8 13 7-7a3 3 0 0 1 4 4L9 20a5 5 0 0 1-7-7L13 2"/></symbol><symbol id="arrow" viewBox="0 0 24 24"><path d="M12 19V5m-6 6 6-6 6 6"/></symbol><symbol id="lock" viewBox="0 0 24 24"><rect x="6" y="10" width="12" height="11" rx="2"/><path d="M8 10V6a4 4 0 0 1 8 0v4"/></symbol><symbol id="copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V4H4v12h4"/></symbol><symbol id="sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1 1m12 12 1 1M5 19l1-1M18 6l1-1"/></symbol><symbol id="menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></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 20v2"/></symbol><symbol id="close" viewBox="0 0 24 24"><path d="m6 6 12 12M6 18 18 6"/></symbol><symbol id="branch" viewBox="0 0 24 24"><circle cx="6" cy="4" r="2"/><circle cx="6" cy="20" r="2"/><circle cx="18" cy="6" r="2"/><path d="M6 6v12m0-7h6a6 6 0 0 0 6-3"/></symbol><symbol id="activity" viewBox="0 0 24 24"><path d="M3 12h4l3-7 4 14 3-7h4"/></symbol></defs></svg>
<div class="app"><button class="drawer-scrim" aria-label="Close navigation" onclick="drawer(false)"></button><aside class="sidebar" aria-label="Main navigation"><div class="brand"><span class="brand-square" aria-hidden="true"></span>Hope</div><button class="new" id="newChat"><svg><use href="#plus"/></svg>New conversation</button><button class="search" onclick="openDialog('searchDialog')"><svg><use href="#search"/></svg>Search conversations<kbd>⌘ K</kbd></button><nav><div class="group"><div class="group-head">Workspaces<button class="icon" aria-label="Create workspace" onclick="openDialog('workspaceDialog')"><svg style="width:15px"><use href="#plus"/></svg></button></div><button class="navrow" onclick="openDialog('workspaceDialog')"><svg><use href="#folder"/></svg>Personal<span class="count">8</span></button><button class="navrow" onclick="openDialog('workspaceDialog')"><svg><use href="#folder"/></svg>Writing<span class="count">3</span></button></div><div class="group"><div class="group-head">Pinned</div><button class="navrow active" id="sampleChat"><svg><use href="#pin"/></svg>A little room to reset</button><button class="navrow" onclick="toast('Sample conversation · preview only')">Ideas worth keeping</button></div><div class="group"><div class="group-head">Recent</div><button class="navrow" onclick="toast('Sample conversation · preview only')">Planning a slower weekend</button><button class="navrow" onclick="toast('Sample conversation · preview only')">A note to future me</button><button class="navrow" onclick="toast('Sample conversation · preview only')">The things I want to make</button></div></nav><div class="sidebar-bottom"><button class="navrow" onclick="openDialog('libraryDialog')"><svg><use href="#folder"/></svg>Library</button><button class="navrow" onclick="openDialog('activityDialog')"><svg><use href="#activity"/></svg>Activity</button><button class="profile" onclick="openDialog('settingsDialog')"><span class="avatar">S</span><span>Shane<small>Personal account</small></span><svg><use href="#chevron"/></svg></button></div></aside>
<main class="main" id="main"><header class="topbar"><button class="icon mobile-menu" aria-label="Open navigation" onclick="drawer(true)"><svg><use href="#menu"/></svg></button><div class="heading"><strong id="title">A little room to reset</strong><small>Personal <span>/</span> Conversation</small></div><div class="topbar-right"><span class="badge"><svg><use href="#lock"/></svg>Only you</span><button class="icon theme-top" aria-label="Switch light or dark appearance" onclick="theme()"><svg><use href="#sun"/></svg></button><button class="icon" aria-label="Conversation actions" popovertarget="actions"><svg><use href="#more"/></svg></button></div></header>
<div class="content" id="content"><section class="thread" id="thread"><div class="date">Today</div><div class="user-message">Help me make a little room for myself this week.</div><article class="assistant"><div class="assistant-heading"><span class="mini-square" aria-hidden="true"></span>Hope</div><div class="prose"><p>Let’s make it feel lighter, not turn it into another project.</p><p>You don’t need a perfect reset. Just a few small places in the week that belong to you.</p><h2>Start with three small things</h2><ul><li><strong>One quiet morning.</strong> Keep the first twenty minutes free of messages. Coffee, a window, whatever feels like yours.</li><li><strong>One thing you can let go of.</strong> Find a commitment you made out of habit, not because it matters to you.</li><li><strong>One thing to look forward to.</strong> Put something small on the calendar before the week fills itself.</li></ul><p>What’s taking up the most space right now—your schedule, or what’s on your mind?</p></div><div class="message-actions"><button class="icon" aria-label="Copy response" onclick="toast('Response copied · preview')"><svg><use href="#copy"/></svg></button><button class="icon" aria-label="Branch conversation" onclick="toast('New branch · preview')"><svg><use href="#branch"/></svg></button><button class="icon" aria-label="More response actions" onclick="toast('Response actions · preview')"><svg><use href="#more"/></svg></button><span class="time">Just now</span></div></article></section>
<section class="empty" id="empty" hidden><span class="brand-square" aria-hidden="true"></span><h1>A little space for you.</h1><p>Think out loud, work something through, or make something new.<br>You can type, or talk to Hope.</p><div class="prompts"><button onclick="suggest('Help me think something through.')">Think something through</button><button onclick="suggest('Help me make a plan.')">Make a plan</button><button onclick="suggest('Let’s explore an idea.')">Explore an idea</button></div></section>
<section class="voice-session live" id="voiceSession" hidden aria-labelledby="voiceHeading"><div class="eyeline">Realtime conversation · interaction preview</div><div class="persona" id="persona" aria-hidden="true"></div><h2 id="voiceHeading">I’m listening.</h2><p class="sub" id="voiceSub">Just talk. You can interrupt me naturally.</p><div class="voice-toolbar"><button id="mute" aria-pressed="false"><svg><use href="#mic"/></svg><span>Mute</span></button><button onclick="openDialog('voiceDialog')">Ava <svg style="width:14px"><use href="#chevron"/></svg></button><button class="end" id="endVoice"><svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>End</button></div><div class="voice-transcript"><p><strong>You · sample transcript</strong>My schedule, mostly. Everything feels a little crowded.</p><p><strong>Hope · sample transcript</strong>Then let’s find one thing you can take off your plate. What could wait until next week?</p></div><button style="margin-top:18px;font-size:12px;color:var(--rose)" id="demoState">Preview Hope speaking</button></section></div>
<div class="composer-area"><div class="session-strip" id="sessionStrip" hidden><span class="live-dot"></span><span id="stripText">Voice conversation active · preview</span><button id="backText">Back to text</button></div><form class="composer" id="composer"><label for="message" hidden>Message Hope</label><textarea id="message" rows="2" placeholder="What’s on your mind?"></textarea><div class="composer-tools"><button type="button" class="icon" aria-label="Attach a file" onclick="openDialog('attachmentDialog')"><svg><use href="#plus"/></svg></button><button type="button" class="mode-button" id="research" aria-pressed="false">Research<svg><use href="#chevron"/></svg></button><button type="button" class="tool-label" onclick="openDialog('modelDialog')">Auto<svg style="width:12px"><use href="#chevron"/></svg></button><div class="right-tools"><button class="voice-button" type="button" id="startVoice" aria-label="Start realtime voice conversation"><span class="voice-symbol" aria-hidden="true"></span><span id="voiceLabel">Talk to Hope</span></button><button type="submit" class="icon send-button" id="send" aria-label="Send message" disabled><svg><use href="#arrow"/></svg></button></div></div></form><div class="composer-note"><span class="hint"><svg><use href="#lock"/></svg>Your conversation, private to you.</span><span class="keyhint">Enter to send · Shift + Enter for a new line</span></div></div></main></div><div class="demo-label">DESIGN PREVIEW · No microphone or backend connection</div>
<div id="actions" popover class="menu-pop"><button onclick="toast('Conversation pinned · preview')">Pin conversation</button><button onclick="openDialog('renameDialog');document.getElementById('actions').hidePopover()">Rename</button><button onclick="toast('Move to workspace · preview')">Move to workspace</button><button onclick="toast('Download conversation · preview')">Export conversation</button><button onclick="toast('Archive conversation · preview')">Archive</button><button onclick="toast('Delete requires confirmation in production')">Delete…</button></div>
<dialog id="settingsDialog" class="settings-window" aria-labelledby="settingsTitle"><div class="dialog-head"><div><h2 id="settingsTitle">Settings</h2><p class="settings-subtitle">Your Hope, the way you like it.</p></div><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close settings"><svg><use href="#close"/></svg></button></div><div class="settings-layout"><nav class="settings-nav" aria-label="Settings sections"><button class="selected" onclick="settingsPage('profile',this)">Account</button><button onclick="settingsPage('appearance',this)">Appearance</button><button onclick="settingsPage('preferences',this)">Voice & model</button><button onclick="settingsPage('privacy',this)">Memory & data</button><button onclick="settingsPage('security',this)">Security</button><button id="adminTab" class="admin-link" onclick="settingsPage('admin',this)">Administration <span>Admin</span></button></nav><div class="settings-body"><section data-settings="profile"><h3>Your account</h3><p>Personal settings belong here, separate from your conversations.</p><div class="account-heading"><span class="avatar">S</span><div><strong>Shane</strong><small>@shane · Administrator · sample account</small></div></div><label class="field-label" for="displayName">Display name</label><input id="displayName" class="search-input" value="Shane"><div class="dialog-row"><span>Username</span><span>shane</span></div><button class="settings-primary" onclick="toast('Profile saved in this preview only')">Save changes</button><div class="dialog-row"><div><strong>Sign out</strong><small>End this session on this device.</small></div><button onclick="confirmPreview('Sign out of Hope?', 'Production will end this device’s session and clear private local state. This preview will not sign you out.')">Sign out</button></div></section><section data-settings="appearance" hidden><h3>Appearance</h3><p>One visual identity across text, realtime voice, and your devices.</p><div class="dialog-row"><span>Appearance</span><select aria-label="Appearance" onchange="document.body.classList.toggle('dark',this.value==='dark'||this.value==='system'&&matchMedia('(prefers-color-scheme:dark)').matches)"><option>Light</option><option value="dark">Dark</option><option value="system">System</option></select></div><h4>Color theme</h4><div class="theme-options"><button class="selected" onclick="previewPalette('opal',this)"><i style="background:#a64270"></i>Opal Pink</button><button onclick="previewPalette('graphite',this)"><i style="background:#505969"></i>Graphite</button><button onclick="previewPalette('ocean',this)"><i style="background:#27658c"></i>Ocean</button><button onclick="previewPalette('sage',this)"><i style="background:#3c704d"></i>Sage</button><button onclick="previewPalette('lavender',this)"><i style="background:#70529c"></i>Lavender</button></div></section><section data-settings="preferences" hidden><h3>Voice & model</h3><p>Voice is a live conversation—not a dictation feature.</p><div class="dialog-row"><div><strong>Hope’s voice</strong><small>Applies to spoken responses.</small></div><select aria-label="Preferred voice"><option>Ava · sample</option><option>Andrew · sample</option></select></div><div class="dialog-row"><div><strong>Model</strong><small>Production lists your available models.</small></div><select aria-label="Preferred model"><option>Account default · sample</option></select></div><div class="dialog-row"><span>Thinking</span><select aria-label="Thinking level"><option>None</option><option>Low</option><option selected>Medium</option><option>High</option></select></div><p>Model and thinking changes apply to the next request, without interrupting an active conversation. Voice options here are illustrative.</p><button class="settings-primary" onclick="toast('Preferences saved in this preview only')">Save preferences</button></section><section data-settings="privacy" hidden><h3>Memory & data</h3><p>You control retained personal context and files. Workspaces organize conversations; they do not isolate tool access.</p><div class="dialog-row"><div><strong>Saved memory</strong><small>Review what Hope remembers.</small></div><button onclick="toast('Memory editor opens here after implementation')">Review</button></div><div class="dialog-row"><div><strong>Personal context</strong><small>Review your user profile notes.</small></div><button onclick="toast('Personal context editor · preview')">Review</button></div><div class="dialog-row"><span>Uploaded files & artifacts</span><button onclick="openDialog('libraryDialog')">Open Library</button></div><div class="dialog-row"><div><strong>Clear saved memory</strong><small>Requires explicit confirmation.</small></div><button class="danger-text" onclick="confirmPreview('Clear saved memory?', 'This does not delete conversations, files, or all Hermes history. An active session may retain cached context. No data is changed in this preview.')">Clear…</button></div><p>Temporary no-memory chats are not currently supported. Deleting a conversation is not a promise of complete upstream data erasure.</p></section><section data-settings="security" hidden><h3>Security</h3><p>Keep account credentials and session controls out of the voice experience.</p><div class="dialog-row"><div><strong>Password</strong><small>Reset through an administrator.</small></div><button onclick="toast('Contact your administrator for a password reset')">Reset guidance</button></div><div class="dialog-row"><div><strong>This session</strong><small>Current browser · illustrative status</small></div><span class="status-pill">Signed in</span></div><p>Current-device sign-out is supported. A full session/device list and remote session revocation are proposed extensions, not existing product capabilities.</p><div class="dialog-row"><span>Sign out of this device</span><button onclick="confirmPreview('Sign out?', 'End the current authenticated session. No live session is changed in this preview.')">Sign out…</button></div></section><section data-settings="admin" hidden><div class="admin-title"><h3>Administration</h3><button onclick="toast('Provisioning status refreshed · preview')">Refresh</button></div><p>Manage access and private assistant provisioning. Administration does not expose other users’ conversation content.</p><div class="admin-note">Administrator-only · illustrated role gate, not real authorization. Production must enforce this on the server.</div><div id="adminAccounts"><div class="admin-account"><div><strong>Shane</strong><small>@shane · Administrator</small></div><span class="status-pill">Ready</span><button aria-label="Manage Shane account" onclick="manageAccount('Shane','Administrator')">Manage</button></div><div class="admin-account"><div><strong>Alex</strong><small>@alex · User</small></div><span class="status-pill">Ready</span><button aria-label="Manage Alex account" onclick="manageAccount('Alex','User')">Manage</button></div><div class="admin-account"><div><strong>Jamie</strong><small>@jamie · User</small></div><span class="status-pill pending">Provisioning</span><button aria-label="Manage Jamie account" onclick="manageAccount('Jamie','User')">Manage</button></div></div><button class="settings-primary" onclick="openDialog('createAccountDialog')">+ Create account</button><div class="dialog-row"><div><strong>Preview role</strong><small>Demonstrates hiding admin controls.</small></div><button id="rolePreview" onclick="previewRole()">View as user</button></div></section></div></div><footer class="settings-preview">Design preview · sample accounts · no account or infrastructure changes</footer></dialog>
<dialog id="createAccountDialog" aria-labelledby="createTitle"><div class="dialog-head"><h2 id="createTitle">Create account</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close create account">×</button></div><form id="createPreviewAccount"><label class="field-label" for="newUser">Username</label><input class="search-input" id="newUser" required maxlength="64" autocomplete="off"><label class="field-label" for="newName">Display name</label><input class="search-input" id="newName" required maxlength="120"><label class="field-label" for="newRole">Role</label><select id="newRole"><option>User</option><option>Administrator</option></select><label class="field-label" for="newPassword">Initial password</label><input class="search-input" id="newPassword" type="password" minlength="12" required autocomplete="new-password"><p>Use a fictional password for this preview. Nothing is transmitted or persisted. Production provisions a separate private assistant.</p><button class="settings-primary" type="submit">Create sample account</button></form></dialog>
<dialog id="manageAccountDialog" aria-labelledby="manageTitle"><div class="dialog-head"><h2 id="manageTitle">Manage account</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close manage account">×</button></div><div class="dialog-row"><span>Role</span><span id="managedRole"></span></div><p>Role is visible at creation. Changing an existing role requires an explicitly supported server contract; no fake role editor is offered here.</p><div class="dialog-row"><span>Private assistant</span><span>Owned by this account</span></div><button class="navrow" onclick="toast('Provisioning retry · simulated only')">Retry failed provisioning</button><button class="navrow" onclick="confirmPreview('Reset this account’s password?', 'Production requires a new password and revokes existing sessions. This preview does not alter credentials.')">Reset password…</button><button class="navrow danger-text" onclick="confirmPreview('Delete this account?', 'Production must explicitly confirm account deletion and its retention policy. No account, container, or private files are deleted here.')">Delete account…</button></dialog>
<dialog id="confirmDialog" aria-labelledby="confirmTitle"><h2 id="confirmTitle"></h2><p id="confirmBody"></p><div style="display:flex;justify-content:flex-end;gap:8px"><button onclick="this.closest('dialog').close()">Cancel</button><button class="settings-primary" onclick="this.closest('dialog').close();toast('Confirmed in preview only · no live changes')">Confirm preview</button></div></dialog>
<dialog id="searchDialog"><div class="dialog-head"><h2>Find a conversation</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close search">×</button></div><input class="search-input" placeholder="Search titles and messages" aria-label="Search titles and messages"><button class="navrow" onclick="showSample();this.closest('dialog').close()">A little room to reset</button><p>Sample search results · no account data is accessed.</p></dialog>
<dialog id="workspaceDialog"><div class="dialog-head"><h2>Your workspaces</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close workspaces">×</button></div><div class="dialog-row"><span>Personal</span><span>8 conversations</span></div><div class="dialog-row"><span>Writing</span><span>3 conversations</span></div><p>Group conversations and set instructions here. Workspace editing belongs in this view—not beneath every sidebar item.</p></dialog>
<dialog id="libraryDialog"><div class="dialog-head"><h2>Library</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close library">×</button></div><div class="dialog-row"><span>Saved artifacts</span><span>2</span></div><div class="dialog-row"><span>Uploaded files</span><span>4</span></div><p>Files and saved work live together. They don’t compete with your conversation history.</p></dialog>
<dialog id="activityDialog"><div class="dialog-head"><h2>Activity</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close activity">×</button></div><div class="dialog-row"><span>Weekly reflection</span><span>Paused · sample</span></div><p>Scheduled tasks and assistant activity. No tasks run from this preview.</p></dialog>
<dialog id="attachmentDialog"><div class="dialog-head"><h2>Add to the conversation</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close attachments">×</button></div><button class="navrow" onclick="toast('File picker · preview only')"><svg><use href="#attach"/></svg>Upload a file or photo</button><button class="navrow" onclick="openDialog('libraryDialog')"><svg><use href="#folder"/></svg>Choose from your library</button><p>Documents and images appear as removable attachment chips above the composer controls.</p></dialog>
<dialog id="voiceDialog"><div class="dialog-head"><h2>Hope’s voice</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close voice selection">×</button></div><button class="navrow active" onclick="toast('Ava selected · preview')">Ava · Warm and natural ✓</button><button class="navrow" onclick="toast('Voice selection · preview')">Andrew · Calm and clear</button><p>Your voice choice applies to the conversation. This preview plays no audio.</p></dialog>
<dialog id="modelDialog"><div class="dialog-head"><h2>Model & thinking</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close model selection">×</button></div><div class="dialog-row"><span>Model</span><span>Auto · sample</span></div><div class="dialog-row"><span>Thinking</span><span>Standard</span></div><p>Production will show the account’s actual available models, not invented choices.</p></dialog>
<dialog id="renameDialog"><h2>Rename conversation</h2><form method="dialog"><input class="search-input" id="renameValue" aria-label="Conversation name" value="A little room to reset"><div style="display:flex;justify-content:flex-end;gap:8px;margin-top:15px"><button>Cancel</button><button id="renameSave" style="padding:0 15px;background:var(--wash)">Save</button></div></form></dialog>
<div class="toast" role="status" id="toast" hidden></div>
<script>
const $=id=>document.getElementById(id);let voice=false,voiceVisible=false,speaking=false,previous='thread',toastTimer;document.querySelectorAll('.voice-symbol').forEach(el=>{for(let i=0;i<25;i++)el.append(document.createElement('i'))});for(let i=0;i<169;i++){const d=document.createElement('i');d.style.setProperty('--n',i%13);$('persona').append(d)}
function toast(text){$('toast').textContent=text;$('toast').hidden=false;clearTimeout(toastTimer);toastTimer=setTimeout(()=>$('toast').hidden=true,2600)}function openDialog(id){drawer(false);$(id).showModal()}function theme(){document.body.classList.toggle('dark')}function drawer(on){document.body.classList.toggle('drawer-open',on);$('main').inert=on;document.querySelector('.mobile-menu').setAttribute('aria-expanded',on)}function display(id){['thread','empty','voiceSession'].forEach(x=>$(x).hidden=x!==id);if(id==='voiceSession'){$(previous).hidden=false;$('content').prepend($('voiceSession'))} $('content').scrollTop=0}function showSample(){if(voice)endVoice();previous='thread';display('thread');$('title').textContent='A little room to reset';drawer(false)}function suggest(text){$('message').value=text;$('message').dispatchEvent(new Event('input'));$('message').focus()}
$('newChat').onclick=()=>{if(voice)endVoice();previous='empty';display('empty');$('title').textContent='New conversation';$('message').value='';$('send').disabled=true;drawer(false);$('message').focus()};$('sampleChat').onclick=showSample;
$('message').oninput=()=>{$('send').disabled=voice||!$('message').value.trim()};$('message').onkeydown=e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();if(!$('send').disabled)$('composer').requestSubmit()}};$('composer').onsubmit=e=>{e.preventDefault();const text=$('message').value.trim();if(!text)return;if(voice){toast('End voice to send. Your typed draft is kept.');return}if(previous==='empty'){$('thread').replaceChildren();previous='thread';$('title').textContent=text.slice(0,35)}display('thread');const msg=document.createElement('div');msg.className='user-message';msg.textContent=text;msg.style.marginTop='24px';$('thread').append(msg);const reply=document.createElement('div');reply.className='assistant prose';reply.textContent='This is an interface preview. Your message stays here locally; no model or backend is connected.';$('thread').append(reply);$('message').value='';$('send').disabled=true;$('content').scrollTop=$('content').scrollHeight};
$('startVoice').onclick=()=>{voice=true;voiceVisible=true;display('voiceSession');$('send').disabled=true;$('sessionStrip').hidden=false;$('voiceLabel').textContent='Return to voice';$('startVoice').setAttribute('aria-label','Return to realtime voice conversation');$('voiceHeading').focus();toast('Voice interaction preview · microphone is not accessed')};function endVoice(){voice=false;voiceVisible=false;display(previous);$('send').disabled=!$('message').value.trim();$('backText').textContent='Back to text';$('sessionStrip').hidden=true;$('voiceLabel').textContent='Talk to Hope';$('startVoice').setAttribute('aria-label','Start realtime voice conversation');$('startVoice').focus()}$('endVoice').onclick=endVoice;$('backText').onclick=()=>{voiceVisible=!voiceVisible;display(voiceVisible?'voiceSession':previous);$('backText').textContent=voiceVisible?'Back to text':'Show voice';$('stripText').textContent='Voice remains active · preview';$('message').focus()};$('mute').onclick=()=>{const muted=$('mute').getAttribute('aria-pressed')!=='true';$('mute').setAttribute('aria-pressed',muted);$('mute').querySelector('span').textContent=muted?'Unmute':'Mute';$('voiceHeading').textContent=muted?'Microphone paused.':speaking?'I’m with you.':'I’m listening.';$('voiceSub').textContent=muted?'You’re still connected. Unmute whenever you’re ready.':'Just talk. You can interrupt me naturally.'};$('demoState').onclick=()=>{speaking=!speaking;$('voiceHeading').textContent=speaking?'I’m with you.':'I’m listening.';$('voiceSub').textContent=speaking?'Hope is speaking. You can interrupt anytime.':'Just talk. You can interrupt me naturally.';$('demoState').textContent=speaking?'Preview listening':'Preview Hope speaking'};$('research').onclick=()=>{const on=$('research').getAttribute('aria-pressed')!=='true';$('research').setAttribute('aria-pressed',on);$('research').style.color=on?'var(--rose)':'var(--quiet)';toast(on?'Research mode · preview':'Standard conversation · preview')};$('renameSave').onclick=()=>{$('title').textContent=$('renameValue').value||'Untitled conversation'};document.addEventListener('keydown',e=>{if((e.metaKey||e.ctrlKey)&&e.key==='k'){e.preventDefault();openDialog('searchDialog')}if(e.key==='Escape')drawer(false)});
function settingsPage(name,button){document.querySelectorAll('[data-settings]').forEach(el=>el.hidden=el.dataset.settings!==name);document.querySelectorAll('.settings-nav button').forEach(el=>el.classList.toggle('selected',el===button));}
function confirmPreview(title,body){$('confirmTitle').textContent=title;$('confirmBody').textContent=body;openDialog('confirmDialog')}
function manageAccount(name,role){$('manageTitle').textContent='Manage '+name;$('managedRole').textContent=role;openDialog('manageAccountDialog')}
function previewRole(){const user=!$('adminTab').hidden;$('adminTab').hidden=user;if(user){settingsPage('profile',document.querySelector('.settings-nav button'));toast('User preview · administration hidden. Reopen this HTML to restore admin preview.')}}
function previewPalette(name,button){const colors={opal:'#a64270',graphite:'#505969',ocean:'#27658c',sage:'#3c704d',lavender:'#70529c'};document.documentElement.style.setProperty('--rose',colors[name]);document.querySelectorAll('.theme-options button').forEach(el=>el.classList.toggle('selected',el===button));toast('Theme accent preview · '+name)}
$('createPreviewAccount').onsubmit=e=>{e.preventDefault();const name=$('newName').value,user=$('newUser').value,role=$('newRole').value;const row=document.createElement('div');row.className='admin-account';const info=document.createElement('div'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=name;small.textContent='@'+user+' · '+role;info.append(strong,small);const status=document.createElement('span');status.className='status-pill pending';status.textContent='Sample only';const manage=document.createElement('button');manage.textContent='Manage';manage.onclick=()=>manageAccount(name,role);row.append(info,status,manage);$('adminAccounts').append(row);$('newPassword').value='';$('createAccountDialog').close();toast('Sample account added · no provisioning or saved password')};
</script></body></html>