oefenhub_ouders_01_frontpage_V1_3.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_01_frontpage_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 - Ouder/voogd Frontpage</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;
--yellow-1: #ffd04e;
--yellow-2: #f6aa07;
--purple-1: #8d6cff;
--purple-2: #6147d8;
--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 {
min-height: 100vh;
overflow-x: hidden;
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%);
}
.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: 5;
}
.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;
}
.teacher-nav { flex-wrap: wrap; }
.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;
text-decoration: none;
}
.pill.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
.pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.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.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.menu-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.menu-icon.yellow { background: linear-gradient(180deg, #ffd45a, #f0b000); color: #8a5d00; }
.menu-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); color: #fff; }
.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;
}
.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: 24px 0 0; }
.guardian-frontpage-shell {
display: grid;
gap: 18px;
}
.guardian-intro-card,
.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: 28px;
box-shadow: var(--shadow-soft);
}
.guardian-intro-card {
padding: 22px 24px 24px;
}
.guardian-intro-card h1 {
margin: 0 0 10px;
font-size: 28px;
line-height: 1.12;
color: #0d5db8;
}
.guardian-intro-copy { display: grid; gap: 12px; }
.guardian-intro-card p {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: var(--text);
}
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.summary-card {
padding: 18px 20px;
display: grid;
gap: 16px;
min-height: 290px;
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.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: .02em; color: #5c7da4; text-transform: uppercase; }
.dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.dot.guardian { background: linear-gradient(180deg, #ffb44f, #f07f16); box-shadow: 0 0 0 4px rgba(240,127,22,.14); }
.card-title { margin: 0; font-size: 22px; line-height: 1.15; color: #0d5db8; }
.card-intro { margin: 0; font-size: 14px; line-height: 1.55; color: #5578a1; }
.context-tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.context-tag.guardian { background: rgba(240,127,22,.11); color: #b76313; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.stat-box {
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,255,.96));
border: 1px solid rgba(132,186,236,.34);
border-radius: 20px;
padding: 14px 14px 13px;
display: grid;
gap: 6px;
min-height: 136px;
}
.stat-label { font-size: 12px; font-weight: 900; letter-spacing: .02em; color: #6483a8; text-transform: uppercase; }
.stat-value { font-size: 28px; line-height: 1; font-weight: 900; color: #0d5db8; }
.stat-meta { font-size: 13px; line-height: 1.45; color: #587aa1; }
.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: 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: 980px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.guardian-intro-card { padding: 18px 18px 20px; }
.guardian-intro-card h1 { font-size: 24px; }
.stats-grid { grid-template-columns: 1fr; }
.card-head { flex-direction: column; align-items: flex-start; }
.dropdown-menu { width: 276px; }
.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 aria-label="Berichten" class="mail-btn" type="button">✉️<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">N</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="guardian-frontpage-shell">
<section class="guardian-intro-card" aria-label="Introductie ouder of voogd frontpage">
<h1>Welkom op je frontpage als ouder of voogd</h1>
<div class="guardian-intro-copy">
<p>Op deze frontpage zie je snel hoe het gaat met de kinderen die aan jouw account gekoppeld zijn. Je krijgt een korte samenvatting van hun oefenactiviteit, gekoppelde docenten en recente resultaten.</p>
<p>Wil je meer details bekijken, zoals geschiedenis per kind of instellingen rond koppelingen, dan gebruik je de menu-ingangen bovenaan de pagina.</p>
</div>
</section>
<section class="dashboard-grid" aria-label="Overzichtsblokken ouder of voogd">
<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">Bekijk hoeveel kinderen aan jouw account gekoppeld zijn, of hun niveau bekend is en of er actieve docentrelaties beschikbaar zijn.</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>
</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">Volg de recente oefenactiviteit van je gekoppelde kinderen met totalen voor afgeronde oefeningen, juiste antwoorden en momenten waarop extra hulp nodig kan zijn.</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>
</article>
</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');
}
});
});
})();
</script>
</body>
</html>