diff --git a/app/globals.css b/app/globals.css index 9f182d9..b2a4dca 100644 --- a/app/globals.css +++ b/app/globals.css @@ -241,6 +241,122 @@ body { .bg-muted { background-color: hsl(var(--muted) / 0.8); } + + /* Christmas-themed animations */ + @keyframes twinkle { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.3; transform: scale(0.8); } + } + + @keyframes snowflake { + 0% { + transform: translateY(-100vh) rotate(0deg); + opacity: 1; + } + 100% { + transform: translateY(100vh) rotate(360deg); + opacity: 0; + } + } + + @keyframes sparkle { + 0%, 100% { + opacity: 0; + transform: scale(0) rotate(0deg); + } + 50% { + opacity: 1; + transform: scale(1) rotate(180deg); + } + } + + @keyframes glow { + 0%, 100% { + box-shadow: 0 0 5px hsl(var(--christmas-red)), 0 0 10px hsl(var(--christmas-red)), 0 0 15px hsl(var(--christmas-red)); + } + 50% { + box-shadow: 0 0 10px hsl(var(--christmas-green)), 0 0 20px hsl(var(--christmas-green)), 0 0 30px hsl(var(--christmas-green)); + } + } + + /* Christmas decorative elements */ + .christmas-twinkle { + animation: twinkle 2s ease-in-out infinite; + } + + .christmas-snowflake { + position: absolute; + color: white; + font-size: 1rem; + animation: snowflake 10s linear infinite; + pointer-events: none; + } + + .christmas-sparkle { + animation: sparkle 1.5s ease-in-out infinite; + } + + .christmas-glow { + animation: glow 2s ease-in-out infinite; + } + + /* Subtle Christmas gradient backgrounds */ + .christmas-gradient { + background: linear-gradient(135deg, + hsl(var(--christmas-red) / 0.1) 0%, + hsl(var(--christmas-green) / 0.1) 50%, + hsl(var(--christmas-gold) / 0.1) 100%); + } + + /* Christmas-themed borders */ + .christmas-border { + border: 2px solid; + border-image: linear-gradient(45deg, + hsl(var(--christmas-red)), + hsl(var(--christmas-green)), + hsl(var(--christmas-gold))) 1; + } + + /* Subtle Christmas pattern overlay */ + body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(circle at 20% 50%, hsl(var(--christmas-red) / 0.03) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, hsl(var(--christmas-green) / 0.03) 0%, transparent 50%), + radial-gradient(circle at 40% 20%, hsl(var(--christmas-gold) / 0.03) 0%, transparent 50%); + pointer-events: none; + z-index: 0; + } + + /* Christmas-themed card hover effects */ + .card:hover { + border-color: hsl(var(--christmas-red) / 0.3); + transition: border-color 0.3s ease; + } + + /* Christmas-themed button hover effects */ + button.bg-primary:hover { + background: linear-gradient(135deg, + hsl(var(--christmas-red)), + hsl(var(--christmas-green))); + transition: background 0.3s ease; + } + + /* Christmas-themed link colors */ + a:hover { + color: hsl(var(--christmas-red)); + transition: color 0.2s ease; + } + + /* Subtle Christmas border on focus */ + *:focus-visible { + outline-color: hsl(var(--christmas-red)); + } } @layer base { @@ -270,6 +386,10 @@ body { --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; + /* Christmas colors */ + --christmas-red: 0 84% 50%; + --christmas-green: 142 76% 36%; + --christmas-gold: 43 96% 56%; } .dark { --background: 0 0% 3.9%; @@ -278,24 +398,28 @@ body { --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; + --primary: 0 84% 50%; + --primary-foreground: 0 0% 98%; + --secondary: 142 76% 36%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; + --accent: 142 76% 36%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; - --border: 0 0% 14.9%; + --border: 142 76% 20%; --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; + --ring: 0 84% 50%; + --chart-1: 0 84% 50%; + --chart-2: 142 76% 36%; + --chart-3: 43 96% 56%; + --chart-4: 0 84% 50%; + --chart-5: 142 76% 36%; + /* Christmas colors */ + --christmas-red: 0 84% 50%; + --christmas-green: 142 76% 36%; + --christmas-gold: 43 96% 56%; } } diff --git a/app/layout.tsx b/app/layout.tsx index d2017bf..5d0d9a8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -6,6 +6,7 @@ import type React from "react" import { NotificationProvider } from "@/lib/notification-context" import { Metadata, Viewport } from "next" import KeepOnlineWrapper from "@/components/layout/KeepOnlineWrapper" +import { ChristmasDecorations } from "@/components/christmas-decorations" const inter = Inter({ subsets: ["latin"] }) @@ -74,6 +75,7 @@ export default function RootLayout({ + >([]) + + useEffect(() => { + // Generate snowflakes + const flakes = Array.from({ length: 30 }, (_, i) => ({ + id: i, + left: Math.random() * 100, + delay: Math.random() * 5, + duration: 8 + Math.random() * 4, + })) + setSnowflakes(flakes) + }, []) + + return ( +
+ {/* Snowflakes */} + {snowflakes.map((flake) => ( +
+ ❄ +
+ ))} + + {/* Twinkling stars in corners */} +
+ ✨ +
+
+ ✨ +
+
+ ✨ +
+
+ ✨ +
+ + {/* Christmas tree emoji decorations */} +
+ 🎄 +
+
+ 🎄 +
+
+ ) +} + diff --git a/public/git-info.json b/public/git-info.json index 030f4db..d901b7a 100644 --- a/public/git-info.json +++ b/public/git-info.json @@ -1,4 +1,4 @@ { - "commitHash": "884574c", - "buildTime": "2025-12-03T18:07:05.932Z" + "commitHash": "48f1b97", + "buildTime": "2025-12-08T00:12:30.781Z" } \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 23c72ea..e11b707 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -29,12 +29,36 @@ const config: Config = { shimmer: { '0%': { transform: 'translateX(-100%)' }, '100%': { transform: 'translateX(100%)' } + }, + twinkle: { + '0%, 100%': { opacity: '1', transform: 'scale(1)' }, + '50%': { opacity: '0.3', transform: 'scale(0.8)' } + }, + snowflake: { + '0%': { transform: 'translateY(-100vh) rotate(0deg)', opacity: '1' }, + '100%': { transform: 'translateY(100vh) rotate(360deg)', opacity: '0' } + }, + sparkle: { + '0%, 100%': { opacity: '0', transform: 'scale(0) rotate(0deg)' }, + '50%': { opacity: '1', transform: 'scale(1) rotate(180deg)' } + }, + glow: { + '0%, 100%': { + boxShadow: '0 0 5px hsl(0 84% 50%), 0 0 10px hsl(0 84% 50%), 0 0 15px hsl(0 84% 50%)' + }, + '50%': { + boxShadow: '0 0 10px hsl(142 76% 36%), 0 0 20px hsl(142 76% 36%), 0 0 30px hsl(142 76% 36%)' + } } }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", - "shimmer": "shimmer 2s infinite" + "shimmer": "shimmer 2s infinite", + "twinkle": "twinkle 2s ease-in-out infinite", + "snowflake": "snowflake 10s linear infinite", + "sparkle": "sparkle 1.5s ease-in-out infinite", + "glow": "glow 2s ease-in-out infinite" }, colors: { background: 'hsl(var(--background))',