Compare commits
No commits in common. "f205d4e46af5a3240a8ecef2c8b58f2e080b8d6c" and "aa8c052c93de705b810ffcf5ced3e631b30a781c" have entirely different histories.
f205d4e46a
...
aa8c052c93
|
|
@ -1,10 +1,6 @@
|
|||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
.container {
|
||||
--grid-layout-gap: 8px;
|
||||
--grid-column-count: 6;
|
||||
--grid-column-count: 3;
|
||||
--grid-item--min-width: 150px;
|
||||
|
||||
--gap-count: calc(var(--grid-column-count) - 1);
|
||||
|
|
@ -34,6 +30,7 @@ h2.bot {
|
|||
padding: 1rem;
|
||||
background-color: #80cbc4;
|
||||
border: 1px solid black;
|
||||
font-size: clamp(1rem, -0.8750rem + 8.3333vw, 2rem);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #073642
|
||||
|
|
@ -92,11 +89,12 @@ h2.bot {
|
|||
padding: 2rem;
|
||||
width: 80%; /* Could be more or less, depending on screen size */
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
input[type="button"],
|
||||
|
|
@ -149,49 +147,6 @@ section {
|
|||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-xxl,
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
--bs-gutter-x: 1.5rem;
|
||||
--bs-gutter-y: 0;
|
||||
|
||||
width: 100%;
|
||||
padding-right: var(--bs-gutter-x, 0.75rem);
|
||||
padding-left: var(--bs-gutter-x, 0.75rem);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container-sm, .container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container-md, .container-sm, .container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1320px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
113
tmpl/index.tmpl
113
tmpl/index.tmpl
|
|
@ -9,69 +9,68 @@
|
|||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2 class="bot">Playlists</h2>
|
||||
<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>
|
||||
<section>
|
||||
<div id="items" class="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>
|
||||
</section>
|
||||
</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>
|
||||
<h2 class="bot">Ambiance</h2>
|
||||
|
||||
<section>
|
||||
<p id="output"></p>
|
||||
<section>
|
||||
<div id="ambiance" class="container">
|
||||
{{ range .Ambiance }}
|
||||
<div class="item drag" data-id="{{ . }}">{{ . }}</div>
|
||||
{{ end}}
|
||||
<div class="item locked stop" data-id="reset">Stop</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="info">
|
||||
<a id="link" style="text-decoration: none;">
|
||||
<span id="channel"></span>
|
||||
<span> - </span>
|
||||
<span id="title"></span>
|
||||
</a>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<!-- The Modal -->
|
||||
<div id="waiting" class="modal">
|
||||
<!-- Modal content -->
|
||||
<div class="modal-content">
|
||||
<p>Waiting for bot..</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/script.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue