Apply-Pilot/options.html at main · Asuddle/Apply-Pilot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="options.css" />
  <title>ApplyPilot — Profile</title>
</head>
<body>
  <div class="wrap">
    <header>
      <div class="brand"><div class="logo">AP</div><h1>ApplyPilot Profile</h1></div>
      <p class="sub">Fill this once. ApplyPilot uses it to autofill applications across the web.</p>
    </header>

    <div id="welcome" class="welcome hidden">
      <button id="welcomeClose" class="welcome-close" aria-label="Dismiss">×</button>
      <h2>👋 Welcome to ApplyPilot!</h2>
      <p>You're 3 steps from applying faster:</p>
      <ol>
        <li>Fill in the fields below — they autofill your applications.</li>
        <li>Upload your <b>résumé</b> so it attaches automatically.</li>
        <li>On any job posting, hit <b>Capture current page</b> (<kbd>⌘⇧J</kbd>) to track it.</li>
      </ol>
      <p class="welcome-hint">Everything stays on this device. Changes save as you type.</p>
    </div>

    <form id="profileForm">
      <section class="group">
        <h2>Basics</h2>
        <div class="grid">
          <label>First name <input name="firstName" type="text" /></label>
          <label>Last name <input name="lastName" type="text" /></label>
          <label>Email <input name="email" type="email" /></label>
          <label>Phone <input name="phone" type="tel" /></label>
        </div>
      </section>

      <section class="group">
        <h2>Location</h2>
        <div class="grid">
          <label>City <input name="city" type="text" /></label>
          <label>State / Region <input name="state" type="text" /></label>
          <label>Country <input name="country" type="text" /></label>
        </div>
      </section>

      <section class="group">
        <h2>Links</h2>
        <div class="grid">
          <label>LinkedIn <input name="linkedin" type="url" placeholder="https://linkedin.com/in/…" /></label>
          <label>GitHub <input name="github" type="url" placeholder="https://github.com/…" /></label>
          <label>Portfolio <input name="portfolio" type="url" /></label>
          <label>Website <input name="website" type="url" /></label>
        </div>
      </section>

      <section class="group">
        <h2>Experience</h2>
        <div class="grid">
          <label>Current title <input name="currentTitle" type="text" /></label>
          <label>Current company <input name="currentCompany" type="text" /></label>
          <label>Expected salary <input name="salary" type="text" placeholder="e.g. $120k" /></label>
          <label>Notice period <input name="noticePeriod" type="text" placeholder="e.g. 2 weeks" /></label>
        </div>
      </section>

      <section class="group">
        <h2>Work authorization</h2>
        <div class="grid">
          <label>Work authorization <input name="workAuth" type="text" placeholder="e.g. US Citizen" /></label>
          <label>Requires sponsorship?
            <select name="requiresSponsorship">
              <option value="no">No</option>
              <option value="yes">Yes</option>
            </select>
          </label>
        </div>
      </section>

      <section class="group">
        <h2>Résumé</h2>
        <div class="resume-row">
          <input id="resumeInput" type="file" accept=".pdf,.doc,.docx,application/pdf" hidden />
          <button type="button" id="resumePick" class="btn ghost">Choose file…</button>
          <span id="resumeInfo" class="resume-info">No résumé uploaded</span>
          <button type="button" id="resumeRemove" class="btn ghost hidden">Remove</button>
        </div>
        <p class="hint">Stored locally in your browser and attached automatically during autofill
          when a résumé upload field is detected. PDF or Word, up to ~5&nbsp;MB.</p>
      </section>

      <section class="group">
        <h2>Long-form</h2>
        <label class="full">Professional summary
          <textarea name="summary" rows="3" placeholder="2–3 sentences about you…"></textarea>
        </label>
        <label class="full">Default cover letter
          <textarea name="coverLetter" rows="6" placeholder="Reusable cover letter. Tip: use [Company] as a placeholder."></textarea>
        </label>
      </section>

      <div class="footer">
        <span id="saveState" class="save-state"></span>
        <button type="button" id="exportBtn" class="btn ghost">Export data</button>
        <button type="submit" class="btn primary">Save profile</button>
      </div>
    </form>
  </div>
  <div id="toast" class="toast"></div>
  <script src="options.js"></script>
</body>
</html>