From fd382d631332db24147cf30b941d867f0e9cde84 Mon Sep 17 00:00:00 2001
From: iRedTea <red__tea@outlook.com>
Date: Thu, 15 Oct 2026 10:41:22 +0300
Subject: [PATCH] feat: PIN lock - logout left of zero, erase and logout in a
 muted red

---
 internal/server/web/static/app.css | 10 +++++-----
 internal/server/web/static/pin.js  |  9 +++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/internal/server/web/static/app.css b/internal/server/web/static/app.css
index fb38070..09ddd59 100644
--- a/internal/server/web/static/app.css
+++ b/internal/server/web/static/app.css
@@ -134,11 +134,11 @@ html.pin-wait body > :not(.pinlock) { visibility: hidden; }
   -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .12s, transform .08s; }
 .pin-pad button:hover { background: #1b222c; }
 .pin-pad button:active { background: #12202f; transform: scale(.94); }
-.pin-pad button[data-k="back"] { background: transparent; border-color: transparent; color: var(--muted); }
-.pin-out { margin-top: 18px; }
-.pin-out button { background: transparent; color: var(--muted); padding: 6px 12px; font-size: 14px; }
-.pin-out button:hover { background: transparent; color: var(--text); }
-@media (max-height: 560px) { .pin-pad { grid-template-columns: repeat(3, 58px); gap: 10px; } .pin-pad button { width: 58px; height: 58px; font-size: 22px; } }
+.pin-pad button[data-k="back"], .pin-pad button[data-k="out"] { background: transparent; border-color: transparent; color: #c26a6a; }
+.pin-pad button[data-k="out"] { font-size: 15px; font-weight: 500; }
+.pin-pad button[data-k="back"]:hover, .pin-pad button[data-k="out"]:hover { background: rgba(194, 106, 106, .1); }
+.pin-pad button[data-k="back"]:active, .pin-pad button[data-k="out"]:active { background: rgba(194, 106, 106, .18); }
+@media (max-height: 560px) { .pin-pad { grid-template-columns: repeat(3, 58px); gap: 10px; } .pin-pad button { width: 58px; height: 58px; font-size: 22px; } .pin-pad button[data-k="out"] { font-size: 13px; } }
 
 /* Dialogs shared by the pages. */
 dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border);
diff --git a/internal/server/web/static/pin.js b/internal/server/web/static/pin.js
index 12cb0f1..ce54135 100644
--- a/internal/server/web/static/pin.js
+++ b/internal/server/web/static/pin.js
@@ -46,9 +46,9 @@
     box.setAttribute('aria-modal', 'true');
     box.setAttribute('aria-label', 'Ввод PIN-кода');
     var keys = '';
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'back'].forEach(function (k) {
-      if (!k) { keys += '<span></span>'; return; }
-      keys += '<button type="button" data-k="' + k + '"' + (k === 'back' ? ' aria-label="Стереть">' + BACK : '>' + k) + '</button>';
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'out', '0', 'back'].forEach(function (k) {
+      var label = k === 'back' ? ' aria-label="Стереть">' + BACK : k === 'out' ? ' title="Выйти из панели">Выйти' : '>' + k;
+      keys += '<button type="button" data-k="' + k + '"' + label + '</button>';
     });
     box.innerHTML =
       '<div class="pin-card">' +
@@ -57,7 +57,7 @@
       '<div class="pin-dots"><i></i><i></i><i></i><i></i></div>' +
       '<div class="pin-msg" aria-live="polite"></div>' +
       '<div class="pin-pad">' + keys + '</div>' +
-      '<form method="post" action="/logout" class="pin-out"><button type="submit">Выйти</button></form>' +
+      '<form method="post" action="/logout" class="pin-out" hidden></form>' +
       '</div>';
     document.body.appendChild(box);
     requestAnimationFrame(function () { box.classList.add('on'); });
@@ -67,6 +67,7 @@
       for (var i = 0; i < 4; i++) dots[i].classList.toggle('on', i < code.length);
     }
     function press(k) {
+      if (k === 'out') { box.querySelector('.pin-out').submit(); return; }
       if (busy) return;
       if (k === 'back') { code = code.slice(0, -1); show(); return; }
       if (code.length >= 4) return;