100 lines
3.9 KiB
Cheetah
100 lines
3.9 KiB
Cheetah
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>D&D Music Bot!</title>
|
|
<link rel="stylesheet" href="/css/solarized-dark.css">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAACNklEQVQ4jaWSy0vUcRTFP/f7G4cUUqzAZtQsgzYWiDMjjYgotbOtYLSIFlKBix7YH9DWXQaRFRREi8hN9MCFPZDUzB4IUkRo5Oho1CLTcEbne1o0UWCI0FndC+cezr33wH/C/m5mkvFOw04JIsBrmXVVDI0OryfgfhepZH0bWA/wFaMLqDXp/nQyuWVDAhi1wIz36k5n/BXgMVAamI+vJxD6o7TS61Uw7QLbEXH+OGIOQzmtTG7IgVfBPjOdE6oXdtrQd8mOVQ6/+vCbM9XcvGmipia8xsFsLLZN6DBQZWIRKJPZISd5gLFYrCBaYF3KLB0IFxdVzyQTZYZukNXZEEA2CDaH8SUS5zHbBVZo+AE5OzrXEL+eyxHxZo2IyzL/FqywcnhsFCCktrYgnZrqWc35nsCCqHM2mJMWkXuD+RVPUIvzRxB3K0Ze3F5zg8/pj1XCEkEQ9OHoZnH5uaFAYfXjrcmhUkPvyit39v7zC9lcKO1Y3QoEwOD28fEl4CRAqiFxJyddAHuUnpwsnW9MFIdW3JeMW41Ghl++N/AOMuX5YTCqlU/nbCxWZLDXQRfQRNiNr+Z0L+OUFHZwNhm/CRBaWMh8Ki0u+iYoQeyZ3Z+4lcKeytSBqPOyZ2a+X1grWESoE6wFWAZwNRMTWaEzBk/yLtrNdAmow7gaHRm96HEpYCC/divGjGEdv+h5qLk5lM4utUvWAvxw8g8iI2MPAeYbE9VeFMrbNZl2GzoRHRrrWy+hG8ZPg13xb+XS+CIAAAAASUVORK5CYII=">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2 class="bot">Playlists</h2>
|
|
|
|
<section>
|
|
<div id="items" class="item-container">
|
|
{{ range .Playlists }}
|
|
<div class="item" data-id="{{ .Id }}">{{ .Title }}</div>
|
|
{{ end}}
|
|
<div class="item locked stop" data-id="reset">Stop</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div id="inputplaylist" class="input-container">
|
|
<input class="u-full-width" name="title" type="text" placeholder="Enter name..">
|
|
<input class="u-full-width" name="url" type="text" placeholder="https://youtube.com/playlist?list=...">
|
|
<input id="addplaylist" name="submit" value="Add" type="submit">
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<p id="output"></p>
|
|
|
|
<div id="info">
|
|
<a id="link" style="text-decoration: none;">
|
|
<span id="channel"></span>
|
|
<span> - </span>
|
|
<span id="title"></span>
|
|
</a>
|
|
|
|
<div class="controls">
|
|
<input id="prev" name="prev" type="button" value="prev">
|
|
<span id="time"></span>
|
|
<input id="next" name="next" type="button" value="next">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h2 class="bot">Ambiance</h2>
|
|
|
|
<section>
|
|
<div id="ambiance" class="item-container">
|
|
{{ range .Ambiance }}
|
|
<div class="item drag" data-id="{{ .Id }}">{{ .Title }}</div>
|
|
{{ end}}
|
|
<div class="item locked stop" data-id="reset">Stop</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div id="progressambiance" class="input-container">
|
|
<progress max="100" value="0" style="display:none">0%</progress>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div id="inputambiance" class="input-container">
|
|
<input class="u-full-width" name="title" type="text" placeholder="Enter name..">
|
|
<input class="u-full-width" name="url" type="text" placeholder="Enter url...">
|
|
<input id="addambiance" name="submit" value="Add" type="submit">
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div id="volume_playlist" class="input-container">
|
|
<label for="playlist-volume">Playlist</label>
|
|
<input type="range" id="playlist-volume" min="-10" max="4" step="0.1">
|
|
<input id="playlist-volume-number" type="number" min="-10" max="4" step="0.1" style="width:50px" />
|
|
</div>
|
|
<div id="volume_ambiance" class="input-container">
|
|
<label for="ambiance-volume">Ambiance</label>
|
|
<input type="range" id="ambiance-volume" min="-10" max="4" step="0.1">
|
|
<input id="ambiance-volume-number" type="number" min="-10" max="4" step="0.1" style="width:50px" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- The Modal -->
|
|
<div id="waiting" class="modal">
|
|
<!-- Modal content -->
|
|
<div class="modal-content">
|
|
<p>Waiting for bot..</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/public/script.js"></script>
|
|
</body>
|
|
</html>
|