fegger
eac4f6e216
- Update BRAND_GUIDELINES.md with new melting clock logo concept - Rebrand UI components with new violet-to-pink gradient color scheme - Implement HAFAS authentication headers and GET support in route - Update logo SVGs to match new brand guidelines - Fix HAFAS time format to exclude millisecond padding - Update default station to Mödling Bahnhof - Bump workspace package versions to 1.0.0
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
export default function LogoIcon({
|
|
size = 48,
|
|
className = "",
|
|
}: {
|
|
size?: number;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512 512"
|
|
width={size}
|
|
height={size}
|
|
className={className}
|
|
aria-label="TimeToLeave logo"
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="ttt-iconMelt"
|
|
x1="100"
|
|
y1="80"
|
|
x2="420"
|
|
y2="430"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset="0%" stopColor="#8B5CF6" />
|
|
<stop offset="40%" stopColor="#B23CFF" />
|
|
<stop offset="72%" stopColor="#D946EF" />
|
|
<stop offset="100%" stopColor="#FF2D8D" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{/* Melting clock outline */}
|
|
<g>
|
|
<path
|
|
d="M160,310 C150,280 160,240 180,210 C210,160 260,140 310,145 C370,150 420,210 430,280 C435,310 430,340 425,360 C420,380 430,400 450,410 C470,420 475,380 495,375 C510,370 520,410 505,440 C495,460 480,470 460,465"
|
|
fill="none"
|
|
stroke="url(#ttt-iconMelt)"
|
|
strokeWidth="28"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
{/* Melting drip */}
|
|
<path
|
|
d="M290,465 C288,490 290,510 300,510 C312,510 310,490 315,465"
|
|
fill="none"
|
|
stroke="url(#ttt-iconMelt)"
|
|
strokeWidth="28"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Flowing arrow */}
|
|
<path
|
|
d="M460,465 C480,450 500,435 520,425"
|
|
fill="none"
|
|
stroke="url(#ttt-iconMelt)"
|
|
strokeWidth="28"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M500,400 L540,420 L490,455 L500,430 Z"
|
|
fill="#FF2D8D"
|
|
/>
|
|
</g>
|
|
|
|
{/* Clock ticks */}
|
|
<g stroke="#F4F1EA" strokeWidth="10" strokeLinecap="round" opacity="0.96">
|
|
<line x1="290" y1="180" x2="290" y2="200" />
|
|
<line x1="370" y1="220" x2="385" y2="210" />
|
|
<line x1="400" y1="310" x2="420" y2="310" />
|
|
<line x1="290" y1="400" x2="290" y2="420" />
|
|
<line x1="200" y1="390" x2="215" y2="375" />
|
|
<line x1="170" y1="310" x2="190" y2="310" />
|
|
<line x1="200" y1="230" x2="215" y2="245" />
|
|
</g>
|
|
|
|
{/* Clock hands — 10:10 */}
|
|
<g stroke="#F4F1EA" strokeWidth="14" strokeLinecap="round">
|
|
<line x1="290" y1="310" x2="290" y2="230" />
|
|
<line x1="290" y1="310" x2="360" y2="355" />
|
|
</g>
|
|
<circle cx="290" cy="310" r="16" fill="#F4F1EA" />
|
|
</svg>
|
|
);
|
|
}
|