<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soil Moisture Sensor Display</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
padding: 20px;
}
h1 { color: #333; }
#moisture-value { font-size: 2.5em; font-weight: bold; color: #007bff; margin: 20px 0; }
button { margin: 10px; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }
#chart-container { margin: 20px auto; width: 90%; max-width: 600px; }
</style>
</head>
<body>
<h1>Soil Moisture Sensor</h1>
<p>Current Moisture Level:</p>
<div id="moisture-value">--</div>
<button id="connect-btn">Connect to Arduino</button>
<button id="download-btn">Download CSV</button>
<div id="chart-container">
<canvas id="moisture-chart"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>