302 lines
11 KiB
HTML
302 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>The Stock-Out Sentinel | Brandon Buonaguro</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0a0a0a;
|
||
--surface: #141414;
|
||
--primary: #ff4d00; /* Burnt orange */
|
||
--secondary: #00d9ff; /* Cyan accent */
|
||
--text: #e0e0e0;
|
||
--muted: #666;
|
||
--border: #333;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
header {
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 2rem 1rem;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
h1 {
|
||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||
letter-spacing: -0.05em;
|
||
font-weight: 800;
|
||
background: linear-gradient(180deg, var(--primary) 0%, #cc3700 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.subtitle {
|
||
color: var(--muted);
|
||
font-size: 1.1rem;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
main {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 2rem 1rem;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
}
|
||
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
|
||
|
||
.panel {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
box-shadow: 0 4px 24px rgba(0,0,0,0.5);
|
||
}
|
||
.panel-title {
|
||
color: var(--secondary);
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1.5rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
border-bottom: 1px dashed var(--border);
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
/* Controls */
|
||
.control-group { margin-bottom: 1.5rem; }
|
||
label {
|
||
display: block;
|
||
font-size: 0.9rem;
|
||
color: var(--muted);
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 600;
|
||
}
|
||
input[type="range"] {
|
||
width: 100%;
|
||
height: 6px;
|
||
background: var(--border);
|
||
border-radius: 3px;
|
||
appearance: none;
|
||
outline: none;
|
||
}
|
||
input[type="range"]::-webkit-slider-thumb {
|
||
appearance: none;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: var(--primary);
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
|
||
|
||
.val-display {
|
||
float: right;
|
||
color: var(--primary);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Results */
|
||
.result-card {
|
||
background: rgba(255, 77, 0, 0.05);
|
||
border: 1px solid var(--primary);
|
||
border-radius: 8px;
|
||
padding: 1.5rem;
|
||
margin-top: 1rem;
|
||
text-align: center;
|
||
}
|
||
.prob-val {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
color: var(--primary);
|
||
line-height: 1;
|
||
}
|
||
.prob-label {
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.verdict {
|
||
margin-top: 1rem;
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--secondary);
|
||
}
|
||
.verdict.danger { color: #ff3333; }
|
||
.verdict.safe { color: #00ff88; }
|
||
|
||
/* Image */
|
||
.memory-shot {
|
||
grid-column: 1 / -1;
|
||
width: 100%;
|
||
height: 400px;
|
||
object-fit: cover;
|
||
border-radius: 12px;
|
||
filter: contrast(1.2) saturate(0.8);
|
||
opacity: 0.9;
|
||
margin: 2rem 0;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.caption {
|
||
grid-column: 1 / -1;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-style: italic;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 3rem 1rem;
|
||
color: var(--muted);
|
||
font-size: 0.8rem;
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 2rem;
|
||
}
|
||
a { color: var(--secondary); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>The Stock-Out Sentinel</h1>
|
||
<div class="subtitle">
|
||
Calculate your probability of stock-out using real-world variance.
|
||
No spreadsheets. No guesswork. Just the math that keeps the lights on.
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Input Panel -->
|
||
<section class="panel">
|
||
<div class="panel-title">Field Inputs</div>
|
||
|
||
<div class="control-group">
|
||
<label>Daily Demand (units/day)</label>
|
||
<input type="range" id="demand" min="10" max="500" value="120">
|
||
<span class="val-display" id="demandVal">120</span>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Lead Time (days)</label>
|
||
<input type="range" id="leadTime" min="1" max="30" value="7">
|
||
<span class="val-display" id="leadTimeVal">7</span>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Demand Std Dev (σ)</label>
|
||
<input type="range" id="sigma" min="1" max="100" value="18">
|
||
<span class="val-display" id="sigmaVal">18</span>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Service Level Target (%)</label>
|
||
<input type="range" id="serviceLevel" min="80" max="99.9" step="0.1" value="95">
|
||
<span class="val-display" id="serviceLevelVal">95%</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Result Panel -->
|
||
<section class="panel">
|
||
<div class="panel-title">The Verdict</div>
|
||
<div style="margin-bottom: 2rem;">
|
||
<div class="prob-label">Probability of Stock-Out</div>
|
||
<div class="prob-val" id="stockOutProb">5.0%</div>
|
||
</div>
|
||
|
||
<div class="result-card">
|
||
<div id="verdictText" class="verdict safe">SAFE TO RUN</div>
|
||
<div style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted);">
|
||
Recommended Safety Stock: <span id="ssRec" style="color: var(--text); font-weight: 700;">245 units</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 2rem; font-size: 0.85rem; color: var(--muted); line-height: 1.8;">
|
||
<strong>Logic:</strong><br>
|
||
SS = Z × σ × √LT<br>
|
||
Where Z is the standard normal deviate for your target service level.<br>
|
||
Stock-Out Prob = 1 - Service Level
|
||
</div>
|
||
</section>
|
||
|
||
<!-- The Memory Shot -->
|
||
<img src="https://images.pexels.com/photos/30341205/pexels-photo-30341205.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Dark warehouse aisle with stacked inventory" class="memory-shot">
|
||
<div class="caption">
|
||
Aisle 4, Dover Distribution Center. November 2025. We missed $40k here because we trusted a forecast, not the variance.
|
||
</div>
|
||
|
||
<footer>
|
||
Built by Brandon Buonaguro | Dover, PA<br>
|
||
Data constants exposed at <a href="/sentinel.json">/sentinel.json</a><br>
|
||
<small>© 2026 The Supervisor's Playbook</small>
|
||
</footer>
|
||
</main>
|
||
|
||
<script>
|
||
// Constants
|
||
const Z_TABLE = {
|
||
80: 0.84, 85: 1.04, 90: 1.28, 95: 1.65, 97.5: 1.96, 99: 2.33, 99.9: 3.09
|
||
};
|
||
|
||
function interpolateZ(targetSL) {
|
||
const keys = Object.keys(Z_TABLE).map(Number).sort((a,b)=>a-b);
|
||
for (let i = 0; i < keys.length - 1; i++) {
|
||
if (targetSL >= keys[i] && targetSL <= keys[i+1]) {
|
||
const t = (targetSL - keys[i]) / (keys[i+1] - keys[i]);
|
||
return Z_TABLE[keys[i]] + t * (Z_TABLE[keys[i+1]] - Z_TABLE[keys[i]]);
|
||
}
|
||
}
|
||
return Z_TABLE[keys[keys.length-1]];
|
||
}
|
||
|
||
function calc() {
|
||
const D = parseFloat(document.getElementById('demand').value);
|
||
const LT = parseFloat(document.getElementById('leadTime').value);
|
||
const SIGMA = parseFloat(document.getElementById('sigma').value);
|
||
const SL = parseFloat(document.getElementById('serviceLevel').value);
|
||
|
||
document.getElementById('demandVal').textContent = D;
|
||
document.getElementById('leadTimeVal').textContent = LT;
|
||
document.getElementById('sigmaVal').textContent = SIGMA;
|
||
document.getElementById('serviceLevelVal').textContent = SL + '%';
|
||
|
||
const Z = interpolateZ(SL);
|
||
const SS = Math.round(Z * SIGMA * Math.sqrt(LT));
|
||
const prob = ((100 - SL)).toFixed(2);
|
||
|
||
document.getElementById('stockOutProb').textContent = prob + '%';
|
||
document.getElementById('ssRec').textContent = SS.toLocaleString() + ' units';
|
||
|
||
const verdictEl = document.getElementById('verdictText');
|
||
if (prob > 5) {
|
||
verdictEl.textContent = "CRITICAL: ORDER NOW";
|
||
verdictEl.className = "verdict danger";
|
||
} else if (prob > 1) {
|
||
verdictEl.textContent = "WATCH CLOSELY";
|
||
verdictEl.className = "verdict";
|
||
verdictEl.style.color = "#ffaa00";
|
||
} else {
|
||
verdictEl.textContent = "SAFE TO RUN";
|
||
verdictEl.className = "verdict safe";
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('input').forEach(el => el.addEventListener('input', calc));
|
||
calc();
|
||
</script>
|
||
</body>
|
||
</html>
|