| <!DOCTYPE html> |
| <html lang="my"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>POS Login</title> |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Myanmar:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| :root { |
| --bg: #0a0e1a; |
| --card: #111827; |
| --border: #1e293b; |
| --accent: #f59e0b; |
| --accent2: #ef4444; |
| --text: #f1f5f9; |
| --muted: #64748b; |
| --success: #10b981; |
| } |
| |
| body { |
| background: var(--bg); |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: 'Noto Sans Myanmar', sans-serif; |
| overflow: hidden; |
| } |
| |
| .bg-grid { |
| position: fixed; inset: 0; z-index: 0; |
| background-image: |
| linear-gradient(rgba(245,158,11,0.04) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(245,158,11,0.04) 1px, transparent 1px); |
| background-size: 40px 40px; |
| } |
| |
| .bg-glow { |
| position: fixed; |
| width: 600px; height: 600px; |
| background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, transparent 70%); |
| top: 50%; left: 50%; |
| transform: translate(-50%, -50%); |
| z-index: 0; |
| animation: pulse 4s ease-in-out infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } |
| 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } |
| } |
| |
| .card { |
| position: relative; z-index: 1; |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 20px; |
| padding: 48px 40px; |
| width: 100%; |
| max-width: 420px; |
| margin: 20px; |
| box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.1); |
| animation: slideUp 0.5s ease; |
| } |
| |
| @keyframes slideUp { |
| from { opacity: 0; transform: translateY(30px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .logo { |
| text-align: center; |
| margin-bottom: 36px; |
| } |
| |
| .logo-icon { |
| width: 64px; height: 64px; |
| background: linear-gradient(135deg, var(--accent), #d97706); |
| border-radius: 16px; |
| display: flex; align-items: center; justify-content: center; |
| font-size: 28px; |
| margin: 0 auto 16px; |
| box-shadow: 0 8px 24px rgba(245,158,11,0.3); |
| } |
| |
| .logo h1 { |
| color: var(--text); |
| font-size: 22px; |
| font-weight: 700; |
| letter-spacing: -0.5px; |
| } |
| |
| .logo p { |
| color: var(--muted); |
| font-size: 13px; |
| margin-top: 4px; |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
| |
| label { |
| display: block; |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 600; |
| margin-bottom: 8px; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| input { |
| width: 100%; |
| background: rgba(255,255,255,0.03); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| padding: 14px 16px; |
| color: var(--text); |
| font-size: 15px; |
| font-family: 'Noto Sans Myanmar', sans-serif; |
| transition: all 0.2s; |
| outline: none; |
| } |
| |
| input:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px rgba(245,158,11,0.1); |
| background: rgba(255,255,255,0.05); |
| } |
| |
| .btn-login { |
| width: 100%; |
| background: linear-gradient(135deg, var(--accent), #d97706); |
| border: none; |
| border-radius: 10px; |
| padding: 15px; |
| color: #000; |
| font-size: 15px; |
| font-weight: 700; |
| font-family: 'Noto Sans Myanmar', sans-serif; |
| cursor: pointer; |
| transition: all 0.2s; |
| margin-top: 8px; |
| letter-spacing: 0.3px; |
| } |
| |
| .btn-login:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 8px 24px rgba(245,158,11,0.4); |
| } |
| |
| .btn-login:active { transform: translateY(0); } |
| |
| .btn-login:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| transform: none; |
| } |
| |
| .error-msg { |
| background: rgba(239,68,68,0.1); |
| border: 1px solid rgba(239,68,68,0.3); |
| border-radius: 8px; |
| padding: 12px 14px; |
| color: #fca5a5; |
| font-size: 13px; |
| margin-top: 16px; |
| display: none; |
| } |
| |
| .demo-accounts { |
| margin-top: 28px; |
| padding-top: 24px; |
| border-top: 1px solid var(--border); |
| } |
| |
| .demo-accounts p { |
| color: var(--muted); |
| font-size: 11px; |
| text-align: center; |
| margin-bottom: 12px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .demo-btns { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 8px; |
| } |
| |
| .demo-btn { |
| background: rgba(255,255,255,0.03); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 10px; |
| color: var(--muted); |
| font-size: 12px; |
| cursor: pointer; |
| transition: all 0.2s; |
| font-family: 'Noto Sans Myanmar', sans-serif; |
| text-align: center; |
| } |
| |
| .demo-btn:hover { |
| border-color: var(--accent); |
| color: var(--accent); |
| background: rgba(245,158,11,0.05); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="bg-grid"></div> |
| <div class="bg-glow"></div> |
|
|
| <div class="card"> |
| <div class="logo"> |
| <div class="logo-icon">🛒</div> |
| <h1>ကုန်စုံဆိုင် POS</h1> |
| <p>Point of Sale System v1.0</p> |
| </div> |
|
|
| <div class="form-group"> |
| <label>အသုံးပြုသူအမည်</label> |
| <input type="text" id="username" placeholder="username" autocomplete="username"> |
| </div> |
| <div class="form-group"> |
| <label>စကားဝှက်</label> |
| <input type="password" id="password" placeholder="••••••••" autocomplete="current-password" |
| onkeydown="if(event.key==='Enter') doLogin()"> |
| </div> |
|
|
| <button class="btn-login" id="loginBtn" onclick="doLogin()"> |
| ၀င်ရောက်မည် |
| </button> |
|
|
| <div class="error-msg" id="errMsg"></div> |
|
|
| <div class="demo-accounts"> |
| <p>Demo Accounts</p> |
| <div class="demo-btns"> |
| <div class="demo-btn" onclick="fillDemo('admin','admin123')"> |
| 👑 Admin<br><small style="font-family:monospace">admin123</small> |
| </div> |
| <div class="demo-btn" onclick="fillDemo('cashier','cashier123')"> |
| 💰 Cashier<br><small style="font-family:monospace">cashier123</small> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| function fillDemo(u, p) { |
| document.getElementById('username').value = u; |
| document.getElementById('password').value = p; |
| document.getElementById('username').focus(); |
| } |
| |
| async function doLogin() { |
| const btn = document.getElementById('loginBtn'); |
| const err = document.getElementById('errMsg'); |
| const u = document.getElementById('username').value.trim(); |
| const p = document.getElementById('password').value; |
| |
| if (!u || !p) { |
| showErr('အသုံးပြုသူအမည်နှင့် စကားဝှက် ထည့်ပါ'); |
| return; |
| } |
| |
| btn.disabled = true; |
| btn.textContent = 'စစ်ဆေးနေသည်...'; |
| err.style.display = 'none'; |
| |
| try { |
| const res = await fetch('/api/login', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ username: u, password: p }) |
| }); |
| const data = await res.json(); |
| if (res.ok) { |
| btn.textContent = '✓ ၀င်ရောက်ပြီး...'; |
| setTimeout(() => { |
| window.location.href = data.role === 'admin' ? '/admin' : '/cashier'; |
| }, 400); |
| } else { |
| showErr(data.error || 'Login မအောင်မြင်ပါ'); |
| btn.disabled = false; |
| btn.textContent = '၀င်ရောက်မည်'; |
| } |
| } catch(e) { |
| showErr('ချိတ်ဆက်မှု ပြဿနာ ဖြစ်နေသည်'); |
| btn.disabled = false; |
| btn.textContent = '၀င်ရောက်မည်'; |
| } |
| } |
| |
| function showErr(msg) { |
| const err = document.getElementById('errMsg'); |
| err.textContent = msg; |
| err.style.display = 'block'; |
| } |
| |
| |
| document.getElementById('username').focus(); |
| </script> |
| </body> |
| </html> |
|
|
