193 lines
92 KiB
HTML
193 lines
92 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Owly and Your list, v2</title><style>
|
||
:root{--bg:#f5f5f2;--panel:#fff;--ink:#1c1c1a;--muted:#6b6b66;--line:#e2e1dc;--accent:#2f5bd3;--due:#b0124e;--chip:#ecebe6;--hi:#fff7dc;--scam:#b3261e;--scam-bg:#fde8e6;
|
||
--gmail:#e07a10;--gmail-bg:#fdf0e1;--mesh:#2f6fd6;--mesh-bg:#e7eefc;--work:#178a6d;--work-bg:#e2f4ee}
|
||
@media (prefers-color-scheme:dark){:root{--bg:#131313;--panel:#1c1c1c;--ink:#ebebe8;--muted:#9b9b95;--line:#2d2d2b;--accent:#86a8ff;--due:#ff7aa6;--chip:#292927;--hi:#2b2616;--scam:#ff8a80;--scam-bg:#3a1c1a;
|
||
--gmail:#ffad5c;--gmail-bg:#3a2a16;--mesh:#7fa8ff;--mesh-bg:#1b2640;--work:#5fd3b0;--work-bg:#15302a}}
|
||
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
|
||
a{color:var(--accent);text-decoration:none}.muted{color:var(--muted)}small{font-size:12px}
|
||
.hide{position:absolute;opacity:0;pointer-events:none}.dz:checked + *{display:none!important}
|
||
.banner{margin:0;padding:5px 16px;font-size:12px;background:var(--hi);color:var(--muted);border-bottom:1px solid var(--line)}
|
||
.topbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
|
||
.topbar .logo{font-weight:700;font-size:17px}.topbar input{flex:1;max-width:460px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
|
||
.health{margin-left:auto;font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}.health i{width:8px;height:8px;border-radius:50%;background:#2e9d5b;display:inline-block}
|
||
.toggles{display:flex;gap:8px;align-items:center;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
|
||
.toggles label{cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;border:2px solid var(--line);font-size:14px;opacity:.45;white-space:nowrap}
|
||
.toggles label small{color:var(--muted)}.toggles .n{font-size:12px;background:var(--chip);border-radius:99px;padding:0 7px}
|
||
#t-gmail:checked ~ .toggles label[for=t-gmail]{opacity:1;border-color:var(--gmail);background:var(--gmail-bg)}
|
||
#t-mesh:checked ~ .toggles label[for=t-mesh]{opacity:1;border-color:var(--mesh);background:var(--mesh-bg)}
|
||
#t-work:checked ~ .toggles label[for=t-work]{opacity:1;border-color:var(--work);background:var(--work-bg)}
|
||
#t-gmail:not(:checked) ~ * .a-gmail,#t-mesh:not(:checked) ~ * .a-mesh,#t-work:not(:checked) ~ * .a-work{display:none!important}
|
||
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}.i-gmail{background:var(--gmail)}.i-mesh{background:var(--mesh)}.i-work{background:var(--work)}
|
||
.e-gmail{box-shadow:inset 4px 0 0 var(--gmail)}.e-mesh{box-shadow:inset 4px 0 0 var(--mesh)}.e-work{box-shadow:inset 4px 0 0 var(--work)}
|
||
.due{color:var(--due);font-weight:600;font-size:12px;white-space:nowrap}.star{color:var(--due)}
|
||
.cnt{font-size:11px;background:var(--chip);color:var(--muted);border-radius:99px;padding:0 6px;margin-left:4px}.clip{font-size:12px;color:var(--muted);margin-left:4px;white-space:nowrap}
|
||
.chip{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--chip);font-size:12px;color:var(--muted);white-space:nowrap}
|
||
.unread .subj,.unread .sender{font-weight:700}.udot{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:0 4px;margin-right:2px;line-height:1.4;vertical-align:middle}.udot::after{content:'new'}
|
||
.x{cursor:pointer;color:var(--muted);font-size:13px;padding:2px 6px;border-radius:5px;line-height:1}.x:hover{background:var(--chip);color:var(--ink)}
|
||
.btn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:7px;font-size:13px;color:var(--ink);background:var(--panel);cursor:pointer;white-space:nowrap}
|
||
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
|
||
/* reading pane */
|
||
body:has(.pane:target) .main{margin-right:500px}
|
||
.pane{display:none;position:fixed;top:0;right:0;bottom:0;width:500px;background:var(--panel);border-left:1px solid var(--line);padding:14px 22px 40px;overflow:auto;box-shadow:-8px 0 24px rgba(0,0,0,.08);z-index:5}
|
||
.pane:target{display:block}.pane .bar{display:flex;gap:6px;align-items:center;margin-bottom:12px}.pane .badge{margin-left:auto;color:#fff;font-size:12px;padding:2px 10px;border-radius:99px}
|
||
.pane h1{font-size:20px;margin:4px 0 6px;line-height:1.25}.meta{font-size:13px;color:var(--muted)}.meta b{color:var(--ink)}
|
||
.note{padding:9px 12px;border-radius:8px;margin:12px 0;font-size:13px}.note.scam{background:var(--scam-bg);color:var(--scam)}
|
||
.body{font-size:15px}.body p{margin:0 0 10px}
|
||
details.fix{margin-top:14px}details.fix summary{cursor:pointer;color:var(--muted);font-size:13px}details.fix form{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
|
||
details.fix select,details.fix input,details.fix button{font:inherit;font-size:13px;padding:4px 7px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
|
||
/* attachments */
|
||
.atts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.atts .lbl{width:100%;font-size:12px;color:var(--muted)}
|
||
.att{display:flex;gap:8px;align-items:center;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--bg);max-width:100%}
|
||
.att b{display:block;font-size:13px;font-weight:600;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att small{color:var(--muted)}
|
||
.th{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:var(--panel);border:1px solid var(--line);flex:none}
|
||
.th-s{width:44px;height:44px}.th-m{width:120px;height:90px}.th em{position:absolute;bottom:2px;right:3px;font-style:normal;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:0 3px;border-radius:3px}
|
||
.th svg{display:block;width:100%;height:100%}
|
||
.pg{width:70%;height:84%;background:#fff;border:1px solid #ddd;padding:12% 10%;display:flex;flex-direction:column;gap:9%}.pg i{display:block;height:2px;background:#bbb}.pg i.w{width:60%}
|
||
.cal{display:flex;flex-direction:column;align-items:center;line-height:1;font-family:inherit}.cal b{font-size:8px;color:#fff;background:#d9443a;width:100%;text-align:center;padding:2px 0}.cal span{font-size:16px;font-weight:700;padding:2px 0}.th-s .cal{transform:translateY(-4px)}.th-s .cal span{font-size:13px}
|
||
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:80%;height:70%;background:#1d7a45}.grid i{background:#e9f5ee}
|
||
.zipi{font-size:22px;color:var(--muted)}
|
||
.lb{display:none;position:fixed;inset:0;z-index:20;background:#121212;color:#eee;flex-direction:column}
|
||
.lb:target{display:flex}.lb-bar{display:flex;gap:12px;align-items:center;padding:10px 16px}.lb-bar .btn{background:#2a2a2a;color:#eee;border-color:#444}.lb-bar .muted{color:#aaa}
|
||
.lb-body{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 16px;overflow:auto}
|
||
.lb-strip{display:flex;gap:8px;justify-content:center;padding:10px}.lb-strip a{opacity:.6}.lb-strip a.on{opacity:1;outline:2px solid #fff;border-radius:7px}
|
||
.v-img{width:min(900px,100%);aspect-ratio:3/2;border-radius:6px;overflow:hidden}
|
||
.v-pdf{text-align:center}.paper{background:#fff;color:#222;width:min(520px,92vw);aspect-ratio:1/1.414;padding:7% 8%;text-align:left;box-shadow:0 6px 30px rgba(0,0,0,.5)}
|
||
.paper h3{margin:0 0 4px;font-size:20px}.paper .from{color:#777;font-size:13px;margin-bottom:20px}.paper p{border-bottom:1px solid #eee;padding:6px 0;margin:0;font-size:14px}
|
||
.paper .lines{margin-top:30px;display:flex;flex-direction:column;gap:12px}.paper .lines i{display:block;height:3px;background:#e4e4e4}.paper .lines i.w{width:55%}
|
||
.v-ics{display:flex;gap:20px;align-items:flex-start;background:#fff;color:#222;padding:24px;border-radius:10px;max-width:560px}.v-ics h3{margin:0 0 6px}.v-ics .muted{color:#777}
|
||
.cal.big{border:1px solid #ddd;border-radius:8px;overflow:hidden;width:84px}.cal.big b{font-size:12px;padding:4px 0}.cal.big span{font-size:34px;padding:6px 0 0}.cal.big small{padding-bottom:6px;color:#777}
|
||
.v-sheet,.v-zip{background:#fff;color:#222;padding:18px;border-radius:10px;max-width:100%;overflow:auto}
|
||
.v-sheet table,.v-zip table{border-collapse:collapse;font-size:14px}.v-sheet th,.v-sheet td{border:1px solid #d7d7d7;padding:6px 14px;text-align:right}.v-sheet th{background:#e9f5ee}.v-sheet td:first-child,.v-sheet th:first-child{text-align:left}
|
||
.v-zip td{padding:6px 18px 6px 0;border-bottom:1px solid #eee}.v-sheet .muted,.v-zip .muted{color:#777;font-size:12px}
|
||
@media (max-width:760px){body:has(.pane:target) .main{margin-right:0}.pane{width:auto;left:0;border-left:0;padding:10px 14px 40px}
|
||
.topbar{flex-wrap:wrap;gap:8px;padding:8px 12px}.topbar input{order:3;max-width:none;flex-basis:100%}.toggles{padding:6px 12px}.toggles label small{display:none}
|
||
.banner{font-size:11px;padding:4px 12px}.att b{max-width:150px}}
|
||
.mc{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink);margin:6px 0}
|
||
.mc .av{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
|
||
.mt{display:flex;flex-direction:column;min-width:0}.mt b{font-size:13px}.mt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.mw{font-size:12px;color:var(--muted)}.toggles{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px}.toggles label{flex:none;cursor:pointer;display:inline-flex;gap:6px;align-items:center;padding:4px 12px;border-radius:99px;border:2px solid var(--line);font-size:13px;opacity:.45}
|
||
#t-gmail:checked ~ * .toggles label[for=t-gmail],#t-gmail:checked ~ .toggles label[for=t-gmail]{opacity:1;border-color:var(--gmail);background:var(--gmail-bg)}
|
||
#t-mesh:checked ~ * .toggles label[for=t-mesh],#t-mesh:checked ~ .toggles label[for=t-mesh]{opacity:1;border-color:var(--mesh);background:var(--mesh-bg)}
|
||
#t-work:checked ~ * .toggles label[for=t-work],#t-work:checked ~ .toggles label[for=t-work]{opacity:1;border-color:var(--work);background:var(--work-bg)}.owlsvg{width:100%;height:100%}.ropts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.ropts button{border:1px solid var(--work);background:var(--panel);color:var(--ink);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
|
||
.ropts button.on{background:var(--work);color:#fff}.draft{margin:8px 0;padding:12px 14px;border-left:3px solid var(--work);background:var(--work-bg);border-radius:8px;font-size:14px}
|
||
.dh{font-size:12px;color:var(--muted);margin-bottom:6px}.dt{outline:none;line-height:1.5}.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.sentnote{font-size:13px;color:var(--muted);margin-top:8px}.wrap{padding:14px 18px 40px;min-width:0}h1{font-size:30px;margin:0}.lede{color:var(--muted);margin:2px 0 8px}
|
||
h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:24px 0 4px;display:flex;justify-content:space-between}
|
||
ul{list-style:none;margin:0;padding:0}.tk{display:flex;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line)}.tk input{display:none}
|
||
.box{flex:none;width:26px;height:26px;border-radius:8px;border:2.5px solid var(--line);cursor:pointer;margin-top:1px}.a-gmail .box{border-color:var(--gmail)}.a-mesh .box{border-color:var(--mesh)}.a-work .box{border-color:var(--work)}
|
||
.tk input:checked + .box{background:var(--ink);border-color:var(--ink)}.tk input:checked + .box::after{content:"✓";color:var(--bg);display:block;text-align:center;font-weight:800;line-height:21px}
|
||
.tk:has(input:checked) .tt{text-decoration:line-through;color:var(--muted)}.tb{min-width:0;flex:1}.tt{font-size:17px;cursor:pointer;display:block;line-height:1.3}
|
||
.tm{font-size:13px;color:var(--muted);margin:3px 0;display:flex;gap:10px;flex-wrap:wrap}.wh{color:var(--due);font-weight:600}.link{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:0}.small{font-size:12px}
|
||
.src{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
|
||
.hint{font-size:13px;color:var(--muted);font-style:italic}.rd summary{cursor:pointer;font-size:13px;color:var(--work);font-weight:600;margin:2px 0}
|
||
.prog{height:6px;background:var(--chip);border-radius:99px;overflow:hidden;margin-top:6px}.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
|
||
.pr{display:flex;gap:12px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--line)}.pk{flex:none;font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;margin-top:2px}
|
||
.pk.me{background:#4b3a7a;color:#fff}.pk.them{background:var(--chip);color:var(--muted)}
|
||
.fyi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;line-height:1.6;font-size:15px}.warn{background:var(--scam-bg);color:var(--scam);border-radius:12px;padding:12px 16px;font-size:15px}
|
||
.snz{opacity:.5}.askbar{position:fixed;left:0;right:0;bottom:0;padding:18px 14px 14px;background:linear-gradient(transparent,var(--bg) 35%)}
|
||
.askbar form{max-width:720px;margin:0 auto;display:flex;gap:8px;align-items:center}.askbar .mini-owl{width:38px;height:38px;flex:none}
|
||
.askbar input{flex:1;min-width:0;padding:11px 16px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
|
||
.askbar button{border:0;border-radius:99px;background:#4b3a7a;color:#fff;padding:11px 16px;font:inherit;cursor:pointer}.answer{max-width:720px;margin:0 auto 8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:14px;display:none}body{background:radial-gradient(1000px 520px at 50% -180px,#e9e4ff,var(--bg))}@media (prefers-color-scheme:dark){body{background:radial-gradient(1000px 520px at 50% -180px,#2a2350,var(--bg))}}
|
||
.hd{display:flex;align-items:center;gap:12px}.hd .owl{width:52px;height:52px}.hd b{font-size:19px}.hd .muted{font-size:13px}
|
||
.owl{width:40px;height:40px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
|
||
.msg{display:flex;gap:10px;margin:14px 0;align-items:flex-start}.msg.me{justify-content:flex-end}
|
||
.bub{background:var(--panel);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:12px 16px;line-height:1.5;min-width:0;max-width:100%}.me .bub{background:#4b3a7a;color:#fff;border:0;border-radius:18px 4px 18px 18px}
|
||
.link{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
|
||
.queue{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 0;margin:8px 0}.qa{display:flex;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line)}.qa:first-child{border-top:0}
|
||
.qa div{flex:1;min-width:0}.qa small{display:block;color:var(--muted)}.qa .btn{padding:4px 10px}.qa.ok{opacity:.55}.qa.ok .btn{display:none}.qa.ok::after{content:"✓ done";color:#2e9d5b;font-size:13px}
|
||
.dock{position:fixed;left:0;right:0;bottom:0;padding:22px 14px 14px;background:linear-gradient(transparent,var(--bg) 28%)}.dock .in{max-width:780px;margin:0 auto}
|
||
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}.chips button{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
|
||
.ask{display:flex;gap:8px}.ask input{flex:1;min-width:0;padding:12px 16px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
|
||
.ask button{border:0;border-radius:99px;background:#4b3a7a;color:#fff;padding:0 18px;font:inherit;cursor:pointer}.typing{opacity:.6;font-style:italic}
|
||
.badge2{background:#e0472f;color:#fff;border-radius:99px;font-size:11px;padding:0 6px;margin-left:4px}
|
||
.together{display:grid;grid-template-columns:minmax(0,1fr) 440px;max-width:1240px;margin:0 auto;min-height:calc(100vh - 30px)}
|
||
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--line);background:color-mix(in srgb,var(--panel) 70%,var(--bg))}
|
||
.side .hd{padding:12px 16px 0}.side #chat{flex:1;overflow:auto;padding:0 14px}.side .dock{position:static;background:none;padding:8px 14px 14px}
|
||
.greet{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:6px 0 4px}.greet .owl{width:46px;height:46px}
|
||
.fab,#sheet{display:none}
|
||
@media (max-width:900px){.together{grid-template-columns:1fr}.side{position:fixed;left:0;right:0;bottom:0;top:auto;height:82vh;border:0;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);
|
||
transform:translateY(105%);transition:transform .25s;z-index:8;background:var(--bg)}#sheet:checked ~ .main .side{transform:none}
|
||
.fab{display:flex;position:fixed;right:16px;bottom:18px;width:64px;height:64px;border-radius:50%;background:#4b3a7a;box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:9;cursor:pointer;padding:6px}
|
||
#sheet:checked ~ .fab{background:var(--ink)}.wrap{padding:12px 14px 100px}}
|
||
|
||
.modes{display:flex;gap:8px;padding:2px 0 10px;flex-wrap:wrap}
|
||
.modes input{position:absolute;opacity:0;pointer-events:none}
|
||
.modes label{cursor:pointer;padding:6px 14px;border-radius:99px;border:2px solid var(--line);font-size:13px;color:var(--muted)}
|
||
.modes input:checked + label{border-color:var(--accent);background:var(--mesh-bg);color:var(--ink);font-weight:600}
|
||
.trustline{font-size:13px;margin:4px 2px 10px}
|
||
.empty-today{background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:16px;color:var(--muted);font-size:15px;margin:4px 0}
|
||
.tk.hl{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
|
||
li.wo{display:flex;gap:10px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--line)}
|
||
li.wo .wob{flex:1;min-width:0}li.wo .btn{flex:none}
|
||
.learned-btn{margin-left:auto;white-space:nowrap}
|
||
.side .hd{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px}
|
||
.lessons-panel{list-style:none;margin:4px 14px 8px;padding:8px 12px;background:var(--chip);border-radius:10px;font-size:13px}
|
||
.lessons-panel li{padding:2px 0}
|
||
.learned{background:var(--work-bg);border-left:3px solid var(--work);border-radius:8px;padding:10px 12px;font-size:14px}
|
||
.learned button{margin-left:8px}
|
||
.qd2{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
|
||
.qd2 summary{cursor:pointer;font-weight:600;font-size:14px}
|
||
.qi2{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
|
||
.qi2:first-of-type{border-top:0}
|
||
.qi2 a{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.kbd-hint{display:none;cursor:pointer}
|
||
@media (min-width:901px){.kbd-hint{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-left:auto}}
|
||
.shortcuts-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;display:flex;align-items:center;justify-content:center}
|
||
.shortcuts-box{background:var(--panel);border-radius:14px;padding:20px 24px;max-width:320px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
|
||
.shortcuts-box ul{list-style:none;padding:0;margin:10px 0 14px;font-size:14px;line-height:1.8}
|
||
.shortcuts-box li b{display:inline-block;min-width:26px;background:var(--chip);border-radius:5px;padding:0 5px;text-align:center;margin-right:6px;font-family:monospace}
|
||
@media (max-width:760px){.shortcuts-box{margin:0 16px}.topbar .btn{padding:5px 9px;font-size:12px}}
|
||
</style></head><body><p class="banner">Final round v2 — Owly and Your list, v2 · mock data, mock script · <a href="#">all designs</a></p><input type="checkbox" class="hide" id="t-gmail" checked><input type="checkbox" class="hide" id="t-mesh" checked><input type="checkbox" class="hide" id="t-work" checked><input type="checkbox" id="sheet" class="hide"><label for="sheet" class="fab" title="Owly"><svg viewBox="0 0 64 64" class="owlsvg" aria-hidden="true"><circle cx="32" cy="34" r="26" fill="#4b3a7a"/><path d="M10 18 L22 26 L18 12Z M54 18 L42 26 L46 12Z" fill="#4b3a7a"/><circle cx="23" cy="31" r="10" fill="#fff"/><circle cx="41" cy="31" r="10" fill="#fff"/><circle cx="24" cy="32" r="4.5" fill="#1d1640"/><circle cx="40" cy="32" r="4.5" fill="#1d1640"/><circle cx="25.5" cy="30.5" r="1.4" fill="#fff"/><circle cx="41.5" cy="30.5" r="1.4" fill="#fff"/><path d="M29 40 L32 45 L35 40Z" fill="#f2b84b"/><path d="M16 48 Q32 58 48 48" stroke="#8f7cc8" stroke-width="3" fill="none"/></svg></label><div class="topbar"><span class="logo">Mail</span><a class="btn" href="#">All mail</a><input id="topsearch" placeholder="Search mail, or ask Owly" onkeydown="if(event.key==='Enter')topSearch(event)"><span class="kbd-hint" onclick="toggleShortcuts()">? shortcuts</span></div><div id="shortcuts" class="shortcuts-overlay" style="display:none" onclick="if(event.target===this)toggleShortcuts()"><div class="shortcuts-box"><h3>Keyboard shortcuts</h3><ul><li><b>j</b> <b>k</b> move the highlight</li><li><b>x</b> tick the highlighted task</li><li><b>r</b> open its reply drafts</li><li><b>/</b> jump to the Owly box</li><li><b>?</b> this list</li></ul><button class="btn" onclick="toggleShortcuts()">Close</button></div></div><div class="main"><div class="together"><div class="wrap"><div class="greet"><span class="owl"><svg viewBox="0 0 64 64" class="owlsvg" aria-hidden="true"><circle cx="32" cy="34" r="26" fill="#4b3a7a"/><path d="M10 18 L22 26 L18 12Z M54 18 L42 26 L46 12Z" fill="#4b3a7a"/><circle cx="23" cy="31" r="10" fill="#fff"/><circle cx="41" cy="31" r="10" fill="#fff"/><circle cx="24" cy="32" r="4.5" fill="#1d1640"/><circle cx="40" cy="32" r="4.5" fill="#1d1640"/><circle cx="25.5" cy="30.5" r="1.4" fill="#fff"/><circle cx="41.5" cy="30.5" r="1.4" fill="#fff"/><path d="M29 40 L32 45 L35 40Z" fill="#f2b84b"/><path d="M16 48 Q32 58 48 48" stroke="#8f7cc8" stroke-width="3" fill="none"/></svg></span><div><b>Good morning, Alex.</b> Three things need you today; the rest is below. <button class="link" onclick="speak()">🔊 Read it to me</button></div></div><p class="trustline muted">Told your phone once today, 07:15 — 1 mail matters (bpost).</p><h1>Your list</h1><p class="lede">New since you last looked (yesterday 22:14): <b>10</b></p><div class="modes"><input type="radio" name="mode" id="mode-work" onchange="setMode('work')"><label for="mode-work">Work</label><input type="radio" name="mode" id="mode-personal" onchange="setMode('personal')"><label for="mode-personal">Personal</label><input type="radio" name="mode" id="mode-everything" onchange="setMode('everything')" checked><label for="mode-everything">Everything</label></div><div class="prog"><i id="pg"></i></div><h2><span>Today</span><span>2</span></h2><ul id="sect-today"><li class="tk a-gmail" data-sect="today"><input type="checkbox" id="tk0" onchange="onTaskChange(this)"><label for="tk0" class="box"></label><div class="tb"><label for="tk0" class="tt">Be home for bpost’s registered mail, or authorise a proxy</label><div class="tm"><span class="wh">today, before 14:00</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m1"><span class="dot i-gmail"></span>bpost: Registered mail arrives today, 08:00–14:00</a></div></li><li class="tk a-work" data-sect="today"><input type="checkbox" id="tk1" onchange="onTaskChange(this)"><label for="tk1" class="box"></label><div class="tb"><label for="tk1" class="tt">Confirm the Harbor demo slot with Sara</label><div class="tm"><span class="wh">today</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><details class="rd"><summary>✎ Owly drafted three answers</summary><div class="ropts"><button onclick="pick(this,'yes')">Yes, 10:00 works</button><button onclick="pick(this,'later')">Can we make it 11:00?</button><button onclick="pick(this,'no')">I can’t make it</button></div><div class="draft" hidden><div class="dh">To Sara Claes · from work · Owly’s draft, yours to change</div><div class="dt" contenteditable="true"></div><div class="acts"><button class="btn p" onclick="sendIt(this)">Send — asks your Approve on Telegram</button></div></div></details><a class="src" href="#m2"><span class="dot i-work"></span>Sara Claes: Re: Harbor demo for the team — Thursday</a></div></li></ul><p class="empty-today" id="empty-today" style="display:none">Nothing needs you today. Next: the viewing, Saturday 11:00.</p><h2><span>This week</span><span>3</span></h2><ul id="sect-this-week"><li class="tk a-work" data-sect="this-week"><input type="checkbox" id="tk2" onchange="onTaskChange(this)"><label for="tk2" class="box"></label><div class="tb"><label for="tk2" class="tt">Update the sales numbers in Sara’s sheet</label><div class="tm"><span class="wh">tomorrow, before 10:00</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m2"><span class="dot i-work"></span>Sara Claes: Re: Harbor demo for the team — Thursday</a></div></li><li class="tk a-gmail" data-sect="this-week"><input type="checkbox" id="tk3" onchange="onTaskChange(this)"><label for="tk3" class="box"></label><div class="tb"><label for="tk3" class="tt">Go to the open viewing, Kerkstraat 14</label><div class="tm"><span class="wh">Saturday 11:00</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><div class="hint">Owly can add it to your calendar <button class="link" onclick="this.parentNode.textContent='Asked — waits for your Approve.'">Do it</button></div><a class="src" href="#m7"><span class="dot i-gmail"></span>Immoweb: 3 new apartments match 'Brussel centrum, 2 bedrooms'</a></div></li><li class="tk a-mesh" data-sect="this-week"><input type="checkbox" id="tk4" onchange="onTaskChange(this)"><label for="tk4" class="box"></label><div class="tb"><label for="tk4" class="tt">Update ca-certificates-mozilla and php on your computers</label><div class="tm"><span class="wh">this week</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m4"><span class="dot i-mesh"></span>security-announce: Security: ca-certificates-mozilla, php, php-legacy</a></div></li></ul><h2><span>Later</span><span>3</span></h2><ul id="sect-later"><li class="tk a-mesh" data-sect="later"><input type="checkbox" id="tk5" onchange="onTaskChange(this)"><label for="tk5" class="box"></label><div class="tb"><label for="tk5" class="tt">Update yt-dlp by hand</label><div class="tm"><span class="wh">this week</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m5"><span class="dot i-mesh"></span>github-actions[bot]: yt-dlp 2026.10.21 released</a></div></li><li class="tk a-gmail" data-sect="later"><input type="checkbox" id="tk6" onchange="onTaskChange(this)"><label for="tk6" class="box"></label><div class="tb"><label for="tk6" class="tt">Pick which of Lena’s photos to print</label><div class="tm"><span class="wh">no rush</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m25"><span class="dot i-gmail"></span>Lena Janssens: Foto's van zondag</a></div></li><li class="tk a-gmail" data-sect="later"><input type="checkbox" id="tk7" onchange="onTaskChange(this)"><label for="tk7" class="box"></label><div class="tb"><label for="tk7" class="tt">Check the 404 pages on example.org</label><div class="tm"><span class="wh">no rush</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m6"><span class="dot i-gmail"></span>Google Search Console: New 'Not found (404)' reason on example.org</a></div></li></ul><details id="handled-wrap" style="display:none"><summary>Handled today · <span id="handled-count">0</span></summary><ul id="handled-list"></ul></details><h2><span>You promised</span><span>1</span></h2><ul><li class="pr a-work"><span class="pk me">you →</span><div><div>Bring the updated sales numbers to the demo</div><small class="muted">tomorrow 10:00 · <a href="#m2">Sara Claes</a></small></div></li></ul><h2><span>Waiting on others</span><span>2</span></h2><ul class="waitlist"><li class="wo a-work"><div class="wob"><div><b>Tim:</b> the error analysis after the logs <small class="muted">(asked yesterday)</small></div><a class="src" href="#m17"><span class="dot i-work"></span>Tim Jacobs: Logs from yesterday's import run</a><div class="draft" id="nudge0" hidden><div class="dh">To Tim · Owly’s draft, yours to change</div><div class="dt" contenteditable="true">Hi Tim,<br><br>Any chance of the error analysis after the logs soon? Just checking in.<br><br>Thanks,<br>Alex</div><div class="acts"><button class="btn p" onclick="sendIt(this)">Send — asks your Approve on Telegram</button></div></div></div><button class="btn" onclick="document.getElementById('nudge0').hidden=false;this.style.display='none'">Nudge</button></li><li class="wo a-gmail"><div class="wob"><div><b>Immoweb agent:</b> the floor plan’s second page <small class="muted">(asked yesterday)</small></div><a class="src" href="#m7"><span class="dot i-gmail"></span>Immoweb: 3 new apartments match 'Brussel centrum, 2 bedrooms'</a><div class="draft" id="nudge1" hidden><div class="dh">To Immoweb agent · Owly’s draft, yours to change</div><div class="dt" contenteditable="true">Hi Immoweb agent,<br><br>Any chance of the floor plan’s second page soon? Just checking in.<br><br>Thanks,<br>Alex</div><div class="acts"><button class="btn p" onclick="sendIt(this)">Send — asks your Approve on Telegram</button></div></div></div><button class="btn" onclick="document.getElementById('nudge1').hidden=false;this.style.display='none'">Nudge</button></li></ul><h2><span>On its way</span><span>3</span></h2><ul><li class="pr a-gmail"><span class="pk them">→ you</span><div><div>Coolblue delivers your monitor</div><small class="muted">tomorrow 13:00–17:00 · <a href="#m9">Coolblue</a></small></div></li><li class="pr a-mesh"><span class="pk them">→ you</span><div><div>Hostco debits €40.00</div><small class="muted">28 Oct · <a href="#m10">Hostco</a></small></div></li><li class="pr a-gmail"><span class="pk them">→ you</span><div><div>Telco debits €55.00</div><small class="muted">5 Nov · <a href="#m12">Telco</a></small></div></li></ul><h2><span>Good to know</span></h2><div class="fyi">Tim zipped yesterday’s import logs (<a href="#m17">open</a>). Plex was down 6 minutes at 04:06 and recovered.</div><details class="qd2"><summary>Read later · 6 newsletters</summary><div class="qi2"><span class="dot i-gmail"></span><a href="#m22">Strava — Your weekly summary: 42 km</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m18">Spotify — New releases for you this Friday</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m19">Tweakers — Dagelijkse nieuwsbrief</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m20">IKEA Family — Herfstdeals tot 30%</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m21">The Verge — Verge Daily: the week in AI agents</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m23">Decathlon — Klaar voor de winter?</a></div></details><h2><span>Not a task</span></h2><div class="warn">⚠ A mail pretending to be KBC wants you to log in within 24 hours. It’s a scam; there’s nothing to do. <a href="#m3" style="color:inherit;text-decoration:underline">see why</a></div></div><aside class="side"><div class="hd"><span class="owl"><svg viewBox="0 0 64 64" class="owlsvg" aria-hidden="true"><circle cx="32" cy="34" r="26" fill="#4b3a7a"/><path d="M10 18 L22 26 L18 12Z M54 18 L42 26 L46 12Z" fill="#4b3a7a"/><circle cx="23" cy="31" r="10" fill="#fff"/><circle cx="41" cy="31" r="10" fill="#fff"/><circle cx="24" cy="32" r="4.5" fill="#1d1640"/><circle cx="40" cy="32" r="4.5" fill="#1d1640"/><circle cx="25.5" cy="30.5" r="1.4" fill="#fff"/><circle cx="41.5" cy="30.5" r="1.4" fill="#fff"/><path d="M29 40 L32 45 L35 40Z" fill="#f2b84b"/><path d="M16 48 Q32 58 48 48" stroke="#8f7cc8" stroke-width="3" fill="none"/></svg></span><div><b>Owly</b><div class="muted">ask about any mail · nothing is sent without your Approve</div></div><button class="link small learned-btn" onclick="toggleLessons()">Owly learned (<span id="learned-count">1</span>)</button></div><ul id="lessons-list" class="lessons-panel" hidden></ul><div id="chat"></div><div class="dock"><div class="in"><div class="chips"><button onclick="ask(this.textContent,'queue')">What would you do? <span class="badge2" id="queuebadge">5</span></button><button onclick="ask(this.textContent,'due')">What’s due this week?</button><button onclick="ask(this.textContent,'sara')">Answer Sara</button><button onclick="ask(this.textContent,'person_sara')">What’s going on with Sara?</button><button onclick="ask(this.textContent,'photos')">Show Lena’s photos</button><button onclick="ask(this.textContent,'scam')">Anything suspicious?</button><button onclick="ask(this.textContent,'money')">What did I spend?</button><button onclick="ask(this.textContent,'news')">The newsletters, briefly</button><button onclick="ask(this.textContent,'hostco_invoice')">Where’s the Hostco invoice?</button><button onclick="ask(this.textContent,'write_lena')">Mail Lena that I’ll pick the photos tomorrow</button><button onclick="ask(this.textContent,'teach_strava')">Stop telling me about Strava</button></div><form class="ask" onsubmit="free(event)"><input id="q" placeholder="Ask Owly anything about your mail…" autocomplete="off"><button>Ask</button></form></div></div></aside></div></div><section class="pane a-work" id="m17"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz17">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>Logs from yesterday's import run</h1><div class="meta"><span class="dot i-work"></span> <b>Tim Jacobs</b> <tim.jacobs@work.example><br>work / INBOX · Thu 22 Oct 2026, 09:25</div><div class="note" style="background:var(--work-bg)">Work</div><div class="atts"><div class="lbl">1 attachment</div><a class="att" href="#a17-1"><span class="th th-s k-zip"><div class="zipi">▤</div><em>ZIP</em></span><span><b>import-logs.zip</b><small>4.6 MB</small></span></a></div><div class="body"><p>Here are yesterday's logs, zipped. The errors are in errors.csv.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m7"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz7">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>3 new apartments match 'Brussel centrum, 2 bedrooms'</h1><div class="meta"><span class="dot i-gmail"></span> <b>Immoweb</b> <alerts@immoweb.example><br>gmail / INBOX · Thu 22 Oct 2026, 09:10</div><div class="note" style="background:var(--gmail-bg)"><b>★ Matters</b> · due Sat 24 Oct · Housing<br>Matches the search you set up; a viewing is on Saturday.</div><div class="atts"><div class="lbl">2 attachments</div><a class="att" href="#a7-1"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g210" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(210,70%,78%)"/><stop offset="1" stop-color="hsl(210,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g210)"/><circle cx="92" cy="20" r="9" fill="hsl(250,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(210,35%,30%)" opacity=".75"/></svg><em>IMG</em></span><span><b>living-room.jpg</b><small>1.2 MB</small></span></a><a class="att" href="#a7-2"><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span><span><b>floor-plan.pdf</b><small>340 KB</small></span></a></div><div class="body"><p>Three new listings match your search.</p><p>Kerkstraat 14, 2nd floor — €925/month — open viewing Saturday 11:00.</p><p>Photos and the floor plan are attached.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Housing"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-work" id="m2"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz2">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>Re: Harbor demo for the team — Thursday</h1><div class="meta"><span class="dot i-work"></span> <b>Sara Claes</b> <sara.claes@work.example><br>work / INBOX · Thu 22 Oct 2026, 08:55</div><div class="note" style="background:var(--work-bg)"><b>★ Matters</b> · due tomorrow · Work<br>A colleague asks for a reply before a meeting tomorrow at 10:00.</div><p class="muted" style="font-size:13px">↳ the newest of 4 messages in this conversation · <a href="#">show all</a></p><div class="atts"><div class="lbl">2 attachments</div><a class="att" href="#a2-1"><span class="th th-s k-ics"><div class="cal"><b>OCT</b><span>23</span></div><em>ICS</em></span><span><b>demo-agenda.ics</b><small>2 KB</small></span></a><a class="att" href="#a2-2"><span class="th th-s k-sheet"><div class="grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><em>XLS</em></span><span><b>sales-numbers.xlsx</b><small>18 KB</small></span></a></div><div class="body"><p>Hi Alex,</p><p>Can you confirm the 10:00 slot tomorrow for the Harbor demo with the team? I've attached the invite.</p><p>Could you also bring the latest sales numbers? I put last week's in the sheet; please update the totals.</p><p>Thanks! Sara</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m22"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz22">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Your weekly summary: 42 km</h1><div class="meta"><span class="dot i-gmail"></span> <b>Strava</b> <no-reply@strava.example><br>gmail / INBOX · Thu 22 Oct 2026, 07:45</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m1"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz1">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Registered mail arrives today, 08:00–14:00</h1><div class="meta"><span class="dot i-gmail"></span> <b>bpost</b> <noreply@bpost.example><br>gmail / INBOX · Thu 22 Oct 2026, 07:12</div><div class="note" style="background:var(--gmail-bg)"><b>★ Matters</b> · due today · Post & deliveries<br>Genuine notice from bpost's own domain; no payment or login asked. Needs you today.</div><div class="body"><p>Beste klant,</p><p>Uw aangetekende zending wordt vandaag geleverd tussen 08:00 en 14:00 op Stationsstraat 1, 1000 Brussel.</p><p>Iemand moet aanwezig zijn om te tekenen, of u machtigt een volmachthouder via de app.</p><p>Met vriendelijke groeten, bpost</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Post & deliveries"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m9"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz9">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Your order 48213977 is on its way</h1><div class="meta"><span class="dot i-gmail"></span> <b>Coolblue</b> <info@coolblue.example><br>gmail / INBOX · Thu 22 Oct 2026, 06:50</div><div class="note" style="background:var(--gmail-bg)">Orders & invoices</div><div class="body"><p>Your USB-C monitor arrives tomorrow between 13:00 and 17:00.</p><p>Track it in the app.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Orders & invoices"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m3"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz3">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Uw rekening wordt geblokkeerd — bevestig binnen 24 uur</h1><div class="meta"><span class="dot i-gmail"></span> <b>KBC Bank</b> <security@kbc-verificatie.example><br>gmail / Junk · Thu 22 Oct 2026, 06:03</div><div class="note scam"><b>⚠ Scam warning</b> · Junk<br>Sent from kbc-verificatie.example, not KBC's own domain; threatens a block within 24 hours and asks you to log in through a link. The provider filed it as junk.<br><small>Links are not shown. Nothing in this mail is loaded.</small></div><div class="body"><p>Geachte klant,</p><p>Wegens verdachte activiteit wordt uw rekening binnen 24 uur geblokkeerd.</p><p>Bevestig uw gegevens via de onderstaande link om dit te voorkomen.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Banking"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m24"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz24">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>[Up] plex.example.org is back after 6 min</h1><div class="meta"><span class="dot i-mesh"></span> <b>Uptime Kuma</b> <alerts@example.org><br>mesh / INBOX · Thu 22 Oct 2026, 04:12</div><div class="note" style="background:var(--mesh-bg)">Site monitoring</div><div class="body"><p>plex.example.org was down from 04:06 to 04:12 (6 minutes).</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Site monitoring"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m13"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz13">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>mesh-catalog #397 merged</h1><div class="meta"><span class="dot i-mesh"></span> <b>Gitea</b> <gitea@example.org><br>mesh / INBOX · Wed 21 Oct 2026, 23:58</div><div class="note" style="background:var(--mesh-bg)">Software releases</div><div class="body"><p>home merged pull request #397 into main.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Software releases"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m4"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz4">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>Security: ca-certificates-mozilla, php, php-legacy</h1><div class="meta"><span class="dot i-mesh"></span> <b>security-announce</b> <security-announce@project.example><br>mesh / INBOX · Wed 21 Oct 2026, 22:40</div><div class="note" style="background:var(--mesh-bg)"><b>★ Matters</b> · Security advisories<br>Genuine advisory from a software project you use.</div><div class="body"><p>ca-certificates-mozilla >= 3.131.1-1 fixes a trust-store issue that allows a man-in-the-middle.</p><p>php >= 8.5.12 and php-legacy >= 8.3.36 fix remote code execution CVEs.</p><p>Update promptly with pacman -Syu.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Security advisories"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m11"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz11">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Bestelling bevestigd: USB-C dock</h1><div class="meta"><span class="dot i-gmail"></span> <b>bol.example</b> <klantenservice@bol.example><br>gmail / INBOX · Wed 21 Oct 2026, 21:14</div><div class="note" style="background:var(--gmail-bg)">Orders & invoices</div><div class="body"><p>Bedankt voor je bestelling. We laten het weten zodra hij onderweg is.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Orders & invoices"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m25"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz25">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Foto's van zondag</h1><div class="meta"><span class="dot i-gmail"></span> <b>Lena Janssens</b> <lena.janssens@gmail.example><br>gmail / INBOX · Wed 21 Oct 2026, 20:12</div><div class="note" style="background:var(--gmail-bg)">Family</div><p class="muted" style="font-size:13px">↳ the newest of 2 messages in this conversation · <a href="#">show all</a></p><div class="atts"><div class="lbl">3 attachments</div><a class="att" href="#a25-1"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg><em>IMG</em></span><span><b>IMG_2041.jpg</b><small>3.4 MB</small></span></a><a class="att" href="#a25-2"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg><em>IMG</em></span><span><b>IMG_2044.jpg</b><small>2.9 MB</small></span></a><a class="att" href="#a25-3"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg><em>IMG</em></span><span><b>IMG_2050.jpg</b><small>3.1 MB</small></span></a></div><div class="body"><p>Hier zijn de foto's van zondag in het park!</p><p>Zeg maar welke je wil laten afdrukken.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Family"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m5"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz5">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>yt-dlp 2026.10.21 released</h1><div class="meta"><span class="dot i-mesh"></span> <b>github-actions[bot]</b> <notifications@github.example><br>mesh / INBOX · Wed 21 Oct 2026, 19:05</div><div class="note" style="background:var(--mesh-bg)"><b>★ Matters</b> · Software releases<br>Genuine GitHub release notice with a security fix.</div><div class="body"><p>yt-dlp 2026.10.21 is out.</p><p>Executables from before this release bundle an old certifi; download the new release instead of using -U.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Software releases"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m18"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz18">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>New releases for you this Friday</h1><div class="meta"><span class="dot i-gmail"></span> <b>Spotify</b> <no-reply@spotify.example><br>gmail / INBOX · Wed 21 Oct 2026, 17:00</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-work" id="m14"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz14">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>[HB-412] Report totals are counted twice</h1><div class="meta"><span class="dot i-work"></span> <b>Tracker</b> <tracker@tools.example><br>work / INBOX · Wed 21 Oct 2026, 16:20</div><div class="note" style="background:var(--work-bg)">Work</div><div class="body"><p>Sara Claes assigned HB-412 to you.</p><p>The report counts a table split over two pages as two tables.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m6"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz6">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>New 'Not found (404)' reason on example.org</h1><div class="meta"><span class="dot i-gmail"></span> <b>Google Search Console</b> <sc-noreply@google.example><br>gmail / INBOX · Wed 21 Oct 2026, 14:31</div><div class="note" style="background:var(--gmail-bg)"><b>★ Matters</b> · Site monitoring<br>Genuine site-owner alert for a domain you run; no deadline.</div><div class="body"><p>Search Console has identified that some pages on example.org are affected by a new 'Not found (404)' reason.</p><p>Open the Pages report to review them.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Site monitoring"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m10"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz10">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>Invoice R0024581133 for October</h1><div class="meta"><span class="dot i-mesh"></span> <b>Hostco</b> <billing@hostco.example><br>mesh / INBOX · Wed 21 Oct 2026, 11:22</div><div class="note" style="background:var(--mesh-bg)">Orders & invoices</div><div class="atts"><div class="lbl">1 attachment</div><a class="att" href="#a10-1"><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span><span><b>R0024581133.pdf</b><small>52 KB</small></span></a></div><div class="body"><p>Dear customer,</p><p>your invoice R0024581133 for October is attached. The amount will be debited on 28 October.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Orders & invoices"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-work" id="m15"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz15">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>Page updated: Release checklist Q4</h1><div class="meta"><span class="dot i-work"></span> <b>Wiki</b> <wiki@tools.example><br>work / INBOX · Wed 21 Oct 2026, 10:05</div><div class="note" style="background:var(--work-bg)">Work</div><div class="body"><p>Tim Jacobs updated Release checklist Q4.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m19"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz19">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Dagelijkse nieuwsbrief</h1><div class="meta"><span class="dot i-gmail"></span> <b>Tweakers</b> <nieuwsbrief@tweakers.example><br>gmail / INBOX · Wed 21 Oct 2026, 08:00</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m8"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz8">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Terms of Service and Agentic AI guidelines updated</h1><div class="meta"><span class="dot i-gmail"></span> <b>Cloudco</b> <CloudPlatform-noreply@google.example><br>gmail / INBOX · Tue 20 Oct 2026, 18:02</div><div class="note" style="background:var(--gmail-bg)"><b>★ Matters</b> · Legal & terms<br>Legal notice affecting a Cloudco account holder; no links or payment asked.</div><div class="body"><p>We updated the Cloudco Terms of Service and introduced Agentic AI Responsible Use Guidelines, effective 12 October 2026.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Legal & terms"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m20"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz20">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Herfstdeals tot 30%</h1><div class="meta"><span class="dot i-gmail"></span> <b>IKEA Family</b> <ikea@ikea.example><br>gmail / INBOX · Tue 20 Oct 2026, 16:45</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m12"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz12">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Je factuur van oktober staat klaar</h1><div class="meta"><span class="dot i-gmail"></span> <b>Telco</b> <noreply@telco.example><br>gmail / INBOX · Tue 20 Oct 2026, 12:00</div><div class="note" style="background:var(--gmail-bg)">Orders & invoices</div><div class="atts"><div class="lbl">1 attachment</div><a class="att" href="#a12-1"><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span><span><b>factuur-oktober.pdf</b><small>88 KB</small></span></a></div><div class="body"><p>Je factuur van oktober staat klaar. Het bedrag wordt op 5 november gedomicilieerd.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Orders & invoices"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-work" id="m16"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz16">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>Planned maintenance Thursday 23:00</h1><div class="meta"><span class="dot i-work"></span> <b>Work IT</b> <it-service@work.example><br>work / INBOX · Tue 20 Oct 2026, 09:30</div><div class="note" style="background:var(--work-bg)">Work</div><div class="body"><p>The office printer is down for maintenance on Thursday from 23:00 to 01:00.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m21"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz21">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Verge Daily: the week in AI agents</h1><div class="meta"><span class="dot i-gmail"></span> <b>The Verge</b> <newsletter@theverge.example><br>gmail / INBOX · Tue 20 Oct 2026, 07:30</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m23"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz23">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Klaar voor de winter?</h1><div class="meta"><span class="dot i-gmail"></span> <b>Decathlon</b> <news@decathlon.example><br>gmail / INBOX · Mon 19 Oct 2026, 15:00</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><div class="lb" id="a17-1"><div class="lb-bar"><a class="btn" href="#m17">← Back to the mail</a><b>import-logs.zip</b><span class="muted">4.6 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-zip"><table><tr><td>▤ run-2026-10-21.log</td><td class="muted">3.1 MB</td></tr><tr><td>▤ errors.csv</td><td class="muted">220 KB</td></tr><tr><td>▤ summary.json</td><td class="muted">1.1 MB</td></tr><tr><td>▤ README.txt</td><td class="muted">2 KB</td></tr></table><p class="muted">4 files · nothing is unpacked on the server</p></div></div></div><div class="lb" id="a7-1"><div class="lb-bar"><a class="btn" href="#m7">← Back to the mail</a><b>living-room.jpg</b><span class="muted">1.2 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-img"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g210" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(210,70%,78%)"/><stop offset="1" stop-color="hsl(210,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g210)"/><circle cx="92" cy="20" r="9" fill="hsl(250,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(210,35%,30%)" opacity=".75"/></svg></div></div><div class=lb-strip><a href="#a7-1" class="on"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g210" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(210,70%,78%)"/><stop offset="1" stop-color="hsl(210,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g210)"/><circle cx="92" cy="20" r="9" fill="hsl(250,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(210,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a7-2" class=""><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span></a></div></div><div class="lb" id="a7-2"><div class="lb-bar"><a class="btn" href="#m7">← Back to the mail</a><b>floor-plan.pdf</b><span class="muted">340 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-pdf"><div class="paper"><h3>Plattegrond</h3><div class="from">Immoweb</div><p>Appartement, 2 slaapkamers</p><p>Woonkamer 32 m²</p><p>Keuken 11 m²</p><p>Terras 9 m²</p><div class="lines"><i></i><i></i><i class="w"></i><i></i></div></div><p class="muted">page 1 of 2</p></div></div><div class=lb-strip><a href="#a7-1" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g210" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(210,70%,78%)"/><stop offset="1" stop-color="hsl(210,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g210)"/><circle cx="92" cy="20" r="9" fill="hsl(250,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(210,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a7-2" class="on"><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span></a></div></div><div class="lb" id="a2-1"><div class="lb-bar"><a class="btn" href="#m2">← Back to the mail</a><b>demo-agenda.ics</b><span class="muted">2 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-ics"><div class="cal big"><b>THU</b><span>23</span><small>OCT</small></div><div><h3>Harbor demo for the team</h3><p>Thursday 23 October, 10:00–11:00</p><p class="muted">Room Antwerpen 2.14 · organiser Sara Claes · 6 invited</p><p><a class="btn p" href="#">Accept</a> <a class="btn" href="#">Maybe</a> <a class="btn" href="#">Decline</a></p></div></div></div><div class=lb-strip><a href="#a2-1" class="on"><span class="th th-s k-ics"><div class="cal"><b>OCT</b><span>23</span></div><em>ICS</em></span></a><a href="#a2-2" class=""><span class="th th-s k-sheet"><div class="grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><em>XLS</em></span></a></div></div><div class="lb" id="a2-2"><div class="lb-bar"><a class="btn" href="#m2">← Back to the mail</a><b>sales-numbers.xlsx</b><span class="muted">18 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-sheet"><table><tr><th>Week</th><th>Orders</th><th>Revenue</th><th>Returns</th></tr><tr><td>41</td><td>120</td><td>€6 400</td><td>9</td></tr><tr><td>42</td><td>135</td><td>€7 150</td><td>11</td></tr><tr><td>43</td><td>—</td><td>—</td><td>—</td></tr><tr><td>Total</td><td>255</td><td>€13 550</td><td>20</td></tr></table><p class="muted">Sheet 1 of 2 · read-only preview</p></div></div><div class=lb-strip><a href="#a2-1" class=""><span class="th th-s k-ics"><div class="cal"><b>OCT</b><span>23</span></div><em>ICS</em></span></a><a href="#a2-2" class="on"><span class="th th-s k-sheet"><div class="grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><em>XLS</em></span></a></div></div><div class="lb" id="a25-1"><div class="lb-bar"><a class="btn" href="#m25">← Back to the mail</a><b>IMG_2041.jpg</b><span class="muted">3.4 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-img"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg></div></div><div class=lb-strip><a href="#a25-1" class="on"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-2" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-3" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a></div></div><div class="lb" id="a25-2"><div class="lb-bar"><a class="btn" href="#m25">← Back to the mail</a><b>IMG_2044.jpg</b><span class="muted">2.9 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-img"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg></div></div><div class=lb-strip><a href="#a25-1" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-2" class="on"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-3" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a></div></div><div class="lb" id="a25-3"><div class="lb-bar"><a class="btn" href="#m25">← Back to the mail</a><b>IMG_2050.jpg</b><span class="muted">3.1 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-img"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg></div></div><div class=lb-strip><a href="#a25-1" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-2" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-3" class="on"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a></div></div><div class="lb" id="a10-1"><div class="lb-bar"><a class="btn" href="#m10">← Back to the mail</a><b>R0024581133.pdf</b><span class="muted">52 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-pdf"><div class="paper"><h3>Invoice R0024581133</h3><div class="from">Hostco</div><p>Small server — €30.00</p><p>Backup space — €8.00</p><p>Address — €2.00</p><p>Total incl. VAT — €40.00</p><div class="lines"><i></i><i></i><i class="w"></i><i></i></div></div><p class="muted">page 1 of 2</p></div></div></div><div class="lb" id="a12-1"><div class="lb-bar"><a class="btn" href="#m12">← Back to the mail</a><b>factuur-oktober.pdf</b><span class="muted">88 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-pdf"><div class="paper"><h3>Factuur oktober</h3><div class="from">Telco</div><p>Internet — €55.00</p><p>Mobiel — €17.00</p><p>Korting bundel — −€6.00</p><p>Totaal — €55.00</p><div class="lines"><i></i><i></i><i class="w"></i><i></i></div></div><p class="muted">page 1 of 2</p></div></div></div><script>const R={"yes": "Hi Sara,<br><br>10:00 tomorrow works for me. I'll bring the updated sales numbers: week 42 came to 135 orders.<br><br>See you then,<br>Alex", "later": "Hi Sara,<br><br>Could we make it 11:00 instead? I'd like the morning to finish the week 43 numbers so they're complete for the team.<br><br>Thanks,<br>Alex", "no": "Hi Sara,<br><br>I can't make it tomorrow, sorry. Could Tim present? I'll send him the updated sales numbers tonight.<br><br>Alex"};
|
||
function pick(b,k){const box=b.closest('.ropts');box.querySelectorAll('button').forEach(x=>x.classList.remove('on'));b.classList.add('on');const d=box.nextElementSibling;d.hidden=false;d.querySelector('.dt').innerHTML=R[k]}
|
||
function sendIt(b){const d=b.closest('.draft');b.disabled=true;b.textContent='Asked — waiting for your Approve on Telegram';const n=document.createElement('div');n.className='sentnote';n.textContent='Nothing is sent until you approve it on your phone.';d.appendChild(n)}
|
||
const boxes=[...document.querySelectorAll('.tk input')];
|
||
function upd(){document.getElementById('pg').style.width=(100*boxes.filter(b=>b.checked).length/boxes.length)+'%'}
|
||
function snooze(b){const li=b.closest('.tk');li.classList.add('snz');b.textContent='back tomorrow morning';b.disabled=true}
|
||
function checkTodayEmpty(){const ul=document.getElementById('sect-today'),p=document.getElementById('empty-today');if(!ul||!p)return;p.style.display=ul.children.length===0?'block':'none'}
|
||
function refreshHandled(){const n=document.getElementById('handled-list').children.length;document.getElementById('handled-count').textContent=n;document.getElementById('handled-wrap').style.display=n?'block':'none'}
|
||
function onTaskChange(cb){if(cb.checked)moveToHandled(cb)}
|
||
function moveToHandled(cb){const li=cb.closest('li');if(!li)return;document.getElementById('handled-list').appendChild(li);
|
||
if(!li.querySelector('.undo-btn')){const u=document.createElement('button');u.className='link small undo-btn';u.textContent='Undo';u.onclick=function(){undoTask(li)};li.querySelector('.tb').appendChild(u)}
|
||
refreshHandled();upd();checkTodayEmpty()}
|
||
function undoTask(li){const cb=li.querySelector('input[type=checkbox]');if(cb)cb.checked=false;const target=document.getElementById('sect-'+li.dataset.sect);if(target)target.appendChild(li);
|
||
const btn=li.querySelector('.undo-btn');if(btn)btn.remove();refreshHandled();upd();checkTodayEmpty()}
|
||
|
||
let LESSONS=["Hostco invoices are paid automatically"];
|
||
function renderLessons(){document.getElementById('learned-count').textContent=LESSONS.length;document.getElementById('lessons-list').innerHTML=LESSONS.map(l=>'<li>'+l+'</li>').join('')}
|
||
function toggleLessons(){const p=document.getElementById('lessons-list');p.hidden=!p.hidden}
|
||
function addLesson(t){if(!LESSONS.includes(t)){LESSONS.push(t);renderLessons()}}
|
||
function undoLesson(btn){LESSONS=LESSONS.filter(l=>l!=='Strava mails never matter');renderLessons();btn.closest('.learned').innerHTML='Undone — Owly will mention Strava again.'}
|
||
renderLessons();
|
||
|
||
function setMode(mode){const g=document.getElementById('t-gmail'),me=document.getElementById('t-mesh'),mh=document.getElementById('t-work');
|
||
if(mode==='work'){g.checked=false;me.checked=false;mh.checked=true}else if(mode==='personal'){g.checked=true;me.checked=true;mh.checked=false}else{g.checked=true;me.checked=true;mh.checked=true}}
|
||
|
||
const A={"start": "Good morning, Alex. <b>25 mails</b> since yesterday; three need you:<a class=\"mc a-gmail\" href=\"#m1\"><span class=\"av i-gmail\">b</span><span class=\"mt\"><b>bpost</b><span>Registered mail arrives today, 08:00\u201314:00</span></span><span class=\"mw\"><span class=due>today</span></span></a><a class=\"mc a-work\" href=\"#m2\"><span class=\"av i-work\">S</span><span class=\"mt\"><b>Sara Claes</b><span>Re: Harbor demo for the team \u2014 Thursday</span></span><span class=\"mw\"><span class=due>tomorrow</span></span></a><a class=\"mc a-gmail\" href=\"#m7\"><span class=\"av i-gmail\">I</span><span class=\"mt\"><b>Immoweb</b><span>3 new apartments match 'Brussel centrum, 2 bedrooms'</span></span><span class=\"mw\"><span class=due>Sat 24 Oct</span></span></a>\n The rest is quiet. One mail tried to scam you; I kept it off your phone. <button class=\"link\" onclick=\"speak()\">\ud83d\udd0a Read it to me</button>", "due": "This week:<br>\u2022 <b>today before 14:00</b>, be home for bpost's registered mail (or authorise a proxy)<a class=\"mc a-gmail\" href=\"#m1\"><span class=\"av i-gmail\">b</span><span class=\"mt\"><b>bpost</b><span>Registered mail arrives today, 08:00\u201314:00</span></span><span class=\"mw\"><span class=due>today</span></span></a>\u2022 <b>tomorrow 10:00</b>, the Harbor demo; Sara wants a confirmation and the sales numbers<a class=\"mc a-work\" href=\"#m2\"><span class=\"av i-work\">S</span><span class=\"mt\"><b>Sara Claes</b><span>Re: Harbor demo for the team \u2014 Thursday</span></span><span class=\"mw\"><span class=due>tomorrow</span></span></a>\u2022 <b>Saturday 11:00</b>, an open viewing for the apartment on Kerkstraat<a class=\"mc a-gmail\" href=\"#m7\"><span class=\"av i-gmail\">I</span><span class=\"mt\"><b>Immoweb</b><span>3 new apartments match 'Brussel centrum, 2 bedrooms'</span></span><span class=\"mw\"><span class=due>Sat 24 Oct</span></span></a>", "sara": "Sara asks you to confirm tomorrow\u2019s 10:00 demo. Pick an answer and I\u2019ll write it out:<div class=\"ropts\"><button onclick=\"pick(this,'yes')\">Yes, 10:00 works</button><button onclick=\"pick(this,'later')\">Can we make it 11:00?</button><button onclick=\"pick(this,'no')\">I can\u2019t make it</button></div><div class=\"draft\" hidden><div class=\"dh\">To Sara Claes \u00b7 from work \u00b7 Owly\u2019s draft, yours to change</div><div class=\"dt\" contenteditable=\"true\"></div><div class=\"acts\"><button class=\"btn p\" onclick=\"sendIt(this)\">Send \u2014 asks your Approve on Telegram</button></div></div>", "sent": "Asked. The send waits for your Approve on Telegram; I'll tell you here when it's out.", "edit": "Tell me what to change: shorter, more formal, or something else?", "photos": "Lena sent three photos from Sunday in the park:<div class=\"pics\"><a href=\"#a25-1\"><span class=\"th th-m k-image\"><svg viewBox=\"0 0 120 80\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\"><defs><linearGradient id=\"g24\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"hsl(24,70%,78%)\"/><stop offset=\"1\" stop-color=\"hsl(24,45%,52%)\"/></linearGradient></defs><rect width=\"120\" height=\"80\" fill=\"url(#g24)\"/><circle cx=\"92\" cy=\"20\" r=\"9\" fill=\"hsl(64,90%,85%)\"/><path d=\"M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z\" fill=\"hsl(24,35%,30%)\" opacity=\".75\"/></svg><em>IMG</em></span></a><a href=\"#a25-2\"><span class=\"th th-m k-image\"><svg viewBox=\"0 0 120 80\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\"><defs><linearGradient id=\"g200\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"hsl(200,70%,78%)\"/><stop offset=\"1\" stop-color=\"hsl(200,45%,52%)\"/></linearGradient></defs><rect width=\"120\" height=\"80\" fill=\"url(#g200)\"/><circle cx=\"92\" cy=\"20\" r=\"9\" fill=\"hsl(240,90%,85%)\"/><path d=\"M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z\" fill=\"hsl(200,35%,30%)\" opacity=\".75\"/></svg><em>IMG</em></span></a><a href=\"#a25-3\"><span class=\"th th-m k-image\"><svg viewBox=\"0 0 120 80\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\"><defs><linearGradient id=\"g120\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"hsl(120,70%,78%)\"/><stop offset=\"1\" stop-color=\"hsl(120,45%,52%)\"/></linearGradient></defs><rect width=\"120\" height=\"80\" fill=\"url(#g120)\"/><circle cx=\"92\" cy=\"20\" r=\"9\" fill=\"hsl(160,90%,85%)\"/><path d=\"M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z\" fill=\"hsl(120,35%,30%)\" opacity=\".75\"/></svg><em>IMG</em></span></a></div>She asks which ones you'd like printed.<br><br>Reply in Dutch?<div class=\"ropts\"><button onclick=\"pickNL(this,'ja')\">Ja, morgen</button><button onclick=\"pickNL(this,'weekend')\">Dit weekend</button></div><div class=\"draft\" hidden><div class=\"dh\">Aan Lena Janssens \u00b7 vanaf gmail \u00b7 Owly\u2019s concept (Nederlands)</div><div class=\"dt\" contenteditable=\"true\"></div><div class=\"acts\"><button class=\"btn p\" onclick=\"sendIt(this)\">Send \u2014 asks your Approve on Telegram</button></div></div>", "scam": "Yes, one: a mail pretending to be <b>KBC</b>, from <i>kbc-verificatie.example</i>, threatening to block your account within 24 hours unless you log in through a link. Gmail filed it as junk too. I didn't tell your phone and I won't load anything from it.<a class=\"mc a-gmail\" href=\"#m3\"><span class=\"av i-gmail\">K</span><span class=\"mt\"><b>KBC Bank</b><span>Uw rekening wordt geblokkeerd \u2014 bevestig binnen 24 uur</span></span><span class=\"mw\">06:03</span></a>", "money": "Money this week: Hostco \u20ac40.00 (debited 28 Oct), Telco \u20ac55.00 (5 Nov), and your Coolblue monitor is on its way.<a class=\"mc a-mesh\" href=\"#m10\"><span class=\"av i-mesh\">H</span><span class=\"mt\"><b>Hostco</b><span>Invoice R0024581133 for October</span></span><span class=\"mw\">yesterday 11:22</span></a><a class=\"mc a-gmail\" href=\"#m12\"><span class=\"av i-gmail\">P</span><span class=\"mt\"><b>Telco</b><span>Je factuur van oktober staat klaar</span></span><span class=\"mw\">Tue 20 Oct</span></a><a class=\"mc a-gmail\" href=\"#m9\"><span class=\"av i-gmail\">C</span><span class=\"mt\"><b>Coolblue</b><span>Your order 48213977 is on its way</span></span><span class=\"mw\">06:50</span></a>", "news": "The newsletters, in three lines: Tweakers on new GPUs, The Verge on AI agents, and IKEA and Decathlon want to sell you autumn things. Nothing you need to act on.", "person_sara": "Everything with <b>Sara Claes</b>, newest first: the demo thread (4 messages, she\u2019s waiting on you since 08:55) and the HB-412 bug she assigned you yesterday.<a class=\"mc a-work\" href=\"#m2\"><span class=\"av i-work\">S</span><span class=\"mt\"><b>Sara Claes</b><span>Re: Harbor demo for the team \u2014 Thursday</span></span><span class=\"mw\"><span class=due>tomorrow</span></span></a><a class=\"mc a-work\" href=\"#m14\"><span class=\"av i-work\">J</span><span class=\"mt\"><b>Tracker</b><span>[HB-412] Report totals are counted twice</span></span><span class=\"mw\">yesterday 16:20</span></a>Want me to answer the demo question?", "queue": "Here\u2019s what I\u2019d like to do. Nothing happens without your yes.", "hostco_invoice": "Here\u2019s the Hostco invoice:<a class=\"mc a-mesh\" href=\"#a10-1\"><span class=\"th th-m k-pdf\"><div class=\"pg\"><i></i><i></i><i class=\"w\"></i><i></i><i class=\"w\"></i></div><em>PDF</em></span><span class=\"mt\"><b>R0024581133.pdf</b><span>Hostco \u00b7 52 KB</span></span><span class=\"mw\">open</span></a>", "write_lena": "Here\u2019s a mail to Lena, in Dutch:<div class=\"draft\"><div class=\"dh\">To Lena Janssens \u00b7 from gmail \u00b7 editable</div><div class=\"dt\" contenteditable=\"true\">Hoi Lena,<br><br>Ik kom morgen de foto\u2019s uitkiezen om af te drukken.<br><br>Tot dan,<br>Alex</div><div class=\"acts\"><button class=\"btn p\" onclick=\"sendIt(this)\">Send \u2014 asks your Approve on Telegram</button></div></div>", "teach_strava": "<div class=\"learned\"><b>\ud83e\udd89 Owly learned:</b> Strava mails never matter.<button class=\"link\" onclick=\"undoLesson(this)\">Undo</button></div>"};
|
||
const ACT=[["Archive the 7 newsletters", "they\u2019re in the paper trail if you want them"], ["Put Saturday 11:00 viewing in your calendar", "Kerkstraat 14"], ["Reply to Sara: \u201810:00 works\u2019", "the draft is in the conversation"], ["Report the KBC mail as phishing", "to Gmail, from the gmail account"], ["Unsubscribe from Decathlon and IKEA Family (never opened in 3 months)", "mock unsubscribe \u00b7 nothing is sent without your Approve"]];
|
||
const RNL={"ja": "Hoi Lena,<br><br>Ik kom morgen de foto\u2019s kiezen, dan print ik ze meteen.<br><br>Tot dan,<br>Alex", "weekend": "Hoi Lena,<br><br>Laat me dit weekend kiezen, dan stuur ik je mijn keuze.<br><br>Liefs,<br>Alex"};
|
||
const OWL="<svg viewBox=\"0 0 64 64\" class=\"owlsvg\" aria-hidden=\"true\"><circle cx=\"32\" cy=\"34\" r=\"26\" fill=\"#4b3a7a\"/><path d=\"M10 18 L22 26 L18 12Z M54 18 L42 26 L46 12Z\" fill=\"#4b3a7a\"/><circle cx=\"23\" cy=\"31\" r=\"10\" fill=\"#fff\"/><circle cx=\"41\" cy=\"31\" r=\"10\" fill=\"#fff\"/><circle cx=\"24\" cy=\"32\" r=\"4.5\" fill=\"#1d1640\"/><circle cx=\"40\" cy=\"32\" r=\"4.5\" fill=\"#1d1640\"/><circle cx=\"25.5\" cy=\"30.5\" r=\"1.4\" fill=\"#fff\"/><circle cx=\"41.5\" cy=\"30.5\" r=\"1.4\" fill=\"#fff\"/><path d=\"M29 40 L32 45 L35 40Z\" fill=\"#f2b84b\"/><path d=\"M16 48 Q32 58 48 48\" stroke=\"#8f7cc8\" stroke-width=\"3\" fill=\"none\"/></svg>";
|
||
const chat=document.getElementById('chat');
|
||
function bubble(html,me){const d=document.createElement('div');d.className='msg'+(me?' me':'');d.innerHTML=(me?'':'<span class="owl">'+OWL+'</span>')+'<div class="bub">'+html+'</div>';chat.appendChild(d);d.scrollIntoView({behavior:'smooth',block:'end'});return d}
|
||
function queue(){return '<div class="queue">'+ACT.map((a,i)=>'<div class="qa" id="qa'+i+'"><div>'+a[0]+'<small>'+a[1]+'</small></div><button class="btn p" onclick="this.closest(\'.qa\').classList.add(\'ok\')">Approve</button><button class="btn" onclick="this.closest(\'.qa\').remove()">Not now</button></div>').join('')+'</div>'}
|
||
function say(k){const t=bubble('<span class="typing">Owly is reading…</span>');setTimeout(()=>{t.querySelector('.bub').innerHTML=A[k]+(k==='queue'?queue():'');if(k==='teach_strava')addLesson('Strava mails never matter')},600)}
|
||
function ask(text,k){bubble(text.replace(/<[^>]+>/g,'').replace(/[0-9]+$/,''),true);say(k)}
|
||
function pickNL(b,k){const box=b.closest('.ropts');box.querySelectorAll('button').forEach(x=>x.classList.remove('on'));b.classList.add('on');const d=box.nextElementSibling;d.hidden=false;d.querySelector('.dt').innerHTML=RNL[k]}
|
||
function queryOwly(q){bubble(q.replace(/</g,'<'),true);const l=q.toLowerCase();
|
||
const k=/hostco/.test(l)?'hostco_invoice':/strava/.test(l)?'teach_strava':/mail lena|tell lena|pick the photos tomorrow/.test(l)?'write_lena':/going on|with sara|from sara/.test(l)?'person_sara':/due|week|deadline|today/.test(l)?'due':/sara|demo|reply|answer/.test(l)?'sara':/photo|foto|lena|picture/.test(l)?'photos':/scam|phish|suspic|kbc/.test(l)?'scam':/money|spend|invoice|bill/.test(l)?'money':/news/.test(l)?'news':/would you|suggest|do for me/.test(l)?'queue':null;
|
||
if(k)say(k);else{const t=bubble('<span class="typing">Owly is reading…</span>');setTimeout(()=>{t.querySelector('.bub').innerHTML='I’d search your three accounts for “'+q.replace(/</g,'<')+'” and answer with the mails I found. (This mockup only knows the suggestions.)'},600)}}
|
||
function free(e){e.preventDefault();const q=document.getElementById('q').value.trim();if(!q)return;document.getElementById('q').value='';queryOwly(q)}
|
||
function topSearch(e){e.preventDefault();const inp=document.getElementById('topsearch');const q=inp.value.trim();if(!q)return;inp.value='';const sheet=document.getElementById('sheet');if(sheet)sheet.checked=true;queryOwly(q)}
|
||
function speak(){if(!('speechSynthesis' in window)){alert('This browser cannot speak.');return}speechSynthesis.cancel();const u=new SpeechSynthesisUtterance("Good morning, Alex. Twenty-five mails since yesterday. Three need you. A registered letter from bpost arrives before two this afternoon; someone has to sign. Sara wants you to confirm tomorrow's demo at ten and bring the sales numbers. And a flat in Brussel centre has an open viewing on Saturday at eleven. One mail pretending to be KBC is a scam; I kept it off your phone.");u.lang='en-GB';u.rate=1.02;speechSynthesis.speak(u)}
|
||
|
||
let hlIndex=-1;
|
||
function taskEls(){return [...document.querySelectorAll('#sect-today .tk, #sect-this-week .tk, #sect-later .tk')]}
|
||
function highlight(i){const els=taskEls();if(!els.length)return;if(hlIndex>=0&&els[hlIndex])els[hlIndex].classList.remove('hl');hlIndex=Math.max(0,Math.min(i,els.length-1));els[hlIndex].classList.add('hl');els[hlIndex].scrollIntoView({block:'center',behavior:'smooth'})}
|
||
function toggleShortcuts(){const o=document.getElementById('shortcuts');o.style.display=o.style.display==='flex'?'none':'flex'}
|
||
document.addEventListener('keydown',e=>{const tag=(e.target.tagName||'').toLowerCase();if(tag==='input'||tag==='textarea'||e.target.isContentEditable){if(e.key==='Escape')e.target.blur();return}
|
||
if(e.key==='j'){highlight(hlIndex+1);e.preventDefault()}
|
||
else if(e.key==='k'){highlight(hlIndex-1);e.preventDefault()}
|
||
else if(e.key==='x'){const els=taskEls();if(hlIndex>=0&&els[hlIndex]){const cb=els[hlIndex].querySelector('input[type=checkbox]');if(cb&&!cb.checked){cb.checked=true;onTaskChange(cb)}}e.preventDefault()}
|
||
else if(e.key==='r'){const els=taskEls();if(hlIndex>=0&&els[hlIndex]){const d=els[hlIndex].querySelector('details.rd');if(d){d.open=true;d.scrollIntoView({block:'center'})}}e.preventDefault()}
|
||
else if(e.key==='/'){const q=document.getElementById('q');if(q)q.focus();e.preventDefault()}
|
||
else if(e.key==='?'){toggleShortcuts();e.preventDefault()}});
|
||
checkTodayEmpty();
|
||
bubble('Ask me anything about your mail, or tap a suggestion. I can also draft replies and propose what to tidy up.');
|
||
</script></body></html> |