Merge: Remote-Änderungen mit lokalen Chapters zusammenführen
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
500
anleitung.html
Normal file
500
anleitung.html
Normal file
@@ -0,0 +1,500 @@
|
|||||||
|
<!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; }
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.cover { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
|
||||||
|
.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.1 · April 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 & 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 & Stammvertreter</a></li>
|
||||||
|
<li><a href="#offline">Offline-Nutzung</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 Sonne</code> im Finder öffnen.</p></div>
|
||||||
|
<div class="step"><p>Die Datei <strong>start.command</strong> doppelklicken — es öffnet sich kurz ein Terminal-Fenster, dann startet Chrome automatisch mit dem Tool.</p></div>
|
||||||
|
<div class="step"><p>Das Terminal-Fenster im Hintergrund lassen (nicht schließen, solange du das Tool nutzt).</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<strong>Hinweis:</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</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).</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 Chapter-Code eingeben</p>
|
||||||
|
<div style="margin-bottom:8px;"><input class="mock-input" placeholder="z. B. sonne-7x4m9k" 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 & 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">
|
||||||
|
Beim Öffnen des Tools wird automatisch ein zweites Tab für das Display geöffnet. 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">
|
||||||
|
<div class="mock-timer">
|
||||||
|
<div style="color:rgba(255,255,255,0.4);font-size:0.75rem;margin-bottom:10px;">JETZT SPRICHT</div>
|
||||||
|
<div class="mock-timer-ring">
|
||||||
|
<span class="mock-timer-num">45</span>
|
||||||
|
</div>
|
||||||
|
<div class="mock-timer-name">Maria Mustermann</div>
|
||||||
|
<div class="mock-timer-company">Muster GmbH · Steuerberatung</div>
|
||||||
|
<div style="color:rgba(255,255,255,0.3);font-size:0.75rem;margin-top:8px;">Nächster: Hans Müller</div>
|
||||||
|
</div>
|
||||||
|
</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 & 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;">Steuerung – Mitgliederliste</span>
|
||||||
|
</div>
|
||||||
|
<div class="mockup-body">
|
||||||
|
<div class="mock-tabs">
|
||||||
|
<div class="mock-tab active">Mitglieder</div>
|
||||||
|
<div class="mock-tab">Vertretungen</div>
|
||||||
|
<div class="mock-tab">Besucher</div>
|
||||||
|
</div>
|
||||||
|
<div class="mock-panel">
|
||||||
|
<div class="mock-member">
|
||||||
|
<div class="mock-avatar" style="background:#1a2744;">AM</div>
|
||||||
|
<div><div class="mock-name">Anna Müller</div><div class="mock-role">Steuerberatung</div></div>
|
||||||
|
<div class="mock-badge present">anwesend</div>
|
||||||
|
</div>
|
||||||
|
<div class="mock-member" style="opacity:0.5;">
|
||||||
|
<div class="mock-avatar" style="background:#7f1d1d;">KS</div>
|
||||||
|
<div><div class="mock-name">Klaus Schmidt</div><div class="mock-role">IT-Systeme</div></div>
|
||||||
|
<div class="mock-badge absent">abwesend</div>
|
||||||
|
</div>
|
||||||
|
<div class="mock-member">
|
||||||
|
<div class="mock-avatar" style="background:#1e3a5f;">SL</div>
|
||||||
|
<div><div class="mock-name">Sandra Lang</div><div class="mock-role">Marketing</div></div>
|
||||||
|
<div class="mock-badge present">anwesend</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<div class="mock-sub-modal">
|
||||||
|
<h4>Vertreter für Klaus Schmidt</h4>
|
||||||
|
<div style="font-size:0.72rem;color:rgba(255,255,255,0.4);margin-bottom:8px;">STAMMVERTRETER WÄHLEN</div>
|
||||||
|
<div class="mock-sv-card">
|
||||||
|
<div class="mock-avatar" style="background:#1a2744;width:32px;height:32px;">MF</div>
|
||||||
|
<div><div class="mock-sv-name">Max Fischer</div><div class="mock-sv-meta">Fischer GmbH · Versicherung</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="mock-sv-card">
|
||||||
|
<div class="mock-avatar" style="background:#4a1942;width:32px;height:32px;">LB</div>
|
||||||
|
<div><div class="mock-sv-name">Lisa Berger</div><div class="mock-sv-meta">Berger & Co · Marketing</div></div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:0.72rem;color:rgba(255,255,255,0.4);margin:10px 0 6px;">ODER MANUELL EINGEBEN</div>
|
||||||
|
<div class="mock-field">Name des Vertreters …</div>
|
||||||
|
<div class="mock-field">Firma …</div>
|
||||||
|
</div>
|
||||||
|
</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>Tab <strong>„Besucher"</strong> öffnen.</p></div>
|
||||||
|
<div class="step"><p>Auf <strong>„+ Besucher hinzufügen"</strong> klicken.</p></div>
|
||||||
|
<div class="step"><p>Name und optional Firma eingeben und speichern.</p></div>
|
||||||
|
<div class="step"><p>Besucher erscheinen am Ende der Vorstellungsrunde nach allen Mitgliedern.</p></div>
|
||||||
|
</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 & Stammvertreter</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
Das Admin-Panel öffnest du über <code>http://localhost:8181/admin.html</code> — am einfachsten über den Link im Steuerungs-Fenster unter dem Tab <strong>„Admin"</strong>.
|
||||||
|
</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">
|
||||||
|
<div class="admin-header">BNI Admin-Panel · BNI Chapter Sonne</div>
|
||||||
|
<div class="admin-tabs">
|
||||||
|
<div class="admin-tab">Stammvertreter</div>
|
||||||
|
<div class="admin-tab active">Mitglieder</div>
|
||||||
|
<div class="admin-tab">Einstellungen</div>
|
||||||
|
</div>
|
||||||
|
<div class="admin-body">
|
||||||
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
||||||
|
<span style="font-weight:700;font-size:0.9rem;">Mitglieder</span>
|
||||||
|
<div style="display:flex;gap:8px;">
|
||||||
|
<span style="background:#f3f4f6;border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:0.78rem;font-weight:600;">🔄 Vom Server laden</span>
|
||||||
|
<span style="background:var(--red);color:white;border-radius:6px;padding:5px 10px;font-size:0.78rem;font-weight:600;">📤 Auf Server hochladen</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="admin-member-row">
|
||||||
|
<div class="mock-avatar" style="background:#1a2744;width:40px;height:40px;font-size:0.8rem;">AM</div>
|
||||||
|
<div style="flex:1;"><div style="font-size:0.88rem;font-weight:600;">Anna Müller</div><div style="font-size:0.75rem;color:var(--muted);">Steuerberatung</div></div>
|
||||||
|
<span class="admin-photo-badge ok">✓ Foto</span>
|
||||||
|
</div>
|
||||||
|
<div class="admin-member-row">
|
||||||
|
<div class="mock-avatar" style="background:#4a1942;width:40px;height:40px;font-size:0.8rem;">KS</div>
|
||||||
|
<div style="flex:1;"><div style="font-size:0.88rem;font-weight:600;">Klaus Schmidt</div><div style="font-size:0.75rem;color:var(--muted);">IT-Systeme</div></div>
|
||||||
|
<span class="admin-photo-badge missing">+ Foto</span>
|
||||||
|
</div>
|
||||||
|
<div class="admin-member-row">
|
||||||
|
<div class="mock-avatar" style="background:#1e3a5f;width:40px;height:40px;font-size:0.8rem;">SL</div>
|
||||||
|
<div style="flex:1;"><div style="font-size:0.88rem;font-weight:600;">Sandra Lang</div><div style="font-size:0.75rem;color:var(--muted);">Marketing</div></div>
|
||||||
|
<span class="admin-photo-badge ok">✓ Foto</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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 & steuern</li>
|
||||||
|
<li>Timer, Navigation</li>
|
||||||
|
<li>Abwesenheiten markieren</li>
|
||||||
|
<li>Vertreter & 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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="highlight-box">
|
||||||
|
<strong>Empfehlung:</strong> Vor jedem Meeting einmal kurz „Vom Server laden" klicken — so hast du immer die aktuellste Mitgliederliste & Fotos, auch wenn beim Meeting kein Internet verfügbar ist.
|
||||||
|
</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>
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"chapterName": "BNI Chapter Galaxis",
|
"chapterName": "BNI Chapter Galaxis",
|
||||||
"syncUrl": "https://bni-ulm.com/galaxis/de/memberlist?chapterName=6041®ionIds=43671$isChapterwebsite",
|
"logoUrl": "logo.png",
|
||||||
|
"syncUrl": "https://bni-ulm.com/galaxis/de/memberlist?chapterName=6041®ionIds=43671&isChapterwebsite=true",
|
||||||
"websiteUrl": "https://bni-ulm.de/galaxis",
|
"websiteUrl": "https://bni-ulm.de/galaxis",
|
||||||
"defaultTimer": 60
|
"defaultTimer": 60
|
||||||
}
|
}
|
||||||
BIN
chapters/galaxis-go26for37/logo.png
Normal file
BIN
chapters/galaxis-go26for37/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user