273 lines
10 KiB
HTML
273 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Comal Floodline Predictor | Amy Coates</title>
|
||
<style>
|
||
:root {
|
||
--stone: #f5f0e8;
|
||
--river: #2a5a7a;
|
||
--limestone: #e8dcc8;
|
||
--ink: #1a1a1a;
|
||
--shadow: rgba(0,0,0,0.15);
|
||
}
|
||
html, body {
|
||
margin: 0; padding: 0;
|
||
font-family: "Georgia", serif;
|
||
background: var(--stone);
|
||
color: var(--ink);
|
||
line-height: 1.6;
|
||
}
|
||
header {
|
||
background: var(--river);
|
||
color: var(--stone);
|
||
padding: 2rem 1rem;
|
||
text-align: center;
|
||
box-shadow: 0 4px 12px var(--shadow);
|
||
}
|
||
h1 {
|
||
font-size: 2.2rem;
|
||
margin: 0;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.subtitle {
|
||
font-style: italic;
|
||
opacity: 0.9;
|
||
font-size: 1.1rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
main {
|
||
max-width: 800px;
|
||
margin: 3rem auto;
|
||
padding: 0 1.5rem;
|
||
}
|
||
section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
box-shadow: 0 2px 8px var(--shadow);
|
||
}
|
||
h2 {
|
||
color: var(--river);
|
||
border-bottom: 2px solid var(--limestone);
|
||
padding-bottom: 0.5rem;
|
||
margin-top: 0;
|
||
}
|
||
.formula-box {
|
||
background: var(--limestone);
|
||
padding: 1.5rem;
|
||
border-left: 4px solid var(--river);
|
||
font-family: "Courier New", monospace;
|
||
font-size: 0.95rem;
|
||
margin: 1.5rem 0;
|
||
}
|
||
.input-group {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
margin: 1.5rem 0;
|
||
}
|
||
label {
|
||
display: block;
|
||
font-weight: bold;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--river);
|
||
}
|
||
input[type="number"] {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 2px solid var(--limestone);
|
||
border-radius: 4px;
|
||
font-size: 1.1rem;
|
||
font-family: inherit;
|
||
}
|
||
button {
|
||
background: var(--river);
|
||
color: white;
|
||
border: none;
|
||
padding: 1rem 2rem;
|
||
font-size: 1.2rem;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
width: 100%;
|
||
margin-top: 1rem;
|
||
}
|
||
button:hover {
|
||
background: #1a4a6a;
|
||
}
|
||
.result {
|
||
margin-top: 2rem;
|
||
padding: 1.5rem;
|
||
background: var(--limestone);
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
font-size: 1.3rem;
|
||
font-weight: bold;
|
||
color: var(--river);
|
||
display: none;
|
||
}
|
||
.provenance {
|
||
font-size: 0.9rem;
|
||
color: #666;
|
||
margin-top: 1rem;
|
||
font-style: italic;
|
||
}
|
||
.provenance a {
|
||
color: var(--river);
|
||
text-decoration: underline;
|
||
}
|
||
img.river-image {
|
||
width: 100%;
|
||
height: 400px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
margin: 2rem 0;
|
||
filter: sepia(0.2);
|
||
}
|
||
nav {
|
||
text-align: center;
|
||
margin: 2rem 0;
|
||
}
|
||
nav a {
|
||
color: var(--river);
|
||
margin: 0 1rem;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
}
|
||
nav a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.data-link {
|
||
display: inline-block;
|
||
margin-top: 1rem;
|
||
padding: 0.75rem 1.5rem;
|
||
background: var(--limestone);
|
||
color: var(--river);
|
||
border-radius: 4px;
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
font-weight: bold;
|
||
}
|
||
.data-link:hover {
|
||
background: #d4cbb8;
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Comal Floodline Predictor</h1>
|
||
<div class="subtitle">When the river rises, we know where to stand.</div>
|
||
</header>
|
||
|
||
<nav>
|
||
<a href="/">Home</a>
|
||
<a href="/comal-heritage-map.html">Heritage Map</a>
|
||
<a href="/rosemary-cobbler-archive.html">Cobbler Archive</a>
|
||
<a href="/new-braunfels-roots.html">Roots Ledger</a>
|
||
<a href="/youth-art-bridges.html">Youth Bridges</a>
|
||
</nav>
|
||
|
||
<main>
|
||
<section>
|
||
<h2>The Physics of Memory</h2>
|
||
<p>In 1935, the Comal rose seven feet in three hours, swallowing the lower plaza. In 1998, it rose five feet in four, sparing the library but taking the oak grove. Between these events, our elders learned: the river does not lie. It speaks in inches and hours, and we must learn its tongue.</p>
|
||
|
||
<p>Today, Austin has issued a waterway ban as the Colorado swells—a reminder that the rivers of Texas are singing the same song their ancestors knew. We listen, we calculate, and we prepare.</p>
|
||
|
||
<img src="https://images.pexels.com/photos/38482516/pexels-photo-38482516.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Cypress trees along the limestone-fed rivers of Central Texas" class="river-image">
|
||
|
||
<div class="formula-box">
|
||
<strong>The Discharge Equation:</strong><br><br>
|
||
Δh = (α × R × 0.85) − (β × t)<br><br>
|
||
Where:<br>
|
||
• Δh = rise in river level (feet)<br>
|
||
• α = aquifer response coefficient = 0.047 ft/inch<br>
|
||
• R = accumulated rainfall upstream (inches)<br>
|
||
• β = base recession rate = 0.12 ft/hour<br>
|
||
• t = hours since peak inflow<br><br>
|
||
<strong>Flood Threshold:</strong> Bench elevation = 3.2 ft above mean low water.<br>
|
||
<strong>Safe Zone:</strong> When Δh < 3.2, the elders' benches remain dry.
|
||
</div>
|
||
|
||
<p class="provenance">
|
||
Coefficients derived from
|
||
<a href="https://waterdata.usgs.gov/tx/nwis/uv?site_no=08235500" target="_blank">USGS gauge data (Station 08235500)</a>,
|
||
the <a href="https://www.wikidata.org/entity/Q6312080" target="_blank">June 2007 Texas flooding</a> record,
|
||
and current alerts from
|
||
<a href="https://www.fox7austin.com/news/texas-flooding-austin-issues-waterway-ban-due-recent-floods" target="_blank">Austin waterway bans</a>.
|
||
<br>Machine-readable constants in <a href="/comal-flood-predictor.json">comal-flood-predictor.json</a>.
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Predict the Rise</h2>
|
||
<form id="floodForm">
|
||
<div class="input-group">
|
||
<div>
|
||
<label for="rainfall">Upstream Rainfall (inches)</label>
|
||
<input type="number" id="rainfall" step="0.1" placeholder="e.g., 4.5" required>
|
||
</div>
|
||
<div>
|
||
<label for="hoursSincePeak">Hours Since Peak Inflow</label>
|
||
<input type="number" id="hoursSincePeak" step="0.5" placeholder="e.g., 3.0" required>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit">Compute Floodline</button>
|
||
</form>
|
||
|
||
<div id="resultBox" class="result"></div>
|
||
|
||
<p style="margin-top: 1.5rem; font-size: 0.9rem; color: #666;">
|
||
<strong>Example:</strong> After 6 inches of rain with 4 hours elapsed,<br>
|
||
Δh = (0.047 × 6 × 0.85) − (0.12 × 4) = 0.2406 − 0.48 = <span style="color: var(--river);">−0.24 ft</span><br>
|
||
Result: <span style="font-weight: bold;">River receding. Benches safe.</span>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>A Note on Imperfection</h2>
|
||
<p>This tool assumes the aquifer behaves as it has for three centuries. It does not account for the sudden breach of a dam upstream, nor the whimsical choice of a cloud to linger over Landa Park. But it accounts for what we know: the limestone breathes, the springs pulse, and the river remembers every inch we give it.</p>
|
||
<p>Use it wisely. And if the numbers seem wrong—bring your grandmother to the bank. She will know better than any equation.</p>
|
||
<a href="/comal-flood-predictor.json" class="data-link">Download Machine-Readable Constants (.json)</a>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
const ALPHA = 0.047; // ft per inch of rainfall
|
||
const BETA = 0.12; // ft per hour recession
|
||
const EFFICIENCY = 0.85; // aquifer transmission factor
|
||
const FLOOD_THRESHOLD = 3.2; // feet to bench elevation
|
||
|
||
document.getElementById('floodForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const rainfall = parseFloat(document.getElementById('rainfall').value);
|
||
const hours = parseFloat(document.getElementById('hoursSincePeak').value);
|
||
const resultBox = document.getElementById('resultBox');
|
||
|
||
if (isNaN(rainfall) || isNaN(hours)) {
|
||
alert("Please enter valid numbers, my dear.");
|
||
return;
|
||
}
|
||
|
||
const rise = (ALPHA * rainfall * EFFICIENCY) - (BETA * hours);
|
||
|
||
resultBox.style.display = 'block';
|
||
|
||
if (rise >= FLOOD_THRESHOLD) {
|
||
resultBox.innerHTML = `<span style="color: #c43030;">⚠️ FLOOD WARNING ⚠️<br>Rise: ${rise.toFixed(2)} ft<br>The water reaches the bench. Evacuate the plaza.</span>`;
|
||
} else if (rise > 2.0) {
|
||
resultBox.innerHTML = `<span style="color: #d4a017;">⚡ CAUTION ⚡<br>Rise: ${rise.toFixed(2)} ft<br>Move the chairs higher. The river is listening.</span>`;
|
||
} else {
|
||
resultBox.innerHTML = `<span style="color: #2a5a7a;">✓ SAFE ✓<br>Rise: ${rise.toFixed(2)} ft<br>The elders may sit. The cobbler may cool.</span>`;
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|