oefenhub_ouders_03_online_overzicht_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_03_online_overzicht_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 Online overzicht</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;
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: 10;
}
.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;
}
.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.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
.pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.pill.long { min-width: 104px; }
.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-link.no-arrow { grid-template-columns: auto 1fr; }
.menu-link.no-arrow .menu-arrow { display: none; }
.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; }
.menu-arrow { color: #18518f; font-size: 22px; line-height: 1; font-weight: 700; }
.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;
}
.notification-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 { padding: 22px 0 0; }
.breadcrumb-bar {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
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; }
.hero-card,
.list-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: 18px 22px 20px; margin-bottom: 18px; }
.hero-card h1 { margin: 0 0 10px; color: #0d5db8; font-size: 28px; line-height: 1.12; }
.hero-card p { margin: 0; color: #315d91; font-size: 15px; line-height: 1.62; }
.list-card { padding: 18px 20px 20px; }
.card-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.card-title-row h2 { margin: 0; color: #0d5db8; font-size: 21px; }
.section-mini-title { margin: 0 0 4px; color: #0d5db8; font-size: 16px; font-weight: 900; }
.section-context-copy { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.student-list {
display: flex;
flex-direction: column;
gap: 9px;
max-height: 620px;
overflow: auto;
padding-right: 6px;
}
.student-list::-webkit-scrollbar { width: 10px; }
.student-list::-webkit-scrollbar-thumb { background: rgba(17,79,149,.18); border-radius: 999px; }
.student-item {
border: 1px solid rgba(132,186,236,.34);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,255,.94));
border-radius: 18px;
padding: 12px 13px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.student-main { min-width: 0; }
.student-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.student-name { font-size: 16px; font-weight: 900; color: #0d5db8; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.online { background: #4fcb5f; box-shadow: 0 0 0 3px rgba(79,203,95,.18); }
.status-dot.away { background: #ffb020; box-shadow: 0 0 0 3px rgba(255,176,32,.18); }
.student-meta { margin-top: 4px; color: #5e7ca0; font-size: 13px; line-height: 1.45; }
.student-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.action-btn {
border: none;
border-radius: 14px;
padding: 10px 12px;
font-weight: 900;
font-size: 13px;
cursor: pointer;
box-shadow: var(--shadow-soft);
}
.action-btn.primary { background: linear-gradient(180deg, #1e82e4, #155daa); color: #fff; }
.action-btn.secondary { background: linear-gradient(180deg, #eef6ff, #dcecff); color: #1659a6; }
.action-btn.disabled { background: #eef2f7; color: #97a8bd; cursor: not-allowed; box-shadow: none; }
.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 0 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: 860px) {
.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; }
.nav-pills { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; width: 100%; }
.header-actions { justify-content: center; }
.student-item { grid-template-columns: 1fr; }
.student-actions { justify-content: flex-start; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
.wrap { width: min(100%, calc(100% - 18px)); }
main.wrap { padding-top: 18px; }
.hero-card h1 { font-size: 24px; }
.dropdown-menu.align-right { width: 286px; }
.site-footer > .wrap { padding: 20px 0 16px; }
.footer-bottom { justify-content: 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" type="button">👨👩👧 Kinderen</button>
<button class="pill green long" type="button">🟢 Online</button>
</div>
<div class="header-actions">
<button class="mail-btn" aria-label="Berichten">✉️<span class="notification-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 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 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><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">
<nav class="breadcrumb-bar" aria-label="Breadcrumb">
<a href="#">Home</a>
<span>›</span>
<span>Online overzicht</span>
</nav>
<section class="hero-card">
<h1>Online overzicht</h1>
<p>Bekijk welke van jouw gekoppelde kinderen nu online zijn. Wanneer een kind bezig is met een oefening, zie je direct wat er actief is en kun je vanaf hier live meekijken of de geschiedenis openen.</p>
</section>
<article class="list-card">
<div class="card-title-row">
<div>
<h2>Actieve sessies</h2>
</div>
</div>
<section id="guardianSection" aria-label="Mijn kinderen online">
<h3 class="section-mini-title">Mijn kinderen</h3>
<p class="section-context-copy">Je ziet alleen kinderen die aan jouw ouder-/voogdaccount gekoppeld zijn.</p>
<div class="student-list">
<div class="student-item">
<div class="student-main">
<div class="student-name-row"><span class="status-dot online"></span><span class="student-name">Mila de Groot</span></div>
<div class="student-meta">Mijn kind • Groep 7 – Rekenen<br>Tafels • Tafels 6 t/m 9</div>
</div>
<div class="student-actions">
<button class="action-btn primary" type="button">Kijk live mee</button>
<button class="action-btn secondary" type="button">Geschiedenis</button>
</div>
</div>
<div class="student-item">
<div class="student-main">
<div class="student-name-row"><span class="status-dot away"></span><span class="student-name">Daan de Groot</span></div>
<div class="student-meta">Mijn kind • Groep 5 – Rekenen</div>
</div>
<div class="student-actions">
<button class="action-btn disabled" type="button" disabled title="Dit kind is op dit moment niet bezig met een oefening, daarom kan er niet meegekeken worden.">Kijk live mee</button>
<button class="action-btn secondary" type="button">Geschiedenis</button>
</div>
</div>
</div>
</section>
</article>
</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');
}
});
});
})();
</script>
</body>
</html>