consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pos): add PIN pad login page with keyboard support and theming

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-03-31 01:32:53 +00:00
parent d3728789ec
commit e82b63892f
4 changed files with 231 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
pos/templates/login.html Normal file
View File

@@ -0,0 +1,53 @@
<!-- /home/Autopartes/pos/templates/login.html -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus POS — Login</title>
<link rel="stylesheet" href="/pos/static/css/common.css">
<style>
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-bg); }
.login-card { text-align: center; max-width: 340px; width: 100%; padding: 40px; }
.login-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.login-subtitle { color: var(--color-text-secondary); font-size: 0.9rem; margin-bottom: 24px; }
.pin-dots { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border); transition: all 0.2s; }
.pin-dot.filled { background: var(--color-primary); border-color: var(--color-primary); }
.pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 260px; margin: 0 auto; }
.pin-btn { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-surface); font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; cursor: pointer; transition: all 0.15s; color: var(--color-text); }
.pin-btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.pin-btn:active { transform: scale(0.95); }
.pin-btn--clear { font-size: 0.8rem; font-family: var(--font-body); }
.login-error { color: var(--color-error); font-size: 0.85rem; margin-top: 16px; min-height: 20px; }
</style>
</head>
<body>
<div class="card login-card">
<div class="login-title">Nexus POS</div>
<div class="login-subtitle">Ingresa tu PIN</div>
<div class="pin-dots" id="pinDots">
<div class="pin-dot"></div>
<div class="pin-dot"></div>
<div class="pin-dot"></div>
<div class="pin-dot"></div>
</div>
<div class="pin-grid">
<button class="pin-btn" onclick="addDigit('1')">1</button>
<button class="pin-btn" onclick="addDigit('2')">2</button>
<button class="pin-btn" onclick="addDigit('3')">3</button>
<button class="pin-btn" onclick="addDigit('4')">4</button>
<button class="pin-btn" onclick="addDigit('5')">5</button>
<button class="pin-btn" onclick="addDigit('6')">6</button>
<button class="pin-btn" onclick="addDigit('7')">7</button>
<button class="pin-btn" onclick="addDigit('8')">8</button>
<button class="pin-btn" onclick="addDigit('9')">9</button>
<button class="pin-btn pin-btn--clear" onclick="clearPin()">Borrar</button>
<button class="pin-btn" onclick="addDigit('0')">0</button>
<button class="pin-btn pin-btn--clear" onclick="submitPin()">OK</button>
</div>
<div class="login-error" id="loginError"></div>
</div>
<script src="/pos/static/js/login.js"></script>
</body>
</html>