503 lines
36 KiB
HTML
503 lines
36 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>AHK Ehrenamtsmanagement – HTML Mockup</title>
|
||
<meta name="description" content="Statischer klickbarer UI-Mockup für AHK Ehrenamtsmanagement">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="mockup.css">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||
</head>
|
||
<body class="mockup-app">
|
||
<div class="app-shell">
|
||
<aside class="mock-sidebar" aria-label="Hauptnavigation">
|
||
<div class="brand-lockup">
|
||
<div class="brand-mark" aria-hidden="true">AHK</div>
|
||
<div>
|
||
<strong>EHRENAMT</strong>
|
||
<span>Vor-Ort-Arbeit</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="team-switcher" data-page="team" type="button">
|
||
<span class="material-icons" aria-hidden="true">groups</span>
|
||
<span><small>Aktuelles Team</small><strong>Vor-Ort-Arbeit</strong></span>
|
||
<span class="material-icons" aria-hidden="true">expand_more</span>
|
||
</button>
|
||
|
||
<nav class="desktop-nav" aria-label="App-Bereiche">
|
||
<p class="nav-label">Mein Bereich</p>
|
||
<button class="nav-item is-active" data-page="start"><span class="material-icons">home</span>Start</button>
|
||
<button class="nav-item" data-page="schedule"><span class="material-icons">calendar_month</span>Einsatzplan</button>
|
||
<button class="nav-item" data-page="chat"><span class="material-icons">forum</span>Teamchat <span class="nav-count">3</span></button>
|
||
<button class="nav-item" data-page="documents"><span class="material-icons">folder</span>Dokumente</button>
|
||
<button class="nav-item" data-page="team"><span class="material-icons">groups</span>Team</button>
|
||
<button class="nav-item" data-page="profile"><span class="material-icons">person</span>Profil</button>
|
||
|
||
<p class="nav-label">Verwaltung</p>
|
||
<button class="nav-item" data-page="team-manage"><span class="material-icons">manage_accounts</span>Team verwalten</button>
|
||
<button class="nav-item" data-page="org-manage"><span class="material-icons">domain</span>Organisation</button>
|
||
<button class="nav-item" data-page="audit"><span class="material-icons">history</span>Audit Log</button>
|
||
</nav>
|
||
|
||
<div class="mock-sidebar-footer">
|
||
<button class="nav-item nav-item--subtle" data-page="login"><span class="material-icons">present_to_all</span>Präsentation ab Login</button>
|
||
<div class="mini-account">
|
||
<div class="avatar avatar--small">P</div>
|
||
<div><strong>Patsy</strong><span>Team-Verwaltung</span></div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<header class="mobile-header">
|
||
<div class="brand-lockup brand-lockup--mobile">
|
||
<div class="brand-mark" aria-hidden="true">AHK</div>
|
||
<div><strong>EHRENAMT</strong><span>Vor-Ort-Arbeit</span></div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="icon-button" data-page="notifications" aria-label="Benachrichtigungen">
|
||
<span class="material-icons">notifications</span><span class="notification-dot">2</span>
|
||
</button>
|
||
<button class="avatar avatar--button" data-page="profile" aria-label="Profil öffnen">P</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="app-main" id="main-content">
|
||
<div class="desktop-topbar">
|
||
<div class="route-chip" id="routeChip">/team/vor-ort-arbeit/</div>
|
||
<div class="desktop-actions">
|
||
<button class="icon-button icon-button--light" data-page="notifications" aria-label="Benachrichtigungen">
|
||
<span class="material-icons">notifications</span><span class="notification-dot">2</span>
|
||
</button>
|
||
<button class="btn btn-ghost btn-sm" data-page="profile"><span class="material-icons">person</span>Patsy</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LOGIN -->
|
||
<section class="screen screen--auth" data-screen="login" hidden>
|
||
<div class="auth-panel">
|
||
<div class="auth-brand">
|
||
<div class="brand-mark brand-mark--large">AHK</div>
|
||
<p class="kicker">Ehrenamtsmanagement</p>
|
||
<h1>Willkommen zurück</h1>
|
||
<p>Mit deiner E-Mail-Adresse erhältst du einen einmaligen Code oder einen direkten Anmeldelink.</p>
|
||
</div>
|
||
<form class="card auth-card" onsubmit="return false;">
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label for="loginEmail">E-Mail-Adresse</label>
|
||
<input class="form-control" id="loginEmail" type="email" value="patsy@example.org" autocomplete="email">
|
||
<span class="form-hint">Wir senden den Code nur an deine hinterlegte Login-Adresse.</span>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg btn-full" data-page="verify" type="button">Code anfordern</button>
|
||
</div>
|
||
</form>
|
||
<p class="auth-footnote">Mockup: Es werden keine Daten versendet.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- VERIFY -->
|
||
<section class="screen screen--auth" data-screen="verify" hidden>
|
||
<div class="auth-panel">
|
||
<button class="text-back" data-page="login"><span class="material-icons">arrow_back</span>Zurück</button>
|
||
<div class="auth-brand">
|
||
<p class="kicker">Fast geschafft</p>
|
||
<h1>Code eingeben</h1>
|
||
<p>Wir haben einen sechsstelligen Code an <strong>patsy@example.org</strong> geschickt.</p>
|
||
</div>
|
||
<form class="card auth-card" onsubmit="return false;">
|
||
<div class="card-body">
|
||
<div class="code-inputs" aria-label="Einmal-Code">
|
||
<input value="2" aria-label="Ziffer 1"><input value="4" aria-label="Ziffer 2"><input value="8" aria-label="Ziffer 3"><input value="1" aria-label="Ziffer 4"><input value="7" aria-label="Ziffer 5"><input value="3" aria-label="Ziffer 6">
|
||
</div>
|
||
<button class="btn btn-primary btn-lg btn-full" data-page="onboarding-name" type="button">Weiter</button>
|
||
<button class="btn btn-ghost btn-full" type="button">Neuen Code senden</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ONBOARDING NAME -->
|
||
<section class="screen screen--auth" data-screen="onboarding-name" hidden>
|
||
<div class="auth-panel">
|
||
<div class="auth-brand">
|
||
<p class="kicker">Dein Profil</p>
|
||
<h1>Wie sollen wir dich nennen?</h1>
|
||
<p>Dieser Name ist für dein Team sichtbar. Deine Login-E-Mail bleibt für normale Teammitglieder verborgen.</p>
|
||
</div>
|
||
<div class="card auth-card">
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label for="displayName">Anzeigename</label>
|
||
<input class="form-control" id="displayName" value="Patsy">
|
||
</div>
|
||
<div class="avatar-picker" aria-label="Avatar auswählen">
|
||
<button class="avatar-choice is-selected"><span class="avatar avatar--a">A</span><span>Avatar A</span></button>
|
||
<button class="avatar-choice"><span class="avatar avatar--b">B</span><span>Avatar B</span></button>
|
||
<button class="avatar-choice"><span class="avatar avatar--c">C</span><span>Avatar C</span></button>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg btn-full" data-page="team-select" type="button">Weiter zur Teamauswahl</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TEAM SELECT -->
|
||
<section class="screen screen--auth" data-screen="team-select" hidden>
|
||
<div class="auth-panel auth-panel--wide">
|
||
<div class="auth-brand">
|
||
<p class="kicker">Deine Teams</p>
|
||
<h1>Wo möchtest du starten?</h1>
|
||
<p>Du kannst später jederzeit zwischen deinen Teams wechseln.</p>
|
||
</div>
|
||
<div class="team-choice-grid">
|
||
<button class="team-choice is-selected" data-page="start">
|
||
<span class="team-choice__icon material-icons">diversity_3</span>
|
||
<span><strong>Vor-Ort-Arbeit</strong><small>18 Mitglieder · 2 offene Einsätze</small></span>
|
||
<span class="material-icons">arrow_forward</span>
|
||
</button>
|
||
<button class="team-choice" data-page="start">
|
||
<span class="team-choice__icon material-icons">local_cafe</span>
|
||
<span><strong>Café Bach</strong><small>12 Mitglieder · keine offenen Aufgaben</small></span>
|
||
<span class="material-icons">arrow_forward</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- START -->
|
||
<section class="screen" data-screen="start">
|
||
<header class="page-header member-hero">
|
||
<p class="eyebrow">Montag, 17. August</p>
|
||
<h1>Guten Morgen, Patsy</h1>
|
||
<p class="page-subtitle">Hier ist, was heute für dich und dein Team wichtig ist.</p>
|
||
</header>
|
||
|
||
<article class="urgent-card" data-page="schedule">
|
||
<div class="urgent-card__icon"><span class="material-icons">priority_high</span></div>
|
||
<div>
|
||
<span class="card-label card-label--urgent">Dringend · heute</span>
|
||
<h2>Springer:in für heute gesucht</h2>
|
||
<p>18:00–21:30 · Café Bach · Noch 1 Position offen</p>
|
||
</div>
|
||
<span class="material-icons urgent-card__arrow">arrow_forward</span>
|
||
</article>
|
||
|
||
<div class="section-heading">
|
||
<div><span class="card-label card-label--upcoming">Nächste Einsätze</span><h2>Dein Plan</h2></div>
|
||
<button class="text-action" data-page="schedule">Alle ansehen</button>
|
||
</div>
|
||
|
||
<div class="shift-stack">
|
||
<article class="shift-card">
|
||
<div class="date-tile"><strong>21</strong><span>AUG</span></div>
|
||
<div class="shift-card__content">
|
||
<div class="shift-card__title-row"><h3>Freitagabend</h3><span class="badge status-badge-ui status-ok"><span class="material-icons">check_circle</span>Eingeteilt</span></div>
|
||
<p>18:30–21:30 · Café Bach</p>
|
||
<span class="position-pill">Theke</span>
|
||
</div>
|
||
</article>
|
||
<article class="shift-card">
|
||
<div class="date-tile"><strong>28</strong><span>AUG</span></div>
|
||
<div class="shift-card__content">
|
||
<div class="shift-card__title-row"><h3>Checkpoint-Abend</h3><span class="badge status-badge-ui status-info"><span class="material-icons">schedule</span>Verfügbar</span></div>
|
||
<p>17:30–21:00 · Pipinstraße</p>
|
||
<span class="position-pill">Hauptposition</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="dashboard-grid">
|
||
<button class="dashboard-tile" data-page="schedule">
|
||
<span class="tile-icon tile-icon--teal material-icons">event_available</span>
|
||
<span><small>Action</small><strong>4 Termine offen</strong><em>Verfügbarkeit angeben</em></span>
|
||
<span class="material-icons">chevron_right</span>
|
||
</button>
|
||
<button class="dashboard-tile" data-page="chat">
|
||
<span class="tile-icon tile-icon--blue material-icons">forum</span>
|
||
<span><small>Info</small><strong>3 neue Nachrichten</strong><em>im Team-Channel</em></span>
|
||
<span class="material-icons">chevron_right</span>
|
||
</button>
|
||
<button class="dashboard-tile" data-page="documents">
|
||
<span class="tile-icon material-icons">description</span>
|
||
<span><small>Info</small><strong>1 neues Dokument</strong><em>Safer-Sex-Leitfaden</em></span>
|
||
<span class="material-icons">chevron_right</span>
|
||
</button>
|
||
<button class="dashboard-tile" data-page="team">
|
||
<span class="tile-icon tile-icon--yellow material-icons">groups</span>
|
||
<span><small>Team</small><strong>18 Mitglieder</strong><em>Kontakte & Zuständigkeiten</em></span>
|
||
<span class="material-icons">chevron_right</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TEAM -->
|
||
<section class="screen" data-screen="team" hidden>
|
||
<header class="page-header with-team-switch">
|
||
<div><p class="kicker">Vor-Ort-Arbeit</p><h1>Unser Team</h1><p class="page-subtitle">Menschen, Kontakte und aktuelle Team-Infos.</p></div>
|
||
<button class="btn btn-ghost btn-sm"><span class="material-icons">swap_horiz</span>Team wechseln</button>
|
||
</header>
|
||
|
||
<div class="team-highlight card">
|
||
<div class="card-body">
|
||
<span class="card-label card-label--info">Ankündigung</span>
|
||
<h2>Teamtreffen am 26. August</h2>
|
||
<p>Wir besprechen die September-Planung und sammeln Feedback zur neuen Einsatzstruktur.</p>
|
||
<span class="meta-line"><span class="material-icons">campaign</span>von Alex · vor 2 Stunden</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-heading"><div><span class="card-label">Mitglieder</span><h2>18 Personen</h2></div><button class="text-action" data-page="members">Verzeichnis öffnen</button></div>
|
||
<div class="member-preview-row">
|
||
<div class="avatar avatar--a">A</div><div class="avatar avatar--b">B</div><div class="avatar avatar--c">C</div><div class="avatar">P</div><div class="avatar avatar--muted">+14</div>
|
||
</div>
|
||
|
||
<div class="section-heading"><div><span class="card-label">Aktuell</span><h2>Im Team</h2></div></div>
|
||
<div class="card-list">
|
||
<button class="list-row" data-page="members"><span class="material-icons list-row__icon">contacts</span><span><strong>Mitgliederverzeichnis</strong><small>Kontaktdaten, Team-Verwaltungen, Zuständigkeiten</small></span><span class="material-icons">chevron_right</span></button>
|
||
<button class="list-row" data-page="documents"><span class="material-icons list-row__icon">folder</span><span><strong>Dokumente</strong><small>12 aktuelle Dokumente · 4 im Archiv</small></span><span class="material-icons">chevron_right</span></button>
|
||
<button class="list-row" data-page="chat"><span class="material-icons list-row__icon">forum</span><span><strong>Teamkommunikation</strong><small>2 aktive Channels</small></span><span class="nav-count">3</span></button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MEMBERS -->
|
||
<section class="screen" data-screen="members" hidden>
|
||
<header class="page-header">
|
||
<p class="kicker">Vor-Ort-Arbeit</p><h1>Mitglieder</h1><p class="page-subtitle">Kontaktdaten sind nur sichtbar, wenn sie freiwillig geteilt wurden.</p>
|
||
</header>
|
||
<div class="search-row"><div class="search-box"><span class="material-icons">search</span><input placeholder="Mitglied suchen …"></div><span class="badge badge-blue">18 aktiv</span></div>
|
||
<div class="member-list">
|
||
<article class="member-card">
|
||
<div class="avatar avatar--a">A</div><div class="member-card__main"><div><h3>Alex</h3><span class="badge badge-teal">Team-Verwaltung</span></div><p>Erreichbar: Signal · ab 17 Uhr</p><a href="#">+49 170 1234567</a></div><button class="icon-button icon-button--light" aria-label="Kontakt"><span class="material-icons">chat</span></button>
|
||
</article>
|
||
<article class="member-card">
|
||
<div class="avatar avatar--b">B</div><div class="member-card__main"><div><h3>Sam</h3></div><p>Erreichbar: SMS · bitte keine Anrufe</p><a href="#">+49 171 9876543</a></div><button class="icon-button icon-button--light" aria-label="Kontakt"><span class="material-icons">sms</span></button>
|
||
</article>
|
||
<article class="member-card">
|
||
<div class="avatar avatar--c">C</div><div class="member-card__main"><div><h3>Jo</h3></div><p class="muted-copy">Keine Kontaktdaten freigegeben</p></div><span class="material-icons muted-icon">lock</span>
|
||
</article>
|
||
<article class="member-card member-card--admin-extra">
|
||
<div class="avatar">M</div><div class="member-card__main"><div><h3>Mehmet</h3><span class="badge badge-muted">Eingeladen</span></div><p>Login: mehmet@example.org · Einladung offen</p><small>Beitritt: noch nicht erfolgt</small></div><button class="btn btn-ghost btn-sm">Details</button>
|
||
</article>
|
||
</div>
|
||
<div class="context-note"><span class="material-icons">visibility</span><span><strong>Verwaltungsansicht:</strong> Die letzte Zeile zeigt exemplarisch Zusatzdaten, die nur Team-Verwaltungen sehen.</span></div>
|
||
</section>
|
||
|
||
<!-- SCHEDULE -->
|
||
<section class="screen" data-screen="schedule" hidden>
|
||
<header class="page-header">
|
||
<p class="kicker">Einsatzplanung</p><h1>September 2026</h1><p class="page-subtitle">Verfügbarkeit offen bis 23. August · Veröffentlichung geplant für 25. August.</p>
|
||
</header>
|
||
|
||
<div class="period-progress card">
|
||
<div class="card-body">
|
||
<div class="period-progress__top"><span class="badge status-badge-ui status-action"><span class="material-icons">edit_calendar</span>Verfügbarkeit offen</span><strong>3 von 7 beantwortet</strong></div>
|
||
<div class="progress-track"><span style="width:43%"></span></div>
|
||
<p>Bitte gib für jeden Termin an, ob du verfügbar bist.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="availability-list">
|
||
<article class="availability-card">
|
||
<div class="date-tile"><strong>04</strong><span>SEP</span></div>
|
||
<div class="availability-card__main"><h3>Checkpoint-Abend</h3><p>17:30–21:00 · Pipinstraße</p><div class="need-row"><span>Haupt: 2</span><span>Springer: 1</span></div></div>
|
||
<div class="availability-actions"><button class="answer-btn answer-btn--yes is-selected"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no"><span class="material-icons">close</span>Nein</button></div>
|
||
</article>
|
||
<article class="availability-card availability-card--urgent">
|
||
<div class="date-tile"><strong>18</strong><span>SEP</span></div>
|
||
<div class="availability-card__main"><div class="title-with-badge"><h3>Freitagabend</h3><span class="badge badge-coral">Offen</span></div><p>18:00–21:30 · Café Bach</p><div class="need-row"><span>Haupt: 2/2</span><span>Springer: 0/1</span></div></div>
|
||
<div class="availability-actions"><button class="answer-btn answer-btn--yes"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no"><span class="material-icons">close</span>Nein</button></div>
|
||
</article>
|
||
<article class="availability-card">
|
||
<div class="date-tile"><strong>25</strong><span>SEP</span></div>
|
||
<div class="availability-card__main"><h3>Checkpoint-Abend</h3><p>17:30–21:00 · Pipinstraße</p><div class="need-row"><span>Haupt: 2</span><span>Springer: 1</span></div></div>
|
||
<div class="availability-actions"><button class="answer-btn answer-btn--yes"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no is-selected"><span class="material-icons">close</span>Nein</button></div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DOCUMENTS -->
|
||
<section class="screen" data-screen="documents" hidden>
|
||
<header class="page-header page-header--actions">
|
||
<div><p class="kicker">Teamwissen</p><h1>Dokumente</h1><p class="page-subtitle">Freigegebene Materialien für Vor-Ort-Arbeit.</p></div>
|
||
<button class="btn btn-primary"><span class="material-icons">upload</span>Hochladen</button>
|
||
</header>
|
||
<div class="segmented" role="tablist" aria-label="Dokumentenstatus"><button class="is-active">Aktuell <span>12</span></button><button>Archiv <span>4</span></button></div>
|
||
<div class="document-list">
|
||
<article class="document-card">
|
||
<div class="file-icon file-icon--pdf">PDF</div><div><h3>Safer-Sex-Leitfaden 2026</h3><p>Aktuelle Hinweise für Beratung und Vor-Ort-Arbeit.</p><span>PDF · 1,8 MB · aktualisiert 12.08.2026</span></div><button class="icon-button icon-button--light"><span class="material-icons">download</span></button>
|
||
</article>
|
||
<article class="document-card">
|
||
<div class="file-thumb"><span class="material-icons">image</span></div><div><h3>Aufbauplan Infostand</h3><p>Foto mit markierter Positionierung der Materialien.</p><span>JPG · 840 KB · aktualisiert 02.08.2026</span></div><button class="icon-button icon-button--light"><span class="material-icons">visibility</span></button>
|
||
</article>
|
||
<article class="document-card document-card--pending">
|
||
<div class="file-icon">DOCX</div><div><div class="title-with-badge"><h3>Checkliste Materialkiste</h3><span class="badge badge-yellow">Prüfung läuft</span></div><p>Nur für dich und Team-Verwaltung sichtbar.</p><span>DOCX · 95 KB · von dir hochgeladen</span></div><button class="btn btn-ghost btn-sm">Zurückziehen</button>
|
||
</article>
|
||
</div>
|
||
<div class="context-note"><span class="material-icons">photo_camera</span><span>Bitte nur Fotos hochladen, für die die erforderlichen Rechte geklärt sind.</span></div>
|
||
</section>
|
||
|
||
<!-- CHAT -->
|
||
<section class="screen screen--chat" data-screen="chat" hidden>
|
||
<header class="page-header"><p class="kicker">Teamkommunikation</p><h1>Teamchat</h1><p class="page-subtitle">Keine Dateien, keine Embeds – nur klare Teamkommunikation.</p></header>
|
||
<div class="channel-layout">
|
||
<aside class="channel-list">
|
||
<button class="channel-item"><span class="material-icons">campaign</span><span><strong>Ankündigungen</strong><small>nur Team-Verwaltung schreibt</small></span><span class="nav-count">1</span></button>
|
||
<button class="channel-item is-active"><span class="material-icons">tag</span><span><strong>Team</strong><small>3 ungelesen</small></span><span class="nav-count">3</span></button>
|
||
<button class="channel-item"><span class="material-icons">tag</span><span><strong>Veranstaltungen</strong><small>keine neuen Nachrichten</small></span></button>
|
||
</aside>
|
||
<section class="chat-pane">
|
||
<div class="chat-pane__header"><div><strong># Team</strong><span>18 Mitglieder</span></div><button class="icon-button icon-button--light"><span class="material-icons">info</span></button></div>
|
||
<div class="message-stream">
|
||
<div class="chat-day"><span>Heute</span></div>
|
||
<article class="message-bubble message-bubble--other"><div class="message-author"><span class="avatar avatar--mini avatar--a">A</span><strong>Alex</strong><time>09:12</time></div><p>Kann jemand am Freitag die Materialkiste schon um 17:30 mitbringen?</p><div class="message-state">✓✓ gelesen von 8/18</div></article>
|
||
<article class="message-bubble message-bubble--own"><div class="message-author"><strong>Du</strong><time>09:18</time></div><p>Ja, ich kann sie auf dem Weg mitnehmen.</p><div class="message-state message-state--read">✓✓ gelesen</div></article>
|
||
<article class="message-bubble message-bubble--other message-bubble--reply"><div class="reply-reference">Antwort auf deine Nachricht</div><div class="message-author"><span class="avatar avatar--mini avatar--b">B</span><strong>Sam</strong><time>09:22</time></div><p>Perfekt, danke! Dann schreibe ich das so in die Vorbereitung.</p><div class="message-state">✓ gespeichert</div></article>
|
||
</div>
|
||
<form class="chat-composer" onsubmit="return false;"><textarea aria-label="Nachricht" placeholder="Nachricht an #Team"></textarea><div><span class="composer-hint">https-Link möglich · max. 1 externer Link</span><button class="send-button" aria-label="Senden"><span class="material-icons">send</span></button></div></form>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PROFILE -->
|
||
<section class="screen" data-screen="profile" hidden>
|
||
<header class="page-header"><p class="kicker">Mein Konto</p><h1>Profil</h1><p class="page-subtitle">So sehen dich deine Teamkolleg:innen.</p></header>
|
||
<div class="profile-grid">
|
||
<section class="card profile-card">
|
||
<div class="card-body">
|
||
<div class="profile-identity"><div class="avatar avatar--large">P</div><div><h2>Patsy</h2><span>Avatar A</span></div></div>
|
||
<div class="form-group"><label>Anzeigename</label><input class="form-control" value="Patsy"></div>
|
||
<div class="avatar-picker avatar-picker--compact"><button class="avatar-choice is-selected"><span class="avatar avatar--a">A</span><span>A</span></button><button class="avatar-choice"><span class="avatar avatar--b">B</span><span>B</span></button><button class="avatar-choice"><span class="avatar avatar--c">C</span><span>C</span></button></div>
|
||
<button class="btn btn-primary">Änderungen speichern</button>
|
||
</div>
|
||
</section>
|
||
<section class="card">
|
||
<div class="card-header"><h2>Kontaktdaten im Team</h2><span class="badge badge-muted">Standard: aus</span></div>
|
||
<div class="card-body">
|
||
<label class="toggle-row"><span><strong>Kontaktdaten teilen</strong><small>Nur Mitglieder deines Teams sehen diese Angaben.</small></span><input type="checkbox"><span class="toggle-ui"></span></label>
|
||
<div class="form-group"><label>Telefon</label><input class="form-control" value="+49 170 1234567"></div>
|
||
<div class="form-group"><label>Erreichbar per</label><div class="choice-pills"><button class="is-selected">Signal</button><button>SMS</button><button>Anruf</button></div></div>
|
||
<div class="form-group"><label>Kontakt-Notiz</label><textarea class="form-control">Am besten ab 17 Uhr.</textarea></div>
|
||
</div>
|
||
</section>
|
||
<section class="card profile-card--wide">
|
||
<div class="card-header"><h2>Angemeldete Geräte</h2></div>
|
||
<div class="device-row"><span class="material-icons">computer</span><div><strong>Heimdall-home · Brave</strong><small>Dieses Gerät · zuletzt aktiv gerade eben</small></div><span class="badge badge-teal">Aktuell</span></div>
|
||
<div class="device-row"><span class="material-icons">smartphone</span><div><strong>Galaxy · Chrome</strong><small>Zuletzt aktiv gestern, 22:14</small></div><button class="btn btn-ghost btn-sm">Abmelden</button></div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- NOTIFICATIONS -->
|
||
<section class="screen" data-screen="notifications" hidden>
|
||
<header class="page-header"><p class="kicker">Glocke</p><h1>Benachrichtigungen</h1><p class="page-subtitle">Nur Ereignisse, die deine Aufmerksamkeit brauchen – dauerhafte Zustände bleiben im Dashboard.</p></header>
|
||
<div class="notification-list">
|
||
<article class="notification-card notification-card--urgent"><span class="material-icons">priority_high</span><div><span class="card-label card-label--urgent">Dringend</span><h3>Offener Dienst in weniger als 24 Stunden</h3><p>Heute, 18:00 · Springer:in noch unbesetzt.</p><time>vor 12 Minuten</time></div></article>
|
||
<article class="notification-card notification-card--important"><span class="material-icons">event_available</span><div><span class="card-label card-label--action">Wichtig</span><h3>Deine Einteilung wurde geändert</h3><p>Am 21.08. bist du jetzt für „Theke“ eingeteilt.</p><time>vor 2 Stunden</time></div></article>
|
||
<article class="notification-card"><span class="material-icons">reply</span><div><span class="card-label card-label--info">Antwort</span><h3>Sam hat dir im Teamchat geantwortet</h3><p>„Perfekt, danke! Dann schreibe ich das so …“</p><time>heute, 09:22</time></div></article>
|
||
<article class="notification-card"><span class="material-icons">campaign</span><div><span class="card-label card-label--info">Ankündigung</span><h3>Teamtreffen am 26. August</h3><p>Neue Ankündigung von Alex.</p><time>gestern</time></div></article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TEAM MANAGE -->
|
||
<section class="screen" data-screen="team-manage" hidden>
|
||
<header class="page-header"><p class="kicker">Team-Verwaltung</p><h1>Vor-Ort-Arbeit</h1><p class="page-subtitle">Operative Aufgaben im Team – ohne Organisationsverwaltung.</p></header>
|
||
<div class="admin-kpi-grid">
|
||
<button class="admin-kpi admin-kpi--urgent"><span class="material-icons">warning</span><strong>2</strong><small>unterbesetzte Einsätze</small></button>
|
||
<button class="admin-kpi"><span class="material-icons">event_busy</span><strong>6</strong><small>Rückmeldungen fehlen</small></button>
|
||
<button class="admin-kpi"><span class="material-icons">fact_check</span><strong>2</strong><small>Dokumente warten</small></button>
|
||
<button class="admin-kpi"><span class="material-icons">mail</span><strong>3</strong><small>offene Einladungen</small></button>
|
||
</div>
|
||
<section class="card management-section">
|
||
<div class="card-header"><h2>Unterbesetzte Einsätze</h2><span class="badge badge-coral">Handlungsbedarf</span></div>
|
||
<div class="management-row"><div><strong>Heute · Freitagabend</strong><span>18:00–21:30 · Springer: 0/1</span></div><button class="btn btn-coral btn-sm">Offenen Platz besetzen</button></div>
|
||
<div class="management-row"><div><strong>04.09. · Checkpoint-Abend</strong><span>17:30–21:00 · Haupt: 1/2</span></div><button class="btn btn-ghost btn-sm">Planung öffnen</button></div>
|
||
</section>
|
||
<section class="card management-section">
|
||
<div class="card-header"><h2>Fairness-Hilfe</h2><span class="badge badge-blue">Vorschlag</span></div>
|
||
<div class="fairness-table">
|
||
<div class="fairness-head"><span>Person</span><span>Einsätze</span><span>Letzter Einsatz</span></div>
|
||
<div><strong>Sam</strong><span>2</span><span>18.07.</span></div><div><strong>Jo</strong><span>3</span><span>01.08.</span></div><div><strong>Patsy</strong><span>5</span><span>14.08.</span></div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<!-- ORG MANAGE -->
|
||
<section class="screen" data-screen="org-manage" hidden>
|
||
<header class="page-header"><p class="kicker">Organisationsverwaltung</p><h1>Aidshilfe Köln</h1><p class="page-subtitle">Struktur, Rechte, Brand Profiles und Module – keine teaminternen Fachinhalte.</p></header>
|
||
<div class="context-note context-note--strong"><span class="material-icons">shield</span><span>Diese Ebene zeigt bewusst <strong>keinen Teamchat, keine Einsatzdetails und keine Teamdokumente</strong>.</span></div>
|
||
<div class="org-grid">
|
||
<button class="org-card"><span class="material-icons">groups</span><strong>7 Teams</strong><small>Teams anlegen, archivieren und verwalten</small><span class="material-icons">arrow_forward</span></button>
|
||
<button class="org-card"><span class="material-icons">admin_panel_settings</span><strong>Team-Verwaltungen</strong><small>Rollen pro Team vergeben</small><span class="material-icons">arrow_forward</span></button>
|
||
<button class="org-card"><span class="material-icons">palette</span><strong>Brand Profiles</strong><small>Farben, Typografie und Team-Identität</small><span class="material-icons">arrow_forward</span></button>
|
||
<button class="org-card"><span class="material-icons">extension</span><strong>Module</strong><small>Scheduling, Chat und Dokumente aktivieren</small><span class="material-icons">arrow_forward</span></button>
|
||
<button class="org-card"><span class="material-icons">verified_user</span><strong>Org-Admins</strong><small>Organisationsrechte verwalten</small><span class="material-icons">arrow_forward</span></button>
|
||
<button class="org-card" data-page="audit"><span class="material-icons">history</span><strong>Audit Log</strong><small>Administrative Änderungen nachvollziehen</small><span class="material-icons">arrow_forward</span></button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AUDIT -->
|
||
<section class="screen" data-screen="audit" hidden>
|
||
<header class="page-header"><p class="kicker">Organisation</p><h1>Audit Log</h1><p class="page-subtitle">Nur relevante administrative Änderungen. Chat und Verfügbarkeiten werden hier nicht protokolliert.</p></header>
|
||
<div class="filter-bar card"><div class="search-box"><span class="material-icons">search</span><input placeholder="Audit Log durchsuchen …"></div><select class="form-control"><option>Alle Ereignisse</option><option>Teams</option><option>Rechte</option><option>Module</option><option>Dokumente</option></select></div>
|
||
<div class="audit-list card">
|
||
<div class="audit-row"><span class="audit-icon"><span class="material-icons">manage_accounts</span></span><div><strong>Team-Verwaltung ernannt</strong><p>Alex wurde für „Vor-Ort-Arbeit“ als Team-Verwaltung ernannt.</p><span>Patsy · 17.08.2026, 10:42</span></div></div>
|
||
<div class="audit-row"><span class="audit-icon"><span class="material-icons">extension</span></span><div><strong>Modul aktiviert</strong><p>„Dokumente“ wurde für Team „Café Bach“ aktiviert.</p><span>Org-Admin · 16.08.2026, 14:08</span></div></div>
|
||
<div class="audit-row"><span class="audit-icon audit-icon--danger"><span class="material-icons">delete_forever</span></span><div><strong>Dokument dauerhaft gelöscht</strong><p>„Alte Kontaktdaten.xlsx“ wurde dauerhaft entfernt.</p><span>Alex · 15.08.2026, 18:31</span></div></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<nav class="bottom-nav" aria-label="Mobile Navigation">
|
||
<button class="bottom-nav__item is-active" data-page="start"><span class="material-icons">home</span><span>Start</span></button>
|
||
<button class="bottom-nav__item" data-page="schedule"><span class="material-icons">calendar_month</span><span>Plan</span></button>
|
||
<button class="bottom-nav__item" data-page="chat"><span class="material-icons">forum</span><span>Chat</span><i>3</i></button>
|
||
<button class="bottom-nav__item" data-page="documents"><span class="material-icons">folder</span><span>Dateien</span></button>
|
||
<button class="bottom-nav__item" data-page="team"><span class="material-icons">groups</span><span>Team</span></button>
|
||
<button class="bottom-nav__item" data-page="profile"><span class="material-icons">person</span><span>Profil</span></button>
|
||
</nav>
|
||
</div>
|
||
|
||
<script>
|
||
const screens = [...document.querySelectorAll('[data-screen]')];
|
||
const pageButtons = [...document.querySelectorAll('[data-page]')];
|
||
const routeChip = document.getElementById('routeChip');
|
||
|
||
const routes = {
|
||
login: '/auth/login/', verify: '/auth/verify/', 'onboarding-name': '/onboarding/profile/', 'team-select': '/onboarding/team/',
|
||
start: '/team/vor-ort-arbeit/', team: '/team/vor-ort-arbeit/team/', members: '/team/vor-ort-arbeit/members/',
|
||
schedule: '/team/vor-ort-arbeit/scheduling/', documents: '/team/vor-ort-arbeit/documents/', chat: '/team/vor-ort-arbeit/chat/',
|
||
profile: '/profile/', notifications: '/notifications/', 'team-manage': '/team/vor-ort-arbeit/manage/', 'org-manage': '/org/aidshilfe-koeln/manage/', audit: '/org/aidshilfe-koeln/manage/audit/'
|
||
};
|
||
|
||
function showPage(page, pushHash = true) {
|
||
const target = screens.find(screen => screen.dataset.screen === page) || screens.find(screen => screen.dataset.screen === 'start');
|
||
screens.forEach(screen => screen.hidden = screen !== target);
|
||
document.querySelectorAll('.nav-item, .bottom-nav__item').forEach(button => button.classList.toggle('is-active', button.dataset.page === page));
|
||
routeChip.textContent = routes[page] || routes.start;
|
||
if (pushHash) history.replaceState(null, '', '#' + page);
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
|
||
pageButtons.forEach(button => button.addEventListener('click', () => showPage(button.dataset.page)));
|
||
|
||
document.querySelectorAll('.answer-btn').forEach(button => {
|
||
button.addEventListener('click', () => {
|
||
button.parentElement.querySelectorAll('.answer-btn').forEach(b => b.classList.remove('is-selected'));
|
||
button.classList.add('is-selected');
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.avatar-choice').forEach(button => {
|
||
button.addEventListener('click', () => {
|
||
button.closest('.avatar-picker').querySelectorAll('.avatar-choice').forEach(b => b.classList.remove('is-selected'));
|
||
button.classList.add('is-selected');
|
||
});
|
||
});
|
||
|
||
const initial = location.hash.replace('#','');
|
||
if (initial && screens.some(s => s.dataset.screen === initial)) showPage(initial, false);
|
||
</script>
|
||
</body>
|
||
</html>
|