534 lines
19 KiB
HTML
534 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Houston Dawn Run Fuel Calculator | Bhartiben Patel</title>
|
||
<style>
|
||
:root {
|
||
--houston-dusk: #2B1B17;
|
||
--runner-gray: #4A4A4A;
|
||
--calorie-gold: #D4AF37;
|
||
--humidity-blue: #6B9AC4;
|
||
--paper-white: #F5F5F0;
|
||
--ink-black: #2C2C2C;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Georgia', serif;
|
||
background: linear-gradient(180deg, var(--houston-dusk) 0%, var(--runner-gray) 40%, var(--paper-white) 100%);
|
||
color: var(--ink-black);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
header {
|
||
background: transparent;
|
||
padding: 4rem 2rem;
|
||
text-align: center;
|
||
border-bottom: 3px double var(--calorie-gold);
|
||
position: relative;
|
||
}
|
||
|
||
/* Hero image background */
|
||
header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-image: url('https://images.pexels.com/photos/35174415/pexels-photo-35174415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
|
||
background-position: center;
|
||
background-size: cover;
|
||
opacity: 0.25;
|
||
mix-blend-mode: multiply;
|
||
z-index: 0;
|
||
}
|
||
|
||
header > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 3.5rem;
|
||
color: var(--paper-white);
|
||
margin-bottom: 1rem;
|
||
text-shadow: 3px 3px 12px rgba(0,0,0,0.9);
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.4rem;
|
||
color: var(--humidity-blue);
|
||
font-style: italic;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
|
||
}
|
||
|
||
main {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 4rem 2rem;
|
||
}
|
||
|
||
.theory-section {
|
||
background: var(--paper-white);
|
||
padding: 3rem;
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 40px rgba(0,0,0,0.2);
|
||
margin-bottom: 4rem;
|
||
border: 2px solid var(--runner-gray);
|
||
}
|
||
|
||
.theory-section h2 {
|
||
font-size: 2.2rem;
|
||
color: var(--houston-dusk);
|
||
margin-bottom: 1.5rem;
|
||
border-bottom: 2px solid var(--calorie-gold);
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.theory-section p {
|
||
font-size: 1.15rem;
|
||
margin-bottom: 1.2rem;
|
||
color: #3A2A22;
|
||
}
|
||
|
||
.hero-image {
|
||
width: 100%;
|
||
height: 400px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
margin: 2rem 0;
|
||
border: 3px solid var(--calorie-gold);
|
||
box-shadow: 0 6px 30px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.caption {
|
||
text-align: center;
|
||
font-size: 1rem;
|
||
color: #6B5A4A;
|
||
font-style: italic;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.formula-box {
|
||
background: linear-gradient(135deg, var(--houston-dusk), var(--runner-gray));
|
||
color: var(--paper-white);
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
margin: 2rem 0;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 1.3rem;
|
||
text-align: center;
|
||
border: 3px solid var(--calorie-gold);
|
||
}
|
||
|
||
.calculator-container {
|
||
background: var(--paper-white);
|
||
padding: 3rem;
|
||
border-radius: 15px;
|
||
box-shadow: 0 12px 50px rgba(0,0,0,0.3);
|
||
border: 3px double var(--humidity-blue);
|
||
}
|
||
|
||
.calculator-header {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.calculator-header h2 {
|
||
font-size: 2.5rem;
|
||
color: var(--houston-dusk);
|
||
}
|
||
|
||
.input-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 2rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.input-group {
|
||
background: linear-gradient(135deg, #F8F5F0, #EFE8DD);
|
||
padding: 2rem;
|
||
border-radius: 10px;
|
||
border: 2px solid var(--runner-gray);
|
||
}
|
||
|
||
.input-group label {
|
||
display: block;
|
||
font-size: 1.2rem;
|
||
color: var(--houston-dusk);
|
||
margin-bottom: 0.8rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.input-group input, .input-group select {
|
||
width: 100%;
|
||
padding: 0.9rem;
|
||
font-size: 1.1rem;
|
||
border: 2px solid var(--humidity-blue);
|
||
border-radius: 6px;
|
||
background: white;
|
||
color: var(--ink-black);
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.input-group input:focus, .input-group select:focus {
|
||
outline: none;
|
||
border-color: var(--calorie-gold);
|
||
box-shadow: 0 0 12px rgba(212,175,55,0.4);
|
||
}
|
||
|
||
.hint {
|
||
font-size: 0.9rem;
|
||
color: #6B5A4A;
|
||
margin-top: 0.5rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
.calculate-btn {
|
||
display: block;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
margin: 3rem auto;
|
||
padding: 1.2rem 3rem;
|
||
font-size: 1.4rem;
|
||
font-weight: bold;
|
||
color: white;
|
||
background: linear-gradient(135deg, var(--houston-dusk), var(--runner-gray));
|
||
border: 3px solid var(--calorie-gold);
|
||
border-radius: 50px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.calculate-btn:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 10px 30px rgba(212,175,55,0.5);
|
||
}
|
||
|
||
.results-panel {
|
||
background: linear-gradient(135deg, var(--humidity-blue), #4A7CA8);
|
||
color: white;
|
||
padding: 3rem;
|
||
border-radius: 12px;
|
||
margin-top: 2rem;
|
||
display: none;
|
||
border: 4px solid var(--calorie-gold);
|
||
animation: slideIn 0.6s ease-out;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.results-panel.active {
|
||
display: block;
|
||
}
|
||
|
||
.results-panel h3 {
|
||
font-size: 2.2rem;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
border-bottom: 2px solid var(--calorie-gold);
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
.result-row {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 2rem;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
background: rgba(255,255,255,0.15);
|
||
border-radius: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.result-label {
|
||
font-size: 1.3rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.result-value {
|
||
font-size: 1.6rem;
|
||
font-family: 'Courier New', monospace;
|
||
color: var(--calorie-gold);
|
||
text-align: right;
|
||
}
|
||
|
||
.citation-note {
|
||
background: var(--paper-white);
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
margin-top: 3rem;
|
||
border-left: 6px solid var(--calorie-gold);
|
||
font-size: 1rem;
|
||
color: #5A4A42;
|
||
}
|
||
|
||
.citation-note strong {
|
||
color: var(--houston-dusk);
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 4rem 2rem;
|
||
color: var(--paper-white);
|
||
font-style: italic;
|
||
}
|
||
|
||
footer a {
|
||
color: var(--calorie-gold);
|
||
text-decoration: none;
|
||
}
|
||
|
||
footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.hero-image {
|
||
height: 250px;
|
||
}
|
||
|
||
.theory-section, .calculator-container {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.result-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.result-value {
|
||
text-align: left;
|
||
}
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Houston Dawn Run Fuel Calculator</h1>
|
||
<div class="subtitle">
|
||
Compute your pre-dawn caloric budget using Houston-specific humidity coefficients and ACSM metabolic equivalents
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="theory-section">
|
||
<h2>The Mathematics of Morning Hunger</h2>
|
||
|
||
<img src="https://images.pexels.com/photos/35174415/pexels-photo-35174415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||
alt="Runner silhouette at sunrise with palm trees reflected in water"
|
||
class="hero-image">
|
||
<div class="caption">
|
||
Dawn in Houston: where the Gulf's humidity meets the runner's calculus
|
||
</div>
|
||
|
||
<p style="margin-top: 2rem;">
|
||
Every runner knows the arithmetic of hunger: distance × intensity × body mass equals fuel required. But Houston demands a fourth variable — the humidity multiplier that turns a comfortable 7:00 AM run into a furnace test.
|
||
</p>
|
||
<p>
|
||
This calculator applies the <strong>ACSM Compendium of Physical Activities</strong> metabolic equivalents (METs) for running, adjusted for Houston's seasonal humidity profile. Unlike generic calorie counters, this model accounts for the evaporative cooling penalty you pay when the Gulf air hangs heavy at 85% relative humidity.
|
||
</p>
|
||
|
||
<div class="formula-box">
|
||
E = m × d × v(p) × H(s)<br><br>
|
||
Where:<br>
|
||
E = Energy expenditure (kcal)<br>
|
||
m = Body mass (kg)<br>
|
||
d = Distance (km)<br>
|
||
v(p) = Pace-dependent velocity coefficient (METs/min)<br>
|
||
H(s) = Seasonal humidity factor (0.92–1.18)
|
||
</div>
|
||
|
||
<p>
|
||
<strong>Grounded in:</strong> Running (Q111207191) • Metabolic Equivalent (Q1924756) • Climate of Houston (Q5133550) • Physical Activity (Q747883)
|
||
</p>
|
||
</section>
|
||
|
||
<section class="calculator-container">
|
||
<div class="calculator-header">
|
||
<h2>Compute Your Fuel Budget</h2>
|
||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #6B5A4A;">
|
||
Enter your parameters. The output prescribes grams of carbohydrate to ingest 90 minutes before departure.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="input-grid">
|
||
<div class="input-group">
|
||
<label for="bodyMass">Body Mass (kg)</label>
|
||
<input type="number" id="bodyMass" placeholder="e.g., 68" step="0.1" min="30" max="200">
|
||
<div class="hint">Your actual weight, not goal weight</div>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="distance">Distance (km)</label>
|
||
<input type="number" id="distance" placeholder="e.g., 12" step="0.1" min="1" max="100">
|
||
<div class="hint">Today's planned mileage</div>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="pace">Target Pace (min/km)</label>
|
||
<input type="number" id="pace" placeholder="e.g., 5.5" step="0.1" min="2.5" max="12">
|
||
<div class="hint">Slower pace = lower MET coefficient</div>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="season">Season (Humidity Factor)</label>
|
||
<select id="season">
|
||
<option value="0.92">January (H=0.92, dry)</option>
|
||
<option value="0.98">March (H=0.98, mild)</option>
|
||
<option value="1.08" selected>July (H=1.08, peak)</option>
|
||
<option value="1.18">August (H=1.18, maximum)</option>
|
||
<option value="1.02">November (H=1.02, cooling)</option>
|
||
</select>
|
||
<div class="hint">Houston's humidity penalty varies ±16%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="calculate-btn" onclick="computeFuel()">COMPUTE PRE-RUN FUEL</button>
|
||
|
||
<div class="results-panel" id="resultsPanel">
|
||
<h3>Your Dawn Prescription</h3>
|
||
|
||
<div class="result-row">
|
||
<span class="result-label">Total Energy Expenditure</span>
|
||
<span class="result-value" id="totalEnergy">0 kcal</span>
|
||
</div>
|
||
|
||
<div class="result-row">
|
||
<span class="result-label">Pre-Run Carbohydrates</span>
|
||
<span class="result-value" id="carbGrams">0 g</span>
|
||
</div>
|
||
|
||
<div class="result-row">
|
||
<span class="result-label">Equivalent Food Mass</span>
|
||
<span class="result-value" id="foodMass">0 g rice/oats</span>
|
||
</div>
|
||
|
||
<div class="result-row">
|
||
<span class="result-label">Hydration Buffer (+20%)</span>
|
||
<span class="result-value" id="hydrationBuffer">0 ml</span>
|
||
</div>
|
||
|
||
<div class="citation-note" style="margin-top: 2rem; background: rgba(255,255,255,0.2); color: white;">
|
||
<strong>Worked Example:</strong> 68 kg runner, 12 km at 5.5 min/km in July (H=1.08):<br>
|
||
Base MET = 13.3 for 11 km/h running (ACSM Compendium code 07-01-04)<br>
|
||
Duration = 12 km ÷ 11 km/h = 1.09 hr<br>
|
||
E = 68 × 13.3 × 1.09 × 1.08 = <strong>1,058 kcal</strong><br>
|
||
Pre-run carbs (40% of E) = <strong>106 g CHO</strong> ≈ 265 g cooked brown rice
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>Bhartiben Patel | Houston, Texas | Built for runners who refuse to guess</p>
|
||
<p style="margin-top: 1rem; font-size: 0.9rem;">
|
||
<a href="index.html">← Return to Homepage</a>
|
||
</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// ACSM Compendium running METs (approximated from codes 07-01-XX series)
|
||
// Pace (min/km) → Speed (km/h) → MET value
|
||
const paceToMET = function(minPerKm) {
|
||
const kmPerHour = 60 / minPerKm;
|
||
// Interpolated from ACSM running MET table
|
||
// 8 km/h (7.5 min/km) = 8.3 METs
|
||
// 10 km/h (6 min/km) = 9.8 METs
|
||
// 12 km/h (5 min/km) = 11.8 METs
|
||
// 14 km/h (4.3 min/km) = 14.0 METs
|
||
if (kmPerHour <= 8) return 8.3;
|
||
if (kmPerHour <= 10) return 8.3 + (kmPerHour - 8) * (9.8 - 8.3) / 2;
|
||
if (kmPerHour <= 12) return 9.8 + (kmPerHour - 10) * (11.8 - 9.8) / 2;
|
||
if (kmPerHour <= 14) return 11.8 + (kmPerHour - 12) * (14.0 - 11.8) / 2;
|
||
return 14.0 + (kmPerHour - 14) * 1.1; // extrapolation
|
||
};
|
||
|
||
function computeFuel() {
|
||
const m = parseFloat(document.getElementById('bodyMass').value);
|
||
const d = parseFloat(document.getElementById('distance').value);
|
||
const pace = parseFloat(document.getElementById('pace').value);
|
||
const H = parseFloat(document.getElementById('season').value);
|
||
|
||
if (!m || !d || !pace || !H) {
|
||
alert("All fields required. Check your inputs.");
|
||
return;
|
||
}
|
||
|
||
// Calculate duration in hours
|
||
const kmPerHour = 60 / pace;
|
||
const durationHours = d / kmPerHour;
|
||
|
||
// Get MET value for this pace
|
||
const metValue = paceToMET(pace);
|
||
|
||
// Total energy: E = m × MET × duration × H
|
||
const totalEnergy = m * metValue * durationHours * H;
|
||
|
||
// Pre-run carbohydrates: 40% of total, converted to grams (4 kcal/g)
|
||
const carbGrams = Math.round((totalEnergy * 0.40) / 4);
|
||
|
||
// Equivalent food mass (cooked rice/oats ~40% carb by weight)
|
||
const foodMass = Math.round(carbGrams / 0.40);
|
||
|
||
// Hydration buffer: 20% of energy in ml (roughly 1 ml per kcal × 0.2)
|
||
const hydrationBuffer = Math.round(totalEnergy * 0.2);
|
||
|
||
// Display results
|
||
document.getElementById('totalEnergy').textContent = totalEnergy.toFixed(0) + ' kcal';
|
||
document.getElementById('carbGrams').textContent = carbGrams + ' g';
|
||
document.getElementById('foodMass').textContent = foodMass + ' g rice/oats';
|
||
document.getElementById('hydrationBuffer').textContent = hydrationBuffer + ' ml';
|
||
|
||
document.getElementById('resultsPanel').classList.add('active');
|
||
|
||
// Scroll to results
|
||
setTimeout(() => {
|
||
document.getElementById('resultsPanel').scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'center'
|
||
});
|
||
}, 100);
|
||
}
|
||
|
||
// Auto-trigger calculation on demo values
|
||
window.addEventListener('load', () => {
|
||
document.getElementById('bodyMass').value = 68;
|
||
document.getElementById('distance').value = 12;
|
||
document.getElementById('pace').value = 5.5;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|