Add all demos (ristorante 6 templates), CRM, diagrams, resumes, batch CSVs

This commit is contained in:
2026-04-24 12:58:02 +02:00
parent 51d7df0f26
commit 9406bdc06b
19 changed files with 7092 additions and 0 deletions
+689
View File
@@ -0,0 +1,689 @@
<!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>