diff --git a/README.md b/README.md index 7839ecc..23bb8f8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Telvero Talpa Planning System -Een geavanceerd TV-planning systeem voor het beheren en plannen van homeshopping uitzendingen op Talpa zenders (SBS9, Net5, Veronica). +Een geavanceerd TV-planning systeem voor het beheren en plannen van homeshopping uitzendingen op Talpa zenders (SBS9, Net5, SBS6). ## 🎯 Functionaliteiten @@ -130,7 +130,7 @@ chmod 644 api/*.php 1. Ga naar **Blokken** in het menu 2. Klik op "Nieuw Template" 3. Vul de gegevens in: - - Zender (SBS9, NET5, VERONICA) + - Zender (SBS9, NET5, SBS6) - Template naam (bijv. "SBS9 Dagblok") - Dag van de week - Standaard starttijd diff --git a/api/get_daily_blocks.php b/api/get_daily_blocks.php index 0dbed01..cd72f72 100644 --- a/api/get_daily_blocks.php +++ b/api/get_daily_blocks.php @@ -88,7 +88,7 @@ function getBlockColor($channel) { $colors = [ 'SBS9' => 'rgba(52, 152, 219, 0.1)', // Light blue 'NET5' => 'rgba(231, 76, 60, 0.1)', // Light red - 'VERONICA' => 'rgba(155, 89, 182, 0.1)' // Light purple + 'SBS6' => 'rgba(155, 89, 182, 0.1)' // Light purple ]; return $colors[$channel] ?? 'rgba(200, 200, 200, 0.1)'; diff --git a/assets/css/custom.css b/assets/css/custom.css index 2b0b756..8ed044b 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,16 +1,77 @@ /** * Custom Styles for Telvero Talpa Planning System + * Redesigned for uniform UI and typography */ :root { - --text-color: #404040; + /* Legacy support */ + --text-color: #212529; --brand-color: #32327D; --accent-color: #32B4AA; --primary-color: #32327D; --secondary-color: #32327D; - --success-color: #2ecc71; - --warning-color: #f39c12; - --danger-color: #e74c3c; + --success-color: #28A745; + --warning-color: #FFC107; + --danger-color: #DC3545; + + /* Brand Colors */ + --brand-primary: #32327D; + --brand-accent: #32B4AA; + + /* UI Colors - Rustig Palet */ + --ui-bg-primary: #FFFFFF; + --ui-bg-secondary: #F8F9FA; + --ui-bg-tertiary: #E9ECEF; + --ui-border: #DEE2E6; + --ui-border-light: #E9ECEF; + + /* Text Colors */ + --text-primary: #212529; + --text-secondary: #6C757D; + --text-muted: #ADB5BD; + + /* Status Colors - Gedempter */ + --status-success: #28A745; + --status-success-light: #D4EDDA; + --status-warning: #FFC107; + --status-warning-light: #FFF3CD; + --status-danger: #DC3545; + --status-danger-light: #F8D7DA; + --status-info: #17A2B8; + --status-info-light: #D1ECF1; + + /* Interaction States */ + --hover-bg: #F1F3F5; + --active-bg: #E9ECEF; + --focus-ring: rgba(50, 50, 125, 0.25); + + /* Typography */ + --font-h1: 2rem; + --font-h2: 1.5rem; + --font-h3: 1.25rem; + --font-h4: 1.125rem; + --font-h5: 1rem; + --font-h6: 0.875rem; + --font-base: 0.9375rem; + --font-small: 0.875rem; + --font-tiny: 0.8125rem; + + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + --line-height-tight: 1.25; + --line-height-normal: 1.5; + --line-height-relaxed: 1.75; + + /* Spacing System */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; } body { @@ -54,11 +115,23 @@ body { background-color: var(--brand-color) !important; } -/* Buttons */ +/* ============================================ + BUTTON SYSTEM - Uniform & Icon-Based + ============================================ */ + +/* Base Button Styles */ .btn { - border-radius: 6px; - font-weight: 500; - transition: all 0.2s; + border-radius: 0.5rem; + font-weight: var(--font-weight-medium); + font-size: var(--font-base); + transition: all 0.15s ease; + padding: 0.5rem 1rem; + min-width: 40px; + height: 38px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; } .btn:hover { @@ -66,9 +139,172 @@ body { box-shadow: 0 2px 8px rgba(0,0,0,0.15); } +.btn:active { + transform: translateY(0); +} + +.btn:focus { + outline: none; + box-shadow: 0 0 0 3px var(--focus-ring); +} + +/* Button Sizes */ +.btn-xs { + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + border-radius: 0.25rem; + min-width: 32px; + height: 28px; +} + +.btn-sm { + padding: 0.375rem 0.75rem; + font-size: var(--font-small); + border-radius: 0.375rem; + min-width: 36px; + height: 32px; +} + +.btn-lg { + padding: 0.75rem 1.5rem; + font-size: 1rem; + border-radius: 0.5rem; + min-width: 48px; + height: 44px; +} + +/* Icon-Only Buttons */ +.btn-icon { + background: transparent; + border: 1px solid var(--ui-border); + color: var(--text-secondary); + padding: 0.5rem; + min-width: 38px; + width: 38px; + height: 38px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 0.375rem; + transition: all 0.15s ease; +} + +.btn-icon:hover { + background: var(--hover-bg); + border-color: var(--ui-border); + color: var(--text-primary); + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +.btn-icon:active { + background: var(--active-bg); + transform: translateY(0); +} + +.btn-icon:focus { + outline: none; + box-shadow: 0 0 0 3px var(--focus-ring); +} + +/* Icon Button Sizes */ +.btn-icon-xs { + min-width: 28px; + width: 28px; + height: 28px; + padding: 0.25rem; + border-radius: 0.25rem; +} + +.btn-icon-sm { + min-width: 32px; + width: 32px; + height: 32px; + padding: 0.375rem; + border-radius: 0.375rem; +} + +.btn-icon-lg { + min-width: 44px; + width: 44px; + height: 44px; + padding: 0.75rem; + border-radius: 0.5rem; +} + +/* Icon Button Color Variants */ +.btn-icon-primary { + border-color: var(--brand-primary); + color: var(--brand-primary); +} + +.btn-icon-primary:hover { + background: var(--brand-primary); + color: white; +} + +.btn-icon-secondary { + border-color: var(--ui-border); + color: var(--text-secondary); +} + +.btn-icon-secondary:hover { + background: var(--hover-bg); + color: var(--text-primary); +} + +.btn-icon-success { + border-color: var(--status-success); + color: var(--status-success); +} + +.btn-icon-success:hover { + background: var(--status-success); + color: white; +} + +.btn-icon-danger { + border-color: var(--status-danger); + color: var(--status-danger); +} + +.btn-icon-danger:hover { + background: var(--status-danger); + color: white; +} + +.btn-icon-warning { + border-color: var(--status-warning); + color: #856404; +} + +.btn-icon-warning:hover { + background: var(--status-warning); + color: #000; +} + +.btn-icon-info { + border-color: var(--status-info); + color: var(--status-info); +} + +.btn-icon-info:hover { + background: var(--status-info); + color: white; +} + +/* Action Button Groups */ +.action-buttons { + display: inline-flex; + gap: 0.25rem; + align-items: center; +} + +/* Standard Button Colors */ .btn-primary { - background-color: var(--brand-color); - border-color: var(--brand-color); + background-color: var(--brand-primary); + border-color: var(--brand-primary); + color: white; } .btn-primary:hover, @@ -76,21 +312,78 @@ body { .btn-primary:active { background-color: #28286a; border-color: #28286a; + color: white; } .btn-outline-primary { - color: var(--brand-color); - border-color: var(--brand-color); + color: var(--brand-primary); + border-color: var(--brand-primary); + background: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { - background-color: var(--brand-color); - border-color: var(--brand-color); + background-color: var(--brand-primary); + border-color: var(--brand-primary); color: #ffffff; } +.btn-success { + background-color: var(--status-success); + border-color: var(--status-success); + color: white; +} + +.btn-success:hover { + background-color: #218838; + border-color: #218838; +} + +.btn-danger { + background-color: var(--status-danger); + border-color: var(--status-danger); + color: white; +} + +.btn-danger:hover { + background-color: #c82333; + border-color: #c82333; +} + +.btn-info { + background-color: var(--status-info); + border-color: var(--status-info); + color: white; +} + +.btn-info:hover { + background-color: #138496; + border-color: #138496; +} + +.btn-warning { + background-color: var(--status-warning); + border-color: var(--status-warning); + color: #000; +} + +.btn-warning:hover { + background-color: #e0a800; + border-color: #e0a800; +} + +.btn-secondary { + background-color: var(--text-secondary); + border-color: var(--text-secondary); + color: white; +} + +.btn-secondary:hover { + background-color: #5a6268; + border-color: #5a6268; +} + /* Tables */ .table { border-radius: 8px; @@ -512,6 +805,41 @@ body { padding: 8px 12px; } +/* ============================================ + BADGE SYSTEM - Status & Sync Indicators + ============================================ */ + +/* Sync Status Badges */ +.badge-sync { + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + font-weight: 600; + border-radius: 0.25rem; + display: inline-flex; + align-items: center; + gap: 0.25rem; +} + +.badge-sync-complete { + background: var(--status-success-light); + color: var(--status-success); +} + +.badge-sync-partial { + background: var(--status-warning-light); + color: #856404; +} + +.badge-sync-none { + background: var(--status-danger-light); + color: var(--status-danger); +} + +.badge-sync-empty { + background: var(--ui-bg-tertiary); + color: var(--text-secondary); +} + /* Sync Status Indicators */ .sync-indicator { font-size: 1.2rem; @@ -521,50 +849,91 @@ body { } .sync-indicator.sync-success { - color: #28a745; + color: var(--status-success); } .sync-indicator.sync-pending { - color: #dc3545; + color: var(--status-danger); } .sync-indicator.sync-error { - color: #ffc107; + color: var(--status-warning); } .sync-indicator:hover { transform: scale(1.2); } -/* Block Sync Status Badges */ +/* Block Sync Status Badges (Legacy Support) */ .block-sync-status { - font-size: 0.85rem; - padding: 0.35em 0.65em; + font-size: 0.75rem; + padding: 0.25rem 0.5rem; font-weight: 600; - border-radius: 4px; + border-radius: 0.25rem; display: inline-flex; align-items: center; - gap: 4px; + gap: 0.25rem; } .block-sync-status.block-sync-complete { - background-color: #28a745; - color: white; + background-color: var(--status-success-light); + color: var(--status-success); } .block-sync-status.block-sync-partial { - background-color: #ffc107; - color: #000; + background-color: var(--status-warning-light); + color: #856404; } .block-sync-status.block-sync-none { - background-color: #dc3545; - color: white; + background-color: var(--status-danger-light); + color: var(--status-danger); } .block-sync-status.block-sync-empty { - background-color: #6c757d; - color: white; + background-color: var(--ui-bg-tertiary); + color: var(--text-secondary); +} + +/* ============================================ + PLANNER SPECIFIC STYLES + ============================================ */ + +/* Block Header Redesign */ +.block-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-sm) var(--space-md); + background: var(--ui-bg-secondary); + border-bottom: 1px solid var(--ui-border); + gap: var(--space-md); +} + +.block-header-left { + display: flex; + align-items: center; + gap: var(--space-sm); + flex: 1; +} + +.block-title { + margin: 0; + font-size: var(--font-h6); + font-weight: var(--font-weight-semibold); + color: var(--text-primary); +} + +.block-header-actions { + display: flex; + gap: 0.25rem; + align-items: center; +} + +.block-header-time { + font-size: var(--font-small); + color: var(--text-secondary); + white-space: nowrap; } /* Print Styles */ diff --git a/assets/js/calendar-init.js b/assets/js/calendar-init.js index 2b5989d..8a6a30d 100644 --- a/assets/js/calendar-init.js +++ b/assets/js/calendar-init.js @@ -532,7 +532,7 @@ function updateBlockInfo(blocks) { const channelColors = { 'SBS9': 'primary', 'NET5': 'danger', - 'VERONICA': 'secondary' + 'SBS6': 'secondary' }; const color = channelColors[channel] || 'secondary'; diff --git a/blocks.php b/blocks.php index 252c3e4..6d1d60b 100644 --- a/blocks.php +++ b/blocks.php @@ -162,7 +162,7 @@ $dayNames = [ - + @@ -256,24 +256,23 @@ $dayNames = [ -
- +
+
-
-
-
diff --git a/calendar.php b/calendar.php index 8a7f8e3..9dd44d1 100644 --- a/calendar.php +++ b/calendar.php @@ -91,8 +91,8 @@ $infomercials = $db->query("
Actieve Blokken voor Vandaag
-
@@ -108,15 +108,15 @@ $infomercials = $db->query("
-
- - -
@@ -253,7 +253,7 @@ $infomercials = $db->query(" Verwijderen
@@ -319,7 +319,7 @@ $infomercials = $db->query("
diff --git a/index.php b/index.php index bbee64a..9cdd290 100644 --- a/index.php +++ b/index.php @@ -316,14 +316,20 @@ if (isset($_GET['edit'])) { - - Bewerk - -
- - -
- + +
+ + + + +
+ + +
+ +
diff --git a/planner.php b/planner.php index 26c4ea4..59e41b7 100644 --- a/planner.php +++ b/planner.php @@ -469,38 +469,36 @@ function calculateNextStartTimeForBlock($db, $date, $channel, $blockId) { } ?>
-
-
- +
+
+
- - + + + - - - -
-
- - - | Resterend: min + +
+ - | min
@@ -580,7 +578,7 @@ function calculateNextStartTimeForBlock($db, $date, $channel, $blockId) { -
+
0): ?>
@@ -588,7 +586,7 @@ function calculateNextStartTimeForBlock($db, $date, $channel, $blockId) { -
@@ -601,7 +599,7 @@ function calculateNextStartTimeForBlock($db, $date, $channel, $blockId) { - @@ -610,7 +608,7 @@ function calculateNextStartTimeForBlock($db, $date, $channel, $blockId) {
-
diff --git a/plans/copy-blocks-feature-plan.md b/plans/copy-blocks-feature-plan.md index d39a32b..88cbc1c 100644 --- a/plans/copy-blocks-feature-plan.md +++ b/plans/copy-blocks-feature-plan.md @@ -302,7 +302,7 @@ document.querySelectorAll('[id^="copyBlockForm"]').forEach(form => { **Input (GET parameters)**: - `date` (required): Brondag in Y-m-d formaat -- `channel` (required): Zender naam (SBS9, NET5, VERONICA) +- `channel` (required): Zender naam (SBS9, NET5, SBS6) - `template_id` (required): Template ID **Output (JSON)**: diff --git a/plans/planner-redesign-plan.md b/plans/planner-redesign-plan.md new file mode 100644 index 0000000..28008fd --- /dev/null +++ b/plans/planner-redesign-plan.md @@ -0,0 +1,481 @@ +# Planner Redesign Plan - Uniforme UI & Typografie + +## Overzicht +Redesign van de planner interface om een cleane, uniforme uitstraling te creΓ«ren met consistente knoppen, typografie en kleurgebruik. Focus op het verminderen van visuele ruis en het verbeteren van de gebruiksvriendelijkheid. + +## Huidige Problemen + +### Planner Interface ([`planner.php`](planner.php)) +1. **Inconsistente knoppen**: Mix van verschillende button stijlen en groottes + - "Gepland" badge, "Leeg" badge, "Niet Gepland" badge (verschillende kleuren) + - "Starttijd aanpassen" knop met tekst + icoon + - "Kopieer Blok" knop met tekst + icoon + - "Sync naar Talpa" knop met tekst + icoon + - Omhoog/omlaag/verwijder knoppen in tabel (klein formaat) + - "Toevoegen" knop in dropdown rij + +2. **Drukke header van blokken**: Te veel informatie en knoppen naast elkaar +3. **Inconsistente spacing**: Verschillende marges en paddings +4. **Te veel tekst op knoppen**: Kan compacter met alleen iconen waar duidelijk + +### Andere Schermen +- [`calendar.php`](calendar.php): Sidebar met infomercials, zoom controls, block info +- [`blocks.php`](blocks.php): Template management met formulieren +- [`index.php`](index.php): Dashboard met statistieken en snelle acties +- [`infomercials.php`](infomercials.php): Lijst met infomercials en upload status + +## Design System + +### 1. Kleurenpalet (Rustig & Consistent) + +#### Brand Colors (Behouden) +```css +--brand-primary: #32327D; /* Paars - hoofdkleur */ +--brand-accent: #32B4AA; /* Turquoise - accent */ +``` + +#### UI Kleuren (Nieuw - Rustig Palet) +```css +/* Neutrale basis */ +--ui-bg-primary: #FFFFFF; +--ui-bg-secondary: #F8F9FA; +--ui-bg-tertiary: #E9ECEF; +--ui-border: #DEE2E6; +--ui-border-light: #E9ECEF; + +/* Tekst */ +--text-primary: #212529; +--text-secondary: #6C757D; +--text-muted: #ADB5BD; + +/* Status kleuren (gedempter) */ +--status-success: #28A745; +--status-success-light: #D4EDDA; +--status-warning: #FFC107; +--status-warning-light: #FFF3CD; +--status-danger: #DC3545; +--status-danger-light: #F8D7DA; +--status-info: #17A2B8; +--status-info-light: #D1ECF1; + +/* Interactie */ +--hover-bg: #F1F3F5; +--active-bg: #E9ECEF; +--focus-ring: rgba(50, 50, 125, 0.25); +``` + +#### Infomercial Kleuren +Blijven zoals ze zijn - dynamisch toegewezen per infomercial + +### 2. Typografie HiΓ«rarchie + +```css +/* Headings */ +--font-h1: 2rem; /* 32px - Page titles */ +--font-h2: 1.5rem; /* 24px - Section titles */ +--font-h3: 1.25rem; /* 20px - Card headers */ +--font-h4: 1.125rem; /* 18px - Subsections */ +--font-h5: 1rem; /* 16px - Small headers */ +--font-h6: 0.875rem; /* 14px - Tiny headers */ + +/* Body */ +--font-base: 0.9375rem; /* 15px - Base text */ +--font-small: 0.875rem; /* 14px - Small text */ +--font-tiny: 0.8125rem; /* 13px - Tiny text */ + +/* Weights */ +--font-weight-normal: 400; +--font-weight-medium: 500; +--font-weight-semibold: 600; +--font-weight-bold: 700; + +/* Line heights */ +--line-height-tight: 1.25; +--line-height-normal: 1.5; +--line-height-relaxed: 1.75; +``` + +### 3. Button System + +#### Button Sizes +```css +/* Extra Small - Voor tabel acties */ +.btn-xs { + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + border-radius: 0.25rem; + min-width: 32px; + height: 28px; +} + +/* Small - Voor compacte UI */ +.btn-sm { + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + border-radius: 0.375rem; + min-width: 36px; + height: 32px; +} + +/* Medium (default) - Standaard knoppen */ +.btn { + padding: 0.5rem 1rem; + font-size: 0.9375rem; + border-radius: 0.5rem; + min-width: 40px; + height: 38px; +} + +/* Large - Call-to-action knoppen */ +.btn-lg { + padding: 0.75rem 1.5rem; + font-size: 1rem; + border-radius: 0.5rem; + min-width: 48px; + height: 44px; +} +``` + +#### Button Variants + +**Icon-Only Buttons** (Geen tekst, alleen icoon) +- Verwijderen: `` +- Bewerken: `` +- Omhoog: `` +- Omlaag: `` +- KopiΓ«ren: `` +- Sync: `` +- Tijd aanpassen: `` + +**Text + Icon Buttons** (Voor belangrijke acties) +- Primaire acties: "Toevoegen", "Opslaan", "Synchroniseren" +- Gebruik alleen waar context nodig is + +**Ghost Buttons** (Subtiele acties) +- Transparante achtergrond, alleen border +- Voor secundaire acties + +#### Button States +```css +/* Default state */ +.btn-icon { + background: transparent; + border: 1px solid var(--ui-border); + color: var(--text-secondary); + transition: all 0.15s ease; +} + +/* Hover state */ +.btn-icon:hover { + background: var(--hover-bg); + border-color: var(--ui-border); + color: var(--text-primary); + transform: translateY(-1px); +} + +/* Active state */ +.btn-icon:active { + background: var(--active-bg); + transform: translateY(0); +} + +/* Focus state */ +.btn-icon:focus { + outline: none; + box-shadow: 0 0 0 3px var(--focus-ring); +} +``` + +### 4. Spacing System + +```css +/* Consistent spacing scale */ +--space-xs: 0.25rem; /* 4px */ +--space-sm: 0.5rem; /* 8px */ +--space-md: 1rem; /* 16px */ +--space-lg: 1.5rem; /* 24px */ +--space-xl: 2rem; /* 32px */ +--space-2xl: 3rem; /* 48px */ +``` + +### 5. Badges & Status Indicators + +```css +/* Sync status badges */ +.badge-sync { + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + font-weight: 600; + border-radius: 0.25rem; + display: inline-flex; + align-items: center; + gap: 0.25rem; +} + +.badge-sync-complete { + background: var(--status-success-light); + color: var(--status-success); +} + +.badge-sync-partial { + background: var(--status-warning-light); + color: #856404; +} + +.badge-sync-none { + background: var(--status-danger-light); + color: var(--status-danger); +} + +.badge-sync-empty { + background: var(--ui-bg-tertiary); + color: var(--text-secondary); +} +``` + +## Implementatie Plan + +### Fase 1: Core Design System ([`assets/css/custom.css`](assets/css/custom.css)) + +1. **Voeg CSS variabelen toe** + - Kleurenpalet + - Typografie schaal + - Spacing systeem + +2. **CreΓ«er button system** + - `.btn-icon` classes + - Size variants (xs, sm, md, lg) + - Color variants (primary, secondary, success, danger, info, warning) + - States (hover, active, focus, disabled) + +3. **CreΓ«er badge system** + - Status badges + - Sync indicators + - Count badges + +4. **Typography utilities** + - Heading classes + - Text size utilities + - Weight utilities + +### Fase 2: Planner Redesign ([`planner.php`](planner.php)) + +#### Block Header Redesign +**Voor:** +```html +
+ Gepland + + + +
+``` + +**Na:** +```html +
+
+
SBS9 Nachtblok
+ + + Gepland + +
+
+ + + +
+
+ 02:00 - 04:30 | 24 min resterend +
+
+``` + +#### Table Actions Redesign +**Voor:** +```html +
+ + + +
+``` + +**Na:** +```html +
+ + + +
+``` + +#### Infomercial Sidebar Cleanup +- Compactere items +- Betere spacing +- Duidelijkere hover states + +### Fase 3: Calendar View ([`calendar.php`](calendar.php)) + +1. **Block info cards**: Compacter design met icon-only buttons +2. **Zoom controls**: Icon-only buttons +3. **Sidebar**: Consistente styling met planner +4. **Modals**: Uniforme button styling + +### Fase 4: Blocks Management ([`blocks.php`](blocks.php)) + +1. **Form styling**: Consistente input styling +2. **Table actions**: Icon-only buttons +3. **Status badges**: Nieuwe badge system + +### Fase 5: Dashboard ([`index.php`](index.php)) + +1. **Stat cards**: Cleaner design met betere typografie +2. **Quick actions**: Consistente card styling +3. **Tables**: Uniforme button styling + +### Fase 6: Infomercials ([`infomercials.php`](infomercials.php)) + +1. **List view**: Compacter met icon-only actions +2. **Upload status**: Nieuwe badge system +3. **Forms**: Consistente styling + +## Visuele Voorbeelden + +### Button Groepen +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ Block Header β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ SBS9 Nachtblok [βœ“ Gepland] β”‚ +β”‚ β”‚ +β”‚ [πŸ•] [πŸ“‹] [☁️] 02:00-04:30 | 24 min β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +### Table Actions +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ Product | Duur | Acties β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ Clever Cane | 30m | [↑] [↓] [πŸ—‘οΈ] β”‚ +β”‚ Sani Skin | 15m | [↑] [↓] [πŸ—‘οΈ] β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +### Status Badges +``` +[βœ“ Gepland] - Groen (alle items gesynchroniseerd) +[⚠ Deels (2/5)] - Geel (sommige items gesynchroniseerd) +[βœ— Niet Gepland] - Rood (geen items gesynchroniseerd) +[β—‹ Leeg] - Grijs (geen items in blok) +``` + +## Implementatie Volgorde + +1. βœ… **Design System Documentatie** (dit document) +2. **CSS Updates** ([`assets/css/custom.css`](assets/css/custom.css)) + - Voeg CSS variabelen toe + - CreΓ«er button system + - CreΓ«er badge system + - Typography utilities +3. **Planner Redesign** ([`planner.php`](planner.php)) + - Block headers + - Table actions + - Sidebar +4. **Calendar View** ([`calendar.php`](calendar.php)) +5. **Blocks Management** ([`blocks.php`](blocks.php)) +6. **Dashboard** ([`index.php`](index.php)) +7. **Infomercials** (nog niet in codebase, maar voorbereiden) + +## Mermaid Diagram: Component HiΓ«rarchie + +```mermaid +graph TD + A[Design System] --> B[Colors] + A --> C[Typography] + A --> D[Spacing] + A --> E[Components] + + E --> F[Buttons] + E --> G[Badges] + E --> H[Cards] + E --> I[Tables] + + F --> F1[Icon-Only] + F --> F2[Text + Icon] + F --> F3[Ghost] + + G --> G1[Status] + G --> G2[Sync] + G --> G3[Count] + + B --> B1[Brand Colors] + B --> B2[UI Colors] + B --> B3[Status Colors] + + C --> C1[Headings] + C --> C2[Body Text] + C --> C3[Weights] +``` + +## Mermaid Diagram: Implementatie Flow + +```mermaid +graph LR + A[CSS Variables] --> B[Button System] + B --> C[Badge System] + C --> D[Typography] + D --> E[Planner PHP] + E --> F[Calendar PHP] + F --> G[Blocks PHP] + G --> H[Index PHP] + H --> I[Testing] + I --> J[Refinement] +``` + +## Belangrijke Overwegingen + +### Toegankelijkheid +- Voldoende contrast ratios (WCAG AA) +- Focus states voor keyboard navigatie +- Duidelijke hover states +- Geen tooltips nodig (iconen zijn duidelijk genoeg) + +### Performance +- Gebruik CSS variabelen voor snelle theming +- Minimale JavaScript voor interacties +- Hergebruik van classes + +### Consistentie +- Alle knoppen gebruiken hetzelfde systeem +- Alle badges gebruiken hetzelfde systeem +- Alle spacing gebruikt de spacing scale +- Alle kleuren komen uit het palet + +### Responsive Design +- Buttons blijven bruikbaar op kleine schermen +- Stack buttons verticaal op mobiel indien nodig +- Behoud touch-friendly sizes (min 44x44px) + +## Volgende Stappen + +1. Review dit plan met het team +2. Goedkeuring voor implementatie +3. Start met CSS updates +4. Implementeer per scherm +5. Test en verfijn +6. Documenteer voor toekomstig gebruik