43 lines
2.6 KiB
HTML
43 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="robots" content="noindex">
|
|
<title>JohnFeed</title><link rel="stylesheet" href="/static/style.css"></head>
|
|
<body>
|
|
<header><h1>JohnFeed</h1><span id="conn" class="pill">connecting…</span></header>
|
|
<div id="fatal" class="banner hidden"></div>
|
|
<main class="grid">
|
|
<section class="card" id="audio">
|
|
<h2>Audio</h2>
|
|
<label class="field">Your name in chat <span class="muted">(optional - leave blank to stay anonymous)</span>
|
|
<input id="name" maxlength="40" placeholder="Guest" autocomplete="off"></label>
|
|
<label class="field">Microphone <select id="mic"><option value="">Default microphone</option></select></label>
|
|
<label class="field" id="outwrap">Headphones / output <select id="out"><option value="">Default output</option></select></label>
|
|
<label class="check"><input type="checkbox" id="headphones" checked> I'm wearing headphones <span class="muted">(best quality; untick only if you must use speakers)</span></label>
|
|
<div class="row">
|
|
<button id="join" class="primary">Join the show</button>
|
|
<button id="mute" class="hidden">Mute my mic</button>
|
|
<button id="hearself" class="hidden" title="Play your own microphone in your headphones">Hear yourself</button>
|
|
<button id="leave" class="hidden danger">Leave</button>
|
|
</div>
|
|
<div id="callstate" class="muted">Not connected to audio.</div>
|
|
<div class="meter"><span>Your mic</span><div class="bar"><i id="mMic"></i></div></div>
|
|
<div class="meter"><span>The show</span><div class="bar"><i id="mShow"></i></div></div>
|
|
<audio id="player" autoplay></audio>
|
|
<details id="diag" class="diag">
|
|
<summary>What is happening <span class="muted small">(for troubleshooting)</span></summary>
|
|
<p class="muted small">If something sounds wrong, press Copy and paste this into the chat or an email to the host.
|
|
It shows connection quality in both directions. It never includes your IP address.</p>
|
|
<div class="row"><button id="copylog" class="small">Copy</button><span id="copied" class="muted small"></span></div>
|
|
<pre id="diaglog" class="diaglog"></pre>
|
|
</details>
|
|
</section>
|
|
<section class="card chat">
|
|
<h2>Chat with the host</h2>
|
|
<div id="log" class="log" aria-live="polite"></div>
|
|
<form id="chatform" class="row"><textarea id="msg" rows="2" maxlength="1000" placeholder="Type a message… (Enter to send)"></textarea><button class="primary">Send</button></form>
|
|
</section>
|
|
</main>
|
|
<script src="/static/common.js"></script>
|
|
<script src="/static/guest.js"></script>
|
|
</body></html>
|