index.html

<!DOCTYPE html>
<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>