diff options
| author | ilotterytea <iltsu@alright.party> | 2024-06-16 14:18:17 +0500 |
|---|---|---|
| committer | ilotterytea <iltsu@alright.party> | 2024-06-16 14:18:17 +0500 |
| commit | 4d79baa96d3995d7c1a7c98ca9dbc28acf8ae3b7 (patch) | |
| tree | 37706d63bfbe7be2fe2c55284f2cf84615462e97 | |
| parent | 96bf9fec9264c035dfb9627d22b29ab270508daf (diff) | |
feat: "fork me" ribbon
| -rw-r--r-- | index.html | 84 | ||||
| -rw-r--r-- | style.css | 6 |
2 files changed, 53 insertions, 37 deletions
@@ -1,46 +1,56 @@ <!DOCTYPE html> <html> - <head> - <title>donktuber</title> - <link rel="shortcut icon" href="assets/logo.gif" type="image/x-icon"> - <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> + +<head> + <title>donktuber</title> + <link rel="shortcut icon" href="assets/logo.gif" type="image/x-icon"> + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <div class="fork"> + <a href="https://github.com/ilotterytea/donktuber"> + <img decoding="async" width="149" height="149" + src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" + class="attachment-full size-full" alt="Fork me on GitHub" loading="lazy" data-recalc-dims="1"> + </a> + </div> + <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="preview-container"> - <h2>preview</h2> - <div class="preview"> - <h1> - <img src="#" alt="no image" id="preview"> - </h1> + <div class="control-container"> + <div> + <p id="volume">0 dB</p> </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 class="control"> + <a href="show.html" class="button">show in a separate tab</a> </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 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> - </body> - <script src="scripts/microphone.js"></script> - <script src="scripts/settings.js"></script> + </div> +</body> +<script src="scripts/microphone.js"></script> +<script src="scripts/settings.js"></script> + </html>
\ No newline at end of file @@ -81,4 +81,10 @@ html { .preview img { max-width: 100%; +} + +.fork { + position: absolute; + right: 0; + top: 0; }
\ No newline at end of file |