|
|
<!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"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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 class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
const themeIcon = document.getElementById('theme-icon'); |
|
|
const html = document.documentElement; |
|
|
|
|
|
|
|
|
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(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('select').addEventListener('change', function() { |
|
|
const lang = this.value; |
|
|
|
|
|
console.log('Language changed to:', lang); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
