Hugging Face's logo

Spaces:
Codechief
/
undefined
Running

App Files Community
Codechief commited on
Commit
97061e6
·
verified ·
1 Parent(s): af2a3bc

Build a IoT Dashboard with the same color theme for regular and dark theme, and the keep the multillinguage selection.

Browse files
Files changed (2) hide show
  1. index.html +7 -3
  2. iot-dashboard.html +363 -0
index.html CHANGED
@@ -52,9 +52,13 @@
52
  <div class="max-w-6xl mx-auto flex justify-between items-center">
53
  <div class="flex items-center space-x-4">
54
  <div class="flex items-center">
55
- <i data-feather="lock" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
56
- <span class="ml-2 font-semibold text-gray-800 dark:text-white">AuthPortal Pro</span>
57
- </div>
 
 
 
 
58
  </div>
59
  <div class="flex items-center space-x-4">
60
  <!-- Language Selector -->
 
52
  <div class="max-w-6xl mx-auto flex justify-between items-center">
53
  <div class="flex items-center space-x-4">
54
  <div class="flex items-center">
55
+ <i data-feather="lock" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
56
+ <span class="ml-2 font-semibold text-gray-800 dark:text-white">AuthPortal Pro</span>
57
+ </div>
58
+ <div class="hidden md:flex space-x-6 ml-6">
59
+ <a href="index.html" class="text-gray-700 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400">Login</a>
60
+ <a href="iot-dashboard.html" class="text-primary-500 dark:text-primary-400 font-medium">IoT Dashboard</a>
61
+ </div>
62
  </div>
63
  <div class="flex items-center space-x-4">
64
  <!-- Language Selector -->
iot-dashboard.html ADDED
@@ -0,0 +1,363 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IoT Dashboard | AuthPortal Pro</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#3B82F6',
19
+ 600: '#2563EB',
20
+ },
21
+ secondary: {
22
+ 500: '#6366F1',
23
+ 600: '#4F46E5',
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
32
+ html {
33
+ font-family: 'Inter', sans-serif;
34
+ }
35
+ .card {
36
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
37
+ }
38
+ .dark .card {
39
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200 min-h-screen flex flex-col">
44
+ <!-- Navigation Bar -->
45
+ <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6">
46
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
47
+ <div class="flex items-center space-x-4">
48
+ <div class="flex items-center">
49
+ <i data-feather="activity" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
50
+ <span class="ml-2 font-semibold text-gray-800 dark:text-white">IoT Dashboard</span>
51
+ </div>
52
+ </div>
53
+ <div class="flex items-center space-x-4">
54
+ <!-- Language Selector -->
55
+ <div class="relative">
56
+ <select class="appearance-none bg-transparent border border-gray-300 dark:border-gray-600 rounded px-3 py-1 pr-8 text-sm text-gray-700 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700">
57
+ <option value="en" class="dark:bg-gray-700 dark:text-gray-100">English</option>
58
+ <option value="es" class="dark:bg-gray-700 dark:text-gray-100">Español</option>
59
+ <option value="fr" class="dark:bg-gray-700 dark:text-gray-100">Français</option>
60
+ <option value="de" class="dark:bg-gray-700 dark:text-gray-100">Deutsch</option>
61
+ <option value="ja" class="dark:bg-gray-700 dark:text-gray-100">日本語</option>
62
+ </select>
63
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
64
+ <i data-feather="globe" class="h-4 w-4 text-gray-400 dark:text-gray-300"></i>
65
+ </div>
66
+ </div>
67
+ <!-- Dark Mode Toggle -->
68
+ <button id="theme-toggle" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2">
69
+ <i id="theme-icon" data-feather="moon" class="w-5 h-5"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </nav>
74
+
75
+ <!-- Main Content -->
76
+ <main class="flex-grow px-4 py-6 sm:px-6 lg:px-8">
77
+ <div class="max-w-7xl mx-auto">
78
+ <!-- Summary Cards -->
79
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
80
+ <!-- Device Status -->
81
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
82
+ <div class="flex items-center">
83
+ <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900/30">
84
+ <i data-feather="cpu" class="h-6 w-6 text-primary-500 dark:text-primary-400"></i>
85
+ </div>
86
+ <div class="ml-4">
87
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Connected Devices</p>
88
+ <p class="text-2xl font-semibold text-gray-900 dark:text-white">24</p>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Temperature -->
94
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
95
+ <div class="flex items-center">
96
+ <div class="p-3 rounded-full bg-red-100 dark:bg-red-900/30">
97
+ <i data-feather="thermometer" class="h-6 w-6 text-red-500 dark:text-red-400"></i>
98
+ </div>
99
+ <div class="ml-4">
100
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Temperature</p>
101
+ <p class="text-2xl font-semibold text-gray-900 dark:text-white">23.5°C</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Humidity -->
107
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
108
+ <div class="flex items-center">
109
+ <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900/30">
110
+ <i data-feather="droplet" class="h-6 w-6 text-blue-500 dark:text-blue-400"></i>
111
+ </div>
112
+ <div class="ml-4">
113
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Humidity</p>
114
+ <p class="text-2xl font-semibold text-gray-900 dark:text-white">65%</p>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Energy Usage -->
120
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
121
+ <div class="flex items-center">
122
+ <div class="p-3 rounded-full bg-green-100 dark:bg-green-900/30">
123
+ <i data-feather="zap" class="h-6 w-6 text-green-500 dark:text-green-400"></i>
124
+ </div>
125
+ <div class="ml-4">
126
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Energy Usage</p>
127
+ <p class="text-2xl font-semibold text-gray-900 dark:text-white">1.2 kW</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Charts Section -->
134
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
135
+ <!-- Temperature Chart -->
136
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
137
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Temperature Trends</h3>
138
+ <div class="h-64">
139
+ <canvas id="temperatureChart"></canvas>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Humidity Chart -->
144
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
145
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Humidity Trends</h3>
146
+ <div class="h-64">
147
+ <canvas id="humidityChart"></canvas>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Device List -->
153
+ <div class="card bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
154
+ <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
155
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Connected Devices</h3>
156
+ </div>
157
+ <div class="divide-y divide-gray-200 dark:divide-gray-700">
158
+ <!-- Device 1 -->
159
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
160
+ <div class="flex items-center">
161
+ <div class="p-2 rounded-full bg-primary-100 dark:bg-primary-900/30">
162
+ <i data-feather="wifi" class="h-5 w-5 text-primary-500 dark:text-primary-400"></i>
163
+ </div>
164
+ <div class="ml-4">
165
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Smart Thermostat</p>
166
+ <p class="text-sm text-gray-500 dark:text-gray-400">Living Room</p>
167
+ </div>
168
+ </div>
169
+ <div class="flex items-center">
170
+ <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
171
+ <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Device 2 -->
176
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
177
+ <div class="flex items-center">
178
+ <div class="p-2 rounded-full bg-blue-100 dark:bg-blue-900/30">
179
+ <i data-feather="sun" class="h-5 w-5 text-blue-500 dark:text-blue-400"></i>
180
+ </div>
181
+ <div class="ml-4">
182
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Smart Light</p>
183
+ <p class="text-sm text-gray-500 dark:text-gray-400">Kitchen</p>
184
+ </div>
185
+ </div>
186
+ <div class="flex items-center">
187
+ <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
188
+ <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Device 3 -->
193
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
194
+ <div class="flex items-center">
195
+ <div class="p-2 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
196
+ <i data-feather="lock" class="h-5 w-5 text-yellow-500 dark:text-yellow-400"></i>
197
+ </div>
198
+ <div class="ml-4">
199
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Smart Lock</p>
200
+ <p class="text-sm text-gray-500 dark:text-gray-400">Front Door</p>
201
+ </div>
202
+ </div>
203
+ <div class="flex items-center">
204
+ <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
205
+ <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Device 4 -->
210
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
211
+ <div class="flex items-center">
212
+ <div class="p-2 rounded-full bg-red-100 dark:bg-red-900/30">
213
+ <i data-feather="alert-circle" class="h-5 w-5 text-red-500 dark:text-red-400"></i>
214
+ </div>
215
+ <div class="ml-4">
216
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Smoke Detector</p>
217
+ <p class="text-sm text-gray-500 dark:text-gray-400">Hallway</p>
218
+ </div>
219
+ </div>
220
+ <div class="flex items-center">
221
+ <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
222
+ <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </main>
229
+
230
+ <script>
231
+ // Theme toggle functionality
232
+ const themeToggle = document.getElementById('theme-toggle');
233
+ const themeIcon = document.getElementById('theme-icon');
234
+ const html = document.documentElement;
235
+
236
+ // Check for saved theme preference or use preferred OS theme
237
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
238
+ html.classList.add('dark');
239
+ themeIcon.setAttribute('data-feather', 'sun');
240
+ } else {
241
+ html.classList.remove('dark');
242
+ themeIcon.setAttribute('data-feather', 'moon');
243
+ }
244
+
245
+ themeToggle.addEventListener('click', () => {
246
+ html.classList.toggle('dark');
247
+ localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
248
+
249
+ if (html.classList.contains('dark')) {
250
+ themeIcon.setAttribute('data-feather', 'sun');
251
+ } else {
252
+ themeIcon.setAttribute('data-feather', 'moon');
253
+ }
254
+ feather.replace();
255
+ });
256
+
257
+ // Language change handler
258
+ document.querySelector('select').addEventListener('change', function() {
259
+ const lang = this.value;
260
+ console.log('Language changed to:', lang);
261
+ });
262
+
263
+ // Initialize charts
264
+ function initCharts() {
265
+ // Temperature Chart
266
+ const tempCtx = document.getElementById('temperatureChart').getContext('2d');
267
+ const tempChart = new Chart(tempCtx, {
268
+ type: 'line',
269
+ data: {
270
+ labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
271
+ datasets: [{
272
+ label: 'Temperature (°C)',
273
+ data: [20, 19, 18, 22, 25, 26, 24, 22],
274
+ borderColor: '#EF4444',
275
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
276
+ tension: 0.4,
277
+ fill: true
278
+ }]
279
+ },
280
+ options: {
281
+ responsive: true,
282
+ maintainAspectRatio: false,
283
+ plugins: {
284
+ legend: {
285
+ labels: {
286
+ color: html.classList.contains('dark') ? '#F3F4F6' : '#374151'
287
+ }
288
+ }
289
+ },
290
+ scales: {
291
+ y: {
292
+ ticks: {
293
+ color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
294
+ },
295
+ grid: {
296
+ color: html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
297
+ }
298
+ },
299
+ x: {
300
+ ticks: {
301
+ color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
302
+ },
303
+ grid: {
304
+ color: html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
305
+ }
306
+ }
307
+ }
308
+ }
309
+ });
310
+
311
+ // Humidity Chart
312
+ const humidityCtx = document.getElementById('humidityChart').getContext('2d');
313
+ const humidityChart = new Chart(humidityCtx, {
314
+ type: 'line',
315
+ data: {
316
+ labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
317
+ datasets: [{
318
+ label: 'Humidity (%)',
319
+ data: [70, 68, 72, 65, 60, 58, 62, 68],
320
+ borderColor: '#3B82F6',
321
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
322
+ tension: 0.4,
323
+ fill: true
324
+ }]
325
+ },
326
+ options: {
327
+ responsive: true,
328
+ maintainAspectRatio: false,
329
+ plugins: {
330
+ legend: {
331
+ labels: {
332
+ color: html.classList.contains('dark') ? '#F3F4F6' : '#374151'
333
+ }
334
+ }
335
+ },
336
+ scales: {
337
+ y: {
338
+ ticks: {
339
+ color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
340
+ },
341
+ grid: {
342
+ color: html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
343
+ }
344
+ },
345
+ x: {
346
+ ticks: {
347
+ color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
348
+ },
349
+ grid: {
350
+ color: html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
351
+ }
352
+ }
353
+ }
354
+ }
355
+ });
356
+ }
357
+
358
+ // Initialize feather icons and charts
359
+ feather.replace();
360
+ document.addEventListener('DOMContentLoaded', initCharts);
361
+ </script>
362
+ </body>
363
+ </html>