Hugging Face's logo

Spaces:
Codechief
/
undefined
Running

App Files Community
Codechief commited on
Commit
1b413f9
·
verified ·
1 Parent(s): ebf3198

now remove everything and then Build a IoT Dashboard with the dark theme for regular and dark theme, and the keep the multillinguage selection.

Browse files
Files changed (2) hide show
  1. dashboard.html +373 -0
  2. index.html +145 -208
dashboard.html ADDED
@@ -0,0 +1,373 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>IoT Dashboard</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://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 500: '#3B82F6',
18
+ 600: '#2563EB',
19
+ },
20
+ secondary: {
21
+ 500: '#6366F1',
22
+ 600: '#4F46E5',
23
+ }
24
+ }
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <style>
30
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
31
+ html {
32
+ font-family: 'Inter', sans-serif;
33
+ }
34
+ .card {
35
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
36
+ }
37
+ .dark .card {
38
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
43
+ <!-- Navigation Bar -->
44
+ <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6">
45
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
46
+ <div class="flex items-center space-x-4">
47
+ <div class="flex items-center">
48
+ <i data-feather="activity" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
49
+ <span class="ml-2 font-semibold text-gray-800 dark:text-white">IoT Dashboard</span>
50
+ </div>
51
+ </div>
52
+ <div class="flex items-center space-x-4">
53
+ <!-- Language Selector -->
54
+ <div class="relative">
55
+ <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">
56
+ <option value="en" class="dark:bg-gray-700 dark:text-gray-100">English</option>
57
+ <option value="es" class="dark:bg-gray-700 dark:text-gray-100">Español</option>
58
+ <option value="fr" class="dark:bg-gray-700 dark:text-gray-100">Français</option>
59
+ <option value="de" class="dark:bg-gray-700 dark:text-gray-100">Deutsch</option>
60
+ <option value="ja" class="dark:bg-gray-700 dark:text-gray-100">日本語</option>
61
+ </select>
62
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
63
+ <i data-feather="globe" class="h-4 w-4 text-gray-400 dark:text-gray-300"></i>
64
+ </div>
65
+ </div>
66
+ <!-- Dark Mode Toggle -->
67
+ <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">
68
+ <i id="theme-icon" data-feather="sun" class="w-5 h-5"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </nav>
73
+
74
+ <!-- Main Content -->
75
+ <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
76
+ <!-- Stats Overview -->
77
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
78
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
79
+ <div class="flex items-center justify-between">
80
+ <div>
81
+ <p class="text-gray-500 dark:text-gray-400">Temperature</p>
82
+ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">24.5°C</h3>
83
+ </div>
84
+ <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900/30">
85
+ <i data-feather="thermometer" class="w-6 h-6 text-blue-500 dark:text-blue-400"></i>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
90
+ <div class="flex items-center justify-between">
91
+ <div>
92
+ <p class="text-gray-500 dark:text-gray-400">Humidity</p>
93
+ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">45%</h3>
94
+ </div>
95
+ <div class="p-3 rounded-full bg-green-100 dark:bg-green-900/30">
96
+ <i data-feather="droplet" class="w-6 h-6 text-green-500 dark:text-green-400"></i>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
101
+ <div class="flex items-center justify-between">
102
+ <div>
103
+ <p class="text-gray-500 dark:text-gray-400">Devices Online</p>
104
+ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">8/10</h3>
105
+ </div>
106
+ <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900/30">
107
+ <i data-feather="wifi" class="w-6 h-6 text-purple-500 dark:text-purple-400"></i>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
112
+ <div class="flex items-center justify-between">
113
+ <div>
114
+ <p class="text-gray-500 dark:text-gray-400">Power Usage</p>
115
+ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">1.2 kW</h3>
116
+ </div>
117
+ <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
118
+ <i data-feather="zap" class="w-6 h-6 text-yellow-500 dark:text-yellow-400"></i>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Charts Section -->
125
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
126
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
127
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Temperature Trend</h3>
128
+ <div class="h-64">
129
+ <canvas id="temperatureChart"></canvas>
130
+ </div>
131
+ </div>
132
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
133
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Humidity Trend</h3>
134
+ <div class="h-64">
135
+ <canvas id="humidityChart"></canvas>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Devices Section -->
141
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6 mb-8">
142
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Connected Devices</h3>
143
+ <div class="overflow-x-auto">
144
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
145
+ <thead class="bg-gray-50 dark:bg-gray-700">
146
+ <tr>
147
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Device</th>
148
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
149
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Last Seen</th>
150
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
151
+ </tr>
152
+ </thead>
153
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
154
+ <tr>
155
+ <td class="px-6 py-4 whitespace-nowrap">
156
+ <div class="flex items-center">
157
+ <div class="flex-shrink-0 h-10 w-10">
158
+ <i data-feather="thermometer" class="w-6 h-6 text-blue-500 dark:text-blue-400"></i>
159
+ </div>
160
+ <div class="ml-4">
161
+ <div class="text-sm font-medium text-gray-900 dark:text-white">Living Room Sensor</div>
162
+ <div class="text-sm text-gray-500 dark:text-gray-400">Temperature</div>
163
+ </div>
164
+ </div>
165
+ </td>
166
+ <td class="px-6 py-4 whitespace-nowrap">
167
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Online</span>
168
+ </td>
169
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2 minutes ago</td>
170
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
171
+ <a href="#" class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-4">Details</a>
172
+ <a href="#" class="text-red-500 hover:text-red-600 dark:hover:text-red-400">Restart</a>
173
+ </td>
174
+ </tr>
175
+ <tr>
176
+ <td class="px-6 py-4 whitespace-nowrap">
177
+ <div class="flex items-center">
178
+ <div class="flex-shrink-0 h-10 w-10">
179
+ <i data-feather="droplet" class="w-6 h-6 text-green-500 dark:text-green-400"></i>
180
+ </div>
181
+ <div class="ml-4">
182
+ <div class="text-sm font-medium text-gray-900 dark:text-white">Kitchen Sensor</div>
183
+ <div class="text-sm text-gray-500 dark:text-gray-400">Humidity</div>
184
+ </div>
185
+ </div>
186
+ </td>
187
+ <td class="px-6 py-4 whitespace-nowrap">
188
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Online</span>
189
+ </td>
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">5 minutes ago</td>
191
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
192
+ <a href="#" class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-4">Details</a>
193
+ <a href="#" class="text-red-500 hover:text-red-600 dark:hover:text-red-400">Restart</a>
194
+ </td>
195
+ </tr>
196
+ <tr>
197
+ <td class="px-6 py-4 whitespace-nowrap">
198
+ <div class="flex items-center">
199
+ <div class="flex-shrink-0 h-10 w-10">
200
+ <i data-feather="wind" class="w-6 h-6 text-purple-500 dark:text-purple-400"></i>
201
+ </div>
202
+ <div class="ml-4">
203
+ <div class="text-sm font-medium text-gray-900 dark:text-white">Bedroom AC</div>
204
+ <div class="text-sm text-gray-500 dark:text-gray-400">Air Conditioner</div>
205
+ </div>
206
+ </div>
207
+ </td>
208
+ <td class="px-6 py-4 whitespace-nowrap">
209
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Idle</span>
210
+ </td>
211
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">10 minutes ago</td>
212
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
213
+ <a href="#" class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-4">Details</a>
214
+ <a href="#" class="text-red-500 hover:text-red-600 dark:hover:text-red-400">Restart</a>
215
+ </td>
216
+ </tr>
217
+ </tbody>
218
+ </table>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Recent Alerts -->
223
+ <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
224
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Recent Alerts</h3>
225
+ <div class="space-y-4">
226
+ <div class="flex items-start">
227
+ <div class="flex-shrink-0 pt-1">
228
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-red-100 dark:bg-red-900/30">
229
+ <i data-feather="alert-triangle" class="w-5 h-5 text-red-500 dark:text-red-400"></i>
230
+ </div>
231
+ </div>
232
+ <div class="ml-3">
233
+ <p class="text-sm font-medium text-gray-900 dark:text-white">High temperature detected</p>
234
+ <p class="text-sm text-gray-500 dark:text-gray-400">Living Room Sensor reached 30°C at 10:30 AM</p>
235
+ </div>
236
+ <div class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 hour ago</div>
237
+ </div>
238
+ <div class="flex items-start">
239
+ <div class="flex-shrink-0 pt-1">
240
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
241
+ <i data-feather="alert-circle" class="w-5 h-5 text-yellow-500 dark:text-yellow-400"></i>
242
+ </div>
243
+ </div>
244
+ <div class="ml-3">
245
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Device disconnected</p>
246
+ <p class="text-sm text-gray-500 dark:text-gray-400">Garage Door Sensor lost connection</p>
247
+ </div>
248
+ <div class="ml-auto text-sm text-gray-500 dark:text-gray-400">3 hours ago</div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </main>
253
+
254
+ <script>
255
+ // Theme toggle functionality
256
+ const themeToggle = document.getElementById('theme-toggle');
257
+ const themeIcon = document.getElementById('theme-icon');
258
+ const html = document.documentElement;
259
+
260
+ // Check for saved theme preference or use preferred OS theme
261
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
262
+ html.classList.add('dark');
263
+ themeIcon.setAttribute('data-feather', 'sun');
264
+ } else {
265
+ html.classList.remove('dark');
266
+ themeIcon.setAttribute('data-feather', 'moon');
267
+ }
268
+
269
+ themeToggle.addEventListener('click', () => {
270
+ html.classList.toggle('dark');
271
+ localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
272
+
273
+ if (html.classList.contains('dark')) {
274
+ themeIcon.setAttribute('data-feather', 'sun');
275
+ } else {
276
+ themeIcon.setAttribute('data-feather', 'moon');
277
+ }
278
+ feather.replace();
279
+ });
280
+
281
+ // Language change handler
282
+ document.querySelector('select').addEventListener('change', function() {
283
+ const lang = this.value;
284
+ // In a real app, you would load translations here
285
+ console.log('Language changed to:', lang);
286
+ });
287
+
288
+ // Initialize charts
289
+ document.addEventListener('DOMContentLoaded', function() {
290
+ // Temperature Chart
291
+ const tempCtx = document.getElementById('temperatureChart').getContext('2d');
292
+ const tempChart = new Chart(tempCtx, {
293
+ type: 'line',
294
+ data: {
295
+ labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
296
+ datasets: [{
297
+ label: 'Temperature (°C)',
298
+ data: [22, 23, 24, 25, 24, 23],
299
+ borderColor: '#3B82F6',
300
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
301
+ tension: 0.3,
302
+ fill: true
303
+ }]
304
+ },
305
+ options: {
306
+ responsive: true,
307
+ maintainAspectRatio: false,
308
+ scales: {
309
+ y: {
310
+ beginAtZero: false,
311
+ grid: {
312
+ color: 'rgba(0, 0, 0, 0.05)',
313
+ }
314
+ },
315
+ x: {
316
+ grid: {
317
+ display: false
318
+ }
319
+ }
320
+ },
321
+ plugins: {
322
+ legend: {
323
+ display: false
324
+ }
325
+ }
326
+ }
327
+ });
328
+
329
+ // Humidity Chart
330
+ const humidCtx = document.getElementById('humidityChart').getContext('2d');
331
+ const humidChart = new Chart(humidCtx, {
332
+ type: 'line',
333
+ data: {
334
+ labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
335
+ datasets: [{
336
+ label: 'Humidity (%)',
337
+ data: [45, 50, 48, 42, 40, 44],
338
+ borderColor: '#10B981',
339
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
340
+ tension: 0.3,
341
+ fill: true
342
+ }]
343
+ },
344
+ options: {
345
+ responsive: true,
346
+ maintainAspectRatio: false,
347
+ scales: {
348
+ y: {
349
+ beginAtZero: false,
350
+ grid: {
351
+ color: 'rgba(0, 0, 0, 0.05)',
352
+ }
353
+ },
354
+ x: {
355
+ grid: {
356
+ display: false
357
+ }
358
+ }
359
+ },
360
+ plugins: {
361
+ legend: {
362
+ display: false
363
+ }
364
+ }
365
+ }
366
+ });
367
+ });
368
+
369
+ // Initialize feather icons
370
+ feather.replace();
371
+ </script>
372
+ </body>
373
+ </html>
index.html CHANGED
@@ -1,12 +1,12 @@
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>GlowTron IoT Dashboard</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://unpkg.com/feather-icons"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
10
  <script>
11
  tailwind.config = {
12
  darkMode: 'class',
@@ -15,249 +15,186 @@
15
  colors: {
16
  primary: {
17
  500: '#3B82F6',
 
18
  },
19
  secondary: {
20
- 500: '#10B981',
 
21
  }
22
  }
23
  }
24
  }
25
  }
26
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  </head>
28
- <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
29
- <div class="min-h-screen flex flex-col">
30
- <!-- Header -->
31
- <header class="bg-white dark:bg-gray-800 shadow-sm">
32
- <div class="container mx-auto px-4 py-4 flex justify-between items-center">
33
- <div class="flex items-center space-x-2">
34
- <i data-feather="globe" class="text-primary-500"></i>
35
- <h1 class="text-xl font-bold">GlowTron</h1>
36
  </div>
37
-
38
- <div class="flex items-center space-x-4">
39
- <!-- Theme Toggle -->
40
- <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
41
- <i data-feather="moon" class="hidden dark:block"></i>
42
- <i data-feather="sun" class="dark:hidden"></i>
43
- </button>
44
-
45
- <!-- Language Selector -->
46
- <div class="relative">
47
- <button id="language-dropdown" class="flex items-center space-x-1 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
48
- <i data-feather="globe"></i>
49
- <span>EN</span>
50
- <i data-feather="chevron-down" class="w-4 h-4"></i>
51
- </button>
52
- <div id="language-menu" class="hidden absolute right-0 mt-2 w-32 bg-white dark:bg-gray-800 rounded shadow-lg py-1 z-10">
53
- <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">English</a>
54
- <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Español</a>
55
- <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Français</a>
56
- <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Deutsch</a>
57
- </div>
58
- </div>
59
-
60
- <!-- User Menu -->
61
- <div class="flex items-center space-x-2">
62
- <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white">
63
- <i data-feather="user"></i>
64
- </div>
65
- </div>
66
  </div>
 
 
 
 
67
  </div>
68
- </header>
 
69
 
70
- <!-- Main Content -->
71
- <main class="flex-1 container mx-auto px-4 py-6">
72
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
73
- <!-- Device Status Card -->
74
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
75
- <div class="flex justify-between items-center mb-4">
76
- <h2 class="text-lg font-semibold">Device Status</h2>
77
- <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-xs font-medium">Online</span>
78
- </div>
79
- <div class="space-y-4">
80
- <div class="flex items-center justify-between">
81
- <div class="flex items-center space-x-2">
82
- <i data-feather="cpu" class="text-primary-500"></i>
83
- <span>Main Controller</span>
84
- </div>
85
- <span class="text-green-500">Active</span>
86
- </div>
87
- <div class="flex items-center justify-between">
88
- <div class="flex items-center space-x-2">
89
- <i data-feather="thermometer" class="text-primary-500"></i>
90
- <span>Temperature Sensor</span>
91
- </div>
92
- <span class="text-green-500">Active</span>
93
- </div>
94
- <div class="flex items-center justify-between">
95
- <div class="flex items-center space-x-2">
96
- <i data-feather="droplet" class="text-primary-500"></i>
97
- <span>Humidity Sensor</span>
98
- </div>
99
- <span class="text-green-500">Active</span>
100
- </div>
101
- </div>
102
  </div>
 
 
 
 
 
103
 
104
- <!-- Current Readings Card -->
105
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
106
- <h2 class="text-lg font-semibold mb-4">Current Readings</h2>
107
- <div class="grid grid-cols-2 gap-4">
108
- <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
109
- <div class="flex items-center justify-between">
110
- <div>
111
- <p class="text-sm text-gray-500 dark:text-gray-400">Temperature</p>
112
- <p class="text-2xl font-bold">23.5°C</p>
113
- </div>
114
- <i data-feather="thermometer" class="text-red-500"></i>
115
- </div>
116
- </div>
117
- <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
118
- <div class="flex items-center justify-between">
119
- <div>
120
- <p class="text-sm text-gray-500 dark:text-gray-400">Humidity</p>
121
- <p class="text-2xl font-bold">45%</p>
122
- </div>
123
- <i data-feather="droplet" class="text-blue-500"></i>
124
  </div>
 
125
  </div>
126
- <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
127
- <div class="flex items-center justify-between">
128
- <div>
129
- <p class="text-sm text-gray-500 dark:text-gray-400">Pressure</p>
130
- <p class="text-2xl font-bold">1013 hPa</p>
131
- </div>
132
- <i data-feather="wind" class="text-purple-500"></i>
133
  </div>
134
- </div>
135
- <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
136
- <div class="flex items-center justify-between">
137
- <div>
138
- <p class="text-sm text-gray-500 dark:text-gray-400">Air Quality</p>
139
- <p class="text-2xl font-bold">Good</p>
140
- </div>
141
- <i data-feather="activity" class="text-green-500"></i>
142
  </div>
143
  </div>
144
  </div>
145
  </div>
146
 
147
- <!-- Quick Actions Card -->
148
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
149
- <h2 class="text-lg font-semibold mb-4">Quick Actions</h2>
150
- <div class="grid grid-cols-2 gap-4">
151
- <button class="bg-blue-500 hover:bg-blue-600 text-white p-4 rounded-lg flex flex-col items-center justify-center">
152
- <i data-feather="plus" class="w-6 h-6 mb-2"></i>
153
- <span>Add Device</span>
154
- </button>
155
- <button class="bg-primary-500 hover:bg-primary-600 text-white p-4 rounded-lg flex flex-col items-center justify-center">
156
- <i data-feather="power" class="w-6 h-6 mb-2"></i>
157
- <span>Toggle Device</span>
158
- </button>
159
- <button class="bg-secondary-500 hover:bg-secondary-600 text-white p-4 rounded-lg flex flex-col items-center justify-center">
160
- <i data-feather="refresh-cw" class="w-6 h-6 mb-2"></i>
161
- <span>Restart</span>
162
- </button>
163
- <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 p-4 rounded-lg flex flex-col items-center justify-center">
164
- <i data-feather="settings" class="w-6 h-6 mb-2"></i>
165
- <span>Settings</span>
166
- </button>
167
- <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 p-4 rounded-lg flex flex-col items-center justify-center">
168
- <i data-feather="alert-circle" class="w-6 h-6 mb-2"></i>
169
- <span>Alerts</span>
170
- </button>
171
- </div>
172
- </div>
173
 
174
- <!-- Data Charts Card -->
175
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 md:col-span-2">
176
- <div class="flex justify-between items-center mb-4">
177
- <h2 class="text-lg font-semibold">Sensor Data History</h2>
178
- <div class="flex space-x-2">
179
- <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">24h</button>
180
- <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">7d</button>
181
- <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">30d</button>
182
- </div>
183
- </div>
184
- <div class="bg-gray-50 dark:bg-gray-700 rounded-lg h-64 flex items-center justify-center">
185
- <p class="text-gray-500 dark:text-gray-400">Chart visualization would appear here</p>
186
  </div>
187
  </div>
188
 
189
- <!-- Notifications Card -->
190
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
191
- <div class="flex justify-between items-center mb-4">
192
- <h2 class="text-lg font-semibold">Notifications</h2>
193
- <span class="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded-full text-xs">3 new</span>
194
- </div>
195
- <div class="space-y-3">
196
- <div class="flex items-start space-x-3">
197
- <div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center">
198
- <i data-feather="alert-triangle" class="w-4 h-4 text-red-500"></i>
199
- </div>
200
- <div>
201
- <p class="font-medium">High temperature alert</p>
202
- <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
203
- </div>
204
- </div>
205
- <div class="flex items-start space-x-3">
206
- <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center">
207
- <i data-feather="bell" class="w-4 h-4 text-yellow-500"></i>
208
- </div>
209
- <div>
210
- <p class="font-medium">Device update available</p>
211
- <p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
212
- </div>
213
- </div>
214
- <div class="flex items-start space-x-3">
215
- <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
216
- <i data-feather="check-circle" class="w-4 h-4 text-green-500"></i>
217
- </div>
218
- <div>
219
- <p class="font-medium">Device restarted successfully</p>
220
- <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
221
- </div>
222
- </div>
223
- </div>
224
  </div>
225
- </div>
226
- </main>
227
-
228
- <!-- Footer -->
229
- <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-4">
230
- <div class="container mx-auto px-4 text-center text-sm text-gray-500 dark:text-gray-400">
231
- <p>© 2023 GlowTron IoT Dashboard. All rights reserved.</p>
232
- </div>
233
- </footer>
234
- </div>
235
 
236
  <script>
237
  // Theme toggle functionality
238
  const themeToggle = document.getElementById('theme-toggle');
 
 
 
 
 
 
 
 
 
 
 
 
239
  themeToggle.addEventListener('click', () => {
240
- document.documentElement.classList.toggle('dark');
241
- localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
242
- });
243
-
244
- // Language dropdown functionality
245
- const languageDropdown = document.getElementById('language-dropdown');
246
- const languageMenu = document.getElementById('language-menu');
247
- languageDropdown.addEventListener('click', (e) => {
248
- e.preventDefault();
249
- languageMenu.classList.toggle('hidden');
250
  });
251
-
252
- // Close dropdown when clicking outside
253
- document.addEventListener('click', (e) => {
254
- if (!languageDropdown.contains(e.target) && !languageMenu.contains(e.target)) {
255
- languageMenu.classList.add('hidden');
 
 
 
 
 
 
256
  }
 
 
 
 
 
 
 
 
257
  });
258
 
259
  // Initialize feather icons
260
  feather.replace();
261
- </script>
262
  </body>
263
  </html>
 
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>Login | 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>
11
  tailwind.config = {
12
  darkMode: 'class',
 
15
  colors: {
16
  primary: {
17
  500: '#3B82F6',
18
+ 600: '#2563EB',
19
  },
20
  secondary: {
21
+ 500: '#6366F1',
22
+ 600: '#4F46E5',
23
  }
24
  }
25
  }
26
  }
27
  }
28
  </script>
29
+ <style>
30
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
31
+ html {
32
+ font-family: 'Inter', sans-serif;
33
+ }
34
+ .login-container {
35
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
36
+ }
37
+ .dark .login-container {
38
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
39
+ }
40
+ .input-field:focus {
41
+ border-color: #3B82F6;
42
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
43
+ }
44
+ .dark .input-field:focus {
45
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
46
+ }
47
+ </style>
48
  </head>
49
+ <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200 min-h-screen flex flex-col">
50
+ <!-- Navigation Bar -->
51
+ <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6">
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 -->
61
+ <div class="relative">
62
+ <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">
63
+ <option value="en" class="dark:bg-gray-700 dark:text-gray-100">English</option>
64
+ <option value="es" class="dark:bg-gray-700 dark:text-gray-100">Español</option>
65
+ <option value="fr" class="dark:bg-gray-700 dark:text-gray-100">Français</option>
66
+ <option value="de" class="dark:bg-gray-700 dark:text-gray-100">Deutsch</option>
67
+ <option value="ja" class="dark:bg-gray-700 dark:text-gray-100">日本語</option>
68
+ </select>
69
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
70
+ <i data-feather="globe" class="h-4 w-4 text-gray-400 dark:text-gray-300"></i>
71
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  </div>
73
+ <!-- Dark Mode Toggle -->
74
+ <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">
75
+ <i id="theme-icon" data-feather="moon" class="w-5 h-5"></i>
76
+ </button>
77
  </div>
78
+ </div>
79
+ </nav>
80
 
81
+ <!-- Main Content -->
82
+ <main class="flex-grow flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
83
+ <div class="max-w-md w-full space-y-8">
84
+ <div class="text-center">
85
+ <!-- Logo Placeholder -->
86
+ <div class="mx-auto flex items-center justify-center h-32 w-32 rounded-full bg-primary-100 dark:bg-primary-900/30 p-4">
87
+ <i data-feather="shield" class="h-20 w-20 text-primary-500 dark:text-primary-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  </div>
89
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white" data-i18n="sign_in_title">
90
+ <span data-i18n="sign_in_button">Sign in</span>
91
+ to your account
92
+ </h2>
93
+ </div>
94
 
95
+ <form class="mt-8 space-y-6 login-container bg-white dark:bg-gray-800 p-8 rounded-lg" action="#" method="POST">
96
+ <input type="hidden" name="remember" value="true">
97
+ <div class="rounded-md shadow-sm space-y-4">
98
+ <div>
99
+ <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-i18n="username_label">Username or Email</label>
100
+ <div class="relative">
101
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
102
+ <i data-feather="user" class="h-5 w-5 text-gray-400 dark:text-gray-500"></i>
 
 
 
 
 
 
 
 
 
 
 
 
103
  </div>
104
+ <input id="username" name="username" type="text" required class="input-field pl-10 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white" placeholder="username@example.com">
105
  </div>
106
+ </div>
107
+ <div>
108
+ <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-i18n="password_label">Password</label>
109
+ <div class="relative">
110
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
111
+ <i data-feather="lock" class="h-5 w-5 text-gray-400 dark:text-gray-500"></i>
 
112
  </div>
113
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="input-field pl-10 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white" placeholder="••••••••">
114
+ <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePasswordVisibility()">
115
+ <i id="eye-icon" data-feather="eye" class="h-5 w-5 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400"></i>
 
 
 
 
 
116
  </div>
117
  </div>
118
  </div>
119
  </div>
120
 
121
+ <div class="flex items-center justify-between">
122
+ <div class="flex items-center">
123
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary-500 focus:ring-primary-400 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
124
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300" data-i18n="remember_me">
125
+ Remember me
126
+ </label>
127
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
 
129
+ <div class="text-sm">
130
+ <a href="#" class="font-medium text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300">
131
+ <span data-i18n="forgot_password">Forgot your password?</span>
132
+ </a>
 
 
 
 
 
 
 
 
133
  </div>
134
  </div>
135
 
136
+ <div>
137
+ <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800">
138
+ <span class="absolute left-0 inset-y-0 flex items-center pl-3">
139
+ <i data-feather="log-in" class="h-5 w-5 text-primary-100 group-hover:text-primary-200"></i>
140
+ </span>
141
+ Sign in
142
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
  </div>
144
+ </form>
145
+ </div>
146
+ </main>
 
 
 
 
 
 
 
147
 
148
  <script>
149
  // Theme toggle functionality
150
  const themeToggle = document.getElementById('theme-toggle');
151
+ const themeIcon = document.getElementById('theme-icon');
152
+ const html = document.documentElement;
153
+
154
+ // Check for saved theme preference or use preferred OS theme
155
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
156
+ html.classList.add('dark');
157
+ themeIcon.setAttribute('data-feather', 'sun');
158
+ } else {
159
+ html.classList.remove('dark');
160
+ themeIcon.setAttribute('data-feather', 'moon');
161
+ }
162
+
163
  themeToggle.addEventListener('click', () => {
164
+ html.classList.toggle('dark');
165
+ localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
166
+
167
+ if (html.classList.contains('dark')) {
168
+ themeIcon.setAttribute('data-feather', 'sun');
169
+ } else {
170
+ themeIcon.setAttribute('data-feather', 'moon');
171
+ }
172
+ feather.replace();
 
173
  });
174
+ // Password visibility toggle
175
+ function togglePasswordVisibility() {
176
+ const passwordInput = document.getElementById('password');
177
+ const eyeIcon = document.getElementById('eye-icon');
178
+
179
+ if (passwordInput.type === 'password') {
180
+ passwordInput.type = 'text';
181
+ eyeIcon.setAttribute('data-feather', 'eye-off');
182
+ } else {
183
+ passwordInput.type = 'password';
184
+ eyeIcon.setAttribute('data-feather', 'eye');
185
  }
186
+ feather.replace();
187
+ }
188
+ // Language change handler
189
+ document.querySelector('select').addEventListener('change', function() {
190
+ const lang = this.value;
191
+ // In a real app, you would load translations here
192
+ // For demo purposes, we'll just show the selected language
193
+ console.log('Language changed to:', lang);
194
  });
195
 
196
  // Initialize feather icons
197
  feather.replace();
198
+ </script>
199
  </body>
200
  </html>