From 4ab86fa6a0012646e83cb1009653e48a8ccae65b Mon Sep 17 00:00:00 2001
From: Michael Pilosov <consistentbayes@gmail.com>
Date: Thu, 25 Jun 2026 19:08:00 +0000
Subject: [PATCH] refactor: playback buttons full-width with double-triangle
 ff/rw icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- btn-prev/next now use |◄ / ►| (single triangle + bar, was btn-start/end)
- btn-start/end now use |◄◄ / ►►| (double triangle + bar)
- playback-buttons row fills full width with flex:1 on all buttons
- outer two buttons (start/end) slightly smaller via flex:0.65 + 13px SVG
---
 src/chess_pressure/static/index.html |  8 ++++----
 src/chess_pressure/static/style.css  | 13 ++++++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/chess_pressure/static/index.html b/src/chess_pressure/static/index.html
index b9a210a..d196d6f 100644
--- a/src/chess_pressure/static/index.html
+++ b/src/chess_pressure/static/index.html
@@ -26,11 +26,11 @@
       <div class="playback">
         <input type="range" id="slider" min="0" max="0" value="0">
         <div class="playback-buttons">
-          <button id="btn-start" title="Start"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="2" height="12"/><polygon points="14,2 6,8 14,14"/></svg></button>
-          <button id="btn-prev" title="Back"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="13,2 3,8 13,14"/></svg></button>
+          <button id="btn-start" title="Start"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="2" height="12"/><polygon points="9,2 4,8 9,14"/><polygon points="15,2 10,8 15,14"/></svg></button>
+          <button id="btn-prev" title="Back"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="2" height="12"/><polygon points="14,2 6,8 14,14"/></svg></button>
           <button id="btn-play" title="Play/Pause"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="3,2 13,8 3,14"/></svg></button>
-          <button id="btn-next" title="Forward"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="3,2 13,8 3,14"/></svg></button>
-          <button id="btn-end" title="End"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="2,2 10,8 2,14"/><rect x="13" y="2" width="2" height="12"/></svg></button>
+          <button id="btn-next" title="Forward"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="2,2 10,8 2,14"/><rect x="13" y="2" width="2" height="12"/></svg></button>
+          <button id="btn-end" title="End"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="1,2 6,8 1,14"/><polygon points="7,2 12,8 7,14"/><rect x="13" y="2" width="2" height="12"/></svg></button>
         </div>
         <div class="pressure-mode">
           <div class="pmode-toggle">
diff --git a/src/chess_pressure/static/style.css b/src/chess_pressure/static/style.css
index a8765ba..f33696d 100644
--- a/src/chess_pressure/static/style.css
+++ b/src/chess_pressure/static/style.css
@@ -127,21 +127,28 @@ main {
 .playback-buttons {
   display: flex;
   gap: 0.3rem;
-  justify-content: center;
+  width: 100%;
 }
 .playback-buttons button {
+  flex: 1;
   background: var(--bg2);
   border: 1px solid var(--border);
   color: var(--fg);
-  padding: 0.4rem 0.8rem;
+  padding: 0.4rem 0.5rem;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.9rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 .playback-buttons button:hover { background: var(--move-active); }
+#btn-start, #btn-end {
+  flex: 0.65;
+}
+#btn-start svg, #btn-end svg {
+  width: 13px;
+  height: 13px;
+}
 
 .pressure-mode {
   display: flex;