Basic functionality for web interface is done

1 files changed, 24 insertions, 24 deletions

diff --git a/doc/diagram.drawio b/doc/diagram.drawio
index bb8dbd0..424570a 100644
--- a/doc/diagram.drawio
+++ b/doc/diagram.drawio
@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2025-02-23T16:24:22.548Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.2 Chrome/114.0.5735.289 Electron/25.9.4 Safari/537.36" etag="8sa4v4RLC4vbyHn2WtNr" version="22.1.2" type="device" pages="2">
+<mxfile host="Electron" modified="2025-02-24T11:00:29.036Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.2 Chrome/114.0.5735.289 Electron/25.9.4 Safari/537.36" etag="9_vGhwK_Mq_I_v5YUap0" version="22.1.2" type="device" pages="2">
   <diagram id="PyNSc7ezSt42GBdjTBvd" name="Launchpad">
-    <mxGraphModel dx="1561" dy="962" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+    <mxGraphModel dx="1562" dy="963" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
         <mxCell id="ZtjfeE3uwfRsFhnWfLYL-0" />
         <mxCell id="ZtjfeE3uwfRsFhnWfLYL-1" parent="ZtjfeE3uwfRsFhnWfLYL-0" />
@@ -200,51 +200,51 @@
     </mxGraphModel>
   </diagram>
   <diagram id="R-0UAU87gWX4lK6NCzNs" name="Web wireframe">
-    <mxGraphModel dx="1561" dy="962" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+    <mxGraphModel dx="1302" dy="803" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
-        <mxCell id="0goJ5iq8U8227kam6OUo-1" value="Song list" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="80" y="80" width="240" height="360" as="geometry" />
+        <mxCell id="0goJ5iq8U8227kam6OUo-1" value="Key point list" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="160" y="80" width="80" height="240" as="geometry" />
         </mxCell>
         <mxCell id="0goJ5iq8U8227kam6OUo-2" value="Volume slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="320" y="80" width="440" height="40" as="geometry" />
+          <mxGeometry x="380" y="280" width="260" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="0goJ5iq8U8227kam6OUo-3" value="Speed slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="360" y="160" width="360" height="40" as="geometry" />
+        <mxCell id="0goJ5iq8U8227kam6OUo-3" value="Speed" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="280" y="280" width="60" height="40" as="geometry" />
         </mxCell>
         <mxCell id="0goJ5iq8U8227kam6OUo-4" value="Speed +5" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="720" y="160" width="40" height="40" as="geometry" />
+          <mxGeometry x="340" y="280" width="40" height="40" as="geometry" />
         </mxCell>
         <mxCell id="0goJ5iq8U8227kam6OUo-5" value="Speed -5" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="320" y="160" width="40" height="40" as="geometry" />
+          <mxGeometry x="240" y="280" width="40" height="40" as="geometry" />
         </mxCell>
         <mxCell id="E9TFIlIWBKXALOEyTYeL-1" value="Seek slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="390" y="240" width="300" height="40" as="geometry" />
+          <mxGeometry x="240" y="120" width="440" height="40" as="geometry" />
         </mxCell>
         <mxCell id="E9TFIlIWBKXALOEyTYeL-2" value="Prev song" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="320" y="240" width="70" height="40" as="geometry" />
+          <mxGeometry x="240" y="200" width="80" height="80" as="geometry" />
         </mxCell>
         <mxCell id="e6dzTLVl2QyovQL1D1hT-10" value="Next song" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="690" y="240" width="70" height="40" as="geometry" />
+          <mxGeometry x="600" y="200" width="80" height="80" as="geometry" />
         </mxCell>
-        <mxCell id="2VOf0fCjGpZdvwMfuWx9-2" value="Set key point" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="440" y="320" width="200" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="eBDQebIGrGTMiAxLC66R-1" value="Previous" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="320" y="320" width="120" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="eBDQebIGrGTMiAxLC66R-2" value="Next" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="640" y="320" width="120" height="40" as="geometry" />
+        <mxCell id="2VOf0fCjGpZdvwMfuWx9-2" value="Key point slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="240" y="160" width="440" height="40" as="geometry" />
         </mxCell>
         <mxCell id="e5je7AeTKV-z7aj2oazw-2" value="Stop" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="320" y="400" width="120" height="40" as="geometry" />
+          <mxGeometry x="320" y="200" width="80" height="80" as="geometry" />
         </mxCell>
         <mxCell id="e5je7AeTKV-z7aj2oazw-3" value="Play/pause" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="600" y="400" width="160" height="40" as="geometry" />
+          <mxGeometry x="400" y="200" width="100" height="80" as="geometry" />
         </mxCell>
         <mxCell id="e5je7AeTKV-z7aj2oazw-4" value="Jump" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="440" y="400" width="160" height="40" as="geometry" />
+          <mxGeometry x="500" y="200" width="100" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="ZINFS9bsx5oSfdTS2e79-1" value="Full&lt;br&gt;screen" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="640" y="280" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="ZINFS9bsx5oSfdTS2e79-4" value="Song name" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="240" y="80" width="440" height="40" as="geometry" />
         </mxCell>
       </root>
     </mxGraphModel>