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

final design

Browse source
This commit is contained in:
XenGi 2023-12-28 04:55:06 +01:00
parent f34ffa4f37
commit 99d50084f2
Signed by: xengi
SSH key fingerprint: SHA256:FGp51kRvGOcWnTHiOI39ImwVO4A3fpvR30nPX3LpV7g
2 changed files with 127 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
static/index.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sanic</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<div id="nav">
<div>
<button>Login</button>
<button>Config</button>
</div>
<div>
<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 -->
</div>
<div>
<label for="progress"></label>
<input type="range" id="progress" name="progress" min="0" max="100" value="0" />
</div>
</div>
<div>
baz
</div>
</div>
<div id="queue">
<table>
<thead>
<tr>
<td>Pos</td>
<td>Artists</td>
<td>Track</td>
<td>Album</td>
<td>Length</td>
<td>Actions</td>
</tr>
</thead>
<tbody id="queue_table"></tbody>
</table>
</div>
<div id="browser">browser</div>
<div id="result">result</div>
</main>
<script>
// create example elements in queue
const queue = document.getElementById("queue_table");
for (let i = 0; i < 100; i++) {
const tr = document.createElement("tr");
const pos = document.createElement("td");
pos.appendChild(document.createTextNode(i.toString()));
tr.appendChild(pos);
const artist = document.createElement("td");
artist.appendChild(document.createTextNode(`Artist ${i.toString()}`));
tr.appendChild(artist);
const track = document.createElement("td");
track.appendChild(document.createTextNode(`Track ${i.toString()}`));
tr.appendChild(track);
const album = document.createElement("td");
album.appendChild(document.createTextNode(`Album ${i.toString()}`));
tr.appendChild(album);
const length = document.createElement("td");
length.appendChild(document.createTextNode("1:23"));
tr.appendChild(length);
const actions = document.createElement("td");
const del = document.createElement("button");
del.innerHTML = "&#x1f5d1;";
actions.appendChild(del);
tr.appendChild(actions);
queue.appendChild(tr);
}
</script>
</body>
</html>

42
static/style.css Normal file
View file

@ -0,0 +1,42 @@
html, body { margin: 0; height: 100%; }
main {
height: 100%;
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 2fr;
grid-template-rows: 150px 1fr 1fr;
gap: 0 0;
grid-template-areas: "nav nav" "queue queue" "browser result";
}
#queue {
grid-area: queue;
overflow: auto;
}
#nav {
grid-area: nav;
display: flex;
}
#nav
#result {
grid-area: result;
overflow: auto;
}
#browser {
grid-area: browser;
}
table {
width: 100%;
}
/* debug */
div {
border: 1px solid blue;
}