Files
hcrb/public/kooperationen.html
guyg1474andClaude Opus 5.5 819219fb2d Rollen (Admin/Mitglied), Seite Kooperationen, Textanpassungen
- Gemeinsame Zugänge mit Rollen: Admin darf alles, Mitglied nutzt Kalender,
  Fahrtplaner, Treffpunkte und bearbeitet Mitglieder (kein Hinzufügen,
  Löschen, Import, keine Patches, keine Statistik-Korrektur)
- Server prüft die Rechte (403), Konten ohne Rolle gelten als Admin
- npm run user: add <name> [admin|mitglied], role <name> <rolle>
- Neue öffentliche Seite Kooperationen mit Titelbild, Anführer,
  Social-Media-Links und Beschreibung, Pflege durch Admin
- Kopfzeile bleibt bei mittlerer Breite einzeilig
- Texte auf Wunsch gekürzt

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 19:47:03 +02:00

107 lines
4.8 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kooperationen – HCRB</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<main>
<!-- Übersicht aller Kooperationen -->
<section id="overview">
<header class="page-head">
<div>
<span class="eyebrow">Verbündete Teams</span>
<h1>Kooperationen</h1>
<p>Gruppen, mit denen die HCRB zusammen spielt, plant und unterwegs ist.</p>
</div>
<div class="actions">
<button type="button" id="add-btn" class="primary" hidden>Kooperation hinzufügen</button>
</div>
</header>
<div id="coop-grid" class="coop-grid"></div>
<div id="coop-empty" class="empty-state" hidden>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M7 11l3-3 3 2 3-3 4 4-6 6-2-1-2 1-6-6z"/><path d="M3 9l4 2M21 9l-4 2"/></svg>
<strong>Noch keine Kooperationen</strong>
<span id="coop-empty-hint">Sobald der Admin eine Kooperation einträgt, erscheint sie hier.</span>
</div>
</section>
<!-- Einzelne Kooperation: Titelbild, Anführer, Soziale Medien, Beschreibung -->
<article id="detail" hidden>
<a href="#" class="back-link" id="back-link">‹ Alle Kooperationen</a>
<div class="coop-hero" id="detail-hero">
<img id="detail-img" alt="" hidden>
<div class="coop-hero-text">
<span class="eyebrow">Kooperation</span>
<h1 id="detail-name"></h1>
</div>
</div>
<div class="split wide-left coop-info">
<div class="card">
<h2>Über die Gruppe</h2>
<p id="detail-description" class="coop-description"></p>
</div>
<div class="card">
<h2>Anführer</h2>
<p id="detail-leader" class="coop-leader"></p>
<h2 class="spaced">Soziale Medien</h2>
<div id="detail-socials" class="coop-socials"></div>
<div id="detail-admin" class="row wrap admin-actions" hidden>
<button type="button" id="detail-edit">Bearbeiten</button>
<button type="button" id="detail-delete" class="link danger">Löschen</button>
</div>
</div>
</div>
</article>
<!-- Formular (nur Admin) -->
<div class="card" id="coop-form-card" hidden>
<h2 id="coop-form-title">Kooperation hinzufügen</h2>
<form id="coop-form" class="split">
<div>
<label class="dropzone wide" id="dropzone" for="coop-file">
<img id="coop-preview" alt="Vorschau" hidden>
<span id="drop-text"></span>
<input type="file" id="coop-file" accept="image/png,image/jpeg,image/webp,image/svg+xml,.svg" hidden>
</label>
<label class="inline" id="remove-image-wrap" hidden>
<input type="checkbox" id="coop-remove-image"> Titelbild entfernen
</label>
</div>
<div>
<label>Name der Gruppe
<input type="text" id="coop-name" required maxlength="80" placeholder="z. B. Black Wolves Airsoft">
</label>
<label>Anführer
<input type="text" id="coop-leader" maxlength="120" placeholder="Name oder Rufname">
</label>
<label>Kurze Beschreibung
<textarea id="coop-description" maxlength="2000" placeholder="Wer sind sie, wo spielen sie, was machen wir zusammen …"></textarea>
</label>
<fieldset class="socials-fields">
<legend>Soziale Medien (optional, Link einfügen)</legend>
<div class="grid2">
<label>Website <input type="text" id="social-website" inputmode="url" placeholder="https://…"></label>
<label>Instagram <input type="text" id="social-instagram" inputmode="url" placeholder="instagram.com/…"></label>
<label>YouTube <input type="text" id="social-youtube" inputmode="url" placeholder="youtube.com/@…"></label>
<label>TikTok <input type="text" id="social-tiktok" inputmode="url" placeholder="tiktok.com/@…"></label>
<label>Facebook <input type="text" id="social-facebook" inputmode="url" placeholder="facebook.com/…"></label>
<label>Discord <input type="text" id="social-discord" inputmode="url" placeholder="discord.gg/…"></label>
</div>
</fieldset>
<p id="coop-error" class="warn" hidden></p>
<div class="row wrap">
<button type="submit" class="primary" id="coop-submit">Speichern</button>
<button type="button" id="coop-cancel">Abbrechen</button>
</div>
</div>
</form>
</div>
</main>
<script type="module" src="/js/kooperationen.js"></script>
</body>
</html>