Spaces:

User290
/

Resumeparser

Sleeping

App Files Files Community

User290 commited on 7 days ago

Commit

bf2eb21

verified ·

1 Parent(s): 0f4a912

Create index.html

Browse files

Files changed (1) hide show

index.html +702 -0

index.html ADDED Viewed

	@@ -0,0 +1,702 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>ResumeAI — Smart Resume Parser</title>
+  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg: #0a0a0f;
+      --surface: #12121a;
+      --card: #1a1a26;
+      --border: #2a2a3a;
+      --accent: #7c6aff;
+      --accent2: #ff6a8a;
+      --text: #e8e8f0;
+      --muted: #6b6b80;
+      --success: #4ade80;
+      --warning: #fbbf24;
+    }
+    html { scroll-behavior: smooth; }
+    body {
+      font-family: 'Syne', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    /* BG Grid */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(124,106,255,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(124,106,255,0.03) 1px, transparent 1px);
+      background-size: 40px 40px;
+      pointer-events: none;
+      z-index: 0;
+    }
+    /* Glow orbs */
+    .orb {
+      position: fixed;
+      border-radius: 50%;
+      filter: blur(120px);
+      pointer-events: none;
+      z-index: 0;
+      opacity: 0.15;
+    }
+    .orb1 { width: 600px; height: 600px; background: var(--accent); top: -200px; left: -200px; }
+    .orb2 { width: 400px; height: 400px; background: var(--accent2); bottom: -100px; right: -100px; }
+    /* NAV */
+    nav {
+      position: relative;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 24px 48px;
+      border-bottom: 1px solid var(--border);
+    }
+    .logo {
+      font-family: 'DM Serif Display', serif;
+      font-size: 1.6rem;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .api-badge {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 8px 16px;
+      font-family: 'DM Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--muted);
+      cursor: pointer;
+      transition: all 0.2s;
+      text-decoration: none;
+    }
+    .api-badge:hover { border-color: var(--accent); color: var(--accent); }
+    .api-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); animation: pulse 2s infinite; }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+    /* HERO */
+    .hero {
+      position: relative;
+      z-index: 1;
+      text-align: center;
+      padding: 80px 24px 60px;
+    }
+    .hero-tag {
+      display: inline-block;
+      background: rgba(124,106,255,0.1);
+      border: 1px solid rgba(124,106,255,0.3);
+      color: var(--accent);
+      font-size: 0.75rem;
+      font-weight: 700;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      padding: 6px 16px;
+      border-radius: 100px;
+      margin-bottom: 24px;
+    }
+    h1 {
+      font-family: 'DM Serif Display', serif;
+      font-size: clamp(2.5rem, 6vw, 4.5rem);
+      line-height: 1.1;
+      margin-bottom: 20px;
+      max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    h1 em {
+      font-style: italic;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .hero-sub {
+      color: var(--muted);
+      font-size: 1.05rem;
+      max-width: 480px;
+      margin: 0 auto 48px;
+      line-height: 1.7;
+      font-weight: 400;
+    }
+    /* MAIN CARD */
+    .main-container {
+      position: relative;
+      z-index: 1;
+      max-width: 860px;
+      margin: 0 auto;
+      padding: 0 24px 80px;
+    }
+    /* API CONFIG SECTION */
+    .config-section {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 28px;
+      margin-bottom: 20px;
+    }
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+    .section-num {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 800;
+      color: white;
+      flex-shrink: 0;
+    }
+    .section-title {
+      font-size: 0.9rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--text);
+    }
+    .section-hint {
+      font-size: 0.78rem;
+      color: var(--muted);
+      margin-left: auto;
+    }
+    .field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+    .field-group:last-child { margin-bottom: 0; }
+    label {
+      font-size: 0.78rem;
+      font-weight: 600;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    input[type="text"], input[type="password"] {
+      width: 100%;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 12px 16px;
+      color: var(--text);
+      font-family: 'DM Mono', monospace;
+      font-size: 0.82rem;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    input:focus { border-color: var(--accent); }
+    input::placeholder { color: var(--muted); opacity: 0.6; }
+    .field-note {
+      font-size: 0.72rem;
+      color: var(--muted);
+      line-height: 1.5;
+    }
+    .rapidapi-link {
+      color: var(--accent);
+      text-decoration: none;
+      font-weight: 600;
+    }
+    .rapidapi-link:hover { text-decoration: underline; }
+    /* UPLOAD SECTION */
+    .upload-zone {
+      border: 2px dashed var(--border);
+      border-radius: 14px;
+      padding: 48px 24px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      background: var(--surface);
+      position: relative;
+    }
+    .upload-zone:hover, .upload-zone.dragover {
+      border-color: var(--accent);
+      background: rgba(124,106,255,0.05);
+    }
+    .upload-zone input[type="file"] {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+      width: 100%;
+      height: 100%;
+    }
+    .upload-icon {
+      font-size: 2.5rem;
+      margin-bottom: 12px;
+    }
+    .upload-text {
+      font-size: 1rem;
+      font-weight: 700;
+      margin-bottom: 6px;
+    }
+    .upload-sub {
+      font-size: 0.8rem;
+      color: var(--muted);
+    }
+    .file-selected {
+      display: none;
+      align-items: center;
+      gap: 12px;
+      background: rgba(124,106,255,0.1);
+      border: 1px solid rgba(124,106,255,0.3);
+      border-radius: 10px;
+      padding: 12px 16px;
+      margin-top: 16px;
+      font-size: 0.85rem;
+    }
+    .file-selected.show { display: flex; }
+    .file-name { font-family: 'DM Mono', monospace; color: var(--accent); }
+    /* PARSE BUTTON */
+    .parse-btn {
+      width: 100%;
+      background: linear-gradient(135deg, var(--accent), #9b59ff);
+      border: none;
+      border-radius: 12px;
+      padding: 16px;
+      color: white;
+      font-family: 'Syne', sans-serif;
+      font-size: 1rem;
+      font-weight: 700;
+      cursor: pointer;
+      letter-spacing: 0.05em;
+      transition: all 0.3s;
+      margin-top: 20px;
+      position: relative;
+      overflow: hidden;
+    }
+    .parse-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(124,106,255,0.4); }
+    .parse-btn:active { transform: translateY(0); }
+    .parse-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .parse-btn .spinner {
+      display: none;
+      width: 18px;
+      height: 18px;
+      border: 2px solid rgba(255,255,255,0.3);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      margin: 0 auto;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .parse-btn.loading .btn-text { display: none; }
+    .parse-btn.loading .spinner { display: block; }
+    /* ERROR */
+    .error-box {
+      display: none;
+      background: rgba(255,106,138,0.1);
+      border: 1px solid rgba(255,106,138,0.3);
+      border-radius: 10px;
+      padding: 14px 18px;
+      color: var(--accent2);
+      font-size: 0.85rem;
+      margin-top: 16px;
+    }
+    .error-box.show { display: block; }
+    /* RESULTS */
+    .results-section {
+      display: none;
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 28px;
+      margin-top: 20px;
+      animation: fadeUp 0.5s ease;
+    }
+    .results-section.show { display: block; }
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .results-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      margin-top: 20px;
+    }
+    @media (max-width: 600px) { .results-grid { grid-template-columns: 1fr; } }
+    .result-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 16px;
+    }
+    .result-card.full { grid-column: 1 / -1; }
+    .result-label {
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--muted);
+      margin-bottom: 8px;
+    }
+    .result-value {
+      font-size: 0.92rem;
+      font-weight: 600;
+      color: var(--text);
+      word-break: break-all;
+    }
+    .result-value.mono {
+      font-family: 'DM Mono', monospace;
+      font-size: 0.82rem;
+    }
+    .result-empty { color: var(--muted); font-style: italic; font-size: 0.82rem; }
+    .skills-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-top: 4px;
+    }
+    .skill-tag {
+      background: rgba(124,106,255,0.15);
+      border: 1px solid rgba(124,106,255,0.25);
+      color: var(--accent);
+      font-size: 0.72rem;
+      font-weight: 600;
+      padding: 4px 10px;
+      border-radius: 100px;
+      font-family: 'DM Mono', monospace;
+    }
+    .links-wrap { display: flex; flex-direction: column; gap: 6px; }
+    .link-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-family: 'DM Mono', monospace;
+      font-size: 0.78rem;
+      color: var(--accent);
+      text-decoration: none;
+    }
+    .link-item:hover { text-decoration: underline; }
+    .link-icon { font-size: 1rem; }
+    /* CSV EXPORT */
+    .export-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 8px 16px;
+      color: var(--text);
+      font-family: 'Syne', sans-serif;
+      font-size: 0.8rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      margin-top: 20px;
+    }
+    .export-btn:hover { border-color: var(--success); color: var(--success); }
+    /* RAW JSON */
+    .json-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      background: transparent;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 8px 16px;
+      color: var(--muted);
+      font-family: 'Syne', sans-serif;
+      font-size: 0.8rem;
+      cursor: pointer;
+      transition: all 0.2s;
+      margin-top: 20px;
+      margin-left: 8px;
+    }
+    .json-toggle:hover { border-color: var(--accent); color: var(--accent); }
+    .raw-json {
+      display: none;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 16px;
+      margin-top: 16px;
+      font-family: 'DM Mono', monospace;
+      font-size: 0.75rem;
+      color: var(--accent);
+      overflow-x: auto;
+      white-space: pre;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    .raw-json.show { display: block; }
+    /* FOOTER NOTE */
+    .powered-by {
+      text-align: center;
+      margin-top: 48px;
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    .powered-by a { color: var(--accent); text-decoration: none; }
+    .powered-by a:hover { text-decoration: underline; }
+  </style>
+</head>
+<body>
+  <div class="orb orb1"></div>
+  <div class="orb orb2"></div>
+  <!-- NAV -->
+  <nav>
+    <div class="logo">ResumeAI</div>
+    <a class="api-badge" href="https://rapidapi.com/9873ashutosh/api/resume-parser-api7" target="_blank">
+      <span class="dot"></span>
+      API Live on RapidAPI
+    </a>
+  </nav>
+  <!-- HERO -->
+  <div class="hero">
+    <div class="hero-tag">⚡ Powered by AI</div>
+    <h1>Parse Any Resume<br/>in <em>Seconds</em></h1>
+    <p class="hero-sub">Upload a PDF resume and instantly extract name, email, phone, skills, experience and education — clean structured data, no manual work.</p>
+  </div>
+  <!-- MAIN -->
+  <div class="main-container">
+    <!-- STEP 1: API CONFIG -->
+    <div class="config-section">
+      <div class="section-header">
+        <div class="section-num">1</div>
+        <div class="section-title">Your API Key</div>
+        <div class="section-hint">
+          <a class="rapidapi-link" href="https://rapidapi.com/9873ashutosh/api/resume-parser-api7" target="_blank">Get key from RapidAPI →</a>
+        </div>
+      </div>
+      <div class="field-group">
+        <label>RapidAPI Key</label>
+        <input type="password" id="apiKey" placeholder="Paste your x-rapidapi-key here..." />
+        <div class="field-note">
+          Don't have a key? <a class="rapidapi-link" href="https://rapidapi.com/9873ashutosh/api/resume-parser-api7" target="_blank">Subscribe free on RapidAPI</a> — 10 free parses/month included.
+        </div>
+      </div>
+    </div>
+    <!-- STEP 2: UPLOAD -->
+    <div class="config-section">
+      <div class="section-header">
+        <div class="section-num">2</div>
+        <div class="section-title">Upload Resume</div>
+        <div class="section-hint">PDF only · Max 5MB</div>
+      </div>
+      <div class="upload-zone" id="uploadZone">
+        <input type="file" id="fileInput" accept=".pdf" />
+        <div class="upload-icon">📄</div>
+        <div class="upload-text">Drop your PDF resume here</div>
+        <div class="upload-sub">or click to browse files</div>
+      </div>
+      <div class="file-selected" id="fileSelected">
+        <span>📎</span>
+        <span class="file-name" id="fileName"></span>
+        <span style="color:var(--muted);font-size:0.78rem;" id="fileSize"></span>
+      </div>
+      <button class="parse-btn" id="parseBtn" onclick="parseResume()">
+        <span class="btn-text">✨ Parse Resume</span>
+        <div class="spinner"></div>
+      </button>
+      <div class="error-box" id="errorBox"></div>
+    </div>
+    <!-- RESULTS -->
+    <div class="results-section" id="resultsSection">
+      <div class="section-header">
+        <div class="section-num">✓</div>
+        <div class="section-title">Extracted Data</div>
+      </div>
+      <div class="results-grid" id="resultsGrid"></div>
+      <div>
+        <button class="export-btn" onclick="exportCSV()">⬇ Export CSV</button>
+        <button class="json-toggle" onclick="toggleJSON()">{ } Raw JSON</button>
+      </div>
+      <div class="raw-json" id="rawJson"></div>
+    </div>
+    <div class="powered-by">
+      Powered by <a href="https://rapidapi.com/9873ashutosh/api/resume-parser-api7" target="_blank">Resume Parser API on RapidAPI</a>
+    </div>
+  </div>
+  <script>
+    let parsedData = null;
+    // File input handling
+    const fileInput = document.getElementById('fileInput');
+    const uploadZone = document.getElementById('uploadZone');
+    const fileSelected = document.getElementById('fileSelected');
+    fileInput.addEventListener('change', () => {
+      const file = fileInput.files[0];
+      if (file) {
+        document.getElementById('fileName').textContent = file.name;
+        document.getElementById('fileSize').textContent = (file.size / 1024).toFixed(1) + ' KB';
+        fileSelected.classList.add('show');
+      }
+    });
+    uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.classList.add('dragover'); });
+    uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));
+    uploadZone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      uploadZone.classList.remove('dragover');
+      const file = e.dataTransfer.files[0];
+      if (file && file.type === 'application/pdf') {
+        fileInput.files = e.dataTransfer.files;
+        document.getElementById('fileName').textContent = file.name;
+        document.getElementById('fileSize').textContent = (file.size / 1024).toFixed(1) + ' KB';
+        fileSelected.classList.add('show');
+      }
+    });
+    function showError(msg) {
+      const box = document.getElementById('errorBox');
+      box.textContent = '⚠ ' + msg;
+      box.classList.add('show');
+    }
+    function hideError() {
+      document.getElementById('errorBox').classList.remove('show');
+    }
+    async function parseResume() {
+      hideError();
+      const apiKey = document.getElementById('apiKey').value.trim();
+      const file = fileInput.files[0];
+      const btn = document.getElementById('parseBtn');
+      if (!apiKey) { showError('Please enter your RapidAPI key first.'); return; }
+      if (!file)   { showError('Please upload a PDF resume first.'); return; }
+      if (file.size > 5 * 1024 * 1024) { showError('File too large. Max 5MB.'); return; }
+      btn.classList.add('loading');
+      btn.disabled = true;
+      document.getElementById('resultsSection').classList.remove('show');
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+        const response = await fetch('https://resume-parser-api7.p.rapidapi.com/parse/pdf', {
+          method: 'POST',
+          headers: {
+            'x-rapidapi-key': apiKey,
+            'x-rapidapi-host': 'resume-parser-api7.p.rapidapi.com'
+          },
+          body: formData
+        });
+        const result = await response.json();
+        if (!response.ok) {
+          showError(result.detail || 'API error: ' + response.status);
+          return;
+        }
+        parsedData = result.data;
+        renderResults(parsedData, result);
+      } catch (err) {
+        showError('Network error. Check your API key and try again.');
+      } finally {
+        btn.classList.remove('loading');
+        btn.disabled = false;
+      }
+    }
+    function val(v) {
+      if (!v || (Array.isArray(v) && v.length === 0) || (typeof v === 'object' && Object.keys(v).length === 0)) return null;
+      return v;
+    }
+    function renderResults(data, fullResult) {
+      const grid = document.getElementById('resultsGrid');
+      const name   = val(data.name);
+      const email  = val(data.email);
+      const phone  = val(data.phone);
+      const skills = val(data.skills);
+      const exp    = val(data.experience_years);
+      const edu    = val(data.education);
+      const links  = val(data.links);
+      let html = '';
+      html += card('Name', name ? `<span class="result-value">${name}</span>` : empty());
+      html += card('Email', email ? `<span class="result-value mono">${email}</span>` : empty());
+      html += card('Phone', phone ? `<span class="result-value mono">${phone}</span>` : empty());
+      html += card('Experience', exp ? `<span class="result-value">${exp}</span>` : empty());
+      // Skills
+      if (skills && skills.length > 0) {
+        const tags = skills.map(s => `<span class="skill-tag">${s}</span>`).join('');
+        html += `<div class="res