Spaces:

manhteky123
/

dht22

Running

App Files Files Community

Luisnguyen1 commited on Jun 30, 2025

Commit

936232e

1 Parent(s): 0912c84

Update space

Browse files

Files changed (3) hide show

index.html +159 -18
main.js +438 -0
style.css +433 -18

index.html CHANGED Viewed

@@ -1,19 +1,160 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>

main.js ADDED Viewed

	@@ -0,0 +1,438 @@

+// Firebase Database URL
+const FIREBASE_URL = 'https://dht22-3b177-default-rtdb.firebaseio.com';
+// Global variables
+let firebaseData = {};
+let connectionStatus = false;
+let sensorChart = null;
+let chartData = {
+    temperature: [],
+    humidity: [],
+    gas: [],
+    timestamps: []
+};
+// Initialize the dashboard
+document.addEventListener('DOMContentLoaded', function() {
+    initializeVantaBackground();
+    initializeAOS();
+    initializeChart();
+    startFirebaseListener();
+    setupLEDControls();
+    startTimeDisplay();
+    console.log('IoT Dashboard initialized');
+});
+// Initialize Vanta.js background
+function initializeVantaBackground() {
+    if (typeof VANTA !== 'undefined') {
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x00ffff,
+            backgroundColor: 0x000000,
+            points: 10.00,
+            maxDistance: 25.00,
+            spacing: 20.00
+        });
+    }
+}
+// Initialize AOS animations
+function initializeAOS() {
+    if (typeof AOS !== 'undefined') {
+        AOS.init({
+            duration: 1000,
+            once: true,
+            offset: 100
+        });
+    }
+}
+// Initialize Chart
+function initializeChart() {
+    const ctx = document.getElementById('sensorChart').getContext('2d');
+    sensorChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: chartData.timestamps,
+            datasets: [
+                {
+                    label: 'Nhiệt độ (°C)',
+                    data: chartData.temperature,
+                    borderColor: '#ff6b6b',
+                    backgroundColor: 'rgba(255, 107, 107, 0.1)',
+                    borderWidth: 2,
+                    fill: false,
+                    tension: 0.4
+                },
+                {
+                    label: 'Độ ẩm (%)',
+                    data: chartData.humidity,
+                    borderColor: '#4ecdc4',
+                    backgroundColor: 'rgba(78, 205, 196, 0.1)',
+                    borderWidth: 2,
+                    fill: false,
+                    tension: 0.4
+                },
+                {
+                    label: 'Khí Gas (ppm)',
+                    data: chartData.gas,
+                    borderColor: '#45b7d1',
+                    backgroundColor: 'rgba(69, 183, 209, 0.1)',
+                    borderWidth: 2,
+                    fill: false,
+                    tension: 0.4
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            aspectRatio: 1.5,
+            scales: {
+                x: {
+                    display: true,
+                    title: {
+                        display: true,
+                        text: 'Thời gian',
+                        color: '#00ffff'
+                    },
+                    ticks: {
+                        color: '#ffffff'
+                    },
+                    grid: {
+                        color: 'rgba(0, 255, 255, 0.1)'
+                    }
+                },
+                y: {
+                    display: true,
+                    title: {
+                        display: true,
+                        text: 'Giá trị',
+                        color: '#00ffff'
+                    },
+                    ticks: {
+                        color: '#ffffff'
+                    },
+                    grid: {
+                        color: 'rgba(0, 255, 255, 0.1)'
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ffffff'
+                    }
+                }
+            },
+            elements: {
+                point: {
+                    radius: 4,
+                    hoverRadius: 6
+                }
+            }
+        }
+    });
+}
+// Setup LED control buttons
+function setupLEDControls() {
+    const toggle = document.getElementById('led1-toggle');
+    if (toggle) {
+        toggle.addEventListener('click', () => toggleLED(1));
+    }
+}
+// Toggle LED state
+async function toggleLED(ledNumber) {
+    const toggle = document.getElementById(`led${ledNumber}-toggle`);
+    const currentState = toggle.classList.contains('on') ? 1 : 0;
+    const newState = currentState === 1 ? 0 : 1;
+    try {
+        // Update Firebase
+        const response = await fetch(`${FIREBASE_URL}/Control/LED${ledNumber}.json`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(newState)
+        });
+        if (response.ok) {
+            updateLEDUI(ledNumber, newState);
+            console.log(`LED${ledNumber} updated to ${newState}`);
+        } else {
+            console.error(`Failed to update LED${ledNumber}`);
+        }
+    } catch (error) {
+        console.error('Error updating LED:', error);
+        showConnectionError();
+    }
+}
+// Update LED UI
+function updateLEDUI(ledNumber, state) {
+    const toggle = document.getElementById(`led${ledNumber}-toggle`);
+    const status = document.getElementById(`led${ledNumber}-status`);
+    if (toggle && status) {
+        if (state === 1) {
+            toggle.classList.remove('off');
+            toggle.classList.add('on');
+            status.textContent = 'ON';
+            status.style.color = '#00ff00';
+        } else {
+            toggle.classList.remove('on');
+            toggle.classList.add('off');
+            status.textContent = 'OFF';
+            status.style.color = '#ff4444';
+        }
+    }
+}
+// Start Firebase real-time listener
+function startFirebaseListener() {
+    // Listen for data changes
+    setInterval(fetchFirebaseData, 2000); // Update every 2 seconds
+    fetchFirebaseData(); // Initial fetch
+}
+// Fetch data from Firebase
+async function fetchFirebaseData() {
+    try {
+        const response = await fetch(`${FIREBASE_URL}/.json`);
+        if (response.ok) {
+            const data = await response.json();
+            firebaseData = data;
+            updateConnectionStatus(true);
+            updateUI(data);
+        } else {
+            updateConnectionStatus(false);
+            console.error('Failed to fetch Firebase data');
+        }
+    } catch (error) {
+        updateConnectionStatus(false);
+        console.error('Firebase connection error:', error);
+    }
+}
+// Update UI with Firebase data
+function updateUI(data) {
+    // Update LED states
+    if (data.Control) {
+        const ledState = data.Control.LED1;
+        if (ledState !== undefined) {
+            updateLEDUI(1, ledState);
+        }
+    }
+    // Update sensor data
+    if (data.cambien && data.cambien.KhuA) {
+        const sensorData = data.cambien.KhuA;
+        updateSensorUI(sensorData);
+    }
+}
+// Update sensor UI
+function updateSensorUI(sensorData) {
+    // Temperature
+    const tempElement = document.getElementById('temperature-value');
+    if (tempElement && sensorData.temperature !== undefined) {
+        tempElement.textContent = sensorData.temperature.toFixed(1);
+        animateValueChange(tempElement);
+    }
+    // Humidity
+    const humidityElement = document.getElementById('humidity-value');
+    if (humidityElement && sensorData.humidity !== undefined) {
+        humidityElement.textContent = sensorData.humidity.toFixed(1);
+        animateValueChange(humidityElement);
+    }
+    // Air Quality Index
+    const aqiElement = document.getElementById('aqi-value');
+    if (aqiElement && sensorData.aqi !== undefined) {
+        aqiElement.textContent = sensorData.aqi.toFixed(1);
+        animateValueChange(aqiElement);
+        // Update AQI color based on value
+        updateAQIColor(aqiElement, sensorData.aqi);
+    }
+    // Gas Sensor
+    const gasElement = document.getElementById('gas-value');
+    if (gasElement && sensorData.gas !== undefined) {
+        gasElement.textContent = sensorData.gas.toFixed(1);
+        animateValueChange(gasElement);
+        // Update gas color based on value
+        updateGasColor(gasElement, sensorData.gas);
+    }
+    // Update chart data
+    updateChartData(sensorData);
+}
+// Update chart with new sensor data
+function updateChartData(sensorData) {
+    const now = new Date();
+    const timeString = now.toLocaleTimeString('vi-VN', {
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+    // Add new data
+    chartData.timestamps.push(timeString);
+    chartData.temperature.push(sensorData.temperature || 0);
+    chartData.humidity.push(sensorData.humidity || 0);
+    chartData.gas.push(sensorData.gas || 0);
+    // Keep only last 10 data points
+    const maxDataPoints = 10;
+    if (chartData.timestamps.length > maxDataPoints) {
+        chartData.timestamps.shift();
+        chartData.temperature.shift();
+        chartData.humidity.shift();
+        chartData.gas.shift();
+    }
+    // Update chart
+    if (sensorChart) {
+        sensorChart.data.labels = chartData.timestamps;
+        sensorChart.data.datasets[0].data = chartData.temperature;
+        sensorChart.data.datasets[1].data = chartData.humidity;
+        sensorChart.data.datasets[2].data = chartData.gas;
+        sensorChart.update('none'); // No animation for smooth updates
+    }
+}
+// Update AQI color based on value
+function updateAQIColor(element, value) {
+    let color = '#00ff00'; // Good (0-50)
+    if (value > 100) {
+        color = '#ff4444'; // Unhealthy (101-150)
+    } else if (value > 50) {
+        color = '#ffaa00'; // Moderate (51-100)
+    }
+    element.style.color = color;
+    element.style.textShadow = `0 0 10px ${color}`;
+}
+// Update Gas color based on value (ppm)
+function updateGasColor(element, value) {
+    let color = '#00ff00'; // Safe (0-30)
+    if (value > 100) {
+        color = '#ff4444'; // Dangerous (>100 ppm)
+    } else if (value > 50) {
+        color = '#ffaa00'; // Warning (51-100 ppm)
+    } else if (value > 30) {
+        color = '#ffdd00'; // Caution (31-50 ppm)
+    }
+    element.style.color = color;
+    element.style.textShadow = `0 0 10px ${color}`;
+}
+// Animate value change
+function animateValueChange(element) {
+    element.style.transform = 'scale(1.1)';
+    element.style.transition = 'transform 0.2s ease';
+    setTimeout(() => {
+        element.style.transform = 'scale(1)';
+    }, 200);
+}
+// Update connection status
+function updateConnectionStatus(isConnected) {
+    const statusElement = document.getElementById('connection-status');
+    const statusIndicator = document.getElementById('status-indicator');
+    if (statusElement && statusIndicator) {
+        if (isConnected) {
+            connectionStatus = true;
+            statusElement.textContent = 'Connected';
+            statusIndicator.className = 'status-indicator status-online';
+        } else {
+            connectionStatus = false;
+            statusElement.textContent = 'Disconnected';
+            statusIndicator.className = 'status-indicator status-offline';
+        }
+    }
+}
+// Show connection error
+function showConnectionError() {
+    console.error('Connection error - retrying...');
+    updateConnectionStatus(false);
+    // Retry connection after 3 seconds
+    setTimeout(() => {
+        fetchFirebaseData();
+    }, 3000);
+}
+// Start time display
+function startTimeDisplay() {
+    updateTimeDisplay(); // Initial update
+    setInterval(updateTimeDisplay, 1000); // Update every second
+}
+// Update time display
+function updateTimeDisplay() {
+    const now = new Date();
+    // Format time (HH:MM:SS)
+    const timeString = now.toLocaleTimeString('vi-VN', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
+    // Format date (DD/MM/YYYY)
+    const dateString = now.toLocaleDateString('vi-VN', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+    // Update display
+    const timeElement = document.getElementById('current-time');
+    const dateElement = document.getElementById('current-date');
+    if (timeElement) {
+        timeElement.textContent = timeString;
+        // Removed animation effect for time
+    }
+    if (dateElement) {
+        dateElement.textContent = dateString;
+    }
+}
+// Utility function to format numbers
+function formatNumber(value, decimals = 1) {
+    return parseFloat(value).toFixed(decimals);
+}
+// Export functions for global access
+window.IoTDashboard = {
+    toggleLED,
+    fetchFirebaseData,
+    updateConnectionStatus
+};

style.css CHANGED Viewed

@@ -1,28 +1,443 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom Styles for IoT Dashboard */
 body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  padding: 0;
 }
+@media (min-width: 1025px) {
+  body {
+    overflow: hidden;
+  }
 }
+@media (max-width: 1024px) {
+  body {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
 }
+.dashboard-container {
+  height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 1rem;
+  padding: 1rem;
+  box-sizing: border-box;
 }
+@media (max-width: 1024px) {
+  .dashboard-container {
+    height: auto;
+    min-height: 100vh;
+    padding: 1rem;
+  }
+}
+.control-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 1.5rem;
+  height: 100%;
+}
+.main-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1.5rem;
+  height: calc(100vh - 200px);
+  align-items: stretch;
+}
+.led-section, .sensor-section, .chart-section {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.led-section > *, .sensor-section > *, .chart-section > * {
+  flex-shrink: 0;
+}
+/* LED section specific - chia đều giữa LED control và Time */
+.led-section {
+  justify-content: space-between;
+}
+.led-section > h2:first-child {
+  flex: 0 0 auto;
+}
+.led-controls {
+  flex: 0 0 auto;
+}
+.time-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+/* Sensor section - panel chiếm toàn bộ chiều cao còn lại */
+.sensor-section > h2:first-child {
+  flex: 0 0 auto;
+}
+.sensor-panel {
+  flex: 1;
+  min-height: 0;
+}
+/* Chart section - panel chiếm toàn bộ chiều cao còn lại */
+.chart-section > h2:first-child {
+  flex: 0 0 auto;
+}
+.chart-panel {
+  flex: 1;
+  min-height: 0;
+}
+.led-controls {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  height: fit-content;
+  width: 100%;
+}
+.led-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  border-radius: 15px;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 1rem;
+  align-items: center;
+}
+.led-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.led-control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.led-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
+  transition: left 0.5s;
+}
+.led-card:hover::before {
+  left: 100%;
+}
+.led-card:hover {
+  transform: translateY(-5px);
+  border-color: rgba(0, 255, 255, 0.6);
+  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
+}
+.led-toggle {
+  width: 80px;
+  height: 40px;
+  background: #333;
+  border-radius: 20px;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid #555;
+}
+.led-toggle.on {
+  background: linear-gradient(45deg, #00ff00, #00cc00);
+  border-color: #00ff00;
+  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+}
+.led-toggle.off {
+  background: linear-gradient(45deg, #ff4444, #cc0000);
+  border-color: #ff4444;
+  box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
+}
+.led-toggle::after {
+  content: '';
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+.led-toggle.on::after {
+  transform: translateX(40px);
+}
+.sensor-panel {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  border-radius: 15px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.chart-panel {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  border-radius: 15px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.chart-panel canvas {
+  max-width: 100%;
+  height: 100% !important;
+  flex: 1;
+  min-height: 0;
+}
+.time-panel {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  border-radius: 15px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+}
+.time-display {
+  display: grid;
+  gap: 1rem;
+}
+.current-time, .current-date {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 1rem;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 255, 255, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+.current-time::before, .current-date::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #00ffff, #0080ff, #00ffff);
+  background-size: 200% 100%;
+  animation: flow 2s linear infinite;
+}
+.time-label, .date-label {
+  font-size: 0.9rem;
+  color: #00ffff;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.time-value, .date-value {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: white;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+  font-family: 'Courier New', monospace;
+}
+.sensor-grid {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1rem;
+  flex: 1;
+  align-content: start;
+}
+.sensor-item {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 1rem;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 255, 255, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+.sensor-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #00ffff, #0080ff, #00ffff);
+  background-size: 200% 100%;
+  animation: flow 2s linear infinite;
+}
+@keyframes flow {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.sensor-label {
+  font-size: 0.9rem;
+  color: #00ffff;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.sensor-value {
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: white;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+}
+.sensor-unit {
+  font-size: 1rem;
+  color: #888;
+  margin-left: 0.5rem;
+}
+.status-indicator {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+  animation: pulse 2s infinite;
+}
+.status-online {
+  background: #00ff00;
+  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+}
+.status-offline {
+  background: #ff4444;
+  box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.connection-status {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  font-size: 0.8rem;
+  color: #00ffff;
+  z-index: 10;
+}
+.loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(0, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #00ffff;
+  animation: spin 1s ease-in-out infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+/* Responsive Design */
+@media (max-width: 1200px) {
+  .main-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    height: auto;
+    min-height: 100vh;
+  }
+  .led-section, .sensor-section, .chart-section {
+    height: auto;
+    max-height: none;
+  }
+  .sensor-panel, .chart-panel {
+    height: auto;
+    max-height: none;
+    min-height: 400px;
+  }
+}
+@media (max-width: 1024px) {
+  .control-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+  }
+  .led-card {
+    grid-template-columns: 1fr 1fr;
+  }
+  .time-display {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (max-width: 768px) {
+  .led-card {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 1.5rem;
+  }
+  .led-info {
+    align-items: center;
+    text-align: center;
+  }
+  .time-display {
+    grid-template-columns: 1fr;
+  }
+  .dashboard-container {
+    padding: 0.5rem;
+  }
 }