diff --git a/Web_Backgrounds/cyber-theme.css b/Web_Backgrounds/cyber2-theme.css similarity index 74% rename from Web_Backgrounds/cyber-theme.css rename to Web_Backgrounds/cyber2-theme.css index 01e7404..254998d 100644 --- a/Web_Backgrounds/cyber-theme.css +++ b/Web_Backgrounds/cyber2-theme.css @@ -1,4 +1,4 @@ -.dark.theme-cyber { +.dark.theme-cyber2 { --background: 240 30% 4%; --foreground: 180 50% 95%; --card: 240 25% 8%; @@ -29,7 +29,7 @@ --sidebar-ring: 280 80% 55%; } -.light.theme-cyber { +.light.theme-cyber2 { --background: 180 20% 96%; --foreground: 240 40% 10%; --card: 0 0% 100%; @@ -60,17 +60,17 @@ --sidebar-ring: 280 60% 50%; } -.dark.theme-cyber body { +.dark.theme-cyber2 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 { +.dark.theme-cyber2 body > div { background: transparent !important; } -.dark.theme-cyber body::before { +.dark.theme-cyber2 body::before { content: ""; position: fixed; inset: 0; @@ -82,7 +82,7 @@ background-size: 40px 40px; } -.dark.theme-cyber body::after { +.dark.theme-cyber2 body::after { content: ""; position: fixed; inset: 0; @@ -104,7 +104,7 @@ animation: neon-drift 20s ease-in-out infinite alternate; } -.light.theme-cyber body::before { +.light.theme-cyber2 body::before { content: ""; position: fixed; inset: 0; @@ -123,191 +123,191 @@ 100% { background-position: 0% 100%; opacity: 0.6; } } -.dark.theme-cyber .text-glow { +.dark.theme-cyber2 .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 { +.light.theme-cyber2 .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 { +.dark.theme-cyber2 h1, .dark.theme-cyber2 h2, .dark.theme-cyber2 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 { +.light.theme-cyber2 h1, .light.theme-cyber2 h2, .light.theme-cyber2 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 { +.dark.theme-cyber2 a { color: hsl(180, 100%, 55%); text-decoration: none; transition: color 0.2s; } -.light.theme-cyber a { +.light.theme-cyber2 a { color: hsl(180, 100%, 35%); text-decoration: none; transition: color 0.2s; } -.dark.theme-cyber a:hover { +.dark.theme-cyber2 a:hover { color: hsl(280, 80%, 60%); text-shadow: 0 0 8px rgba(255, 0, 255, 0.4); } -.light.theme-cyber a:hover { +.light.theme-cyber2 a:hover { color: hsl(280, 60%, 50%); } -.dark.theme-cyber blockquote { +.dark.theme-cyber2 blockquote { border-left: 3px solid hsl(280, 80%, 55%); color: hsl(180, 20%, 70%); font-style: italic; } -.light.theme-cyber blockquote { +.light.theme-cyber2 blockquote { border-left: 3px solid hsl(280, 60%, 50%); color: hsl(240, 10%, 45%); font-style: italic; } -.dark.theme-cyber code { +.dark.theme-cyber2 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 { +.light.theme-cyber2 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 { +.dark.theme-cyber2 pre { background: rgba(0, 5, 15, 0.9); border: 1px solid rgba(0, 255, 255, 0.1); } -.light.theme-cyber pre { +.light.theme-cyber2 pre { background: rgba(0, 200, 200, 0.03); border: 1px solid rgba(0, 200, 200, 0.08); } -.dark.theme-cyber hr { +.dark.theme-cyber2 hr { border-color: rgba(0, 255, 255, 0.15); } -.light.theme-cyber hr { +.light.theme-cyber2 hr { border-color: rgba(0, 200, 200, 0.1); } -.dark.theme-cyber table th { +.dark.theme-cyber2 table th { color: hsl(180, 100%, 55%); } -.light.theme-cyber table th { +.light.theme-cyber2 table th { color: hsl(180, 100%, 35%); } -.dark.theme-cyber table td { +.dark.theme-cyber2 table td { border-color: rgba(0, 255, 255, 0.12); } -.light.theme-cyber table td { +.light.theme-cyber2 table td { border-color: rgba(0, 200, 200, 0.1); } -.dark.theme-cyber ::selection { +.dark.theme-cyber2 ::selection { background: rgba(0, 255, 255, 0.2); color: hsl(0, 0%, 0%); } -.light.theme-cyber ::selection { +.light.theme-cyber2 ::selection { background: rgba(0, 200, 200, 0.12); color: hsl(0, 0%, 0%); } -.dark.theme-cyber input::placeholder, -.dark.theme-cyber textarea::placeholder { +.dark.theme-cyber2 input::placeholder, +.dark.theme-cyber2 textarea::placeholder { color: hsl(180, 20%, 40%); } -.light.theme-cyber input::placeholder, -.light.theme-cyber textarea::placeholder { +.light.theme-cyber2 input::placeholder, +.light.theme-cyber2 textarea::placeholder { color: hsl(240, 10%, 65%); } -.dark.theme-cyber .page-header-title { +.dark.theme-cyber2 .page-header-title { color: hsl(180, 100%, 55%); } -.light.theme-cyber .page-header-title { +.light.theme-cyber2 .page-header-title { color: hsl(180, 100%, 35%); } -.dark.theme-cyber .stat-card-value { +.dark.theme-cyber2 .stat-card-value { color: hsl(180, 100%, 55%); } -.light.theme-cyber .stat-card-value { +.light.theme-cyber2 .stat-card-value { color: hsl(180, 100%, 35%); } -.dark.theme-cyber .badge { +.dark.theme-cyber2 .badge { color: hsl(180, 100%, 55%); } -.light.theme-cyber .badge { +.light.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.dark.theme-cyber2 .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 { +.light.theme-cyber2 .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 { +.light.theme-cyber2 .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/cyber2-tokens.json similarity index 100% rename from Web_Backgrounds/cyber-tokens.json rename to Web_Backgrounds/cyber2-tokens.json diff --git a/Web_Backgrounds/spidey-theme.css b/Web_Backgrounds/spidey-theme.css index a380e24..7e60309 100644 --- a/Web_Backgrounds/spidey-theme.css +++ b/Web_Backgrounds/spidey-theme.css @@ -1,5 +1,5 @@ @import url("./cosmic-theme.css"); -@import url("./cyber-theme.css"); +@import url("./cyber2-theme.css"); .dark.theme-spidey { --background: 222.2 84% 4.9%; diff --git a/public/uploads/voice/58517a45-eb6f-4b85-bb1d-820fbb769ecd.webm b/public/uploads/voice/58517a45-eb6f-4b85-bb1d-820fbb769ecd.webm new file mode 100644 index 0000000..55cedf6 Binary files /dev/null and b/public/uploads/voice/58517a45-eb6f-4b85-bb1d-820fbb769ecd.webm differ diff --git a/src/components/settings/theme-settings.tsx b/src/components/settings/theme-settings.tsx index 2d28af9..5216717 100644 --- a/src/components/settings/theme-settings.tsx +++ b/src/components/settings/theme-settings.tsx @@ -34,7 +34,7 @@ const backgroundOptions = [ { value: "default", label: "None", icon: Shield, color: "bg-gray-400", ring: "ring-gray-400", desc: "No background theme" }, { value: "spidey", label: "Spidey", icon: Shield, color: "bg-red-600", ring: "ring-red-600", desc: "Dark theme with red accents" }, { value: "cosmic", label: "Cosmic", icon: Shield, color: "bg-gradient-to-r from-purple-500 to-green-500", ring: "ring-purple-500", desc: "Deep space with purple nebula and cyan accents" }, - { value: "cyber", label: "Cyber", icon: Shield, color: "bg-gradient-to-r from-cyan-400 to-fuchsia-500", ring: "ring-cyan-400", desc: "Neon grid with magenta and cyan glow" }, + { value: "cyber2", label: "Cyber2.0", icon: Shield, color: "bg-gradient-to-r from-cyan-400 to-fuchsia-500", ring: "ring-cyan-400", desc: "Neon grid with magenta and cyan glow" }, ] function getStoredColorTheme(): string { diff --git a/src/providers/website-theme-provider.tsx b/src/providers/website-theme-provider.tsx index 325525c..904ab8b 100644 --- a/src/providers/website-theme-provider.tsx +++ b/src/providers/website-theme-provider.tsx @@ -7,7 +7,7 @@ const WEBSITE_THEME_KEY = "crm-website-theme" const themeClasses: Record = { spidey: "theme-spidey", cosmic: "theme-cosmic", - cyber: "theme-cyber", + cyber2: "theme-cyber2", } interface WebsiteThemeContextValue {