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

94
static/flexbox/sanic.css
View file

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