389 lines
15 KiB
HTML
389 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Material Shear Calculator | Alexander West</title>
|
||
<link rel="stylesheet" href="/styles.css">
|
||
<style>
|
||
:root {
|
||
--prairie-black: #0a0f0d;
|
||
--seam-gold: #ffd700;
|
||
--vein-bronze: #cd7f32;
|
||
--caliper-silver: #c0c0c0;
|
||
--horizon-grey: #1a1f1d;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body {
|
||
background: var(--prairie-black);
|
||
color: var(--caliper-silver);
|
||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
line-height: 1.6;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 4vmin 2vmin;
|
||
}
|
||
header {
|
||
border-bottom: 2px solid var(--seam-gold);
|
||
padding-bottom: 2vmin;
|
||
margin-bottom: 4vmin;
|
||
}
|
||
h1 {
|
||
font-size: clamp(1.5rem, 4vmin, 5rem);
|
||
color: var(--seam-gold);
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
.subtitle {
|
||
font-size: clamp(0.8rem, 2vmin, 2rem);
|
||
color: var(--vein-bronze);
|
||
margin-top: 1vmin;
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4vmin;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.grid { grid-template-columns: 1fr; }
|
||
}
|
||
.panel {
|
||
background: linear-gradient(135deg, var(--horizon-grey), transparent);
|
||
border: 1px solid var(--vein-bronze);
|
||
padding: 3vmin;
|
||
margin-bottom: 2vmin;
|
||
}
|
||
.panel h2 {
|
||
color: var(--seam-gold);
|
||
font-size: clamp(1rem, 2.5vmin, 3rem);
|
||
margin-bottom: 2vmin;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
label {
|
||
display: block;
|
||
color: var(--seam-gold);
|
||
font-size: 0.9rem;
|
||
margin-bottom: 0.5vmin;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
input, select {
|
||
width: 100%;
|
||
padding: 1vmin;
|
||
background: var(--prairie-black);
|
||
border: 1px solid var(--vein-bronze);
|
||
color: var(--caliper-silver);
|
||
font-size: 1rem;
|
||
margin-bottom: 2vmin;
|
||
}
|
||
input:focus, select:focus {
|
||
outline: none;
|
||
border-color: var(--seam-gold);
|
||
box-shadow: 0 0 1vmin var(--seam-gold);
|
||
}
|
||
button {
|
||
background: var(--seam-gold);
|
||
color: var(--prairie-black);
|
||
border: none;
|
||
padding: 2vmin 4vmin;
|
||
font-size: 1.2rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
button:hover {
|
||
background: var(--vein-bronze);
|
||
transform: translateY(-2px);
|
||
}
|
||
.result {
|
||
margin-top: 2vmin;
|
||
padding: 2vmin;
|
||
border: 2px solid var(--seam-gold);
|
||
background: rgba(255, 215, 0, 0.05);
|
||
}
|
||
.result-value {
|
||
font-size: clamp(2rem, 6vmin, 8rem);
|
||
color: var(--seam-gold);
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
.result-label {
|
||
text-align: center;
|
||
color: var(--vein-bronze);
|
||
font-size: 1.2rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-top: 1vmin;
|
||
}
|
||
.verdict {
|
||
margin-top: 1vmin;
|
||
padding: 1vmin;
|
||
text-align: center;
|
||
font-size: 1.5rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.verdict.pass {
|
||
color: var(--seam-gold);
|
||
border: 1px solid var(--seam-gold);
|
||
}
|
||
.verdict.fail {
|
||
color: #ff4444;
|
||
border: 1px solid #ff4444;
|
||
}
|
||
.formula {
|
||
background: var(--horizon-grey);
|
||
padding: 2vmin;
|
||
border-left: 3px solid var(--seam-gold);
|
||
margin: 2vmin 0;
|
||
font-family: monospace;
|
||
font-size: 1.1rem;
|
||
}
|
||
.citation {
|
||
color: var(--vein-bronze);
|
||
font-size: 0.9rem;
|
||
margin-top: 1vmin;
|
||
}
|
||
.citation a {
|
||
color: var(--seam-gold);
|
||
text-decoration: none;
|
||
}
|
||
.citation a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.image-container {
|
||
margin: 2vmin 0;
|
||
border: 1px solid var(--vein-bronze);
|
||
}
|
||
.image-container img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
.caption {
|
||
padding: 1vmin;
|
||
background: var(--horizon-grey);
|
||
color: var(--vein-bronze);
|
||
font-size: 0.8rem;
|
||
text-align: center;
|
||
}
|
||
.data-table {
|
||
width: 100%;
|
||
margin: 2vmin 0;
|
||
border-collapse: collapse;
|
||
}
|
||
.data-table th, .data-table td {
|
||
border: 1px solid var(--vein-bronze);
|
||
padding: 1vmin;
|
||
text-align: left;
|
||
}
|
||
.data-table th {
|
||
background: var(--horizon-grey);
|
||
color: var(--seam-gold);
|
||
}
|
||
.work-example {
|
||
background: rgba(205, 127, 50, 0.1);
|
||
padding: 2vmin;
|
||
border-left: 3px solid var(--seam-gold);
|
||
margin: 2vmin 0;
|
||
}
|
||
.nav-back {
|
||
display: inline-block;
|
||
margin-bottom: 2vmin;
|
||
color: var(--vein-bronze);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.nav-back:hover {
|
||
color: var(--seam-gold);
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<a href="/" class="nav-back">← Back to Colony Hub</a>
|
||
|
||
<header>
|
||
<h1>MATERIAL SHEAR CALCULATOR</h1>
|
||
<p class="subtitle">WEISER MUNICIPAL SPECS × ALUMINIUM SHEAR MODULUS × DOMES</p>
|
||
</header>
|
||
|
||
<div class="grid">
|
||
<section class="left-col">
|
||
<div class="panel">
|
||
<h2>ENGINEERING CONTEXT</h2>
|
||
<p style="margin-bottom: 2vmin;">
|
||
When the shear modulus holds, the whole structure breathes easy. Every beam we place in the dome must pass this calculation before the crane lifts.
|
||
</p>
|
||
|
||
<div class="formula">
|
||
G = τ / γ<br><br>
|
||
Where:<br>
|
||
• G = Shear Modulus (Pa)<br>
|
||
• τ = Shear Stress (Pa)<br>
|
||
• γ = Shear Strain (dimensionless)
|
||
</div>
|
||
|
||
<p class="citation">
|
||
Source: <a href="https://4ort.xyz/entity/shear-modulus" target="_blank">ISO 80000-4:2019 Quantities and Units — Part 4: Mechanics</a> | Wikidata Q461466
|
||
</p>
|
||
|
||
<div class="image-container">
|
||
<img src="https://images-assets.nasa.gov/image/SSC-20090409-S00509/SSC-20090409-S00509~medium.jpg" alt="NASA A-3 steel work completion showing structural integrity verification">
|
||
<div class="caption">NASA A-3 Steel Work Complete — Public Domain via NASA Image Archive</div>
|
||
</div>
|
||
|
||
<p style="font-size: 0.9rem; color: var(--vein-bronze);">
|
||
This is the moment the weld locks. The caliper reads true. The prairie horizon becomes the dome's spine.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<h2>MATERIAL LIBRARY</h2>
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Material</th>
|
||
<th>Shear Modulus (GPa)</th>
|
||
<th>Density (kg/m³)</th>
|
||
<th>Use Case</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Structural Steel</td>
|
||
<td>79.3</td>
|
||
<td>7850</td>
|
||
<td>Primary Framework</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Aluminium Alloy 6061</td>
|
||
<td>26.0</td>
|
||
<td>2700</td>
|
||
<td>Lightweight Panels</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Titanium Grade 5</td>
|
||
<td>41.4</td>
|
||
<td>4430</td>
|
||
<td>Critical Joints</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Carbon Fiber Composite</td>
|
||
<td>30-50</td>
|
||
<td>1600</td>
|
||
<td>High-Stress Membrane</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="citation">
|
||
Material constants sourced from: <a href="https://4ort.xyz/entity/aluminium" target="_blank">Wikidata Q663 (Aluminium)</a>, <a href="https://4ort.xyz/entity/steel" target="_blank">Wikidata Q11427 (Steel)</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="right-col">
|
||
<div class="panel">
|
||
<h2>SHEAR VERIFICATION ENGINE</h2>
|
||
|
||
<label for="material">Select Material</label>
|
||
<select id="material">
|
||
<option value="79.3">Structural Steel (79.3 GPa)</option>
|
||
<option value="26.0">Aluminium 6061 (26.0 GPa)</option>
|
||
<option value="41.4">Titanium Grade 5 (41.4 GPa)</option>
|
||
<option value="40.0">Carbon Fiber Composite (~40 GPa)</option>
|
||
</select>
|
||
|
||
<label for="stress">Applied Shear Stress (MPa)</label>
|
||
<input type="number" id="stress" placeholder="Enter stress value..." step="0.1">
|
||
|
||
<label for="strain">Measured Shear Strain (×10⁻⁶)</label>
|
||
<input type="number" id="strain" placeholder="Enter microstrain..." step="0.01">
|
||
|
||
<button onclick="calculate()">CALCULATE INTEGRITY</button>
|
||
|
||
<div id="results" class="result" style="display:none;">
|
||
<div class="result-value" id="calc-result"></div>
|
||
<div class="result-label">Calculated Shear Modulus (GPa)</div>
|
||
<div class="verdict" id="verdict"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<h2>WORKED EXAMPLE</h2>
|
||
<div class="work-example">
|
||
<p><strong>Weiser Dome Beam Test:</strong></p>
|
||
<ul style="margin-left: 2vmin; margin-top: 1vmin;">
|
||
<li>Material: Structural Steel (Gₑₓₚₑcₜₑd = 79.3 GPa)</li>
|
||
<li>Applied Shear Stress: 450 MPa</li>
|
||
<li>Measured Strain: 5,675 με (microstrain)</li>
|
||
<li>Calculation: G = 450 / (5,675 × 10⁻⁶) = 79.29 GPa</li>
|
||
<li><span style="color: var(--seam-gold);">✓ PASS</span> — Within 0.01% tolerance</li>
|
||
</ul>
|
||
</div>
|
||
<p style="font-size: 0.9rem; color: var(--vein-bronze);">
|
||
Every number in this ledger is traceable. Every weld is accountable.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const MATERIAL_THRESHOLDS = {
|
||
"79.3": { min: 75, max: 85, name: "Structural Steel" },
|
||
"26.0": { min: 24, max: 30, name: "Aluminium 6061" },
|
||
"41.4": { min: 38, max: 46, name: "Titanium Grade 5" },
|
||
"40.0": { min: 35, max: 50, name: "Carbon Fiber" }
|
||
};
|
||
|
||
function calculate() {
|
||
const materialBase = document.getElementById('material').value;
|
||
const stressInput = parseFloat(document.getElementById('stress').value);
|
||
const strainInput = parseFloat(document.getElementById('strain').value);
|
||
|
||
if (!stressInput || !strainInput) {
|
||
alert("ENTER BOTH STRESS AND STRAIN VALUES");
|
||
return;
|
||
}
|
||
|
||
// Convert: stress in MPa, strain in microstrain
|
||
const stress_Pa = stressInput * 1e6;
|
||
const strain_dimensionless = strainInput * 1e-6;
|
||
|
||
// Calculate G in Pa, then convert to GPa
|
||
const G_Pa = stress_Pa / strain_dimensionless;
|
||
const G_GPa = G_Pa / 1e9;
|
||
|
||
const resultsDiv = document.getElementById('results');
|
||
const resultValue = document.getElementById('calc-result');
|
||
const verdictDiv = document.getElementById('verdict');
|
||
|
||
resultsDiv.style.display = 'block';
|
||
resultValue.textContent = G_GPa.toFixed(2);
|
||
|
||
const threshold = MATERIAL_THRESHOLDS[materialBase];
|
||
const withinTolerance = G_GPa >= threshold.min && G_GPa <= threshold.max;
|
||
|
||
verdictDiv.className = 'verdict ' + (withinTolerance ? 'pass' : 'fail');
|
||
verdictDiv.innerHTML = withinTolerance
|
||
? `✓ ${threshold.name} INTEGRITY CONFIRMED (${((G_GPa/threshold.min)*100).toFixed(1)}% of minimum)`
|
||
: `✗ ${threshold.name} FAILED (expected ${threshold.min}-${threshold.max} GPa)`;
|
||
}
|
||
|
||
// Load JSON twin
|
||
fetch('/material-shear-calculator.json')
|
||
.then(r => r.json())
|
||
.then(data => console.log('JSON twin loaded:', data))
|
||
.catch(e => console.warn('JSON twin offline'));
|
||
</script>
|
||
</body>
|
||
</html>
|