| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <meta name="theme-color" content="#0b1220" /> |
| <title>CV Match - Free Browser App</title> |
| <link rel="stylesheet" href="style.css" /> |
| <script src="https://cdn.jsdelivr.net/npm/mammoth@1.8.0/mammoth.browser.min.js"></script> |
| </head> |
| <body> |
| <main class="shell"> |
| <header class="hero"> |
| <div class="eyebrow"><span class="pulse"></span> Free browser-based CV matcher</div> |
| <h1>Find the right match<br /><em>with confidence.</em></h1> |
| <p class="hero-copy">Upload a CV, review the extracted details, and compare it with a job description using your trained model.</p> |
| <div class="privacy-note"><span>🔒</span> Your CV is processed in this browser. It is not uploaded to an application server.</div> |
| </header> |
|
|
| <section class="workflow"> |
| <form class="panel" id="jobPanel"> |
| <div class="panel-heading"> |
| <span class="step-number">01</span> |
| <div><p class="overline">Start here</p><h2>Job details</h2></div> |
| </div> |
| <p class="panel-intro">Describe the role you are hiring for. More context usually gives a more useful ranking signal.</p> |
| <label>Job title<input id="jobTitle" value="Customer Support Specialist" /></label> |
| <div class="two-col"> |
| <label>Required seniority<input id="jobSeniority" value="Junior" /></label> |
| <label>Industry<input id="jobIndustry" value="FinTech" /></label> |
| </div> |
| <label>Must-have skills<input id="mustHaveSkills" placeholder="Python, customer service, CRM" /></label> |
| <label>Nice-to-have skills<input id="niceToHaveSkills" placeholder="Separate skills with commas" /></label> |
| <label>Job description<textarea id="jobDescription" rows="4" placeholder="What is this person expected to do?"></textarea></label> |
| <label>Responsibilities<textarea id="responsibilities" rows="3" placeholder="List the main responsibilities"></textarea></label> |
| <label>Requirements<textarea id="requirements" rows="3" placeholder="List the essential requirements"></textarea></label> |
| </form> |
|
|
| <section class="panel" id="candidatePanel"> |
| <div class="panel-heading"> |
| <span class="step-number">02</span> |
| <div><p class="overline">Upload and review</p><h2>Candidate CV</h2></div> |
| </div> |
| <p class="panel-intro">PDF, DOCX and TXT files are supported. The first model download may take a minute and will be cached in your browser.</p> |
|
|
| <label class="dropzone" id="dropzone"> |
| <input id="cvFile" type="file" accept=".pdf,.docx,.txt" /> |
| <span class="upload-icon">↑</span> |
| <strong id="fileLabel">Choose a CV file</strong> |
| <small>or drag and drop it here</small> |
| </label> |
| <button class="button button-secondary" id="extractButton" type="button" disabled>Extract CV details</button> |
| <div class="status" id="status" role="status">Waiting for a CV upload.</div> |
|
|
| <label>Extracted text preview<textarea id="preview" rows="5" readonly placeholder="Your CV text preview will appear here."></textarea></label> |
|
|
| <div class="subheading"><span>Candidate details</span><small>Review before scoring</small></div> |
| <label>Candidate role<input id="candidateRole" /></label> |
| <div class="two-col"> |
| <label>Seniority<input id="candidateSeniority" /></label> |
| <label>Years of experience<input id="yearsExperience" /></label> |
| </div> |
| <label>Industry experience<input id="candidateIndustry" /></label> |
| <label>Education<input id="education" /></label> |
| <label>Skills<input id="candidateSkills" placeholder="Separate skills with commas" /></label> |
| <label>Professional summary<textarea id="summary" rows="3"></textarea></label> |
| <label>Experience highlights<textarea id="experienceBullets" rows="4"></textarea></label> |
| </section> |
| </section> |
|
|
| <section class="score-section"> |
| <div class="score-heading"> |
| <div><p class="overline">Final step</p><h2>Score the match</h2></div> |
| <button class="button button-primary" id="scoreButton" type="button">Score match <span>→</span></button> |
| </div> |
| <div class="result" id="result" hidden></div> |
| </section> |
|
|
| <footer> |
| <span>Assistive ranking only - always review the original CV and job requirements.</span> |
| <a href="https://huggingface.co/Gehan77/cv-match-browser" target="_blank" rel="noreferrer">Model card ↗</a> |
| </footer> |
| </main> |
| <script type="module" src="app.js?v=20260810"></script> |
| </body> |
| </html> |
|
|
