dashboard.html

<!DOCTYPE html>
<html lang="en" class="dark">
<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://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            500: '#3B82F6',
                            600: '#2563EB',
                        },
                        secondary: {
                            500: '#6366F1',
                            600: '#4F46E5',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        html {
            font-family: 'Inter', sans-serif;
        }
        .card {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .dark .card {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
    <!-- 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="activity" 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">
                <!-- Language Selector -->
                <div class="relative">
                    <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">
                        <option value="en" class="dark:bg-gray-700 dark:text-gray-100">English</option>
                        <option value="es" class="dark:bg-gray-700 dark:text-gray-100">Español</option>
                        <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="sun" class="w-5 h-5"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
        <!-- Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 dark:text-gray-400">Temperature</p>
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white">24.5°C</h3>
                    </div>
                    <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900/30">
                        <i data-feather="thermometer" class="w-6 h-6 text-blue-500 dark:text-blue-400"></i>
                    </div>
                </div>
            </div>
            <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 dark:text-gray-400">Humidity</p>
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white">45%</h3>
                    </div>
                    <div class="p-3 rounded-full bg-green-100 dark:bg-green-900/30">
                        <i data-feather="droplet" class="w-6 h-6 text-green-500 dark:text-green-400"></i>
                    </div>
                </div>
            </div>
            <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 dark:text-gray-400">Devices Online</p>
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white">8/10</h3>
                    </div>
                    <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900/30">
                        <i data-feather="wifi" class="w-6 h-6 text-purple-500 dark:text-purple-400"></i>
                    </div>
                </div>
            </div>
            <div class="card bg-white dark:bg-gray-800 rounded-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 dark:text-gray-400">Power Usage</p>
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white">1.2 kW</h3>
                    </div>
                    <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
                        <i data-feather="zap" class="w-6 h-6 text-yellow-500 dark:text-yellow-400"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <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 Trend</h3>
                <div class="h-64">
                    <canvas id="temperatureChart"></canvas>
                </div>
            </div>
            <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 Trend</h3>
                <div class="h-64">
                    <canvas id="humidityChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Devices Section -->
        <div class="card bg-white dark:bg-gray-800 rounded-lg p-6 mb-8">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Connected Devices</h3>
            <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">Last Seen</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">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">
                                        <i data-feather="thermometer" class="w-6 h-6 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">Temperature</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 text-green-800 dark:bg-green-900 dark:text-green-200">Online</span>
                            </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-sm font-medium">
                                <a href="#" class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-4">Details</a>
                                <a href="#" class="text-red-500 hover:text-red-600 dark:hover:text-red-400">Restart</a>
                            </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">
                                        <i data-feather="droplet" class="w-6 h-6 text-green-500 dark:text-green-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">Humidity</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 text-green-800 dark:bg-green-900 dark:text-green-200">Online</span>
                            </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-sm font-medium">
                                <a href="#" class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-4">Details</a>
                                <a href="#" class="text-red-500 hover:text-red-600 dark:hover:text-red-400">Restart</a>
                            </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">
                                        <i data-feather="wind" class="w-6 h-6 text-purple-500 dark:text-purple-400"></i>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">Bedroom AC</div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400">Air Conditioner</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 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Idle</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">10 minutes ago</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="#" class="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 mr-4">Details</a>
                                <a href="#" class="text-red-500 hover:text-red-600 dark:hover:text-red-400">Restart</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Recent Alerts -->
        <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">Recent Alerts</h3>
            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="flex-shrink-0 pt-1">
                        <div class="flex items-center justify-center h-8 w-8 rounded-full bg-red-100 dark:bg-red-900/30">
                            <i data-feather="alert-triangle" class="w-5 h-5 text-red-500 dark:text-red-400"></i>
                        </div>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-900 dark:text-white">High temperature detected</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Living Room Sensor reached 30°C at 10:30 AM</p>
                    </div>
                    <div class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 hour ago</div>
                </div>
                <div class="flex items-start">
                    <div class="flex-shrink-0 pt-1">
                        <div class="flex items-center justify-center h-8 w-8 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
                            <i data-feather="alert-circle" class="w-5 h-5 text-yellow-500 dark:text-yellow-400"></i>
                        </div>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Device disconnected</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Garage Door Sensor lost connection</p>
                    </div>
                    <div class="ml-auto text-sm text-gray-500 dark:text-gray-400">3 hours ago</div>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Theme toggle functionality
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const html = document.documentElement;
        
        // Check for saved theme preference or use preferred OS theme
        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
            themeIcon.setAttribute('data-feather', 'sun');
        } else {
            html.classList.remove('dark');
            themeIcon.setAttribute('data-feather', 'moon');
        }
        
        themeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
            
            if (html.classList.contains('dark')) {
                themeIcon.setAttribute('data-feather', 'sun');
            } else {
                themeIcon.setAttribute('data-feather', 'moon');
            }
            feather.replace();
        });

        // Language change handler
        document.querySelector('select').addEventListener('change', function() {
            const lang = this.value;
            // In a real app, you would load translations here
            console.log('Language changed to:', lang);
        });

        // Initialize charts
        document.addEventListener('DOMContentLoaded', function() {
            // Temperature Chart
            const tempCtx = document.getElementById('temperatureChart').getContext('2d');
            const tempChart = new Chart(tempCtx, {
                type: 'line',
                data: {
                    labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                    datasets: [{
                        label: 'Temperature (°C)',
                        data: [22, 23, 24, 25, 24, 23],
                        borderColor: '#3B82F6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)',
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // Humidity Chart
            const humidCtx = document.getElementById('humidityChart').getContext('2d');
            const humidChart = new Chart(humidCtx, {
                type: 'line',
                data: {
                    labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                    datasets: [{
                        label: 'Humidity (%)',
                        data: [45, 50, 48, 42, 40, 44],
                        borderColor: '#10B981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)',
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        });

        // Initialize feather icons
        feather.replace();
    </script>
</body>
</html>