diff --git a/src/chess_pressure/static/app.js b/src/chess_pressure/static/app.js index 62e945f..4083407 100644 --- a/src/chess_pressure/static/app.js +++ b/src/chess_pressure/static/app.js @@ -263,9 +263,12 @@ } // --- Playback --- + const ICON_PLAY = ''; + const ICON_PAUSE = ''; + function togglePlay() { playing = !playing; - document.getElementById("btn-play").innerHTML = playing ? "▮▮" : "▶"; + document.getElementById("btn-play").innerHTML = playing ? ICON_PAUSE : ICON_PLAY; if (playing) { playTimer = setInterval(() => { if (currentIndex >= gameData.frames.length - 1) { diff --git a/src/chess_pressure/static/index.html b/src/chess_pressure/static/index.html index 0cfb824..b9a210a 100644 --- a/src/chess_pressure/static/index.html +++ b/src/chess_pressure/static/index.html @@ -4,7 +4,7 @@ Chess Pressure - + @@ -26,17 +26,31 @@
- - - - - + + + + +
- - - - +
+ + +
+ +
@@ -110,6 +124,6 @@ - + diff --git a/src/chess_pressure/static/style.css b/src/chess_pressure/static/style.css index f9c77d3..a8765ba 100644 --- a/src/chess_pressure/static/style.css +++ b/src/chess_pressure/static/style.css @@ -137,18 +137,61 @@ main { 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-next { transform: scaleX(1); } .pressure-mode { display: flex; - gap: 1rem; - justify-content: center; - font-size: 0.8rem; - color: var(--fg2); + flex-direction: column; + gap: 0.4rem; +} + +.pmode-toggle { + display: flex; + border: 1px solid var(--border); + border-radius: 6px; + overflow: hidden; +} +.pmode-opt { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + padding: 0.55rem 0.4rem; + font-size: 0.85rem; + color: var(--fg2); + transition: background 0.12s, color 0.12s; + border-right: 1px solid var(--border); +} +.pmode-opt:last-child { border-right: none; } +.pmode-opt input { display: none; } +.pmode-opt:has(input:checked) { + background: var(--accent); + color: var(--bg); +} + +.toggle-row { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.45rem 0.6rem; + cursor: pointer; + font-size: 0.85rem; + color: var(--fg2); + min-height: 2.5rem; + border: 1px solid var(--border); + border-radius: 6px; +} +.toggle-row input[type="checkbox"] { + width: 1rem; + height: 1rem; + accent-color: var(--accent); + flex-shrink: 0; } -.pressure-mode label { cursor: pointer; } /* --- Game selector --- */ .game-selector {