failed.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payment not completed — Polymarket microstructure data</title>
<style>
/* Same tokens as index.html / paid.html, duplicated so this page stands alone. */
:root {
  --paper:       #fcfcfa;
  --paper-sunk:  #f2f2ee;
  --ink:         #16181c;
  --ink-2:       #4a4e56;
  --ink-3:       #8a8f98;
  --rule:        #deddd8;
  --rule-strong: #b3b2ac;
  --ask:         #9b3b33;
  --flag:        #8a6a1f;

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 64ch;
  --page: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #131417;
    --paper-sunk:  #1a1c20;
    --ink:         #e9e7e2;
    --ink-2:       #a6a9af;
    --ink-3:       #71757c;
    --rule:        #2a2c31;
    --rule-strong: #454850;
    --ask:         #c97f76;
    --flag:        #c3a15e;
  }
}

:root[data-theme="dark"] {
  --paper:#131417; --paper-sunk:#1a1c20; --ink:#e9e7e2; --ink-2:#a6a9af;
  --ink-3:#71757c; --rule:#2a2c31; --rule-strong:#454850;
  --ask:#c97f76; --flag:#c3a15e;
}
:root[data-theme="light"] {
  --paper:#fcfcfa; --paper-sunk:#f2f2ee; --ink:#16181c; --ink-2:#4a4e56;
  --ink-3:#8a8f98; --rule:#deddd8; --rule-strong:#b3b2ac;
  --ask:#9b3b33; --flag:#8a6a1f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page { max-width: var(--page); margin: 0 auto; padding: 0 28px; }

p { max-width: var(--measure); margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--rule-strong);
}

.masthead .mark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.masthead nav a { text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }

.opener { padding: 76px 0 60px; }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 20px;
  max-width: 20ch;
}

.standfirst {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}

.notice {
  margin-top: 40px;
  padding-left: 18px;
  border-left: 2px solid var(--ask);
  max-width: var(--measure);
}
.notice .label { display: block; margin-bottom: 7px; color: var(--ask); }
.notice p { font-size: 16px; color: var(--ink-2); }

.back {
  display: inline-block;
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
}
.back:hover { border-bottom-width: 2px; padding-bottom: 6px; }

footer { padding: 44px 0 72px; }
footer p { font-size: 14px; color: var(--ink-3); max-width: 62ch; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
</style>
</head>
<body>

<div class="page">

  <header class="masthead">
    <div class="mark">Polymarket microstructure</div>
    <nav class="label"><a href="index.html">&larr; Back to dataset</a></nav>
  </header>

  <div class="opener">
    <h1>Payment didn&rsquo;t complete</h1>
    <p class="standfirst">The checkout was cancelled, expired, or the payment provider reported a failure before it confirmed.</p>

    <div class="notice">
      <span class="label">Order</span>
      <p id="order-line">No order id was attached to this link.</p>
    </div>

    <p><a class="back" href="index.html">Back to the dataset — try again</a></p>
  </div>

  <footer>
    <p>If money left your wallet but this page still says the payment failed, message <a href="https://t.me/Datasets_support_bot">@Datasets_support_bot</a> on Telegram with your order id and a transaction hash.</p>
  </footer>

</div>

<script>
// Just displays the order id from the query string, if present. No API
// calls happen on this page.
const params = new URLSearchParams(location.search);
const orderId = params.get("order");
const orderLine = document.getElementById("order-line");
if (orderId) {
  orderLine.textContent = orderId;
}
</script>

</body>
</html>