oefenhub_beheerder_09_sys_05_features_V1_3.html
Korte beschrijving
Mockup van het featurebeheer binnen het systeemgedeelte van OefenHub. Deze pagina biedt inzicht in configureerbare functionaliteiten en ondersteunt het in- of uitschakelen en beheren van features.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/beheerder/oefenhub_beheerder_09_sys_05_features_V1_3.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub Beheerder - Features</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);
--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; }
.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-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; }
.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 {
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:24px 26px; margin-bottom:18px;
}
.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; }
.top-tabs, .notif-subtabs { 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;
}
.notif-subtab-btn {
border:1px solid rgba(140,197,242,1); border-bottom:0; border-radius:16px 16px 0 0;
background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(231,242,255,.92));
color:#235b99; font-weight:900; font-size:13px; padding:0 18px; min-height:25px;
display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
box-shadow:0 -3px 12px rgba(35,100,177,.05);
}
.notif-subtab-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:620px;
}
.notif-subpanel {
display: none;
background: rgb(183 222 253);
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; }
.notif-subpanel.active { display:block; }
.split-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.85fr); gap:18px; align-items:start; }
.card, .panel-col {
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
border:1px solid rgba(170,204,238,.58); border-radius:24px; box-shadow:var(--shadow); padding:18px;
}
.panel-col { min-height:520px; }
.card h2, .panel-col h2 { margin:0 0 14px; font-size:18px; }
.card h3 { margin:0 0 10px; font-size:16px; color:#125397; }
.feature-groups { display:grid; gap:14px; }
.feature-group {
border-radius:20px; background:linear-gradient(180deg,#ffffff,#f4f9ff);
border:1px solid rgba(17,79,149,.10); padding:16px; box-shadow:var(--shadow-soft);
}
.feature-list { display:grid; gap:10px; }
.feature-row {
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center;
padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.72);
border:1px solid rgba(17,79,149,.08);
}
.feature-row strong { display:block; margin-bottom:3px; font-size:15px; }
.feature-row p, .helper-p { margin:0; font-size:13px; line-height:1.45; color:#6483a8; }
.switch { position:relative; width:66px; height:36px; display:inline-block; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch .slider {
position:absolute; inset:0; border-radius:999px; background:linear-gradient(180deg,#dfeaf7,#c9dbf0);
border:1px solid rgba(117,158,201,.45); box-shadow:inset 0 2px 5px rgba(255,255,255,.65); cursor:pointer;
}
.switch .slider::before {
content:""; position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:999px;
background:#fff; box-shadow:0 4px 10px rgba(18,63,112,.18); transition:.18s ease;
}
.switch input:checked + .slider { background:linear-gradient(180deg,#4ea5ff,#1f79dc); border-color:#2f88ea; }
.switch input:checked + .slider::before { transform:translateX(30px); }
.notif-layout { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1fr); gap:18px; align-items:start; }
.notif-list, .archive-list { height:420px; overflow:auto; gap:10px; padding-right:6px; }
.notif-item {
height:90px; margin-top:12px;
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; cursor:pointer;
display:flex; flex-direction:column; justify-content:space-between;
}
.notif-item:first-child { margin-top:0; }
.notif-item.active {
border-color:#2f88ea;
background:linear-gradient(180deg, #ffffff, #eef6ff);
outline:2px solid rgba(47,136,234,.18);
outline-offset:0;
}
.notif-item h4 { margin:0 0 8px; font-size:16px; color:#0f4d91; }
.meta { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:12px; color:#6281a6; font-weight:700; flex-wrap:wrap; }
.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.info { background:#dceeff; color:#216ab9; }
.tag.warning { background:#fff0d8; color:#c27209; }
.tag.active { background:#e3f7ea; color:#23804a; }
.tag.soon { background:#fff3d5; color:#a87607; }
.tag.readonly { background:#ebeff7; color:#617596; }
.form-grid { display:grid; gap:12px; }
.compact-field { display:grid; gap:6px; }
.compact-field label { font-size:13px; font-weight:900; color:#225790; }
.compact-field input, .compact-field textarea, .compact-field select {
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);
}
.compact-field textarea { min-height:96px; resize:none; }
.inline-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.radio-wrap { display:flex; flex-wrap:wrap; gap:18px; padding-top:2px; align-items:center; }
.radio-option {
display:inline-flex; gap:8px; align-items:center;
font-size:13px; font-weight:800; color:#20538d;
padding:0; border:0; background:transparent; box-shadow:none;
white-space:nowrap;
}
.status-row { display:flex; justify-content:flex-start; gap:8px; flex-wrap:wrap; }
.action-row { display:flex; justify-content:center; gap:150px; margin-top:8px; }
.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; }
.history-box { margin-top:14px; border-top:1px solid rgba(17,79,149,.10); padding-top:14px; }
.history-scroll { height:180px; 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; }
.readonly-board { min-height:520px; display:grid; grid-template-rows:auto 1fr; gap:16px; }
.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) {
.split-grid, .notif-layout { grid-template-columns:1fr; }
.action-row { gap:24px; }
}
@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; }
.footer-grid, .inline-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
.wrap { width:min(100%, calc(100% - 18px)); }
.intro-card, .card, .panel-col, .feature-group { padding:16px; border-radius:20px; }
.tab-panel, .notif-subpanel { padding:14px; }
.action-row { flex-direction:column; gap:10px; }
.btn { width:100%; }
}
</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>
<button class="profile-chip" type="button"><span class="avatar">N</span></button>
</div>
</div>
</div>
</header>
<main class="page-shell">
<div class="wrap">
<div class="breadcrumb"><span>Home</span><span class="crumb-sep">›</span><span>Site instellingen</span><span class="crumb-sep">›</span><span>Features</span></div>
<section class="intro-card">
<h1>Features</h1>
<p>Beheer hier de echte aan/uit-functies van OefenHub. Houd deze pagina beperkt tot functies die op site- of productniveau in- of uitgeschakeld kunnen worden. Tijdelijke sitebrede meldingen beheer je apart onder Systeemnotificaties.</p>
</section>
<div class="top-tabs">
<button class="tab-btn active" data-tab="features">Features</button>
<button class="tab-btn" data-tab="notifications">Systeemnotificaties</button>
</div>
<div class="tab-shell">
<section class="tab-panel active" id="tab-features">
<div class="split-grid">
<section class="card">
<h2>Beschikbare features</h2>
<div class="feature-groups">
<section class="feature-group">
<h3>Account & toegang</h3>
<div class="feature-list">
<div class="feature-row"><div><strong>Registratie toegestaan</strong><p>Nieuwe gebruikers kunnen een account registreren via de publieke pagina.</p></div><label class="switch"><input checked type="checkbox"><span class="slider"></span></label></div>
<div class="feature-row"><div><strong>Inloggen toegestaan</strong><p>Gebruikers kunnen inloggen op bestaande accounts.</p></div><label class="switch"><input checked type="checkbox"><span class="slider"></span></label></div>
</div>
</section>
<section class="feature-group">
<h3>Samenwerking</h3>
<div class="feature-list">
<div class="feature-row"><div><strong>Vriendschappen toegestaan</strong><p>Leerlingen kunnen vriendschappen gebruiken waar dit functioneel is toegestaan.</p></div><label class="switch"><input checked type="checkbox"><span class="slider"></span></label></div>
<div class="feature-row"><div><strong>Privéberichten toegestaan</strong><p>Privéberichten tussen gekoppelde of bevriende gebruikers blijven beschikbaar.</p></div><label class="switch"><input checked type="checkbox"><span class="slider"></span></label></div>
<div class="feature-row"><div><strong>Live meekijken toegestaan</strong><p>Docenten en ouders/verzorgers kunnen live meekijken waar hun relatiecontext dit toestaat.</p></div><label class="switch"><input checked type="checkbox"><span class="slider"></span></label></div>
</div>
</section>
<section class="feature-group">
<h3>Oefenen</h3>
<div class="feature-list">
<div class="feature-row"><div><strong>Oefeningen delen toegestaan</strong><p>Oefeningen kunnen gedeeld worden waar de productlogica dit ondersteunt.</p></div><label class="switch"><input checked type="checkbox"><span class="slider"></span></label></div>
<div class="feature-row"><div><strong>Testoefeningen beschikbaar</strong><p>Docenten kunnen testoefeningen starten waar de interface dit ondersteunt.</p></div><label class="switch"><input type="checkbox"><span class="slider"></span></label></div>
</div>
</section>
<section class="feature-group">
<h3>Support</h3>
<div class="feature-list">
<div class="feature-row"><div><strong>Meld een probleem beschikbaar</strong><p>Gebruikers kunnen technische of inhoudelijke problemen melden via de meldroute.</p></div><label class="switch"><input checked type="checkbox"><span class="slider"></span></label></div>
</div>
</section>
</div>
</section>
<aside class="card">
<h2>Toelichting</h2>
<div class="feature-groups">
<section class="feature-group"><h3>Wat hoort wel op deze pagina?</h3><p class="helper-p">Alleen functies die echt aan of uit kunnen op site- of productniveau. Inhoud, teksten, links, popups en systeemberichten beheer je op hun eigen pagina.</p></section>
<section class="feature-group"><h3>Waar let je op?</h3><p class="helper-p">Gebruik deze toggles spaarzaam. Alles wat als must-have onderdeel van de werking is vastgelegd, hoort hier bewust niet als feature-toggle terug te komen.</p></section>
<section class="feature-group">
<h3>Geschiedenis</h3>
<div class="history-scroll">
<div class="history-item"><strong>25 mrt 2026 · 09:14</strong><p>Testoefeningen beschikbaar uitgeschakeld voor producttest.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>24 mrt 2026 · 16:03</strong><p>Inloggen toegestaan opnieuw geactiveerd na onderhoudsvenster.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>22 mrt 2026 · 11:31</strong><p>Meld een probleem beschikbaar ingeschakeld.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
</div>
</section>
</div>
</aside>
</div>
</section>
<section class="tab-panel" id="tab-notifications">
<div class="notif-subtabs">
<button class="notif-subtab-btn active" data-subtab="current">Actief & gepland</button>
<button class="notif-subtab-btn" data-subtab="recent">Afgelopen 31 dagen</button>
<button class="notif-subtab-btn" data-subtab="archive">Alle verlopen</button>
</div>
<section class="notif-subpanel active" id="sub-current">
<div class="notif-layout">
<section class="panel-col">
<h2>Notificaties</h2>
<div class="notif-list">
<article class="notif-item active"><h4>Gepland onderhoud op zondagavond</h4><div class="meta"><span class="tag warning">Waarschuwing</span><span>Geen einddatum</span></div></article>
<article class="notif-item"><h4>Nieuwe oefenmodule beschikbaar</h4><div class="meta"><span class="tag info">Info</span><span>26 mrt 2026 · 23:00</span></div></article>
</div>
</section>
<section class="panel-col">
<h2>Details</h2>
<div class="form-grid">
<div class="inline-grid">
<div class="compact-field"><label>Type</label><select><option>Waarschuwing</option><option>Info</option></select></div>
<div class="compact-field"><label>Status</label><div class="status-row"><span class="tag active">Actief</span><span class="tag soon">Bijna verlopen</span></div></div>
</div>
<div class="compact-field"><label>Titel</label><input type="text" value="Gepland onderhoud op zondagavond"></div>
<div class="compact-field"><label>Tekst</label><textarea>Op zondagavond voeren we onderhoud uit aan de leeromgeving. Tijdens dit onderhoud kunnen delen van OefenHub tijdelijk minder goed bereikbaar zijn.</textarea></div>
<div class="inline-grid">
<div class="compact-field"><label>Start datum/tijd</label><input type="text" value="30 mrt 2026 · 21:00"></div>
<div class="compact-field"><label>Eind datum/tijd</label><input type="text" value="30 mrt 2026 · 23:30"></div>
</div>
<div class="compact-field"><label>Weergaveregel</label><div class="radio-wrap"><label class="radio-option"><input checked name="showrule" type="radio"> Bij elk bezoek tonen</label><label class="radio-option"><input name="showrule" type="radio"> Eenmalig tonen per browser</label></div></div>
<div class="action-row"><button class="btn primary" type="button">Opslaan</button><button class="btn warn" type="button">Uitschakelen</button></div>
</div>
<div class="history-box">
<h3>Geschiedenis</h3>
<div class="history-scroll">
<div class="history-item"><strong>25 mrt 2026 · 10:12</strong><p>Einddatum aangepast naar 23:30 zodat de melding korter zichtbaar blijft.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>24 mrt 2026 · 14:56</strong><p>Waarschuwingstekst verduidelijkt voor bezoekers en ingelogde gebruikers.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>24 mrt 2026 · 14:21</strong><p>Nieuwe notificatie aangemaakt en gepland.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
</div>
</div>
</section>
</div>
</section>
<section class="notif-subpanel" id="sub-recent">
<div class="notif-layout">
<section class="panel-col">
<h2>Afgelopen 31 dagen</h2>
<div class="notif-list">
<article class="notif-item active"><h4>Storingsmelding op resultaatscherm</h4><div class="meta"><span class="tag warning">Waarschuwing</span><span>14 mrt 2026 · 17:00</span></div></article>
<article class="notif-item"><h4>Nieuwe frontpage beschikbaar</h4><div class="meta"><span class="tag info">Info</span><span>03 mrt 2026 · 11:15</span></div></article>
</div>
</section>
<section class="panel-col">
<h2>Details</h2>
<div class="form-grid">
<div class="inline-grid">
<div class="compact-field"><label>Type</label><select><option>Waarschuwing</option><option>Info</option></select></div>
<div class="compact-field"><label>Status</label><div class="status-row"><span class="tag readonly">Verlopen</span></div></div>
</div>
<div class="compact-field"><label>Titel</label><input type="text" value="Storingsmelding op resultaatscherm"></div>
<div class="compact-field"><label>Tekst</label><textarea>Op het resultaatscherm trad tijdelijk een fout op. Deze melding werd getoond zolang het probleem in onderzoek was.</textarea></div>
<div class="inline-grid">
<div class="compact-field"><label>Start datum/tijd</label><input type="text" value="14 mrt 2026 · 09:00"></div>
<div class="compact-field"><label>Eind datum/tijd</label><input type="text" value="14 mrt 2026 · 17:00"></div>
</div>
<div class="compact-field"><label>Weergaveregel</label><div class="radio-wrap"><label class="radio-option"><input checked name="showrule2" type="radio"> Bij elk bezoek tonen</label><label class="radio-option"><input name="showrule2" type="radio"> Eenmalig tonen per browser</label></div></div>
<div class="action-row"><button class="btn primary" type="button">Opslaan</button><button class="btn warn" type="button">Uitschakelen</button></div>
</div>
<div class="history-box">
<h3>Geschiedenis</h3>
<div class="history-scroll">
<div class="history-item"><strong>14 mrt 2026 · 17:00</strong><p>Notificatie automatisch beëindigd op ingestelde eindtijd.</p><div class="who">Systeemactie</div></div>
<div class="history-item"><strong>14 mrt 2026 · 11:42</strong><p>Tekst aangepast met verduidelijking voor leerlingen en docenten.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
<div class="history-item"><strong>14 mrt 2026 · 09:00</strong><p>Notificatie gepubliceerd vanwege tijdelijke storing.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
</div>
</div>
</section>
</div>
</section>
<section class="notif-subpanel" id="sub-archive">
<div class="notif-layout">
<section class="panel-col">
<h2>Alle verlopen notificaties</h2>
<p class="helper-p" style="margin-bottom:14px;">In deze weergave zie je de complete verlopen historie. Deze lijst is alleen ter inzage en kan niet vanuit deze tab opnieuw geactiveerd of aangepast worden.</p>
<div class="archive-list">
<article class="notif-item active"><h4>Onderhoud afgerond</h4><div class="meta"><span class="tag info">Info</span><span>12 feb 2026 · 22:30</span></div></article>
<article class="notif-item"><h4>Bekende storing in live meekijken</h4><div class="meta"><span class="tag warning">Waarschuwing</span><span>28 jan 2026 · 18:00</span></div></article>
<article class="notif-item"><h4>Nieuwe frontpage live</h4><div class="meta"><span class="tag info">Info</span><span>06 jan 2026 · 09:15</span></div></article>
</div>
</section>
<section class="panel-col">
<h2>Details</h2>
<div class="form-grid">
<div class="inline-grid">
<div class="compact-field"><label>Type</label><div class="helper-p" style="padding:10px 12px;border:1px solid rgba(17,79,149,.14);border-radius:14px;background:rgba(255,255,255,.72);color:#134f92;">Info</div></div>
<div class="compact-field"><label>Status</label><div class="status-row"><span class="tag readonly">Verlopen</span></div></div>
</div>
<div class="compact-field"><label>Titel</label><div class="helper-p" style="padding:10px 12px;border:1px solid rgba(17,79,149,.14);border-radius:14px;background:rgba(255,255,255,.72);color:#134f92;">Onderhoud afgerond</div></div>
<div class="compact-field"><label>Tekst</label><div class="helper-p" style="min-height:96px;padding:10px 12px;border:1px solid rgba(17,79,149,.14);border-radius:14px;background:rgba(255,255,255,.72);color:#134f92;">Het geplande onderhoud is afgerond. OefenHub is weer volledig beschikbaar voor alle gebruikers.</div></div>
<div class="inline-grid">
<div class="compact-field"><label>Start datum/tijd</label><div class="helper-p" style="padding:10px 12px;border:1px solid rgba(17,79,149,.14);border-radius:14px;background:rgba(255,255,255,.72);color:#134f92;">12 feb 2026 · 20:00</div></div>
<div class="compact-field"><label>Eind datum/tijd</label><div class="helper-p" style="padding:10px 12px;border:1px solid rgba(17,79,149,.14);border-radius:14px;background:rgba(255,255,255,.72);color:#134f92;">12 feb 2026 · 22:30</div></div>
</div>
<div class="compact-field">
<label>Weergaveregel</label>
<div class="helper-p" style="padding:10px 12px;border:1px solid rgba(17,79,149,.14);border-radius:14px;background:rgba(255,255,255,.72);color:#134f92;">Bij elk bezoek tonen</div>
</div>
</div>
<div class="history-box">
<h3>Geschiedenis</h3>
<div class="history-scroll">
<div class="history-item"><strong>12 feb 2026 · 22:30</strong><p>Notificatie verlopen en verplaatst naar historie.</p><div class="who">Systeemactie</div></div>
<div class="history-item"><strong>12 feb 2026 · 20:00</strong><p>Notificatie actief gezet voor de onderhoudsperiode.</p><div class="who">Uitgevoerd door Noor van Dijk</div></div>
</div>
</div>
</section>
</div>
</section>
</section>
</div>
</div>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-col"><h4>OefenHub Beheer</h4><p>Beheer de inhoud, instellingen en communicatie van OefenHub 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="#">Accounts</a></div></div>
<div class="footer-col"><h4>Ondersteuning</h4><div class="footer-links"><a href="#">Meldingen</a><a href="#">Contact</a><a href="#">Privacybeleid</a></div></div>
</div>
<div class="footer-bottom">© 2026 OefenHub</div>
</footer>
<script>
const mainTabs = document.querySelectorAll('.tab-btn');
const panels = { features: document.getElementById('tab-features'), notifications: document.getElementById('tab-notifications') };
mainTabs.forEach(btn => btn.addEventListener('click', () => {
mainTabs.forEach(b => b.classList.remove('active'));
Object.values(panels).forEach(p => p.classList.remove('active'));
btn.classList.add('active');
panels[btn.dataset.tab].classList.add('active');
}));
const notifSubBtns = document.querySelectorAll('.notif-subtab-btn');
const notifSubPanels = { current: document.getElementById('sub-current'), recent: document.getElementById('sub-recent'), archive: document.getElementById('sub-archive') };
notifSubBtns.forEach(btn => btn.addEventListener('click', () => {
notifSubBtns.forEach(b => b.classList.remove('active'));
Object.values(notifSubPanels).forEach(p => p.classList.remove('active'));
btn.classList.add('active');
notifSubPanels[btn.dataset.subtab].classList.add('active');
}));
</script>
</body>
</html>