<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VerIQ — your result</title>
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<div class="wrap">
  <header class="top">
    <a class="logo" href="/">Ver<span>IQ</span></a>
    <span class="tagline">your signed result</span>
  </header>

  <div id="loading"><div class="spin"></div></div>

  <div id="resultArea" style="display:none">
    <section class="hero" style="padding-bottom:8px">
      <div class="score-big" id="iqScore">--</div>
      <div class="score-sub" id="percentileLine"></div>
      <div id="badges"></div>
    </section>

    <section class="panel">
      <h2>Category breakdown</h2>
      <div class="cats" id="cats"></div>
    </section>

    <section class="panel">
      <h2>Your verify link</h2>
      <p>Share this link — anyone can open it and see the signature check pass. No screenshot needed.</p>
      <div class="linkbox">
        <input id="verifyLink" readonly>
        <button class="btn small" id="copyBtn">Copy</button>
      </div>
      <div class="share">
        <a class="btn ghost small" id="shareX" target="_blank" rel="noopener">Share on X</a>
        <a class="btn ghost small" id="shareTg" target="_blank" rel="noopener">Share on Telegram</a>
      </div>
    </section>

    <section class="panel">
      <h2>Claim this result (coming next)</h2>
      <p>
        Soon you'll be able to bind this result to your X or Instagram account —
        the verify page will then show your handle and avatar next to the score.
      </p>
    </section>
  </div>

  <div id="errorArea" class="err" style="display:none"></div>

  <footer>
    VerIQ · <a href="/.well-known/veriq-pubkey.txt">service public key</a> ·
    results are preliminary-calibrated until 500 completions
  </footer>
</div>
<script src="/assets/result.js"></script>
</body>
</html>