Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ESP32 Command Center</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| }, | |
| secondary: { | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-gray-900 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Status Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900 mr-4"> | |
| <i data-feather="wifi" class="text-primary-600 dark:text-primary-400 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">WiFi Status</p> | |
| <h3 class="text-xl font-semibold text-gray-800 dark:text-white" data-status="wifi">Connected</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 mr-4"> | |
| <i data-feather="cpu" class="text-green-600 dark:text-green-400 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">CPU Usage</p> | |
| <h3 class="text-xl font-semibold text-gray-800 dark:text-white" data-status="cpu">42%</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 mr-4"> | |
| <i data-feather="hard-drive" class="text-blue-600 dark:text-blue-400 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Memory</p> | |
| <h3 class="text-xl font-semibold text-gray-800 dark:text-white" data-status="memory">64%</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 mr-4"> | |
| <i data-feather="thermometer" class="text-purple-600 dark:text-purple-400 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Temperature</p> | |
| <h3 class="text-xl font-semibold text-gray-800 dark:text-white" data-status="temperature">32°C</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Sensor Data Chart --> | |
| <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Sensor Data</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary-500 text-white rounded-md text-sm">Live</button> | |
| <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md text-sm">1h</button> | |
| <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md text-sm">24h</button> | |
| </div> | |
| </div> | |
| <canvas id="sensorChart" height="300"></canvas> | |
| </div> | |
| <!-- Device Controls --> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Device Controls</h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium text-gray-700 dark:text-gray-300">LED Strip</h3> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Living Room</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium text-gray-700 dark:text-gray-300">Smart Plug</h3> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Kitchen</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div> | |
| </label> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200 dark:border-gray-700"> | |
| <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-2">LED Brightness</h3> | |
| <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> | |
| <span>0%</span> | |
| <span>50%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200 dark:border-gray-700"> | |
| <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Motor Speed</h3> | |
| <input type="range" min="0" max="100" value="40" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> | |
| <span>0%</span> | |
| <span>50%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Logs --> | |
| <div class="lg:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">System Logs</h2> | |
| <div class="overflow-y-auto max-h-64"> | |
| <div class="space-y-2"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-2 w-2 rounded-full bg-green-500 mt-2 mr-3"></div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Device connected - 10:42 AM</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">ESP32 connected to WiFi network</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-2 w-2 rounded-full bg-blue-500 mt-2 mr-3"></div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Temperature reading - 10:40 AM</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Living Room: 22.4°C</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-2 w-2 rounded-full bg-yellow-500 mt-2 mr-3"></div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Warning: High CPU - 10:38 AM</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">CPU usage reached 85%</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-2 w-2 rounded-full bg-blue-500 mt-2 mr-3"></div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Humidity reading - 10:35 AM</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Living Room: 45%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize chart | |
| const ctx = document.getElementById('sensorChart').getContext('2d'); | |
| const sensorChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '00:00'], | |
| datasets: [ | |
| { | |
| label: 'Temperature (°C)', | |
| data: [22, 21, 20, 22, 25, 26, 24, 23, 22], | |
| borderColor: '#6366f1', | |
| backgroundColor: 'rgba(99, 102, 241, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }, | |
| { | |
| label: 'Humidity (%)', | |
| data: [45, 46, 48, 42, 40, 38, 42, 44, 45], | |
| borderColor: '#8b5cf6', | |
| backgroundColor: 'rgba(139, 92, 246, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| labels: { | |
| color: '#6b7280' | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| grid: { | |
| color: 'rgba(229, 231, 235, 0.2)' | |
| }, | |
| ticks: { | |
| color: '#6b7280' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| color: 'rgba(229, 231, 235, 0.2)' | |
| }, | |
| ticks: { | |
| color: '#6b7280' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |