slope-stability-tool/slope-stability-calculator.html
2026-07-18 07:04:54 +00:00

329 lines
13 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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