diff options
| author | ilotterytea <iltsu@alright.party> | 2024-06-16 13:15:31 +0500 |
|---|---|---|
| committer | ilotterytea <iltsu@alright.party> | 2024-06-16 13:15:31 +0500 |
| commit | 1bc86704a9d2ee240c1422089768ba669209484f (patch) | |
| tree | 9d82b5c9573f19758aeb7ceb6fd913f6d6cf796e | |
| parent | 8b1aac4aefae0c20a1d3adc1227165a6047e792a (diff) | |
feat: html page
| -rw-r--r-- | assets/logo.gif | bin | 0 -> 85698 bytes | |||
| -rw-r--r-- | index.html | 37 | ||||
| -rw-r--r-- | style.css | 84 |
3 files changed, 119 insertions, 2 deletions
diff --git a/assets/logo.gif b/assets/logo.gif Binary files differnew file mode 100644 index 0000000..0ad6584 --- /dev/null +++ b/assets/logo.gif @@ -1,10 +1,43 @@ <!DOCTYPE html> <html> <head> + <link rel="stylesheet" href="style.css"> </head> <body> - <h1>hello, world!</h1> - <p id="volume">0 dB</p> + <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="/display" 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> </html>
\ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c9c0837 --- /dev/null +++ b/style.css @@ -0,0 +1,84 @@ +body, html, h1, h2, h3, p { + margin: 0; + padding: 0; +} + +html { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.todo { + color: gainsboro; + font-style: italic; +} + +.button { + padding: 6px; + color: black; + background-color: #f5f5f5; +} + +.button:hover { + background-color: black; + color: white; + text-decoration: line-through; +} + +.container { + width: 100%; + min-height: 100vh; + + display: flex; + justify-content: center; +} + +.wrapper { + padding-top: 12px; + width: 50%; +} + +.brand { + display: flex; + flex-direction: row; + align-items: center; +} + +.brand img { + width: 64px; + padding-right: 12px; +} + +.preview-container { + margin: 32px 0; + display: flex; + flex-direction: column; +} + +.preview-container .control-container { + display: flex; + flex-direction: row; + align-items: center; +} + +.preview-container .control { + display: flex; + flex-direction: row-reverse; + flex-grow: 1; +} + + + +.preview { + display: flex; + justify-content: center; + align-items: center; + + background-color: gainsboro; + + padding: 16px 16px; + margin: 16px 0; +} + +.preview img { + max-width: 100%; +}
\ No newline at end of file |
