chore(core): install primeng and tailwind

package.json

@@ -28,7 +28,12 @@
     "@angular/forms": "^20.2.0",
     "@angular/platform-browser": "^20.2.0",
     "@angular/router": "^20.2.0",
+    "@primeuix/themes": "^1.2.3",
+    "@tailwindcss/vite": "^4.1.12",
+    "primeng": "^20.0.1",
     "rxjs": "~7.8.0",
+    "tailwindcss": "^4.1.12",
+    "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

public/theme/theme.ts

@@ -0,0 +1,660 @@
+import Aura from "@primeuix/themes/aura";
+import { definePreset } from "@primeuix/themes";
+
+export const Theme = definePreset(Aura, {
+    primitive: {
+        borderRadius: {
+            none: "0",
+            xs: "2px",
+            sm: "4px",
+            md: "6px",
+            lg: "8px",
+            xl: "12px"
+        },
+        emerald: {
+            50: "#ecfdf5",
+            100: "#d1fae5",
+            200: "#a7f3d0",
+            300: "#6ee7b7",
+            400: "#34d399",
+            500: "#10b981",
+            600: "#059669",
+            700: "#047857",
+            800: "#065f46",
+            900: "#064e3b",
+            950: "#022c22"
+        },
+        green: {
+            50: "#f0fdf4",
+            100: "#dcfce7",
+            200: "#bbf7d0",
+            300: "#86efac",
+            400: "#4ade80",
+            500: "#22c55e",
+            600: "#16a34a",
+            700: "#15803d",
+            800: "#166534",
+            900: "#14532d",
+            950: "#052e16"
+        },
+        lime: {
+            50: "#f7fee7",
+            100: "#ecfccb",
+            200: "#d9f99d",
+            300: "#bef264",
+            400: "#a3e635",
+            500: "#84cc16",
+            600: "#65a30d",
+            700: "#4d7c0f",
+            800: "#3f6212",
+            900: "#365314",
+            950: "#1a2e05"
+        },
+        red: {
+            50: "#fef2f2",
+            100: "#fee2e2",
+            200: "#fecaca",
+            300: "#fca5a5",
+            400: "#f87171",
+            500: "#ef4444",
+            600: "#dc2626",
+            700: "#b91c1c",
+            800: "#991b1b",
+            900: "#7f1d1d",
+            950: "#450a0a"
+        },
+        orange: {
+            50: "#fff7ed",
+            100: "#ffedd5",
+            200: "#fed7aa",
+            300: "#fdba74",
+            400: "#fb923c",
+            500: "#f97316",
+            600: "#ea580c",
+            700: "#c2410c",
+            800: "#9a3412",
+            900: "#7c2d12",
+            950: "#431407"
+        },
+        amber: {
+            50: "#fffbeb",
+            100: "#fef3c7",
+            200: "#fde68a",
+            300: "#fcd34d",
+            400: "#fbbf24",
+            500: "#f59e0b",
+            600: "#d97706",
+            700: "#b45309",
+            800: "#92400e",
+            900: "#78350f",
+            950: "#451a03"
+        },
+        yellow: {
+            50: "#fefce8",
+            100: "#fef9c3",
+            200: "#fef08a",
+            300: "#fde047",
+            400: "#facc15",
+            500: "#eab308",
+            600: "#ca8a04",
+            700: "#a16207",
+            800: "#854d0e",
+            900: "#713f12",
+            950: "#422006"
+        },
+        teal: {
+            50: "#f0fdfa",
+            100: "#ccfbf1",
+            200: "#99f6e4",
+            300: "#5eead4",
+            400: "#2dd4bf",
+            500: "#14b8a6",
+            600: "#0d9488",
+            700: "#0f766e",
+            800: "#115e59",
+            900: "#134e4a",
+            950: "#042f2e"
+        },
+        cyan: {
+            50: "#ecfeff",
+            100: "#cffafe",
+            200: "#a5f3fc",
+            300: "#67e8f9",
+            400: "#22d3ee",
+            500: "#06b6d4",
+            600: "#0891b2",
+            700: "#0e7490",
+            800: "#155e75",
+            900: "#164e63",
+            950: "#083344"
+        },
+        sky: {
+            50: "#f0f9ff",
+            100: "#e0f2fe",
+            200: "#bae6fd",
+            300: "#7dd3fc",
+            400: "#38bdf8",
+            500: "#0ea5e9",
+            600: "#0284c7",
+            700: "#0369a1",
+            800: "#075985",
+            900: "#0c4a6e",
+            950: "#082f49"
+        },
+        blue: {
+            50: "#eff6ff",
+            100: "#dbeafe",
+            200: "#bfdbfe",
+            300: "#93c5fd",
+            400: "#60a5fa",
+            500: "#3b82f6",
+            600: "#2563eb",
+            700: "#1d4ed8",
+            800: "#1e40af",
+            900: "#1e3a8a",
+            950: "#172554"
+        },
+        indigo: {
+            50: "#eef2ff",
+            100: "#e0e7ff",
+            200: "#c7d2fe",
+            300: "#a5b4fc",
+            400: "#818cf8",
+            500: "#6366f1",
+            600: "#4f46e5",
+            700: "#4338ca",
+            800: "#3730a3",
+            900: "#312e81",
+            950: "#1e1b4b"
+        },
+        violet: {
+            50: "#f5f3ff",
+            100: "#ede9fe",
+            200: "#ddd6fe",
+            300: "#c4b5fd",
+            400: "#a78bfa",
+            500: "#8b5cf6",
+            600: "#7c3aed",
+            700: "#6d28d9",
+            800: "#5b21b6",
+            900: "#4c1d95",
+            950: "#2e1065"
+        },
+        purple: {
+            50: "#faf5ff",
+            100: "#f3e8ff",
+            200: "#e9d5ff",
+            300: "#d8b4fe",
+            400: "#c084fc",
+            500: "#a855f7",
+            600: "#9333ea",
+            700: "#7e22ce",
+            800: "#6b21a8",
+            900: "#581c87",
+            950: "#3b0764"
+        },
+        fuchsia: {
+            50: "#fdf4ff",
+            100: "#fae8ff",
+            200: "#f5d0fe",
+            300: "#f0abfc",
+            400: "#e879f9",
+            500: "#d946ef",
+            600: "#c026d3",
+            700: "#a21caf",
+            800: "#86198f",
+            900: "#701a75",
+            950: "#4a044e"
+        },
+        pink: {
+            50: "#fdf2f8",
+            100: "#fce7f3",
+            200: "#fbcfe8",
+            300: "#f9a8d4",
+            400: "#f472b6",
+            500: "#ec4899",
+            600: "#db2777",
+            700: "#be185d",
+            800: "#9d174d",
+            900: "#831843",
+            950: "#500724"
+        },
+        rose: {
+            50: "#fff1f2",
+            100: "#ffe4e6",
+            200: "#fecdd3",
+            300: "#fda4af",
+            400: "#fb7185",
+            500: "#f43f5e",
+            600: "#e11d48",
+            700: "#be123c",
+            800: "#9f1239",
+            900: "#881337",
+            950: "#4c0519"
+        },
+        slate: {
+            50: "#f8fafc",
+            100: "#f1f5f9",
+            200: "#e2e8f0",
+            300: "#cbd5e1",
+            400: "#94a3b8",
+            500: "#64748b",
+            600: "#475569",
+            700: "#334155",
+            800: "#1e293b",
+            900: "#0f172a",
+            950: "#020617"
+        },
+        gray: {
+            50: "#f9fafb",
+            100: "#f3f4f6",
+            200: "#e5e7eb",
+            300: "#d1d5db",
+            400: "#9ca3af",
+            500: "#6b7280",
+            600: "#4b5563",
+            700: "#374151",
+            800: "#1f2937",
+            900: "#111827",
+            950: "#030712"
+        },
+        zinc: {
+            50: "#fafafa",
+            100: "#f4f4f5",
+            200: "#e4e4e7",
+            300: "#d4d4d8",
+            400: "#a1a1aa",
+            500: "#71717a",
+            600: "#52525b",
+            700: "#3f3f46",
+            800: "#27272a",
+            900: "#18181b",
+            950: "#09090b"
+        },
+        neutral: {
+            50: "#fafafa",
+            100: "#f5f5f5",
+            200: "#e5e5e5",
+            300: "#d4d4d4",
+            400: "#a3a3a3",
+            500: "#737373",
+            600: "#525252",
+            700: "#404040",
+            800: "#262626",
+            900: "#171717",
+            950: "#0a0a0a"
+        },
+        stone: {
+            50: "#fafaf9",
+            100: "#f5f5f4",
+            200: "#e7e5e4",
+            300: "#d6d3d1",
+            400: "#a8a29e",
+            500: "#78716c",
+            600: "#57534e",
+            700: "#44403c",
+            800: "#292524",
+            900: "#1c1917",
+            950: "#0c0a09"
+        }
+    },
+    semantic: {
+        transitionDuration: "0.2s",
+        focusRing: {
+            width: "1px",
+            style: "solid",
+            color: "{primary.color}",
+            offset: "2px",
+            shadow: "none"
+        },
+        disabledOpacity: "0.6",
+        iconSize: "1rem",
+        anchorGutter: "2px",
+        primary: {
+            50:  "#f6f8fa",
+            100: "#dce4eb",
+            200: "#c1cfdb",
+            300: "#a6bacb",
+            400: "#8ba6bb",
+            500: "#7091ab",
+            600: "#58758a",
+            700: "#405969",
+            800: "#283d48",
+            900: "#101127",
+            950: "#070b14"
+        },
+        formField: {
+            paddingX: "0.75rem",
+            paddingY: "0.35rem",
+            sm: {
+                fontSize: "0.875rem",
+                paddingX: "0.625rem",
+                paddingY: "0.25rem"
+            },
+            lg: {
+                fontSize: "1.125rem",
+                paddingX: "0.875rem",
+                paddingY: "0.6rem"
+            },
+            borderRadius: "{border.radius.md}",
+            focusRing: {
+                width: "0",
+                style: "none",
+                color: "transparent",
+                offset: "0",
+                shadow: "none"
+            },
+            transitionDuration: "{transition.duration}"
+        },
+        list: {
+            padding: "0.25rem 0.25rem",
+            gap: "2px",
+            header: {
+                padding: "0.5rem 1rem 0.25rem 1rem"
+            },
+            option: {
+                padding: "0.5rem 0.75rem",
+                borderRadius: "{border.radius.sm}"
+            },
+            optionGroup: {
+                padding: "0.5rem 0.75rem",
+                fontWeight: "600"
+            }
+        },
+        content: {
+            borderRadius: "{border.radius.md}"
+        },
+        mask: {
+            transitionDuration: "0.15s"
+        },
+        navigation: {
+            list: {
+                padding: "0.25rem 0.25rem",
+                gap: "2px"
+            },
+            item: {
+                padding: "0.5rem 0.75rem",
+                borderRadius: "{border.radius.sm}",
+                gap: "0.5rem"
+            },
+            submenuLabel: {
+                padding: "0.5rem 0.75rem",
+                fontWeight: "600"
+            },
+            submenuIcon: {
+                size: "0.875rem"
+            }
+        },
+        overlay: {
+            select: {
+                borderRadius: "{border.radius.md}",
+                shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+            },
+            popover: {
+                borderRadius: "{border.radius.md}",
+                padding: "0.75rem",
+                shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+            },
+            modal: {
+                borderRadius: "{border.radius.xl}",
+                padding: "1.25rem",
+                shadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+            },
+            navigation: {
+                shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+            }
+        },
+        colorScheme: {
+            light: {
+                surface: {
+                    0: "#ffffff",
+                    50: "#f6f6f6",
+                    100: "#d2d2d3",
+                    200: "#aeaeb0",
+                    300: "#8a8a8e",
+                    400: "#66666b",
+                    500: "#424248",
+                    600: "#38383d",
+                    700: "#2e2e32",
+                    800: "#242428",
+                    900: "#1a1a1d",
+                    950: "#111112"
+                },
+                primary: {
+                    color: "{primary.500}",
+                    contrastColor: "#ffffff",
+                    hoverColor: "{primary.600}",
+                    activeColor: "{primary.700}"
+                },
+                highlight: {
+                    background: "{primary.50}",
+                    focusBackground: "{primary.100}",
+                    color: "{primary.700}",
+                    focusColor: "{primary.800}"
+                },
+                mask: {
+                    background: "rgba(0,0,0,0.4)",
+                    color: "{surface.200}"
+                },
+                formField: {
+                    background: "{surface.0}",
+                    disabledBackground: "{surface.200}",
+                    filledBackground: "{surface.50}",
+                    filledHoverBackground: "{surface.50}",
+                    filledFocusBackground: "{surface.50}",
+                    borderColor: "{surface.300}",
+                    hoverBorderColor: "{surface.400}",
+                    focusBorderColor: "{primary.color}",
+                    invalidBorderColor: "{red.400}",
+                    color: "{surface.700}",
+                    disabledColor: "{surface.500}",
+                    placeholderColor: "{surface.500}",
+                    invalidPlaceholderColor: "{red.600}",
+                    floatLabelColor: "{surface.500}",
+                    floatLabelFocusColor: "{primary.600}",
+                    floatLabelActiveColor: "{surface.500}",
+                    floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+                    iconColor: "{surface.400}",
+                    shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)"
+                },
+                text: {
+                    color: "{surface.700}",
+                    hoverColor: "{surface.800}",
+                    mutedColor: "{surface.500}",
+                    hoverMutedColor: "{surface.600}"
+                },
+                content: {
+                    background: "{surface.0}",
+                    hoverBackground: "{surface.100}",
+                    borderColor: "{surface.200}",
+                    color: "{text.color}",
+                    hoverColor: "{text.hover.color}"
+                },
+                overlay: {
+                    select: {
+                        background: "{surface.0}",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}"
+                    },
+                    popover: {
+                        background: "{surface.0}",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}"
+                    },
+                    modal: {
+                        background: "{surface.0}",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}"
+                    }
+                },
+                list: {
+                    option: {
+                        focusBackground: "{surface.100}",
+                        selectedBackground: "{highlight.background}",
+                        selectedFocusBackground: "{highlight.focus.background}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        selectedColor: "{highlight.color}",
+                        selectedFocusColor: "{highlight.focus.color}",
+                        icon: {
+                            color: "{surface.400}",
+                            focusColor: "{surface.500}"
+                        }
+                    },
+                    optionGroup: {
+                        background: "transparent",
+                        color: "{text.muted.color}"
+                    }
+                },
+                navigation: {
+                    item: {
+                        focusBackground: "{surface.100}",
+                        activeBackground: "{surface.100}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        activeColor: "{text.hover.color}",
+                        icon: {
+                            color: "{surface.400}",
+                            focusColor: "{surface.500}",
+                            activeColor: "{surface.500}"
+                        }
+                    },
+                    submenuLabel: {
+                        background: "transparent",
+                        color: "{text.muted.color}"
+                    },
+                    submenuIcon: {
+                        color: "{surface.400}",
+                        focusColor: "{surface.500}",
+                        activeColor: "{surface.500}"
+                    }
+                }
+            },
+            dark: {
+                surface: {
+                    0: "#ffffff",
+                    50: "#f6f6f6",
+                    100: "#d2d2d3",
+                    200: "#aeaeb0",
+                    300: "#8a8a8e",
+                    400: "#66666b",
+                    500: "#424248",
+                    600: "#38383d",
+                    700: "#2e2e32",
+                    800: "#242428",
+                    900: "#1a1a1d",
+                    950: "#111112"
+                },
+                primary: {
+                    color: "{primary.400}",
+                    contrastColor: "{surface.900}",
+                    hoverColor: "{primary.300}",
+                    activeColor: "{primary.200}"
+                },
+                highlight: {
+                    background: "color-mix(in srgb, {primary.400}, transparent 84%)",
+                    focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)",
+                    color: "rgba(255,255,255,.87)",
+                    focusColor: "rgba(255,255,255,.87)"
+                },
+                mask: {
+                    background: "rgba(0,0,0,0.6)",
+                    color: "{surface.200}"
+                },
+                formField: {
+                    background: "{surface.950}",
+                    disabledBackground: "{surface.700}",
+                    filledBackground: "{surface.800}",
+                    filledHoverBackground: "{surface.800}",
+                    filledFocusBackground: "{surface.800}",
+                    borderColor: "{surface.600}",
+                    hoverBorderColor: "{surface.500}",
+                    focusBorderColor: "{primary.color}",
+                    invalidBorderColor: "{red.300}",
+                    color: "{surface.0}",
+                    disabledColor: "{surface.400}",
+                    placeholderColor: "{surface.400}",
+                    invalidPlaceholderColor: "{red.400}",
+                    floatLabelColor: "{surface.400}",
+                    floatLabelFocusColor: "{primary.color}",
+                    floatLabelActiveColor: "{surface.400}",
+                    floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+                    iconColor: "{surface.400}",
+                    shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)"
+                },
+                text: {
+                    color: "{surface.0}",
+                    hoverColor: "{surface.0}",
+                    mutedColor: "{surface.400}",
+                    hoverMutedColor: "{surface.300}"
+                },
+                content: {
+                    background: "{surface.900}",
+                    hoverBackground: "{surface.800}",
+                    borderColor: "{surface.700}",
+                    color: "{text.color}",
+                    hoverColor: "{text.hover.color}"
+                },
+                overlay: {
+                    select: {
+                        background: "{surface.900}",
+                        borderColor: "{surface.700}",
+                        color: "{text.color}"
+                    },
+                    popover: {
+                        background: "{surface.900}",
+                        borderColor: "{surface.700}",
+                        color: "{text.color}"
+                    },
+                    modal: {
+                        background: "{surface.900}",
+                        borderColor: "{surface.700}",
+                        color: "{text.color}"
+                    }
+                },
+                list: {
+                    option: {
+                        focusBackground: "{surface.800}",
+                        selectedBackground: "{highlight.background}",
+                        selectedFocusBackground: "{highlight.focus.background}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        selectedColor: "{highlight.color}",
+                        selectedFocusColor: "{highlight.focus.color}",
+                        icon: {
+                            color: "{surface.500}",
+                            focusColor: "{surface.400}"
+                        }
+                    },
+                    optionGroup: {
+                        background: "transparent",
+                        color: "{text.muted.color}"
+                    }
+                },
+                navigation: {
+                    item: {
+                        focusBackground: "{surface.800}",
+                        activeBackground: "{surface.800}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        activeColor: "{text.hover.color}",
+                        icon: {
+                            color: "{surface.500}",
+                            focusColor: "{surface.400}",
+                            activeColor: "{surface.400}"
+                        }
+                    },
+                    submenuLabel: {
+                        background: "transparent",
+                        color: "{text.muted.color}"
+                    },
+                    submenuIcon: {
+                        color: "{surface.500}",
+                        focusColor: "{surface.400}",
+                        activeColor: "{surface.400}"
+                    }
+                }
+            }
+        }
+    }
+});

src/app/app.config.ts

@@ -1,12 +1,35 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig, LOCALE_ID, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+
+import { providePrimeNG } from 'primeng/config';
+import { Theme } from '../../public/theme/theme';
 
 import { routes } from './app.routes';
+import { registerLocaleData } from '@angular/common';
+import localeDeAt from '@angular/common/locales/de-AT';
+import { germanTranslation } from './core/config/translations';
+
+registerLocaleData(localeDeAt);
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes)
-  ]
+    provideRouter(routes, withComponentInputBinding()),
+    { provide: LOCALE_ID, useValue: 'de-AT' },
+    providePrimeNG({
+      theme: {
+        preset: Theme,
+        options: {
+          darkModeSelector: '.dark',
+          cssLayer: {
+            name: 'primeng',
+            order: 'theme, base, primeng'
+          },
+          prefix: '',
+        },
+      },
+      translation: germanTranslation, // TODO: dynamic - selected language
+    }),
+  ],
 };

src/app/app.html

@@ -1,342 +1,2 @@
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<style>
-  :host {
-    --bright-blue: oklch(51.01% 0.274 263.83);
-    --electric-violet: oklch(53.18% 0.28 296.97);
-    --french-violet: oklch(47.66% 0.246 305.88);
-    --vivid-pink: oklch(69.02% 0.277 332.77);
-    --hot-red: oklch(61.42% 0.238 15.34);
-    --orange-red: oklch(63.32% 0.24 31.68);
-
-    --gray-900: oklch(19.37% 0.006 300.98);
-    --gray-700: oklch(36.98% 0.014 302.71);
-    --gray-400: oklch(70.9% 0.015 304.04);
-
-    --red-to-pink-to-purple-vertical-gradient: linear-gradient(
-      180deg,
-      var(--orange-red) 0%,
-      var(--vivid-pink) 50%,
-      var(--electric-violet) 100%
-    );
-
-    --red-to-pink-to-purple-horizontal-gradient: linear-gradient(
-      90deg,
-      var(--orange-red) 0%,
-      var(--vivid-pink) 50%,
-      var(--electric-violet) 100%
-    );
-
-    --pill-accent: var(--bright-blue);
-
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1 {
-    font-size: 3.125rem;
-    color: var(--gray-900);
-    font-weight: 500;
-    line-height: 100%;
-    letter-spacing: -0.125rem;
-    margin: 0;
-    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-  }
-
-  p {
-    margin: 0;
-    color: var(--gray-700);
-  }
-
-  main {
-    width: 100%;
-    min-height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
-    box-sizing: inherit;
-    position: relative;
-  }
-
-  .angular-logo {
-    max-width: 9.2rem;
-  }
-
-  .content {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-    max-width: 700px;
-    margin-bottom: 3rem;
-  }
-
-  .content h1 {
-    margin-top: 1.75rem;
-  }
-
-  .content p {
-    margin-top: 1.5rem;
-  }
-
-  .divider {
-    width: 1px;
-    background: var(--red-to-pink-to-purple-vertical-gradient);
-    margin-inline: 0.5rem;
-  }
-
-  .pill-group {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    flex-wrap: wrap;
-    gap: 1.25rem;
-  }
-
-  .pill {
-    display: flex;
-    align-items: center;
-    --pill-accent: var(--bright-blue);
-    background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
-    color: var(--pill-accent);
-    padding-inline: 0.75rem;
-    padding-block: 0.375rem;
-    border-radius: 2.75rem;
-    border: 0;
-    transition: background 0.3s ease;
-    font-family: var(--inter-font);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 1.4rem;
-    letter-spacing: -0.00875rem;
-    text-decoration: none;
-    white-space: nowrap;
-  }
-
-  .pill:hover {
-    background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
-  }
-
-  .pill-group .pill:nth-child(6n + 1) {
-    --pill-accent: var(--bright-blue);
-  }
-  .pill-group .pill:nth-child(6n + 2) {
-    --pill-accent: var(--electric-violet);
-  }
-  .pill-group .pill:nth-child(6n + 3) {
-    --pill-accent: var(--french-violet);
-  }
-
-  .pill-group .pill:nth-child(6n + 4),
-  .pill-group .pill:nth-child(6n + 5),
-  .pill-group .pill:nth-child(6n + 6) {
-    --pill-accent: var(--hot-red);
-  }
-
-  .pill-group svg {
-    margin-inline-start: 0.25rem;
-  }
-
-  .social-links {
-    display: flex;
-    align-items: center;
-    gap: 0.73rem;
-    margin-top: 1.5rem;
-  }
-
-  .social-links path {
-    transition: fill 0.3s ease;
-    fill: var(--gray-400);
-  }
-
-  .social-links a:hover svg path {
-    fill: var(--gray-900);
-  }
-
-  @media screen and (max-width: 650px) {
-    .content {
-      flex-direction: column;
-      width: max-content;
-    }
-
-    .divider {
-      height: 1px;
-      width: 100%;
-      background: var(--red-to-pink-to-purple-horizontal-gradient);
-      margin-block: 1.5rem;
-    }
-  }
-</style>
-
-<main class="main">
-  <div class="content">
-    <div class="left-side">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 982 239"
-        fill="none"
-        class="angular-logo"
-      >
-        <g clip-path="url(#a)">
-          <path
-            fill="url(#b)"
-            d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-          />
-          <path
-            fill="url(#c)"
-            d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-          />
-        </g>
-        <defs>
-          <radialGradient
-            id="c"
-            cx="0"
-            cy="0"
-            r="1"
-            gradientTransform="rotate(118.122 171.182 60.81) scale(205.794)"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#FF41F8" />
-            <stop offset=".707" stop-color="#FF41F8" stop-opacity=".5" />
-            <stop offset="1" stop-color="#FF41F8" stop-opacity="0" />
-          </radialGradient>
-          <linearGradient
-            id="b"
-            x1="0"
-            x2="982"
-            y1="192"
-            y2="192"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#F0060B" />
-            <stop offset="0" stop-color="#F0070C" />
-            <stop offset=".526" stop-color="#CC26D5" />
-            <stop offset="1" stop-color="#7702FF" />
-          </linearGradient>
-          <clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
-        </defs>
-      </svg>
-      <h1>Hello, {{ title() }}</h1>
-      <p>Congratulations! Your app is running. 🎉</p>
-    </div>
-    <div class="divider" role="separator" aria-label="Divider"></div>
-    <div class="right-side">
-      <div class="pill-group">
-        @for (item of [
-          { title: 'Explore the Docs', link: 'https://angular.dev' },
-          { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
-          { title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'},
-          { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
-          { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
-          { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
-        ]; track item.title) {
-          <a
-            class="pill"
-            [href]="item.link"
-            target="_blank"
-            rel="noopener"
-          >
-            <span>{{ item.title }}</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="14"
-              viewBox="0 -960 960 960"
-              width="14"
-              fill="currentColor"
-            >
-              <path
-                d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
-              />
-            </svg>
-          </a>
-        }
-      </div>
-      <div class="social-links">
-        <a
-          href="https://github.com/angular/angular"
-          aria-label="Github"
-          target="_blank"
-          rel="noopener"
-        >
-          <svg
-            width="25"
-            height="24"
-            viewBox="0 0 25 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            alt="Github"
-          >
-            <path
-              d="M12.3047 0C5.50634 0 0 5.50942 0 12.3047C0 17.7423 3.52529 22.3535 8.41332 23.9787C9.02856 24.0946 9.25414 23.7142 9.25414 23.3871C9.25414 23.0949 9.24389 22.3207 9.23876 21.2953C5.81601 22.0377 5.09414 19.6444 5.09414 19.6444C4.53427 18.2243 3.72524 17.8449 3.72524 17.8449C2.61064 17.082 3.81137 17.0973 3.81137 17.0973C5.04697 17.1835 5.69604 18.3647 5.69604 18.3647C6.79321 20.2463 8.57636 19.7029 9.27978 19.3881C9.39052 18.5924 9.70736 18.0499 10.0591 17.7423C7.32641 17.4347 4.45429 16.3765 4.45429 11.6618C4.45429 10.3185 4.9311 9.22133 5.72065 8.36C5.58222 8.04931 5.16694 6.79833 5.82831 5.10337C5.82831 5.10337 6.85883 4.77319 9.2121 6.36459C10.1965 6.09082 11.2424 5.95546 12.2883 5.94931C13.3342 5.95546 14.3801 6.09082 15.3644 6.36459C17.7023 4.77319 18.7328 5.10337 18.7328 5.10337C19.3942 6.79833 18.9789 8.04931 18.8559 8.36C19.6403 9.22133 20.1171 10.3185 20.1171 11.6618C20.1171 16.3888 17.2409 17.4296 14.5031 17.7321C14.9338 18.1012 15.3337 18.8559 15.3337 20.0084C15.3337 21.6552 15.3183 22.978 15.3183 23.3779C15.3183 23.7009 15.5336 24.0854 16.1642 23.9623C21.0871 22.3484 24.6094 17.7341 24.6094 12.3047C24.6094 5.50942 19.0999 0 12.3047 0Z"
-            />
-          </svg>
-        </a>
-        <a
-          href="https://twitter.com/angular"
-          aria-label="Twitter"
-          target="_blank"
-          rel="noopener"
-        >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            alt="Twitter"
-          >
-            <path
-              d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
-            />
-          </svg>
-        </a>
-        <a
-          href="https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw"
-          aria-label="Youtube"
-          target="_blank"
-          rel="noopener"
-        >
-          <svg
-            width="29"
-            height="20"
-            viewBox="0 0 29 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            alt="Youtube"
-          >
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
-            />
-          </svg>
-        </a>
-      </div>
-    </div>
-  </div>
-</main>
-
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-
-<router-outlet />
+<router-outlet/>
+<p-button label="Test"/>

src/app/app.spec.ts

@@ -1,23 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { App } from './app';
-
-describe('App', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [App],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(App);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(App);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, byhaider-homepage');
-  });
-});

src/app/app.ts

@@ -1,12 +1,17 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ThemeSwitchService } from './core/service/theme-switch.service';
+import { Button } from 'primeng/button';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, Button],
   templateUrl: './app.html',
-  styleUrl: './app.scss'
 })
 export class App {
-  protected readonly title = signal('byhaider-homepage');
+
+  constructor(private themeSwitchService: ThemeSwitchService) {
+    this.themeSwitchService.initialize();
+  }
+
 }

src/app/core/config/translations.ts

@@ -0,0 +1,123 @@
+import { Translation } from 'primeng/api';
+
+export const germanTranslation: Translation = {
+  startsWith: 'Beginnt mit',
+  contains: 'Enthält',
+  notContains: 'Enthält nicht',
+  endsWith: 'Endet mit',
+  equals: 'Gleich',
+  notEquals: 'Ungleich',
+  noFilter: 'Kein Filter',
+  lt: 'Kleiner als',
+  lte: 'Kleiner oder gleich',
+  gt: 'Größer als',
+  gte: 'Größer oder gleich',
+  dateIs: 'Datum ist',
+  dateIsNot: 'Datum ist nicht',
+  dateBefore: 'Datum ist vor',
+  dateAfter: 'Datum ist nach',
+  clear: 'Zurücksetzen',
+  apply: 'Übernehmen',
+  matchAll: 'Alle Bedingungen',
+  matchAny: 'Mindestens eine Bedingung',
+  addRule: 'Regel hinzufügen',
+  removeRule: 'Regel entfernen',
+  accept: 'Ja',
+  reject: 'Nein',
+  choose: 'Auswählen',
+  upload: 'Hochladen',
+  cancel: 'Abbrechen',
+  completed: 'Abgeschlossen',
+  pending: 'Ausstehend',
+  fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+  dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+  dayNamesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+  dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+  monthNames: [
+    'Januar','Februar','März','April','Mai','Juni',
+    'Juli','August','September','Oktober','November','Dezember'
+  ],
+  monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+  chooseYear: 'Jahr wählen',
+  chooseMonth: 'Monat wählen',
+  chooseDate: 'Datum wählen',
+  prevDecade: 'Vorheriges Jahrzehnt',
+  nextDecade: 'Nächstes Jahrzehnt',
+  prevYear: 'Vorheriges Jahr',
+  nextYear: 'Nächstes Jahr',
+  prevMonth: 'Vorheriger Monat',
+  nextMonth: 'Nächster Monat',
+  prevHour: 'Vorherige Stunde',
+  nextHour: 'Nächste Stunde',
+  prevMinute: 'Vorherige Minute',
+  nextMinute: 'Nächste Minute',
+  prevSecond: 'Vorherige Sekunde',
+  nextSecond: 'Nächste Sekunde',
+  am: 'vorm.',
+  pm: 'nachm.',
+  today: 'Heute',
+  weekHeader: 'KW',
+  firstDayOfWeek: 1,
+  dateFormat: 'dd.mm.yy',
+  weak: 'Schwach',
+  medium: 'Mittel',
+  strong: 'Stark',
+  passwordPrompt: 'Passwort eingeben',
+  emptyFilterMessage: 'Keine Ergebnisse gefunden',
+  searchMessage: '{0} Ergebnisse verfügbar',
+  selectionMessage: '{0} Elemente ausgewählt',
+  emptySelectionMessage: 'Kein Element ausgewählt',
+  emptySearchMessage: 'Keine Ergebnisse gefunden',
+  emptyMessage: 'Keine Optionen verfügbar',
+
+  aria: {
+    trueLabel: 'Wahr',
+    falseLabel: 'Falsch',
+    nullLabel: 'Nicht ausgewählt',
+    star: '1 Stern',
+    stars: '{star} Sterne',
+    selectAll: 'Alle Elemente ausgewählt',
+    unselectAll: 'Alle Elemente abgewählt',
+    close: 'Schließen',
+    previous: 'Zurück',
+    next: 'Weiter',
+    navigation: 'Navigation',
+    scrollTop: 'Nach oben scrollen',
+    moveTop: 'Nach ganz oben',
+    moveUp: 'Nach oben',
+    moveDown: 'Nach unten',
+    moveBottom: 'Nach ganz unten',
+    moveToTarget: 'Zum Ziel verschieben',
+    moveToSource: 'Zur Quelle verschieben',
+    moveAllToTarget: 'Alle zum Ziel verschieben',
+    moveAllToSource: 'Alle zur Quelle verschieben',
+    pageLabel: '{page}',
+    firstPageLabel: 'Erste Seite',
+    lastPageLabel: 'Letzte Seite',
+    nextPageLabel: 'Nächste Seite',
+    prevPageLabel: 'Vorherige Seite',
+    rowsPerPageLabel: 'Zeilen pro Seite',
+    jumpToPageDropdownLabel: 'Seite auswählen',
+    jumpToPageInputLabel: 'Seite eingeben',
+    selectRow: 'Zeile ausgewählt',
+    unselectRow: 'Zeile abgewählt',
+    expandRow: 'Zeile erweitert',
+    collapseRow: 'Zeile eingeklappt',
+    showFilterMenu: 'Filtermenü anzeigen',
+    hideFilterMenu: 'Filtermenü ausblenden',
+    filterOperator: 'Filter-Operator',
+    filterConstraint: 'Filter-Bedingung',
+    editRow: 'Zeile bearbeiten',
+    saveEdit: 'Bearbeitung speichern',
+    cancelEdit: 'Bearbeitung abbrechen',
+    listView: 'Listenansicht',
+    gridView: 'Rasteransicht',
+    slide: 'Folie',
+    slideNumber: '{slideNumber}',
+    zoomImage: 'Bild zoomen',
+    zoomIn: 'Vergrößern',
+    zoomOut: 'Verkleinern',
+    rotateRight: 'Nach rechts drehen',
+    rotateLeft: 'Nach links drehen'
+  }
+};

src/app/core/models/theme.ts

@@ -0,0 +1,21 @@
+export class Theme {
+  code: string;
+  name: string;
+
+  constructor(code: string, name: string) {
+    this.code = code;
+    this.name = name;
+  }
+
+  static findByCode(code: string): Theme {
+    return Theme.THEMES.find(theme => theme.code === code) || Theme.DEFAULT_THEME;
+  }
+
+  static readonly THEMES: Theme[] = [
+    new Theme('light', 'Hell'),
+    new Theme('dark', 'Dunkel'),
+    new Theme('system', 'System'),
+  ];
+
+  static readonly DEFAULT_THEME = Theme.THEMES[2];
+}

src/app/core/service/theme-switch.service.ts

@@ -0,0 +1,56 @@
+import {effect, Injectable, signal, WritableSignal} from '@angular/core';
+import {Theme} from "../models/theme";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeSwitchService {
+  private readonly THEME_KEY = 'app-theme-mode';
+
+  public theme: WritableSignal<Theme> = signal(Theme.DEFAULT_THEME);
+
+  constructor() {
+    effect(() => {
+      const currentTheme = this.theme();
+      localStorage.setItem(this.THEME_KEY, currentTheme.code);
+
+      const html = document.querySelector('html')!;
+      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      const isDark = currentTheme.code === 'dark' || (currentTheme.code === 'system' && systemPrefersDark);
+
+      html.classList.toggle('dark', isDark);
+    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (this.theme().code === 'system') {
+        this.theme.update(t => t);
+      }
+    });
+  }
+
+  initialize() {
+    console.info('initializing dark mode service');
+    const stored = Theme.THEMES.find(theme => theme.code === localStorage.getItem(this.THEME_KEY));
+
+    if (stored === undefined) {
+      this.theme.set(Theme.DEFAULT_THEME);
+      return;
+    }
+
+    if (stored.code === 'dark' || stored.code === 'light' || stored.code === 'system') {
+      this.theme.set(stored);
+    } else {
+      this.theme.set(Theme.DEFAULT_THEME);
+    }
+  }
+
+  switchToTheme(theme: Theme) {
+    console.info(`switching to theme: ${theme.name}`);
+    this.theme.set(theme);
+  }
+
+  isDarkMode(): boolean {
+    return this.theme().code === 'dark' || (this.theme().code === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  }
+}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>ByhaiderHomepage</title>
+  <title>byHaider</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/styles.scss

@@ -1 +1,8 @@
-/* You can add global styles to this file, and also import other style files */
+@use "tailwindcss";
+
+body {
+  margin: 0;
+  padding: 15px;
+  font-family: sans-serif; // Inter über Fontsource
+  font-size: 14px;
+}

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,ts}'],
+  darkMode: 'class',
+  plugins: [
+    require('tailwindcss-primeui')
+  ],
+};