72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Fuego – Heat Tracker</title>
|
||
<!-- your other CSS/links here -->
|
||
|
||
<style>
|
||
/* 1) Scrollable container taking full viewport height */
|
||
#scroll-container {
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* 2) WebKit browsers */
|
||
#scroll-container::-webkit-scrollbar {
|
||
width: 12px;
|
||
}
|
||
#scroll-container::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
}
|
||
#scroll-container::-webkit-scrollbar-thumb {
|
||
background-color: #888;
|
||
border-radius: 6px;
|
||
border: 3px solid #f1f1f1;
|
||
}
|
||
#scroll-container::-webkit-scrollbar-thumb:hover {
|
||
background-color: #555;
|
||
}
|
||
|
||
/* 3) Firefox */
|
||
#scroll-container {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #888 #f1f1f1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="scroll-container">
|
||
<!-- Your graph/chart -->
|
||
<div id="graph" style="height: 60vh; padding: 1rem;">
|
||
<!-- e.g. <canvas id="myChart"></canvas> or your chart library mount point -->
|
||
</div>
|
||
|
||
<!-- Your spreadsheet/table -->
|
||
<div id="spreadsheet" style="height: 60vh; padding: 1rem;">
|
||
<!-- e.g. a table or your react/vanilla table component -->
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Date/Time</th>
|
||
<th>Temperature</th>
|
||
<th>Humidity</th>
|
||
<th>Heat Index</th>
|
||
<th>Location</th>
|
||
<th>Direction</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- rows go here -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- your scripts here -->
|
||
<script src="/socket.io.js"></script>
|
||
<script src="main.js"></script>
|
||
</body>
|
||
</html>
|