oefenhub_generiek_05b_melding_details_v1_7.html
Korte beschrijving
Deze HTML-mockup toont de detailpagina van één melding met afzonderlijke tabbladen voor melding, oplossing en discussie. De view ondersteunt het volgen van status, beheerreacties, oplossingsinformatie en aanvullende discussie binnen dezelfde meldingcontext.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/generiek/oefenhub_generiek_05b_melding_details_v1_7.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 - details</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; }
.single-report-block {
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-soft);
padding: 20px 22px 22px;
margin-bottom: 30px;
}
.report-detail-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
padding-bottom: 16px;
}
.report-detail-title {
margin: 0 0 8px;
color: var(--blue-4);
font-size: 24px;
line-height: 1.18;
}
.report-ref { color: #235b99; font-weight: 900; }
.status-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 14px;
color: #456f9e;
font-weight: 800;
}
.status-line .status-value {
font-weight: 400;
}
.status-pill {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
}
.status-pill.waiting { background: #fff0d8; color: #c27209; }
.status-pill.open { background: #dceeff; color: #216ab9; }
.status-pill.resolved { background: #e3f7ea; color: #23804a; }
.status-pill.closed { background: #ebeff7; color: #617596; }
.status-separator {
color: rgba(17,79,149,.34);
font-weight: 900;
}
.btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: 15px;
border: 0;
background: linear-gradient(180deg, #ff8f8f, #e35757);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 900;
text-decoration: none;
cursor: pointer;
box-shadow: 0 10px 22px rgba(198,74,74,.16);
white-space: nowrap;
}
.report-tabs {
display: flex;
align-items: flex-end;
gap: 6px;
flex-wrap: wrap;
margin: 0;
}
.report-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;
gap: 8px;
cursor: pointer;
box-shadow: 0 -3px 12px rgba(35,100,177,.05);
}
.report-tab-btn.active {
background: linear-gradient(180deg,#4ea5ff,#1f79dc);
color: #fff;
border-color: #2f88ea;
}
.tab-attention {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
background: linear-gradient(180deg, #ffbd58, #ff9824);
color: #fff;
font-size: 12px;
font-weight: 900;
line-height: 1;
box-shadow: 0 6px 14px rgba(255,153,35,.28);
}
.report-tab-btn.active .tab-attention {
background: rgba(255,255,255,.24);
box-shadow: none;
}
.report-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);
}
.report-tab-panel.active { display: block; }
.panel-title-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.panel-title-row h2 {
margin: 0 0 6px;
color: var(--blue-4);
font-size: 19px;
}
.panel-title-row p {
margin: 0;
color: #5f7ea5;
font-size: 14px;
line-height: 1.55;
max-width: 820px;
}
.report-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.report-info-card,
.discussion-card,
.solution-state-card {
border: 1px solid rgba(170,204,238,.50);
border-radius: 16px;
background: rgba(255,255,255,.76);
padding: 12px 14px;
}
.report-info-card.full { grid-column: 1 / -1; }
.report-info-card span,
.solution-state-card span {
display: block;
margin-bottom: 5px;
color: #6b86aa;
font-size: 12px;
font-weight: 900;
}
.report-info-card strong,
.report-info-card div,
.solution-state-card strong,
.solution-state-card div {
color: #264e80;
font-size: 14px;
line-height: 1.55;
}
.panel-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(17,79,149,.10);
}
.btn-soft-danger {
background: linear-gradient(180deg, #fff0ef, #ffdada);
color: #b74d4d;
border: 1px solid rgba(210,94,94,.26);
}
.discussion-action-strip {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin-bottom: 12px;
}
.discussion-action-badge {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
background: rgba(255,240,216,.78);
border: 1px solid rgba(255,189,88,.42);
color: #b56708;
font-size: 13px;
font-weight: 900;
}
.discussion-action-badge .tab-attention {
width: 18px;
height: 18px;
font-size: 11px;
box-shadow: none;
}
.discussion-scroll {
max-height: 300px;
overflow: auto;
padding-right: 6px;
}
.discussion-scroll::-webkit-scrollbar { width: 10px; }
.discussion-scroll::-webkit-scrollbar-thumb { background: rgba(17,79,149,.18); border-radius: 999px; }
.discussion-list { display: grid; gap: 12px; }
.discussion-card.highlight {
background: linear-gradient(180deg, rgba(255,251,244,.98), rgba(255,246,236,.96));
border-color: rgba(235,198,150,.72);
}
.discussion-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.discussion-author {
display: inline-flex;
align-items: center;
gap: 8px;
color: #1f4d84;
font-size: 13px;
font-weight: 900;
}
.discussion-avatar {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #fff;
font-size: 12px;
font-weight: 900;
background: linear-gradient(180deg, #ffbc4b, #ff9621);
}
.discussion-avatar.user { background: linear-gradient(180deg, #4ea5ff, #1f79dc); }
.discussion-date {
color: #6b86aa;
font-size: 12px;
font-weight: 800;
}
.discussion-card p {
margin: 0;
color: #5f7ea5;
font-size: 14px;
line-height: 1.6;
}
.reply-box {
margin-top: 16px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(170,154,226,.48);
background: linear-gradient(180deg, rgba(248,245,255,.97), rgba(241,236,255,.95));
box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.reply-box label,
.modal-card label {
display: block;
margin-bottom: 8px;
color: #235790;
font-size: 13px;
font-weight: 900;
}
.reply-box textarea,
.modal-card textarea {
width: 100%;
min-height: 128px;
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);
resize: vertical;
}
.required-note {
margin-top: 8px;
color: #6d88aa;
font-size: 12px;
line-height: 1.45;
}
.solution-status { display: grid; gap: 12px; }
.solution-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.solution-state-card.is-empty {
border-style: dashed;
background: rgba(255,255,255,.58);
}
.solution-action-grid {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 12px;
align-items: center;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(17,79,149,.10);
}
.solution-action-grid p {
margin: 0;
color: #5f7ea5;
font-size: 13px;
line-height: 1.5;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(17,79,149,.10);
}
.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; }
.solution-meta-grid { grid-template-columns: 1fr; }
.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; }
}
@media (max-width: 820px) {
.report-detail-head,
.report-info-grid,
.solution-action-grid { grid-template-columns: 1fr; }
.btn-danger { width: 100%; }
.report-tabs { overflow-x: auto; padding-bottom: 2px; flex-wrap: nowrap; }
.report-tab-btn { flex: 0 0 auto; }
.panel-actions,
.modal-actions { justify-content: flex-start; }
.panel-actions .btn,
.modal-actions .btn { width: 100%; justify-content: center; }
}
</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><a href="#">Meldingen</a><span>›</span><strong>Melding details</strong>
</nav>
<section class="single-report-block" aria-labelledby="page-title">
<div class="report-detail-head">
<div>
<h1 class="report-detail-title" id="page-title"><span class="report-ref">MEL-2026-041</span> - Profielmenu opent niet op tablet</h1>
<div class="status-line">Status: <span class="status-pill waiting">Wachten op reactie</span><span class="status-separator">·</span>Laatst bijgewerkt: <span class="status-value">18 maart 2026 · 13:42</span></div>
</div>
<a class="btn-danger" href="#">Terug naar overzicht</a>
</div>
<div class="report-tabs" role="tablist" aria-label="Melding details">
<button class="report-tab-btn" type="button" role="tab" aria-selected="false" aria-controls="tab-melding" id="tab-btn-melding" data-tab-target="tab-melding">Melding</button>
<button class="report-tab-btn" type="button" role="tab" aria-selected="false" aria-controls="tab-oplossing" id="tab-btn-oplossing" data-tab-target="tab-oplossing">Oplossing</button>
<button class="report-tab-btn active" type="button" role="tab" aria-selected="true" aria-controls="tab-discussie" id="tab-btn-discussie" data-tab-target="tab-discussie">Discussie <span class="tab-attention" title="We wachten op een reactie van jou" aria-label="We wachten op een reactie van jou">!</span></button>
</div>
<section class="report-tab-panel" id="tab-melding" role="tabpanel" aria-labelledby="tab-btn-melding">
<div class="panel-title-row">
<div>
<h2>Melding</h2>
<p>De oorspronkelijke melding zoals deze door de gebruiker is aangemaakt.</p>
</div>
</div>
<div class="report-info-grid">
<div class="report-info-card">
<span>Datum aangemaakt</span>
<strong>18 maart 2026 · 09:14</strong>
</div>
<div class="report-info-card">
<span>Categorie</span>
<strong>Technisch probleem</strong>
</div>
<div class="report-info-card full">
<span>Meldingsomschrijving</span>
<div>Op mijn tablet lukt het niet om het profielmenu te openen. Op desktop werkt dit wel. Ik gebruik Safari op een iPad mini. Het probleem treedt op zodra ik op het profielicoon tik; het menu verschijnt dan niet of klapt direct weer dicht.</div>
</div>
</div>
<div class="panel-actions">
<button class="btn btn-soft-danger" type="button" data-modal-open="closeModal">Melding sluiten</button>
</div>
</section>
<section class="report-tab-panel" id="tab-oplossing" role="tabpanel" aria-labelledby="tab-btn-oplossing">
<div class="solution-status">
<div class="solution-state-card is-empty">
<span>Huidige situatie</span>
<strong>Nog geen oplossing geplaatst</strong>
<div style="margin-top: 6px;">Deze melding staat op <strong>wachten op reactie</strong>. De beheerder heeft aanvullende informatie gevraagd voordat er een oplossing kan worden geplaatst.</div>
</div>
<div class="solution-meta-grid">
<div class="solution-state-card">
<span>Datum opgelost</span>
<strong>Nog niet opgelost</strong>
</div>
<div class="solution-state-card">
<span>Afsluitstatus</span>
<strong>Nog niet beschikbaar</strong>
<div style="margin-top: 6px;">Code en beschrijving verschijnen na oplossen.</div>
</div>
<div class="solution-state-card">
<span>Meldingstatus</span>
<strong>Wachten op reactie</strong>
</div>
<div class="solution-state-card">
<span>Heropenbaar tot</span>
<strong>Nog niet van toepassing</strong>
<div style="margin-top: 6px;">Wordt zichtbaar na sluiten.</div>
</div>
</div>
<div class="solution-state-card is-empty">
<span>Oplossingstekst</span>
<div>Er is nog geen oplossingstekst geplaatst. Zolang deze melding in behandeling is of op reactie wacht, blijft dit onderdeel alleen informatief.</div>
</div>
<div class="solution-action-grid">
<p>De acties voor heropenen en accepteren zijn pas beschikbaar zodra er daadwerkelijk een oplossing is geplaatst.</p>
<div class="panel-actions" style="margin:0; padding:0; border:0;">
<button class="btn btn-secondary" type="button" disabled>Oplossing accepteren</button>
<button class="btn btn-primary" type="button" disabled>Heropen melding</button>
</div>
</div>
</div>
</section>
<section class="report-tab-panel active" id="tab-discussie" role="tabpanel" aria-labelledby="tab-btn-discussie">
<div class="discussion-action-strip">
<span class="discussion-action-badge"><span class="tab-attention" aria-hidden="true">!</span>Reactie gevraagd</span>
</div>
<div class="discussion-scroll" aria-label="Discussieberichten">
<div class="discussion-list">
<article class="discussion-card">
<div class="discussion-head">
<div class="discussion-author"><span class="discussion-avatar">B</span>Beheerder</div>
<div class="discussion-date">18 maart 2026 · 11:38</div>
</div>
<p>Bedankt voor je melding. We onderzoeken of het probleem samenhangt met het openen van het profielmenu op kleinere tablets.</p>
</article>
<article class="discussion-card highlight">
<div class="discussion-head">
<div class="discussion-author"><span class="discussion-avatar">B</span>Beheerder</div>
<div class="discussion-date">18 maart 2026 · 13:42</div>
</div>
<p>Kun je aangeven op welk apparaat en in welke browser dit gebeurt? Als het kan, omschrijf ook of het profielmenu helemaal niet opent of juist meteen weer sluit nadat je erop tikt.</p>
</article>
</div>
</div>
<div class="reply-box">
<label for="discussionReply">Reactie toevoegen</label>
<textarea id="discussionReply">Ik gebruik een iPad mini met Safari. Het profielmenu opent heel kort en verdwijnt daarna direct weer. Op laptop en desktop zie ik het probleem niet.</textarea>
<div class="required-note">Reacties worden direct opgeslagen binnen deze melding. Er is geen conceptfunctie.</div>
<div class="panel-actions">
<button class="btn btn-primary" type="button">Reactie opslaan</button>
</div>
</div>
</section>
</section>
<div class="modal-overlay" id="closeModal" aria-hidden="true">
<div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="closeModalTitle">
<div class="modal-head">
<div>
<h3 id="closeModalTitle">Melding sluiten</h3>
<p style="margin:8px 0 0; font-size:14px; line-height:1.55; color:#5f7ea5;">Geef verplicht aan waarom je deze melding wilt sluiten.</p>
</div>
<button class="modal-close" type="button" aria-label="Sluiten" data-modal-close="closeModal">×</button>
</div>
<label for="closeReason">Reden van sluiten</label>
<textarea id="closeReason" required placeholder="Beschrijf waarom deze melding gesloten kan worden."></textarea>
<div class="modal-actions">
<button class="btn btn-secondary" type="button" data-modal-close="closeModal">Annuleren</button>
<button class="btn btn-soft-danger" type="button">Melding sluiten</button>
</div>
</div>
</div>
<div class="modal-overlay" id="reopenModal" aria-hidden="true">
<div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="reopenModalTitle">
<div class="modal-head">
<div>
<h3 id="reopenModalTitle">Melding heropenen</h3>
<p style="margin:8px 0 0; font-size:14px; line-height:1.55; color:#5f7ea5;">Leg verplicht uit waarom de oplossing nog niet voldoende is.</p>
</div>
<button class="modal-close" type="button" aria-label="Sluiten" data-modal-close="reopenModal">×</button>
</div>
<label for="reopenReason">Toelichting bij heropenen</label>
<textarea id="reopenReason" required placeholder="Beschrijf waarom het probleem nog steeds speelt."></textarea>
<div class="modal-actions">
<button class="btn btn-secondary" type="button" data-modal-close="reopenModal">Annuleren</button>
<button class="btn btn-primary" type="button">Heropen melding</button>
</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 tabs = document.querySelectorAll('.report-tab-btn');
const panels = document.querySelectorAll('.report-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');
});
});
function openModal(id) {
const modal = document.getElementById(id);
if (!modal) return;
modal.classList.add('open');
modal.setAttribute('aria-hidden', 'false');
}
function closeModal(id) {
const modal = document.getElementById(id);
if (!modal) return;
modal.classList.remove('open');
modal.setAttribute('aria-hidden', 'true');
}
document.querySelectorAll('[data-modal-open]').forEach(function (button) {
button.addEventListener('click', function () {
openModal(button.dataset.modalOpen);
});
});
document.querySelectorAll('[data-modal-close]').forEach(function (button) {
button.addEventListener('click', function () {
closeModal(button.dataset.modalClose);
});
});
document.querySelectorAll('.modal-overlay').forEach(function (modal) {
modal.addEventListener('click', function (event) {
if (event.target === modal) closeModal(modal.id);
});
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
document.querySelectorAll('.modal-overlay.open').forEach(function (modal) {
closeModal(modal.id);
});
}
});
})();
</script>
</body>
</html>