`extension-v0/popup.html`

139 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SDCC Borrower Helper</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;background:#0a0a0a;color:#fff;width:380px;font-size:13px;line-height:1.5}
header{padding:16px;background:linear-gradient(135deg,#0f172a,#1e3a8a);border-bottom:1px solid rgba(255,255,255,.08)}
.lg{font-family:Georgia,serif;font-size:18px;font-weight:400;letter-spacing:-.01em}
.lg em{color:#facc15;font-style:italic}
.tag{display:inline-block;background:rgba(34,197,94,.15);color:#22c55e;padding:3px 8px;border-radius:99px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-top:6px}
.privacy{padding:10px 16px;background:#0e3b18;color:#86efac;font-size:11px;display:flex;gap:8px;align-items:center;border-bottom:1px solid rgba(34,197,94,.2)}
.tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.08);background:#0a0a0a}
.tab{flex:1;padding:10px 8px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:#888;background:transparent;border:0;cursor:pointer;border-bottom:2px solid transparent;font-family:inherit}
.tab.active{color:#22d3ee;border-color:#22d3ee}
.panel{display:none;padding:16px}
.panel.active{display:block}
.panel h2{font-family:Georgia,serif;font-size:16px;font-weight:400;margin-bottom:6px;color:#fff}
.panel .hint{font-size:11px;color:#888;margin-bottom:12px;line-height:1.5}
.field{margin-bottom:9px}
.field label{display:block;font-size:11px;color:#bbb;font-weight:500;margin-bottom:3px;letter-spacing:.02em}
.field input,.field select{width:100%;padding:7px 9px;background:#161616;border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:5px;font-size:12px;font-family:inherit}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
button.go{background:#22d3ee;color:#0a0a0a;border:0;padding:9px;font-weight:700;border-radius:5px;cursor:pointer;font-size:12px;font-family:inherit;width:100%;margin-top:6px}
button.go:hover{background:#67e8f9}
.result{background:#0a0a0a;border-left:2px solid #22d3ee;padding:10px 12px;margin-top:10px;border-radius:0 5px 5px 0;font-size:11px;line-height:1.5;display:none}
.result.show{display:block}
.result.good{border-color:#22c55e}
.result.warn{border-color:#f97316}
.result.bad{border-color:#dc2626}
.result h3{font-size:11px;color:#22d3ee;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.result.good h3{color:#22c55e}
.result.warn h3{color:#f97316}
.result.bad h3{color:#dc2626}
.result .big{font-family:Georgia,serif;font-size:18px;color:#fff;display:block;margin:4px 0}
.result ul{list-style:none;padding:0;margin-top:6px}
.result li{padding:3px 0;font-size:11px;color:#ccc;display:flex;gap:6px;align-items:start}
.result li::before{content:"▸";color:#22c55e;flex-shrink:0;font-size:9px;margin-top:1px}
.result a{color:#22d3ee;text-decoration:underline}
.scan{padding:14px;background:#0a0a0a;border-radius:6px;border:1px solid rgba(255,255,255,.08);margin-bottom:12px}
.scan-h{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:8px}
.scan-h .pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite;margin-right:6px}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.scan-status{color:#888;font-size:10px}
.scan-data{font-size:11px;color:#bbb}
.scan-data div{padding:3px 0;display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.04)}
.scan-data div:last-child{border:0}
.scan-data span{color:#fff;font-family:monospace}
footer{padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);background:#0a0a0a;font-size:10px;color:#555;text-align:center}
footer a{color:#22d3ee;text-decoration:none}
</style>
</head>
<body>

<header>
  <div class="lg">SDCC <em>helper</em></div>
  <span class="tag">● Privacy-first · v0.1</span>
</header>

<div class="privacy">🔒 <span><strong style="color:#22c55e">Zero data leaves your browser.</strong> Inspect the manifest to verify.</span></div>

<div class="tabs">
  <button class="tab active" data-tab="scan">On Page</button>
  <button class="tab" data-tab="pslf">PSLF</button>
  <button class="tab" data-tab="idr">IDR</button>
  <button class="tab" data-tab="letter">Letter</button>
  <button class="tab" data-tab="links">Links</button>
</div>

<!-- Tab: Active page scan -->
<div class="panel active" id="panel-scan">
  <h2>What I see on this page</h2>
  <p class="hint">If you're on studentaid.gov, NSLDS, or a federal servicer site, I'll show what data I can read locally — and confirm none of it is being sent anywhere.</p>
  <div class="scan">
    <div class="scan-h"><span><span class="pulse"></span><span id="scan-host">scanning…</span></span><span class="scan-status">read-only</span></div>
    <div class="scan-data" id="scan-data"><div>page<span>—</span></div><div>logged in<span>—</span></div><div>data points found<span>—</span></div></div>
  </div>
  <button class="go" id="scan-btn">Re-scan current page</button>
  <div class="result" id="scan-out"></div>
</div>

<!-- Tab: PSLF -->
<div class="panel" id="panel-pslf">
  <h2>Am I eligible for PSLF?</h2>
  <p class="hint">Quick eligibility check. Calculation runs in this popup; nothing sent.</p>
  <div class="field"><label>Loan type</label><select id="p-loan"><option value="direct">Direct (post-2010)</option><option value="ffel-c">FFEL — consolidated</option><option value="ffel-uc">FFEL — not consolidated</option><option value="perkins">Perkins</option><option value="private">Private</option></select></div>
  <div class="field"><label>Employer</label><select id="p-emp"><option value="gov">Gov't (fed/state/local)</option><option value="501c3">501(c)(3) non-profit</option><option value="school">Public school</option><option value="other-np">Other non-profit</option><option value="forprofit">For-profit</option></select></div>
  <div class="field-row">
    <div class="field"><label>Years</label><input id="p-yrs" type="number" min="0" value="9"></div>
    <div class="field"><label>Qualifying payments</label><input id="p-pay" type="number" min="0" value="108"></div>
  </div>
  <button class="go" id="p-go">Check eligibility</button>
  <div class="result" id="p-out"></div>
</div>

<!-- Tab: IDR -->
<div class="panel" id="panel-idr">
  <h2>Compare IDR plans</h2>
  <p class="hint">SAVE / PAYE / new IBR side-by-side. SAVE is in litigation.</p>
  <div class="field-row">
    <div class="field"><label>AGI</label><input id="i-agi" type="number" min="0" value="55000"></div>
    <div class="field"><label>Family</label><input id="i-fam" type="number" min="1" value="2"></div>
  </div>
  <button class="go" id="i-go">Compare</button>
  <div class="result" id="i-out"></div>
</div>

<!-- Tab: Letter -->
<div class="panel" id="panel-letter">
  <h2>Translate a servicer letter</h2>
  <p class="hint">Paste any confusing letter from MOHELA, Aidvantage, Nelnet, EdFinancial. Pattern-matched locally.</p>
  <div class="field"><label>Letter text</label><textarea id="l-in" rows="3" style="width:100%;padding:7px 9px;background:#161616;border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:5px;font-size:12px;font-family:inherit;resize:vertical"></textarea></div>
  <button class="go" id="l-go">Translate</button>
  <div class="result" id="l-out"></div>
</div>

<!-- Tab: Links -->
<div class="panel" id="panel-links">
  <h2>Trusted links</h2>
  <p class="hint">Direct links to your own data on official federal sites. Bookmarks below open the real source.</p>
  <div style="display:flex;flex-direction:column;gap:6px">
    <a href="https://studentaid.gov/app/login" target="_blank" rel="noopener" style="background:#161616;padding:10px;border-radius:5px;color:#22d3ee;text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.08)"><strong style="color:#fff">studentaid.gov</strong><br><span style="color:#888;font-size:10px">Federal Student Aid dashboard — all loans + servicer assignments</span></a>
    <a href="https://studentaid.gov/pslf/" target="_blank" rel="noopener" style="background:#161616;padding:10px;border-radius:5px;color:#22d3ee;text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.08)"><strong style="color:#fff">PSLF Help Tool</strong><br><span style="color:#888;font-size:10px">Federal employment certification + tracker</span></a>
    <a href="https://studentaid.gov/idr/" target="_blank" rel="noopener" style="background:#161616;padding:10px;border-radius:5px;color:#22d3ee;text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.08)"><strong style="color:#fff">IDR Application</strong><br><span style="color:#888;font-size:10px">Income-driven repayment plan signup + recert</span></a>
    <a href="https://www.consumerfinance.gov/complaint/" target="_blank" rel="noopener" style="background:#161616;padding:10px;border-radius:5px;color:#22d3ee;text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.08)"><strong style="color:#fff">CFPB Complaint Portal</strong><br><span style="color:#888;font-size:10px">If your servicer is breaking rules, file here</span></a>
    <a href="https://www.annualcreditreport.com/" target="_blank" rel="noopener" style="background:#161616;padding:10px;border-radius:5px;color:#22d3ee;text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.08)"><strong style="color:#fff">Free Credit Report</strong><br><span style="color:#888;font-size:10px">FCRA-mandated free weekly reports</span></a>
    <a href="https://sdccanalysis.agentabrams.com/hub.html" target="_blank" rel="noopener" style="background:#0e3b18;padding:10px;border-radius:5px;color:#86efac;text-decoration:none;font-size:12px;border:1px solid rgba(34,197,94,.2)"><strong style="color:#22c55e">★ SDCC Borrower Hub</strong><br><span style="color:#86efac;font-size:10px">All 30+ official sources organized</span></a>
  </div>
</div>

<footer>
  <a href="https://sdccanalysis.agentabrams.com/extension.html" target="_blank" rel="noopener">Read why this is private →</a>
</footer>

<script src="popup.js"></script>
</body>
</html>