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:
parent
15c468023a
commit
9d1f73f3ad
4 changed files with 61 additions and 61 deletions
2
.replit
2
.replit
|
|
@ -19,7 +19,7 @@ localPort = 5000
|
|||
externalPort = 80
|
||||
|
||||
[[ports]]
|
||||
localPort = 36951
|
||||
localPort = 33439
|
||||
externalPort = 3000
|
||||
|
||||
[workflows]
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue