AeThex-Bot-Master/aethex-bot/public/index.html
sirpiglr c38900b987 Add company logo to website header and sidebar elements
Add logo.png to the public folder and update dashboard.html and index.html to display the logo image instead of placeholder text. Adjust CSS for .logo-icon size and object-fit.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 101882bf-cab9-4370-8f02-9fc48a450400
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/Xy30ojl
Replit-Helium-Checkpoint-Created: true
2025-12-09 21:50:23 +00:00

798 lines
23 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>
<style>
:root {
--background: #030712;
--foreground: #f8fafc;
--card: rgba(15, 23, 42, 0.6);
--card-border: rgba(99, 102, 241, 0.15);
--card-border-hover: rgba(99, 102, 241, 0.4);
--primary: #6366f1;
--primary-light: #818cf8;
--secondary: rgba(30, 41, 59, 0.5);
--muted: #64748b;
--border: rgba(51, 65, 85, 0.5);
--gradient-1: #6366f1;
--gradient-2: #3b82f6;
--gradient-3: #06b6d4;
--success: #10b981;
--warning: #f59e0b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Courier New', Courier, monospace;
background: var(--background);
color: var(--foreground);
min-height: 100vh;
overflow-x: hidden;
line-height: 1.6;
}
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
z-index: -2;
}
.bg-glow {
position: fixed;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 150%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(3, 7, 18, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.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;
border-radius: 8px;
object-fit: contain;
}
.logo-text {
font-size: 1.25rem;
font-weight: 700;
background: linear-gradient(135deg, var(--foreground), var(--muted));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 2.5rem;
align-items: center;
}
.nav-links a {
color: var(--muted);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
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.2s;
border: none;
cursor: pointer;
font-size: 0.875rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
color: white;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}
.btn-secondary {
background: var(--secondary);
border: 1px solid var(--border);
color: var(--foreground);
}
.btn-secondary:hover {
background: rgba(51, 65, 85, 0.5);
border-color: var(--primary);
}
.hero {
padding: 8rem 0 6rem;
text-align: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 9999px;
font-size: 0.8rem;
color: var(--primary-light);
margin-bottom: 2rem;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.1;
letter-spacing: -0.02em;
}
.text-gradient {
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 200%;
animation: gradient-shift 4s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--muted);
max-width: 640px;
margin: 0 auto 2.5rem;
font-weight: 400;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.stat-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 1.5rem;
text-align: center;
backdrop-filter: blur(10px);
transition: all 0.3s;
}
.stat-card:hover {
border-color: var(--card-border-hover);
transform: translateY(-2px);
}
.stat-value {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.25rem;
}
.stat-label {
color: var(--muted);
font-size: 0.85rem;
font-weight: 500;
}
.section {
padding: 6rem 0;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.section-subtitle {
color: var(--muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.feature-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.feature-card:hover {
border-color: var(--card-border-hover);
transform: translateY(-4px);
}
.feature-card:hover::before {
opacity: 1;
}
.feature-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(59, 130, 246, 0.1));
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.25rem;
}
.feature-card h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.feature-card p {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.6;
}
.feature-tag {
display: inline-flex;
padding: 0.25rem 0.625rem;
background: rgba(99, 102, 241, 0.1);
border-radius: 6px;
font-size: 0.7rem;
color: var(--primary-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.hub-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.hub-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 1.75rem;
transition: all 0.3s;
backdrop-filter: blur(10px);
text-decoration: none;
color: var(--foreground);
}
.hub-card:hover {
border-color: var(--card-border-hover);
transform: translateY(-4px);
}
.hub-card h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.hub-card-tags {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.hub-tag {
padding: 0.25rem 0.5rem;
background: rgba(99, 102, 241, 0.1);
border-radius: 4px;
font-size: 0.7rem;
color: var(--primary-light);
font-weight: 500;
}
.hub-card p {
color: var(--muted);
font-size: 0.85rem;
margin-bottom: 1rem;
}
.hub-card-link {
color: var(--primary-light);
font-size: 0.85rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.375rem;
}
.cta-section {
padding: 6rem 0;
}
.cta-box {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.05));
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 24px;
padding: 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.cta-box h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.cta-box p {
color: var(--muted);
font-size: 1.1rem;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.cta-features {
display: flex;
justify-content: center;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
.cta-feature {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--muted);
font-size: 0.9rem;
}
.cta-feature svg {
color: var(--success);
}
footer {
border-top: 1px solid var(--border);
padding: 3rem 0;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
color: var(--muted);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--foreground);
}
.footer-copy {
color: var(--muted);
font-size: 0.85rem;
}
@media (max-width: 1024px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.hub-grid { grid-template-columns: repeat(2, 1fr); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.features-grid { grid-template-columns: 1fr; }
.hub-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stat-card { padding: 1rem; }
.stat-value { font-size: 1.5rem; }
.cta-features { flex-direction: column; gap: 1rem; }
.cta-box { padding: 2.5rem 1.5rem; }
.footer-content { flex-direction: column; gap: 1.5rem; text-align: center; }
}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="bg-glow"></div>
<header>
<div class="container header-content">
<a href="/" class="logo">
<img src="/logo.png" alt="AeThex" class="logo-icon">
<span class="logo-text">AeThex Bot</span>
</a>
<nav class="nav-links">
<a href="#features">Features</a>
<a href="#hub">Hub</a>
<a href="https://discord.gg/athx" target="_blank">Support</a>
</nav>
<a href="/auth/discord" class="btn btn-primary" id="loginBtn">
Sign in with Discord
</a>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-badge">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
Discord Community Bot
</div>
<h1>Level Up Your<br><span class="text-gradient">Discord Server</span></h1>
<p class="hero-subtitle">XP tracking, achievements, quests, and shop system. Build an engaged community with powerful leveling mechanics and enterprise-grade security.</p>
<div class="hero-buttons">
<a href="https://discord.com/api/oauth2/authorize?client_id=578971245454950421&permissions=8&scope=bot%20applications.commands" class="btn btn-primary" target="_blank">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
Add to Server
</a>
<a href="/dashboard" class="btn btn-secondary">
View Dashboard
</a>
</div>
<div class="stats-grid" id="statsBar">
<div class="stat-card">
<div class="stat-value" id="serverCount">-</div>
<div class="stat-label">Active Servers</div>
</div>
<div class="stat-card">
<div class="stat-value" id="userCount">-</div>
<div class="stat-label">Community Members</div>
</div>
<div class="stat-card">
<div class="stat-value" id="commandCount">-</div>
<div class="stat-label">Slash Commands</div>
</div>
<div class="stat-card">
<div class="stat-value" id="uptimeValue">-</div>
<div class="stat-label">Uptime</div>
</div>
</div>
</div>
</section>
<section class="section" id="hub">
<div class="container">
<div class="section-header">
<h2 class="section-title">Your <span class="text-gradient">Bot Hub</span></h2>
<p class="section-subtitle">Everything you need to manage your server's leveling system in one place</p>
</div>
<div class="hub-grid">
<a href="/dashboard" class="hub-card">
<h3>Profile & Stats</h3>
<div class="hub-card-tags">
<span class="hub-tag">XP</span>
<span class="hub-tag">Level</span>
</div>
<p>View your rank, XP progress, and achievements across all servers</p>
<span class="hub-card-link">
View Profile
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</a>
<a href="/dashboard" class="hub-card">
<h3>Leaderboards</h3>
<div class="hub-card-tags">
<span class="hub-tag">Weekly</span>
<span class="hub-tag">Monthly</span>
</div>
<p>See top members and compete for the highest ranks</p>
<span class="hub-card-link">
View Rankings
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</a>
<a href="/dashboard" class="hub-card">
<h3>Quest Board</h3>
<div class="hub-card-tags">
<span class="hub-tag">Daily</span>
<span class="hub-tag">Challenges</span>
</div>
<p>Complete quests to earn bonus XP and exclusive rewards</p>
<span class="hub-card-link">
View Quests
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</a>
<a href="/dashboard" class="hub-card">
<h3>XP Shop</h3>
<div class="hub-card-tags">
<span class="hub-tag">Roles</span>
<span class="hub-tag">Perks</span>
</div>
<p>Spend your earned XP on custom roles and exclusive items</p>
<span class="hub-card-link">
Browse Shop
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
</a>
</div>
</div>
</section>
<section class="section" id="features">
<div class="container">
<div class="section-header">
<h2 class="section-title">Powerful <span class="text-gradient">Features</span></h2>
<p class="section-subtitle">Enterprise-grade tools built for community engagement</p>
</div>
<div class="features-grid">
<div class="feature-card">
<span class="feature-tag">Core</span>
<div class="feature-icon">📈</div>
<h3>XP & Leveling System</h3>
<p>Earn XP from messages, reactions, and voice chat. Configurable curves, cooldowns, and automatic role rewards.</p>
</div>
<div class="feature-card">
<span class="feature-tag">Engagement</span>
<div class="feature-icon">🏆</div>
<h3>Achievements & Badges</h3>
<p>Create custom achievements with various triggers. Members earn badges for milestones and special events.</p>
</div>
<div class="feature-card">
<span class="feature-tag">Engagement</span>
<div class="feature-icon">🎯</div>
<h3>Quest System</h3>
<p>Daily and weekly challenges with custom objectives. Reward completion with XP, roles, and exclusive perks.</p>
</div>
<div class="feature-card">
<span class="feature-tag">Economy</span>
<div class="feature-icon">🛒</div>
<h3>XP Shop</h3>
<p>Let members spend XP on cosmetics, roles, and custom items. Fully configurable pricing and stock limits.</p>
</div>
<div class="feature-card">
<span class="feature-tag">Progression</span>
<div class="feature-icon"></div>
<h3>Prestige System</h3>
<p>Reset at max level for permanent XP bonuses. Prestige levels unlock exclusive perks and bragging rights.</p>
</div>
<div class="feature-card">
<span class="feature-tag">Security</span>
<div class="feature-icon">🛡️</div>
<h3>Sentinel Protection</h3>
<p>Anti-nuke with heat tracking. Protect against mass bans, kicks, and channel deletions automatically.</p>
</div>
<div class="feature-card">
<span class="feature-tag">Analytics</span>
<div class="feature-icon">📊</div>
<h3>Leaderboards</h3>
<p>Weekly, monthly, and all-time rankings with automatic resets. Track top performers across your server.</p>
</div>
<div class="feature-card">
<span class="feature-tag">Support</span>
<div class="feature-icon">🎫</div>
<h3>Ticket System</h3>
<p>Create support tickets with categories and transcripts. Keep your community organized and supported.</p>
</div>
<div class="feature-card">
<span class="feature-tag">Multi-Server</span>
<div class="feature-icon">🔗</div>
<h3>Federation Sync</h3>
<p>Sync roles and data across multiple servers. Perfect for multi-community ecosystems and partnerships.</p>
</div>
</div>
</div>
</section>
<section class="cta-section">
<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, active communities.</p>
<div class="cta-features">
<div class="cta-feature">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
Free to use
</div>
<div class="cta-feature">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
Easy setup
</div>
<div class="cta-feature">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
24/7 uptime
</div>
</div>
<a href="https://discord.com/api/oauth2/authorize?client_id=578971245454950421&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 footer-content">
<div class="footer-links">
<a href="https://aethex.studio" target="_blank">AeThex Labs</a>
<a href="https://aethex.foundation" target="_blank">Foundation</a>
<a href="https://discord.gg/athx" target="_blank">Discord</a>
<a href="/dashboard">Dashboard</a>
</div>
<p class="footer-copy">&copy; 2025 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:20px;height:20px;border-radius:50%;margin-right:6px"> ${user.globalName || user.username}`;
btn.href = '/dashboard';
}
} catch (e) {}
}
loadStats();
checkAuth();
setInterval(loadStats, 30000);
</script>
</body>
</html>