bigtech-sucks/packages/web/public/badges.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>The rating badge — BigTech.sucks</title>
<style>
:root{--ink:#0d0f0e;--bone:#e8e2d4;--dim:#8a8272;--amber:#d9a441;--good:#7fae7a;--bad:#c9563f;--rule:#2a2d2a}
*{box-sizing:border-box}
body{margin:0;padding:3rem 1.25rem 7rem;background:var(--ink);color:var(--bone);
font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:15px;line-height:1.7;
-webkit-font-smoothing:antialiased}
.wrap{max-width:58rem;margin:0 auto}
nav{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:3rem;display:flex;gap:1.5rem;flex-wrap:wrap}
nav a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
nav a:hover{color:var(--amber);border-bottom-color:var(--amber)}
h1{font-size:clamp(1.3rem,3.6vw,2.1rem);font-weight:400;line-height:1.2;margin:0 0 .6rem;letter-spacing:-.01em}
h2{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:400;
margin:3.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
.sub{color:var(--dim);font-size:.85rem;margin:0 0 2.5rem}
.score{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 .5rem}
.score .n{font-size:clamp(2.6rem,9vw,4.4rem);line-height:1;color:var(--amber);letter-spacing:-.03em}
.score .g{font-size:1rem;color:var(--dim);letter-spacing:.2em}
.lede{font-size:1.02rem;margin:1.5rem 0 0;padding-left:1rem;border-left:2px solid var(--amber);color:var(--bone)}
table{width:100%;border-collapse:collapse;font-size:.84rem;margin:0}
th{text-align:left;color:var(--dim);font-weight:400;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
padding:.5rem .6rem;border-bottom:1px solid var(--rule)}
td{padding:.55rem .6rem;border-bottom:1px solid #1b1e1b;vertical-align:top}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{display:inline-block;height:7px;background:var(--amber);vertical-align:middle;border-radius:1px}
.bar.low{background:var(--bad)}
.weak td{background:rgba(201,86,63,.07)}
tr.cathead td{background:#151815;color:var(--dim);font-size:.7rem;letter-spacing:.18em;
text-transform:uppercase;padding:.9rem .6rem .45rem;border-bottom:1px solid var(--rule)}
.sev{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.1rem .4rem;border:1px solid var(--rule)}
.sev.high{border-color:var(--bad);color:var(--bad)}
.sev.medium{border-color:var(--amber);color:var(--amber)}
.sev.low,.sev.info{color:var(--dim)}
.tier{color:var(--dim);font-size:.72rem}
a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.35)}
a:hover{border-bottom-color:var(--amber)}
.note{color:var(--dim);font-size:.8rem;line-height:1.65;margin:1rem 0 0}
pre{overflow-x:auto;background:#111413;border:1px solid var(--rule);padding:1rem;font-size:.76rem;line-height:1.5;color:var(--bone)}
code{font-size:.86em;color:var(--bone)}
footer{margin-top:4rem;padding:1.25rem 0 2rem;border-top:1px dashed var(--rule);color:var(--dim);font-size:.78rem}
footer a{color:var(--dim);border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--amber);border-color:var(--amber)}
.frow{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:.6rem}
.frow>div{flex:1 1 22rem;min-width:16rem}
.fmeta{font-size:.72rem;letter-spacing:.02em}
</style></head>
<body><div class="wrap"><nav>
  <a href="/">The list</a>
  <a href="/method.html">Method</a>
  <a href="/badges.html">Badge</a>
  <a href="/oath.html">The Oath</a>
  <a href="/game.html">Game</a>
  <a href="https://forge.binaryranch.com/bunkhouse/bigtech-sucks">Source</a>
</nav>
<h1>The rating badge</h1>
<p class="sub">Put it in your footer. It is not a sticker, and that is the point.</p>

<p class="lede">If you have been rated by us, you may display the badge. It is served from our
domain and regenerated from the database, so it is not a picture you copy. It is a live reference
to a record you do not control.</p>

<h2>How it works</h2>
<table>
  <tr><th>The badge is</th><th>Which means</th></tr>
  <tr><td>Served from <code>bigtech.sucks</code></td><td>A copy pasted onto your own server is not a badge and its link will not resolve.</td></tr>
  <tr><td>Generated from the record</td><td>The score and date are not typed by anyone. They come out of the database.</td></tr>
  <tr><td>Regenerated every build</td><td>Improve and your badge improves without asking. Regress and it regresses without warning.</td></tr>
  <tr><td>Linked to the report</td><td>Anyone who clicks it lands on your evidence trail, not a marketing page.</td></tr>
</table>

<h2>The rules, published plainly</h2>
<p class="note">Only a rated product may display a badge. There is no badge for an unrated product,
and we will not issue one as a favour. If a badge is used on a product that is not rated, or is
altered to show a score we did not publish, we will say so publicly.</p>
<p class="note">A badge is free. It always will be. It is marketing for you and it is receipts
for your customer, and charging for it would make it worthless to both.</p>

<h2>Available badges</h2>

    <div style="margin:1.5rem 0;padding:1rem;border:1px solid var(--rule);background:#111413">
      <div style="display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap">
        <img src="/badge/signal-desktop.svg" width="260" height="56" alt="Signal Desktop rating">
        <div>
          <div style="font-size:.9rem">Signal Desktop &middot; <strong>76.4</strong> &middot; grade B</div>
          <div class="tier">assessed 2026-10-29 &middot; weakest: local_data_exposure</div>
        </div>
      </div>
      <pre style="margin:1rem 0 0">&lt;a href="https://bigtech.sucks/report/signal-desktop.html"&gt;
  &lt;img src="https://bigtech.sucks/badge/signal-desktop.svg"
       width="260" height="56"
       alt="Signal Desktop: bigtech.sucks rating 76.4/100"&gt;
&lt;/a&gt;</pre>
    </div>

<h2>Why you would want this</h2>
<p class="note">Because every competitor who cannot show one is leaving a question on the table.
A privacy claim in your own copy is a claim. A badge that links to a re-runnable audit is evidence,
and it costs you nothing but the honesty of being measured.</p>
<footer>
  <div class="frow">
    <div>
      Built in the open at the
      <a href="https://forge.binaryranch.com/bunkhouse">Binary Ranch Bunkhouse</a>.
      Every repository there is one you can read, clone, and leave with.
    </div>
    <div class="fmeta">
      Generated from <code>bigtech.db</code> on 2026-10-30.
      Method btr-0.1. Every number recomputes from its evidence or the build fails.
    </div>
  </div>
  <div class="frow">
    <div class="fmeta">
      <a href="https://forge.binaryranch.com/bunkhouse/bigtech-sucks">Source for this site</a> &middot;
      <a href="https://forge.binaryranch.com/bunkhouse/vitals">vitals</a> &middot;
      <a href="https://forge.binaryranch.com/bunkhouse/otter-dark-mode">otter-dark-mode</a>
    </div>
    <div class="fmeta">
      <a href="https://binaryranch.com">Binary Ranch</a> &middot; Venice, Florida
    </div>
  </div>
</footer>
</div></body></html>