From c17309cc43db424e6b440154bbeaef3901ca30c0 Mon Sep 17 00:00:00 2001 From: coon Date: Mon, 27 Nov 2023 20:50:11 +0100 Subject: [PATCH 1/2] static: add sanic logo image --- static/img/sanic-logo.webp | Bin 0 -> 7258 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 static/img/sanic-logo.webp diff --git a/static/img/sanic-logo.webp b/static/img/sanic-logo.webp new file mode 100644 index 0000000000000000000000000000000000000000..4ed3d29c82b40631f134ecc4d2a48d166999212e GIT binary patch literal 7258 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 jn>Lf#ULA^x{PoIricII5wd>f;ZXW;tZ! Date: Mon, 27 Nov 2023 20:51:38 +0100 Subject: [PATCH 2/2] static: work on basic layout + top controls --- static/flexbox/index.html | 41 +++++++++++++++++++++-- static/flexbox/sanic.css | 70 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 108 insertions(+), 3 deletions(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 583eb6a..46f74f3 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -25,8 +25,45 @@ -
+
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+
+ +
00
+ +
+
+
+
+ + +
+
+
+

Now playing: 00:00:00/100:00:00

+ + +
+
+
@@ -36,7 +73,7 @@ controls bottom
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 8b8a136..dcbf986 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -1,6 +1,7 @@ -body { +html, body { background-color: #09101d; color: #bbb; + height: 99%; } div { @@ -12,22 +13,89 @@ button { color: #bbb; } +input { + background-color: #28374a; + color: white; +} + #flexbox-container { display: flex; flex-direction: column; + height: 100%; } #controls-top { display: flex; flex-direction: row; + justify-content: space-b; } #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; +} + +#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: 50px; +} + +#xfade { + width: 20px; +} + +#queue { + flex-grow: 1; +} + +#controls_bottom { + flex-grow: 2; +} + +#footer { + text-align: right; }