73 lines
3.4 KiB
HTML
73 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@page { size: 7.5in 3.5in; margin: 0; }
|
|
body { margin: 0; padding: 30px; font-family: 'Helvetica Neue', Arial, sans-serif; background: #f8fafc; }
|
|
.container { background: white; border-radius: 16px; padding: 30px 40px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
|
.title { text-align: center; font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
|
|
.subtitle { text-align: center; font-size: 11px; color: #64748b; margin-bottom: 24px; }
|
|
|
|
.pipeline { display: flex; align-items: center; justify-content: center; gap: 0; }
|
|
|
|
.step { text-align: center; width: 140px; }
|
|
.step-circle { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
|
.step-num { font-size: 10px; font-weight: 700; color: #3b82f6; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
|
|
.step-name { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
|
|
.step-desc { font-size: 9px; color: #64748b; line-height: 1.3; }
|
|
|
|
.s1 .step-circle { background: #dbeafe; color: #1e40af; }
|
|
.s2 .step-circle { background: #1e40af; color: white; }
|
|
.s3 .step-circle { background: #fef3c7; color: #92400e; }
|
|
.s4 .step-circle { background: #d1fae5; color: #065f46; }
|
|
|
|
.arrow { color: #cbd5e1; font-size: 28px; margin: 0 8px; padding-bottom: 40px; }
|
|
|
|
.example { background: #f1f5f9; border-radius: 8px; padding: 12px 16px; margin-top: 20px; }
|
|
.example-title { font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
|
.example-text { font-size: 10px; color: #334155; line-height: 1.5; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="title">THE FACTORY</div>
|
|
<div class="subtitle">Systemized Production Pipeline with Sub-Agent Orchestration</div>
|
|
|
|
<div class="pipeline">
|
|
<div class="step s1">
|
|
<div class="step-circle">🕓</div>
|
|
<div class="step-num">Step 1</div>
|
|
<div class="step-name">Trigger</div>
|
|
<div class="step-desc">Cron schedule or<br>manual kick-off</div>
|
|
</div>
|
|
<div class="arrow">➔</div>
|
|
<div class="step s2">
|
|
<div class="step-circle">⚙</div>
|
|
<div class="step-num">Step 2</div>
|
|
<div class="step-name">Sub-Agents</div>
|
|
<div class="step-desc">Spawn workers for<br>bulk parallel work</div>
|
|
</div>
|
|
<div class="arrow">➔</div>
|
|
<div class="step s3">
|
|
<div class="step-circle">✅</div>
|
|
<div class="step-num">Step 3</div>
|
|
<div class="step-name">QA Check</div>
|
|
<div class="step-desc">Human approval<br>before anything ships</div>
|
|
</div>
|
|
<div class="arrow">➔</div>
|
|
<div class="step s4">
|
|
<div class="step-circle">🚀</div>
|
|
<div class="step-num">Step 4</div>
|
|
<div class="step-name">Delivery</div>
|
|
<div class="step-desc">Auto-send to<br>clients</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<div class="example-title">Example: Monthly Client Deliverable Run</div>
|
|
<div class="example-text">1st of the month → Miles pulls each client's branding → Spawns one sub-agent per client → Each generates branded brochure + training material + performance report → Everything lands in review queue → You approve → Auto-delivered to clients</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|