Files
hostpioneers/diagrams/autojobs-activity.html

690 lines
20 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutoJobs — UML Activity Diagram</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #0a0e1a;
color: #e2e8f0;
padding: 40px 20px;
min-height: 100vh;
}
h1 {
text-align: center;
color: #f8fafc;
font-size: 28px;
font-weight: 700;
margin-bottom: 6px;
}
.subtitle {
text-align: center;
color: #475569;
font-size: 14px;
margin-bottom: 40px;
}
/* ============ UML SHAPES ============ */
.start-end {
width: 28px;
height: 28px;
border-radius: 50%;
background: #10b981;
border: 3px solid #0f172a;
box-shadow: 0 0 0 3px #10b981;
}
.action {
background: #1e293b;
border: 2px solid #334155;
border-radius: 10px;
padding: 14px 20px;
min-width: 180px;
max-width: 260px;
text-align: center;
flex: 1;
position: relative;
}
.action-icon {
font-size: 18px;
margin-bottom: 4px;
}
.action-title {
font-size: 13px;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 4px;
}
.action-detail {
font-size: 11px;
color: #64748b;
line-height: 1.4;
}
.action-sub {
background: #1a2332;
border: 1px solid #2d3748;
border-radius: 8px;
padding: 8px 14px;
min-width: 140px;
text-align: center;
}
.action-sub-title {
font-size: 11px;
font-weight: 600;
color: #94a3b8;
}
.decision {
width: 120px;
height: 80px;
position: relative;
background: #1e293b;
border: 2px solid #f59e0b;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.decision-inner {
transform: rotate(-45deg);
text-align: center;
}
.decision-label {
font-size: 11px;
font-weight: 700;
color: #f59e0b;
text-transform: uppercase;
}
.decision-sublabel {
font-size: 10px;
color: #94a3b8;
margin-top: 2px;
}
.swimlane-header {
background: #0f172a;
border: 2px solid;
border-radius: 8px 8px 0 0;
padding: 8px 16px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
text-align: center;
}
/* ============ LAYOUT ============ */
.diagram-wrapper {
max-width: 1100px;
margin: 0 auto;
}
/* Swimlanes */
.swimlanes {
display: flex;
gap: 16px;
justify-content: center;
}
.swimlane {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
flex: 1;
max-width: 260px;
min-width: 180px;
}
/* Vertical flow */
.flow {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* Horizontal row */
.row {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
/* Arrow connector */
.arrow {
display: flex;
flex-direction: column;
align-items: center;
color: #3b82f6;
font-size: 22px;
line-height: 1;
}
.arrow-label {
font-size: 10px;
color: #475569;
text-align: center;
margin-top: 2px;
}
.arrow-branch {
font-size: 10px;
color: #64748b;
margin-top: 2px;
}
/* Fork/join bar */
.fork-bar {
width: 4px;
background: linear-gradient(to bottom, #3b82f6, #6366f1);
border-radius: 2px;
height: 30px;
}
.join-bar {
width: 60px;
height: 4px;
background: linear-gradient(to right, #3b82f6, #6366f1);
border-radius: 2px;
}
/* Color coding */
.col-input { --lane-color: #8b5cf6; }
.col-fetch { --lane-color: #0891b2; }
.col-classify { --lane-color: #d97706; }
.col-eval { --lane-color: #059669; }
.col-gen { --lane-color: #db2777; }
.col-pipeline { --lane-color: #4f46e5; }
.col-alert { --lane-color: #dc2626; }
.action.col-input { border-color: var(--lane-color); }
.action.col-fetch { border-color: var(--lane-color); }
.action.col-classify { border-color: var(--lane-color); }
.action.col-eval { border-color: var(--lane-color); }
.action.col-gen { border-color: var(--lane-color); }
.action.col-pipeline { border-color: var(--lane-color); }
.action.col-alert { border-color: var(--lane-color); }
.swimlane-header.col-input { background: var(--lane-color); border-color: var(--lane-color); }
.swimlane-header.col-fetch { background: var(--lane-color); border-color: var(--lane-color); }
.swimlane-header.col-classify { background: var(--lane-color); border-color: var(--lane-color); }
.swimlane-header.col-eval { background: var(--lane-color); border-color: var(--lane-color); }
.swimlane-header.col-gen { background: var(--lane-color); border-color: var(--lane-color); }
.swimlane-header.col-pipeline { background: var(--lane-color); border-color: var(--lane-color); }
.swimlane-header.col-alert { background: var(--lane-color); border-color: var(--lane-color); }
/* Score boxes */
.score-grid {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
background: #0f172a;
border: 2px solid #059669;
border-radius: 10px;
padding: 12px 16px;
margin: 8px 0;
}
.score-item {
background: #1e293b;
border-radius: 6px;
padding: 6px 10px;
text-align: center;
min-width: 90px;
}
.score-label {
font-size: 10px;
color: #64748b;
margin-bottom: 2px;
}
.score-value {
font-size: 13px;
font-weight: 700;
color: #f1f5f9;
}
.score-weight {
font-size: 9px;
color: #475569;
}
/* Skip/reject box */
.skip-box {
background: #0f172a;
border: 2px dashed #475569;
border-radius: 10px;
padding: 10px 18px;
text-align: center;
color: #64748b;
font-size: 12px;
}
.skip-label { color: #dc2626; font-weight: 700; }
/* Output row */
.output-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
background: #0f172a;
border: 2px solid #db2777;
border-radius: 10px;
padding: 12px 16px;
}
.output-item {
background: #1e293b;
border: 1px solid #334155;
border-radius: 8px;
padding: 8px 14px;
text-align: center;
min-width: 130px;
}
.output-icon { font-size: 16px; margin-bottom: 2px; }
.output-title { font-size: 11px; font-weight: 700; color: #f1f5f9; }
.output-detail { font-size: 10px; color: #64748b; }
/* Pipeline stages */
.pipeline-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.pipeline-item {
background: #1e293b;
border: 1px solid;
border-radius: 8px;
padding: 10px 14px;
min-width: 130px;
text-align: center;
}
.pipeline-item.p-wishlist { border-color: #8b5cf6; }
.pipeline-item.p-applied { border-color: #06b6d4; }
.pipeline-item.p-interview { border-color: #f59e0b; }
.pipeline-item.p-result { border-color: #10b981; }
.pipeline-icon { font-size: 16px; }
.pipeline-title { font-size: 12px; font-weight: 700; color: #f1f5f9; margin-top: 2px; }
.pipeline-detail { font-size: 10px; color: #64748b; }
/* Horus bot */
.horus-box {
background: #0f172a;
border: 2px solid #dc2626;
border-radius: 10px;
padding: 12px 20px;
text-align: center;
}
.horus-title { font-size: 13px; font-weight: 700; color: #dc2626; }
.horus-detail { font-size: 11px; color: #64748b; margin-top: 2px; }
/* Arrows between pipeline items */
.pipe-arrow {
color: #3b82f6;
font-size: 20px;
display: flex;
align-items: center;
}
/* Separator */
.sep {
border: none;
border-top: 1px dashed #1e293b;
margin: 20px 0;
}
/* Legend */
.legend {
max-width: 800px;
margin: 40px auto 0;
}
.legend-title {
text-align: center;
font-size: 11px;
color: #475569;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
}
.legend-items {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #64748b;
}
.legend-swatch {
width: 14px;
height: 14px;
border-radius: 4px;
border: 2px solid;
}
.note {
max-width: 700px;
margin: 24px auto 0;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 8px;
padding: 14px 18px;
font-size: 12px;
color: #64748b;
line-height: 1.7;
}
.note strong { color: #94a3b8; }
@media (max-width: 768px) {
.swimlanes { flex-direction: column; }
.swimlane { max-width: 100%; }
}
</style>
</head>
<body>
<h1>AutoJobs — UML Activity Diagram</h1>
<p class="subtitle">hostpioneers.com/autojobs · Complete Job Search Pipeline</p>
<div class="diagram-wrapper">
<!-- START -->
<div class="flow">
<div class="start-end"></div>
<div class="arrow"></div>
<!-- STEP 1: INPUT -->
<div class="row">
<div class="action col-input">
<div class="action-icon">📋</div>
<div class="action-title">USER INPUT</div>
<div class="action-detail">Paste job URL OR description text OR fill manual fields</div>
</div>
</div>
<div class="arrow"></div>
<div class="arrow-label">job_posted()</div>
<!-- STEP 2: FETCH -->
<div class="row">
<div class="action col-fetch">
<div class="action-icon">🔍</div>
<div class="action-title">FETCH & PARSE</div>
<div class="action-detail">Extract: title, company, description, board type</div>
</div>
</div>
<div class="arrow"></div>
<div class="arrow-label">Perplexity API + web scraping</div>
<div class="row" style="margin-top:8px;">
<div class="action-sub">
<div class="action-sub-title">📡 Company info (Crunchbase, LinkedIn, website)</div>
</div>
</div>
<div class="arrow"></div>
<!-- STEP 3: CLASSIFY -->
<div class="row">
<div class="action col-classify">
<div class="action-icon">🏷️</div>
<div class="action-title">CLASSIFY ROLE</div>
<div class="action-detail">Detect archetype, seniority level, location</div>
</div>
</div>
<div class="arrow"></div>
<!-- Classify sub-items -->
<div class="row">
<div class="action-sub" style="border-color:#d97706;">
<div class="action-sub-title">🤖 Voice AI / Agentic / Backend / Full-Stack</div>
</div>
<div class="action-sub" style="border-color:#d97706;">
<div class="action-sub-title">📊 Junior / Mid / Senior / Staff</div>
</div>
<div class="action-sub" style="border-color:#d97706;">
<div class="action-sub-title">🌍 Remote / Spain / EU / US</div>
</div>
</div>
<div class="arrow"></div>
<!-- STEP 4: EVALUATE -->
<div class="action col-eval" style="max-width:700px; border-color:#059669;">
<div class="action-icon">📐</div>
<div class="action-title">EVALUATE — 6 Dimensions</div>
<div class="action-detail">Score each 0100, compute weighted composite score</div>
</div>
<!-- SCORING GRID -->
<div class="score-grid">
<div class="score-item">
<div class="score-label">CV Match</div>
<div class="score-value">0100</div>
<div class="score-weight">× 0.25</div>
</div>
<div class="score-item">
<div class="score-label">Comp Fit</div>
<div class="score-value">0100</div>
<div class="score-weight">× 0.20</div>
</div>
<div class="score-item">
<div class="score-label">Seniority</div>
<div class="score-value">0100</div>
<div class="score-weight">× 0.15</div>
</div>
<div class="score-item">
<div class="score-label">Culture</div>
<div class="score-value">0100</div>
<div class="score-weight">× 0.15</div>
</div>
<div class="score-item">
<div class="score-label">Tech Stack</div>
<div class="score-value">0100</div>
<div class="score-weight">× 0.15</div>
</div>
<div class="score-item">
<div class="score-label">Interview</div>
<div class="score-value">0100</div>
<div class="score-weight">× 0.10</div>
</div>
</div>
<div class="arrow"></div>
<div class="arrow-label">composite_score = weighted_average()</div>
<!-- DECISION -->
<div class="decision">
<div class="decision-inner">
<div class="decision-label">SCORE ≥ 70?</div>
<div class="decision-sublabel">decision gate</div>
</div>
</div>
<div class="row">
<div style="display:flex;flex-direction:column;align-items:center;gap:0;">
<div class="arrow-label" style="color:#10b981;">YES</div>
<div class="arrow"></div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:0;">
<div class="arrow-label" style="color:#dc2626;">NO</div>
<div class="arrow"></div>
</div>
</div>
<!-- YES branch: Generate -->
<div class="action col-gen" style="border-color:#db2777;">
<div class="action-icon"></div>
<div class="action-title">GENERATE CONTENT</div>
<div class="action-detail">If score ≥ 70 → CV PDF + Cover Letter + Interview Prep</div>
</div>
<!-- NO branch: Skip -->
<div class="skip-box" style="margin-top: 8px;">
<span class="skip-label">⏭️ SKIP</span> — Not recommended
</div>
<!-- Arrows converge back to flow -->
<div style="display:flex;gap:120px;justify-content:center;margin:8px 0;">
<div class="fork-bar"></div>
<div class="fork-bar"></div>
</div>
<div class="join-bar" style="margin:0 auto;"></div>
<div class="arrow"></div>
<!-- OUTPUT -->
<div class="output-row">
<div class="output-item">
<div class="output-icon">📄</div>
<div class="output-title">CV PDF</div>
<div class="output-detail">ATS-optimized, keyword injected</div>
</div>
<div class="output-item">
<div class="output-icon">✉️</div>
<div class="output-title">Cover Letter</div>
<div class="output-detail">Personalized, 3 paragraphs</div>
</div>
<div class="output-item">
<div class="output-icon">🎯</div>
<div class="output-title">Interview Prep</div>
<div class="output-detail">Questions + STAR stories</div>
</div>
</div>
<div class="arrow"></div>
<!-- STEP 6: PIPELINE -->
<div class="action col-pipeline" style="max-width:700px; border-color:#4f46e5;">
<div class="action-icon">📌</div>
<div class="action-title">PIPELINE — Kanban Board</div>
<div class="action-detail">Job moves through stages as user takes action</div>
</div>
<div class="pipeline-row" style="margin-top:8px;">
<div class="pipeline-item p-wishlist">
<div class="pipeline-icon">📋</div>
<div class="pipeline-title">WISHLIST</div>
<div class="pipeline-detail">Score ≥ 70, not yet applied</div>
</div>
<div class="pipe-arrow"></div>
<div class="pipeline-item p-applied">
<div class="pipeline-icon">🚀</div>
<div class="pipeline-title">APPLIED</div>
<div class="pipeline-detail">User submitted application</div>
</div>
<div class="pipe-arrow"></div>
<div class="pipeline-item p-interview">
<div class="pipeline-icon">💬</div>
<div class="pipeline-title">INTERVIEW</div>
<div class="pipeline-detail">Scheduled or completed</div>
</div>
<div class="pipe-arrow"></div>
<div class="pipeline-item p-result">
<div class="pipeline-icon"></div>
<div class="pipeline-title">RESULT</div>
<div class="pipeline-detail">Offer / Rejected</div>
</div>
</div>
<div class="arrow"></div>
<div class="arrow-label">user moves cards · outcome recorded</div>
<!-- STEP 7: ALERTS -->
<div class="action col-alert" style="max-width:700px; border-color:#dc2626;">
<div class="action-icon">🔔</div>
<div class="action-title">TELEGRAM ALERTS</div>
<div class="action-detail">Horus bot notifies at key moments</div>
</div>
<div class="row" style="margin-top:8px;">
<div class="output-item" style="border-color:#dc2626;">
<div class="output-icon">🆕</div>
<div class="output-title">Evaluation done</div>
<div class="output-detail">Score + content ready</div>
</div>
<div class="output-item" style="border-color:#dc2626;">
<div class="output-icon"></div>
<div class="output-title">Interview 24h</div>
<div class="output-detail">Reminder alert</div>
</div>
<div class="output-item" style="border-color:#dc2626;">
<div class="output-icon">🏆</div>
<div class="output-title">Offer received</div>
<div class="output-detail">Immediate alert</div>
</div>
</div>
<div class="arrow"></div>
<div class="horus-box">
<div class="horus-title">🤖 Horus Bot</div>
<div class="horus-detail">Telegram · @Horus_Da_Bot</div>
</div>
<div class="arrow"></div>
<!-- FEEDBACK LOOP -->
<div class="action" style="border-color:#475569; max-width:400px;">
<div class="action-icon">🔁</div>
<div class="action-title">ICP LEARNING LOOP — Future</div>
<div class="action-detail">Track conversions → auto-tune scoring weights</div>
</div>
<div class="arrow"></div>
<!-- END -->
<div class="start-end" style="background:#dc2626; box-shadow:0 0 0 3px #dc2626;"></div>
</div>
</div>
<!-- LEGEND -->
<div class="legend">
<div class="legend-title">Color Legend</div>
<div class="legend-items">
<div class="legend-item">
<div class="legend-swatch" style="background:#1e293b;border-color:#8b5cf6;"></div>
<span>Input</span>
</div>
<div class="legend-item">
<div class="legend-swatch" style="background:#1e293b;border-color:#0891b2;"></div>
<span>Fetch</span>
</div>
<div class="legend-item">
<div class="legend-swatch" style="background:#1e293b;border-color:#d97706;"></div>
<span>Classify</span>
</div>
<div class="legend-item">
<div class="legend-swatch" style="background:#1e293b;border-color:#059669;"></div>
<span>Evaluate</span>
</div>
<div class="legend-item">
<div class="legend-swatch" style="background:#1e293b;border-color:#db2777;"></div>
<span>Generate</span>
</div>
<div class="legend-item">
<div class="legend-swatch" style="background:#1e293b;border-color:#4f46e5;"></div>
<span>Pipeline</span>
</div>
<div class="legend-item">
<div class="legend-swatch" style="background:#1e293b;border-color:#dc2626;"></div>
<span>Alert</span>
</div>
</div>
</div>
<div class="note">
<strong>How it works:</strong> User pastes a job URL → AutoJobs fetches & parses the listing → classifies it by role type, seniority & location → evaluates across 6 weighted dimensions (CV match, comp, seniority, culture, tech, interview feasibility) → decision gate at score 70 → if pass, generates ATS CV PDF + personalized cover letter + interview prep → job enters the pipeline board → moves Wishlist → Applied → Interview → Result as user takes action → Horus Telegram bot sends alerts at key moments. Future: ICP learning loop tracks conversions and auto-tunes scoring weights.
</div>
</body>
</html>