oefenhub_beheerder_02_meldingen_overzicht_v1_6.html
Korte beschrijving
Mockup van het meldingenoverzicht voor beheerders binnen OefenHub. Deze pagina toont een overzicht van systeem- en platformmeldingen, zodat beheerders notificaties kunnen raadplegen, beoordelen en opvolgen.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/beheerder/oefenhub_beheerder_02_meldingen_overzicht_v1_6.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OefenHub Beheer - Meldingen 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-1: #ff8f8f;
--red-2: #df4949;
--purple-1: #8d6cff;
--purple-2: #6248d8;
--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;
}
.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;
}
.brand img { display: block; height: 46px; width: auto; }
.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;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pill:hover { transform: translateY(-1px); filter: brightness(1.02); }
.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: 312px; }
.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;
align-items: center;
gap: 9px;
padding: 9px 11px;
border-radius: 13px;
text-decoration: none;
color: #18518f;
font-size: 15px;
font-weight: 900;
box-shadow: inset 0 -1px 0 rgba(17,79,149,.10);
transition: background .18s ease, transform .18s ease;
}
.menu-link:last-child { box-shadow: none; }
.menu-link:hover,
.menu-link.is-active { background: linear-gradient(180deg, #edf5ff, #dcecff); }
.menu-link:hover { transform: translateX(2px); }
.menu-icon {
width: 23px;
height: 23px;
border-radius: 7px;
display: grid;
place-items: center;
color: #fff;
font-size: 14px;
font-weight: 900;
box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.10);
}
.menu-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.menu-icon.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.menu-icon.yellow { background: linear-gradient(180deg, #ffd45a, #f0b000); color: #8a5d00; }
.menu-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.menu-icon.red { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
.menu-icon.orange { background: linear-gradient(180deg, #ffb558, #f97e18); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 140px; }
.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;
position: relative;
}
.avatar {
width: 28px;
height: 28px;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(180deg, #ffd04d, #f4ab08);
color: #fff;
font-size: 16px;
font-weight: 900;
box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
}
.profile-badge {
position: absolute;
top: -4px;
right: -5px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: linear-gradient(180deg, #ff7878, #df3636);
color: #fff;
font-size: 11px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
box-shadow: 0 6px 12px rgba(223,54,54,.26);
}
.page-shell {
padding: 22px 0 28px;
}
.hero-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: 26px;
box-shadow: var(--shadow);
padding: 20px 24px 22px;
margin-bottom: 16px;
}
.hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.hero-text h1 {
margin: 0 0 8px;
font-size: 22px;
line-height: 1.2;
color: #0f4d91;
}
.hero-text p {
margin: 0;
max-width: 760px;
font-size: 14px;
line-height: 1.55;
color: #496d99;
}
.hero-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stat {
min-width: 160px;
background: linear-gradient(180deg, #edf6ff, #dbeeff);
border: 1px solid rgba(94, 159, 225, .22);
border-radius: 18px;
padding: 12px 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.hero-stat-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #587da9; }
.hero-stat-value { margin-top: 5px; font-size: 28px; font-weight: 900; color: #0f4d91; }
.hero-stat-sub { margin-top: 4px; font-size: 12px; color: #5f7ea5; }
.process-note {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.process-step {
border-radius: 18px;
background: linear-gradient(180deg, #fff, #f4f9ff);
border: 1px solid rgba(17,79,149,.10);
padding: 14px 14px 13px;
box-shadow: var(--shadow-soft);
}
.process-step strong { display: block; margin-bottom: 4px; font-size: 14px; }
.process-step p { margin: 0; font-size: 12px; line-height: 1.45; color: #5a7ba3; }
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.searchbox {
display: flex;
align-items: center;
gap: 10px;
min-width: min(100%, 360px);
padding: 12px 14px;
border-radius: 18px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(170,204,238,.58);
box-shadow: var(--shadow-soft);
color: var(--muted);
}
.searchbox input {
width: 100%;
border: 0;
outline: none;
font: inherit;
color: var(--text);
background: transparent;
}
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-chip {
border: 0;
border-radius: 999px;
padding: 10px 14px;
font-size: 13px;
font-weight: 800;
color: #1c5d9f;
background: rgba(255,255,255,.84);
border: 1px solid rgba(170,204,238,.56);
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.filter-chip:hover { transform: translateY(-1px); }
.filter-chip.active {
color: #fff;
border-color: transparent;
background: linear-gradient(180deg, #2f88ea, #176acc);
box-shadow: 0 8px 18px rgba(47,143,236,.26);
}
.management-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
gap: 18px;
align-items: start;
}
.column-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
border: 1px solid rgba(170,204,238,.58);
border-radius: 24px;
box-shadow: var(--shadow);
padding: 18px;
}
.column-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.column-title h2,
.column-title h3 { margin: 0; font-size: 18px; }
.column-title span { font-size: 12px; color: var(--muted); font-weight: 700; }
.ticket-list { display: grid; gap: 12px; }
.ticket-card {
position: relative;
border-radius: 20px;
border: 1px solid rgba(17,79,149,.12);
background: linear-gradient(180deg, #ffffff, #f4f9ff);
padding: 16px 16px 15px;
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ticket-card:hover,
.ticket-card.is-active {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(35,100,177,.16);
border-color: rgba(31,130,233,.38);
}
.ticket-card.is-active::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 2px rgba(31,130,233,.18);
pointer-events: none;
}
.ticket-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.ticket-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.type-pill, .state-pill, .tiny-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 0 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: .01em;
}
.type-pill.tech { background: #e3f2ff; color: #1469bf; }
.type-pill.content { background: #fff0d7; color: #a36a07; }
.type-pill.request { background: #efe8ff; color: #6542d3; }
.state-pill.open { background: #ffe3e3; color: #b24949; }
.state-pill.waiting { background: #fff4d5; color: #a47106; }
.state-pill.progress { background: #def4e7; color: #227c47; }
.tiny-pill.mine { background: #dff2ff; color: #1565b8; }
.tiny-pill.shared { background: #edf0ff; color: #4d56c7; }
.ticket-title { margin: 0 0 8px; font-size: 18px; line-height: 1.28; color: #0f4d91; }
.ticket-snippet { margin: 0 0 10px; color: #54769e; font-size: 14px; line-height: 1.5; }
.ticket-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
color: #6381a6;
font-size: 12px;
font-weight: 700;
}
.detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.detail-head h2 { margin: 0 0 5px; font-size: 21px; }
.detail-intro { margin: 0; font-size: 14px; line-height: 1.55; color: #56779f; max-width: 620px; }
.detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.status-card {
padding: 16px;
border-radius: 18px;
background: linear-gradient(180deg, #edf6ff, #dbeeff);
border: 1px solid rgba(94,159,225,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.status-card .label { font-size: 12px; color: #6081a6; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.status-card .value { margin-top: 5px; font-size: 19px; font-weight: 900; color: #0f4d91; }
.status-card .sub { margin-top: 5px; font-size: 12px; color: #6583a8; line-height: 1.45; }
.timeline {
display: grid;
gap: 10px;
margin: 16px 0;
}
.timeline-item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 10px;
align-items: start;
padding: 12px 12px 11px;
border-radius: 18px;
background: linear-gradient(180deg, #fff, #f6fbff);
border: 1px solid rgba(17,79,149,.10);
}
.timeline-icon {
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
color: #fff;
font-size: 18px;
font-weight: 900;
box-shadow: var(--shadow-soft);
}
.timeline-icon.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.timeline-icon.orange { background: linear-gradient(180deg, #ffb558, #f97e18); }
.timeline-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.timeline-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.timeline-item strong { display: block; margin-bottom: 3px; font-size: 15px; }
.timeline-item p { margin: 0; color: #58799f; font-size: 13px; line-height: 1.52; }
.action-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 16px 0 10px;
}
.action-btn {
border: 0;
border-radius: 14px;
padding: 11px 14px;
font-size: 14px;
font-weight: 900;
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.action-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }
.action-btn.primary { color: #fff; background: linear-gradient(180deg, #2f88ea, #176acc); }
.action-btn.success { color: #fff; background: linear-gradient(180deg, #79cf5b, #48a432); }
.action-btn.secondary { color: #195797; background: linear-gradient(180deg, #ffffff, #edf5ff); }
.action-btn.warn { color: #fff; background: linear-gradient(180deg, #ffb558, #f97e18); }
.note-box {
border-radius: 18px;
background: linear-gradient(180deg, #fff8e8, #fff2cf);
border: 1px solid rgba(241, 186, 74, .42);
padding: 14px 15px;
margin-top: 12px;
}
.note-box strong { display: block; margin-bottom: 4px; }
.note-box p { margin: 0; font-size: 13px; line-height: 1.5; color: #81632a; }
.summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.summary-card {
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
border: 1px solid rgba(170,204,238,.58);
box-shadow: var(--shadow-soft);
padding: 16px;
}
.summary-label { font-size: 12px; font-weight: 800; text-transform: uppercase; color: #6381a6; letter-spacing: .04em; }
.summary-value { margin-top: 6px; font-size: 24px; font-weight: 900; color: #0f4d91; }
.summary-sub { margin-top: 5px; font-size: 12px; line-height: 1.45; color: #5e7fa5; }
.site-footer {
margin-top: 22px;
padding: 24px 0 22px;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92));
border-top: 1px solid rgba(170,204,238,.62);
border-radius: 26px 26px 0 0;
box-shadow: 0 -10px 24px rgba(35,100,177,.06);
}
.footer-grid {
width: min(1220px, calc(100% - 30px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 22px;
}
.footer-col h4 { margin: 0 0 8px; font-size: 16px; color: #0f4d91; }
.footer-col p { margin: 0; color: #5d7da4; font-size: 14px; line-height: 1.55; }
.footer-links { display: flex; flex-direction: column; gap: 7px; }
.footer-links a { color: #2364a7; text-decoration: none; font-weight: 700; font-size: 14px; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom {
width: min(1220px, calc(100% - 30px));
margin: 18px auto 0;
padding-top: 14px;
border-top: 1px solid rgba(170,204,238,.56);
color: #6b86aa;
font-size: 13px;
font-weight: 700;
}
@media (max-width: 1080px) {
.management-layout,
.summary-grid,
.process-note { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.header-row { grid-template-columns: 1fr; gap: 14px; }
.brand { min-width: 0; }
.nav-pills { overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; width: 100%; }
.header-actions { justify-content: flex-start; }
.management-layout,
.detail-grid,
.summary-grid,
.process-note,
.footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.hero-card,
.column-card { padding: 16px; border-radius: 20px; }
.ticket-card { padding: 14px; }
.ticket-title { font-size: 17px; }
.action-row { flex-direction: column; }
.action-btn { width: 100%; }
}
/* v1.1 beheer updates */
.admin-header-row { grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 1fr); }
.admin-nav-pills { justify-content: center; gap: 10px; }
.admin-nav-pills .pill { padding: 10px 16px; }
.profile-nav { position: relative; }
.profile-nav .dropdown-menu { display:none; }
.profile-nav.open .dropdown-menu { display:block; opacity:1; visibility:visible; transform:translateY(0); }
.profile-chip[aria-expanded="false"] { box-shadow: 0 12px 24px rgba(35,100,177,.18); }
.profile-dropdown { min-width: 250px; }
.page-shell { padding-top: 22px; }
.admin-hero-card { padding: 20px 24px 22px; }
.admin-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.admin-hero-stats { display: grid; gap: 8px; }
.compact-stat { min-width: 0; padding: 2px 18px; }
.compact-stat .hero-stat-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.compact-stat .hero-stat-label { margin:0; }
.compact-stat .hero-stat-value { font-size: 18px; line-height: 1; padding-top: 5px; }
.compact-stat .hero-stat-sub { font-size: 11px; text-align: center; margin-top: -3px; }
.admin-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.admin-searchbox { min-width: min(100%, 250px); max-width: 280px; padding: 10px 12px; }
.admin-filter-row { flex: 1 1 520px; align-items: center; justify-content: flex-end; margin-left:auto; }
.filter-chip-right { margin-left: 0; }
.admin-management-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); }
.ticket-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; line-height: 1.45; color: #0f4d91; }
.ticket-snippet { font-size: 14px; }
.admin-detail-card { padding: 16px 18px; }
.admin-detail-head { display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:start; gap:10px; margin-bottom: 12px; }
.admin-detail-head h2 { margin:0; font-size:15px; line-height:1.4; color:#0f4d91; }
.admin-detail-tags { justify-content:flex-end; }
.detail-section { border: 1px solid rgba(17,79,149,.10); border-radius: 18px; background: linear-gradient(180deg, #fff, #f7fbff); box-shadow: var(--shadow-soft); margin-top: 10px; overflow: hidden; }
.detail-section > summary { list-style:none; cursor:pointer; padding: 12px 14px; font-weight: 900; color:#0f4d91; position: relative; }
.detail-section > summary::-webkit-details-marker { display:none; }
.detail-section > summary::after { content: "▾"; position:absolute; right:14px; top:12px; color:#5b7fa7; transition: transform .18s ease; }
.detail-section[open] > summary::after { transform: rotate(180deg); }
.detail-section-body { padding: 0 14px 14px; }
.compact-table-wrap { padding-top: 2px; }
.detail-table { width:100%; border-collapse: collapse; font-size: 13px; }
.detail-table th, .detail-table td { padding: 9px 0; border-top: 1px solid rgba(17,79,149,.08); vertical-align: top; text-align:left; }
.detail-table tr:first-child th, .detail-table tr:first-child td { border-top: 0; }
.detail-table th { width: 138px; color:#6283a8; font-weight:800; padding-right: 16px; }
.detail-table td { color:#205993; }
.subtle-link { display:inline-block; margin-top: 6px; font-size: 12px; text-decoration: none; font-weight: 800; }
.subtle-link-danger { color:#b75a5a; }
.subtle-link-success { color:#4d8f56; }
.subtle-link-assign { color:#1d6bb8; }
.inline-x { color:#cf4a4a; font-weight:900; text-decoration:none; margin-left:6px; }
.assign-stack { display:grid; gap:4px; }
.assign-person { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.subtle-link:hover { text-decoration: underline; }
.status-select { min-width: 170px; border: 1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 8px 10px; font: inherit; color:#195797; background:#fff; }
.select-field { min-width: 170px; border: 1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 8px 10px; font: inherit; color:#195797; background:#fff; width:100%; }
.forward-note { margin: 0 0 10px; font-size: 12px; color:#5f7ea5; }
.warning-text { margin-top: 8px; color:#b15a35; font-size: 12px; font-weight: 700; }
.field-label { display:block; margin-bottom:8px; color:#6283a8; font-weight:800; font-size:13px; }
.muted-inline { color:#5f7ea5; font-size:12px; }
.thread-box, .history-box { max-height: 230px; overflow: auto; display: grid; gap: 3px; padding-right: 4px; }
.thread-message { border-radius: 16px; padding: 11px 12px; border:1px solid rgba(17,79,149,.10); }
.thread-message.external { background: linear-gradient(180deg, #eef6ff, #deecff); }
.thread-message.internal { background: linear-gradient(180deg, #fff7e8, #fff1cf); }
.thread-message.from-emma { background: linear-gradient(180deg, #eef6ff, #dfeeff); }
.thread-message.from-self { background: linear-gradient(180deg, #edfbe9, #dcf4d3); }
.thread-message.from-daan { background: linear-gradient(180deg, #f3ecff, #e7dcff); }
.thread-message.from-system { background: linear-gradient(180deg, #fff3f3, #ffe0e0); }
.thread-meta { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:#6283a8; margin-bottom:6px; }
.thread-author { color:#0f4d91; }
.message-tag { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.02em; }
.message-tag.internal { background:#fff0be; color:#875d00; border:1px solid rgba(240,176,0,.35); }
.message-tag.external { background:#dcedff; color:#14579b; border:1px solid rgba(31,130,233,.24); }
.message-tag.system { background:#fff0be; color:#875d00; border:1px solid rgba(240,176,0,.35); }
.thread-message p { margin:0; font-size:13px; line-height:1.5; color:#285d96; }
.composer-box { margin-top:12px; display:grid; gap:8px; }
.message-input { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 10px 12px; font: inherit; color:#114f95; background:#fff; min-height: 42px; height: 42px; resize: vertical; }
.composer-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:8px; }
.audience-switch { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#587da9; }
.audience-switch label { display:inline-flex; align-items:center; gap:5px; padding: 7px 9px; border-radius: 999px; background: rgba(237,246,255,.9); border:1px solid rgba(170,204,238,.56); cursor:pointer; }
.compact-send { padding: 10px 12px; font-size: 13px; margin-left:auto; }
.resizable-textarea { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 14px; padding:12px; font: inherit; color:#114f95; resize: vertical; min-height: 42px; }
.solution-input { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 14px; padding:12px; font: inherit; color:#114f95; resize: vertical; min-height: 98px; }
.solution-hint { margin: 8px 0 10px; font-size: 12px; color:#6786aa; }
.solution-status { margin: 10px 0 12px; display:grid; gap:7px; }
.solution-status-title { font-size:12px; font-weight:800; color:#5a7ea8; }
.radio-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:7px 10px; }
.radio-option { display:flex; align-items:flex-start; gap:8px; padding:0; border:none; border-radius:0; background:transparent; font-size:12px; font-weight:700; color:#285d96; }
.solution-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.solution-close { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#456f9b; }
.solution-send { padding: 10px 14px; margin-left:auto; }
.history-item { display: grid; grid-template-columns: 1fr; gap: 2px; align-items: start; padding: 3px 0; border-top: 1px solid rgba(17, 79, 149, .08); font-size: 13px; color: #285d96; }
.history-item:first-child { border-top:0; }
.history-meta { color:#6283a8; font-size:12px; }
.history-meta strong { color:#0f4d91; margin-left:8px; }
.history-action { color:#285d96; }
.summary-grid, .process-note, .action-row, .detail-grid, .detail-intro { display:none !important; }
.site-footer { margin-top: 22px; padding: 24px 0 22px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92)); border-top: 1px solid rgba(170,204,238,.62); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 24px rgba(35,100,177,.06); }
.footer-grid { width: min(1220px, calc(100% - 30px)); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; }
.footer-col h4 { margin: 0 0 8px; font-size: 16px; color: #0f4d91; }
.footer-col p { margin: 0; color: #5d7da4; font-size: 14px; line-height: 1.55; }
.footer-links { display: flex; flex-direction: column; gap: 7px; }
.footer-links a { color: #2364a7; text-decoration: none; font-weight: 700; font-size: 14px; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { width: min(1220px, calc(100% - 30px)); margin: 18px auto 0; padding-top: 14px; border-top: 1px solid rgba(170,204,238,.56); color: #6b86aa; font-size: 13px; font-weight: 700; }
@media (max-width: 1080px) {
.admin-management-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.admin-header-row { grid-template-columns: 1fr; }
.admin-nav-pills { justify-content: flex-start; overflow-x: auto; }
.admin-hero-top { grid-template-columns: 1fr; }
.admin-filter-row { flex-basis: 100%; }
.filter-chip-right { margin-left: 0; }
.admin-detail-head { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.detail-table th, .detail-table td { display:block; width:100%; }
.detail-table th { padding-bottom: 3px; }
.history-item { grid-template-columns: 1fr; gap: 3px; }
.composer-actions { align-items: stretch; }
.compact-send { width: 100%; }
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row admin-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 aria-label="Beheernavigatie" class="nav-pills admin-nav-pills">
<button class="pill blue" type="button">Site instellingen</button>
<button class="pill orange" type="button">Categorieën beheren</button>
<button class="pill green" type="button">Accounts beheren</button>
</div>
<div class="header-actions">
<button aria-label="Berichten" class="mail-btn">✉️<span class="badge">3</span></button>
<div class="profile-nav">
<button aria-expanded="true" aria-label="Profiel" class="profile-chip" type="button">
<span class="avatar">N</span>
<span class="profile-badge">2</span>
</button>
<div class="dropdown-menu align-right profile-dropdown">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon green">👤</span><span>Profiel</span></a>
<a class="menu-link" href="#"><span class="menu-icon blue">⚙</span><span>Voorkeuren</span></a>
<a class="menu-link" href="#"><span class="menu-icon yellow">♿</span><span>Toegankelijkheid</span></a>
<a class="menu-link" href="#"><span class="menu-icon purple">👥</span><span>Vrienden</span></a>
<a class="menu-link is-active" href="#"><span class="menu-icon orange">!</span><span>Meldingen (2)</span></a>
<a class="menu-link" href="#"><span class="menu-icon red">↩</span><span>Uitloggen</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="wrap page-shell">
<section class="hero-card admin-hero-card">
<div class="hero-top admin-hero-top">
<div class="hero-text">
<h1>Meldingen</h1>
<p>Bekijk hier de meldingen die via <strong>Meld een probleem</strong> zijn binnengekomen. Je kunt nieuwe meldingen beoordelen, beheerders koppelen of ontkoppelen, extra informatie uitvragen en een oplossing of doorzetting naar een docent voorbereiden.</p>
</div>
<div class="hero-tags admin-hero-stats">
<div class="hero-stat compact-stat">
<div class="hero-stat-header"><div class="hero-stat-label">Open meldingen</div><div class="hero-stat-value">2</div></div>
<div class="hero-stat-sub">Nog niet gesloten</div>
</div>
<div class="hero-stat compact-stat">
<div class="hero-stat-header"><div class="hero-stat-label">Aan mij toegewezen</div><div class="hero-stat-value">1</div></div>
<div class="hero-stat-sub">Actief in behandeling</div>
</div>
</div>
</div>
</section>
<div class="toolbar admin-toolbar">
<label aria-label="Zoek in meldingen" class="searchbox admin-searchbox">
<span>🔎</span>
<input placeholder="Zoek op meldingsnummer, categorie of discussie" type="text"/>
</label>
<div aria-label="Filters meldingen" class="chip-row admin-filter-row">
<button class="filter-chip active" type="button">Nieuw</button>
<button class="filter-chip" type="button">Wacht op gebruiker</button>
<button class="filter-chip" type="button">Aan mij toegewezen</button>
<button class="filter-chip" type="button">Alles</button>
<button class="filter-chip filter-chip-right" type="button">Gesloten</button>
</div>
</div>
<section class="management-layout admin-management-layout">
<div class="column-card">
<div class="column-title">
<h2>Meldingenoverzicht</h2>
<span>2 open meldingen</span>
</div>
<div class="ticket-list">
<article aria-label="Open melding: Optellen op niveau 4 toont verkeerde feedback" class="ticket-card is-active" role="button" tabindex="0">
<div class="ticket-meta">
<div class="ticket-tags">
<span class="type-pill content">Inhoudelijke fout</span>
<span class="state-pill progress">In behandeling</span>
<span class="tiny-pill mine">Aan mij</span>
</div>
<span class="ticket-foot">#MP-2026-041</span>
</div>
<h3 class="ticket-title">Optellen op niveau 4 toont verkeerde feedback na juist antwoord</h3>
<p class="ticket-snippet">Gemeld door Emma Jansen. De gebruiker verwacht een juiste beoordeling, maar krijgt na een correct antwoord toch foutfeedback te zien.</p>
<div class="ticket-foot">
<span>20 mrt 2026</span>
<span>1 reactie nieuw</span>
</div>
</article>
<article aria-label="Open melding: Kleur van categorie kan niet gewijzigd worden" class="ticket-card" role="button" tabindex="0">
<div class="ticket-meta">
<div class="ticket-tags">
<span class="type-pill request">Wijziging aanvragen</span>
<span class="state-pill open">Nieuw</span>
</div>
<span class="ticket-foot">#MP-2026-042</span>
</div>
<h3 class="ticket-title">Kleur van categorie kan niet gewijzigd worden na aanmaken</h3>
<p class="ticket-snippet">Gemeld door Jochem van Loon. De gebruiker verwacht deze instelling nog zelf te kunnen aanpassen, maar dat lukt niet.</p>
<div class="ticket-foot">
<span>19 mrt 2026</span>
<span>Nog niet toegewezen</span>
</div>
</article>
</div>
</div>
<aside aria-label="Meldingsdetails" class="column-card admin-detail-card">
<div class="detail-head admin-detail-head">
<h2>#MP-2026-041</h2>
<div class="ticket-tags admin-detail-tags">
<span class="type-pill content">Inhoudelijke fout</span>
<span class="state-pill progress">In behandeling</span>
</div>
</div>
<details class="detail-section" open="">
<summary>Kerngegevens</summary>
<div class="detail-section-body compact-table-wrap">
<table class="detail-table">
<tbody>
<tr><th>Gemeld door</th><td>Emma Jansen</td></tr>
<tr><th>Gemeld op</th><td>20 mrt 2026 · 09:14</td></tr>
<tr><th>Categorie</th><td>Inhoudelijke fout</td></tr>
<tr>
<th>Toegewezen aan</th>
<td>
<div class="assign-stack">
<div class="assign-person">Noor van Dijk</div>
<div class="assign-person">Daan Vermeer <a aria-label="Ontkoppel Daan Vermeer" class="inline-x" href="#">[X]</a></div>
<div><a class="subtle-link subtle-link-danger" href="#">Ontkoppel mij</a> <span class="muted-inline">·</span> <a class="subtle-link subtle-link-assign" href="#">Wijs aan iemand toe</a></div>
</div>
</td>
</tr>
<tr>
<th>Status</th>
<td>
<select aria-label="Status melding" class="status-select">
<option selected="">In behandeling</option>
<option>Wachten op gebruiker</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</details>
<details class="detail-section" open="">
<summary>Melding</summary>
<div class="detail-section-body compact-table-wrap">
<table class="detail-table">
<tbody>
<tr><th>Onderwerp</th><td>Optellen op niveau 4 toont verkeerde feedback na juist antwoord</td></tr>
<tr><th>Beschrijving</th><td>Bij twee sommen achter elkaar kreeg ik na een goed antwoord toch de rode foutmelding te zien. De leerling raakt hierdoor in de war en denkt dat het antwoord fout is, terwijl de uitkomst klopt.</td></tr>
</tbody>
</table>
</div>
</details>
<details class="detail-section">
<summary>Discussie</summary>
<div class="detail-section-body">
<div class="thread-box">
<div class="thread-message external from-emma">
<div class="thread-meta"><strong class="thread-author">Emma Jansen</strong><span><span class="message-tag external">Extern</span> 20 mrt 2026 · 09:14</span></div>
<p>Ik zie dit probleem bij optellen in niveau 4. Het lijkt alsof de feedbacktekst niet klopt na een goed antwoord.</p>
</div>
<div class="thread-message internal from-self">
<div class="thread-meta"><strong class="thread-author">Jij</strong><span><span class="message-tag internal">Intern</span> 20 mrt 2026 · 09:28</span></div>
<p>Waarschijnlijk mismatch tussen feedbackstatus en antwoordvalidatie. Nader controleren in module-instellingen.</p>
</div>
<div class="thread-message internal from-daan">
<div class="thread-meta"><strong class="thread-author">Daan Vermeer</strong><span><span class="message-tag internal">Intern</span> 20 mrt 2026 · 09:31</span></div>
<p>Ik zie hetzelfde in de logs bij de laatste deploy. Mogelijk alleen bij niveau 4.</p>
</div>
<div class="thread-message internal from-system">
<div class="thread-meta"><strong class="thread-author">Systeem</strong><span><span class="message-tag internal">Intern</span> 20 mrt 2026 · 09:33</span></div>
<p>Jij hebt Daan Vermeer gekoppeld aan deze melding met als toelichting: Controleer mee op module-instellingen en recente deploys.</p>
</div>
</div>
<div class="composer-box">
<textarea class="message-input" placeholder="Plaats een bericht in de discussie" rows="1"></textarea>
<div class="composer-actions">
<div aria-label="Doelgroep bericht" class="audience-switch" role="radiogroup">
<label title="De berichten zijn alleen zichtbaar voor beheerder"><input checked="" name="audience" type="radio"/> Intern</label>
<label title="Dit bericht zal naar de gebruiker die de melding gemaakt heeft gestuurd worden."><input name="audience" type="radio"/> Extern</label>
</div>
<button class="action-btn primary compact-send" type="button">Verstuur</button>
</div>
</div>
</div>
</details>
<details class="detail-section">
<summary>Oplossing</summary>
<div class="detail-section-body">
<textarea class="solution-input" placeholder="Typ hier de oplossing die naar de gebruiker verstuurd wordt." rows="4"></textarea>
<div class="solution-status">
<div class="solution-status-title">Afsluitstatus</div>
<div class="radio-grid">
<label class="radio-option"><input checked="" name="resolve-status" type="radio"/> Technisch opgelost</label>
<label class="radio-option"><input name="resolve-status" type="radio"/> Workaround voorgesteld</label>
<label class="radio-option"><input name="resolve-status" type="radio"/> Niet reproduceerbaar</label>
<label class="radio-option"><input name="resolve-status" type="radio"/> Functioneel verwacht gedrag</label>
<label class="radio-option"><input name="resolve-status" type="radio"/> Overige maar opgelost</label>
<label class="radio-option"><input name="resolve-status" type="radio"/> Overige maar niet opgelost</label>
<label class="radio-option"><input name="resolve-status" type="radio"/> Module configuratie</label>
</div>
</div>
<div class="solution-hint">Na het versturen kan de gebruiker nog 7 dagen reageren als het probleem toch niet opgelost blijkt.</div>
<div class="solution-actions">
<label class="solution-close"><input type="checkbox"/> Sluit melding</label>
<button class="action-btn success solution-send" type="button">Verstuur oplossing</button>
</div>
</div>
</details>
<details class="detail-section">
<summary>Doorzetten naar docent</summary>
<div class="detail-section-body">
<p class="forward-note">Als blijkt dat het om een inhoudelijke kwestie gaat, welke door een docent geconfigureerd is, kunnen we de docent op deze manier op de hoogte brengen. Het onderwerp en beschrijving van deze melding worden automatisch bijgevoegd!</p>
<label class="field-label" for="teacher-select">Selecteer docent</label>
<select class="select-field" id="teacher-select">
<option selected="">Kies een docent</option>
<option>Marieke Smit</option>
<option>Bram de Jong</option>
<option>Fatima El Idrissi</option>
</select>
<div class="warning-text">Let op: Weet je zeker dat deze docent verantwoordelijk was voor deze oefening en dat dit niet een gedeelde oefening betreft?!</div>
<label class="field-label" for="teacher-note" style="margin-top:12px;">Begeleidende toelichting:</label>
<textarea class="resizable-textarea" id="teacher-note" placeholder="Typ hier je toelichting aan de docent." rows="2"></textarea>
<div class="solution-actions">
<div class="muted-inline">Deze actie sluit de melding automatisch met afsluitstatus <strong>Module configuratie</strong>.</div>
<button class="action-btn warn solution-send" type="button">Sluit en zet door naar docent</button>
</div>
</div>
</details>
<details class="detail-section">
<summary>Geavanceerd</summary>
<div class="detail-section-body compact-table-wrap">
<table class="detail-table">
<tbody>
<tr><th>Laatst gezien</th><td>20 mrt 2026 · 09:12</td></tr>
<tr><th>Browser</th><td>Chrome 134 op Windows 11</td></tr>
<tr><th>Meldingpagina</th><td>Rekenen › Optellen › Niveau 4</td></tr>
<tr><th>IP adres</th><td>145.92.***.***</td></tr>
<tr><th>Rollen van gebruiker</th><td>Leerling</td></tr>
<tr><th>Apparaattype</th><td>Desktop</td></tr>
<tr><th>Schermresolutie</th><td>1920 × 1080</td></tr>
<tr><th>Sessiereferentie</th><td>SES-7FA2-41D9</td></tr>
<tr><th>Moduleversie</th><td>OptellenModule v1.8.2</td></tr>
</tbody>
</table>
</div>
</details>
<details class="detail-section">
<summary>Geschiedenis</summary>
<div class="detail-section-body">
<div class="history-box">
<div class="history-item"><div class="history-meta"><span>20 mrt 2026 · 09:14</span><strong>Emma Jansen</strong></div><div class="history-action">heeft deze melding gemaakt</div></div>
<div class="history-item"><div class="history-meta"><span>20 mrt 2026 · 09:19</span><strong>Noor van Dijk</strong></div><div class="history-action">heeft zichzelf toegewezen aan de melding</div></div>
<div class="history-item"><div class="history-meta"><span>20 mrt 2026 · 09:20</span><strong>Noor van Dijk</strong></div><div class="history-action">heeft de status op ‘In behandeling’ gezet</div></div>
<div class="history-item"><div class="history-meta"><span>20 mrt 2026 · 09:28</span><strong>Noor van Dijk</strong></div><div class="history-action">heeft een intern discussiebericht gestuurd</div></div>
<div class="history-item"><div class="history-meta"><span>20 mrt 2026 · 09:31</span><strong>Daan Vermeer</strong></div><div class="history-action">heeft een intern discussiebericht gestuurd</div></div>
<div class="history-item"><div class="history-meta"><span>20 mrt 2026 · 09:33</span><strong>Noor van Dijk</strong></div><div class="history-action">heeft beheerder Daan Vermeer gekoppeld</div></div>
<div class="history-item"><div class="history-meta"><span>20 mrt 2026 · 09:34</span><strong>Systeem</strong></div><div class="history-action">heeft een taak ingepland voor definitieve sluiting zodra de melding wordt gesloten</div></div>
</div>
</div>
</details>
</aside>
</section>
<footer class="site-footer">
<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>
</footer>
</main>
<script>
(function () {
const profileNav = document.querySelector('.profile-nav');
const profileBtn = profileNav?.querySelector('.profile-chip');
if (profileNav && profileBtn) {
const setOpen = function (open) {
profileNav.classList.toggle('open', open);
profileBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
};
setOpen(true);
profileBtn.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
setOpen(!profileNav.classList.contains('open'));
});
document.addEventListener('click', function (event) {
if (!profileNav.contains(event.target)) {
setOpen(false);
}
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
setOpen(false);
}
});
}
})();
</script></body>
</html>