Files
BNI-Vorstellungsrunde/anleitung.html
Christian Heubaum 580725f2f7 Version 2.0: Agenda-Folien für Online-Meetings (Hybrid-Chapter)
Neue Agenda-Punkte im Steuerpult (frei per Drag & Drop sortierbar, wie
die Mitgliederliste), pro Punkt entweder als hochgeladenes Bild oder als
Live-Einbettung aus Zoho Show. Mitglieder-/Besucher-Vorstellungsrunde und
eine neue Marketing-/Ergebnisrunde (gleiche Reihenfolge, ohne Timer) sind
eingebaute Agenda-Punkte und lassen sich genauso einsortieren. Der
"Weiter"-Button folgt jetzt der kompletten Agenda-Reihenfolge statt nur
Mitglieder- und Besucherrunde.

Unterwegs behobene Bugs: unsichtbarer "Anzeigen"-Button (falsche
Button-Klasse), fehlendes chapters/<code>/-Präfix beim Bild-Upload,
Race-Condition beim Speichern eines gerade erst ausgewählten Bildes,
Agenda-Reihenfolge-Duplikate bei bestehenden Chaptern.

Anleitung um Agenda-Abschnitt ergänzt, plus Korrekturen zu Ordnername,
Aktivierungs-Kontakt, Admin-Panel-URL und Offline-Hinweis für
Live-Einbettungen. Screenshots-Ordner (inkl. bisher nie gepushter
Bestandsbilder) erstmals vollständig committet.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-19 18:59:22 +02:00

860 lines
50 KiB
HTML
Raw 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.0">
<title>BNI Vorstellungsrunde – Anleitung</title>
<style>
:root {
--red: #cc0000; --navy: #1a2744; --bg: #f0f2f5;
--card: #fff; --muted: #6b7280; --border: #e5e7eb;
--success: #16a34a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:#1a1a2e; line-height:1.6; }
.cover { background:linear-gradient(160deg,#0f1f45,#1a2744,#0d1b35); color:white; padding:60px 40px; text-align:center; }
.cover h1 { font-size:2rem; font-weight:800; letter-spacing:-0.5px; }
.cover .subtitle { color:rgba(255,255,255,0.6); margin-top:8px; font-size:1rem; }
.cover .badge { display:inline-block; margin-top:24px; background:var(--red); color:white; padding:6px 18px; border-radius:20px; font-size:0.82rem; font-weight:600; }
.toc { background:white; padding:24px 32px; border-bottom:1px solid var(--border); }
.toc h2 { font-size:0.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.toc ol { padding-left:18px; }
.toc li { font-size:0.9rem; padding:3px 0; }
.toc a { color:var(--navy); text-decoration:none; }
.toc a:hover { color:var(--red); }
.content { max-width:820px; margin:0 auto; padding:32px 24px 64px; }
.section { margin-bottom:48px; }
.section-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--red); }
.step-num { width:36px; height:36px; background:var(--red); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; flex-shrink:0; }
.section-header h2 { font-size:1.25rem; font-weight:700; color:var(--navy); }
.card { background:white; border-radius:12px; border:1px solid var(--border); padding:20px; margin-bottom:16px; }
.tip { background:#fef3c7; border:1px solid #fcd34d; border-radius:10px; padding:14px 16px; font-size:0.88rem; margin-bottom:16px; }
.tip strong { color:#92400e; }
.info { background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:14px 16px; font-size:0.88rem; margin-bottom:16px; }
.steps { counter-reset:step; }
.step { display:flex; gap:14px; margin-bottom:12px; align-items:flex-start; }
.step::before { counter-increment:step; content:counter(step); width:24px; height:24px; background:var(--navy); color:white; border-radius:50%; font-size:0.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.step p { font-size:0.9rem; }
.step code { background:#f3f4f6; padding:1px 6px; border-radius:4px; font-size:0.85rem; }
/* ——— MOCKUPS ——— */
.mockup { background:#1a1a2e; border-radius:12px; overflow:hidden; margin:16px 0; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
.mockup-bar { background:#0f1420; padding:8px 14px; display:flex; align-items:center; gap:8px; }
.mockup-dot { width:10px; height:10px; border-radius:50%; }
.mockup-body { padding:16px; }
.mock-activation { background:linear-gradient(160deg,#0f1f45,#1a2744); padding:32px 20px; text-align:center; border-radius:8px; }
.mock-activation h3 { color:white; font-size:1.1rem; margin-bottom:6px; }
.mock-activation p { color:rgba(255,255,255,0.5); font-size:0.82rem; margin-bottom:20px; }
.mock-input { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:10px 14px; color:white; font-size:0.9rem; text-align:center; margin-bottom:12px; width:100%; max-width:280px; }
.mock-btn-red { background:#cc0000; color:white; border:none; border-radius:8px; padding:10px 24px; font-weight:700; cursor:pointer; font-size:0.9rem; }
.mock-btn-gray { background:#374151; color:white; border:none; border-radius:8px; padding:8px 16px; font-weight:600; cursor:pointer; font-size:0.82rem; }
.mock-panel { background:#1e2235; border-radius:10px; padding:12px; }
.mock-member { display:flex; align-items:center; gap:10px; padding:8px 10px; background:rgba(255,255,255,0.05); border-radius:8px; margin-bottom:6px; }
.mock-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; color:white; }
.mock-name { font-size:0.85rem; font-weight:600; color:white; }
.mock-role { font-size:0.72rem; color:rgba(255,255,255,0.5); }
.mock-badge { padding:2px 8px; border-radius:12px; font-size:0.7rem; font-weight:700; margin-left:auto; }
.mock-badge.absent { background:rgba(204,0,0,0.2); color:#f87171; }
.mock-badge.present { background:rgba(22,163,74,0.2); color:#4ade80; }
.mock-timer { text-align:center; padding:20px; }
.mock-timer-ring { width:100px; height:100px; border-radius:50%; border:6px solid #cc0000; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.mock-timer-num { font-size:2rem; font-weight:800; color:white; }
.mock-timer-name { color:white; font-weight:700; font-size:1rem; }
.mock-timer-company { color:rgba(255,255,255,0.5); font-size:0.8rem; }
.mock-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:12px; }
.mock-tab { padding:8px 14px; font-size:0.78rem; color:rgba(255,255,255,0.4); border-bottom:2px solid transparent; }
.mock-tab.active { color:#cc0000; border-bottom-color:#cc0000; }
.mock-sub-modal { background:#2a2f45; border-radius:12px; padding:16px; }
.mock-sub-modal h4 { color:white; font-size:0.9rem; margin-bottom:12px; }
.mock-field { background:rgba(255,255,255,0.1); border-radius:6px; padding:8px 10px; color:rgba(255,255,255,0.7); font-size:0.8rem; margin-bottom:8px; }
.mock-sv-card { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.07); border-radius:8px; padding:8px 10px; margin-bottom:6px; border:1px solid transparent; cursor:pointer; }
.mock-sv-card:hover { border-color:rgba(204,0,0,0.5); }
.mock-sv-name { color:white; font-size:0.82rem; font-weight:600; }
.mock-sv-meta { color:rgba(255,255,255,0.45); font-size:0.72rem; }
.admin-mockup { background:#f0f2f5; border-radius:12px; overflow:hidden; border:1px solid var(--border); margin:16px 0; }
.admin-header { background:#1a2744; color:white; padding:12px 16px; font-size:0.9rem; font-weight:700; }
.admin-tabs { background:white; display:flex; border-bottom:1px solid var(--border); padding:0 16px; }
.admin-tab { padding:10px 16px; font-size:0.82rem; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; }
.admin-tab.active { color:var(--red); border-bottom-color:var(--red); }
.admin-body { padding:16px; }
.admin-member-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.admin-member-row:last-child { border-bottom:none; }
.admin-photo-badge { font-size:0.72rem; margin-left:auto; }
.admin-photo-badge.ok { color:var(--success); }
.admin-photo-badge.missing { color:#d97706; }
.highlight-box { border-left:3px solid var(--red); padding:10px 16px; background:white; border-radius:0 8px 8px 0; margin:12px 0; font-size:0.88rem; }
@page { margin: 14mm 14mm 14mm 14mm; }
@media print {
body { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.cover {
-webkit-print-color-adjust:exact; print-color-adjust:exact;
min-height: 100vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
page-break-after: always;
}
.toc { page-break-inside: avoid; }
.section { page-break-inside:avoid; }
.mockup, .admin-mockup { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
</style>
</head>
<body>
<div class="cover">
<div style="font-size:2.5rem; margin-bottom:8px;">🌟</div>
<h1>BNI Vorstellungsrunde</h1>
<div class="subtitle">Benutzeranleitung für Chapter-Admins</div>
<div class="badge">Version 1.5 · August 2026</div>
</div>
<div class="toc">
<h2>Inhalt</h2>
<ol>
<li><a href="#start">Tool starten</a></li>
<li><a href="#aktivierung">Erstmalige Aktivierung</a></li>
<li><a href="#ansichten">Ansichten: Display &amp; Steuerung</a></li>
<li><a href="#vorbereitung">Meeting vorbereiten</a></li>
<li><a href="#durchfuehrung">Meeting durchführen</a></li>
<li><a href="#vertreter">Vertreter eintragen</a></li>
<li><a href="#besucher">Besucher eintragen</a></li>
<li><a href="#admin">Admin-Panel: Fotos &amp; Stammvertreter</a></li>
<li><a href="#offline">Offline-Nutzung</a></li>
<li><a href="#update">Updates einspielen</a></li>
<li><a href="#timer-schalter">Zeitanzeige deaktivieren</a></li>
<li><a href="#augen-timer">8-Augen-Gespräche Timer</a></li>
<li><a href="#mitglieder-sync">Mitglieder mit BNI-Website synchronisieren</a></li>
<li><a href="#import-export">Import / Export &amp; Backup</a></li>
<li><a href="#agenda">Agenda-Folien für Online-Meetings (Hybrid-Chapter)</a></li>
</ol>
</div>
<div class="content">
<!-- ========== 1. START ========== -->
<div class="section" id="start">
<div class="section-header">
<div class="step-num">1</div>
<h2>Tool starten</h2>
</div>
<div class="card">
<div class="steps">
<div class="step"><p>Den Ordner <code>bni-vorstellungsrunde</code> im Finder öffnen.</p></div>
<div class="step"><p>Die Datei <strong>index.html</strong> per Doppelklick öffnen — sie startet direkt im Standardbrowser.</p></div>
</div>
</div>
<div class="info">
<strong>Alternative über das Terminal:</strong> Statt <code>index.html</code> direkt zu öffnen, kann auch die Datei <strong>start.command</strong> doppelgeklickt werden — es öffnet sich kurz ein Terminal-Fenster, das im Hintergrund einen lokalen Server startet, dann startet Chrome automatisch mit dem Tool. Das Terminal-Fenster muss dabei offen bleiben, solange das Tool genutzt wird. Diese Variante ist nur nötig, falls das direkte Öffnen von <code>index.html</code> mal nicht funktioniert (z. B. Admin-Panel unter <a href="#admin">Admin-Panel öffnen</a>).
</div>
<div class="tip">
<strong>Hinweis zu start.command:</strong> Beim ersten Doppelklick erscheint eventuell eine Sicherheitswarnung von macOS. Dann: Rechtsklick auf <code>start.command</code> → „Öffnen" → „Öffnen" bestätigen. Ab dem zweiten Mal klappt der Doppelklick direkt.
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Terminal (nur bei der Alternative über start.command)</span>
</div>
<div class="mockup-body">
<p style="color:#4ade80;font-size:0.82rem;font-family:monospace;">$ python3 -m http.server 8181</p>
<p style="color:rgba(255,255,255,0.4);font-size:0.82rem;font-family:monospace;">Serving HTTP on 0.0.0.0 port 8181 …</p>
</div>
</div>
</div>
<!-- ========== 2. AKTIVIERUNG ========== -->
<div class="section" id="aktivierung">
<div class="section-header">
<div class="step-num">2</div>
<h2>Erstmalige Aktivierung</h2>
</div>
<div class="info">
Dieser Schritt ist nur beim <strong>allerersten Start</strong> auf einem neuen Gerät oder Browser nötig. Danach öffnet das Tool direkt.
</div>
<div class="card">
<div class="steps">
<div class="step"><p>Den <strong>Lizenzcode</strong> deines Chapters eingeben (erhältst du vom Administrator <a href="mailto:support@digiseed.de">support@digiseed.de</a>).</p></div>
<div class="step"><p>Auf <strong>„Aktivieren"</strong> klicken. Das Tool lädt einmalig die Chapter-Daten vom Server.</p></div>
<div class="step"><p>Nach erfolgreicher Aktivierung öffnet sich direkt die Steuerungsansicht.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">http://localhost:8181</span>
</div>
<div class="mockup-body">
<div class="mock-activation">
<h3>BNI Vorstellungsrunde</h3>
<p>Bitte gib deinen Lizenzcode ein, um dein Chapter freizuschalten.</p>
<div style="margin-bottom:8px;"><input class="mock-input" placeholder="chapter-lizenzcode" readonly></div>
<button class="mock-btn-red">Aktivieren</button>
</div>
</div>
</div>
</div>
<!-- ========== 3. ANSICHTEN ========== -->
<div class="section" id="ansichten">
<div class="section-header">
<div class="step-num">3</div>
<h2>Ansichten: Display &amp; Steuerung</h2>
</div>
<div class="card">
<p style="font-size:0.9rem;">Das Tool läuft in <strong>zwei Fenstern gleichzeitig</strong>:</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;">
<div style="background:#f8f9fa;border-radius:8px;padding:14px;border-left:3px solid var(--navy);">
<div style="font-weight:700;font-size:0.88rem;color:var(--navy);margin-bottom:6px;">🖥 Display-Fenster</div>
<div style="font-size:0.82rem;color:var(--muted);">Wird auf dem Präsentationsmonitor / Beamer angezeigt. Zeigt das aktuelle Mitglied groß mit Timer.</div>
</div>
<div style="background:#f8f9fa;border-radius:8px;padding:14px;border-left:3px solid var(--red);">
<div style="font-weight:700;font-size:0.88rem;color:var(--red);margin-bottom:6px;">🎛 Steuerungs-Fenster</div>
<div style="font-size:0.82rem;color:var(--muted);">Dein Laptop-Bildschirm. Hier steuerst du den Ablauf, trägst Vertreter ein und navigierst.</div>
</div>
</div>
</div>
<div class="highlight-box">
Im Steuerungs-Fenster oben in der Kopfzeile auf <strong>„🖥 Anzeige öffnen"</strong> klicken — das Display öffnet sich in einem neuen Tab. Ziehe dieses Tab auf den Beamer-Bildschirm und drücke <strong>F11</strong> für Vollbild.
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Display-Ansicht (Beamer)</span>
</div>
<div class="mockup-body" style="padding:0;background:#0a1220;">
<img src="screenshots/display-live.png" alt="Display-Ansicht mit laufendem Timer" style="width:100%;display:block;">
</div>
</div>
<div class="highlight-box">
<strong>Ab Version 1.5:</strong> Zusätzlich zum Ring wird die Restzeit oben in großen Ziffern eingeblendet — gut sichtbar, auch wenn jemand vor dem Podium steht. Bei ≤ 15 s wird die Karte gelb, bei ≤ 5 s rot, am Ende ertönt ein Glockenton.
</div>
<div class="tip">
<strong>🔔 Ton aktivieren:</strong> Beim ersten Öffnen des Display-Fensters erscheint oben ein roter Button <strong>„🔔 Ton aktivieren"</strong>. Einmal klicken — damit erlaubt der Browser das Abspielen des Glockentons. Ohne diesen Klick bleibt die App stumm (technische Einschränkung von Browsern gegen ungewollte Autoplay-Sounds).
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Display-Ansicht – Ton aktivieren</span>
</div>
<div class="mockup-body" style="padding:0;background:#0a1220;">
<img src="screenshots/display-ton-aktivieren.png" alt="Display-Ansicht mit Ton-aktivieren-Button" style="width:100%;display:block;">
</div>
</div>
</div>
<!-- ========== 4. VORBEREITUNG ========== -->
<div class="section" id="vorbereitung">
<div class="section-header">
<div class="step-num">4</div>
<h2>Meeting vorbereiten</h2>
</div>
<div class="card">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">Vor dem Meeting: Abwesenheiten markieren</p>
<div class="steps">
<div class="step"><p>Im Steuerungs-Fenster: Tab <strong>„Mitglieder"</strong> öffnen.</p></div>
<div class="step"><p>Auf den Namen eines abwesenden Mitglieds klicken → kleines Menü öffnet sich.</p></div>
<div class="step"><p><strong>„Abwesend"</strong> wählen — das Mitglied wird aus der Vorstellungsrunde ausgeblendet (roter Punkt).</p></div>
<div class="step"><p>Optional: Reihenfolge per <strong>Drag &amp; Drop</strong> anpassen.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Steuerungs-Fenster – Reihenfolge</span>
</div>
<div class="mockup-body" style="padding:0;background:#0a1220;">
<img src="screenshots/steuerung-uebersicht.png" alt="Steuerungs-Fenster mit Mitgliederliste" style="width:100%;display:block;">
</div>
</div>
<!-- Redezeit -->
<div class="card" style="margin-top:24px;">
<p style="font-weight:700;font-size:0.95rem;margin-bottom:10px;">Redezeit anpassen</p>
<p style="font-size:0.88rem;color:var(--muted);margin-bottom:14px;">Standard-Redezeit für alle Mitglieder oder abweichende Zeit pro Person setzen.</p>
<p style="font-weight:700;font-size:0.85rem;margin-bottom:8px;">A) Standardzeit für alle</p>
<div class="steps">
<div class="step"><p>Oben in der Kopfzeile des Steuerungs-Fensters auf das Zeit-Feld <strong>„⏱ 0:50"</strong> (bzw. den aktuellen Wert) klicken.</p></div>
<div class="step"><p>Im Dialog die neue Zeit im Format <code>M:SS</code> (z. B. <code>1:00</code>) oder als Minuten (z. B. <code>1</code>) eingeben.</p></div>
<div class="step"><p>Mit <strong>OK</strong> bestätigen — die neue Zeit gilt sofort für alle Mitglieder ohne individuelle Zeit.</p></div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Dialog – Standard-Redezeit setzen</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/zeiteinstellung-global.png" alt="Prompt: Standard-Redezeit für alle Mitglieder" style="max-width:460px;width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
<p style="font-weight:700;font-size:0.85rem;margin:20px 0 8px;">B) Individuelle Zeit pro Mitglied</p>
<div class="steps">
<div class="step"><p>In der Mitgliederliste rechts neben jedem Namen erscheint ein kleines rot umrandetes Zeit-Feld.</p></div>
<div class="step"><p>Auf dieses Feld klicken und den abweichenden Wert eingeben (leer lassen = Standardzeit übernehmen).</p></div>
<div class="step"><p>Nützlich z. B. für neue Mitglieder mit längerer Vorstellung oder für Ehrengäste.</p></div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Individuelles Zeit-Feld pro Mitglied</span>
</div>
<div class="mockup-body" style="padding:20px;background:#0a1220;text-align:center;">
<img src="screenshots/zeit-pro-mitglied.png" alt="Kleines Zeit-Feld neben dem Mitglied" style="width:90px;display:inline-block;border-radius:6px;background:white;padding:6px;">
</div>
</div>
</div>
</div>
<!-- ========== 5. DURCHFÜHRUNG ========== -->
<div class="section" id="durchfuehrung">
<div class="section-header">
<div class="step-num">5</div>
<h2>Meeting durchführen</h2>
</div>
<div class="card">
<div class="steps">
<div class="step"><p>Auf <strong>„Start"</strong> klicken — der Timer startet für das erste Mitglied.</p></div>
<div class="step"><p>Wenn die Zeit abgelaufen ist (Timer rot): <strong>„Weiter →"</strong> drücken für das nächste Mitglied.</p></div>
<div class="step"><p>Mit <strong>„← Zurück"</strong> kannst du jederzeit zum vorherigen Mitglied springen.</p></div>
<div class="step"><p>Timer lässt sich jederzeit mit <strong>„Pause / Fortsetzen"</strong> anhalten.</p></div>
<div class="step"><p>Am Ende erscheint eine Abschluss-Ansicht — mit <strong>„Neu starten"</strong> zurück zum Anfang.</p></div>
</div>
</div>
<div class="tip">
<strong>Tipp:</strong> Die Tastenkombination <strong>→ Pfeiltaste</strong> auf der Tastatur funktioniert als „Weiter" — praktisch für die Fernbedienung.
</div>
</div>
<!-- ========== 6. VERTRETER ========== -->
<div class="section" id="vertreter">
<div class="section-header">
<div class="step-num">6</div>
<h2>Vertreter eintragen</h2>
</div>
<div class="card">
<p style="font-size:0.9rem;margin-bottom:12px;">Wenn ein Mitglied einen Vertreter schickt, wird dieser in der Vorstellungsrunde an Stelle des Mitglieds angezeigt.</p>
<div class="steps">
<div class="step"><p>Tab <strong>„Vertretungen"</strong> öffnen.</p></div>
<div class="step"><p>Mitglied aus der Liste wählen, das vertreten wird.</p></div>
<div class="step"><p>Falls die Person bereits als <strong>Stammvertreter</strong> gespeichert ist: oben aus der Schnellauswahl wählen — alle Felder werden automatisch ausgefüllt.</p></div>
<div class="step"><p>Andernfalls: Name, Firma und Fachgebiet des Vertreters eingeben und ggf. ein Foto hochladen.</p></div>
<div class="step"><p>Auf <strong>„Speichern"</strong> klicken.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Steuerung – Vertretung eintragen</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/vertreter-erfassen.png" alt="Modal: Vertretung für Mitglied erfassen" style="max-width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
</div>
<!-- ========== 7. BESUCHER ========== -->
<div class="section" id="besucher">
<div class="section-header">
<div class="step-num">7</div>
<h2>Besucher eintragen</h2>
</div>
<div class="card">
<div class="steps">
<div class="step"><p>In der rechten Seitenleiste den Tab <strong>„Besucher"</strong> öffnen.</p></div>
<div class="step"><p>Name eingeben, optional Firma, Fachgebiet, „Eingeladen von" (Mitglied wählen) und Foto-URL ergänzen.</p></div>
<div class="step"><p>Auf <strong>„+ Besucher hinzufügen"</strong> klicken — der Besucher erscheint sofort in der Reihenfolge.</p></div>
<div class="step"><p>Besucher werden am Ende der Vorstellungsrunde nach allen Mitgliedern eingeblendet.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Steuerung – Besucher hinzufügen</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/besucher-eintragen.png" alt="Formular: Besucher hinzufügen" style="max-width:320px;width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
<div class="info">
<strong>Schnellerfassung per PDF:</strong> Wenn du eine Besucher-/Vertreterliste als PDF vorliegen hast (z. B. aus dem Chapter-Portal), klick oben in der Kopfzeile auf <strong>„📄 PDF importieren"</strong> und lege die PDF in das Feld — Einträge werden automatisch als Zeilen erkannt und du kannst sie vor dem Import noch anpassen.
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Steuerung – Schnellerfassung per PDF</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/besucher-vertreterliste.png" alt="Modal: Besucher- und Vertreterliste per PDF importieren" style="max-width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
<div class="tip">
<strong>Tipp:</strong> Besucher werden nicht dauerhaft gespeichert — sie werden nach dem Meeting automatisch gelöscht, wenn die Runde zurückgesetzt wird.
</div>
</div>
<!-- ========== 8. ADMIN ========== -->
<div class="section" id="admin">
<div class="section-header">
<div class="step-num">8</div>
<h2>Admin-Panel: Fotos &amp; Stammvertreter</h2>
</div>
<div class="info">
Das Admin-Panel öffnest du am einfachsten über den Link im Steuerungs-Fenster unter dem Tab <strong>„Admin"</strong> (Button <strong>„⚙ Admin-Panel öffnen"</strong>) — das funktioniert unabhängig davon, wie das Tool gestartet wurde. Alternativ, falls das Tool über <strong>start.command</strong> (Terminal) gestartet wurde, ist es auch direkt unter <code>http://localhost:8181/admin.html</code> erreichbar — diese Adresse funktioniert <strong>nur</strong>, wenn das Tool auf diesem Weg läuft.
</div>
<div class="card">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">Mitgliederfotos hinzufügen</p>
<div class="steps">
<div class="step"><p>Im Admin-Panel Tab <strong>„Mitglieder"</strong> öffnen.</p></div>
<div class="step"><p>Auf ein Mitglied mit <strong>„+ Foto"</strong> klicken.</p></div>
<div class="step"><p>Foto aus dem Finder wählen (JPG/PNG, beliebige Größe — wird automatisch verkleinert).</p></div>
<div class="step"><p>Auf <strong>„Speichern"</strong> klicken — das Foto ist jetzt lokal gespeichert.</p></div>
<div class="step"><p>Nach allen Fotos: <strong>„Auf Server hochladen"</strong> — dann haben alle Geräte die Fotos beim nächsten „Vom Server laden".</p></div>
</div>
</div>
<div class="admin-mockup" style="padding:0;">
<img src="screenshots/admin-panel-mitglieder.png" alt="Admin-Panel Mitglieder-Tab" style="width:100%;display:block;">
</div>
<div class="card" style="margin-top:16px;">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">Stammvertreter anlegen</p>
<p style="font-size:0.88rem;color:var(--muted);margin-bottom:12px;">Stammvertreter sind Personen, die regelmäßig als Vertreter kommen. Einmal anlegen → bei jeder Vertretung schnell auswählen.</p>
<div class="steps">
<div class="step"><p>Tab <strong>„Stammvertreter"</strong> öffnen.</p></div>
<div class="step"><p>Auf <strong>„+ Hinzufügen"</strong> klicken.</p></div>
<div class="step"><p>Name, Firma, Fachgebiet und Foto eingeben.</p></div>
<div class="step"><p>Optional: <strong>„Aus anderem Chapter"</strong> — Mitglied aus einem anderen Chapter-Verzeichnis als Stammvertreter übernehmen.</p></div>
<div class="step"><p>Auf <strong>„Auf Server sichern"</strong> klicken, damit die Liste nicht verloren geht.</p></div>
</div>
</div>
</div>
<!-- ========== 9. OFFLINE ========== -->
<div class="section" id="offline">
<div class="section-header">
<div class="step-num">9</div>
<h2>Offline-Nutzung</h2>
</div>
<div class="card">
<p style="font-size:0.9rem;margin-bottom:12px;">Das Tool funktioniert <strong>vollständig ohne Internet</strong>, sobald es einmal online eingerichtet wurde.</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<div style="background:#f0fdf4;border-radius:8px;padding:12px;border:1px solid #bbf7d0;">
<div style="font-weight:700;color:var(--success);font-size:0.85rem;margin-bottom:6px;">✓ Funktioniert offline</div>
<ul style="font-size:0.82rem;color:#166534;padding-left:16px;line-height:1.7;">
<li>Meeting starten &amp; steuern</li>
<li>Timer, Navigation</li>
<li>Abwesenheiten markieren</li>
<li>Vertreter &amp; Besucher eintragen</li>
<li>Stammvertreter verwenden</li>
</ul>
</div>
<div style="background:#fef2f2;border-radius:8px;padding:12px;border:1px solid #fecaca;">
<div style="font-weight:700;color:#dc2626;font-size:0.85rem;margin-bottom:6px;">✗ Braucht Internet</div>
<ul style="font-size:0.82rem;color:#991b1b;padding-left:16px;line-height:1.7;">
<li>Erstmalige Aktivierung</li>
<li>Mitglieder vom Server laden</li>
<li>Fotos auf Server hochladen</li>
<li>Stammvertreter sichern</li>
<li>Agenda-Punkte mit Live-Einbettung anzeigen (Zoho Show)</li>
</ul>
</div>
</div>
</div>
<div class="highlight-box">
<strong>Empfehlung:</strong> Vor jedem Meeting einmal kurz <strong>„Vom Server laden"</strong> klicken — <em>vorausgesetzt</em>, die Liste wurde vorher aktualisiert und auf den Server hochgeladen. So sind Mitgliederliste &amp; Fotos auf dem aktuellen Stand, auch wenn beim Meeting kein Internet verfügbar ist.
</div>
<div class="tip">
<strong>Neue Mitglieder oder Änderungen?</strong> Wenn du keine Berechtigung zum Hochladen hast, gib die Änderungen an dein Support-Team weiter — dort werden die Mitgliederdaten angepasst und auf dem Server gespeichert. Beim nächsten „Vom Server laden" hast du die neue Version.
</div>
</div>
<!-- ========== 10. UPDATE ========== -->
<div class="section" id="update">
<div class="section-header">
<div class="step-num">10</div>
<h2>Updates einspielen</h2>
</div>
<div class="info">
Wenn eine neue Version verfügbar ist, erscheint oben im Steuerungs-Fenster automatisch ein roter Hinweis-Banner.
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Steuerung – Update-Banner</span>
</div>
<div class="mockup-body">
<div style="background:#1a2744;color:white;padding:10px 14px;border-radius:8px;display:flex;align-items:center;gap:12px;font-size:0.85rem;">
<span>🆕 Update 1.5 verfügbar – Farbwarnung, Glockenton &amp; 8-Augen-Timer</span>
<button class="mock-btn-red" style="padding:4px 12px;font-size:0.82rem;white-space:nowrap;">Jetzt laden</button>
</div>
</div>
</div>
<div class="card">
<div class="steps">
<div class="step"><p>Auf <strong>„Jetzt laden"</strong> klicken.</p></div>
<div class="step"><p>Es öffnen sich zwei Speichern-Dialoge nacheinander: erst für <code>index.html</code>, dann wird <code>admin.html</code> automatisch heruntergeladen.</p></div>
<div class="step"><p>Im Speichern-Dialog zum BNI-Ordner navigieren und die bestehende <code>index.html</code> <strong>überschreiben</strong>.</p></div>
<div class="step"><p><code>admin.html</code> aus dem Download-Ordner ebenfalls in den BNI-Ordner verschieben und ersetzen.</p></div>
<div class="step"><p>Seite neu laden — das Update ist eingespielt.</p></div>
</div>
</div>
<div class="tip">
<strong>Hinweis:</strong> Alle gespeicherten Daten (Mitglieder, Fotos, Stammvertreter) bleiben beim Update erhalten.
</div>
</div>
<!-- ========== 11. TIMER-SCHALTER ========== -->
<div class="section" id="timer-schalter">
<div class="section-header">
<div class="step-num">11</div>
<h2>Zeitanzeige deaktivieren</h2>
</div>
<div class="info">
Manche Chapter möchten keine Zeitanzeige verwenden. Diese kann im Admin-Tab der Steuerung dauerhaft ausgeschaltet werden.
</div>
<div class="card">
<div class="steps">
<div class="step"><p>Im Steuerungs-Fenster den Tab <strong>„Admin"</strong> (rechte Seitenleiste) öffnen.</p></div>
<div class="step"><p>Unter <strong>„Einstellungen"</strong> den Haken bei <strong>„Zeitanzeige aktiv"</strong> entfernen.</p></div>
<div class="step"><p>Timer-Ring, Countdown und Zeitbadges verschwinden sofort auf allen Ansichten.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Steuerung – Admin-Tab</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/zeitanzeige-aktiv.png" alt="Admin-Sidebar mit Zeitanzeige-Checkbox" style="max-width:340px;width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
<div class="tip">
<strong>Hinweis:</strong> Die Einstellung wird automatisch gespeichert und bleibt nach einem Neustart erhalten.
</div>
</div>
<!-- ========== 12. 8-AUGEN-TIMER ========== -->
<div class="section" id="augen-timer">
<div class="section-header">
<div class="step-num">12</div>
<h2>8-Augen-Gespräche Timer</h2>
</div>
<div class="info">
Für 8-Augen-Gespräche gibt es einen eigenen Vollbild-Timer mit einer Uhr pro Tischgröße (3er / 4er / 5er / 6er). Am 4er-Tisch wird die gewünschte Sprechzeit eingegeben — die anderen Tische werden automatisch so berechnet, dass alle Redner die passende Zeit haben.
</div>
<div class="card">
<div class="steps">
<div class="step"><p>Im Steuerungs-Fenster den Tab <strong>„Admin"</strong> (rechte Seitenleiste) öffnen.</p></div>
<div class="step"><p>Im Abschnitt <strong>„8-Augen-Gespräche"</strong> auf <strong>„👥 8-Augen Timer starten"</strong> klicken — der Vollbild-Timer öffnet sich.</p></div>
<div class="step"><p>In der unteren Leiste unter <strong>„Wechsel 4er"</strong> die gewünschte Sprechzeit eingeben (z. B. <code>8:00</code> für 8 Minuten) und mit <strong>✓</strong> übernehmen.</p></div>
<div class="step"><p>Mit den Tischgrößen-Buttons (<strong>3er / 4er / 5er / 6er</strong>) auswählen, welche Timer angezeigt werden sollen — nicht benötigte einfach ausblenden.</p></div>
<div class="step"><p>Auf <strong>„▶ Start"</strong> klicken — alle sichtbaren Timer laufen gleichzeitig los.</p></div>
<div class="step"><p>Am Ende jeder Sprechzeit erklingt der Glockenton, danach folgt eine <strong>3 Sekunden Wechsel-Phase</strong> (blaue Karte, Countdown), bevor die nächste Sprechzeit startet.</p></div>
<div class="step"><p>Wenn alle Redner durch sind, stoppt der Timer automatisch — die Karten werden grün mit <strong>✓ Alle N Redner durch</strong>.</p></div>
<div class="step"><p>Mit <strong>„✕ Beenden"</strong> schließt sich der Vollbild-Timer und die App springt zurück in die Vorstellungsrunde.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Anzeige – 8-Augen Timer (Vollbild)</span>
</div>
<div class="mockup-body" style="background:#0a1220;padding:0;">
<img src="screenshots/augen-timer.png" alt="8-Augen-Timer Vollbild" style="width:100%;display:block;">
</div>
</div>
<div class="highlight-box">
<strong>Farbwarnung:</strong> Timer-Karte wird <strong>gelb</strong> ab 30 s Restzeit und <strong>rot</strong> ab 10 s. Bei jedem Rednerwechsel und Rundenende ertönt zusätzlich ein Glockenton.
</div>
<div class="tip">
<strong>Rechenlogik:</strong> Die Rundendauer bleibt für alle Tische gleich (z. B. 8 min am 4er = 4 × 8 min = 32 min Runde). Der 3er-Tisch bekommt entsprechend 10:40 pro Redner, der 5er 6:24, der 6er 5:20. Die 3 Sekunden Wechsel hängen sich zusätzlich hinter jeden Redner (außer dem letzten).
</div>
</div>
<!-- ========== 13. MITGLIEDER SYNC ========== -->
<div class="section" id="mitglieder-sync">
<div class="section-header">
<div class="step-num">13</div>
<h2>Mitglieder mit BNI-Website synchronisieren</h2>
</div>
<div class="info">
Neue Mitglieder oder aktualisierte Fachgebiete/Fotos direkt aus der offiziellen BNI-Mitgliederliste in die App übernehmen. Läuft einmalig eingerichtet über zwei Bookmarklets im Browser.
</div>
<div class="card">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">Ablauf</p>
<div class="steps">
<div class="step"><p>Im Steuerungs-Fenster oben in der Kopfzeile auf <strong>„🔄 Mitglieder aktualisieren"</strong> klicken.</p></div>
<div class="step"><p><strong>Schritt 1 (einmalig):</strong> Beide Bookmarklet-Buttons in die Lesezeichenleiste des Browsers ziehen. Zuerst <strong>„Diagnose"</strong> auf der BNI-Mitgliederliste ausführen und die heruntergeladene Diagnose-Datei hier hochladen — damit passt sich der Export-Button automatisch an die aktuelle Seitenstruktur an.</p></div>
<div class="step"><p><strong>Schritt 2:</strong> BNI-Mitgliederliste öffnen (Link im Dialog), warten bis alle Mitglieder geladen sind, dann Bookmarklet <strong>„BNI Mitglieder exportieren"</strong> klicken — es lädt automatisch eine JSON-Datei herunter.</p></div>
<div class="step"><p><strong>Schritt 3:</strong> Die JSON-Datei per <strong>„JSON-Datei laden &amp; synchronisieren"</strong> in der App einlesen. Bestehende Mitglieder werden aktualisiert (Foto, Fachgebiet), neue kommen dazu. Es wird niemand gelöscht.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Dialog – Mitglieder synchronisieren</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/mitglieder-sync.png" alt="Modal: Mitglieder mit BNI-Website abgleichen" style="max-width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
<div class="tip">
<strong>Hinweis:</strong> Nach dem Sync die neue Liste unbedingt über das Admin-Panel <strong>„Auf Server hochladen"</strong> — sonst haben andere Geräte die alten Daten. Ohne Upload-Berechtigung: Änderungen ans Support-Team melden.
</div>
</div>
<!-- ========== 14. IMPORT / EXPORT ========== -->
<div class="section" id="import-export">
<div class="section-header">
<div class="step-num">14</div>
<h2>Import / Export &amp; Backup</h2>
</div>
<div class="info">
Vollständiges Backup der Mitgliederdaten als JSON-Datei — nützlich für Umzüge zwischen Geräten, für einen sicheren Zwischenstand oder um lokale Kurzlinks &amp; Offline-Fotos (Profildaten) zu sichern.
</div>
<div class="card">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">Mitgliederdaten (JSON)</p>
<div class="steps">
<div class="step"><p>Im Steuerungs-Fenster oben auf <strong>„⬇ Import / Export"</strong> klicken.</p></div>
<div class="step"><p><strong>„Exportieren"</strong> — die kompletten Mitgliederdaten werden als Text im Feld angezeigt (per Copy&amp;Paste sichern oder in eine Datei speichern).</p></div>
<div class="step"><p><strong>„Importieren"</strong> — vorher exportierten Text wieder einfügen und einlesen. Ersetzt die aktuellen Daten im Browser.</p></div>
</div>
<p style="font-weight:700;font-size:0.9rem;margin:20px 0 10px;">Profildaten (Kurzlinks &amp; Offline-Fotos)</p>
<div class="steps">
<div class="step"><p>Kurzlinks (z. B. Website-Weiterleitungen) und lokal hochgeladene Fotos werden <strong>getrennt</strong> gespeichert und bleiben bei einem Mitglieder-Sync erhalten.</p></div>
<div class="step"><p><strong>„⬇ profildaten.json speichern"</strong> — Datei sichern und im Projektordner ablegen.</p></div>
<div class="step"><p>Nach einem Browser-Reset oder auf einem neuen Gerät: <strong>„⬆ PROFILDATEN.JSON LADEN"</strong> — Kurzlinks &amp; Fotos sind wieder da.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Dialog – Import / Export</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/import-export.png" alt="Modal: Import / Export" style="max-width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
</div>
<!-- ========== 15. AGENDA-FOLIEN ========== -->
<div class="section" id="agenda">
<div class="section-header">
<div class="step-num">15</div>
<h2>Agenda-Folien für Online-Meetings (Hybrid-Chapter)</h2>
</div>
<div class="info">
Hybrid-Chapter (z. B. Lumora) treffen sich einmal im Monat vor Ort, sonst online. Für Online-Meetings läuft ein deutlich
größerer Ablauf als nur die Vorstellungsrunde — Begrüßung, Meeting-Regeln, DSGVO, BNI-Zahlen, Auszeichnungen, Events
usw. Diese Rahmen-Folien lassen sich direkt im Tool anlegen und an der passenden Stelle im Ablauf anzeigen — als
hochgeladenes Bild oder als Live-Einbettung aus Zoho Show.
</div>
<div class="card">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">Punkte im Admin-Panel anlegen</p>
<div class="steps">
<div class="step"><p>Im Admin-Panel den Tab <strong>„Agenda"</strong> öffnen.</p></div>
<div class="step"><p>Auf <strong>„+ Agenda-Punkt hinzufügen"</strong> klicken (oder einen bestehenden Punkt anklicken, um ihn zu bearbeiten).</p></div>
<div class="step"><p>Eine <strong>Bezeichnung</strong> eingeben und die <strong>Anzeigeart</strong> wählen: „Bild" oder „Live-Einbettung".</p></div>
<div class="step"><p>Auf <strong>„Speichern"</strong> klicken — der Punkt erscheint in der Liste.</p></div>
</div>
</div>
<div class="admin-mockup" style="padding:0;">
<img src="screenshots/agenda-admin-liste.png" alt="Admin-Panel Agenda-Tab mit Liste der Punkte" style="width:100%;display:block;">
</div>
<p style="font-weight:700;font-size:0.85rem;margin:20px 0 8px;">A) Anzeigeart „Bild"</p>
<div class="card">
<p style="font-size:0.88rem;color:var(--muted);margin-bottom:0;">Für einen Folien-Export (z. B. aus PowerPoint oder Zoho Show als Bild exportiert). Über <strong>„Bild wählen"</strong> die Datei aus dem Finder wählen — sie wird automatisch auf eine für Vollbild-Anzeige passende Größe verkleinert, bevor sie hochgeladen wird.</p>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Admin-Panel – Agenda-Punkt bearbeiten (Bild)</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/agenda-punkt-bild.png" alt="Modal: Agenda-Punkt bearbeiten, Anzeigeart Bild" style="max-width:360px;width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
<p style="font-weight:700;font-size:0.85rem;margin:20px 0 8px;">B) Anzeigeart „Live-Einbettung"</p>
<div class="card">
<p style="font-size:0.88rem;color:var(--muted);margin-bottom:0;">Für eine Folie, die das Team gemeinsam in Zoho Show pflegt — Änderungen sind sofort live, ohne erneuten Upload. In Zoho Show: <strong>Datei → Freigeben/Veröffentlichen → Einbetten</strong>, den dortigen Link in das Feld „Einbettungs-URL" einfügen. Am zuverlässigsten funktioniert das, wenn jeder Agenda-Punkt eine eigene, kleine Zoho-Show-Datei ist (statt einer großen Gesamt-Präsentation) — dann startet die Einbettung immer bei der ersten Folie.</p>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Admin-Panel – Agenda-Punkt bearbeiten (Live-Einbettung)</span>
</div>
<div class="mockup-body" style="padding:14px;background:#0a1220;text-align:center;">
<img src="screenshots/agenda-punkt-embed.png" alt="Modal: Agenda-Punkt bearbeiten, Anzeigeart Live-Einbettung" style="max-width:360px;width:100%;display:inline-block;border-radius:8px;">
</div>
</div>
<div class="tip">
<strong>Nicht vergessen:</strong> Nach dem Anlegen/Ändern von Punkten im Admin-Panel oben rechts auf <strong>„📤 Auf Server hochladen"</strong> klicken — sonst kommen die Änderungen nicht im Steuerpult (bzw. auf anderen Geräten) an.
</div>
<div class="card" style="margin-top:24px;">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">Reihenfolge festlegen und live anzeigen</p>
<div class="steps">
<div class="step"><p>Im Steuerpult den neuen Tab <strong>„Agenda"</strong> öffnen (ganz links, neben „Mitglieder" und „Besucher").</p></div>
<div class="step"><p>Punkte per <strong>Drag &amp; Drop</strong> in die gewünschte Reihenfolge bringen — genau wie bei der Mitgliederliste.</p></div>
<div class="step"><p>Auf <strong>„▶ Anzeigen"</strong> klicken, um einen Punkt sofort auf dem Display zu zeigen.</p></div>
<div class="step"><p>Mit dem <strong>🚫-Button</strong> lässt sich ein Punkt aus der aktiven Reihenfolge ausblenden (für dieses Meeting nicht gebraucht) — er taucht dann unten unter „Ausgeblendet" auf und kann dort per <strong>„+ Einblenden"</strong> jederzeit wieder aktiviert werden.</p></div>
</div>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Steuerpult – Agenda-Tab</span>
</div>
<div class="mockup-body" style="padding:0;background:#0a1220;">
<img src="screenshots/agenda-steuerung.png" alt="Steuerpult mit Agenda-Tab und sortierbarer Reihenfolge" style="width:100%;display:block;">
</div>
</div>
<div class="highlight-box">
<strong>Mitglieder-, Besucher- und Marketing-/Ergebnisrunde sind eingebaute Agenda-Punkte:</strong> Sie lassen sich genau wie die Bild-/Einbettungs-Folien frei in die Reihenfolge einsortieren — z. B. Begrüßung → Regeln → <em>Mitglieder-Vorstellungsrunde</em> → Auszeichnung → <em>Besucher-Vorstellungsrunde</em> → Events.
</div>
<div class="card">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">Marketing-/Ergebnisrunde</p>
<p style="font-size:0.88rem;color:var(--muted);">Läuft dieselbe Mitgliederliste noch einmal in derselben Reihenfolge durch wie die Vorstellungsrunde — aber ohne Redezeit-Timer. Gedacht für die Runde, in der jedes Mitglied kurz berichtet, was es in der vergangenen Woche für andere Mitglieder getan hat (Empfehlungen, Besucher, 4-Augen-Gespräche, Trainings, Umsatzdank).</p>
</div>
<div class="card">
<p style="font-weight:700;font-size:0.9rem;margin-bottom:10px;">„Weiter"-Button folgt der Agenda</p>
<p style="font-size:0.88rem;color:var(--muted);">Der rote „Weiter"-Button oben führt automatisch zum jeweils nächsten Punkt in der festgelegten Reihenfolge — egal ob als Nächstes eine Folie, die Mitglieder-Vorstellungsrunde oder die Besucherrunde kommt. Bei einer Live-Einbettung kann „Weiter" nicht innerhalb der eingebetteten Folie selbst blättern (das bleibt Sache von Zoho Show), sondern springt direkt zum nächsten Agenda-Punkt.</p>
</div>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#febc2e;"></div>
<div class="mockup-dot" style="background:#28c840;"></div>
<span style="color:rgba(255,255,255,0.4);font-size:0.78rem;margin-left:8px;">Display-Ansicht – laufende Agenda-Folie</span>
</div>
<div class="mockup-body" style="padding:0;background:#0a1220;">
<img src="screenshots/agenda-display.png" alt="Display-Ansicht mit einer live eingebetteten Agenda-Folie" style="width:100%;display:block;">
</div>
</div>
<div class="tip">
<strong>Bild wird nicht angezeigt?</strong> Meist liegt es daran, dass der Bild-Upload noch nicht abgeschlossen war, als „Speichern" geklickt wurde — einfach das Bild im Admin-Panel erneut auswählen und speichern. Erscheint stattdessen eine eingebettete Live-Folie nicht: in Zoho Show prüfen, ob die Datei über „Veröffentlichen" freigegeben ist, und im Browser testweise Werbeblocker/Privacy-Erweiterungen deaktivieren.
</div>
</div>
<!-- FOOTER -->
<div style="text-align:center;padding:32px 0;color:var(--muted);font-size:0.8rem;border-top:1px solid var(--border);margin-top:32px;">
BNI Vorstellungsrunde · Interne Anleitung · Bei Fragen an den Administrator wenden
</div>
</div><!-- .content -->
</body>
</html>