Hugging Face's logo

Spaces:
creatomator
/
hotelkeeper-pro
Running

App Files Community
creatomator commited on
Commit
c6e447b
·
verified ·
1 Parent(s): 9529790

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +78 -69
index.html CHANGED
@@ -1,15 +1,16 @@
1
  <!DOCTYPE html>
2
  <html lang="en" class="dark">
 
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>RoomRanger | Dashboard</title>
7
- <link rel="stylesheet" href="style.css">
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
- <script src="https://unpkg.com/feather-icons"></script>
11
- <script>
12
- tailwind.config = {
13
  darkMode: 'class',
14
  theme: {
15
  extend: {
@@ -26,76 +27,83 @@
26
  }
27
  }
28
  }
29
- </script>
30
  </head>
 
31
  <body class="bg-gray-900 text-gray-100 min-h-screen">
32
- <custom-navbar></custom-navbar>
33
- <main class="container mx-auto px-4 py-6">
34
- <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
35
- <h1 class="text-2xl font-bold">Room Status Dashboard</h1>
36
-
37
- <div class="flex flex-col sm:flex-row gap-2 w-full md:w-auto">
38
- <div class="relative w-full">
39
- <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">
40
- <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
41
- </div>
42
-
43
- <div class="flex gap-2">
44
- <div class="relative">
45
- <button class="filter-btn bg-primary-500 hover:bg-primary-600 px-4 py-2 rounded-lg flex items-center whitespace-nowrap">
46
  <i data-feather="filter" class="mr-2"></i> Status Filter
47
  </button>
48
- <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">
49
- <ul class="py-1">
50
- <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="all">All Rooms</a></li>
51
- <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="clean">Clean</a></li>
52
- <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="dirty">Dirty</a></li>
53
- <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="in-progress">In Progress</a></li>
54
- <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="maintenance">Maintenance</a></li>
55
- </ul>
56
- </div>
57
- </div>
58
-
59
- <button id="manager-view-btn" class="hidden bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center">
 
 
 
 
 
 
60
  <i data-feather="bar-chart-2" class="mr-2"></i> Manager View
61
  </button>
62
- </div>
63
- </div>
64
  </div>
 
 
65
 
66
- <div class="hidden md:block mb-6 p-4 bg-gray-800 rounded-lg" id="stats-dashboard">
67
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
68
- <div class="stat-card bg-green-900/50 border-l-4 border-green-500 p-3">
69
- <h3 class="text-gray-400 text-sm">Clean Rooms</h3>
70
- <p class="text-2xl font-bold" id="clean-count">0</p>
71
- </div>
72
- <div class="stat-card bg-red-900/50 border-l-4 border-red-500 p-3">
73
- <h3 class="text-gray-400 text-sm">Dirty Rooms</h3>
74
- <p class="text-2xl font-bold" id="dirty-count">0</p>
75
- </div>
76
- <div class="stat-card bg-yellow-900/50 border-l-4 border-yellow-500 p-3">
77
- <h3 class="text-gray-400 text-sm">In Progress</h3>
78
- <p class="text-2xl font-bold" id="progress-count">0</p>
79
- </div>
80
- <div class="stat-card bg-purple-900/50 border-l-4 border-purple-500 p-3">
81
- <h3 class="text-gray-400 text-sm">Maintenance</h3>
82
- <p class="text-2xl font-bold" id="maintenance-count">0</p>
83
- </div>
84
- </div>
85
  </div>
86
-
87
- <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">
88
- <!-- Room cards will be dynamically generated here -->
89
  </div>
90
- </main>
 
 
 
 
 
 
 
 
 
91
 
92
- <custom-footer></custom-footer>
 
 
 
93
 
94
- <script src="components/navbar.js"></script>
95
- <script src="components/footer.js"></script>
96
- <script src="script.js"></script>
97
- <script>
98
- feather.replace();
 
 
99
  // Generate room cards dynamically
100
  document.addEventListener('DOMContentLoaded', function() {
101
  const roomGrid = document.querySelector('.grid');
@@ -132,7 +140,8 @@
132
  }
133
  feather.replace();
134
  });
135
- </script>
136
- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
137
  </body>
 
138
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en" class="dark">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>RoomRanger | Dashboard</title>
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script>
13
+ tailwind.config = {
14
  darkMode: 'class',
15
  theme: {
16
  extend: {
 
27
  }
28
  }
29
  }
30
+ </script>
31
  </head>
32
+
33
  <body class="bg-gray-900 text-gray-100 min-h-screen">
34
+ <custom-navbar></custom-navbar>
35
+ <main class="container mx-auto px-4 py-6">
36
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
37
+ <h1 class="text-2xl font-bold">Room Status Dashboard</h1>
38
+
39
+ <div class="flex flex-col sm:flex-row gap-2 w-full md:w-auto">
40
+ <div class="relative w-full">
41
+ <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">
42
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
43
+ </div>
44
+
45
+ <div class="flex gap-2">
46
+ <div class="relative">
47
+ <button class="filter-btn bg-primary-500 hover:bg-primary-600 px-4 py-2 rounded-lg flex items-center whitespace-nowrap">
48
  <i data-feather="filter" class="mr-2"></i> Status Filter
49
  </button>
50
+ <div
51
+ class="filter-dropdown hidden absolute right-0 mt-2 bg-gray-800 border border-gray-700 rounded-lg shadow-lg z-10 w-48">
52
+ <ul class="py-1">
53
+ <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="all">All Rooms</a>
54
+ </li>
55
+ <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="clean">Clean</a>
56
+ </li>
57
+ <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="dirty">Dirty</a>
58
+ </li>
59
+ <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700" data-status="in-progress">In
60
+ Progress</a></li>
61
+ <li><a href="#" class="filter-option block px-4 py-2 hover:bg-gray-700"
62
+ data-status="maintenance">Maintenance</a></li>
63
+ </ul>
64
+ </div>
65
+ </div>
66
+
67
+ <button id="manager-view-btn" class="hidden bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center">
68
  <i data-feather="bar-chart-2" class="mr-2"></i> Manager View
69
  </button>
 
 
70
  </div>
71
+ </div>
72
+ </div>
73
 
74
+ <div class="hidden md:block mb-6 p-4 bg-gray-800 rounded-lg" id="stats-dashboard">
75
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
76
+ <div class="stat-card bg-green-900/50 border-l-4 border-green-500 p-3">
77
+ <h3 class="text-gray-400 text-sm">Clean Rooms</h3>
78
+ <p class="text-2xl font-bold" id="clean-count">0</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  </div>
80
+ <div class="stat-card bg-red-900/50 border-l-4 border-red-500 p-3">
81
+ <h3 class="text-gray-400 text-sm">Dirty Rooms</h3>
82
+ <p class="text-2xl font-bold" id="dirty-count">0</p>
83
  </div>
84
+ <div class="stat-card bg-yellow-900/50 border-l-4 border-yellow-500 p-3">
85
+ <h3 class="text-gray-400 text-sm">In Progress</h3>
86
+ <p class="text-2xl font-bold" id="progress-count">0</p>
87
+ </div>
88
+ <div class="stat-card bg-purple-900/50 border-l-4 border-purple-500 p-3">
89
+ <h3 class="text-gray-400 text-sm">Maintenance</h3>
90
+ <p class="text-2xl font-bold" id="maintenance-count">0</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
 
95
+ <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">
96
+ <!-- Room cards will be dynamically generated here -->
97
+ </div>
98
+ </main>
99
 
100
+ <custom-footer></custom-footer>
101
+
102
+ <script src="components/navbar.js"></script>
103
+ <script src="components/footer.js"></script>
104
+ <script src="script.js"></script>
105
+ <script>
106
+ feather.replace();
107
  // Generate room cards dynamically
108
  document.addEventListener('DOMContentLoaded', function() {
109
  const roomGrid = document.querySelector('.grid');
 
140
  }
141
  feather.replace();
142
  });
143
+ </script>
144
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
145
  </body>
146
+
147
  </html>