Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pizza Palace - POS Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| .order-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .menu-item:hover { | |
| transform: scale(1.02); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-red-800 text-white flex flex-col"> | |
| <div class="p-4 flex items-center justify-center border-b border-red-700"> | |
| <i class="fas fa-pizza-slice text-3xl mr-3 text-yellow-300"></i> | |
| <h1 class="text-2xl font-bold">Pizza Palace</h1> | |
| </div> | |
| <nav class="flex-1 p-4 space-y-2"> | |
| <a href="#" class="flex items-center p-3 rounded-lg bg-red-700"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-red-700 transition"> | |
| <i class="fas fa-utensils mr-3"></i> | |
| Menu Management | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-red-700 transition"> | |
| <i class="fas fa-users mr-3"></i> | |
| Customers | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-red-700 transition"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Reports | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-red-700 transition"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| <div class="p-4 border-t border-red-700"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">John Pizza</p> | |
| <p class="text-xs text-red-200">Manager</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <header class="bg-white shadow-sm p-4 flex justify-between items-center"> | |
| <h2 class="text-xl font-semibold text-gray-800">POS Dashboard</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-gray-500 text-xl"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> | |
| </div> | |
| <div class="text-sm text-gray-600"> | |
| <span id="current-time" class="font-medium"></span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="flex-1 overflow-y-auto p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Today's Orders</p> | |
| <h3 class="text-2xl font-bold">24</h3> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-shopping-cart text-green-600"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-green-600 mt-2">↑ 12% from yesterday</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Revenue</p> | |
| <h3 class="text-2xl font-bold">$1,245</h3> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-dollar-sign text-blue-600"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-blue-600 mt-2">↑ 8% from yesterday</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Active Orders</p> | |
| <h3 class="text-2xl font-bold">5</h3> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-full"> | |
| <i class="fas fa-clock text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-yellow-600 mt-2">2 preparing, 3 baking</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Popular Item</p> | |
| <h3 class="text-2xl font-bold">Pepperoni</h3> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-full"> | |
| <i class="fas fa-fire text-red-600"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-red-600 mt-2">15 sold today</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Active Orders --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">Active Orders</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm">Dine-in</button> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm">Delivery</button> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm">Takeout</button> | |
| </div> | |
| </div> | |
| <div class="overflow-y-auto max-h-96 scrollbar-hide"> | |
| <div class="divide-y"> | |
| <!-- Order Card 1 --> | |
| <div class="p-4 hover:bg-gray-50 transition order-card cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <h4 class="font-medium">Order #1042</h4> | |
| <span class="ml-2 px-2 py-0.5 bg-yellow-100 text-yellow-800 text-xs rounded-full">Preparing</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Table 5 • 12:24 PM</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$24.50</p> | |
| <p class="text-xs text-gray-500">3 items</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center justify-between"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-8 h-8 rounded-full border-2 border-white" alt="Customer"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-8 h-8 rounded-full border-2 border-white" alt="Customer"> | |
| </div> | |
| <button class="px-3 py-1 bg-red-600 text-white rounded-full text-sm hover:bg-red-700 transition">Complete</button> | |
| </div> | |
| </div> | |
| <!-- Order Card 2 --> | |
| <div class="p-4 hover:bg-gray-50 transition order-card cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <h4 class="font-medium">Order #1041</h4> | |
| <span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full">Baking</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Delivery • 12:15 PM</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$32.75</p> | |
| <p class="text-xs text-gray-500">5 items</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-motorcycle text-gray-400 mr-2"></i> | |
| <p class="text-sm">Delivery in 25 min</p> | |
| </div> | |
| <button class="px-3 py-1 bg-red-600 text-white rounded-full text-sm hover:bg-red-700 transition">Dispatch</button> | |
| </div> | |
| </div> | |
| <!-- Order Card 3 --> | |
| <div class="p-4 hover:bg-gray-50 transition order-card cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <h4 class="font-medium">Order #1040</h4> | |
| <span class="ml-2 px-2 py-0.5 bg-green-100 text-green-800 text-xs rounded-full">Ready</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Takeout • 12:05 PM</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$18.90</p> | |
| <p class="text-xs text-gray-500">2 items</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-clock text-gray-400 mr-2"></i> | |
| <p class="text-sm">Waiting for pickup</p> | |
| </div> | |
| <button class="px-3 py-1 bg-red-600 text-white rounded-full text-sm hover:bg-red-700 transition">Collected</button> | |
| </div> | |
| </div> | |
| <!-- Order Card 4 --> | |
| <div class="p-4 hover:bg-gray-50 transition order-card cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <h4 class="font-medium">Order #1039</h4> | |
| <span class="ml-2 px-2 py-0.5 bg-yellow-100 text-yellow-800 text-xs rounded-full">Preparing</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Table 2 • 11:48 AM</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$45.20</p> | |
| <p class="text-xs text-gray-500">6 items</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center justify-between"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-8 h-8 rounded-full border-2 border-white" alt="Customer"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-8 h-8 rounded-full border-2 border-white" alt="Customer"> | |
| <div class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs">+2</div> | |
| </div> | |
| <button class="px-3 py-1 bg-red-600 text-white rounded-full text-sm hover:bg-red-700 transition">Complete</button> | |
| </div> | |
| </div> | |
| <!-- Order Card 5 --> | |
| <div class="p-4 hover:bg-gray-50 transition order-card cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <h4 class="font-medium">Order #1038</h4> | |
| <span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full">Baking</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Delivery • 11:35 AM</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$28.40</p> | |
| <p class="text-xs text-gray-500">4 items</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-motorcycle text-gray-400 mr-2"></i> | |
| <p class="text-sm">Delivery in 15 min</p> | |
| </div> | |
| <button class="px-3 py-1 bg-red-600 text-white rounded-full text-sm hover:bg-red-700 transition">Dispatch</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Menu --> | |
| <div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-semibold text-lg">Quick Menu</h3> | |
| <div class="mt-2 relative"> | |
| <input type="text" placeholder="Search menu..." class="w-full p-2 border rounded pl-10"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="p-4 grid grid-cols-2 gap-3"> | |
| <!-- Menu Item 1 --> | |
| <div class="bg-gray-50 rounded-lg p-3 cursor-pointer menu-item transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-pizza-slice text-red-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Pepperoni</h4> | |
| <p class="text-sm text-gray-500">$12.99</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 2 --> | |
| <div class="bg-gray-50 rounded-lg p-3 cursor-pointer menu-item transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-leaf text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Veggie</h4> | |
| <p class="text-sm text-gray-500">$11.99</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 3 --> | |
| <div class="bg-gray-50 rounded-lg p-3 cursor-pointer menu-item transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-bacon text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">BBQ Chicken</h4> | |
| <p class="text-sm text-gray-500">$13.99</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 4 --> | |
| <div class="bg-gray-50 rounded-lg p-3 cursor-pointer menu-item transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center | |
| </html> |