index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="wrapper">
                <div class="brand">
                    <img src="assets/logo.gif" alt="">
                    <h1>donktuber</h1>
                </div>
                <div class="preview-container">
                    <h2>preview</h2>
                    <div class="preview">
                        <h1>
                            <img src="#" alt="no image" id="preview">
                        </h1>
                    </div>
                    <div class="control-container">
                        <div>
                            <p id="volume">0 dB</p>
                        </div>
                        <div class="control">
                            <a href="show.html" class="button">show in a separate tab</a>
                        </div>
                    </div>
                </div>
                <div class="settings">
                    <h2>settings</h2>
                    <p class="todo">// TODO: More features and customizability</p>
                    <input type="file" name="muted_img" id="muted_img">
                    <label for="muted_img">the image when silence</label><br>
                    <input type="file" name="speak_img" id="speak_img">
                    <label for="speak_img">the image when speaking</label><br>
                    <input type="range" min="-60" max="0" value="-40" name="silence" id="silence_slider">
                    <label for="silence">silence starts at <span id="silence_slider_db">...</span> dB</label>
                </div>
            </div>
        </div>
    </body>
    <script src="scripts/microphone.js"></script>
    <script src="scripts/settings.js"></script>
</html>