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

Compare commits

base: cccb:857638e9db2b05addd7318d1f657bd00394a838c
Branches Tags
cccb:main
cccb:grid
..
compare: cccb:32291bccb85df12d43dc72659a3ac7ac8c1e78c0
Branches Tags
cccb:main
cccb:grid

No commits in common. "857638e9db2b05addd7318d1f657bd00394a838c" and "32291bccb85df12d43dc72659a3ac7ac8c1e78c0" have entirely different histories.
857638e9db ... 32291bccb8

10 changed files with 0 additions and 642 deletions
Show stats Expand all files Collapse all files

264
static/flexbox/index.html
View file

@ -1,264 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sanic - Flexbox layout</title>
<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">
<div id="controls-top">
<div id="top-left-controls">
<button>Login</button>
<button>Config</button>
</div>
<div id="playback-controls">
<div>
<button>⏮️</button>
<button>⏯️</button>
<button>⏹️</button>
<button>⏭️</button>
</div>
<div>
<label for="progress"></label>
<input type="range" id="progress" name="progress" min="0" max="100" value="0">
</div>
</div>
<div id="queue-volume-controls">
<div id="queue-controls">
<div id="queue-playback-order-controls">
<div>
<input type="checkbox" id="repeat" name="repeat">
<label for="repeat">repeat</label>
</div>
<div>
<input type="checkbox" id="shuffle" name="shuffle">
<label for="shuffle">shuffle</label>
</div>
</div>
<div id="queue-xfade-control">
<div>
xfade
</div>
<div id="queue-xfade-buttons">
<button>-</button>
<div id="xfade">00</div>
<button>+</button>
</div>
</div>
</div>
<div id="volume-control">
<label for="volume"></label>
<input id="volume" name="volume" type="range" min="1" max="100">
</div>
</div>
<div class="track-info">
<p>Now playing: 00:00:00/100:00:00</p>
<label for="track">track</label>
<input type="text" id="track" name="track" disabled>
</div>
<div id="top-logo-container">
<div id="top-logo">
<img id="sanic-logo" alt="sanic logo" src="../img/sanic-logo.webp">
Sanic
</div>
</div>
</div>
<div id="queue">
<table id="queue-table">
<thead>
<tr>
<th>Position</th>
<th>Artist</th>
<th>Title</th>
<th>Album</th>
<th>Genre</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</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 class="even">
<td>2</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 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 class="even">
<td>4</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 class="odd">
<td>5</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 class="even">
<td>6</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 class="odd">
<td>7</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>
<div id="controls_bottom">
<div id="playlist_controls">
<ul class="tree">
<li>
<details open>
<summary>/</summary>
<ul>
<li>
<details>
<summary>00_music</summary>
<ul>
<li>autosort</li>
<li>reimport</li>
<li>unsortable</li>
<li>youtube</li>
</ul>
</details>
</li>
<li>
<details>
<summary>01_incoming</summary>
<ul>
<li>coon</li>
<li>cascha</li>
<li>Xen</li>
</ul>
</details>
</li>
<li>
<details>
<summary>02_megablast</summary>
<ul>
<li>dnb</li>
<li>mix</li>
</ul>
</details>
</li>
<li>
<details>
<summary>03_mfs</summary>
<ul>
<li>ambient</li>
<li>electronic</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</div>
<div id="playlist_tracklist">
<table>
<thead>
<tr>
<th>Artist</th>
<th>Title</th>
<th>Album</th>
<th>Genre</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<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 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 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 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 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 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 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>
</tbody>
</table>
</div>
</div>
<div id="footer">
sanic mpd web ui 0.1.0 - by XenGi and coon &copy; 2023
</div>
</div>
</body>
</html>

77
static/flexbox/rangeinput.css
View file

@ -1,77 +0,0 @@
/* https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */
/********** Range Input Styles **********/
/* Range Reset */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
/* Removes default focus */
input[type="range"]:focus {
outline: none;
}
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
width: 70px;
border: 1px solid #1a2445;
border-right-color: #3a506b;
border-bottom-color: #3a506b;
background-color: #2e2e27;
background-repeat: repeat-x;
}
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -12px; /* Centers thumb on the track */
/* custom styles */
height: 11px;
margin-top: -4px;
width: 5px;
background: #640000;
border: 1px solid #812b25;
border-right-color: #21110f;
border-bottom-color: #21110f;
}
input[type="range"]:focus::-webkit-slider-thumb {
border: 1px solid #21110f;
border-right-color: #812b25;
border-bottom-color: #812b25;
}
/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
background-color: #053a5f;
border-radius: 0.5rem;
height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-moz-range-thumb {
border: none; /*Removes extra border that FF applies*/
border-radius: 0; /*Removes default border-radius that FF applies*/
/* custom styles */
background-color: #5cd5eb;
height: 2rem;
width: 1rem;
}
input[type="range"]:focus::-moz-range-thumb {
border: 1px solid #053a5f;
outline: 3px solid #053a5f;
outline-offset: 0.125rem;
}

203
static/flexbox/sanic.css
View file

@ -1,203 +0,0 @@
html, body {
background-color: #09101d;
color: #bbb;
height: 99%;
}
div {
/* border: 1px dashed white; */
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
button {
background-color: #28374a;
color: #bbb;
}
input {
background-color: #28374a;
color: white;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0pt;
}
thead {
background-repeat: repeat-x;
background-image: url(../img/table-header-gradient.png);
}
th {
font-weight: bold;
padding: 2px 2px 2px 14px;
border: solid #1c2c1a;
border-width: 0 1px 0 0;
cursor: pointer;
}
td {
padding: 1px 1px 1px 0.5em;
border: solid black;
border-width: 0 1px 1px 0;
text-align: left;
}
#queue-table tr td:first-of-type {
padding-left: 16px;
}
/* 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;
}
table tr:nth-child(even) td {
background:#171812;
}
*/
table tr.odd {
background-color: #1e1f1a;
}
table tr.even {
background-color: #171812;
}
#queue-table tr.playing {
background-color: #490b00;
}
td.playing {
background-image: url(../img/playback.png);
background-repeat: no-repeat;
background-position: left center;
}
#flexbox-container {
display: flex;
flex-direction: column;
height: 100%;
}
#controls-top {
display: flex;
flex-direction: row;
padding: 5px;
background-repeat: repeat-x;
background-image: url(../img/top-controls-bg.png);
}
#controls-top div {
border-right: 1px solid black;
}
#top-left-controls {
display: flex;
flex-direction: column;
width: 100px;
}
#top-left-controls button {
text-align: left;
}
#playback-controls {
display: flex;
flex-direction: column;
width: 160px;
}
#progress {
margin-left: 10px;
}
#volume {
margin-left: 10px;
}
#queue-volume-controls {
width: 150px;
}
#queue-controls {
display: flex;
flex-direction: row;
}
#queue-xfade-control {
display: flex;
flex-direction: column;
text-align: center;
}
#queue-xfade-buttons {
display: flex;
flex-direction: row;
}
#top-logo {
display: flex;
flex-direction: column;
text-align: center;
color: white;
width: 50px;
}
#top-logo-container {
display: flex;
flex-grow: 1;
justify-content: flex-end;
}
#sanic-logo {
width: 36px;
padding-left: 8px;
}
#xfade {
width: 20px;
}
#queue {
display: flex;
flex-direction: column;
flex-grow: 1;
border-bottom: 4px ridge #3a506b;
}
#controls_bottom {
display: flex;
flex-direction: row;
flex-grow: 2;
}
#playlist_controls {
background-color: #171812;;
/* flex-grow: 1; */
width: 20%; /* frickel? */
border-right: 4px ridge #3a506b;
}
#playlist_tracklist {
display: flex;
flex-direction: column;
width: 80%; /* frickel? */
}
#footer {
background-color: #041936;
text-align: right;
}

0
static/flexbox/sanic.js
View file

91
static/flexbox/treeview.css
View file

@ -1,91 +0,0 @@
/* https://iamkate.com/code/tree-views/ */
/* Custom properties */
.tree {
--spacing : 1.0rem;
--radius : 10px;
}
/* Padding */
.tree li {
display : block;
position : relative;
padding-left : calc(2 * var(--spacing) - var(--radius) - 2px + 10px);
}
.tree ul {
margin-left : calc(var(--radius) - var(--spacing));
padding-left : 0;
}
/* Vertical lines */
.tree ul li {
border-left : 2px solid #ddd;
}
.tree ul li:last-child {
border-color : transparent;
}
/* Horizontal lines */
.tree ul li::before {
content : '';
display : block;
position : absolute;
top : calc(var(--spacing) / -2);
left : -2px;
width : calc(var(--spacing) + 2px);
height : calc(var(--spacing) + 1px);
border : solid #ddd;
border-width : 0 0 2px 2px;
}
/* Summaries */
.tree summary {
display : block;
cursor : pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
display : none;
}
.tree summary:focus {
outline : none;
}
.tree summary:focus-visible {
outline : 1px dotted #000;
}
/* Markers */
.tree li::after,
.tree summary::before {
content : '';
display : block;
position : absolute;
top : calc(var(--spacing) / 2 - var(--radius));
left : calc(var(--spacing) - var(--radius) - 1px);
width : calc(2 * var(--radius));
height : calc(2 * var(--radius));
border-radius : 50%;
background : #ddd;
}
/* Expand and collapse buttons */
.tree summary::before {
z-index : 1;
background : #696 url('../img/expand-collapse.svg') 0 0;
}
.tree details[open] > summary::before {
background-position : calc(-2 * var(--radius)) 0;
}

7
static/img/expand-collapse.svg
View file

@ -1,7 +0,0 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20">
<g fill="#fff">
<path d="m5 9h4v-4h2v4h4v2h-4v4h-2v-4h-4z"/>
<path d="m25 9h10v2h-10z"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 199 B

BIN
static/img/playback.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 503 B

BIN
static/img/sanic-logo.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.1 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 602 B

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB