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>
This commit is contained in:
parent
ffda65490f
commit
4dd62c199c
25 changed files with 1794 additions and 100 deletions
384
Srum4MeIcons.html
Normal file
384
Srum4MeIcons.html
Normal file
|
|
@ -0,0 +1,384 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Scrum4Me — Icoon Concepten</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&display=swap');
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0f1117;
|
||||
--surface: #181c27;
|
||||
--border: #252a38;
|
||||
--accent: #4f6ef7;
|
||||
--accent2: #7c3aed;
|
||||
--accent3: #06b6d4;
|
||||
--text: #e8eaf0;
|
||||
--muted: #6b7280;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'DM Mono', monospace;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 24px;
|
||||
gap: 64px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin-top: 8px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.concept {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label strong {
|
||||
display: block;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Icon containers — three sizes */
|
||||
.sizes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 22%;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon-wrap:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 40px rgba(79, 110, 247, 0.2);
|
||||
}
|
||||
|
||||
.icon-wrap.xl { width: 120px; height: 120px; border-radius: 26px; }
|
||||
.icon-wrap.md { width: 64px; height: 64px; border-radius: 14px; }
|
||||
.icon-wrap.sm { width: 32px; height: 32px; border-radius: 7px; }
|
||||
|
||||
.size-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* =====================
|
||||
CONCEPT 2 — S4M Lettermerk
|
||||
===================== */
|
||||
|
||||
.s4m-xl { background: linear-gradient(135deg, #1a1f35 0%, #0f1117 100%); }
|
||||
|
||||
/* =====================
|
||||
CONCEPT 3 — Iteratielus
|
||||
===================== */
|
||||
|
||||
.loop-xl { background: linear-gradient(135deg, #0d1f2d 0%, #0f1117 100%); }
|
||||
|
||||
/* =====================
|
||||
CONCEPT 5 — Raket
|
||||
===================== */
|
||||
|
||||
.rocket-xl { background: linear-gradient(135deg, #1a1028 0%, #0f1117 100%); }
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Scrum4Me — Icoon Concepten</h1>
|
||||
<p>2 · S4M Lettermerk · 3 · Iteratielus · 5 · Raket</p>
|
||||
</header>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<!-- ======================== CONCEPT 2: S4M LETTERMERK ======================== -->
|
||||
<div class="concept">
|
||||
<div class="sizes">
|
||||
|
||||
<!-- XL -->
|
||||
<div class="icon-wrap xl s4m-xl">
|
||||
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g2a" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#7c9fff"/>
|
||||
<stop offset="100%" stop-color="#4f6ef7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- S -->
|
||||
<path d="M14 26C14 22 17 19 22 19H32C36 19 39 21.5 39 25.5C39 29 36.5 31 33 32L22 35C18 36.5 15 39 15 43.5C15 48 18.5 51 23 51H34C38.5 51 42 48 42 44"
|
||||
stroke="url(#g2a)" stroke-width="4.5" stroke-linecap="round" fill="none"/>
|
||||
<!-- 4 -->
|
||||
<path d="M52 19L44 37H62" stroke="url(#g2a)" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<line x1="55" y1="30" x2="55" y2="51" stroke="url(#g2a)" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<!-- M -->
|
||||
<path d="M14 59L14 73M14 59L21 68L28 59M28 59L28 73" stroke="url(#g2a)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- dot accent -->
|
||||
<circle cx="65" cy="61" r="4" fill="#4f6ef7" opacity="0.6"/>
|
||||
<circle cx="65" cy="61" r="2" fill="#7c9fff"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- MD + SM -->
|
||||
<div class="size-row">
|
||||
<div class="icon-wrap md s4m-xl">
|
||||
<svg width="42" height="42" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g2b" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#7c9fff"/>
|
||||
<stop offset="100%" stop-color="#4f6ef7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M14 26C14 22 17 19 22 19H32C36 19 39 21.5 39 25.5C39 29 36.5 31 33 32L22 35C18 36.5 15 39 15 43.5C15 48 18.5 51 23 51H34C38.5 51 42 48 42 44"
|
||||
stroke="url(#g2b)" stroke-width="4.5" stroke-linecap="round" fill="none"/>
|
||||
<path d="M52 19L44 37H62" stroke="url(#g2b)" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<line x1="55" y1="30" x2="55" y2="51" stroke="url(#g2b)" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<path d="M14 59L14 73M14 59L21 68L28 59M28 59L28 73" stroke="url(#g2b)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<circle cx="65" cy="61" r="4" fill="#4f6ef7" opacity="0.6"/>
|
||||
<circle cx="65" cy="61" r="2" fill="#7c9fff"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon-wrap sm s4m-xl">
|
||||
<svg width="20" height="20" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 26C14 22 17 19 22 19H32C36 19 39 21.5 39 25.5C39 29 36.5 31 33 32L22 35C18 36.5 15 39 15 43.5C15 48 18.5 51 23 51H34C38.5 51 42 48 42 44"
|
||||
stroke="#4f6ef7" stroke-width="5" stroke-linecap="round" fill="none"/>
|
||||
<path d="M52 19L44 37H62" stroke="#4f6ef7" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<line x1="55" y1="30" x2="55" y2="51" stroke="#4f6ef7" stroke-width="5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="label">
|
||||
<strong>02 — S4M Lettermerk</strong>
|
||||
S · 4 · M als geïntegreerd monogram<br>accent-dot als leesteken
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================== CONCEPT 3: ITERATIELUS ======================== -->
|
||||
<div class="concept">
|
||||
<div class="sizes">
|
||||
|
||||
<!-- XL -->
|
||||
<div class="icon-wrap xl loop-xl">
|
||||
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g3a" x1="0" y1="40" x2="80" y2="40" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#06b6d4"/>
|
||||
<stop offset="60%" stop-color="#4f6ef7"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Open arc — 300 degrees, gap at top-right -->
|
||||
<path d="M40 12
|
||||
A28 28 0 1 1 62.2 26"
|
||||
stroke="url(#g3a)"
|
||||
stroke-width="6"
|
||||
stroke-linecap="round"
|
||||
fill="none"/>
|
||||
<!-- Arrowhead at the open end -->
|
||||
<path d="M62.2 26 L74 20 M62.2 26 L68 38"
|
||||
stroke="#7c3aed"
|
||||
stroke-width="5.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="none"/>
|
||||
<!-- Centre dot -->
|
||||
<circle cx="40" cy="40" r="5" fill="url(#g3a)" opacity="0.5"/>
|
||||
<circle cx="40" cy="40" r="2.5" fill="#06b6d4"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- MD + SM -->
|
||||
<div class="size-row">
|
||||
<div class="icon-wrap md loop-xl">
|
||||
<svg width="42" height="42" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g3b" x1="0" y1="40" x2="80" y2="40" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#06b6d4"/>
|
||||
<stop offset="60%" stop-color="#4f6ef7"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M40 12 A28 28 0 1 1 62.2 26" stroke="url(#g3b)" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<path d="M62.2 26 L74 20 M62.2 26 L68 38" stroke="#7c3aed" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<circle cx="40" cy="40" r="5" fill="url(#g3b)" opacity="0.5"/>
|
||||
<circle cx="40" cy="40" r="2.5" fill="#06b6d4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon-wrap sm loop-xl">
|
||||
<svg width="20" height="20" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40 12 A28 28 0 1 1 62.2 26" stroke="#06b6d4" stroke-width="7" stroke-linecap="round" fill="none"/>
|
||||
<path d="M62.2 26 L74 20 M62.2 26 L68 38" stroke="#7c3aed" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="label">
|
||||
<strong>03 — Iteratielus</strong>
|
||||
Open boog · gradient cyan→indigo→violet<br>pijlpunt markeert de opening
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================== CONCEPT 5: RAKET ======================== -->
|
||||
<div class="concept">
|
||||
<div class="sizes">
|
||||
|
||||
<!-- XL -->
|
||||
<div class="icon-wrap xl rocket-xl">
|
||||
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g5a" x1="40" y1="8" x2="40" y2="72" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#a78bfa"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5b" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#4f6ef7" stop-opacity="0.6"/>
|
||||
<stop offset="100%" stop-color="#7c3aed" stop-opacity="0.6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Block 1 (PBI) — bottom -->
|
||||
<rect x="28" y="58" width="24" height="10" rx="3" fill="#4f6ef7" opacity="0.5"/>
|
||||
<rect x="28" y="58" width="24" height="10" rx="3" stroke="#4f6ef7" stroke-width="1" fill="none"/>
|
||||
|
||||
<!-- Block 2 (Story) — middle -->
|
||||
<rect x="22" y="44" width="36" height="12" rx="3" fill="#6366f1" opacity="0.65"/>
|
||||
<rect x="22" y="44" width="36" height="12" rx="3" stroke="#818cf8" stroke-width="1" fill="none"/>
|
||||
|
||||
<!-- Block 3 (Task) — upper body -->
|
||||
<rect x="26" y="30" width="28" height="12" rx="3" fill="#7c3aed" opacity="0.8"/>
|
||||
<rect x="26" y="30" width="28" height="12" rx="3" stroke="#a78bfa" stroke-width="1" fill="none"/>
|
||||
|
||||
<!-- Rocket nose -->
|
||||
<path d="M40 8 C34 8 26 18 26 30 H54 C54 18 46 8 40 8Z"
|
||||
fill="url(#g5a)" opacity="0.9"/>
|
||||
|
||||
<!-- Window -->
|
||||
<circle cx="40" cy="22" r="5" fill="#0f1117" opacity="0.6"/>
|
||||
<circle cx="40" cy="22" r="3" fill="#e0e7ff" opacity="0.9"/>
|
||||
|
||||
<!-- Fins -->
|
||||
<path d="M26 52 L18 62 L26 62 Z" fill="#4f6ef7" opacity="0.5"/>
|
||||
<path d="M54 52 L62 62 L54 62 Z" fill="#4f6ef7" opacity="0.5"/>
|
||||
|
||||
<!-- Exhaust flame -->
|
||||
<path d="M33 68 Q37 76 40 72 Q43 76 47 68" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.8"/>
|
||||
<path d="M36 68 Q40 73 44 68" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- MD + SM -->
|
||||
<div class="size-row">
|
||||
<div class="icon-wrap md rocket-xl">
|
||||
<svg width="42" height="42" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g5c" x1="40" y1="8" x2="40" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#a78bfa"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="28" y="58" width="24" height="10" rx="3" fill="#4f6ef7" opacity="0.5"/>
|
||||
<rect x="22" y="44" width="36" height="12" rx="3" fill="#6366f1" opacity="0.65"/>
|
||||
<rect x="26" y="30" width="28" height="12" rx="3" fill="#7c3aed" opacity="0.8"/>
|
||||
<path d="M40 8 C34 8 26 18 26 30 H54 C54 18 46 8 40 8Z" fill="url(#g5c)" opacity="0.9"/>
|
||||
<circle cx="40" cy="22" r="5" fill="#0f1117" opacity="0.6"/>
|
||||
<circle cx="40" cy="22" r="3" fill="#e0e7ff" opacity="0.9"/>
|
||||
<path d="M26 52 L18 62 L26 62 Z" fill="#4f6ef7" opacity="0.5"/>
|
||||
<path d="M54 52 L62 62 L54 62 Z" fill="#4f6ef7" opacity="0.5"/>
|
||||
<path d="M33 68 Q37 76 40 72 Q43 76 47 68" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon-wrap sm rocket-xl">
|
||||
<svg width="20" height="20" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="28" y="56" width="24" height="12" rx="3" fill="#4f6ef7" opacity="0.6"/>
|
||||
<rect x="22" y="40" width="36" height="14" rx="3" fill="#6366f1" opacity="0.75"/>
|
||||
<rect x="26" y="24" width="28" height="14" rx="3" fill="#7c3aed" opacity="0.9"/>
|
||||
<path d="M40 6 C34 6 26 16 26 24 H54 C54 16 46 6 40 6Z" fill="#a78bfa"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="label">
|
||||
<strong>05 — De Raket</strong>
|
||||
3 blokken (PBI · story · taak) die opstijgen<br>neus · vinnen · uitlaatpit
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>Scrum4Me · Icoon Concepten v0.1 · april 2026</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue