2026-09-02 17:38:50 +02:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > ProspectOS · Pipeline intelligence</ title >
< meta name = "description" content = "Prospect discovery and review dashboard" >
< link rel = "stylesheet" href = "styles.css" >
</ head >
< body >
2026-09-02 17:45:57 +02:00
< section class = "login-screen" id = "loginScreen" aria-labelledby = "loginTitle" >
< div class = "login-card" >
< a class = "brand login-brand" href = "#login" aria-label = "ProspectOS home" >< span class = "brand-mark" > ✦</ span >< span > Prospect< span class = "brand-light" > OS</ span ></ span ></ a >
< p class = "eyebrow" > WORKSPACE ACCESS</ p >
< h1 id = "loginTitle" > Welcome back</ h1 >
< p class = "login-subtitle" > Sign in to review your evidence-led growth pipeline.</ p >
< form id = "loginForm" novalidate >
< label > Email address< input id = "loginEmail" name = "email" type = "email" autocomplete = "username" placeholder = "you@company.com" required ></ label >
< label > Password< input id = "loginPassword" name = "password" type = "password" autocomplete = "current-password" placeholder = "Enter your password" required ></ label >
< p id = "loginMessage" class = "form-message" role = "alert" aria-live = "polite" ></ p >
< button class = "button primary login-submit" type = "submit" > Sign in < span aria-hidden = "true" > →</ span ></ button >
</ form >
< p class = "login-note" > Use the credentials configured for your workspace.</ p >
</ div >
</ section >
< div class = "app-shell" id = "dashboardShell" hidden >
2026-09-02 17:38:50 +02:00
< aside class = "sidebar" >
< a class = "brand" href = "#top" aria-label = "ProspectOS home" >< span class = "brand-mark" > ✦</ span >< span > Prospect< span class = "brand-light" > OS</ span ></ span ></ a >
< nav aria-label = "Primary navigation" >
< a class = "nav-item active" href = "#dashboard" >< span > ▦</ span > Dashboard</ a >
< a class = "nav-item" href = "#explorer" >< span > ⌕</ span > Prospect explorer</ a >
< a class = "nav-item" href = "#add" >< span > ＋ </ span > Add prospects</ a >
</ nav >
< div class = "sidebar-foot" >< div class = "live-dot" ></ div >< div >< strong > Workspace live</ strong >< small > Data sync is healthy</ small ></ div ></ div >
</ aside >
< main class = "main" id = "top" >
2026-09-02 17:45:57 +02:00
< header class = "topbar" >< button class = "mobile-menu" id = "menuBtn" aria-label = "Toggle navigation" > ☰</ button >< div class = "crumb" > Workspace < span > /</ span > Growth pipeline</ div >< div class = "top-actions" >< span class = "api-status" id = "apiStatus" > ● Connecting…</ span >< span class = "user-identity" id = "userIdentity" ></ span >< button class = "icon-button" aria-label = "Notifications" > ♢</ button >< button class = "logout-button" id = "logoutBtn" type = "button" > Log out</ button >< div class = "avatar" id = "userAvatar" > ?</ div ></ div ></ header >
2026-09-02 17:38:50 +02:00
< div class = "content" >
< section class = "hero" id = "dashboard" >< div >< p class = "eyebrow" > EVIDENCE-LED PROSPECTING</ p >< h1 > Good morning, Alex < span > ✦</ span ></ h1 >< p class = "hero-sub" > Your pipeline has < strong id = "heroCount" > 0 prospects</ strong > ready for review.</ p ></ div >< button class = "button primary" data-scroll = "#add" > ＋ </ button ></ section >
< section class = "metrics" aria-label = "Dashboard metrics" >
< article class = "metric-card" >< div class = "metric-icon violet" > ◎</ div >< div >< p > Total prospects</ p >< h2 id = "metricTotal" > 0</ h2 >< span class = "trend neutral" > ● Current workspace</ span ></ div ></ article >
< article class = "metric-card" >< div class = "metric-icon amber" > ◌</ div >< div >< p > Needs review</ p >< h2 id = "metricReview" > 0</ h2 >< span class = "trend neutral" > ● Human verification</ span ></ div ></ article >
< article class = "metric-card" >< div class = "metric-icon green" > ◉</ div >< div >< p > High-fit prospects</ p >< h2 id = "metricHigh" > 0</ h2 >< span class = "trend neutral" > ● Score 80+</ span ></ div ></ article >
< article class = "metric-card" >< div class = "metric-icon blue" > ◷</ div >< div >< p > Freshness under 7d</ p >< h2 id = "metricFresh" > 0%</ h2 >< span class = "trend neutral" > ● Evidence coverage</ span ></ div ></ article >
</ section >
< section class = "workspace-grid" id = "explorer" >
< div class = "explorer-panel panel" >< div class = "panel-heading" >< div >< p class = "eyebrow" > PIPELINE</ p >< h2 > Prospect explorer</ h2 ></ div >< button class = "button ghost" id = "refreshBtn" > ↻ Refresh</ button ></ div >
2026-09-02 17:57:17 +02:00
< div class = "filters" >< label class = "search-wrap" >< span > ⌕</ span >< input id = "searchInput" type = "search" placeholder = "Search companies, domains, locations…" autocomplete = "off" ></ label >< select id = "scoreFilter" aria-label = "Filter by score" >< option value = "all" > All scores</ option >< option value = "high" > High fit · 80+</ option >< option value = "medium" > Medium · 60– </ option >< option value = "low" > Low · under 60</ option ></ select >< select id = "statusFilter" aria-label = "Filter by status" >< option value = "all" > All statuses</ option >< option value = "review" > Needs review</ option >< option value = "reviewed" > Reviewed</ option >< option value = "suppressed" > Suppressed</ option ></ select >< select id = "websiteClassFilter" aria-label = "Filter by website class" >< option value = "all" > All website classes</ option >< option value = "business_site" > Business site</ option >< option value = "social_profile" > Social profile</ option >< option value = "missing" > Missing website</ option ></ select >< select id = "pipelineFilter" aria-label = "Filter by pipeline stage" >< option value = "all" > All pipeline stages</ option >< option value = "new" > New</ option >< option value = "qualified" > Qualified</ option >< option value = "review" > Review</ option >< option value = "suppressed" > Suppressed</ option ></ select ></ div >
< div class = "table-meta" >< span id = "resultCount" > Showing 0 prospects</ span >< span class = "legend" >< span class = "legend-dot high-dot" ></ span > High fit < span class = "legend-dot review-dot" ></ span > Needs review</ span >< label class = "page-size" > Rows < select id = "pageSize" aria-label = "Page size" >< option > 10</ option >< option > 25</ option >< option > 50</ option ></ select ></ label >< button class = "button ghost compact" id = "nextPageBtn" type = "button" > Next page →</ button ></ div >
2026-09-02 17:38:50 +02:00
< div class = "table-scroll" >< table >< thead >< tr >< th > Company</ th >< th > Fit score</ th >< th > Evidence</ th >< th > Freshness</ th >< th > Status</ th >< th ></ th ></ tr ></ thead >< tbody id = "prospectRows" ></ tbody ></ table ></ div >
</ div >
< aside class = "detail-panel panel" id = "detailPanel" >< div class = "empty-detail" >< span class = "empty-icon" > ◒</ span >< h3 > Select a prospect</ h3 >< p > Review evidence, confidence, and eligibility before taking action.</ p ></ div ></ aside >
</ section >
< section class = "lower-grid" id = "add" >< article class = "panel add-panel" >< div class = "panel-heading" >< div >< p class = "eyebrow" > INTAKE</ p >< h2 > Add a prospect</ h2 ></ div >< span class = "small-label" > Manual entry</ span ></ div >< form id = "addForm" >< div class = "form-grid" >< label > Company name< input required name = "name" placeholder = "Acme Inc." ></ label >< label > Website < span class = "optional" > optional</ span >< input name = "website" type = "url" placeholder = "https://acme.com" ></ label >< label > Location< input name = "location" placeholder = "Cape Town, ZA" ></ label >< label > Notes < span class = "optional" > optional</ span >< input name = "description" placeholder = "Why this is a fit…" ></ label ></ div >< div class = "form-footer" >< p id = "formMessage" class = "form-message" role = "status" ></ p >< button class = "button primary" type = "submit" > Add to review queue</ button ></ div ></ form ></ article >
< article class = "panel csv-panel" >< div class = "panel-heading" >< div >< p class = "eyebrow" > BULK INTAKE</ p >< h2 > CSV preview</ h2 ></ div >< label class = "button ghost upload-label" for = "csvInput" > ↑ Choose CSV</ label >< input id = "csvInput" type = "file" accept = ".csv,text/csv" hidden ></ div >< p class = "muted" > Preview rows before adding them to your review queue.</ p >< div id = "csvPreview" class = "csv-empty" >< span > ⊞</ span >< p > No file selected</ p >< small > CSV stays in your browser until you confirm.</ small ></ div ></ article ></ section >
< footer >< span > ProspectOS</ span >< span > Evidence-led prospecting · < a href = "#explorer" > Review queue</ a ></ span ></ footer >
</ div >
</ main >
</ div >
< script src = "app.js" ></ script >
</ body >
</ html >
