Hugging Face's logo

Spaces:
Codechief
/
undefined
Running

App Files Community
Codechief commited on
Commit
1bbe3b9
·
verified ·
1 Parent(s): 612fc5c

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +178 -279
index.html CHANGED
@@ -1,13 +1,12 @@
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</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',
@@ -16,345 +15,245 @@
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
- .dashboard-card {
36
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
37
- }
38
- .dark .dashboard-card {
39
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
40
- }
41
- .device-card {
42
- transition: all 0.3s ease;
43
- }
44
- .device-card:hover {
45
- transform: translateY(-2px);
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-7xl 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="cpu" 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">IoT Dashboard</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 px-4 py-6 sm:px-6 lg:px-8">
83
- <div class="max-w-7xl mx-auto">
84
- <!-- Overview Cards -->
85
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
86
- <!-- Total Devices -->
87
- <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
88
- <div class="flex items-center">
89
- <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900/20 mr-4">
90
- <i data-feather="database" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  </div>
92
- <div>
93
- <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Devices</p>
94
- <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="total-devices">12</h3>
 
 
 
95
  </div>
96
  </div>
97
  </div>
98
 
99
- <!-- Active Devices -->
100
- <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
101
- <div class="flex items-center">
102
- <div class="p-3 rounded-full bg-green-100 dark:bg-green-900/20 mr-4">
103
- <i data-feather="activity" class="text-green-500 dark:text-green-400 w-6 h-6"></i>
 
 
 
 
 
 
 
104
  </div>
105
- <div>
106
- <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Devices</p>
107
- <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="active-devices">8</h3>
 
 
 
 
 
108
  </div>
109
- </div>
110
- </div>
111
-
112
- <!-- Average Temperature -->
113
- <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
114
- <div class="flex items-center">
115
- <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900/20 mr-4">
116
- <i data-feather="thermometer" class="text-yellow-500 dark:text-yellow-400 w-6 h-6"></i>
117
  </div>
118
- <div>
119
- <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Temperature</p>
120
- <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="avg-temp">24.5°C</h3>
 
 
 
 
 
121
  </div>
122
  </div>
123
  </div>
124
 
125
- <!-- Power Consumption -->
126
- <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
127
- <div class="flex items-center">
128
- <div class="p-3 rounded-full bg-red-100 dark:bg-red-900/20 mr-4">
129
- <i data-feather="zap" class="text-red-500 dark:text-red-400 w-6 h-6"></i>
130
- </div>
131
- <div>
132
- <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Power Usage</p>
133
- <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="power-usage">1.8 kW</h3>
134
- </div>
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
  </div>
137
- </div>
138
 
139
- <!-- Charts Section -->
140
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
141
- <!-- Temperature Chart -->
142
- <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
143
  <div class="flex justify-between items-center mb-4">
144
- <h3 class="text-lg font-medium text-gray-900 dark:text-white">Temperature Trend</h3>
145
  <div class="flex space-x-2">
146
- <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">24h</button>
147
- <button class="text-xs px-2 py-1 rounded bg-primary-500 text-white">7d</button>
148
- <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">30d</button>
149
  </div>
150
  </div>
151
- <canvas id="temperatureChart" height="250"></canvas>
 
 
152
  </div>
153
 
154
- <!-- Humidity Chart -->
155
- <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
156
  <div class="flex justify-between items-center mb-4">
157
- <h3 class="text-lg font-medium text-gray-900 dark:text-white">Humidity Trend</h3>
158
- <div class="flex space-x-2">
159
- <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">24h</button>
160
- <button class="text-xs px-2 py-1 rounded bg-primary-500 text-white">7d</button>
161
- <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">30d</button>
162
- </div>
163
  </div>
164
- <canvas id="humidityChart" height="250"></canvas>
165
- </div>
166
- </div>
167
-
168
- <!-- Devices List -->
169
- <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
170
- <div class="flex justify-between items-center mb-4">
171
- <h3 class="text-lg font-medium text-gray-900 dark:text-white">Connected Devices</h3>
172
- <button class="text-sm px-3 py-1 rounded bg-primary-500 hover:bg-primary-600 text-white flex items-center">
173
- <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add Device
174
- </button>
175
- </div>
176
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
177
- <!-- Device Card 1 -->
178
- <div class="device-card bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
179
- <div class="flex justify-between items-start">
180
- <div>
181
- <h4 class="font-medium text-gray-900 dark:text-white">Living Room Thermostat</h4>
182
- <p class="text-sm text-gray-500 dark:text-gray-400">ID: TH-001</p>
183
  </div>
184
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
185
- </div>
186
- <div class="mt-4 flex justify-between">
187
- <div>
188
- <p class="text-xs text-gray-500 dark:text-gray-400">Temperature</p>
189
- <p class="text-lg font-medium text-gray-900 dark:text-white">22.5°C</p>
190
- </div>
191
- <div>
192
- <p class="text-xs text-gray-500 dark:text-gray-400">Humidity</p>
193
- <p class="text-lg font-medium text-gray-900 dark:text-white">45%</p>
194
- </div>
195
- <div>
196
- <p class="text-xs text-gray-500 dark:text-gray-400">Status</p>
197
- <p class="text-lg font-medium text-green-500">Online</p>
198
- </div>
199
- </div>
200
- </div>
201
-
202
- <!-- Device Card 2 -->
203
- <div class="device-card bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
204
- <div class="flex justify-between items-start">
205
  <div>
206
- <h4 class="font-medium text-gray-900 dark:text-white">Kitchen Camera</h4>
207
- <p class="text-sm text-gray-500 dark:text-gray-400">ID: CAM-002</p>
208
  </div>
209
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
210
  </div>
211
- <div class="mt-4 flex justify-between">
212
- <div>
213
- <p class="text-xs text-gray-500 dark:text-gray-400">Last Motion</p>
214
- <p class="text-lg font-medium text-gray-900 dark:text-white">12 min ago</p>
215
- </div>
216
- <div>
217
- <p class="text-xs text-gray-500 dark:text-gray-400">Storage</p>
218
- <p class="text-lg font-medium text-gray-900 dark:text-white">78%</p>
219
  </div>
220
  <div>
221
- <p class="text-xs text-gray-500 dark:text-gray-400">Status</p>
222
- <p class="text-lg font-medium text-green-500">Online</p>
223
- </div>
224
- </div>
225
- </div>
226
-
227
- <!-- Device Card 3 -->
228
- <div class="device-card bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
229
- <div class="flex justify-between items-start">
230
- <div>
231
- <h4 class="font-medium text-gray-900 dark:text-white">Bedroom Light</h4>
232
- <p class="text-sm text-gray-500 dark:text-gray-400">ID: LGT-003</p>
233
  </div>
234
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
235
  </div>
236
- <div class="mt-4 flex justify-between">
237
- <div>
238
- <p class="text-xs text-gray-500 dark:text-gray-400">Brightness</p>
239
- <p class="text-lg font-medium text-gray-900 dark:text-white">75%</p>
240
  </div>
241
  <div>
242
- <p class="text-xs text-gray-500 dark:text-gray-400">Power</p>
243
- <p class="text-lg font-medium text-gray-900 dark:text-white">15W</p>
244
- </div>
245
- <div>
246
- <p class="text-xs text-gray-500 dark:text-gray-400">Status</p>
247
- <p class="text-lg font-medium text-yellow-500">Idle</p>
248
  </div>
249
  </div>
250
  </div>
251
  </div>
252
  </div>
253
- </div>
254
- </main>
 
 
 
 
 
 
 
255
 
256
  <script>
257
  // Theme toggle functionality
258
  const themeToggle = document.getElementById('theme-toggle');
259
- const themeIcon = document.getElementById('theme-icon');
260
- const html = document.documentElement;
261
-
262
- // Check for saved theme preference or use preferred OS theme
263
- if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
264
- html.classList.add('dark');
265
- themeIcon.setAttribute('data-feather', 'sun');
266
- } else {
267
- html.classList.remove('dark');
268
- themeIcon.setAttribute('data-feather', 'moon');
269
- }
270
-
271
  themeToggle.addEventListener('click', () => {
272
- html.classList.toggle('dark');
273
- localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
274
-
275
- if (html.classList.contains('dark')) {
276
- themeIcon.setAttribute('data-feather', 'sun');
277
- } else {
278
- themeIcon.setAttribute('data-feather', 'moon');
279
- }
280
- feather.replace();
281
  });
282
 
283
- // Initialize charts
284
- document.addEventListener('DOMContentLoaded', function() {
285
- // Temperature Chart
286
- const tempCtx = document.getElementById('temperatureChart').getContext('2d');
287
- const tempChart = new Chart(tempCtx, {
288
- type: 'line',
289
- data: {
290
- labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
291
- datasets: [{
292
- label: 'Temperature (°C)',
293
- data: [22, 23, 24, 23.5, 24.5, 25, 24],
294
- borderColor: '#3B82F6',
295
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
296
- borderWidth: 2,
297
- tension: 0.3,
298
- fill: true
299
- }]
300
- },
301
- options: {
302
- responsive: true,
303
- maintainAspectRatio: false,
304
- plugins: {
305
- legend: {
306
- display: false
307
- }
308
- },
309
- scales: {
310
- y: {
311
- beginAtZero: false
312
- }
313
- }
314
- }
315
- });
316
-
317
- // Humidity Chart
318
- const humidityCtx = document.getElementById('humidityChart').getContext('2d');
319
- const humidityChart = new Chart(humidityCtx, {
320
- type: 'line',
321
- data: {
322
- labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
323
- datasets: [{
324
- label: 'Humidity (%)',
325
- data: [45, 47, 50, 48, 46, 44, 42],
326
- borderColor: '#6366F1',
327
- backgroundColor: 'rgba(99, 102, 241, 0.1)',
328
- borderWidth: 2,
329
- tension: 0.3,
330
- fill: true
331
- }]
332
- },
333
- options: {
334
- responsive: true,
335
- maintainAspectRatio: false,
336
- plugins: {
337
- legend: {
338
- display: false
339
- }
340
- },
341
- scales: {
342
- y: {
343
- beginAtZero: false
344
- }
345
- }
346
- }
347
- });
348
  });
349
 
350
- // Language change handler
351
- document.querySelector('select').addEventListener('change', function() {
352
- const lang = this.value;
353
- console.log('Language changed to:', lang);
 
354
  });
355
 
356
  // Initialize feather icons
357
  feather.replace();
358
  </script>
359
  </body>
360
- </html>
 
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
  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-primary-500 hover:bg-primary-600 text-white p-4 rounded-lg flex flex-col items-center justify-center">
152
+ <i data-feather="power" class="w-6 h-6 mb-2"></i>
153
+ <span>Toggle Device</span>
154
+ </button>
155
+ <button class="bg-secondary-500 hover:bg-secondary-600 text-white p-4 rounded-lg flex flex-col items-center justify-center">
156
+ <i data-feather="refresh-cw" class="w-6 h-6 mb-2"></i>
157
+ <span>Restart</span>
158
+ </button>
159
+ <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">
160
+ <i data-feather="settings" class="w-6 h-6 mb-2"></i>
161
+ <span>Settings</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="alert-circle" class="w-6 h-6 mb-2"></i>
165
+ <span>Alerts</span>
166
+ </button>
167
  </div>
168
  </div>
 
169
 
170
+ <!-- Data Charts Card -->
171
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 md:col-span-2">
 
 
172
  <div class="flex justify-between items-center mb-4">
173
+ <h2 class="text-lg font-semibold">Sensor Data History</h2>
174
  <div class="flex space-x-2">
175
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">24h</button>
176
+ <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">7d</button>
177
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">30d</button>
178
  </div>
179
  </div>
180
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-lg h-64 flex items-center justify-center">
181
+ <p class="text-gray-500 dark:text-gray-400">Chart visualization would appear here</p>
182
+ </div>
183
  </div>
184
 
185
+ <!-- Notifications Card -->
186
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
187
  <div class="flex justify-between items-center mb-4">
188
+ <h2 class="text-lg font-semibold">Notifications</h2>
189
+ <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>
 
 
 
 
190
  </div>
191
+ <div class="space-y-3">
192
+ <div class="flex items-start space-x-3">
193
+ <div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center">
194
+ <i data-feather="alert-triangle" class="w-4 h-4 text-red-500"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
195
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
196
  <div>
197
+ <p class="font-medium">High temperature alert</p>
198
+ <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
199
  </div>
 
200
  </div>
201
+ <div class="flex items-start space-x-3">
202
+ <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center">
203
+ <i data-feather="bell" class="w-4 h-4 text-yellow-500"></i>
 
 
 
 
 
204
  </div>
205
  <div>
206
+ <p class="font-medium">Device update available</p>
207
+ <p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
 
 
 
 
 
 
 
 
 
 
208
  </div>
 
209
  </div>
210
+ <div class="flex items-start space-x-3">
211
+ <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
212
+ <i data-feather="check-circle" class="w-4 h-4 text-green-500"></i>
 
213
  </div>
214
  <div>
215
+ <p class="font-medium">Device restarted successfully</p>
216
+ <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
 
 
 
 
217
  </div>
218
  </div>
219
  </div>
220
  </div>
221
  </div>
222
+ </main>
223
+
224
+ <!-- Footer -->
225
+ <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-4">
226
+ <div class="container mx-auto px-4 text-center text-sm text-gray-500 dark:text-gray-400">
227
+ <p>© 2023 GlowTron IoT Dashboard. All rights reserved.</p>
228
+ </div>
229
+ </footer>
230
+ </div>
231
 
232
  <script>
233
  // Theme toggle functionality
234
  const themeToggle = document.getElementById('theme-toggle');
 
 
 
 
 
 
 
 
 
 
 
 
235
  themeToggle.addEventListener('click', () => {
236
+ document.documentElement.classList.toggle('dark');
237
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
 
 
 
 
 
 
 
238
  });
239
 
240
+ // Language dropdown functionality
241
+ const languageDropdown = document.getElementById('language-dropdown');
242
+ const languageMenu = document.getElementById('language-menu');
243
+ languageDropdown.addEventListener('click', (e) => {
244
+ e.preventDefault();
245
+ languageMenu.classList.toggle('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  });
247
 
248
+ // Close dropdown when clicking outside
249
+ document.addEventListener('click', (e) => {
250
+ if (!languageDropdown.contains(e.target) && !languageMenu.contains(e.target)) {
251
+ languageMenu.classList.add('hidden');
252
+ }
253
  });
254
 
255
  // Initialize feather icons
256
  feather.replace();
257
  </script>
258
  </body>
259
+ </html>