index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="write a sketch that draws itself. we print it on the little thermal machine and post it to you." />
    <meta name="theme-color" content="#f6f4ef" />
    <title>Receipt — Hack Club</title>

    <link rel="icon" type="image/svg+xml" href="./assets/hack-club-flag.svg" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;500;700&family=Unkempt:wght@400;700&display=swap" />
    <link rel="stylesheet" href="./style.css" />
    <script type="module" src="./script.js"></script>
  </head>

  <body>
    <main class="page-shell">
      <header class="site-header">
        <a class="hack-club-mark" href="https://hackclub.com/">
          <img src="./assets/hack-club-2026.svg" alt="Hack Club" />
        </a>
      </header>

      <section class="hero" aria-labelledby="hero-title">
        <div class="terminal-wrap"><pos-terminal></pos-terminal></div>
        <h1 id="hero-title">write a sketch that draws itself.</h1>
        <p class="intro">
          we print it on the little thermal machine and post it to you.
          ends <strong>thursday sept 24</strong>
        </p>
        <div class="hero-actions">
          <a class="hero-start" href="https://github.com/hackclub/receipt" target="_blank">start here</a>
          <a class="hero-submit" href="/submit">submit &rarr;</a>
        </div>
        <a class="hero-gallery" href="/gallery">see what people made &rarr;</a>
        <a class="scroll-cue" href="#examples">
          <span class="scroll-cue-tab">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="3"
                    stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span class="visually-hidden">Scroll for more</span>
          </span>
        </a>
      </section>

      <section class="gallery" id="examples" aria-label="Example receipts">
        <figure class="receipt-preview receipt-preview-left">
          <canvas data-art data-seed="67" data-style="orbit" width="300" height="420"></canvas>
        </figure>
        <figure class="receipt-preview receipt-preview-center">
          <canvas data-art data-seed="67" data-style="ridges" width="300" height="420"></canvas>
        </figure>
        <figure class="receipt-preview receipt-preview-right">
          <canvas data-art data-seed="67" data-style="halftone" width="300" height="420"></canvas>
        </figure>
      </section>


      <section class="bonus" aria-labelledby="bonus-title">
        <div class="bonus-art">
          <img class="cat-printer" src="./assets/cat-printer.png" alt="A thermal receipt printer" width="210" height="200" />
        </div>

        <div class="bonus-copy">
          <h2 id="bonus-title">BONUS</h2>
          <p>
            if you code for 10 hours, then I'll ship a cat printer to you!
          </p>
        </div>
      </section>

      <section class="info-receipt" aria-labelledby="how-it-works-title">
        <span class="tape tape-wide" aria-hidden="true"></span>
        <div class="receipt-paper">
          <header class="receipt-header">
            <h2 id="how-it-works-title">RECEIPT</h2>
            <p>hack club</p>
          </header>

          <div class="rule" aria-hidden="true"></div>
          <section aria-labelledby="steps-title">
            <h3 id="steps-title">HOW IT WORKS</h3>
            <ol class="steps">
              <li><p><strong>Fork the repo.</strong> <a href="https://github.com/hackclub/receipt" target="_blank">github.com/hackclub/receipt</a> -- everything you need is in <code>editor/</code>. It has to be this starter because my printer is fussy. Sowwy</p></li>
              <li><p><strong>Make it yours.</strong> Edit <code>sketch.js</code> in your normal editor and save; check the corresponding preview. Pick a seed you like, hit <strong>Export PNG</strong></p></li>
              <li><p><strong>Ship it.</strong> Send your repo link and that PNG <a href="/submit">here</a> and wait! I'll print it on a receipt printer and send it to you. Maybe I'll drop some stickers too ;&gt;</p></li>
            </ol>
          </section>

          <div class="rule" aria-hidden="true"></div>
          <canvas class="wide-art" data-art data-seed="67" data-style="orbit" data-chrome="false" width="568" height="420"></canvas>
          <div class="rule" aria-hidden="true"></div>

          <section class="questions" aria-labelledby="questions-title">
            <h3 id="questions-title">QUESTIONS &gt;_&lt;</h3>
            <details>
              <summary>What can I make?</summary>
              <p>Anything that can fit on a receipt that you can done w/ p5.js!</p>
            </details>
            <details>
              <summary>What size is the receipt?</summary>
              <p>384 pixels wide!</p>
            </details>
            <details>
              <summary>What do I submit?</summary>
              <p>A public link to your repo and the PNG exported by the editor. Select your Hackatime project when submitting. <a href="/submit">Submit here</a>.</p>
            </details>
            <details>
              <summary>Will you actually mail it to me?</summary>
              <p>Yep! I'll print your art on a receipt printer and mail it to you.</p>
            </details>
            <details>
              <summary>When's the deadline?</summary>
              <p>Thursday, 24 2026. Ship Ship</p>
            </details>
          </section>

          <p class="receipt-signoff">okie bai bai<br />go make something.</p>
          <div class="barcode" data-barcode="receipt.hackclub.com"></div>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <p>
        Run by <a href="https://cskartikey.dev/" target="_blank">@cskartikey</a>, made with <span aria-label="love">♥</span> by teenagers, for teenagers at
        <a href="https://hackclub.com/">Hack Club</a> — a 501(c)(3) nonprofit and a network of 100k+ technical high schoolers.
      </p>
      <nav aria-label="Hack Club links">
        <a href="https://hackclub.com/slack/">slack</a>
        <a href="https://hackclub.com/clubs/">clubs</a>
        <a href="https://hackclub.com/privacy-and-terms">privacy</a>
        <a href="https://forms.hackclub.com/bounty">fulfillment</a>
      </nav>
    </footer>
  </body>
</html>