oefenhub_beheerder_03_accounts_V1_2.html
Korte beschrijving
Mockup van het accountbeheer voor beheerders binnen OefenHub. Deze pagina ondersteunt het bekijken en beheren van accounts, rollen en bijbehorende gebruikersinformatie binnen het platform.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/beheerder/oefenhub_beheerder_03_accounts_V1_2.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub - Accounts beheren</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; --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(1240px, 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:minmax(220px,1fr) auto minmax(160px,1fr); 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; }
.logo-fallback { font-weight:900;color:#0f4d91;font-size:28px;line-height:46px; }
.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:10px; white-space:nowrap; }
.pill { border:0; border-radius:12px; padding:10px 16px; color:#fff; font-size:13px; font-weight:900; box-shadow:var(--shadow-soft); line-height:1; cursor:pointer; }
.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;
}
.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; }
.dropdown-menu {
position:absolute; top:calc(100% + 8px); right:0; width:260px; background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.98));
border-radius:20px; box-shadow:0 12px 24px rgba(35,100,177,.16); border:1px solid rgba(170,204,238,.55); padding:10px 12px; z-index:40;
opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.profile-nav.open .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.menu-list { display:flex; flex-direction:column; gap:0; }
.menu-link {
display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px; padding:8px 11px; border-radius:13px; text-decoration:none; color:#18518f;
font-size:15px; font-weight:900; box-shadow:inset 0 -1px 0 rgba(17,79,149,.10);
}
.menu-link:last-child { box-shadow:none; }
.menu-link:hover { background:linear-gradient(180deg,#edf5ff,#dcecff); }
.menu-icon { width:23px; height:23px; border-radius:7px; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:900; background:linear-gradient(180deg,#49a4ff,#1f7fe2); }
.page-shell { padding:22px 0 30px; }
.breadcrumb { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; color:#34679f; font-size:13px; font-weight:800; }
.crumb-sep { opacity:.55; }
.intro-card, .search-card, .main-card, .manage-shell {
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border:1px solid rgba(170,204,238,.62); border-radius:26px; box-shadow:var(--shadow);
padding:18px;
}
.intro-card { margin-bottom:18px; padding:24px 26px; }
.intro-card h1 { margin:0 0 10px; font-size:24px; color:#0f4d91; }
.intro-card p { margin:0; max-width:860px; font-size:15px; line-height:1.6; color:#4d719c; }
.search-card { margin-bottom:18px; }
.search-grid { display:grid; grid-template-columns:1fr 220px 180px; gap:12px; align-items:end; }
.field { display:grid; gap:6px; }
.field label { font-size:13px; font-weight:900; color:#225790; }
.field input, .field select, .field textarea {
width:100%; border:1px solid rgba(17,79,149,.14); background:rgba(255,255,255,.98); border-radius:14px; padding:10px 12px; font:inherit; color:#134f92;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.field input[readonly] {
background:linear-gradient(180deg,#f0f5fb,#e3edf8);
color:#6b86aa;
border-color:rgba(17,79,149,.10);
cursor:not-allowed;
}
.field textarea { min-height:72px; resize:none; }
.main-grid { display:grid; grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr); gap:18px; align-items:start; }
.list-card, .details-card, .manage-card {
background:linear-gradient(180deg,#ffffff,#f4f9ff); border:1px solid rgba(170,204,238,.58); border-radius:24px; box-shadow:var(--shadow-soft); padding:18px;
}
.list-card, .details-card { min-height:560px; }
.list-card h2, .details-card h2, .manage-card h2 { margin:0 0 14px; font-size:18px; }
.account-list { height:470px; overflow:auto; padding-right:6px; }
.account-item {
border-radius:18px; border:1px solid rgba(17,79,149,.10); background:linear-gradient(180deg,#fff,#f6fbff); box-shadow:var(--shadow-soft);
padding:14px 14px 12px; margin-top:12px; cursor:pointer;
}
.account-item:first-child { margin-top:0; }
.account-item.active { border-color:#2f88ea; background:linear-gradient(180deg,#ffffff,#eef6ff); outline:2px solid rgba(47,136,234,.18); }
.account-item h4 { margin:0 0 6px; font-size:16px; color:#0f4d91; }
.account-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:#6b86aa; font-weight:800; }
.tag { display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:900; }
.tag.green { background:#e3f7ea; color:#23804a; }
.tag.yellow { background:#fff0d8; color:#c27209; }
.detail-readonly { display:grid; gap:12px; }
.readonly-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ro { border:1px solid rgba(17,79,149,.12); border-radius:16px; background:rgba(255,255,255,.76); padding:12px 14px; }
.ro strong { display:block; font-size:13px; color:#225790; margin-bottom:4px; }
.ro span { font-size:14px; color:#134f92; }
.action-center { display:flex; justify-content:center; margin:8px 0 10px; }
.btn { border:0; border-radius:15px; min-height:44px; padding:0 20px; 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.warn { background:linear-gradient(180deg,#ffb558,#f97e18); color:#fff; }
.btn.danger { background:linear-gradient(180deg,#ef6b6b,#cf3e3e); color:#fff; }
.btn.muted { background:linear-gradient(180deg,#eef6ff,#dcecff); color:#0d5db8; }
.history-scroll { height:210px; overflow:auto; display:grid; gap:10px; padding-right:6px; }
.history-item {
border-radius:16px; border:1px solid rgba(17,79,149,.08); background:linear-gradient(180deg,#ffffff,#f5f9ff); padding:12px 13px; box-shadow:var(--shadow-soft);
}
.history-item strong { display:block; margin-bottom:6px; font-size:14px; color:#0f4d91; }
.history-item p { margin:0 0 6px; font-size:13px; line-height:1.5; color:#5f7ea5; }
.who { font-size:12px; font-weight:800; color:#6b86aa; }
.manage-shell { display:none; min-height:620px; }
.manage-shell.active { display:block; }
.manage-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.top-tabs { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin:0; }
.tab-btn {
border:1px solid rgba(140,197,242,1); border-bottom:0; border-radius:18px 18px 0 0; background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96));
color:#235b99; font-weight:900; font-size:13px; padding:0 20px; min-height:25px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 -3px 12px rgba(35,100,177,.05);
}
.tab-btn.active { background:linear-gradient(180deg,#4ea5ff,#1f79dc); color:#fff; border-color:#2f88ea; }
.tab-panel {
display:none; background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96)); border:1px solid rgb(140 197 242);
border-radius:0 22px 22px 22px; padding:18px; box-shadow:var(--shadow-soft); min-height:560px;
}
.tab-panel.active { display:block; }
.manage-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start; }
.subgrid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.inline-actions { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:10px; }
.roles-list, .relations-list { display:grid; gap:10px; }
.line-item {
border-radius:16px; border:1px solid rgba(17,79,149,.08); background:linear-gradient(180deg,#fff,#f6fbff); padding:12px 14px;
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
}
.line-item strong { display:block; margin-bottom:3px; font-size:14px; color:#0f4d91; }
.line-item span { font-size:13px; color:#6483a8; }
.mini-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mini-btn {
border:0; border-radius:999px; padding:8px 12px; font:inherit; font-size:12px; font-weight:900; cursor:pointer;
box-shadow:var(--shadow-soft); background:linear-gradient(180deg,#eef6ff,#dcecff); color:#0d5db8;
}
.mini-actions select {
border:1px solid rgba(17,79,149,.14); background:#fff; border-radius:999px; padding:8px 12px; color:#134f92; font:inherit; font-size:12px; font-weight:800;
box-shadow:var(--shadow-soft);
}
.site-footer {
margin-top:24px; 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(1240px, 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-bottom { width:min(1240px, 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:1080px) {
.main-grid, .manage-layout { grid-template-columns:1fr; }
.search-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
.header-row { grid-template-columns:1fr; gap:14px; }
.nav-pills { overflow-x:auto; justify-content:flex-start; padding-bottom:2px; width:100%; }
.header-actions { justify-content:flex-start; }
.readonly-grid, .subgrid-2, .footer-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" id="profileNav">
<button aria-expanded="false" aria-label="Profiel" class="profile-chip" id="profileBtn" type="button"><span class="avatar">N</span></button>
<div class="dropdown-menu" id="profileMenu">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon">👤</span><span>Profiel</span></a>
<a class="menu-link" href="#"><span class="menu-icon">⚙️</span><span>Instellingen</span></a>
<a class="menu-link" href="#"><span class="menu-icon">↩</span><span>Uitloggen</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="page-shell">
<div class="wrap">
<div class="breadcrumb"><span>Home</span><span class="crumb-sep">›</span><span>Accounts</span></div>
<section class="intro-card">
<h1>Accounts beheren</h1>
<p>Bekijk accounts, open basisgegevens en ga waar nodig door naar gericht beheer voor rollen, relaties en volledige geschiedenis. Het overzicht blijft bewust leesbaar; diepere acties open je pas vanuit één geselecteerd account.</p>
</section>
<section class="search-card" id="overviewSearch">
<div class="search-grid">
<div class="field"><label>Zoeken</label><input type="text" value="Noor" placeholder="Zoek op naam of e-mailadres"></div>
<div class="field"><label>Status</label><select><option>Alle statussen</option><option>Actief</option><option>Geblokkeerd</option></select></div>
<div class="field"><label>Sortering</label><select><option>Naam (A-Z)</option><option>Laatste login</option></select></div>
</div>
</section>
<section class="main-card" id="overviewMain">
<div class="main-grid">
<section class="list-card">
<h2>Gebruikersoverzicht</h2>
<div class="account-list">
<article class="account-item active">
<h4>Noor van Dijk</h4>
<div class="account-meta"><span class="tag green">Actief</span><span>Docent</span><span>Beheerder</span><span>Laatste login: vandaag</span></div>
</article>
<article class="account-item">
<h4>Eva Jansen</h4>
<div class="account-meta"><span class="tag green">Actief</span><span>Docent</span><span>Laatste login: gisteren</span></div>
</article>
<article class="account-item">
<h4>Milan de Vries</h4>
<div class="account-meta"><span class="tag yellow">Geblokkeerd</span><span>Leerling</span><span>Laatste login: 8 dagen geleden</span></div>
</article>
</div>
</section>
<section class="details-card">
<h2>Accountdetails</h2>
<div class="detail-readonly">
<div class="readonly-grid">
<div class="ro"><strong>Naam</strong><span>Noor van Dijk</span></div>
<div class="ro"><strong>E-mailadres</strong><span>noor@example.nl</span></div>
<div class="ro"><strong>Status</strong><span>Actief</span></div>
<div class="ro"><strong>Aanmaakdatum</strong><span>15 jan 2025</span></div>
<div class="ro"><strong>Laatste login</strong><span>Vandaag · 08:41</span></div>
<div class="ro"><strong>Aantal docenten</strong><span>0</span></div>
<div class="ro"><strong>Aantal ouders/voogden</strong><span>0</span></div>
</div>
<div class="action-center">
<button class="btn primary" id="openManageBtn" type="button">Open beheer</button>
</div>
<div>
<h3 style="margin:0 0 10px;font-size:16px;color:#125397;">Recente wijzigingen (laatste 60 dagen)</h3>
<div class="history-scroll">
<div class="history-item"><strong>24 mrt 2026 · 10:14</strong><p>Rol Beheerder toegevoegd aan account.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>21 mrt 2026 · 15:09</strong><p>E-mailadres gewijzigd van noor.vd@example.nl naar noor@example.nl.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>02 mrt 2026 · 09:32</strong><p>Laatste profielcorrectie door beheer uitgevoerd.</p><div class="who">Uitgevoerd door Eva Jansen</div></div>
</div>
</div>
</div>
</section>
</div>
</section>
<section class="manage-shell" id="manageShell">
<div class="manage-header">
<h2 style="margin:0;font-size:20px;color:#0f4d91;">Accountbeheer · Noor van Dijk</h2>
<button class="btn danger" id="closeManageBtn" type="button">Terug naar overzicht</button>
</div>
<div class="top-tabs">
<button class="tab-btn active" data-tab="intro">Intro / uitleg</button>
<button class="tab-btn" data-tab="basis">Basis gegevens</button>
<button class="tab-btn" data-tab="rollen">Rollen</button>
<button class="tab-btn" data-tab="relaties">Relatiebeheer</button>
<button class="tab-btn" data-tab="geschiedenis">Geschiedenis</button>
</div>
<section class="tab-panel active" id="tab-intro">
<div class="manage-layout">
<section class="manage-card">
<h2>Wat kun je hier doen?</h2>
<div class="history-item"><strong>Basis gegevens</strong><p>Wijzig naam en e-mailadres en pas de accountstatus aan door het account te activeren of te blokkeren.</p></div>
<div class="history-item"><strong>Rollen</strong><p>Bekijk alle huidige rollen, voeg rollen toe of verwijder rollen waar dat toegestaan is.</p></div>
<div class="history-item"><strong>Relatiebeheer</strong><p>Bekijk alle actieve relaties, pas ze aan of verbreek ze. Nieuwe relaties voeg je hier bewust niet toe.</p></div>
<div class="history-item"><strong>Geschiedenis</strong><p>Bekijk alle bekende accountgeschiedenis zonder tijdsbeperking, inclusief rol- en relatieacties.</p></div>
</section>
<aside class="manage-card">
<h2>Account in context</h2>
<div class="history-scroll" style="height:320px;">
<div class="history-item"><strong>Huidige status</strong><p>Actief account met docent- en beheerderrol.</p></div>
<div class="history-item"><strong>Laatste login</strong><p>Vandaag om 08:41.</p></div>
<div class="history-item"><strong>Relaties</strong><p>Geen leerling- of ouder/voogdrelaties gekoppeld.</p></div>
</div>
</aside>
</div>
</section>
<section class="tab-panel" id="tab-basis">
<div class="manage-layout">
<section class="manage-card">
<h2>Bewerk basisgegevens</h2>
<div class="subgrid-2">
<div class="field"><label>Naam</label><input type="text" value="Noor van Dijk"></div>
<div class="field"><label>E-mailadres</label><input type="email" value="noor@example.nl"></div>
</div>
<div class="subgrid-2" style="margin-top:12px;">
<div class="field"><label>Status</label><select><option>Actief</option><option>Geblokkeerd</option></select></div>
<div class="field"><label>Laatste login</label><input readonly type="text" value="Vandaag · 08:41"></div>
</div>
<div class="inline-actions">
<button class="btn primary" type="button">Wijzigingen opslaan</button>
<button class="btn warn" type="button">Blokkeren / activeren</button>
</div>
</section>
<aside class="manage-card">
<h2>Geschiedenis</h2>
<div class="history-scroll" style="height:360px;">
<div class="history-item"><strong>21 mrt 2026 · 15:09</strong><p>E-mailadres gewijzigd van noor.vd@example.nl naar noor@example.nl.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>13 feb 2026 · 11:20</strong><p>Naam aangepast naar huidige schrijfwijze.</p><div class="who">Uitgevoerd door Eva Jansen</div></div>
<div class="history-item"><strong>15 jan 2025 · 09:05</strong><p>Account aangemaakt.</p><div class="who">Systeemactie</div></div>
</div>
</aside>
</div>
</section>
<section class="tab-panel" id="tab-rollen">
<div class="manage-layout">
<section class="manage-card">
<h2>Rollen</h2>
<div class="roles-list">
<div class="line-item"><div><strong>Beheerder</strong><span>Actief sinds 24 mrt 2026</span></div><div class="mini-actions"><button class="mini-btn">Verwijderen</button></div></div>
<div class="line-item"><div><strong>Docent</strong><span>Actief sinds 15 jan 2025</span></div><div class="mini-actions"><button class="mini-btn">Verwijderen</button></div></div>
<div class="line-item"><div><strong>Nieuwe rol toevoegen</strong><span>Kies een beschikbare rol en voeg die daarna toe aan dit account.</span></div><div class="mini-actions"><select><option>Leerling</option><option>Ouder/voogd</option><option>Beheerder</option></select><button class="mini-btn">Toevoegen</button></div></div>
</div>
</section>
<aside class="manage-card">
<h2>Geschiedenis</h2>
<div class="history-scroll" style="height:360px;">
<div class="history-item"><strong>24 mrt 2026 · 10:14</strong><p>Rol Beheerder toegevoegd.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>15 jan 2025 · 09:05</strong><p>Rol Docent toegekend bij accountaanmaak.</p><div class="who">Systeemactie</div></div>
</div>
</aside>
</div>
</section>
<section class="tab-panel" id="tab-relaties">
<div class="manage-layout">
<section class="manage-card">
<h2>Relatiebeheer</h2>
<div class="relations-list">
<div class="line-item"><div><strong>AdminAdmin · Eva Jansen</strong><span>Automatisch actief zolang beide beheerder zijn.</span></div><div class="mini-actions"><button class="mini-btn">Ontkoppel</button></div></div>
<div class="line-item"><div><strong>Docent-Docent · Mark Peters</strong><span>Actieve docentrelatie.</span></div><div class="mini-actions"><button class="mini-btn">Verwijder</button></div></div>
</div>
</section>
<aside class="manage-card">
<h2>Geschiedenis</h2>
<div class="history-scroll" style="height:360px;">
<div class="history-item"><strong>24 mrt 2026 · 10:14</strong><p>AdminAdmin-relatie aangemaakt na toekenning beheerderrol.</p><div class="who">Systeemactie</div></div>
<div class="history-item"><strong>03 feb 2026 · 14:22</strong><p>Docent-Docent relatie met Mark Peters bevestigd.</p><div class="who">Uitgevoerd door Eva Jansen</div></div>
<div class="history-item"><strong>11 jan 2026 · 09:41</strong><p>Oude relatie met leerling verbroken.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
</div>
</aside>
</div>
</section>
<section class="tab-panel" id="tab-geschiedenis">
<div class="manage-layout">
<section class="manage-card">
<h2>Volledige accountgeschiedenis</h2>
<div class="history-scroll" style="height:430px;">
<div class="history-item"><strong>24 mrt 2026 · 10:14</strong><p>Rol Beheerder toegevoegd.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>24 mrt 2026 · 10:14</strong><p>AdminAdmin-relatie met Eva Jansen aangemaakt.</p><div class="who">Systeemactie</div></div>
<div class="history-item"><strong>21 mrt 2026 · 15:09</strong><p>E-mailadres gewijzigd van noor.vd@example.nl naar noor@example.nl.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>13 feb 2026 · 11:20</strong><p>Naam aangepast naar huidige schrijfwijze.</p><div class="who">Uitgevoerd door Eva Jansen</div></div>
<div class="history-item"><strong>03 feb 2026 · 14:22</strong><p>Docent-Docent relatie met Mark Peters bevestigd.</p><div class="who">Uitgevoerd door Eva Jansen</div></div>
<div class="history-item"><strong>15 jan 2025 · 09:05</strong><p>Account aangemaakt met rol Docent.</p><div class="who">Systeemactie</div></div>
</div>
</section>
<aside class="manage-card">
<h2>Samenvatting</h2>
<div class="history-item"><strong>Totaal wijzigingen</strong><p>46 bekende wijzigingen op dit account, rollen en relaties samen.</p></div>
<div class="history-item"><strong>Eerste registratie</strong><p>15 jan 2025</p></div>
<div class="history-item"><strong>Laatste wijziging</strong><p>24 mrt 2026 · 10:14</p></div>
</aside>
</div>
</section>
</section>
</div>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-col"><h4>OefenHub Beheer</h4><p>Beheer accounts, rollen en relaties vanuit één overzichtelijke omgeving.</p></div>
<div class="footer-col"><h4>Snelle toegang</h4><div class="footer-links"><a href="#">Frontpage</a><a href="#">Site instellingen</a><a href="#">Meldingen</a></div></div>
<div class="footer-col"><h4>Ondersteuning</h4><div class="footer-links"><a href="#">Privacybeleid</a><a href="#">Contact</a><a href="#">Uitloggen</a></div></div>
</div>
<div class="footer-bottom">© 2026 OefenHub</div>
</footer>
<script>
const profileNav = document.getElementById('profileNav');
const profileBtn = document.getElementById('profileBtn');
profileBtn.addEventListener('click', () => {
const open = profileNav.classList.toggle('open');
profileBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
document.addEventListener('click', (e) => {
if (!profileNav.contains(e.target)) {
profileNav.classList.remove('open');
profileBtn.setAttribute('aria-expanded','false');
}
});
const openManageBtn = document.getElementById('openManageBtn');
const closeManageBtn = document.getElementById('closeManageBtn');
const overviewMain = document.getElementById('overviewMain');
const overviewSearch = document.getElementById('overviewSearch');
const manageShell = document.getElementById('manageShell');
openManageBtn.addEventListener('click', () => {
overviewMain.style.display = 'none';
overviewSearch.style.display = 'none';
manageShell.classList.add('active');
});
closeManageBtn.addEventListener('click', () => {
manageShell.classList.remove('active');
overviewMain.style.display = '';
overviewSearch.style.display = '';
});
const tabBtns = document.querySelectorAll('.tab-btn');
const tabPanels = {
intro: document.getElementById('tab-intro'),
basis: document.getElementById('tab-basis'),
rollen: document.getElementById('tab-rollen'),
relaties: document.getElementById('tab-relaties'),
geschiedenis: document.getElementById('tab-geschiedenis')
};
tabBtns.forEach(btn => btn.addEventListener('click', () => {
tabBtns.forEach(b => b.classList.remove('active'));
Object.values(tabPanels).forEach(p => p.classList.remove('active'));
btn.classList.add('active');
tabPanels[btn.dataset.tab].classList.add('active');
}));
</script>
</body>
</html>