Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RoomRanger | Dashboard</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#3B82F6', | |
| 600: '#2563EB' | |
| }, | |
| secondary: { | |
| 500: '#10B981', | |
| 600: '#059669' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> | |
| <h1 class="text-2xl font-bold">Room Status Dashboard</h1> | |
| <div class="flex flex-col sm:flex-row gap-2 w-full md:w-auto"> | |
| <div class="relative w-full"> | |
| <input type="text" placeholder="Search rooms..." class="bg-gray-800 border border-gray-700 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 w-full"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <div class="flex gap-2"> | |
| <div class="relative"> | |
| <button class="filter-btn bg-primary-500 hover:bg-primary-600 px-4 py-2 rounded-lg flex items-center whitespace-nowrap"> | |
| <i data-feather="filter" class="mr-2"></i> Status Filter | |
| </button> | |
| <div | |
| class="filter-dropdown hidden absolute right-0 mt-2 bg-gray-800 border border-gray-700 rounded-lg shadow-lg z-10 w-48"> | |
| <ul class="py-1"> | |
| <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="all">All Rooms</a> | |
| </li> | |
| <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="clean">Clean</a> | |
| </li> | |
| <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="dirty">Dirty</a> | |
| </li> | |
| <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="in-progress">In | |
| Progress</a></li> | |
| <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" | |
| data-status="maintenance">Maintenance</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <button id="manager-view-btn" class="hidden bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="bar-chart-2" class="mr-2"></i> Manager View | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block mb-6 p-4 bg-gray-800 rounded-lg" id="stats-dashboard"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="stat-card bg-green-900/50 border-l-4 border-green-500 p-3"> | |
| <h3 class="text-gray-400 text-sm">Clean Rooms</h3> | |
| <p class="text-2xl font-bold" id="clean-count">0</p> | |
| </div> | |
| <div class="stat-card bg-red-900/50 border-l-4 border-red-500 p-3"> | |
| <h3 class="text-gray-400 text-sm">Dirty Rooms</h3> | |
| <p class="text-2xl font-bold" id="dirty-count">0</p> | |
| </div> | |
| <div class="stat-card bg-yellow-900/50 border-l-4 border-yellow-500 p-3"> | |
| <h3 class="text-gray-400 text-sm">In Progress</h3> | |
| <p class="text-2xl font-bold" id="progress-count">0</p> | |
| </div> | |
| <div class="stat-card bg-purple-900/50 border-l-4 border-purple-500 p-3"> | |
| <h3 class="text-gray-400 text-sm">Maintenance</h3> | |
| <p class="text-2xl font-bold" id="maintenance-count">0</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3"> | |
| <!-- Room cards will be dynamically generated here --> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Generate room cards dynamically | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const roomGrid = document.querySelector('.grid'); | |
| for (let i = 1; i <= 124; i++) { | |
| const statuses = ['clean', 'dirty', 'in-progress', 'maintenance']; | |
| const randomStatus = statuses[Math.floor(Math.random() * statuses.length)]; | |
| roomGrid.innerHTML += ` | |
| <a href="room.html?number=${i}" class="room-card bg-gray-800 rounded-lg p-3 border-l-4 ${randomStatus === 'clean' ? 'border-green-500' : randomStatus === 'dirty' ? 'border-red-500' : randomStatus === 'in-progress' ? 'border-yellow-500' : 'border-purple-500'} hover:bg-gray-700 transition-colors relative"> | |
| <div class="absolute top-2 right-2 flex gap-1"> | |
| <button class="note-btn bg-gray-700 hover:bg-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-xs" data-room="${i}" data-action="add"> | |
| <i data-feather="plus" class="w-3 h-3"></i> | |
| </button> | |
| <button class="note-btn bg-gray-700 hover:bg-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-xs" data-room="${i}" data-action="remove"> | |
| <i data-feather="minus" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg">Room ${i}</h3> | |
| <span class="text-xs px-2 py-1 rounded-full ${randomStatus === 'clean' ? 'bg-green-900 text-green-300' : randomStatus === 'dirty' ? 'bg-red-900 text-red-300' : randomStatus === 'in-progress' ? 'bg-yellow-900 text-yellow-300' : 'bg-purple-900 text-purple-300'}">${randomStatus.replace('-', ' ')}</span> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-400"> | |
| <div class="flex items-center"> | |
| <i data-feather="${Math.random() > 0.5 ? 'user' : 'user-check'}" class="w-4 h-4 mr-2"></i> | |
| ${Math.random() > 0.5 ? 'Occupied' : 'Vacant'} | |
| </div> | |
| <div class="flex items-center mt-1"> | |
| <i data-feather="alert-circle" class="w-4 h-4 mr-2"></i> | |
| ${Math.random() > 0.7 ? 'Maintenance' : 'No issues'} | |
| </div> | |
| </div> | |
| </a> | |
| `; | |
| } | |
| feather.replace(); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |