/* Ingelogde startpagina (/app/partials/dashboard/dashboard.html + /app/partials/dashboard/dashboard.js). index.html bevat zowel de marketingpagina als dit dashboard. Welke van de twee zichtbaar is hangt af van data-auth op ; die wordt vóór de eerste paint gezet uit een localStorage-hint en daarna bevestigd door /api/auth/me. Deelt de rij-, pill- en lege-staat-stijlen met /app/shared/library/library.css — die moet dus ook geladen zijn op index.html. */ /* --------------------------------------------------------------------------- Zichtbaarheidsschakelaar --------------------------------------------------------------------------- */ /* Standaard (uitgelogd, en wat een crawler ziet): marketing zichtbaar, dashboard verborgen. Zonder JS blijft dat zo — de landingspagina is de veilige default. */ #dashboard { display: none; } :root[data-auth="in"] #dashboard { display: block; } :root[data-auth="in"] [data-auth-out] { display: none; } /* --------------------------------------------------------------------------- Body --------------------------------------------------------------------------- */ .dash-body { padding: 2.5rem 0 4rem; } .dash-loading { text-align: center; padding: 5rem 1.5rem; color: var(--gray); } /* Skeleton-versie van de startpagina (zie dashboard.html). Vormen sluiten aan op de echte layout; de glans-golf komt uit .skeleton in global.css. */ .dash-skeleton__tile { height: 74px; border-radius: var(--radius-lg); } .dash-skeleton__tips { min-height: 240px; border-radius: var(--radius-lg); } .dash-skeleton__pills { display: flex; flex-wrap: wrap; gap: 0.6rem; } .dash-skeleton__pill { width: 120px; height: 40px; border-radius: var(--radius-pill, 999px); } .dash-skeleton__row { height: 64px; margin-bottom: 0.6rem; border-radius: var(--radius-lg); } .dash-greeting { margin-bottom: 2rem; } .dash-greeting__title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 700; color: var(--secondary-color); margin: 0; background: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; } .dash-greeting__sub { margin: 0.3rem 0 0; color: var(--gray); font-size: 1.02rem; } /* Doorverwijzing naar /overzicht.html — de hub met álle functies. */ .dash-greeting__link { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; color: var(--primary-color); font-weight: 600; font-size: 0.95rem; text-decoration: none; } .dash-greeting__link:hover { text-decoration: underline; } .dash-section { margin-bottom: 2.5rem; } .dash-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .dash-section__title { font-size: 1.3rem; font-weight: 700; color: var(--secondary-color); margin: 0 0 1rem; } .dash-section__head .dash-section__title { margin: 0; } .dash-section__link { display: inline-flex; align-items: center; gap: 0.15rem; color: var(--primary-color); font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap; } .dash-section__link:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- Bovenblok: tegels links, tips rechts --------------------------------------------------------------------------- */ .dash-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 2.5rem; } .dash-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .dash-tile { display: flex; align-items: center; gap: 0.7rem; padding: 1.05rem 1.1rem; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .dash-tile:hover { transform: translateY(-3px); border-color: var(--primary-color); box-shadow: var(--shadow-hover); } .dash-tile__icon { flex: none; font-size: 1.5rem; color: var(--primary-color); } .dash-tile__body { display: flex; flex-direction: column; min-width: 0; } .dash-tile__label { font-weight: 600; color: var(--secondary-color); } .dash-tile__count { font-size: 0.82rem; color: var(--gray); } /* --- Tips-paneel ----------------------------------------------------------- */ .dash-tips { position: relative; overflow: hidden; isolation: isolate; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--grad-cta); color: #fff; box-shadow: var(--shadow-lift); min-height: 100%; display: flex; flex-direction: column; } .dash-tips__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; } .dash-tips__title { font-size: 1.05rem; font-weight: 700; margin: 0; } .dash-tips__badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.7rem; border-radius: 100px; background: rgba(255, 255, 255, 0.16); font-size: 0.82rem; font-weight: 700; backdrop-filter: blur(6px); } .dash-tips__stage { flex: 1 1 auto; overflow: hidden; touch-action: pan-y; } .dash-tips__track { display: flex; height: 100%; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .dash-tip { flex: 0 0 100%; min-width: 0; } .dash-tip__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.4rem; } .dash-tip__body { margin: 0 0 1rem; font-size: 0.94rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); } .dash-tip__cta { display: inline-flex; align-items: center; gap: 0.3rem; color: #fff; font-weight: 700; font-size: 0.94rem; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.4); padding-bottom: 2px; transition: border-color 0.2s ease; } .dash-tip__cta:hover { border-color: #fff; } .dash-tip__cta i { transition: transform 0.2s ease; } .dash-tip__cta:hover i { transform: translateX(3px); } .dash-tips__dots { display: flex; gap: 0.4rem; margin-top: 1.1rem; } .dash-tips__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .dash-tips__dot:hover { background: rgba(255, 255, 255, 0.6); } .dash-tips__dot.is-active { background: #fff; transform: scale(1.25); } /* --------------------------------------------------------------------------- Recent --------------------------------------------------------------------------- */ .dash-recent__label { font-size: 0.85rem; font-weight: 600; color: var(--gray); margin: 1.25rem 0 0.5rem; } .dash-recent__label:first-of-type { margin-top: 0; } /* --------------------------------------------------------------------------- Mobiel --------------------------------------------------------------------------- */ @media (max-width: 900px) { .dash-top { grid-template-columns: 1fr; } /* Tips boven de tegels: op een telefoon is de eerste schermvulling de plek voor "wat moet ik nu doen", niet voor zes iconen. */ .dash-tips { order: -1; } } @media (max-width: 520px) { .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-body { padding: 1.5rem 0 3rem; } }