oefenhub_ouders_02_kinderen_V1_4.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_02_kinderen_V1_4.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub - Ouder/voogd Kinderen</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;
--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;
overflow-x: hidden;
}
.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;
}
.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;
}
.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.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
.pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.pill.long { justify-content: center; }
.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;
}
.nav-item { position: relative; display: inline-flex; align-items: center; }
.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);
}
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 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;
right: 20px;
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));
}
.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;
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-icon svg { display: block; width: 20px; height: 20px; }
.menu-icon.purple svg * { stroke: #fff !important; fill: none; }
main.wrap { padding: 22px 0 0; }
.breadcrumb-bar {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
color: #5f7ea5;
font-size: 13px;
font-weight: 800;
}
.breadcrumb-bar a { color: #1b5ca0; text-decoration: none; }
.breadcrumb-bar a:hover { text-decoration: underline; }
.teacher-manage-layout { display: grid; gap: 16px; }
.teacher-manage-columns {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 16px;
align-items: start;
}
.teacher-left-stack, .teacher-right-stack { display: grid; gap: 16px; }
.teacher-manage-hero-main,
.teacher-panel {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 28px;
box-shadow: var(--shadow);
}
.teacher-manage-hero-main { padding: 18px 20px; }
.teacher-manage-title { margin: 0 0 8px; font-size: 24px; color: var(--blue-4); }
.teacher-manage-text { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.teacher-panel { padding: 16px 18px 18px; }
.teacher-panel h2 { margin: 0 0 6px; font-size: 18px; color: var(--blue-4); }
.teacher-panel-intro { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.student-manage-list {
display: grid;
gap: 8px;
max-height: 660px;
overflow: auto;
padding-right: 4px;
}
.student-manage-card {
background: #fff;
border: 1px solid rgba(155,197,236,.55);
border-radius: 22px;
padding: 10px 14px 11px;
box-shadow: var(--shadow-soft);
display: grid;
grid-template-columns: auto minmax(0,1fr) auto;
grid-template-rows: auto auto;
gap: 2px 12px;
align-items: start;
}
.student-manage-avatar {
width: 44px;
height: 44px;
border-radius: 16px;
display: grid;
place-items: center;
font-weight: 900;
color: #fff;
background: linear-gradient(180deg, #8f6dff, #5c44db);
font-size: 20px;
grid-column: 1;
grid-row: 1 / span 2;
}
.student-manage-main { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.student-manage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.student-manage-name { margin: 0; font-size: 16px; color: var(--text); }
.student-manage-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.student-link { color: var(--blue-4); text-decoration: none; font-weight: 900; font-size: 14px; }
.student-link:hover { text-decoration: underline; }
.student-link.danger { color: #e55c5c; }
.student-manage-toggle {
grid-column: 3;
grid-row: 1 / span 2;
align-self: start;
justify-self: end;
width: 34px;
height: 34px;
border-radius: 999px;
border: 2px solid rgba(17,79,149,.35);
background: #fff;
color: var(--text);
display: grid;
place-items: center;
cursor: pointer;
font-size: 14px;
box-shadow: var(--shadow-soft);
transition: transform .18s ease;
}
.student-manage-extra {
display: none;
grid-column: 1 / -1;
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid rgba(17,79,149,.10);
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.student-manage-extra p { margin: 0 0 4px; }
.student-manage-card.is-open .student-manage-extra { display: block; }
.student-manage-card.is-open .student-manage-toggle { transform: rotate(180deg); }
.teacher-tip-list {
display: grid;
gap: 10px;
margin-top: 10px;
}
.teacher-side-tip {
padding: 10px 11px;
border-radius: 16px;
border: 1px solid rgba(170,204,238,.58);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,255,.95));
}
.teacher-side-tip strong { display: block; margin-bottom: 3px; font-size: 12px; color: var(--text); }
.teacher-side-tip p { margin: 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
.site-footer {
margin-top: 26px;
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
border-top: 1px solid rgba(17,79,149,.10);
box-shadow: var(--shadow);
border-radius: 26px 26px 0 0;
padding: 0;
overflow: visible;
}
.site-footer > .wrap { padding: 22px 28px 18px; }
.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%; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 1080px) {
.teacher-manage-columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.site-footer > .wrap { padding: 20px 18px 16px; }
.footer-bottom { justify-content: flex-start; }
}
@media (max-width: 720px) {
.student-manage-card { grid-template-columns: auto minmax(0,1fr) auto; }
.student-manage-head { flex-direction: column; align-items: flex-start; }
}
</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 teacher-nav">
<button class="pill blue long">👨👩👧 Kinderen</button>
<button class="pill green long">🟢 Online</button>
</div>
<div class="header-actions">
<button class="mail-btn" aria-label="Berichten">✉️<span class="badge">3</span></button>
<div class="nav-item profile-nav" data-menu="profielmenu">
<button class="profile-chip" type="button" aria-label="Gebruikersmenu" aria-haspopup="true" aria-expanded="false">
<span class="avatar">N</span>
</button>
<div class="dropdown-menu align-right" role="menu" aria-label="Gebruikersmenu">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon blue">👤</span><span>Profiel</span></a>
<a class="menu-link" href="#"><span class="menu-icon green">⚙</span><span>Voorkeuren</span></a>
<a class="menu-link" href="#"><span class="menu-icon yellow">Aa</span><span>Toegankelijkheid</span></a>
<a class="menu-link" href="#"><span class="menu-icon purple" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9.5" cy="7" r="3" stroke-width="2"/><path d="M21 19v-1a4 4 0 0 0-3-3.87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 4.13a4 4 0 0 1 0 7.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span>Relaties</span></a>
<a class="menu-link" href="#"><span class="menu-icon red">!</span><span>Meld een probleem</span></a>
<a class="menu-link" href="#"><span class="menu-icon blue">↪</span><span>Uitloggen</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="wrap">
<nav class="breadcrumb-bar" aria-label="Breadcrumb">
<a href="#">Home</a>
<span>›</span>
<span>Kinderen</span>
</nav>
<section class="teacher-manage-layout" aria-label="Kinderen overzicht ouder of voogd">
<section class="teacher-manage-columns">
<div class="teacher-left-stack">
<section class="teacher-manage-hero-main">
<h1 class="teacher-manage-title">Kinderen</h1>
<p class="teacher-manage-text">Hier zie je de kinderen waarmee jouw account als ouder of voogd gekoppeld is. Vanuit dit overzicht open je snel de <strong>geschiedenis</strong> van een kind of kies je ervoor om de koppeling te <strong>ontkoppelen</strong>. Per kind zie je in de details alle beschikbare niveaus, het huidige niveau en welke docenten op dit moment gekoppeld zijn.</p>
</section>
<section class="teacher-panel">
<h2>Mijn kinderen</h2>
<p class="teacher-panel-intro">Hier vind je de kinderen die aan jouw ouder- of voogdaccount gekoppeld zijn. Per kind kun je de oefengeschiedenis openen, de belangrijkste koppelinformatie bekijken en waar nodig de relatie beëindigen.</p>
<div class="student-manage-list">
<article class="student-manage-card">
<div class="student-manage-avatar">E</div>
<div class="student-manage-main">
<div class="student-manage-head">
<h3 class="student-manage-name">Emma Jansen</h3>
</div>
<div class="student-manage-actions">
<a class="student-link" href="#">Geschiedenis</a>
<a class="student-link danger" href="#">Ontkoppelen</a>
</div>
</div>
<button class="student-manage-toggle" type="button" aria-label="Meer informatie" aria-expanded="false">⌄</button>
<div class="student-manage-extra">
<p><strong>Laatst gezien:</strong> vandaag 10:14</p>
<p><strong>Alle beschikbare niveaus:</strong> Groep 7, Rekenen plusgroep</p>
<p><strong>Huidige niveau:</strong> Groep 7</p>
<p><strong>Gekoppelde docenten:</strong> Meester Van Dijk, Juf Bakker</p>
</div>
</article>
<article class="student-manage-card">
<div class="student-manage-avatar">L</div>
<div class="student-manage-main">
<div class="student-manage-head">
<h3 class="student-manage-name">Lars de Vries</h3>
</div>
<div class="student-manage-actions">
<a class="student-link" href="#">Geschiedenis</a>
<a class="student-link danger" href="#">Ontkoppelen</a>
</div>
</div>
<button class="student-manage-toggle" type="button" aria-label="Meer informatie" aria-expanded="false">⌄</button>
<div class="student-manage-extra">
<p><strong>Laatst gezien:</strong> gisteren 19:42</p>
<p><strong>Alle beschikbare niveaus:</strong> Groep 6</p>
<p><strong>Huidige niveau:</strong> Groep 6</p>
<p><strong>Gekoppelde docenten:</strong> Juf De Boer</p>
</div>
</article>
<article class="student-manage-card">
<div class="student-manage-avatar">S</div>
<div class="student-manage-main">
<div class="student-manage-head">
<h3 class="student-manage-name">Sofia Bakker</h3>
</div>
<div class="student-manage-actions">
<a class="student-link" href="#">Geschiedenis</a>
<a class="student-link danger" href="#">Ontkoppelen</a>
</div>
</div>
<button class="student-manage-toggle" type="button" aria-label="Meer informatie" aria-expanded="false">⌄</button>
<div class="student-manage-extra">
<p><strong>Laatst gezien:</strong> vandaag 08:57</p>
<p><strong>Alle beschikbare niveaus:</strong> Klas 2026 - Groep 7</p>
<p><strong>Huidige niveau:</strong> Klas 2026 - Groep 7</p>
<p><strong>Gekoppelde docenten:</strong> Meester Visser</p>
</div>
</article>
<article class="student-manage-card">
<div class="student-manage-avatar">M</div>
<div class="student-manage-main">
<div class="student-manage-head">
<h3 class="student-manage-name">Mila van der Meer</h3>
</div>
<div class="student-manage-actions">
<a class="student-link" href="#">Geschiedenis</a>
<a class="student-link danger" href="#">Ontkoppelen</a>
</div>
</div>
<button class="student-manage-toggle" type="button" aria-label="Meer informatie" aria-expanded="false">⌄</button>
<div class="student-manage-extra">
<p><strong>Laatst gezien:</strong> vandaag 09:12</p>
<p><strong>Alle beschikbare niveaus:</strong> Groep 7, Taal ondersteuning</p>
<p><strong>Huidige niveau:</strong> Taal ondersteuning</p>
<p><strong>Gekoppelde docenten:</strong> Juf Smit, Juf Bakker</p>
</div>
</article>
</div>
</section>
</div>
<aside class="teacher-right-stack">
<section class="teacher-panel">
<h2>Goed om te weten</h2>
<div class="teacher-tip-list">
<div class="teacher-side-tip"><strong>Geschiedenis is volledig kindgericht</strong><p>Als ouder of voogd kijk je niet binnen een docentcontext, maar over alle beschikbare niveaus en resultaten van je gekoppelde kind heen.</p></div>
<div class="teacher-side-tip"><strong>Docenten kunnen per kind verschillen</strong><p>In de uitklapbare details zie je welke docenten op dit moment aan een kind gekoppeld zijn en welk niveau nu actief is.</p></div>
<div class="teacher-side-tip"><strong>Ontkoppelen is een bewuste actie</strong><p>Gebruik ontkoppelen alleen wanneer de relatie echt beëindigd moet worden. Daarbij hoort een duidelijke bevestigingsstap en een melding richting het kind.</p></div>
</div>
</section>
</aside>
</section>
</section>
</main>
<footer class="site-footer">
<div class="wrap">
<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="#">Meld een probleem</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');
}
});
});
document.querySelectorAll('.student-manage-toggle').forEach(function (button) {
button.addEventListener('click', function () {
const card = button.closest('.student-manage-card');
const open = card.classList.toggle('is-open');
button.setAttribute('aria-expanded', open ? 'true' : 'false');
});
});
})();
</script>
</body>
</html>