AeThex-Bot-Master/aethex-bot/public/features.html
sirpiglr 044f21533e Add music and backup features to several website pages
Updates commands.html and features.html to include new music playback and server backup commands and features, and increases the displayed command count.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4f7c7878-d0a4-4d4f-ba45-5e18f7e588af
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/3DIN02r
Replit-Helium-Checkpoint-Created: true
2025-12-13 08:19:51 +00:00

644 lines
21 KiB
HTML

<!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 - Discord Bot</title>
<meta name="description" content="Explore all features of Warden - XP systems, moderation, games, economy, achievements, quests, and more. Everything you need for your Discord community.">
<meta name="keywords" content="Discord bot features, XP system, leveling bot, Discord moderation, economy bot, achievement system, quest system, Discord games">
<meta name="author" content="AeThex">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bot.aethex.dev/features">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bot.aethex.dev/features">
<meta property="og:title" content="Features | AeThex Warden - Discord Bot">
<meta property="og:description" content="Explore all features of Warden - XP systems, moderation, games, economy, achievements, quests, and more for your Discord community.">
<meta property="og:image" content="https://bot.aethex.dev/og-image.png">
<meta property="og:site_name" content="AeThex Warden">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://bot.aethex.dev/features">
<meta name="twitter:title" content="Features | AeThex Warden - Discord Bot">
<meta name="twitter:description" content="Explore all features of Warden - XP systems, moderation, games, economy, achievements, quests, and more.">
<meta name="twitter:image" content="https://bot.aethex.dev/og-image.png">
<meta name="theme-color" content="#6366f1">
<link rel="icon" href="/logo.png" type="image/png">
<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: 'Courier New', Courier, monospace;
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="music">
<span>🎵</span> Music
</button>
<button class="tab" 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="music">
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">▶️</div>
<h3>Play Anything</h3>
<p>Play music from YouTube, Spotify, SoundCloud, and Apple Music. Just paste a link or search by name.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<h3>Queue Management</h3>
<p>Full queue system with add, remove, shuffle, and view. Manage your listening session with ease.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔊</div>
<h3>Volume Control</h3>
<p>Adjust volume from 0-100%. Fine-tune the listening experience for everyone.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔁</div>
<h3>Loop Modes</h3>
<p>Loop a single track, the entire queue, or turn looping off. Your music, your way.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⏭️</div>
<h3>Playback Controls</h3>
<p>Skip, pause, resume, stop - all the controls you need. Full DJ-style management.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎤</div>
<h3>Now Playing</h3>
<p>See what's playing with progress bar, thumbnail, and track info. Beautiful embeds.</p>
</div>
</div>
</div>
<div class="tab-content" 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>Server Backups</h3>
<p>Full server backups with roles, channels, and config. Auto-backup scheduling and one-click restore.</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>&copy; 2025 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>