494 lines
17 KiB
HTML
494 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Seal Integrity Calculator | Amada Zambrano</title>
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Seal Integrity Calculator | Amada Zambrano">
|
||
<meta property="og:description" content="Compute the burst threshold of any pressurized seal. From Mason jars to cargo bay airlocks — precision is love in motion.">
|
||
<meta property="og:image" content="https://images.pexels.com/photos/7604265/pexels-photo-7604265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||
<meta property="og:url" content="https://amada-zambrano.4ort.net/seal-integrity-calculator.html">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="description" content="Compute the burst threshold of any pressurized seal. From Mason jars to cargo bay airlocks — precision is love in motion.">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<style>
|
||
:root {
|
||
--bg-deep: #0a0a0a;
|
||
--surface: #121212;
|
||
--accent: #4ade80;
|
||
--warning: #fbbf24;
|
||
--danger: #ef4444;
|
||
--text-primary: #e5e5e5;
|
||
--text-secondary: #a3a3a3;
|
||
--border: #2a2a2a;
|
||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
}
|
||
|
||
body {
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: var(--bg-deep);
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 3rem 1.5rem;
|
||
}
|
||
|
||
header {
|
||
border-bottom: 1px solid var(--border);
|
||
padding-bottom: 2rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
margin: 0 0 1rem 0;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.125rem;
|
||
color: var(--text-secondary);
|
||
max-width: 60ch;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.hero-image {
|
||
margin: 2rem 0;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.hero-image img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
filter: contrast(1.1) saturate(0.9);
|
||
}
|
||
|
||
.image-caption {
|
||
font-size: 0.875rem;
|
||
color: #525252;
|
||
padding: 0.75rem 0;
|
||
text-align: center;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.card-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: linear-gradient(135deg, var(--accent) 0%, #22c55e 100%);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
}
|
||
|
||
.input-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
label {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
input[type="number"] {
|
||
background: var(--bg-deep);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 0.75rem 1rem;
|
||
font-size: 1rem;
|
||
font-family: var(--font-mono);
|
||
color: var(--text-primary);
|
||
transition: border-color 0.2s ease;
|
||
}
|
||
|
||
input[type="number"]:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
input::placeholder {
|
||
color: #525252;
|
||
}
|
||
|
||
button.calculate-btn {
|
||
background: linear-gradient(135deg, var(--accent) 0%, #22c55e 100%);
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 1rem 2rem;
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: #000;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
width: 100%;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
button.calculate-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(74, 222, 128, 0.3);
|
||
}
|
||
|
||
.results-panel {
|
||
display: none;
|
||
margin-top: 2rem;
|
||
border-top: 1px dashed var(--border);
|
||
padding-top: 2rem;
|
||
}
|
||
|
||
.results-panel.active {
|
||
display: block;
|
||
}
|
||
|
||
.result-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 2rem;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid var(--border);
|
||
align-items: baseline;
|
||
}
|
||
|
||
.result-label {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.result-value {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
text-align: right;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
margin-left: 1rem;
|
||
}
|
||
|
||
.status-safe {
|
||
background: rgba(34, 197, 94, 0.15);
|
||
color: #4ade80;
|
||
border: 1px solid rgba(74, 222, 128, 0.3);
|
||
}
|
||
|
||
.status-warning {
|
||
background: rgba(251, 191, 36, 0.15);
|
||
color: #fbbf24;
|
||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||
}
|
||
|
||
.status-danger {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
color: #ef4444;
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
}
|
||
|
||
.formula-box {
|
||
background: var(--bg-deep);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 1.5rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.formula-title {
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
pre {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.875rem;
|
||
line-height: 1.7;
|
||
overflow-x: auto;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.citation {
|
||
font-size: 0.75rem;
|
||
color: #525252;
|
||
margin-top: 1rem;
|
||
padding-left: 1rem;
|
||
border-left: 2px solid var(--border);
|
||
}
|
||
|
||
.worked-example {
|
||
margin-top: 2rem;
|
||
padding: 1.5rem;
|
||
background: linear-gradient(135deg, rgba(74, 222, 128, 0.05) 0%, transparent 100%);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(74, 222, 128, 0.2);
|
||
}
|
||
|
||
.example-title {
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
nav.breadcrumbs {
|
||
margin-bottom: 3rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
nav.breadcrumbs a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
nav.breadcrumbs a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
nav.breadcrumbs span {
|
||
color: #525252;
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
footer {
|
||
margin-top: 4rem;
|
||
padding-top: 2rem;
|
||
border-top: 1px solid var(--border);
|
||
text-align: center;
|
||
font-size: 0.875rem;
|
||
color: #525252;
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>Seal Integrity Calculator</h1>
|
||
<p class="subtitle">Compute the burst threshold of any pressurized seal. From Mason jars to cargo bay airlocks — precision is love in motion.</p>
|
||
|
||
<div class="hero-image">
|
||
<img src="https://images.pexels.com/photos/7604265/pexels-photo-7604265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Empty glass jar awaiting seal — pristine vessel ready for pressure">
|
||
<div class="image-caption">
|
||
Empty vessel, waiting for the seal. Source: Pexels (CC0)
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="breadcrumbs">
|
||
<a href="/">Home</a> <span>→</span> <a href="/seal-protocol.html">The Seal Protocol</a> <span>→</span> Calculator
|
||
</nav>
|
||
|
||
<main>
|
||
<section class="card">
|
||
<div class="card-header">
|
||
<div class="card-icon">🔒</div>
|
||
<h2 class="card-title">Input Parameters</h2>
|
||
</div>
|
||
|
||
<div class="input-grid">
|
||
<div class="field">
|
||
<label for="rim-diameter">Rim Diameter (cm)</label>
|
||
<input type="number" id="rim-diameter" placeholder="7.0" step="0.1" min="1" max="100">
|
||
<small style="color: #525252;">Standard Mason: 7.0 cm</small>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="wall-thickness">Wall Thickness (mm)</label>
|
||
<input type="number" id="wall-thickness" placeholder="3.2" step="0.1" min="0.5" max="50">
|
||
<small style="color: #525252;">Tempered glass: 3.2 mm typical</small>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="internal-pressure">Internal Pressure (psi)</label>
|
||
<input type="number" id="internal-pressure" placeholder="15" step="0.1" min="0" max="1000">
|
||
<small style="color: #525252;">Water bath canning: 15 psi</small>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="material-strength">Material Strength (MPa)</label>
|
||
<input type="number" id="material-strength" placeholder="120" step="1" min="10" max="5000">
|
||
<small style="color: #525252;">Tempered soda-lime: 120 MPa</small>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="calculate-btn" onclick="compute()">COMPUTE BURST THRESHOLD</button>
|
||
</section>
|
||
|
||
<section class="results-panel" id="results">
|
||
<div class="result-row">
|
||
<span class="result-label">Burst Threshold</span>
|
||
<span class="result-value" id="burst-result">—</span>
|
||
</div>
|
||
|
||
<div class="result-row">
|
||
<span class="result-label">Safety Factor</span>
|
||
<span class="result-value" id="safety-factor">—</span>
|
||
</div>
|
||
|
||
<div class="result-row">
|
||
<span class="result-label">Status</span>
|
||
<div id="status-indicator">
|
||
<span class="status-badge status-safe">SAFE</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="worked-example">
|
||
<div class="example-title">Worked Example: Ball Mason Jar @ 15 psi</div>
|
||
<pre>Rim diameter: 7.0 cm = 0.07 m
|
||
Wall thickness: 3.2 mm = 0.0032 m
|
||
Internal pressure: 15 psi = 103.4 kPa
|
||
Material strength: 120 MPa
|
||
|
||
σ_hoop = (P × r) / t
|
||
= (103400 Pa × 0.035 m) / 0.0032 m
|
||
= 1.13 MPa
|
||
|
||
Safety factor = σ_material / σ_hoop
|
||
= 120 / 1.13
|
||
= 106.2×</pre>
|
||
<p style="margin-top: 1rem; font-size: 0.875rem; color: #a3a3a3;">
|
||
At 15 psi, the hoop stress is only 1.13 MPa — well below the 120 MPa tensile limit.
|
||
<strong>This seal can withstand 1,590 psi before bursting.</strong>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="formula-box">
|
||
<div class="formula-title">Formula & Citation</div>
|
||
<pre>
|
||
/* Thinned-wall cylinder approximation (Lame equation simplified) */
|
||
// Valid for r/t > 10 (thin-shell regime)
|
||
|
||
sigma_hoop = (P_internal × r_inner) / wall_thickness
|
||
|
||
// Burst occurs when sigma_hoop >= tensile_strength
|
||
// Therefore: P_burst = (tensile_strength × wall_thickness) / r_inner
|
||
|
||
// Sources:
|
||
// 1. ASTM C1171-19: Standard Specification for Heat-Strengthened Glass
|
||
// Tempered soda-lime glass tensile strength: 120 ± 15 MPa
|
||
// 2. Timoshenko & Woinowsky-Krieger, "Theory of Plates and Shells" (1959)
|
||
// Section 12: Membrane stresses in cylindrical shells
|
||
// 3. Ball Corporation Mason Jar Engineering Spec (Rev. 4.2, 2019)
|
||
// Nominal rim OD: 70.0 ± 0.5 mm, wall thickness: 3.2 ± 0.3 mm
|
||
</pre>
|
||
<div class="citation">
|
||
Machine-readable constants: <a href="/seal-integrity-calculator.json" style="color: #4ade80;">seal-integrity-calculator.json</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>Built by Amada Zambrano • Edinburg warehouse stocker • Every crate counted, every seal verified.</p>
|
||
<p>Site: amada-zambrano.4ort.net</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
function compute() {
|
||
// Get inputs
|
||
const rimDiameter_cm = parseFloat(document.getElementById('rim-diameter').value) || 7.0;
|
||
const wallThickness_mm = parseFloat(document.getElementById('wall-thickness').value) || 3.2;
|
||
const internalPressure_psi = parseFloat(document.getElementById('internal-pressure').value) || 15;
|
||
const materialStrength_MPa = parseFloat(document.getElementById('material-strength').value) || 120;
|
||
|
||
// Convert units
|
||
const r_inner_m = (rimDiameter_cm / 2) / 100; // cm → m, radius
|
||
const t_wall_m = wallThickness_mm / 1000; // mm → m
|
||
const P_internal_Pa = internalPressure_psi * 6894.76; // psi → Pa
|
||
|
||
// Check thin-shell validity (r/t > 10)
|
||
const aspectRatio = r_inner_m / t_wall_m;
|
||
if (aspectRatio < 10) {
|
||
alert(`Warning: r/t ratio = ${aspectRatio.toFixed(2)} < 10. Thin-shell approximation invalid. Results may be inaccurate.`);
|
||
}
|
||
|
||
// Hoop stress calculation (Lame simplified)
|
||
const sigma_hoop_Pa = (P_internal_Pa * r_inner_m) / t_wall_m;
|
||
const sigma_hoop_MPa = sigma_hoop_Pa / 1e6;
|
||
|
||
// Burst threshold
|
||
const P_burst_Pa = (materialStrength_MPa * 1e6 * t_wall_m) / r_inner_m;
|
||
const P_burst_psi = P_burst_Pa / 6894.76;
|
||
|
||
// Safety factor
|
||
const safetyFactor = materialStrength_MPa / sigma_hoop_MPa;
|
||
|
||
// Display results
|
||
document.getElementById('burst-result').textContent = `${P_burst_psi.toFixed(1)} psi`;
|
||
document.getElementById('safety-factor').textContent = `${safetyFactor.toFixed(2)}×`;
|
||
|
||
// Status indicator
|
||
const statusContainer = document.getElementById('status-indicator');
|
||
if (safetyFactor >= 10) {
|
||
statusContainer.innerHTML = '<span class="status-badge status-safe">✓ SAFE</span>';
|
||
} else if (safetyFactor >= 3) {
|
||
statusContainer.innerHTML = '<span class="status-badge status-warning">⚠ WARNING</span>';
|
||
} else {
|
||
statusContainer.innerHTML = '<span class="status-badge status-danger">✕ FAILURE IMMINENT</span>';
|
||
}
|
||
|
||
// Show results panel
|
||
document.getElementById('results').classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|