kami
64 lines
2.8 KiB
HTML
64 lines
2.8 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}
|
|
|
|
.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}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<button class="active" data-tab="voice">Voice</button>
|
|
<button data-tab="dash">Dash</button>
|
|
</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>
|
|
</div>
|
|
<div id="tab-dash" class="tab">
|
|
<iframe id="dash-frame" src="/dash"></iframe>
|
|
</div>
|
|
<script>
|
|
document.querySelectorAll('nav button').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('nav button').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');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|