feat: ST-201-ST-210 M2 stories, drag-and-drop en Zustand stores
- usePlannerStore met pbiOrder/storyOrder init/reorder/rollback (ST-201) - useSelectionStore uitgebreid met selectedStoryId en clearSelection (ST-202) - PBI drag-and-drop binnen prioriteitsgroep via dnd-kit (ST-203) - PBI slepen over prioriteitsgrens wijzigt priority (ST-204) - Stories als blokken met prioriteit- en statusbadge (ST-205/ST-206) - Story drag-and-drop horizontaal binnen en tussen groepen (ST-207) - Story detail slide-over met bewerkformulier (ST-208) - Story verwijderen met bevestigingsstap (ST-209) - Filter op status en prioriteit in rechterpaneel (ST-210) - Fix: infinite loop in useEffect door stabiele string dependency Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
BIN
.icons/icon-512.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
92
.icons/icon-master.svg
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Background gradient -->
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#1a1028"/>
|
||||
<stop offset="100%" stop-color="#0d0a14"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Rocket nose gradient -->
|
||||
<linearGradient id="nose" x1="256" y1="52" x2="256" y2="210" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#c4b5fd"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filter -->
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Flame glow -->
|
||||
<filter id="flame-glow" x="-40%" y="-40%" width="180%" height="180%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background rounded rect -->
|
||||
<rect width="512" height="512" rx="114" fill="url(#bg)"/>
|
||||
|
||||
<!-- Subtle radial glow behind rocket -->
|
||||
<ellipse cx="256" cy="270" rx="140" ry="160" fill="#7c3aed" opacity="0.07"/>
|
||||
|
||||
<!-- ── BLOCK 1 (PBI) — bottom ── -->
|
||||
<rect x="178" y="374" width="156" height="64" rx="14" fill="#3b55c4" opacity="0.55"/>
|
||||
<rect x="178" y="374" width="156" height="64" rx="14" stroke="#4f6ef7" stroke-width="2" fill="none"/>
|
||||
<!-- PBI label dots -->
|
||||
<circle cx="210" cy="406" r="5" fill="#7c9fff" opacity="0.7"/>
|
||||
<circle cx="228" cy="406" r="5" fill="#7c9fff" opacity="0.5"/>
|
||||
<circle cx="246" cy="406" r="5" fill="#7c9fff" opacity="0.3"/>
|
||||
|
||||
<!-- ── BLOCK 2 (Story) — middle ── -->
|
||||
<rect x="148" y="294" width="216" height="76" rx="14" fill="#4c52b8" opacity="0.7"/>
|
||||
<rect x="148" y="294" width="216" height="76" rx="14" stroke="#818cf8" stroke-width="2" fill="none"/>
|
||||
<!-- Story label line -->
|
||||
<rect x="174" y="322" width="100" height="6" rx="3" fill="#a5b4fc" opacity="0.5"/>
|
||||
<rect x="174" y="338" width="68" height="6" rx="3" fill="#a5b4fc" opacity="0.3"/>
|
||||
|
||||
<!-- ── BLOCK 3 (Task) — upper body ── -->
|
||||
<rect x="164" y="210" width="184" height="80" rx="14" fill="#6d28d9" opacity="0.85"/>
|
||||
<rect x="164" y="210" width="184" height="80" rx="14" stroke="#a78bfa" stroke-width="2" fill="none"/>
|
||||
<!-- Task checkmark -->
|
||||
<path d="M196 252 L212 268 L240 238" stroke="#c4b5fd" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.8"/>
|
||||
|
||||
<!-- ── ROCKET NOSE ── -->
|
||||
<path d="M256 52 C224 52 164 112 164 210 H348 C348 112 288 52 256 52Z"
|
||||
fill="url(#nose)" opacity="0.95" filter="url(#glow)"/>
|
||||
|
||||
<!-- Nose highlight -->
|
||||
<path d="M256 70 C238 70 200 118 196 190"
|
||||
stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.15" fill="none"/>
|
||||
|
||||
<!-- ── WINDOW ── -->
|
||||
<circle cx="256" cy="148" r="34" fill="#0d0a14" opacity="0.65"/>
|
||||
<circle cx="256" cy="148" r="26" fill="#ddd6fe" opacity="0.12"/>
|
||||
<circle cx="256" cy="148" r="18" fill="#ede9fe" opacity="0.9"/>
|
||||
<!-- Window shine -->
|
||||
<circle cx="248" cy="140" r="5" fill="white" opacity="0.6"/>
|
||||
|
||||
<!-- ── FINS ── -->
|
||||
<path d="M164 330 L110 400 L164 400 Z" fill="#3b55c4" opacity="0.55"/>
|
||||
<path d="M164 330 L110 400 L164 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
|
||||
<path d="M348 330 L402 400 L348 400 Z" fill="#3b55c4" opacity="0.55"/>
|
||||
<path d="M348 330 L402 400 L348 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
|
||||
|
||||
<!-- ── EXHAUST FLAME ── -->
|
||||
<path d="M214 438 Q235 480 256 462 Q277 480 298 438"
|
||||
stroke="#f59e0b" stroke-width="10" stroke-linecap="round" fill="none"
|
||||
opacity="0.9" filter="url(#flame-glow)"/>
|
||||
<path d="M228 438 Q242 468 256 455 Q270 468 284 438"
|
||||
stroke="#fcd34d" stroke-width="7" stroke-linecap="round" fill="none"
|
||||
opacity="0.75"/>
|
||||
<path d="M238 438 Q248 458 256 450 Q264 458 274 438"
|
||||
stroke="#fef3c7" stroke-width="4" stroke-linecap="round" fill="none"
|
||||
opacity="0.6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
125
.icons/icons/INSTALL.md
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
# Scrum4Me — Icon installatie voor Next.js
|
||||
|
||||
## Bestandslocaties
|
||||
|
||||
Kopieer de bestanden naar de juiste plek in je Next.js App Router project:
|
||||
|
||||
```
|
||||
app/
|
||||
favicon.ico ← favicon.ico
|
||||
icon-192.png ← icon-192.png (rename: icon.png)
|
||||
apple-icon.png ← icon-180.png (rename: apple-icon.png)
|
||||
|
||||
public/
|
||||
icon-512.png ← voor PWA manifest
|
||||
icon-192.png ← voor PWA manifest
|
||||
|
||||
components/
|
||||
shared/
|
||||
app-icon.tsx ← herbruikbare React component
|
||||
```
|
||||
|
||||
## Stap 1 — Favicon en app icons
|
||||
|
||||
```bash
|
||||
# Kopieer naar app/ map (Next.js pikt deze automatisch op)
|
||||
cp favicon.ico ../app/favicon.ico
|
||||
cp icon-192.png ../app/icon.png
|
||||
cp icon-180.png ../app/apple-icon.png
|
||||
|
||||
# Kopieer naar public/ voor manifest
|
||||
cp icon-512.png ../public/icon-512.png
|
||||
cp icon-192.png ../public/icon-192.png
|
||||
```
|
||||
|
||||
## Stap 2 — Metadata in app/layout.tsx
|
||||
|
||||
```tsx
|
||||
// app/layout.tsx
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: 'Scrum4Me',
|
||||
template: '%s — Scrum4Me',
|
||||
},
|
||||
description: 'Lichtgewicht Scrum-planner voor solo developers en kleine teams',
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: '/favicon.ico', sizes: '48x48' },
|
||||
{ url: '/icon.png', sizes: '192x192', type: 'image/png' },
|
||||
],
|
||||
apple: [
|
||||
{ url: '/apple-icon.png', sizes: '180x180', type: 'image/png' },
|
||||
],
|
||||
},
|
||||
manifest: '/manifest.json',
|
||||
}
|
||||
```
|
||||
|
||||
## Stap 3 — PWA manifest (optioneel)
|
||||
|
||||
Maak `public/manifest.json` aan:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Scrum4Me",
|
||||
"short_name": "Scrum4Me",
|
||||
"description": "Lichtgewicht Scrum-planner voor solo developers en kleine teams",
|
||||
"start_url": "/dashboard",
|
||||
"display": "standalone",
|
||||
"background_color": "#0d0a14",
|
||||
"theme_color": "#7c3aed",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Stap 4 — AppIcon component gebruiken
|
||||
|
||||
```tsx
|
||||
// In de navigatiebalk:
|
||||
import { AppIcon } from '@/components/shared/app-icon'
|
||||
|
||||
export function Navbar() {
|
||||
return (
|
||||
<nav>
|
||||
<div className="flex items-center gap-2">
|
||||
<AppIcon size={28} />
|
||||
<span className="font-semibold text-foreground">Scrum4Me</span>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Gegenereerde bestanden — overzicht
|
||||
|
||||
| Bestand | Formaat | Gebruik |
|
||||
|---|---|---|
|
||||
| `favicon.ico` | ICO (16+32+48) | Browser tabblad |
|
||||
| `icon-16.png` | PNG 16×16 | Browser fallback |
|
||||
| `icon-32.png` | PNG 32×32 | Browser retina tabblad |
|
||||
| `icon-48.png` | PNG 48×48 | Windows taskbar |
|
||||
| `icon-76.png` | PNG 76×76 | iPad non-retina |
|
||||
| `icon-120.png` | PNG 120×120 | iPhone retina |
|
||||
| `icon-144.png` | PNG 144×144 | Windows tile |
|
||||
| `icon-152.png` | PNG 152×152 | iPad retina |
|
||||
| `icon-180.png` | PNG 180×180 | Apple touch icon |
|
||||
| `icon-192.png` | PNG 192×192 | Android / PWA |
|
||||
| `icon-512.png` | PNG 512×512 | PWA splash / stores |
|
||||
| `icon-master.svg` | SVG | Bronbestand (master) |
|
||||
| `icon-simple.svg` | SVG | Vereenvoudigd voor kleine formaten |
|
||||
| `app-icon.tsx` | React | Inline SVG component |
|
||||
70
.icons/icons/app-icon.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
// components/shared/app-icon.tsx
|
||||
// Scrum4Me app icon — concept 5 (Rocket)
|
||||
// Gebruik: <AppIcon size={32} /> of <AppIcon size={64} className="..." />
|
||||
|
||||
interface AppIconProps {
|
||||
size?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function AppIcon({ size = 32, className }: AppIconProps) {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 512 512"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
aria-label="Scrum4Me"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stopColor="#1a1028"/>
|
||||
<stop offset="100%" stopColor="#0d0a14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s4m-nose" x1="256" y1="60" x2="256" y2="212" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stopColor="#c4b5fd"/>
|
||||
<stop offset="100%" stopColor="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{/* Background */}
|
||||
<rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>
|
||||
|
||||
{/* Block 1 — PBI */}
|
||||
<rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>
|
||||
|
||||
{/* Block 2 — Story */}
|
||||
<rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>
|
||||
|
||||
{/* Block 3 — Task */}
|
||||
<rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>
|
||||
|
||||
{/* Rocket nose */}
|
||||
<path
|
||||
d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z"
|
||||
fill="url(#s4m-nose)"
|
||||
/>
|
||||
|
||||
{/* Window */}
|
||||
<circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
|
||||
<circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
|
||||
<circle cx="248" cy="144" r="6" fill="white" opacity="0.5"/>
|
||||
|
||||
{/* Fins */}
|
||||
<path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
|
||||
<path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>
|
||||
|
||||
{/* Flame */}
|
||||
<path
|
||||
d="M212 432 Q244 472 256 456 Q268 472 300 432"
|
||||
stroke="#f59e0b" strokeWidth="12" strokeLinecap="round" fill="none" opacity="0.95"
|
||||
/>
|
||||
<path
|
||||
d="M232 432 Q248 460 256 448 Q264 460 280 432"
|
||||
stroke="#fef3c7" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.7"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
BIN
.icons/icons/favicon.ico
Normal file
|
After Width: | Height: | Size: 569 B |
BIN
.icons/icons/icon-120.png
Normal file
|
After Width: | Height: | Size: 7 KiB |
BIN
.icons/icons/icon-144.png
Normal file
|
After Width: | Height: | Size: 8.7 KiB |
BIN
.icons/icons/icon-152.png
Normal file
|
After Width: | Height: | Size: 9.3 KiB |
BIN
.icons/icons/icon-16.png
Normal file
|
After Width: | Height: | Size: 573 B |
BIN
.icons/icons/icon-180.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
.icons/icons/icon-192.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
.icons/icons/icon-32.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
.icons/icons/icon-48.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
.icons/icons/icon-512.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
.icons/icons/icon-76.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
92
.icons/icons/icon-master.svg
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Background gradient -->
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#1a1028"/>
|
||||
<stop offset="100%" stop-color="#0d0a14"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Rocket nose gradient -->
|
||||
<linearGradient id="nose" x1="256" y1="52" x2="256" y2="210" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#c4b5fd"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filter -->
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Flame glow -->
|
||||
<filter id="flame-glow" x="-40%" y="-40%" width="180%" height="180%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background rounded rect -->
|
||||
<rect width="512" height="512" rx="114" fill="url(#bg)"/>
|
||||
|
||||
<!-- Subtle radial glow behind rocket -->
|
||||
<ellipse cx="256" cy="270" rx="140" ry="160" fill="#7c3aed" opacity="0.07"/>
|
||||
|
||||
<!-- ── BLOCK 1 (PBI) — bottom ── -->
|
||||
<rect x="178" y="374" width="156" height="64" rx="14" fill="#3b55c4" opacity="0.55"/>
|
||||
<rect x="178" y="374" width="156" height="64" rx="14" stroke="#4f6ef7" stroke-width="2" fill="none"/>
|
||||
<!-- PBI label dots -->
|
||||
<circle cx="210" cy="406" r="5" fill="#7c9fff" opacity="0.7"/>
|
||||
<circle cx="228" cy="406" r="5" fill="#7c9fff" opacity="0.5"/>
|
||||
<circle cx="246" cy="406" r="5" fill="#7c9fff" opacity="0.3"/>
|
||||
|
||||
<!-- ── BLOCK 2 (Story) — middle ── -->
|
||||
<rect x="148" y="294" width="216" height="76" rx="14" fill="#4c52b8" opacity="0.7"/>
|
||||
<rect x="148" y="294" width="216" height="76" rx="14" stroke="#818cf8" stroke-width="2" fill="none"/>
|
||||
<!-- Story label line -->
|
||||
<rect x="174" y="322" width="100" height="6" rx="3" fill="#a5b4fc" opacity="0.5"/>
|
||||
<rect x="174" y="338" width="68" height="6" rx="3" fill="#a5b4fc" opacity="0.3"/>
|
||||
|
||||
<!-- ── BLOCK 3 (Task) — upper body ── -->
|
||||
<rect x="164" y="210" width="184" height="80" rx="14" fill="#6d28d9" opacity="0.85"/>
|
||||
<rect x="164" y="210" width="184" height="80" rx="14" stroke="#a78bfa" stroke-width="2" fill="none"/>
|
||||
<!-- Task checkmark -->
|
||||
<path d="M196 252 L212 268 L240 238" stroke="#c4b5fd" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.8"/>
|
||||
|
||||
<!-- ── ROCKET NOSE ── -->
|
||||
<path d="M256 52 C224 52 164 112 164 210 H348 C348 112 288 52 256 52Z"
|
||||
fill="url(#nose)" opacity="0.95" filter="url(#glow)"/>
|
||||
|
||||
<!-- Nose highlight -->
|
||||
<path d="M256 70 C238 70 200 118 196 190"
|
||||
stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.15" fill="none"/>
|
||||
|
||||
<!-- ── WINDOW ── -->
|
||||
<circle cx="256" cy="148" r="34" fill="#0d0a14" opacity="0.65"/>
|
||||
<circle cx="256" cy="148" r="26" fill="#ddd6fe" opacity="0.12"/>
|
||||
<circle cx="256" cy="148" r="18" fill="#ede9fe" opacity="0.9"/>
|
||||
<!-- Window shine -->
|
||||
<circle cx="248" cy="140" r="5" fill="white" opacity="0.6"/>
|
||||
|
||||
<!-- ── FINS ── -->
|
||||
<path d="M164 330 L110 400 L164 400 Z" fill="#3b55c4" opacity="0.55"/>
|
||||
<path d="M164 330 L110 400 L164 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
|
||||
<path d="M348 330 L402 400 L348 400 Z" fill="#3b55c4" opacity="0.55"/>
|
||||
<path d="M348 330 L402 400 L348 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
|
||||
|
||||
<!-- ── EXHAUST FLAME ── -->
|
||||
<path d="M214 438 Q235 480 256 462 Q277 480 298 438"
|
||||
stroke="#f59e0b" stroke-width="10" stroke-linecap="round" fill="none"
|
||||
opacity="0.9" filter="url(#flame-glow)"/>
|
||||
<path d="M228 438 Q242 468 256 455 Q270 468 284 438"
|
||||
stroke="#fcd34d" stroke-width="7" stroke-linecap="round" fill="none"
|
||||
opacity="0.75"/>
|
||||
<path d="M238 438 Q248 458 256 450 Q264 458 274 438"
|
||||
stroke="#fef3c7" stroke-width="4" stroke-linecap="round" fill="none"
|
||||
opacity="0.6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
40
.icons/icons/icon-simple.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-s" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#1a1028"/>
|
||||
<stop offset="100%" stop-color="#0d0a14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="nose-s" x1="256" y1="60" x2="256" y2="230" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#c4b5fd"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect width="512" height="512" rx="114" fill="url(#bg-s)"/>
|
||||
|
||||
<!-- Block 1 (PBI) -->
|
||||
<rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>
|
||||
|
||||
<!-- Block 2 (Story) -->
|
||||
<rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>
|
||||
|
||||
<!-- Block 3 (Task) -->
|
||||
<rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>
|
||||
|
||||
<!-- Rocket nose -->
|
||||
<path d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z" fill="url(#nose-s)"/>
|
||||
|
||||
<!-- Window -->
|
||||
<circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
|
||||
<circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
|
||||
|
||||
<!-- Fins -->
|
||||
<path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
|
||||
<path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>
|
||||
|
||||
<!-- Flame -->
|
||||
<path d="M212 432 Q244 472 256 456 Q268 472 300 432"
|
||||
stroke="#f59e0b" stroke-width="12" stroke-linecap="round" fill="none" opacity="0.95"/>
|
||||
<path d="M232 432 Q248 460 256 448 Q264 460 280 432"
|
||||
stroke="#fef3c7" stroke-width="7" stroke-linecap="round" fill="none" opacity="0.7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |