Add non-technical pipeline overview: infographic + flow explainer doc
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Conflict Checker — How Your Plans Get Reviewed</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
background: #f4f7fb;
|
||||
color: #1f2d3d;
|
||||
width: 1280px;
|
||||
padding: 40px 48px;
|
||||
}
|
||||
header { text-align: center; margin-bottom: 10px; }
|
||||
h1 { font-size: 34px; color: #123c6e; letter-spacing: 0.5px; }
|
||||
.subtitle { font-size: 17px; color: #5a6b7f; margin-top: 8px; }
|
||||
|
||||
.blueprint {
|
||||
background: #ffffff;
|
||||
border: 2px solid #d5e3f2;
|
||||
border-radius: 18px;
|
||||
padding: 32px 36px;
|
||||
margin-top: 24px;
|
||||
background-image:
|
||||
linear-gradient(#eef4fb 1px, transparent 1px),
|
||||
linear-gradient(90deg, #eef4fb 1px, transparent 1px);
|
||||
background-size: 28px 28px;
|
||||
}
|
||||
|
||||
.row { display: flex; justify-content: center; align-items: stretch; gap: 0; }
|
||||
.row + .connector-down { margin: 0; }
|
||||
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
border: 2px solid #cfdcec;
|
||||
box-shadow: 0 3px 8px rgba(18,60,110,0.08);
|
||||
width: 250px;
|
||||
padding: 16px 16px 14px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card .num {
|
||||
position: absolute; top: -16px; left: -14px;
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
background: #123c6e; color: #fff;
|
||||
font-weight: 700; font-size: 18px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
.card .icon { font-size: 34px; text-align: center; margin: 4px 0 6px; }
|
||||
.card h2 { font-size: 17px; color: #123c6e; text-align: center; margin-bottom: 6px; }
|
||||
.card p { font-size: 13px; line-height: 1.4; color: #42536a; text-align: center; }
|
||||
|
||||
.card.scan { border-color: #7fb3e0; background: #f0f7ff; }
|
||||
.card.read { border-color: #7fb3e0; background: #f0f7ff; }
|
||||
.card.lib { border-color: #8fd0a8; background: #f1faf4; }
|
||||
.card.link { border-color: #8fd0a8; background: #f1faf4; }
|
||||
.card.det { border-color: #f2b879; background: #fff8ef; }
|
||||
.card.spec { border-color: #f2b879; background: #fff8ef; }
|
||||
.card.brain { border-color: #c39bd3; background: #f9f3fc; }
|
||||
.card.human { border-color: #e58f8f; background: #fdf1f1; }
|
||||
|
||||
.arrow {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #123c6e; font-size: 30px; font-weight: bold;
|
||||
width: 44px; flex-shrink: 0;
|
||||
}
|
||||
.connector-down {
|
||||
text-align: center; color: #123c6e; font-size: 30px;
|
||||
font-weight: bold; line-height: 1; padding: 6px 0;
|
||||
}
|
||||
|
||||
.finish {
|
||||
margin: 22px auto 0;
|
||||
width: 560px;
|
||||
background: #123c6e; color: #ffffff;
|
||||
border-radius: 14px; padding: 18px 24px; text-align: center;
|
||||
box-shadow: 0 4px 10px rgba(18,60,110,0.3);
|
||||
}
|
||||
.finish .big { font-size: 20px; font-weight: 700; }
|
||||
.finish .small { font-size: 14px; margin-top: 6px; color: #cfe0f4; }
|
||||
|
||||
footer {
|
||||
margin-top: 26px; text-align: center;
|
||||
font-size: 13px; color: #7a8aa0;
|
||||
}
|
||||
.note {
|
||||
margin: 18px auto 0; width: 900px; font-size: 13.5px; color: #42536a;
|
||||
background: #ffffff; border-left: 4px solid #7fb3e0; border-radius: 6px;
|
||||
padding: 10px 16px; line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>🔍 CONFLICT CHECKER</h1>
|
||||
<div class="subtitle">How your construction plans get reviewed — a team of AI assistants, each with one job, passing notes down the line.</div>
|
||||
</header>
|
||||
|
||||
<div class="blueprint">
|
||||
|
||||
<!-- Row 1 -->
|
||||
<div class="row">
|
||||
<div class="card scan">
|
||||
<div class="num">1</div>
|
||||
<div class="icon">📄</div>
|
||||
<h2>The Scanner</h2>
|
||||
<p>Turns every page of your PDF blueprints into a picture the AI can read.</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="card read">
|
||||
<div class="num">2</div>
|
||||
<div class="icon">👓</div>
|
||||
<h2>The Readers</h2>
|
||||
<p>One assistant per page, all working at once. Each writes down every fact: dimensions, notes, materials, callouts.</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="card lib">
|
||||
<div class="num">3</div>
|
||||
<div class="icon">📚</div>
|
||||
<h2>Librarian & Code Scout</h2>
|
||||
<p>Builds the table of contents (electrical, plumbing, structural…) and figures out <b>where</b> the project is, so the right building codes apply.</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="card link">
|
||||
<div class="num">4</div>
|
||||
<div class="icon">🔗</div>
|
||||
<h2>The Connector</h2>
|
||||
<p>Connects the dots across sheets — "this water heater on the plumbing sheet is the same one on the electrical sheet" — and sorts facts into topic piles.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connector-down">↓</div>
|
||||
|
||||
<!-- Row 2 -->
|
||||
<div class="row">
|
||||
<div class="card det">
|
||||
<div class="num">5</div>
|
||||
<div class="icon">🕵️</div>
|
||||
<h2>The Detectives</h2>
|
||||
<p>One per topic pile. Compares sheets that should agree and hunts for contradictions: "wall shown here, but not on the structural plan."</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="card spec">
|
||||
<div class="num">6</div>
|
||||
<div class="icon">👷</div>
|
||||
<h2>The Specialists</h2>
|
||||
<p>Three experts at once: a <b>code inspector</b>, a veteran <b>builder</b> ("can this actually be built?"), and a <b>checklist keeper</b> ("is anything missing?").</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="card brain">
|
||||
<div class="num">7</div>
|
||||
<div class="icon">🧠</div>
|
||||
<h2>The Brain</h2>
|
||||
<p>The senior reviewer. Collects every finding, merges duplicates, discards weak ones, and ranks the rest by how much trouble they'd cause.</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="card human">
|
||||
<div class="num">8</div>
|
||||
<div class="icon">✅</div>
|
||||
<h2>Human Review</h2>
|
||||
<p>The important and uncertain findings land on <b>your</b> desk. You confirm, reject, or mark unsure — nothing goes out unapproved.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connector-down">↓</div>
|
||||
|
||||
<div class="finish">
|
||||
<div class="big">📋 Final Report + ✉️ Draft RFIs</div>
|
||||
<div class="small">A prioritized list of every problem found — plus ready-to-send "please clarify" letters (Requests For Information) for the design team.</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<b>Good to know:</b> everyone shares one notebook, so each step builds on the last.
|
||||
If one page can't be read, the team keeps going and that page is flagged as a gap
|
||||
instead of stopping the whole review. Every finding links back to the sheet it came from.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>Conflict Checker · conchecker.scoutitsystems.com · Review your plans before they cost you money in the field.</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user