64 lines
2.1 KiB
HTML
64 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>kkkmeet</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<header class="topbar">
|
|
<div>
|
|
<h1>kkkmeet</h1>
|
|
<p id="status">Enter your name to join the call.</p>
|
|
</div>
|
|
<form id="name-form" class="name-form">
|
|
<input id="name-input" autocomplete="name" maxlength="48" placeholder="Your name" required />
|
|
<button type="submit">Join</button>
|
|
</form>
|
|
</header>
|
|
|
|
<section class="stage" aria-label="Video call">
|
|
<div class="remote-grid" id="remote-grid">
|
|
<div class="empty-stage" id="empty-stage">Waiting for others to join</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="controls">
|
|
<div class="control-panel">
|
|
<div class="device-controls" aria-label="Media devices">
|
|
<label>
|
|
Camera
|
|
<select id="camera-select"></select>
|
|
</label>
|
|
<label>
|
|
Microphone
|
|
<select id="mic-select"></select>
|
|
</label>
|
|
</div>
|
|
<div class="control-actions" aria-label="Call controls">
|
|
<button id="camera-button" type="button" aria-pressed="true">Camera</button>
|
|
<button id="mic-button" type="button" aria-pressed="true">Mic</button>
|
|
<button id="share-button" type="button">Share Screen</button>
|
|
<button id="leave-button" type="button" class="danger">Leave</button>
|
|
</div>
|
|
</div>
|
|
<article class="self-preview">
|
|
<video id="local-video" autoplay muted playsinline></video>
|
|
<span id="local-name">You</span>
|
|
</article>
|
|
</footer>
|
|
</main>
|
|
|
|
<template id="remote-template">
|
|
<article class="tile">
|
|
<video autoplay playsinline></video>
|
|
<span>Participant</span>
|
|
</article>
|
|
</template>
|
|
|
|
<script type="module" src="/app.js"></script>
|
|
</body>
|
|
</html>
|