29 lines
1.4 KiB
HTML
29 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<title>Live captions</title>
|
|
<style>
|
|
html, body { margin:0; min-height:100%; background:transparent; }
|
|
body { font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
|
|
#captions { position:fixed; left:4%; right:4%; bottom:6%; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
|
|
.line { max-width:100%; padding:8px 14px; border-radius:8px; background:rgba(0,0,0,.82); color:#fff; font-size:clamp(22px,4vw,46px); line-height:1.25; text-align:center; text-wrap:balance; }
|
|
.line.interim { opacity:.78; }
|
|
.line:empty { display:none; }
|
|
#status { position:fixed; left:12px; top:12px; padding:8px 12px; border-radius:8px; background:rgba(15,20,32,.95); color:#dbe7fb; font-size:14px; max-width:min(90vw,640px); }
|
|
#status[hidden] { display:none; }
|
|
#status.error { background:#4a1f24; color:#ffd7d7; }
|
|
body.plain { background:#0f1420; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="status">Connecting to captions…</div>
|
|
<div id="captions" role="log" aria-live="polite" aria-label="Live captions"></div>
|
|
<script src="/relay-config.js"></script>
|
|
<script src="/private-relay-client.js"></script>
|
|
<script src="/watch.js"></script>
|
|
</body>
|
|
</html>
|