1288 lines
49 KiB
HTML
1288 lines
49 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Checkpoint Köln — Mitglieder-App (Mockup)</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;900&family=Noto+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
<style>
|
||
|
||
/* ============================================================
|
||
DESIGN TOKENS — Brand Profile "Vor-Ort-Arbeit"
|
||
============================================================ */
|
||
:root{
|
||
--ink: #07182E;
|
||
--deep: #061126;
|
||
--teal: #00858A;
|
||
--teal-strong:#005F61;
|
||
--aqua: #52E0CF;
|
||
--blue: #2596BE;
|
||
--coral: #F04A67;
|
||
--yellow: #F6E74A;
|
||
--mist: #F4FAFC;
|
||
--paper: #FFFFFF;
|
||
|
||
--ink-2: rgba(7,24,46,.70);
|
||
--muted: rgba(7,24,46,.46);
|
||
--border: rgba(7,24,46,.12);
|
||
--border-2: rgba(7,24,46,.20);
|
||
|
||
--font-display:'Big Shoulders Display', system-ui, sans-serif;
|
||
--font-body: 'Noto Sans', system-ui, sans-serif;
|
||
|
||
--r-sm: .5rem;
|
||
--r-md: .8rem;
|
||
--r-lg: 1.1rem;
|
||
|
||
--shadow-sm: 0 2px 10px rgba(7,24,46,.08);
|
||
--shadow-md: 0 10px 26px rgba(7,24,46,.14);
|
||
|
||
--ease: .18s cubic-bezier(.22,1,.36,1);
|
||
}
|
||
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||
html{-webkit-text-size-adjust:100%;}
|
||
body{
|
||
font-family:var(--font-body);
|
||
background:var(--mist);
|
||
color:var(--ink);
|
||
line-height:1.5;
|
||
padding:2.4rem 1rem 4rem;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
a{color:inherit;}
|
||
button{font:inherit;cursor:pointer;}
|
||
input,textarea{font:inherit;}
|
||
.material-icons{font-size:1.15rem;line-height:1;}
|
||
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
|
||
[hidden]{display:none !important;}
|
||
|
||
/* ============================================================
|
||
PRESENTATION CHROME (outside the actual app UI)
|
||
============================================================ */
|
||
.mockup-intro{
|
||
max-width:430px;
|
||
margin:0 auto 1.1rem;
|
||
text-align:center;
|
||
}
|
||
.mockup-eyebrow{
|
||
font-size:.68rem;
|
||
font-weight:800;
|
||
letter-spacing:.12em;
|
||
text-transform:uppercase;
|
||
color:var(--teal);
|
||
}
|
||
.mockup-title{
|
||
font-family:var(--font-display);
|
||
font-size:1.6rem;
|
||
font-weight:800;
|
||
letter-spacing:.01em;
|
||
margin:.2rem 0 .3rem;
|
||
}
|
||
.mockup-sub{
|
||
font-size:.82rem;
|
||
color:var(--muted);
|
||
}
|
||
|
||
.screen-tabs{
|
||
display:flex;
|
||
gap:.4rem;
|
||
max-width:430px;
|
||
margin:1rem auto 1.2rem;
|
||
overflow-x:auto;
|
||
padding-bottom:.3rem;
|
||
scrollbar-width:thin;
|
||
}
|
||
.screen-tabs label{
|
||
flex:0 0 auto;
|
||
padding:.5rem .85rem;
|
||
border-radius:999px;
|
||
border:1px solid var(--border-2);
|
||
background:var(--paper);
|
||
color:var(--ink-2);
|
||
font-size:.75rem;
|
||
font-weight:700;
|
||
white-space:nowrap;
|
||
cursor:pointer;
|
||
transition:background var(--ease), border-color var(--ease), color var(--ease);
|
||
}
|
||
.screen-tabs label:hover{border-color:var(--teal);color:var(--ink);}
|
||
|
||
.screen-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
|
||
|
||
/* ============================================================
|
||
DEVICE FRAME
|
||
============================================================ */
|
||
.device-frame{
|
||
width:min(412px, 94vw);
|
||
min-height:820px;
|
||
margin:0 auto;
|
||
background:var(--paper);
|
||
border:10px solid var(--deep);
|
||
border-radius:2.1rem;
|
||
box-shadow:var(--shadow-md);
|
||
overflow:hidden;
|
||
position:relative;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
|
||
.screens{flex:1;display:flex;flex-direction:column;min-height:0;}
|
||
.screen{display:none;flex-direction:column;flex:1;min-height:0;}
|
||
|
||
/* Wire up which panel shows for which tab */
|
||
#scr-login:checked ~ .screens #panel-login,
|
||
#scr-onboard:checked ~ .screens #panel-onboard,
|
||
#scr-teams:checked ~ .screens #panel-teams,
|
||
#scr-start:checked ~ .screens #panel-start,
|
||
#scr-team:checked ~ .screens #panel-team,
|
||
#scr-members:checked ~ .screens #panel-members,
|
||
#scr-sched:checked ~ .screens #panel-sched,
|
||
#scr-docs:checked ~ .screens #panel-docs,
|
||
#scr-chat:checked ~ .screens #panel-chat,
|
||
#scr-profile:checked ~ .screens #panel-profile,
|
||
#scr-notif:checked ~ .screens #panel-notif,
|
||
#scr-admin:checked ~ .screens #panel-admin{
|
||
display:flex;
|
||
}
|
||
|
||
/* ============================================================
|
||
APP HEADER / NAV
|
||
============================================================ */
|
||
.app-header{
|
||
flex-shrink:0;
|
||
padding:1rem 1.1rem .9rem;
|
||
background:
|
||
radial-gradient(circle at 10% 0%, rgba(82,224,207,.30), transparent 60%),
|
||
linear-gradient(135deg, var(--teal-strong) 0%, var(--teal) 100%);
|
||
color:#fff;
|
||
}
|
||
.app-header--brand{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
}
|
||
.wordmark{
|
||
display:flex;
|
||
flex-direction:column;
|
||
line-height:1;
|
||
}
|
||
.wordmark strong{
|
||
font-family:var(--font-display);
|
||
font-size:1.15rem;
|
||
font-weight:800;
|
||
letter-spacing:.04em;
|
||
}
|
||
.wordmark span{
|
||
font-size:.62rem;
|
||
font-weight:700;
|
||
letter-spacing:.14em;
|
||
text-transform:uppercase;
|
||
color:rgba(255,255,255,.75);
|
||
margin-top:.1rem;
|
||
}
|
||
.header-bell{
|
||
position:relative;
|
||
display:grid;
|
||
place-items:center;
|
||
width:44px;
|
||
height:44px;
|
||
border-radius:999px;
|
||
background:rgba(255,255,255,.14);
|
||
border:none;
|
||
color:#fff;
|
||
}
|
||
.header-bell .n-badge{
|
||
position:absolute;
|
||
top:2px; right:2px;
|
||
}
|
||
.greeting{
|
||
margin-top:.9rem;
|
||
}
|
||
.greeting h1{
|
||
font-family:var(--font-display);
|
||
font-size:1.45rem;
|
||
font-weight:800;
|
||
}
|
||
.greeting p{
|
||
font-size:.8rem;
|
||
color:rgba(255,255,255,.82);
|
||
margin-top:.15rem;
|
||
}
|
||
|
||
.app-header--simple{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:.6rem;
|
||
}
|
||
.back-btn{
|
||
display:grid;
|
||
place-items:center;
|
||
width:40px;height:40px;
|
||
flex:0 0 40px;
|
||
border-radius:999px;
|
||
background:rgba(255,255,255,.14);
|
||
border:none;
|
||
color:#fff;
|
||
}
|
||
.app-header--simple h1{
|
||
font-family:var(--font-display);
|
||
font-size:1.2rem;
|
||
font-weight:800;
|
||
}
|
||
.app-header--simple .header-meta{
|
||
font-size:.72rem;
|
||
color:rgba(255,255,255,.78);
|
||
margin-top:.1rem;
|
||
}
|
||
.header-actions{margin-left:auto;display:flex;gap:.4rem;}
|
||
.header-count{
|
||
margin-left:auto;
|
||
background:rgba(255,255,255,.16);
|
||
color:#fff;
|
||
font-size:.72rem;
|
||
font-weight:800;
|
||
padding:.25rem .55rem;
|
||
border-radius:999px;
|
||
}
|
||
|
||
/* ============================================================
|
||
CONTENT AREA
|
||
============================================================ */
|
||
.content{
|
||
flex:1;
|
||
min-height:0;
|
||
overflow-y:auto;
|
||
padding:1.1rem 1.1rem 1.4rem;
|
||
background:var(--mist);
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:.9rem;
|
||
}
|
||
.content::-webkit-scrollbar{width:5px;}
|
||
.content::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px;}
|
||
|
||
/* ============================================================
|
||
CARDS
|
||
============================================================ */
|
||
.card{
|
||
background:var(--paper);
|
||
border:1px solid var(--border);
|
||
border-radius:var(--r-lg);
|
||
box-shadow:var(--shadow-sm);
|
||
overflow:hidden;
|
||
}
|
||
.card-body{padding:1rem 1.05rem;}
|
||
.card--urgent{border-color:rgba(240,74,103,.35);}
|
||
.card--flat{box-shadow:none;}
|
||
|
||
.card-eyebrow{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:.4rem;
|
||
font-size:.68rem;
|
||
font-weight:800;
|
||
letter-spacing:.09em;
|
||
text-transform:uppercase;
|
||
margin-bottom:.5rem;
|
||
}
|
||
.card-eyebrow .material-icons{font-size:1rem;}
|
||
.eyebrow--urgent{color:var(--coral);}
|
||
.eyebrow--action{color:var(--blue);}
|
||
.eyebrow--upcoming{color:var(--teal);}
|
||
.eyebrow--info{color:var(--muted);}
|
||
|
||
.card-title{font-size:.92rem;font-weight:700;margin-bottom:.25rem;}
|
||
.card-text{font-size:.85rem;color:var(--ink-2);line-height:1.5;}
|
||
.card-footer-row{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:.6rem;
|
||
margin-top:.85rem;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
/* Shift / list rows inside a card */
|
||
.mini-shift{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:.65rem;
|
||
padding:.6rem 0;
|
||
border-top:1px solid var(--border);
|
||
}
|
||
.mini-shift:first-of-type{border-top:none;padding-top:.35rem;}
|
||
.mini-shift__icon{
|
||
width:36px;height:36px;flex:0 0 36px;
|
||
border-radius:var(--r-sm);
|
||
background:var(--mist);
|
||
display:grid;place-items:center;
|
||
color:var(--teal);
|
||
}
|
||
.mini-shift__body{min-width:0;flex:1;}
|
||
.mini-shift__title{font-size:.83rem;font-weight:700;}
|
||
.mini-shift__meta{font-size:.74rem;color:var(--muted);margin-top:.1rem;}
|
||
|
||
/* ============================================================
|
||
BUTTONS
|
||
============================================================ */
|
||
.btn{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:.4rem;
|
||
min-height:44px;
|
||
padding:.55rem 1rem;
|
||
border:1px solid transparent;
|
||
border-radius:var(--r-sm);
|
||
font-size:.83rem;
|
||
font-weight:700;
|
||
transition:transform var(--ease), background var(--ease), border-color var(--ease);
|
||
text-decoration:none;
|
||
}
|
||
.btn:active{transform:translateY(1px);}
|
||
.btn .material-icons{font-size:1.05rem;}
|
||
.btn-primary{background:var(--teal);color:#fff;}
|
||
.btn-primary:hover{background:var(--teal-strong);}
|
||
.btn-coral{background:var(--coral);color:#fff;}
|
||
.btn-coral:hover{background:#d93d58;}
|
||
.btn-ghost{background:transparent;border-color:var(--border-2);color:var(--ink-2);}
|
||
.btn-ghost:hover{background:var(--mist);border-color:var(--teal);color:var(--ink);}
|
||
.btn-ghost--on{background:rgba(0,133,138,.1);border-color:var(--teal);color:var(--teal-strong);}
|
||
.btn-ghost--off{background:rgba(240,74,103,.06);border-color:rgba(240,74,103,.35);color:var(--coral);}
|
||
.btn-danger{background:transparent;border-color:rgba(240,74,103,.4);color:var(--coral);}
|
||
.btn-danger:hover{background:var(--coral);color:#fff;border-color:var(--coral);}
|
||
.btn-sm{min-height:36px;padding:.4rem .75rem;font-size:.78rem;}
|
||
.btn-full{width:100%;}
|
||
|
||
/* ============================================================
|
||
BADGES
|
||
============================================================ */
|
||
.badge{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:.3rem;
|
||
padding:.22rem .55rem;
|
||
border-radius:999px;
|
||
font-size:.68rem;
|
||
font-weight:800;
|
||
letter-spacing:.02em;
|
||
white-space:nowrap;
|
||
}
|
||
.badge .material-icons{font-size:.85rem;}
|
||
.badge-teal{background:rgba(0,133,138,.12);color:var(--teal-strong);}
|
||
.badge-coral{background:rgba(240,74,103,.13);color:var(--coral);}
|
||
.badge-yellow{background:rgba(198,169,10,.14);color:#8a7307;}
|
||
.badge-blue{background:rgba(37,150,190,.13);color:var(--blue);}
|
||
.badge-muted{background:var(--mist);color:var(--muted);border:1px solid var(--border);}
|
||
|
||
.n-badge{
|
||
display:inline-grid;place-items:center;
|
||
min-width:1.15rem;height:1.15rem;
|
||
padding:0 .28rem;
|
||
border-radius:999px;
|
||
background:var(--coral);
|
||
color:#fff;
|
||
font-size:.64rem;font-weight:800;
|
||
}
|
||
|
||
/* ============================================================
|
||
ALERTS
|
||
============================================================ */
|
||
.alert{
|
||
display:flex;gap:.6rem;align-items:flex-start;
|
||
padding:.8rem .9rem;
|
||
border-radius:var(--r-md);
|
||
border:1px solid transparent;
|
||
font-size:.8rem;line-height:1.5;
|
||
}
|
||
.alert .material-icons{font-size:1.05rem;flex-shrink:0;margin-top:.05rem;}
|
||
.alert-info{background:rgba(37,150,190,.08);border-color:rgba(37,150,190,.25);color:#155674;}
|
||
.alert-success{background:rgba(0,133,138,.08);border-color:rgba(0,133,138,.25);color:var(--teal-strong);}
|
||
.alert-muted{background:var(--mist);border-color:var(--border);color:var(--ink-2);}
|
||
|
||
/* ============================================================
|
||
FORMS
|
||
============================================================ */
|
||
.form-group{display:grid;gap:.4rem;margin-bottom:1rem;}
|
||
.form-group label{font-size:.8rem;font-weight:700;color:var(--ink-2);}
|
||
.form-control{
|
||
width:100%;
|
||
min-height:44px;
|
||
padding:.6rem .8rem;
|
||
border:1px solid var(--border-2);
|
||
border-radius:var(--r-sm);
|
||
background:var(--paper);
|
||
color:var(--ink);
|
||
font-size:.88rem;
|
||
}
|
||
.form-control:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,133,138,.14);}
|
||
.form-hint{font-size:.74rem;color:var(--muted);}
|
||
textarea.form-control{min-height:70px;resize:vertical;}
|
||
.form-control:disabled{background:var(--mist);color:var(--muted);}
|
||
|
||
/* Toggle switch */
|
||
.toggle-row{
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
gap:.8rem;padding:.2rem 0;
|
||
}
|
||
.toggle-row__label{font-size:.85rem;font-weight:700;}
|
||
.toggle-row__hint{font-size:.74rem;color:var(--muted);margin-top:.1rem;}
|
||
.toggle{
|
||
position:relative;
|
||
width:44px;height:26px;flex:0 0 44px;
|
||
border-radius:999px;
|
||
background:var(--border-2);
|
||
}
|
||
.toggle::after{
|
||
content:"";
|
||
position:absolute;top:3px;left:3px;
|
||
width:20px;height:20px;border-radius:50%;
|
||
background:#fff;box-shadow:var(--shadow-sm);
|
||
}
|
||
.toggle--on{background:var(--teal);}
|
||
.toggle--on::after{left:21px;}
|
||
|
||
/* ============================================================
|
||
LIST ROWS (generic tappable rows)
|
||
============================================================ */
|
||
.list-row{
|
||
display:flex;align-items:center;gap:.7rem;
|
||
min-height:52px;
|
||
padding:.55rem 0;
|
||
border-top:1px solid var(--border);
|
||
font-size:.85rem;
|
||
cursor:pointer;
|
||
}
|
||
.list-row:first-of-type{border-top:none;}
|
||
.list-row .material-icons{color:var(--teal);}
|
||
.list-row__label{flex:1;font-weight:600;}
|
||
.list-row__chevron{color:var(--muted) !important;}
|
||
|
||
/* Avatars */
|
||
.avatar{
|
||
width:38px;height:38px;flex:0 0 38px;
|
||
border-radius:50%;
|
||
display:grid;place-items:center;
|
||
font-family:var(--font-display);
|
||
font-weight:800;
|
||
font-size:.9rem;
|
||
color:#fff;
|
||
}
|
||
.avatar--a{background:linear-gradient(135deg,var(--teal),var(--teal-strong));}
|
||
.avatar--b{background:linear-gradient(135deg,var(--blue),#123a52);}
|
||
.avatar--c{background:linear-gradient(135deg,var(--coral),#a72f47);}
|
||
.avatar-picker{display:flex;gap:.7rem;margin-bottom:.3rem;}
|
||
.avatar-option{
|
||
display:flex;flex-direction:column;align-items:center;gap:.35rem;
|
||
background:none;border:none;color:var(--ink-2);font-size:.68rem;font-weight:700;
|
||
}
|
||
.avatar-option .avatar{border:3px solid transparent;}
|
||
.avatar-option--selected .avatar{border-color:var(--teal);}
|
||
|
||
/* ============================================================
|
||
BOTTOM NAV
|
||
============================================================ */
|
||
.bottom-nav{
|
||
flex-shrink:0;
|
||
display:flex;
|
||
border-top:1px solid var(--border);
|
||
background:var(--paper);
|
||
padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
|
||
}
|
||
.nav-item{
|
||
flex:1;
|
||
display:flex;flex-direction:column;align-items:center;gap:.15rem;
|
||
min-height:48px;justify-content:center;
|
||
background:none;border:none;color:var(--muted);
|
||
font-size:.66rem;font-weight:700;
|
||
border-radius:var(--r-sm);
|
||
}
|
||
.nav-item .material-icons{font-size:1.3rem;}
|
||
.nav-item--active{color:var(--teal-strong);}
|
||
|
||
/* ============================================================
|
||
MISC — onboarding, teams, chips, chat, stats
|
||
============================================================ */
|
||
.progress-dot-row{display:flex;gap:.35rem;margin:0 0 .3rem;}
|
||
.progress-dot{width:22px;height:4px;border-radius:999px;background:var(--border-2);}
|
||
.progress-dot--done{background:var(--teal);}
|
||
|
||
.team-option{
|
||
display:flex;align-items:center;gap:.7rem;
|
||
padding:.85rem;
|
||
border:1.5px solid var(--border-2);
|
||
border-radius:var(--r-md);
|
||
margin-bottom:.6rem;
|
||
}
|
||
.team-option--selected{border-color:var(--teal);background:rgba(0,133,138,.05);}
|
||
.team-option__body{flex:1;}
|
||
.team-option__title{font-weight:700;font-size:.88rem;}
|
||
.team-option__meta{font-size:.74rem;color:var(--muted);margin-top:.1rem;}
|
||
.team-option__check{color:var(--teal);}
|
||
|
||
.slug-note{
|
||
font-family:ui-monospace, monospace;
|
||
font-size:.68rem;
|
||
color:rgba(255,255,255,.7);
|
||
margin-top:.15rem;
|
||
}
|
||
|
||
.chip-row{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.15rem;}
|
||
.chip{
|
||
flex:0 0 auto;
|
||
padding:.4rem .8rem;
|
||
border-radius:999px;
|
||
font-size:.76rem;font-weight:700;
|
||
border:1px solid var(--border-2);
|
||
background:var(--paper);
|
||
color:var(--ink-2);
|
||
}
|
||
.chip--active{background:var(--teal);border-color:var(--teal);color:#fff;}
|
||
|
||
.tabbar2{display:flex;border:1px solid var(--border-2);border-radius:var(--r-sm);overflow:hidden;width:fit-content;}
|
||
.tabbar2 span{padding:.4rem .9rem;font-size:.76rem;font-weight:700;color:var(--ink-2);}
|
||
.tabbar2 span.active{background:var(--teal);color:#fff;}
|
||
|
||
.doc-row{padding:.75rem 0;border-top:1px solid var(--border);}
|
||
.doc-row:first-of-type{border-top:none;}
|
||
.doc-row__top{display:flex;align-items:flex-start;gap:.65rem;}
|
||
.doc-row__icon{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-sm);background:var(--mist);display:grid;place-items:center;color:var(--teal);}
|
||
.doc-row__title{font-size:.85rem;font-weight:700;}
|
||
.doc-row__meta{font-size:.72rem;color:var(--muted);margin-top:.1rem;}
|
||
.doc-row__reason{font-size:.74rem;color:var(--coral);margin-top:.35rem;}
|
||
.doc-row__actions{display:flex;gap:.4rem;margin-top:.5rem;margin-left:calc(38px + .65rem);}
|
||
.icon-btn{
|
||
width:34px;height:34px;border-radius:var(--r-sm);
|
||
border:1px solid var(--border-2);background:var(--paper);
|
||
display:grid;place-items:center;
|
||
}
|
||
.icon-btn--teal{color:var(--teal-strong);border-color:rgba(0,133,138,.35);}
|
||
.icon-btn--coral{color:var(--coral);border-color:rgba(240,74,103,.35);}
|
||
|
||
.channel-divider{
|
||
display:flex;align-items:center;gap:.6rem;
|
||
font-size:.68rem;font-weight:800;letter-spacing:.08em;
|
||
text-transform:uppercase;color:var(--muted);
|
||
margin:.3rem 0;
|
||
}
|
||
.channel-divider::before,.channel-divider::after{content:"";flex:1;height:1px;background:var(--border);}
|
||
|
||
.msg{max-width:86%;}
|
||
.msg--in{align-self:flex-start;}
|
||
.msg-meta{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--muted);margin-bottom:.25rem;}
|
||
.msg-meta strong{color:var(--ink);font-weight:800;}
|
||
.msg-bubble{
|
||
background:var(--paper);
|
||
border:1px solid var(--border);
|
||
border-radius:var(--r-md);
|
||
padding:.6rem .75rem;
|
||
font-size:.84rem;
|
||
line-height:1.5;
|
||
}
|
||
.msg-bubble--announcement{border-color:rgba(0,133,138,.3);background:rgba(0,133,138,.05);}
|
||
.msg-bubble--deleted{color:var(--muted);font-style:italic;}
|
||
.msg-reply-ref{
|
||
font-size:.72rem;color:var(--muted);
|
||
border-left:2px solid var(--border-2);
|
||
padding-left:.5rem;margin-bottom:.35rem;
|
||
}
|
||
.msg-link{color:var(--blue);font-weight:700;text-decoration:underline;}
|
||
.msg-foot{display:flex;align-items:center;gap:.3rem;margin-top:.3rem;font-size:.68rem;color:var(--muted);}
|
||
.msg-foot .material-icons{font-size:.9rem;}
|
||
.msg-foot--read{color:var(--teal-strong);}
|
||
.msg-edited{font-size:.68rem;color:var(--muted);}
|
||
|
||
.chat-list{display:flex;flex-direction:column;gap:.8rem;}
|
||
.chat-input-bar{
|
||
flex-shrink:0;
|
||
display:flex;align-items:center;gap:.5rem;
|
||
padding:.7rem .9rem;
|
||
border-top:1px solid var(--border);
|
||
background:var(--paper);
|
||
}
|
||
.chat-input-bar input{flex:1;}
|
||
.chat-input-note{
|
||
flex-shrink:0;
|
||
padding:.7rem .9rem;
|
||
border-top:1px solid var(--border);
|
||
background:var(--mist);
|
||
font-size:.76rem;color:var(--muted);
|
||
text-align:center;
|
||
}
|
||
.send-btn{
|
||
width:44px;height:44px;border-radius:50%;
|
||
background:var(--teal);color:#fff;border:none;
|
||
display:grid;place-items:center;flex:0 0 44px;
|
||
}
|
||
|
||
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
|
||
.stat-card{
|
||
background:var(--paper);border:1px solid var(--border);
|
||
border-radius:var(--r-lg);padding:.9rem;
|
||
display:flex;flex-direction:column;gap:.15rem;
|
||
}
|
||
.stat-card .material-icons{font-size:1.1rem;margin-bottom:.2rem;}
|
||
.stat-card__value{font-family:var(--font-display);font-size:1.9rem;font-weight:800;line-height:1;}
|
||
.stat-card__label{font-size:.72rem;color:var(--muted);font-weight:700;}
|
||
.stat--coral .material-icons,.stat--coral .stat-card__value{color:var(--coral);}
|
||
.stat--yellow .material-icons,.stat--yellow .stat-card__value{color:#8a7307;}
|
||
.stat--blue .material-icons,.stat--blue .stat-card__value{color:var(--blue);}
|
||
.stat--muted .material-icons,.stat--muted .stat-card__value{color:var(--muted);}
|
||
|
||
.section-label{
|
||
font-size:.72rem;font-weight:800;letter-spacing:.08em;
|
||
text-transform:uppercase;color:var(--muted);
|
||
margin:.2rem 0 -.3rem;
|
||
}
|
||
|
||
.notif-row{
|
||
display:flex;gap:.7rem;align-items:flex-start;
|
||
padding:.75rem 0;border-top:1px solid var(--border);
|
||
}
|
||
.notif-row:first-of-type{border-top:none;}
|
||
.notif-icon{
|
||
width:34px;height:34px;flex:0 0 34px;border-radius:50%;
|
||
display:grid;place-items:center;
|
||
}
|
||
.notif-icon--urgent{background:rgba(240,74,103,.14);color:var(--coral);}
|
||
.notif-icon--important{background:rgba(0,133,138,.14);color:var(--teal-strong);}
|
||
.notif-icon--normal{background:var(--mist);color:var(--blue);}
|
||
.notif-body{flex:1;min-width:0;}
|
||
.notif-title{font-size:.83rem;font-weight:700;}
|
||
.notif-time{font-size:.7rem;color:var(--muted);margin-top:.15rem;}
|
||
|
||
@media (max-width:400px){
|
||
.device-frame{border-width:8px;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="mockup-intro">
|
||
<p class="mockup-eyebrow">Checkpoint Köln · Brand Profile „Vor-Ort-Arbeit"</p>
|
||
<h1 class="mockup-title">Mitglieder-App — Mockup</h1>
|
||
<p class="mockup-sub">Klickbare Screens zur Abstimmung, bevor es an den Aufbau geht. Nicht alle Funktionen sind aktiv.</p>
|
||
</div>
|
||
|
||
<div class="screen-tabs">
|
||
<label for="scr-login">Login</label>
|
||
<label for="scr-onboard">Profil einrichten</label>
|
||
<label for="scr-teams">Team wählen</label>
|
||
<label for="scr-start">Start</label>
|
||
<label for="scr-team">Team</label>
|
||
<label for="scr-members">Mitglieder</label>
|
||
<label for="scr-sched">Verfügbarkeit</label>
|
||
<label for="scr-docs">Dokumente</label>
|
||
<label for="scr-chat">Chat</label>
|
||
<label for="scr-profile">Profil</label>
|
||
<label for="scr-notif">Benachrichtigungen</label>
|
||
<label for="scr-admin">Team-Verwaltung</label>
|
||
</div>
|
||
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-login" checked>
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-onboard">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-teams">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-start">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-team">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-members">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-sched">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-docs">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-chat">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-profile">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-notif">
|
||
<input class="screen-radio" type="radio" name="screen" id="scr-admin">
|
||
|
||
<div class="device-frame">
|
||
<div class="screens">
|
||
|
||
<!-- ================= LOGIN ================= -->
|
||
<section class="screen" id="panel-login">
|
||
<header class="app-header">
|
||
<div class="app-header--brand">
|
||
<div class="wordmark"><strong>CHECKPOINT</strong><span>Ehrenamt</span></div>
|
||
</div>
|
||
</header>
|
||
<div class="content">
|
||
<div class="card"><div class="card-body">
|
||
<h1 class="card-title" style="font-size:1.1rem;">Anmelden</h1>
|
||
<p class="card-text" style="margin-bottom:1rem;">Melde dich mit deiner E-Mail-Adresse an — ganz ohne Passwort.</p>
|
||
<div class="form-group">
|
||
<label for="email">E-Mail-Adresse</label>
|
||
<input class="form-control" id="email" type="email" placeholder="name@beispiel.de">
|
||
<p class="form-hint">Wir schicken dir einen sicheren Anmeldelink. Er ist 15 Minuten gültig.</p>
|
||
</div>
|
||
<button class="btn btn-primary btn-full"><span class="material-icons">mail</span>Anmeldelink senden</button>
|
||
</div></div>
|
||
|
||
<div class="alert alert-success">
|
||
<span class="material-icons">check_circle</span>
|
||
<div><strong>Link gesendet.</strong> Prüfe dein Postfach unter name@beispiel.de und öffne den Link auf diesem Gerät.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= ONBOARDING: NAME ================= -->
|
||
<section class="screen" id="panel-onboard">
|
||
<header class="app-header app-header--simple">
|
||
<label class="back-btn" for="scr-login"><span class="material-icons">arrow_back</span></label>
|
||
<div><h1>Profil einrichten</h1><p class="header-meta">Schritt 1 von 2</p></div>
|
||
</header>
|
||
<div class="content">
|
||
<div class="progress-dot-row">
|
||
<div class="progress-dot progress-dot--done"></div>
|
||
<div class="progress-dot"></div>
|
||
</div>
|
||
<div class="card"><div class="card-body">
|
||
<h1 class="card-title" style="font-size:1.05rem;">Wie sollen wir dich nennen?</h1>
|
||
<p class="card-text" style="margin-bottom:1rem;">Dieser Name ist für dein Team sichtbar.</p>
|
||
|
||
<p class="form-group" style="margin-bottom:.6rem;"><label>Profilbild wählen (optional)</label></p>
|
||
<div class="avatar-picker">
|
||
<button class="avatar-option avatar-option--selected"><span class="avatar avatar--a">A</span>Avatar A</button>
|
||
<button class="avatar-option"><span class="avatar avatar--b">B</span>Avatar B</button>
|
||
<button class="avatar-option"><span class="avatar avatar--c">C</span>Avatar C</button>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-top:1rem;">
|
||
<label for="dname">Anzeigename</label>
|
||
<input class="form-control" id="dname" type="text" placeholder="z. B. Alex" value="Alex">
|
||
</div>
|
||
<button class="btn btn-primary btn-full">Weiter</button>
|
||
</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= TEAM AUSWÄHLEN ================= -->
|
||
<section class="screen" id="panel-teams">
|
||
<header class="app-header app-header--simple">
|
||
<label class="back-btn" for="scr-onboard"><span class="material-icons">arrow_back</span></label>
|
||
<div><h1>Team auswählen</h1><p class="header-meta">Schritt 2 von 2</p></div>
|
||
</header>
|
||
<div class="content">
|
||
<p class="card-text">Du bist bei mehreren Teams eingetragen. Wähle dein Team für diese Sitzung — du kannst später jederzeit wechseln.</p>
|
||
|
||
<div>
|
||
<div class="team-option team-option--selected">
|
||
<div class="avatar avatar--a" style="border-radius:var(--r-sm);">SN</div>
|
||
<div class="team-option__body">
|
||
<div class="team-option__title">Streetwork Nord</div>
|
||
<div class="team-option__meta">17 Mitglieder</div>
|
||
</div>
|
||
<span class="material-icons team-option__check">check_circle</span>
|
||
</div>
|
||
<div class="team-option">
|
||
<div class="avatar avatar--b" style="border-radius:var(--r-sm);">CB</div>
|
||
<div class="team-option__body">
|
||
<div class="team-option__title">Café Bach Ehrenamt</div>
|
||
<div class="team-option__meta">9 Mitglieder</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<label class="btn btn-primary btn-full" for="scr-start" style="margin-top:.3rem;">Bestätigen</label>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= START / MITGLIEDER-DASHBOARD ================= -->
|
||
<section class="screen" id="panel-start">
|
||
<header class="app-header">
|
||
<div class="app-header--brand">
|
||
<div class="wordmark"><strong>CHECKPOINT</strong><span>Ehrenamt</span></div>
|
||
<label class="header-bell" for="scr-notif">
|
||
<span class="material-icons">notifications</span>
|
||
<span class="n-badge">3</span>
|
||
</label>
|
||
</div>
|
||
<div class="greeting">
|
||
<h1>Guten Morgen, Alex</h1>
|
||
<p>Streetwork Nord</p>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div class="card card--urgent"><div class="card-body">
|
||
<div class="card-eyebrow eyebrow--urgent"><span class="material-icons">warning</span>Dringend</div>
|
||
<p class="card-text">Für den Einsatz heute Abend (18–22 Uhr, Ebertplatz) wird noch ein <strong>Springer</strong> gesucht.</p>
|
||
<div class="card-footer-row">
|
||
<button class="btn btn-coral btn-sm"><span class="material-icons">bolt</span>Übernehmen</button>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div class="card"><div class="card-body">
|
||
<div class="card-eyebrow eyebrow--upcoming"><span class="material-icons">event</span>Nächste Einsätze</div>
|
||
<div class="mini-shift">
|
||
<div class="mini-shift__icon"><span class="material-icons">event</span></div>
|
||
<div class="mini-shift__body">
|
||
<div class="mini-shift__title">Streetwork Abend</div>
|
||
<div class="mini-shift__meta">Mi, 20. Aug · 18:00–22:00 · Ebertplatz</div>
|
||
</div>
|
||
<span class="badge badge-teal">Zugeteilt</span>
|
||
</div>
|
||
<div class="mini-shift">
|
||
<div class="mini-shift__icon"><span class="material-icons">event</span></div>
|
||
<div class="mini-shift__body">
|
||
<div class="mini-shift__title">Infostand Wochenmarkt</div>
|
||
<div class="mini-shift__meta">Sa, 23. Aug · 09:00–13:00 · Rudolfplatz</div>
|
||
</div>
|
||
<span class="badge badge-muted">Springer</span>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div class="card"><div class="card-body">
|
||
<div class="card-eyebrow eyebrow--action"><span class="material-icons">schedule</span>Verfügbarkeit</div>
|
||
<p class="card-text">4 Termine noch offen — bitte melde dich zurück.</p>
|
||
<div class="card-footer-row">
|
||
<label class="btn btn-ghost btn-sm" for="scr-sched"><span class="material-icons">edit_calendar</span>Jetzt beantworten</label>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div class="card"><div class="card-body">
|
||
<div class="card-eyebrow eyebrow--info"><span class="material-icons">chat</span>Teamchat</div>
|
||
<p class="card-text">3 neue Nachrichten in #ankündigungen</p>
|
||
<div class="card-footer-row">
|
||
<label class="btn btn-ghost btn-sm" for="scr-chat"><span class="material-icons">chat</span>Öffnen</label>
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
|
||
<nav class="bottom-nav">
|
||
<label class="nav-item nav-item--active" for="scr-start"><span class="material-icons">home</span>Start</label>
|
||
<label class="nav-item" for="scr-team"><span class="material-icons">groups</span>Team</label>
|
||
<label class="nav-item" for="scr-profile"><span class="material-icons">person</span>Profil</label>
|
||
</nav>
|
||
</section>
|
||
|
||
<!-- ================= TEAM-DASHBOARD ================= -->
|
||
<section class="screen" id="panel-team">
|
||
<header class="app-header app-header--simple">
|
||
<div>
|
||
<h1>Streetwork Nord</h1>
|
||
<p class="slug-note">/team/streetwork-nord/</p>
|
||
</div>
|
||
<button class="btn btn-ghost btn-sm" style="margin-left:auto;background:rgba(255,255,255,.14);border-color:transparent;color:#fff;"><span class="material-icons">swap_horiz</span>Wechseln</button>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div class="card"><div class="card-body">
|
||
<p class="card-text">Aufsuchende Sozialarbeit im Kölner Norden. Schwerpunkte: Streetwork, Infostände, niedrigschwellige Beratung.</p>
|
||
<div class="card-footer-row">
|
||
<span class="badge badge-muted"><span class="material-icons">groups</span>17 Mitglieder</span>
|
||
<span class="badge badge-teal">Team-Verwaltung: Jana K., Sam R.</span>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div class="card"><div class="card-body" style="padding-bottom:.3rem;">
|
||
<label class="list-row" for="scr-members">
|
||
<span class="material-icons">groups</span>
|
||
<span class="list-row__label">Mitgliederverzeichnis</span>
|
||
<span class="material-icons list-row__chevron">chevron_right</span>
|
||
</label>
|
||
<label class="list-row" for="scr-sched">
|
||
<span class="material-icons">schedule</span>
|
||
<span class="list-row__label">Verfügbarkeit & Einsätze</span>
|
||
<span class="material-icons list-row__chevron">chevron_right</span>
|
||
</label>
|
||
<label class="list-row" for="scr-docs">
|
||
<span class="material-icons">description</span>
|
||
<span class="list-row__label">Dokumente</span>
|
||
<span class="material-icons list-row__chevron">chevron_right</span>
|
||
</label>
|
||
<label class="list-row" for="scr-chat">
|
||
<span class="material-icons">chat</span>
|
||
<span class="list-row__label">Teamchat</span>
|
||
<span class="material-icons list-row__chevron">chevron_right</span>
|
||
</label>
|
||
</div></div>
|
||
|
||
<label class="btn btn-ghost btn-full" for="scr-admin"><span class="material-icons">admin_panel_settings</span>Team-Verwaltung öffnen</label>
|
||
</div>
|
||
|
||
<nav class="bottom-nav">
|
||
<label class="nav-item" for="scr-start"><span class="material-icons">home</span>Start</label>
|
||
<label class="nav-item nav-item--active" for="scr-team"><span class="material-icons">groups</span>Team</label>
|
||
<label class="nav-item" for="scr-profile"><span class="material-icons">person</span>Profil</label>
|
||
</nav>
|
||
</section>
|
||
|
||
<!-- ================= MITGLIEDERVERZEICHNIS ================= -->
|
||
<section class="screen" id="panel-members">
|
||
<header class="app-header app-header--simple">
|
||
<label class="back-btn" for="scr-team"><span class="material-icons">arrow_back</span></label>
|
||
<h1>Mitglieder</h1>
|
||
<span class="header-count">17</span>
|
||
</header>
|
||
<div class="content">
|
||
<div class="alert alert-muted">
|
||
<span class="material-icons">lock</span>
|
||
<div>Anmelde-E-Mail und Geräte sind nur für dich selbst sichtbar.</div>
|
||
</div>
|
||
|
||
<div class="card"><div class="card-body" style="padding-bottom:.3rem;">
|
||
<div class="list-row" style="cursor:default;">
|
||
<span class="avatar avatar--b">JK</span>
|
||
<span class="list-row__label" style="font-weight:700;">Jana K.</span>
|
||
<span class="badge badge-teal">Team-Verwaltung</span>
|
||
</div>
|
||
<div class="list-row" style="cursor:default;">
|
||
<span class="avatar avatar--c">SR</span>
|
||
<span class="list-row__label" style="font-weight:700;">Sam R.</span>
|
||
<span class="badge badge-teal">Team-Verwaltung</span>
|
||
</div>
|
||
<div class="list-row" style="cursor:default;">
|
||
<span class="avatar avatar--a">A</span>
|
||
<div class="list-row__body" style="flex:1;">
|
||
<div style="font-weight:700;">Alex <span style="color:var(--muted);font-weight:500;">(du)</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="list-row" style="cursor:default;">
|
||
<span class="avatar avatar--a">MB</span>
|
||
<div style="flex:1;">
|
||
<div style="font-weight:700;">Mira B.</div>
|
||
<div style="font-size:.72rem;color:var(--muted);">Erreichbar: Signal · Tel.</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-row" style="cursor:default;">
|
||
<span class="avatar avatar--b">TW</span>
|
||
<span class="list-row__label" style="font-weight:700;">Timo W.</span>
|
||
</div>
|
||
<div class="list-row" style="cursor:default;">
|
||
<span class="avatar avatar--c">LP</span>
|
||
<span class="list-row__label" style="font-weight:700;">Lina P.</span>
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= VERFÜGBARKEIT / SCHEDULING ================= -->
|
||
<section class="screen" id="panel-sched">
|
||
<header class="app-header app-header--simple" style="flex-direction:column;align-items:stretch;">
|
||
<div style="display:flex;align-items:center;gap:.6rem;">
|
||
<label class="back-btn" for="scr-team"><span class="material-icons">arrow_back</span></label>
|
||
<h1>Verfügbarkeit</h1>
|
||
</div>
|
||
<div class="chip-row" style="margin-top:.7rem;">
|
||
<span class="chip chip--active">KW 34–37</span>
|
||
<span class="badge badge-teal" style="align-self:center;">Verfügbarkeit offen</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div class="card card--urgent"><div class="card-body">
|
||
<div class="card-footer-row" style="margin-top:0;justify-content:space-between;">
|
||
<div>
|
||
<div class="card-title" style="margin-bottom:.15rem;">Streetwork Abend</div>
|
||
<div class="mini-shift__meta">Fr, 18. Aug · 18:00–22:00 · Ebertplatz</div>
|
||
</div>
|
||
<span class="badge badge-coral"><span class="material-icons">priority_high</span><24 Std.</span>
|
||
</div>
|
||
<p class="card-text" style="margin-top:.5rem;">Haupt: 2/2 besetzt · Springer: 0/1</p>
|
||
<div class="card-footer-row">
|
||
<button class="btn btn-primary btn-sm"><span class="material-icons">bolt</span>Position übernehmen</button>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div class="card"><div class="card-body">
|
||
<div class="card-title" style="margin-bottom:.15rem;">Infostand Wochenmarkt</div>
|
||
<div class="mini-shift__meta">Sa, 23. Aug · 09:00–13:00 · Rudolfplatz</div>
|
||
<p class="card-text" style="margin-top:.5rem;">Haupt: 1/1 besetzt · Springer: 0/1</p>
|
||
<p class="form-hint" style="margin:.4rem 0 .6rem;">Deine Rückmeldung:</p>
|
||
<div class="card-footer-row" style="margin-top:0;">
|
||
<button class="btn btn-ghost btn-ghost--on btn-sm"><span class="material-icons">check</span>Verfügbar</button>
|
||
<button class="btn btn-ghost btn-sm"><span class="material-icons">close</span>Nicht verfügbar</button>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div class="card"><div class="card-body">
|
||
<div class="card-title" style="margin-bottom:.15rem;">Beratungsabend</div>
|
||
<div class="mini-shift__meta">Di, 26. Aug · 17:00–20:00 · Beratungsstelle</div>
|
||
<p class="form-hint" style="margin:.5rem 0 .6rem;">Noch nicht beantwortet</p>
|
||
<div class="card-footer-row" style="margin-top:0;">
|
||
<button class="btn btn-ghost btn-sm"><span class="material-icons">check</span>Verfügbar</button>
|
||
<button class="btn btn-ghost btn-ghost--off btn-sm"><span class="material-icons">close</span>Nicht verfügbar</button>
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= DOKUMENTE ================= -->
|
||
<section class="screen" id="panel-docs">
|
||
<header class="app-header app-header--simple">
|
||
<label class="back-btn" for="scr-team"><span class="material-icons">arrow_back</span></label>
|
||
<h1>Dokumente</h1>
|
||
</header>
|
||
<div class="content">
|
||
<div class="tabbar2"><span class="active">Aktuell</span><span>Archiv</span></div>
|
||
|
||
<div class="card"><div class="card-body">
|
||
<div class="doc-row">
|
||
<div class="doc-row__top">
|
||
<div class="doc-row__icon"><span class="material-icons">picture_as_pdf</span></div>
|
||
<div style="flex:1;">
|
||
<div class="doc-row__title">Einsatzplan August</div>
|
||
<div class="doc-row__meta">einsatzplan_august.pdf · 420 KB</div>
|
||
</div>
|
||
<span class="badge badge-teal">Freigegeben</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="doc-row">
|
||
<div class="doc-row__top">
|
||
<div class="doc-row__icon"><span class="material-icons">image</span></div>
|
||
<div style="flex:1;">
|
||
<div class="doc-row__title">Foto Infostand</div>
|
||
<div class="doc-row__meta">infostand.jpg · 2,1 MB</div>
|
||
</div>
|
||
<span class="badge badge-yellow">Wartet auf Freigabe</span>
|
||
</div>
|
||
<div class="doc-row__actions">
|
||
<span class="icon-btn icon-btn--teal"><span class="material-icons">check</span></span>
|
||
<span class="icon-btn icon-btn--coral"><span class="material-icons">close</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="doc-row">
|
||
<div class="doc-row__top">
|
||
<div class="doc-row__icon"><span class="material-icons">description</span></div>
|
||
<div style="flex:1;">
|
||
<div class="doc-row__title">Spesenformular (Entwurf)</div>
|
||
<div class="doc-row__meta">spesen.docx · 88 KB</div>
|
||
</div>
|
||
<span class="badge badge-coral">Abgelehnt</span>
|
||
</div>
|
||
<p class="doc-row__reason">Grund: Formular ist unvollständig ausgefüllt.</p>
|
||
</div>
|
||
</div></div>
|
||
|
||
<button class="btn btn-primary btn-full"><span class="material-icons">upload_file</span>Dokument hochladen</button>
|
||
<p class="form-hint">Erlaubt: PDF, Word, JPG, PNG, HEIC. Lade nur Fotos mit geklärten Rechten hoch.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= CHAT ================= -->
|
||
<section class="screen" id="panel-chat">
|
||
<header class="app-header app-header--simple" style="flex-direction:column;align-items:stretch;">
|
||
<div style="display:flex;align-items:center;gap:.6rem;">
|
||
<label class="back-btn" for="scr-team"><span class="material-icons">arrow_back</span></label>
|
||
<h1>Teamchat</h1>
|
||
</div>
|
||
<div class="chip-row" style="margin-top:.7rem;">
|
||
<span class="chip chip--active">Ankündigungen</span>
|
||
<span class="chip">Team</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="content chat-list">
|
||
<div class="msg msg--in">
|
||
<div class="msg-meta"><strong>Jana K.</strong> · Team-Verwaltung · 09:12</div>
|
||
<div class="msg-bubble msg-bubble--announcement">
|
||
Bitte denkt an die aktualisierte Einsatzplanung für KW 34. Rückmeldungen bis Mittwoch wären super.
|
||
</div>
|
||
<div class="msg-foot msg-foot--read"><span class="material-icons">done_all</span>Gelesen von 14/17</div>
|
||
</div>
|
||
|
||
<div class="channel-divider">Team</div>
|
||
|
||
<div class="msg msg--in">
|
||
<div class="msg-meta"><strong>Timo W.</strong> · 10:40</div>
|
||
<div class="msg-bubble">
|
||
Wer kann Freitag beim Infostand am Rudolfplatz aushelfen? <a class="msg-link">Details ↗ (externer Link)</a>
|
||
</div>
|
||
<div class="msg-foot"><span class="material-icons">done_all</span>Abgerufen</div>
|
||
</div>
|
||
|
||
<div class="msg msg--in">
|
||
<div class="msg-reply-ref">Antwort auf: „Wer kann Freitag beim Infostand …“</div>
|
||
<div class="msg-meta"><strong>Mira B.</strong> · 10:52</div>
|
||
<div class="msg-bubble">
|
||
Ich kann ab 10 Uhr. <span class="msg-edited">(bearbeitet)</span>
|
||
</div>
|
||
<div class="msg-foot"><span class="material-icons">done</span>Gespeichert</div>
|
||
</div>
|
||
|
||
<div class="msg msg--in">
|
||
<div class="msg-meta">11:05</div>
|
||
<div class="msg-bubble msg-bubble--deleted">Nachricht wurde gelöscht</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-input-bar">
|
||
<input class="form-control" type="text" placeholder="Nachricht schreiben …">
|
||
<button class="send-btn"><span class="material-icons">send</span></button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= PROFIL ================= -->
|
||
<section class="screen" id="panel-profile">
|
||
<header class="app-header app-header--simple">
|
||
<h1>Profil</h1>
|
||
</header>
|
||
<div class="content">
|
||
<div class="card"><div class="card-body" style="display:flex;align-items:center;gap:.8rem;">
|
||
<span class="avatar avatar--a" style="width:52px;height:52px;font-size:1.1rem;">A</span>
|
||
<div style="flex:1;">
|
||
<div style="font-weight:800;font-size:1rem;">Alex</div>
|
||
<div style="font-size:.76rem;color:var(--muted);">Streetwork Nord</div>
|
||
</div>
|
||
<span class="icon-btn"><span class="material-icons">edit</span></span>
|
||
</div></div>
|
||
|
||
<p class="section-label">Team-Kontakt (freiwillig)</p>
|
||
<div class="card"><div class="card-body">
|
||
<div class="toggle-row">
|
||
<div>
|
||
<div class="toggle-row__label">Kontaktdaten mit Team teilen</div>
|
||
<div class="toggle-row__hint">Standardmäßig ausgeschaltet.</div>
|
||
</div>
|
||
<div class="toggle"></div>
|
||
</div>
|
||
<div class="form-group" style="margin-top:1rem;">
|
||
<label>Telefonnummer</label>
|
||
<input class="form-control" disabled placeholder="Wird geteilt, sobald aktiviert">
|
||
</div>
|
||
<div class="form-group" style="margin-bottom:0;">
|
||
<label>Kontakt-Notiz</label>
|
||
<textarea class="form-control" disabled placeholder="z. B. „am liebsten per Signal“"></textarea>
|
||
</div>
|
||
</div></div>
|
||
|
||
<p class="section-label">Sicherheit</p>
|
||
<div class="card"><div class="card-body">
|
||
<div class="alert alert-muted" style="margin-bottom:.9rem;">
|
||
<span class="material-icons">lock</span>
|
||
<div>Deine Anmelde-E-Mail ist für andere Mitglieder nicht sichtbar.</div>
|
||
</div>
|
||
<div class="list-row" style="cursor:default;">
|
||
<span class="material-icons">smartphone</span>
|
||
<div style="flex:1;">
|
||
<div style="font-weight:700;">iPhone — Köln</div>
|
||
<div style="font-size:.72rem;color:var(--muted);">Zuletzt aktiv: heute</div>
|
||
</div>
|
||
<button class="btn btn-ghost btn-sm">Abmelden</button>
|
||
</div>
|
||
<div class="list-row" style="cursor:default;">
|
||
<span class="material-icons">laptop_mac</span>
|
||
<div style="flex:1;">
|
||
<div style="font-weight:700;">MacBook — Köln</div>
|
||
<div style="font-size:.72rem;color:var(--muted);">Zuletzt aktiv: vor 3 Tagen</div>
|
||
</div>
|
||
<button class="btn btn-ghost btn-sm">Abmelden</button>
|
||
</div>
|
||
</div></div>
|
||
|
||
<button class="btn btn-danger btn-full"><span class="material-icons">logout</span>Abmelden</button>
|
||
</div>
|
||
|
||
<nav class="bottom-nav">
|
||
<label class="nav-item" for="scr-start"><span class="material-icons">home</span>Start</label>
|
||
<label class="nav-item" for="scr-team"><span class="material-icons">groups</span>Team</label>
|
||
<label class="nav-item nav-item--active" for="scr-profile"><span class="material-icons">person</span>Profil</label>
|
||
</nav>
|
||
</section>
|
||
|
||
<!-- ================= BENACHRICHTIGUNGEN ================= -->
|
||
<section class="screen" id="panel-notif">
|
||
<header class="app-header app-header--simple">
|
||
<label class="back-btn" for="scr-start"><span class="material-icons">arrow_back</span></label>
|
||
<h1>Benachrichtigungen</h1>
|
||
</header>
|
||
<div class="content">
|
||
<div class="card"><div class="card-body" style="padding-bottom:.3rem;">
|
||
|
||
<div class="notif-row">
|
||
<div class="notif-icon notif-icon--urgent"><span class="material-icons">priority_high</span></div>
|
||
<div class="notif-body">
|
||
<div class="notif-title">Offener Dienst in 18 Std. — Streetwork Abend</div>
|
||
<div class="notif-time">Dringend · vor 20 Min.</div>
|
||
</div>
|
||
<span class="badge badge-coral">Dringend</span>
|
||
</div>
|
||
|
||
<div class="notif-row">
|
||
<div class="notif-icon notif-icon--important"><span class="material-icons">event_available</span></div>
|
||
<div class="notif-body">
|
||
<div class="notif-title">Plan für KW 34 veröffentlicht</div>
|
||
<div class="notif-time">Wichtig · heute, 08:03</div>
|
||
</div>
|
||
<span class="badge badge-teal">Wichtig</span>
|
||
</div>
|
||
|
||
<div class="notif-row">
|
||
<div class="notif-icon notif-icon--important"><span class="material-icons">sync_alt</span></div>
|
||
<div class="notif-body">
|
||
<div class="notif-title">Deine Einteilung wurde geändert</div>
|
||
<div class="notif-time">Wichtig · gestern, 17:20</div>
|
||
</div>
|
||
<span class="badge badge-teal">Wichtig</span>
|
||
</div>
|
||
|
||
<div class="notif-row">
|
||
<div class="notif-icon notif-icon--normal"><span class="material-icons">schedule</span></div>
|
||
<div class="notif-body">
|
||
<div class="notif-title">Verfügbarkeit für KW 38 jetzt offen</div>
|
||
<div class="notif-time">gestern, 09:00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notif-row">
|
||
<div class="notif-icon notif-icon--normal"><span class="material-icons">mark_email_unread</span></div>
|
||
<div class="notif-body">
|
||
<div class="notif-title">Rückmeldung unvollständig — 2 Einsätze offen</div>
|
||
<div class="notif-time">Mo, 11. Aug</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= TEAM-VERWALTUNG ================= -->
|
||
<section class="screen" id="panel-admin">
|
||
<header class="app-header app-header--simple">
|
||
<label class="back-btn" for="scr-team"><span class="material-icons">arrow_back</span></label>
|
||
<div><h1>Team-Verwaltung</h1><p class="header-meta slug-note">/team/streetwork-nord/manage/</p></div>
|
||
</header>
|
||
<div class="content">
|
||
<div class="stat-grid">
|
||
<div class="stat-card stat--coral">
|
||
<span class="material-icons">warning</span>
|
||
<div class="stat-card__value">2</div>
|
||
<div class="stat-card__label">Unterbesetzte Einsätze</div>
|
||
</div>
|
||
<div class="stat-card stat--yellow">
|
||
<span class="material-icons">schedule</span>
|
||
<div class="stat-card__value">5</div>
|
||
<div class="stat-card__label">Fehlende Verfügbarkeiten</div>
|
||
</div>
|
||
<div class="stat-card stat--blue">
|
||
<span class="material-icons">description</span>
|
||
<div class="stat-card__value">3</div>
|
||
<div class="stat-card__label">Dokumentfreigaben wartend</div>
|
||
</div>
|
||
<div class="stat-card stat--muted">
|
||
<span class="material-icons">mail</span>
|
||
<div class="stat-card__value">1</div>
|
||
<div class="stat-card__label">Offene Einladung</div>
|
||
</div>
|
||
<div class="stat-card stat--coral" style="grid-column:1 / -1;">
|
||
<span class="material-icons">person_off</span>
|
||
<div class="stat-card__value">4</div>
|
||
<div class="stat-card__label">Unbesetzte Positionen</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="section-label">Nächste Schritte</p>
|
||
<div class="card"><div class="card-body" style="display:flex;flex-direction:column;gap:.55rem;">
|
||
<button class="btn btn-ghost btn-full" style="justify-content:flex-start;"><span class="material-icons">bolt</span>Springer für Fr. 18:00 suchen</button>
|
||
<button class="btn btn-ghost btn-full" style="justify-content:flex-start;"><span class="material-icons">notifications_active</span>Erinnerung an 5 offene Verfügbarkeiten</button>
|
||
<button class="btn btn-ghost btn-full" style="justify-content:flex-start;"><span class="material-icons">fact_check</span>Dokumente prüfen (3)</button>
|
||
</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|