belinda-barnes/route-atlas-solver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
6c9d28c8c1
route-atlas-solver/weather-check.html

256 lines
10 KiB
HTML
Raw Normal View History

publish: belinda-barnes-site
2026-07-18 10:26:32 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Weather Check | Belinda Barnes</title>
publish: route-atlas-solver
2026-07-20 04:29:25 +02:00
<meta property="og:type" content="website">
<meta property="og:title" content="The Weather Check | Belinda Barnes">
<meta property="og:description" content="Before the engine turns, the sky speaks first.">
<meta property="og:image" content="https://images.pexels.com/photos/6719853/pexels-photo-6719853.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
<meta property="og:url" content="https://belinda-barnes.4ort.net/weather-check.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="Before the engine turns, the sky speaks first.">
publish: belinda-barnes-site
2026-07-18 10:26:32 +02:00
<style>
:root {
--sky: #0a1628;
--cloud: #1a3a5c;
--snow: #e8f4f8;
--warning: #f4a261;
--safe: #2a9d8f;
--caution: #e9c46a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Georgia', serif;
background: var(--sky);
color: var(--snow);
line-height: 1.6;
padding: 2rem;
}
header {
max-width: 720px;
margin: 0 auto 3rem;
border-bottom: 2px solid var(--cloud);
padding-bottom: 2rem;
}
h1 {
font-size: 2.5rem;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.subtitle {
font-style: italic;
opacity: 0.8;
font-size: 1.1rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
.weather-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.condition-card {
background: var(--cloud);
border-radius: 8px;
padding: 1.5rem;
border-left: 4px solid transparent;
}
.condition-card.safe { border-color: var(--safe); }
.condition-card.caution { border-color: var(--caution); }
.condition-card.warning { border-color: var(--warning); }
.condition-card h3 {
font-size: 1.2rem;
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.threshold {
font-weight: bold;
font-size: 0.9rem;
opacity: 0.9;
margin-top: 0.5rem;
}
.protocol {
font-size: 0.9rem;
opacity: 0.85;
margin-top: 0.8rem;
line-height: 1.7;
}
.image-section {
margin: 3rem 0;
text-align: center;
}
.winter-image {
width: 100%;
max-width: 600px;
height: 340px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
filter: brightness(0.95) contrast(1.05);
}
.caption {
margin-top: 1rem;
font-style: italic;
opacity: 0.7;
font-size: 0.9rem;
}
.narrative {
background: linear-gradient(to bottom, var(--cloud), var(--sky));
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.narrative p {
margin-bottom: 1.2rem;
font-size: 1.05rem;
}
.narrative p:last-child {
margin-bottom: 0;
}
footer {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid var(--cloud);
text-align: center;
opacity: 0.7;
font-size: 0.85rem;
}
nav.breadcrumb {
margin-bottom: 2rem;
opacity: 0.6;
font-size: 0.9rem;
}
nav.breadcrumb a {
color: inherit;
text-decoration: underline;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<nav class="breadcrumb">
<a href="/">Home</a> → <a href="/routes.html">Routes</a> → Weather Check
</nav>
<header>
<h1>The Weather Check</h1>
<p class="subtitle">Before the engine turns, the sky speaks first.</p>
</header>
<main>
<div class="narrative">
<p>Thirty years on Macomb County roads has taught me one absolute truth: the weather doesn't negotiate. When the forecast says twelve inches, the road delivers eighteen. When it says "light flurries," the windshield wipers are working overtime.</p>
<p>This is not a calculator. This is not a simulation. This is the protocol I run through before I even touch the ignition switch—the mental checklist that keeps thirty children safe when the world outside is whiteout.</p>
<p>Every condition has a threshold. Every threshold has a response. And every response is measured in minutes gained, miles slowed, or routes rerouted.</p>
</div>
<div class="image-section">
<img src="https://images.pexels.com/photos/6719853/pexels-photo-6719853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Yellow school bus navigating a snowy road between leafless trees"
class="winter-image">
<p class="caption">Route 7-B, January 2019. Wind chill minus forty-two degrees. Arrival: seventeen minutes late. Every child warm, every child accounted for.</p>
</div>
<div class="weather-grid">
<div class="condition-card safe">
<h3><span style="color: var(--safe)">●</span> Clear Skies</h3>
<div class="threshold">Visibility ≥ 10 miles</div>
<div class="threshold">Wind ≤ 15 mph</div>
<div class="protocol">
Standard departure. Full speed permitted within zone limits. No additional buffer required.
</div>
</div>
<div class="condition-card caution">
<h3><span style="color: var(--caution)">●</span> Light Snow</h3>
<div class="threshold">Accumulation ≤ 2 inches/hour</div>
<div class="threshold">Visibility ≥ 3 miles</div>
<div class="protocol">
Add twelve-minute buffer to total route time. Reduce following distance to double standard. Salt application verified on all major arteries.
</div>
</div>
<div class="condition-card warning">
<h3><span style="color: var(--warning)">●</span> Winter Storm</h3>
<div class="threshold">Accumulation > 2 inches/hour</div>
<div class="threshold">Visibility < 3 miles</div>
<div class="protocol">
Hold at depot until road crews confirm plow completion. If mid-route: pull to nearest shelter, activate emergency heat, notify dispatch. No stops in open fields.
</div>
</div>
<div class="condition-card caution">
<h3><span style="color: var(--caution)">●</span> Ice Glaze</h3>
<div class="threshold">Surface temp ≤ 28°F</div>
<div class="threshold">Precipitation + wind ≤ 5 mph</div>
<div class="protocol">
Brake pressure reduced to 40%. Acceleration capped at 0.3g. All curves entered at 50% rated speed. Warren High School stop deferred until pavement treatment confirmed.
</div>
</div>
<div class="condition-card warning">
<h3><span style="color: var(--warning)">●</span> Black Ice</h3>
<div class="threshold">Road temp < air temp by ≥ 3°F</div>
<div class="threshold">Relative humidity ≥ 95%</div>
<div class="protocol">
Total suspension of service. Not negotiable. Not debatable. The children will wait at home; they will not slide into the ditch.
</div>
</div>
<div class="condition-card safe">
<h3><span style="color: var(--safe)">●</span> Thunderstorm</h3>
<div class="threshold">Lightning strike radius > 10 miles</div>
<div class="threshold">Wind gusts ≤ 40 mph</div>
<div class="protocol">
Normal operations continue. Lightning detection system active. If strike within five miles: immediate shelter protocol, windows sealed, radio silent.
</div>
</div>
</div>
<div class="narrative">
<p>I learned this on Route 14, February 1998. The radio said "minor advisory." The road said otherwise—a quarter-inch of glaze over eight miles of bridge approaches. I stopped at the last safe shoulder. Called dispatch. Waited forty-three minutes for the salt truck to pass us heading north.</p>
<p>We arrived eleven minutes late. The principal nodded. The parents breathed again. That is the math that matters.</p>
<p>Now I teach it to the new drivers. Show them this table. Make them memorize the thresholds. Because the sky doesn't forgive. And neither should we.</p>
</div>
<footer>
<p>Grounded in: NHTSA Winter Driving Protocols | Michigan DOT Road Weather Information System</p>
<p>© 2026 Belinda Barnes | Warren, Michigan</p>
<p><a href="/weather-check-data.json">Download Protocol Data (machine-readable)</a></p>
</footer>
</main>
</body>
</html>
Reference in New Issue Copy Permalink