From 4ea297c4a10cbe29514fefce3282f4c7a393b08b Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Mon, 27 Nov 2023 20:51:38 +0100
Subject: [PATCH] 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 @@
           <input type="range" id="progress" name="progress" min="0" max="100" />
         </div>
       </div>
-      <div id="queue-controls">
+      <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>
+              <label for="xfade">xfade</label>
+            </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" src="../img/sanic-logo.webp">
+          Sanic
+        </div>
       </div>
     </div>
     <div id="queue">
@@ -36,7 +73,7 @@
         controls bottom
     </div>
     <div id="footer">
-        footer
+      sanic mpd web ui 0.1.0 - by XenGi and coon &copy; 2023
     </div>
   </div>
 </body>
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;
 }