172 lines
9.0 KiB
PHP
172 lines
9.0 KiB
PHP
<?php
|
|
require_once __DIR__ . '/db/config.php';
|
|
|
|
// Fetch current settings
|
|
$stmt = db()->query("SELECT setting_key, setting_value FROM bot_settings");
|
|
$settings = [];
|
|
while ($row = $stmt->fetch()) {
|
|
$settings[$row['setting_key']] = $row['setting_value'];
|
|
}
|
|
|
|
$botToken = $settings['bot_token'] ?? '';
|
|
$prefix = $settings['prefix'] ?? '/';
|
|
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Advanced Discord Music Bot powered by DisTube';
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MusicBot Dashboard</title>
|
|
<?php if ($projectDescription): ?>
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>">
|
|
<?php endif; ?>
|
|
<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@400;600;700;800&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
<div class="bg-decorations">
|
|
<div class="circle" style="width: 600px; height: 600px; top: -200px; left: -200px;"></div>
|
|
<div class="circle" style="width: 800px; height: 800px; bottom: -300px; right: -300px;"></div>
|
|
</div>
|
|
|
|
<header class="header">
|
|
<a href="/" class="logo">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-7c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z"/></svg>
|
|
MusicBot
|
|
</a>
|
|
<nav>
|
|
<a href="#commands" style="color: white; margin-right: 1.5rem; text-decoration: none;">Commands</a>
|
|
<a href="#setup" style="color: white; margin-right: 1.5rem; text-decoration: none;">Setup</a>
|
|
<a href="#config" class="btn-primary" style="padding: 0.5rem 1.2rem;">Get Started</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="hero">
|
|
<h1>Your Music, Elevated.</h1>
|
|
<p>The most stable Discord music player with DisTube support. High-quality audio, zero timeout, and support for all your favorite platforms.</p>
|
|
<div style="display: flex; gap: 1rem; justify-content: center;">
|
|
<a href="#config" class="btn-primary">Configure Bot</a>
|
|
<a href="#commands" class="btn-primary" style="background-color: #4F545C;">View Commands</a>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="main-wrapper">
|
|
<section id="commands" style="padding-top: 4rem;">
|
|
<h2 style="text-align: center; margin-bottom: 3rem; font-size: 2.5rem;">Powerful Commands</h2>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h3>🎵 Playback</h3>
|
|
<div class="command-item"><span class="command-name"><?= htmlspecialchars($prefix) ?>play</span> <span>Search & play song</span></div>
|
|
<div class="command-item"><span class="command-name"><?= htmlspecialchars($prefix) ?>skip</span> <span>Next song</span></div>
|
|
<div class="command-item"><span class="command-name"><?= htmlspecialchars($prefix) ?>stop</span> <span>Stop music & leave</span></div>
|
|
<div class="command-item"><span class="command-name"><?= htmlspecialchars($prefix) ?>pause</span> <span>Pause playback</span></div>
|
|
</div>
|
|
<div class="card">
|
|
<h3>📋 Queue</h3>
|
|
<div class="command-item"><span class="command-name"><?= htmlspecialchars($prefix) ?>queue</span> <span>Show current queue</span></div>
|
|
<div class="command-item"><span class="command-name"><?= htmlspecialchars($prefix) ?>nowplaying</span> <span>Current song info</span></div>
|
|
<div class="command-item"><span class="command-name"><?= htmlspecialchars($prefix) ?>shuffle</span> <span>Shuffle queue</span></div>
|
|
<div class="command-item"><span class="command-name"><?= htmlspecialchars($prefix) ?>volume</span> <span>Change volume</span></div>
|
|
</div>
|
|
<div class="card">
|
|
<h3>⚙️ Simulation</h3>
|
|
<p style="color: var(--discord-text-muted); font-size: 0.9rem;">Try typing <span style="color: var(--discord-green)">/play [song]</span> below to see the bot in action.</p>
|
|
<div class="mock-chat">
|
|
<div class="chat-messages" id="mock-chat-messages">
|
|
<div class="message">
|
|
<div class="avatar">MB</div>
|
|
<div class="msg-content">
|
|
<div class="msg-author">MusicBot <span class="bot-tag">BOT</span></div>
|
|
<div class="msg-text">Welcome! Use /play to start listening.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 1rem; border-top: 1px solid rgba(255,255,255,0.05);">
|
|
<form id="mock-chat-form" style="display: flex; gap: 0.5rem;">
|
|
<input type="text" id="mock-chat-input" placeholder="Type a command..." style="flex: 1; padding: 0.5rem; background: #40444B; border: none; border-radius: 4px; color: white;">
|
|
<button type="submit" style="display: none;">Send</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="config" style="padding-top: 4rem;">
|
|
<div class="card" style="max-width: 600px; margin: 0 auto;">
|
|
<h3>Bot Configuration</h3>
|
|
<p style="color: var(--discord-text-muted); margin-bottom: 2rem;">Save your Discord bot credentials here. These settings will be stored in your private database.</p>
|
|
<form action="save_settings.php" method="POST" class="config-form">
|
|
<label>Discord Bot Token</label>
|
|
<input type="password" name="bot_token" value="<?= htmlspecialchars($botToken) ?>" placeholder="Enter your bot token...">
|
|
<label>Command Prefix</label>
|
|
<input type="text" name="prefix" value="<?= htmlspecialchars($prefix) ?>" placeholder="/">
|
|
<button type="submit" class="btn-primary" style="width: 100%;">Save Settings</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="setup" class="setup-section">
|
|
<h2>Implementation Guide</h2>
|
|
<p>To run this bot locally or on your server, ensure you have Node.js installed and use the following code based on your requirements (DisTube v4 + Discord.js v14).</p>
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<strong>1. Install Dependencies:</strong>
|
|
<pre>npm install discord.js distube @distube/yt-dlp play-dl ffmpeg-static @discordjs/voice</pre>
|
|
</div>
|
|
<div>
|
|
<strong>2. Bot Core Code (index.js):</strong>
|
|
<pre>const { Client, GatewayIntentBits } = require('discord.js');
|
|
const { DisTube } = require('distube');
|
|
const { YtDlpPlugin } = require('@distube/yt-dlp');
|
|
const ffmpeg = require('ffmpeg-static');
|
|
|
|
const client = new Client({
|
|
intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildVoiceStates, GatewayIntentBits.GuildMessages, GatewayIntentBits.MessageContent]
|
|
});
|
|
|
|
const distube = new DisTube(client, {
|
|
emitNewSongOnly: true,
|
|
leaveOnFinish: false,
|
|
ffmpegPath: ffmpeg, // Fix for suara music
|
|
plugins: [new YtDlpPlugin()]
|
|
});
|
|
|
|
client.on('interactionCreate', async interaction => {
|
|
if (!interaction.isChatInputCommand()) return;
|
|
if (interaction.commandName === 'play') {
|
|
await interaction.deferReply(); // Anti-stuck
|
|
const query = interaction.options.getString('query');
|
|
distube.play(interaction.member.voice.channel, query, {
|
|
textChannel: interaction.channel,
|
|
member: interaction.member
|
|
});
|
|
await interaction.editReply(`Searching for: ${query}`);
|
|
}
|
|
});
|
|
|
|
client.login('YOUR_TOKEN_HERE');</pre>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer style="text-align: center; padding: 4rem 2rem; color: var(--discord-text-muted);">
|
|
<p>© <?= date('Y') ?> MusicBot. Built for high-performance Discord communities.</p>
|
|
</footer>
|
|
|
|
<div id="toast" class="toast">Settings saved successfully!</div>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
<?php if (isset($_GET['saved'])): ?>
|
|
<script>
|
|
document.getElementById('toast').style.display = 'block';
|
|
setTimeout(() => { document.getElementById('toast').style.display = 'none'; }, 3000);
|
|
</script>
|
|
<?php endif; ?>
|
|
</body>
|
|
</html>
|