From 5f15eb67fe5d747c7b10e7fcfa94f2aae51208d9 Mon Sep 17 00:00:00 2001
From: Niek Rabelink <niek.rabelink@gmail.com>
Date: Sat, 12 Sep 2026 17:23:52 +0200
Subject: [PATCH] Postits

---
 board.php             | 48 ++++++++++++++----------
 brainstorm_canvas.php | 86 +++++++++++++++++++++++--------------------
 2 files changed, 75 insertions(+), 59 deletions(-)

diff --git a/board.php b/board.php
index b8a6d09..d8d7c6f 100644
--- a/board.php
+++ b/board.php
@@ -22,46 +22,56 @@ $isAdmin = ($userRole === 'ADMIN');
     width: 100% !important;
 }
 
-/* --- Realistische Post-it Styling met Opkrullende Rand Links Onder --- */
+/* --- Realistische Echte Post-it Sticky Note Styling --- */
 .postit-note {
     position: relative;
-    border-radius: 4px 18px 4px 18px;
-    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
+    border-top-left-radius: 2px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 14px;
+    box-shadow: 
+        0 1px 1px rgba(0, 0, 0, 0.08),
+        0 4px 6px -1px rgba(0, 0, 0, 0.08),
+        0 10px 18px -4px rgba(0, 0, 0, 0.12),
+        -2px 6px 8px -2px rgba(0, 0, 0, 0.08);
     transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
 }
 .postit-note:hover {
-    transform: translateY(-3px) scale(1.01);
-    box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.16), 0 6px 10px -2px rgba(0, 0, 0, 0.08);
+    transform: translateY(-3px) rotate(-0.5deg);
+    box-shadow: 
+        0 2px 4px rgba(0, 0, 0, 0.06),
+        0 8px 12px -2px rgba(0, 0, 0, 0.12),
+        0 16px 24px -4px rgba(0, 0, 0, 0.16),
+        -4px 8px 12px -2px rgba(0, 0, 0, 0.12);
 }
+/* Echte sticky note curl & schaduw links onder */
 .postit-note::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: -1px;
-    width: 20px;
-    height: 20px;
-    background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, transparent 50%);
+    width: 24px;
+    height: 24px;
+    background: 
+        linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 35%, transparent 45%),
+        linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 48%);
     border-bottom-left-radius: 4px;
-    box-shadow: -2px 2px 4px rgba(0,0,0,0.12);
     pointer-events: none;
     z-index: 5;
 }
+/* Subtiele klevende plakrand aan de bovenkant */
 .postit-note::before {
     content: '';
     position: absolute;
     top: 0;
-    left: 15%;
-    right: 15%;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.4);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
+    left: 0;
+    right: 0;
+    height: 6px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
+    border-top-left-radius: 2px;
+    border-top-right-radius: 3px;
     pointer-events: none;
 }
-.dark .postit-note::before {
-    background: rgba(255, 255, 255, 0.1);
-}
 </style>
 
 <div id="boardPageContainer" class="space-y-4 w-full">
diff --git a/brainstorm_canvas.php b/brainstorm_canvas.php
index 1371cb1..104c205 100644
--- a/brainstorm_canvas.php
+++ b/brainstorm_canvas.php
@@ -55,80 +55,88 @@ $categories = [
         'title' => 'Ideeën & Concepten', 
         'icon' => 'lightbulb', 
         'color' => 'amber', 
-        'border' => 'border-amber-300 dark:border-amber-600/40', 
-        'bg' => 'bg-[#fef9c3] dark:bg-[#713f12]/30 text-amber-950 dark:text-amber-100', 
+        'border' => 'border-amber-300/80 dark:border-amber-500/40', 
+        'bg' => 'bg-[#fffbeb] dark:bg-[#713f12]/35 text-amber-950 dark:text-amber-100', 
         'badge' => 'bg-amber-500/20 text-amber-900 dark:text-amber-200'
     ],
     'Knelpunten' => [
         'title' => 'Knelpunten & Uitdagingen', 
         'icon' => 'alert-triangle', 
         'color' => 'rose', 
-        'border' => 'border-rose-300 dark:border-rose-600/40', 
-        'bg' => 'bg-[#ffe4e6] dark:bg-[#881337]/30 text-rose-950 dark:text-rose-100', 
+        'border' => 'border-rose-300/80 dark:border-rose-500/40', 
+        'bg' => 'bg-[#fff1f2] dark:bg-[#881337]/35 text-rose-950 dark:text-rose-100', 
         'badge' => 'bg-rose-500/20 text-rose-900 dark:text-rose-200'
     ],
     'Oplossingen' => [
         'title' => 'Oplossingen & Features', 
         'icon' => 'rocket', 
         'color' => 'teal', 
-        'border' => 'border-teal-300 dark:border-teal-600/40', 
-        'bg' => 'bg-[#ccfbf1] dark:bg-[#134e4a]/30 text-teal-950 dark:text-teal-100', 
+        'border' => 'border-teal-300/80 dark:border-teal-500/40', 
+        'bg' => 'bg-[#f0fdfa] dark:bg-[#134e4a]/35 text-teal-950 dark:text-teal-100', 
         'badge' => 'bg-teal-500/20 text-teal-900 dark:text-teal-200'
     ],
     'Quick Wins' => [
         'title' => 'Quick Wins (Direct)', 
         'icon' => 'zap', 
         'color' => 'indigo', 
-        'border' => 'border-indigo-300 dark:border-indigo-600/40', 
-        'bg' => 'bg-[#e0e7ff] dark:bg-[#312e81]/30 text-indigo-950 dark:text-indigo-100', 
+        'border' => 'border-indigo-300/80 dark:border-indigo-500/40', 
+        'bg' => 'bg-[#eef2ff] dark:bg-[#312e81]/35 text-indigo-950 dark:text-indigo-100', 
         'badge' => 'bg-indigo-500/20 text-indigo-900 dark:text-indigo-200'
     ],
 ];
 ?>
 
 <style>
-/* --- Realistische Post-it Styling met Opkrullende Rand Links Onder --- */
+/* --- Realistische Echte Post-it Sticky Note Styling --- */
 .postit-note {
     position: relative;
-    border-radius: 4px 18px 4px 18px;
-    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
+    border-top-left-radius: 2px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 14px;
+    box-shadow: 
+        0 1px 1px rgba(0, 0, 0, 0.08),
+        0 4px 6px -1px rgba(0, 0, 0, 0.08),
+        0 10px 18px -4px rgba(0, 0, 0, 0.12),
+        -2px 6px 8px -2px rgba(0, 0, 0, 0.08);
     transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
 }
 .postit-note:hover {
-    transform: translateY(-3px) scale(1.01);
-    box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.16), 0 6px 10px -2px rgba(0, 0, 0, 0.08);
+    transform: translateY(-3px) rotate(-0.5deg);
+    box-shadow: 
+        0 2px 4px rgba(0, 0, 0, 0.06),
+        0 8px 12px -2px rgba(0, 0, 0, 0.12),
+        0 16px 24px -4px rgba(0, 0, 0, 0.16),
+        -4px 8px 12px -2px rgba(0, 0, 0, 0.12);
 }
-/* Opkrullend hoekje links onder */
+/* Echte sticky note curl & schaduw links onder */
 .postit-note::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: -1px;
-    width: 22px;
-    height: 22px;
-    background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, transparent 50%);
+    width: 24px;
+    height: 24px;
+    background: 
+        linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 35%, transparent 45%),
+        linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 48%);
     border-bottom-left-radius: 4px;
-    box-shadow: -2px 2px 4px rgba(0,0,0,0.12);
     pointer-events: none;
     z-index: 5;
 }
-/* Subtiele tape / plakrand bovenaan */
+/* Subtiele klevende plakrand aan de bovenkant */
 .postit-note::before {
     content: '';
     position: absolute;
     top: 0;
-    left: 15%;
-    right: 15%;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.4);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
+    left: 0;
+    right: 0;
+    height: 6px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
+    border-top-left-radius: 2px;
+    border-top-right-radius: 3px;
     pointer-events: none;
 }
-.dark .postit-note::before {
-    background: rgba(255, 255, 255, 0.1);
-}
 </style>
 
 <div class="space-y-6 max-w-7xl mx-auto">
@@ -252,10 +260,8 @@ $categories = [
                                 </div>
 
                                 <!-- Inhoud Post-it met verfijnde typografie en uitlijning -->
-                                <div class="text-left py-1" onclick="openEditCardModal(<?= $cardJson ?>)">
-                                    <p class="text-xs font-semibold leading-relaxed whitespace-pre-wrap break-words text-left cursor-pointer" title="Klik om te bewerken">
-                                        <?= htmlspecialchars($card['content']) ?>
-                                    </p>
+                                <div class="w-full text-left py-1" onclick="openEditCardModal(<?= $cardJson ?>)">
+                                    <p class="text-xs font-semibold leading-relaxed whitespace-pre-line break-words text-left text-slate-900 dark:text-slate-100 cursor-pointer m-0 p-0 block" title="Klik om te bewerken"><?= htmlspecialchars(trim($card['content'])) ?></p>
                                 </div>
 
                                 <!-- Assignee & Agenda Tijdblok Badge (indien gekoppeld) -->
@@ -1156,20 +1162,20 @@ async function handleCanvasLaneDrop(e, targetCategory) {
     const placeholder = lane.querySelector('.lane-empty-placeholder');
     if (placeholder) placeholder.remove();
 
-    // Kleurstijlen per categorie bijwerken
+    // Kleurstijlen per categorie bijwerken (1-op-1 identiek aan PHP styling)
     const categoryStyles = {
-        'Ideeën': { border: 'border-amber-200/80', darkBorder: 'dark:border-amber-800/40', bg: 'bg-amber-50/60', darkBg: 'dark:bg-amber-950/20' },
-        'Knelpunten': { border: 'border-rose-200/80', darkBorder: 'dark:border-rose-800/40', bg: 'bg-rose-50/60', darkBg: 'dark:bg-rose-950/20' },
-        'Oplossingen': { border: 'border-teal-200/80', darkBorder: 'dark:border-teal-800/40', bg: 'bg-teal-50/60', darkBg: 'dark:bg-teal-950/20' },
-        'Quick Wins': { border: 'border-indigo-200/80', darkBorder: 'dark:border-indigo-800/40', bg: 'bg-indigo-50/60', darkBg: 'dark:bg-indigo-950/20' }
+        'Ideeën': { border: 'border-amber-300/80', darkBorder: 'dark:border-amber-500/40', bg: 'bg-[#fffbeb]', darkBg: 'dark:bg-[#713f12]/35', text: 'text-amber-950', darkText: 'dark:text-amber-100' },
+        'Knelpunten': { border: 'border-rose-300/80', darkBorder: 'dark:border-rose-500/40', bg: 'bg-[#fff1f2]', darkBg: 'dark:bg-[#881337]/35', text: 'text-rose-950', darkText: 'dark:text-rose-100' },
+        'Oplossingen': { border: 'border-teal-300/80', darkBorder: 'dark:border-teal-500/40', bg: 'bg-[#f0fdfa]', darkBg: 'dark:bg-[#134e4a]/35', text: 'text-teal-950', darkText: 'dark:text-teal-100' },
+        'Quick Wins': { border: 'border-indigo-300/80', darkBorder: 'dark:border-indigo-500/40', bg: 'bg-[#eef2ff]', darkBg: 'dark:bg-[#312e81]/35', text: 'text-indigo-950', darkText: 'dark:text-indigo-100' }
     };
 
     // Verwijder oude kleurklassen en voeg nieuwe toe
     Object.values(categoryStyles).forEach(st => {
-        cardEl.classList.remove(st.border, st.darkBorder, st.bg, st.darkBg);
+        cardEl.classList.remove(st.border, st.darkBorder, st.bg, st.darkBg, st.text, st.darkText, 'bg-[#fef9c3]', 'bg-[#ffe4e6]', 'bg-[#ccfbf1]', 'bg-[#e0e7ff]', 'bg-amber-50/60', 'bg-rose-50/60', 'bg-teal-50/60', 'bg-indigo-50/60');
     });
     const targetStyle = categoryStyles[targetCategory] || categoryStyles['Ideeën'];
-    cardEl.classList.add(targetStyle.border, targetStyle.darkBorder, targetStyle.bg, targetStyle.darkBg);
+    cardEl.classList.add(targetStyle.border, targetStyle.darkBorder, targetStyle.bg, targetStyle.darkBg, targetStyle.text, targetStyle.darkText);
 
     // Stuur POST naar backend om categorie en kleur te bewaren
     try {
-- 
2.52.0