kami
311c5cb1cd
- Rewrote ui.css with design tokens, card/btn/badge/dot components - All pages wrapped in <main class=page> with max-width container - Replaced inline <style> blocks with ui.css classes - passkey page now uses shared nav.site template - PWA voice page unified under shared nav.site (no more separate tab nav) - Inline lang toggle moved from nav to voice page body
112 lines
5.1 KiB
HTML
112 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
|
<meta name="theme-color" content="#111">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel=stylesheet href=/ui.css>
|
|
<script defer src="/app.js"></script>
|
|
<style>
|
|
/* Voice page layout — the shared nav.site handles everything above */
|
|
html,body{height:100%}
|
|
body{display:flex;flex-direction:column;padding:1rem}
|
|
.voice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 0}
|
|
|
|
/* Voice PTT button */
|
|
#btn{width:140px;height:140px;border-radius:50%;border:4px solid var(--accent);background:var(--panel);color:var(--accent);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
|
|
#btn:active,#btn.active{background:rgba(0,170,255,.13);border-color:var(--ok);color:var(--ok);transform:scale(1.05)}
|
|
#btn:disabled{opacity:.3;border-color:var(--border)}
|
|
|
|
#status{font-size:var(--fs-sm);color:var(--muted);min-height:1.2em}
|
|
#log{width:100%;max-width:480px;max-height:40vh;overflow-y:auto;font-size:var(--fs-sm);color:var(--muted);line-height:1.6;padding:var(--space-sm);border-top:1px solid var(--line)}
|
|
#log .reply{color:var(--ok)}
|
|
#log .error{color:var(--err)}
|
|
#log .push{color:#88f}
|
|
|
|
/* Cheatsheet */
|
|
#cheat{width:100%;max-width:480px;font-size:var(--fs-sm);border-top:1px solid var(--line);color:var(--muted)}
|
|
#cheat summary{cursor:pointer;padding:var(--space-sm) 0;color:var(--accent);letter-spacing:.05em;text-transform:uppercase;font-size:var(--fs-xs);user-select:none}
|
|
#cheat dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;padding:.25rem 0 .5rem}
|
|
#cheat dt{color:var(--ok);font-weight:600;white-space:nowrap}
|
|
#cheat dd{color:var(--soft);line-height:1.5}
|
|
#cheat dd span{color:var(--dim)}
|
|
.cheat-en{display:revert}
|
|
.cheat-ru{display:none}
|
|
html[data-lang=ru] .cheat-en{display:none}
|
|
html[data-lang=ru] .cheat-ru{display:revert}
|
|
|
|
/* Lang toggle inline (not in nav) */
|
|
.lang-toggle{display:flex;gap:0;justify-content:center;margin-top:1rem}
|
|
.lang-toggle span{font-size:var(--fs-xs);color:var(--dim);cursor:pointer;padding:.2rem .5rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);transition:color var(--transition);user-select:none}
|
|
.lang-toggle span:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);border-right:none}
|
|
.lang-toggle span:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none}
|
|
.lang-toggle span.active{color:var(--accent);border-color:var(--accent);background:rgba(0,170,255,.08)}
|
|
.lang-toggle span:hover{color:var(--fg)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class=site>
|
|
<a href=/ class=active>voice</a>
|
|
<a href=/dash>dash</a>
|
|
<a href=/history>history</a>
|
|
<a href=/trace>trace</a>
|
|
<a href=/notifications>notifications</a>
|
|
<a href=/tools>tools</a>
|
|
<a href=/auth/passkey>passkey</a>
|
|
</nav>
|
|
<div class=voice>
|
|
<h1>Maven Voice</h1>
|
|
<div id="status">tap & hold to speak</div>
|
|
<button id="btn" type="button">🎙</button>
|
|
<div id="log"></div>
|
|
<details id="cheat">
|
|
<summary>Cheatsheet</summary>
|
|
<dl>
|
|
<dt>Act</dt>
|
|
<dd class="cheat-ru">включи свет · сделай громче</dd>
|
|
<dd class="cheat-en">restart nginx · turn on the light</dd>
|
|
<dt>Reminder</dt>
|
|
<dd class="cheat-ru">напомни через 4 часа размяться</dd>
|
|
<dd class="cheat-en">remind me tomorrow at 8am to call the doctor</dd>
|
|
<dt>Fact</dt>
|
|
<dd class="cheat-ru">выпил кофе · вес 73 кг</dd>
|
|
<dd class="cheat-en">ran 3 kilometers</dd>
|
|
<dt>Note</dt>
|
|
<dd class="cheat-ru">запиши рецепт блинов</dd>
|
|
<dd class="cheat-en">note: add a backup job for the db</dd>
|
|
<dt>Query</dt>
|
|
<dd class="cheat-ru">какой сегодня день · какой прогноз погоды</dd>
|
|
<dd class="cheat-en">what version are you · what's the weather</dd>
|
|
<dt>System</dt>
|
|
<dd class="cheat-ru">включи тихий режим · как загрузка системы</dd>
|
|
<dd class="cheat-en">quiet mode on · system load</dd>
|
|
</dl>
|
|
</details>
|
|
<div class=lang-toggle>
|
|
<span class="active" data-lang="ru">RU</span>
|
|
<span data-lang="en">EN</span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var lang = new URLSearchParams(window.location.search).get('lang') || 'ru';
|
|
if (lang !== 'en') lang = 'ru';
|
|
document.documentElement.setAttribute('data-lang', lang);
|
|
|
|
document.querySelectorAll('.lang-toggle span').forEach(function(el) {
|
|
el.addEventListener('click', function() {
|
|
var l = el.dataset.lang;
|
|
document.documentElement.setAttribute('data-lang', l);
|
|
document.querySelectorAll('.lang-toggle span').forEach(function(b) { b.classList.remove('active'); });
|
|
el.classList.add('active');
|
|
var url = new URL(window.location);
|
|
url.searchParams.set('lang', l);
|
|
history.replaceState(null, '', url);
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|