Skip to main content

oefenhub_beheerder_08_sys_04_handige_links_paginas_V1_13.html

Korte beschrijving​

Mockup van het beheer van handige links en pagina's binnen het systeemgedeelte van OefenHub. Deze pagina ondersteunt het beheren van ondersteunende pagina's en verwijzingen die binnen het platform beschikbaar zijn.

Gerelateerde documentatie​

Bestand​

Broncode​

/mockups_html/beheerder/oefenhub_beheerder_08_sys_04_handige_links_paginas_V1_13.html

<!DOCTYPE html>

<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OefenHub Beheerder - Handige links &amp; pagina’s</title>
<link href="./oefenhub_shared_logo.css" rel="stylesheet">
<style>
:root {
  --blue-1:#8fd0ff; --blue-2:#5bb3ff; --blue-3:#1f82e9; --blue-4:#0d5db8;
  --text:#114f95; --muted:#5f7ea5; --line:rgba(17,79,149,.12);
  --orange-1:#ffbb4d; --orange-2:#ff9620; --green-1:#8adf67; --green-2:#57ba3c;
  --yellow-1:#ffd04e; --yellow-2:#f6aa07; --shadow:0 12px 28px rgba(35,100,177,.12);
  --shadow-soft:0 8px 18px rgba(35,100,177,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color:var(--text);background:
 radial-gradient(circle at 8% 14%, rgba(255,255,255,.68) 0 12%, transparent 13%),
 radial-gradient(circle at 18% 10%, rgba(255,255,255,.45) 0 9%, transparent 10%),
 radial-gradient(circle at 86% 17%, rgba(255,255,255,.58) 0 11%, transparent 12%),
 linear-gradient(180deg,#7ec2f8 0%,#bfe2fd 15%,#edf7ff 34%,#f7fbff 100%);min-height:100vh}
.wrap{width:min(1220px,calc(100% - 30px));margin:0 auto}
.header{padding:10px 0 12px;background:linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));border-bottom:1px solid rgba(255,255,255,.38);box-shadow:0 8px 20px rgba(28,100,177,.08);position:relative;z-index:5}
.header-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.brand{display:flex;flex-direction:column;align-items:flex-start;min-width:250px}.brand img{display:block;height:46px;width:auto}
.welcome-text{font-size:12px;color:rgba(17,79,149,.82);font-weight:700;margin-top:-10px;margin-left:53px}
.nav-pills{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap;white-space:nowrap}.nav-item{position:relative;display:inline-flex;align-items:center}
.pill{border:0;border-radius:12px;padding:9px 14px;color:#fff;font-size:13px;font-weight:900;box-shadow:var(--shadow-soft);line-height:1;cursor:pointer;flex:0 0 auto;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.pill:hover{transform:translateY(-1px);filter:brightness(1.02)}
.pill.orange{background:linear-gradient(180deg,#ffbb4d,#ff7f12)} .pill.blue{background:linear-gradient(180deg,#2f88ea,#176acc)} .pill.yellow{background:linear-gradient(180deg,#ffd04d,#f4ab08)} .pill.green{background:linear-gradient(180deg,#8adf67,#58ba3d)}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:140px}.mail-btn,.profile-chip{border:0;box-shadow:var(--shadow-soft);cursor:pointer}
.mail-btn{position:relative;width:40px;height:40px;border-radius:999px;background:linear-gradient(180deg,#ffffff,#eef6ff);color:var(--blue-4);font-size:17px}
.badge{position:absolute;right:-2px;bottom:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e23838;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.profile-nav{position:relative}.profile-chip{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:linear-gradient(180deg,#ffffff,#edf6ff);padding:0;position:relative}
.avatar{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg,#ffd04d,#f4ab08);color:#fff;font-size:16px;font-weight:900;box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}
main.wrap{padding:22px 0 34px}
.breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px 4px;color:#396ba2;font-size:13px;font-weight:800}.breadcrumb span.sep{opacity:.55}
.tab-shell{display:grid}
.top-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 0 0;padding:0;background:transparent;border:0;box-shadow:none}
.tab-btn{position:relative;border:1px solid rgba(17,79,149,.16);background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(237,246,255,.92));border-radius:18px 18px 0 0;padding:0px 20px;color:#2d5f97;font-size:13px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-soft);min-height:25px}
.tab-btn.active{background:linear-gradient(180deg,#2f88ea,#176acc);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(35,100,177,.18)}
.tab-panel{display:none;background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96));border:1px solid rgba(170,204,238,.6);border-radius:0 24px 24px 24px;box-shadow:var(--shadow);padding:18px 20px 20px}
.tab-panel.active{display:block}
.intro-copy{font-size:15px;line-height:1.65;color:#315d91;max-width:960px;margin:0 0 12px}
.info-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start;background:rgb(183 222 253);border:1px solid rgb(140 197 242);border-radius:0px 22px 22px 22px;padding:18px}
.info-intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.footer-card{background:rgba(255,255,255,.9);border:1px solid rgba(17,79,149,.08);border-radius:22px;box-shadow:var(--shadow-soft);padding:18px;min-height:560px}
.footer-card h2{margin:0 0 10px;color:var(--blue-4);font-size:28px;line-height:1.12}
.footer-card h3{margin:0 0 10px;color:var(--blue-4);font-size:18px}
.muted{color:#55789f;font-size:14px;line-height:1.6;margin:0}
.simple-placeholder{min-height:560px;display:grid;place-items:center;font-size:24px;font-weight:900;color:#4d75a2;background:rgba(255,255,255,.72);border:1px dashed rgba(17,79,149,.18);border-radius:24px}

.footer-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:0px}
.subtab-btn{border:1px solid rgba(17,79,149,.16);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(237,246,255,.94));border-radius:16px 16px 0 0;padding:0px 20px;color:#2d5f97;font-size:13px;font-weight:900;cursor:pointer;min-height:25px;box-shadow:var(--shadow-soft)}
.subtab-btn.active{background:linear-gradient(180deg,#5ca7f2,#1f78db);color:#fff;border-color:transparent}
.footer-subpanel{display:none}.footer-subpanel.active{display:block}
.footer-urls-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;background:rgb(183 222 253);border:1px solid rgb(140 197 242);border-radius:0px 22px 22px 22px;padding:18px}
.left-list{display:grid;gap:14px}
.footer-url-listbox{background:#fff;border:1px solid rgba(17,79,149,.12);border-radius:20px;padding:12px;box-shadow:var(--shadow-soft);min-height:560px;display:flex;flex-direction:column}
.footer-url-listbox h4{margin:0 0 10px;color:#0d5db8;font-size:17px}
.url-list{display:grid;gap:10px;max-height:300px;overflow:auto;padding-right:4px}
.url-item,.history-item{border-radius:16px;border:1px solid rgba(17,79,149,.1);background:linear-gradient(180deg,#fff,#f4f9ff);padding:12px 13px}
.url-item strong{display:block;color:#0d5db8;font-size:15px;margin-bottom:3px}.url-item span{display:block;color:#5a7ea6;font-size:13px;line-height:1.45}
.btn-row{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap}.btn{border:0;border-radius:14px;min-height:42px;padding:0 16px;font:inherit;font-size:14px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-soft)}
.btn-primary{background:linear-gradient(180deg,#2f88ea,#176acc);color:#fff}.btn-secondary{background:linear-gradient(180deg,#ffffff,#edf5ff);color:#0d5db8}.btn-danger{background:linear-gradient(180deg,#ffd8d8,#f4b9b9);color:#ab3d3d}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field,.field-full{display:grid;gap:7px}.field-full{grid-column:1 / -1}
label{font-size:13px;font-weight:900;color:#235790}
input[type="text"],input[type="url"],select,textarea{width:100%;border:1px solid rgba(17,79,149,.14);background:rgba(255,255,255,.98);border-radius:16px;padding:12px 14px;font:inherit;color:#134f92;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
textarea{min-height:132px;resize:vertical}.hint{font-size:12px;line-height:1.45;color:#6d88aa;margin-top:-2px}.checkbox-row{display:flex;align-items:center;gap:10px;padding-top:18px}
.history-box{margin-top:16px;border-top:1px solid rgba(17,79,149,.1);padding-top:16px}.history-list{display:grid;gap:10px;max-height:240px;overflow:auto;padding-right:4px}
.history-item strong{display:block;color:#0d5db8;font-size:14px;margin-bottom:4px}.history-item p{margin:0;color:#58799f;font-size:13px;line-height:1.5}

.role-layout{display:grid;grid-template-columns:152px 1fr;gap:0px;background:rgb(183 222 253);border:1px solid rgb(140 197 242);border-radius:0px 22px 22px 22px;padding:18px}
.role-nav{display:grid;gap:0px 4px;align-content:start;margin-top:40px}.role-btn{border:1px solid rgba(17,79,149,.16);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(237,246,255,.94));border-radius:0;padding:0px 12px;color:#2d5f97;font-size:13px;font-weight:900;cursor:pointer;min-height:30px;text-align:center;box-shadow:var(--shadow-soft)}
.role-btn:first-child{border-radius:16px 16px 0 0}.role-btn:last-child{border-radius:0 0 16px 16px}.role-btn.active{background:linear-gradient(180deg,#5ca7f2,#1f78db);color:#fff;border-color:transparent}
.role-panel{display:none}.role-panel.active{display:block}
.selection-layout{display:grid;grid-template-columns:minmax(0,210px) auto minmax(0,210px) auto;gap:12px;align-items:end}
.select-list{border:1px solid rgba(17,79,149,.12);background:#fff;border-radius:20px;min-height:220px;padding:10px;box-shadow:var(--shadow-soft);display:grid;align-content:start;gap:8px}
.select-item{padding:7px 10px;border-radius:12px;background:linear-gradient(180deg,#fff,#f4f9ff);border:1px solid rgba(17,79,149,.1);color:#3b6494;font-size:13px;font-weight:600}
.arrow-stack,.reorder-stack{display:grid;gap:12px}.icon-btn{width:42px;height:42px;border-radius:12px;border:0;background:linear-gradient(180deg,#ffffff,#edf5ff);color:#0d5db8;font-size:20px;font-weight:900;box-shadow:var(--shadow-soft);cursor:pointer}
.selection-controls{display:grid;gap:10px;align-content:end;justify-items:center}
.btn-save-side{min-width:150px}
.footer-inline-title{display:grid;grid-template-columns:auto minmax(0,220px);gap:12px;align-items:center;max-width:360px;margin-bottom:18px}
.footer-inline-title label{margin:0}
.footer-urls-actions{display:flex;justify-content:center;gap:150px;flex-wrap:wrap;margin-top:14px}
.footer-links-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.footer-links-right textarea{width:100%;border:1px solid rgba(17,79,149,.14);background:rgba(255,255,255,.98);border-radius:16px;padding:10px 12px;min-height:120px;color:#134f92;max-width:360px}
.compact-note{background:rgba(239,247,255,.82);border:1px solid rgba(132,186,236,.34);border-radius:16px;padding:12px 14px;color:#456f9e;font-size:13px;line-height:1.55}
.site-footer{margin-top:22px;padding:24px 0 22px;background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92));border-top:1px solid rgba(170,204,238,.62);border-radius:26px 26px 0 0;box-shadow:0 -10px 24px rgba(35,100,177,.06)}
.footer-grid{width:min(1220px,calc(100% - 30px));margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}.footer-col h4{margin:0 0 8px;font-size:16px;color:#0f4d91}.footer-col p{margin:0;color:#5d7da4;font-size:14px;line-height:1.55}.footer-links{display:flex;flex-direction:column;gap:7px}.footer-links a{color:#2364a7;text-decoration:none;font-weight:700;font-size:14px}.footer-links a:hover{text-decoration:underline}.footer-bottom{width:min(1220px,calc(100% - 30px));margin:18px auto 0;padding-top:14px;border-top:1px solid rgba(170,204,238,.56);color:#6b86aa;font-size:13px;font-weight:700}
@media (max-width:980px){.info-grid,.two-col,.role-layout,.selection-layout{grid-template-columns:1fr}.selection-layout{grid-template-columns:1fr}.arrow-stack,.reorder-stack{grid-auto-flow:column;justify-content:center}.footer-grid{grid-template-columns:1fr}}
@media (max-width:900px){.header-row{grid-template-columns:1fr;gap:14px}.brand{min-width:0}.nav-pills{overflow-x:auto;justify-content:flex-start;padding-bottom:2px;width:100%}.header-actions{justify-content:flex-start}.field-grid{grid-template-columns:1fr}}

.footer-urls-grid{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.compact-field input,.compact-field select{min-height:34px;padding:7px 11px}
.compact-textarea{min-height:120px;padding:10px 12px}
.footer-footer-url-list-scroll{max-height:390px;overflow:auto;display:grid;gap:8px;padding-right:4px;flex:1 1 auto}
.selection-scroll{max-height:190px;overflow:auto;display:grid;gap:8px;padding-right:4px}
.history-scroll{max-height:180px;overflow:auto;display:grid;gap:10px;padding-right:4px}
.history-scroll.tall{max-height:280px}
.url-item{padding:10px 12px;border-radius:16px;background:linear-gradient(180deg,#fff,#f4f9ff);border:1px solid rgba(17,79,149,.10);margin-top:8px}
.url-item strong{font-size:14px;font-weight:700}
.url-item span{display:none}
.center-btn{display:flex;justify-content:center;margin-top:14px}
.footer-links-grid{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.footer-links-left{display:grid;gap:12px}
.footer-links-left .field label,.footer-links-left .field-full label,.footer-links-left label{font-size:13px;font-weight:900;color:#235790}
.footer-links-left input{width:100%;border:1px solid rgba(17,79,149,.14);background:rgba(255,255,255,.98);border-radius:16px;padding:9px 12px;min-height:34px;color:#134f92}
.footer-links-right textarea{width:100%;border:1px solid rgba(17,79,149,.14);background:rgba(255,255,255,.98);border-radius:16px;padding:10px 12px;min-height:120px;color:#134f92}
.selection-layout{display:grid;grid-template-columns:1fr auto 1fr auto;gap:14px;align-items:start}
.select-list{border:1px solid rgba(17,79,149,.10);background:#fff;border-radius:18px;padding:10px;min-height:190px}
.select-item{padding:8px 10px;border-radius:12px;background:linear-gradient(180deg,#f8fbff,#eef5ff);border:1px solid rgba(17,79,149,.08);font-size:14px;font-weight:600;color:#2d5f97}
.arrow-stack,.reorder-stack{display:grid;gap:10px;align-content:center}
.icon-btn{min-width:42px;min-height:32px;border:1px solid rgba(17,79,149,.18);border-radius:10px;background:#fff;color:#18518f;font-weight:900}
.simple-placeholder{padding:14px;border:1px dashed rgba(17,79,149,.18);border-radius:14px;background:rgba(255,255,255,.7);color:#5f7ea5}
.checkbox-inline{display:flex;align-items:center;gap:10px;min-height:34px;padding-top:2px}
.checkbox-inline input{width:18px;height:18px}
.btn[disabled], .btn.btn-danger[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.15)}
@media (max-width: 1000px){
  .footer-urls-layout,.role-layout,.info-grid,.footer-links-grid,.selection-layout{grid-template-columns:1fr}
  .role-nav{margin-top:12px}
  .arrow-stack,.reorder-stack{grid-auto-flow:column;justify-content:center}
}


.content-shell{display:grid;gap:0}
.content-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:0}
.content-subtab-btn{border:1px solid rgba(17,79,149,.16);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(237,246,255,.94));border-radius:16px 16px 0 0;padding:0 20px;color:#2d5f97;font-size:13px;font-weight:900;cursor:pointer;min-height:25px;box-shadow:var(--shadow-soft)}
.content-subtab-btn.active{background:linear-gradient(180deg,#5ca7f2,#1f78db);color:#fff;border-color:transparent}
.content-subpanel{display:none}.content-subpanel.active{display:block}
.editor-layout{display:grid;grid-template-columns:152px 1fr;gap:0;background:rgb(183 222 253);border:1px solid rgb(140 197 242);border-radius:0 22px 22px 22px;padding:18px;min-height:560px}
.single-editor-layout{background:rgb(183 222 253);border:1px solid rgb(140 197 242);border-radius:0 22px 22px 22px;padding:18px;min-height:560px}
.editor-nav{display:grid;gap:0 4px;align-content:start;margin-top:40px}
.editor-btn{border:1px solid rgba(17,79,149,.16);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(237,246,255,.94));border-radius:0;padding:0 12px;color:#2d5f97;font-size:13px;font-weight:900;cursor:pointer;min-height:30px;text-align:center;box-shadow:var(--shadow-soft)}
.editor-btn:first-child{border-radius:16px 16px 0 0}.editor-btn:last-child{border-radius:0 0 16px 16px}.editor-btn.active{background:linear-gradient(180deg,#5ca7f2,#1f78db);color:#fff;border-color:transparent}
.editor-panel{display:none}.editor-panel.active{display:block}
.editor-card{background:rgba(255,255,255,.9);border:1px solid rgba(17,79,149,.08);border-radius:22px;box-shadow:var(--shadow-soft);padding:18px;min-height:524px}
.editor-card h3{margin:0 0 10px;color:#0d5db8;font-size:28px;line-height:1.12}
.editor-card h4{margin:0 0 8px;color:#0d5db8;font-size:18px}
.editor-form{display:grid;gap:14px}
.editor-form .compact-field input,.editor-form .compact-field textarea{width:100%;border:1px solid rgba(17,79,149,.14);background:rgba(255,255,255,.98);border-radius:16px;padding:11px 13px;font:inherit;color:#134f92;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.editor-form .compact-field textarea{min-height:82px;resize:vertical}
.inline-save{display:flex;justify-content:center;margin-top:4px}
.editor-history{border-top:1px solid rgba(17,79,149,.1);padding-top:14px;margin-top:6px}
.editor-history h4{margin:0 0 10px}
.editor-history .history-scroll{max-height:240px;overflow:auto;padding-right:4px;display:grid;gap:10px}
.explain-box{background:linear-gradient(180deg,#ffffff,#f3f8ff);border:1px solid rgba(17,79,149,.1);border-radius:18px;padding:16px;display:grid;gap:10px}
.explain-box ul{margin:0;padding-left:18px;color:#55789f;font-size:14px;line-height:1.55}
.summary-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.summary-mini-grid .compact-field textarea{min-height:78px}
.contact-editor-layout{display:grid;grid-template-columns:152px 1fr;gap:0;min-height:560px}
@media (max-width:900px){.editor-layout,.contact-editor-layout{grid-template-columns:1fr}.editor-nav{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}.editor-btn:first-child,.editor-btn:last-child{border-radius:16px}.summary-mini-grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row">
<div class="brand">
<div class="brand-logo" aria-label="OefenHub logo" role="img"></div>
<div class="welcome-text">Welkom terug, Noor</div>
</div>
<div class="nav-pills">

<button class="pill blue" type="button">Site instellingen</button>
<button class="pill orange" type="button">Categorieën beheren</button>
<button class="pill green" type="button">Accounts beheren</button>
</div>
<div class="header-actions">
<button class="mail-btn" type="button">✉<span class="badge">2</span></button>
<div class="profile-nav"><button aria-expanded="false" aria-label="Profiel" class="profile-chip" type="button"><span class="avatar">N</span></button></div>
</div>
</div>
</div>
</header>
<main class="wrap">
<div class="breadcrumb"><span>Home</span><span class="sep">&gt;</span><span>Site instellingen</span><span class="sep">&gt;</span><span>Handige links &amp; pagina’s</span></div>
<section class="tab-shell">
<div class="top-tabs">
<button class="tab-btn active" data-tab="intro">Intro</button>
<button class="tab-btn" data-tab="footer">Footer</button>
<button class="tab-btn" data-tab="about">Over OefenHub</button>
<button class="tab-btn" data-tab="privacy">Privacybeleid</button>
<button class="tab-btn" data-tab="contact">Contact</button>
</div>
<section class="tab-panel active" id="tab-intro">
<div class="info-intro-grid">
<div class="footer-card">
<h2>Handige links &amp; pagina’s</h2>
<p class="intro-copy">Via deze pagina beheer je de tekstuele inhoud van vaste publieke pagina’s en de footer. Volgorde, positie en zichtbaarheid van blokken worden niet via de GUI aangepast, maar via code. De beheerinterface richt zich daarom uitsluitend op teksten per onderdeel, met een geschiedenis per pagina van wie wat wanneer heeft gewijzigd.</p>
<p class="muted">Gebruik de tabbladen om de juiste pagina of footersectie te openen. Binnen Footer kun je apart de beschikbare URL’s, de linker kolom, de middelste kolom en de rechter kolom beheren.</p>
</div>
<div class="footer-card">
<h3>Wat je hier beheert</h3>
<div class="compact-note">Intro: algemene uitleg voor deze beheerpagina.<br/><br/>Footer: URL’s, rolafhankelijke linkkolommen en footerteksten.<br/><br/>Over OefenHub, Privacybeleid en Contact: de tekstinhoud van de publieke informatiepagina’s.</div>
</div>
</div>
</section>
<section class="tab-panel" id="tab-footer">
<div class="footer-subtabs">
<button class="subtab-btn active" data-subtab="uitleg">Uitleg</button>
<button class="subtab-btn" data-subtab="urls">URLs</button>
<button class="subtab-btn" data-subtab="links">Links</button>
<button class="subtab-btn" data-subtab="midden">Midden</button>
<button class="subtab-btn" data-subtab="rechts">Rechts</button>
</div>
<section class="footer-subpanel active" id="footer-uitleg">
<div class="info-grid">
<div class="footer-card">
<h2>Footer beheren</h2>
<p class="intro-copy">Binnen Footer beheer je vier verschillende onderdelen. De beschikbare URL’s worden centraal vastgelegd en kunnen daarna in meerdere footerkolommen worden hergebruikt. De linkkolommen zelf worden per rolcontext samengesteld, zodat publiek, leerling, docent, ouder/voogd en beheerder ieder hun eigen footerinhoud kunnen krijgen.</p>
<div class="compact-note">Gebruik <strong>URLs</strong> om nieuwe interne of externe verwijzingen aan te maken. Gebruik <strong>Links</strong> voor de linker onderhoek met titel, tekstblok en copyright. Gebruik <strong>Midden</strong> en <strong>Rechts</strong> om per rol te bepalen welke links en in welke volgorde in de twee andere footerkolommen zichtbaar zijn.</div>
</div>
<div class="footer-card">
<h3>Rolcontexten</h3>
<div class="compact-note">De footer kan verschillen per context. In de rolgebonden tabs kies je eerst de doelgroep: Publiek, Leerling, Docent, Ouder/voogd of Beheerder. Daarna pas je alleen de tekst of linkselectie voor die context aan.</div>
</div>
</div>
</section>
<section class="footer-subpanel" id="footer-urls">
<div class="footer-urls-layout">
<div class="left-list">
<div class="footer-url-listbox">
<h4>URLs</h4>
<p class="muted" style="margin-bottom:12px;">Onderstaande urls worden gebruikt om in de footer weer te geven. Selecteer een bestaande om te bewerken of voeg een nieuwe toe.</p>
<div class="footer-url-list-scroll">
<div class="url-item"><strong>privacybeleid</strong><span>/privacybeleid</span></div>
<div class="url-item"><strong>over-oefenhub</strong><span>/over-oefenhub</span></div>
<div class="url-item"><strong>contact</strong><span>/contact</span></div>
<div class="url-item"><strong>openai</strong><span>https://openai.com</span></div>
</div>
<div class="center-btn" style="margin-top:14px;"><button class="btn btn-primary">Maak nieuwe url</button></div>
</div>
</div>
<div class="footer-card">
<h3>Details</h3>
<div class="field-grid"><div class="compact-field"><label>Type</label><select><option>Intern</option><option>Extern</option></select></div><div class="compact-field"><label>Naam</label><input type="text" value="Privacybeleid"/></div><div class="compact-field"><label>Url</label><input type="url" value="/privacybeleid"/></div><div class="compact-field"><div class="checkbox-row"><input id="newtab" type="checkbox"/><label for="newtab">Open in nieuw tab</label></div></div></div>
<div class="footer-urls-actions"><button class="btn btn-primary">Opslaan</button><button class="btn btn-danger" disabled="disabled" title="De verwijderknop is alleen beschikbaar als deze url nergens gebruikt wordt.">Verwijder</button></div>

<div class="history-box">
<h3>Geschiedenis</h3>
<div class="history-scroll tall">
<div class="history-item"><strong>Noor de Vries — 01-04-2026 10:42</strong><p>Naam gewijzigd van “Privacy” naar “Privacybeleid”.</p></div>
<div class="history-item"><strong>Noor de Vries — 28-03-2026 16:03</strong><p>Url toegevoegd aan het centrale footer-urlregister.</p></div>
</div>
</div>
</div>
</div>
</section>
<section class="footer-subpanel" id="footer-links">
<div class="role-layout">
<div class="role-nav" data-role-group="links">
<button class="role-btn active" data-role="uitleg">Uitleg</button>
<button class="role-btn" data-role="publiek">Publiek</button>
<button class="role-btn" data-role="leerling">Leerling</button>
<button class="role-btn" data-role="docent">Docent</button>
<button class="role-btn" data-role="ouder">Ouder/voogd</button>
<button class="role-btn" data-role="beheerder">Beheerder</button>
</div>
<div>
<div class="role-panel active" data-role-panel="links-uitleg">
<div class="footer-card"><h3>Footer - Links</h3><p class="muted">In dit onderdeel beheer je de linker onderhoek van de footer. Per rolcontext bepaal je de titel boven de links, het tekstblok eronder en de copyrighttekst. Dit onderdeel bevat dus geen URL-selectie, maar de vaste tekstuele inhoud van de linkerkolom.</p></div>
</div>
<div class="role-panel" data-role-panel="links-publiek"><div class="footer-card"><h3>Footer - Links - Publiek</h3><div class="footer-links-grid"><div class="footer-links-left"><div class="field"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="field"><label>Copyright tekst</label><input type="text" value="© 2026-{CurrentYear} OefenHub"/></div></div><div class="footer-links-right"><div class="field-full"><label>Tekstblok</label><textarea>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</textarea></div></div></div><div class="btn-row" style="margin-top:16px;justify-content:center;"><button class="btn btn-primary">Opslaan</button></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 31-03-2026 09:11</strong><p>Titel aangepast voor Publiek.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="links-leerling"><div class="footer-card"><h3>Footer - Links - Leerling</h3><div class="footer-links-grid"><div class="footer-links-left"><div class="field"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="field"><label>Copyright tekst</label><input type="text" value="© 2026 OefenHub"/></div></div><div class="footer-links-right"><div class="field-full"><label>Tekstblok</label><textarea>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</textarea></div></div></div><div class="btn-row" style="margin-top:16px;justify-content:center;"><button class="btn btn-primary">Opslaan</button></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 01-04-2026 08:04</strong><p>Leerlingcopyright gelijkgetrokken met publieke footer.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="links-docent"><div class="footer-card"><h3>Footer - Links - Docent</h3><div class="footer-links-grid"><div class="footer-links-left"><div class="field"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="field"><label>Copyright tekst</label><input type="text" value="© 2026 OefenHub"/></div></div><div class="footer-links-right"><div class="field-full"><label>Tekstblok</label><textarea>OefenHub ondersteunt docenten met overzichtelijke oefenomgevingen, resultaten en begeleiding binnen één systeem.</textarea></div></div></div><div class="btn-row" style="margin-top:16px;justify-content:center;"><button class="btn btn-primary">Opslaan</button></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 27-03-2026 14:18</strong><p>Docenttekst inhoudelijk aangescherpt.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="links-ouder"><div class="footer-card"><h3>Footer - Links - Ouder/voogd</h3><div class="footer-links-grid"><div class="footer-links-left"><div class="field"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="field"><label>Copyright tekst</label><input type="text" value="© 2026 OefenHub"/></div></div><div class="footer-links-right"><div class="field-full"><label>Tekstblok</label><textarea>OefenHub helpt ouders en verzorgers om de voortgang van hun kind beter te volgen en te ondersteunen.</textarea></div></div></div><div class="btn-row" style="margin-top:16px;justify-content:center;"><button class="btn btn-primary">Opslaan</button></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 26-03-2026 11:01</strong><p>Ouder/voogdtekst vervangen.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="links-beheerder"><div class="footer-card"><h3>Footer - Links - Beheerder</h3><div class="footer-links-grid"><div class="footer-links-left"><div class="field"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="field"><label>Copyright tekst</label><input type="text" value="© 2026 OefenHub"/></div></div><div class="footer-links-right"><div class="field-full"><label>Tekstblok</label><textarea>OefenHub wordt beheerd vanuit één centrale omgeving met aandacht voor ondersteuning, veiligheid en duidelijke rolcontexten.</textarea></div></div></div><div class="btn-row" style="margin-top:16px;justify-content:center;"><button class="btn btn-primary">Opslaan</button></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 24-03-2026 09:47</strong><p>Beheerdertekst toegevoegd.</p></div></div></div></div></div>
</div>
</div>
</section>
<section class="footer-subpanel" id="footer-midden">
<div class="role-layout">
<div class="role-nav" data-role-group="midden">
<button class="role-btn active" data-role="uitleg">Uitleg</button>
<button class="role-btn" data-role="publiek">Publiek</button>
<button class="role-btn" data-role="leerling">Leerling</button>
<button class="role-btn" data-role="docent">Docent</button>
<button class="role-btn" data-role="ouder">Ouder/voogd</button>
<button class="role-btn" data-role="beheerder">Beheerder</button>
</div>
<div>
<div class="role-panel active" data-role-panel="midden-uitleg">
<div class="footer-card"><h3>Footer - Midden</h3><p class="muted">In dit onderdeel bepaal je per rolcontext welke links in de middelste footerkolom verschijnen en in welke volgorde. Je kiest links uit het centrale URL-register en verplaatst ze naar de lijst van gekozen links. De volgorde in de rechterlijst bepaalt ook direct de weergavevolgorde in de footer.</p></div>
</div>
<div class="role-panel" data-role-panel="midden-publiek"><div class="footer-card"><h3>Footer - Midden - Publiek</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div><div class="select-item">OpenAI</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 01-04-2026 11:27</strong><p>Volgorde voor Publiek aangepast.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="midden-leerling"><div class="footer-card"><h3>Footer - Midden - Leerling</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Contact</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 31-03-2026 15:09</strong><p>Leerlinglinks teruggebracht naar 2 stuks.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="midden-docent"><div class="footer-card"><h3>Footer - Midden - Docent</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 28-03-2026 13:10</strong><p>Docentcontext aangepast.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="midden-ouder"><div class="footer-card"><h3>Footer - Midden - Ouder/voogd</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 27-03-2026 08:52</strong><p>Ouder/voogd links opnieuw geordend.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="midden-beheerder"><div class="footer-card"><h3>Footer - Midden - Beheerder</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Handige Links"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div><div class="select-item">OpenAI</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">OpenAI</div><div class="select-item">Contact</div><div class="select-item">Privacybeleid</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 29-03-2026 17:21</strong><p>Beheerdercontext uitgebreid met externe link.</p></div></div></div></div></div>
</div>
</div>
</section>
<section class="footer-subpanel" id="footer-rechts">
<div class="role-layout">
<div class="role-nav" data-role-group="rechts">
<button class="role-btn active" data-role="uitleg">Uitleg</button>
<button class="role-btn" data-role="publiek">Publiek</button>
<button class="role-btn" data-role="leerling">Leerling</button>
<button class="role-btn" data-role="docent">Docent</button>
<button class="role-btn" data-role="ouder">Ouder/voogd</button>
<button class="role-btn" data-role="beheerder">Beheerder</button>
</div>
<div>
<div class="role-panel active" data-role-panel="rechts-uitleg"><div class="footer-card"><h3>Footer - Rechts</h3><p class="muted">De rechter footerkolom werkt hetzelfde als Midden. Ook hier selecteer je per rolcontext welke links zichtbaar zijn en in welke volgorde. In de huidige publieke pagina’s is dit de kolom met de kop “Snel naar”.</p></div></div>
<div class="role-panel" data-role-panel="rechts-publiek"><div class="footer-card"><h3>Footer - Rechts - Publiek</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Snel naar"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Contact</div><div class="select-item">Over OefenHub</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 01-04-2026 12:05</strong><p>Publieke rechtskolom herordend.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="rechts-leerling"><div class="footer-card"><h3>Footer - Rechts - Snel naar</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Snel naar"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div><div class="select-item">OpenAI</div><div class="select-item">Status</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Contact</div><div class="select-item">Privacybeleid</div><div class="select-item">Over OefenHub</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 02-04-2026 10:18</strong><p>Leerlingrechtskolom afgestemd op kindvriendelijke ingangen.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="rechts-docent"><div class="footer-card"><h3>Footer - Rechts - Snel naar</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Snel naar"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div><div class="select-item">OpenAI</div><div class="select-item">Status</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Contact</div><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 02-04-2026 10:18</strong><p>Docentrechtskolom afgestemd op docentgerichte snelkoppelingen.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="rechts-ouder"><div class="footer-card"><h3>Footer - Rechts - Ouder/voogd</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Snel naar"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div><div class="select-item">OpenAI</div><div class="select-item">Status</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div><div class="select-item">Over OefenHub</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 02-04-2026 10:18</strong><p>Ouder/voogdrechtskolom afgestemd op ouderinformatie en contact.</p></div></div></div></div></div>
<div class="role-panel" data-role-panel="rechts-beheerder"><div class="footer-card"><h3>Footer - Rechts - Snel naar</h3><div class="footer-inline-title"><label>Titel boven de links</label><input type="text" value="Snel naar"/></div><div class="selection-layout"><div class="select-list selection-scroll"><div class="select-item">Over OefenHub</div><div class="select-item">Privacybeleid</div><div class="select-item">Contact</div><div class="select-item">OpenAI</div><div class="select-item">Status</div></div><div class="arrow-stack"><button class="icon-btn">&gt;</button><button class="icon-btn">&lt;</button></div><div class="select-list selection-scroll"><div class="select-item">Contact</div><div class="select-item">Privacybeleid</div><div class="select-item">Over OefenHub</div><div class="select-item">Status</div></div><div class="selection-controls"><div class="reorder-stack"><button class="icon-btn">˄</button><button class="icon-btn">˅</button></div><button class="btn btn-primary btn-save-side">Opslaan</button></div></div><div class="history-box"><h3>Geschiedenis</h3><div class="history-scroll tall"><div class="history-item"><strong>Noor de Vries — 02-04-2026 10:18</strong><p>Beheerderrechtskolom afgestemd op beheer- en supportsnelkoppelingen.</p></div></div></div></div></div>
</div>
</div>
</section>
</section>
<section class="tab-panel" id="tab-about"><div class="content-shell"><div class="content-subtabs"><button class="content-subtab-btn active" data-content-tab="about" data-subtab="guide">Uitleg</button><button class="content-subtab-btn" data-content-tab="about" data-subtab="intro">Intro</button><button class="content-subtab-btn" data-content-tab="about" data-subtab="second">Tweede rij</button></div><section class="content-subpanel active" id="about-guide"><div class="single-editor-layout"><div class="editor-card"><h3>Over OefenHub</h3><div class="explain-box"><p class="muted">Hier beheer je de tekstuele inhoud van de publieke pagina <strong>Over OefenHub</strong>. De pagina is opgesplitst in twee rijen, zodat elk zichtbaar tekstblok afzonderlijk aangepast kan worden zonder de volledige pagina in één lang formulier te tonen.</p><ul><li><strong>Intro</strong> bevat de hoofdtekst bovenaan en de drie blokken voor leerlingen, docenten en ouders/verzorgers.</li><li><strong>Tweede rij</strong> bevat de twee onderste inhoudsblokken: waarom OefenHub bestaat en voor wie OefenHub bedoeld is.</li><li>Per onderdeel kun je alleen <strong>titel</strong> en <strong>tekst</strong> aanpassen. Volgorde en locatie worden via code bepaald.</li></ul></div></div></div></section><section class="content-subpanel" id="about-intro"><div class="editor-layout"><div class="editor-nav" data-editor-group="about-intro"><button class="editor-btn active" data-target="about-intro-guide">Uitleg</button><button class="editor-btn" data-target="about-intro-main">Hoofdtekst</button><button class="editor-btn" data-target="about-intro-left">Linker blok</button><button class="editor-btn" data-target="about-intro-middle">Midden blok</button><button class="editor-btn" data-target="about-intro-right">Rechter blok</button></div><div><section class="editor-panel active" id="about-intro-guide"><div class="editor-card"><h3>Intro</h3><div class="explain-box"><p class="muted">In deze sectie beheer je de volledige eerste rij van de pagina <strong>Over OefenHub</strong>. Gebruik <strong>Hoofdtekst</strong> voor de centrale kop en inleiding. Gebruik de drie blokken ernaast voor de rolgerichte toelichting voor leerlingen, docenten en ouders/verzorgers.</p></div></div></section><section class="editor-panel" id="about-intro-main"><div class="editor-card"><h3>Hoofdtekst</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Oefenen, herhalen en begrijpen op één plek"></div><div class="compact-field"><label>Tekst</label><textarea>OefenHub helpt kinderen om schoolvakken spelenderwijs te oefenen, te herhalen en beter te begrijpen. Leerlingen, docenten en ouders/verzorgers werken vanuit dezelfde omgeving, met ieder een eigen rol en passend overzicht.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 05-04-2026 09:14</strong><p>Hoofdtekst aangescherpt voor publieke weergave.</p></div><div class="history-item"><strong>Tom Verbeek — 28-03-2026 15:41</strong><p>Openingszin verduidelijkt.</p></div></div></div></div></div></section><section class="editor-panel" id="about-intro-left"><div class="editor-card"><h3>Linker blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Voor leerlingen"></div><div class="compact-field"><label>Tekst</label><textarea>Leerlingen kunnen oefenen in een overzichtelijke omgeving, resultaten terugzien en op een laagdrempelige manier schoolvakken herhalen.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 02-04-2026 13:10</strong><p>Leerlingtekst compacter gemaakt.</p></div></div></div></div></div></section><section class="editor-panel" id="about-intro-middle"><div class="editor-card"><h3>Midden blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Voor docenten"></div><div class="compact-field"><label>Tekst</label><textarea>Docenten kunnen oefeningen samenstellen, leerlingen begeleiden en voortgang bekijken vanuit een rolgerichte omgeving met duidelijke keuzes.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 30-03-2026 10:52</strong><p>Docentomschrijving verduidelijkt.</p></div></div></div></div></div></section><section class="editor-panel" id="about-intro-right"><div class="editor-card"><h3>Rechter blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Voor ouders en verzorgers"></div><div class="compact-field"><label>Tekst</label><textarea>Ouders en verzorgers kunnen betrokken blijven, resultaten volgen en hun kind ondersteunen vanuit een eigen, begrijpelijke weergave.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 01-04-2026 11:06</strong><p>Bloktekst afgestemd op ouder/voogd-rol.</p></div></div></div></div></div></section></div></div></section><section class="content-subpanel" id="about-second"><div class="editor-layout"><div class="editor-nav" data-editor-group="about-second"><button class="editor-btn active" data-target="about-second-guide">Uitleg</button><button class="editor-btn" data-target="about-second-left">Linker blok</button><button class="editor-btn" data-target="about-second-right">Rechter blok</button></div><div><section class="editor-panel active" id="about-second-guide"><div class="editor-card"><h3>Tweede rij</h3><div class="explain-box"><p class="muted">De tweede rij bestaat uit twee grotere inhoudsblokken. Gebruik deze onderdelen voor de meer toelichtende, publieke uitleg onder de introsectie.</p></div></div></section><section class="editor-panel" id="about-second-left"><div class="editor-card"><h3>Linker blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Waarom OefenHub bestaat"></div><div class="compact-field"><label>Tekst</label><textarea>OefenHub is ontwikkeld om oefenen, begeleiden en inzicht geven samen te brengen in één overzichtelijke omgeving. Zo ontstaat meer rust voor leerlingen en meer duidelijkheid voor de mensen die hen ondersteunen.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 03-04-2026 16:22</strong><p>Bloktekst herschreven naar publiekere toon.</p></div></div></div></div></div></section><section class="editor-panel" id="about-second-right"><div class="editor-card"><h3>Rechter blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Voor wie OefenHub bedoeld is"></div><div class="compact-field"><label>Tekst</label><textarea>OefenHub is bedoeld voor leerlingen die willen oefenen, voor docenten die willen begeleiden en voor ouders/verzorgers die betrokken willen blijven bij de ontwikkeling van hun kind.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 04-04-2026 09:55</strong><p>Rolbeschrijving in rechter blok aangescherpt.</p></div></div></div></div></div></section></div></div></section></div></section><section class="tab-panel" id="tab-privacy"><div class="content-shell"><div class="content-subtabs"><button class="content-subtab-btn active" data-content-tab="privacy" data-subtab="guide">Uitleg</button><button class="content-subtab-btn" data-content-tab="privacy" data-subtab="intro">Intro</button><button class="content-subtab-btn" data-content-tab="privacy" data-subtab="second">Tweede rij</button><button class="content-subtab-btn" data-content-tab="privacy" data-subtab="third">Derde rij</button><button class="content-subtab-btn" data-content-tab="privacy" data-subtab="ending">Afsluiter</button></div><section class="content-subpanel active" id="privacy-guide"><div class="single-editor-layout"><div class="editor-card"><h3>Privacybeleid</h3><div class="explain-box"><p class="muted">Hier beheer je de tekstuele inhoud van de publieke pagina <strong>Privacybeleid</strong>. De pagina is verdeeld over meerdere rijen, zodat elk zichtbaar blok apart aangepast kan worden zonder de totale hoogte te overschrijden.</p><ul><li><strong>Intro</strong> beheert de paginakop en de eerste drie informatieve blokken.</li><li><strong>Tweede rij</strong> beheert de blokken over gebruikte informatie, samenvatting en directe toegang.</li><li><strong>Derde rij</strong> beheert het blok over berichten, meldingen en historie en de drie bijbehorende subblokken.</li><li><strong>Afsluiter</strong> bevat het onderste informatieve contactblok.</li></ul></div></div></div></section><section class="content-subpanel" id="privacy-intro"><div class="editor-layout"><div class="editor-nav" data-editor-group="privacy-intro"><button class="editor-btn active" data-target="privacy-intro-guide">Uitleg</button><button class="editor-btn" data-target="privacy-intro-main">Hoofdtekst</button><button class="editor-btn" data-target="privacy-intro-left">Linker blok</button><button class="editor-btn" data-target="privacy-intro-middle">Midden blok</button><button class="editor-btn" data-target="privacy-intro-right">Rechter blok</button></div><div><section class="editor-panel active" id="privacy-intro-guide"><div class="editor-card"><h3>Intro</h3><div class="explain-box"><p class="muted">Gebruik deze sectie voor de kop van de privacybeleidspagina en de drie eerste informatieve blokken daaronder.</p></div></div></section><section class="editor-panel" id="privacy-intro-main"><div class="editor-card"><h3>Hoofdtekst</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Privacybeleid"></div><div class="compact-field"><label>Tekst</label><textarea>Op deze pagina leggen we uit hoe OefenHub met gegevens omgaat, welke informatie zichtbaar is voor welke gebruikers en hoe toegang wordt begrensd door rol en relatie.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 05-04-2026 10:03</strong><p>Introductietekst privacybeleid verduidelijkt.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-intro-left"><div class="editor-card"><h3>Linker blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Alleen relevante toegang"></div><div class="compact-field"><label>Tekst</label><textarea>Niet iedere gebruiker ziet dezelfde informatie. OefenHub is ingericht zodat leerlingen, docenten, ouders/verzorgers en beheerders alleen de onderdelen te zien krijgen die passen bij hun rol.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 02-04-2026 13:08</strong><p>Formulering rondom relevante toegang aangescherpt.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-intro-middle"><div class="editor-card"><h3>Midden blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Relatie bepaalt inzage"></div><div class="compact-field"><label>Tekst</label><textarea>Inzage in leerlinginformatie is niet alleen rolgebonden, maar ook relatiegebonden. Een docent of ouder/verzorger ziet informatie alleen wanneer daar een geldige koppeling voor bestaat.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 03-04-2026 12:20</strong><p>Relatieafhankelijkheid toegevoegd aan middenblok.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-intro-right"><div class="editor-card"><h3>Rechter blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Duidelijke herleidbaarheid"></div><div class="compact-field"><label>Tekst</label><textarea>Voor onderdelen die beheerd of aangepast kunnen worden, kan historie worden vastgelegd zodat wijzigingen en verantwoordelijken later beter te herleiden zijn.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 01-04-2026 16:49</strong><p>Historietekst duidelijker gemaakt.</p></div></div></div></div></div></section></div></div></section><section class="content-subpanel" id="privacy-second"><div class="editor-layout"><div class="editor-nav" data-editor-group="privacy-second"><button class="editor-btn active" data-target="privacy-second-guide">Uitleg</button><button class="editor-btn" data-target="privacy-second-left">Linker blok</button><button class="editor-btn" data-target="privacy-second-middle">Midden blok</button><button class="editor-btn" data-target="privacy-second-summary">Samenvatting</button><button class="editor-btn" data-target="privacy-second-warning">Waarschuwing</button></div><div><section class="editor-panel active" id="privacy-second-guide"><div class="editor-card"><h3>Tweede rij</h3><div class="explain-box"><p class="muted">De tweede rij bevat twee brede tekstblokken en twee compactere samenvattingsblokken. De samenvatting gebruikt meerdere korte invoervelden om de korte regels uit de publieke pagina te beheren.</p></div></div></section><section class="editor-panel" id="privacy-second-left"><div class="editor-card"><h3>Linker blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Welke informatie wordt gebruikt"></div><div class="compact-field"><label>Tekst</label><textarea>OefenHub gebruikt gegevens zoals profielinformatie, rolinformatie, relatiekoppelingen, oefenconfiguraties, voortgang en resultaten voor zover dat nodig is om de omgeving te laten werken.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 04-04-2026 14:02</strong><p>Omschrijving van gebruikte informatie bijgewerkt.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-second-middle"><div class="editor-card"><h3>Midden blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Wie kan welke informatie zien"></div><div class="compact-field"><label>Tekst</label><textarea>Welke informatie zichtbaar is, hangt af van rol én relatie. Daardoor blijft de weergave beperkt tot wat nodig is voor gebruik, begeleiding of beheer.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 31-03-2026 11:17</strong><p>Tekst over zichtbaarheid compacter gemaakt.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-second-summary"><div class="editor-card"><h3>Samenvatting</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Privacy in het kort"></div><div class="summary-mini-grid"><div class="compact-field"><label>Regel 1</label><input type="text" value="Alleen relevante toegang"></div><div class="compact-field"><label>Regel 2</label><input type="text" value="Relatie bepaalt inzage"></div><div class="compact-field"><label>Regel 3</label><input type="text" value="Rolgerichte weergave"></div><div class="compact-field"><label>Regel 4</label><input type="text" value="Historie waar nodig"></div><div class="compact-field"><label>Regel 5</label><input type="text" value="Duidelijke verantwoordingslijn"></div><div class="compact-field"><label>Regel 6</label><input type="text" value="Transparante uitleg"></div><div class="compact-field"><label>Regel 7</label><input type="text" value="Beperkte toegang per direct"></div></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 05-04-2026 09:28</strong><p>Samenvattingsregels geactualiseerd.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-second-warning"><div class="editor-card"><h3>Waarschuwing</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Toegang vervalt direct"></div><div class="compact-field"><label>Tekst</label><textarea>Wanneer een docent-leerlingrelatie of ouder/voogd-leerlingrelatie wordt verbroken, vervalt de toegang van die docent, ouder of verzorger per direct.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 02-04-2026 17:04</strong><p>Waarschuwingstekst verduidelijkt.</p></div></div></div></div></div></section></div></div></section><section class="content-subpanel" id="privacy-third"><div class="editor-layout"><div class="editor-nav" data-editor-group="privacy-third"><button class="editor-btn active" data-target="privacy-third-guide">Uitleg</button><button class="editor-btn" data-target="privacy-third-main">Hoofdtekst</button><button class="editor-btn" data-target="privacy-third-left">Linker blok</button><button class="editor-btn" data-target="privacy-third-middle">Midden blok</button><button class="editor-btn" data-target="privacy-third-right">Rechter blok</button></div><div><section class="editor-panel active" id="privacy-third-guide"><div class="editor-card"><h3>Derde rij</h3><div class="explain-box"><p class="muted">Deze sectie beheert het brede blok over berichten, meldingen en historie en de drie compacte onderliggende tekstblokken.</p></div></div></section><section class="editor-panel" id="privacy-third-main"><div class="editor-card"><h3>Hoofdtekst</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Berichten, meldingen en historie"></div><div class="compact-field"><label>Tekst</label><textarea>OefenHub kan systeemberichten, privéberichten en meldingen gebruiken om gebruikers te informeren over relevante gebeurtenissen. Daarnaast kan historie worden vastgelegd om acties later beter te herleiden.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 03-04-2026 14:44</strong><p>Hoofdtekst derde rij bijgewerkt.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-third-left"><div class="editor-card"><h3>Linker blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Resultaten en voortgang"></div><div class="compact-field"><label>Tekst</label><textarea>Oefenresultaten en voortgang worden gebruikt om leerlingen, docenten en waar passend ouders/verzorgers inzicht te geven in het oefenproces.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 01-04-2026 10:31</strong><p>Bloktekst over resultaten aangepast.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-third-middle"><div class="editor-card"><h3>Midden blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Meldingen en tickets"></div><div class="compact-field"><label>Tekst</label><textarea>Wanneer een gebruiker een probleem meldt, wordt die informatie gebruikt voor opvolging door beheerders en om de status van een ticket te volgen.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 04-04-2026 08:56</strong><p>Tekst over tickets verduidelijkt.</p></div></div></div></div></div></section><section class="editor-panel" id="privacy-third-right"><div class="editor-card"><h3>Rechter blok</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Wijzigingsgeschiedenis"></div><div class="compact-field"><label>Tekst</label><textarea>Voor onderdelen die beheerd of aangepast kunnen worden, kan historie worden vastgelegd om aanpassingen en verantwoordelijken terug te zien.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 02-04-2026 09:41</strong><p>Historieblok vereenvoudigd.</p></div></div></div></div></div></section></div></div></section><section class="content-subpanel" id="privacy-ending"><div class="editor-card" style="min-height:560px"><h3>Afsluiter</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Vragen?"></div><div class="compact-field"><label>Tekst</label><textarea>Heb je vragen over privacy of over hoe OefenHub met gegevens omgaat? Neem dan contact op via de contactpagina. Daar vind je de juiste route om je vraag of verzoek in te dienen.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 05-04-2026 08:13</strong><p>Afsluitende contactverwijzing bijgewerkt.</p></div></div></div></div></section></section></div></section><section class="tab-panel" id="tab-contact"><div class="contact-editor-layout"><div class="editor-nav" data-editor-group="contact-main"><button class="editor-btn active" data-target="contact-guide">Uitleg</button><button class="editor-btn" data-target="contact-intro">Intro</button><button class="editor-btn" data-target="contact-right-general">Rechts algemeen</button><button class="editor-btn" data-target="contact-right-top">Rechts boven</button><button class="editor-btn" data-target="contact-right-middle">Rechts midden</button><button class="editor-btn" data-target="contact-right-bottom">Rechts onder</button></div><div><section class="editor-panel active" id="contact-guide"><div class="editor-card"><h3>Contact</h3><div class="explain-box"><p class="muted">Hier beheer je de zichtbare tekstblokken van de publieke pagina <strong>Contact</strong>. Gebruik de verticale tabs om de intro boven het formulier en de drie tekstblokken in de rechterkolom afzonderlijk aan te passen.</p><ul><li><strong>Intro</strong> beheert de titel en de introductietekst van de pagina.</li><li><strong>Rechts algemeen</strong> beheert het blok met de drie bullets.</li><li><strong>Rechts boven, midden en onder</strong> beheren de drie informatieve tekstblokken in de rechterkolom.</li></ul></div></div></section><section class="editor-panel" id="contact-intro"><div class="editor-card"><h3>Intro</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Neem contact met ons op"></div><div class="compact-field"><label>Tekst</label><textarea>Heb je een algemene vraag over OefenHub? Gebruik dan dit formulier om contact met ons op te nemen. We helpen je graag verder en proberen je vraag zo duidelijk mogelijk te beantwoorden.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 04-04-2026 15:12</strong><p>Introtekst contactformulier aangepast.</p></div></div></div></div></div></section><section class="editor-panel" id="contact-right-general"><div class="editor-card"><h3>Rechts algemeen</h3><div class="editor-form"><div class="summary-mini-grid"><div class="compact-field"><label>Bullet 1</label><input type="text" value="We reageren zo snel mogelijk."></div><div class="compact-field"><label>Bullet 2</label><input type="text" value="Gebruik dit formulier voor algemene vragen."></div><div class="compact-field"><label>Bullet 3</label><input type="text" value="Technische of inhoudelijke problemen meld je het best via Meld een probleem."></div></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 03-04-2026 10:34</strong><p>Bullet over meldfunctie verduidelijkt.</p></div></div></div></div></div></section><section class="editor-panel" id="contact-right-top"><div class="editor-card"><h3>Rechts boven</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Voor vragen en hulp"></div><div class="compact-field"><label>Tekst</label><textarea>Heb je een vraag over het gebruik van OefenHub of wil je ergens meer uitleg over? Dan kun je via deze pagina contact opnemen.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 01-04-2026 09:47</strong><p>Bloktekst voor vragen en hulp aangescherpt.</p></div></div></div></div></div></section><section class="editor-panel" id="contact-right-middle"><div class="editor-card"><h3>Rechts midden</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Meld een probleem"></div><div class="compact-field"><label>Tekst</label><textarea>Technische of inhoudelijke problemen meld je het best via de functie Meld een probleem zodra je bent ingelogd. Zo komt je melding direct op de juiste plek terecht.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Tom Verbeek — 04-04-2026 11:08</strong><p>Verwijzing naar Meld een probleem toegevoegd.</p></div></div></div></div></div></section><section class="editor-panel" id="contact-right-bottom"><div class="editor-card"><h3>Rechts onder</h3><div class="editor-form"><div class="compact-field"><label>Titel</label><input type="text" value="Reactie"></div><div class="compact-field"><label>Tekst</label><textarea>We gebruiken je e-mailadres om op je bericht te reageren. Afhankelijk van het onderwerp kan het zijn dat je bericht wordt doorgezet naar de juiste persoon of afdeling.</textarea></div><div class="inline-save"><button class="btn btn-primary">Opslaan</button></div><div class="editor-history"><h4>Geschiedenis</h4><div class="history-scroll"><div class="history-item"><strong>Noor de Vries — 05-04-2026 12:01</strong><p>Tekst over reactie en doorzetten aangescherpt.</p></div></div></div></div></div></section></div></div></section>
</section>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-col"><h4>OefenHub</h4><p>Beheeromgeving voor inhoud, instellingen en ondersteuning van alle rolgebonden oefenpagina’s.</p></div>
<div class="footer-col"><h4>Handige links</h4><div class="footer-links"><a href="#">Site instellingen</a><a href="#">Accounts</a><a href="#">Meldingen</a></div></div>
<div class="footer-col"><h4>Snel naar</h4><div class="footer-links"><a href="#">Frontpage</a><a href="#">Popupbeheer</a><a href="#">Systeemberichten</a></div></div>
</div>
<div class="footer-bottom">© 2026 OefenHub</div>
</footer>
<script>
  document.querySelectorAll('.top-tabs .tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.top-tabs .tab-btn').forEach(b => b.classList.remove('active'));
      document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
      btn.classList.add('active');
      document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
    });
  });

  document.querySelectorAll('.content-subtabs').forEach(group => {
    group.querySelectorAll('.content-subtab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const tab = btn.dataset.contentTab;
        group.querySelectorAll('.content-subtab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('#tab-' + tab + ' .content-subpanel').forEach(p => p.classList.remove('active'));
        btn.classList.add('active');
        document.getElementById(tab + '-' + btn.dataset.subtab).classList.add('active');
      });
    });
  });
  document.querySelectorAll('.editor-nav').forEach(nav => {
    nav.querySelectorAll('.editor-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const layout = nav.closest('.editor-layout, .contact-editor-layout');
        const panelHost = nav.nextElementSibling || layout;
        nav.querySelectorAll('.editor-btn').forEach(b => b.classList.remove('active'));
        panelHost.querySelectorAll('.editor-panel').forEach(p => p.classList.remove('active'));
        btn.classList.add('active');
        const panel = panelHost.querySelector('#' + btn.dataset.target);
        if(panel) panel.classList.add('active');
      });
    });
  });
  document.querySelectorAll('.footer-subtabs .subtab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.footer-subtabs .subtab-btn').forEach(b => b.classList.remove('active'));
      document.querySelectorAll('.footer-subpanel').forEach(p => p.classList.remove('active'));
      btn.classList.add('active');
      document.getElementById('footer-' + btn.dataset.subtab).classList.add('active');
    });
  });
  document.querySelectorAll('.role-nav').forEach(nav => {
    const group = nav.dataset.roleGroup;
    nav.querySelectorAll('.role-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        nav.querySelectorAll('.role-btn').forEach(b => b.classList.remove('active'));
        nav.parentElement.querySelectorAll('.role-panel').forEach(p => { if (p.dataset.rolePanel.startsWith(group + '-')) p.classList.remove('active'); });
        btn.classList.add('active');
        nav.parentElement.querySelector('[data-role-panel="' + group + '-' + btn.dataset.role + '"]').classList.add('active');
      });
    });
  });
</script>
</body>
</html>