feat: add about page and link to it from home page

src/app.js

@@ -126,6 +126,11 @@ async function start() {
     res.render('scanner', { title: 'QR Scanner' });
   });
 
+  // About page
+  app.get('/about', (req, res) => {
+    res.render('about', { title: 'About Loot Hunt' });
+  });
+
   // Home page
   app.get('/', (req, res) => {
     const { Hunts, Scans } = require('./models');

src/views/about.ejs

@@ -0,0 +1,83 @@
+<%- include('partials/header') %>
+
+<div class="container">
+  <h1>About Loot Hunt</h1>
+
+  <div class="card" style="margin-top: 1.5rem;">
+    <h2 style="margin-top: 0;">What is Loot Hunt?</h2>
+    <p>Loot Hunt is a digital treasure hunt game. Organizers hide QR codes in the real world and players scan them to earn points. Think geocaching, but entirely digital &mdash; no swapping trinkets, just bragging rights and leaderboard glory.</p>
+    <p>Each QR code is called a <strong>package</strong>, and packages are grouped into <strong>hunts</strong>. A hunt might be a set of codes hidden around a neighborhood, an event venue, a campus &mdash; anywhere, really.</p>
+  </div>
+
+  <div class="card" style="margin-top: 1.5rem;">
+    <h2 style="margin-top: 0;">Scoring</h2>
+    <p>Points are awarded based on how early you find a package:</p>
+    <div class="stats-row" style="margin: 1rem 0;">
+      <div class="stat-box">
+        <div class="value">500</div>
+        <div class="label">1st Find</div>
+      </div>
+      <div class="stat-box">
+        <div class="value">250</div>
+        <div class="label">2nd Find</div>
+      </div>
+      <div class="stat-box">
+        <div class="value">100</div>
+        <div class="label">3rd Find</div>
+      </div>
+      <div class="stat-box">
+        <div class="value">50</div>
+        <div class="label">4th+ Finds</div>
+      </div>
+    </div>
+    <p>Being first matters! Race to discover new packages before anyone else to maximize your score.</p>
+  </div>
+
+  <div class="card" style="margin-top: 1.5rem;">
+    <h2 style="margin-top: 0;">How to Play</h2>
+    <ol style="line-height: 1.8;">
+      <li><strong>Create an account</strong> &mdash; pick a username and you're in.</li>
+      <li><strong>Find a QR code</strong> &mdash; look for Loot Hunt stickers, cards, or signs in the wild.</li>
+      <li><strong>Scan it</strong> &mdash; use our <a href="/scanner" style="color: var(--primary);">built-in QR scanner</a> or any camera app. The built-in scanner verifies the code is a legit Loot Hunt link.</li>
+      <li><strong>Claim your points</strong> &mdash; log in (or sign up) and the points are yours.</li>
+      <li><strong>Climb the leaderboard</strong> &mdash; check the <a href="/leaderboard" style="color: var(--primary);">global leaderboard</a> or per-hunt rankings.</li>
+    </ol>
+  </div>
+
+  <div class="card" style="margin-top: 1.5rem;">
+    <h2 style="margin-top: 0;">Features &amp; Quirks</h2>
+    <ul style="line-height: 1.8;">
+      <li><strong>First finder photo</strong> &mdash; the first person to scan a package can upload a photo as proof of discovery. Show off where you found it!</li>
+      <li><strong>Hints</strong> &mdash; the most recent scanner can leave a hint for future hunters. Be helpful, be cryptic, or be funny &mdash; your call.</li>
+      <li><strong>Display names</strong> &mdash; set a display name on your profile that's different from your login username. Express yourself.</li>
+      <li><strong>Hunt scheduling</strong> &mdash; hunts can have start dates. Some are hidden until they begin &mdash; keep checking back!</li>
+      <li><strong>Safe scanning</strong> &mdash; the built-in QR scanner checks that codes link to this site before opening them, protecting you from shady QR codes in the wild.</li>
+      <li><strong>Each package can only be scanned once per player</strong> &mdash; no farming the same code for infinite points.</li>
+      <li><strong>Dark mode</strong> &mdash; toggle it in the header. Your eyes will thank you.</li>
+    </ul>
+  </div>
+
+  <div class="card" style="margin-top: 1.5rem;">
+    <h2 style="margin-top: 0;">For Organizers</h2>
+    <p>Want to create your own hunt? Ask an admin to grant you the <strong>Organizer</strong> role. Once you have it, you can:</p>
+    <ul style="line-height: 1.8;">
+      <li>Create hunts with any number of packages</li>
+      <li>Set expiry dates and start dates</li>
+      <li>Hide hunts until they start</li>
+      <li>Download printable PDF cards with QR codes (Avery 5371 format, 10 per page)</li>
+      <li>Monitor scan activity and leaderboards for your hunts</li>
+    </ul>
+  </div>
+
+  <div class="card" style="margin-top: 1.5rem;">
+    <h2 style="margin-top: 0;">Get in Touch</h2>
+    <p>Have questions, ideas, or found a bug? Reach out!</p>
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
+      <a href="https://mastodon.nervesocket.com/@ThaMunsta" class="btn btn-outline" target="_blank" rel="noopener noreferrer">&#x1F418; Mastodon</a>
+      <a href="https://git.dev.nervesocket.com/ThaMunsta/loot-hunt" class="btn btn-outline" target="_blank" rel="noopener noreferrer">&#x1F4E6; Source Code</a>
+    </div>
+    <p style="margin-top: 1rem; color: var(--muted); font-size: 0.9rem;">Loot Hunt is open source. Contributions, bug reports, and forks are welcome!</p>
+  </div>
+</div>
+
+<%- include('partials/footer') %>

src/views/home.ejs

@@ -7,6 +7,7 @@
     <div style="display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;">
       <a href="/hunts" class="btn btn-primary">Browse Hunts</a>
       <a href="/leaderboard" class="btn btn-outline">Leaderboard</a>
+      <a href="/about" class="btn btn-outline">Learn More</a>
       <% if (!currentUser) { %>
         <a href="/auth/login" class="btn btn-success">Login</a>
       <% } %>