File manager - Edit - /home/webapp69.cm.in.th/u69319090040/Shop/login.php
Back
<?php // NEXUS Commerce - User & Seller Login Page (Shopee Style - Username/Phone login) if (session_status() === PHP_SESSION_NONE) { session_start(); } ?> <!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>เข้าสู่ระบบ | SHOWPIPI Social Shopping</title> <link rel="stylesheet" href="assets/css/style.css"> <script src="https://unpkg.com/@phosphor-icons/web"></script> <style> body { background-color: #090D16; color: #F8FAFC; display: flex; flex-direction: column; min-height: 100vh; } .auth-header { padding: 1.25rem 2.5rem; display: flex; justify-content: space-between; align-items: center; background: rgba(17, 24, 39, 0.8); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.1); } .auth-container { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem; background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.15) 0%, transparent 60%); } .auth-card { background: rgba(17, 24, 39, 0.85); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; width: 100%; max-width: 460px; padding: 2.5rem; box-shadow: 0 20px 40px rgba(0,0,0,0.5); } .tab-bar { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1.75rem; } .tab-item { flex: 1; text-align: center; padding: 0.75rem 0; color: #94A3B8; font-weight: 700; font-size: 0.9rem; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; } .tab-item.active { color: #FFF; border-bottom-color: #7C3AED; } .input-group { margin-bottom: 1.25rem; } .input-label { display: block; font-size: 0.85rem; color: #94A3B8; margin-bottom: 0.4rem; } .auth-input { width: 100%; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); padding: 0.85rem 1rem; border-radius: 12px; color: #FFF; font-size: 0.95rem; outline: none; transition: all 0.2s ease; } .auth-input:focus { border-color: #7C3AED; box-shadow: 0 0 12px rgba(124, 58, 237, 0.3); } .quick-demo-box { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } </style> </head> <body> <!-- Header Banner --> <header class="auth-header"> <a href="index.php" class="brand-logo"> <div class="brand-icon"><i class="ph ph-shopping-bag-open"></i></div> <span class="brand-badge">SHOWPIPI</span> </a> <div style="display:flex; align-items:center; gap:1.25rem;"> <div style="font-size:0.9rem; color:var(--text-muted);"> ต้องการเข้าสู่ระบบผู้ดูแลระบบ? <a href="admin_login.php" style="color:var(--teal-accent); font-weight:bold; text-decoration:none;">เข้าสู่ระบบ Admin</a> </div> <!-- Red Cross Back Button --> <button onclick="if(document.referrer && document.referrer.includes(location.host)) { history.back(); } else { location.href='index.php'; }" style="background:rgba(244, 63, 94, 0.25); border:2px solid #F43F5E; color:#F43F5E; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.4rem; transition:all 0.2s ease; box-shadow:0 0 15px rgba(244,63,94,0.5);" title="ปิด / ย้อนกลับ" onmouseover="this.style.background='#F43F5E'; this.style.color='#FFF'; this.style.transform='scale(1.1) rotate(90deg)';" onmouseout="this.style.background='rgba(244, 63, 94, 0.25)'; this.style.color='#F43F5E'; this.style.transform='none';"> <i class="ph ph-x"></i> </button> </div> </header> <!-- Login Main Box --> <main class="auth-container"> <div class="auth-card"> <h2 style="font-size:1.6rem; font-weight:800; text-align:center; margin-bottom:1.5rem;">เข้าสู่ระบบสมาชิก</h2> <!-- Shopee Style Tabs --> <div class="tab-bar"> <div class="tab-item active" id="tabPassword" onclick="switchAuthTab('password')">รหัสผ่าน</div> <div class="tab-item" id="tabQR" onclick="switchAuthTab('qr')">สแกน QR Code</div> <div class="tab-item" id="tabSMS" onclick="switchAuthTab('sms')">SMS / OTP</div> </div> <!-- Password Login Form --> <form id="loginForm"> <div class="input-group"> <label class="input-label">ชื่อผู้ใช้ / เบอร์โทรศัพท์ (Username or Phone)</label> <input type="text" id="loginUsername" class="auth-input" placeholder="เช่น alexvance หรือ 0812345678" required> </div> <div class="input-group"> <label class="input-label">รหัสผ่าน (Password)</label> <input type="password" id="loginPassword" class="auth-input" placeholder="กรอกรหัสผ่านของคุณ" required> </div> <div style="display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; margin-bottom:1.5rem;"> <label style="display:flex; align-items:center; gap:6px; color:var(--text-muted); cursor:pointer;"> <input type="checkbox" checked style="accent-color:var(--primary-purple);"> จดจำการเข้าสู่ระบบ </label> <a href="#" onclick="alert('กรุณาเข้าสู่ระบบด้วยบัญชีทดลอง')" style="color:var(--teal-accent); text-decoration:none;">ลืมรหัสผ่าน?</a> </div> <button type="submit" class="btn-primary" style="width:100%; padding:0.9rem; font-size:1rem; border-radius:12px;" id="loginSubmitBtn"> เข้าสู่ระบบ (Login) </button> </form> <!-- QR Code Login View --> <div id="qrView" style="display:none; text-align:center; padding:1.5rem 0;"> <div style="background:#FFF; padding:1rem; display:inline-block; border-radius:16px; margin-bottom:1rem;"> <img src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=NEXUS-SHOP-LOGIN-TOKEN-90284" style="width:160px; height:160px;"> </div> <p style="font-size:0.85rem; color:var(--text-muted);">เปิดแอป NEXUS บนมือถือ แล้วสแกน QR Code เพื่อเข้าสู่ระบบทันที</p> </div> <!-- SMS OTP View --> <div id="smsView" style="display:none; padding:1rem 0;"> <div class="input-group"> <label class="input-label">เบอร์โทรศัพท์มือถือ</label> <input type="tel" class="auth-input" placeholder="08X-XXX-XXXX"> </div> <button class="btn-glass" style="width:100%; padding:0.75rem; margin-bottom:1rem;" onclick="alert('รหัส OTP คือ: 888999')">ขอรหัส OTP</button> </div> </div> </main> <script> function switchAuthTab(tab) { document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active')); document.getElementById('loginForm').style.display = 'none'; document.getElementById('qrView').style.display = 'none'; document.getElementById('smsView').style.display = 'none'; if (tab === 'password') { document.getElementById('tabPassword').classList.add('active'); document.getElementById('loginForm').style.display = 'block'; } else if (tab === 'qr') { document.getElementById('tabQR').classList.add('active'); document.getElementById('qrView').style.display = 'block'; } else if (tab === 'sms') { document.getElementById('tabSMS').classList.add('active'); document.getElementById('smsView').style.display = 'block'; } } function fillDemo(username, password) { document.getElementById('loginUsername').value = username; document.getElementById('loginPassword').value = password; document.getElementById('loginForm').dispatchEvent(new Event('submit')); } document.getElementById('loginForm').addEventListener('submit', async (e) => { e.preventDefault(); const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; const btn = document.getElementById('loginSubmitBtn'); btn.disabled = true; btn.textContent = 'กำลังเข้าสู่ระบบ...'; try { const res = await fetch('api/login.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'login', username, password, portal: 'user' }) }); const data = await res.json(); if (data.status === 'success') { alert('เข้าสู่ระบบสำเร็จ! ต้อนรับคุณ ' + data.user.name); window.location.href = data.redirect || 'index.php'; } else { alert(data.message || 'เข้าสู่ระบบไม่สำเร็จ'); btn.disabled = false; btn.textContent = 'เข้าสู่ระบบ (Login)'; } } catch (err) { alert('เกิดข้อผิดพลาดในการเชื่อมต่อ'); btn.disabled = false; btn.textContent = 'เข้าสู่ระบบ (Login)'; } }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.22 |
proxy
|
phpinfo
|
Settings