taha1444/choco-ruby-admin-delight
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Choco Ruby Admin</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <style>9 body {10 background-color: #FFF8F0;11 font-family: 'Montserrat', sans-serif;12 }13 .login-container {14 background: linear-gradient(135deg, rgba(62, 39, 35, 0.9) 0%, rgba(62, 39, 35, 0.7) 50%, rgba(233, 30, 99, 0.3) 100%);15 }16 .btn-primary {17 background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);18 transition: all 0.3s ease;19 }20 .btn-primary:hover {21 background: linear-gradient(135deg, #C2185B 0%, #E91E63 100%);22 }23 .order-card {24 border-left: 4px solid #E91E63;25 }26 </style>27</head>28<body class="min-h-screen">29 <!-- Login Screen (shown by default) -->30 <div id="login-screen" class="fixed inset-0 flex items-center justify-center z-50">31 <div class="login-container rounded-2xl shadow-2xl overflow-hidden w-full max-w-md">32 <div class="p-8 text-center">33 <h2 class="text-3xl font-bold text-white mb-2 font-playfair">Choco Ruby Admin</h2>34 <p class="text-white/80 mb-8">Enter your password to continue</p>35 36 <div class="mb-6">37 <input type="password" id="admin-password" placeholder="Password" 38 class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-ruby/50">39 <p id="password-error" class="text-ruby-light text-sm mt-2 hidden">Incorrect password</p>40 </div>41 42 <button id="login-btn" class="btn-primary w-full py-3 rounded-lg text-white font-semibold">43 Login44 </button>45 </div>46 </div>47 </div>48 49 <!-- Admin Dashboard (hidden by default) -->50 <div id="admin-dashboard" class="hidden p-4 md:p-8 max-w-7xl mx-auto">51 <header class="flex justify-between items-center mb-8">52 <h1 class="text-3xl font-bold text-chocolate font-playfair">Order Dashboard</h1>53 <button id="logout-btn" class="text-ruby hover:text-ruby-dark font-medium">Logout</button>54 </header>55 56 <div class="bg-white rounded-2xl shadow-lg overflow-hidden">57 <div class="p-6 border-b border-gray-100">58 <h2 class="text-xl font-semibold text-chocolate">Recent Orders</h2>59 <p id="order-count" class="text-chocolate-light">Loading orders...</p>60 </div>61 62 <div id="orders-container" class="divide-y divide-gray-100">63 <!-- Orders will be dynamically inserted here -->64 <div class="p-6 text-center text-chocolate-light" id="no-orders">65 No orders found66 </div>67 </div>68 </div>69 </div>70 71 <script>72 // Password protection73 const correctPassword = "test1";74 const loginScreen = document.getElementById('login-screen');75 const adminDashboard = document.getElementById('admin-dashboard');76 const passwordInput = document.getElementById('admin-password');77 const passwordError = document.getElementById('password-error');78 const loginBtn = document.getElementById('login-btn');79 const logoutBtn = document.getElementById('logout-btn');80 const ordersContainer = document.getElementById('orders-container');81 const noOrdersMsg = document.getElementById('no-orders');82 const orderCount = document.getElementById('order-count');83 84 // Check if already logged in (from sessionStorage)85 if (sessionStorage.getItem('chocoRubyAdminLoggedIn') === 'true') {86 loginScreen.classList.add('hidden');87 adminDashboard.classList.remove('hidden');88 loadOrders();89 }90 91 // Login functionality92 loginBtn.addEventListener('click', () => {93 if (passwordInput.value === correctPassword) {94 // Correct password95 sessionStorage.setItem('chocoRubyAdminLoggedIn', 'true');96 loginScreen.classList.add('hidden');97 adminDashboard.classList.remove('hidden');98 passwordError.classList.add('hidden');99 loadOrders();100 } else {101 // Wrong password102 passwordError.classList.remove('hidden');103 passwordInput.focus();104 }105 });106 107 // Logout functionality108 logoutBtn.addEventListener('click', () => {109 sessionStorage.removeItem('chocoRubyAdminLoggedIn');110 adminDashboard.classList.add('hidden');111 loginScreen.classList.remove('hidden');112 passwordInput.value = '';113 });114 115 // Allow pressing Enter to login116 passwordInput.addEventListener('keypress', (e) => {117 if (e.key === 'Enter') {118 loginBtn.click();119 }120 });121 122 // Load orders from localStorage123 function loadOrders() {124 const orders = JSON.parse(localStorage.getItem('chocoRubyOrders')) || [];125 126 if (orders.length === 0) {127 noOrdersMsg.classList.remove('hidden');128 orderCount.textContent = "0 orders";129 return;130 } else {131 noOrdersMsg.classList.add('hidden');132 orderCount.textContent = `${orders.length} ${orders.length === 1 ? 'order' : 'orders'}`;133 }134 135 // Clear existing orders136 ordersContainer.innerHTML = '';137 138 // Add each order to the container (newest first)139 orders.reverse().forEach((order, index) => {140 const orderElement = document.createElement('div');141 orderElement.className = 'order-card p-6 hover:bg-cream/50 transition-colors';142 orderElement.innerHTML = `143 <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">144 <div class="flex-1">145 <h3 class="font-semibold text-chocolate text-lg">${order.name}</h3>146 <p class="text-chocolate-light mt-1">${order.phone}</p>147 <p class="text-chocolate mt-3">${order.description}</p>148 </div>149 <div class="flex items-center gap-3">150 <span class="text-sm text-white bg-ruby px-3 py-1 rounded-full">${new Date(order.timestamp).toLocaleString()}</span>151 <button class="delete-order bg-red-100 text-red-600 hover:bg-red-200 px-4 py-2 rounded-lg transition-colors" data-id="${order.timestamp}">152 Delete153 </button>154 </div>155 </div>156 `;157 ordersContainer.appendChild(orderElement);158 });159 160 // Add event listeners to delete buttons161 document.querySelectorAll('.delete-order').forEach(button => {162 button.addEventListener('click', (e) => {163 const orderId = e.target.getAttribute('data-id');164 deleteOrder(orderId);165 });166 });167 }168 169 // Delete an order170 function deleteOrder(orderId) {171 let orders = JSON.parse(localStorage.getItem('chocoRubyOrders')) || [];172 orders = orders.filter(order => order.timestamp.toString() !== orderId);173 localStorage.setItem('chocoRubyOrders', JSON.stringify(orders));174 loadOrders();175 }176 177 // Check for new orders every 2 seconds178 setInterval(() => {179 if (sessionStorage.getItem('chocoRubyAdminLoggedIn') === 'true') {180 loadOrders();181 }182 }, 2000);183 </script>184</body>185</html>