static: work on basic layout + top controls

static/flexbox/index.html

@@ -25,8 +25,45 @@
           <input type="range" id="progress" name="progress" min="0" max="100" />
         </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>
+              <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>

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;
 }