Spaces:

Codechief
/

undefined

Running

App Files Files Community

Codechief commited on Oct 15, 2025

Commit

612fc5c

verified ·

1 Parent(s): 61c1d30

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.

Browse files

Files changed (1) hide show

index.html +243 -83

index.html CHANGED Viewed

@@ -3,10 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login | AuthPortal Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script>
         tailwind.config = {
             darkMode: 'class',
@@ -31,29 +32,28 @@
         html {
             font-family: 'Inter', sans-serif;
         }
-        .login-container {
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
         }
-        .dark .login-container {
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
         }
-        .input-field:focus {
-            border-color: #3B82F6;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
         }
-        .dark .input-field:focus {
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
         }
     </style>
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200 min-h-screen flex flex-col">
     <!-- Navigation Bar -->
     <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6">
-        <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>
             <div class="flex items-center space-x-4">
@@ -65,13 +65,13 @@
                         <option value="fr" class="dark:bg-gray-700 dark:text-gray-100">Français</option>
                         <option value="de" class="dark:bg-gray-700 dark:text-gray-100">Deutsch</option>
                         <option value="ja" class="dark:bg-gray-700 dark:text-gray-100">日本語</option>
-</select>
                     <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                         <i data-feather="globe" class="h-4 w-4 text-gray-400 dark:text-gray-300"></i>
-</div>
                 </div>
                 <!-- Dark Mode Toggle -->
-<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>
             </div>
@@ -79,70 +79,178 @@
     </nav>
     <!-- Main Content -->
-    <main class="flex-grow flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
-        <div class="max-w-md w-full space-y-8">
-            <div class="text-center">
-                <!-- Logo Placeholder -->
-                <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">
-                    <i data-feather="shield" class="h-20 w-20 text-primary-500 dark:text-primary-400"></i>
                 </div>
-                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white" data-i18n="sign_in_title">
-                        <span data-i18n="sign_in_button">Sign in</span>
-to your account
-                </h2>
-</div>
-            <form class="mt-8 space-y-6 login-container bg-white dark:bg-gray-800 p-8 rounded-lg" action="#" method="POST">
-                <input type="hidden" name="remember" value="true">
-                <div class="rounded-md shadow-sm space-y-4">
-                    <div>
-                        <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>
-<div class="relative">
-                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <i data-feather="user" class="h-5 w-5 text-gray-400 dark:text-gray-500"></i>
-                            </div>
-                            <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">
                         </div>
                     </div>
-                    <div>
-                        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-i18n="password_label">Password</label>
-<div class="relative">
-                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <i data-feather="lock" class="h-5 w-5 text-gray-400 dark:text-gray-500"></i>
-                            </div>
-                            <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="••••••••">
-                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePasswordVisibility()">
-                                <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>
-                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="flex items-center justify-between">
                     <div class="flex items-center">
-                        <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">
-                        <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300" data-i18n="remember_me">
-                            Remember me
-                        </label>
-</div>
-                    <div class="text-sm">
-                        <a href="#" class="font-medium text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300">
-                            <span data-i18n="forgot_password">Forgot your password?</span>
-</a>
                     </div>
                 </div>
-                <div>
-                    <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">
-                        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-                            <i data-feather="log-in" class="h-5 w-5 text-primary-100 group-hover:text-primary-200"></i>
-                        </span>
-                        Sign in
                     </button>
                 </div>
-</form>
-</div>
     </main>
     <script>
@@ -171,30 +279,82 @@ to your account
             }
             feather.replace();
         });
-// Password visibility toggle
-        function togglePasswordVisibility() {
-            const passwordInput = document.getElementById('password');
-            const eyeIcon = document.getElementById('eye-icon');
-            if (passwordInput.type === 'password') {
-                passwordInput.type = 'text';
-                eyeIcon.setAttribute('data-feather', 'eye-off');
-            } else {
-                passwordInput.type = 'password';
-                eyeIcon.setAttribute('data-feather', 'eye');
-            }
-            feather.replace();
-        }
         // Language change handler
         document.querySelector('select').addEventListener('change', function() {
             const lang = this.value;
-            // In a real app, you would load translations here
-            // For demo purposes, we'll just show the selected language
             console.log('Language changed to:', lang);
         });
         // Initialize feather icons
         feather.replace();
-</script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IoT Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
         tailwind.config = {
             darkMode: 'class',
         html {
             font-family: 'Inter', sans-serif;
         }
+        .dashboard-card {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         }
+        .dark .dashboard-card {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
         }
+        .device-card {
+            transition: all 0.3s ease;
         }
+        .device-card:hover {
+            transform: translateY(-2px);
         }
     </style>
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200 min-h-screen flex flex-col">
     <!-- Navigation Bar -->
     <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6">
+        <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="cpu" 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>
             <div class="flex items-center space-x-4">
                         <option value="fr" class="dark:bg-gray-700 dark:text-gray-100">Français</option>
                         <option value="de" class="dark:bg-gray-700 dark:text-gray-100">Deutsch</option>
                         <option value="ja" class="dark:bg-gray-700 dark:text-gray-100">日本語</option>
+                    </select>
                     <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                         <i data-feather="globe" class="h-4 w-4 text-gray-400 dark:text-gray-300"></i>
+                    </div>
                 </div>
                 <!-- Dark Mode Toggle -->
+                <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>
             </div>
     </nav>
     <!-- Main Content -->
+    <main class="flex-grow px-4 py-6 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <!-- Overview Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <!-- Total Devices -->
+                <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
+                    <div class="flex items-center">
+                        <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900/20 mr-4">
+                            <i data-feather="database" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Devices</p>
+                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="total-devices">12</h3>
+                        </div>
+                    </div>
                 </div>
+                <!-- Active Devices -->
+                <div class="dashboard-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/20 mr-4">
+                            <i data-feather="activity" class="text-green-500 dark:text-green-400 w-6 h-6"></i>
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Devices</p>
+                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="active-devices">8</h3>
                         </div>
                     </div>
+                </div>
+                <!-- Average Temperature -->
+                <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
+                    <div class="flex items-center">
+                        <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900/20 mr-4">
+                            <i data-feather="thermometer" class="text-yellow-500 dark:text-yellow-400 w-6 h-6"></i>
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Temperature</p>
+                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="avg-temp">24.5°C</h3>
                         </div>
                     </div>
                 </div>
+                <!-- Power Consumption -->
+                <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
                     <div class="flex items-center">
+                        <div class="p-3 rounded-full bg-red-100 dark:bg-red-900/20 mr-4">
+                            <i data-feather="zap" class="text-red-500 dark:text-red-400 w-6 h-6"></i>
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Power Usage</p>
+                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="power-usage">1.8 kW</h3>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Charts Section -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                <!-- Temperature Chart -->
+                <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Temperature Trend</h3>
+                        <div class="flex space-x-2">
+                            <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>
+                            <button class="text-xs px-2 py-1 rounded bg-primary-500 text-white">7d</button>
+                            <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>
+                        </div>
                     </div>
+                    <canvas id="temperatureChart" height="250"></canvas>
                 </div>
+                <!-- Humidity Chart -->
+                <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Humidity Trend</h3>
+                        <div class="flex space-x-2">
+                            <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>
+                            <button class="text-xs px-2 py-1 rounded bg-primary-500 text-white">7d</button>
+                            <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>
+                        </div>
+                    </div>
+                    <canvas id="humidityChart" height="250"></canvas>
+                </div>
+            </div>
+            <!-- Devices List -->
+            <div class="dashboard-card bg-white dark:bg-gray-800 rounded-lg p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Connected Devices</h3>
+                    <button class="text-sm px-3 py-1 rounded bg-primary-500 hover:bg-primary-600 text-white flex items-center">
+                        <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add Device
                     </button>
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <!-- Device Card 1 -->
+                    <div class="device-card bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h4 class="font-medium text-gray-900 dark:text-white">Living Room Thermostat</h4>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">ID: TH-001</p>
+                            </div>
+                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                        </div>
+                        <div class="mt-4 flex justify-between">
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Temperature</p>
+                                <p class="text-lg font-medium text-gray-900 dark:text-white">22.5°C</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Humidity</p>
+                                <p class="text-lg font-medium text-gray-900 dark:text-white">45%</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Status</p>
+                                <p class="text-lg font-medium text-green-500">Online</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Device Card 2 -->
+                    <div class="device-card bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h4 class="font-medium text-gray-900 dark:text-white">Kitchen Camera</h4>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">ID: CAM-002</p>
+                            </div>
+                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                        </div>
+                        <div class="mt-4 flex justify-between">
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Last Motion</p>
+                                <p class="text-lg font-medium text-gray-900 dark:text-white">12 min ago</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Storage</p>
+                                <p class="text-lg font-medium text-gray-900 dark:text-white">78%</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Status</p>
+                                <p class="text-lg font-medium text-green-500">Online</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Device Card 3 -->
+                    <div class="device-card bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h4 class="font-medium text-gray-900 dark:text-white">Bedroom Light</h4>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">ID: LGT-003</p>
+                            </div>
+                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                        </div>
+                        <div class="mt-4 flex justify-between">
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Brightness</p>
+                                <p class="text-lg font-medium text-gray-900 dark:text-white">75%</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Power</p>
+                                <p class="text-lg font-medium text-gray-900 dark:text-white">15W</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">Status</p>
+                                <p class="text-lg font-medium text-yellow-500">Idle</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </main>
     <script>
             }
             feather.replace();
         });
+        // Initialize charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Temperature Chart
+            const tempCtx = document.getElementById('temperatureChart').getContext('2d');
+            const tempChart = new Chart(tempCtx, {
+                type: 'line',
+                data: {
+                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    datasets: [{
+                        label: 'Temperature (°C)',
+                        data: [22, 23, 24, 23.5, 24.5, 25, 24],
+                        borderColor: '#3B82F6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        borderWidth: 2,
+                        tension: 0.3,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false
+                        }
+                    }
+                }
+            });
+            // Humidity Chart
+            const humidityCtx = document.getElementById('humidityChart').getContext('2d');
+            const humidityChart = new Chart(humidityCtx, {
+                type: 'line',
+                data: {
+                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    datasets: [{
+                        label: 'Humidity (%)',
+                        data: [45, 47, 50, 48, 46, 44, 42],
+                        borderColor: '#6366F1',
+                        backgroundColor: 'rgba(99, 102, 241, 0.1)',
+                        borderWidth: 2,
+                        tension: 0.3,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false
+                        }
+                    }
+                }
+            });
+        });
         // Language change handler
         document.querySelector('select').addEventListener('change', function() {
             const lang = this.value;
             console.log('Language changed to:', lang);
         });
         // Initialize feather icons
         feather.replace();
+    </script>
 </body>
+</html>