AeThex-Bot-Master/aethex-bot/public/index.html
sirpiglr be74f5f0bf Update web server and dashboard styling for improved user experience
Refactor bot.js to separate HTTP server logic and introduce Express web portal. Update dashboard.html with new styling, color themes, and font imports.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: 17beead7-b08f-41f9-a6ea-f8e2ff20a502
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/b2aEQYO
Replit-Helium-Checkpoint-Created: true
2025-12-08 23:59:05 +00:00

536 lines
16 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AeThex Bot - Level Up Your Discord Server</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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%);
--neon-purple: hsl(280, 100%, 70%);
--neon-blue: hsl(210, 100%, 70%);
--neon-green: hsl(120, 100%, 70%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--background);
color: var(--foreground);
min-height: 100vh;
overflow-x: hidden;
}
.wallpaper {
position: fixed;
inset: 0;
background-image: linear-gradient(135deg, rgba(167, 139, 250, 0.05) 0%, rgba(96, 165, 250, 0.05) 100%);
pointer-events: none;
z-index: -1;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(10, 10, 20, 0.95);
backdrop-filter: blur(12px);
border-bottom: 2px solid var(--aethex-500);
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--foreground);
}
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
}
.logo-text {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(to right, var(--aethex-400), var(--neon-blue), var(--aethex-600));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-links a {
color: var(--muted-foreground);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--foreground);
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
border: none;
cursor: pointer;
font-size: 0.875rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
color: white;
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
}
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--foreground);
}
.btn-outline:hover {
background: var(--secondary);
border-color: var(--aethex-500);
}
.hero {
padding: 6rem 0;
text-align: center;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.1;
}
.text-gradient {
background: linear-gradient(to right, var(--aethex-400), var(--neon-blue), var(--aethex-600));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 200%;
animation: gradient-shift 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero p {
font-size: 1.25rem;
color: var(--muted-foreground);
max-width: 600px;
margin: 0 auto 2.5rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.stats-bar {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 4rem;
flex-wrap: wrap;
}
.stat {
text-align: center;
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
color: var(--aethex-400);
}
.stat-label {
color: var(--muted-foreground);
font-size: 0.875rem;
margin-top: 0.25rem;
}
.features {
padding: 5rem 0;
}
.section-title {
text-align: center;
font-size: 2rem;
font-weight: 700;
margin-bottom: 3rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.feature-card {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.05));
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s;
}
.feature-card:hover {
transform: translateY(-4px);
border-color: var(--aethex-500);
box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
}
.feature-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.feature-card p {
color: var(--muted-foreground);
line-height: 1.6;
}
.cta {
padding: 5rem 0;
text-align: center;
}
.cta-box {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1));
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 24px;
padding: 4rem 2rem;
max-width: 800px;
margin: 0 auto;
}
.cta h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.cta p {
color: var(--muted-foreground);
margin-bottom: 2rem;
}
footer {
border-top: 1px solid var(--border);
padding: 3rem 0;
text-align: center;
color: var(--muted-foreground);
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.footer-links a {
color: var(--muted-foreground);
text-decoration: none;
}
.footer-links a:hover {
color: var(--foreground);
}
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.stats-bar {
gap: 1.5rem;
}
.stat-value {
font-size: 1.75rem;
}
}
</style>
</head>
<body>
<div class="wallpaper"></div>
<header>
<div class="container header-content">
<a href="/" class="logo">
<div class="logo-icon">A</div>
<span class="logo-text">AeThex</span>
</a>
<nav class="nav-links">
<a href="#features">Features</a>
<a href="#leaderboard">Leaderboard</a>
<a href="https://discord.gg/aethex" target="_blank">Support</a>
</nav>
<div class="auth-buttons">
<a href="/auth/discord" class="btn btn-primary" id="loginBtn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/></svg>
Login with Discord
</a>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h1>Level Up Your<br><span class="text-gradient">Discord Server</span></h1>
<p>The ultimate XP, leveling, and community engagement bot. Track progress, earn achievements, complete quests, and unlock rewards.</p>
<div class="hero-buttons">
<a href="https://discord.com/api/oauth2/authorize?client_id=1307534067556167720&permissions=8&scope=bot%20applications.commands" class="btn btn-primary" target="_blank">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
Add to Server
</a>
<a href="/auth/discord" class="btn btn-outline">
View Your Profile
</a>
</div>
<div class="stats-bar" id="statsBar">
<div class="stat">
<div class="stat-value" id="serverCount">-</div>
<div class="stat-label">Servers</div>
</div>
<div class="stat">
<div class="stat-value" id="userCount">-</div>
<div class="stat-label">Users</div>
</div>
<div class="stat">
<div class="stat-value" id="commandCount">-</div>
<div class="stat-label">Commands</div>
</div>
<div class="stat">
<div class="stat-value" id="uptimeValue">-</div>
<div class="stat-label">Uptime</div>
</div>
</div>
</div>
</section>
<section class="features" id="features">
<div class="container">
<h2 class="section-title">Powerful <span class="text-gradient">Features</span></h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📈</div>
<h3>XP & Leveling System</h3>
<p>Earn XP from messages, reactions, and voice chat. Level up with customizable curves and unlock role rewards automatically.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏆</div>
<h3>Achievements & Badges</h3>
<p>Create custom achievements with various triggers. Users earn badges for milestones, building their profile showcase.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3>Quests & Challenges</h3>
<p>Set up rotating quests with objectives like sending messages, earning XP, or spending time in voice. Reward completion with XP and roles.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🛒</div>
<h3>XP Shop System</h3>
<p>Let users spend XP on cosmetics, perks, and custom roles. Fully configurable items and pricing.</p>
</div>
<div class="feature-card">
<div class="feature-icon"></div>
<h3>Prestige System</h3>
<p>Reset at max level for permanent bonuses. Prestige levels unlock exclusive perks and XP multipliers.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏅</div>
<h3>Leaderboards</h3>
<p>Weekly, monthly, and all-time leaderboards with automatic resets. See who's on top across your server.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🛡️</div>
<h3>Sentinel Security</h3>
<p>Anti-nuke protection with heat tracking. Protect your server from mass bans, kicks, and channel deletions.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎫</div>
<h3>Ticket System</h3>
<p>Create support tickets with categories, transcripts, and staff assignment. Keep your community organized.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔗</div>
<h3>Federation Sync</h3>
<p>Sync roles across multiple servers. Perfect for multi-server communities and partnerships.</p>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<div class="cta-box">
<h2 class="text-gradient">Ready to Level Up?</h2>
<p>Join thousands of servers using AeThex to build engaged communities.</p>
<a href="https://discord.com/api/oauth2/authorize?client_id=1307534067556167720&permissions=8&scope=bot%20applications.commands" class="btn btn-primary" target="_blank">
Add AeThex to Your Server
</a>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-links">
<a href="https://aethex.studio" target="_blank">AeThex Studio</a>
<a href="https://aethex.foundation" target="_blank">Foundation</a>
<a href="https://discord.gg/aethex" target="_blank">Discord</a>
<a href="/dashboard">Dashboard</a>
</div>
<p>&copy; 2024 AeThex. All rights reserved.</p>
</div>
</footer>
<script>
async function loadStats() {
try {
const res = await fetch('/api/bot-stats');
const data = await res.json();
document.getElementById('serverCount').textContent = data.guilds.toLocaleString();
document.getElementById('userCount').textContent = data.users.toLocaleString();
document.getElementById('commandCount').textContent = data.commands;
const hours = Math.floor(data.uptime / 3600);
const days = Math.floor(hours / 24);
document.getElementById('uptimeValue').textContent = days > 0 ? `${days}d` : `${hours}h`;
} catch (e) {
console.log('Stats unavailable');
}
}
async function checkAuth() {
try {
const res = await fetch('/api/me');
if (res.ok) {
const user = await res.json();
const btn = document.getElementById('loginBtn');
btn.innerHTML = `<img src="${user.avatarUrl}" style="width:24px;height:24px;border-radius:50%;margin-right:8px"> ${user.globalName || user.username}`;
btn.href = '/dashboard';
}
} catch (e) {}
}
loadStats();
checkAuth();
setInterval(loadStats, 30000);
</script>
</body>
</html>