Add new pages for commands and features with styling
Create `commands.html` and `features.html` files, including navigation, styling, and page-specific content structures. Replit-Commit-Author: Agent Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: 3af346bd-adfc-4713-9bd3-2848319814c9 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/t9iKgoV Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr
parent
14bdaab470
commit
ce786aae4b
2 changed files with 1056 additions and 0 deletions
475
aethex-bot/public/commands.html
Normal file
475
aethex-bot/public/commands.html
Normal file
|
|
@ -0,0 +1,475 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Commands | AeThex Warden</title>
|
||||
<meta name="description" content="Complete list of all 60+ Warden commands organized by category.">
|
||||
<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;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
min-height: 100vh;
|
||||
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;
|
||||
}
|
||||
|
||||
.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.9);
|
||||
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;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
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,
|
||||
.nav-links a.active {
|
||||
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);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 4rem 0 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: var(--muted);
|
||||
font-size: 1.1rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: 500px;
|
||||
margin: 2rem auto 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 1rem 1rem 1rem 3rem;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
color: var(--foreground);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.search-box svg {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.command-category {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.category-title span {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.commands-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.25rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.command-item:hover {
|
||||
border-color: var(--card-border-hover);
|
||||
}
|
||||
|
||||
.command-item.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.command-name {
|
||||
font-family: 'Fira Code', 'Consolas', monospace;
|
||||
color: var(--primary-light);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.command-desc {
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--primary-light);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: var(--muted);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-results.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.commands-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-grid"></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 | Warden</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/features">Features</a>
|
||||
<a href="/commands" class="active">Commands</a>
|
||||
<a href="https://discord.gg/athx" target="_blank">Discord</a>
|
||||
</nav>
|
||||
|
||||
<a href="https://discord.com/api/oauth2/authorize?client_id=578971245454950421&permissions=8&scope=bot%20applications.commands" class="btn btn-primary" target="_blank">
|
||||
Add to Server
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<a href="/" class="back-link">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||
Back to Home
|
||||
</a>
|
||||
|
||||
<div class="page-header">
|
||||
<h1>All <span class="text-gradient">Commands</span></h1>
|
||||
<p>60+ slash commands to power your community. Search or browse by category.</p>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
||||
<input type="text" id="searchInput" placeholder="Search commands...">
|
||||
</div>
|
||||
|
||||
<div class="no-results" id="noResults">
|
||||
No commands found. Try a different search term.
|
||||
</div>
|
||||
|
||||
<div id="commandsContainer">
|
||||
<div class="command-category" data-category="account">
|
||||
<h2 class="category-title"><span>🔗</span> Account</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/verify</div><div class="command-desc">Link your Discord account to AeThex</div></div>
|
||||
<div class="command-item"><div class="command-name">/unlink</div><div class="command-desc">Disconnect your Discord from AeThex</div></div>
|
||||
<div class="command-item"><div class="command-name">/profile [@user]</div><div class="command-desc">View your or another user's profile</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-category" data-category="realms">
|
||||
<h2 class="category-title"><span>⚔️</span> Realms</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/set-realm</div><div class="command-desc">Choose your primary realm (Federation mode)</div></div>
|
||||
<div class="command-item"><div class="command-name">/federation</div><div class="command-desc">Manage cross-server role sync</div></div>
|
||||
<div class="command-item"><div class="command-name">/refresh-roles</div><div class="command-desc">Sync your roles based on AeThex profile</div></div>
|
||||
<div class="command-item"><div class="command-name">/verify-role</div><div class="command-desc">Check your assigned Discord roles</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-category" data-category="leveling">
|
||||
<h2 class="category-title"><span>⭐</span> Leveling</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/rank [@user]</div><div class="command-desc">View your level and XP progress</div></div>
|
||||
<div class="command-item"><div class="command-name">/daily</div><div class="command-desc">Claim your daily XP bonus (+50 base + streak)</div></div>
|
||||
<div class="command-item"><div class="command-name">/prestige</div><div class="command-desc">Prestige at Level 50 for permanent bonuses</div></div>
|
||||
<div class="command-item"><div class="command-name">/badges</div><div class="command-desc">View your earned badges</div></div>
|
||||
<div class="command-item"><div class="command-name">/achievements</div><div class="command-desc">View available achievements</div></div>
|
||||
<div class="command-item"><div class="command-name">/quests</div><div class="command-desc">View and track your active quests</div></div>
|
||||
<div class="command-item"><div class="command-name">/leaderboard [type]</div><div class="command-desc">View server rankings (weekly/monthly/all-time)</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-category" data-category="fun">
|
||||
<h2 class="category-title"><span>🎮</span> Fun & Games</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/8ball [question]</div><div class="command-desc">Ask the magic 8-ball a question</div></div>
|
||||
<div class="command-item"><div class="command-name">/coinflip [call]</div><div class="command-desc">Flip a coin</div></div>
|
||||
<div class="command-item"><div class="command-name">/roll [dice]</div><div class="command-desc">Roll dice (e.g., 2d6, d20, 3d8+5)</div></div>
|
||||
<div class="command-item"><div class="command-name">/trivia [category]</div><div class="command-desc">Answer trivia for XP rewards</div></div>
|
||||
<div class="command-item"><div class="command-name">/duel @user [bet]</div><div class="command-desc">Challenge someone to a 1v1 duel</div></div>
|
||||
<div class="command-item"><div class="command-name">/slots [bet]</div><div class="command-desc">Try your luck at the slot machine</div></div>
|
||||
<div class="command-item"><div class="command-name">/afk [reason]</div><div class="command-desc">Set your AFK status</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-category" data-category="economy">
|
||||
<h2 class="category-title"><span>💰</span> Economy</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/work</div><div class="command-desc">Work to earn XP (1 hour cooldown)</div></div>
|
||||
<div class="command-item"><div class="command-name">/heist [target]</div><div class="command-desc">Start a group heist</div></div>
|
||||
<div class="command-item"><div class="command-name">/gift @user [amount]</div><div class="command-desc">Gift XP to another user</div></div>
|
||||
<div class="command-item"><div class="command-name">/shop</div><div class="command-desc">Browse and purchase items</div></div>
|
||||
<div class="command-item"><div class="command-name">/inventory [@user]</div><div class="command-desc">View your inventory</div></div>
|
||||
<div class="command-item"><div class="command-name">/trade @user</div><div class="command-desc">Trade items with another user</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-category" data-category="social">
|
||||
<h2 class="category-title"><span>👥</span> Social</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/rep @user [reason]</div><div class="command-desc">Give reputation to someone</div></div>
|
||||
<div class="command-item"><div class="command-name">/hug @user</div><div class="command-desc">Give someone a virtual hug</div></div>
|
||||
<div class="command-item"><div class="command-name">/birthday set/view/upcoming</div><div class="command-desc">Manage birthdays</div></div>
|
||||
<div class="command-item"><div class="command-name">/remind set/list/cancel</div><div class="command-desc">Set personal reminders</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-category" data-category="utility">
|
||||
<h2 class="category-title"><span>🔧</span> Utility</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/translate [text] [to]</div><div class="command-desc">Translate text to another language</div></div>
|
||||
<div class="command-item"><div class="command-name">/define [word]</div><div class="command-desc">Look up word definitions</div></div>
|
||||
<div class="command-item"><div class="command-name">/math [expression]</div><div class="command-desc">Calculate math expressions</div></div>
|
||||
<div class="command-item"><div class="command-name">/color [hex/rgb]</div><div class="command-desc">View color information</div></div>
|
||||
<div class="command-item"><div class="command-name">/qr [text]</div><div class="command-desc">Generate a QR code</div></div>
|
||||
<div class="command-item"><div class="command-name">/userinfo [@user]</div><div class="command-desc">View detailed user information</div></div>
|
||||
<div class="command-item"><div class="command-name">/serverinfo</div><div class="command-desc">View server statistics</div></div>
|
||||
<div class="command-item"><div class="command-name">/avatar [@user]</div><div class="command-desc">Get a user's avatar</div></div>
|
||||
<div class="command-item"><div class="command-name">/status</div><div class="command-desc">View bot status and uptime</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-category" data-category="moderation">
|
||||
<h2 class="category-title"><span>🛡️</span> Moderation</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/warn @user [reason]</div><div class="command-desc">Issue a warning</div></div>
|
||||
<div class="command-item"><div class="command-name">/kick @user [reason]</div><div class="command-desc">Kick a user from the server</div></div>
|
||||
<div class="command-item"><div class="command-name">/ban @user [reason]</div><div class="command-desc">Ban a user from the server</div></div>
|
||||
<div class="command-item"><div class="command-name">/timeout @user [minutes]</div><div class="command-desc">Timeout a user temporarily</div></div>
|
||||
<div class="command-item"><div class="command-name">/modlog @user</div><div class="command-desc">View a user's moderation history</div></div>
|
||||
<div class="command-item"><div class="command-name">/auditlog</div><div class="command-desc">View admin action history</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-category" data-category="admin">
|
||||
<h2 class="category-title"><span>⚙️</span> Admin</h2>
|
||||
<div class="commands-list">
|
||||
<div class="command-item"><div class="command-name">/config</div><div class="command-desc">View and edit server configuration</div></div>
|
||||
<div class="command-item"><div class="command-name">/starboard setup/disable</div><div class="command-desc">Configure the starboard</div></div>
|
||||
<div class="command-item"><div class="command-name">/announce</div><div class="command-desc">Send announcements</div></div>
|
||||
<div class="command-item"><div class="command-name">/embed</div><div class="command-desc">Create custom embed messages</div></div>
|
||||
<div class="command-item"><div class="command-name">/rolepanel</div><div class="command-desc">Create role button panels</div></div>
|
||||
<div class="command-item"><div class="command-name">/giveaway</div><div class="command-desc">Create and manage giveaways</div></div>
|
||||
<div class="command-item"><div class="command-name">/schedule</div><div class="command-desc">Schedule messages for later</div></div>
|
||||
<div class="command-item"><div class="command-name">/automod</div><div class="command-desc">Configure auto-moderation</div></div>
|
||||
<div class="command-item"><div class="command-name">/xp-settings</div><div class="command-desc">Configure XP system</div></div>
|
||||
<div class="command-item"><div class="command-name">/level-roles</div><div class="command-desc">Set up level-up role rewards</div></div>
|
||||
<div class="command-item"><div class="command-name">/quests-manage</div><div class="command-desc">Manage server quests</div></div>
|
||||
<div class="command-item"><div class="command-name">/shop-manage</div><div class="command-desc">Manage shop items</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2024 AeThex. Free forever, community powered.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const commandItems = document.querySelectorAll('.command-item');
|
||||
const categories = document.querySelectorAll('.command-category');
|
||||
const noResults = document.getElementById('noResults');
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const query = e.target.value.toLowerCase().trim();
|
||||
let visibleCount = 0;
|
||||
|
||||
commandItems.forEach(item => {
|
||||
const name = item.querySelector('.command-name').textContent.toLowerCase();
|
||||
const desc = item.querySelector('.command-desc').textContent.toLowerCase();
|
||||
const matches = name.includes(query) || desc.includes(query);
|
||||
|
||||
item.classList.toggle('hidden', !matches);
|
||||
if (matches) visibleCount++;
|
||||
});
|
||||
|
||||
categories.forEach(cat => {
|
||||
const visibleInCat = cat.querySelectorAll('.command-item:not(.hidden)').length;
|
||||
cat.style.display = visibleInCat > 0 ? 'block' : 'none';
|
||||
});
|
||||
|
||||
noResults.classList.toggle('show', visibleCount === 0);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
581
aethex-bot/public/features.html
Normal file
581
aethex-bot/public/features.html
Normal file
|
|
@ -0,0 +1,581 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Features | AeThex Warden</title>
|
||||
<meta name="description" content="Explore all features of Warden - XP systems, moderation, games, economy, and more.">
|
||||
<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;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
min-height: 100vh;
|
||||
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;
|
||||
}
|
||||
|
||||
.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.9);
|
||||
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;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
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,
|
||||
.nav-links a.active {
|
||||
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);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 4rem 0 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: var(--muted);
|
||||
font-size: 1.1rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.75rem 1.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: var(--foreground);
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 16px;
|
||||
padding: 1.75rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: var(--card-border-hover);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.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: 1rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--primary-light);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.tabs { flex-direction: column; }
|
||||
.tab { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-grid"></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 | Warden</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/features" class="active">Features</a>
|
||||
<a href="/commands">Commands</a>
|
||||
<a href="https://discord.gg/athx" target="_blank">Discord</a>
|
||||
</nav>
|
||||
|
||||
<a href="https://discord.com/api/oauth2/authorize?client_id=578971245454950421&permissions=8&scope=bot%20applications.commands" class="btn btn-primary" target="_blank">
|
||||
Add to Server
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<a href="/" class="back-link">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||
Back to Home
|
||||
</a>
|
||||
|
||||
<div class="page-header">
|
||||
<h1>All <span class="text-gradient">Features</span></h1>
|
||||
<p>Everything Warden offers to power your Discord community. Click a category to explore.</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-container">
|
||||
<div class="tabs">
|
||||
<button class="tab active" data-tab="engagement">
|
||||
<span>📈</span> Engagement
|
||||
</button>
|
||||
<button class="tab" data-tab="security">
|
||||
<span>🛡️</span> Security
|
||||
</button>
|
||||
<button class="tab" data-tab="fun">
|
||||
<span>🎮</span> Fun & Games
|
||||
</button>
|
||||
<button class="tab" data-tab="social">
|
||||
<span>❤️</span> Social
|
||||
</button>
|
||||
<button class="tab" data-tab="economy">
|
||||
<span>💰</span> Economy
|
||||
</button>
|
||||
<button class="tab" data-tab="utility">
|
||||
<span>🔧</span> Utility
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content active" id="engagement">
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📈</div>
|
||||
<h3>XP & Leveling</h3>
|
||||
<p>Earn XP from messages, reactions, and voice chat. Configurable curves, cooldowns, and multipliers per channel or role.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⭐</div>
|
||||
<h3>Prestige System</h3>
|
||||
<p>Reset at Level 50 for permanent XP bonuses. Up to 15% bonus per prestige tier with exclusive badges.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🏆</div>
|
||||
<h3>Leaderboards</h3>
|
||||
<p>Weekly, monthly, and all-time rankings. Server-specific and global federation boards.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📅</div>
|
||||
<h3>Daily Claims</h3>
|
||||
<p>Reward daily activity with streak bonuses. Up to +100 XP bonus for consistent activity.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎯</div>
|
||||
<h3>Quest System</h3>
|
||||
<p>Daily and weekly challenges with custom objectives. Reward XP, roles, and perks.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎖️</div>
|
||||
<h3>Achievements</h3>
|
||||
<p>50+ triggers including levels, messages, voice time, and custom events. Unlock badges.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🛒</div>
|
||||
<h3>XP Shop</h3>
|
||||
<p>Let members spend XP on roles, badges, and custom items. Full inventory system.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎉</div>
|
||||
<h3>Giveaways</h3>
|
||||
<p>Automated giveaways with level requirements, rerolls, and winner announcements.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="security">
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔥</div>
|
||||
<h3>Sentinel Anti-Nuke</h3>
|
||||
<p>RAM-based heat tracking detects mass bans, kicks, and deletions. Automatic lockdown and admin alerts.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🤖</div>
|
||||
<h3>Auto-Moderation</h3>
|
||||
<p>Configurable filters for links, spam, bad words, invites, and mass mentions. Custom actions per filter.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📋</div>
|
||||
<h3>Mod Tools</h3>
|
||||
<p>Warn, kick, ban, timeout with full logging. View history and audit trails per user.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">✅</div>
|
||||
<h3>Verification</h3>
|
||||
<p>Link Discord to AeThex platform accounts. Verified badges and automatic role assignments.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📝</div>
|
||||
<h3>Audit Logging</h3>
|
||||
<p>Track all moderation actions with timestamps, reasons, and moderator info.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🚫</div>
|
||||
<h3>Raid Protection</h3>
|
||||
<p>Detect and respond to coordinated attacks with automatic lockdown modes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="fun">
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎱</div>
|
||||
<h3>8-Ball & Fortune</h3>
|
||||
<p>Ask the magic 8-ball questions, flip coins, and roll dice with custom notation like 2d6+5.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🧠</div>
|
||||
<h3>Trivia</h3>
|
||||
<p>Multiple categories from science to pop culture. Earn XP for correct answers.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⚔️</div>
|
||||
<h3>Duels</h3>
|
||||
<p>Challenge others to 1v1 battles. Bet XP on the outcome for extra rewards.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎰</div>
|
||||
<h3>Slot Machine</h3>
|
||||
<p>Try your luck at slots. Match symbols for XP jackpots and winning streaks.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎲</div>
|
||||
<h3>Dice Rolling</h3>
|
||||
<p>Full dice notation support. Roll d20, 3d6+2, or any combination for games.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">😴</div>
|
||||
<h3>AFK System</h3>
|
||||
<p>Set yourself as away with a custom message. Auto-notify when mentioned.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="social">
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⭐</div>
|
||||
<h3>Reputation</h3>
|
||||
<p>Give and receive rep points with a 12-hour cooldown. Build your community standing.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🤗</div>
|
||||
<h3>Social Actions</h3>
|
||||
<p>Hugs, high-fives, and more with animated GIFs. Express yourself!</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎂</div>
|
||||
<h3>Birthdays</h3>
|
||||
<p>Set your birthday, view upcoming celebrations, get special recognition.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⏰</div>
|
||||
<h3>Reminders</h3>
|
||||
<p>Set personal reminders for any time. Never forget important events.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌟</div>
|
||||
<h3>Starboard</h3>
|
||||
<p>Auto-post highly reacted messages to a showcase channel. Celebrate great content.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👋</div>
|
||||
<h3>Welcome System</h3>
|
||||
<p>Rich embed messages for joins and leaves with dynamic variables.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="economy">
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">💼</div>
|
||||
<h3>Work System</h3>
|
||||
<p>Work hourly for XP rewards. Different jobs with varying payouts.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🏦</div>
|
||||
<h3>Heists</h3>
|
||||
<p>Team up for group heists. Higher risk, higher rewards. Strategy matters.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎁</div>
|
||||
<h3>Gifting</h3>
|
||||
<p>Gift XP to friends and community members. Spread the wealth.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔄</div>
|
||||
<h3>Trading</h3>
|
||||
<p>Trade items between users. Full inventory system with secure trades.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎒</div>
|
||||
<h3>Inventory</h3>
|
||||
<p>Collect items, badges, and rewards. View and manage your collection.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🏪</div>
|
||||
<h3>Server Shop</h3>
|
||||
<p>Admins configure items for sale. Roles, boosts, and custom rewards.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="utility">
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌐</div>
|
||||
<h3>Translation</h3>
|
||||
<p>Translate text between 100+ languages instantly. Break language barriers.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📖</div>
|
||||
<h3>Dictionary</h3>
|
||||
<p>Look up word definitions, synonyms, and usage examples.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔢</div>
|
||||
<h3>Calculator</h3>
|
||||
<p>Safe math expression evaluator. Complex calculations made easy.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📱</div>
|
||||
<h3>QR Codes</h3>
|
||||
<p>Generate QR codes for any text or URL. Share links instantly.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎨</div>
|
||||
<h3>Color Info</h3>
|
||||
<p>View hex, RGB, and HSL values with a color preview swatch.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👤</div>
|
||||
<h3>User Info</h3>
|
||||
<p>Detailed user profiles with join dates, roles, and activity stats.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2024 AeThex. Free forever, community powered.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
|
||||
tab.classList.add('active');
|
||||
document.getElementById(tab.dataset.tab).classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue