dndmusicbot/tmpl/index.tmpl

80 lines
2.2 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">
</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="{{ . }}">{{ . }}</div>
{{ end}}
<div class="item locked stop" data-id="reset">Stop</div>
</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>
<!-- 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>