werkator/jvm build succeeded after 10:30
Add the populated state (four entries over three customers, three habits) to the UI mockup: compact work card with per-customer chips, entry rows with inline stepper, habits as side-by-side vertical tiles (rows kept as documented alternative), shorter edit sheet and a populated desktop view. Align the Today and Work sections of docs/plans/ui-refresh.md with it. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
448 lines
94 KiB
HTML
448 lines
94 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Werkjournal UI-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}}
|
||
/* compact variants */
|
||
.hero.c{align-items:center;margin-top:2px}
|
||
.hero.c .big{font-size:34px}
|
||
.kpis.c{grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
|
||
.kpis.c .kpi .v{font-size:16px}
|
||
.kpis.c .track{margin-top:5px}
|
||
.bycust{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||
.bycust span{font-size:12px;font-weight:600;color:var(--wj-text-2);background:var(--wj-panel-2);border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums}
|
||
.bycust span b{color:var(--wj-accent);margin-left:4px}
|
||
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
|
||
.tile{background:var(--wj-panel);border:1px solid var(--wj-line);border-radius:14px;padding:10px 8px 8px;display:grid;justify-items:center;gap:4px;text-align:center;min-width:0}
|
||
.tile .nm{font-size:13px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.tile .cnt{font-size:28px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--wj-text)}
|
||
.tile .st{font-size:11px;color:var(--wj-muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
|
||
.tile .st i{width:7px;height:7px;border-radius:50%;background:var(--wj-accent)}
|
||
.tile .st.warn{color:var(--wj-clay)}.tile .st.warn i{background:var(--wj-clay)}
|
||
.tile .st.ok{color:var(--wj-accent)}
|
||
.tile .vs{display:grid;gap:4px;justify-items:center;margin-top:2px}
|
||
.tile .vs .rb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--wj-accent);color:var(--wj-on-accent)}
|
||
.tile .vs .rb.m{width:34px;height:30px;border-radius:999px;background:transparent;border:1px solid var(--wj-line-2);color:var(--wj-text-2)}
|
||
.tile.done .cnt{color:var(--wj-accent)}
|
||
.desk .tiles{grid-template-columns:repeat(3,1fr);gap:12px}
|
||
.desk .tile{padding:14px 10px 10px}
|
||
.crow{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--wj-line)}
|
||
.crow:last-child{border-bottom:0}
|
||
.crow .m{flex:1;min-width:0}
|
||
.crow .m b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.crow .m b span{color:var(--wj-muted);font-weight:500}
|
||
.crow .m small{display:block;font-size:12px;color:var(--wj-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.crow .ms{display:flex;align-items:center;gap:2px;flex-shrink:0}
|
||
.crow .ms .rb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--wj-line-2);color:var(--wj-text-2)}
|
||
.crow .ms .n{min-width:34px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;color:var(--wj-accent);font-size:16px}
|
||
.crow .ms .n small{font-weight:500;color:var(--wj-muted);font-size:11px}
|
||
.crow .go{color:var(--wj-ghost);flex-shrink:0}
|
||
.crow.sel{background:var(--wj-accent-soft);border-radius:10px;padding:6px 8px;margin:0 -8px}
|
||
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||
.hab2{display:grid;gap:8px}
|
||
.hab2 .habit{padding:8px 10px 8px 14px;margin:0}
|
||
.hab2 .habit .m span{font-size:12px}
|
||
.hab2 .step .rb{width:38px;height:38px}
|
||
.hab2 .step .n{font-size:20px;min-width:30px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
<div class="doc-head"><div><h1>Werkjournal UI-Entwürfe</h1><p>Entwürfe zur Spezifikation docs/plans/ui-refresh.md. Werkator-Palette, System-Schrift, 8-px-Raster. Der Umschalter rechts zeigt Auto, Hell und Dunkel. Zahlen und Namen 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">Voller Zustand, kompakt · 390 × 812</h2><div class="row"><figure class="fig"><figcaption><b>Heute · voll, Kacheln (empfohlen)</b>Vier Einträge über drei Kunden, Kundensummen als Chips, Zeilen mit Inline-Stepper statt Karten. Drei Habits als Kacheln nebeneinander, jede in sich vertikal: Name, Zähler, Status, großes Plus, kleines Minus. Alles ohne Scrollen sichtbar.</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="padding:14px 16px"><div class="hero c"><div><h3>Arbeit heute</h3><div class="big" style="margin-top:2px">7<small>h</small></div></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="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
|
||
<div class="kpis c"><div class="kpi"><div class="l">Diese Woche</div><div class="v">23 h</div><div class="track"><i style="--p:74%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">71 h</div><div class="track"><i style="--p:46%"></i></div></div></div>
|
||
</div>
|
||
<div class="list" style="margin-top:6px">
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><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">3<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><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">2<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
</div>
|
||
<div class="secline" style="margin:14px 0 8px"><h3>Habits</h3><a>Kalender</a></div>
|
||
|
||
<div class="tiles">
|
||
<div class="tile done"><span class="nm">Lesen</span><span class="cnt">1</span><span class="st ok"><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> Ziel · Wo 4/5</span><div class="vs"><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="M12 5v14M5 12h14"/></svg></span><span class="rb m"><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></div></div>
|
||
<div class="tile"><span class="nm">Spaziergänge</span><span class="cnt">0</span><span class="st warn"><i></i>noch 1 · Wo 3/5</span><div class="vs"><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="M12 5v14M5 12h14"/></svg></span><span class="rb m"><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></div></div>
|
||
<div class="tile"><span class="nm">Kaffee</span><span class="cnt">2</span><span class="st"><i></i>max 3 · noch 1</span><div class="vs"><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="M12 5v14M5 12h14"/></svg></span><span class="rb m"><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></div></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><figure class="fig"><figcaption><b>Heute · voll, Zeilen (Alternative)</b>Gleicher Inhalt, Habits als verdichtete Zeilen (56 px statt 72 px). Braucht bei drei Habits etwa 60 px mehr Höhe als die Kacheln, liest lange Namen aber besser.</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="padding:14px 16px"><div class="hero c"><div><h3>Arbeit heute</h3><div class="big" style="margin-top:2px">7<small>h</small></div></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="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
|
||
<div class="kpis c"><div class="kpi"><div class="l">Diese Woche</div><div class="v">23 h</div><div class="track"><i style="--p:74%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">71 h</div><div class="track"><i style="--p:46%"></i></div></div></div>
|
||
</div>
|
||
<div class="list" style="margin-top:6px">
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><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">3<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><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">2<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
</div>
|
||
<div class="secline" style="margin:14px 0 8px"><h3>Habits</h3><a>Kalender</a></div>
|
||
<div class="hab2">
|
||
<div class="habit"><div class="m"><b>Lesen</b><span class="ok"><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> Tagesziel · Woche 4 / 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">1</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 class="habit"><div class="m"><b>Spaziergänge</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 · Woche 3 / 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 class="habit"><div class="m"><b>Kaffee</b><span>max 3 · noch 1</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">2</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><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><figure class="fig"><figcaption><b>Arbeit · voll, kompakt</b>Einträge als 52-px-Zeilen: Kunde · Projekt, Beschreibung einzeilig, Inline-Stepper, Pfeil. Bearbeiten und Löschen liegen im Sheet, nicht mehr als Icon-Reihe in jeder Karte. Kundensummen unter der Tageszahl. Der per Link fokussierte Eintrag ist hervorgehoben.</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">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
|
||
<div class="daynav"><span class="chip"><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> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <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="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
|
||
<div class="card" style="padding:14px 16px"><div class="hero c"><div><h3>Tag</h3><div class="big" style="margin-top:2px">7<small>h</small></div></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="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
|
||
<div class="toggle" style="margin-top:10px;padding-top:10px"><span>Freier Tag</span><span class="sw"></span></div>
|
||
</div>
|
||
<div class="secline" style="margin:14px 0 4px"><h3>Einträge</h3><span style="font-size:12px;color:var(--wj-muted)">Tippen zum Bearbeiten</span></div>
|
||
<div class="list" style="margin-top:0">
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><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">3<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow sel"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><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">2<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></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 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"><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>Bearbeiten · kompaktes Sheet</b>Kunde und Projekt nebeneinander, Stunden-Pills in einer Reihe, Beschreibung kürzer, Datum als Nur-Lesen-Zeile ganz unten (ändern per Tipp). Löschen als Icon im Sheet-Kopf mit bestehender Bestätigung. Sheet ist etwa 120 px kürzer als die erste Fassung.</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">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
|
||
<div class="daynav"><span class="chip"><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> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <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="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
|
||
<div class="card" style="padding:14px 16px"><div class="hero c"><div><h3>Tag</h3><div class="big" style="margin-top:2px">7<small>h</small></div></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="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
|
||
<div class="toggle" style="margin-top:10px;padding-top:10px"><span>Freier Tag</span><span class="sw"></span></div>
|
||
</div>
|
||
<div class="secline" style="margin:14px 0 4px"><h3>Einträge</h3><span style="font-size:12px;color:var(--wj-muted)">Tippen zum Bearbeiten</span></div>
|
||
<div class="list" style="margin-top:0">
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><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">3<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow sel"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><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">2<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
</div>
|
||
</div>
|
||
<div class="dim"></div>
|
||
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Bearbeiten</h3><div style="display:flex"><span class="ib" title="Löschen" style="color:var(--wj-clay)"><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="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span><span class="ib" title="Schließen, Entwurf behalten"><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="sb" style="gap:12px">
|
||
<div class="two"><div class="field"><label>Kunde</label><div class="in">Acme GmbH <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="m9 5 7 7-7 7"/></svg></div></div><div class="field"><label>Projekt</label><div class="in">Relaunch <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="m9 5 7 7-7 7"/></svg></div></div></div>
|
||
<div class="field"><label>Stunden</label><div class="hours"><span class="c">1</span><span class="c on">2</span><span class="c">3</span><span class="c">4</span><span class="c">5</span><span class="c">6</span><span class="c">7</span><span class="c">8</span><span class="c more">mehr…</span></div></div>
|
||
<div class="field"><label>Beschreibung</label><div class="in ta focus" style="min-height:56px">Abstimmung Navigation, Ticket #212</div></div>
|
||
<div class="field"><label>Datum</label><div class="in ro" style="height:40px;font-size:14px">Fr, 12. September 2026 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></div></div>
|
||
</div>
|
||
<div class="sf"><span class="btn sq"><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>Speichern</span><span class="btn sq g" style="flex:0 0 auto">Verwerfen</span></div></div>
|
||
</div></div></figure></div>
|
||
<h2 class="sec">Desktop · voll</h2><div class="row"><figure class="fig" style="width:100%"><figcaption><b>Heute auf dem Desktop · voll (1180 px)</b>Links Tageskarte mit Kundensummen und Eintragszeilen, rechts drei Habit-Kacheln in einer Reihe. Bei mehr Habits umbrechen die Kacheln zu je drei pro Zeile.</figcaption><div class="desk"><div class="scr">
|
||
<div class="bar" style="padding:0 40px"><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><nav><span class="on">Heute</span><span>Arbeit</span><span>Habits</span></nav><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="cols"><div>
|
||
<div class="card"><div class="hero c"><div><h3>Arbeit heute</h3><div class="big" style="margin-top:4px">7<small>h</small></div></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="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
|
||
<div class="kpis c"><div class="kpi"><div class="l">Diese Woche</div><div class="v">23 h</div><div class="track"><i style="--p:74%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">71 h</div><div class="track"><i style="--p:46%"></i></div></div></div>
|
||
</div>
|
||
<div class="secline"><h3>Heutige Einträge</h3><a>Alle Tage</a></div>
|
||
<div class="list" style="margin-top:0">
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><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">3<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><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">2<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><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">1<small> h</small></span><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="M12 5v14M5 12h14"/></svg></span></div><span class="go"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
</div>
|
||
</div><div>
|
||
<div class="secline" style="margin-top:0"><h3>Habits</h3><a>Kalender</a></div>
|
||
|
||
<div class="tiles">
|
||
<div class="tile done"><span class="nm">Lesen</span><span class="cnt">1</span><span class="st ok"><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> Ziel · Wo 4/5</span><div class="vs"><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="M12 5v14M5 12h14"/></svg></span><span class="rb m"><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></div></div>
|
||
<div class="tile"><span class="nm">Spaziergänge</span><span class="cnt">0</span><span class="st warn"><i></i>noch 1 · Wo 3/5</span><div class="vs"><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="M12 5v14M5 12h14"/></svg></span><span class="rb m"><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></div></div>
|
||
<div class="tile"><span class="nm">Kaffee</span><span class="cnt">2</span><span class="st"><i></i>max 3 · noch 1</span><div class="vs"><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="M12 5v14M5 12h14"/></svg></span><span class="rb m"><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></div></div>
|
||
</div>
|
||
</div></div>
|
||
<div style="margin-top:40px;padding-top:16px;border-top:1px solid var(--wj-line);font-size:13px;color:var(--wj-muted);display:flex;justify-content:space-between"><span>Werkjournal 0.1.98</span><span>Impressum · Datenschutz · Werkator</span></div>
|
||
</div></div></div></figure></div>
|
||
<h2 class="sec">Erste Fassung (weniger Daten, luftiger) · 390 × 812</h2><div class="row"><figure class="fig"><figcaption><b>Heute (Home)</b>Helle Hero-Karte statt dunkler Petrol-Fläche. Einträge ohne Klappe, Habits als kompakte Zeilenkarten mit rundem Stepper. Bottom-Nav mit Labels.</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"><div class="ct"><h3>Arbeit heute</h3></div>
|
||
<div class="hero"><div class="big">6<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">18 h</div><div class="track"><i style="--p:62%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">64 h</div><div class="track"><i style="--p:41%"></i></div></div></div>
|
||
</div>
|
||
<div class="list">
|
||
<div class="entry"><div class="m"><b>Hostsharing</b><span>Werkator · Pipeline-Review und Rollback-Test</span></div><span class="h">4 h</span></div>
|
||
<div class="entry"><div class="m"><b>Allgemein</b><span>Allgemein · Buchhaltung</span></div><span class="h">2 h</span></div>
|
||
</div>
|
||
<div class="secline"><h3>Habits</h3><a>Kalender</a></div>
|
||
<div class="habit"><div class="m"><b>Lesen</b><span class="ok"><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> Tagesziel erreicht · Woche 4 / 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">1</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 class="habit"><div class="m"><b>Spaziergänge</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 3 / 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 class="habit"><div class="m"><b>Kaffee</b><span>Max. 3 pro Tag · noch 1</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">2</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><figure class="fig"><figcaption><b>Arbeit (Tagesansicht)</b>Datum ist der Titel, Tagesnavigation als Pills, Kalender-Icon öffnet den bestehenden DatePicker. „Freier Tag“ als Schalter in der Tageskarte. Eintragskarten mit Stepper links, leisen Aktionen rechts.</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">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
|
||
<div class="daynav"><span class="chip"><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> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <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="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
|
||
<div class="card"><div class="ct"><h3>Tag</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" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg></span></div>
|
||
<div class="hero"><div class="big">6<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="toggle"><span>Freier Tag <small style="color:var(--wj-muted)">· keine Erinnerung</small></span><span class="sw"></span></div>
|
||
</div>
|
||
<div class="secline"><h3>Einträge</h3></div>
|
||
<div class="card we sel"><div class="top"><b>Hostsharing <span>· Werkator</span></b><span class="h">4 h</span></div><p>Pipeline-Review, Rollback mit echter H2-Datenbank getestet und dokumentiert.</p>
|
||
<div class="foot"><div class="step"><span class="rb s"><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">4</span><span class="rb s"><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 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"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><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"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
|
||
<div class="card we"><div class="top"><b>Allgemein <span>· Allgemein</span></b><span class="h">2 h</span></div><p>Buchhaltung</p>
|
||
<div class="foot"><div class="step"><span class="rb s"><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">2</span><span class="rb s"><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 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"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><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"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></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 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"><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>Erfassen als Bottom-Sheet</b>Unter 600 px öffnet das bestehende Formular als Sheet von unten. Stunden als Pills 1–8 plus „mehr“, das Zahlenfeld bleibt das Datenfeld. Entwurfs-Hinweis in Amber oberhalb der Felder, Aktionen fest am unteren Rand.</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">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
|
||
<div class="daynav"><span class="chip"><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> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <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="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
|
||
<div class="card"><div class="ct"><h3>Tag</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" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg></span></div>
|
||
<div class="hero"><div class="big">6<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="toggle"><span>Freier Tag <small style="color:var(--wj-muted)">· keine Erinnerung</small></span><span class="sw"></span></div>
|
||
</div>
|
||
<div class="secline"><h3>Einträge</h3></div>
|
||
<div class="card we sel"><div class="top"><b>Hostsharing <span>· Werkator</span></b><span class="h">4 h</span></div><p>Pipeline-Review, Rollback mit echter H2-Datenbank getestet und dokumentiert.</p>
|
||
<div class="foot"><div class="step"><span class="rb s"><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">4</span><span class="rb s"><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 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"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><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"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
|
||
<div class="card we"><div class="top"><b>Allgemein <span>· Allgemein</span></b><span class="h">2 h</span></div><p>Buchhaltung</p>
|
||
<div class="foot"><div class="step"><span class="rb s"><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">2</span><span class="rb s"><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 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"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><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"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
|
||
</div>
|
||
<div class="dim"></div>
|
||
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Erfassen</h3><span class="ib" title="Schließen, Entwurf behalten"><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="sb">
|
||
<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>Entwurf von gestern gefunden</b>Hostsharing · Werkator · 3 h<span class="x">Entwurf wiederherstellen</span></div></div>
|
||
<div class="field"><label>Datum</label><div class="in">Fr, 12. September 2026 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></div></div>
|
||
<div class="field"><label>Kunde</label><div class="in">Hostsharing <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="m9 5 7 7-7 7"/></svg></div></div>
|
||
<div class="field"><label>Projekt</label><div class="in">Werkator <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="m9 5 7 7-7 7"/></svg></div></div>
|
||
<div class="field"><label>Stunden</label><div class="hours"><span class="c">1</span><span class="c">2</span><span class="c">3</span><span class="c on">4</span><span class="c">5</span><span class="c">6</span><span class="c">7</span><span class="c">8</span><span class="c more">mehr…</span></div></div>
|
||
<div class="field"><label>Beschreibung <span style="font-weight:500;color:var(--wj-muted)">· optional</span></label><div class="in ta focus">Pipeline-Review, Rollback getestet</div></div>
|
||
</div>
|
||
<div class="sf"><span class="btn sq"><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>Speichern</span><span class="btn sq g">Verwerfen</span></div></div>
|
||
</div></div></figure></div>
|
||
<h2 class="sec">Habits-Kalender und Navigation</h2><div class="row"><figure class="fig"><figcaption><b>Habits (Kalender)</b>Habit-Wahl als Pill-Leiste, Monatskopf mit Kennzahlen (Monat, Woche, Serie). Zellen zeigen Tag klein und Zählwert groß; Hintergrund kodiert Zielstatus, Zukunft bleibt leer. Tippen auf einen Tag öffnet den Zähler als Sheet.</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">Habits</div><h2 class="title">Kalender</h2></div>
|
||
<div class="pills"><span class="chip on">Lesen</span><span class="chip">Spaziergänge</span><span class="chip">Kaffee</span><span class="chip"><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> Neu</span></div>
|
||
<div class="card" style="margin-top:14px">
|
||
<div class="mh"><span class="ib" style="width:36px;height:36px"><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></span><b>September 2026</b><span class="ib" style="width:36px;height:36px"><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="m9 5 7 7-7 7"/></svg></span></div>
|
||
<div class="mk"><div>Diesen Monat<b>13</b></div><div>Diese Woche<b>4 / 5</b></div><div>Serie<b>4 Tage</b></div></div>
|
||
<div class="cal"><div class="wd">Mo</div><div class="wd">Di</div><div class="wd">Mi</div><div class="wd">Do</div><div class="wd">Fr</div><div class="wd">Sa</div><div class="wd">So</div><div class="wd">Σ</div><div class="d adj" data-n="31">0</div><div class="d ok" data-n="1">1</div><div class="d ok" data-n="2">2</div><div class="d lo" data-n="3">0</div><div class="d ok" data-n="4">1</div><div class="d ok" data-n="5">1</div><div class="d lo" data-n="6">0</div><div class="w">5</div><div class="d ok" data-n="7">1</div><div class="d ok" data-n="8">1</div><div class="d hi" data-n="9">3</div><div class="d ok" data-n="10">1</div><div class="d ok" data-n="11">1</div><div class="d ok today" data-n="12">1</div><div class="d fut" data-n="13"></div><div class="w">8</div><div class="d fut" data-n="14"></div><div class="d fut" data-n="15"></div><div class="d fut" data-n="16"></div><div class="d fut" data-n="17"></div><div class="d fut" data-n="18"></div><div class="d fut" data-n="19"></div><div class="d fut" data-n="20"></div><div class="w"></div><div class="d fut" data-n="21"></div><div class="d fut" data-n="22"></div><div class="d fut" data-n="23"></div><div class="d fut" data-n="24"></div><div class="d fut" data-n="25"></div><div class="d fut" data-n="26"></div><div class="d fut" data-n="27"></div><div class="w"></div><div class="d fut" data-n="28"></div><div class="d fut" data-n="29"></div><div class="d fut" data-n="30"></div><div class="d adj fut" data-n="1"></div><div class="d adj fut" data-n="2"></div><div class="d adj fut" data-n="3"></div><div class="d adj fut" data-n="4"></div><div class="w"></div></div>
|
||
<div style="display:flex;gap:12px;margin-top:12px;font-size:12px;color:var(--wj-muted);flex-wrap:wrap"><span><i style="display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--wj-accent-soft);vertical-align:-1px"></i> im Ziel</span><span><i style="display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--wj-clay-soft);vertical-align:-1px"></i> unter Minimum</span><span><i style="display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--wj-amber-soft);vertical-align:-1px"></i> über Maximum</span></div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;justify-content:flex-end;margin-top:10px"><span class="chip"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1"/></svg> Bearbeiten</span><span class="chip"><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="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg> Löschen</span></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 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"><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>Menü („Mehr“)</b>Drawer von rechts mit allen Zielen als 48-px-Zeilen mit Icon; aktiver Eintrag in accent-soft. Gast-Hinweis wandert in den Drawer-Kopf. Version und Links im Fuß.</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">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
|
||
<div class="daynav"><span class="chip"><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> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <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="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
|
||
<div class="card"><div class="ct"><h3>Tag</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" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg></span></div>
|
||
<div class="hero"><div class="big">6<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="toggle"><span>Freier Tag <small style="color:var(--wj-muted)">· keine Erinnerung</small></span><span class="sw"></span></div>
|
||
</div>
|
||
<div class="secline"><h3>Einträge</h3></div>
|
||
<div class="card we sel"><div class="top"><b>Hostsharing <span>· Werkator</span></b><span class="h">4 h</span></div><p>Pipeline-Review, Rollback mit echter H2-Datenbank getestet und dokumentiert.</p>
|
||
<div class="foot"><div class="step"><span class="rb s"><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">4</span><span class="rb s"><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 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"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><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"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
|
||
<div class="card we"><div class="top"><b>Allgemein <span>· Allgemein</span></b><span class="h">2 h</span></div><p>Buchhaltung</p>
|
||
<div class="foot"><div class="step"><span class="rb s"><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">2</span><span class="rb s"><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 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"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><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"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
|
||
</div>
|
||
<div class="dim"></div>
|
||
<div class="sheet" style="max-height:100%;border-radius:0;left:auto;width:300px;top:0;box-shadow:var(--wj-shadow)">
|
||
<div class="drawer-head"><div style="display:flex;align-items:center;justify-content:space-between"><span class="brand" style="display:flex;align-items:center;gap:9px;font-weight:600"><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> werkjournal</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 style="margin-top:10px"><span class="pill n">Gast · Einträge für alle Gäste sichtbar</span></div></div>
|
||
<div class="sb" style="gap:4px;padding:10px 12px">
|
||
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><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><b style="font-weight:500">Heute</b></div></div>
|
||
<div class="entry" style="border:0;min-height:48px;padding:0 12px;background:var(--wj-accent-soft);border-radius:10px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-accent)"><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><b>Arbeit</b></div></div>
|
||
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg><b style="font-weight:500">Berichte</b></div></div>
|
||
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><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><b style="font-weight:500">Habits</b></div></div>
|
||
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><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><b style="font-weight:500">Kunden & Projekte</b></div></div>
|
||
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1"/></svg><b style="font-weight:500">Einstellungen</b></div></div>
|
||
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="14" r="4"/><path d="m11 11 9-9M16 6l2 2M13 9l2 2"/></svg><b style="font-weight:500">Konten</b></div></div>
|
||
</div>
|
||
<div style="margin-top:auto;padding:16px;font-size:12px;color:var(--wj-muted);border-top:1px solid var(--wj-line)">Werkjournal 0.1.98 · Impressum · Datenschutz</div>
|
||
</div>
|
||
</div></div></figure></div>
|
||
<h2 class="sec">Desktop · erste Fassung</h2><div class="row"><figure class="fig" style="width:100%"><figcaption><b>Heute auf dem Desktop (1180 px)</b>Zwei Spalten wie bisher, Quick-Nav in der Leiste, gleiche Bausteine wie mobil. Keine dunkle Fläche, Zahlen tragen den Akzent.</figcaption><div class="desk"><div class="scr">
|
||
<div class="bar" style="padding:0 40px"><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><nav><span class="on">Heute</span><span>Arbeit</span><span>Habits</span></nav><span class="pill n" style="margin-left:24px">Gast</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="cols"><div>
|
||
<div class="card"><div class="ct"><h3>Arbeit heute</h3></div>
|
||
<div class="hero"><div class="big">6<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">18 h</div><div class="track"><i style="--p:62%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">64 h</div><div class="track"><i style="--p:41%"></i></div></div></div>
|
||
</div>
|
||
<div class="secline"><h3>Heutige Einträge</h3><a>Alle Tage</a></div>
|
||
<div class="entry"><div class="m"><b>Hostsharing</b><span>Werkator · Pipeline-Review und Rollback-Test</span></div><span class="h">4 h</span></div>
|
||
<div class="entry"><div class="m"><b>Allgemein</b><span>Allgemein · Buchhaltung</span></div><span class="h">2 h</span></div>
|
||
</div><div>
|
||
<div class="secline" style="margin-top:0"><h3>Habits</h3><a>Kalender</a></div>
|
||
<div class="habit"><div class="m"><b>Lesen</b><span class="ok"><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> Tagesziel erreicht · Woche 4 / 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">1</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 class="habit"><div class="m"><b>Spaziergänge</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 3 / 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 class="habit"><div class="m"><b>Kaffee</b><span>Max. 3 pro Tag · noch 1</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">2</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>
|
||
<div style="margin-top:40px;padding-top:16px;border-top:1px solid var(--wj-line);font-size:13px;color:var(--wj-muted);display:flex;justify-content:space-between"><span>Werkjournal 0.1.98</span><span>Impressum · Datenschutz · Werkator</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>
|