hcrb/public/index.html

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HCRB – Highcap Rasselbande</title>
  <meta name="description" content="Highcap Rasselbande (HCRB), Airsoft-Gruppe aus Berlin.">
  <meta name="theme-color" content="#121730">
  <link rel="preload" href="/fonts/saira-stencil-one-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body class="home">
  <section class="hero" aria-label="HCRB">
    <div class="hero-stage" id="hero-stage">
      <!-- Flagge in zwei Ebenen: Hintergrund mit Bär steht, das Zahnrad darüber dreht sich beim Scrollen -->
      <img class="hero-flag" src="/img/flagge-grund.jpg" alt="Flagge der HCRB: Berliner Bär in einem Zahnrad" width="1600" height="1067" fetchpriority="high">
      <img class="hero-flag hero-gear" src="/img/zahnrad.webp" alt="" width="1600" height="1067" fetchpriority="high">
      <div class="hero-shade"></div>
      <div class="hud" aria-hidden="true">
        <span class="tl">52.520° N · 13.405° E</span>
        <span class="tr">Airsoft · Berlin</span>
        <span class="corner c1"></span><span class="corner c2"></span>
        <span class="corner c3"></span><span class="corner c4"></span>
      </div>
      <div class="hero-title">
        <h1>HCRB</h1>
        <div class="subtitle">Highcap Rasselbande</div>
      </div>
    </div>
  </section>

  <main>
    <section class="next-op reveal" id="next-op">
      <div>
        <span class="eyebrow">Nächster Einsatz</span>
        <h2 id="next-title">Lädt …</h2>
        <div class="when" id="next-when"></div>
      </div>
      <div class="countdown" id="next-countdown" hidden></div>
    </section>

    <nav class="areas reveal" aria-label="Bereiche">
      <a class="tile big" href="/kalender">
        <svg class="bg-gear" viewBox="0 0 100 100" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M87.8 40.4 L97.5 43.1 L97.5 56.9 L87.8 59.6 L87.5 60.6 L94.6 67.8 L87.7 79.7 L77.9 77.2 L77.2 77.9 L79.7 87.7 L67.8 94.6 L60.6 87.5 L59.6 87.8 L56.9 97.5 L43.1 97.5 L40.4 87.8 L39.4 87.5 L32.2 94.6 L20.3 87.7 L22.8 77.9 L22.1 77.2 L12.3 79.7 L5.4 67.8 L12.5 60.6 L12.2 59.6 L2.5 56.9 L2.5 43.1 L12.2 40.4 L12.5 39.4 L5.4 32.2 L12.3 20.3 L22.1 22.8 L22.8 22.1 L20.3 12.3 L32.2 5.4 L39.4 12.5 L40.4 12.2 L43.1 2.5 L56.9 2.5 L59.6 12.2 L60.6 12.5 L67.8 5.4 L79.7 12.3 L77.2 22.1 L77.9 22.8 L87.7 20.3 L94.6 32.2 L87.5 39.4Z M50 28a22 22 0 1 0 0 44a22 22 0 1 0 0-44Z"/></svg>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" aria-hidden="true">
          <rect x="3" y="5" width="18" height="16"/><path d="M3 10h18M8 3v4M16 3v4M7 14h3M14 14h3M7 17h3"/>
        </svg>
        <h2>Kalender</h2>
        <p>Spieltage und Termine eintragen, zusagen und als Kalenderdatei aufs Handy holen.</p>
        <span class="go">Zum Kalender</span>
      </a>
      <a class="tile" href="/fahrt">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" aria-hidden="true">
          <path d="M3 16v-4l2-5h14l2 5v4H3z"/><path d="M3 12h18"/><circle cx="7.5" cy="17.5" r="1.8"/><circle cx="16.5" cy="17.5" r="1.8"/>
        </svg>
        <h2>Fahrtplaner</h2>
        <p>Fahrgemeinschaften einteilen.</p>
      </a>
      <a class="tile" href="/patches">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" aria-hidden="true">
          <path d="M12 2.5l8 3.5v6c0 5-3.5 8.2-8 9.5-4.5-1.3-8-4.5-8-9.5V6z"/><path d="M8.5 12l2.5 2.5 4.5-5"/>
        </svg>
        <h2>Patches</h2>
        <p>Alle Patches der Bande.</p>
      </a>
      <a class="tile" href="/statistik">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" aria-hidden="true">
          <path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/>
        </svg>
        <h2>Statistik</h2>
        <p>Wer war wie oft spielen?</p>
      </a>
      <a class="tile" href="/gruppe">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" aria-hidden="true">
          <circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c2 .7 3.2 2.4 3.5 5.2"/>
        </svg>
        <h2>Gruppe</h2>
        <p>Mitglieder und Treffpunkte.</p>
      </a>
    </nav>

    <section id="patch-section" class="reveal" hidden>
      <div class="section-title">
        <h2>Unsere Patches</h2>
        <a href="/patches" class="button small">Alle Patches</a>
      </div>
      <div class="patch-rail" id="patch-rail"></div>
    </section>

    <div class="home-grid reveal">
      <div class="card">
        <div class="card-head">
          <h2>Nächste Termine</h2>
          <a href="/kalender" class="button small">Zum Kalender</a>
        </div>
        <div id="upcoming"><p class="muted">Lädt …</p></div>
      </div>

      <div class="card">
        <div class="card-head">
          <h2>Pile of Shame</h2>
          <a href="/statistik" class="button small">Zur Statistik</a>
        </div>
        <div id="shame"><p class="muted">Lädt …</p></div>
      </div>
    </div>

    <section class="about reveal">
      <img src="/img/logo.png" alt="" width="128" height="128">
      <div>
        <span class="eyebrow">Über uns</span>
        <h2>Highcap Rasselbande</h2>
        <p>
          Wir sind die <strong>Highcap Rasselbande (HCRB)</strong>, eine Airsoft-Gruppe aus Berlin.
          Gespielt wird bei uns vor allem auf der <strong>Darkzone</strong>, dort sind wir regelmäßig unterwegs.
        </p>
        <p>
          Hier planen wir unsere Spieltage und Fahrgemeinschaften. Videos und Bilder von unseren Spielen
          gibt es auf YouTube und Instagram.
        </p>
        <div class="social">
          <a class="button" href="https://www.youtube.com/@highcaprasselbande" target="_blank" rel="noopener">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"/></svg>YouTube
          </a>
          <a class="button" href="https://www.instagram.com/hcrb.airsoft" target="_blank" rel="noopener">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2.5" y="2.5" width="19" height="19" rx="5"/><circle cx="12" cy="12" r="4.2"/><circle cx="17.6" cy="6.4" r="1" fill="currentColor" stroke="none"/></svg>Instagram
          </a>
        </div>
      </div>
    </section>
  </main>

  <script type="module" src="/js/home.js"></script>
</body>
</html>