oefenhub_generiek_05_meldingen_v1_12.html
Korte beschrijving
Deze HTML-mockup toont het generieke meldingenoverzicht met tabbladen die als statusfilters werken. De gebruiker ziet openstaande, afgehandelde of relevante meldingen en kan vanuit deze pagina een nieuwe melding maken.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/generiek/oefenhub_generiek_05_meldingen_v1_12.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub - Meldingen</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;
--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.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.no-arrow:not(.has-count) { grid-template-columns: auto 1fr; }
.menu-link.no-arrow.has-count { grid-template-columns: auto 1fr auto; }
.menu-link.no-arrow .menu-arrow { display: none; }
.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; }
.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-action-badge {
background: linear-gradient(180deg, #ffbd58, #ff9824);
box-shadow: 0 6px 14px rgba(255,153,35,.28);
}
.menu-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: linear-gradient(180deg, #ffbd58, #ff9824);
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1;
margin-left: auto;
box-shadow: 0 6px 14px rgba(255,153,35,.28);
}
.profile-nav { position: relative; }
.profile-chip {
position: relative;
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 32px; }
.breadcrumb-bar {
margin: 0 0 14px;
color: rgba(17,79,149,.82);
font-size: 13px;
font-weight: 800;
letter-spacing: .01em;
}
.breadcrumb-bar a {
color: rgba(17,79,149,.82);
text-decoration: none;
}
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-bar span { color: rgba(17,79,149,.55); margin: 0 7px; }
.breadcrumb-bar strong { color: var(--blue-4); font-weight: 900; }
.page-stack { display: grid; gap: 20px; }
.page-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 18px;
align-items: stretch;
}
.hero-card,
.action-card,
.form-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; }
.hero-title { margin: 0 0 10px; font-size: 24px; line-height: 1.15; color: var(--blue-4); }
.hero-text { margin: 0; font-size: 15px; line-height: 1.6; max-width: 880px; }
.hero-guide {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(17,79,149,.12);
}
.hero-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hero-guide-item {
background: rgba(255,255,255,.70);
border: 1px solid rgba(132, 186, 236, .40);
border-radius: 14px;
padding: 12px 14px;
}
.hero-guide-item strong { display: block; margin-bottom: 4px; color: var(--blue-4); font-size: 14px; }
.hero-guide-item p { margin: 0; font-size: 14px; color: #2f5f95; line-height: 1.45; }
.action-card {
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
background: linear-gradient(180deg, rgba(255,252,246,.98), rgba(255,246,234,.98));
border: 1px solid rgba(235,198,150,.84);
box-shadow: 0 16px 30px rgba(190,138,63,.10);
}
.action-card h2 {
margin: 0 0 8px;
font-size: 18px;
color: var(--blue-4);
}
.action-card p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #5f7ea5;
}
.action-card .btn {
width: 100%;
justify-content: center;
}
.reports-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 22px 20px;
}
.section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.section-head h2 {
margin: 0 0 6px;
font-size: 19px;
color: var(--blue-4);
}
.section-head p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #5f7ea5;
max-width: 820px;
}
.tabs {
display:flex;
align-items:flex-end;
gap:6px;
flex-wrap:wrap;
margin:0;
}
.tab-btn {
border:1px solid rgba(140,197,242,1);
border-bottom:0;
border-radius:18px 18px 0 0;
background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96));
color:#235b99;
font-weight:900;
font-size:13px;
padding:0 20px;
min-height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 -3px 12px rgba(35,100,177,.05);
}
.tab-btn.active {
background:linear-gradient(180deg,#4ea5ff,#1f79dc);
color:#fff;
border-color:#2f88ea;
}
.tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: linear-gradient(180deg, #ffbd58, #ff9824);
color: #fff;
font-size: 11px;
font-weight: 900;
line-height: 1;
margin-left: 8px;
box-shadow: 0 6px 14px rgba(255,153,35,.28);
}
.tab-btn.active .tab-count {
background: rgba(255,255,255,.24);
color: #fff;
box-shadow: none;
}
.tab-panel {
display:none;
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96));
border: 1px solid rgb(140 197 242);
border-radius: 0 22px 22px 22px;
padding: 18px;
box-shadow: var(--shadow-soft);
}
.tab-panel.active { display:block; }
.ticket-list { display: grid; gap: 12px; }
.ticket {
border-radius: 16px;
border: 1px solid rgba(170,204,238,.50);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
padding: 12px 13px;
box-shadow: var(--shadow-soft);
transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.ticket:hover {
box-shadow: 0 14px 28px rgba(35,100,177,.14);
border-color: rgba(47,143,236,.42);
background: linear-gradient(180deg, #ffffff, #eef6ff);
}
.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; }
.ticket p { margin: 0; font-size: 13px; line-height: 1.5; color: #5d7087; }
.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-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
}
.ticket-content { min-width: 0; }
.ticket-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ticket-actions .btn {
min-height: 38px;
padding: 0 14px;
border-radius: 13px;
font-size: 13px;
}
.empty-note {
border-radius: 16px;
border: 1px dashed rgba(170,204,238,.72);
background: rgba(255,255,255,.68);
padding: 14px 16px;
font-size: 13px;
line-height: 1.55;
color: #4f729b;
}
.form-card { padding: 18px 22px 20px; }
.field,
.field-full { display: grid; gap: 8px; }
.field label,
.field-full label { font-size: 13px; font-weight: 900; color: #235790; }
.field input,
.field-full textarea {
width: 100%;
border: 1px solid rgba(17,79,149,.16);
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; }
.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,.14);
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: var(--blue-4);
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.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);
display: inline-flex;
align-items: center;
}
.btn-primary { background: linear-gradient(180deg, #ffbc4b, #ff9621); color: #fff; }
.btn-secondary { background: linear-gradient(180deg, #eef6ff, #dcecff); color: var(--blue-4); }
.modal-card.modal-wide { width: min(760px, 100%); }
.modal-card .form-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.modal-card .form-actions { margin-top: 20px; }
.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: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,250,255,.99));
border-radius: 24px;
padding: 22px;
box-shadow: 0 22px 44px rgba(13, 56, 110, .22);
border: 1px solid rgba(170,204,238,.62);
}
.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: var(--blue-4); }
.modal-close { border: 0; background: #eef6ff; color: var(--blue-4); 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: 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;
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; }
.footer-col h4 { margin: 0 0 12px; font-size: 15px; color: var(--blue-4); 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 { grid-template-columns: 1fr; }
.hero-guide-grid { grid-template-columns: 1fr; }
.tabs { overflow-x: auto; padding-bottom: 2px; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
.wrap { width: min(100%, calc(100% - 18px)); }
main.wrap { padding-top: 18px; }
.hero-title { font-size: 22px; }
.hero-guide-grid { grid-template-columns: 1fr; }
.reports-card { padding: 18px; border-radius: 22px; }
.ticket-row { grid-template-columns: 1fr; }
.ticket-actions { justify-content: flex-start; }
.tab-panel { padding: 16px; }
.segmented { display: grid; grid-template-columns: 1fr; }
.dropdown-menu { width: 276px; }
.dropdown-menu.align-right { width: 286px; }
.form-actions { align-items: center; }
.btn-spacer { display: none; }
.btn-row { width: auto; }
.btn-row .btn { flex: 0 0 auto; }
}
</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, Emma</div>
</div>
<div class="nav-pills">
<div class="nav-item" data-menu="rekenenmenu">
<button class="pill orange has-chevron" type="button" aria-expanded="false" aria-controls="rekenen-menu">🔢 Rekenen<span class="pill-caret">▾</span></button>
<div class="dropdown-menu" id="rekenen-menu">
<div class="menu-list">
<a href="#" class="menu-link is-active"><span class="menu-icon green">＋</span><span>Optellen</span><span class="menu-arrow">›</span></a>
<a href="#" class="menu-link"><span class="menu-icon blue">−</span><span>Aftrekken</span><span class="menu-arrow">›</span></a>
<a href="#" class="menu-link"><span class="menu-icon yellow">×</span><span>Vermenigvuldigen</span><span class="menu-arrow">›</span></a>
<a href="#" class="menu-link"><span class="menu-icon purple">÷</span><span>Delen</span><span class="menu-arrow">›</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 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">E</span>
<span class="badge profile-action-badge" aria-label="1 melding wacht op jou">1</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">♥</span><span>Vrienden</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow has-count is-active" href="#"><span class="menu-icon red">!</span><span>Meldingen</span><span class="menu-count" aria-label="1 melding wacht op jou">1</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><a href="#">Profiel</a><span>›</span><strong>Meldingen</strong>
</nav>
<div class="page-stack">
<section class="page-hero" aria-labelledby="page-title">
<section class="hero-card">
<h1 class="hero-title" id="page-title">Meldingen</h1>
<p class="hero-text">
Hier meld je een probleem en volg je je eigen meldingen. Na het versturen ontvang je een systeembericht met een link naar je melding.
Wanneer een beheerder een extra vraag stelt of een oplossing plaatst, ontvang je opnieuw een systeembericht zodat je dezelfde melding weer kunt openen.
</p>
<div class="hero-guide">
<div class="hero-guide-grid">
<div class="hero-guide-item">
<strong>Na versturen</strong>
<p>Je melding komt in het meldingssysteem van de beheerders en wordt gekoppeld aan jouw account.</p>
</div>
<div class="hero-guide-item">
<strong>Bij extra vragen</strong>
<p>Als aanvullende informatie nodig is, krijg je een systeembericht en reageer je later binnen dezelfde melding.</p>
</div>
<div class="hero-guide-item">
<strong>Bij een oplossing</strong>
<p>Wanneer een beheerder de melding afsluit, ontvang je een systeembericht met de oplossing en eventuele heropenmogelijkheid.</p>
</div>
</div>
</div>
</section>
<aside class="action-card" aria-label="Nieuwe melding">
<div>
<h2>Nieuwe melding</h2>
<p>Maak een nieuwe melding wanneer je een technisch probleem ervaart, een inhoudelijke fout ziet of een wijziging wilt aanvragen.</p>
</div>
<button class="btn btn-primary open-new-report" type="button">Nieuwe melding maken</button>
</aside>
</section>
<section class="reports-card" aria-labelledby="my-reports-title">
<div class="section-head">
<div>
<h2 id="my-reports-title">Mijn meldingen</h2>
<p>Je ziet hier alleen je eigen meldingen. Gebruik de tabbladen om snel te wisselen tussen alle meldingen, open meldingen, meldingen die op jouw reactie wachten en gesloten meldingen.</p>
</div>
</div>
<div class="tabs" role="tablist" aria-label="Filter mijn meldingen">
<button class="tab-btn active" type="button" role="tab" aria-selected="true" aria-controls="panel-open" id="tab-open" data-tab-target="panel-open">Open</button>
<button class="tab-btn" type="button" role="tab" aria-selected="false" aria-controls="panel-wacht" id="tab-wacht" data-tab-target="panel-wacht">Wacht op mij <span class="tab-count" aria-label="1 melding wacht op jou">1</span></button>
<button class="tab-btn" type="button" role="tab" aria-selected="false" aria-controls="panel-gesloten" id="tab-gesloten" data-tab-target="panel-gesloten">Gesloten</button>
</div>
<div class="tab-panel active" id="panel-open" role="tabpanel" aria-labelledby="tab-open">
<div class="ticket-list">
<article class="ticket">
<div class="ticket-row">
<div class="ticket-content">
<div class="ticket-top">
<h4 class="ticket-title">Nieuwe melding over foutief antwoordmodel</h4>
<span class="ticket-date">20 mrt 2026</span>
</div>
<div class="ticket-meta">
<span class="chip blue">Inhoudelijke fout</span>
<span class="chip orange">Nieuw</span>
</div>
<p>Je melding is ontvangen en staat klaar om door een beheerder te worden opgepakt.</p>
</div>
<div class="ticket-actions"><button class="btn btn-secondary" type="button">Bekijk details</button></div>
</div>
</article>
<article class="ticket">
<div class="ticket-row">
<div class="ticket-content">
<div class="ticket-top">
<h4 class="ticket-title">Kleur van categorie niet aanpasbaar</h4>
<span class="ticket-date">19 mrt 2026</span>
</div>
<div class="ticket-meta">
<span class="chip orange">Wijziging aanvragen</span>
<span class="chip blue">In behandeling</span>
</div>
<p>Beheer behandelt deze melding momenteel. Zodra er een update is, ontvang je een systeembericht.</p>
</div>
<div class="ticket-actions"><button class="btn btn-secondary" type="button">Bekijk details</button></div>
</div>
</article>
<article class="ticket">
<div class="ticket-row">
<div class="ticket-content">
<div class="ticket-top">
<h4 class="ticket-title">Vraag om extra informatie bij tabletprobleem</h4>
<span class="ticket-date">18 mrt 2026</span>
</div>
<div class="ticket-meta">
<span class="chip blue">Technisch probleem</span>
<span class="chip orange">Wachten op gebruiker</span>
</div>
<p>Een beheerder wacht op aanvullende informatie van jou. Open de melding om later te reageren via de detailview.</p>
</div>
<div class="ticket-actions"><button class="btn btn-secondary" type="button">Bekijk details</button></div>
</div>
</article>
</div>
</div>
<div class="tab-panel" id="panel-wacht" role="tabpanel" aria-labelledby="tab-wacht">
<div class="ticket-list">
<article class="ticket">
<div class="ticket-row">
<div class="ticket-content">
<div class="ticket-top">
<h4 class="ticket-title">Vraag om extra informatie bij tabletprobleem</h4>
<span class="ticket-date">18 mrt 2026</span>
</div>
<div class="ticket-meta">
<span class="chip blue">Technisch probleem</span>
<span class="chip orange">Wachten op gebruiker</span>
</div>
<p>Een beheerder wacht op aanvullende informatie van jou. Open de melding om later te reageren via de detailview.</p>
</div>
<div class="ticket-actions"><button class="btn btn-secondary" type="button">Bekijk details</button></div>
</div>
</article>
</div>
</div>
<div class="tab-panel" id="panel-gesloten" role="tabpanel" aria-labelledby="tab-gesloten">
<div class="ticket-list">
<article class="ticket">
<div class="ticket-row">
<div class="ticket-content">
<div class="ticket-top">
<h4 class="ticket-title">Profielmenu opent niet op tablet</h4>
<span class="ticket-date">17 mrt 2026</span>
</div>
<div class="ticket-meta">
<span class="chip blue">Technisch probleem</span>
<span class="chip green">Gesloten</span>
<span class="chip orange">Heropenbaar t/m 24 mrt</span>
</div>
<p>Deze melding is afgesloten met een oplossing en blijft tijdelijk zichtbaar zodat je haar zo nodig nog kunt heropenen.</p>
</div>
<div class="ticket-actions"><button class="btn btn-secondary" type="button">Bekijk details</button></div>
</div>
</article>
<div class="empty-note">Ook gesloten meldingen blijven hier zichtbaar. Vanuit de detailview (05B) kan later worden getoond of heropenen nog mogelijk is.</div>
</div>
</div>
</section>
</div>
<div class="modal-overlay" id="reportModal" aria-hidden="true">
<div class="modal-card modal-wide" role="dialog" aria-modal="true" aria-labelledby="reportModalTitle">
<div class="modal-head">
<div>
<h3 id="reportModalTitle">Nieuwe melding maken</h3>
<p style="margin:8px 0 0; font-size:14px; line-height:1.55; color:#5f7ea5;">Kies een categorie, geef je melding een duidelijk onderwerp en beschrijf zo concreet mogelijk wat er gebeurde.</p>
</div>
<button class="modal-close" type="button" aria-label="Sluiten" data-close="report">×</button>
</div>
<div class="form-card">
<div class="field-full">
<label>Waar gaat het vooral om?</label>
<div class="segmented">
<input checked id="type-technisch" name="meldingstype" type="radio"/>
<label for="type-technisch">Technisch probleem</label>
<input id="type-inhoud" name="meldingstype" type="radio"/>
<label for="type-inhoud">Inhoudelijke fout</label>
<input id="type-wijziging" name="meldingstype" type="radio"/>
<label for="type-wijziging">Wijziging aanvragen</label>
<input id="type-overig" name="meldingstype" type="radio"/>
<label for="type-overig">Overig</label>
</div>
</div>
<div class="form-grid" style="margin-top: 18px;">
<div class="field">
<label for="onderwerp">Onderwerp</label>
<input id="onderwerp" type="text" value="Knop of instelling klopt niet"/>
</div>
</div>
<div class="field-full" style="margin-top: 16px;">
<label for="beschrijving">Beschrijving</label>
<textarea id="beschrijving">Ik klik op het profielmenu en wil een wijziging aanvragen. Deze instelling lijkt niet door de gebruiker zelf aangepast te kunnen worden. Graag wil ik weten of dit via een beheerder aangepast kan worden en hoe dat vervolgens zichtbaar wordt voor de gebruiker.</textarea>
<div class="hint">Tip: beschrijf kort wat je deed, wat je verwachtte en wat er gebeurde. Extra technische context wordt automatisch op de achtergrond meegenomen.</div>
</div>
<div class="form-actions">
<button class="btn btn-secondary" type="button" data-close="report">Annuleren</button>
<div class="btn-spacer"></div>
<div class="btn-row">
<button class="btn btn-primary" type="button">Verstuur melding</button>
</div>
</div>
</div>
</div>
</div>
</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="#">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');
}
});
});
const reportModal = document.getElementById('reportModal');
function openModal(modal) {
modal.classList.add('open');
modal.setAttribute('aria-hidden', 'false');
}
function closeModal(modal) {
modal.classList.remove('open');
modal.setAttribute('aria-hidden', 'true');
}
document.querySelectorAll('.open-new-report').forEach(function (button) {
button.addEventListener('click', function () {
openModal(reportModal);
});
});
document.querySelectorAll('[data-close="report"]').forEach(function (button) {
button.addEventListener('click', function () {
closeModal(reportModal);
});
});
reportModal.addEventListener('click', function (event) {
if (event.target === reportModal) closeModal(reportModal);
});
const tabs = document.querySelectorAll('.tab-btn');
const panels = document.querySelectorAll('.tab-panel');
tabs.forEach(function (tab) {
tab.addEventListener('click', function () {
const target = tab.dataset.tabTarget;
tabs.forEach(function (other) {
other.classList.remove('active');
other.setAttribute('aria-selected', 'false');
});
panels.forEach(function (panel) {
panel.classList.remove('active');
});
tab.classList.add('active');
tab.setAttribute('aria-selected', 'true');
const panel = document.getElementById(target);
if (panel) panel.classList.add('active');
});
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape' && reportModal.classList.contains('open')) {
closeModal(reportModal);
}
});
})();
</script>
</body>
</html>