oefenhub_ouders&docent_04_frontpage_V1_9.html
Korte beschrijving
Deze mockup toont de reguliere leerlingfrontpage na inloggen, met categorienavigatie, populaire categorieën, recent geoefend en statistieken.
De pagina helpt de leerling snel verder oefenen binnen het actieve niveau en toont samenvattende voortgang op basis van afgeronde oefenruns. De voorbeeldwaarden zijn fictief en kunnen per leerling, niveau en oefening verschillen.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/ouders/oefenhub_ouders&docent_04_frontpage_V1_9.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OefenHub - Frontpage docent & ouder/voogd</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;
--orange-3: #f87400;
--green-1: #8adf67;
--green-2: #57ba3c;
--green-3: #2c9348;
--yellow-1: #ffd04e;
--yellow-2: #f6aa07;
--red-soft: #fde4e4;
--red-text: #b74d4d;
--shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
--shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.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: 1;
}
.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;
}
.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); }
.pill.purple { background: linear-gradient(180deg, #BF67DF, #863DBA); }
.pill.has-chevron { display: inline-flex; align-items: center; gap: 6px; padding-right: 14px; }
.pill-caret { font-size: 12px; line-height: 1; transform: translateY(1px); }
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 306px;
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;
}
.dropdown-menu::before {
content: "";
position: absolute;
top: -10px;
left: 36px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(255,255,255,.97);
filter: drop-shadow(0 -1px 0 rgba(170, 204, 238, .45));
}
.dropdown-menu.align-right { left: auto; right: 0; width: 306px; }
.dropdown-menu.align-right::before { left: auto; right: 20px; }
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item.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 auto;
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);
transition: background .18s ease, transform .18s ease;
}
.menu-link:last-child { box-shadow: none; }
.menu-link:hover,
.menu-link.is-active { background: linear-gradient(180deg, #edf5ff, #dcecff); }
.menu-link:hover { transform: translateX(2px); }
.menu-icon {
width: 23px;
height: 23px;
border-radius: 7px;
display: grid;
place-items: center;
color: #fff;
font-size: 14px;
font-weight: 900;
box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.10);
}
.menu-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.menu-icon.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.menu-icon.yellow { background: linear-gradient(180deg, #ffd45a, #f0b000); color: #8a5d00; }
.menu-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.menu-icon.red { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
.menu-arrow { color: #18518f; font-size: 22px; line-height: 1; font-weight: 700; }
.menu-link.no-arrow { grid-template-columns: auto 1fr; }
.menu-link.no-arrow .menu-arrow { display: none; }
.pill-icon { font-size: 14px; line-height: 1; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 120px; }
.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;
color: #fff;
font-size: 13px;
font-weight: 900;
background: linear-gradient(180deg, #ffb247, #ff8120);
}
main.wrap { width: min(1600px, calc(100% - 80px)); padding: 12px 0 28px; }
.page-shell {
background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.95));
border-radius: 34px;
box-shadow: var(--shadow);
overflow: hidden;
}
.page-content { padding: 24px 24px 28px; }
.page-hero {
display: grid; grid-template-columns: minmax(0, 1.2fr) 320px; gap: 18px; align-items: stretch;
margin-bottom: 18px;
}
.hero-card, .side-card, .form-card, .status-card, .info-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: 24px;
box-shadow: var(--shadow-soft);
}
.hero-card { padding: 14px 24px 22px; }
.hero-title { margin: 0 0 10px; font-size: 20px; line-height: 1.15; color: #0d5db8; }
.hero-text { margin: 0; font-size: 15px; line-height: 1.6; max-width: 760px; }
.hero-guide { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(17,79,149,.12); }
.hero-guide h3 { margin: 0 0 10px; font-size: 16px; color: #0d5db8; }
.hero-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hero-guide-item { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96)); border: 1px solid rgba(170,204,238,.62); border-radius: 14px; padding: 12px 14px; }
.hero-guide-item strong { display: block; margin-bottom: 4px; color: #0d5db8; font-size: 14px; }
.hero-guide-item p { margin: 0; font-size: 14px; color: #2f5f95; line-height: 1.45; }
.side-card { padding: 18px; display: grid; gap: 12px; align-content: start; }
.side-card h2, .form-card h2, .info-card h2 { margin: 0; font-size: 18px; color: #0d5db8; }
.mini-stat { padding: 12px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96)); border: 1px solid rgba(170,204,238,.62); }
.mini-stat strong { display: block; font-size: 13px; color: #6b8bb2; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.mini-stat span { display: block; font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--text); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.form-card { padding: 12px 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid.one-col { grid-template-columns: 1fr; }
.field, .field-full { display: grid; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label, .field-full label { font-size: 13px; font-weight: 900; color: #235790; }
.field input, .field select, .field textarea,
.field-full input, .field-full select, .field-full textarea {
width: 100%; border: 1px solid rgba(17,79,149,.14); background: rgba(255,255,255,.98);
border-radius: 16px; padding: 13px 14px; font: inherit; color: #134f92; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
textarea { min-height: 138px; resize: vertical; }
.hint { font-size: 12px; line-height: 1.45; color: #6d88aa; margin-top: -2px; }
.segmented { display: flex; flex-wrap: wrap; gap: 10px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px;
border-radius: 14px; border: 1px solid rgba(17,79,149,.12); background: #fff; font-size: 13px; font-weight: 800; color: #20538d; cursor: pointer;
box-shadow: var(--shadow-soft); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.segmented label:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(35,100,177,.14); border-color: rgba(47,143,236,.28); background: linear-gradient(180deg, #ffffff, #f3f8ff); }
.segmented input:checked + label { background: linear-gradient(180deg, #eef6ff, #dcecff); border-color: rgba(47,143,236,.34); color: #0d5db8; }
.segmented input:checked + label:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(35,100,177,.16); border-color: rgba(47,143,236,.40); }
.context-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.info-card { padding: 16px; }
.info-card h3 { margin: 0 0 8px; font-size: 15px; color: #0d5db8; }
.info-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); }
.checkbox-list { display: grid; gap: 10px; }
.checkbox-item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 13px; color: var(--text); }
.checkbox-item input { margin-top: 2px; accent-color: #2f8fec; }
.upload-box {
border: 2px dashed rgba(47,143,236,.28); border-radius: 20px; padding: 22px 18px; text-align: center;
background: linear-gradient(180deg, rgba(239,247,255,.8), rgba(255,255,255,.96)); color: #4872a8;
}
.upload-box strong { display: block; font-size: 14px; color: #0d5db8; margin-bottom: 6px; }
.form-actions {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px;
padding-top: 18px; border-top: 1px solid rgba(17,79,149,.10);
}
.btn-spacer { flex: 1 1 auto; }
.btn-row { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.btn {
border: 0; border-radius: 15px; min-height: 46px; padding: 0 18px; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
box-shadow: var(--shadow-soft);
}
.btn-primary { background: linear-gradient(180deg, #ffbc4b, #ff9621); color: #fff; }
.btn-secondary { background: linear-gradient(180deg, #eef6ff, #dcecff); color: #0d5db8; }
.status-stack { display: grid; gap: 14px; }
.status-card { padding: 10px 16px; }
.status-card h3 { margin: 0 0 12px; font-size: 16px; color: #0d5db8; }
.ticket-list { display: grid; gap: 10px; }
.ticket {
position: relative;
border-radius: 16px; border: 1px solid rgba(170,204,238,.62); background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96)); padding: 12px 13px;
box-shadow: var(--shadow-soft); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.ticket::after {
content: 'Bekijk melding'; position: absolute; right: 12px; bottom: 10px; font-size: 11px; font-weight: 900; letter-spacing: .02em;
color: #0d5db8; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease;
}
.ticket:hover, .ticket:focus-visible {
transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 34px rgba(35,100,177,.22); border-color: rgba(47,143,236,.42);
background: linear-gradient(180deg, #ffffff, #eef6ff); outline: none;
}
.ticket:hover::after, .ticket:focus-visible::after { opacity: 1; transform: translateY(0); }
.ticket-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.ticket-title { margin: 0; font-size: 14px; font-weight: 900; color: #1f2f42; }
.ticket-date { font-size: 12px; color: #73859a; font-weight: 800; white-space: nowrap; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.chip.orange { background: #fff0d8; color: #c27209; }
.chip.blue { background: #dceeff; color: #216ab9; }
.chip.green { background: #e3f7ea; color: #23804a; }
.ticket p { margin: 0; font-size: 13px; line-height: 1.5; color: #5d7087; }
.bullet-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bullet-list li {
position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text);
}
.bullet-list li::before {
content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 999px;
background: linear-gradient(180deg, #5eb8ff, #2f8fec);
}
.modal-overlay {
position: fixed; inset: 0; background: rgba(18, 50, 88, .34); backdrop-filter: blur(3px);
display: none; align-items: center; justify-content: center; padding: 24px; z-index: 120;
}
.modal-overlay.open { display: flex; }
.modal-card {
width: min(560px, 100%); background: #fff; border-radius: 24px; padding: 22px;
box-shadow: 0 22px 44px rgba(13, 56, 110, .22); border: 1px solid rgba(17,79,149,.1);
}
.modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.modal-head h3 { margin: 0; font-size: 20px; color: #0d5db8; }
.modal-close { border: 0; background: #eef6ff; color: #0d5db8; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; font-size: 20px; font-weight: 700; }
.modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.modal-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--text); }
.modal-section-title { font-size: 12px; font-weight: 900; color: #6c89ad; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.site-footer {
margin-top: 18px;
padding: 0;
background: transparent;
}
.site-footer-inner {
width: 100%;
margin: 0;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border-top: 1px solid rgba(170,204,238,.62);
box-shadow: var(--shadow);
border-radius: 26px 26px 0 0;
padding: 22px 28px 18px;
overflow: hidden;
}
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 36px; align-items: start; padding: 0; }
.footer-col h4 {
margin: 0 0 12px; font-size: 15px; color: #0d5db8; font-weight: 900; padding-bottom: 8px; border-bottom: 1px solid rgba(17,79,149,.14);
}
.footer-col p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: #18518f; text-decoration: none; font-size: 13px; font-weight: 700; transition: color .18s ease; }
.footer-links a:hover { color: var(--blue-4); text-decoration: underline; }
.footer-bottom {
margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(17,79,149,.10); display: flex; justify-content: space-between; gap: 12px;
align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-weight: 600;
}
@media (max-width: 1100px) {
.header-row { grid-template-columns: 1fr; gap: 14px; }
.brand { justify-self: center; align-items: center; min-width: 0; }
.welcome-text { margin-left: 0; margin-top: -6px; }
.header-actions { justify-content: center; }
.nav-pills { overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; width: 100%; }
.page-hero, .content-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
.wrap { width: min(100%, calc(100% - 18px)); }
main.wrap { width: min(100%, calc(100% - 18px)); padding: 12px 0 22px; }
.page-content { padding: 18px; }
.hero-title { font-size: 20px; }
.form-grid, .context-row { grid-template-columns: 1fr; }
.dropdown-menu { width: 276px; }
.dropdown-menu.align-right { width: 286px; }
.hero-guide-grid { grid-template-columns: 1fr; }
.site-footer { padding: 0; }
.site-footer-inner { width: min(100%, calc(100% - 18px)); padding: 20px 18px 16px; }
.footer-bottom { justify-content: flex-start; }
.form-actions { align-items: center; }
.btn-spacer { display: none; }
.btn-row { width: auto; }
.btn-row .btn { flex: 0 0 auto; }
}
.modal-overlay {
position: fixed; inset: 0; background: rgba(18, 50, 88, .34); backdrop-filter: blur(3px);
display: none; align-items: center; justify-content: center; padding: 24px; z-index: 120;
}
.modal-overlay.open { display: flex; }
.modal-card {
width: min(560px, 100%); background: #fff; border-radius: 24px; padding: 22px;
box-shadow: 0 22px 44px rgba(13, 56, 110, .22); border: 1px solid rgba(17,79,149,.1);
}
.modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.modal-head h3 { margin: 0; font-size: 20px; color: #0d5db8; }
.modal-close { border: 0; background: #eef6ff; color: #0d5db8; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; font-size: 20px; font-weight: 700; }
.modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.modal-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--text); }
.modal-section-title { font-size: 12px; font-weight: 900; color: #6c89ad; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.relations-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) 320px; gap: 18px; align-items: start; }
.side-card.is-collapsible .side-toggle { border:0; background:transparent; width:100%; text-align:left; padding:0 28px 0 0; margin:0; font-size:17px; font-weight:900; color:#0d5db8; position:relative; cursor:pointer; }
.side-card.is-collapsible .side-toggle::after { content:"▾"; position:absolute; right:0; top:0; color:#5b7fa7; transition: transform .18s ease; }
.side-card.is-collapsible:not(.is-collapsed) .side-toggle::after { transform: rotate(180deg); }
.side-card.is-collapsible.is-collapsed .side-collapsible-content { display:none; }
.hero-meta-grid { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(17,79,149,.12); display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.hero-meta-item { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96)); border:1px solid rgba(170,204,238,.62); border-radius:14px; padding:12px 14px; }
.hero-meta-item strong { display:block; margin-bottom:4px; color:#0d5db8; font-size:14px; }
.hero-meta-item span { font-size:13px; color:#285d96; line-height:1.45; }
.relations-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; margin-top:18px; }
.relation-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:24px; box-shadow: var(--shadow-soft); padding:18px 20px; }
.relation-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.relation-card-title { margin:0; font-size:18px; color:#0d5db8; }
.relation-card-sub { margin:4px 0 0; font-size:13px; color:#5a7ea6; line-height:1.45; }
.mini-btn { border:0; border-radius:999px; padding:9px 14px; font-weight:800; font-size:13px; color:#fff; cursor:pointer; box-shadow: var(--shadow-soft); }
.mini-btn.orange { background: linear-gradient(180deg, #ffbe54, #ef8d1a); }
.mini-btn.blue { background: linear-gradient(180deg, #4f9fff, #1b77db); }
.mini-btn.green { background: linear-gradient(180deg, #8ee46c, #56ba3e); }
.relation-list { display:grid; gap:5px; max-height:240px; overflow:auto; padding-right:4px; }
.relation-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px 10px; align-items:center; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96)); border:1px solid rgba(170,204,238,.62); border-radius:18px; padding:4px 13px; }
.relation-avatar { width:40px; height:40px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:15px; }
.relation-avatar.friend { background: linear-gradient(180deg, #8e6cff, #6f46e7); }
.relation-avatar.guardian { background: linear-gradient(180deg, #3fa6ff, #1978d8); }
.relation-avatar.teacher { background: linear-gradient(180deg, #f6b04f, #ea7f17); }
.relation-avatar.pending { background: linear-gradient(180deg, #97de79, #59b840); }
.relation-name { margin:0; font-size:13px; font-weight:800; color:#124f94; }
.relation-meta { margin:3px 0 0; font-size:12px; color:#5a7ea6; line-height:1.45; }
.relation-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; grid-column:2 / -1; align-self:start; }
.ghost-link { border:0; background:transparent; color:#0d5db8; font-size:12px; font-weight:800; cursor:pointer; padding:4px 0; }
.ghost-link.warn { color:#c65d14; }
.ghost-link.danger { color:#cf5353; }
.side-stack { display:grid; gap:16px; }
.summary-list { display:grid; gap:10px; margin-top:2px; }
.summary-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; color:#285d96; padding:8px 0; border-top:1px solid rgba(17,79,149,.08); }
.summary-row:first-child { border-top:0; padding-top:0; }
.summary-row strong { color:#0d5db8; }
.hint-list { display:grid; gap:10px; margin-top:2px; }
.hint-item { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96)); border:1px solid rgba(170,204,238,.62); border-radius:16px; padding:12px 13px; }
.hint-item strong { display:block; margin-bottom:4px; color:#0d5db8; font-size:13px; }
.hint-item p { margin:0; font-size:13px; color:#4e7198; line-height:1.5; }
.relation-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; color:#0d5db8; background: rgba(13,93,184,.08); }
.relation-badge.pending { color:#c46b00; background: rgba(255, 190, 84, .2); }
.relation-badge.shared { color:#6f46e7; background: rgba(111,70,231,.12); }
.empty-state { padding:12px 0 2px; font-size:13px; color:#5a7ea6; }
.relation-card-scroll { max-height: 250px; overflow: auto; padding-right: 4px; }
.relation-card-scroll::-webkit-scrollbar, .relation-list::-webkit-scrollbar { width: 10px; }
.relation-card-scroll::-webkit-scrollbar-thumb, .relation-list::-webkit-scrollbar-thumb { background: rgba(17,79,149,.18); border-radius: 999px; }
.relation-badge { justify-content:center; text-align:center; min-width:116px; }
.relation-card-bottom { grid-column: 1 / -1; }
.hint-list.horizontal { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hint-item { padding:10px 12px; }
.relation-avatar svg, .menu-icon svg { display:block; width:20px; height:20px; }
.menu-icon.purple { color:#fff; }
.menu-icon.purple svg * { stroke:#fff !important; fill:none; }
.menu-icon .stroke-current { stroke: currentColor; }
.menu-icon .fill-current { fill: currentColor; }
.relation-inline-toggle { border:0; background:transparent; color:#0d5db8; cursor:pointer; padding:0; width:26px; height:26px; border-radius:999px; position:relative; justify-self:end; grid-column:3 / 4; grid-row:1 / 2; align-self:start; margin-top:2px; }
.relation-inline-toggle::after { content:"▾"; position:absolute; inset:0; display:grid; place-items:center; color:#5b7fa7; font-size:16px; transition: transform .18s ease; }
.relation-item.is-open .relation-inline-toggle::after { transform: rotate(180deg); }
.relation-details { display:none; grid-column: 2 / -1; margin:-2px 0 0; padding:0 0 2px; }
.relation-item.is-open .relation-details { display:block; }
.relation-detail-line { font-size:12px; color:#5a7ea6; line-height:1.45; margin:0; }
.relation-actions.compact { align-items:center; }
.tooltip-anchor { cursor:help; }
@media (max-width: 840px) {
.relations-layout { grid-template-columns: 1fr; }
.hero-meta-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
.relations-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
.hero-meta-grid { grid-template-columns: 1fr; }
.hint-list.horizontal { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.relation-item { grid-template-columns: auto minmax(0,1fr); }
.relation-inline-toggle { grid-column: 2 / 3; grid-row:1 / 2; justify-self:end; }
.relation-actions { grid-column: 1 / -1; justify-content:flex-start; }
.relation-details { grid-column: 1 / -1; }
.hint-list.horizontal { grid-template-columns: 1fr; }
.relation-card-head { flex-direction:column; align-items:flex-start; }
}
.teacher-nav { flex-wrap: wrap; }
.teacher-nav .pill.long { justify-content: center; }
.teacher-shell { padding: 28px 24px 26px; }
.teacher-page { display: grid; gap: 22px; }
.teacher-hero-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .9fr); gap: 18px; align-items: start; }
.teacher-hero-card { padding: 18px 22px 20px; }
.eyebrow { display:inline-flex; align-items:center; border-radius:999px; background:#eaf2fb; color:#18518f; font-size:12px; font-weight:800; letter-spacing:.02em; padding:6px 10px; margin-bottom:8px; }
.teacher-meta-grid { margin-top: 16px; }
.teacher-side-stack { gap: 16px; }
.side-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.side-title { margin:0; color: var(--blue-4); font-size: 18px; line-height: 1.1; }
.summary-list.compact .summary-row { padding: 7px 0; }
.teacher-actions-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.teacher-action-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 18px 18px 16px; display:grid; gap:12px; min-height: 208px; box-shadow: 0 10px 24px rgba(16,66,129,.07); }
.teacher-action-icon { width: 56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:26px; }
.highlight-levels .teacher-action-icon { background: linear-gradient(135deg,#7a5cf0,#9f74ff); }
.highlight-students .teacher-action-icon { background: linear-gradient(135deg,#2f86ee,#68b0ff); }
.highlight-online .teacher-action-icon { background: linear-gradient(135deg,#6fba4c,#95d37d); }
.teacher-action-title { margin:0; color: var(--blue-4); font-size: 21px; line-height:1.1; }
.teacher-action-text { margin: 0; color: #4770a0; font-size: 14px; line-height: 1.5; }
.teacher-action-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.teacher-action-links a, .teacher-level-item a, .teacher-alert-link, .teacher-online-actions a { color:#18518f; font-size:14px; font-weight:800; text-decoration:none; }
.teacher-action-links a:hover, .teacher-level-item a:hover, .teacher-alert-link:hover, .teacher-online-actions a:hover { text-decoration: underline; }
.teacher-content-grid { display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: 18px; }
.teacher-content-grid.lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.teacher-card { padding: 18px 22px 18px; display:grid; gap: 16px; }
.teacher-card-head { align-items:flex-start; }
.teacher-card-head.split { display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; }
.teacher-alert-list, .teacher-level-list, .teacher-online-list { display:grid; gap: 10px; }
.teacher-alert-item, .teacher-level-item, .teacher-online-item { border:1px solid #b7cff2; background:#f7fbff; border-radius:24px; padding:12px 14px; display:grid; align-items:center; }
.teacher-alert-item { grid-template-columns: auto 1fr auto; gap: 12px; }
.teacher-alert-badge { width: 38px; height:38px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:15px; }
.teacher-alert-badge.orange { background: linear-gradient(135deg,#f5a431,#f08a17); }
.teacher-alert-badge.green { background: linear-gradient(135deg,#7abf52,#59a83b); }
.teacher-alert-badge.blue { background: linear-gradient(135deg,#4d92f0,#2678e7); }
.teacher-alert-copy { display:grid; gap:3px; }
.teacher-alert-copy strong { color: var(--blue-4); font-size:15px; }
.teacher-alert-copy span { color:#5376a2; font-size:13px; line-height:1.45; }
.teacher-inline-tag { display:inline-flex; align-items:center; min-height:32px; padding: 5px 12px; border-radius:999px; background:#eaf2fb; color:#1b5ca0; font-size:13px; font-weight:800; text-align:center; }
.teacher-test-form { display:grid; gap: 14px; }
.teacher-form-grid { display:grid; gap: 12px; }
.teacher-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.teacher-form-grid.test-row { grid-template-columns: 170px auto; align-items:end; }
.teacher-field { display:grid; gap:6px; }
.teacher-field span { color:#1d5b9c; font-size:13px; font-weight:800; }
.teacher-field select, .teacher-field input { width:100%; border:1px solid #b6cfee; background:#fff; border-radius:16px; padding:11px 13px; color:#174e8d; font-size:14px; font-weight:700; outline:none; }
.teacher-field select:focus, .teacher-field input:focus { border-color:#5798ea; box-shadow:0 0 0 3px rgba(82,138,215,.12); }
.mini-btn.large { min-height:48px; font-size:15px; }
.teacher-form-note { margin:0; color:#5a7ba5; font-size:13px; line-height:1.5; }
.teacher-level-item { grid-template-columns: 1fr auto; gap: 14px; }
.teacher-level-item strong { color: var(--blue-4); font-size:15px; }
.teacher-level-item span { display:block; color:#5779a4; font-size:13px; margin-top:3px; }
.teacher-online-item { grid-template-columns: auto minmax(0,1fr) auto; gap:12px; }
.teacher-online-dot { width: 11px; height:11px; border-radius:999px; background:#49b85c; margin-left:4px; box-shadow:0 0 0 5px rgba(73,184,92,.12); }
.teacher-online-item strong { color: var(--blue-4); font-size:15px; }
.teacher-online-item span { display:block; color:#5779a4; font-size:13px; margin-top:3px; }
.teacher-online-actions { display:flex; align-items:center; gap: 12px; flex-wrap:wrap; }
.teacher-online-actions.disabled span { color:#9bb2cc; font-size:14px; font-weight:800; }
.mini-btn.ghost { background:#eef5fd; color:#1b5ca0; box-shadow:none; }
.mini-btn.ghost:hover { transform:none; background:#e2eefb; }
@media (max-width: 980px) { .teacher-actions-grid { grid-template-columns: 1fr; } .teacher-content-grid, .teacher-content-grid.lower { grid-template-columns:1fr; } }
@media (max-width: 1020px) { .teacher-hero-layout { grid-template-columns:1fr; } }
@media (max-width: 760px) { .teacher-form-grid.three, .teacher-form-grid.test-row { grid-template-columns:1fr; } .teacher-card-head.split { flex-direction:column; } .teacher-online-item, .teacher-alert-item, .teacher-level-item { grid-template-columns:1fr; } .teacher-online-actions { justify-content:flex-start; } }
.teacher-frontpage-shell { padding: 28px 0 18px; }
.teacher-frontpage-shell .frontpage-intro-card,
.teacher-frontpage-shell .summary-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: 24px;
box-shadow: var(--shadow-soft);
}
.teacher-frontpage-shell .frontpage-intro-card { padding: 22px 24px 20px; }
.teacher-frontpage-shell .summary-card { padding: 18px 18px 16px; }
.teacher-frontpage-layout { display: grid; gap: 18px; }
.teacher-frontpage-layout.page-content { padding: 0; }
.frontpage-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: 24px;
box-shadow: 0 8px 18px rgba(35,100,177,.08);
padding: 22px 24px 20px;
}
.frontpage-intro-title { margin: 0 0 10px; font-size: 28px; line-height: 1.12; color: #0d5db8; }
.frontpage-intro-text { margin: 0; color: #315d91; font-size: 15px; line-height: 1.65; max-width: 940px; }
.frontpage-intro-note {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(17,79,149,.10);
font-size: 13px;
line-height: 1.55;
color: #5377a0;
}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.summary-card{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.94));border:1px solid rgba(17,79,149,.08);border-radius:24px;box-shadow:0 8px 18px rgba(35,100,177,.08);padding:18px 18px 16px;display:grid;gap:14px;min-height:290px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-title-wrap{display:grid;gap:6px}
.card-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:#6b86a8}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot.teacher{background:linear-gradient(180deg,#8d6cff,#6147d8)}
.dot.guardian{background:linear-gradient(180deg,var(--orange-1),var(--orange-3))}
.context-tag.guardian{background:linear-gradient(180deg, rgba(255,187,77,.2), rgba(248,116,0,.16));color:#c56a09}
.card-title{margin:0;font-size:22px;line-height:1.15;color:#0d5db8}
.card-intro{margin:0;color:#55789f;font-size:14px;line-height:1.5}
.context-tag{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap}
.context-tag.teacher{background:linear-gradient(180deg, rgba(141,108,255,.18), rgba(97,71,216,.18));color:#5f45cb}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat-box{border-radius:18px;padding:14px 14px 12px;border:1px solid rgba(17,79,149,.08);background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.stat-label{display:block;font-size:12px;font-weight:800;letter-spacing:.02em;color:#6f89aa;margin-bottom:8px;line-height:1.35}
.stat-value{display:block;font-size:29px;line-height:1;color:#0d5db8;font-weight:900;margin-bottom:8px}
.stat-meta{display:block;font-size:12px;line-height:1.45;color:#55789f}
.card-foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(17,79,149,.10);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.foot-label{font-size:12px;font-weight:900;color:#0d5db8}
.foot-copy{font-size:12px;line-height:1.45;color:#5f7ea5}
@media (max-width: 900px) { .dashboard-grid { grid-template-columns:1fr; } }
@media (max-width: 700px) {
.teacher-frontpage-shell { padding: 18px; }
.frontpage-intro-title { font-size: 24px; }
.stats-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, Eva</div>
</div>
<div class="nav-pills teacher-nav">
<button class="pill purple long">🧩 Oefenaanbod</button>
<button class="pill blue long">👥 Leerlingen</button><button class="pill blue long">👨👩👧 Kinderen</button>
<button class="pill green long">🟢 Online</button>
</div>
<div class="header-actions">
<button aria-label="Berichten" class="mail-btn">✉️<span class="badge">3</span></button>
<div class="nav-item profile-nav" data-menu="profielmenu">
<button aria-expanded="false" aria-haspopup="true" aria-label="Gebruikersmenu" class="profile-chip" type="button">
<span class="avatar">E</span>
</button>
<div aria-label="Gebruikersmenu" class="dropdown-menu align-right" role="menu">
<div class="menu-list">
<a class="menu-link no-arrow" href="#"><span class="menu-icon blue">👤</span><span>Profiel</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon green">⚙</span><span>Voorkeuren</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon yellow">Aa</span><span>Toegankelijkheid</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span aria-hidden="true" class="menu-icon purple"><svg fill="none" viewbox="0 0 24 24"><path class="stroke-current" d="M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><circle class="stroke-current" cx="9.5" cy="7" r="3" stroke-width="2"></circle><path class="stroke-current" d="M21 19v-1a4 4 0 0 0-3-3.87" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path class="stroke-current" d="M16 4.13a4 4 0 0 1 0 7.75" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></span><span>Relaties</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon red">!</span><span>Meld een probleem</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon blue">↪</span><span>Uitloggen</span><span class="menu-arrow">›</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="wrap">
<section class="teacher-frontpage-shell">
<div class="page-content teacher-frontpage-layout">
<section aria-label="Introductie docent en ouder/voogd frontpage" class="frontpage-intro-card">
<h1 class="frontpage-intro-title">Welkom op je frontpage voor docent en ouder/voogd</h1>
<p class="frontpage-intro-text">Vanaf deze startpagina krijg je in één oogopslag inzicht in je twee rolcontexten. Je ziet hier kerninformatie over je gekoppelde leerlingen, niveaus en inhoud als docent, en daarnaast een compact overzicht van je kinderen en recente resultaten als ouder of voogd.</p>
<div class="frontpage-intro-note">Gebruik deze pagina vooral als rustige oriëntatieplek. Dieper beheer en contextafhankelijke acties blijven bewust via de bestaande menu-ingangen bovenin bereikbaar.</div>
</section>
<section aria-label="Overzichtsblokken docent en ouder/voogd" class="dashboard-grid"><article class="summary-card">
<div class="card-head">
<div class="card-title-wrap">
<div class="card-kicker"><span class="dot teacher"></span>Docent</div>
<h2 class="card-title">Leerlingenoverzicht</h2>
<p class="card-intro">Kerncijfers rond gekoppelde leerlingen en toegang. Geen selectie van losse leerlingen, maar alleen schaalbare samenvatting.</p>
</div>
<span class="context-tag teacher">Overzicht</span>
</div>
<div class="stats-grid">
<div class="stat-box">
<span class="stat-label">Gekoppelde leerlingen</span>
<span class="stat-value">24</span>
<span class="stat-meta">Actieve docent-leerlingrelaties binnen je accountcontext.</span>
</div>
<div class="stat-box">
<span class="stat-label">Actieve autorisaties</span>
<span class="stat-value">31</span>
<span class="stat-meta">Toegang van leerlingen tot één of meer docentniveaus.</span>
</div>
<div class="stat-box">
<span class="stat-label">Leerlingen op huidig niveau</span>
<span class="stat-value">12</span>
<span class="stat-meta">Leerlingen met toegang tot het nu geselecteerde niveau.</span>
</div>
<div class="stat-box">
<span class="stat-label">Openstaande uitnodigingen</span>
<span class="stat-value">2</span>
<span class="stat-meta">Nog niet geaccepteerde of afgewezen koppelingen.</span>
</div>
</div>
<div class="card-foot">
<span class="foot-label">Geen leerlinglijst in dit blok</span>
<span class="foot-copy">Voorkomt arbitraire selectie bij 20+ leerlingen en houdt de kaart compact.</span>
</div>
</article><article class="summary-card">
<div class="card-head">
<div class="card-title-wrap">
<div class="card-kicker"><span class="dot teacher"></span>Docent</div>
<h2 class="card-title">Niveaus & inhoud</h2>
<p class="card-intro">Samenvatting van je docentstructuur en inhoud. Geen alternatieve navigatie naar dezelfde beheerpagina, wel direct inzicht.</p>
</div>
<span class="context-tag teacher">Structuur</span>
</div>
<div class="stats-grid">
<div class="stat-box">
<span class="stat-label">Actieve niveaus</span>
<span class="stat-value">4</span>
<span class="stat-meta">Niveaus met actuele eigenaar of actieve samenwerking.</span>
</div>
<div class="stat-box">
<span class="stat-label">Gekoppelde categorieën</span>
<span class="stat-value">18</span>
<span class="stat-meta">Centrale categorieën die in je niveaus gebruikt worden.</span>
</div>
<div class="stat-box">
<span class="stat-label">Actieve oefeningen</span>
<span class="stat-value">56</span>
<span class="stat-meta">Oefeningen die beschikbaar zijn voor normaal gebruik.</span>
</div>
<div class="stat-box">
<span class="stat-label">In onderhoud</span>
<span class="stat-value">3</span>
<span class="stat-meta">Oefeningen die tijdelijk niet actief inzetbaar zijn.</span>
</div>
</div>
<div class="card-foot">
<span class="foot-label">Alleen overzicht, geen dubbele CTA</span>
<span class="foot-copy">Beheer van niveaus en categorieën blijft via de bestaande menu-ingang lopen.</span>
</div>
</article><article class="summary-card">
<div class="card-head">
<div class="card-title-wrap">
<div class="card-kicker"><span class="dot guardian"></span>Ouder/voogd</div>
<h2 class="card-title">Kinderenoverzicht</h2>
<p class="card-intro">Samenvatting zonder individuele kindkaarten. Daardoor blijft de kaart rustig en ook bruikbaar wanneer het aantal koppelingen groeit.</p>
</div>
<span class="context-tag guardian">Overzicht</span>
</div>
<div class="stats-grid">
<div class="stat-box">
<span class="stat-label">Gekoppelde kinderen</span>
<span class="stat-value">2</span>
<span class="stat-meta">Actieve ouder/voogdrelaties binnen je account.</span>
</div>
<div class="stat-box">
<span class="stat-label">Huidig niveau ingesteld</span>
<span class="stat-value">2</span>
<span class="stat-meta">Kinderen waarvoor een actueel niveau bekend is.</span>
</div>
<div class="stat-box">
<span class="stat-label">Totaal gekoppelde docenten</span>
<span class="stat-value">3</span>
<span class="stat-meta">Docentrelaties verdeeld over alle gekoppelde kinderen.</span>
</div>
<div class="stat-box">
<span class="stat-label">Zonder docentkoppeling</span>
<span class="stat-value">0</span>
<span class="stat-meta">Kinderen zonder actieve docentrelatie of beschikbare docentcontext.</span>
</div>
</div>
<div class="card-foot">
<span class="foot-label">Geen kindselectie op de frontpage</span>
<span class="foot-copy">Voorkomt krappe kaarten en houdt detailnavigatie binnen de beheerpagina zelf.</span>
</div>
</article><article class="summary-card">
<div class="card-head">
<div class="card-title-wrap">
<div class="card-kicker"><span class="dot guardian"></span>Ouder/voogd</div>
<h2 class="card-title">Resultatenoverzicht</h2>
<p class="card-intro">Compacte statistische samenvatting van recente voortgang. Geen losse resultaatstromen of generieke links die eerst nog een kindkeuze vereisen.</p>
</div>
<span class="context-tag guardian">Resultaten</span>
</div>
<div class="stats-grid">
<div class="stat-box">
<span class="stat-label">Afgerond deze week</span>
<span class="stat-value">14</span>
<span class="stat-meta">Totaal afgeronde oefeningen van gekoppelde kinderen.</span>
</div>
<div class="stat-box">
<span class="stat-label">Afgerond deze maand</span>
<span class="stat-value">47</span>
<span class="stat-meta">Handig als snelle indicatie van recente activiteit.</span>
</div>
<div class="stat-box">
<span class="stat-label">Gemiddeld goed</span>
<span class="stat-value">81%</span>
<span class="stat-meta">Samengevat percentage juiste antwoorden over recente runs.</span>
</div>
<div class="stat-box">
<span class="stat-label">Gemarkeerd als ‘Geen idee’</span>
<span class="stat-value">6</span>
<span class="stat-meta">Recente totalen als signaal voor extra ondersteuning.</span>
</div>
</div>
<div class="card-foot">
<span class="foot-label">Zuiver informatief blok</span>
<span class="foot-copy">Detailgeschiedenis en statistieken blijven bewust per kind toegankelijk, niet generiek vanaf hier.</span>
</div>
</article></section>
</div>
</section>
</main>
<footer class="site-footer">
<div class="site-footer-inner">
<div class="footer-grid">
<div class="footer-col">
<h4>OefenHub</h4>
<p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
</div>
<div class="footer-col">
<h4>Handige Links</h4>
<div class="footer-links">
<a href="#">Over OefenHub</a>
<a href="#">Contact</a>
<a href="#">Privacybeleid</a>
</div>
</div>
<div class="footer-col">
<h4>Snel naar</h4>
<div class="footer-links">
<a href="#">Profiel</a>
<a href="#">Berichten</a>
<a href="#">Meldingen</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 OefenHub</span>
</div>
</div>
</footer>
<script>
(function () {
const navItems = document.querySelectorAll('.nav-item[data-menu]');
navItems.forEach(function (item) {
const trigger = item.querySelector('button');
if (!trigger) return;
trigger.addEventListener('click', function (event) {
event.preventDefault();
const isOpen = item.classList.contains('open');
navItems.forEach(function (other) {
other.classList.remove('open');
const btn = other.querySelector('button');
if (btn) btn.setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
item.classList.add('open');
trigger.setAttribute('aria-expanded', 'true');
}
});
});
document.addEventListener('click', function (event) {
navItems.forEach(function (item) {
if (!item.contains(event.target)) {
item.classList.remove('open');
const btn = item.querySelector('button');
if (btn) btn.setAttribute('aria-expanded', 'false');
}
});
});
})();
</script>
</body>
</html>