|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AirSense CyberDash 3000</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Orbitron:wght@400;600&display=swap" rel="stylesheet"> |
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-900 font-sans"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-12 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-3 space-y-6"> |
|
|
|
|
|
<div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="cpu" class="mr-2"></i> Device Status |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Device ID</p> |
|
|
<p id="deviceId" class="text-lg font-mono">No device connected</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Last Update</p> |
|
|
<p id="lastUpdate" class="text-sm">Waiting for data</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<span class="text-sm text-gray-400">Battery</span> |
|
|
<span id="batteryPercent" class="text-sm">—%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="batteryLevelBar" class="h-2.5 rounded-full bg-gradient-to-r from-green-400 to-blue-500" style="width: 0%"></div> |
|
|
</div> |
|
|
<p id="hoursLeft" class="text-xs text-gray-400 mt-1">— hrs left</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-6"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Status</p> |
|
|
<p id="deviceStatus" class="text-sm">idle</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Alarm</p> |
|
|
<p id="deviceAlarm" class="text-sm">none</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Signal</p> |
|
|
<p id="deviceSignal" class="text-sm">—</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Sample</p> |
|
|
<p id="sampleRate" class="text-sm">—</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2 mt-6"> |
|
|
<button id="alarmToggle" class="flex-1 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white py-2 px-4 rounded-lg transition-all disabled:opacity-50" disabled> |
|
|
Alarm: OFF |
|
|
</button> |
|
|
<button id="testAlarmBtn" class="bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white py-2 px-4 rounded-lg transition-all disabled:opacity-50" disabled> |
|
|
Test |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="alert-triangle" class="mr-2"></i> Status Indicators |
|
|
</h2> |
|
|
<div class="flex justify-between"> |
|
|
<div id="ledGreenWrap" class="text-center cursor-pointer"> |
|
|
<div id="ledGreen" class="led led-green mx-auto"></div> |
|
|
<p class="text-sm mt-2">OK</p> |
|
|
</div> |
|
|
<div id="ledYellowWrap" class="text-center cursor-pointer"> |
|
|
<div id="ledYellow" class="led led-yellow mx-auto"></div> |
|
|
<p class="text-sm mt-2">Warning</p> |
|
|
</div> |
|
|
<div id="ledRedWrap" class="text-center cursor-pointer"> |
|
|
<div id="ledRed" class="led led-red mx-auto"></div> |
|
|
<p class="text-sm mt-2">Critical</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white h-96 overflow-hidden"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="activity" class="mr-2"></i> Event Log |
|
|
</h2> |
|
|
<ul id="eventsList" class="space-y-2 overflow-y-auto h-80 pr-2"> |
|
|
|
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-6 space-y-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div id="gauge-co2" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div> |
|
|
<div id="gauge-co" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div> |
|
|
<div id="gauge-voc" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div> |
|
|
<div id="gauge-smoke" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold flex items-center"> |
|
|
<i data-feather="bar-chart-2" class="mr-2"></i> AQI History |
|
|
</h2> |
|
|
<button id="exportDataBtn" class="text-sm bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded-lg transition-all"> |
|
|
Export Data |
|
|
</button> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="aqiHistoryChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:col-span-3 space-y-6"> |
|
|
|
|
|
<air-quality-card></air-quality-card> |
|
|
|
|
|
|
|
|
<div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="wifi" class="mr-2"></i> Connection |
|
|
</h2> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="text-sm">MQTT Status</span> |
|
|
<span id="connRibbon" class="px-3 py-1 rounded-full text-xs font-medium bg-gray-800">Idle</span> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<label for="deviceSelect" class="block text-sm text-gray-400 mb-2">Select Device</label> |
|
|
<select id="deviceSelect" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="">No device</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="zap" class="mr-2"></i> Quick Actions |
|
|
</h2> |
|
|
<div class="space-y-3"> |
|
|
<button id="testAlarmBtn" class="w-full bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white py-2 px-4 rounded-lg transition-all disabled:opacity-50" disabled> |
|
|
Test Alarm |
|
|
</button> |
|
|
<button class="w-full bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition-all"> |
|
|
Force Refresh |
|
|
</button> |
|
|
<button class="w-full bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition-all"> |
|
|
Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="info" class="mr-2"></i> System Info |
|
|
</h2> |
|
|
<div class="space-y-2 text-sm"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-400">Version</span> |
|
|
<span>v3.0.0</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-400">Last Sync</span> |
|
|
<span>Just now</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-400">Uptime</span> |
|
|
<span>00:12:45</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="fullscreenAlarm" class="fixed inset-0 z-50 flex items-center justify-center hidden" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-70 backdrop-blur-sm"></div> |
|
|
<div class="relative bg-gradient-to-br from-red-900 to-red-800 rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl border border-red-500 border-opacity-50"> |
|
|
<div class="text-center"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="p-3 bg-red-500 bg-opacity-20 rounded-full"> |
|
|
<i data-feather="alert-octagon" class="w-12 h-12 text-red-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h2 id="alarmTitle" class="text-2xl font-bold mb-2">CRITICAL ALERT</h2> |
|
|
<div id="alarmIndicator" class="inline-block px-3 py-1 mb-4 text-sm font-semibold rounded-full bg-red-500 text-white">CRITICAL</div> |
|
|
<p id="alarmDesc" class="text-gray-300 mb-6">Dangerous gas levels detected. Stop or acknowledge to silence the siren.</p> |
|
|
<div class="flex space-x-3 justify-center"> |
|
|
<button id="alarmStop" class="px-6 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition-all">Stop Alarm</button> |
|
|
<button id="alarmAck" class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all">Acknowledge</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
<script src="components/air-quality-card.js"></script> |
|
|
<script src="gauges.js"></script> |
|
|
<script src="app.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); |
|
|
tooltipTriggerList.map(function (tooltipTriggerEl) { |
|
|
return new bootstrap.Tooltip(tooltipTriggerEl); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
