359 lines
11 KiB
HTML
359 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Nutrient Calculator | Adam Banega</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--soil: #3a2a1a;
|
||
|
|
--leaf: #4a7c59;
|
||
|
|
--salsa: #d45d38;
|
||
|
|
--concrete: #2d2d2d;
|
||
|
|
--light: #f5f5f0;
|
||
|
|
--regolith: #6b5d4a;
|
||
|
|
}
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
||
|
|
background: linear-gradient(135deg, var(--concrete) 0%, var(--soil) 100%);
|
||
|
|
color: var(--light);
|
||
|
|
margin: 0;
|
||
|
|
padding: 2rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
header {
|
||
|
|
border-bottom: 3px solid var(--salsa);
|
||
|
|
padding-bottom: 1.5rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: var(--salsa);
|
||
|
|
font-size: 2.2rem;
|
||
|
|
margin: 0 0 0.5rem 0;
|
||
|
|
letter-spacing: -0.5px;
|
||
|
|
}
|
||
|
|
.subtitle {
|
||
|
|
color: var(--leaf);
|
||
|
|
font-size: 1.1rem;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
.hero-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 280px;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 12px;
|
||
|
|
margin: 2rem 0;
|
||
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
|
||
|
|
filter: contrast(1.1) saturate(1.15);
|
||
|
|
}
|
||
|
|
.calculator-panel {
|
||
|
|
background: rgba(58, 42, 26, 0.95);
|
||
|
|
border: 2px solid var(--leaf);
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 2rem;
|
||
|
|
margin: 2rem 0;
|
||
|
|
box-shadow: 0 12px 48px rgba(0,0,0,0.7);
|
||
|
|
}
|
||
|
|
.input-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
.input-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
color: var(--salsa);
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
input, select {
|
||
|
|
background: var(--concrete);
|
||
|
|
border: 2px solid var(--regolith);
|
||
|
|
color: var(--light);
|
||
|
|
padding: 0.75rem 1rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 1rem;
|
||
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||
|
|
}
|
||
|
|
input:focus, select:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: var(--salsa);
|
||
|
|
box-shadow: 0 0 12px rgba(212, 93, 56, 0.4);
|
||
|
|
}
|
||
|
|
.btn-calc {
|
||
|
|
background: linear-gradient(135deg, var(--salsa), #b84524);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.btn-calc:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 8px 24px rgba(212, 93, 56, 0.5);
|
||
|
|
}
|
||
|
|
.results {
|
||
|
|
margin-top: 2rem;
|
||
|
|
padding: 1.5rem;
|
||
|
|
background: rgba(74, 124, 89, 0.2);
|
||
|
|
border-left: 4px solid var(--leaf);
|
||
|
|
border-radius: 0 8px 8px 0;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.results.visible {
|
||
|
|
display: block;
|
||
|
|
animation: slideIn 0.4s ease-out;
|
||
|
|
}
|
||
|
|
@keyframes slideIn {
|
||
|
|
from { opacity: 0; transform: translateX(-12px); }
|
||
|
|
to { opacity: 1; transform: translateX(0); }
|
||
|
|
}
|
||
|
|
.result-row {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.75rem 0;
|
||
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
|
|
}
|
||
|
|
.result-row:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
.result-label {
|
||
|
|
color: var(--leaf);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.result-value {
|
||
|
|
color: var(--salsa);
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
.nutrient-bar {
|
||
|
|
height: 8px;
|
||
|
|
background: var(--regolith);
|
||
|
|
border-radius: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.nutrient-fill {
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: width 0.6s ease-out;
|
||
|
|
}
|
||
|
|
.bar-n { background: linear-gradient(90deg, #4CAF50, #8BC34A); }
|
||
|
|
.bar-p { background: linear-gradient(90deg, #FF9800, #FFC107); }
|
||
|
|
.bar-k { background: linear-gradient(90deg, #2196F3, #03A9F4); }
|
||
|
|
.legend {
|
||
|
|
display: flex;
|
||
|
|
gap: 2rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
.legend-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
.dot {
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.context-note {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
opacity: 0.7;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
padding: 1rem;
|
||
|
|
background: rgba(255,255,255,0.05);
|
||
|
|
border-radius: 8px;
|
||
|
|
border-left: 3px solid var(--regolith);
|
||
|
|
}
|
||
|
|
nav.breadcrumbs {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
opacity: 0.6;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
nav.breadcrumbs a {
|
||
|
|
color: var(--leaf);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
nav.breadcrumbs 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>
|
||
|
|
<div class="container">
|
||
|
|
<nav class="breadcrumbs">
|
||
|
|
<a href="index.html">Home</a> → Mars Soil Rhythms → Nutrient Calculator
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>Dome Nutrient Calculator</h1>
|
||
|
|
<p class="subtitle">Grounded in Q2787836 • Scaled from Earth tomatoes to Martian regolith</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<img
|
||
|
|
src="https://images.pexels.com/photos/37861014/pexels-photo-37861014.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||
|
|
alt="Vertical hydroponic lettuce farm indoors"
|
||
|
|
class="hero-image"
|
||
|
|
>
|
||
|
|
|
||
|
|
<div class="calculator-panel">
|
||
|
|
<h2 style="color: var(--salsa); margin-top: 0;">Calculate Your Mix</h2>
|
||
|
|
<p>Enter your crop target and regolith volume. The calculator returns exact N-P-K ratios for hydroponic enrichment.</p>
|
||
|
|
|
||
|
|
<form id="calcForm" onsubmit="event.preventDefault(); calculateNutrients();">
|
||
|
|
<div class="input-grid">
|
||
|
|
<div class="input-group">
|
||
|
|
<label for="cropType">Crop Type</label>
|
||
|
|
<select id="cropType" required>
|
||
|
|
<option value="">Select crop...</option>
|
||
|
|
<option value="tomato">Tomato (Solanum lycopersicum)</option>
|
||
|
|
<option value="lettuce">Lettuce (Lactuca sativa)</option>
|
||
|
|
<option value="wheat">Wheat (Triticum aestivum)</option>
|
||
|
|
<option value="pepper">Pepper (Capsicum annuum)</option>
|
||
|
|
<option value="spinach">Spinach (Spinacia oleracea)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group">
|
||
|
|
<label for="volume">Regolith Volume (m³)</label>
|
||
|
|
<input type="number" id="volume" min="0.1" step="0.1" placeholder="e.g., 2.5" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group">
|
||
|
|
<label for="waterRatio">Water Ratio (L/m³)</label>
|
||
|
|
<input type="number" id="waterRatio" min="10" step="1" value="150" placeholder="Default: 150">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group">
|
||
|
|
<label for="growthStage">Growth Stage</label>
|
||
|
|
<select id="growthStage">
|
||
|
|
<option value="seedling">Seedling</option>
|
||
|
|
<option value="vegetative" selected>Vegetative</option>
|
||
|
|
<option value="flowering">Flowering/Fruiting</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" class="btn-calc">CALCULATE MIX</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="results" class="results">
|
||
|
|
<h3 style="color: var(--leaf); margin-top: 0;">Recommended Enrichment</h3>
|
||
|
|
|
||
|
|
<div class="result-row">
|
||
|
|
<span class="result-label">Nitrogen (N)</span>
|
||
|
|
<span class="result-value" id="nValue">0 ppm</span>
|
||
|
|
</div>
|
||
|
|
<div class="nutrient-bar"><div class="nutrient-fill bar-n" id="nBar" style="width: 0%"></div></div>
|
||
|
|
|
||
|
|
<div class="result-row" style="margin-top: 1rem;">
|
||
|
|
<span class="result-label">Phosphorus (P₂O₅)</span>
|
||
|
|
<span class="result-value" id="pValue">0 ppm</span>
|
||
|
|
</div>
|
||
|
|
<div class="nutrient-bar"><div class="nutrient-fill bar-p" id="pBar" style="width: 0%"></div></div>
|
||
|
|
|
||
|
|
<div class="result-row" style="margin-top: 1rem;">
|
||
|
|
<span class="result-label">Potassium (K₂O)</span>
|
||
|
|
<span class="result-value" id="kValue">0 ppm</span>
|
||
|
|
</div>
|
||
|
|
<div class="nutrient-bar"><div class="nutrient-fill bar-k" id="kBar" style="width: 0%"></div></div>
|
||
|
|
|
||
|
|
<div class="legend">
|
||
|
|
<div class="legend-item"><div class="dot" style="background: #4CAF50;"></div>Nitrogen</div>
|
||
|
|
<div class="legend-item"><div class="dot" style="background: #FF9800;"></div>Phosphorus</div>
|
||
|
|
<div class="legend-item"><div class="dot" style="background: #2196F3;"></div>Potassium</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="context-note">
|
||
|
|
<strong>Engineering Note:</strong> These values scale from USDA crop nutrient profiles to Martian regolith chemistry. Adjust ±5% based on weekly spectrometer readings. Record deviations in your soil ledger.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Macronutrient requirements per crop (ppm in solution at vegetative stage)
|
||
|
|
// Grounded in agronomic research, scaled for hydroponic delivery
|
||
|
|
const CROP_PROFILES = {
|
||
|
|
tomato: {
|
||
|
|
base: { n: 200, p: 60, k: 400 },
|
||
|
|
seedling: { n: 150, p: 40, k: 250 },
|
||
|
|
flowering: { n: 180, p: 80, k: 600 }
|
||
|
|
},
|
||
|
|
lettuce: {
|
||
|
|
base: { n: 150, p: 40, k: 250 },
|
||
|
|
seedling: { n: 100, p: 30, k: 180 },
|
||
|
|
flowering: { n: 140, p: 50, k: 280 }
|
||
|
|
},
|
||
|
|
wheat: {
|
||
|
|
base: { n: 180, p: 50, k: 200 },
|
||
|
|
seedling: { n: 120, p: 35, k: 150 },
|
||
|
|
flowering: { n: 220, p: 70, k: 280 }
|
||
|
|
},
|
||
|
|
pepper: {
|
||
|
|
base: { n: 190, p: 55, k: 380 },
|
||
|
|
seedling: { n: 140, p: 40, k: 240 },
|
||
|
|
flowering: { n: 170, p: 75, k: 550 }
|
||
|
|
},
|
||
|
|
spinach: {
|
||
|
|
base: { n: 160, p: 45, k: 220 },
|
||
|
|
seedling: { n: 110, p: 35, k: 160 },
|
||
|
|
flowering: { n: 150, p: 55, k: 260 }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function calculateNutrients() {
|
||
|
|
const crop = document.getElementById('cropType').value;
|
||
|
|
const volume = parseFloat(document.getElementById('volume').value);
|
||
|
|
const waterRatio = parseFloat(document.getElementById('waterRatio').value);
|
||
|
|
const stage = document.getElementById('growthStage').value;
|
||
|
|
|
||
|
|
if (!crop || isNaN(volume) || volume <= 0) {
|
||
|
|
alert("Por favor, selecciona un cultivo y volumen válido.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const profile = CROP_PROFILES[crop][stage];
|
||
|
|
const totalLiters = volume * waterRatio;
|
||
|
|
|
||
|
|
// Calculate absolute mass needed (mg) then convert to ppm (mg/L)
|
||
|
|
const n_ppm = profile.n;
|
||
|
|
const p_ppm = profile.p;
|
||
|
|
const k_ppm = profile.k;
|
||
|
|
|
||
|
|
// Update displays
|
||
|
|
document.getElementById('nValue').textContent = `${n_ppm} ppm`;
|
||
|
|
document.getElementById('pValue').textContent = `${p_ppm} ppm`;
|
||
|
|
document.getElementById('kValue').textContent = `${k_ppm} ppm`;
|
||
|
|
|
||
|
|
// Animate bars (normalize to max expected value of 600 ppm)
|
||
|
|
setTimeout(() => {
|
||
|
|
document.getElementById('nBar').style.width = `${(n_ppm / 600) * 100}%`;
|
||
|
|
document.getElementById('pBar').style.width = `${(p_ppm / 600) * 100}%`;
|
||
|
|
document.getElementById('kBar').style.width = `${(k_ppm / 600) * 100}%`;
|
||
|
|
}, 50);
|
||
|
|
|
||
|
|
// Show results panel
|
||
|
|
document.getElementById('results').classList.add('visible');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|