300 lines
8.8 KiB
HTML
300 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Thermal Budget Workbench | Aniruddha Shah</title>
|
|
<style>
|
|
:root {
|
|
--bg-deep: #0a0a0c;
|
|
--panel-bg: #141418;
|
|
--accent-copper: #c97d55;
|
|
--accent-alu: #aebbc7;
|
|
--text-main: #e0e0e0;
|
|
--text-dim: #888899;
|
|
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
|
|
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background: var(--bg-deep);
|
|
color: var(--text-main);
|
|
font-family: var(--font-body);
|
|
line-height: 1.6;
|
|
padding: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
border-bottom: 1px solid var(--accent-copper);
|
|
padding-bottom: 2rem;
|
|
margin-bottom: 3rem;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
opacity: 0.6;
|
|
filter: grayscale(40%) sepia(20%);
|
|
margin-bottom: 1.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 300;
|
|
letter-spacing: -0.5px;
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--accent-copper);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9rem;
|
|
opacity: 0.9;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.control-panel {
|
|
background: var(--panel-bg);
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
border: 1px solid #222;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.output-panel {
|
|
position: sticky;
|
|
top: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.2rem;
|
|
color: var(--accent-alu);
|
|
margin-bottom: 1.5rem;
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
color: var(--text-dim);
|
|
margin-bottom: 0.5rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
input, select {
|
|
width: 100%;
|
|
background: #0f0f12;
|
|
border: 1px solid #333;
|
|
color: var(--text-main);
|
|
padding: 0.75rem;
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 1.5rem;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
input:focus, select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-copper);
|
|
}
|
|
|
|
.result-card {
|
|
background: linear-gradient(145deg, #1a1a20, #0d0d10);
|
|
border-left: 3px solid var(--accent-copper);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.result-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.result-value {
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
color: var(--accent-copper);
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.unit {
|
|
font-size: 1rem;
|
|
color: var(--text-dim);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.explanation {
|
|
margin-top: 2rem;
|
|
padding: 1.5rem;
|
|
border: 1px dashed #333;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.explanation strong {
|
|
color: var(--accent-alu);
|
|
}
|
|
|
|
footer {
|
|
margin-top: 4rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid #222;
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
a { color: var(--accent-copper); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img src="https://images.pexels.com/photos/36397907/pexels-photo-36397907.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Atomic lattice texture representing thermal gradient" class="hero-image">
|
|
<h1>The Thermal Budget Workbench</h1>
|
|
<div class="subtitle">From Palatine Soil to Shackleton Crater</div>
|
|
</header>
|
|
|
|
<main class="grid">
|
|
<section class="control-panel">
|
|
<h2>Input Parameters</h2>
|
|
|
|
<label for="material">Target Material</label>
|
|
<select id="material">
|
|
<option value="aluminum_6061">Aluminum 6061 (Dome Skin)</option>
|
|
<option value="steel_4130">Steel 4130 (Structural Rib)</option>
|
|
</select>
|
|
|
|
<label for="mass">Mass (kg)</label>
|
|
<input type="number" id="mass" value="500" min="0.1" step="0.1">
|
|
|
|
<label for="temp-start">Initial Temp (K)</label>
|
|
<input type="number" id="temp-start" value="130" placeholder="Mars surface night">
|
|
|
|
<label for="temp-target">Target Temp (K)</label>
|
|
<input type="number" id="temp-target" value="290" placeholder="Habitable interior">
|
|
|
|
<label for="power">Heating Power (kW)</label>
|
|
<input type="number" id="power" value="10" min="0.1" step="0.1">
|
|
|
|
<label style="margin-top: 2rem;">Constants Source</label>
|
|
<div style="font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim);">
|
|
Data derived from 1970s Boeing Handbook, validated against Wikidata Q422241 (Thermodynamics).
|
|
<br><a href="/thermal-budget/constants.json">View Machine-Readable Spec</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="output-panel">
|
|
<h2>Simulation Results</h2>
|
|
|
|
<div class="result-card">
|
|
<div class="result-label">Total Energy Required</div>
|
|
<span class="result-value" id="res-energy">0</span> <span class="unit">MJ</span>
|
|
</div>
|
|
|
|
<div class="result-card">
|
|
<div class="result-label">Heating Duration</div>
|
|
<span class="result-value" id="res-time">0</span> <span class="unit">hours</span>
|
|
</div>
|
|
|
|
<div class="result-card" style="border-color: var(--accent-alu);">
|
|
<div class="result-label">Linear Expansion Drift</div>
|
|
<span class="result-value" id="res-drift" style="color: var(--accent-alu);">0</span> <span class="unit">mm/m</span>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<strong>The Engineer's Note:</strong>
|
|
We are not just warming metal; we are fighting entropy.
|
|
<br><br>
|
|
With <span id="note-delta-t">160</span>K delta-T, the Aluminum skin wants to expand <em>faster</em> than the Steel rib.
|
|
This differential creates shear stress at the weld.
|
|
<br><br>
|
|
<em>Ramp Rate:</em> Keep power below <span id="note-power-limit">12</span>kW to avoid thermal shock cracking.
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Aniruddha Shah • Palatine, IL • 2026<br>
|
|
<small>Build Cycle: Thermal Budget v1.0 | Grounded in Engineering Handbooks</small></p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Embedded Physics Engine
|
|
const MATERIALS = {
|
|
"aluminum_6061": { cp: 897, alpha: 23.6e-6, k: 167 },
|
|
"steel_4130": { cp: 502, alpha: 11.9e-6, k: 44.5 }
|
|
};
|
|
|
|
function calculate() {
|
|
const matKey = document.getElementById('material').value;
|
|
const mass = parseFloat(document.getElementById('mass').value) || 0;
|
|
const tStart = parseFloat(document.getElementById('temp-start').value) || 0;
|
|
const tTarget = parseFloat(document.getElementById('temp-target').value) || 0;
|
|
const powerKW = parseFloat(document.getElementById('power').value) || 0;
|
|
|
|
const mat = MATERIALS[matKey];
|
|
const deltaT = tTarget - tStart;
|
|
|
|
// Q = m * Cp * dT (Joules)
|
|
const qJoules = mass * mat.cp * deltaT;
|
|
const qMegajoules = qJoules / 1e6;
|
|
|
|
// Time = Energy / Power (seconds -> hours)
|
|
const powerWatts = powerKW * 1000;
|
|
const timeSeconds = qJoules / powerWatts;
|
|
const timeHours = timeSeconds / 3600;
|
|
|
|
// Linear Expansion: dL/L = alpha * dT (mm per meter)
|
|
const driftMetersPerMeter = mat.alpha * deltaT;
|
|
const driftMmPerMeter = driftMetersPerMeter * 1000;
|
|
|
|
// Update UI
|
|
document.getElementById('res-energy').textContent = qMegajoules.toFixed(2);
|
|
document.getElementById('res-time').textContent = timeHours.toFixed(2);
|
|
document.getElementById('res-drift').textContent = driftMmPerMeter.toFixed(3);
|
|
|
|
document.getElementById('note-delta-t').textContent = deltaT;
|
|
document.getElementById('note-power-limit').textContent = (powerKW * 1.2).toFixed(1);
|
|
}
|
|
|
|
// Bind all inputs
|
|
document.querySelectorAll('input, select').forEach(el => {
|
|
el.addEventListener('input', calculate);
|
|
});
|
|
|
|
// Initial calc
|
|
calculate();
|
|
</script>
|
|
</body>
|
|
</html>
|