267 lines
12 KiB
HTML
267 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Beam Load Calculator | Carlos Acosta</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<style>
|
||
:root {
|
||
--concrete: #2d2d2d;
|
||
--steel: #4a5568;
|
||
--wood: #c5a065;
|
||
--gulf-blue: #1a365d;
|
||
--chalk-white: #f7fafc;
|
||
}
|
||
|
||
.calc-container {
|
||
background: linear-gradient(180deg, var(--concrete) 0%, var(--steel) 100%);
|
||
border-radius: 8px;
|
||
padding: 2rem;
|
||
margin: 2rem auto;
|
||
max-width: 800px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
|
||
}
|
||
|
||
.hero-image {
|
||
width: 100%;
|
||
height: 300px;
|
||
object-fit: cover;
|
||
border-radius: 8px 8px 0 0;
|
||
border: 3px solid var(--wood);
|
||
filter: sepia(0.2) contrast(1.1);
|
||
}
|
||
|
||
.input-group {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.input-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
label {
|
||
color: var(--chalk-white);
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
input[type="number"] {
|
||
background: var(--gulf-blue);
|
||
border: 2px solid var(--wood);
|
||
color: var(--chalk-white);
|
||
padding: 0.75rem;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
input[type="number"]:focus {
|
||
outline: none;
|
||
border-color: #ffd700;
|
||
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
|
||
}
|
||
|
||
.result-box {
|
||
background: var(--gulf-blue);
|
||
border-left: 4px solid var(--wood);
|
||
padding: 1.5rem;
|
||
margin-top: 2rem;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
|
||
.result-value {
|
||
font-size: 2.5rem;
|
||
font-weight: bold;
|
||
color: var(--wood);
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.formula-box {
|
||
background: rgba(26, 54, 93, 0.8);
|
||
border: 1px solid var(--wood);
|
||
padding: 1rem;
|
||
margin: 1.5rem 0;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.unit-label {
|
||
color: var(--wood);
|
||
font-style: italic;
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<h1><a href="/">Carlos Acosta</a></h1>
|
||
<p class="tagline">Load-Bearing Calculations for Framers & Builders</p>
|
||
</header>
|
||
|
||
<main class="tool-content">
|
||
<div class="calc-container">
|
||
<!-- HERO IMAGE: Wood grain truth -->
|
||
<img src="https://pixabay.com/get/gc9585f56de728e0b6437660ad8b2d3002b2a9cf7eff43635fc945030ff4003871038e143e09e147ca330999dee42d100_1280.jpg"
|
||
alt="Cross-section of aged timber showing growth rings—the true measure of strength"
|
||
class="hero-image">
|
||
|
||
<h2 style="color: var(--chalk-white); border-bottom: 2px solid var(--wood); padding-bottom: 1rem; margin-top: 2rem;">Simple Beam Bending Stress Calculator</h2>
|
||
|
||
<p style="color: var(--chalk-white); line-height: 1.6;">
|
||
This is the math we use before we cut the first beam. Input your dimensions in inches, your load in pounds, and this tells you the maximum stress in the wood.
|
||
<span class="unit-label">Grounded in Wikidata Q49167267 (bending stress)</span>.
|
||
</p>
|
||
|
||
<div class="input-group">
|
||
<div class="input-field">
|
||
<label for="beamWidth">Beam Width (b)</label>
|
||
<input type="number" id="beamWidth" placeholder="e.g., 3.5" step="0.1" value="3.5">
|
||
<small class="unit-label">inches</small>
|
||
</div>
|
||
|
||
<div class="input-field">
|
||
<label for="beamHeight">Beam Height (h)</label>
|
||
<input type="number" id="beamHeight" placeholder="e.g., 9.25" step="0.1" value="9.25">
|
||
<small class="unit-label">inches</small>
|
||
</div>
|
||
|
||
<div class="input-field">
|
||
<label for="spanLength">Span Length (L)</label>
|
||
<input type="number" id="spanLength" placeholder="e.g., 12" step="0.1" value="12">
|
||
<small class="unit-label">feet</small>
|
||
</div>
|
||
|
||
<div class="input-field">
|
||
<label for="uniformLoad">Uniform Load (w)</label>
|
||
<input type="number" id="uniformLoad" placeholder="e.g., 50" step="1" value="50">
|
||
<small class="unit-label">pounds per foot</small>
|
||
</div>
|
||
</div>
|
||
|
||
<button onclick="calculate()" style="background: var(--wood); color: var(--concrete); border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: bold; border-radius: 4px; cursor: pointer; width: 100%; transition: transform 0.2s;">
|
||
CALCULATE MAXIMUM STRESS
|
||
</button>
|
||
|
||
<div id="results" class="result-box" style="display: none;">
|
||
<h3 style="color: var(--chalk-white); margin-bottom: 1rem;">Results</h3>
|
||
|
||
<div style="margin-bottom: 1.5rem;">
|
||
<label style="color: var(--chalk-white);">Maximum Bending Moment (M)</label>
|
||
<div class="result-value"><span id="momentResult">0</span> <span class="unit-label">ft-lbs</span></div>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 1.5rem;">
|
||
<label style="color: var(--chalk-white);">Section Modulus (S)</label>
|
||
<div class="result-value"><span id="sectionModulus">0</span> <span class="unit-label">in³</span></div>
|
||
</div>
|
||
|
||
<div style="border-top: 1px dashed var(--wood); padding-top: 1.5rem;">
|
||
<label style="color: var(--chalk-white);">MAXIMUM BENDING STRESS (σ)</label>
|
||
<div class="result-value"><span id="stressResult">0</span> <span class="unit-label">psi</span></div>
|
||
<p id="safetyNote" style="color: var(--chalk-white); font-style: italic; margin-top: 0.5rem;"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="formula-box">
|
||
<strong style="color: var(--wood);">// THE FORMULA WE LIVE BY //</strong><br><br>
|
||
<span style="color: var(--chalk-white);">M = w × L² ÷ 8</span><br>
|
||
<small>(Max moment for simply-supported beam)</small><br><br>
|
||
<span style="color: var(--chalk-white);">S = b × h² ÷ 6</span><br>
|
||
<small>(Section modulus for rectangular section)</small><br><br>
|
||
<span style="color: var(--chalk-white);">σ = M × 12 ÷ S</span><br>
|
||
<small>(Bending stress, converting ft-lbs to in-lbs)</small><br><br>
|
||
<small style="color: var(--wood);">Source: <a href="https://mechanicalc.com/reference/beam-analysis" target="_blank" style="color: var(--wood);">mechanicalc.com</a> via Wikidata Q49167267</small>
|
||
</div>
|
||
|
||
<div style="margin-top: 2rem; padding: 1rem; background: rgba(197, 160, 101, 0.1); border-left: 3px solid var(--wood);">
|
||
<strong style="color: var(--chalk-white);">WORKED EXAMPLE:</strong><br>
|
||
<span style="color: var(--chalk-white);">A 2x10 Douglas Fir (actual: 1.5" × 9.25") spanning 12 feet with a 50 lb/ft roof load.</span><br>
|
||
<span style="color: var(--wood);">Moment: 900 ft-lbs • Section Modulus: 21.66 in³ • Stress: 503 psi</span><br>
|
||
<small style="color: var(--chalk-white);">Douglas Fir allowable bending stress: ~1,000-1,500 psi depending on grade.</small>
|
||
</div>
|
||
</div>
|
||
|
||
<section style="max-width: 800px; margin: 3rem auto; padding: 0 2rem;">
|
||
<h2 style="border-bottom: 2px solid var(--wood); padding-bottom: 1rem;">Why This Matters</h2>
|
||
|
||
<p style="font-size: 1.1rem; line-height: 1.8;">
|
||
I've seen roofs fall because a foreman guessed wrong on a beam. Not from bad intentions—just from skipping the math. This calculator is the difference between a structure that stands for fifty years and one that teaches us a lesson we can't afford to learn twice.
|
||
</p>
|
||
|
||
<p style="font-size: 1.1rem; line-height: 1.8;">
|
||
The values here come from <a href="https://4ort.xyz/entity/bending-stress" target="_blank" style="color: var(--wood);">Wikidata Q49167267</a>, verified against the standards we use on the job. When you press calculate, you're running the same equations that hold up the cathedral in Seville and the church in Corpus.
|
||
</p>
|
||
|
||
<p style="font-size: 1.1rem; line-height: 1.8;">
|
||
Save this page. Print it if you have to. The Gulf doesn't forgive mistakes, and neither does gravity.
|
||
</p>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<p><a href="/" style="color: inherit;">← Back to the Site</a></p>
|
||
<p>Built with care in Corpus Christi. © 2024 Carlos Acosta</p>
|
||
</footer>
|
||
|
||
<script>
|
||
function calculate() {
|
||
// Get inputs
|
||
const b = parseFloat(document.getElementById('beamWidth').value); // width in inches
|
||
const h = parseFloat(document.getElementById('beamHeight').value); // height in inches
|
||
const L_ft = parseFloat(document.getElementById('spanLength').value); // span in feet
|
||
const w = parseFloat(document.getElementById('uniformLoad').value); // uniform load in lbs/ft
|
||
|
||
// Validation
|
||
if (!b || !h || !L_ft || !w) {
|
||
alert("All fields must be filled. The math won't work with empty boxes.");
|
||
return;
|
||
}
|
||
|
||
// Calculate Maximum Bending Moment (ft-lbs)
|
||
// M = w * L^2 / 8
|
||
const M_ft_lbs = (w * Math.pow(L_ft, 2)) / 8;
|
||
|
||
// Convert to inch-pounds for stress calculation
|
||
const M_in_lbs = M_ft_lbs * 12;
|
||
|
||
// Calculate Section Modulus (in³)
|
||
// S = b * h^2 / 6
|
||
const S = (b * Math.pow(h, 2)) / 6;
|
||
|
||
// Calculate Maximum Bending Stress (psi)
|
||
// σ = M / S
|
||
const sigma_psi = M_in_lbs / S;
|
||
|
||
// Display results
|
||
document.getElementById('momentResult').textContent = M_ft_lbs.toFixed(2);
|
||
document.getElementById('sectionModulus').textContent = S.toFixed(2);
|
||
document.getElementById('stressResult').textContent = sigma_psi.toFixed(1);
|
||
|
||
// Safety note
|
||
const safetyDiv = document.getElementById('safetyNote');
|
||
const typicalAllowable = 1200; // Conservative estimate for common lumber
|
||
if (sigma_psi < typicalAllowable * 0.7) {
|
||
safetyDiv.textContent = "✓ Well within typical allowable limits for quality lumber.";
|
||
safetyDiv.style.color = "#4ade80";
|
||
} else if (sigma_psi < typicalAllowable) {
|
||
safetyDiv.textContent = "! Approaching typical allowable limits. Verify species and grade.";
|
||
safetyDiv.style.color = "#fbbf24";
|
||
} else {
|
||
safetyDiv.textContent = "✗ EXCEEDS typical allowable stress. Redesign required.";
|
||
safetyDiv.style.color = "#ef4444";
|
||
}
|
||
|
||
// Show results
|
||
document.getElementById('results').style.display = 'block';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|