diff --git a/VERSION b/VERSION index 109a20f..b8522ca 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.2.22 +0.3.00 diff --git a/public/css/teach.css b/public/css/teach.css index e683997..8a9f691 100644 --- a/public/css/teach.css +++ b/public/css/teach.css @@ -1,68 +1,106 @@ -/* teach - alle opmaak */ +/* teach - alle opmaak + Ontwerptaal "teachus.today": minimalistisch, vlakke kleuren uit het uil-logo, + ronde typografie (Quicksand), dunne lijnen, uniforme control-hoogtes. */ + @font-face{ + font-family:"Quicksand"; + src:url("../fonts/quicksand.woff2") format("woff2"); + font-weight:300 700; font-display:swap; + } :root{ - --bg:#eef3f8; --panel:#ffffff; --ink:#26344a; --muted:#7b8aa3; - --blue:#3b7dd8; --blue-d:#2b62b0; --red:#e0554d; --green:#3fae6a; - --yellow:#f7c948; --purple:#9b59b6; --orange:#f28c38; + /* logo-palet (vlakke kleuren, geen neon) */ + --navy:#1d3461; --blue:#2f6fe4; --blue-d:#2456b8; --teal:#18c5c0; + --cyan:#3ac2e8; --pink:#e83e8c; --purple:#8b5cf6; --orange:#f28c38; + --red:#e0554d; --green:#3fae6a; --yellow:#f7c948; --wood:#f6e7c9; --wood-d:#e8d2a4; - --radius:16px; --shadow:0 10px 30px rgba(30,50,90,.18); + /* semantisch (licht thema) */ + --bg:#f4f7fb; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e3e9f4; + --panel:var(--surface); + --ink:#1d3461; --muted:#71809b; --line:#e2e8f2; + --accent:var(--teal); --accent-ink:#0d6e6b; --accent-soft:#e2f8f7; + --red-soft:#fbe3e1; + /* glas-laag (bord/widgets) */ + --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.92); + --glass-line:rgba(255,255,255,.6); + /* maten: alle "vakken" even hoog */ + --control-h:40px; --radius-s:8px; --radius:12px; --radius-l:18px; + --shadow-1:0 1px 3px rgba(29,52,97,.08); --shadow-2:0 12px 32px rgba(29,52,97,.16); + --shadow:var(--shadow-2); + --tbar:58px; /* minimale tikzones voor touch (WCAG/iOS-richtlijn) */ --tap:44px; --tap-sm:36px; } + /* donker thema: zelfde tokens, andere waarden (schakelbaar in Instellingen) */ + body.dark{ + --bg:#0f1626; --surface:#18213a; --surface-2:#202b49; --surface-3:#2a3757; + --ink:#e8edf7; --muted:#8fa0bf; --line:#2c3a5e; + --accent-ink:#7fe6e2; --accent-soft:#153a44; --red-soft:#4a2330; + --glass:rgba(24,33,58,.6); --glass-strong:rgba(24,33,58,.92); + --glass-line:rgba(255,255,255,.08); + --shadow-1:0 1px 3px rgba(0,0,0,.35); --shadow-2:0 12px 32px rgba(0,0,0,.5); + } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} *::-webkit-scrollbar{width:8px; height:8px;} *::-webkit-scrollbar-thumb{background:#c3cfde; border-radius:4px;} + body.dark ::-webkit-scrollbar-thumb{background:#3a4a70;} *::-webkit-scrollbar-track{background:transparent;} html,body{height:100%; margin:0; overflow:hidden;} body{ - font-family:"Segoe UI Rounded","Arial Rounded MT Bold",ui-rounded,"Segoe UI",Verdana,sans-serif; + font-family:"Quicksand","Segoe UI Rounded","Arial Rounded MT Bold",ui-rounded,"Segoe UI",Verdana,sans-serif; background:var(--bg); color:var(--ink); user-select:none; } input,textarea{user-select:text;} - /* ---------- Toolbar ---------- */ + /* weergave-instelling "minder beweging" */ + body.no-motion *,body.no-motion *::before,body.no-motion *::after{ + transition-duration:0s !important; animation-duration:0s !important; + } + /* ---------- Menubalk ---------- */ #toolbar{ - position:fixed; top:0; left:0; right:0; height:58px; z-index:5000; - background:var(--panel); box-shadow:0 2px 10px rgba(30,50,90,.10); - display:flex; align-items:center; gap:10px; padding:0 16px; + position:fixed; top:0; left:0; right:0; height:var(--tbar); z-index:5000; + background:var(--surface); border-bottom:1px solid var(--line); + display:flex; align-items:center; gap:8px; padding:0 14px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } #toolbar::-webkit-scrollbar{display:none;} - #zoomPct{min-width:58px; padding:9px 8px; font-size:13px; text-align:center;} - #zoomPct.on{background:var(--yellow); color:#6b5200;} + #zoomPct{min-width:56px; padding:0 8px; font-size:13px; text-align:center;} + #zoomPct.on{background:var(--accent-soft); color:var(--accent-ink);} #btnZoomIn:disabled,#btnZoomOut:disabled{opacity:.35; cursor:default;} - .logo{display:flex; align-items:baseline; gap:1px; font-size:30px; font-weight:900; line-height:1;} - .logo span{display:inline-block; transform-origin:bottom center;} - .logo .l1{color:var(--red); transform:rotate(-6deg);} - .logo .l2{color:var(--orange); transform:rotate(4deg) translateY(-2px);} - .logo .l3{color:var(--green); transform:rotate(-3deg);} - .logo .l4{color:var(--blue); transform:rotate(5deg) translateY(-1px);} - .logo .l5{color:var(--purple); transform:rotate(-4deg);} - .logo .crayon{font-size:24px; margin-left:6px; transform:rotate(10deg);} + /* logo: uil (SVG) + woordmerk "teachus.today" in merk-kleuren */ + .logo{display:flex; align-items:center; gap:9px; line-height:1; flex:none;} + .logo-owl{width:34px; height:30px; display:block;} + .logo-word{font-size:21px; font-weight:700; letter-spacing:.2px; white-space:nowrap;} + .logo-word .lw-teach{color:var(--ink);} + .logo-word .lw-us{color:var(--teal);} + .logo-word .lw-dot{color:var(--orange);} + .logo-word .lw-today{ + background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink),var(--orange)); + -webkit-background-clip:text; background-clip:text; color:transparent; + } #verTag{font-size:10.5px; font-weight:700; color:var(--muted);} - #verTag.beta{color:#fff; background:var(--orange); padding:1px 7px; border-radius:8px;} - .logo:hover span:not(.crayon){animation:bounce .5s;} - .logo .l2{animation-delay:.05s;} .logo .l3{animation-delay:.1s;} - .logo .l4{animation-delay:.15s;} .logo .l5{animation-delay:.2s;} - @keyframes bounce{0%,100%{transform:translateY(0);} 40%{transform:translateY(-8px);}} + #verTag.beta{color:#fff; background:var(--orange); padding:1px 7px; border-radius:var(--radius-s);} #toolbar .spacer{flex:1;} .tbtn{ - border:none; border-radius:12px; padding:9px 14px; font:inherit; font-weight:700; - background:var(--blue); color:#fff; cursor:pointer; font-size:14.5px; + border:none; border-radius:var(--radius); min-height:var(--control-h); + padding:0 14px; font:inherit; font-weight:700; + background:var(--accent); color:#fff; cursor:pointer; font-size:14.5px; } - .tbtn:hover{background:var(--blue-d);} - .tbtn.ghost{background:#e8eef6; color:var(--ink);} - .tbtn.ghost:hover{background:#dbe5f1;} + .tbtn:hover{filter:brightness(.94);} + .tbtn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line);} + .tbtn.ghost:hover{background:var(--surface-3); filter:none;} + /* in de menubalk zelf zijn ghost-knoppen transparant (rustiger beeld) */ + #toolbar .tbtn.ghost{background:transparent; border:none;} + #toolbar .tbtn.ghost:hover{background:var(--surface-2);} .tbtn:disabled{opacity:.55; cursor:default;} - #btnSave{min-width:158px; text-align:center;} + #btnSave{min-width:150px; text-align:center;} #btnSave.ok{background:var(--green); color:#fff;} - #btnUser.on{background:var(--green); color:#fff;} - #langToggle{display:flex; background:#e8eef6; border-radius:12px; overflow:hidden;} + #btnUser.on{background:var(--accent-soft); color:var(--accent-ink);} + #langToggle{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;} #langToggle button{ - border:none; padding:9px 13px; font:inherit; font-weight:700; cursor:pointer; - background:transparent; color:var(--muted); font-size:13.5px; + border:none; border-radius:999px; padding:6px 13px; font:inherit; font-weight:700; + cursor:pointer; background:transparent; color:var(--muted); font-size:13.5px; } - #langToggle button.active{background:var(--blue); color:#fff;} + #langToggle button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);} /* ---------- Board ---------- */ - #board{position:absolute; inset:58px 0 0 0; overflow:hidden;} + #board{position:absolute; inset:var(--tbar) 0 0 0; overflow:hidden;} #board.bg-dots{ background-image:radial-gradient(circle,#c9d6e5 1.4px,transparent 1.4px); background-size:26px 26px; @@ -93,7 +131,7 @@ body.pupil-mode #hud,body.pupil-mode #btnFolders,body.pupil-mode #btnSave{display:none !important;} body.pupil-mode #pupilView{ display:flex; flex-wrap:wrap; gap:18px; align-content:flex-start; - position:absolute; inset:58px 0 0 0; overflow:auto; padding:18px; box-sizing:border-box; + position:absolute; inset:var(--tbar) 0 0 0; overflow:auto; padding:18px; box-sizing:border-box; } #pupilView .pupil-card{ position:static; max-width:100%; box-shadow:0 6px 20px rgba(30,50,90,.12); @@ -135,19 +173,19 @@ } #boardStrip.open{display:flex;} .bs-card{ - width:168px; flex:none; background:#fff; border-radius:12px; - border:2.5px solid #e3eaf3; cursor:pointer; overflow:hidden; + width:168px; flex:none; background:var(--surface); border-radius:12px; + border:2.5px solid var(--line); cursor:pointer; overflow:hidden; } .bs-card:hover{border-color:var(--blue);} - .bs-card.active{border-color:var(--yellow);} - .bs-card canvas{display:block; width:168px; height:105px; background:#fff;} + .bs-card.active{border-color:var(--accent);} + .bs-card canvas{display:block; width:168px; height:105px; background:var(--surface);} .bs-name{ font-size:12px; font-weight:800; padding:5px 8px; display:flex; justify-content:space-between; align-items:center; gap:6px; } .bs-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .bs-x{ - border:none; background:#fbe3e1; color:var(--red); border-radius:7px; + border:none; background:var(--red-soft); color:var(--red); border-radius:7px; min-width:26px; height:24px; font-size:11px; font-weight:900; cursor:pointer; flex:none; } .bs-x:hover{background:var(--red); color:#fff;} @@ -168,24 +206,24 @@ .bp-folder{display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; margin-top:4px;} .bp-folder .bpf-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .bp-folder button{ - border:none; background:#e8eef6; border-radius:8px; padding:4px 8px; font:inherit; + border:none; background:var(--surface-2); border-radius:8px; padding:4px 8px; font:inherit; font-weight:800; font-size:11.5px; cursor:pointer; color:var(--muted); flex:none; } - .bp-folder button:hover{background:#dbe5f1; color:var(--ink);} + .bp-folder button:hover{background:var(--surface-3); color:var(--ink);} .bp-boards{display:flex; flex-wrap:wrap; gap:6px;} .bp-board{ - display:flex; align-items:center; gap:5px; border:2px solid #e3eaf3; background:#fff; + display:flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:5px 10px; font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; color:var(--muted); } - .bp-board.active{border-color:var(--yellow); background:var(--yellow); color:#6b5200;} + .bp-board.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);} .bp-board .bpb-x{border:none; background:transparent; color:var(--red); font-weight:900; cursor:pointer; padding:0; font-size:11px; opacity:.8;} .bp-board:hover .bpb-x{opacity:1;} .bp-board input{border:none; outline:none; font:inherit; width:80px; background:transparent;} .bp-new{display:flex; gap:6px; margin-top:6px;} .bp-new input{ - flex:1; min-width:0; border:2px solid #cdd9e8; border-radius:10px; padding:7px 9px; + flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:7px 9px; font:inherit; font-size:13px; outline:none; } .bp-hint{font-size:11px; color:var(--muted); font-weight:700;} @@ -196,13 +234,13 @@ border-radius:14px; padding:11px 16px; font:inherit; font-weight:800; font-size:14px; color:var(--ink); cursor:pointer; box-shadow:0 6px 18px rgba(30,50,90,.22); } - .fab-item:hover{background:#fff; transform:translateX(-4px);} - .fab-item.on{background:var(--yellow);} + .fab-item:hover{background:var(--surface); transform:translateX(-4px);} + .fab-item.on{background:var(--accent-soft); color:var(--accent-ink);} .fab-item .fi{font-size:18px;} /* pen palette (section inside #hud, always visible) */ #penbar{display:flex; gap:6px; align-items:center; flex-wrap:wrap;} - .pen-close{background:#e8eef6 !important; color:var(--ink) !important;} - .pen-close.on{background:var(--yellow) !important; color:#6b5200 !important;} + .pen-close{background:var(--surface-2) !important; color:var(--ink) !important;} + .pen-close.on{background:var(--accent-soft) !important; color:var(--accent-ink) !important;} body:not(.pen) .pen-tools button.on{background:transparent; box-shadow:none;} .pen-grip{cursor:grab; font-size:15px; color:var(--muted); padding:0 2px; touch-action:none;} .pen-grip:active{cursor:grabbing;} @@ -249,18 +287,18 @@ } .mm-node:hover .mm-cog{display:block;} .mm-pop{ - position:absolute; z-index:20; background:#fff; border-radius:12px; padding:9px 10px; + position:absolute; z-index:20; background:var(--surface); border-radius:12px; padding:9px 10px; box-shadow:0 10px 26px rgba(30,50,90,.3); display:flex; flex-direction:column; gap:7px; } .mm-pop .mp-row{display:flex; gap:5px; align-items:center;} .mm-pop .mp-lbl{font-size:11px; font-weight:800; color:var(--muted); width:16px; text-align:center;} .mm-pop button{border:none; cursor:pointer; padding:0; background:transparent;} - .mm-pop .mp-sw{width:19px; height:19px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px #cdd9e8;} + .mm-pop .mp-sw{width:19px; height:19px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line);} .mm-pop .mp-sw.on{box-shadow:0 0 0 2.5px var(--ink);} - .mm-pop .mp-fs{font-weight:900; color:var(--ink); width:24px; height:24px; border-radius:7px; background:#e8eef6;} - .mm-pop .mp-fs.on{background:var(--yellow);} - .mm-pop .mp-ls{width:34px; height:24px; border-radius:7px; background:#e8eef6; position:relative;} - .mm-pop .mp-ls.on{background:var(--yellow);} + .mm-pop .mp-fs{font-weight:900; color:var(--ink); width:24px; height:24px; border-radius:7px; background:var(--surface-2);} + .mm-pop .mp-fs.on{background:var(--accent-soft);} + .mm-pop .mp-ls{width:34px; height:24px; border-radius:7px; background:var(--surface-2); position:relative;} + .mm-pop .mp-ls.on{background:var(--accent-soft);} .mm-pop .mp-ls i{display:block; border-top:2.5px solid var(--ink); width:24px; margin:0 auto;} .mm-pop .mp-ls[data-ls=dash] i{border-top-style:dashed;} .mm-pop .mp-ls[data-ls=dot] i{border-top-style:dotted;} @@ -270,7 +308,7 @@ .dtool:active{cursor:grabbing;} .dtool .dtool-x{ position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%; - border:none; background:#fbe3e1; color:var(--red); font-weight:900; cursor:pointer; + border:none; background:var(--red-soft); color:var(--red); font-weight:900; cursor:pointer; font-size:12px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.2); z-index:2; } .dtool .dtool-rot{ @@ -282,15 +320,15 @@ .dtool-geo{width:340px; height:184px;} .dtool-opts{position:absolute; top:-12px; left:8px; display:flex; gap:5px;} .dtool-opts button{ - width:24px; height:24px; border-radius:50%; border:none; background:#fff; + width:24px; height:24px; border-radius:50%; border:none; background:var(--surface); color:var(--ink); font-size:12px; font-weight:900; cursor:pointer; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.25); } - .dtool-opts button:hover{background:var(--yellow);} + .dtool-opts button:hover{background:var(--accent-soft);} .dtool-lens{z-index:4500;} /* the glass sits above the ink sheet */ .dtool-lens canvas{ border:5px solid #5a6c85; box-shadow:0 8px 22px rgba(0,0,0,.3); - background:#fff; display:block; + background:var(--surface); display:block; } /* =========== Mindmap widget =========== */ .mm{flex:1; min-height:0; display:flex; flex-direction:column; position:relative;} @@ -302,10 +340,10 @@ .mm-grip{cursor:grab; color:var(--muted); font-size:14px; padding:0 2px; touch-action:none; user-select:none;} .mm-grip:active{cursor:grabbing;} .mm-hint{font-size:12px; font-weight:700; color:var(--muted); max-width:180px;} - .mm-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:#fff;} + .mm-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:var(--surface);} .mm-stage svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;} .mm-node{ - position:absolute; transform:translate(-50%,-50%); background:#fff; + position:absolute; transform:translate(-50%,-50%); background:var(--surface); border:2.5px solid var(--blue); padding:8px 16px; font-weight:800; font-size:15px; cursor:grab; touch-action:none; min-width:64px; text-align:center; box-shadow:0 3px 10px rgba(30,50,90,.15); border-radius:50px; @@ -322,7 +360,7 @@ } .mm-node:hover .mm-add,.mm-node:hover .mm-del{display:block;} .mm-add{right:-11px; top:50%; transform:translateY(-50%); background:var(--green); color:#fff;} - .mm-del{left:-9px; top:-9px; background:#fbe3e1; color:var(--red);} + .mm-del{left:-9px; top:-9px; background:var(--red-soft); color:var(--red);} /* ---------- Widget windows ---------- */ .widget{ position:absolute; background:rgba(255,255,255,.55); border-radius:var(--radius); @@ -366,14 +404,14 @@ #hud.has-dock #dock{display:flex;} /* collapse + orientation */ .hud-btn{ - border:none; background:#e8eef6; border-radius:8px; width:26px; height:26px; + border:none; background:var(--surface-2); border-radius:8px; width:26px; height:26px; cursor:pointer; font-size:13px; line-height:1; padding:0; flex:none; font-weight:900; color:var(--ink); } - .hud-btn:hover{background:#dbe5f1;} + .hud-btn:hover{background:var(--surface-3);} #hud.min #penbar,#hud.min #dock,#hud.min .hud-div{display:none !important;} #hud.vert{ flex-direction:column; align-items:center; flex-wrap:nowrap; - max-height:calc(100vh - 84px); overflow-y:auto; overflow-x:hidden; + max-height:calc(100vh - var(--tbar) - 26px); overflow-y:auto; overflow-x:hidden; max-width:none; width:92px; } #hud.vert #penbar{flex-direction:column; flex-wrap:nowrap; align-items:center;} @@ -381,11 +419,11 @@ #hud.vert .hud-div{width:26px; height:1.5px;} #hud.vert #dock{flex-direction:column; flex-wrap:nowrap;} .dock-item{ - border:none; display:flex; align-items:center; gap:7px; background:#fff; + border:none; display:flex; align-items:center; gap:7px; background:var(--surface); border-radius:10px; padding:6px 12px; font:inherit; font-weight:700; font-size:13px; color:var(--ink); cursor:pointer; box-shadow:0 2px 6px rgba(30,50,90,.12); } - .dock-item:hover{background:#eef3f9; transform:translateY(-2px);} + .dock-item:hover{background:var(--surface-2); transform:translateY(-2px);} .dock-item .di{font-size:16px; line-height:1;} .widget-head{ display:flex; align-items:center; gap:10px; padding:10px 14px; @@ -396,49 +434,58 @@ .widget-head .wicon{font-size:20px;} .widget-head .wtitle{font-weight:800; font-size:15px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .wclose{ - border:none; background:#fbe3e1; color:var(--red); width:28px; height:28px; + border:none; background:var(--red-soft); color:var(--red); width:28px; height:28px; border-radius:9px; font-weight:900; cursor:pointer; font-size:14px; line-height:1; flex:none; } .wclose:hover{background:var(--red); color:#fff;} .wmin{ - border:none; background:#e8eef6; color:var(--ink); width:28px; height:28px; + border:none; background:var(--surface-2); color:var(--ink); width:28px; height:28px; border-radius:9px; font-weight:900; cursor:pointer; font-size:15px; line-height:1; flex:none; } - .wmin:hover{background:#dbe5f1;} + .wmin:hover{background:var(--surface-3);} .wz{font-size:10.5px; width:auto; min-width:30px; padding:0 5px;} - .wz.on{background:var(--yellow); color:#6b5200;} + .wz.on{background:var(--accent-soft); color:var(--accent-ink);} .widget-body{flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; min-height:0;} /* ---------- Modals ---------- */ .modalwrap{ - position:fixed; inset:0; z-index:6000; background:rgba(30,45,70,.45); + position:fixed; inset:0; z-index:6000; background:rgba(15,22,38,.4); display:none; align-items:center; justify-content:center; } .modalwrap.open{display:flex;} .modal{ - background:var(--panel); border-radius:20px; padding:26px; width:min(680px,92vw); - max-height:88vh; overflow:auto; box-shadow:var(--shadow); + background:var(--surface); border-radius:var(--radius-l); padding:24px 26px; + width:min(680px,92vw); max-height:88vh; overflow:auto; + box-shadow:var(--shadow-2); border:1px solid var(--line); } - .modal h2{margin:0 0 18px; font-size:21px;} - .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px;} + .modal h2{margin:0 0 14px; font-size:20px; font-weight:700;} + /* galerij: gelijke tegel-hoogtes (grid-rijen strekken mee, vaste inhoud-zones) */ + .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); grid-auto-rows:1fr; gap:12px;} .gcard{ - border:2px solid #e3eaf3; border-radius:16px; padding:18px 14px; text-align:center; - cursor:pointer; transition:all .15s; background:#fbfdff; + border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px; + text-align:center; cursor:pointer; transition:border-color .15s, box-shadow .15s; + background:var(--surface); display:flex; flex-direction:column; + align-items:center; justify-content:flex-start; min-height:132px; } - .gcard:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:0 6px 18px rgba(59,125,216,.18);} - .gcard .gi{font-size:38px;} - .gcard .gn{font-weight:800; margin-top:8px; font-size:15px;} + .gcard:hover{border-color:var(--accent); box-shadow:var(--shadow-1);} + .gcard .gi{font-size:36px; line-height:1;} + .gcard .gn{font-weight:700; margin-top:9px; font-size:15px;} .gcard .gd{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.35;} /* login + instellingen modals */ #loginModal{width:min(400px,92vw);} + .login-logo{display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 18px;} + .login-logo .logo-owl{width:46px; height:40px;} + .login-logo .logo-word{font-size:24px;} /* instellingen is breder dan het inlogscherm: het beheerpaneel (tabblad) heeft de ruimte nodig van wat vroeger een eigen, brede modal was (#adminModal) */ #settingsModal{width:min(760px,94vw); max-height:86vh; overflow:auto;} #settingsAccountPanel{max-width:400px;} #loginModal input,#settingsModal input{ - width:100%; border:2px solid #cdd9e8; border-radius:12px; padding:11px 12px; - font:inherit; font-size:16px; outline:none; margin-bottom:10px; + width:100%; border:1px solid var(--line); border-radius:var(--radius); + height:var(--control-h); padding:0 12px; + font:inherit; font-size:15px; outline:none; margin-bottom:10px; + background:var(--surface); color:var(--ink); } - #loginModal input:focus,#settingsModal input:focus{border-color:var(--blue);} + #loginModal input:focus,#settingsModal input:focus{border-color:var(--accent);} .lrow{display:flex; gap:8px;} .lrow .tbtn{flex:1;} .lrow input{flex:1; min-width:0; margin-bottom:0;} @@ -453,7 +500,7 @@ #settingsModal .am-reset .guestnote{margin-top:2px;} .st-footer{ display:flex; justify-content:space-between; align-items:center; gap:8px; - margin-top:16px; padding-top:12px; border-top:1.5px solid #e3eaf3; + margin-top:16px; padding-top:12px; border-top:1.5px solid var(--line); font-size:11px; color:var(--muted); } #settingsModal .am-name{font-size:16px;} @@ -462,30 +509,30 @@ ==========================================================*/ .lg{display:flex; flex-direction:column; flex:1; min-height:0; padding:12px 14px; gap:10px;} .lg-top{display:flex; gap:8px; align-items:center; flex-wrap:wrap;} - .lg-levels{display:flex; background:#e8eef6; border-radius:12px; overflow:hidden;} + .lg-levels{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;} .lg-levels button{ - border:none; background:transparent; padding:8px 13px; font:inherit; font-weight:800; - font-size:13.5px; color:var(--muted); cursor:pointer; + border:none; border-radius:999px; background:transparent; padding:6px 12px; + font:inherit; font-weight:700; font-size:13.5px; color:var(--muted); cursor:pointer; } - .lg-levels button.active{background:var(--green); color:#fff;} + .lg-levels button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);} .lg-cards{display:flex; gap:5px; flex-wrap:wrap;} .lg-cards button{ - border:2px solid #e3eaf3; background:#fff; width:34px; height:34px; border-radius:10px; + border:1px solid var(--line); background:var(--surface); width:34px; height:34px; border-radius:10px; font:inherit; font-weight:800; color:var(--muted); cursor:pointer; font-size:14px; } - .lg-cards button.active{border-color:var(--yellow); background:var(--yellow); color:#6b5200;} + .lg-cards button.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);} .lg-cards .lg-theme{ width:auto; padding:0 11px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lg-num{ - border:2px solid #e3eaf3; border-radius:10px; height:34px; font:inherit; - font-weight:800; font-size:13px; color:var(--muted); background:#fff; + border:1px solid var(--line); border-radius:10px; height:34px; font:inherit; + font-weight:800; font-size:13px; color:var(--muted); background:var(--surface); padding:0 4px; outline:none; cursor:pointer; } .lg-snd,.lg-mode{ - border:2px solid #e3eaf3; border-radius:10px; width:34px; height:34px; - background:#fff; cursor:pointer; font-size:15px; line-height:1; padding:0; flex:none; + border:1px solid var(--line); border-radius:10px; width:34px; height:34px; + background:var(--surface); cursor:pointer; font-size:15px; line-height:1; padding:0; flex:none; } .lg-snd.off{opacity:.55;} /* small digit blocks/slots for the maths widgets */ @@ -515,29 +562,29 @@ .lg:not(.typemode) .lg-kbd{display:none;} .lg-ed-themerow{display:flex; gap:8px; align-items:center;} .ed-theme-sel{ - flex:1; min-width:0; border:2px solid #cdd9e8; border-radius:10px; padding:9px 10px; - font:inherit; font-weight:700; font-size:15px; outline:none; background:#fff; cursor:pointer; + flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 10px; + font:inherit; font-weight:700; font-size:15px; outline:none; background:var(--surface); cursor:pointer; } .ed-theme-name{ border:2px solid var(--blue); border-radius:10px; padding:9px 10px; font:inherit; font-size:15px; outline:none; width:180px; } .ed-theme-del{ - border:none; background:#fbe3e1; color:var(--red); border-radius:10px; + border:none; background:var(--red-soft); color:var(--red); border-radius:10px; width:40px; height:40px; cursor:pointer; font-size:15px; flex:none; } .ed-theme-del:hover{background:var(--red); color:#fff;} .lg-progress{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap;} .lg-stars{color:#d9a400; font-size:14px; min-width:34px; text-align:right;} .lg-instr{ - background:#f1f7ff; border:1.5px dashed #bcd4f2; + background:var(--surface-2); border:1.5px dashed #bcd4f2; border-radius:12px; padding:6px 14px; font-size:14.5px; font-weight:700; color:#37588a; text-align:center; min-height:42px; display:flex; align-items:center; justify-content:center; flex:none; } .lg-card{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; - gap:16px; background:linear-gradient(#ffffff,#f6fafe); border:2px solid #e3eaf3; + gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px; min-height:0; position:relative; overflow:hidden; } .lg-pic{font-size:64px; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));} @@ -582,7 +629,7 @@ .slot .dots i.off{background:transparent; border:1px dotted #ccd7e4; width:7px; height:7px;} .lg-tray{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; - background:#eef3f9; border-radius:16px; padding:14px 12px; min-height:130px; flex:none; + background:var(--surface-2); border-radius:16px; padding:14px 12px; min-height:130px; flex:none; } .lg-bottom{display:flex; align-items:center; justify-content:center; gap:12px; min-height:46px; flex:none;} .lg-next{ @@ -606,7 +653,7 @@ } /* ---------- custom words editor ---------- */ .lg-editor{ - position:absolute; inset:0; z-index:20; background:#fff; display:none; + position:absolute; inset:0; z-index:20; background:var(--surface); display:none; flex-direction:column; gap:10px; padding:14px 16px; overflow:auto; } .lg-editor.open{display:flex;} @@ -614,65 +661,76 @@ .lg-ed-head b{font-size:17px;} .lg-ed-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; - background:#f1f7ff; border-radius:14px; padding:12px; + background:var(--surface-2); border-radius:14px; padding:12px; } .lg-ed-form input[type=text]{ - border:2px solid #cdd9e8; border-radius:10px; padding:9px 10px; font:inherit; + border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-size:16px; outline:none; } .lg-ed-form input.ed-word{width:170px; text-transform:lowercase;} .ed-preview{width:52px; height:52px; display:flex; align-items:center; justify-content:center; - font-size:34px; background:#fff; border-radius:10px; border:2px dashed #cdd9e8; overflow:hidden; flex:none;} + font-size:34px; background:var(--surface); border-radius:10px; border:2px dashed var(--line); overflow:hidden; flex:none;} .ed-preview img{width:100%; height:100%; object-fit:contain;} .ed-add{border:none; border-radius:10px; padding:11px 20px; font:inherit; font-weight:800; background:var(--green); color:#fff; cursor:pointer; font-size:14.5px;} .ed-msg{width:100%; color:var(--red); font-weight:700; font-size:13.5px; min-height:16px;} - /* picture picker tabs */ - .ed-tabs{display:flex; gap:6px;} - .ed-tabs button{ - border:none; border-radius:10px 10px 0 0; padding:9px 16px; font:inherit; font-weight:800; - font-size:13.5px; background:#e8eef6; color:var(--muted); cursor:pointer; + /* modern tabsysteem: underline-tabs die overlopen in hun paneel. + De tabbalk deelt de ondergrond met de inhoud; alleen een hairline scheidt ze + en de accentlijn van de actieve tab valt daaroverheen. */ + .ed-tabs{ + display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px; } - .ed-tabs button.active{background:var(--yellow); color:#6b5200;} - .ed-pane{background:#fbfdff; border:2px solid #e3eaf3; border-radius:0 12px 12px 12px; padding:12px; min-height:120px;} + .ed-tabs button{ + border:none; border-radius:0; padding:10px 15px 11px; font:inherit; font-weight:700; + font-size:14px; background:transparent; color:var(--muted); cursor:pointer; + position:relative; margin-bottom:-1px; + } + .ed-tabs button:hover{color:var(--ink);} + .ed-tabs button.active{color:var(--ink);} + .ed-tabs button.active::after{ + content:""; position:absolute; left:10px; right:10px; bottom:0; + height:2.5px; border-radius:2px; background:var(--accent); + } + .ed-pane{padding:2px 0 0; min-height:120px;} + /* uniforme segmented control (kleine keuzegroepen: taal, niveau, timer, chips) */ .ed-cats{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px;} .ed-cats button{ - border:none; background:#e8eef6; border-radius:9px; padding:6px 11px; font:inherit; - font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer; + border:none; background:var(--surface-2); border-radius:999px; padding:6px 12px; font:inherit; + font-weight:700; font-size:12.5px; color:var(--muted); cursor:pointer; } - .ed-cats button.active{background:var(--blue); color:#fff;} + .ed-cats button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); outline:1.5px solid var(--accent);} .ed-grid{display:flex; gap:4px; flex-wrap:wrap; max-height:170px; overflow:auto;} .ed-grid button{ border:none; background:transparent; border-radius:9px; font-size:26px; width:42px; height:42px; cursor:pointer; padding:0; line-height:1; } .ed-grid button:hover{background:#dbe8f8;} - .ed-grid button.sel{background:var(--yellow);} + .ed-grid button.sel{background:var(--accent-soft); outline:1.5px solid var(--accent);} .ed-pictorow{display:flex; gap:8px; margin-bottom:10px;} - .ed-pictorow input{flex:1; border:2px solid #cdd9e8; border-radius:10px; padding:9px 10px; font:inherit; font-size:15px; outline:none;} + .ed-pictorow input{flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-size:15px; outline:none;} .ed-pictorow .tbtn{flex:none;} .ed-pgrid{display:flex; gap:8px; flex-wrap:wrap; max-height:180px; overflow:auto;} .ed-pgrid button{ - border:2px solid #e3eaf3; background:#fff; border-radius:12px; width:74px; height:74px; + border:1px solid var(--line); background:var(--surface); border-radius:12px; width:74px; height:74px; cursor:pointer; padding:5px; } .ed-pgrid button:hover{border-color:var(--blue);} - .ed-pgrid button.sel{border-color:var(--yellow); background:#fff8e1;} + .ed-pgrid button.sel{border-color:var(--accent); background:var(--accent-soft);} .ed-pgrid img{width:100%; height:100%; object-fit:contain;} .ed-credit{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.4;} .ed-credit a{color:var(--blue);} .ed-status{font-size:13.5px; font-weight:700; color:var(--muted); padding:6px 0;} - .ed-upload{background:#e8eef6; border-radius:10px; padding:11px 16px; font-weight:700; + .ed-upload{background:var(--surface-2); border-radius:10px; padding:11px 16px; font-weight:700; font-size:14px; cursor:pointer; display:inline-block;} .ed-upload input{display:none;} .ed-uphint{font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.45;} .lg-ed-list{display:flex; flex-direction:column; gap:6px;} .lg-ed-list .empty{color:var(--muted); font-weight:700; text-align:center; padding:18px 0;} - .ed-row{display:flex; align-items:center; gap:12px; background:#f7fafd; border-radius:12px; padding:7px 12px;} + .ed-row{display:flex; align-items:center; gap:12px; background:var(--surface-2); border-radius:12px; padding:7px 12px;} .ed-row .ep{width:40px; height:40px; font-size:28px; display:flex; align-items:center; justify-content:center;} .ed-row .ep img{width:100%; height:100%; object-fit:contain; border-radius:8px;} .ed-row .ew{font-weight:800; font-size:17px; letter-spacing:2px; flex:1;} - .ed-row .edel{border:none; background:#fbe3e1; color:var(--red); border-radius:8px; + .ed-row .edel{border:none; background:var(--red-soft); color:var(--red); border-radius:8px; width:30px; height:30px; cursor:pointer; font-weight:900;} .ed-row .edel:hover{background:var(--red); color:#fff;} .ed-row.base{opacity:.65;} @@ -683,15 +741,15 @@ .wp{flex:1; min-height:0; display:flex; flex-direction:column;} .wp-bar{ display:flex; gap:10px; padding:8px 10px; flex-wrap:wrap; align-items:center; - flex:none; background:#f7fafd; border-bottom:1px solid #e3eaf3; + flex:none; background:var(--surface-2); border-bottom:1px solid var(--line); } - .wp-group{display:flex; gap:4px; align-items:center; background:#e8eef6; border-radius:10px; padding:3px;} + .wp-group{display:flex; gap:4px; align-items:center; background:var(--surface-2); border-radius:10px; padding:3px;} .wp-group button{ border:none; background:transparent; border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:16px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; } - .wp-group button.on{background:#fff; box-shadow:0 1px 4px rgba(30,50,90,.2);} + .wp-group button.on{background:var(--surface); box-shadow:0 1px 4px rgba(30,50,90,.2);} .wp-color{border-radius:50% !important; position:relative;} .wp-color i{width:18px; height:18px; border-radius:50%; display:block;} .wp-color.on{outline:2.5px solid var(--ink); outline-offset:-3px;} @@ -707,10 +765,10 @@ .wp-bg[data-bg=write] i{background-image:repeating-linear-gradient(#0000 0 2px, #c3d5ec 2px 3px, #0000 3px 5px, #6d92c4 5px 6px);} .wp-bg[data-bg=grid-s] i{background-image:repeating-linear-gradient(#0000 0 4px, #9db6d8 4px 5px),repeating-linear-gradient(90deg,#0000 0 4px, #9db6d8 4px 5px);} .wp-bg[data-bg=grid-b] i{background-image:repeating-linear-gradient(#0000 0 8px, #9db6d8 8px 9px),repeating-linear-gradient(90deg,#0000 0 8px, #9db6d8 8px 9px);} - .wp-clear{border:none; background:#fbe3e1; color:var(--red); border-radius:10px; + .wp-clear{border:none; background:var(--red-soft); color:var(--red); border-radius:10px; width:34px; height:34px; cursor:pointer; font-size:15px; margin-left:auto;} .wp-clear:hover{background:var(--red); color:#fff;} - .wp-stage{flex:1; min-height:0; position:relative; background:#fff;} + .wp-stage{flex:1; min-height:0; position:relative; background:var(--surface);} .wp-stage canvas{position:absolute; inset:0; touch-action:none; cursor:crosshair;} .wp-stage.t-text canvas{cursor:text;} .wp-text-input{ @@ -732,10 +790,10 @@ .media{flex:1; min-height:0; display:flex; flex-direction:column;} .media-bar{ display:flex; gap:8px; padding:8px 10px; flex:none; - background:#f7fafd; border-bottom:1px solid #e3eaf3; + background:var(--surface-2); border-bottom:1px solid var(--line); } .media-bar input{ - flex:1; min-width:0; border:2px solid #cdd9e8; border-radius:10px; + flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:inherit; font-size:14px; outline:none; } .media-bar input:focus{border-color:var(--blue);} @@ -761,13 +819,13 @@ .mt-score{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap;} .mt-card{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; - justify-content:center; gap:12px; background:linear-gradient(#fff,#f6fafe); - border:2px solid #e3eaf3; border-radius:18px; position:relative; padding:10px; overflow:hidden; + justify-content:center; gap:12px; background:var(--surface); + border:1px solid var(--line); border-radius:18px; position:relative; padding:10px; overflow:hidden; } .mt-q{font-size:40px; font-weight:900; letter-spacing:1px; text-align:center;} .mt-a{ min-width:110px; height:56px; border-radius:14px; border:2.5px dashed #b9c7d9; - background:#eef3f9; font-size:32px; font-weight:900; display:flex; align-items:center; + background:var(--surface-2); font-size:32px; font-weight:900; display:flex; align-items:center; justify-content:center; color:var(--blue); padding:0 16px; } .mt-a.ok{border-style:solid; border-color:var(--green); background:#e3f6ea; color:var(--green);} @@ -776,10 +834,10 @@ .mt-fb.ans{color:var(--red);} .mt-pad{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:none;} .mt-pad button{ - border:none; border-radius:12px; background:#e8eef6; font:inherit; font-weight:900; + border:none; border-radius:12px; background:var(--surface-2); font:inherit; font-weight:900; font-size:22px; padding:12px 0; cursor:pointer; color:var(--ink); } - .mt-pad button:hover{background:#dbe5f1;} + .mt-pad button:hover{background:var(--surface-3);} .mt-pad .ok{background:var(--green); color:#fff;} .mt-done{ position:absolute; inset:0; border-radius:18px; display:none; flex-direction:column; @@ -795,38 +853,44 @@ color:#fff; font:inherit; font-weight:800; font-size:15px; cursor:pointer; margin-top:6px; } /* =========== high-contrast accessibility mode =========== */ - body.hc{--bg:#fff; --ink:#000; --muted:#2b2b2b; --blue:#0047ab; --red:#c40000; - --green:#006b2d; --yellow:#ffd400; --wood:#ffe9b0; --wood-d:#8a6a00;} + /* wint óók van body.dark: hoog contrast is altijd zwart-op-wit */ + body.hc,body.dark.hc{ + --bg:#fff; --ink:#000; --muted:#2b2b2b; --blue:#0047ab; --red:#c40000; + --green:#006b2d; --yellow:#ffd400; --wood:#ffe9b0; --wood-d:#8a6a00; + --surface:#fff; --surface-2:#f2f2f2; --surface-3:#e2e2e2; --line:#000; + --accent:#0047ab; --accent-ink:#00306f; --accent-soft:#d6e4ff; + --red-soft:#ffd9d6; + --glass:#fff; --glass-strong:#fff; --glass-line:#000; + } body.hc #board.bg-dots{background-image:radial-gradient(circle,#7d8ea3 1.7px,transparent 1.7px);} - body.hc .widget{background:#fff; border:2.5px solid #000; box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:none;} - body.hc .widget:hover,.body.hc .widget:focus-within{background:#fff;} + body.hc .widget{background:var(--surface); border:2.5px solid #000; box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:none;} + body.hc .widget:hover,.body.hc .widget:focus-within{background:var(--surface);} body.hc .widget .wmin,body.hc .widget .wclose{opacity:1;} body.hc .widget-rs{opacity:1; border:3px solid #000;} body.hc .widget-head{background:#f2f2f2; border-bottom:2px solid #000;} - body.hc .slot{border-color:#000; background:#fff;} + body.hc .slot{border-color:#000; background:var(--surface);} body.hc .slot .ghost{color:#666;} body.hc .slot .dots i.on{background:#333;} body.hc .blok .dots i.on{background:#6a4a00;} - body.hc .lg-instr{background:#fff; border-color:#000; color:#000;} - body.hc #hud,body.hc .dock-item,body.hc .fab-item,body.hc #penbar .wp-group{border:2px solid #000; background:#fff;} + body.hc .lg-instr{background:var(--surface); border-color:#000; color:#000;} + body.hc #hud,body.hc .dock-item,body.hc .fab-item,body.hc #penbar .wp-group{border:2px solid #000; background:var(--surface);} body.hc #fab{background:#0047ab;} body.hc :focus-visible{outline:3px solid #0047ab; outline-offset:2px;} body.hc .mm-node{box-shadow:0 3px 10px rgba(0,0,0,.4); border-width:3px;} - #btnHC.on{background:var(--yellow); color:#000;} /* high contrast inside every widget */ - body.hc .lg-levels,body.hc .tseg{background:#fff; border:2px solid #000; border-radius:12px;} + body.hc .lg-levels,body.hc .tseg{background:var(--surface); border:2px solid #000; border-radius:12px;} body.hc .lg-levels button,body.hc .tseg button{color:#000;} body.hc .lg-levels button.active{background:#006b2d; color:#fff;} body.hc .lg-cards button,body.hc .lg-num,body.hc .fl-sel,body.hc .lg-snd,body.hc .lg-mode{ - border-color:#000; color:#000; background:#fff; + border-color:#000; color:#000; background:var(--surface); } body.hc .lg-cards button.active{background:#ffd400; border-color:#000; color:#000;} - body.hc .lg-tray{background:#fff; border:2px dashed #000;} - body.hc .lg-card,body.hc .mt-card{background:#fff; border-color:#000;} + body.hc .lg-tray{background:var(--surface); border:2px dashed #000;} + body.hc .lg-card,body.hc .mt-card{background:var(--surface); border-color:#000;} body.hc .lg-progress,body.hc .mt-score,body.hc .mm-hint,body.hc .dc-sum{color:#000;} body.hc .lg-stars{color:#7a5d00;} - body.hc .mt-a{border-color:#000; background:#fff;} - body.hc .mt-pad button{background:#fff; border:2px solid #000; color:#000;} + body.hc .mt-a{border-color:#000; background:var(--surface);} + body.hc .mt-pad button{background:var(--surface); border:2px solid #000; color:#000;} body.hc .mt-pad .ok{background:#006b2d; border-color:#006b2d; color:#fff;} body.hc .mt-fb{color:#006b2d;} body.hc .mt-fb.ans{color:#c40000;} @@ -838,17 +902,17 @@ body.hc .np-result{background:#0047ab;} body.hc .np-row label,body.hc .thint,body.hc .guestnote,body.hc .ed-credit, body.hc .bp-hint,body.hc .gcard .gd,body.hc .st-footer{color:#222;} - body.hc .gcard{border-color:#000; background:#fff;} + body.hc .gcard{border-color:#000; background:var(--surface);} body.hc .gcat-title{color:#000;} - body.hc .tbtn.ghost{background:#fff; border:2px solid #000; color:#000;} - body.hc .wmin,body.hc .wclose{border:1.5px solid #000; background:#fff;} + body.hc .tbtn.ghost{background:var(--surface); border:2px solid #000; color:#000;} + body.hc .wmin,body.hc .wclose{border:1.5px solid #000; background:var(--surface);} body.hc .wclose{color:#c40000;} body.hc .wz.on,body.hc #zoomPct.on{background:#ffd400; color:#000;} - body.hc .ed-tabs button,body.hc .ed-cats button{color:#000; background:#fff; border:1.5px solid #000;} + body.hc .ed-tabs button,body.hc .ed-cats button{color:#000; background:var(--surface); border:1.5px solid #000;} body.hc .ed-tabs button.active,body.hc .ed-cats button.active{background:#ffd400;} - body.hc .ed-pane{border-color:#000; background:#fff;} + body.hc .ed-pane{border-color:#000; background:var(--surface);} body.hc .timer .presets button,body.hc .timer .main button,body.hc .ticon, - body.hc .hud-btn,body.hc .mm-seg button{background:#fff; border:1.5px solid #000; color:#000;} + body.hc .hud-btn,body.hc .mm-seg button{background:var(--surface); border:1.5px solid #000; color:#000;} body.hc .timer .main .bstart{background:#006b2d; border-color:#006b2d; color:#fff;} body.hc .bp-board{border-color:#000; color:#000;} body.hc .bp-board.active{background:#ffd400;} @@ -860,8 +924,8 @@ .fl-pic{font-size:46px; min-height:56px; display:flex; align-items:center;} .fl-pic img{width:56px; height:56px; object-fit:contain;} .fl-sel{ - border:2px solid #e3eaf3; border-radius:10px; height:34px; font:inherit; - font-weight:800; font-size:13px; color:var(--muted); background:#fff; + border:1px solid var(--line); border-radius:10px; height:34px; font:inherit; + font-weight:800; font-size:13px; color:var(--muted); background:var(--surface); padding:0 6px; outline:none; cursor:pointer; } /* =========== Chop & blend widget =========== */ @@ -882,9 +946,9 @@ .an{flex:1; min-height:0; display:flex; flex-direction:column;} .an-hint{ flex:none; font-size:11.5px; font-weight:700; color:var(--muted); - padding:6px 10px; background:#f7fafd; border-bottom:1px solid #e3eaf3; + padding:6px 10px; background:var(--surface-2); border-bottom:1px solid var(--line); } - .an-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:#fff; cursor:grab; touch-action:none;} + .an-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:var(--surface); cursor:grab; touch-action:none;} .an-stage:active{cursor:grabbing;} .an-layer{position:absolute; inset:0;} .an-cell{ @@ -893,7 +957,7 @@ color:var(--ink); padding:2px 8px; overflow:hidden; text-align:center; cursor:pointer; } .an-cell:hover{border-color:#b6c6dc;} - .an-cell.filled{border-style:solid; border-color:#cdd7e4; background:#fff; box-shadow:0 3px 8px rgba(30,50,90,.12);} + .an-cell.filled{border-style:solid; border-color:#cdd7e4; background:var(--surface); box-shadow:0 3px 8px rgba(30,50,90,.12);} .an-cell.root{border:2.5px solid #d9a400; background:#fff8dd;} .an-cell.root.filled{background:var(--yellow); font-size:16px;} .an-cell input{width:100%; border:none; outline:none; font:inherit; text-align:center; background:transparent;} @@ -921,7 +985,7 @@ .dc{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px; align-items:center;} .dc-row{flex:1; display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; cursor:pointer;} .die{ - width:92px; height:92px; background:#fff; border:3.5px solid var(--ink); border-radius:18px; + width:92px; height:92px; background:var(--surface); border:3.5px solid var(--ink); border-radius:18px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:10px; box-shadow:0 5px 0 rgba(0,0,0,.15); } @@ -945,7 +1009,7 @@ /* =========== Name picker widget =========== */ .np{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px;} .np textarea{ - flex:1; min-height:0; border:2px solid #cdd9e8; border-radius:12px; padding:10px; + flex:1; min-height:0; border:1px solid var(--line); border-radius:12px; padding:10px; font:inherit; font-size:14.5px; resize:none; outline:none; } .np-result{ @@ -970,12 +1034,12 @@ align-items:center; justify-content:center; gap:8px; } .topts{display:flex; justify-content:space-between; align-items:center; width:100%; flex:none;} - .tseg{display:flex; background:#e8eef6; border-radius:10px; overflow:hidden;} - .tseg button{border:none; background:transparent; padding:7px 13px; font-size:15px; cursor:pointer; line-height:1;} - .tseg button.on{background:var(--blue); color:#fff;} - .mm-seg button{font:inherit; font-weight:800; font-size:13px;} - .ticon{border:none; background:#e8eef6; border-radius:10px; padding:7px 11px; font-size:15px; cursor:pointer; line-height:1;} - .ticon.on{background:var(--yellow);} + .tseg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;} + .tseg button{border:none; border-radius:999px; background:transparent; padding:6px 12px; font-size:15px; cursor:pointer; line-height:1; color:var(--muted);} + .tseg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);} + .mm-seg button{font:inherit; font-weight:700; font-size:13px;} + .ticon{border:none; background:var(--surface-2); border-radius:var(--radius); padding:7px 11px; font-size:15px; cursor:pointer; line-height:1;} + .ticon.on{background:var(--accent-soft); color:var(--accent-ink);} .timer .tpie{ flex:1 1 0; min-height:80px; aspect-ratio:1/1; width:auto; max-width:100%; max-height:220px; display:none; cursor:grab; touch-action:none; @@ -990,13 +1054,13 @@ .timer .trow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; flex:none;} .thint{flex:none;} .timer .presets button{ - border:none; border-radius:999px; padding:6px 13px; background:#e8eef6; font:inherit; + border:none; border-radius:999px; padding:6px 13px; background:var(--surface-2); font:inherit; font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer; } - .timer .presets button:hover{background:#dbe5f1; color:var(--ink);} + .timer .presets button:hover{background:var(--surface-3); color:var(--ink);} .timer .main button{ border:none; border-radius:12px; padding:10px 26px; font:inherit; font-weight:800; - font-size:15.5px; cursor:pointer; background:#e8eef6; color:var(--ink); + font-size:15.5px; cursor:pointer; background:var(--surface-2); color:var(--ink); } .timer .main .bstart{background:var(--green); color:#fff; min-width:110px;} .thint{font-size:11.5px; color:var(--muted); text-align:center; line-height:1.4;} @@ -1005,80 +1069,90 @@ /* ---------- login-extra's (school, koppelcode) ---------- */ #liSchool{ - width:100%; border:2px solid #cdd9e8; border-radius:12px; padding:11px 12px; - font:inherit; font-size:15px; outline:none; margin-bottom:10px; background:#fff; + width:100%; border:1px solid var(--line); border-radius:var(--radius); + height:var(--control-h); padding:0 12px; color:var(--ink); + font:inherit; font-size:15px; outline:none; margin-bottom:10px; background:var(--surface); } .lisub{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:8px;} #ownPwBlock .lrow{margin-bottom:10px;} -#ownPwBlock input{ - flex:1; min-width:0; border:2px solid #cdd9e8; border-radius:12px; - padding:10px 12px; font:inherit; font-size:15px; outline:none; +#ownPwBlock input{flex:1; min-width:0;} +/* ---------- weergave-instellingen (tabblad "Weergave") ---------- */ +.vw-row{ + display:flex; align-items:center; justify-content:space-between; gap:12px; + min-height:var(--control-h); padding:7px 0; border-bottom:1px solid var(--line); } -/* ---------- beheerpaneel (tabblad "Beheer" binnen Instellingen) ---------- */ +.vw-row:last-of-type{border-bottom:none;} +.vw-lbl{font-weight:700; font-size:14.5px;} +.seg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px; flex:none;} +.seg button{ + border:none; border-radius:999px; padding:6px 13px; font:inherit; font-weight:700; + cursor:pointer; background:transparent; color:var(--muted); font-size:13.5px; +} +.seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);} +/* ---------- beheerpaneel (tabblad "Beheer" binnen Instellingen) ---------- + alle velden/knoppen in een rij zijn even hoog: var(--control-h) */ .am-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;} .am-head h2{margin:0; font-size:20px;} .am-h3{margin:14px 0 6px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;} .am-msg{ - min-height:20px; font-size:13.5px; font-weight:800; color:var(--green); margin:4px 0; + min-height:20px; font-size:13.5px; font-weight:700; color:var(--green); margin:4px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .am-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;} -.am-inp,.am-sel{ - border:2px solid #cdd9e8; border-radius:10px; padding:8px 10px; font:inherit; - font-size:14px; outline:none; background:#fff; min-width:0; +.am-inp,.am-sel,.am-pw{ + border:1px solid var(--line); border-radius:var(--radius); height:var(--control-h); + padding:0 11px; font:inherit; font-size:14px; outline:none; + background:var(--surface); color:var(--ink); min-width:0; } +.am-inp:focus,.am-sel:focus,.am-pw:focus{border-color:var(--accent);} +/* de generieke settings-input-regel (width:100%/marge) geldt niet in het beheerpaneel: + daar bepalen de am-*-regels de maat, zodat alles in een rij gelijk uitlijnt */ +#settingsModal #adminModal input{margin-bottom:0;} .am-inp{flex:1; min-width:140px;} +.am-pw{width:120px;} .am-list{display:flex; flex-direction:column; gap:5px;} -.am-group{font-weight:900; font-size:13px; margin-top:10px; color:var(--ink);} +.am-group{font-weight:700; font-size:13px; margin-top:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;} .am-row{ - display:flex; gap:8px; align-items:center; background:#f7fafd; - border-radius:10px; padding:6px 10px; flex-wrap:wrap; + display:flex; gap:8px; align-items:center; background:var(--surface-2); + border-radius:var(--radius); padding:7px 10px; flex-wrap:wrap; } -.am-name{font-weight:800; font-size:14px; flex:1; min-width:120px;} +.am-name{font-weight:700; font-size:14px; flex:1; min-width:120px;} .am-role{font-size:12px; font-weight:700; color:var(--muted);} -.am-pw{ - border:2px solid #cdd9e8; border-radius:8px; padding:5px 8px; font:inherit; - font-size:13px; width:110px; outline:none; -} -.am-code{font-size:12.5px; font-weight:800; color:var(--orange);} +.am-code{font-size:12.5px; font-weight:700; color:var(--orange);} .am-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} -.am-btn{ - border:none; background:#e8eef6; border-radius:8px; padding:6px 10px; - font:inherit; font-weight:800; font-size:12px; cursor:pointer; color:var(--ink); +.am-btn,.am-copy{ + background:var(--surface); border-radius:var(--radius); + height:var(--control-h); padding:0 12px; border:1px solid var(--line); + font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; color:var(--ink); line-height:1; } -.am-btn:hover{background:#dbe5f1;} +.am-btn:hover,.am-copy:hover{background:var(--surface-3);} .am-del{ - border:none; background:#fbe3e1; border-radius:8px; width:28px; height:28px; - cursor:pointer; font-size:13px; + border:1px solid var(--line); background:var(--red-soft); border-radius:var(--radius); + width:var(--control-h); height:var(--control-h); cursor:pointer; font-size:13px; flex:none; } .am-del:hover{background:var(--red);} -.am-classes{display:flex; gap:6px; flex-wrap:wrap;} +.am-classes{display:flex; gap:6px; flex-wrap:wrap; align-items:center;} .am-chip{ - display:inline-flex; gap:6px; align-items:center; background:#fff; - border:2px solid #e3eaf3; border-radius:999px; padding:5px 12px; - font-weight:800; font-size:13px; + display:inline-flex; gap:6px; align-items:center; background:var(--surface); + border:1px solid var(--line); border-radius:999px; padding:5px 12px; + font-weight:700; font-size:13px; } button.am-chip{cursor:pointer; color:var(--muted);} -button.am-chip.on{border-color:var(--blue); background:#eaf1fc; color:var(--blue-d);} +button.am-chip.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);} .am-chipx{border:none; background:transparent; color:var(--red); font-weight:900; cursor:pointer; padding:0; font-size:11px;} -.am-copy{ - border:none; background:#e8eef6; border-radius:8px; padding:5px 8px; - font:inherit; font-size:13px; cursor:pointer; color:var(--ink); line-height:1; -} -.am-copy:hover{background:#dbe5f1;} .am-reset{ - background:#f7fafd; border:2px solid #cdd9e8; border-radius:12px; + background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:6px 0; display:flex; flex-direction:column; gap:8px; } .am-reset-head{display:flex; align-items:center; justify-content:space-between; gap:8px;} .am-reset-list{display:flex; flex-direction:column; gap:5px; max-height:260px; overflow:auto;} .am-reset-row{ - display:flex; gap:8px; align-items:center; background:#fff; + display:flex; gap:8px; align-items:center; background:var(--surface); border-radius:8px; padding:5px 8px; flex-wrap:wrap; } .am-reset-pw{font-weight:800; font-family:monospace; font-size:13px; color:var(--green);} -body.hc .am-row,body.hc .am-chip{border:1.5px solid #000; background:#fff;} -body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:#fff;} +body.hc .am-row,body.hc .am-chip{border:1.5px solid #000; background:var(--surface);} +body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:var(--surface);} /* ============================================================ Mobiel & tablet: responsieve aanpassingen. Alles hieronder is @@ -1095,10 +1169,10 @@ body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:#fff /* ---------- telefoon (≤600px) ---------- */ @media (max-width:600px){ #toolbar{padding:0 8px; gap:6px;} - .logo{font-size:22px;} - .logo .crayon{font-size:18px; margin-left:4px;} - .tbtn{padding:8px 10px; font-size:13px;} - #boardsPanel{top:60px; max-height:min(66vh,480px);} + /* alleen de uil op kleine schermen, woordmerk verdwijnt */ + .logo-word{display:none;} + .tbtn{padding:0 10px; font-size:13px;} + #boardsPanel{top:calc(var(--tbar) + 2px); max-height:min(66vh,480px);} /* beheerpaneel: dichte rijen worden gestapeld i.p.v. verdrukt */ .am-row{flex-direction:column; align-items:stretch;} @@ -1110,16 +1184,84 @@ body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:#fff /* ---------- aanraakschermen (los van breedte) ---------- */ @media (pointer:coarse){ - .tbtn{min-height:var(--tap-sm);} - #langToggle button{min-height:var(--tap-sm);} + /* alle controls (ook invoervelden) groeien mee naar tikformaat */ + :root{--control-h:44px;} .hud-btn{width:var(--tap-sm); height:var(--tap-sm); font-size:15px;} #penbar .wp-group button{width:var(--tap-sm); height:var(--tap-sm);} #hud.vert{width:104px;} #hud.vert #penbar .wp-group{grid-template-columns:repeat(2,36px);} - .am-btn,.am-copy{min-height:var(--tap-sm); padding:8px 12px;} - .am-del{width:var(--tap-sm); height:var(--tap-sm);} .am-chip{padding:7px 14px;} .am-chipx{padding:4px;} /* geen hover op aanraakschermen: de greep moet altijd zichtbaar zijn */ .widget-rs{opacity:.7; width:38px; height:38px;} } + +/* ============================================================ + Menubalk-positie: links of rechts (Weergave-instelling). + De balk wordt een verticale kolom; bord en zwevende elementen + schuiven mee via dezelfde body-class. + ============================================================ */ +body.tb-left #toolbar,body.tb-right #toolbar{ + top:0; bottom:0; width:var(--tbar); height:auto; + flex-direction:column; padding:12px 0; gap:10px; + overflow-y:auto; overflow-x:hidden; +} +body.tb-left #toolbar{left:0; right:auto; border-right:1px solid var(--line); border-bottom:none;} +body.tb-right #toolbar{right:0; left:auto; border-left:1px solid var(--line); border-bottom:none;} +body.tb-left .logo-word,body.tb-right .logo-word, +body.tb-left #verTag,body.tb-right #verTag, +body.tb-left #btnSave span,body.tb-right #btnSave span, +body.tb-left #userLbl,body.tb-right #userLbl{display:none;} +body.tb-left #toolbar .tbtn,body.tb-right #toolbar .tbtn{padding:0; width:var(--control-h); min-width:0; flex:none;} +body.tb-left #btnSave,body.tb-right #btnSave{min-width:0;} +body.tb-left #zoomPct,body.tb-right #zoomPct{min-width:0; font-size:11.5px;} +body.tb-left #board,body.tb-left #pupilView{inset:0 0 0 var(--tbar);} +body.tb-right #board,body.tb-right #pupilView{inset:0 var(--tbar) 0 0;} +body.tb-right #fab{right:calc(var(--tbar) + 16px);} +body.tb-right #fabBoardsBtn{right:calc(var(--tbar) + 88px);} +body.tb-right #boardStrip,body.tb-right #boardsPanel{right:calc(var(--tbar) + 12px);} +body.tb-left #boardsPanel,body.tb-right #boardsPanel{top:12px;} +body.tb-left #fabmenu{right:24px;} +body.tb-right #fabmenu{right:calc(var(--tbar) + 16px);} + +/* ============================================================ + Weergave-instelling "glas-effect uit": ondoorzichtige panelen + i.p.v. blur - rustiger en lichter voor oudere digiborden. + ============================================================ */ +body.no-glass .widget,body.no-glass #hud,body.no-glass .fab-item, +body.no-glass #boardStrip,body.no-glass #boardsPanel,body.no-glass .mm-top, +body.no-glass .widget.bare .widget-head{ + backdrop-filter:none; -webkit-backdrop-filter:none; + background:var(--surface); +} +body.no-glass .widget-head{background:var(--surface-2);} + +/* ============================================================ + Donker thema: bord-achtergrondpatronen en glas-laag. + (De chrome-laag volgt automatisch via de tokens in body.dark.) + ============================================================ */ +body.dark #board.bg-dots{background-image:radial-gradient(circle,#2c3a5e 1.4px,transparent 1.4px);} +body.dark #board.bg-lines{background-image:repeating-linear-gradient(#0000 0 39px,#2c3a5e 39px 40px);} +body.dark #board.bg-write{background-image:repeating-linear-gradient( + #0000 0 19px,#243052 19px 20px,#0000 20px 39px,#3a4a70 39px 40.5px,#0000 40.5px 59px,#243052 59px 60px,#0000 60px 79px);} +body.dark #board.bg-grid-s{background-image: + repeating-linear-gradient(#0000 0 24px,#243052 24px 25px), + repeating-linear-gradient(90deg,#0000 0 24px,#243052 24px 25px);} +body.dark #board.bg-grid-b{background-image: + repeating-linear-gradient(#0000 0 49px,#2c3a5e 49px 50px), + repeating-linear-gradient(90deg,#0000 0 49px,#2c3a5e 49px 50px);} +body.dark .widget{background:var(--glass); border-color:var(--glass-line);} +body.dark .widget:hover,body.dark .widget:focus-within{background:var(--glass-strong); border-color:rgba(255,255,255,.14);} +body.dark .widget-head{background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.08);} +body.dark #hud{background:var(--glass); border-color:var(--glass-line);} +body.dark .fab-item{background:var(--glass-strong); color:var(--ink);} +body.dark .fab-item:hover{background:var(--surface-3);} +body.dark #boardStrip,body.dark #boardsPanel{background:var(--glass-strong); border-color:var(--glass-line);} +body.dark .widget.bare .widget-head{background:var(--glass-strong);} +body.dark .mm-top{background:var(--glass-strong);} +body.dark .mm-pop{background:var(--surface); box-shadow:var(--shadow-2);} +body.dark .dock-item{background:var(--surface-2); color:var(--ink);} +body.dark .dock-item:hover{background:var(--surface-3);} +body.dark .wp-group button.on{background:var(--surface-3); box-shadow:none;} +body.dark .lg-kbd button,body.dark .blok{filter:saturate(.9) brightness(.96);} +body.dark .bs-card canvas{background:#fff;} /* bord-preview blijft de echte (witte) bordkleur tonen */ diff --git a/public/fonts/LICENSE-Quicksand.txt b/public/fonts/LICENSE-Quicksand.txt new file mode 100644 index 0000000..2c90211 --- /dev/null +++ b/public/fonts/LICENSE-Quicksand.txt @@ -0,0 +1,4 @@ +Quicksand - ontworpen door Andrew Paglinawan e.a. +Gelicenseerd onder de SIL Open Font License 1.1 (https://openfontlicense.org). +Bron: Google Fonts (https://fonts.google.com/specimen/Quicksand). +Dit bestand (quicksand.woff2) is het latin-subset van de variabele font (gewichten 300-700). diff --git a/public/fonts/quicksand.woff2 b/public/fonts/quicksand.woff2 new file mode 100644 index 0000000..b29be8d Binary files /dev/null and b/public/fonts/quicksand.woff2 differ diff --git a/public/img/logo.svg b/public/img/logo.svg new file mode 100644 index 0000000..b77b8da --- /dev/null +++ b/public/img/logo.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index 680fbe4..249501b 100644 --- a/public/index.html +++ b/public/index.html @@ -3,19 +3,19 @@ -teach - +teachus.today + +
- @@ -68,7 +64,10 @@
+
@@ -106,6 +106,7 @@
+
@@ -137,6 +138,54 @@
+ + diff --git a/public/js/app.js b/public/js/app.js index 3f3ec04..33db8f5 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -23,17 +23,59 @@ zoomPct.addEventListener("click", ()=>setZoom(100)); /* tap the % to reset */ document.addEventListener("langchange", ()=>{ btnZoomIn.title = btnZoomOut.title = zoomPct.title = T("zoomUI"); }); try{ const z = +localStorage.getItem("teach.zoom"); if(z>100) setZoom(z); else setZoom(100); }catch(e){ setZoom(100); } -/* high-contrast accessibility mode (device setting, persists) */ -const btnHC = document.getElementById("btnHC"); -function setHC(on){ - document.body.classList.toggle("hc", on); - btnHC.classList.toggle("on", on); - btnHC.title = T("a11y"); - try{ localStorage.setItem("teach.hc", on ? "1" : ""); }catch(e){} +/* weergave-instellingen (Instellingen → Weergave): apparaat-gebonden voorkeuren. + Elke seg-groep: knopjes met data-v, keuze in localStorage, body-class toepassen. */ +function initSeg(id, key, def, apply){ + const seg = document.getElementById(id); + let val = def; + try{ val = localStorage.getItem(key) || def; }catch(e){} + if(![...seg.querySelectorAll("button")].some(b=>b.dataset.v===val)) val = def; + const set = v=>{ + seg.querySelectorAll("button").forEach(b=>b.classList.toggle("active", b.dataset.v===v)); + apply(v); + try{ localStorage.setItem(key, v); }catch(e){} + }; + seg.querySelectorAll("button").forEach(b=>b.addEventListener("click", ()=>set(b.dataset.v))); + set(val); } -btnHC.addEventListener("click", ()=>setHC(!document.body.classList.contains("hc"))); -document.addEventListener("langchange", ()=>{ btnHC.title = T("a11y"); }); -try{ if(localStorage.getItem("teach.hc")==="1") setHC(true); }catch(e){} +/* thema: licht / donker / automatisch (volgt het OS) */ +const darkMq = window.matchMedia("(prefers-color-scheme: dark)"); +const applyTheme = v=>{ + document.body.classList.toggle("dark", v==="dark" || (v==="auto" && darkMq.matches)); +}; +initSeg("segTheme", "teach.theme", "light", applyTheme); +darkMq.addEventListener("change", ()=>{ + try{ if((localStorage.getItem("teach.theme")||"light")==="auto") applyTheme("auto"); }catch(e){} +}); +/* hoog contrast (voorheen de 👁-knop in de menubalk; zelfde localStorage-sleutel) */ +(function(){ + let init = "off"; + try{ if(localStorage.getItem("teach.hc")==="1") init = "on"; }catch(e){} + const seg = document.getElementById("segHC"); + const set = v=>{ + seg.querySelectorAll("button").forEach(b=>b.classList.toggle("active", b.dataset.v===v)); + document.body.classList.toggle("hc", v==="on"); + try{ localStorage.setItem("teach.hc", v==="on" ? "1" : ""); }catch(e){} + }; + seg.querySelectorAll("button").forEach(b=>b.addEventListener("click", ()=>set(b.dataset.v))); + set(init); +})(); +/* menubalk-positie: boven / links / rechts */ +initSeg("segTbar", "teach.tbar", "top", v=>{ + document.body.classList.toggle("tb-left", v==="left"); + document.body.classList.toggle("tb-right", v==="right"); +}); +/* minder beweging: standaard uit als het OS erom vraagt */ +const motionDef = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "off" : "on"; +initSeg("segMotion", "teach.motion", motionDef, v=>document.body.classList.toggle("no-motion", v==="off")); +/* glas-effect (transparantie/blur van widgets en balken) */ +initSeg("segGlass", "teach.glass", "on", v=>document.body.classList.toggle("no-glass", v==="off")); + +/* taalkeuze onthouden (de schakelaar staat nu onder Weergave) */ +try{ + const l = localStorage.getItem("teach.lang"); + if(l && I18N[l]) LANG = l; +}catch(e){} applyI18n(); updateEmptyHint(); diff --git a/public/js/core.js b/public/js/core.js index 1241889..cc10548 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -2,7 +2,7 @@ "use strict"; /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline). Kept in sync by hand with the VERSION file at the repo root on every release. */ -const VERSION = "0.2.22"; +const VERSION = "0.3.00"; (function(){ const tag = document.getElementById("verTag"); tag.textContent = "v"+VERSION; @@ -120,6 +120,11 @@ const I18N = { login:"Inloggen", loginBtn:"Inloggen", registerBtn:"Account maken", logout:"Uitloggen", settingsTitle:"Instellingen", tabLogin:"Inloggen", tabLinkCode:"Koppelcode", busy:"Bezig…", stAccount:"Account", stPassword:"Wachtwoord", stSession:"Sessie", + stView:"Weergave", vwTheme:"Thema", vwLight:"Licht", vwDark:"Donker", vwAuto:"Auto", + vwContrast:"Hoog contrast", vwOn:"Aan", vwOff:"Uit", vwLang:"Taal", + vwTbar:"Menubalk", vwTop:"Boven", vwLeft:"Links", vwRight:"Rechts", + vwMotion:"Animaties", vwGlass:"Glas-effect", + vwNote:"Deze voorkeuren gelden voor dit apparaat.", pwChanged:"Wachtwoord gewijzigd ✓", namePh:"naam", passPh:"wachtwoord", guestNote:"Zonder inloggen wordt niets bewaard. Log in met je schoolaccount om alles op de server te bewaren.", @@ -254,6 +259,11 @@ const I18N = { login:"Log in", loginBtn:"Log in", registerBtn:"Create account", logout:"Log out", settingsTitle:"Settings", tabLogin:"Log in", tabLinkCode:"Link code", busy:"Please wait…", stAccount:"Account", stPassword:"Password", stSession:"Session", + stView:"Display", vwTheme:"Theme", vwLight:"Light", vwDark:"Dark", vwAuto:"Auto", + vwContrast:"High contrast", vwOn:"On", vwOff:"Off", vwLang:"Language", + vwTbar:"Menu bar", vwTop:"Top", vwLeft:"Left", vwRight:"Right", + vwMotion:"Animations", vwGlass:"Glass effect", + vwNote:"These preferences apply to this device.", pwChanged:"Password changed ✓", namePh:"name", passPh:"password", guestNote:"Without logging in nothing is saved. Log in with your school account to keep everything on the server.", @@ -321,7 +331,11 @@ function applyI18n(){ document.dispatchEvent(new CustomEvent("langchange")); } document.querySelectorAll("#langToggle button").forEach(b=>{ - b.addEventListener("click", ()=>{ LANG=b.dataset.lang; applyI18n(); }); + b.addEventListener("click", ()=>{ + LANG=b.dataset.lang; + try{ localStorage.setItem("teach.lang", LANG); }catch(e){} + applyI18n(); + }); }); document.getElementById("btnFs").addEventListener("click", ()=>{ if(document.fullscreenElement) document.exitFullscreen(); else document.documentElement.requestFullscreen(); @@ -427,14 +441,16 @@ function switchLoginTab(tab){ document.querySelectorAll("#loginModal .ed-tabs button").forEach(b=>{ b.addEventListener("click", ()=>switchLoginTab(b.dataset.tab)); }); -/* instellingen-tabs: "account" vs "beheer" - alles in één overzicht i.p.v. een los venster */ +/* instellingen-tabs: "account" / "weergave" / "beheer" - alles in één overzicht */ function switchSettingsTab(tab){ document.querySelectorAll("#settingsTabs button").forEach(b=>b.classList.toggle("active", b.dataset.tab===tab)); document.getElementById("settingsAccountPanel").style.display = tab==="account" ? "block" : "none"; + document.getElementById("settingsViewPanel").style.display = tab==="view" ? "block" : "none"; document.getElementById("settingsAdminPanel").style.display = tab==="admin" ? "block" : "none"; } /* het "beheer"-tabblad heeft zijn eigen klik-handler in admin.js (moet eerst data laden) */ document.querySelector('#settingsTabs button[data-tab="account"]').addEventListener("click", ()=>switchSettingsTab("account")); +document.querySelector('#settingsTabs button[data-tab="view"]').addEventListener("click", ()=>switchSettingsTab("view")); async function loadSchools(){ const sel = document.getElementById("liSchool"); try{ @@ -445,7 +461,10 @@ async function loadSchools(){ } function openSettings(){ settingsMsg.textContent = ""; settingsMsg.classList.remove("ok"); - switchSettingsTab("account"); + /* zonder account is er geen Account-tab: dan direct naar Weergave + (zo blijven taal/contrast/thema ook als gast bereikbaar) */ + document.querySelector('#settingsTabs button[data-tab="account"]').style.display = currentUser ? "" : "none"; + switchSettingsTab(currentUser ? "account" : "view"); settingsWrap.classList.add("open"); } document.getElementById("btnUser").addEventListener("click", ()=>{ @@ -455,6 +474,11 @@ document.getElementById("btnUser").addEventListener("click", ()=>{ loadSchools(); loginWrap.classList.add("open"); }); +/* gast-ingang naar de weergave-instellingen vanuit het inlogscherm */ +document.getElementById("btnGuestView").addEventListener("click", ()=>{ + loginWrap.classList.remove("open"); + openSettings(); +}); document.getElementById("btnSettingsClose").addEventListener("click", ()=>settingsWrap.classList.remove("open")); loginWrap.addEventListener("click", e=>{ if(e.target===loginWrap) loginWrap.classList.remove("open"); }); settingsWrap.addEventListener("click", e=>{ if(e.target===settingsWrap) settingsWrap.classList.remove("open"); });