Borrado de html antiguo
EMOTIONS-HUNTER
6 days ago
parent
943d032056
commit
bb78bda6cf
@ -1,147 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Air Quality Monitor</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* General Styles */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }
|
||||
body { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f5f5; color: #333; height: 100vh; }
|
||||
|
||||
h1 { font-size: 2em; color: #444; margin-bottom: 20px; }
|
||||
|
||||
/* Container for Sensors */
|
||||
.sensor-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Sensor Box */
|
||||
.sensor {
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
width: 180px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.sensor:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
/* Sensor Titles */
|
||||
.sensor-title {
|
||||
font-weight: 400;
|
||||
color: #555;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Sensor Value */
|
||||
.sensor-value {
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
.unit { font-size: 0.8em; color: #777; }
|
||||
|
||||
/* Icon Styles */
|
||||
.sensor-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 8px;
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
/* Keyframes for Smooth Animations */
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Room Air Quality Monitor</h1>
|
||||
<div class="sensor-container">
|
||||
<div id="temperature" class="sensor">
|
||||
<div class="sensor-title">
|
||||
<img src="./images/thermometer-outline.svg" class="sensor-icon" alt="Temperature Icon">
|
||||
Temperature
|
||||
</div>
|
||||
<div class="sensor-value" id="temp-value">--</div>
|
||||
<div class="unit">℃</div>
|
||||
</div>
|
||||
|
||||
<div id="humidity" class="sensor">
|
||||
<div class="sensor-title">
|
||||
<img src="./images/water-outline.svg" class="sensor-icon" alt="Humidity Icon">
|
||||
Humidity
|
||||
</div>
|
||||
<div class="sensor-value" id="humidity-value">--</div>
|
||||
<div class="unit">%</div>
|
||||
</div>
|
||||
|
||||
<div id="co2" class="sensor">
|
||||
<div class="sensor-title">
|
||||
<img src="./images/cloud-outline.svg" class="sensor-icon" alt="CO2 Icon">
|
||||
CO₂
|
||||
</div>
|
||||
<div class="sensor-value" id="co2-value">--</div>
|
||||
<div class="unit">ppm</div>
|
||||
</div>
|
||||
|
||||
<div id="pressure" class="sensor">
|
||||
<div class="sensor-title">
|
||||
<img src="./images/sunny-outline.svg" class="sensor-icon" alt="Pressure Icon">
|
||||
Pressure
|
||||
</div>
|
||||
<div class="sensor-value" id="pressure-value">--</div>
|
||||
<div class="unit">hPa</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function fetchData() {
|
||||
try {
|
||||
const res = await Promise.all([
|
||||
//fetch("./data/BH1750.json"),
|
||||
//fetch("./data/BMP180.json"),
|
||||
fetch("./data/HTU21D.json"),
|
||||
//fetch("./data/MH_Z19.json")
|
||||
]);
|
||||
|
||||
const data = (await Promise.all(res.map(r => r.json()))).reduce((acc, item) => ({ ...acc, ...item }), {});
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch sensor data:", error);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function updateUI(data) {
|
||||
document.getElementById("temp-value").textContent = data.temperature ? data.temperature.toFixed(1) : "--";
|
||||
document.getElementById("humidity-value").textContent = data.humidity ? data.humidity.toFixed(1) : "--";
|
||||
document.getElementById("co2-value").textContent = data.co2 ? data.co2 : "--";
|
||||
document.getElementById("pressure-value").textContent = data.pressure ? data.pressure.toFixed(1) : "--";
|
||||
}
|
||||
|
||||
async function refreshData() {
|
||||
const data = await fetchData();
|
||||
updateUI(data);
|
||||
}
|
||||
|
||||
setInterval(refreshData, 6000); // Refresh every 60 seconds
|
||||
refreshData(); // Initial fetch
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple Sensor Dashboard</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; text-align: center; }
|
||||
.sensor { margin: 10px; padding: 10px; border: 1px solid #ccc; }
|
||||
.sensor-title { font-weight: bold; }
|
||||
.sensor-value { font-size: 2em; color: #333; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>EZO RTD Temperature Monitor</h1>
|
||||
|
||||
<div id="temperature" class="sensor">
|
||||
<div class="sensor-title">Temperature</div>
|
||||
<div class="sensor-value" id="temp-value">--</div>
|
||||
<div id="last-update">--</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await fetch('./data/EZORTD.json');
|
||||
const data = await response.json();
|
||||
|
||||
document.getElementById('temp-value').textContent =
|
||||
data.temperature.toFixed(3) + ' ℃';
|
||||
document.getElementById('last-update').textContent =
|
||||
"Updated: " + new Date().toLocaleTimeString();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(fetchData, 1000);
|
||||
fetchData();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue