chore(core): install primeng and tailwind
This commit is contained in:
Generated
+707
-106
File diff suppressed because it is too large
Load Diff
@@ -28,7 +28,12 @@
|
|||||||
"@angular/forms": "^20.2.0",
|
"@angular/forms": "^20.2.0",
|
||||||
"@angular/platform-browser": "^20.2.0",
|
"@angular/platform-browser": "^20.2.0",
|
||||||
"@angular/router": "^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",
|
"rxjs": "~7.8.0",
|
||||||
|
"tailwindcss": "^4.1.12",
|
||||||
|
"tailwindcss-primeui": "^0.6.1",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.15.0"
|
"zone.js": "~0.15.0"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
+27
-4
@@ -1,12 +1,35 @@
|
|||||||
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
|
import { ApplicationConfig, LOCALE_ID, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
|
||||||
import { provideRouter } from '@angular/router';
|
import { provideRouter, withComponentInputBinding } from '@angular/router';
|
||||||
|
|
||||||
|
import { providePrimeNG } from 'primeng/config';
|
||||||
|
import { Theme } from '../../public/theme/theme';
|
||||||
|
|
||||||
import { routes } from './app.routes';
|
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 = {
|
export const appConfig: ApplicationConfig = {
|
||||||
providers: [
|
providers: [
|
||||||
provideBrowserGlobalErrorListeners(),
|
provideBrowserGlobalErrorListeners(),
|
||||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
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
|
||||||
|
}),
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
+1
-341
@@ -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"/>
|
||||||
@@ -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');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
+9
-4
@@ -1,12 +1,17 @@
|
|||||||
import { Component, signal } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { RouterOutlet } from '@angular/router';
|
import { RouterOutlet } from '@angular/router';
|
||||||
|
import { ThemeSwitchService } from './core/service/theme-switch.service';
|
||||||
|
import { Button } from 'primeng/button';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
imports: [RouterOutlet],
|
imports: [RouterOutlet, Button],
|
||||||
templateUrl: './app.html',
|
templateUrl: './app.html',
|
||||||
styleUrl: './app.scss'
|
|
||||||
})
|
})
|
||||||
export class App {
|
export class App {
|
||||||
protected readonly title = signal('byhaider-homepage');
|
|
||||||
|
constructor(private themeSwitchService: ThemeSwitchService) {
|
||||||
|
this.themeSwitchService.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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'
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -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];
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>ByhaiderHomepage</title>
|
<title>byHaider</title>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
|||||||
+8
-1
@@ -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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ['./src/**/*.{html,ts}'],
|
||||||
|
darkMode: 'class',
|
||||||
|
plugins: [
|
||||||
|
require('tailwindcss-primeui')
|
||||||
|
],
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user