kami
7a95097cc7
- Redesign dash/history/notifications/trace pages with unified CSS framework (ui.css): cards, badges, scrollable tables, responsive grid, PWA shell. - Add /voice page with chat-bubble transcript, listening indicator, and push-to-talk button for voice interaction. - Add mavweb.js: client-side JS for live transcript polling, auto-scroll, push-to-talk, and service-worker registration. - Update PWA manifest, icon, and service-worker for installable web app. - Add WebAuthn credential management (register/list/delete) with modal UI. - Update main.go: /voice route, WebAuthn handlers, new page navigation. - Update handlers_test.go for new voice and WebAuthn routes.
82 lines
4.6 KiB
HTML
82 lines
4.6 KiB
HTML
{{template "shellTop" "voice"}}
|
|
<style>
|
|
.voice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 0}
|
|
#btn{width:140px;height:140px;border-radius:50%;border:3px solid var(--ethos-accent);background:var(--ethos-surface0);color:var(--ethos-accent);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--ethos-motion);user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
|
|
#btn:active,#btn.active{background:rgba(111,191,139,.12);border-color:var(--ethos-green);color:var(--ethos-green);transform:scale(1.05)}
|
|
#btn:disabled{opacity:.3;border-color:var(--ethos-border)}
|
|
#status{font-size:var(--ethos-fs-sm);color:var(--ethos-muted);min-height:1.2em}
|
|
#log{width:100%;max-width:480px;max-height:40vh;overflow-y:auto;font-size:var(--ethos-fs-sm);color:var(--ethos-muted);line-height:1.6;padding:var(--ethos-space-2);border-top:1px solid var(--ethos-border)}
|
|
#log .reply{color:var(--ethos-green)}
|
|
#log .error{color:var(--ethos-red)}
|
|
#log .push{color:var(--ethos-purple)}
|
|
#cheat{width:100%;max-width:480px;font-size:var(--ethos-fs-sm);border-top:1px solid var(--ethos-border);color:var(--ethos-muted)}
|
|
#cheat summary{cursor:pointer;padding:var(--ethos-space-2) 0;color:var(--ethos-accent);letter-spacing:.05em;text-transform:uppercase;font-size:var(--ethos-fs-xs);user-select:none}
|
|
#cheat dl{display:grid;grid-template-columns:auto 1fr;gap:var(--ethos-space-1) var(--ethos-space-3);padding:var(--ethos-space-1) 0 var(--ethos-space-3)}
|
|
#cheat dt{color:var(--ethos-green);font-weight:500;white-space:nowrap}
|
|
#cheat dd{color:var(--ethos-secondary);line-height:1.5}
|
|
#cheat dd span{color:var(--ethos-muted)}
|
|
.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{display:flex;gap:0;justify-content:center;margin-top:1rem}
|
|
.lang-toggle span{font-size:var(--ethos-fs-xs);color:var(--ethos-muted);cursor:pointer;padding:.2rem .5rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ethos-border);transition:color var(--ethos-motion);user-select:none}
|
|
.lang-toggle span:first-child{border-radius:var(--ethos-radius) 0 0 var(--ethos-radius);border-right:none}
|
|
.lang-toggle span:last-child{border-radius:0 var(--ethos-radius) var(--ethos-radius) 0;border-left:none}
|
|
.lang-toggle span.active{color:var(--ethos-accent);border-color:var(--ethos-accent);background:var(--ethos-accent-dim)}
|
|
.lang-toggle span:hover{color:var(--ethos-text)}
|
|
</style>
|
|
<div class=voice>
|
|
<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 defer src="/app.js"></script>
|
|
<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>
|
|
{{template "shellBottom"}}
|
|
</html>
|