← back to Abrams
public/trademark.html
109 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Abrams — Trademark Hub</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/panel.css" />
<style>
.container { max-width: 980px; margin: 0 auto; padding: 120px 32px 80px; }
h1.title { font-family: var(--serif); font-size: 56px; font-weight: 400; letter-spacing: .04em; margin: 0 0 8px; }
.lede { color: var(--fg-2); font-size: 15px; max-width: 720px; margin: 0 0 36px; line-height: 1.6; }
.route { background: var(--bg-2); border: 1px solid var(--hairline); padding: 24px; margin-bottom: 14px; }
.route .head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.route h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0; }
.route .fee { font-family: var(--mono); color: var(--accent); font-size: 14px; }
.route .notes { color: var(--fg-2); font-size: 13px; margin: 10px 0 14px; line-height: 1.6; }
.route .btn { display: inline-block; padding: 10px 28px; background: var(--accent); color: #111; font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; }
.class { background: var(--bg-3); border-left: 3px solid var(--accent); padding: 20px 24px; margin-bottom: 12px; }
.class .head { display: flex; gap: 14px; align-items: baseline; }
.class .num { font-family: var(--mono); color: var(--accent); font-size: 12px; letter-spacing: .2em; }
.class .ttl { font-family: var(--serif); font-size: 18px; }
.class .wording { font-family: var(--mono); font-size: 12px; color: var(--fg); background: #000; padding: 12px; margin: 12px 0; border: 1px solid var(--hairline); line-height: 1.6; }
.class .reason { color: var(--fg-2); font-size: 13px; }
.totals { background: linear-gradient(180deg, rgba(212,164,55,.1), transparent); border: 1px solid var(--accent-dim); padding: 24px; margin: 24px 0; }
.totals .row { display: flex; justify-content: space-between; padding: 6px 0; }
.totals .row .lbl { color: var(--fg-2); font-family: var(--mono); font-size: 12px; }
.totals .row .val { color: var(--accent); font-family: var(--mono); font-size: 16px; }
.next-actions ol { padding-left: 24px; }
.next-actions li { color: var(--fg); padding: 6px 0; line-height: 1.6; }
</style>
</head>
<body>
<div class="chrome">
<a class="logo" href="/">ABRAMS<span class="dot">.</span></a>
<div class="nav-burger" role="button" aria-label="open menu">
<span class="bars"><span></span><span></span><span></span></span>
<span class="label">MENU</span>
</div>
</div>
<div class="container">
<h1 class="title">Trademark Hub</h1>
<p class="lede">The ABRAMS word mark + the gold-dot design mark, filed across the 5 classes that actually cover the empire. Direct links to USPTO TEAS, a free conflict search, attorney referral. Common-law rights are already accruing — federal registration converts them into nationwide, enforceable, exit-valuable IP.</p>
<section style="margin-bottom: 48px;">
<h2 style="font-family:var(--serif);font-size:28px;font-weight:400;margin:0 0 16px;">Filing routes — pick one</h2>
<div id="routes"></div>
</section>
<section style="margin-bottom: 48px;">
<h2 style="font-family:var(--serif);font-size:28px;font-weight:400;margin:0 0 16px;">The 5 classes you actually need</h2>
<p style="color:var(--fg-2);font-size:14px;margin:0 0 20px;">Each class is one filing fee. The wording below is the exact "goods and services description" to paste into USPTO TEAS Standard.</p>
<div id="classes"></div>
</section>
<div class="totals">
<div class="row"><span class="lbl">DIY (TEAS Plus, 5 classes)</span><span class="val">$1,250</span></div>
<div class="row"><span class="lbl">Attorney (Gerben, 5 classes)</span><span class="val">$4,750</span></div>
<div class="row"><span class="lbl">Recommended: file 35 + 42 first</span><span class="val">$500 DIY · $1,900 attorney</span></div>
</div>
<section class="next-actions">
<h2 style="font-family:var(--serif);font-size:28px;font-weight:400;margin:24px 0 16px;">Next actions</h2>
<ol id="next-actions"></ol>
</section>
<section style="margin-top: 48px;">
<h2 style="font-family:var(--serif);font-size:28px;font-weight:400;margin:0 0 16px;">Domain status</h2>
<div id="domains" style="font-family:var(--mono);font-size:13px;line-height:2;"></div>
</section>
</div>
<footer>© 2026 Steven Abrams · <a href="/">panel</a> · <a href="/ideas">SWOT</a> · <a href="https://agentabrams.com">agentabrams.com</a></footer>
<script src="/static/js/corner-nav.js"></script>
<script src="/static/js/gamify.js"></script>
<script>
function escapeHtml(s){ return String(s||'').replace(/[&<>"']/g, m=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m])); }
fetch('/api/trademark').then(r=>r.json()).then(tm => {
document.getElementById('routes').innerHTML = (tm.filing_routes||[]).map(r => `
<div class="route">
<div class="head">
<h3>${escapeHtml(r.type)}</h3>
<span class="fee">$${r.fee_per_class_usd}/class</span>
</div>
<p class="notes">${escapeHtml(r.notes)}</p>
<a class="btn" href="${escapeHtml(r.url)}" target="_blank" rel="noopener noreferrer">GO →</a>
</div>
`).join('');
document.getElementById('classes').innerHTML = (tm.recommended_classes||[]).map(c => `
<div class="class">
<div class="head"><span class="num">CLASS ${escapeHtml(c.class)}</span><span class="ttl">${escapeHtml(c.title)}</span></div>
<div class="wording">${escapeHtml(c.wording)}</div>
<p class="reason"><strong>Why:</strong> ${escapeHtml(c.reason)}</p>
</div>
`).join('');
document.getElementById('next-actions').innerHTML = (tm.next_actions||[]).map(a => `<li>${escapeHtml(a)}</li>`).join('');
document.getElementById('domains').innerHTML = Object.entries(tm.domain_status||{}).map(([d,s]) => `<div>${escapeHtml(d)} <span style="color:var(--fg-3);">·</span> <span style="color:${s.startsWith('owned')?'var(--ok)':s.startsWith('UNAVAIL')?'var(--err)':'var(--warn)'};">${escapeHtml(s)}</span></div>`).join('');
});
</script>
</body>
</html>