Update website theme to blue and fix leaderboard link and support URL

Updated CSS and HTML files to change the theme from purple to blue, updated the support link to discord.gg/athx, and implemented a redirect for the /leaderboard route to the dashboard page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: cfc706c7-9dea-4636-b8b6-cad88a7185f7
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/xrPDlOm
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr 2025-12-09 00:56:58 +00:00
parent 737f2b8ac4
commit 4fa6125179
5 changed files with 84 additions and 63 deletions

View file

@ -17,6 +17,10 @@ expertMode = true
localPort = 5000 localPort = 5000
externalPort = 80 externalPort = 80
[[ports]]
localPort = 35631
externalPort = 3000
[workflows] [workflows]
runButton = "Project" runButton = "Project"

View file

@ -59,23 +59,23 @@
--sidebar-border: 240 3.7% 15.9%; --sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%; --sidebar-ring: 217.2 91.2% 59.8%;
/* AeThex Brand Colors - PURPLE Theme */ /* AeThex Brand Colors - BLUE Theme */
--aethex-50: 270 100% 97%; --aethex-50: 220 100% 97%;
--aethex-100: 270 100% 95%; --aethex-100: 220 100% 95%;
--aethex-200: 270 100% 90%; --aethex-200: 220 100% 90%;
--aethex-300: 270 100% 80%; --aethex-300: 220 100% 80%;
--aethex-400: 270 100% 70%; --aethex-400: 220 100% 70%;
--aethex-500: 270 100% 60%; --aethex-500: 220 100% 60%;
--aethex-600: 270 100% 50%; --aethex-600: 220 100% 50%;
--aethex-700: 270 100% 40%; --aethex-700: 220 100% 40%;
--aethex-800: 270 100% 30%; --aethex-800: 220 100% 30%;
--aethex-900: 270 100% 20%; --aethex-900: 220 100% 20%;
--aethex-950: 270 100% 10%; --aethex-950: 220 100% 10%;
/* Neon Colors for Accents - PURPLE Theme */ /* Neon Colors for Accents - BLUE Theme */
--neon-purple: 280 100% 70%; --neon-blue: 210 100% 70%;
--neon-violet: 270 100% 70%; --neon-cyan: 190 100% 70%;
--neon-magenta: 300 100% 70%; --neon-purple: 270 100% 70%;
--neon-yellow: 50 100% 70%; --neon-yellow: 50 100% 70%;
} }
} }

View file

@ -9,20 +9,20 @@
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Source+Code+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Source+Code+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--background: hsl(270, 50%, 4%); --background: hsl(220, 50%, 4%);
--foreground: hsl(270, 20%, 98%); --foreground: hsl(210, 20%, 98%);
--card: hsl(270, 50%, 6%); --card: hsl(220, 50%, 6%);
--card-hover: hsl(270, 50%, 8%); --card-hover: hsl(220, 50%, 8%);
--primary: hsl(270, 100%, 60%); --primary: hsl(220, 100%, 60%);
--secondary: hsl(270, 30%, 15%); --secondary: hsl(220, 30%, 15%);
--muted: hsl(270, 30%, 15%); --muted: hsl(220, 30%, 15%);
--muted-foreground: hsl(270, 15%, 65%); --muted-foreground: hsl(215, 15%, 65%);
--border: hsl(270, 30%, 20%); --border: hsl(220, 30%, 20%);
--aethex-400: hsl(270, 100%, 75%); --aethex-400: hsl(220, 100%, 75%);
--aethex-500: hsl(270, 100%, 65%); --aethex-500: hsl(220, 100%, 65%);
--neon-purple: hsl(280, 100%, 70%); --neon-blue: hsl(210, 100%, 70%);
--neon-violet: hsl(270, 100%, 70%); --neon-cyan: hsl(190, 100%, 70%);
--neon-magenta: hsl(300, 100%, 70%); --neon-purple: hsl(270, 100%, 70%);
--success: hsl(142, 76%, 36%); --success: hsl(142, 76%, 36%);
--warning: hsl(38, 92%, 50%); --warning: hsl(38, 92%, 50%);
} }
@ -39,7 +39,7 @@
.wallpaper { .wallpaper {
position: fixed; position: fixed;
inset: 0; inset: 0;
background-image: linear-gradient(135deg, rgba(147, 51, 234, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%); background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(96, 165, 250, 0.05) 100%);
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
} }
@ -73,7 +73,7 @@
.logo-icon { .logo-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple)); background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -84,7 +84,7 @@
.logo-text { .logo-text {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
background: linear-gradient(to right, var(--aethex-400), var(--neon-purple)); background: linear-gradient(to right, var(--aethex-400), var(--neon-blue));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@ -268,7 +268,7 @@
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--aethex-500), var(--neon-purple)); background: linear-gradient(90deg, var(--aethex-500), var(--neon-blue));
border-radius: 4px; border-radius: 4px;
transition: width 0.5s ease; transition: width 0.5s ease;
} }
@ -299,7 +299,7 @@
.achievement-icon { .achievement-icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple)); background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -400,7 +400,7 @@
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple)); background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
color: white; color: white;
} }
@ -442,7 +442,7 @@
} }
.leaderboard-item.top-3 .leaderboard-rank { .leaderboard-item.top-3 .leaderboard-rank {
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple)); background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
} }
.leaderboard-avatar { .leaderboard-avatar {
@ -525,7 +525,7 @@
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
.text-gradient { .text-gradient {
background: linear-gradient(to right, var(--aethex-400), var(--neon-purple)); background: linear-gradient(to right, var(--aethex-400), var(--neon-blue));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@ -871,6 +871,19 @@
await loadProfile(); await loadProfile();
// Handle URL query params for direct page navigation
const urlParams = new URLSearchParams(window.location.search);
const pageParam = urlParams.get('page');
if (pageParam) {
const navItem = document.querySelector(`.nav-item[data-page="${pageParam}"]`);
if (navItem) {
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
navItem.classList.add('active');
currentPage = pageParam;
showPage(pageParam);
}
}
} catch (e) { } catch (e) {
console.error('Init error:', e); console.error('Init error:', e);
document.getElementById('loginPrompt').classList.remove('hidden'); document.getElementById('loginPrompt').classList.remove('hidden');

View file

@ -9,22 +9,22 @@
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Source+Code+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Source+Code+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--background: hsl(270, 50%, 4%); --background: hsl(220, 50%, 4%);
--foreground: hsl(270, 20%, 98%); --foreground: hsl(210, 20%, 98%);
--card: hsl(270, 50%, 6%); --card: hsl(220, 50%, 6%);
--card-foreground: hsl(270, 20%, 98%); --card-foreground: hsl(210, 20%, 98%);
--primary: hsl(270, 100%, 60%); --primary: hsl(220, 100%, 60%);
--primary-foreground: hsl(270, 20%, 98%); --primary-foreground: hsl(210, 20%, 98%);
--secondary: hsl(270, 30%, 15%); --secondary: hsl(220, 30%, 15%);
--muted: hsl(270, 30%, 15%); --muted: hsl(220, 30%, 15%);
--muted-foreground: hsl(270, 15%, 65%); --muted-foreground: hsl(215, 15%, 65%);
--border: hsl(270, 30%, 20%); --border: hsl(220, 30%, 20%);
--aethex-400: hsl(270, 100%, 75%); --aethex-400: hsl(220, 100%, 75%);
--aethex-500: hsl(270, 100%, 65%); --aethex-500: hsl(220, 100%, 65%);
--aethex-600: hsl(270, 100%, 55%); --aethex-600: hsl(220, 100%, 55%);
--neon-purple: hsl(280, 100%, 70%); --neon-blue: hsl(210, 100%, 70%);
--neon-violet: hsl(270, 100%, 70%); --neon-cyan: hsl(190, 100%, 70%);
--neon-magenta: hsl(300, 100%, 70%); --neon-purple: hsl(270, 100%, 70%);
} }
* { * {
@ -44,7 +44,7 @@
.wallpaper { .wallpaper {
position: fixed; position: fixed;
inset: 0; inset: 0;
background-image: linear-gradient(135deg, rgba(147, 51, 234, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%); background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(96, 165, 250, 0.05) 100%);
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
} }
@ -83,7 +83,7 @@
.logo-icon { .logo-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple)); background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -95,7 +95,7 @@
.logo-text { .logo-text {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
background: linear-gradient(to right, var(--aethex-400), var(--neon-purple), var(--aethex-600)); background: linear-gradient(to right, var(--aethex-400), var(--neon-blue), var(--aethex-600));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@ -133,7 +133,7 @@
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple)); background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
color: white; color: white;
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
} }
@ -167,7 +167,7 @@
} }
.text-gradient { .text-gradient {
background: linear-gradient(to right, var(--aethex-400), var(--neon-purple), var(--aethex-600)); background: linear-gradient(to right, var(--aethex-400), var(--neon-blue), var(--aethex-600));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@ -252,7 +252,7 @@
.feature-icon { .feature-icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-purple)); background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -361,8 +361,8 @@
<nav class="nav-links"> <nav class="nav-links">
<a href="#features">Features</a> <a href="#features">Features</a>
<a href="#leaderboard">Leaderboard</a> <a href="/leaderboard">Leaderboard</a>
<a href="https://discord.gg/aethex" target="_blank">Support</a> <a href="https://discord.gg/athx" target="_blank">Support</a>
</nav> </nav>
<div class="auth-buttons"> <div class="auth-buttons">
@ -491,7 +491,7 @@
<div class="footer-links"> <div class="footer-links">
<a href="https://aethex.studio" target="_blank">AeThex Studio</a> <a href="https://aethex.studio" target="_blank">AeThex Studio</a>
<a href="https://aethex.foundation" target="_blank">Foundation</a> <a href="https://aethex.foundation" target="_blank">Foundation</a>
<a href="https://discord.gg/aethex" target="_blank">Discord</a> <a href="https://discord.gg/athx" target="_blank">Discord</a>
<a href="/dashboard">Dashboard</a> <a href="/dashboard">Dashboard</a>
</div> </div>
<p>&copy; 2024 AeThex. All rights reserved.</p> <p>&copy; 2024 AeThex. All rights reserved.</p>

View file

@ -494,6 +494,10 @@ function createWebServer(discordClient, supabase, options = {}) {
res.sendFile(path.join(__dirname, '../public/dashboard.html')); res.sendFile(path.join(__dirname, '../public/dashboard.html'));
}); });
app.get('/leaderboard', (req, res) => {
res.redirect('/dashboard?page=leaderboard');
});
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../public/index.html')); res.sendFile(path.join(__dirname, '../public/index.html'));
}); });