Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1.0" | |
| > | |
| <meta | |
| name="description" | |
| content="JobAlign - Find jobs and build a targeted resume for each opportunity" | |
| > | |
| <title>JobAlign by John_D</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <!-- ================================================== | |
| HEADER | |
| =================================================== --> | |
| <header class="topbar"> | |
| <div class="brand"> | |
| <div class="logo"> | |
| JA | |
| </div> | |
| <div class="brand-copy"> | |
| <h1> | |
| JobAlign | |
| </h1> | |
| <p class="product-credit"> | |
| A product by John_D | |
| </p> | |
| <p class="brand-subtitle"> | |
| Job discovery and resume alignment | |
| </p> | |
| </div> | |
| </div> | |
| <div style=" | |
| display:flex; | |
| align-items:center; | |
| gap:10px; | |
| flex-wrap:wrap; | |
| justify-content:flex-end; | |
| "> | |
| <div class="free-badge"> | |
| A product by John_D | |
| </div> | |
| <div class="free-badge"> | |
| $0 MODE | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ================================================== | |
| HERO | |
| =================================================== --> | |
| <section class="hero"> | |
| <div class="hero-label"> | |
| JOB DISCOVERY + RESUME ALIGNMENT | |
| </div> | |
| <h2> | |
| Find the job first.<br> | |
| Build the resume for it. | |
| </h2> | |
| <p> | |
| Search live job listings, select the position you want, | |
| review the complete job description and build a targeted | |
| resume specifically aligned to that opportunity. | |
| </p> | |
| <div class="workflow"> | |
| <span> | |
| 1. Search | |
| </span> | |
| <span> | |
| 2. Select Job | |
| </span> | |
| <span> | |
| 3. Analyze JD | |
| </span> | |
| <span> | |
| 4. Realign Resume | |
| </span> | |
| <span> | |
| 5. Download | |
| </span> | |
| </div> | |
| </section> | |
| <!-- ================================================== | |
| MAIN APPLICATION | |
| =================================================== --> | |
| <main class="main-grid"> | |
| <!-- ================================================== | |
| 01 SEARCH JOBS | |
| =================================================== --> | |
| <section class="card full-width"> | |
| <div class="card-number"> | |
| 01 | |
| </div> | |
| <h3> | |
| Find Your Job | |
| </h3> | |
| <p class="card-description"> | |
| Search live listings by job title, skill or keyword. | |
| Matching positions will appear directly inside JobAlign. | |
| </p> | |
| <div class="job-search-row"> | |
| <input | |
| id="jobKeyword" | |
| type="text" | |
| placeholder="Data Engineer, Product Manager, DBRE..." | |
| > | |
| <input | |
| id="jobLocation" | |
| type="text" | |
| placeholder="Remote, Berlin, Germany..." | |
| > | |
| <button | |
| class="primary-btn" | |
| id="searchJobsBtn" | |
| type="button" | |
| > | |
| Search Jobs | |
| </button> | |
| </div> | |
| <div class="field" style="margin-top:18px;"> | |
| <label for="jobSource"> | |
| Job Source | |
| </label> | |
| <select id="jobSource"> | |
| <option value="auto"> | |
| Smart Search - Recommended | |
| </option> | |
| <option value="usa"> | |
| United States Jobs | |
| </option> | |
| <option value="remote"> | |
| Remote Jobs | |
| </option> | |
| <option value="europe"> | |
| Europe Jobs | |
| </option> | |
| </select> | |
| </div> | |
| <div | |
| class="status-box" | |
| style="margin-top:10px;" | |
| > | |
| <div class="status-dot"></div> | |
| <span> | |
| JobAlign combines free public job feeds based on your location. | |
| No job-site password is stored. | |
| </span> | |
| </div> | |
| </section> | |
| <!-- ================================================== | |
| 02 RESULTS | |
| =================================================== --> | |
| <section class="card full-width"> | |
| <div class="card-number"> | |
| 02 | |
| </div> | |
| <h3> | |
| Matching Jobs | |
| </h3> | |
| <p class="card-description"> | |
| Select a position and JobAlign will automatically | |
| load its job description into the resume workflow. | |
| </p> | |
| <div | |
| class="results-panel" | |
| id="jobResults" | |
| > | |
| <div class="empty-state"> | |
| <div> | |
| Search for a job above. | |
| <br><br> | |
| Live positions will appear here. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ================================================== | |
| 03 SELECTED JOB | |
| =================================================== --> | |
| <section | |
| class="card full-width" | |
| id="selectedJobCard" | |
| > | |
| <div class="card-number"> | |
| 03 | |
| </div> | |
| <h3> | |
| Selected Job | |
| </h3> | |
| <p class="card-description"> | |
| This is the job JobAlign will use when analyzing | |
| and rebuilding your resume. | |
| </p> | |
| <div class="field"> | |
| <label for="selectedJobTitle"> | |
| Position | |
| </label> | |
| <input | |
| id="selectedJobTitle" | |
| type="text" | |
| placeholder="Select a job above" | |
| readonly | |
| > | |
| </div> | |
| <div class="field"> | |
| <label for="selectedCompany"> | |
| Company | |
| </label> | |
| <input | |
| id="selectedCompany" | |
| type="text" | |
| placeholder="Company" | |
| readonly | |
| > | |
| </div> | |
| <div class="field"> | |
| <label for="selectedLocation"> | |
| Location | |
| </label> | |
| <input | |
| id="selectedLocation" | |
| type="text" | |
| placeholder="Location" | |
| readonly | |
| > | |
| </div> | |
| <div class="field"> | |
| <label for="jobDescription"> | |
| Complete Job Description | |
| </label> | |
| <textarea | |
| id="jobDescription" | |
| placeholder="The complete selected job description will appear here..." | |
| ></textarea> | |
| </div> | |
| <div class="field"> | |
| <label for="jobUrl"> | |
| Original Listing | |
| </label> | |
| <input | |
| id="jobUrl" | |
| type="text" | |
| placeholder="Original job URL" | |
| readonly | |
| > | |
| </div> | |
| <div class="button-row"> | |
| <button | |
| class="secondary-btn" | |
| id="openOriginalJobBtn" | |
| type="button" | |
| > | |
| View Original Listing | |
| </button> | |
| </div> | |
| </section> | |
| <!-- ================================================== | |
| 04 MASTER RESUME | |
| =================================================== --> | |
| <section class="card"> | |
| <div class="card-number"> | |
| 04 | |
| </div> | |
| <h3> | |
| Master Resume | |
| </h3> | |
| <p class="card-description"> | |
| Save your reference resume once. | |
| JobAlign will reuse it for future selected jobs | |
| on this browser. | |
| </p> | |
| <div class="file-drop"> | |
| <p> | |
| Upload Reference Resume | |
| </p> | |
| <input | |
| id="resumeFile" | |
| type="file" | |
| accept=".txt,.pdf,.doc,.docx" | |
| > | |
| <br><br> | |
| <small> | |
| TXT works directly. | |
| PDF and DOCX extraction will be added later. | |
| </small> | |
| </div> | |
| <div | |
| class="field" | |
| style="margin-top:18px;" | |
| > | |
| <label for="resumeText"> | |
| Master Resume | |
| </label> | |
| <textarea | |
| id="resumeText" | |
| placeholder="Paste your complete master resume here..." | |
| ></textarea> | |
| </div> | |
| <div class="button-row"> | |
| <button | |
| class="secondary-btn" | |
| id="saveResumeBtn" | |
| type="button" | |
| > | |
| Save Master Resume | |
| </button> | |
| </div> | |
| <div | |
| class="status-box" | |
| id="resumeStatus" | |
| style="margin-top:16px;" | |
| > | |
| <div class="status-dot"></div> | |
| <span> | |
| No master resume saved yet | |
| </span> | |
| </div> | |
| </section> | |
| <!-- ================================================== | |
| 05 ANALYSIS | |
| =================================================== --> | |
| <section class="card"> | |
| <div class="card-number"> | |
| 05 | |
| </div> | |
| <h3> | |
| Job Match Analysis | |
| </h3> | |
| <p class="card-description"> | |
| Compare your master resume with the requirements | |
| of the selected opportunity. | |
| </p> | |
| <div class="score-grid"> | |
| <div class="score-card"> | |
| <strong id="atsScore"> | |
| -- | |
| </strong> | |
| <span> | |
| ATS MATCH | |
| </span> | |
| </div> | |
| <div class="score-card"> | |
| <strong id="keywordScore"> | |
| -- | |
| </strong> | |
| <span> | |
| KEYWORDS | |
| </span> | |
| </div> | |
| <div class="score-card"> | |
| <strong id="matchedSkills"> | |
| -- | |
| </strong> | |
| <span> | |
| MATCHED | |
| </span> | |
| </div> | |
| <div class="score-card"> | |
| <strong id="missingSkills"> | |
| -- | |
| </strong> | |
| <span> | |
| GAPS | |
| </span> | |
| </div> | |
| </div> | |
| <div class="button-row"> | |
| <button | |
| class="secondary-btn" | |
| id="analyzeJobBtn" | |
| type="button" | |
| > | |
| Analyze Selected Job | |
| </button> | |
| </div> | |
| <div | |
| class="results-panel" | |
| id="analysisResults" | |
| style="margin-top:16px;" | |
| > | |
| <div class="empty-state"> | |
| Select a job and load your master resume. | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ================================================== | |
| 06 GENERATE | |
| =================================================== --> | |
| <section class="card full-width"> | |
| <div class="card-number"> | |
| 06 | |
| </div> | |
| <h3> | |
| Build Resume For This Job | |
| </h3> | |
| <p class="card-description"> | |
| Use the selected job description and your saved | |
| master resume to create the targeted version. | |
| </p> | |
| <div class="button-row"> | |
| <button | |
| class="primary-btn" | |
| id="generateResumeBtn" | |
| type="button" | |
| > | |
| Generate Resume For This Job | |
| </button> | |
| <button | |
| class="secondary-btn" | |
| id="copyResumeBtn" | |
| type="button" | |
| > | |
| Copy Resume | |
| </button> | |
| <button | |
| class="secondary-btn" | |
| id="downloadResumeBtn" | |
| type="button" | |
| > | |
| Download Resume | |
| </button> | |
| </div> | |
| <div | |
| id="generationStatus" | |
| class="status-box" | |
| style="margin-top:18px;" | |
| > | |
| <div class="status-dot"></div> | |
| <span> | |
| Select a job to begin | |
| </span> | |
| </div> | |
| <div | |
| class="resume-output" | |
| id="resumeOutput" | |
| style="margin-top:18px;" | |
| > | |
| Your job-specific resume will appear here. | |
| </div> | |
| </section> | |
| <!-- ================================================== | |
| 07 INTERVIEW PREP | |
| =================================================== --> | |
| <section class="card full-width"> | |
| <div class="card-number"> | |
| 07 | |
| </div> | |
| <h3> | |
| Resume Defense | |
| </h3> | |
| <p class="card-description"> | |
| Review the strongest technical claims and prepare | |
| for likely interviewer follow-up questions. | |
| </p> | |
| <div | |
| class="results-panel" | |
| id="interviewCheck" | |
| > | |
| <div class="empty-state"> | |
| Generate the resume first. | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- ================================================== | |
| FOOTER | |
| =================================================== --> | |
| <footer class="footer"> | |
| <span> | |
| JobAlign — A product by John_D | |
| </span> | |
| <span> | |
| Search → Select → Analyze → Align | |
| </span> | |
| </footer> | |
| </div> | |
| <script src="app.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mammoth@1.12.3/mammoth.browser.min.js"></script> | |
| <script type="module" src="ai.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |