HireScope - Concept 1 (List Centric)

by Alex Cowan

HTML

<div id="gem-rationale" class="rationale-popup">
        <strong>Why is this a Hidden Gem?</strong><br>
        Candidate has high skills match (92%) and relevant portfolio, despite ATS rejection due to "Years of Experience" keyword mismatch.
    </div>

    <div id="login-page" class="page active">
        <div class="login-card">
            <div class="logo">HireScope 🌱</div>
            <h2 style="margin-top:0;">Recruiter Login</h2>
            <input type="email" value="[email protected]" placeholder="Email">
            <input type="password" value="password123" placeholder="Password">
            <button id="login-btn" class="btn btn-primary" style="width: 100%; padding: 15px;">Sign In</button>
            <p style="margin-top: 20px; color: #888; font-size: 0.9em;">Concept 1: List-Centric Prototype</p>
        </div>
    </div>

    <div id="app-shell" style="display: none;">
        <header class="header">
            <div class="logo" onclick="showPage('dashboard')" style="cursor: pointer;">HireScope 🌱</div>
            <div class="user-profile">
                <span>Sarah (HR Manager)</span>
                <a href="#" id="logout-btn">Logout</a>
            </div>
        </header>

        <div id="dashboard-page" class="page">
            <main class="container">
                <div class="page-header">
                    <h1>My Open Requisitions</h1>
                </div>
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
                    <div class="card" onclick="viewJobDetails(1)" style="background: white; padding: 20px; border-radius: 8px; box-shadow: var(--card-shadow); cursor: pointer; border-left: 5px solid var(--primary-green);">
                        <h3 style="margin: 0 0 10px 0; color: var(--primary-green);">Social Media Manager</h3>
                        <p style="color: #666; margin: 0;">Marketing Dept</p>
                ...

CSS

/* --- Global Styles & Variables --- */
        :root {
            --primary-green: #2A4A3A;
            --secondary-mint: #98FF98;
            --accent-lime: #C5F277;
            --light-mint-bg: #E6F8E6;
            --background-white: #FFFFFF;
            --background-light: #f8f9fa;
            --text-dark: #333333;
            --text-light: #555555;
            --border-color: #DDDDDD;
            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;

            /* Feedback Status Colors */
            --vote-yes-bg: #E6F8E6; --vote-yes-border: #a3d9a3; --vote-yes-text: #1e6a1e;
            --vote-no-bg: #fdeaea; --vote-no-border: #f5c6cb; --vote-no-text: #b32d3a;
            --vote-maybe-bg: #fff9e6; --vote-maybe-border: #ffeeba; --vote-maybe-text: #856404;
            --vote-pending-bg: #f8f9fa; --vote-pending-border: #ccc; --vote-pending-text: #555;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--background-light);
            color: var(--text-dark);
            margin: 0;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        .page { display: none; }
        .page.active { display: block; }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 25px;
        }

        /* --- Login Page (Concept 1: Simple & Dark) --- */
        #login-page {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: var(--primary-green); /* Solid dark green per concept 1 */
        }
        .login-card {
            background: var(--background-white);
            padding: 50px;
            border-radius: 4px; /* Sharper corners for ATS feel */
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
         ...

JavaScript

console.log('this is console!');

// --- DATA ---
const candidates = [
  {
    id: 101,
    name: 'Jane Doe',
    role: 'Social Media Freelancer',
    score: 92,
    atsStatus: 'Rejected',
    isGem: true,
    isTop5: true,
    strengths: ['Expertise in TikTok', 'Direct Experience'],
    concerns: ['Short tenure'],
  },
  {
    id: 102,
    name: 'John Smith',
    role: 'Marketing Manager',
    score: 90,
    atsStatus: 'Active',
    isGem: false,
    isTop5: true,
    strengths: ['Data Driven', 'Team Lead'],
    concerns: ['Corporate background'],
  },
  {
    id: 103,
    name: 'Emily White',
    role: 'Content Writer',
    score: 88,
    atsStatus: 'Active',
    isGem: false,
    isTop5: true,
    strengths: ['Writing'],
    concerns: ['Less Strategy'],
  },
  {
    id: 104,
    name: 'Michael Brown',
    role: 'Intern',
    score: 85,
    atsStatus: 'New',
    isGem: false,
    isTop5: true,
    strengths: ['Potential'],
    concerns: ['Junior'],
  },
  {
    id: 105,
    name: 'Sarah Green',
    role: 'Hubspot Specialist',
    score: 82,
    atsStatus: 'Active',
    isGem: false,
    isTop5: true,
    strengths: ['Tech Stack'],
    concerns: ['Niche'],
  },
  {
    id: 106,
    name: 'David Chen',
    role: 'Designer',
    score: 79,
    atsStatus: 'Active',
    isGem: false,
    isTop5: false,
    strengths: [],
    concerns: [],
  },
];

let activeCandidateId = null;

// --- NAVIGATION ---
function showPage(pageId) {
  console.log("the pageID is " + pageId);
  document
    .querySelectorAll('.page')
    .forEach((p) => p.classList.remove('active'));
  if (pageId === 'login-page') {
    document.getElementById('app-shell').style.display = 'none';
    document.getElementById('login-page').style.display = 'flex';
    console.log('they clicked on login');
  } else {
    document.getElementById('login-page').style.display = 'none';
   ...