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>
|