oefenhub_generiek_06_relaties_v1_8.html
Korte beschrijving
Deze HTML-mockup toont het generieke relatiescherm met vrienden en ouders/voogden. De gebruiker kan relaties bekijken, uitnodigingen starten en ontkoppelacties uitvoeren via bevestigingspopups.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/generiek/oefenhub_generiek_06_relaties_v1_8.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub - Relaties</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;
--green-1: #8adf67;
--green-2: #57ba3c;
--yellow-1: #ffd04e;
--shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
--shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.08);
--card-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
--card-border: 1px solid rgba(170,204,238,.62);
}
* { 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: 20;
}
.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.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.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-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-icon .stroke-current { stroke: currentColor; }
.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-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 34px; }
.breadcrumb-bar {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 14px;
font-size: 13px;
font-weight: 800;
color: rgba(17,79,149,.76);
}
.breadcrumb-bar a,
.breadcrumb-bar span { color: inherit; text-decoration: none; }
.breadcrumb-bar .current { color: #0d5db8; }
.breadcrumb-separator { color: rgba(17,79,149,.45); }
.relations-layout {
display: grid;
grid-template-columns: minmax(0, 1.22fr) 320px;
gap: 18px;
align-items: start;
}
.hero-card,
.side-card,
.relation-card {
background: var(--card-bg);
border: var(--card-border);
border-radius: 24px;
box-shadow: var(--shadow-soft);
}
.hero-card { padding: 18px 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: 820px; }
.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: rgba(255,255,255,.62);
border: 1px solid rgba(132,186,236,.42);
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; }
.side-stack { display: grid; gap: 16px; }
.side-card { padding: 18px 18px 16px; display: grid; gap: 12px; align-content: 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; }
.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; }
.relations-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
margin-top: 18px;
}
.relation-card { 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; }
.relation-card-bottom { grid-column: 1 / -1; margin-top: 18px; }
.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);
white-space: nowrap;
}
.mini-btn.orange { background: linear-gradient(180deg, #ffbe54, #ef8d1a); }
.mini-btn.blue { background: linear-gradient(180deg, #4f9fff, #1b77db); }
.relation-card-scroll { max-height: 250px; overflow: auto; padding-right: 4px; }
.relation-list { display: grid; gap: 5px; }
.relation-card-scroll::-webkit-scrollbar { width: 10px; }
.relation-card-scroll::-webkit-scrollbar-thumb { background: rgba(17,79,149,.18); border-radius: 999px; }
.relation-item {
display: grid;
grid-template-columns: auto minmax(0,1fr) auto;
gap: 4px 10px;
align-items: start;
background: linear-gradient(180deg, rgba(246,250,255,.96), rgba(235,244,255,.92));
border: 1px solid rgba(132,186,236,.42);
border-radius: 18px;
padding: 6px 13px;
}
.relation-avatar {
width: 40px;
height: 40px;
border-radius: 14px;
display: grid;
place-items: center;
color: #fff;
font-weight: 900;
font-size: 15px;
grid-row: 1 / span 2;
align-self: center;
}
.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 / 3; grid-row: 2 / 3; align-self: start; }
.relation-actions.compact { align-items: center; padding-top: 0; }
.ghost-link { border: 0; background: transparent; color: #0d5db8; font-size: 12px; font-weight: 800; cursor: pointer; padding: 4px 0; }
.ghost-link.danger { color: #cf5353; }
.relation-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 116px;
padding: 5px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
color: #0d5db8;
background: rgba(13,93,184,.08);
text-align: center;
}
.relation-badge.pending { color: #c46b00; background: rgba(255, 190, 84, .2); }
.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 / span 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; grid-row: 3 / 4; margin: 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; }
.hint-list { display: grid; gap: 10px; margin-top: 2px; }
.hint-list.horizontal { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hint-item {
background: rgba(243,248,255,.9);
border: 1px solid rgba(132,186,236,.42);
border-radius: 16px;
padding: 10px 12px;
}
.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; }
.tooltip-anchor { cursor: help; }
.site-footer {
width: 100%;
margin: 26px 0 0;
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;
}
.footer-inner { 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: 840px) {
.relations-layout { grid-template-columns: 1fr; }
.hero-meta-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 780px) {
.hero-meta-grid,
.hint-list.horizontal { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.relations-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.dropdown-menu { width: 276px; }
.dropdown-menu.align-right { width: 286px; }
}
@media (max-width: 560px) {
.relation-card-head { flex-direction: column; align-items: flex-start; }
.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; }
.mini-btn { white-space: normal; }
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row">
<div class="brand">
<div aria-label="OefenHub logo" class="brand-logo" role="img"></div>
<div class="welcome-text">Welkom terug, Emma</div>
</div>
<div class="nav-pills">
<div class="nav-item" data-menu="rekenen">
<button aria-controls="rekenen-menu" aria-expanded="false" class="pill orange has-chevron" type="button">🔢 Rekenen<span class="pill-caret">▾</span></button>
<div class="dropdown-menu" id="rekenen-menu">
<div class="menu-list">
<a class="menu-link is-active" href="#"><span class="menu-icon green">＋</span><span>Optellen</span><span class="menu-arrow">›</span></a>
<a class="menu-link" href="#"><span class="menu-icon blue">−</span><span>Aftrekken</span></a>
<a class="menu-link" href="#"><span class="menu-icon yellow">×</span><span>Vermenigvuldigen</span></a>
<a class="menu-link" href="#"><span class="menu-icon purple">÷</span><span>Delen</span></a>
</div>
</div>
</div>
<button class="pill blue">📖 Taal</button>
<button class="pill blue">🇬🇧 Engels</button>
<button class="pill yellow">✏️ Spelling</button>
<button class="pill green">🌍 Topografie</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 is-active" 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">
<nav class="breadcrumb-bar" aria-label="Breadcrumb">
<a href="#">Home</a>
<span class="breadcrumb-separator">›</span>
<a href="#">Profiel</a>
<span class="breadcrumb-separator">›</span>
<span class="current">Relaties</span>
</nav>
<div class="relations-layout">
<section class="hero-card">
<h1 class="hero-title">Relaties</h1>
<p class="hero-text">
Bekijk hier met wie je binnen OefenHub verbonden bent. Op deze pagina beheer je je <strong>vrienden</strong>,
je gekoppelde <strong>ouders/voogden</strong>, je <strong>docenten</strong> en alle <strong>openstaande uitnodigingen</strong>.
Elke relatie heeft een eigen doel: vrienden voor het delen van oefeningen en privéberichten, ouders/voogden voor begeleiding
en meekijken, en docenten voor toegang tot niveau(s) en oefeningen.
</p>
<div aria-label="Samenvatting relaties" class="hero-meta-grid">
<div class="hero-meta-item">
<strong>Vrienden</strong>
<span>Je kunt oefeningen delen en elkaar privéberichten sturen.</span>
</div>
<div class="hero-meta-item">
<strong>Ouders/voogden</strong>
<span>Zij kunnen je resultaten bekijken en live meekijken tijdens het oefenen.</span>
</div>
<div class="hero-meta-item">
<strong>Docenten</strong>
<span>Zij koppelen niveau(s) aan je account en zien alleen de resultaten van hun eigen niveau(s).</span>
</div>
</div>
</section>
<aside class="side-stack">
<section class="side-card is-collapsible" id="glance-card" style="padding:18px 18px 16px;">
<button aria-expanded="true" class="side-toggle" type="button">In één oogopslag</button>
<div class="side-collapsible-content">
<div class="summary-list">
<div class="summary-row"><span>Actieve vrienden</span><strong>3</strong></div>
<div class="summary-row"><span>Ouders/voogden</span><strong>2</strong></div>
<div class="summary-row"><span>Docenten</span><strong>2</strong></div>
<div class="summary-row"><span>Openstaande uitnodigingen</span><strong>2</strong></div>
</div>
</div>
</section>
</aside>
</div>
<div class="relations-grid">
<section class="relation-card">
<div class="relation-card-head">
<div>
<h2 class="relation-card-title">Vrienden</h2>
<p class="relation-card-sub">Leerling-leerling relaties voor het delen van oefeningen en privéberichten.</p>
</div>
<button class="mini-btn orange" type="button">+ Nodig vriend uit</button>
</div>
<div class="relation-card-scroll">
<div class="relation-list">
<article class="relation-item collapsible">
<div class="relation-avatar friend">LV</div>
<div>
<h3 class="relation-name">Luca van Rijn</h3>
</div>
<button aria-expanded="false" aria-label="Toon meer" class="relation-inline-toggle" type="button"></button>
<div class="relation-actions compact">
<button class="ghost-link">Bericht</button>
<button class="ghost-link danger">Ontkoppel</button>
</div>
<div class="relation-details">
<p class="relation-detail-line">Actief sinds 12 feb 2026</p>
<p class="relation-detail-line">Gedeelde oefeningen: 5</p>
</div>
</article>
<article class="relation-item collapsible">
<div class="relation-avatar friend">SM</div>
<div>
<h3 class="relation-name">Sara Meijer</h3>
</div>
<button aria-expanded="false" aria-label="Toon meer" class="relation-inline-toggle" type="button"></button>
<div class="relation-actions compact">
<button class="ghost-link">Bericht</button>
<button class="ghost-link danger">Ontkoppel</button>
</div>
<div class="relation-details">
<p class="relation-detail-line">Actief sinds 03 mrt 2026</p>
<p class="relation-detail-line">Gedeelde oefeningen: 2</p>
</div>
</article>
<article class="relation-item collapsible">
<div class="relation-avatar friend">TR</div>
<div>
<h3 class="relation-name">Timo Ruiter</h3>
</div>
<button aria-expanded="false" aria-label="Toon meer" class="relation-inline-toggle" type="button"></button>
<div class="relation-actions compact">
<button class="ghost-link">Bericht</button>
<button class="ghost-link danger">Ontkoppel</button>
</div>
<div class="relation-details">
<p class="relation-detail-line">Actief sinds 18 mrt 2026</p>
<p class="relation-detail-line">Gedeelde oefeningen: 0</p>
</div>
</article>
</div>
</div>
</section>
<section class="relation-card">
<div class="relation-card-head">
<div>
<h2 class="relation-card-title">Ouders / voogden</h2>
<p class="relation-card-sub">Relaties voor begeleiding, meekijken en inzicht in je geschiedenis.</p>
</div>
<button class="mini-btn blue" type="button">+ Nodig ouder/voogd uit</button>
</div>
<div class="relation-card-scroll">
<div class="relation-list">
<article class="relation-item">
<div class="relation-avatar guardian">MJ</div>
<div>
<h3 class="relation-name">Marieke Jansen</h3>
</div>
<div class="relation-actions compact">
<button class="ghost-link">Bericht</button>
<button class="ghost-link danger">Ontkoppelverzoek</button>
</div>
</article>
<article class="relation-item">
<div class="relation-avatar guardian">PJ</div>
<div>
<h3 class="relation-name">Peter Jansen</h3>
</div>
<div class="relation-actions compact">
<button class="ghost-link">Bericht</button>
<button class="ghost-link danger">Ontkoppelverzoek</button>
</div>
</article>
</div>
</div>
</section>
<section class="relation-card">
<div class="relation-card-head">
<div>
<h2 class="relation-card-title">Docenten</h2>
<p class="relation-card-sub">Docenten koppelen niveau(s) aan je account en kunnen live meekijken binnen hun eigen niveau(s).</p>
</div>
<span class="relation-badge tooltip-anchor" title="Alleen een docent kan jou als leerling uitnodigen voor een docentrelatie. Leerlingen kunnen dus geen docentrelatie starten.">Alleen docent kan uitnodigen</span>
</div>
<div class="relation-card-scroll">
<div class="relation-list">
<article class="relation-item collapsible">
<div class="relation-avatar teacher">EV</div>
<div>
<h3 class="relation-name">Eva Vermeer</h3>
</div>
<button aria-expanded="false" aria-label="Toon meer" class="relation-inline-toggle" type="button"></button>
<div class="relation-actions compact">
<button class="ghost-link">Bericht</button>
<button class="ghost-link danger">Ontkoppelverzoek</button>
</div>
<div class="relation-details">
<p class="relation-detail-line">Niveau(s): Groep 7, Rekenen-plus</p>
</div>
</article>
<article class="relation-item collapsible">
<div class="relation-avatar teacher">MD</div>
<div>
<h3 class="relation-name">Milan de Groot</h3>
</div>
<button aria-expanded="false" aria-label="Toon meer" class="relation-inline-toggle" type="button"></button>
<div class="relation-actions compact">
<button class="ghost-link">Bericht</button>
<button class="ghost-link danger">Ontkoppelverzoek</button>
</div>
<div class="relation-details">
<p class="relation-detail-line">Niveau(s): Engels 2026</p>
</div>
</article>
</div>
</div>
</section>
<section class="relation-card">
<div class="relation-card-head">
<div>
<h2 class="relation-card-title">Openstaande uitnodigingen</h2>
<p class="relation-card-sub">Nog niet geaccepteerde uitnodigingen die jij hebt verstuurd. Alleen verstuurde uitnodigingen staan hier. Inkomende vind je bij berichten.</p>
</div>
<span class="relation-badge pending">2 in afwachting</span>
</div>
<div class="relation-card-scroll">
<div class="relation-list">
<article class="relation-item">
<div class="relation-avatar pending">AK</div>
<div>
<h3 class="relation-name">Anouk Koster</h3>
<p class="relation-meta">Vriendschapsuitnodiging · Verzonden op 20 mrt 2026</p>
</div>
<div class="relation-actions compact">
<button class="ghost-link">Herinner</button>
<button class="ghost-link danger">Intrekken</button>
</div>
</article>
<article class="relation-item">
<div class="relation-avatar pending">LB</div>
<div>
<h3 class="relation-name">Lotte Bakker</h3>
<p class="relation-meta">Ouder/voogd-uitnodiging · Verzonden op 21 mrt 2026</p>
</div>
<div class="relation-actions compact">
<button class="ghost-link">Herinner</button>
<button class="ghost-link danger">Intrekken</button>
</div>
</article>
</div>
</div>
</section>
</div>
<section class="relation-card relation-card-bottom">
<div class="relation-card-head">
<div>
<h2 class="relation-card-title">Goed om te weten</h2>
<p class="relation-card-sub">Belangrijke regels rond uitnodigen, ontkoppelen en rechten binnen relaties.</p>
</div>
</div>
<div class="hint-list horizontal">
<div class="hint-item">
<strong>Relaties zijn wederzijds</strong>
<p>Een uitnodiging moet altijd door de andere partij geaccepteerd worden voordat de relatie actief wordt.</p>
</div>
<div class="hint-item">
<strong>Docenten nodig je niet zelf uit</strong>
<p>Alleen een docent kan jou als leerling uitnodigen voor een docentrelatie.</p>
</div>
<div class="hint-item">
<strong>Ontkoppelen verandert rechten</strong>
<p>Bij het verbreken van een relatie vervallen de rechten en toegang die bij die relatie horen automatisch.</p>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap 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="#">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('.relation-item.collapsible .relation-inline-toggle').forEach(function (btn) {
btn.addEventListener('click', function () {
const item = btn.closest('.relation-item');
const open = item.classList.toggle('is-open');
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
btn.setAttribute('aria-label', open ? 'Toon minder' : 'Toon meer');
});
});
const glanceCard = document.getElementById('glance-card');
const glanceToggle = glanceCard ? glanceCard.querySelector('.side-toggle') : null;
const glanceMq = window.matchMedia('(max-width: 840px)');
function syncGlanceCard(force) {
if (!glanceCard || !glanceToggle) return;
if (force === 'small') {
glanceCard.classList.add('is-collapsed');
glanceToggle.setAttribute('aria-expanded', 'false');
} else if (force === 'large') {
glanceCard.classList.remove('is-collapsed');
glanceToggle.setAttribute('aria-expanded', 'true');
}
}
if (glanceToggle) {
glanceToggle.addEventListener('click', function () {
const collapsed = glanceCard.classList.toggle('is-collapsed');
glanceToggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
});
}
syncGlanceCard(glanceMq.matches ? 'small' : 'large');
const onGlanceChange = function (e) { syncGlanceCard(e.matches ? 'small' : 'large'); };
if (glanceMq.addEventListener) glanceMq.addEventListener('change', onGlanceChange);
else if (glanceMq.addListener) glanceMq.addListener(onGlanceChange);
})();
</script>
</body>
</html>