Fix
This commit is contained in:
+97
-37
@@ -87,55 +87,64 @@ $categories = [
|
||||
?>
|
||||
|
||||
<style>
|
||||
/* --- Realistische Echte Post-it Sticky Note Styling --- */
|
||||
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
|
||||
.postit-note {
|
||||
position: relative;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 14px;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
/* Uitgesproken, zachte schaduw zoals in referentie */
|
||||
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);
|
||||
0 2px 4px rgba(0, 0, 0, 0.06),
|
||||
0 8px 16px -2px rgba(0, 0, 0, 0.12),
|
||||
0 18px 28px -6px rgba(0, 0, 0, 0.14),
|
||||
8px 16px 20px -4px rgba(0, 0, 0, 0.18);
|
||||
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
|
||||
}
|
||||
.postit-note:hover {
|
||||
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);
|
||||
0 4px 8px rgba(0, 0, 0, 0.08),
|
||||
0 12px 22px -3px rgba(0, 0, 0, 0.16),
|
||||
0 24px 34px -6px rgba(0, 0, 0, 0.18),
|
||||
10px 20px 24px -4px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
/* Echte sticky note curl & schaduw links onder */
|
||||
|
||||
/* De opkrullende flap rechtsonder met realistische 3D vouw en diepe slagschaduw */
|
||||
.postit-note::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
/* Subtiel opkrullend effect met highlight en slagschaduw */
|
||||
background:
|
||||
linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.28) 60%, transparent 68%),
|
||||
linear-gradient(225deg, #fef08a 0%, #facc15 48%, transparent 52%);
|
||||
border-bottom-right-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
box-shadow: 6px 6px 12px -2px rgba(0, 0, 0, 0.3);
|
||||
clip-path: polygon(100% 0, 0 100%, 100% 100%);
|
||||
}
|
||||
|
||||
/* Donkere modus aanpassing voor de opkrulflap */
|
||||
.dark .postit-note::after {
|
||||
background:
|
||||
linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45) 60%, transparent 68%),
|
||||
linear-gradient(225deg, #eab308 0%, #ca8a04 48%, transparent 52%);
|
||||
box-shadow: 6px 6px 14px -2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* 3D Rode Punaise (Pushpin) linksboven met naald en schaduw conform de afbeelding */
|
||||
.postit-pin {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 28px;
|
||||
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;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
/* Subtiele klevende plakrand aan de bovenkant */
|
||||
.postit-note::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
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;
|
||||
z-index: 25;
|
||||
filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -238,6 +247,51 @@ $categories = [
|
||||
oncontextmenu="openCardContextMenu(event, <?= $cardJson ?>); return false;"
|
||||
class="brainstorm-card postit-note group relative p-4 border <?= $catConfig['border'] ?> <?= $catConfig['bg'] ?> transition-all duration-150 cursor-grab active:cursor-grabbing hover:-translate-y-1 flex flex-col justify-between"
|
||||
>
|
||||
<!-- Realistische 3D Rode Punaise (Pushpin) met metalen pin & schaduw conform referentie linksboven -->
|
||||
<div class="postit-pin" aria-hidden="true">
|
||||
<svg viewBox="0 0 28 32" class="w-full h-full overflow-visible">
|
||||
<defs>
|
||||
<!-- Schaduw van de naald op het papier -->
|
||||
<filter id="pinNeedleShadow" x="-20%" y="-20%" width="160%" height="160%">
|
||||
<feDropShadow dx="3" dy="4" stdDeviation="1.5" flood-opacity="0.35"/>
|
||||
</filter>
|
||||
<!-- Radiaal verloop voor de bolle kop van de punaise -->
|
||||
<radialGradient id="pinHeadGrad" cx="35%" cy="30%" r="65%">
|
||||
<stop offset="0%" stop-color="#ff8585"/>
|
||||
<stop offset="35%" stop-color="#dc2626"/>
|
||||
<stop offset="85%" stop-color="#991b1b"/>
|
||||
<stop offset="100%" stop-color="#5a0b0b"/>
|
||||
</radialGradient>
|
||||
<!-- Verloop voor de hals en basis ring van de punaise -->
|
||||
<linearGradient id="pinBodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#b91c1c"/>
|
||||
<stop offset="40%" stop-color="#ef4444"/>
|
||||
<stop offset="80%" stop-color="#991b1b"/>
|
||||
<stop offset="100%" stop-color="#7f1d1d"/>
|
||||
</linearGradient>
|
||||
<!-- Glans highlight op de kop -->
|
||||
<linearGradient id="pinHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Metalen naald die schuin in het papier prikt -->
|
||||
<path d="M14 20 L21 30" stroke="#71717a" stroke-width="2.5" stroke-linecap="round" filter="url(#pinNeedleShadow)"/>
|
||||
<path d="M14 20 L20.5 29.5" stroke="#e4e4e7" stroke-width="1.2" stroke-linecap="round"/>
|
||||
|
||||
<!-- Onderste rand / ring van de punaisekop -->
|
||||
<ellipse cx="14" cy="19" rx="7" ry="2.8" fill="#7f1d1d"/>
|
||||
<ellipse cx="14" cy="18" rx="6.5" ry="2.5" fill="url(#pinBodyGrad)"/>
|
||||
|
||||
<!-- Getailleerde taille / hals van de punaise -->
|
||||
<path d="M9 14 C9 17, 10 18.5, 14 18.5 C18 18.5, 19 17, 19 14 Z" fill="url(#pinBodyGrad)"/>
|
||||
|
||||
<!-- Bolle kop van de punaise (rood met 3D glans) -->
|
||||
<circle cx="14" cy="11" r="7.5" fill="url(#pinHeadGrad)"/>
|
||||
<!-- Reflectie highlight linksboven op de ronde kop -->
|
||||
<ellipse cx="11.5" cy="8.5" rx="3" ry="1.8" fill="url(#pinHighlight)" transform="rotate(-30 11.5 8.5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Top: Checkbox voor selectie + Roadmap badge -->
|
||||
<div class="flex items-center justify-between gap-2 mb-2">
|
||||
@@ -653,12 +707,18 @@ $categories = [
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="breakdownError" class="hidden p-4 rounded-xl bg-rose-50 dark:bg-rose-950/30 border border-rose-200 dark:border-rose-800 text-rose-800 dark:text-rose-200 text-xs">
|
||||
<div class="flex items-center space-x-2 font-bold mb-1">
|
||||
<i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 dark:text-rose-400"></i>
|
||||
<div id="breakdownError" class="hidden p-4 rounded-xl bg-rose-50 dark:bg-rose-950/30 border border-rose-200 dark:border-rose-800 text-rose-800 dark:text-rose-200 text-xs space-y-2">
|
||||
<div class="flex items-center space-x-2 font-bold">
|
||||
<i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 dark:text-rose-400 flex-shrink-0"></i>
|
||||
<span>Kon taken niet genereren</span>
|
||||
</div>
|
||||
<p id="breakdownErrorMsg" class="text-[11px] text-rose-700 dark:text-rose-300"></p>
|
||||
<p id="breakdownErrorMsg" class="text-[11px] text-rose-700 dark:text-rose-300 leading-relaxed"></p>
|
||||
<div class="pt-1">
|
||||
<button type="button" onclick="regenerateBreakdown()" class="inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-lg bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold transition cursor-pointer">
|
||||
<i data-lucide="refresh-cw" class="w-3 h-3"></i>
|
||||
<span>Opnieuw proberen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resultaat Container -->
|
||||
|
||||
Reference in New Issue
Block a user