Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Login | Fuse Cafe | Roblox</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <custom-sidebar></custom-sidebar> | |
| <main class="ml-0 md:ml-64 pt-16 px-4 min-h-screen bg-[#f9f5f0]"> | |
| <div class="max-w-md mx-auto py-12 animate__animated animate__fadeIn"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden p-8"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-[#6F4E37] mb-2">Admin Login</h1> | |
| <p class="text-[#5a3c2b]">Sign in to manage Fuse Cafe</p> | |
| </div> | |
| <form id="admin-login-form" class="space-y-6"> | |
| <div> | |
| <label for="login-email" class="block text-sm font-medium text-[#5a3c2b]">Email</label> | |
| <input type="email" id="login-email" required class="mt-1 block w-full rounded-md border-[#d4b999] shadow-sm focus:border-[#6F4E37] focus:ring focus:ring-[#6F4E37] focus:ring-opacity-50 p-2 bg-[#f9f5f0] transition-all duration-300" placeholder="your@email.com"> | |
| </div> | |
| <div> | |
| <label for="login-password" class="block text-sm font-medium text-[#5a3c2b]">Password</label> | |
| <input type="password" id="login-password" required class="mt-1 block w-full rounded-md border-[#d4b999] shadow-sm focus:border-[#6F4E37] focus:ring focus:ring-[#6F4E37] focus:ring-opacity-50 p-2 bg-[#f9f5f0] transition-all duration-300" placeholder="••••••••"> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#6F4E37] hover:bg-[#5a3c2b] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#6F4E37] transition-all duration-300 transform hover:scale-[1.01]"> | |
| Sign In | |
| </button> | |
| </div> | |
| <div id="auth-app-container" class="hidden p-4 bg-[#f9f5f0] rounded-md border border-[#e2d5c8]"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="text-sm font-medium text-[#5a3c2b]">Authenticator Setup</h3> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div id="qr-code-container" class="mb-4 p-2 bg-white rounded"> | |
| <!-- QR code will be inserted here --> | |
| </div> | |
| <p class="text-xs text-[#5a3c2b] mb-2">Scan this QR code with your authenticator app</p> | |
| </div> | |
| </div> | |
| <div class="text-center text-sm text-[#5a3c2b]"> | |
| Don't have an account? <a href="admin-signup.html" class="font-medium text-[#6F4E37] hover:text-[#5a3c2b]">Register</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| feather.replace(); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const form = document.getElementById('admin-login-form'); | |
| const authAppContainer = document.getElementById('auth-app-container'); | |
| const qrCodeContainer = document.getElementById('qr-code-container'); | |
| // Check if using auth app from session storage | |
| const pendingAdmin = JSON.parse(sessionStorage.getItem('pendingAdmin')); | |
| if (pendingAdmin?.useAuthApp) { | |
| authAppContainer.classList.remove('hidden'); | |
| generateQRCode(pendingAdmin.verificationCode, 'Fuse Cafe Admin'); | |
| } | |
| function generateQRCode(secret, label) { | |
| const qrUrl = `otpauth://totp/${encodeURIComponent(label)}?secret=${secret}&issuer=Fuse%20Cafe`; | |
| qrCodeContainer.innerHTML = ''; | |
| new QRCode(qrCodeContainer, { | |
| text: qrUrl, | |
| width: 128, | |
| height: 128, | |
| colorDark: "#5a3c2b", | |
| colorLight: "#ffffff", | |
| correctLevel: QRCode.CorrectLevel.H | |
| }); | |
| } | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = document.getElementById('login-email').value; | |
| const password = document.getElementById('login-password').value; | |
| const fuseCafeData = JSON.parse(localStorage.getItem('fuseCafeData')) || {}; | |
| const admins = fuseCafeData.admins || []; | |
| const admin = admins.find(a => a.email === email && a.password === password); | |
| if (admin) { | |
| // Create session token | |
| const token = btoa(JSON.stringify({ | |
| email: admin.email, | |
| timestamp: Date.now() | |
| })); | |
| sessionStorage.setItem('adminToken', token); | |
| alert('Login successful!'); | |
| window.location.href = 'admin-dashboard.html'; | |
| } else { | |
| alert('Invalid email or password'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |