From 1d080761fb0f5e4a6bad5b6dddd2ad3ea1cd1fa7 Mon Sep 17 00:00:00 2001 From: JCBSComputer Date: Mon, 29 Jun 2026 16:38:40 +0200 Subject: [PATCH] Themes/ Ram Increased to 16GB --- Web_Backgrounds/cosmic-theme.css | 282 +++++++++++++++++++ Web_Backgrounds/cosmic-tokens.json | 117 ++++++++ Web_Backgrounds/cyber-theme.css | 313 +++++++++++++++++++++ Web_Backgrounds/cyber-tokens.json | 69 +++++ Web_Backgrounds/spidey-theme.css | 124 +++++++- Web_Backgrounds/spidey-tokens.json | 107 ++++--- src/app/(dashboard)/dashboard/page.tsx | 15 +- src/components/layout/app-shell.tsx | 125 +++++--- src/components/layout/system-monitor.tsx | 2 +- src/components/settings/theme-settings.tsx | 3 + src/providers/website-theme-provider.tsx | 8 +- 11 files changed, 1074 insertions(+), 91 deletions(-) create mode 100644 Web_Backgrounds/cosmic-theme.css create mode 100644 Web_Backgrounds/cosmic-tokens.json create mode 100644 Web_Backgrounds/cyber-theme.css create mode 100644 Web_Backgrounds/cyber-tokens.json diff --git a/Web_Backgrounds/cosmic-theme.css b/Web_Backgrounds/cosmic-theme.css new file mode 100644 index 0000000..e44ad83 --- /dev/null +++ b/Web_Backgrounds/cosmic-theme.css @@ -0,0 +1,282 @@ +.dark.theme-cosmic { + --background: 260 30% 8%; + --foreground: 210 40% 98%; + --card: 260 25% 12%; + --card-foreground: 210 40% 98%; + --popover: 260 25% 12%; + --popover-foreground: 210 40% 98%; + --primary: 280 60% 55%; + --primary-foreground: 0 0% 100%; + --secondary: 260 20% 20%; + --secondary-foreground: 210 40% 98%; + --muted: 260 20% 18%; + --muted-foreground: 260 10% 60%; + --accent: 280 60% 55%; + --accent-foreground: 210 40% 98%; + --destructive: 0 70% 50%; + --destructive-foreground: 210 40% 98%; + --border: 260 20% 22%; + --input: 260 20% 22%; + --ring: 280 60% 55%; + --radius: 0.5rem; + --sidebar: 260 30% 8%; + --sidebar-foreground: 210 40% 98%; + --sidebar-primary: 280 60% 55%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 280 60% 55%; + --sidebar-accent-foreground: 210 40% 98%; + --sidebar-border: 260 20% 20%; + --sidebar-ring: 280 60% 55%; +} + +.light.theme-cosmic { + --background: 0 0% 98%; + --foreground: 260 30% 12%; + --card: 0 0% 100%; + --card-foreground: 260 30% 12%; + --popover: 0 0% 100%; + --popover-foreground: 260 30% 12%; + --primary: 280 50% 50%; + --primary-foreground: 0 0% 100%; + --secondary: 260 20% 92%; + --secondary-foreground: 260 30% 20%; + --muted: 260 15% 92%; + --muted-foreground: 260 10% 45%; + --accent: 280 50% 50%; + --accent-foreground: 0 0% 100%; + --destructive: 0 80% 50%; + --destructive-foreground: 0 0% 100%; + --border: 260 15% 85%; + --input: 260 15% 85%; + --ring: 280 50% 50%; + --radius: 0.5rem; + --sidebar: 0 0% 100%; + --sidebar-foreground: 260 30% 12%; + --sidebar-primary: 280 50% 50%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 280 50% 50%; + --sidebar-accent-foreground: 0 0% 100%; + --sidebar-border: 260 15% 85%; + --sidebar-ring: 280 50% 50%; +} + +.dark.theme-cosmic body { + background: transparent + radial-gradient(ellipse 120% 70% at 20% 30%, rgba(100, 60, 200, 0.25) 0%, transparent 60%), + radial-gradient(ellipse 80% 60% at 80% 70%, rgba(0, 200, 100, 0.15) 0%, transparent 50%), + radial-gradient(ellipse 60% 50% at 60% 20%, rgba(200, 50, 180, 0.2) 0%, transparent 50%), + radial-gradient(ellipse 100% 80% at 40% 80%, rgba(50, 100, 220, 0.15) 0%, transparent 50%); + background-size: 200% 200%; + animation: cosmic-drift 90s linear infinite; +} + +.dark.theme-cosmic body > div { + background: transparent !important; +} + +.light.theme-cosmic body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background: + radial-gradient(ellipse 100% 60% at 15% 25%, rgba(0, 200, 80, 0.06) 0%, transparent 60%), + radial-gradient(ellipse 70% 50% at 80% 70%, rgba(100, 60, 200, 0.04) 0%, transparent 50%), + radial-gradient(ellipse 50% 40% at 60% 20%, rgba(0, 200, 80, 0.05) 0%, transparent 50%); +} + +@keyframes cosmic-drift { + 0% { background-position: 0% 0%; } + 50% { background-position: 100% 100%; } + 100% { background-position: 0% 0%; } +} + +.dark.theme-cosmic .text-glow { + text-shadow: 0 0 10px hsl(120, 100%, 45%), 0 0 30px hsl(120, 100%, 45%), 0 0 60px rgba(0, 220, 100, 0.4); +} + +.light.theme-cosmic .text-glow { + text-shadow: 0 0 8px hsl(280, 50%, 50%), 0 0 20px hsl(280, 50%, 50%), 0 0 40px rgba(200, 50, 200, 0.3); +} + +.dark.theme-cosmic h1, .dark.theme-cosmic h2, .dark.theme-cosmic h3 { + background: linear-gradient(135deg, hsl(120, 100%, 45%), hsl(170, 80%, 50%)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.light.theme-cosmic h1, .light.theme-cosmic h2, .light.theme-cosmic h3 { + background: linear-gradient(135deg, hsl(280, 50%, 45%), hsl(280, 60%, 55%)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.dark.theme-cosmic a { + color: hsl(120, 90%, 50%); + text-decoration: none; + transition: color 0.2s; +} + +.light.theme-cosmic a { + color: hsl(280, 50%, 45%); + text-decoration: none; + transition: color 0.2s; +} + +.dark.theme-cosmic a:hover { + color: hsl(170, 80%, 50%); + text-shadow: 0 0 8px rgba(0, 220, 100, 0.4); +} + +.light.theme-cosmic a:hover { + color: hsl(280, 60%, 55%); +} + +.dark.theme-cosmic blockquote { + border-left: 3px solid hsl(280, 60%, 55%); + color: hsl(260, 15%, 70%); + font-style: italic; +} + +.light.theme-cosmic blockquote { + border-left: 3px solid hsl(280, 50%, 50%); + color: hsl(260, 10%, 45%); + font-style: italic; +} + +.dark.theme-cosmic code { + color: hsl(120, 90%, 50%); + background: rgba(100, 60, 200, 0.15); + border: 1px solid rgba(100, 60, 200, 0.2); +} + +.light.theme-cosmic code { + color: hsl(280, 50%, 45%); + background: rgba(100, 60, 200, 0.06); + border: 1px solid rgba(100, 60, 200, 0.15); +} + +.dark.theme-cosmic pre { + background: rgba(13, 8, 32, 0.8); + border: 1px solid rgba(100, 60, 200, 0.15); +} + +.light.theme-cosmic pre { + background: rgba(0, 200, 80, 0.03); + border: 1px solid rgba(0, 200, 80, 0.1); +} + +.dark.theme-cosmic hr { + border-color: rgba(100, 60, 200, 0.2); +} + +.light.theme-cosmic hr { + border-color: rgba(0, 200, 80, 0.15); +} + +.dark.theme-cosmic table th { + color: hsl(120, 90%, 50%); +} + +.light.theme-cosmic table th { + color: hsl(280, 50%, 45%); +} + +.dark.theme-cosmic table td { + border-color: rgba(100, 60, 200, 0.15); +} + +.light.theme-cosmic table td { + border-color: rgba(0, 200, 80, 0.1); +} + +.dark.theme-cosmic ::selection { + background: rgba(200, 50, 200, 0.25); + color: hsl(0, 0%, 100%); +} + +.light.theme-cosmic ::selection { + background: rgba(200, 50, 200, 0.15); + color: hsl(0, 0%, 0%); +} + +.dark.theme-cosmic input::placeholder, +.dark.theme-cosmic textarea::placeholder { + color: hsl(260, 10%, 40%); +} + +.light.theme-cosmic input::placeholder, +.light.theme-cosmic textarea::placeholder { + color: hsl(260, 10%, 65%); +} + +.dark.theme-cosmic .page-header-title { + color: hsl(120, 90%, 50%); +} + +.light.theme-cosmic .page-header-title { + color: hsl(280, 50%, 45%); +} + +.dark.theme-cosmic .stat-card-value { + color: hsl(120, 90%, 50%); +} + +.light.theme-cosmic .stat-card-value { + color: hsl(280, 50%, 45%); +} + +.dark.theme-cosmic .badge { + color: hsl(120, 90%, 50%); +} + +.light.theme-cosmic .badge { + color: hsl(280, 50%, 45%); +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full { + background: linear-gradient(to right, hsl(280, 60%, 55%), hsl(280, 70%, 65%), hsl(280, 60%, 55%)) !important; +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full { + background: linear-gradient(to right, hsl(120, 100%, 45%), hsl(120, 100%, 55%), hsl(120, 100%, 45%)) !important; +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 { + background: hsla(280, 60%, 55%, 0.1) !important; +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 { + background: hsla(120, 100%, 45%, 0.1) !important; +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg { + color: hsl(280, 60%, 55%) !important; +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg { + color: hsl(120, 100%, 45%) !important; +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 { + background: linear-gradient(to right, transparent, hsla(280, 60%, 55%, 0.25), transparent) !important; +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 { + background: linear-gradient(to right, transparent, hsla(120, 100%, 45%, 0.25), transparent) !important; +} + +.dark.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r { + background: linear-gradient(to right, hsl(280, 60%, 55%), hsl(120, 100%, 45%)) !important; +} + +.light.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full { + background: linear-gradient(to right, hsl(280, 50%, 50%), hsl(280, 60%, 60%), hsl(280, 50%, 50%)) !important; +} + +.light.theme-cosmic .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full { + background: linear-gradient(to right, hsl(120, 80%, 40%), hsl(120, 80%, 50%), hsl(120, 80%, 40%)) !important; +} diff --git a/Web_Backgrounds/cosmic-tokens.json b/Web_Backgrounds/cosmic-tokens.json new file mode 100644 index 0000000..bbe31f9 --- /dev/null +++ b/Web_Backgrounds/cosmic-tokens.json @@ -0,0 +1,117 @@ +{ + "theme": { + "id": "cosmic", + "name": "Cosmic", + "description": "Dark mode: green text with purple highlights + glowing NEBULA header; Light mode: purple text + purple NEBULA header", + "type": "dual", + "default": false + }, + "modes": { + "dark": { + "colors": { + "background": "hsl(260, 30%, 8%)", + "foreground": "hsl(210, 40%, 98%)", + "card": "hsl(260, 25%, 12%)", + "cardForeground": "hsl(210, 40%, 98%)", + "popover": "hsl(260, 25%, 12%)", + "popoverForeground": "hsl(210, 40%, 98%)", + "primary": "hsl(280, 60%, 55%)", + "primaryForeground": "hsl(0, 0%, 100%)", + "secondary": "hsl(260, 20%, 20%)", + "secondaryForeground": "hsl(210, 40%, 98%)", + "muted": "hsl(260, 20%, 18%)", + "mutedForeground": "hsl(260, 10%, 60%)", + "accent": "hsl(280, 60%, 55%)", + "accentForeground": "hsl(210, 40%, 98%)", + "destructive": "hsl(0, 70%, 50%)", + "destructiveForeground": "hsl(210, 40%, 98%)", + "border": "hsl(260, 20%, 22%)", + "input": "hsl(260, 20%, 22%)", + "sidebar": "hsl(260, 30%, 8%)", + "sidebarForeground": "hsl(210, 40%, 98%)", + "sidebarPrimary": "hsl(280, 60%, 55%)", + "sidebarPrimaryForeground": "hsl(0, 0%, 100%)", + "sidebarAccent": "hsl(280, 60%, 55%)", + "sidebarAccentForeground": "hsl(210, 40%, 98%)", + "sidebarBorder": "hsl(260, 20%, 22%)", + "sidebarRing": "hsl(280, 60%, 55%)" + }, + "textColors": { + "heading": "linear-gradient(135deg, #00E060, #2dd4bf)", + "body": "#e8e8ef", + "muted": "#8a7faa", + "link": "#00E060", + "linkHover": "#2dd4bf", + "code": "#00E060", + "placeholder": "#554b70" + }, + "backgroundImage": null, + "backgroundGradients": [ + "rgba(100, 60, 200, 0.15) at 20% 30%", + "rgba(0, 220, 100, 0.08) at 80% 70%", + "rgba(200, 50, 180, 0.10) at 60% 20%", + "rgba(50, 100, 220, 0.08) at 40% 80%" + ] + }, + "light": { + "colors": { + "background": "hsl(0, 0%, 98%)", + "foreground": "hsl(260, 30%, 12%)", + "card": "hsl(0, 0%, 100%)", + "cardForeground": "hsl(260, 30%, 12%)", + "popover": "hsl(0, 0%, 100%)", + "popoverForeground": "hsl(260, 30%, 12%)", + "primary": "hsl(280, 50%, 50%)", + "primaryForeground": "hsl(0, 0%, 100%)", + "secondary": "hsl(260, 20%, 92%)", + "secondaryForeground": "hsl(260, 30%, 20%)", + "muted": "hsl(260, 15%, 92%)", + "mutedForeground": "hsl(260, 10%, 45%)", + "accent": "hsl(280, 50%, 50%)", + "accentForeground": "hsl(0, 0%, 100%)", + "destructive": "hsl(0, 80%, 50%)", + "destructiveForeground": "hsl(0, 0%, 100%)", + "border": "hsl(260, 15%, 85%)", + "input": "hsl(260, 15%, 85%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebarForeground": "hsl(260, 30%, 12%)", + "sidebarPrimary": "hsl(280, 50%, 50%)", + "sidebarPrimaryForeground": "hsl(0, 0%, 100%)", + "sidebarAccent": "hsl(280, 50%, 50%)", + "sidebarAccentForeground": "hsl(0, 0%, 100%)", + "sidebarBorder": "hsl(260, 15%, 85%)", + "sidebarRing": "hsl(280, 50%, 50%)" + }, + "textColors": { + "heading": "linear-gradient(135deg, #7c3aed, #a855f7)", + "body": "#1a0a2e", + "muted": "#6b5b7a", + "link": "#7c3aed", + "linkHover": "#a855f7", + "code": "#7c3aed", + "placeholder": "#a8a0b0" + }, + "backgroundImage": null, + "backgroundGradients": [ + "rgba(0, 200, 80, 0.06) at 15% 25%", + "rgba(100, 60, 200, 0.04) at 80% 70%", + "rgba(0, 200, 80, 0.05) at 60% 20%" + ] + } + }, + "borderRadius": "0.5rem", + "typography": { + "fontFamily": "Inter, sans-serif", + "headingFont": "Inter, sans-serif" + }, + "keyColors": { + "primary": "#a855f7 (dark) / #7c3aed (light)", + "background": "#0d0820 (dark) / #fafafa (light)", + "card": "#16102e (dark) / #ffffff (light)", + "sidebar": "#0d0820 (dark) / #ffffff (light)", + "border": "#2a2240 (dark) / #d4d0dc (light)", + "text": "#e8e8ef (dark) / #1a0a2e (light)", + "mutedText": "#8a7faa (dark) / #6b5b7a (light)", + "headingGradient": "#00E060 → #2dd4bf (dark) / #7c3aed → #a855f7 (light)" + } +} diff --git a/Web_Backgrounds/cyber-theme.css b/Web_Backgrounds/cyber-theme.css new file mode 100644 index 0000000..01e7404 --- /dev/null +++ b/Web_Backgrounds/cyber-theme.css @@ -0,0 +1,313 @@ +.dark.theme-cyber { + --background: 240 30% 4%; + --foreground: 180 50% 95%; + --card: 240 25% 8%; + --card-foreground: 180 50% 95%; + --popover: 240 25% 8%; + --popover-foreground: 180 50% 95%; + --primary: 280 80% 55%; + --primary-foreground: 0 0% 100%; + --secondary: 280 80% 55%; + --secondary-foreground: 0 0% 100%; + --muted: 240 15% 15%; + --muted-foreground: 180 10% 55%; + --accent: 280 80% 55%; + --accent-foreground: 0 0% 100%; + --destructive: 0 70% 50%; + --destructive-foreground: 210 40% 98%; + --border: 180 30% 20%; + --input: 180 30% 20%; + --ring: 280 80% 55%; + --radius: 0.5rem; + --sidebar: 240 30% 4%; + --sidebar-foreground: 180 50% 95%; + --sidebar-primary: 280 80% 55%; + --sidebar-primary-foreground: 0 0% 0%; + --sidebar-accent: 280 80% 55%; + --sidebar-accent-foreground: 0 0% 100%; + --sidebar-border: 180 30% 15%; + --sidebar-ring: 280 80% 55%; +} + +.light.theme-cyber { + --background: 180 20% 96%; + --foreground: 240 40% 10%; + --card: 0 0% 100%; + --card-foreground: 240 40% 10%; + --popover: 0 0% 100%; + --popover-foreground: 240 40% 10%; + --primary: 280 60% 50%; + --primary-foreground: 0 0% 100%; + --secondary: 280 60% 50%; + --secondary-foreground: 0 0% 100%; + --muted: 180 15% 88%; + --muted-foreground: 240 10% 45%; + --accent: 280 60% 50%; + --accent-foreground: 0 0% 100%; + --destructive: 0 80% 50%; + --destructive-foreground: 0 0% 100%; + --border: 180 15% 82%; + --input: 180 15% 82%; + --ring: 280 60% 50%; + --radius: 0.5rem; + --sidebar: 0 0% 100%; + --sidebar-foreground: 240 40% 10%; + --sidebar-primary: 280 60% 50%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 280 60% 50%; + --sidebar-accent-foreground: 0 0% 100%; + --sidebar-border: 180 15% 82%; + --sidebar-ring: 280 60% 50%; +} + +.dark.theme-cyber body { + background: transparent + linear-gradient(135deg, rgba(0, 10, 20, 0.95), rgba(10, 0, 20, 0.9)); + position: relative; +} + +.dark.theme-cyber body > div { + background: transparent !important; +} + +.dark.theme-cyber body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -2; + pointer-events: none; + background-image: + linear-gradient(0deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px); + background-size: 40px 40px; +} + +.dark.theme-cyber body::after { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background: + radial-gradient(ellipse 100% 50% at 10% 20%, rgba(0, 255, 255, 0.08) 0%, transparent 60%), + radial-gradient(ellipse 80% 50% at 90% 80%, rgba(255, 0, 255, 0.08) 0%, transparent 60%), + radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0, 255, 255, 0.04) 0%, transparent 50%), + radial-gradient(20px 20px at 15% 15%, rgba(0, 255, 255, 0.15) 0%, transparent 100%), + radial-gradient(15px 15px at 85% 25%, rgba(255, 0, 255, 0.12) 0%, transparent 100%), + radial-gradient(12px 12px at 45% 75%, rgba(0, 255, 255, 0.1) 0%, transparent 100%), + radial-gradient(10px 10px at 70% 45%, rgba(255, 0, 255, 0.08) 0%, transparent 100%), + radial-gradient(8px 8px at 30% 60%, rgba(0, 255, 255, 0.12) 0%, transparent 100%), + radial-gradient(11px 11px at 60% 10%, rgba(255, 0, 255, 0.1) 0%, transparent 100%), + radial-gradient(9px 9px at 90% 65%, rgba(0, 255, 255, 0.08) 0%, transparent 100%), + radial-gradient(13px 13px at 5% 85%, rgba(255, 0, 255, 0.1) 0%, transparent 100%), + radial-gradient(7px 7px at 55% 55%, rgba(0, 255, 255, 0.06) 0%, transparent 100%); + animation: neon-drift 20s ease-in-out infinite alternate; +} + +.light.theme-cyber body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background: + radial-gradient(ellipse 80% 50% at 15% 20%, rgba(0, 200, 200, 0.05) 0%, transparent 60%), + radial-gradient(ellipse 80% 50% at 85% 80%, rgba(200, 0, 200, 0.04) 0%, transparent 60%), + repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(0, 200, 200, 0.02) 40px, rgba(0, 200, 200, 0.02) 41px), + repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0, 200, 200, 0.02) 40px, rgba(0, 200, 200, 0.02) 41px); +} + +@keyframes neon-drift { + 0% { background-position: 0% 0%; opacity: 0.6; } + 50% { background-position: 100% 100%; opacity: 1; } + 100% { background-position: 0% 100%; opacity: 0.6; } +} + +.dark.theme-cyber .text-glow { + text-shadow: 0 0 10px hsl(180, 100%, 50%), 0 0 30px hsl(180, 100%, 50%), 0 0 60px rgba(0, 255, 255, 0.5); +} + +.light.theme-cyber .text-glow { + text-shadow: 0 0 8px hsl(180, 100%, 40%), 0 0 20px hsl(180, 100%, 40%), 0 0 40px rgba(0, 200, 200, 0.3); +} + +.dark.theme-cyber h1, .dark.theme-cyber h2, .dark.theme-cyber h3 { + background: linear-gradient(135deg, hsl(180, 100%, 50%), hsl(280, 80%, 55%)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.light.theme-cyber h1, .light.theme-cyber h2, .light.theme-cyber h3 { + background: linear-gradient(135deg, hsl(180, 100%, 35%), hsl(280, 60%, 45%)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.dark.theme-cyber a { + color: hsl(180, 100%, 55%); + text-decoration: none; + transition: color 0.2s; +} + +.light.theme-cyber a { + color: hsl(180, 100%, 35%); + text-decoration: none; + transition: color 0.2s; +} + +.dark.theme-cyber a:hover { + color: hsl(280, 80%, 60%); + text-shadow: 0 0 8px rgba(255, 0, 255, 0.4); +} + +.light.theme-cyber a:hover { + color: hsl(280, 60%, 50%); +} + +.dark.theme-cyber blockquote { + border-left: 3px solid hsl(280, 80%, 55%); + color: hsl(180, 20%, 70%); + font-style: italic; +} + +.light.theme-cyber blockquote { + border-left: 3px solid hsl(280, 60%, 50%); + color: hsl(240, 10%, 45%); + font-style: italic; +} + +.dark.theme-cyber code { + color: hsl(180, 100%, 55%); + background: rgba(0, 255, 255, 0.08); + border: 1px solid rgba(0, 255, 255, 0.15); +} + +.light.theme-cyber code { + color: hsl(280, 60%, 45%); + background: rgba(0, 200, 200, 0.05); + border: 1px solid rgba(0, 200, 200, 0.1); +} + +.dark.theme-cyber pre { + background: rgba(0, 5, 15, 0.9); + border: 1px solid rgba(0, 255, 255, 0.1); +} + +.light.theme-cyber pre { + background: rgba(0, 200, 200, 0.03); + border: 1px solid rgba(0, 200, 200, 0.08); +} + +.dark.theme-cyber hr { + border-color: rgba(0, 255, 255, 0.15); +} + +.light.theme-cyber hr { + border-color: rgba(0, 200, 200, 0.1); +} + +.dark.theme-cyber table th { + color: hsl(180, 100%, 55%); +} + +.light.theme-cyber table th { + color: hsl(180, 100%, 35%); +} + +.dark.theme-cyber table td { + border-color: rgba(0, 255, 255, 0.12); +} + +.light.theme-cyber table td { + border-color: rgba(0, 200, 200, 0.1); +} + +.dark.theme-cyber ::selection { + background: rgba(0, 255, 255, 0.2); + color: hsl(0, 0%, 0%); +} + +.light.theme-cyber ::selection { + background: rgba(0, 200, 200, 0.12); + color: hsl(0, 0%, 0%); +} + +.dark.theme-cyber input::placeholder, +.dark.theme-cyber textarea::placeholder { + color: hsl(180, 20%, 40%); +} + +.light.theme-cyber input::placeholder, +.light.theme-cyber textarea::placeholder { + color: hsl(240, 10%, 65%); +} + +.dark.theme-cyber .page-header-title { + color: hsl(180, 100%, 55%); +} + +.light.theme-cyber .page-header-title { + color: hsl(180, 100%, 35%); +} + +.dark.theme-cyber .stat-card-value { + color: hsl(180, 100%, 55%); +} + +.light.theme-cyber .stat-card-value { + color: hsl(180, 100%, 35%); +} + +.dark.theme-cyber .badge { + color: hsl(180, 100%, 55%); +} + +.light.theme-cyber .badge { + color: hsl(180, 100%, 35%); +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full { + background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 70%), hsl(180, 100%, 50%)) !important; +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full { + background: linear-gradient(to right, hsl(280, 80%, 55%), hsl(280, 80%, 70%), hsl(280, 80%, 55%)) !important; +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 { + background: hsla(180, 100%, 50%, 0.1) !important; +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 { + background: hsla(280, 80%, 55%, 0.1) !important; +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg { + color: hsl(180, 100%, 50%) !important; +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg { + color: hsl(280, 80%, 55%) !important; +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 { + background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important; +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 { + background: linear-gradient(to right, transparent, hsla(280, 80%, 55%, 0.25), transparent) !important; +} + +.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r { + background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(280, 80%, 55%)) !important; +} + +.light.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full { + background: linear-gradient(to right, hsl(180, 100%, 40%), hsl(180, 100%, 55%), hsl(180, 100%, 40%)) !important; +} + +.light.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full { + background: linear-gradient(to right, hsl(280, 60%, 50%), hsl(280, 60%, 65%), hsl(280, 60%, 50%)) !important; +} diff --git a/Web_Backgrounds/cyber-tokens.json b/Web_Backgrounds/cyber-tokens.json new file mode 100644 index 0000000..39b6bba --- /dev/null +++ b/Web_Backgrounds/cyber-tokens.json @@ -0,0 +1,69 @@ +{ + "name": "Cyberpunk", + "description": "Neon-cyberpunk theme with cyan grid, magenta accents, and futuristic glow", + "dark": { + "colors": { + "background": "240 30% 4%", + "foreground": "180 50% 95%", + "primary": "180 100% 50%", + "secondary": "280 80% 55%", + "accent": "280 80% 55%", + "muted": "240 15% 15%", + "border": "180 30% 20%", + "ring": "180 100% 50%", + "card": "240 25% 8%", + "popover": "240 25% 8%" + }, + "textColors": { + "heading": "linear-gradient(135deg, hsl(180,100%,50%), hsl(280,80%,55%))", + "link": "hsl(180, 100%, 55%)", + "link-hover": "hsl(280, 80%, 60%)", + "code": "hsl(180, 100%, 55%)", + "blockquote": "hsl(180, 20%, 70%)", + "table-header": "hsl(180, 100%, 55%)", + "stat-card-value": "hsl(180, 100%, 55%)", + "badge": "hsl(180, 100%, 55%)", + "page-header-title": "hsl(180, 100%, 55%)", + "text-glow": "0 0 10px hsl(180,100%,50%), 0 0 30px hsl(180,100%,50%), 0 0 60px rgba(0,255,255,0.5)" + }, + "backgrounds": { + "body": "Deep navy-black with cyan grid lines, cyan and magenta neon glow gradients, and glowing dot particles", + "grid-color": "rgba(0, 255, 255, 0.03)", + "grid-size": "40px", + "glow-colors": ["rgba(0, 255, 255, 0.08)", "rgba(255, 0, 255, 0.08)"] + }, + "effects": { + "body-background-animation": "neon-drift 20s ease-in-out infinite alternate" + } + }, + "light": { + "colors": { + "background": "180 20% 96%", + "foreground": "240 40% 10%", + "primary": "180 100% 40%", + "secondary": "280 60% 50%", + "accent": "280 60% 50%", + "muted": "180 15% 88%", + "border": "180 15% 82%", + "ring": "180 100% 40%", + "card": "0 0% 100%", + "popover": "0 0% 100%" + }, + "textColors": { + "heading": "linear-gradient(135deg, hsl(180,100%,35%), hsl(280,60%,45%))", + "link": "hsl(180, 100%, 35%)", + "link-hover": "hsl(280, 60%, 50%)", + "code": "hsl(280, 60%, 45%)", + "blockquote": "hsl(240, 10%, 45%)", + "table-header": "hsl(180, 100%, 35%)", + "stat-card-value": "hsl(180, 100%, 35%)", + "badge": "hsl(180, 100%, 35%)", + "page-header-title": "hsl(180, 100%, 35%)", + "text-glow": "0 0 8px hsl(180,100%,40%), 0 0 20px hsl(180,100%,40%), 0 0 40px rgba(0,200,200,0.3)" + }, + "backgrounds": { + "body": "Light with subtle cyan and magenta gradient washes and faint grid lines", + "glow-colors": ["rgba(0, 200, 200, 0.05)", "rgba(200, 0, 200, 0.04)"] + } + } +} diff --git a/Web_Backgrounds/spidey-theme.css b/Web_Backgrounds/spidey-theme.css index 1fbd3d7..a380e24 100644 --- a/Web_Backgrounds/spidey-theme.css +++ b/Web_Backgrounds/spidey-theme.css @@ -1,9 +1,7 @@ -/* ============================================================================ - Spidey Theme — Baseline Design Tokens - This is the current website appearance captured as a reusable CSS theme. - ============================================================================ */ +@import url("./cosmic-theme.css"); +@import url("./cyber-theme.css"); -.theme-spidey { +.dark.theme-spidey { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; @@ -34,7 +32,38 @@ --sidebar-ring: 0 100% 53%; } -.theme-spidey body::before { +.light.theme-spidey { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 0 100% 45%; + --primary-foreground: 0 0% 100%; + --secondary: 210 40% 96%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 0 100% 45%; + --radius: 0.5rem; + --sidebar: 0 0% 100%; + --sidebar-foreground: 222.2 84% 4.9%; + --sidebar-primary: 0 100% 45%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 210 40% 96%; + --sidebar-accent-foreground: 222.2 47.4% 11.2%; + --sidebar-border: 214.3 31.8% 91.4%; + --sidebar-ring: 0 100% 45%; +} + +.dark.theme-spidey body::before { content: ""; position: fixed; inset: 0; @@ -67,3 +96,86 @@ background-size: 200% 200%; animation: drift 60s linear infinite; } + +.light.theme-spidey body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background-image: + repeating-conic-gradient( + from 10deg, + transparent 0deg 10deg, + rgba(220, 38, 38, 0.03) 10deg 12deg + ), + repeating-radial-gradient( + circle at 50% 50%, + transparent 0, + transparent 30px, + rgba(37, 99, 235, 0.02) 30px, + transparent 32px + ), + radial-gradient(1.5px 1.5px at 10% 20%, rgba(220,38,38,0.2) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 30% 80%, rgba(37,99,235,0.2) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 50% 30%, rgba(220,38,38,0.15) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 70% 60%, rgba(37,99,235,0.15) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 85% 15%, rgba(220,38,38,0.2) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 20% 50%, rgba(37,99,235,0.15) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 65% 85%, rgba(220,38,38,0.15) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 40% 10%, rgba(37,99,235,0.2) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 90% 75%, rgba(220,38,38,0.15) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 5% 60%, rgba(37,99,235,0.2) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 55% 55%, rgba(220,38,38,0.1) 0%, transparent 100%); + background-size: 200% 200%; + animation: drift 60s linear infinite; +} + +@keyframes drift { + 0% { background-position: 0% 0%; } + 100% { background-position: 100% 100%; } +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full { + background: linear-gradient(to right, hsl(0, 100%, 53%), hsl(0, 100%, 65%), hsl(0, 100%, 53%)) !important; +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full { + background: linear-gradient(to right, hsl(217, 91%, 60%), hsl(217, 91%, 70%), hsl(217, 91%, 60%)) !important; +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 { + background: hsla(0, 100%, 53%, 0.1) !important; +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 { + background: hsla(217, 91%, 60%, 0.1) !important; +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg { + color: hsl(0, 100%, 53%) !important; +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg { + color: hsl(217, 91%, 60%) !important; +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 { + background: linear-gradient(to right, transparent, hsla(0, 100%, 53%, 0.25), transparent) !important; +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 { + background: linear-gradient(to right, transparent, hsla(217, 91%, 60%, 0.25), transparent) !important; +} + +.dark.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r { + background: linear-gradient(to right, hsl(0, 100%, 53%), hsl(217, 91%, 60%)) !important; +} + +.light.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full { + background: linear-gradient(to right, hsl(0, 100%, 45%), hsl(0, 100%, 55%), hsl(0, 100%, 45%)) !important; +} + +.light.theme-spidey .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full { + background: linear-gradient(to right, hsl(217, 91%, 50%), hsl(217, 91%, 60%), hsl(217, 91%, 50%)) !important; +} diff --git a/Web_Backgrounds/spidey-tokens.json b/Web_Backgrounds/spidey-tokens.json index 760ce4a..c0ce949 100644 --- a/Web_Backgrounds/spidey-tokens.json +++ b/Web_Backgrounds/spidey-tokens.json @@ -2,38 +2,73 @@ "theme": { "id": "spidey", "name": "Spidey", - "description": "Current website appearance — dark theme with red accents", - "type": "dark", + "description": "Dark mode with red accents and web patterns; light mode with clean red-blue accents", + "type": "dual", "default": true }, - "colors": { - "background": "hsl(222.2, 84%, 4.9%)", - "foreground": "hsl(210, 40%, 98%)", - "card": "hsl(222.2, 84%, 4.9%)", - "cardForeground": "hsl(210, 40%, 98%)", - "popover": "hsl(222.2, 84%, 4.9%)", - "popoverForeground": "hsl(210, 40%, 98%)", - "primary": "hsl(0, 100%, 53%)", - "primaryForeground": "hsl(222.2, 47.4%, 11.2%)", - "secondary": "hsl(217.2, 32.6%, 17.5%)", - "secondaryForeground": "hsl(210, 40%, 98%)", - "muted": "hsl(217.2, 32.6%, 17.5%)", - "mutedForeground": "hsl(215, 20.2%, 65.1%)", - "accent": "hsl(217.2, 32.6%, 17.5%)", - "accentForeground": "hsl(210, 40%, 98%)", - "destructive": "hsl(0, 62.8%, 30.6%)", - "destructiveForeground": "hsl(210, 40%, 98%)", - "border": "hsl(217.2, 32.6%, 17.5%)", - "input": "hsl(217.2, 32.6%, 17.5%)", - "ring": "hsl(0, 100%, 53%)", - "sidebar": "hsl(222.2, 84%, 4.9%)", - "sidebarForeground": "hsl(210, 40%, 98%)", - "sidebarPrimary": "hsl(0, 100%, 53%)", - "sidebarPrimaryForeground": "hsl(0, 0%, 100%)", - "sidebarAccent": "hsl(217.2, 32.6%, 17.5%)", - "sidebarAccentForeground": "hsl(210, 40%, 98%)", - "sidebarBorder": "hsl(217.2, 32.6%, 17.5%)", - "sidebarRing": "hsl(0, 100%, 53%)" + "modes": { + "dark": { + "colors": { + "background": "hsl(222.2, 84%, 4.9%)", + "foreground": "hsl(210, 40%, 98%)", + "card": "hsl(222.2, 84%, 4.9%)", + "cardForeground": "hsl(210, 40%, 98%)", + "popover": "hsl(222.2, 84%, 4.9%)", + "popoverForeground": "hsl(210, 40%, 98%)", + "primary": "hsl(0, 100%, 53%)", + "primaryForeground": "hsl(222.2, 47.4%, 11.2%)", + "secondary": "hsl(217.2, 32.6%, 17.5%)", + "secondaryForeground": "hsl(210, 40%, 98%)", + "muted": "hsl(217.2, 32.6%, 17.5%)", + "mutedForeground": "hsl(215, 20.2%, 65.1%)", + "accent": "hsl(217.2, 32.6%, 17.5%)", + "accentForeground": "hsl(210, 40%, 98%)", + "destructive": "hsl(0, 62.8%, 30.6%)", + "destructiveForeground": "hsl(210, 40%, 98%)", + "border": "hsl(217.2, 32.6%, 17.5%)", + "input": "hsl(217.2, 32.6%, 17.5%)", + "ring": "hsl(0, 100%, 53%)", + "sidebar": "hsl(222.2, 84%, 4.9%)", + "sidebarForeground": "hsl(210, 40%, 98%)", + "sidebarPrimary": "hsl(0, 100%, 53%)", + "sidebarPrimaryForeground": "hsl(0, 0%, 100%)", + "sidebarAccent": "hsl(217.2, 32.6%, 17.5%)", + "sidebarAccentForeground": "hsl(210, 40%, 98%)", + "sidebarBorder": "hsl(217.2, 32.6%, 17.5%)", + "sidebarRing": "hsl(0, 100%, 53%)" + } + }, + "light": { + "colors": { + "background": "hsl(0, 0%, 100%)", + "foreground": "hsl(222.2, 84%, 4.9%)", + "card": "hsl(0, 0%, 100%)", + "cardForeground": "hsl(222.2, 84%, 4.9%)", + "popover": "hsl(0, 0%, 100%)", + "popoverForeground": "hsl(222.2, 84%, 4.9%)", + "primary": "hsl(0, 100%, 45%)", + "primaryForeground": "hsl(0, 0%, 100%)", + "secondary": "hsl(210, 40%, 96%)", + "secondaryForeground": "hsl(222.2, 47.4%, 11.2%)", + "muted": "hsl(210, 40%, 96%)", + "mutedForeground": "hsl(215.4, 16.3%, 46.9%)", + "accent": "hsl(210, 40%, 96%)", + "accentForeground": "hsl(222.2, 47.4%, 11.2%)", + "destructive": "hsl(0, 84.2%, 60.2%)", + "destructiveForeground": "hsl(210, 40%, 98%)", + "border": "hsl(214.3, 31.8%, 91.4%)", + "input": "hsl(214.3, 31.8%, 91.4%)", + "ring": "hsl(0, 100%, 45%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebarForeground": "hsl(222.2, 84%, 4.9%)", + "sidebarPrimary": "hsl(0, 100%, 45%)", + "sidebarPrimaryForeground": "hsl(0, 0%, 100%)", + "sidebarAccent": "hsl(210, 40%, 96%)", + "sidebarAccentForeground": "hsl(222.2, 47.4%, 11.2%)", + "sidebarBorder": "hsl(214.3, 31.8%, 91.4%)", + "sidebarRing": "hsl(0, 100%, 45%)" + } + } }, "borderRadius": "0.5rem", "typography": { @@ -42,11 +77,11 @@ }, "keyColors": { "primary": "#FF0000", - "background": "#0a0a0f", - "card": "#141414", - "sidebar": "#0a0a0f", - "border": "#1a1a24", - "text": "#e8e8ef", - "mutedText": "#888888" + "background": "#0a0a0f (dark) / #ffffff (light)", + "card": "#141414 (dark) / #ffffff (light)", + "sidebar": "#0a0a0f (dark) / #ffffff (light)", + "border": "#1a1a24 (dark) / #e2e4ea (light)", + "text": "#e8e8ef (dark) / #0a0a1a (light)", + "mutedText": "#888888 (dark) / #6b7280 (light)" } } diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx index d061bf2..52cafb4 100644 --- a/src/app/(dashboard)/dashboard/page.tsx +++ b/src/app/(dashboard)/dashboard/page.tsx @@ -24,8 +24,10 @@ import { SelectValue, } from "@/components/ui/select" import { DashboardStats } from "@/types" +import { useWebsiteTheme } from "@/providers/website-theme-provider" export default function DashboardPage() { + const { websiteTheme } = useWebsiteTheme() const [period, setPeriod] = useState("6months") const [stats, setStats] = useState(null) const pollingRef = useRef(null) @@ -104,12 +106,13 @@ export default function DashboardPage() { - {/* Daily Bugle watermark */} -
- - DAILY BUGLE - -
+ {websiteTheme === "spidey" && ( +
+ + DAILY BUGLE + +
+ )} ) } diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx index 5ee10fe..f5a9a08 100644 --- a/src/components/layout/app-shell.tsx +++ b/src/components/layout/app-shell.tsx @@ -5,12 +5,14 @@ import { usePathname } from "next/navigation" import { motion, AnimatePresence } from "framer-motion" import { Sidebar } from "./sidebar" import { Topbar } from "./topbar" +import { useWebsiteTheme } from "@/providers/website-theme-provider" interface AppShellProps { children: React.ReactNode } export function AppShell({ children }: AppShellProps) { + const { websiteTheme } = useWebsiteTheme() const [sidebarCollapsed, setSidebarCollapsed] = useState(false) const [mobileOpen, setMobileOpen] = useState(false) const pathname = usePathname() @@ -34,50 +36,95 @@ export function AppShell({ children }: AppShellProps) { return (
- {/* Spider-Man top gradient bar */} -
+ {/* Spider-Man decorations — Spidey theme only */} + {websiteTheme === "spidey" && ( + <> +
+
+ + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + +
+ + )} - {/* Corner spider webs */} -
- - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - -
+ {/* Cosmic decorations */} + {websiteTheme === "cosmic" && ( + <> +
+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + +
+ + )} = { spidey: "theme-spidey", + cosmic: "theme-cosmic", + cyber: "theme-cyber", } interface WebsiteThemeContextValue { @@ -38,7 +40,7 @@ function storeTheme(theme: string) { } export function WebsiteThemeProvider({ children }: { children: ReactNode }) { - const [websiteTheme, setWebsiteThemeState] = useState("spidey") + const [websiteTheme, setWebsiteThemeState] = useState("default") const [loading, setLoading] = useState(true) useEffect(() => { @@ -52,13 +54,13 @@ export function WebsiteThemeProvider({ children }: { children: ReactNode }) { fetch("/api/settings/website-theme") .then((res) => (res.ok ? res.json() : null)) .then((data) => { - const theme = data?.websiteTheme || "spidey" + const theme = data?.websiteTheme || "default" setWebsiteThemeState(theme) storeTheme(theme) applyWebsiteTheme(theme) }) .catch(() => { - applyWebsiteTheme("spidey") + applyWebsiteTheme("default") }) .finally(() => setLoading(false)) }, [])