janpeter visser
b4371f5afb
- scrum4me-*.md en MD3_Color_Scheme_Documentation.md verplaatst naar docs/ - Srum4MeIcons.html verplaatst naar docs/icons.html - theme.css verplaatst van root naar app/styles/theme.css - Import in globals.css bijgewerkt - Alle app-iconen vervangen door nieuw logo (icon-master-light.svg) - AppIcon component bijgewerkt met nieuw SVG - CLAUDE.md verwijzingen bijgewerkt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
384 lines
No EOL
14 KiB
HTML
384 lines
No EOL
14 KiB
HTML
<!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> |