redtea/lpra
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: PIN lock - logout left of zero, erase and logout in a muted red

Browse Source
This commit is contained in:
redtea committed 2026-10-15 10:41:22 +03:00
1 parent fc488717d3
commit fd382d6313
2 files changed
+10 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

internal/server/web/static/app.css
+5 -5
View File
@@ -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; } -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .12s, transform .08s; }
.pin-pad button:hover { background: #1b222c; } .pin-pad button:hover { background: #1b222c; }
.pin-pad button:active { background: #12202f; transform: scale(.94); } .pin-pad button:active { background: #12202f; transform: scale(.94); }
.pin-pad button[data-k="back"] { background: transparent; border-color: transparent; color: var(--muted); } .pin-pad button[data-k="back"], .pin-pad button[data-k="out"] { background: transparent; border-color: transparent; color: #c26a6a; }
.pin-out { margin-top: 18px; } .pin-pad button[data-k="out"] { font-size: 15px; font-weight: 500; }
.pin-out button { background: transparent; color: var(--muted); padding: 6px 12px; font-size: 14px; } .pin-pad button[data-k="back"]:hover, .pin-pad button[data-k="out"]:hover { background: rgba(194, 106, 106, .1); }
.pin-out button:hover { background: transparent; color: var(--text); } .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; } } @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. */ /* Dialogs shared by the pages. */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border);
internal/server/web/static/pin.js
+5 -4
View File
@@ -46,9 +46,9 @@
box.setAttribute('aria-modal', 'true'); box.setAttribute('aria-modal', 'true');
box.setAttribute('aria-label', 'Ввод PIN-кода'); box.setAttribute('aria-label', 'Ввод PIN-кода');
var keys = ''; var keys = '';
['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'back'].forEach(function (k) { ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'out', '0', 'back'].forEach(function (k) {
if (!k) { keys += '<span></span>'; return; } var label = k === 'back' ? ' aria-label="Стереть">' + BACK : k === 'out' ? ' title="Выйти из панели">Выйти' : '>' + k;
keys += '<button type="button" data-k="' + k + '"' + (k === 'back' ? ' aria-label="Стереть">' + BACK : '>' + k) + '</button>'; keys += '<button type="button" data-k="' + k + '"' + label + '</button>';
}); });
box.innerHTML = box.innerHTML =
'<div class="pin-card">' + '<div class="pin-card">' +
@@ -57,7 +57,7 @@
'<div class="pin-dots"><i></i><i></i><i></i><i></i></div>' + '<div class="pin-dots"><i></i><i></i><i></i><i></i></div>' +
'<div class="pin-msg" aria-live="polite"></div>' + '<div class="pin-msg" aria-live="polite"></div>' +
'<div class="pin-pad">' + keys + '</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>'; '</div>';
document.body.appendChild(box); document.body.appendChild(box);
requestAnimationFrame(function () { box.classList.add('on'); }); 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); for (var i = 0; i < 4; i++) dots[i].classList.toggle('on', i < code.length);
} }
function press(k) { function press(k) {
if (k === 'out') { box.querySelector('.pin-out').submit(); return; }
if (busy) return; if (busy) return;
if (k === 'back') { code = code.slice(0, -1); show(); return; } if (k === 'back') { code = code.slice(0, -1); show(); return; }
if (code.length >= 4) return; if (code.length >= 4) return;