34 lines
1.9 KiB
HTML
34 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{name}}</title>
|
|
<link rel="stylesheet" href="/static/css/alfred.css">
|
|
<link rel="stylesheet" href="/static/css/alfred-controls.css">
|
|
<link rel="stylesheet" href="/static/css/alfred-mode-icons.css">
|
|
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header><span id="name">{{name}}</span><span id="mode" class="alfred-mode-icon" role="img" aria-label="Repos" title="Repos">🛏️</span></header>
|
|
<section id="stage"><div id="content"><h1>Bonjour.</h1><p>À votre écoute.</p></div></section>
|
|
<section id="wave"><canvas id="waveCanvas"></canvas></section>
|
|
<footer class="alfred-controls" aria-label="Contrôles audio">
|
|
<button id="speakerMute" class="audio-toggle" type="button" aria-label="Couper le haut-parleur" aria-pressed="false" title="Couper le haut-parleur">🔊</button>
|
|
<label class="volume-label" for="volumeSlider">Volume</label>
|
|
<input id="volumeSlider" type="range" min="0" max="100" step="1" value="70" aria-label="Volume sonore">
|
|
<output id="volumeValue" for="volumeSlider">70 %</output>
|
|
<span class="controls-separator" aria-hidden="true"></span>
|
|
<label class="volume-label" for="micGainSlider">Sensibilité micro</label>
|
|
<input id="micGainSlider" type="range" min="0" max="100" step="1" value="50" aria-label="Sensibilité du microphone">
|
|
<output id="micGainValue" for="micGainSlider">—</output>
|
|
<button id="micMute" class="audio-toggle" type="button" aria-label="Couper le microphone" aria-pressed="false" title="Couper le microphone">🎙️</button>
|
|
</footer>
|
|
</main>
|
|
<script src="/static/js/alfred.js"></script>
|
|
<script src="/static/js/alfred-controls.js"></script>
|
|
<script src="/static/js/alfred-mode-icons.js"></script>
|
|
</body>
|
|
</html>
|