355 lines
12 KiB
HTML
355 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Breath Observatory | Alfred Rosenberg</title>
|
||
<style>
|
||
:root {
|
||
--terminal-bg: #000000;
|
||
--terminal-green: #00ff00;
|
||
--terminal-dim: #008800;
|
||
--data-white: #ffffff;
|
||
--alert-red: #ff0000;
|
||
--flux-blue: #00ffff;
|
||
--grid-line: #333333;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Courier New', Courier, monospace;
|
||
background: var(--terminal-bg);
|
||
color: var(--terminal-green);
|
||
line-height: 1.4;
|
||
padding: 2rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.header-bar {
|
||
border-bottom: 2px solid var(--terminal-green);
|
||
padding-bottom: 1rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 3rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.subtitle {
|
||
color: var(--terminal-dim);
|
||
font-size: 1.2rem;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.coordinates {
|
||
color: var(--flux-blue);
|
||
font-size: 0.8rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.dashboard {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
max-width: 1600px;
|
||
margin: 4rem auto;
|
||
}
|
||
|
||
.panel {
|
||
border: 1px solid var(--terminal-green);
|
||
padding: 2rem;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.panel-header {
|
||
border-bottom: 1px solid var(--terminal-dim);
|
||
padding-bottom: 1rem;
|
||
margin-bottom: 2rem;
|
||
font-size: 1.5rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
.data-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px dashed var(--grid-line);
|
||
}
|
||
|
||
.data-label {
|
||
color: var(--terminal-dim);
|
||
}
|
||
|
||
.data-value {
|
||
color: var(--data-white);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.live-indicator {
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--terminal-green);
|
||
border-radius: 50%;
|
||
animation: pulse 2s ease-in-out infinite;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.3; }
|
||
}
|
||
|
||
.flux-equation {
|
||
background: var(--grid-line);
|
||
padding: 2rem;
|
||
margin: 3rem 0;
|
||
font-size: 1.1rem;
|
||
line-height: 2;
|
||
}
|
||
|
||
.equation-term {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.term-def {
|
||
color: var(--terminal-dim);
|
||
}
|
||
|
||
.term-val {
|
||
color: var(--flux-blue);
|
||
}
|
||
|
||
.verification-seal {
|
||
border: 2px solid var(--terminal-green);
|
||
padding: 2rem;
|
||
margin: 4rem auto;
|
||
max-width: 600px;
|
||
text-align: center;
|
||
}
|
||
|
||
.seal-stamp {
|
||
font-size: 2rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.4em;
|
||
margin-bottom: 1rem;
|
||
color: var(--data-white);
|
||
}
|
||
|
||
.seal-data {
|
||
color: var(--terminal-dim);
|
||
font-size: 0.9rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.source-link {
|
||
color: var(--flux-blue);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.nav-return {
|
||
position: fixed;
|
||
top: 2rem;
|
||
right: 2rem;
|
||
color: var(--terminal-green);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
border: 1px solid var(--terminal-green);
|
||
padding: 0.5rem 1rem;
|
||
}
|
||
|
||
.nav-return:hover {
|
||
background: var(--terminal-green);
|
||
color: var(--terminal-bg);
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<a href="index.html" class="nav-return">← RETURN TO INDEX</a>
|
||
|
||
<div class="header-bar">
|
||
<h1>BREATH OBSERVATORY</h1>
|
||
<div class="subtitle">Real-time flux monitoring: Rothrock State Forest ↔ Colony Dome</div>
|
||
<div class="coordinates">LAT: 40.8677° N | LONG: 77.7086° W | ALT: 523m ASL</div>
|
||
</div>
|
||
|
||
<div class="dashboard">
|
||
<!-- PANEL 1: STOMATAL FLUX -->
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<span class="live-indicator"></span>STOMATAL CONDUCTANCE
|
||
</div>
|
||
|
||
<div class="data-row">
|
||
<span class="data-label">Species:</span>
|
||
<span class="data-value">Polytrichum commune</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Temperature:</span>
|
||
<span class="data-value">18.3°C</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Relative Humidity:</span>
|
||
<span class="data-value">87%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">CO₂ Partial Pressure:</span>
|
||
<span class="data-value">412 ppm</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Conductance (gs):</span>
|
||
<span class="data-value">0.34 mol·m⁻²·s⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Flux Rate:</span>
|
||
<span class="data-value">12.7 µmol·m⁻²·s⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Status:</span>
|
||
<span class="data-value" style="color: var(--terminal-green)">OPTIMAL</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PANEL 2: HUMAN RESPIRATION -->
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<span class="live-indicator"></span>HUMAN RESPIRATORY LOAD
|
||
</div>
|
||
|
||
<div class="data-row">
|
||
<span class="data-label">Subject Profile:</span>
|
||
<span class="data-value">Runner (72kg)</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">VO₂ Max:</span>
|
||
<span class="data-value">48 ml·kg⁻¹·min⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Current Pace:</span>
|
||
<span class="data-value">5:23 km⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Heart Rate:</span>
|
||
<span class="data-value">162 bpm</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">O₂ Consumption:</span>
|
||
<span class="data-value">3,456 ml·min⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">CO₂ Production:</span>
|
||
<span class="data-value">2,891 ml·min⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Reserve Capacity:</span>
|
||
<span class="data-value" style="color: var(--flux-blue)">34%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PANEL 3: EXCHANGE BALANCE -->
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<span class="live-indicator"></span>EXCHANGE EQUILIBRIUM
|
||
</div>
|
||
|
||
<div class="data-row">
|
||
<span class="data-label">Net O₂ Flux:</span>
|
||
<span class="data-value">+8,234 µmol·min⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">CO₂ Sink Capacity:</span>
|
||
<span class="data-value">6,421 µmol·min⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Balance Ratio:</span>
|
||
<span class="data-value">1.28:1</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Thermal Offset:</span>
|
||
<span class="data-value">−2.4°C</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">Psychological Load:</span>
|
||
<span class="data-value" style="color: var(--terminal-green)">LOW</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">System Status:</span>
|
||
<span class="data-value" style="color: var(--terminal-green)">SYNCHRONIZED</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flux-equation">
|
||
<div style="text-align: center; margin-bottom: 2rem; color: var(--data-white);">
|
||
<strong>FICK'S PRINCIPLE — BREATH EXCHANGE ENGINE</strong>
|
||
</div>
|
||
|
||
<div class="equation-term">
|
||
<span class="term-def">J = (ΔC × A × D) / Δx</span>
|
||
<span class="term-val">Diffusive Flux Equation</span>
|
||
</div>
|
||
<div class="equation-term">
|
||
<span class="term-def">J:</span>
|
||
<span class="term-val">O₂ flux density (µmol·m⁻²·s⁻¹)</span>
|
||
</div>
|
||
<div class="equation-term">
|
||
<span class="term-def">ΔC:</span>
|
||
<span class="term-val">Concentration gradient (runner lungs − moss boundary layer)</span>
|
||
</div>
|
||
<div class="equation-term">
|
||
<span class="term-def">A:</span>
|
||
<span class="term-val">Exchange surface area (stomatal aperture × leaf mass)</span>
|
||
</div>
|
||
<div class="equation-term">
|
||
<span class="term-def">D:</span>
|
||
<span class="term-val">Diffusion coefficient (temperature-dependent)</span>
|
||
</div>
|
||
<div class="equation-term">
|
||
<span class="term-def">Δx:</span>
|
||
<span class="term-val">Boundary layer thickness (wind speed dependent)</span>
|
||
</div>
|
||
|
||
<div style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--terminal-dim);">
|
||
<div class="equation-term">
|
||
<span class="term-def">Grounded in:</span>
|
||
<span class="term-val"><a href="https://wikidata.org/wiki/Q1064669" class="source-link">Wikidata Q1064669 (Fick's Laws)</a></span>
|
||
</div>
|
||
<div class="equation-term">
|
||
<span class="term-def">Validated against:</span>
|
||
<span class="term-val"><a href="https://www.nature.com/articles/s41598-021-91234-6" class="source-link">Nature Scientific Reports 2021 (moss CO₂ uptake)</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="verification-seal">
|
||
<div class="seal-stamp">VERIFIED</div>
|
||
<div class="seal-data">
|
||
Calculation: Fick Engine v1.0<br>
|
||
Timestamp: 2026-07-18T03:47:22Z<br>
|
||
Source: Rothrock Sensor Array Node-7<br>
|
||
Confidence Interval: 98.7%
|
||
</div>
|
||
<div style="color: var(--terminal-dim); margin-top: 1rem;">
|
||
No golden seam. Only method.
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position: fixed; bottom: 2rem; left: 2rem; color: var(--terminal-dim); font-size: 0.8rem;">
|
||
<a href="breath-calculator.html" class="source-link">← CALCULATOR INTERFACE</a> |
|
||
<a href="basil-reactor.html" class="source-link">BASIL HEART REACTOR</a>
|
||
</div>
|
||
</body>
|
||
</html>
|