Update application theme to use a purple color scheme

Replaces blue color gradients and variables with purple alternatives across CSS and HTML files to align with the desired application theme.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: f9f1a4eb-2832-4cc3-92fc-6f966658f686
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/K1dCpNm
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr 2025-12-09 00:31:54 +00:00
parent 15c468023a
commit 9d1f73f3ad
4 changed files with 61 additions and 61 deletions

View file

@ -19,7 +19,7 @@ localPort = 5000
externalPort = 80
[[ports]]
localPort = 36951
localPort = 33439
externalPort = 3000
[workflows]

View file

@ -59,23 +59,23 @@
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
/* AeThex Brand Colors */
--aethex-50: 250 100% 97%;
--aethex-100: 250 100% 95%;
--aethex-200: 250 100% 90%;
--aethex-300: 250 100% 80%;
--aethex-400: 250 100% 70%;
--aethex-500: 250 100% 60%;
--aethex-600: 250 100% 50%;
--aethex-700: 250 100% 40%;
--aethex-800: 250 100% 30%;
--aethex-900: 250 100% 20%;
--aethex-950: 250 100% 10%;
/* AeThex Brand Colors - PURPLE Theme */
--aethex-50: 270 100% 97%;
--aethex-100: 270 100% 95%;
--aethex-200: 270 100% 90%;
--aethex-300: 270 100% 80%;
--aethex-400: 270 100% 70%;
--aethex-500: 270 100% 60%;
--aethex-600: 270 100% 50%;
--aethex-700: 270 100% 40%;
--aethex-800: 270 100% 30%;
--aethex-900: 270 100% 20%;
--aethex-950: 270 100% 10%;
/* Neon Colors for Accents */
/* Neon Colors for Accents - PURPLE Theme */
--neon-purple: 280 100% 70%;
--neon-blue: 210 100% 70%;
--neon-green: 120 100% 70%;
--neon-violet: 270 100% 70%;
--neon-magenta: 300 100% 70%;
--neon-yellow: 50 100% 70%;
}
}
@ -295,13 +295,13 @@
}
.text-gradient {
@apply bg-gradient-to-r from-aethex-400 via-neon-blue to-aethex-600 bg-clip-text text-transparent;
@apply bg-gradient-to-r from-aethex-400 via-neon-purple to-aethex-600 bg-clip-text text-transparent;
background-size: 200% 200%;
animation: gradient-shift 3s ease-in-out infinite;
}
.text-gradient-purple {
@apply bg-gradient-to-r from-neon-purple via-aethex-500 to-neon-blue bg-clip-text text-transparent;
@apply bg-gradient-to-r from-neon-purple via-aethex-500 to-neon-purple bg-clip-text text-transparent;
background-size: 200% 200%;
animation: gradient-shift 4s ease-in-out infinite;
}
@ -316,7 +316,7 @@
.border-gradient::before {
content: "";
@apply absolute inset-0 rounded-[inherit] p-[1px] bg-gradient-to-r from-aethex-400 via-neon-blue to-aethex-600;
@apply absolute inset-0 rounded-[inherit] p-[1px] bg-gradient-to-r from-aethex-400 via-neon-purple to-aethex-600;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

View file

@ -9,20 +9,20 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--background: hsl(222, 84%, 4.9%);
--foreground: hsl(210, 40%, 98%);
--card: hsl(222, 84%, 6%);
--card-hover: hsl(222, 84%, 8%);
--primary: hsl(250, 100%, 60%);
--secondary: hsl(217.2, 32.6%, 17.5%);
--muted: hsl(217.2, 32.6%, 17.5%);
--muted-foreground: hsl(215, 20.2%, 65.1%);
--border: hsl(217.2, 32.6%, 17.5%);
--aethex-400: hsl(250, 100%, 70%);
--aethex-500: hsl(250, 100%, 60%);
--background: hsl(270, 50%, 4%);
--foreground: hsl(270, 20%, 98%);
--card: hsl(270, 50%, 6%);
--card-hover: hsl(270, 50%, 8%);
--primary: hsl(270, 100%, 60%);
--secondary: hsl(270, 30%, 15%);
--muted: hsl(270, 30%, 15%);
--muted-foreground: hsl(270, 15%, 65%);
--border: hsl(270, 30%, 20%);
--aethex-400: hsl(270, 100%, 75%);
--aethex-500: hsl(270, 100%, 65%);
--neon-purple: hsl(280, 100%, 70%);
--neon-blue: hsl(210, 100%, 70%);
--neon-green: hsl(120, 100%, 70%);
--neon-violet: hsl(270, 100%, 70%);
--neon-magenta: hsl(300, 100%, 70%);
--success: hsl(142, 76%, 36%);
--warning: hsl(38, 92%, 50%);
}
@ -39,7 +39,7 @@
.wallpaper {
position: fixed;
inset: 0;
background-image: linear-gradient(135deg, rgba(167, 139, 250, 0.05) 0%, rgba(96, 165, 250, 0.05) 100%);
background-image: linear-gradient(135deg, rgba(147, 51, 234, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%);
pointer-events: none;
z-index: -1;
}
@ -73,7 +73,7 @@
.logo-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple));
border-radius: 8px;
display: flex;
align-items: center;
@ -84,7 +84,7 @@
.logo-text {
font-size: 1.25rem;
font-weight: 700;
background: linear-gradient(to right, var(--aethex-400), var(--neon-blue));
background: linear-gradient(to right, var(--aethex-400), var(--neon-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@ -268,7 +268,7 @@
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--aethex-500), var(--neon-blue));
background: linear-gradient(90deg, var(--aethex-500), var(--neon-purple));
border-radius: 4px;
transition: width 0.5s ease;
}
@ -299,7 +299,7 @@
.achievement-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple));
border-radius: 10px;
display: flex;
align-items: center;
@ -400,7 +400,7 @@
}
.btn-primary {
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple));
color: white;
}
@ -442,7 +442,7 @@
}
.leaderboard-item.top-3 .leaderboard-rank {
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple));
}
.leaderboard-avatar {
@ -525,7 +525,7 @@
@keyframes spin { to { transform: rotate(360deg); } }
.text-gradient {
background: linear-gradient(to right, var(--aethex-400), var(--neon-blue));
background: linear-gradient(to right, var(--aethex-400), var(--neon-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

View file

@ -9,22 +9,22 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--background: hsl(222, 84%, 4.9%);
--foreground: hsl(210, 40%, 98%);
--card: hsl(222, 84%, 6%);
--card-foreground: hsl(210, 40%, 98%);
--primary: hsl(250, 100%, 60%);
--primary-foreground: hsl(210, 40%, 98%);
--secondary: hsl(217.2, 32.6%, 17.5%);
--muted: hsl(217.2, 32.6%, 17.5%);
--muted-foreground: hsl(215, 20.2%, 65.1%);
--border: hsl(217.2, 32.6%, 17.5%);
--aethex-400: hsl(250, 100%, 70%);
--aethex-500: hsl(250, 100%, 60%);
--aethex-600: hsl(250, 100%, 50%);
--background: hsl(270, 50%, 4%);
--foreground: hsl(270, 20%, 98%);
--card: hsl(270, 50%, 6%);
--card-foreground: hsl(270, 20%, 98%);
--primary: hsl(270, 100%, 60%);
--primary-foreground: hsl(270, 20%, 98%);
--secondary: hsl(270, 30%, 15%);
--muted: hsl(270, 30%, 15%);
--muted-foreground: hsl(270, 15%, 65%);
--border: hsl(270, 30%, 20%);
--aethex-400: hsl(270, 100%, 75%);
--aethex-500: hsl(270, 100%, 65%);
--aethex-600: hsl(270, 100%, 55%);
--neon-purple: hsl(280, 100%, 70%);
--neon-blue: hsl(210, 100%, 70%);
--neon-green: hsl(120, 100%, 70%);
--neon-violet: hsl(270, 100%, 70%);
--neon-magenta: hsl(300, 100%, 70%);
}
* {
@ -44,7 +44,7 @@
.wallpaper {
position: fixed;
inset: 0;
background-image: linear-gradient(135deg, rgba(167, 139, 250, 0.05) 0%, rgba(96, 165, 250, 0.05) 100%);
background-image: linear-gradient(135deg, rgba(147, 51, 234, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%);
pointer-events: none;
z-index: -1;
}
@ -83,7 +83,7 @@
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple));
border-radius: 10px;
display: flex;
align-items: center;
@ -95,7 +95,7 @@
.logo-text {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(to right, var(--aethex-400), var(--neon-blue), var(--aethex-600));
background: linear-gradient(to right, var(--aethex-400), var(--neon-purple), var(--aethex-600));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@ -133,7 +133,7 @@
}
.btn-primary {
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple));
color: white;
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}
@ -167,7 +167,7 @@
}
.text-gradient {
background: linear-gradient(to right, var(--aethex-400), var(--neon-blue), var(--aethex-600));
background: linear-gradient(to right, var(--aethex-400), var(--neon-purple), var(--aethex-600));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@ -252,7 +252,7 @@
.feature-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple));
border-radius: 12px;
display: flex;
align-items: center;