File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090038/Shop/auth.php

Back
<?php require_once __DIR__ . '/config/config.php'; ?> <!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="เข้าสู่ระบบหรือสมัครสมาชิก Sarin Shop — ช้อปปิ้งออนไลน์ที่ดีที่สุด"> <title>เข้าสู่ระบบ / สมัครสมาชิก — Sarin Shop</title> <link rel="stylesheet" href="./public/css/style.css"> </head> <body> <div class="auth-page"> <!-- ─── Left Panel (Branding) ─── --> <div class="auth-left"> <div class="auth-brand"> <div class="auth-brand-logo"> <span>🛒</span> Sarin Shop </div> <div class="auth-brand-tagline"> ช้อปง่าย จ่ายปลอดภัย<br>สินค้าหลายล้านชิ้นรอคุณอยู่ </div> <div class="auth-brand-features"> <div class="auth-feature"> <div class="auth-feature-icon">🔒</div> <div>ระบบการชำระเงินที่ปลอดภัย 100%</div> </div> <div class="auth-feature"> <div class="auth-feature-icon">🚚</div> <div>จัดส่งทั่วประเทศ ติดตามพัสดุแบบ Real-time</div> </div> <div class="auth-feature"> <div class="auth-feature-icon">↩️</div> <div>รับประกันคืนสินค้าภายใน 15 วัน</div> </div> <div class="auth-feature"> <div class="auth-feature-icon">💰</div> <div>โปรโมชั่นและส่วนลดพิเศษทุกวัน</div> </div> </div> </div> </div> <!-- ─── Right Panel (Auth Card) ─── --> <div class="auth-right"> <div class="auth-card"> <!-- Tabs --> <div class="auth-tabs"> <button class="auth-tab active" id="tab-login">เข้าสู่ระบบ</button> <button class="auth-tab" id="tab-register">สมัครสมาชิก</button> </div> <!-- STEP: Form (Login / Register panels) --> <div class="auth-step active" id="step-form"> <!-- ── Login Panel ── --> <div class="auth-panel active" id="panel-login"> <h1 class="auth-title">ยินดีต้อนรับกลับ!</h1> <p class="auth-subtitle">เข้าสู่ระบบด้วยอีเมล เบอร์โทร หรือชื่อผู้ใช้</p> <form id="login-form" novalidate> <div class="form-group mb-2"> <label class="form-label" for="login-identifier">อีเมล / เบอร์โทร / ชื่อผู้ใช้ <span class="req"></span></label> <div class="input-wrap"> <span class="input-icon input-left-icon">👤</span> <input type="text" id="login-identifier" class="form-input with-left-icon" placeholder="กรอกอีเมล เบอร์โทร หรือชื่อผู้ใช้" autocomplete="username" required> </div> </div> <div class="form-group mb-2"> <label class="form-label" for="login-password">รหัสผ่าน <span class="req"></span></label> <div class="input-wrap"> <span class="input-icon input-left-icon">🔑</span> <input type="password" id="login-password" class="form-input with-left-icon has-icon" placeholder="กรอกรหัสผ่าน" autocomplete="current-password" required> <span class="input-icon" id="login-pass-toggle" title="แสดง/ซ่อนรหัสผ่าน">👁</span> </div> </div> <div class="flex" style="justify-content:space-between; align-items:center; margin-bottom:1.25rem;"> <label class="checkbox-wrap"> <input type="checkbox" id="login-remember"> <span class="checkbox-label">จดจำฉัน (7 วัน)</span> </label> <a href="#" style="font-size:.875rem; font-weight:500;">ลืมรหัสผ่าน?</a> </div> <button type="submit" class="btn btn-primary btn-block btn-lg" id="login-btn"> เข้าสู่ระบบ </button> </form> </div> <!-- ── Register Panel ── --> <div class="auth-panel" id="panel-register" style="display:none;"> <h1 class="auth-title">สร้างบัญชีใหม่</h1> <p class="auth-subtitle">สมัครฟรี พร้อมรับสิทธิ์พิเศษสำหรับสมาชิกใหม่!</p> <form id="register-form" novalidate> <div class="form-group mb-2"> <label class="form-label" for="reg-username">ชื่อผู้ใช้ <span class="req"></span></label> <div class="input-wrap"> <span class="input-icon input-left-icon">🧑</span> <input type="text" id="reg-username" class="form-input with-left-icon" placeholder="ชื่อผู้ใช้ 3–50 ตัวอักษร" autocomplete="username" required> </div> </div> <div class="form-group mb-2"> <label class="form-label" for="reg-email">อีเมล <span class="req"></span></label> <div class="input-wrap"> <span class="input-icon input-left-icon">📧</span> <input type="email" id="reg-email" class="form-input with-left-icon" placeholder="example@email.com" autocomplete="email" required> </div> </div> <div class="form-group mb-2"> <label class="form-label" for="reg-phone">เบอร์โทรศัพท์ <span style="color:var(--text-muted);font-size:.8rem;">(ไม่บังคับ)</span></label> <div class="input-wrap"> <span class="input-icon input-left-icon">📱</span> <input type="tel" id="reg-phone" class="form-input with-left-icon" placeholder="0812345678" autocomplete="tel"> </div> </div> <div class="form-group mb-2"> <label class="form-label" for="reg-password">รหัสผ่าน <span class="req"></span></label> <div class="input-wrap"> <span class="input-icon input-left-icon">🔒</span> <input type="password" id="reg-password" class="form-input with-left-icon has-icon" placeholder="อย่างน้อย 8 ตัว มีตัวเลขและสัญลักษณ์" autocomplete="new-password" required> <span class="input-icon" id="reg-pass-toggle">👁</span> </div> <div class="strength-bar-wrap"> <div class="strength-bar" id="reg-strength-bar"></div> </div> <div class="strength-label" id="reg-strength-label"></div> </div> <div class="form-group mb-2"> <label class="form-label" for="reg-password-confirm">ยืนยันรหัสผ่าน <span class="req"></span></label> <div class="input-wrap"> <span class="input-icon input-left-icon">🔒</span> <input type="password" id="reg-password-confirm" class="form-input with-left-icon" placeholder="กรอกรหัสผ่านอีกครั้ง" autocomplete="new-password" required> </div> </div> <div class="form-group mb-2"> <label class="checkbox-wrap"> <input type="checkbox" id="reg-tos" required> <span class="checkbox-label"> ฉันยอมรับ <a href="#">ข้อกำหนดการใช้บริการ</a> และ <a href="#">นโยบายความเป็นส่วนตัว</a> ของ Sarin Shop </span> </label> </div> <button type="submit" class="btn btn-primary btn-block btn-lg" id="register-btn"> สมัครสมาชิกฟรี </button> </form> </div> </div><!-- /step-form --> <!-- STEP: OTP Verification --> <div class="auth-step" id="step-otp"> <div class="otp-header"> <div style="font-size:2.5rem; margin-bottom:.75rem;">📲</div> <h2 class="auth-title">ยืนยัน OTP</h2> <p class="auth-subtitle" id="otp-context">กรอกรหัส OTP 6 หลักที่ส่งไปยังอีเมล/เบอร์โทรของคุณ</p> </div> <div class="otp-grid" id="otp-input-wrap"> <input type="text" class="otp-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" aria-label="OTP digit 1"> <input type="text" class="otp-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" aria-label="OTP digit 2"> <input type="text" class="otp-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" aria-label="OTP digit 3"> <input type="text" class="otp-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" aria-label="OTP digit 4"> <input type="text" class="otp-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" aria-label="OTP digit 5"> <input type="text" class="otp-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" aria-label="OTP digit 6"> </div> <div class="otp-countdown"> <span>หมดอายุใน</span> <span class="otp-timer" id="otp-timer">05:00</span> </div> <div class="otp-resend-wrap mt-1"> <span class="text-muted" style="font-size:.875rem;">ไม่ได้รับรหัส? </span> <button id="otp-resend" class="btn btn-ghost btn-sm" disabled>ส่งใหม่</button> </div> <div style="display:flex; gap:.75rem; margin-top:1.5rem;"> <button id="otp-back-btn" class="btn btn-outline" style="flex:1;">← กลับ</button> <button id="verify-otp-btn" class="btn btn-primary" style="flex:2;">✓ ยืนยัน OTP</button> </div> </div><!-- /step-otp --> </div><!-- /auth-card --> </div><!-- /auth-right --> </div><!-- /auth-page --> <script type="module"> import { initOtpInputs, showToast } from './public/js/ui.js'; window.showToast = showToast; // Tab switching const tabLogin = document.getElementById('tab-login'); const tabRegister = document.getElementById('tab-register'); const panelLogin = document.getElementById('panel-login'); const panelReg = document.getElementById('panel-register'); function switchTab(tab) { tabLogin.classList.toggle('active', tab === 'login'); tabRegister.classList.toggle('active', tab === 'register'); panelLogin.style.display = tab === 'login' ? 'block' : 'none'; panelReg.style.display = tab === 'register' ? 'block' : 'none'; panelLogin.classList.toggle('active', tab === 'login'); panelReg.classList.toggle('active', tab === 'register'); } tabLogin.addEventListener('click', () => switchTab('login')); tabRegister.addEventListener('click', () => switchTab('register')); // URL tab param const urlParams = new URLSearchParams(window.location.search); switchTab(urlParams.get('tab') \|\| 'login'); if (urlParams.get('msg')) showToast(urlParams.get('msg'), 'warning'); </script> <script type="module" src="./public/js/auth.js"></script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.26 | proxy | phpinfo | Settings