kami
c225ba37b2
Split cheatsheet into separate RU/EN <dd> elements with CSS class toggle. Toggle buttons in nav bar (RU/EN). Language also controlled by ?lang=ru|en query parameter (default: ru). The rest of the PWA stays English; voice responses remain Russian.
124 lines
5.5 KiB
HTML
124 lines
5.5 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">
|
|
<script defer src="/app.js"></script>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html,body{height:100%;background:#111;color:#ddd;font-family:system-ui,-apple-system,sans-serif}
|
|
body{display:flex;flex-direction:column}
|
|
|
|
nav{display:flex;background:#1a1a2e;border-bottom:1px solid #333;flex-shrink:0}
|
|
nav button{flex:1;padding:.6rem;background:none;border:none;color:#666;font-size:.85rem;cursor:pointer;font-family:inherit;letter-spacing:.05em;text-transform:uppercase;transition:color .15s;-webkit-tap-highlight-color:transparent}
|
|
nav button.active{color:#00aaff;border-bottom:2px solid #00aaff}
|
|
nav button:hover{color:#ddd}
|
|
nav .lang{flex:0 0 auto;padding:.6rem .8rem;font-size:.75rem;color:#555;cursor:pointer;letter-spacing:.1em}
|
|
nav .lang.active{color:#00aaff}
|
|
|
|
.tab{display:none;flex-direction:column;align-items:center;flex:1;overflow:auto;padding:1rem}
|
|
.tab.active{display:flex}
|
|
#tab-voice{gap:2rem}
|
|
#tab-dash{padding:0}
|
|
|
|
h1{font-size:1.2rem;font-weight:400;color:#888;letter-spacing:.1em;text-transform:uppercase}
|
|
#status{font-size:.85rem;color:#666;min-height:1.2em}
|
|
#btn{width:140px;height:140px;border-radius:50%;border:4px solid #00aaff;background:#1a1a2e;color:#00aaff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
|
|
#btn:active,#btn.active{background:#00aaff22;border-color:#00ff88;color:#00ff88;transform:scale(1.05)}
|
|
#btn:disabled{opacity:.3;border-color:#444}
|
|
#log{width:100%;max-width:480px;max-height:40vh;overflow-y:auto;font-size:.8rem;color:#666;line-height:1.6;padding:.5rem;border-top:1px solid #222;margin-top:1rem}
|
|
#log .reply{color:#8f8}
|
|
#log .error{color:#f88}
|
|
#log .push{color:#88f}
|
|
|
|
#dash-frame{width:100%;flex:1;border:none;background:#111;min-height:0}
|
|
|
|
#cheat{width:100%;max-width:480px;font-size:.8rem;border-top:1px solid #222;color:#888}
|
|
#cheat summary{cursor:pointer;padding:.5rem 0;color:#00aaff;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem;user-select:none}
|
|
#cheat dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;padding:.25rem 0 .5rem}
|
|
#cheat dt{color:#00ff88;font-weight:600;white-space:nowrap}
|
|
#cheat dd{color:#aaa;line-height:1.5}
|
|
#cheat dd span{color:#555}
|
|
.cheat-en{display:revert}
|
|
.cheat-ru{display:none}
|
|
html[data-lang=ru] .cheat-en { display: none; }
|
|
html[data-lang=ru] .cheat-ru { display: revert; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<button class="active" data-tab="voice">Voice</button>
|
|
<button data-tab="dash">Dash</button>
|
|
<span class="lang active" data-lang="ru">RU</span>
|
|
<span class="lang" data-lang="en">EN</span>
|
|
</nav>
|
|
<div id="tab-voice" class="tab active">
|
|
<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>
|
|
<div id="tab-dash" class="tab">
|
|
<iframe id="dash-frame" src="/dash"></iframe>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
// Read lang from URL param or default to ru
|
|
var lang = new URLSearchParams(window.location.search).get('lang') || 'ru';
|
|
if (lang !== 'en') lang = 'ru';
|
|
document.documentElement.setAttribute('data-lang', lang);
|
|
|
|
// Nav buttons
|
|
document.querySelectorAll('nav button[data-tab]').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('nav button[data-tab]').forEach(function(b) { b.classList.remove('active'); });
|
|
document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
|
|
btn.classList.add('active');
|
|
var tab = document.getElementById('tab-' + btn.dataset.tab);
|
|
if (tab) tab.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Lang toggle
|
|
document.querySelectorAll('nav .lang').forEach(function(el) {
|
|
el.addEventListener('click', function() {
|
|
var l = el.dataset.lang;
|
|
document.documentElement.setAttribute('data-lang', l);
|
|
document.querySelectorAll('nav .lang').forEach(function(b) { b.classList.remove('active'); });
|
|
el.classList.add('active');
|
|
// Update URL without reload
|
|
var url = new URL(window.location);
|
|
url.searchParams.set('lang', l);
|
|
history.replaceState(null, '', url);
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|