cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

Compare commits

base: cccb:3889391f1bc8ebff12225eb6207fbd3bb43ddede
Branches Tags
cccb:main
cccb:grid
..
compare: cccb:a5d94171de235e0fccf48630369215f90c834e98
Branches Tags
cccb:main
cccb:grid

No commits in common. "3889391f1bc8ebff12225eb6207fbd3bb43ddede" and "a5d94171de235e0fccf48630369215f90c834e98" have entirely different histories.
3889391f1b ... a5d94171de

5 changed files with 58 additions and 160 deletions
Show stats Expand all files Collapse all files

124
static/flexbox/index.html
View file

@ -6,6 +6,7 @@
<link rel="stylesheet" href="rangeinput.css"> <link rel="stylesheet" href="rangeinput.css">
<link rel="stylesheet" href="treeview.css"> <link rel="stylesheet" href="treeview.css">
<link rel="stylesheet" href="sanic.css"> <link rel="stylesheet" href="sanic.css">
<script src="sanic.js"></script>
</head> </head>
<body> <body>
<div id="flexbox-container"> <div id="flexbox-container">
@ -16,15 +17,10 @@
</div> </div>
<div id="playback-controls"> <div id="playback-controls">
<div> <div>
<button>&#x23EE;&#xFE0E;</button> <!-- ⏮️ Last Track Button --> <button>⏮️</button>
<button>&#x23F9;&#xFE0E;</button> <!-- ⏹️ Stop Button --> <button>⏯️</button>
<button>&#x23EF;&#xFE0E;</button> <!-- ⏯️ Play or Pause Button --> <button>⏹️</button>
<button>&#x23ED;&#xFE0E;</button> <!-- ⏭️ Next Track Button --> <button>⏭️</button>
<!--
<button>&#x25B6;&#xFE0E;</button> <!-- ▶️ Play Button -- >
<button>&#x23F8;&#xFE0E;</button> <!-- ⏸️ Pause Button -- >
-->
</div> </div>
<div> <div>
<input type="range" id="progress" name="progress" min="0" max="100" value="0"> <input type="range" id="progress" name="progress" min="0" max="100" value="0">
@ -54,13 +50,11 @@
</div> </div>
</div> </div>
<div id="volume-control"> <div id="volume-control">
<button class="borderless-button">&#x1F509;</button> <!-- 🔉 Speaker with sound wave -->
<input id="volume" name="volume" type="range" min="1" max="100" value="50"> <input id="volume" name="volume" type="range" min="1" max="100" value="50">
<button class="borderless-button">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
</div> </div>
</div> </div>
<div class="track-info"> <div class="track-info">
<div>Now playing: 00:00:00/100:00:00</div> <p>Now playing: 00:00:00/100:00:00</p>
<label for="track">track</label> <label for="track">track</label>
<input type="text" id="track" name="track" disabled> <input type="text" id="track" name="track" disabled>
@ -85,7 +79,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr id="$queue-id"> <tr class="odd">
<td>1</td> <td>1</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -93,7 +87,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="even">
<td>2</td> <td>2</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -101,15 +95,15 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="playing"> <tr class="odd playing">
<td>3</td> <td class="playing">3</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="even">
<td>4</td> <td>4</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -117,7 +111,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="odd">
<td>5</td> <td>5</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -125,7 +119,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="even">
<td>6</td> <td>6</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -133,7 +127,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="odd">
<td>7</td> <td>7</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -141,78 +135,6 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr>
<td>8</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>9</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>10</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>11</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>12</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>13</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>14</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>15</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
<tr>
<td>16</td>
<td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td>
<td>undefined</td>
<td>9:29</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -267,7 +189,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="results_tracklist"> <div id="playlist_tracklist">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -279,49 +201,49 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="odd">
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="even">
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="odd">
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="even">
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="odd">
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="even">
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr> <tr class="odd">
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
@ -336,7 +258,5 @@
sanic mpd web ui 0.1.0 - by XenGi and coon &copy; 2023 sanic mpd web ui 0.1.0 - by XenGi and coon &copy; 2023
</div> </div>
</div> </div>
<script src="sanic.js"></script>
</body> </body>
</html> </html>

94
static/flexbox/sanic.css
View file

@ -1,14 +1,7 @@
:root {
--ribbon-width: 160px;
}
html, body { html, body {
background-color: #09101d; background-color: #09101d;
color: #bbb; color: #bbb;
height: 99%;
margin: 0;
padding: 0;
height: 100%;
} }
div { div {
@ -29,12 +22,6 @@ button {
border-bottom-color: #3A3A3A; border-bottom-color: #3A3A3A;
} }
.borderless-button {
border: none;
background-color: inherit;
cursor: pointer;
}
input[type=text] { input[type=text] {
background-color: #28374a; background-color: #28374a;
color: white; color: white;
@ -74,8 +61,8 @@ table {
} }
thead { thead {
background: rgb(15,29,47); background-repeat: repeat-x;
background: linear-gradient(0deg, rgba(15,29,47,1) 0%, rgba(15,29,47,1) 50%, rgba(7,14,23,1) 100%); background-image: url(../img/table-header-gradient.png);
} }
th { th {
@ -87,30 +74,19 @@ th {
} }
td { td {
padding: 1px 0.5em; padding: 1px 1px 1px 0.5em;
border: solid black; border: solid black;
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
text-align: left; text-align: left;
} }
#queue {
display: flex;
flex-direction: column;
flex-grow: 1;
border-bottom: 4px ridge #3a506b;
}
#queue-table tr td:first-of-type { #queue-table tr td:first-of-type {
padding-left: 16px; padding-left: 16px;
} }
#queue table tr.playing td:first-of-type::before { /* This is probably a better way to generate alternate coloring on tables. However,
content: '\2BC8'; background color for selected track is overwritten this way. Therefore the "old
} school" way of alternate coloring is used for now.
#queue table tr:not(.playing) td:first-of-type {
padding-left: 2em; /* TODO: do proper spacing */
}
table tr:nth-child(odd) td { table tr:nth-child(odd) td {
background:#1e1f1a; background:#1e1f1a;
@ -119,14 +95,24 @@ table tr:nth-child(odd) td {
table tr:nth-child(even) td { table tr:nth-child(even) td {
background:#171812; background:#171812;
} }
*/
#queue table tr:nth-child(odd).playing td, table tr.odd {
#queue table tr:nth-child(even).playing td { background-color: #1e1f1a;
}
table tr.even {
background-color: #171812;
}
#queue-table tr.playing {
background-color: #490b00; background-color: #490b00;
} }
table tr:hover td { td.playing {
background-color: #354158 !important; /* TODO: remove !important */ background-image: url(../img/playback.png);
background-repeat: no-repeat;
background-position: left center;
} }
#flexbox-container { #flexbox-container {
@ -140,10 +126,11 @@ table tr:hover td {
flex-direction: row; flex-direction: row;
padding: 5px; padding: 5px;
background: linear-gradient(0deg, rgba(3,7,11,1) 0%, rgba(14,27,43,1) 4%, rgba(41,55,74,1) 6%, rgba(18,35,56,1) 94%, rgba(40,68,104,1) 96%, rgba(168,182,200,1) 100%); background-repeat: repeat-x;
background-image: url(../img/top-controls-bg.png);
} }
#controls-top > div { #controls-top div {
border-right: 1px solid black; border-right: 1px solid black;
} }
@ -157,21 +144,10 @@ table tr:hover td {
text-align: left; text-align: left;
} }
#playback-controls div:first-child { #playback-controls {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-between; width: 160px;
}
#playback-controls div button {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
height: calc(var(--ribbon-width) / 4 - 8px);
width: calc(var(--ribbon-width) / 4 - 8px);
} }
#progress { #progress {
@ -180,6 +156,7 @@ table tr:hover td {
} }
#volume { #volume {
margin-left: 10px;
width: 90%; width: 90%;
} }
@ -190,7 +167,6 @@ table tr:hover td {
#queue-controls { #queue-controls {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
} }
#queue-xfade-control { #queue-xfade-control {
@ -204,11 +180,6 @@ table tr:hover td {
flex-direction: row; flex-direction: row;
} }
#volume-control {
display: flex;
flex-direction: row;
}
#top-logo { #top-logo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -232,6 +203,13 @@ table tr:hover td {
width: 20px; width: 20px;
} }
#queue {
display: flex;
flex-direction: column;
flex-grow: 1;
border-bottom: 4px ridge #3a506b;
}
#controls_bottom { #controls_bottom {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -246,7 +224,7 @@ table tr:hover td {
border-right: 4px ridge #3a506b; border-right: 4px ridge #3a506b;
} }
#results_tracklist { #playlist_tracklist {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

BIN
static/img/playback.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 503 B

BIN
static/img/table-header-gradient.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 602 B

BIN
static/img/top-controls-bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB