<!DOCTYPE html>
<html>
<head>
<title>Environmental Data Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box {
width: 30%;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.satellite-photo {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h3>Gauge 1</h3>
<canvas id="gauge1"></canvas>
<p>Data: (Sample) 80%</p>
</div>
<div class="box">
<h3>Gauge 2</h3>
<canvas id="gauge2"></canvas>
<p>Data: (Sample) 65%</p>
</div>
<div class="box">
<h3>Gauge 3</h3>
<canvas id="gauge3"></canvas>
<p>Data: (Sample) 92%</p>
</div>
<div class="box">
<h3>Chart 1</h3>
<canvas id="chart1"></canvas>
</div>
<div class="box">
<h3>Chart 2</h3>
<canvas id="chart2"></canvas>
</div>
<div class="box satellite-photo">
<h3>Satellite Photo</h3>
<img src="https://www.nasa.gov/sites/default/files/thumbnails/image/iss064e069594.jpg" alt="Satellite Image">
</div>
</div>
<script>
const gauge1 = document.getElementById('gauge1').getContext('2d');
new Chart(gauge1, {
type: 'doughnut',
data: {
labels: ['Value', 'Remaining'],
datasets: [{
data: [80, 20],
backgroundColor: ['#4CAF50', '#F44336'],
borderWidth: 0
}]
},
options: {
cutoutPercentage: 70
}
});
const chart1 = document.getElementById('chart1').getContext('2d');
new Chart(chart1, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Environmental Data',
data: [12, 19, 3, 5, 2, 3, 7, 6, 8, 4, 1, 10],
borderColor: 'blue',
borderWidth: 1
}]
}
});
</script>
</body>
</html>
