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>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <section class="hero">
    <div>
      <h1>HCRB</h1>
      <div class="subtitle">Highcap Rasselbande</div>
    </div>
  </section>

  <main>
    <p class="intro">
      Wir sind die Highcap Rasselbande – eine Airsoft-Gruppe aus Berlin.
      Am häufigsten findet ihr uns auf der Darkzone.
    </p>

    <p class="notice wip">
      <strong>Diese Seite ist noch in Arbeit.</strong> Es kommen noch Änderungen und neue Funktionen dazu.
    </p>

    <div class="tiles">
      <a class="tile" href="/kalender">
        <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>
        <div>
          <h2>Kalender</h2>
          <p>Spieltage eintragen und zusagen.</p>
        </div>
      </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>
        <div>
          <h2>Fahrtplaner</h2>
          <p>Fahrgemeinschaften einteilen.</p>
        </div>
      </a>
    </div>

    <div class="card">
      <div class="card-head">
        <h2>Nächste Spieltage</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 class="card">
      <h2>Über uns</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>
  </main>


  <script type="module">
    import { renderHeader, renderFooter, api, esc, formatDate } from '/js/common.js';

    renderHeader('home');
    renderFooter();

    const box = document.getElementById('upcoming');
    try {
      const events = await api('GET', '/upcoming');
      box.innerHTML = events.length
        ? `<ul class="list">${events.map((e) => `
            <li>
              <span class="name"><strong>${esc(e.title)}</strong></span>
              <span class="meta">${formatDate(e.date, true)}</span>
              <span class="badge">${e.attendeeCount} zugesagt</span>
            </li>`).join('')}</ul>`
        : '<p class="muted">Noch keine Spieltage eingetragen.</p>';
    } catch {
      box.innerHTML = '<p class="muted">Termine konnten nicht geladen werden.</p>';
    }

    // Pile of Shame: wer dieses Jahr noch nicht spielen war
    const shame = document.getElementById('shame');
    try {
      const { year, entries } = await api('GET', '/stats');
      const names = entries.filter((s) => s.total === 0).map((s) => s.name).sort((a, b) => a.localeCompare(b, 'de'));
      shame.innerHTML = names.length
        ? `<p class="muted">Waren ${year} noch kein einziges Mal spielen:</p>
           <div class="chips">${names.map((n) => `<span class="chip">${esc(n)}</span>`).join('')}</div>`
        : `<p class="muted">Leer – alle waren ${year} schon spielen.</p>`;
    } catch {
      shame.innerHTML = '<p class="muted">Konnte nicht geladen werden.</p>';
    }
  </script>
</body>
</html>