From 14115b79adccaf235c7a8e3f336b729366b5259c Mon Sep 17 00:00:00 2001
From: Ramon <dev@ramonbesselink.nl>
Date: Mon, 13 Jul 2026 15:55:20 +0200
Subject: [PATCH] v0.2.12-beta: Instellingen herzien tot een overzichtelijk,
 volwassen menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Losse ⚙️-knop uit de vorige commit weer verwijderd; Instellingen blijft bereikbaar via de bestaande 👤-knop, geen extra knoppen in de werkbalk
- Instellingen ingedeeld in duidelijke secties (Account, Wachtwoord, Sessie) met kaarten en sectielabels, hergebruikt van het beheerpaneel (.am-h3/.am-reset/.am-name/.am-role) i.p.v. losse velden onder elkaar
- Casual "Hoi ... 👋"-begroeting vervangen door een rustige naam/rol-weergave, consistent met hoe andere gebruikers in het beheerpaneel getoond worden
- Expliciete ✕-sluitknop toegevoegd, zelfde patroon als het beheerpaneel

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/css/teach.css |  7 ++++++-
 public/index.html    | 29 +++++++++++++++++++++--------
 public/js/core.js    | 13 ++++++-------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/public/css/teach.css b/public/css/teach.css
index f670833..9874e47 100644
--- a/public/css/teach.css
+++ b/public/css/teach.css
@@ -426,7 +426,12 @@
   .formMsg{min-height:20px; font-size:13.5px; font-weight:700; color:var(--red); margin:6px 0;}
   .formMsg.ok{color:var(--green);}
   .guestnote{font-size:13px; color:var(--muted); margin-top:12px; line-height:1.45;}
-  #settingsModal .hello{font-size:18px; font-weight:800; margin-bottom:14px;}
+  /* instellingen: neutrale kaarten per sectie (.am-reset, hergebruikt van het
+     beheerpaneel) i.p.v. het speelse bord-uiterlijk - dit scherm is voor volwassenen */
+  #settingsModal .am-h3:first-of-type{margin-top:0;}
+  #settingsModal .am-reset .lrow{margin:0;}
+  #settingsModal .am-reset .guestnote{margin-top:2px;}
+  #settingsModal .am-name{font-size:16px;}
   /* =========================================================
      Letter game widget
   ==========================================================*/
diff --git a/public/index.html b/public/index.html
index 3e61892..6221b87 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,6 @@
   <button class="tbtn ghost" id="btnFolders">📁</button>
   <button class="tbtn ghost" id="btnSave">💾 <span data-i18n="saveBoard"></span></button>
   <button class="tbtn ghost" id="btnUser">👤 <span id="userLbl"></span></button>
-  <button class="tbtn ghost" id="btnSettings" style="display:none;">⚙️</button>
   <button class="tbtn ghost" id="btnAdmin" style="display:none;">👥</button>
   <div id="langToggle">
     <button data-lang="nl">NL</button>
@@ -101,10 +100,20 @@
 </div>
 <div class="modalwrap" id="settingsWrap">
   <div class="modal" id="settingsModal">
-    <h2 data-i18n="settingsTitle"></h2>
-    <div class="hello" id="helloLbl"></div>
-    <div id="settingsMsg" class="formMsg"></div>
-    <div id="ownPwBlock">
+    <div class="am-head">
+      <h2 data-i18n="settingsTitle"></h2>
+      <button class="wclose" id="btnSettingsClose">✕</button>
+    </div>
+
+    <div class="am-h3" data-i18n="stAccount"></div>
+    <div class="am-reset">
+      <div class="am-name" id="helloName"></div>
+      <div class="am-role" id="helloRole"></div>
+    </div>
+
+    <div class="am-h3" data-i18n="stPassword"></div>
+    <div class="am-reset" id="ownPwBlock">
+      <div id="settingsMsg" class="formMsg"></div>
       <div class="lrow">
         <input type="password" id="ownPw" maxlength="64" autocomplete="new-password">
         <button class="tbtn ghost pwtoggle" type="button" id="btnOwnPwToggle" data-i18n="pwShow"></button>
@@ -114,10 +123,14 @@
         <button class="tbtn ghost" id="btnOwnPw" data-i18n="pwChange"></button>
       </div>
     </div>
-    <div class="lrow">
-      <button class="tbtn ghost" id="btnLogout" data-i18n="logout"></button>
+
+    <div class="am-h3" data-i18n="stSession"></div>
+    <div class="am-reset">
+      <div class="lrow">
+        <button class="tbtn ghost" id="btnLogout" data-i18n="logout"></button>
+      </div>
+      <div class="guestnote" data-i18n="storedNote"></div>
     </div>
-    <div class="guestnote" data-i18n="storedNote"></div>
   </div>
 </div>
 <div class="modalwrap" id="adminWrap">
diff --git a/public/js/core.js b/public/js/core.js
index 7c9c8fc..f666156 100644
--- a/public/js/core.js
+++ b/public/js/core.js
@@ -112,6 +112,7 @@ const I18N = {
     tmHint:"Sleep aan de rode schijf om de tijd in te stellen.",
     login:"Inloggen", loginBtn:"Inloggen", registerBtn:"Account maken", logout:"Uitloggen",
     settingsTitle:"Instellingen", tabLogin:"Inloggen", tabLinkCode:"Koppelcode", busy:"Bezig…",
+    stAccount:"Account", stPassword:"Wachtwoord", stSession:"Sessie",
     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.",
@@ -237,6 +238,7 @@ const I18N = {
     tmHint:"Drag the red disc to set the time.",
     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",
     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.",
@@ -373,16 +375,13 @@ const roleKey = r => r==="super" ? "roleSuper" : r==="admin" ? "roleAdmin" : r==
 function updateUserUI(){
   document.getElementById("userLbl").textContent = currentUser ? currentUser.displayName : T("login");
   document.getElementById("btnUser").classList.toggle("on", !!currentUser);
-  const settingsBtn = document.getElementById("btnSettings");
-  settingsBtn.style.display = currentUser ? "" : "none";
-  settingsBtn.title = T("settingsTitle");
   const adminBtn = document.getElementById("btnAdmin");
   adminBtn.style.display = can("admin.access") ? "" : "none";
   adminBtn.title = T("beheer");
   if(currentUser){
-    document.getElementById("helloLbl").textContent =
-      `${T("hello")} ${currentUser.displayName}! 👋 · ${T(roleKey(currentUser.role))}`;
-    document.getElementById("ownPwBlock").style.display = can("password.own.change") ? "block" : "none";
+    document.getElementById("helloName").textContent = currentUser.displayName;
+    document.getElementById("helloRole").textContent = T(roleKey(currentUser.role));
+    document.getElementById("ownPwBlock").style.display = can("password.own.change") ? "flex" : "none";
   }
 }
 /* login-modal tabs: "inloggen" vs "koppelcode activeren" */
@@ -413,7 +412,7 @@ document.getElementById("btnUser").addEventListener("click", ()=>{
   loadSchools();
   loginWrap.classList.add("open");
 });
-document.getElementById("btnSettings").addEventListener("click", 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"); });