cesnimda
133 lines
11 KiB
XML
133 lines
11 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 1040" font-family="Segoe UI, Arial, sans-serif">
|
|
<rect width="1440" height="1040" fill="#05070B"/>
|
|
<text x="60" y="44" fill="#E5A93D" font-family="Consolas, monospace" font-size="12">M5: navigation & control states</text>
|
|
|
|
<!-- (a) default header -->
|
|
<text x="60" y="86" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(a) default · 72px</text>
|
|
<rect x="60" y="100" width="1320" height="72" fill="#0B0E14" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<rect x="90" y="120" width="32" height="32" rx="8" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="106" y="141" fill="#E8ECF2" font-family="Consolas, monospace" font-size="13" font-weight="bold" text-anchor="middle">CB</text>
|
|
<text x="380" y="141" fill="#9AA4B2" font-size="14">Projects</text>
|
|
<text x="470" y="141" fill="#9AA4B2" font-size="14">Experience</text>
|
|
<text x="580" y="141" fill="#9AA4B2" font-size="14">About</text>
|
|
<text x="655" y="141" fill="#9AA4B2" font-size="14">Contact</text>
|
|
<rect x="960" y="122" width="88" height="28" rx="14" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<rect x="963" y="125" width="41" height="22" rx="11" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="983" y="140" fill="#E8ECF2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">EN</text>
|
|
<text x="1026" y="140" fill="#9AA4B2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">NO</text>
|
|
<circle cx="1082" cy="136" r="14" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<rect x="1116" y="120" width="164" height="32" rx="8" fill="#3ECFAE"/>
|
|
<text x="1176" y="141" fill="#062A22" font-size="13" font-weight="600" text-anchor="middle">Download CV</text>
|
|
<line x1="1250" y1="126" x2="1250" y2="146" stroke="#062A22" stroke-opacity="0.3"/>
|
|
<path d="M1258 133 l6 6 l6 -6" fill="none" stroke="#062A22" stroke-width="1.8"/>
|
|
|
|
<!-- (b) scrolled -->
|
|
<text x="60" y="216" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(b) scrolled · 56px · backdrop blur + hairline · hover on "Projects" (underline draw) · current page "About"</text>
|
|
<rect x="60" y="230" width="1320" height="56" fill="#0B0E14" fill-opacity="0.85" stroke="#E8ECF2" stroke-opacity="0.12"/>
|
|
<rect x="90" y="244" width="28" height="28" rx="7" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="104" y="263" fill="#E8ECF2" font-family="Consolas, monospace" font-size="12" font-weight="bold" text-anchor="middle">CB</text>
|
|
<text x="380" y="264" fill="#E8ECF2" font-size="13">Projects</text>
|
|
<line x1="380" y1="271" x2="410" y2="271" stroke="#3ECFAE" stroke-width="2"/>
|
|
<text x="470" y="264" fill="#9AA4B2" font-size="13">Experience</text>
|
|
<text x="570" y="264" fill="#E8ECF2" font-size="13">About</text>
|
|
<line x1="570" y1="271" x2="608" y2="271" stroke="#3ECFAE" stroke-width="2" stroke-opacity="0.6"/>
|
|
<text x="645" y="264" fill="#9AA4B2" font-size="13">Contact</text>
|
|
<rect x="1136" y="243" width="144" height="30" rx="8" fill="#3ECFAE"/>
|
|
<text x="1198" y="263" fill="#062A22" font-size="12" font-weight="600" text-anchor="middle">Download CV ▾</text>
|
|
|
|
<!-- (c) CV split open -->
|
|
<text x="60" y="336" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(c) CV split-button open · locale default first · file sizes · keyboard: ↓↑ Esc</text>
|
|
<rect x="60" y="350" width="164" height="32" rx="8" fill="#3ECFAE"/>
|
|
<text x="120" y="371" fill="#062A22" font-size="13" font-weight="600" text-anchor="middle">Download CV</text>
|
|
<line x1="194" y1="356" x2="194" y2="376" stroke="#062A22" stroke-opacity="0.3"/>
|
|
<path d="M202 366 l6 -6 l6 6" fill="none" stroke="#062A22" stroke-width="1.8"/>
|
|
<rect x="60" y="392" width="280" height="104" rx="12" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<rect x="68" y="402" width="264" height="40" rx="8" fill="#11151D"/>
|
|
<rect x="80" y="412" width="30" height="20" rx="10" fill="#0F2B24"/>
|
|
<text x="95" y="426" fill="#3ECFAE" font-family="Consolas, monospace" font-size="10" text-anchor="middle">EN</text>
|
|
<text x="122" y="427" fill="#E8ECF2" font-size="13">English CV</text>
|
|
<text x="322" y="427" fill="#5C6675" font-family="Consolas, monospace" font-size="11" text-anchor="end">pdf · 180 kB</text>
|
|
<rect x="80" y="454" width="30" height="20" rx="10" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="95" y="468" fill="#9AA4B2" font-family="Consolas, monospace" font-size="10" text-anchor="middle">NO</text>
|
|
<text x="122" y="469" fill="#9AA4B2" font-size="13">Norsk CV</text>
|
|
<text x="322" y="469" fill="#5C6675" font-family="Consolas, monospace" font-size="11" text-anchor="end">pdf · 172 kB</text>
|
|
|
|
<!-- (d) language switch states -->
|
|
<text x="480" y="336" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(d) language switch · EN active / NO active / focus-visible · thumb slides 160ms · aria toggle group</text>
|
|
<g>
|
|
<rect x="480" y="352" width="88" height="28" rx="14" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<rect x="483" y="355" width="41" height="22" rx="11" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="503" y="370" fill="#E8ECF2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">EN</text>
|
|
<text x="546" y="370" fill="#9AA4B2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">NO</text>
|
|
|
|
<rect x="600" y="352" width="88" height="28" rx="14" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<rect x="644" y="355" width="41" height="22" rx="11" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="620" y="370" fill="#9AA4B2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">EN</text>
|
|
<text x="664" y="370" fill="#E8ECF2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">NO</text>
|
|
|
|
<rect x="720" y="352" width="88" height="28" rx="14" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<rect x="718" y="350" width="92" height="32" rx="16" fill="none" stroke="#3ECFAE" stroke-width="2"/>
|
|
<rect x="723" y="355" width="41" height="22" rx="11" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="743" y="370" fill="#E8ECF2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">EN</text>
|
|
<text x="786" y="370" fill="#9AA4B2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">NO</text>
|
|
</g>
|
|
|
|
<!-- (e) first-visit language hint -->
|
|
<text x="480" y="430" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(e) first-visit hint (browser prefers nb-NO) · shown once · dismissible · never auto-redirects</text>
|
|
<rect x="480" y="444" width="620" height="44" rx="8" fill="#171C26" stroke="#3ECFAE" stroke-opacity="0.3"/>
|
|
<text x="500" y="471" fill="#E8ECF2" font-size="13">Denne siden finnes på norsk</text>
|
|
<rect x="700" y="452" width="66" height="28" rx="8" fill="#3ECFAE"/>
|
|
<text x="733" y="471" fill="#062A22" font-size="12" font-weight="600" text-anchor="middle">Bytt</text>
|
|
<text x="1076" y="472" fill="#9AA4B2" font-size="14" text-anchor="end">✕</text>
|
|
|
|
<!-- (f) buttons row -->
|
|
<text x="60" y="560" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(f) buttons: primary rest/hover/focus · secondary · ghost · disabled</text>
|
|
<rect x="60" y="576" width="150" height="44" rx="8" fill="#3ECFAE"/>
|
|
<text x="135" y="603" fill="#062A22" font-size="14" font-weight="600" text-anchor="middle">Primary</text>
|
|
<rect x="230" y="572" width="150" height="44" rx="8" fill="#54DBBC"/>
|
|
<text x="305" y="599" fill="#062A22" font-size="14" font-weight="600" text-anchor="middle">Hover +1px ↑</text>
|
|
<rect x="400" y="576" width="150" height="44" rx="8" fill="#3ECFAE"/>
|
|
<rect x="396" y="572" width="158" height="52" rx="10" fill="none" stroke="#3ECFAE" stroke-width="2"/>
|
|
<text x="475" y="603" fill="#062A22" font-size="14" font-weight="600" text-anchor="middle">Focus ring</text>
|
|
<rect x="590" y="576" width="150" height="44" rx="8" fill="none" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="665" y="603" fill="#E8ECF2" font-size="14" text-anchor="middle">Secondary</text>
|
|
<text x="790" y="603" fill="#9AA4B2" font-size="14">Ghost link</text>
|
|
<line x1="790" y1="610" x2="856" y2="610" stroke="#3ECFAE" stroke-width="2"/>
|
|
<rect x="900" y="576" width="150" height="44" rx="8" fill="#171C26"/>
|
|
<text x="975" y="603" fill="#5C6675" font-size="14" text-anchor="middle">Disabled</text>
|
|
|
|
<!-- (g) chips & status -->
|
|
<text x="60" y="690" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(g) status semantics: accent=active · amber=in development · muted=archived (dot + label, never colour-only)</text>
|
|
<g font-family="Consolas, monospace" font-size="11">
|
|
<rect x="60" y="706" width="92" height="28" rx="14" fill="#11151D" stroke="#3ECFAE" stroke-opacity="0.4"/>
|
|
<circle cx="78" cy="720" r="3.5" fill="#3ECFAE"/>
|
|
<text x="90" y="725" fill="#3ECFAE">ACTIVE</text>
|
|
<rect x="168" y="706" width="150" height="28" rx="14" fill="#11151D" stroke="#E5A93D" stroke-opacity="0.4"/>
|
|
<circle cx="186" cy="720" r="3.5" fill="#E5A93D"/>
|
|
<text x="198" y="725" fill="#E5A93D">IN DEVELOPMENT</text>
|
|
<rect x="334" y="706" width="104" height="28" rx="14" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<circle cx="352" cy="720" r="3.5" fill="#5C6675"/>
|
|
<text x="364" y="725" fill="#9AA4B2">ARCHIVED</text>
|
|
</g>
|
|
|
|
<!-- (h) form states -->
|
|
<text x="60" y="800" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(h) form: rest · focus · error (icon + message, danger ≥4.5:1) · submit-sending · success panel</text>
|
|
<text x="60" y="832" fill="#9AA4B2" font-size="13">E-mail</text>
|
|
<rect x="60" y="842" width="260" height="44" rx="8" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="340" y="832" fill="#E8ECF2" font-size="13">E-mail</text>
|
|
<rect x="340" y="842" width="260" height="44" rx="8" fill="#11151D" stroke="#3ECFAE" stroke-width="2"/>
|
|
<text x="620" y="832" fill="#E8ECF2" font-size="13">E-mail</text>
|
|
<rect x="620" y="842" width="260" height="44" rx="8" fill="#11151D" stroke="#E5606B" stroke-width="2"/>
|
|
<text x="620" y="908" fill="#E5606B" font-size="12">⚠ Please enter a valid e-mail address</text>
|
|
<rect x="920" y="842" width="180" height="44" rx="8" fill="#3ECFAE"/>
|
|
<text x="1010" y="869" fill="#062A22" font-family="Consolas, monospace" font-size="14" text-anchor="middle">···</text>
|
|
<rect x="1130" y="830" width="250 " height="70" rx="12" fill="#171C26" stroke="#3ECFAE" stroke-opacity="0.4"/>
|
|
<text x="1156" y="860" fill="#3ECFAE" font-size="14">✓ Message sent</text>
|
|
<text x="1156" y="882" fill="#9AA4B2" font-size="12">I usually reply within a day.</text>
|
|
|
|
<!-- (i) skip link -->
|
|
<text x="60" y="972" fill="#5C6675" font-family="Consolas, monospace" font-size="11">(i) skip-link, visible on first Tab</text>
|
|
<rect x="60" y="984" width="220" height="40" rx="8" fill="#3ECFAE"/>
|
|
<text x="170" y="1009" fill="#062A22" font-size="13" font-weight="600" text-anchor="middle">Skip to content ↵</text>
|
|
</svg>
|