Add two German specifications under docs/plans for a later goal run: ui-refresh.md (Werkator tokens, mobile shell, Today, Work, Habits) and auth-flow-refresh.md (guided invitation and email-code sign-in). Both reference standalone HTML mockups under docs/plans/mockups. Register the work packages as open werkbaum nodes and point the README to docs/plans. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
329 lines
50 KiB
HTML
329 lines
50 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Werkjournal Anmelde-Entwürfe</title>
|
||
<style>:root{--wj-bg:#ffffff;--wj-panel:#fafafa;--wj-panel-2:#f4f5f5;--wj-line:#e4e7e7;--wj-line-2:#d1d6d5;--wj-text:#141616;--wj-text-2:#3e4645;--wj-muted:#6e7c7a;--wj-ghost:#9ea9a7;--wj-accent:#0e6b7d;--wj-accent-2:#0a5262;--wj-accent-soft:#e3f0f3;--wj-accent-soft-2:#c6e0e6;--wj-clay:#b0563b;--wj-clay-soft:#f6e9e4;--wj-amber:#b8860b;--wj-amber-soft:#f9f0d2;--wj-crit:#b3261e;--wj-crit-soft:#f8e2df;--wj-shadow:0 1px 2px rgb(20 22 22/.06),0 4px 16px rgb(20 22 22/.06);--wj-on-accent:#ffffff;--doc-bg:#eef0f0;--frame:#1d2221;color-scheme:light}
|
||
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wj-bg:#242928;--wj-panel:#2a302f;--wj-panel-2:#313837;--wj-line:#3e4645;--wj-line-2:#545f5d;--wj-text:#f4f5f5;--wj-text-2:#d1d6d5;--wj-muted:#9ea9a7;--wj-ghost:#6e7c7a;--wj-accent:#63bccb;--wj-accent-2:#8ed0db;--wj-accent-soft:#1f3b41;--wj-accent-soft-2:#27505a;--wj-clay:#e09070;--wj-clay-soft:#3e2a22;--wj-amber:#e3b341;--wj-amber-soft:#3d3418;--wj-crit:#ef6f66;--wj-crit-soft:#45201d;--wj-shadow:0 2px 6px rgb(0 0 0/.25);--wj-on-accent:#102328;--doc-bg:#1a1e1d;--frame:#0c0f0e;color-scheme:dark}}
|
||
:root[data-theme="dark"]{--wj-bg:#242928;--wj-panel:#2a302f;--wj-panel-2:#313837;--wj-line:#3e4645;--wj-line-2:#545f5d;--wj-text:#f4f5f5;--wj-text-2:#d1d6d5;--wj-muted:#9ea9a7;--wj-ghost:#6e7c7a;--wj-accent:#63bccb;--wj-accent-2:#8ed0db;--wj-accent-soft:#1f3b41;--wj-accent-soft-2:#27505a;--wj-clay:#e09070;--wj-clay-soft:#3e2a22;--wj-amber:#e3b341;--wj-amber-soft:#3d3418;--wj-crit:#ef6f66;--wj-crit-soft:#45201d;--wj-shadow:0 2px 6px rgb(0 0 0/.25);--wj-on-accent:#102328;--doc-bg:#1a1e1d;--frame:#0c0f0e;color-scheme:dark}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:var(--doc-bg);color:var(--wj-text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
|
||
svg{display:block}
|
||
.doc{max-width:1500px;margin:0 auto;padding:28px 24px 64px}
|
||
.doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:8px}
|
||
.doc-head h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
|
||
.doc-head p{margin:0;color:var(--wj-muted);max-width:64ch}
|
||
.theme{border:1px solid var(--wj-line-2);background:var(--wj-panel);color:var(--wj-text);border-radius:999px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center;flex-shrink:0}
|
||
.theme:focus-visible{outline:2px solid var(--wj-accent);outline-offset:2px}
|
||
.legend{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 28px}
|
||
.legend span{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--wj-text-2);padding:4px 10px 4px 4px;border:1px solid var(--wj-line);border-radius:999px;background:var(--wj-panel)}
|
||
.legend i{width:18px;height:18px;border-radius:50%;border:1px solid rgb(0 0 0/.08)}
|
||
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--wj-muted);margin:36px 0 14px;font-weight:600}
|
||
.row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
|
||
.fig{display:grid;gap:10px}
|
||
.fig figcaption{font-size:13px;color:var(--wj-text-2);max-width:390px}
|
||
.fig figcaption b{display:block;color:var(--wj-text);font-weight:600;margin-bottom:2px}
|
||
.phone{width:390px;height:812px;border-radius:38px;background:var(--frame);padding:10px;box-shadow:0 20px 50px rgb(0 0 0/.25)}
|
||
.phone>.scr{position:relative;height:100%;border-radius:30px;background:var(--wj-bg);overflow:hidden;display:flex;flex-direction:column}
|
||
.desk{width:100%;max-width:1180px;height:760px;border-radius:14px;background:var(--frame);padding:8px;box-shadow:0 20px 50px rgb(0 0 0/.25)}
|
||
.desk>.scr{height:100%;border-radius:8px;background:var(--wj-bg);overflow:hidden;display:flex;flex-direction:column}
|
||
.status{height:22px;display:flex;justify-content:space-between;padding:4px 22px 0;font-size:11px;font-weight:600;color:var(--wj-text-2)}
|
||
.bar{height:56px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--wj-panel);border-bottom:1px solid var(--wj-line)}
|
||
.bar .brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--wj-text)}
|
||
.logo{width:28px;height:28px;border-radius:8px;background:var(--wj-accent);display:grid;place-items:center;color:var(--wj-on-accent)}
|
||
.bar .sp{flex:1}
|
||
.bar nav{display:flex;gap:22px;font-size:14px;color:var(--wj-muted)}
|
||
.bar nav .on{color:var(--wj-accent);font-weight:600}
|
||
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--wj-accent-soft);color:var(--wj-accent);white-space:nowrap}
|
||
.pill.n{background:var(--wj-panel-2);color:var(--wj-text-2)}
|
||
.pill.c{background:var(--wj-clay-soft);color:var(--wj-clay)}
|
||
.pill.a{background:var(--wj-amber-soft);color:var(--wj-amber)}
|
||
.ib{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--wj-text-2);background:transparent}
|
||
.content{flex:1;overflow:auto;padding:16px 16px 110px}
|
||
.desk .content{padding:32px 40px 40px;max-width:1100px;margin:0 auto;width:100%}
|
||
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--wj-muted);font-weight:600}
|
||
.title{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:2px 0 0;line-height:1.2}
|
||
.desk .title{font-size:32px}
|
||
.head{margin-bottom:16px}
|
||
.card{background:var(--wj-panel);border:1px solid var(--wj-line);border-radius:14px;padding:16px}
|
||
.desk .card{padding:20px}
|
||
.card h3{font-size:15px;font-weight:600;margin:0;color:var(--wj-text)}
|
||
.ct{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
||
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:6px}
|
||
.big{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--wj-accent);font-variant-numeric:tabular-nums}
|
||
.big small{font-size:18px;color:var(--wj-muted);font-weight:500;margin-left:4px}
|
||
.desk .big{font-size:56px}
|
||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--wj-accent);color:var(--wj-on-accent);font-weight:600;font-size:15px;white-space:nowrap}
|
||
.btn.sq{border-radius:10px}
|
||
.btn.q{background:transparent;color:var(--wj-text-2);border:1px solid var(--wj-line-2)}
|
||
.btn.g{background:transparent;color:var(--wj-text-2)}
|
||
.btn.dis{background:var(--wj-panel-2);color:var(--wj-ghost)}
|
||
.btn.full{width:100%}
|
||
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
|
||
.kpi .l{font-size:12px;color:var(--wj-muted)}
|
||
.kpi .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--wj-text)}
|
||
.track{height:4px;border-radius:999px;background:var(--wj-accent-soft);margin-top:8px;overflow:hidden}
|
||
.track i{display:block;height:100%;width:var(--p,0);background:var(--wj-accent);border-radius:999px}
|
||
.list{margin-top:12px}
|
||
.entry{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 4px;border-bottom:1px solid var(--wj-line)}
|
||
.entry:last-child{border-bottom:0}
|
||
.entry .m{min-width:0}
|
||
.entry .m b{display:block;font-weight:600;font-size:15px}
|
||
.entry .m span{display:block;font-size:13px;color:var(--wj-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.entry .h{font-weight:600;color:var(--wj-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
|
||
.secline{display:flex;align-items:baseline;justify-content:space-between;margin:20px 0 10px}
|
||
.secline h3{font-size:15px;font-weight:600;margin:0}
|
||
.secline a{font-size:13px;color:var(--wj-accent);font-weight:600;text-decoration:none}
|
||
.habit{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--wj-panel);border:1px solid var(--wj-line);border-radius:14px;margin-bottom:10px}
|
||
.habit .m b{display:block;font-weight:600}
|
||
.habit .m span{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--wj-muted);margin-top:2px}
|
||
.habit .m span.warn{color:var(--wj-clay)}
|
||
.habit .m span.ok{color:var(--wj-accent)}
|
||
.step{display:flex;align-items:center;gap:6px}
|
||
.step .rb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--wj-line-2);color:var(--wj-text-2);background:transparent}
|
||
.step .rb.p{background:var(--wj-accent);color:var(--wj-on-accent);border-color:var(--wj-accent)}
|
||
.step .rb.s{width:40px;height:40px}
|
||
.step .n{min-width:36px;text-align:center;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
|
||
.tabs{position:absolute;left:0;right:0;bottom:0;height:78px;background:var(--wj-panel);border-top:1px solid var(--wj-line);display:flex;justify-content:space-around;align-items:flex-start;padding:8px 8px 0}
|
||
.tab{display:grid;justify-items:center;gap:3px;width:64px;font-size:11px;font-weight:600;color:var(--wj-muted)}
|
||
.tab i{width:48px;height:30px;border-radius:999px;display:grid;place-items:center}
|
||
.tab.on{color:var(--wj-accent)}
|
||
.tab.on i{background:var(--wj-accent-soft)}
|
||
.home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:5px;border-radius:999px;background:var(--wj-line-2)}
|
||
.daynav{display:flex;gap:8px;align-items:center;margin-top:12px}
|
||
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--wj-line-2);font-size:13px;font-weight:600;color:var(--wj-text-2);background:var(--wj-panel)}
|
||
.chip.on{background:var(--wj-accent-soft);color:var(--wj-accent);border-color:transparent}
|
||
.chip.dis{color:var(--wj-ghost);border-color:var(--wj-line)}
|
||
.toggle{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--wj-line);font-size:14px;color:var(--wj-text-2)}
|
||
.sw{width:44px;height:26px;border-radius:999px;background:var(--wj-line-2);position:relative}
|
||
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--wj-bg)}
|
||
.sw.on{background:var(--wj-accent)}.sw.on::after{left:21px}
|
||
.we{margin-top:10px}
|
||
.we .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
|
||
.we .top b{font-weight:600}
|
||
.we .top b span{color:var(--wj-muted);font-weight:500}
|
||
.we .top .h{font-weight:600;color:var(--wj-accent);font-size:20px;font-variant-numeric:tabular-nums}
|
||
.we p{margin:6px 0 0;color:var(--wj-text-2);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.we .foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--wj-line)}
|
||
.we .acts{display:flex;gap:2px}
|
||
.we .acts .ib{width:40px;height:40px}
|
||
.we.sel{outline:2px solid var(--wj-accent);outline-offset:2px}
|
||
.dim{position:absolute;inset:0;background:rgb(20 22 22/.42)}
|
||
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:92%;background:var(--wj-bg);border-radius:20px 20px 0 0;box-shadow:var(--wj-shadow);display:flex;flex-direction:column}
|
||
.sheet .grip{width:40px;height:4px;border-radius:999px;background:var(--wj-line-2);margin:10px auto 0}
|
||
.sheet .sh{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 20px}
|
||
.sheet .sh h3{font-size:18px;font-weight:600;margin:0}
|
||
.sheet .sb{padding:4px 20px 12px;overflow:auto;display:grid;gap:14px}
|
||
.sheet .sf{display:flex;gap:10px;padding:12px 20px 30px;border-top:1px solid var(--wj-line);background:var(--wj-panel)}
|
||
.sheet .sf .btn{flex:1}
|
||
.field{display:grid;gap:6px}
|
||
.field label{font-size:13px;font-weight:600;color:var(--wj-text-2)}
|
||
.field .in{height:46px;border:1px solid var(--wj-line-2);border-radius:10px;background:var(--wj-bg);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:15px;color:var(--wj-text)}
|
||
.field .in.ph{color:var(--wj-ghost)}
|
||
.field .in.focus{border-color:var(--wj-accent);box-shadow:0 0 0 2px var(--wj-accent-soft)}
|
||
.field .in.ro{background:var(--wj-panel-2);border-color:var(--wj-line)}
|
||
.field .ta{min-height:76px;align-items:flex-start;padding-top:10px}
|
||
.field .hint{font-size:12px;color:var(--wj-muted)}
|
||
.hours{display:flex;gap:6px;flex-wrap:wrap}
|
||
.hours .c{width:40px;height:40px;border-radius:10px;border:1px solid var(--wj-line-2);display:grid;place-items:center;font-weight:600;font-size:15px;color:var(--wj-text-2);font-variant-numeric:tabular-nums}
|
||
.hours .c.on{background:var(--wj-accent);color:var(--wj-on-accent);border-color:var(--wj-accent)}
|
||
.hours .c.more{width:auto;padding:0 12px;font-weight:500}
|
||
.note{border-radius:12px;padding:12px 14px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
|
||
.note.a{background:var(--wj-amber-soft);color:var(--wj-text)}
|
||
.note.a svg{color:var(--wj-amber);flex-shrink:0}
|
||
.note.e{background:var(--wj-crit-soft);color:var(--wj-text)}
|
||
.note.e svg{color:var(--wj-crit);flex-shrink:0}
|
||
.note.ok{background:var(--wj-accent-soft);color:var(--wj-text)}
|
||
.note.ok svg{color:var(--wj-accent);flex-shrink:0}
|
||
.note b{display:block;font-weight:600;margin-bottom:2px}
|
||
.note .x{display:inline-block;margin-top:6px;font-weight:600;color:var(--wj-accent);font-size:13px}
|
||
.pills{display:flex;gap:8px;overflow:auto;padding-bottom:4px;margin-top:14px}
|
||
.mh{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
|
||
.mh b{font-size:17px;font-weight:600}
|
||
.mk{display:flex;gap:18px;margin:10px 0 12px}
|
||
.mk div{font-size:12px;color:var(--wj-muted)}
|
||
.mk div b{display:block;font-size:18px;color:var(--wj-text);font-variant-numeric:tabular-nums}
|
||
.cal{display:grid;grid-template-columns:repeat(7,1fr) 28px;gap:5px}
|
||
.cal .wd{text-align:center;font-size:11px;color:var(--wj-muted);font-weight:600;padding-bottom:2px}
|
||
.cal .d{aspect-ratio:1;border-radius:10px;background:var(--wj-panel-2);position:relative;display:grid;place-items:center;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--wj-text)}
|
||
.cal .d::before{content:attr(data-n);position:absolute;top:4px;left:6px;font-size:10px;font-weight:500;color:var(--wj-muted)}
|
||
.cal .d.ok{background:var(--wj-accent-soft);color:var(--wj-accent)}
|
||
.cal .d.lo{background:var(--wj-clay-soft);color:var(--wj-clay)}
|
||
.cal .d.hi{background:var(--wj-amber-soft);color:var(--wj-amber)}
|
||
.cal .d.adj{opacity:.45}
|
||
.cal .d.fut{color:transparent;background:transparent;border:1px dashed var(--wj-line)}
|
||
.cal .d.today{outline:2px solid var(--wj-accent);outline-offset:-2px}
|
||
.cal .w{display:grid;place-items:center;font-size:12px;color:var(--wj-muted);font-variant-numeric:tabular-nums}
|
||
.cols{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start}
|
||
.drawer-head{padding:14px 16px;border-bottom:1px solid var(--wj-line)}
|
||
/* auth */
|
||
.auth{flex:1;overflow:auto;padding:28px 20px 24px;display:flex;flex-direction:column;gap:18px}
|
||
.auth .brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.02em}
|
||
.auth h1{font-size:26px;letter-spacing:-.02em;margin:10px 0 0;line-height:1.15;text-wrap:balance}
|
||
.auth p{margin:0;color:var(--wj-text-2)}
|
||
.auth .lnk{color:var(--wj-accent);font-weight:600;font-size:14px}
|
||
.auth .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--wj-line);display:grid;gap:10px;font-size:13px;color:var(--wj-muted)}
|
||
.auth .foot .tiny{font-size:12px}
|
||
.code{font:600 24px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;height:56px}
|
||
.addr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:var(--wj-panel-2);font-weight:600;overflow-wrap:anywhere}
|
||
.addr small{font-weight:600;color:var(--wj-accent);font-size:13px;white-space:nowrap}
|
||
.seg{display:flex;gap:8px}
|
||
.seg .chip{flex:1;justify-content:center;height:40px}
|
||
.acct{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--wj-line)}
|
||
.acct:last-child{border-bottom:0}
|
||
.acct .m b{display:block;font-weight:600;overflow-wrap:anywhere}
|
||
.acct .m span{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--wj-muted);margin-top:4px;flex-wrap:wrap}
|
||
.acct .acts{display:flex;gap:2px;flex-shrink:0}
|
||
.steps{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--wj-muted);font-weight:600;padding:0 20px}
|
||
.steps i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--wj-panel-2);color:var(--wj-text-2);font-style:normal}
|
||
.steps i.on{background:var(--wj-accent);color:var(--wj-on-accent)}
|
||
.steps s{text-decoration:none;flex:1;height:1px;background:var(--wj-line)}
|
||
.okmark{width:56px;height:56px;border-radius:50%;background:var(--wj-accent-soft);color:var(--wj-accent);display:grid;place-items:center}
|
||
details.lk{border:1px solid var(--wj-line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--wj-text-2)}
|
||
details.lk summary{cursor:pointer;font-weight:600}
|
||
details.lk .in{margin-top:10px;font-size:12px;overflow-wrap:anywhere;height:auto;padding:10px 12px}
|
||
@media (prefers-reduced-motion:no-preference){.theme{transition:background .15s ease-out}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
<div class="doc-head"><div><h1>Werkjournal Anmelde-Entwürfe</h1><p>Entwürfe zur Spezifikation docs/plans/auth-flow-refresh.md: Einladung durch den Admin, Einladung annehmen, Wiederanmeldung per Code, Einrichtung. Adressen und Codes sind Beispiele.</p></div><button class="theme" id="theme" type="button"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg><span id="theme-label">Auto</span></button></div>
|
||
<div class="legend"><span><i style="background:var(--wj-accent)"></i>accent #0e6b7d / #63bccb</span><span><i style="background:var(--wj-accent-soft)"></i>accent-soft</span><span><i style="background:var(--wj-clay)"></i>clay: Grenze verfehlt, Löschen</span><span><i style="background:var(--wj-amber)"></i>amber: Entwurf, Konflikt, Frei</span><span><i style="background:var(--wj-crit)"></i>crit: Fehler</span><span><i style="background:var(--wj-panel);border-color:var(--wj-line-2)"></i>panel / line</span></div>
|
||
<h2 class="sec">Anmeldung · 390 × 812</h2><div class="row"><figure class="fig"><figcaption><b>Anmelden (Standard)</b>Ein Feld, ein Button. Kein Auswahlfeld, kein Passwortfeld. Gast und Einrichtung sind sichtbar, aber nachrangig.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
|
||
<div class="auth"><div class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</div>
|
||
<div><h1>Anmelden</h1><p style="margin-top:8px">Wir schicken dir einen Einmalcode per E-Mail. Kein Passwort nötig.</p></div>
|
||
<div class="field"><label>E-Mail-Adresse</label><div class="in focus">mi@example.org</div></div>
|
||
<span class="btn sq full">Code senden</span>
|
||
<span class="lnk">Ich habe schon einen Code</span>
|
||
<div style="border-top:1px solid var(--wj-line);padding-top:16px;display:grid;gap:8px"><span class="btn sq q full"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>Als Gast ansehen</span><p style="font-size:12px;color:var(--wj-muted)">Gemeinsamer Gastbereich: Einträge sind für alle Gäste sichtbar.</p></div>
|
||
<div class="foot"><span>Kein Konto? Werkjournal ist privat; ein Administrator kann dich einladen.</span><span class="tiny"><span class="lnk" style="font-size:12px">Erste Einrichtung oder Wiederherstellung</span> · Impressum · Datenschutz</span></div>
|
||
</div></div></div></figure><figure class="fig"><figcaption><b>Einladung annehmen</b>Öffnen des Links aus der E-Mail. Die Einladung ist als eigene Ansicht erkennbar, die Adresse ist vorbelegt, ein Button. Token bleibt im Fragment und wird sofort aus der History entfernt.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
|
||
<div class="auth"><div class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</div>
|
||
<div><span class="pill"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> Einladung erkannt</span><h1>Du bist eingeladen</h1><p style="margin-top:8px">Werkjournal ist eine private Zeit- und Habit-Erfassung. Um dein Konto anzulegen, bestätigen wir deine E-Mail-Adresse.</p></div>
|
||
<div class="addr"><span>max@example.org</span><small>Andere Adresse</small></div>
|
||
<span class="btn sq full">Code an diese Adresse senden</span>
|
||
<p style="font-size:13px;color:var(--wj-muted)">Die Einladung gilt sieben Tage und kann einmal verwendet werden. Gib den Link nicht weiter.</p>
|
||
<span class="lnk">Ich habe schon einen Code</span>
|
||
<div class="foot"><span class="tiny">Impressum · Datenschutz</span></div>
|
||
</div></div></div></figure><figure class="fig"><figcaption><b>Code eingeben</b>Adresse wird angezeigt, nicht erneut abgefragt. Ein Feld für den Code im Format XXXXX-XXXXX, Einfügen aus Zwischenablage möglich. „Erneut senden“ mit 60-s-Countdown, Serverlimits bleiben die Grenze.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
|
||
<div class="auth"><div class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</div>
|
||
<div><h1>Code eingeben</h1><p style="margin-top:8px">Wir haben einen Code an <b style="color:var(--wj-text)">max@example.org</b> geschickt. <span class="lnk">Adresse ändern</span></p></div>
|
||
<div class="field"><label>Einmalcode</label><div class="in code focus">7KM3P-<span style="color:var(--wj-ghost)">XXXXX</span></div><span class="hint">Der Code gilt zwei Stunden. Die E-Mail kann einige Minuten brauchen; auch im Spamordner nachsehen.</span></div>
|
||
<span class="btn sq full dis">Anmelden</span>
|
||
<span style="font-size:14px;color:var(--wj-muted)">Code erneut senden <span style="font-variant-numeric:tabular-nums">(0:42)</span></span>
|
||
<div class="foot"><span class="tiny">Impressum · Datenschutz</span></div>
|
||
</div></div></div></figure></div>
|
||
<h2 class="sec">Fehler und Sonderweg</h2><div class="row"><figure class="fig"><figcaption><b>Code abgelehnt</b>Gleiche Ansicht, Fehlerkarte oben mit Ursache und Handlung. Adresse bleibt, Feld ist geleert und fokussiert. Mit Einladungskontext erscheint der Zusatz zur Sieben-Tage-Frist unabhängig vom Prüfergebnis.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
|
||
<div class="auth"><div class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</div>
|
||
<div><h1>Code eingeben</h1><p style="margin-top:8px">Wir haben einen Code an <b style="color:var(--wj-text)">max@example.org</b> geschickt. <span class="lnk">Adresse ändern</span></p></div>
|
||
<div class="note e"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 3 2 21h20zM12 10v5M12 18v.5"/></svg><div><b>Der Code ist ungültig oder abgelaufen.</b>Prüfe die Schreibweise oder fordere einen neuen Code an. Falls deine Einladung älter als sieben Tage ist, bitte um eine neue.</div></div>
|
||
<div class="field"><label>Einmalcode</label><div class="in code focus ph">XXXXX-XXXXX</div></div>
|
||
<span class="btn sq full dis">Anmelden</span>
|
||
<span class="lnk">Code erneut senden</span>
|
||
<div class="foot"><span class="tiny">Impressum · Datenschutz</span></div>
|
||
</div></div></div></figure><figure class="fig"><figcaption><b>Einrichtung / Wiederherstellung</b>Eigener Einstieg über /login?setup. Nur hier gibt es das Code-Feld vom Server; der Normalweg bleibt frei davon.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
|
||
<div class="auth"><div class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</div>
|
||
<div><span class="lnk"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></svg> Zur Anmeldung</span><h1 style="margin-top:14px">Einrichtung</h1><p style="margin-top:8px">Für den ersten Administrator oder eine Wiederherstellung. Du brauchst den Einrichtungscode vom Server.</p></div>
|
||
<div class="field"><label>E-Mail-Adresse</label><div class="in">mi@example.org</div></div>
|
||
<div class="field"><label>Einrichtungscode</label><div class="in">••••••••••••••••••••••••</div></div>
|
||
<span class="btn sq full">Code senden</span>
|
||
<div class="foot"><span class="tiny">Impressum · Datenschutz</span></div>
|
||
</div></div></div></figure><figure class="fig"><figcaption><b>Erster Login: Willkommenskarte</b>Nach der ersten Anmeldung eines neuen Kontos zeigt Heute einmalig eine schließbare Karte mit den zwei sinnvollen nächsten Schritten.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
|
||
<div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div>
|
||
<div class="content">
|
||
<div class="head"><div class="eyebrow">Freitag, 12. September 2026</div><h2 class="title">Heute</h2></div>
|
||
<div class="card" style="border-color:var(--wj-accent);margin-bottom:12px"><div class="ct"><h3>Willkommen bei Werkjournal</h3><span class="ib" style="width:36px;height:36px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div><p style="margin:6px 0 12px;color:var(--wj-text-2);font-size:14px">Dein Konto ist angelegt. Lege deine Kunden und Projekte an oder erfasse gleich deinen ersten Tag.</p><div style="display:flex;gap:8px;flex-wrap:wrap"><span class="btn" style="min-height:40px">Kunden & Projekte</span><span class="btn q" style="min-height:40px">Ersten Tag erfassen</span></div></div>
|
||
<div class="card"><div class="ct"><h3>Arbeit heute</h3></div><div class="hero"><div class="big">0<small>h</small></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
|
||
<div class="kpis"><div class="kpi"><div class="l">Diese Woche</div><div class="v">0 h</div><div class="track"></div></div><div class="kpi"><div class="l">September</div><div class="v">0 h</div><div class="track"></div></div></div></div>
|
||
<div class="list"><div class="entry"><div class="m"><span>Noch nichts erfasst</span></div><span class="lnk" style="color:var(--wj-accent);font-weight:600;font-size:13px">Jetzt erfassen</span></div></div>
|
||
<div class="secline"><h3>Habits</h3><a>Kalender</a></div>
|
||
<div class="habit"><div class="m"><b>Lesen</b><span class="warn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 3 2 21h20zM12 10v5M12 18v.5"/></svg> Noch 1 bis zum Tagesziel · Woche 0 / 5</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">0</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
|
||
</div><div class="tabs"><div class="tab on"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></i>Heute</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg></i>Arbeit</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></i>Habits</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></i>Mehr</div></div><div class="home"></div></div></div></figure></div>
|
||
<h2 class="sec">Admin: Einladen</h2><div class="row"><figure class="fig"><figcaption><b>Admin: Konten und Einladungen</b>Zwei Listen. Zustand und Sprache als Pills, Zeitpunkte lokal formatiert. Offene Einladungen: Neu einladen (Brief) und Widerrufen (×). Altbestand ohne Adresse bleibt lesbar.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
|
||
<div class="head"><div class="eyebrow">Verwaltung</div><h2 class="title">Konten</h2></div>
|
||
<div class="card">
|
||
<div class="acct"><div class="m"><b>mi@example.org</b><span><span class="pill">Admin</span>Aktiv</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>anna@example.org</b><span>Aktiv</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>tom@example.org</b><span><span class="pill c">Gesperrt</span></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
</div>
|
||
<div class="secline"><h3>Einladungen</h3><span class="btn" style="min-height:40px;padding:0 14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Einladen</span></div>
|
||
<div class="card">
|
||
<div class="acct"><div class="m"><b>max@example.org</b><span><span class="pill">Offen</span><span class="pill n">Deutsch</span>bis 19.09., 10:12</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>lea@example.org</b><span><span class="pill c">Abgelaufen</span><span class="pill n">English</span>erstellt 01.09.</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>anna@example.org</b><span><span class="pill n">Verwendet</span><span class="pill n">Deutsch</span>08.09.</span></div></div>
|
||
<div class="acct"><div class="m"><b style="color:var(--wj-muted)">ohne Adresse</b><span><span class="pill n">Verwendet</span>21.08.</span></div></div>
|
||
</div>
|
||
</div><div class="tabs"><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></i>Heute</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg></i>Arbeit</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></i>Habits</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></i>Mehr</div></div><div class="home"></div></div></div></figure><figure class="fig"><figcaption><b>Einladen · Schritt 1</b>Adresse und Sprache, eine Primäraktion. Erstellen und Versenden sind ein Klick; der Link ist kein sichtbarer Zwischenschritt mehr.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
|
||
<div class="head"><div class="eyebrow">Verwaltung</div><h2 class="title">Konten</h2></div>
|
||
<div class="card">
|
||
<div class="acct"><div class="m"><b>mi@example.org</b><span><span class="pill">Admin</span>Aktiv</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>anna@example.org</b><span>Aktiv</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>tom@example.org</b><span><span class="pill c">Gesperrt</span></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
</div>
|
||
<div class="secline"><h3>Einladungen</h3><span class="btn" style="min-height:40px;padding:0 14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Einladen</span></div>
|
||
<div class="card">
|
||
<div class="acct"><div class="m"><b>max@example.org</b><span><span class="pill">Offen</span><span class="pill n">Deutsch</span>bis 19.09., 10:12</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>lea@example.org</b><span><span class="pill c">Abgelaufen</span><span class="pill n">English</span>erstellt 01.09.</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>anna@example.org</b><span><span class="pill n">Verwendet</span><span class="pill n">Deutsch</span>08.09.</span></div></div>
|
||
<div class="acct"><div class="m"><b style="color:var(--wj-muted)">ohne Adresse</b><span><span class="pill n">Verwendet</span>21.08.</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="dim"></div>
|
||
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Einladen</h3><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div>
|
||
<div class="steps"><i class="on">1</i>Empfänger<s></s><i>2</i>Versand</div>
|
||
<div class="sb" style="margin-top:12px">
|
||
<div class="field"><label>Wen möchtest du einladen?</label><div class="in focus">max@example.org</div></div>
|
||
<div class="field"><label>Sprache der E-Mails</label><div class="seg"><span class="chip on">Deutsch</span><span class="chip">English</span></div></div>
|
||
<p style="margin:0;font-size:13px;color:var(--wj-muted)">Die Einladung gilt sieben Tage und kann einmal verwendet werden. Die E-Mail geht sofort raus.</p>
|
||
</div>
|
||
<div class="sf"><span class="btn sq"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>Einladung senden</span><span class="btn sq g" style="flex:0 0 auto">Abbrechen</span></div></div></div></div></figure><figure class="fig"><figcaption><b>Einladen · Schritt 2 (Erfolg)</b>Bestätigung mit Empfänger. Link nur auf Wunsch aufklappbar, Kopieren als Nebenaktion. „Fertig“ schließt, Liste ist aktualisiert.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
|
||
<div class="head"><div class="eyebrow">Verwaltung</div><h2 class="title">Konten</h2></div>
|
||
<div class="card">
|
||
<div class="acct"><div class="m"><b>mi@example.org</b><span><span class="pill">Admin</span>Aktiv</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>anna@example.org</b><span>Aktiv</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>tom@example.org</b><span><span class="pill c">Gesperrt</span></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
</div>
|
||
<div class="secline"><h3>Einladungen</h3><span class="btn" style="min-height:40px;padding:0 14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Einladen</span></div>
|
||
<div class="card">
|
||
<div class="acct"><div class="m"><b>max@example.org</b><span><span class="pill">Offen</span><span class="pill n">Deutsch</span>bis 19.09., 10:12</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>lea@example.org</b><span><span class="pill c">Abgelaufen</span><span class="pill n">English</span>erstellt 01.09.</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>anna@example.org</b><span><span class="pill n">Verwendet</span><span class="pill n">Deutsch</span>08.09.</span></div></div>
|
||
<div class="acct"><div class="m"><b style="color:var(--wj-muted)">ohne Adresse</b><span><span class="pill n">Verwendet</span>21.08.</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="dim"></div>
|
||
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Einladen</h3><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div>
|
||
<div class="steps"><i><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg></i>Empfänger<s></s><i class="on">2</i>Versand</div>
|
||
<div class="sb" style="margin-top:12px">
|
||
<div style="display:flex;gap:14px;align-items:center"><span class="okmark"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg></span><div><b style="font-size:17px">Einladung unterwegs</b><p style="margin:2px 0 0;color:var(--wj-text-2);font-size:14px">Die E-Mail an max@example.org wurde zum Versand übergeben. Die Zustellung kann einige Minuten dauern.</p></div></div>
|
||
<details class="lk"><summary>Link anzeigen</summary><div class="in ro">https://werkjournal.javagil.de/login#invitation=Qm9…&email=max%40example.org</div><span class="chip" style="margin-top:8px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a1 1 0 0 1 1-1h10"/></svg> Kopieren</span></details>
|
||
</div>
|
||
<div class="sf"><span class="btn sq">Fertig</span></div></div></div></div></figure><figure class="fig"><figcaption><b>Einladen · Schritt 2 (Fehlzweig)</b>Wenn sendmail die Übergabe ablehnt: Amber-Hinweis, Link aufgeklappt, „Erneut senden“ als Primäraktion. Dieselbe Einladung bleibt gültig.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
|
||
<div class="head"><div class="eyebrow">Verwaltung</div><h2 class="title">Konten</h2></div>
|
||
<div class="card">
|
||
<div class="acct"><div class="m"><b>mi@example.org</b><span><span class="pill">Admin</span>Aktiv</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>anna@example.org</b><span>Aktiv</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>tom@example.org</b><span><span class="pill c">Gesperrt</span></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
|
||
</div>
|
||
<div class="secline"><h3>Einladungen</h3><span class="btn" style="min-height:40px;padding:0 14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Einladen</span></div>
|
||
<div class="card">
|
||
<div class="acct"><div class="m"><b>max@example.org</b><span><span class="pill">Offen</span><span class="pill n">Deutsch</span>bis 19.09., 10:12</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>lea@example.org</b><span><span class="pill c">Abgelaufen</span><span class="pill n">English</span>erstellt 01.09.</span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span></div></div>
|
||
<div class="acct"><div class="m"><b>anna@example.org</b><span><span class="pill n">Verwendet</span><span class="pill n">Deutsch</span>08.09.</span></div></div>
|
||
<div class="acct"><div class="m"><b style="color:var(--wj-muted)">ohne Adresse</b><span><span class="pill n">Verwendet</span>21.08.</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="dim"></div>
|
||
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Einladen</h3><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div>
|
||
<div class="steps"><i><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg></i>Empfänger<s></s><i class="on">2</i>Versand</div>
|
||
<div class="sb" style="margin-top:12px">
|
||
<div class="note a"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 3 2 21h20zM12 10v5M12 18v.5"/></svg><div><b>Versand nicht möglich</b>Die Einladung wurde erstellt, aber die E-Mail konnte nicht übergeben werden. Sende sie erneut oder gib den Link selbst weiter.</div></div>
|
||
<details class="lk" open><summary>Link</summary><div class="in ro">https://werkjournal.javagil.de/login#invitation=Qm9…&email=max%40example.org</div><span class="chip" style="margin-top:8px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a1 1 0 0 1 1-1h10"/></svg> Kopieren</span></details>
|
||
</div>
|
||
<div class="sf"><span class="btn sq"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg>Erneut senden</span><span class="btn sq g" style="flex:0 0 auto">Schließen</span></div></div></div></div></figure></div>
|
||
</div>
|
||
<script>(()=>{const r=document.documentElement,b=document.getElementById('theme'),l=document.getElementById('theme-label');const m=['system','light','dark'];let i=0;const names={system:'Auto',light:'Hell',dark:'Dunkel'};const apply=()=>{const v=m[i];if(v==='system')r.removeAttribute('data-theme');else r.setAttribute('data-theme',v);l.textContent=names[v];};b.addEventListener('click',()=>{i=(i+1)%3;apply();});apply();})();</script>
|
||
</body>
|
||
</html>
|