Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>IoT Dashboard - Quản lý LED & Cảm biến</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body class="bg-black text-white overflow-x-hidden"> | |
| <div id="vanta-bg" class="absolute inset-0 -z-10"></div> | |
| <!-- Connection Status --> | |
| <div class="connection-status"> | |
| <span id="status-indicator" class="status-indicator status-offline"></span> | |
| <span id="connection-status">Connecting...</span> | |
| </div> | |
| <div class="dashboard-container"> | |
| <!-- Header --> | |
| <header class="text-center" data-aos="fade-down"> | |
| <h1 class="text-4xl font-bold text-cyan-400 drop-shadow-lg mb-2"> | |
| <i class="fas fa-microchip mr-3"></i> | |
| IoT Dashboard | |
| </h1> | |
| <p class="text-cyan-300 text-lg">Hệ thống quản lý LED & giám sát cảm biến thời gian thực</p> | |
| </header> | |
| <!-- Main Control Grid --> | |
| <div class="main-grid"> | |
| <!-- LED Controls Section --> | |
| <div class="led-section" data-aos="fade-right"> | |
| <h2 class="text-2xl font-bold text-cyan-300 mb-4"> | |
| <i class="fas fa-lightbulb mr-2"></i> | |
| Điều khiển LED | |
| </h2> | |
| <div class="led-controls"> | |
| <!-- LED 1 --> | |
| <div class="led-card" data-aos="zoom-in" data-aos-delay="100"> | |
| <div class="led-info"> | |
| <h3 class="text-xl font-bold text-cyan-300"> | |
| <i class="fas fa-circle mr-2"></i> | |
| LED 1 | |
| </h3> | |
| <p class="text-sm mt-2"> | |
| Trạng thái: <span id="led1-status" class="font-bold text-red-400">OFF</span> | |
| </p> | |
| </div> | |
| <div class="led-control"> | |
| <div id="led1-toggle" class="led-toggle off"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Time Display Section --> | |
| <div class="time-section" data-aos="fade-up" data-aos-delay="200"> | |
| <h2 class="text-2xl font-bold text-cyan-300 mb-4"> | |
| <i class="fas fa-clock mr-2"></i> | |
| Thời gian hệ thống | |
| </h2> | |
| <div class="time-panel"> | |
| <div class="time-display"> | |
| <div class="current-time"> | |
| <div class="time-label"> | |
| <i class="fas fa-hourglass-half mr-2"></i> | |
| Giờ hiện tại | |
| </div> | |
| <div class="time-value" id="current-time"> | |
| --:--:-- | |
| </div> | |
| </div> | |
| <div class="current-date"> | |
| <div class="date-label"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| Ngày tháng năm | |
| </div> | |
| <div class="date-value" id="current-date"> | |
| --/--/---- | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sensor Panel --> | |
| <div class="sensor-section" data-aos="fade-up"> | |
| <h2 class="text-2xl font-bold text-cyan-300 mb-4"> | |
| <i class="fas fa-thermometer-half mr-2"></i> | |
| Cảm biến Khu A | |
| </h2> | |
| <div class="sensor-panel"> | |
| <div class="sensor-grid"> | |
| <!-- Temperature --> | |
| <div class="sensor-item" data-aos="flip-left" data-aos-delay="100"> | |
| <div class="sensor-label"> | |
| <i class="fas fa-temperature-high mr-2"></i> | |
| Nhiệt độ | |
| </div> | |
| <div class="sensor-value"> | |
| <span id="temperature-value">--</span> | |
| <span class="sensor-unit">°C</span> | |
| </div> | |
| </div> | |
| <!-- Humidity --> | |
| <div class="sensor-item" data-aos="flip-left" data-aos-delay="200"> | |
| <div class="sensor-label"> | |
| <i class="fas fa-tint mr-2"></i> | |
| Độ ẩm | |
| </div> | |
| <div class="sensor-value"> | |
| <span id="humidity-value">--</span> | |
| <span class="sensor-unit">%</span> | |
| </div> | |
| </div> | |
| <!-- Gas Sensor --> | |
| <div class="sensor-item" data-aos="flip-left" data-aos-delay="300"> | |
| <div class="sensor-label"> | |
| <i class="fas fa-smog mr-2"></i> | |
| Khí Gas | |
| </div> | |
| <div class="sensor-value"> | |
| <span id="gas-value">--</span> | |
| <span class="sensor-unit">ppm</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chart Section --> | |
| <div class="chart-section" data-aos="fade-left"> | |
| <h2 class="text-2xl font-bold text-cyan-300 mb-4"> | |
| <i class="fas fa-chart-line mr-2"></i> | |
| Biểu đồ theo dõi | |
| </h2> | |
| <div class="chart-panel"> | |
| <canvas id="sensorChart" width="400" height="300"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> | |