Update anomation ui

Author: Matteo-it

examples/led-matrix-painter/assets/img/icon-play.svg

@@ -113,25 +113,28 @@ <h3 class="box-title">Project code preview</h3>
   </main>
   <div class="frames-section-bottom">
     <div class="controls-section-left">
-      <div class="sidebar-header">
-        <h3 style="margin:0;font-size:0.9rem;color:#666">Frames (auto-saved)</h3>
-        <button id="new-frame" title="Create new frame">+</button>
-        <button id="play-animation">Play Animation</button>
-      </div>
-      <div>
-        <label><input type="radio" name="mode" value="frames" checked> Frames</label>
-        <label><input type="radio" name="mode" value="anim"> Animations</label>
-      </div>
-      <div id="anim-controls">
-        <input id="anim-name" placeholder="Animation name" />
-      </div>
-      <!-- Frame name goes above the list of frames and below animation name (if present) -->
-      <div>
-        <input id="name" placeholder="Frame name (optional)" />
-        <input id="duration" type="number" min="0" step="10" value="1000" title="Duration in ms" />
-      </div>
-      <div id="frames" class="frames"></div>
-    </div>
+                <div class="sidebar-header">
+                  <h3 style="margin:0;font-size:0.9rem;color:#666">Animation</h3>
+                  <div class="anim-buttons">
+                      <button id="play-animation" title="Play Animation"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2 L14 8 L4 14 Z"/></svg></button>
+                      <button id="stop-animation" title="Stop Animation"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="4" y="4" width="8" height="8"/></svg></button>
+                  </div>
+                </div>
+                <div class="animation-controls-body">
+                    <div>
+                      <label><input type="radio" name="mode" value="frames" checked> Frames</label>
+                      <label><input type="radio" name="mode" value="anim"> Animations</label>
+                    </div>
+                    <div id="anim-controls">
+                      <input id="anim-name" placeholder="Animation name" />
+                    </div>
+                    <!-- Frame name goes above the list of frames and below animation name (if present) -->
+                    <div>
+                      <input id="name" placeholder="Frame name (optional)" />
+                      <input id="duration" type="number" min="0" step="10" value="1000" title="Duration in ms" />
+                    </div>
+                    <div id="frames" class="frames"></div>
+                </div>    </div>
   </div>
   <div id="error-container" class="error-message" style="display: none;"></div>
   </div>

examples/led-matrix-painter/assets/img/icon-stop.svg

@@ -239,10 +239,14 @@ input:checked + .slider:before {
     border-radius: 8px;
     width: 100%;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 20px;
+    flex-direction: column; /* Changed from row */
+    gap: 16px; /* Adjusted gap */
+}
+
+.animation-controls-body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
 .row {
@@ -390,7 +394,47 @@ input:checked + .slider:before {
   display: flex;
   gap: 8px;
   justify-content: space-between;
-  margin-bottom: 8px;
+  align-items: center; /* Added for vertical alignment */
+}
+
+.anim-buttons {
+  display: flex;
+  gap: 8px; /* Space between play and stop buttons */
+}
+
+/* Styling for the new icon-only buttons */
+.anim-buttons button {
+  padding: 6px; /* Smaller padding for icon buttons */
+  width: 32px; /* Fixed width for square buttons */
+  height: 32px; /* Fixed height for square buttons */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px; /* Changed to 8px as requested */
+  color: white; /* For the SVG fill */
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle shadow */
+  transition: background 0.3s ease;
+}
+
+#play-animation {
+  background: #008184;
+}
+
+#stop-animation {
+  background: rgba(0, 129, 132, 0.2); /* #008184 with 20% alpha */
+}
+
+
+.anim-buttons button:hover {
+  background: #006567;
+}
+
+.anim-buttons button svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor; /* Use button's text color for SVG fill */
 }
 .frames {
     display: flex;