<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VerIQ — verify result</title>
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<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">public verification</span>
  </header>

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

  <div id="verifyArea" 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>Verification details</h2>
      <dl class="kv">
        <dt>Result ID</dt><dd id="kvId"></dd>
        <dt>Completed</dt><dd id="kvDate"></dd>
        <dt>Identity</dt><dd id="kvIdentity"></dd>
        <dt>Question bank</dt><dd id="kvBank"></dd>
        <dt>Signature</dt><dd id="kvSig"></dd>
        <dt>Service public key</dt><dd id="kvPub"></dd>
      </dl>
      <p style="margin-top:10px">
        The signature is re-checked server-side on every view of this page.
        If it shows <span class="mono" style="color:var(--good)">valid</span>,
        this result was issued by VerIQ and has not been altered.
      </p>
    </section>

    <section class="panel">
      <h2>Want your own?</h2>
      <p>Take the test and get your own signed, verifiable result.</p>
      <a class="btn small" href="/test" style="margin-top:10px">Start the test →</a>
    </section>
  </div>

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

  <footer>
    VerIQ · <a href="/how">how verification works</a> · <a href="/.well-known/veriq-pubkey.txt">service public key</a>
  </footer>
</div>
<script src="/assets/verify.js"></script>
</body>
</html>