Create a responsive internal web app for hotel housekeeping operations, optimized for tablet and mobile use during room rounds. The homepage should display a visual, clickable grid of all 124 rooms, each linking to a dedicated page showing cleaning status, maintenance needs, and occupancy. Use a dark, low-light-friendly interface inspired by Trello, with muted backgrounds, bright highlight colors, and legible typography for night use. Include a search bar and status filter, plus “+” and “–” buttons under each category to add or remove shared notes visible to all employees. Add a management dashboard summarizing room statuses, maintenance alerts, and pending cleanings. Implement user roles with two views: Housekeeping Staff(view and update individual room info) and Managers (access full dashboard and editing privileges across all rooms). Enable notification alerts when room statuses change, when maintenance is requested, or when new notes are added, ensuring timely updates for all users.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Hotelkeeper Pro
-emoji: 🏃
-colorFrom: purple
+title: HotelKeeper Pro 🏨
+colorFrom: blue
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,62 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    background-color: rgb(17, 24, 39);
+                    color: rgba(255, 255, 255, 0.6);
+                    padding: 1.5rem;
+                    margin-top: 2rem;
+                }
+                .footer-content {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    flex-wrap: wrap;
+                }
+                .footer-links {
+                    display: flex;
+                    gap: 1.5rem;
+                }
+                .footer-link {
+                    color: rgba(255, 255, 255, 0.6);
+                    text-decoration: none;
+                    transition: color 0.2s;
+                }
+                .footer-link:hover {
+                    color: white;
+                }
+                .copyright {
+                    font-size: 0.875rem;
+                }
+                @media (max-width: 768px) {
+                    .footer-content {
+                        flex-direction: column;
+                        gap: 1rem;
+                        text-align: center;
+                    }
+                    .footer-links {
+                        order: -1;
+                    }
+                }
+            </style>
+            <div class="footer-content">
+                <div class="copyright">
+                    &copy; ${new Date().getFullYear()} RoomRanger. All rights reserved.
+                </div>
+                <div class="footer-links">
+                    <a href="/privacy" class="footer-link">Privacy</a>
+                    <a href="/terms" class="footer-link">Terms</a>
+                    <a href="/contact" class="footer-link">Contact</a>
+                    <a href="/help" class="footer-link">Help</a>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,106 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    background-color: rgb(17, 24, 39);
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                }
+                .navbar {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 1rem 1.5rem;
+                    max-width: 100%;
+                }
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    font-weight: 700;
+                    font-size: 1.25rem;
+                    color: white;
+                }
+                .logo-icon {
+                    margin-right: 0.75rem;
+                    color: #3B82F6;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 1.5rem;
+                }
+                .nav-link {
+                    color: rgba(255, 255, 255, 0.7);
+                    text-decoration: none;
+                    transition: color 0.2s;
+                    display: flex;
+                    align-items: center;
+                }
+                .nav-link:hover {
+                    color: white;
+                }
+                .nav-icon {
+                    margin-right: 0.5rem;
+                    width: 1rem;
+                    height: 1rem;
+                }
+                .user-menu {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+                .avatar {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    border-radius: 9999px;
+                    background-color: rgb(55, 65, 81);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-weight: 600;
+                }
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    .mobile-menu-button {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav class="navbar">
+                <a href="/" class="logo">
+                    <i data-feather="home" class="logo-icon"></i>
+                    RoomRanger
+                </a>
+                
+                <div class="nav-links">
+                    <a href="/" class="nav-link">
+                        <i data-feather="grid" class="nav-icon"></i>
+                        Dashboard
+                    </a>
+                    <a href="/rooms.html" class="nav-link">
+                        <i data-feather="list" class="nav-icon"></i>
+                        All Rooms
+                    </a>
+                    <a href="/reports.html" class="nav-link">
+                        <i data-feather="file-text" class="nav-icon"></i>
+                        Reports
+                    </a>
+                    <a href="/settings.html" class="nav-link">
+                        <i data-feather="settings" class="nav-icon"></i>
+                        Settings
+                    </a>
+                </div>
+                
+                <div class="user-menu">
+                    <div class="avatar">JD</div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,138 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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>

room.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Room Details | HotelKeeper Pro</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>
+</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 gap-6">
+            <div class="md:w-1/3">
+                <div class="bg-gray-800 rounded-lg p-4">
+                    <div class="flex justify-between items-center mb-4">
+                        <h1 class="text-2xl font-bold" id="room-number">Room 101</h1>
+                        <span class="status-badge px-3 py-1 rounded-full text-sm font-medium" id="room-status">Clean</span>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div>
+                            <h3 class="text-gray-400 text-sm mb-1">Current Status</h3>
+                            <div class="flex gap-2 flex-wrap">
+                                <button class="status-btn bg-green-900/50 hover:bg-green-800 px-3 py-1 rounded-full" data-status="clean">Clean</button>
+                                <button class="status-btn bg-red-900/50 hover:bg-red-800 px-3 py-1 rounded-full" data-status="dirty">Dirty</button>
+                                <button class="status-btn bg-yellow-900/50 hover:bg-yellow-800 px-3 py-1 rounded-full" data-status="in-progress">In Progress</button>
+                                <button class="status-btn bg-purple-900/50 hover:bg-purple-800 px-3 py-1 rounded-full" data-status="maintenance">Maintenance</button>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <h3 class="text-gray-400 text-sm mb-1">Occupancy</h3>
+                            <div class="flex gap-2">
+                                <button class="occupancy-btn bg-blue-900/50 hover:bg-blue-800 px-3 py-1 rounded-full" data-occupancy="occupied">Occupied</button>
+                                <button class="occupancy-btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full" data-occupancy="vacant">Vacant</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-gray-800 rounded-lg p-4 mt-4">
+                    <div class="flex justify-between items-center mb-3">
+                        <h3 class="font-medium">Maintenance Issues</h3>
+                        <button class="add-issue-btn bg-primary-500 hover:bg-primary-600 px-2 py-1 rounded text-sm flex items-center">
+                            <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add
+                        </button>
+                    </div>
+                    <ul class="space-y-2" id="issues-list">
+                        <li class="flex items-center justify-between bg-gray-700/50 px-3 py-2 rounded">
+                            <span>Broken shower head</span>
+                            <button class="text-red-400 hover:text-red-300">
+                                <i data-feather="trash-2" class="w-4 h-4"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div class="md:w-2/3">
+                <div class="bg-gray-800 rounded-lg p-4">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold">Room Notes</h2>
+                        <div class="flex gap-2">
+                            <button class="add-note-btn bg-primary-500 hover:bg-primary-600 px-3 py-1 rounded-lg flex items-center">
+                                <i data-feather="plus" class="mr-1"></i> Add Note
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="space-y-3" id="notes-container">
+                        <div class="note-card bg-gray-700/50 p-3 rounded-lg">
+                            <div class="flex justify-between items-start mb-2">
+                                <span class="text-sm text-gray-400">Housekeeping - Today</span>
+                                <button class="text-gray-400 hover:text-gray-200">
+                                    <i data-feather="x" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                            <p>Extra towels requested by guest</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-gray-800 rounded-lg p-4 mt-4">
+                    <h2 class="text-xl font-bold mb-4">Cleaning Checklist</h2>
+                    <div class="space-y-2">
+                        <label class="flex items-center space-x-3">
+                            <input type="checkbox" class="form-checkbox h-5 w-5 text-primary-500 rounded">
+                            <span>Dust all surfaces</span>
+                        </label>
+                        <label class="flex items-center space-x-3">
+                            <input type="checkbox" class="form-checkbox h-5 w-5 text-primary-500 rounded">
+                            <span>Vacuum carpets</span>
+                        </label>
+                        <label class="flex items-center space-x-3">
+                            <input type="checkbox" class="form-checkbox h-5 w-5 text-primary-500 rounded">
+                            <span>Clean bathroom</span>
+                        </label>
+                        <label class="flex items-center space-x-3">
+                            <input type="checkbox" class="form-checkbox h-5 w-5 text-primary-500 rounded">
+                            <span>Change linens</span>
+                        </label>
+                        <label class="flex items-center space-x-3">
+                            <input type="checkbox" class="form-checkbox h-5 w-5 text-primary-500 rounded">
+                            <span>Restock amenities</span>
+                        </label>
+                    </div>
+                    
+                    <button class="mt-4 w-full bg-primary-500 hover:bg-primary-600 px-4 py-2 rounded-lg">
+                        Mark as Complete
+                    </button>
+                </div>
+            </div>
+        </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();
+        
+        // Get room number from URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const roomNumber = urlParams.get('number');
+        document.getElementById('room-number').textContent = `Room ${roomNumber}`;
+        
+        // Status buttons functionality
+        document.querySelectorAll('.status-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const status = this.dataset.status;
+                const statusBadge = document.getElementById('room-status');
+                
+                // Update badge
+                statusBadge.textContent = status.charAt(0).toUpperCase() + status.slice(1).replace('-', ' ');
+                statusBadge.className = 'status-badge px-3 py-1 rounded-full text-sm font-medium';
+                
+                if (status === 'clean') statusBadge.classList.add('bg-green-900/50', 'text-green-300');
+                else if (status === 'dirty') statusBadge.classList.add('bg-red-900/50', 'text-red-300');
+                else if (status === 'in-progress') statusBadge.classList.add('bg-yellow-900/50', 'text-yellow-300');
+                else if (status === 'maintenance') statusBadge.classList.add('bg-purple-900/50', 'text-purple-300');
+                
+                // Show notification
+                showNotification(`Room status updated to ${status}`, 'success');
+            });
+        });
+        
+        // Occupancy buttons
+        document.querySelectorAll('.occupancy-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const occupancy = this.dataset.occupancy;
+                
+                // Toggle active state
+                document.querySelectorAll('.occupancy-btn').forEach(b => {
+                    b.classList.remove('bg-blue-900/50', 'bg-gray-700');
+                    b.classList.add('bg-gray-700');
+                });
+                
+                if (occupancy === 'occupied') {
+                    this.classList.remove('bg-gray-700');
+                    this.classList.add('bg-blue-900/50');
+                }
+                
+                showNotification(`Occupancy set to ${occupancy}`, 'info');
+            });
+        });
+        
+        // Add note functionality
+        document.querySelector('.add-note-btn')?.addEventListener('click', function() {
+            const noteText = prompt('Enter your note:');
+            if (noteText) {
+                const notesContainer = document.getElementById('notes-container');
+                const now = new Date().toLocaleString();
+                
+                notesContainer.insertAdjacentHTML('afterbegin', `
+                    <div class="note-card bg-gray-700/50 p-3 rounded-lg">
+                        <div class="flex justify-between items-start mb-2">
+                            <span class="text-sm text-gray-400">${currentUser.name} - ${now}</span>
+                            <button class="text-gray-400 hover:text-gray-200 delete-note-btn">
+                                <i data-feather="x" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        <p>${noteText}</p>
+                    </div>
+                `);
+                
+                feather.replace();
+                showNotification('Note added successfully', 'success');
+                
+                // Add delete handler to new note
+                document.querySelector('.delete-note-btn')?.addEventListener('click', function() {
+                    this.closest('.note-card').remove();
+                    showNotification('Note deleted', 'error');
+                });
+            }
+        });
+    </script>
+</body>
+</html>

script.js

@@ -0,0 +1,130 @@
+
+// User roles and authentication simulation
+let currentUser = {
+    role: 'staff', // Default to staff view
+    name: 'Housekeeper'
+};
+
+// Check for manager view
+function checkUserRole() {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('role') && urlParams.get('role') === 'manager') {
+        currentUser.role = 'manager';
+        document.getElementById('manager-view-btn').classList.remove('hidden');
+        document.getElementById('stats-dashboard').classList.remove('hidden');
+    }
+}
+
+// Room status counters
+const statusCounts = {
+    clean: 0,
+    dirty: 0,
+    'in-progress': 0,
+    maintenance: 0
+};
+
+// Shared functionality across pages
+document.addEventListener('DOMContentLoaded', function() {
+    checkUserRole();
+    
+    // Filter functionality
+    const filterBtn = document.querySelector('.filter-btn');
+    const filterDropdown = document.querySelector('.filter-dropdown');
+    const filterOptions = document.querySelectorAll('.filter-option');
+    const roomCards = document.querySelectorAll('.room-card');
+    
+    filterBtn.addEventListener('click', () => {
+        filterDropdown.classList.toggle('hidden');
+    });
+    
+    filterOptions.forEach(option => {
+        option.addEventListener('click', (e) => {
+            e.preventDefault();
+            const status = option.dataset.status;
+            
+            roomCards.forEach(card => {
+                if (status === 'all') {
+                    card.style.display = 'block';
+                } else {
+                    card.style.display = card.classList.contains(`border-${status === 'clean' ? 'green' : status === 'dirty' ? 'red' : status === 'in-progress' ? 'yellow' : 'purple'}-500`) ? 'block' : 'none';
+                }
+            });
+            
+            filterDropdown.classList.add('hidden');
+        });
+    });
+    
+    // Count statuses
+    document.querySelectorAll('.room-card').forEach(card => {
+        if (card.classList.contains('border-green-500')) statusCounts.clean++;
+        else if (card.classList.contains('border-red-500')) statusCounts.dirty++;
+        else if (card.classList.contains('border-yellow-500')) statusCounts['in-progress']++;
+        else if (card.classList.contains('border-purple-500')) statusCounts.maintenance++;
+    });
+    
+    // Update stats dashboard
+    document.getElementById('clean-count').textContent = statusCounts.clean;
+    document.getElementById('dirty-count').textContent = statusCounts.dirty;
+    document.getElementById('progress-count').textContent = statusCounts['in-progress'];
+    document.getElementById('maintenance-count').textContent = statusCounts.maintenance;
+    
+    // Note buttons functionality
+    document.querySelectorAll('.note-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const roomNumber = btn.dataset.room;
+            const action = btn.dataset.action;
+            
+            if (action === 'add') {
+                showNotification(`Note added to Room ${roomNumber}`, 'success');
+            } else {
+                showNotification(`Note removed from Room ${roomNumber}`, 'error');
+            }
+        });
+    });
+    
+    // Manager view button
+    document.getElementById('manager-view-btn')?.addEventListener('click', () => {
+        window.location.href = window.location.pathname + '?role=manager';
+    });
+// Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
+    // Handle status filter dropdown
+    const filterButton = document.querySelector('.filter-button');
+    if (filterButton) {
+        filterButton.addEventListener('click', function() {
+            document.querySelector('.filter-dropdown').classList.toggle('hidden');
+        });
+    }
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(event) {
+        if (!event.target.closest('.filter-button') && !event.target.closest('.filter-dropdown')) {
+            const dropdowns = document.querySelectorAll('.filter-dropdown');
+            dropdowns.forEach(dropdown => {
+                dropdown.classList.add('hidden');
+            });
+        }
+    });
+});
+
+// Notification system
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg shadow-lg flex items-center ${type === 'success' ? 'bg-green-800' : type === 'error' ? 'bg-red-800' : 'bg-primary-700'}`;
+    notification.innerHTML = `
+        <i data-feather="${type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'info'}" class="mr-3"></i>
+        <span>${message}</span>
+    `;
+    document.body.appendChild(notification);
+    feather.replace();
+    
+    setTimeout(() => {
+        notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}

style.css

@@ -1,28 +1,91 @@
+
+/* Base styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Dark mode optimized colors */
+.dark {
+    --bg-primary: #111827;
+    --bg-secondary: #1F2937;
+    --text-primary: #F3F4F6;
+    --text-secondary: #9CA3AF;
+    --highlight-green: #10B981;
+    --highlight-red: #EF4444;
+    --highlight-yellow: #F59E0B;
+    --highlight-purple: #8B5CF6;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Touch-friendly elements */
+button, a {
+    -webkit-user-select: none;
+    user-select: none;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.note-btn {
+    transition: transform 0.1s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.note-btn:active {
+    transform: scale(0.9);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.stat-card {
+    transition: all 0.3s ease;
 }
+
+.stat-card:hover {
+    transform: translateY(-2px);
+}
+/* Room card animations */
+.room-card {
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.room-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+}
+
+/* Status indicators */
+.status-clean {
+    border-left-color: #10B981;
+}
+
+.status-dirty {
+    border-left-color: #EF4444;
+}
+
+.status-in-progress {
+    border-left-color: #F59E0B;
+}
+
+.status-maintenance {
+    border-left-color: #8B5CF6;
+}
+
+/* Dark mode overrides */
+.dark .status-clean {
+    border-left-color: #10B981;
+}
+
+.dark .status-dirty {
+    border-left-color: #EF4444;
+}
+
+.dark .status-in-progress {
+    border-left-color: #F59E0B;
+}
+
+.dark .status-maintenance {
+    border-left-color: #8B5CF6;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+    .room-card {
+        padding: 0.75rem;
+    }
+}