Spaces:

abdullah090809
/

Job_Tracker_API

Running

App Files Files Community

abdullah090809 commited on 1 day ago

Commit

692114d

1 Parent(s): cf25e9f

Added Front End

Browse files

Files changed (6) hide show

.dockerignore +10 -0
Dockerfile +12 -0
app/cores/config.py +3 -1
app/main.py +13 -3
app/services/ai_service.py +8 -9
static/index.html +1107 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,10 @@

+venv/
+__pycache__/
+*.pyc
+.env
+.env.*
+.git/
+.gitignore
+*.md
+.vscode/
+.idea/

Dockerfile ADDED Viewed

	@@ -0,0 +1,12 @@

+FROM python:3.11-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+EXPOSE 7860
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

app/cores/config.py CHANGED Viewed

@@ -1,7 +1,9 @@
 from pydantic_settings import BaseSettings
 from pathlib import Path
-env_path = Path(__file__).resolve().parent.parent.parent / ".env"
 class Settings(BaseSettings):
     DATABASE_HOSTNAME: str

 from pydantic_settings import BaseSettings
 from pathlib import Path
+import os
+ENV_FILE = os.getenv("ENV_FILE", ".env")
+env_path = Path(__file__).resolve().parent.parent.parent / ENV_FILE
 class Settings(BaseSettings):
     DATABASE_HOSTNAME: str

app/main.py CHANGED Viewed

@@ -1,12 +1,22 @@
 from fastapi import FastAPI
 from app.routers import application, auth, user
 app = FastAPI(title="Job Tracker API")
 app.include_router(auth.router)
 app.include_router(user.router)
 app.include_router(application.router)
-@app.get("/")
-def root():
-    return {"message": "Job Tracker API is running"}

 from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
 from app.routers import application, auth, user
 app = FastAPI(title="Job Tracker API")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # tighten this to your actual frontend domain once deployed
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 app.include_router(auth.router)
 app.include_router(user.router)
 app.include_router(application.router)
+# Serve the frontend (static/index.html) at "/".
+# Must be mounted AFTER the routers above so API routes take priority.
+app.mount("/", StaticFiles(directory="static", html=True), name="static")

app/services/ai_service.py CHANGED Viewed

@@ -1,8 +1,9 @@
 import json
-import google.generativeai as genai
 from app.cores.config import settings
-genai.configure(api_key=settings.GEMINI_API_KEY)
 SYSTEM_PROMPT = """You are a resume analysis assistant. Compare the candidate's resume text against a job description and respond with ONLY valid JSON (no markdown, no preamble, no code fences) in exactly this shape:
@@ -19,10 +20,6 @@ SYSTEM_PROMPT = """You are a resume analysis assistant. Compare the candidate's
 }
 """
-model = genai.GenerativeModel(
-    model_name="gemini-2.5-flash",
-    system_instruction=SYSTEM_PROMPT,
-)
 def analyze_resume_against_jd(resume_text: str, jd_text: str) -> dict:
     user_prompt = f"""RESUME:
@@ -32,9 +29,11 @@ JOB DESCRIPTION:
 {jd_text}
 """
-    response = model.generate_content(
-        user_prompt,
-        generation_config=genai.types.GenerationConfig(
             temperature=0.3,
             response_mime_type="application/json",
         ),

 import json
+from google import genai
+from google.genai import types
 from app.cores.config import settings
+client = genai.Client(api_key=settings.GEMINI_API_KEY)
 SYSTEM_PROMPT = """You are a resume analysis assistant. Compare the candidate's resume text against a job description and respond with ONLY valid JSON (no markdown, no preamble, no code fences) in exactly this shape:
 }
 """
 def analyze_resume_against_jd(resume_text: str, jd_text: str) -> dict:
     user_prompt = f"""RESUME:
 {jd_text}
 """
+    response = client.models.generate_content(
+        model="gemini-2.5-flash",
+        contents=user_prompt,
+        config=types.GenerateContentConfig(
+            system_instruction=SYSTEM_PROMPT,
             temperature=0.3,
             response_mime_type="application/json",
         ),

static/index.html ADDED Viewed

	@@ -0,0 +1,1107 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Pathway — Job Application Tracker</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --bg: #15120F;
+    --surface: #1D1813;
+    --surface-raised: #251F18;
+    --border: #332B22;
+    --accent: #D98E3B;
+    --accent-soft: rgba(217,142,59,0.14);
+    --text: #F3EDE2;
+    --text-muted: #A89A87;
+    --text-faint: #6E6256;
+    --applied: #7A93B0;
+    --interview: #D9B23A;
+    --offer: #6FA988;
+    --rejected: #B5563C;
+    --radius: 10px;
+    --shadow: 0 8px 24px rgba(0,0,0,0.35);
+  }
+  *{box-sizing:border-box;}
+  body{margin:0;}
+  html,body{
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'Inter', sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  @media (prefers-reduced-motion: reduce){
+    *{ animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
+  }
+  body::before{
+    content:"";
+    position:fixed; inset:0;
+    pointer-events:none;
+    z-index:0;
+    opacity:0.5;
+    background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
+    background-size: 3px 3px;
+  }
+  @keyframes fadeUp{
+    from{ opacity:0; transform: translateY(10px); }
+    to{ opacity:1; transform: translateY(0); }
+  }
+  @keyframes fadeIn{
+    from{ opacity:0; }
+    to{ opacity:1; }
+  }
+  @keyframes scaleIn{
+    from{ opacity:0; transform: scale(0.96) translateY(6px); }
+    to{ opacity:1; transform: scale(1) translateY(0); }
+  }
+  @keyframes drawLine{
+    from{ transform: scaleX(0); }
+    to{ transform: scaleX(1); }
+  }
+  @keyframes glowPulse{
+    0%,100%{ box-shadow: 0 0 0 4px var(--accent-soft); }
+    50%{ box-shadow: 0 0 0 7px rgba(217,142,59,0.06); }
+  }
+  @keyframes driftA{
+    0%,100%{ transform: translate(0,0); }
+    50%{ transform: translate(24px,-18px); }
+  }
+  @keyframes driftB{
+    0%,100%{ transform: translate(0,0); }
+    50%{ transform: translate(-20px,16px); }
+  }
+  h1,h2,h3,.display{
+    font-family: 'Fraunces', serif;
+    font-weight: 500;
+    letter-spacing: -0.01em;
+  }
+  a{color:inherit;}
+  button{font-family:inherit;}
+  ::selection{background: var(--accent-soft);}
+  /* ---------- Layout shells ---------- */
+  #app{min-height:100vh;}
+  .hidden{display:none !important;}
+  /* ---------- Auth screen ---------- */
+  .auth-shell{
+    min-height:100vh;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    padding:24px;
+    position:relative;
+    overflow:hidden;
+  }
+  .auth-shell::before{
+    content:"";
+    position:absolute;
+    top:-20%; right:-10%;
+    width:520px; height:520px;
+    background: radial-gradient(circle, rgba(217,142,59,0.10), transparent 70%);
+    pointer-events:none;
+    animation: driftA 14s ease-in-out infinite;
+  }
+  .auth-shell::after{
+    content:"";
+    position:absolute;
+    bottom:-25%; left:-12%;
+    width:460px; height:460px;
+    background: radial-gradient(circle, rgba(111,169,136,0.08), transparent 70%);
+    pointer-events:none;
+    animation: driftB 17s ease-in-out infinite;
+  }
+  .auth-card{
+    width:100%;
+    max-width:400px;
+    background: var(--surface);
+    border:1px solid var(--border);
+    border-radius:14px;
+    padding:36px 32px;
+    box-shadow: var(--shadow);
+    position:relative;
+    z-index:1;
+    animation: scaleIn .45s cubic-bezier(.16,1,.3,1);
+  }
+  .auth-mark{
+    display:flex; align-items:center; gap:10px;
+    margin-bottom: 28px;
+  }
+  .auth-mark .dot{
+    width:9px; height:9px; border-radius:50%;
+    background: var(--accent);
+    animation: glowPulse 2.6s ease-in-out infinite;
+  }
+  .auth-mark span{
+    font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color: var(--text-muted);
+  }
+  .auth-card h1{
+    font-size: 28px;
+    margin: 0 0 6px 0;
+  }
+  .auth-card p.sub{
+    color: var(--text-muted);
+    font-size: 14px;
+    margin: 0 0 26px 0;
+    line-height:1.5;
+  }
+  .field{margin-bottom:16px;}
+  .field label{
+    display:block;
+    font-size:12px;
+    color: var(--text-muted);
+    margin-bottom:6px;
+    letter-spacing:0.02em;
+  }
+  .field input, .field select, .field textarea{
+    width:100%;
+    background: var(--surface-raised);
+    border:1px solid var(--border);
+    color: var(--text);
+    border-radius:8px;
+    padding:11px 13px;
+    font-size:14px;
+    font-family:inherit;
+    outline:none;
+    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
+  }
+  .field input:focus, .field select:focus, .field textarea:focus{
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+  }
+  .field textarea{resize:vertical; min-height:90px; line-height:1.5;}
+  .btn{
+    appearance:none;
+    border:none;
+    border-radius:8px;
+    padding:11px 18px;
+    font-size:14px;
+    font-weight:600;
+    cursor:pointer;
+    transition: transform .12s cubic-bezier(.34,1.56,.64,1), opacity .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
+    position:relative;
+  }
+  .btn:hover{ transform: translateY(-1px); }
+  .btn:active{transform: scale(0.97) translateY(0);}
+  .btn-primary{
+    background: var(--accent);
+    color: #18130C;
+    width:100%;
+    box-shadow: 0 1px 0 rgba(0,0,0,0.15);
+  }
+  .btn-primary:hover{opacity:0.94; box-shadow: 0 4px 14px rgba(217,142,59,0.22);}
+  .btn-ghost{
+    background:transparent;
+    color: var(--text-muted);
+    border:1px solid var(--border);
+  }
+  .btn-ghost:hover{ color: var(--text); border-color: var(--text-faint);}
+  .btn-danger{
+    background: rgba(181,86,60,0.14);
+    color: var(--rejected);
+    border:1px solid rgba(181,86,60,0.3);
+  }
+  .btn-danger:hover{background: rgba(181,86,60,0.22);}
+  .btn-small{ padding:7px 12px; font-size:12.5px; }
+  .auth-switch{
+    margin-top:20px;
+    font-size:13px;
+    color: var(--text-muted);
+    text-align:center;
+  }
+  .auth-switch button{
+    background:none; border:none; color: var(--accent);
+    cursor:pointer; font-size:13px; font-weight:600; padding:0;
+  }
+  .form-error{
+    background: rgba(181,86,60,0.12);
+    border:1px solid rgba(181,86,60,0.3);
+    color:#E2A292;
+    font-size:13px;
+    padding:10px 12px;
+    border-radius:8px;
+    margin-bottom:16px;
+    line-height:1.4;
+  }
+  .form-ok{
+    background: rgba(111,169,136,0.12);
+    border:1px solid rgba(111,169,136,0.3);
+    color:#A9D2BC;
+    font-size:13px;
+    padding:10px 12px;
+    border-radius:8px;
+    margin-bottom:16px;
+    line-height:1.4;
+  }
+  /* ---------- Top bar ---------- */
+  .topbar{
+    display:flex; align-items:center; justify-content:space-between;
+    padding:18px 32px;
+    border-bottom:1px solid var(--border);
+    position:sticky; top:0;
+    background: rgba(21,18,15,0.88);
+    backdrop-filter: blur(8px);
+    z-index:20;
+    animation: fadeUp .4s ease;
+  }
+  .topbar .mark{display:flex; align-items:center; gap:10px;}
+  .topbar .mark .dot{
+    width:9px; height:9px; border-radius:50%;
+    background: var(--accent);
+    animation: glowPulse 2.6s ease-in-out infinite;
+  }
+  .topbar .mark span{font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);}
+  .topbar-right{display:flex; align-items:center; gap:10px;}
+  .user-pill{
+    font-size:13px; color: var(--text-muted);
+    padding:7px 12px; border:1px solid var(--border); border-radius:20px;
+  }
+  .container{ max-width:1180px; margin:0 auto; padding:32px; }
+  /* ---------- Trail / pipeline strip (signature element) ---------- */
+  .trail{
+    display:flex;
+    align-items:stretch;
+    gap:0;
+    margin-bottom:36px;
+    border:1px solid var(--border);
+    border-radius:14px;
+    overflow:hidden;
+    background: var(--surface);
+    animation: fadeUp .5s ease .05s both;
+  }
+  .trail-stop{
+    flex:1;
+    padding:20px 22px;
+    position:relative;
+    border-right:1px solid var(--border);
+    transition: background .2s ease;
+  }
+  .trail-stop:hover{ background: rgba(255,255,255,0.015); }
+  .trail-stop:last-child{border-right:none;}
+  .trail-stop::after{
+    content:"";
+    position:absolute;
+    bottom:0; left:0; right:0;
+    height:3px;
+    background: var(--stop-color, var(--accent));
+    opacity:0.85;
+    transform-origin: left;
+    animation: drawLine .7s cubic-bezier(.16,1,.3,1) .15s both;
+  }
+  .trail-stop .count{
+    font-family:'Fraunces', serif;
+    font-size:32px;
+    font-weight:500;
+    line-height:1;
+    margin-bottom:6px;
+  }
+  .trail-stop .label{
+    font-size:12px;
+    letter-spacing:0.08em;
+    text-transform:uppercase;
+    color: var(--text-muted);
+  }
+  /* ---------- Toolbar ---------- */
+  .toolbar{
+    display:flex; align-items:center; justify-content:space-between;
+    margin-bottom:22px;
+    gap:16px;
+    flex-wrap:wrap;
+    animation: fadeUp .5s ease .1s both;
+  }
+  .toolbar h2{font-size:21px; margin:0;}
+  .toolbar-actions{display:flex; gap:10px; align-items:center;}
+  /* ---------- Board ---------- */
+  .board{
+    display:grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap:18px;
+  }
+  @media (max-width: 980px){ .board{grid-template-columns:repeat(2,1fr);} }
+  @media (max-width: 600px){ .board{grid-template-columns:1fr;} }
+  .col{
+    background: var(--surface);
+    border:1px solid var(--border);
+    border-radius:12px;
+    padding:14px;
+    min-height:140px;
+    animation: fadeUp .5s ease both;
+  }
+  .col:nth-child(1){ animation-delay: .08s; }
+  .col:nth-child(2){ animation-delay: .14s; }
+  .col:nth-child(3){ animation-delay: .20s; }
+  .col:nth-child(4){ animation-delay: .26s; }
+  .col-head{
+    display:flex; align-items:center; gap:8px;
+    margin-bottom:14px;
+    padding:0 2px;
+  }
+  .col-head .swatch{ width:8px; height:8px; border-radius:50%; }
+  .col-head .name{ font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-muted); }
+  .col-head .num{ margin-left:auto; font-size:12px; color: var(--text-faint); }
+  .card{
+    background: var(--surface-raised);
+    border:1px solid var(--border);
+    border-radius:10px;
+    padding:14px;
+    margin-bottom:10px;
+    cursor:pointer;
+    transition: border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
+    animation: fadeUp .35s ease both;
+  }
+  .card:hover{ border-color: var(--text-faint); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
+  .card:active{ transform: translateY(0) scale(0.99); }
+  .card .role{ font-size:14.5px; font-weight:600; margin-bottom:3px; }
+  .card .company{ font-size:13px; color: var(--text-muted); margin-bottom:10px; }
+  .card .meta{ display:flex; align-items:center; justify-content:space-between; }
+  .card .date{ font-size:11.5px; color: var(--text-faint); }
+  .card .jd-flag{ font-size:11px; color: var(--accent); }
+  .empty-col{
+    font-size:12.5px; color: var(--text-faint);
+    padding:16px 4px; text-align:center; line-height:1.5;
+  }
+  /* ---------- Modal ---------- */
+  .overlay{
+    position:fixed; inset:0;
+    background: rgba(10,8,6,0.6);
+    backdrop-filter: blur(2px);
+    display:flex; align-items:flex-start; justify-content:center;
+    padding:48px 20px;
+    overflow-y:auto;
+    z-index:50;
+    animation: fadeIn .2s ease;
+  }
+  .modal{
+    width:100%; max-width:560px;
+    background: var(--surface);
+    border:1px solid var(--border);
+    border-radius:14px;
+    box-shadow: var(--shadow);
+    padding:28px;
+    animation: scaleIn .28s cubic-bezier(.16,1,.3,1);
+  }
+  .modal-head{
+    display:flex; align-items:center; justify-content:space-between;
+    margin-bottom:20px;
+  }
+  .modal-head h3{ font-size:19px; margin:0; }
+  .modal-close{
+    background:none; border:none; color: var(--text-muted);
+    font-size:20px; cursor:pointer; line-height:1; padding:4px;
+  }
+  .modal-close:hover{ color: var(--text); }
+  .modal-actions{
+    display:flex; gap:10px; margin-top:22px;
+    justify-content:flex-end;
+  }
+  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
+  .badge{
+    display:inline-flex; align-items:center; gap:6px;
+    font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase;
+    padding:4px 9px; border-radius:20px;
+    border:1px solid var(--border);
+  }
+  .badge .dot{ width:6px; height:6px; border-radius:50%; }
+  /* ---------- Analysis result ---------- */
+  .score-ring{
+    width:84px; height:84px;
+    border-radius:50%;
+    display:flex; align-items:center; justify-content:center;
+    font-family:'Fraunces', serif; font-size:24px;
+    flex-shrink:0;
+    border: 6px solid var(--surface-raised);
+  }
+  .analysis-head{ display:flex; align-items:center; gap:18px; margin-bottom:18px;}
+  .analysis-head .summary{ font-size:13.5px; color: var(--text-muted); line-height:1.55; }
+  .skill-group{ margin-bottom:16px; }
+  .skill-group h4{
+    font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
+    color: var(--text-faint); margin:0 0 8px 0; font-weight:600;
+  }
+  .skill-chips{ display:flex; flex-wrap:wrap; gap:6px; }
+  .chip{
+    font-size:12px; padding:5px 10px; border-radius:20px;
+    background: var(--surface-raised); border:1px solid var(--border);
+  }
+  .chip.match{ color:#A9D2BC; border-color: rgba(111,169,136,0.3); }
+  .chip.gap{ color:#E2A292; border-color: rgba(181,86,60,0.3); }
+  .tailored-block{
+    background: var(--surface-raised);
+    border:1px solid var(--border);
+    border-radius:10px;
+    padding:16px;
+    margin-top:6px;
+  }
+  .tailored-block p{ font-size:13.5px; line-height:1.6; color: var(--text); margin:0 0 12px 0; }
+  .tailored-block ul{ margin:0; padding-left:18px; }
+  .tailored-block li{ font-size:13px; line-height:1.6; color: var(--text-muted); margin-bottom:4px; }
+  .spinner{
+    width:16px; height:16px;
+    border:2px solid rgba(255,255,255,0.25);
+    border-top-color: #18130C;
+    border-radius:50%;
+    animation: spin .7s linear infinite;
+    display:inline-block;
+    vertical-align:middle;
+  }
+  @keyframes spin{ to{ transform: rotate(360deg); } }
+  .resume-box{
+    border:1px dashed var(--border);
+    border-radius:10px;
+    padding:16px;
+    font-size:13px;
+    color: var(--text-muted);
+    display:flex; align-items:center; justify-content:space-between;
+    gap:12px;
+    flex-wrap:wrap;
+  }
+  .toast-stack{
+    position:fixed; bottom:24px; right:24px;
+    display:flex; flex-direction:column; gap:10px;
+    z-index:100;
+  }
+  .toast{
+    background: var(--surface-raised);
+    border:1px solid var(--border);
+    border-radius:10px;
+    padding:12px 16px;
+    font-size:13px;
+    box-shadow: var(--shadow);
+    max-width:320px;
+    animation: toastIn .2s ease;
+  }
+  .toast.err{ border-color: rgba(181,86,60,0.4); color:#E2A292; }
+  .toast.ok{ border-color: rgba(111,169,136,0.4); color:#A9D2BC; }
+  @keyframes toastIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
+  @keyframes toastOut{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(6px);} }
+  .toast.leaving{ animation: toastOut .18s ease forwards; }
+</style>
+</head>
+<body>
+<div id="app"></div>
+<div class="toast-stack" id="toastStack"></div>
+<script>
+/* ============================================================
+   Pathway — Job Application Tracker frontend
+   Vanilla JS, talks to the FastAPI backend via fetch.
+   ============================================================ */
+const STATUS_META = {
+  applied:   { label: "Applied",   color: "var(--applied)" },
+  interview: { label: "Interview", color: "var(--interview)" },
+  offer:     { label: "Offer",     color: "var(--offer)" },
+  rejected:  { label: "Rejected",  color: "var(--rejected)" },
+};
+const STATUS_ORDER = ["applied", "interview", "offer", "rejected"];
+// Set this to your deployed API URL when you ship to HF Spaces / Supabase.
+const API_BASE = "http://127.0.0.1:8000";
+const state = {
+  apiBase: API_BASE,
+  token: localStorage.getItem("pathway_token") || null,
+  applications: [],
+  view: "login", // login | register | dashboard
+};
+const root = document.getElementById("app");
+/* ---------------- API helper ---------------- */
+async function api(path, { method = "GET", body, auth = true, isForm = false } = {}) {
+  const headers = {};
+  if (!isForm) headers["Content-Type"] = "application/json";
+  if (auth && state.token) headers["Authorization"] = "Bearer " + state.token;
+  const res = await fetch(state.apiBase + path, {
+    method,
+    headers,
+    body: isForm ? body : body ? JSON.stringify(body) : undefined,
+  });
+  let data = null;
+  try { data = await res.json(); } catch (e) { /* no body */ }
+  if (!res.ok) {
+    const detail = data && data.detail ? data.detail : `Request failed (${res.status})`;
+    throw new Error(typeof detail === "string" ? detail : JSON.stringify(detail));
+  }
+  return data;
+}
+async function apiLogin(email, password) {
+  const form = new URLSearchParams();
+  form.append("username", email);
+  form.append("password", password);
+  const res = await fetch(state.apiBase + "/login", {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: form.toString(),
+  });
+  let data = null;
+  try { data = await res.json(); } catch (e) {}
+  if (!res.ok) throw new Error((data && data.detail) || "Login failed");
+  return data;
+}
+/* ---------------- Toasts ---------------- */
+function toast(msg, kind = "ok") {
+  const stack = document.getElementById("toastStack");
+  const el = document.createElement("div");
+  el.className = "toast " + (kind === "err" ? "err" : "ok");
+  el.textContent = msg;
+  stack.appendChild(el);
+  setTimeout(() => {
+    el.classList.add("leaving");
+    setTimeout(() => el.remove(), 200);
+  }, 4000);
+}
+/* ---------------- Render router ---------------- */
+function render() {
+  if (state.view === "dashboard" && state.token) {
+    renderDashboard();
+  } else if (state.view === "register") {
+    renderAuth("register");
+  } else {
+    renderAuth("login");
+  }
+}
+/* ---------------- Auth screens ---------------- */
+function renderAuth(mode) {
+  root.innerHTML = `
+    <div class="auth-shell">
+      <div class="auth-card">
+        <div class="auth-mark"><div class="dot"></div><span>Pathway</span></div>
+        <h1>${mode === "login" ? "Welcome back" : "Start your trail"}</h1>
+        <p class="sub">${mode === "login"
+          ? "Sign in to keep tracking where every application stands."
+          : "Create an account to start tracking applications and matching your resume to roles."}</p>
+        <div id="authMsg"></div>
+        <form id="authForm">
+          <div class="field">
+            <label>Email</label>
+            <input type="email" id="authEmail" required placeholder="you@example.com" autocomplete="email">
+          </div>
+          <div class="field">
+            <label>Password</label>
+            <input type="password" id="authPassword" required placeholder="••••••••" autocomplete="${mode === "login" ? "current-password" : "new-password"}">
+          </div>
+          <button class="btn btn-primary" type="submit" id="authSubmit">${mode === "login" ? "Sign in" : "Create account"}</button>
+        </form>
+        <div class="auth-switch">
+          ${mode === "login"
+            ? `New here? <button id="switchToRegister">Create an account</button>`
+            : `Already have an account? <button id="switchToLogin">Sign in</button>`}
+        </div>
+      </div>
+    </div>
+  `;
+  const switchBtn = document.getElementById(mode === "login" ? "switchToRegister" : "switchToLogin");
+  switchBtn.addEventListener("click", () => {
+    state.view = mode === "login" ? "register" : "login";
+    render();
+  });
+  document.getElementById("authForm").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const email = document.getElementById("authEmail").value.trim();
+    const password = document.getElementById("authPassword").value;
+    const msgEl = document.getElementById("authMsg");
+    const submitBtn = document.getElementById("authSubmit");
+    msgEl.innerHTML = "";
+    submitBtn.disabled = true;
+    submitBtn.innerHTML = `<span class="spinner"></span>`;
+    try {
+      if (mode === "register") {
+        await api("/users", { method: "POST", body: { email, password }, auth: false });
+        const tokenData = await apiLogin(email, password);
+        state.token = tokenData.access_token;
+        localStorage.setItem("pathway_token", state.token);
+        toast("Account created. Welcome to Pathway.");
+        await loadApplications();
+        state.view = "dashboard";
+        render();
+      } else {
+        const tokenData = await apiLogin(email, password);
+        state.token = tokenData.access_token;
+        localStorage.setItem("pathway_token", state.token);
+        await loadApplications();
+        state.view = "dashboard";
+        render();
+      }
+    } catch (err) {
+      msgEl.innerHTML = `<div class="form-error">${escapeHtml(err.message)}</div>`;
+      submitBtn.disabled = false;
+      submitBtn.textContent = mode === "login" ? "Sign in" : "Create account";
+    }
+  });
+}
+/* ---------------- Dashboard ---------------- */
+async function loadApplications() {
+  state.applications = await api("/applications");
+}
+function renderDashboard() {
+  const counts = { applied: 0, interview: 0, offer: 0, rejected: 0 };
+  state.applications.forEach(a => { counts[a.status] = (counts[a.status] || 0) + 1; });
+  root.innerHTML = `
+    <div class="topbar">
+      <div class="mark"><div class="dot"></div><span>Pathway</span></div>
+      <div class="topbar-right">
+        <button class="btn btn-ghost btn-small" id="resumeBtn">Resume</button>
+        <button class="btn btn-ghost btn-small" id="passwordBtn">Password</button>
+        <button class="btn btn-ghost btn-small" id="logoutBtn">Sign out</button>
+      </div>
+    </div>
+    <div class="container">
+      <div class="trail">
+        ${STATUS_ORDER.map(s => `
+          <div class="trail-stop" style="--stop-color:${STATUS_META[s].color}">
+            <div class="count" data-target="${counts[s] || 0}">0</div>
+            <div class="label">${STATUS_META[s].label}</div>
+          </div>
+        `).join("")}
+      </div>
+      <div class="toolbar">
+        <h2>Your applications</h2>
+        <div class="toolbar-actions">
+          <button class="btn btn-primary btn-small" id="newAppBtn">+ New application</button>
+        </div>
+      </div>
+      <div class="board">
+        ${STATUS_ORDER.map(s => renderColumn(s)).join("")}
+      </div>
+    </div>
+  `;
+  document.getElementById("logoutBtn").addEventListener("click", () => {
+    state.token = null;
+    localStorage.removeItem("pathway_token");
+    state.view = "login";
+    render();
+  });
+  document.getElementById("newAppBtn").addEventListener("click", () => openApplicationModal());
+  document.getElementById("resumeBtn").addEventListener("click", () => openResumeModal());
+  document.getElementById("passwordBtn").addEventListener("click", () => openPasswordModal());
+  document.querySelectorAll(".trail-stop .count").forEach(el => animateCount(el));
+  state.applications.forEach(a => {
+    const el = document.getElementById("card-" + a.id);
+    if (el) el.addEventListener("click", () => openApplicationModal(a));
+  });
+}
+function renderColumn(statusKey) {
+  const meta = STATUS_META[statusKey];
+  const items = state.applications.filter(a => a.status === statusKey);
+  return `
+    <div class="col">
+      <div class="col-head">
+        <div class="swatch" style="background:${meta.color}"></div>
+        <div class="name">${meta.label}</div>
+        <div class="num">${items.length}</div>
+      </div>
+      ${items.length === 0
+        ? `<div class="empty-col">No applications here yet.</div>`
+        : items.map((a, i) => `
+          <div class="card" id="card-${a.id}" style="animation-delay:${0.32 + i * 0.05}s">
+            <div class="role">${escapeHtml(a.role)}</div>
+            <div class="company">${escapeHtml(a.company)}</div>
+            <div class="meta">
+              <span class="date">${formatDate(a.applied_date)}</span>
+              ${a.jd_text ? `<span class="jd-flag">JD attached</span>` : ""}
+            </div>
+          </div>
+        `).join("")}
+    </div>
+  `;
+}
+/* ---------------- Application modal (create / edit / analyze) ---------------- */
+function openApplicationModal(app = null) {
+  const isEdit = !!app;
+  const overlay = document.createElement("div");
+  overlay.className = "overlay";
+  overlay.innerHTML = `
+    <div class="modal">
+      <div class="modal-head">
+        <h3>${isEdit ? "Edit application" : "New application"}</h3>
+        <button class="modal-close" id="closeModal">&times;</button>
+      </div>
+      <div id="modalMsg"></div>
+      <form id="appForm">
+        <div class="row-2">
+          <div class="field">
+            <label>Company</label>
+            <input id="f_company" required value="${isEdit ? escapeAttr(app.company) : ""}">
+          </div>
+          <div class="field">
+            <label>Role</label>
+            <input id="f_role" required value="${isEdit ? escapeAttr(app.role) : ""}">
+          </div>
+        </div>
+        <div class="row-2">
+          <div class="field">
+            <label>Status</label>
+            <select id="f_status">
+              ${STATUS_ORDER.map(s => `<option value="${s}" ${isEdit && app.status === s ? "selected" : ""}>${STATUS_META[s].label}</option>`).join("")}
+            </select>
+          </div>
+          <div class="field">
+            <label>Applied date</label>
+            <input type="date" id="f_date" required value="${isEdit ? app.applied_date : new Date().toISOString().slice(0,10)}">
+          </div>
+        </div>
+        <div class="field">
+          <label>Job description</label>
+          <textarea id="f_jd" placeholder="Paste the job description here to enable AI matching...">${isEdit && app.jd_text ? escapeHtml(app.jd_text) : ""}</textarea>
+        </div>
+        <div class="field">
+          <label>Notes</label>
+          <textarea id="f_notes" placeholder="Referral, interview prep, contacts...">${isEdit && app.notes ? escapeHtml(app.notes) : ""}</textarea>
+        </div>
+        <div class="modal-actions">
+          ${isEdit ? `<button type="button" class="btn btn-danger btn-small" id="deleteBtn">Delete</button>` : ""}
+          ${isEdit ? `<button type="button" class="btn btn-ghost btn-small" id="analyzeBtn">Analyze match</button>` : ""}
+          <button type="button" class="btn btn-ghost btn-small" id="cancelBtn">Cancel</button>
+          <button type="submit" class="btn btn-primary btn-small" id="saveBtn">${isEdit ? "Save changes" : "Add application"}</button>
+        </div>
+      </form>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+  const close = () => overlay.remove();
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+  document.getElementById("closeModal").addEventListener("click", close);
+  document.getElementById("cancelBtn").addEventListener("click", close);
+  if (isEdit) {
+    document.getElementById("deleteBtn").addEventListener("click", async () => {
+      if (!confirm(`Delete the application for ${app.role} at ${app.company}?`)) return;
+      try {
+        await api(`/applications/${app.id}`, { method: "DELETE" });
+        toast("Application deleted.");
+        close();
+        await loadApplications();
+        render();
+      } catch (err) {
+        toast(err.message, "err");
+      }
+    });
+    document.getElementById("analyzeBtn").addEventListener("click", () => {
+      close();
+      openAnalysisModal(app);
+    });
+  }
+  document.getElementById("appForm").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const msgEl = document.getElementById("modalMsg");
+    const saveBtn = document.getElementById("saveBtn");
+    msgEl.innerHTML = "";
+    const payload = {
+      company: document.getElementById("f_company").value.trim(),
+      role: document.getElementById("f_role").value.trim(),
+      status: document.getElementById("f_status").value,
+      applied_date: document.getElementById("f_date").value,
+      jd_text: document.getElementById("f_jd").value.trim() || null,
+      notes: document.getElementById("f_notes").value.trim() || null,
+    };
+    saveBtn.disabled = true;
+    saveBtn.innerHTML = `<span class="spinner"></span>`;
+    try {
+      if (isEdit) {
+        await api(`/applications/${app.id}`, { method: "PUT", body: payload });
+        toast("Application updated.");
+      } else {
+        await api("/applications", { method: "POST", body: payload });
+        toast("Application added.");
+      }
+      close();
+      await loadApplications();
+      render();
+    } catch (err) {
+      msgEl.innerHTML = `<div class="form-error">${escapeHtml(err.message)}</div>`;
+      saveBtn.disabled = false;
+      saveBtn.textContent = isEdit ? "Save changes" : "Add application";
+    }
+  });
+}
+/* ---------------- Analysis modal ---------------- */
+function openAnalysisModal(app) {
+  const overlay = document.createElement("div");
+  overlay.className = "overlay";
+  overlay.innerHTML = `
+    <div class="modal">
+      <div class="modal-head">
+        <h3>Match analysis</h3>
+        <button class="modal-close" id="closeModal">&times;</button>
+      </div>
+      <div id="analysisBody">
+        <div style="display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:13.5px; padding: 20px 0;">
+          <span class="spinner" style="border-top-color: var(--accent);"></span>
+          Comparing your resume against this job description...
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+  const close = () => overlay.remove();
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+  document.getElementById("closeModal").addEventListener("click", close);
+  runAnalysis(app, overlay);
+}
+async function runAnalysis(app, overlay) {
+  const body = overlay.querySelector("#analysisBody");
+  try {
+    const result = await api(`/applications/${app.id}/analyze`, { method: "POST" });
+    const score = result.match_score ?? 0;
+    const ringColor = score >= 70 ? "var(--offer)" : score >= 40 ? "var(--interview)" : "var(--rejected)";
+    const tailored = result.tailored_resume || {};
+    body.innerHTML = `
+      <div class="analysis-head">
+        <div class="score-ring" style="border-color:${ringColor}; color:${ringColor}">${score}%</div>
+        <div class="summary">${escapeHtml(result.summary || "")}</div>
+      </div>
+      <div class="skill-group">
+        <h4>Matching skills</h4>
+        <div class="skill-chips">
+          ${(result.matching_skills || []).map(s => `<span class="chip match">${escapeHtml(s)}</span>`).join("") || `<span style="color:var(--text-faint); font-size:12.5px;">None detected</span>`}
+        </div>
+      </div>
+      <div class="skill-group">
+        <h4>Missing skills</h4>
+        <div class="skill-chips">
+          ${(result.missing_skills || []).map(s => `<span class="chip gap">${escapeHtml(s)}</span>`).join("") || `<span style="color:var(--text-faint); font-size:12.5px;">None detected</span>`}
+        </div>
+      </div>
+      ${tailored.professional_summary || (tailored.skills && tailored.skills.length) || (tailored.experience_bullets && tailored.experience_bullets.length) ? `
+      <div class="skill-group">
+        <h4>Tailored resume suggestions</h4>
+        <div class="tailored-block">
+          ${tailored.professional_summary ? `<p><strong>Summary:</strong> ${escapeHtml(tailored.professional_summary)}</p>` : ""}
+          ${tailored.skills && tailored.skills.length ? `<p style="margin-bottom:6px;"><strong>Skills to lead with:</strong></p>
+            <div class="skill-chips" style="margin-bottom:12px;">${tailored.skills.map(s => `<span class="chip">${escapeHtml(s)}</span>`).join("")}</div>` : ""}
+          ${tailored.experience_bullets && tailored.experience_bullets.length ? `
+            <p style="margin-bottom:6px;"><strong>Suggested bullets:</strong></p>
+            <ul>${tailored.experience_bullets.map(b => `<li>${escapeHtml(b)}</li>`).join("")}</ul>` : ""}
+        </div>
+      </div>` : ""}
+      <div class="modal-actions">
+        <button class="btn btn-ghost btn-small" id="closeAnalysis">Close</button>
+      </div>
+    `;
+    overlay.querySelector("#closeAnalysis").addEventListener("click", () => overlay.remove());
+  } catch (err) {
+    body.innerHTML = `
+      <div class="form-error">${escapeHtml(err.message)}</div>
+      <div class="modal-actions">
+        <button class="btn btn-ghost btn-small" id="retryAnalysis">Retry</button>
+      </div>
+    `;
+    overlay.querySelector("#retryAnalysis").addEventListener("click", () => runAnalysis(app, overlay));
+  }
+}
+/* ---------------- Resume modal ---------------- */
+function openResumeModal() {
+  const overlay = document.createElement("div");
+  overlay.className = "overlay";
+  overlay.innerHTML = `
+    <div class="modal" style="max-width:460px;">
+      <div class="modal-head">
+        <h3>Resume</h3>
+        <button class="modal-close" id="closeModal">&times;</button>
+      </div>
+      <p style="font-size:13.5px; color:var(--text-muted); line-height:1.6; margin-top:0;">
+        Upload a PDF resume. This is the document used for AI matching against job descriptions.
+      </p>
+      <div class="resume-box">
+        <span id="resumeStatus">No file selected.</span>
+        <label class="btn btn-ghost btn-small" style="cursor:pointer;">
+          Choose PDF
+          <input type="file" id="resumeFile" accept="application/pdf" style="display:none;">
+        </label>
+      </div>
+      <div id="resumeMsg" style="margin-top:14px;"></div>
+      <div class="modal-actions">
+        <button class="btn btn-ghost btn-small" id="cancelResume">Close</button>
+        <button class="btn btn-primary btn-small" id="uploadResumeBtn" disabled>Upload</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+  const close = () => overlay.remove();
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+  document.getElementById("closeModal").addEventListener("click", close);
+  document.getElementById("cancelResume").addEventListener("click", close);
+  let selectedFile = null;
+  document.getElementById("resumeFile").addEventListener("change", (e) => {
+    selectedFile = e.target.files[0] || null;
+    document.getElementById("resumeStatus").textContent = selectedFile ? selectedFile.name : "No file selected.";
+    document.getElementById("uploadResumeBtn").disabled = !selectedFile;
+  });
+  document.getElementById("uploadResumeBtn").addEventListener("click", async () => {
+    if (!selectedFile) return;
+    const msgEl = document.getElementById("resumeMsg");
+    const btn = document.getElementById("uploadResumeBtn");
+    btn.disabled = true;
+    btn.innerHTML = `<span class="spinner"></span>`;
+    const formData = new FormData();
+    formData.append("file", selectedFile);
+    try {
+      const result = await api("/users/resume", { method: "POST", body: formData, isForm: true });
+      msgEl.innerHTML = `<div class="form-ok">Resume uploaded — ${result.characters_extracted || 0} characters extracted.</div>`;
+      toast("Resume uploaded.");
+      btn.textContent = "Upload";
+      btn.disabled = false;
+    } catch (err) {
+      msgEl.innerHTML = `<div class="form-error">${escapeHtml(err.message)}</div>`;
+      btn.textContent = "Upload";
+      btn.disabled = false;
+    }
+  });
+}
+/* ---------------- Password modal ---------------- */
+function openPasswordModal() {
+  const overlay = document.createElement("div");
+  overlay.className = "overlay";
+  overlay.innerHTML = `
+    <div class="modal" style="max-width:420px;">
+      <div class="modal-head">
+        <h3>Change password</h3>
+        <button class="modal-close" id="closeModal">&times;</button>
+      </div>
+      <div id="pwMsg"></div>
+      <form id="pwForm">
+        <div class="field">
+          <label>Current password</label>
+          <input type="password" id="oldPw" required>
+        </div>
+        <div class="field">
+          <label>New password</label>
+          <input type="password" id="newPw" required>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn btn-ghost btn-small" id="cancelPw">Cancel</button>
+          <button type="submit" class="btn btn-primary btn-small" id="savePw">Update password</button>
+        </div>
+      </form>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+  const close = () => overlay.remove();
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+  document.getElementById("closeModal").addEventListener("click", close);
+  document.getElementById("cancelPw").addEventListener("click", close);
+  document.getElementById("pwForm").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const msgEl = document.getElementById("pwMsg");
+    const btn = document.getElementById("savePw");
+    btn.disabled = true;
+    btn.innerHTML = `<span class="spinner"></span>`;
+    try {
+      await api("/users", {
+        method: "PUT",
+        body: {
+          old_password: document.getElementById("oldPw").value,
+          new_password: document.getElementById("newPw").value,
+        },
+      });
+      msgEl.innerHTML = `<div class="form-ok">Password updated.</div>`;
+      toast("Password updated.");
+      setTimeout(close, 900);
+    } catch (err) {
+      msgEl.innerHTML = `<div class="form-error">${escapeHtml(err.message)}</div>`;
+      btn.disabled = false;
+      btn.textContent = "Update password";
+    }
+  });
+}
+/* ---------------- Utilities ---------------- */
+function escapeHtml(str) {
+  if (str === null || str === undefined) return "";
+  return String(str)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+function escapeAttr(str) { return escapeHtml(str); }
+function formatDate(d) {
+  if (!d) return "";
+  const date = new Date(d + "T00:00:00");
+  return date.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+}
+function animateCount(el) {
+  const target = parseInt(el.getAttribute("data-target"), 10) || 0;
+  if (target === 0) { el.textContent = "0"; return; }
+  const duration = 600;
+  const start = performance.now();
+  function step(now) {
+    const progress = Math.min((now - start) / duration, 1);
+    const eased = 1 - Math.pow(1 - progress, 3);
+    el.textContent = Math.round(eased * target);
+    if (progress < 1) requestAnimationFrame(step);
+  }
+  requestAnimationFrame(step);
+}
+/* ---------------- Boot ---------------- */
+(async function boot() {
+  if (state.token) {
+    try {
+      await loadApplications();
+      state.view = "dashboard";
+    } catch (err) {
+      state.token = null;
+      localStorage.removeItem("pathway_token");
+      state.view = "login";
+    }
+  }
+  render();
+})();
+</script>
+</body>
+</html>