Spaces:
Sleeping
Sleeping
| <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 |