ghosted/index.html at main · devadigapratham/ghosted · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ghosted — job application tracker</title>
  <meta name="description" content="Logs every job you apply to on Handshake, Greenhouse, Lever, Workday, LinkedIn and more. Flags visa-sponsorship blockers before you apply, and keeps the data on your own machine.">
  <link rel="icon" href="/icons/icon32.png">
  <style>
    :root {
      color-scheme: light;
      --page: #f9f9f7; --surface: #fcfcfb;
      --text: #0b0b0b; --muted: #52514e; --faint: #898781;
      --border: rgba(11,11,11,.10);
      --accent: #1b7f4d; --warn: #d03b3b;
      /* 6.22:1 on the light page background */
      --link: #146b3f;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --page: #0d0d0d; --surface: #1a1a19;
        --text: #fff; --muted: #c3c2b7; --faint: #898781;
        --border: rgba(255,255,255,.10);
        --accent: #229a5e;
        /* 7.65:1 on the dark page background; the darker green fails there */
        --link: #34b877;
      }
    }
    * { box-sizing: border-box; }
    /* Underlined as well as coloured, so the affordance is not colour alone.
       :visited is pinned or the browser reverts it to unreadable purple. */
    a, a:visited { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
    a:hover { text-decoration-thickness: 2px; }
    body {
      margin: 0; background: var(--page); color: var(--text);
      font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    main { max-width: 760px; margin: 0 auto; padding: 56px 20px 80px; }
    .hero { display: flex; align-items: center; gap: 14px; }
    .hero img { width: 44px; height: 44px; }
    h1 { font-size: 34px; margin: 0; letter-spacing: -.02em; }
    .tag { font-size: 18px; color: var(--muted); margin: 14px 0 0; }
    .cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0; }
    a.btn, a.btn:visited {
      display: inline-block; padding: 10px 18px; border-radius: 8px;
      text-decoration: none; font-size: 15px; font-weight: 600;
      border: 1px solid var(--border); color: var(--text); background: var(--surface);
    }
    a.btn.primary, a.btn.primary:visited { background: var(--accent); border-color: var(--accent); color: #fff; }
    a.btn:hover { filter: brightness(1.06); }
    h2 { font-size: 20px; margin: 44px 0 10px; }
    p, li { color: var(--muted); }
    ul { padding-left: 20px; }
    li { margin: 6px 0; }
    strong { color: var(--text); }
    img.shot {
      width: 100%; border: 1px solid var(--border); border-radius: 10px;
      margin: 20px 0 0; display: block;
    }
    .note {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px 16px; font-size: 14px; margin: 20px 0 0;
    }
    .warn { border-left: 3px solid var(--warn); }
    ol { padding-left: 20px; color: var(--muted); }
    code {
      font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 4px; padding: 1px 5px;
    }
    footer {
      margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border);
      font-size: 14px; color: var(--faint);
    }
    footer a, footer a:visited { color: var(--muted); }
  </style>
</head>
<body>
  <main>
    <div class="hero">
      <img src="/icons/icon128.png" alt="">
      <h1>Ghosted</h1>
    </div>
    <p class="tag">
      Logs every job you apply to on Handshake, Greenhouse, Lever, Workday,
      LinkedIn and more, so you know exactly who ghosted you.
    </p>

    <div class="cta">
      <a class="btn primary" href="https://github.com/devadigapratham/ghosted">Get it on GitHub</a>
      <a class="btn" href="/app?demo=1">Try the live demo</a>
    </div>

    <img class="shot" src="/docs/dashboard-dark.jpg" alt="The Ghosted dashboard showing application counts, a per-week chart, and a sponsorship breakdown">

    <h2>What it does</h2>
    <ul>
      <li><strong>Logs applications automatically.</strong> Apply to something and a
        confirmation box appears pre-filled. Press Enter and it's recorded.</li>
      <li><strong>Flags sponsorship before you apply.</strong> It reads the job
        description and badges the page: sponsors, no sponsorship, citizens/PR only,
        or unclear — with the exact sentence it matched, so you can judge yourself.</li>
      <li><strong>Chases follow-ups.</strong> Every application gets a follow-up date,
        and a daily check tells you what's gone quiet.</li>
      <li><strong>Shows the damage.</strong> How many applied, how many interviews,
        how many ghosted, and what share ever replied.</li>
      <li><strong>Works where you actually apply.</strong> Handshake, Greenhouse,
        Lever, Ashby, Workday, SmartRecruiters, Workable, LinkedIn and Indeed, plus
        one-click logging on any other careers page. A Source column records which.</li>
    </ul>

    <h2>Where the data lives</h2>
    <p>
      On your machine. There's no server, no account, and no signup, so there's
      nothing to breach and nothing to bill you for. Connect a Google Sheet if you
      want a copy you can share or open on your phone — it's your sheet, in your
      Google account.
    </p>

    <h2>Try it without installing</h2>
    <p>
      <a href="/app?demo=1">The live demo</a> is the real dashboard running on sample
      data. Click around: filter the table, move something along the pipeline, flip
      the theme. Nothing is saved and none of it is anyone's real data.
    </p>
    <p>
      <a href="/app">The same dashboard without <code>?demo=1</code></a> reads a copy
      kept in your own browser, so you can export a CSV from the extension and import
      it here to read your data on a machine that has no extension.
    </p>
    <div class="note warn">
      Capture, sponsorship scanning, reminders and Sheets sync need the extension —
      they have to run inside the browser on the job page itself. The hosted version
      is for reading and editing what you already collected.
    </div>

    <h2>Install</h2>
    <p>No terminal, no Node, no npm. About a minute.</p>
    <ol>
      <li>On <a href="https://github.com/devadigapratham/ghosted">the repo</a>, click
        the green <strong>Code</strong> button → <strong>Download ZIP</strong>.</li>
      <li>Unzip it and move the folder somewhere permanent. Chrome loads the
        extension from that folder, so don't delete it afterwards.</li>
      <li>Open <code>chrome://extensions</code> and turn on <strong>Developer
        mode</strong>, top right.</li>
      <li>Click <strong>Load unpacked</strong> and select the folder.</li>
      <li>Apply to a job. That's it.</li>
    </ol>
    <p>
      Google Sheets sync is optional and needs a one-time setup; the README walks
      through it. Everything else works immediately.
    </p>

    <footer>
      MIT licensed ·
      <a href="https://github.com/devadigapratham/ghosted">Source</a> ·
      <a href="https://github.com/devadigapratham/ghosted/blob/main/ARCHITECTURE.md">Architecture</a>
    </footer>
  </main>
</body>
</html>