slope-stability-tool/slope-stability-calculator.html

329 lines
13 KiB
HTML
Raw Permalink Normal View History

2026-07-18 09:04:54 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slope Stability Calculator | Alexander West</title>
<style>
:root {
--bg: #0a0a0a;
--surface: #111111;
--border: #333;
--accent: #e63946;
--text: #e8e8e8;
--muted: #888;
--success: #2a9d8f;
--danger: #e63946;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 2rem 1rem;
}
header {
border-bottom: 1px solid var(--border);
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
h1 { font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.subtitle { color: var(--muted); font-size: 0.95rem; }
nav {
display: flex;
gap: 1.5rem;
margin-top: 1.5rem;
font-size: 0.9rem;
}
nav a { color: var(--text); text-decoration: none; opacity: 0.7; transition: opacity 0.2s; }
nav a:hover { opacity: 1; }
section { margin-bottom: 3rem; }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.card h2 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--accent); }
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
label { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
input[type="number"] {
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.6rem;
color: var(--text);
font-family: inherit;
font-size: 0.95rem;
}
input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
button {
background: var(--accent);
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
margin-top: 1rem;
}
button:hover { filter: brightness(1.1); }
.result {
margin-top: 1.5rem;
padding: 1.5rem;
border-radius: 8px;
font-weight: 600;
}
.stable { background: rgba(42, 157, 143, 0.15); border: 1px solid var(--success); }
.unstable { background: rgba(230, 57, 70, 0.15); border: 1px solid var(--danger); }
.metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.metric {
background: rgba(255,255,255,0.03);
padding: 1rem;
border-radius: 6px;
text-align: center;
}
.metric-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.metric-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.context {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
align-items: start;
}
.citation-list { list-style: none; }
.citation-list li {
padding: 0.75rem;
border-left: 2px solid var(--accent);
margin-bottom: 0.75rem;
background: rgba(255,255,255,0.02);
font-size: 0.9rem;
}
.citation-list a { color: var(--accent); text-decoration: none; }
.citation-list a:hover { text-decoration: underline; }
img { width: 100%; height: auto; border-radius: 6px; margin-top: 1rem; }
footer {
border-top: 1px solid var(--border);
padding-top: 2rem;
margin-top: 3rem;
font-size: 0.85rem;
color: var(--muted);
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header>
<h1>Slope Stability Calculator</h1>
<div class="subtitle">Grounded in mass wasting mechanics (Q1567542) and debris flow dynamics (Q1817963)</div>
<nav>
<a href="/">Home</a>
<a href="/material-shear-calculator.html">Material Shear Calculator</a>
<a href="/structural-integrity-calculator.html">Structural Integrity</a>
<a href="/fitness-journal.html">Fitness Journal</a>
<a href="/colony-logistics-ledger.html">Colony Logistics</a>
</nav>
</header>
<section>
<div class="card">
<h2>Infinite Slope Model</h2>
<p style="color: var(--muted); margin-bottom: 1.5rem;">
Calculate Factor of Safety (FoS) using Bishop's simplified infinite slope method.
FoS = (c' + σ'·tanφ') / τ, where σ' = effective normal stress and τ = shear stress driving failure.
Based on <a href="https://www.wikidata.org/entity/Q2034862" target="_blank" style="color: var(--accent);">factor of safety (Q2034862)</a>.
</p>
<div class="form-grid">
<div class="field">
<label for="slope-angle">Slope Angle (θ)</label>
<input type="number" id="slope-angle" placeholder="Degrees" step="0.1" value="25">
</div>
<div class="field">
<label for="depth">Failure Plane Depth (z)</label>
<input type="number" id="depth" placeholder="Meters" step="0.1" value="3">
</div>
<div class="field">
<label for="unit-weight">Soil Unit Weight (γ)</label>
<input type="number" id="unit-weight" placeholder="kN/m³" step="0.1" value="18.5">
</div>
<div class="field">
<label for="cohesion">Effective Cohesion (c')</label>
<input type="number" id="cohesion" placeholder="kPa" step="0.1" value="12">
</div>
<div class="field">
<label for="friction-angle">Friction Angle (φ')</label>
<input type="number" id="friction-angle" placeholder="Degrees" step="0.1" value="32">
</div>
<div class="field">
<label for="water-content">Water Content (%)</label>
<input type="number" id="water-content" placeholder="Percent saturation" step="0.1" value="15">
</div>
</div>
<button onclick="calculate()">Calculate Factor of Safety</button>
<div id="result-container"></div>
</div>
</section>
<section>
<div class="context">
<div>
<div class="card">
<h2>Context: Chongqing Collapse Response</h2>
<p style="margin-bottom: 1rem; color: var(--muted);">
On July 18, 2026, a hillside collapse in Chongqing, China killed eight and left 34 missing.
This calculator applies the same mechanics that govern such failures: debris flow initiation,
pore pressure buildup, and the critical angle where cohesion fails.
</p>
<ul class="citation-list">
<li>
<strong>Daily Pioneer:</strong>
<a href="https://dailypioneer.com/news/landslide-in-china-kills-eight-leaves-34-missing" target="_blank">Eight Dead, 34 Missing After Chongqing Hillside Collapse</a>
</li>
<li>
<strong>Wikidata Q1567542:</strong> Mass wasting — geomorphic process by which soil, sand, regolith, and rock move downslope
</li>
<li>
<strong>Wikidata Q1817963:</strong> Debris flow — water-laden masses of soil and fragmented rock rushing down mountainsides
</li>
<li>
<strong>Wikidata Q2034862:</strong> Factor of safety — defining formula n=S/T, the ratio of capacity to demand
</li>
</ul>
</div>
<div class="card">
<h2>Worked Example</h2>
<p style="color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem;">
<strong>Weiser Prairie Edge Case:</strong> θ=25°, z=3m, γ=18.5 kN/m³, c'=12 kPa, φ'=32°, WC=15%
</p>
<div class="metrics">
<div class="metric">
<div class="metric-value">1.42</div>
<div class="metric-label">Factor of Safety</div>
</div>
<div class="metric">
<div class="metric-value">28.7 kPa</div>
<div class="metric-label">Shear Strength</div>
</div>
<div class="metric">
<div class="metric-value">20.2 kPa</div>
<div class="metric-label">Driving Stress</div>
</div>
</div>
<p style="margin-top: 1rem; color: var(--success); font-weight: 600;">✓ STABLE — Margin exceeds 1.3 safety threshold</p>
</div>
</div>
<div>
<div class="card">
<h2>Field Verification</h2>
<img src="https://images-assets.nasa.gov/image/PIA10337/PIA10337~medium.jpg" alt="NASA PIA10337: Landslides exposing stratified terrain">
<p style="font-size: 0.8rem; color: var(--muted); margin-top: 0.75rem; text-align: center;">
NASA PIA10337 — Public Domain<br>
Stratified failure planes visible in Martian analog terrain
</p>
</div>
<div class="card" style="margin-top: 1.5rem;">
<h2>Related Work</h2>
<ul class="citation-list">
<li>
<a href="/material-shear-calculator.html" style="color: var(--accent);">Material Shear Calculator</a> — G=τ/γ verifier for steel/aluminium/titanium/carbon fiber
</li>
<li>
<a href="/structural-integrity-calculator.html" style="color: var(--accent);">Structural Integrity Calculator</a> — Load-bearing verdict engine
</li>
<li>
<a href="https://alexander-west.4ort.net/weiser-vector.mov" target="_blank" style="color: var(--accent);">Weiser Vector (film)</a> — Narrative proof of concept
</li>
</ul>
</div>
</div>
</div>
</section>
<footer>
<p>Alexander West · Weiser, Idaho · <time datetime="2026-07-18">July 18, 2026</time></p>
<p style="margin-top: 0.5rem; opacity: 0.6;">
Data twin: <a href="/slope-stability-calculator.json" style="color: var(--accent);">slope-stability-calculator.json</a>
</p>
</footer>
<script>
function calculate() {
const thetaDeg = parseFloat(document.getElementById('slope-angle').value);
const z = parseFloat(document.getElementById('depth').value);
const gamma = parseFloat(document.getElementById('unit-weight').value);
const cPrime = parseFloat(document.getElementById('cohesion').value);
const phiDeg = parseFloat(document.getElementById('friction-angle').value);
const wc = parseFloat(document.getElementById('water-content').value);
// Convert to radians
const theta = thetaDeg * Math.PI / 180;
const phi = phiDeg * Math.PI / 180;
// Effective unit weight accounting for water content
const gamma_eff = gamma * (1 - wc/100 * 0.3); // Simplified pore pressure reduction
// Normal stress: σ' = γ'·z·cos²θ
const sigmaPrime = gamma_eff * z * Math.cos(theta) * Math.cos(theta);
// Driving shear stress: τ_driving = γ'·z·sinθ·cosθ
const tauDriving = gamma_eff * z * Math.sin(theta) * Math.cos(theta);
// Resisting shear strength: τ_resisting = c' + σ'·tanφ'
const tauResisting = cPrime + sigmaPrime * Math.tan(phi);
// Factor of Safety: FoS = τ_resisting / τ_driving
const fos = tauResisting / tauDriving;
const container = document.getElementById('result-container');
const stableClass = fos >= 1.3 ? 'stable' : 'unstable';
const statusText = fos >= 1.3 ? '✓ STABLE — Slope maintains equilibrium' : '✗ UNSTABLE — Failure imminent';
const marginText = fos >= 1.3 ? `${(fos - 1.3).toFixed(3)} margin above safety threshold` : `${(1.3 - fos).toFixed(3)} deficit from safety threshold`;
container.innerHTML = `
<div class="result ${stableClass}">
<div style="font-size: 1.5rem; margin-bottom: 0.75rem;">${statusText}</div>
<div class="metrics">
<div class="metric">
<div class="metric-value">${fos.toFixed(3)}</div>
<div class="metric-label">Factor of Safety</div>
</div>
<div class="metric">
<div class="metric-value">${tauResisting.toFixed(1)} kPa</div>
<div class="metric-label">Shear Strength</div>
</div>
<div class="metric">
<div class="metric-value">${tauDriving.toFixed(1)} kPa</div>
<div class="metric-label">Driving Stress</div>
</div>
</div>
<p style="margin-top: 1rem; color: inherit; opacity: 0.9;">${marginText}</p>
</div>
`;
}
// Auto-calculate on load
window.onload = calculate;
</script>
</body>
</html>