138 lines
No EOL
10 KiB
HTML
138 lines
No EOL
10 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Vor-Ort-Arbeit – App-Mockup</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<style>
|
||
:root { --navy:#07182E; --deep:#061126; --teal:#00858A; --teal-strong:#005F61; --aqua:#52E0CF; --blue:#2596BE; --coral:#F04A67; --yellow:#F6E74A; --mist:#F4FAFC; --paper:#fff; }
|
||
body { display:block; background:var(--mist); color:var(--navy); }
|
||
.mockup { max-width:1180px; margin:0 auto; padding:1.25rem; }
|
||
.mockup-note { max-width:760px; margin:0 auto 1.5rem; padding:1rem 1.1rem; background:#e9f7f6; border-left:4px solid var(--teal); color:#17414b; border-radius:.5rem; font-size:.9rem; }
|
||
.phone { width:min(100%,430px); margin:auto; background:var(--mist); border:10px solid var(--deep); border-radius:2rem; overflow:hidden; box-shadow:0 18px 42px rgba(7,24,46,.28); min-height:820px; position:relative; }
|
||
.status { height:26px; background:var(--deep); color:#fff; padding:4px 18px; display:flex; justify-content:space-between; font-size:.7rem; }
|
||
.app-head { background:linear-gradient(135deg,var(--teal-strong),var(--teal)); color:#fff; padding:16px 18px 18px; display:flex; align-items:center; gap:12px; }
|
||
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:var(--aqua); color:var(--deep); font-family:var(--font-display); font-weight:900; font-size:1.35rem; }
|
||
.app-head strong { display:block; font-size:1rem; }
|
||
.app-head small { color:#d8fffa; }
|
||
.bell { margin-left:auto; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:10px; background:transparent; color:#fff; position:relative; }
|
||
.bell b { position:absolute; top:-6px; right:-4px; min-width:18px; height:18px; display:grid; place-items:center; background:var(--coral); border-radius:99px; color:#fff; font-size:.65rem; }
|
||
.content { padding:20px 16px 92px; }
|
||
.eyebrow { color:var(--teal); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
|
||
.greeting { font-family:var(--font-display); font-size:2.35rem; line-height:.92; text-transform:uppercase; margin:.3rem 0 .5rem; }
|
||
.intro { color:#526b7b; font-size:.9rem; margin-bottom:1.2rem; }
|
||
.dashboard-card { display:block; padding:16px; margin-bottom:12px; border:1px solid rgba(7,24,46,.13); border-radius:14px; background:#fff; color:var(--navy); box-shadow:0 3px 10px rgba(7,24,46,.08); text-decoration:none; }
|
||
.dashboard-card.urgent { border-left:5px solid var(--coral); background:#fff7f8; }
|
||
.dashboard-card.action { border-left:5px solid var(--teal); }
|
||
.dashboard-card.upcoming { border-left:5px solid var(--blue); }
|
||
.dashboard-card.info { border-left:5px solid #92722a; background:#fffdef; }
|
||
.card-top { display:flex; justify-content:space-between; gap:10px; align-items:start; }
|
||
.type { font-size:.67rem; font-weight:800; letter-spacing:.08em; }
|
||
.urgent .type { color:#b62240; } .action .type { color:var(--teal); } .upcoming .type { color:#176b8a; } .info .type { color:#715900; }
|
||
.dashboard-card h2 { font-size:1rem; line-height:1.35; margin:.35rem 0; }
|
||
.dashboard-card p { color:#526b7b; font-size:.84rem; margin:0; }
|
||
.card-link { display:inline-block; margin-top:.7rem; color:var(--teal-strong); font-weight:800; font-size:.83rem; }
|
||
.bottom-nav { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); background:var(--deep); border-top:1px solid rgba(255,255,255,.13); }
|
||
.bottom-nav a { min-height:66px; color:#c8d9df; display:grid; place-content:center; gap:2px; text-align:center; font-size:.72rem; text-decoration:none; }
|
||
.bottom-nav a[aria-current="page"] { color:var(--aqua); background:rgba(82,224,207,.12); font-weight:800; }
|
||
.icon { font-size:1.15rem; line-height:1; }
|
||
.page-section { margin-top:2.6rem; }
|
||
.section-title { font-family:var(--font-display); font-size:2rem; text-transform:uppercase; margin:0 0 .75rem; }
|
||
.desktop-preview { background:var(--mist); border:1px solid rgba(7,24,46,.14); border-radius:1rem; overflow:hidden; box-shadow:0 6px 18px rgba(7,24,46,.1); }
|
||
.desktop-header { background:var(--deep); color:#fff; padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
|
||
.desktop-header strong { font-family:var(--font-display); font-size:1.45rem; text-transform:uppercase; }
|
||
.desktop-main { padding:1.25rem; display:grid; gap:1rem; grid-template-columns:1fr; }
|
||
.team-switch { padding:.8rem 1rem; border:1px solid rgba(7,24,46,.18); border-radius:.55rem; background:#fff; font-weight:700; }
|
||
.manage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
|
||
.manage-item { padding:1.1rem; background:#fff; border:1px solid rgba(7,24,46,.13); border-radius:.75rem; }
|
||
.manage-item strong { font-family:var(--font-display); font-size:2.1rem; line-height:1; color:var(--teal-strong); display:block; }
|
||
.manage-item.critical strong { color:#c93552; }
|
||
.manage-item span { color:#30495c; font-size:.86rem; }
|
||
.mockup footer { color:#526b7b; text-align:center; font-size:.8rem; margin:1.5rem auto 0; max-width:680px; }
|
||
@media (min-width:760px) { .mockup { padding:2rem; } .desktop-main { grid-template-columns:220px 1fr; } .manage-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="mockup">
|
||
<p class="mockup-note"><strong>Interaktiver Look-&-Feel-Mockup:</strong> Die Beispielansicht zeigt die Mitglieder-Startseite im mobilen Format sowie darunter die Team-Verwaltung. Links und Buttons sind bewusst als semantische HTML-Elemente angelegt; produktive Daten und Funktionen sind noch nicht implementiert.</p>
|
||
|
||
<section class="phone" aria-label="Mobile Mitglieder-Startseite">
|
||
<div class="status"><span>11:17</span><span>●●● 5G ▰</span></div>
|
||
<header class="app-head">
|
||
<div class="brand-mark" aria-hidden="true">VO</div>
|
||
<div><strong>Vor-Ort-Arbeit</strong><small>Team Café Bach</small></div>
|
||
<button class="bell" aria-label="3 neue Benachrichtigungen">♧<b>3</b></button>
|
||
</header>
|
||
<div class="content">
|
||
<p class="eyebrow">Start · Montag, 17. August</p>
|
||
<h1 class="greeting">Guten Morgen,<br>Chrystal!</h1>
|
||
<p class="intro">Hier ist, was heute für dich und dein Team wichtig ist.</p>
|
||
|
||
<a class="dashboard-card urgent" href="#einsatz">
|
||
<div class="card-top"><span class="type">DRINGEND</span><span aria-hidden="true">→</span></div>
|
||
<h2>Heute wird noch ein Springer gesucht</h2>
|
||
<p>Abenddienst · 18:00–22:00 · Café Bach</p>
|
||
<span class="card-link">Offene Position ansehen</span>
|
||
</a>
|
||
|
||
<a class="dashboard-card upcoming" href="#einsatz">
|
||
<div class="card-top"><span class="type">NÄCHSTER EINSATZ</span><span aria-hidden="true">→</span></div>
|
||
<h2>Beratung & Empfang</h2>
|
||
<p>Mittwoch, 19. August · 16:00–20:00</p>
|
||
<span class="card-link">Einteilung öffnen</span>
|
||
</a>
|
||
|
||
<a class="dashboard-card action" href="#verfuegbarkeit">
|
||
<div class="card-top"><span class="type">AKTION</span><span aria-hidden="true">→</span></div>
|
||
<h2>4 Termine sind noch offen</h2>
|
||
<p>Bitte teile deine Verfügbarkeit für September mit.</p>
|
||
<span class="card-link">Verfügbarkeit angeben</span>
|
||
</a>
|
||
|
||
<a class="dashboard-card info" href="#chat">
|
||
<div class="card-top"><span class="type">INFO</span><span class="n-badge">3</span></div>
|
||
<h2>Neue Nachrichten im Teamchat</h2>
|
||
<p>Team · 3 ungelesene Nachrichten</p>
|
||
<span class="card-link">Chat öffnen</span>
|
||
</a>
|
||
</div>
|
||
<nav class="bottom-nav" aria-label="Hauptnavigation">
|
||
<a href="#start" aria-current="page"><span class="icon" aria-hidden="true">⌂</span>Start</a>
|
||
<a href="#team"><span class="icon" aria-hidden="true">♟</span>Team</a>
|
||
<a href="#profil"><span class="icon" aria-hidden="true">◉</span>Profil</a>
|
||
</nav>
|
||
</section>
|
||
|
||
<section class="page-section" aria-labelledby="manage-heading">
|
||
<h2 id="manage-heading" class="section-title">Team-Verwaltung</h2>
|
||
<article class="desktop-preview" aria-label="Vorschau Team-Verwaltung">
|
||
<header class="desktop-header"><strong>Vor-Ort-Arbeit</strong><span>Organisation · AIDS Hilfe Köln</span></header>
|
||
<div class="desktop-main">
|
||
<aside>
|
||
<p class="eyebrow">Aktuelles Team</p>
|
||
<button class="team-switch" type="button">Café Bach ▾</button>
|
||
<p style="margin-top:1.25rem"><strong>Navigation</strong></p>
|
||
<p>Start<br>Team<br>Einsatzplanung<br>Dokumente<br>Teamchat<br>Mitglieder</p>
|
||
</aside>
|
||
<div>
|
||
<p class="eyebrow">/team/cafe-bach/manage/</p>
|
||
<h3 class="section-title" style="font-size:2.35rem">Übersicht</h3>
|
||
<p class="intro">Was deine Team-Verwaltung heute braucht.</p>
|
||
<div class="manage-grid">
|
||
<article class="manage-item critical"><strong>1</strong><span>Unterbesetzter Einsatz heute</span></article>
|
||
<article class="manage-item"><strong>6</strong><span>Fehlende Verfügbarkeiten</span></article>
|
||
<article class="manage-item"><strong>2</strong><span>Dokumente warten auf Freigabe</span></article>
|
||
<article class="manage-item"><strong>3</strong><span>Offene Einladungen</span></article>
|
||
<article class="manage-item critical"><strong>2</strong><span>Unbesetzte Positionen</span></article>
|
||
<article class="manage-item"><strong>12</strong><span>Aktive Teammitglieder</span></article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<footer>Design-Grundlage: hochgeladenes <code>style.css</code> mit ergänzenden, mockup-spezifischen CSS-Regeln. Die Farbwerte, Typografie, Karten, Kontraste und 44px-orientierten Touch-Ziele folgen dem vorgegebenen Brand Profile.</footer>
|
||
</main>
|
||
</body>
|
||
</html> |