288 lines
18 KiB
HTML
288 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- viewport-fit=cover lets the layout reach under the iOS notch/home bar;
|
|
the safe-area insets in styles.css keep content clear of them.
|
|
No maximum-scale/user-scalable — pinch-zoom must stay available. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="format-detection" content="telephone=no" />
|
|
<title>TalentFlow · Applicant Tracking System</title>
|
|
<meta name="theme-color" content="#004d43" media="(prefers-color-scheme: light)" />
|
|
<meta name="theme-color" content="#0e1d1f" media="(prefers-color-scheme: dark)" />
|
|
|
|
<!-- Utopia brand type: Belleza (main headings) + Inter as the metric-
|
|
compatible stand-in for Neue Montreal, which is a licensed face.
|
|
If Neue Montreal is installed locally it wins via the CSS stack. -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
|
|
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-brand">
|
|
<div class="brand-logo">
|
|
<!-- Utopia Brands emblem — vector traced from the brand guideline.
|
|
The upright left edge is the abstract 'u'; the curve is the leaf. -->
|
|
<svg class="brand-mark" viewBox="0 0 100 64.46" aria-hidden="true">
|
|
<path d="M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="brand-text">
|
|
<span class="brand-name">TalentFlow</span>
|
|
<span class="brand-sub">Utopia Brands · ATS</span>
|
|
</div>
|
|
<button class="sidebar-collapse-btn" id="sidebarCollapse" title="Collapse sidebar" aria-label="Collapse sidebar">
|
|
<svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav" id="sidebarNav">
|
|
<div class="nav-section-label">Workspace</div>
|
|
<a class="nav-item" data-route="dashboard" href="#dashboard">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a class="nav-item" data-route="inbox" href="#inbox">
|
|
<svg viewBox="0 0 24 24"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
|
|
<span>Recruitment Inbox</span>
|
|
<span class="nav-badge nav-badge-alert" id="navInboxBadge">0</span>
|
|
</a>
|
|
<a class="nav-item" data-route="jobs" href="#jobs">
|
|
<svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
|
<span>Jobs</span>
|
|
<span class="nav-badge" id="navJobsBadge">0</span>
|
|
</a>
|
|
<a class="nav-item" data-route="candidates" href="#candidates">
|
|
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
<span>Candidates</span>
|
|
</a>
|
|
<a class="nav-item" data-route="talentpool" href="#talentpool">
|
|
<svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
|
|
<span>Talent Pool</span>
|
|
</a>
|
|
<a class="nav-item" data-route="pipeline" href="#pipeline">
|
|
<svg viewBox="0 0 24 24"><rect x="2" y="4" width="6" height="16" rx="1"/><rect x="9" y="4" width="6" height="10" rx="1"/><rect x="16" y="4" width="6" height="13" rx="1"/></svg>
|
|
<span>Pipeline</span>
|
|
</a>
|
|
|
|
<div class="nav-section-label">Recruiting</div>
|
|
<a class="nav-item" data-route="import" href="#import">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
<span>CV Import</span>
|
|
</a>
|
|
<a class="nav-item" data-route="jobboard" href="#jobboard">
|
|
<svg viewBox="0 0 24 24"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
|
|
<span>Job Board</span>
|
|
</a>
|
|
<a class="nav-item" data-route="recruiterhub" href="#recruiterhub">
|
|
<svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
<span>Recruiter Hub</span>
|
|
</a>
|
|
<a class="nav-item" data-route="tasks" href="#tasks">
|
|
<svg viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
|
<span>Tasks</span>
|
|
<span class="nav-badge" id="navTaskBadge">0</span>
|
|
</a>
|
|
<a class="nav-item" data-route="aiassistant" href="#aiassistant">
|
|
<svg viewBox="0 0 24 24"><path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/></svg>
|
|
<span>AI Assistant</span>
|
|
<span class="nav-badge nav-badge-ai">AI</span>
|
|
</a>
|
|
|
|
<div class="nav-section-label">Hiring</div>
|
|
<a class="nav-item" data-route="interviews" href="#interviews">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
<span>Interviews</span>
|
|
</a>
|
|
<a class="nav-item" data-route="assessments" href="#assessments">
|
|
<svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
|
<span>Assessments</span>
|
|
</a>
|
|
<a class="nav-item" data-route="offers" href="#offers">
|
|
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 15l2 2 4-4"/></svg>
|
|
<span>Offers</span>
|
|
</a>
|
|
<a class="nav-item" data-route="managers" href="#managers">
|
|
<svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
|
|
<span>Hiring Managers</span>
|
|
</a>
|
|
<a class="nav-item" data-route="calendar" href="#calendar">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
<span>Calendar</span>
|
|
</a>
|
|
|
|
<div class="nav-section-label">Insights</div>
|
|
<a class="nav-item" data-route="reports" href="#reports">
|
|
<svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
|
|
<span>Reports</span>
|
|
</a>
|
|
<a class="nav-item" data-route="analytics" href="#analytics">
|
|
<svg viewBox="0 0 24 24"><path d="M21 21H3V3"/><path d="M7 14l4-4 3 3 5-6"/></svg>
|
|
<span>Analytics</span>
|
|
</a>
|
|
<a class="nav-item" data-route="aistudio" href="#aistudio">
|
|
<svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
<span>AI Studio</span>
|
|
</a>
|
|
<a class="nav-item" data-route="notifications" href="#notifications">
|
|
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
|
<span>Notifications</span>
|
|
<span class="nav-badge nav-badge-alert" id="navNotifBadge">0</span>
|
|
</a>
|
|
|
|
<div class="nav-section-label">System</div>
|
|
<a class="nav-item" data-route="rbac" href="#rbac">
|
|
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
<span>Access Control</span>
|
|
</a>
|
|
<a class="nav-item" data-route="settings" href="#settings">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a class="nav-item" data-route="help" href="#help">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
<span>Help</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="usage-card">
|
|
<div class="usage-top"><span>Seats used</span><span id="usageCount">14 / 20</span></div>
|
|
<div class="usage-bar"><div class="usage-fill" style="width:70%"></div></div>
|
|
<button class="btn btn-ghost btn-block" onclick="App.toast('Upgrade flow coming soon','info')">Upgrade plan</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main -->
|
|
<div class="main-wrap">
|
|
<!-- Topbar -->
|
|
<header class="topbar">
|
|
<button class="icon-btn menu-toggle" id="mobileMenu" aria-label="Toggle menu">
|
|
<svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
</button>
|
|
|
|
<div class="topbar-search">
|
|
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
<input type="text" id="globalSearch" placeholder="Search jobs, candidates, managers…" autocomplete="off" />
|
|
<div class="search-results" id="searchResults"></div>
|
|
<kbd class="search-kbd">⌘K</kbd>
|
|
</div>
|
|
|
|
<div class="topbar-actions">
|
|
<button class="icon-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle theme">
|
|
<svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
|
<svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
</button>
|
|
|
|
<div class="dropdown" id="messagesDropdown">
|
|
<button class="icon-btn" data-dd-toggle title="Messages" aria-label="Messages">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|
<span class="dot dot-blue"></span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-wide" data-dd-panel>
|
|
<div class="dropdown-head">Messages</div>
|
|
<div id="messagesList"></div>
|
|
<div class="dropdown-foot"><a href="#notifications" data-route="notifications">Open inbox</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown" id="notifDropdown">
|
|
<button class="icon-btn" data-dd-toggle title="Notifications" aria-label="Notifications">
|
|
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
|
<span class="dot dot-red"></span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-wide" data-dd-panel>
|
|
<div class="dropdown-head">Notifications <button class="link-btn" onclick="App.markAllNotifsRead()">Mark all read</button></div>
|
|
<div id="notifList"></div>
|
|
<div class="dropdown-foot"><a href="#notifications" data-route="notifications">View all</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="topbar-divider"></div>
|
|
|
|
<div class="dropdown" id="profileDropdown">
|
|
<button class="profile-btn" data-dd-toggle>
|
|
<span class="avatar avatar-grad">AA</span>
|
|
<span class="profile-meta">
|
|
<span class="profile-name">Asfand Ahmed</span>
|
|
<span class="profile-role">Talent Lead</span>
|
|
</span>
|
|
<svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
|
|
</button>
|
|
<div class="dropdown-menu" data-dd-panel>
|
|
<div class="dropdown-profile">
|
|
<span class="avatar avatar-grad avatar-lg">AA</span>
|
|
<div>
|
|
<div class="dp-name">Asfand Ahmed</div>
|
|
<div class="dp-email">asfand.ahmed@utopiabrands.com</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-link" href="#settings" data-route="settings"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
|
|
<a class="dropdown-link" href="#settings" data-route="settings"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
|
<a class="dropdown-link" href="#help" data-route="help"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>Help Center</a>
|
|
<div class="dropdown-divider"></div>
|
|
<button class="dropdown-link danger" onclick="App.toast('Signed out (demo)','info')"><svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><line x1="21" y1="12" x2="9" y2="12"/></svg>Sign out</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content -->
|
|
<main class="content" id="main-content"></main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Assistant floating launcher -->
|
|
<button class="ai-fab" id="aiFab" title="AI Recruiter Assistant" aria-label="Open AI Assistant">
|
|
<svg viewBox="0 0 24 24"><path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/></svg>
|
|
</button>
|
|
|
|
<!-- AI Assistant slide-over dock -->
|
|
<div class="ai-dock" id="aiDock">
|
|
<div class="ai-dock-inner" id="aiDockInner"></div>
|
|
</div>
|
|
|
|
<!-- Modal root -->
|
|
<div class="modal-root" id="modalRoot"></div>
|
|
<!-- Toast root -->
|
|
<div class="toast-root" id="toastRoot"></div>
|
|
<!-- Mobile overlay -->
|
|
<div class="scrim" id="scrim"></div>
|
|
|
|
<script src="js/data.js"></script>
|
|
<script src="js/charts.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/dashboard.js"></script>
|
|
<script src="js/jobs.js"></script>
|
|
<script src="js/candidates.js"></script>
|
|
<script src="js/pipeline.js"></script>
|
|
<script src="js/interviews.js"></script>
|
|
<script src="js/assessments.js"></script>
|
|
<script src="js/offers.js"></script>
|
|
<script src="js/reports.js"></script>
|
|
<script src="js/analytics.js"></script>
|
|
<script src="js/settings.js"></script>
|
|
<script src="js/misc.js"></script>
|
|
<script src="js/inbox.js"></script>
|
|
<script src="js/import.js"></script>
|
|
<script src="js/jobboard.js"></script>
|
|
<script src="js/recruiterhub.js"></script>
|
|
<script src="js/aiassistant.js"></script>
|
|
<script src="js/rbac.js"></script>
|
|
<script src="js/tasks.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|