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

index.html

@@ -52,13 +52,9 @@
         <div class="max-w-6xl mx-auto flex justify-between items-center">
             <div class="flex items-center space-x-4">
                 <div class="flex items-center">
-                            <i data-feather="lock" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
-                            <span class="ml-2 font-semibold text-gray-800 dark:text-white">AuthPortal Pro</span>
-                        </div>
-                        <div class="hidden md:flex space-x-6 ml-6">
-                            <a href="index.html" class="text-gray-700 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400">Login</a>
-                            <a href="iot-dashboard.html" class="text-primary-500 dark:text-primary-400 font-medium">IoT Dashboard</a>
-</div>
+                    <i data-feather="lock" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
+                    <span class="ml-2 font-semibold text-gray-800 dark:text-white">AuthPortal Pro</span>
+                </div>
             </div>
             <div class="flex items-center space-x-4">
                 <!-- Language Selector -->

iot-dashboard.html

@@ -46,9 +46,15 @@
         <div class="max-w-7xl mx-auto flex justify-between items-center">
             <div class="flex items-center space-x-4">
                 <div class="flex items-center">
-                    <i data-feather="activity" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
+                    <i data-feather="wifi" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
                     <span class="ml-2 font-semibold text-gray-800 dark:text-white">IoT Dashboard</span>
                 </div>
+                <div class="hidden md:flex space-x-1">
+                    <a href="#" class="px-3 py-2 text-sm font-medium rounded-md text-primary-500 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30">Dashboard</a>
+                    <a href="#" class="px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Devices</a>
+                    <a href="#" class="px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Alerts</a>
+                    <a href="#" class="px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Settings</a>
+                </div>
             </div>
             <div class="flex items-center space-x-4">
                 <!-- Language Selector -->
@@ -68,158 +74,283 @@
                 <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">
                     <i id="theme-icon" data-feather="moon" class="w-5 h-5"></i>
                 </button>
+                <!-- User Profile -->
+                <div class="relative">
+                    <button class="flex items-center space-x-2 focus:outline-none">
+                        <div class="h-8 w-8 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
+                            <i data-feather="user" class="h-4 w-4 text-primary-500 dark:text-primary-400"></i>
+                        </div>
+                        <span class="hidden md:inline text-sm font-medium text-gray-700 dark:text-gray-300">Admin</span>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>
 
     <!-- Main Content -->
-    <main class="flex-grow px-4 py-6 sm:px-6 lg:px-8">
+    <main class="flex-grow p-6">
         <div class="max-w-7xl mx-auto">
-            <!-- Summary Cards -->
-            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
-                <!-- Device Status -->
+            <!-- Header -->
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Device Dashboard</h1>
+                <div class="flex space-x-2">
+                    <button class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <i data-feather="refresh-cw" class="mr-2 h-4 w-4"></i>
+                        Refresh
+                    </button>
+                    <button class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-500 hover:bg-primary-600">
+                        <i data-feather="plus" class="mr-2 h-4 w-4"></i>
+                        Add Device
+                    </button>
+                </div>
+            </div>
+
+            <!-- Stats Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+                <!-- Active Devices -->
                 <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
-                    <div class="flex items-center">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Devices</p>
+                            <p class="text-2xl font-bold text-gray-900 dark:text-white">24</p>
+                        </div>
                         <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900/30">
                             <i data-feather="cpu" class="h-6 w-6 text-primary-500 dark:text-primary-400"></i>
                         </div>
-                        <div class="ml-4">
-                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Connected Devices</p>
-                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">24</p>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex items-center text-sm text-green-500">
+                            <i data-feather="trending-up" class="h-4 w-4 mr-1"></i>
+                            <span>12% from last week</span>
                         </div>
                     </div>
                 </div>
 
                 <!-- Temperature -->
                 <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
-                    <div class="flex items-center">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Temperature</p>
+                            <p class="text-2xl font-bold text-gray-900 dark:text-white">23.5°C</p>
+                        </div>
                         <div class="p-3 rounded-full bg-red-100 dark:bg-red-900/30">
                             <i data-feather="thermometer" class="h-6 w-6 text-red-500 dark:text-red-400"></i>
                         </div>
-                        <div class="ml-4">
-                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Temperature</p>
-                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">23.5°C</p>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex items-center text-sm text-yellow-500">
+                            <i data-feather="alert-circle" class="h-4 w-4 mr-1"></i>
+                            <span>1.2°C above average</span>
                         </div>
                     </div>
                 </div>
 
                 <!-- Humidity -->
                 <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
-                    <div class="flex items-center">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Humidity</p>
+                            <p class="text-2xl font-bold text-gray-900 dark:text-white">65%</p>
+                        </div>
                         <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900/30">
                             <i data-feather="droplet" class="h-6 w-6 text-blue-500 dark:text-blue-400"></i>
                         </div>
-                        <div class="ml-4">
-                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Humidity</p>
-                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">65%</p>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex items-center text-sm text-green-500">
+                            <i data-feather="check-circle" class="h-4 w-4 mr-1"></i>
+                            <span>Within optimal range</span>
                         </div>
                     </div>
                 </div>
 
-                <!-- Energy Usage -->
+                <!-- Alerts -->
                 <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
-                    <div class="flex items-center">
-                        <div class="p-3 rounded-full bg-green-100 dark:bg-green-900/30">
-                            <i data-feather="zap" class="h-6 w-6 text-green-500 dark:text-green-400"></i>
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Alerts</p>
+                            <p class="text-2xl font-bold text-gray-900 dark:text-white">3</p>
                         </div>
-                        <div class="ml-4">
-                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Energy Usage</p>
-                            <p class="text-2xl font-semibold text-gray-900 dark:text-white">1.2 kW</p>
+                        <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
+                            <i data-feather="alert-triangle" class="h-6 w-6 text-yellow-500 dark:text-yellow-400"></i>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex items-center text-sm text-red-500">
+                            <i data-feather="arrow-up" class="h-4 w-4 mr-1"></i>
+                            <span>2 new today</span>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <!-- Charts Section -->
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            <!-- Charts Row -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                 <!-- Temperature Chart -->
                 <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
-                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Temperature Trends</h3>
-                    <div class="h-64">
-                        <canvas id="temperatureChart"></canvas>
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-lg font-medium text-gray-900 dark:text-white">Temperature Trends</h2>
+                        <div class="flex space-x-2">
+                            <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">24h</button>
+                            <button class="text-xs px-2 py-1 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">7d</button>
+                            <button class="text-xs px-2 py-1 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">30d</button>
+                        </div>
                     </div>
+                    <canvas id="temperatureChart" height="250"></canvas>
                 </div>
 
                 <!-- Humidity Chart -->
                 <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
-                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Humidity Trends</h3>
-                    <div class="h-64">
-                        <canvas id="humidityChart"></canvas>
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-lg font-medium text-gray-900 dark:text-white">Humidity Levels</h2>
+                        <div class="flex space-x-2">
+                            <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">24h</button>
+                            <button class="text-xs px-2 py-1 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">7d</button>
+                            <button class="text-xs px-2 py-1 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">30d</button>
+                        </div>
                     </div>
+                    <canvas id="humidityChart" height="250"></canvas>
                 </div>
             </div>
 
-            <!-- Device List -->
+            <!-- Device Status Table -->
             <div class="card bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
                 <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Connected Devices</h3>
+                    <h2 class="text-lg font-medium text-gray-900 dark:text-white">Connected Devices</h2>
                 </div>
-                <div class="divide-y divide-gray-200 dark:divide-gray-700">
-                    <!-- Device 1 -->
-                    <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                        <div class="flex items-center">
-                            <div class="p-2 rounded-full bg-primary-100 dark:bg-primary-900/30">
-                                <i data-feather="wifi" class="h-5 w-5 text-primary-500 dark:text-primary-400"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-900 dark:text-white">Smart Thermostat</p>
-                                <p class="text-sm text-gray-500 dark:text-gray-400">Living Room</p>
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
-                            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
-                        </div>
-                    </div>
-
-                    <!-- Device 2 -->
-                    <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                        <div class="flex items-center">
-                            <div class="p-2 rounded-full bg-blue-100 dark:bg-blue-900/30">
-                                <i data-feather="sun" class="h-5 w-5 text-blue-500 dark:text-blue-400"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-900 dark:text-white">Smart Light</p>
-                                <p class="text-sm text-gray-500 dark:text-gray-400">Kitchen</p>
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
-                            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
-                        </div>
-                    </div>
-
-                    <!-- Device 3 -->
-                    <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                        <div class="flex items-center">
-                            <div class="p-2 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
-                                <i data-feather="lock" class="h-5 w-5 text-yellow-500 dark:text-yellow-400"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-900 dark:text-white">Smart Lock</p>
-                                <p class="text-sm text-gray-500 dark:text-gray-400">Front Door</p>
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
-                            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
-                        </div>
-                    </div>
-
-                    <!-- Device 4 -->
-                    <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                        <div class="flex items-center">
-                            <div class="p-2 rounded-full bg-red-100 dark:bg-red-900/30">
-                                <i data-feather="alert-circle" class="h-5 w-5 text-red-500 dark:text-red-400"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-900 dark:text-white">Smoke Detector</p>
-                                <p class="text-sm text-gray-500 dark:text-gray-400">Hallway</p>
-                            </div>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                        <thead class="bg-gray-50 dark:bg-gray-700">
+                            <tr>
+                                <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>
+                                <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>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Temperature</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Humidity</th>
+                                <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 Active</th>
+                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <div class="flex items-center">
+                                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+                                            <i data-feather="thermometer" class="h-5 w-5 text-blue-500 dark:text-blue-400"></i>
+                                        </div>
+                                        <div class="ml-4">
+                                            <div class="text-sm font-medium text-gray-900 dark:text-white">Living Room Sensor</div>
+                                            <div class="text-sm text-gray-500 dark:text-gray-400">ID: SENS-001</div>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
+                                        Active
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                                    22.4°C
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                                    62%
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                    2 minutes ago
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                    <button class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-3">
+                                        <i data-feather="settings" class="h-4 w-4"></i>
+                                    </button>
+                                    <button class="text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300">
+                                        <i data-feather="trash-2" class="h-4 w-4"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <div class="flex items-center">
+                                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+                                            <i data-feather="thermometer" class="h-5 w-5 text-blue-500 dark:text-blue-400"></i>
+                                        </div>
+                                        <div class="ml-4">
+                                            <div class="text-sm font-medium text-gray-900 dark:text-white">Kitchen Sensor</div>
+                                            <div class="text-sm text-gray-500 dark:text-gray-400">ID: SENS-002</div>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
+                                        Active
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                                    24.1°C
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                                    58%
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                    5 minutes ago
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                    <button class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-3">
+                                        <i data-feather="settings" class="h-4 w-4"></i>
+                                    </button>
+                                    <button class="text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300">
+                                        <i data-feather="trash-2" class="h-4 w-4"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <div class="flex items-center">
+                                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
+                                            <i data-feather="alert-triangle" class="h-5 w-5 text-yellow-500 dark:text-yellow-400"></i>
+                                        </div>
+                                        <div class="ml-4">
+                                            <div class="text-sm font-medium text-gray-900 dark:text-white">Bedroom Sensor</div>
+                                            <div class="text-sm text-gray-500 dark:text-gray-400">ID: SENS-003</div>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300">
+                                        Warning
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                                    28.7°C
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                                    45%
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                    15 minutes ago
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                    <button class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-3">
+                                        <i data-feather="settings" class="h-4 w-4"></i>
+                                    </button>
+                                    <button class="text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300">
+                                        <i data-feather="trash-2" class="h-4 w-4"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <div class="text-sm text-gray-500 dark:text-gray-400">
+                            Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">24</span> devices
                         </div>
-                        <div class="flex items-center">
-                            <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
-                            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
+                        <div class="flex space-x-2">
+                            <button class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                Previous
+                            </button>
+                            <button class="px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                Next
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -267,13 +398,14 @@
             const tempChart = new Chart(tempCtx, {
                 type: 'line',
                 data: {
-                    labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
+                    labels: Array.from({length: 24}, (_, i) => `${i}:00`),
                     datasets: [{
                         label: 'Temperature (°C)',
-                        data: [20, 19, 18, 22, 25, 26, 24, 22],
+                        data: [22, 21, 20, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 19],
                         borderColor: '#EF4444',
                         backgroundColor: 'rgba(239, 68, 68, 0.1)',
-                        tension: 0.4,
+                        borderWidth: 2,
+                        tension: 0.3,
                         fill: true
                     }]
                 },
@@ -283,25 +415,25 @@
                     plugins: {
                         legend: {
                             labels: {
-                                color: html.classList.contains('dark') ? '#F3F4F6' : '#374151'
+                                color: html.classList.contains('dark') ? '#F3F4F6' : '#111827'
                             }
                         }
                     },
                     scales: {
-                        y: {
-                            ticks: {
-                                color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
-                            },
+                        x: {
                             grid: {
                                 color: html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
-                            }
-                        },
-                        x: {
+                            },
                             ticks: {
                                 color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
-                            },
+                            }
+                        },
+                        y: {
                             grid: {
                                 color: html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                            },
+                            ticks: {
+                                color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
                             }
                         }
                     }
@@ -313,13 +445,14 @@
             const humidityChart = new Chart(humidityCtx, {
                 type: 'line',
                 data: {
-                    labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
+                    labels: Array.from({length: 24}, (_, i) => `${i}:00`),
                     datasets: [{
                         label: 'Humidity (%)',
-                        data: [70, 68, 72, 65, 60, 58, 62, 68],
+                        data: [65, 64, 63, 62, 63, 64, 65, 66, 67, 68, 67, 66, 65, 64, 63, 62, 61, 60, 59, 60, 61, 62, 63, 64],
                         borderColor: '#3B82F6',
                         backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                        tension: 0.4,
+                        borderWidth: 2,
+                        tension: 0.3,
                         fill: true
                     }]
                 },
@@ -329,25 +462,25 @@
                     plugins: {
                         legend: {
                             labels: {
-                                color: html.classList.contains('dark') ? '#F3F4F6' : '#374151'
+                                color: html.classList.contains('dark') ? '#F3F4F6' : '#111827'
                             }
                         }
                     },
                     scales: {
-                        y: {
-                            ticks: {
-                                color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
-                            },
+                        x: {
                             grid: {
                                 color: html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
-                            }
-                        },
-                        x: {
+                            },
                             ticks: {
                                 color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
-                            },
+                            }
+                        },
+                        y: {
                             grid: {
                                 color: html.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                            },
+                            ticks: {
+                                color: html.classList.contains('dark') ? '#9CA3AF' : '#6B7280'
                             }
                         }
                     }
@@ -355,9 +488,11 @@
             });
         }
 
-        // Initialize feather icons and charts
-        feather.replace();
-        document.addEventListener('DOMContentLoaded', initCharts);
+        // Initialize feather icons and charts when DOM is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            initCharts();
+        });
     </script>
 </body>
 </html>