Discord Bot Dashboard

Select a Server

Server Information

Members: -

Channels: -

Roles: -

Bot Joined: -

Bot Permissions

Bot Controls

Bot Active

:root { --primary: #7289da; --primary-dark: #5b6eae; --background: #36393f; --background-light: #40444b; --background-lighter: #484c54; --text: #dcddde; --text-muted: #a3a6aa; --danger: #f04747; --success: #43b581; --border-radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { background-color: var(--background); color: var(--text); height: 100vh; overflow: hidden; } .container { display: flex; height: 100%; } .sidebar { width: 300px; background-color: var(--background-light); border-right: 1px solid rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; } .sidebar-header { padding: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .sidebar-header h2 { margin-bottom: 15px; font-weight: 500; } .search-box input { width: 100%; padding: 8px 12px; background-color: var(--background); border: 1px solid rgba(0, 0, 0, 0.3); border-radius: var(--border-radius); color: var(--text); outline: none; } .server-list { flex: 1; overflow-y: auto; padding: 10px 0; } .server-item { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; transition: background-color 0.2s; } .server-item:hover { background-color: var(--background-lighter); } .server-item.active { background-color: var(--primary-dark); } .server-icon { width: 40px; height: 40px; border-radius: 50%; background-color: var(--background-lighter); margin-right: 12px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--text); } .server-name { font-weight: 500; } .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .content-header { padding: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: flex; justify-content: space-between; align-items: center; } .content-header h1 { font-weight: 500; } .content-body { flex: 1; padding: 20px; overflow-y: auto; } .info-section, .permissions-section, .controls-section { margin-bottom: 30px; } .info-section h3, .permissions-section h3, .controls-section h3 { margin-bottom: 15px; font-weight: 500; color: var(--primary); } .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .info-item { background-color: var(--background-light); padding: 15px; border-radius: var(--border-radius); } .info-label { display: block; color: var(--text-muted); font-size: 0.9em; margin-bottom: 5px; } .info-value { font-size: 1.1em; font-weight: 500; } .permissions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .permission-item { background-color: var(--background-light); padding: 10px; border-radius: var(--border-radius); display: flex; align-items: center; } .permission-item .icon { margin-right: 8px; color: var(--success); } .controls-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .control-item { background-color: var(--background-light); padding: 15px; border-radius: var(--border-radius); display: flex; align-items: center; } .control-label { margin-left: 10px; } .btn { padding: 10px 20px; border: none; border-radius: var(--border-radius); background-color: var(--primary); color: white; cursor: pointer; font-weight: 500; transition: all 0.2s; } .btn:hover { background-color: var(--primary-dark); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-danger { background-color: var(--danger); } .btn-danger:hover { background-color: #d03c3c; } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--success); } input:checked + .slider:before { transform: translateX(26px); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .server-item { animation: fadeIn 0.3s ease-out forwards; opacity: 0; } .server-item:nth-child(1) { animation-delay: 0.1s; } .server-item:nth-child(2) { animation-delay: 0.2s; } .server-item:nth-child(3) { animation-delay: 0.3s; } .server-item:nth-child(4) { animation-delay: 0.4s; } .server-item:nth-child(5) { animation-delay: 0.5s; } // Mock data for demonstration const mockServers = [ { id: '1', name: 'Gaming Community', icon: 'GC', memberCount: 1250, channelCount: 24, roleCount: 15, joinDate: '2022-05-15', permissions: ['Send Messages', 'Manage Roles', 'Kick Members', 'Ban Members', 'Manage Channels', 'View Audit Log'] }, { id: '2', name: 'Development Hub', icon: 'DH', memberCount: 842, channelCount: 18, roleCount: 10, joinDate: '2023-01-10', permissions: ['Send Messages', 'Manage Messages', 'Embed Links', 'Attach Files', 'Read Message History'] }, { id: '3', name: 'Music Lovers', icon: 'ML', memberCount: 356, channelCount: 8, roleCount: 5, joinDate: '2023-03-22', permissions: ['Send Messages', 'Connect', 'Speak', 'Use Voice Activity', 'Priority Speaker'] } ]; // DOM Elements const serverList = document.getElementById('serverList'); const serverName = document.getElementById('serverName'); const memberCount = document.getElementById('memberCount'); const channelCount = document.getElementById('channelCount'); const roleCount = document.getElementById('roleCount'); const joinDate = document.getElementById('joinDate'); const permissionsList = document.getElementById('permissionsList'); const botActiveToggle = document.getElementById('botActiveToggle'); const leaveServerBtn = document.getElementById('leaveServerBtn'); const refreshBtn = document.querySelector('.refresh-btn'); // Current selected server let currentServer = null; // Initialize the dashboard function initDashboard() { renderServerList(); addEventListeners(); } // Render server list function renderServerList() { serverList.innerHTML = ''; mockServers.forEach(server => { const serverItem = document.createElement('div'); serverItem.className = 'server-item'; serverItem.dataset.id = server.id; serverItem.innerHTML = `

${server.icon}

${server.name}

`; serverList.appendChild(serverItem); }); } // Render server details function renderServerDetails(serverId) { const server = mockServers.find(s => s.id === serverId); if (!server) return; currentServer = server; serverName.textContent = server.name; memberCount.textContent = server.memberCount.toLocaleString(); channelCount.textContent = server.channelCount; roleCount.textContent = server.roleCount; joinDate.textContent = new Date(server.joinDate).toLocaleDateString(); renderPermissions(server.permissions); // Update active state in server list document.querySelectorAll('.server-item').forEach(item => { item.classList.toggle('active', item.dataset.id === serverId); }); } // Render permissions list function renderPermissions(permissions) { permissionsList.innerHTML = ''; permissions.forEach(permission => { const permissionItem = document.createElement('div'); permissionItem.className = 'permission-item'; permissionItem.innerHTML = ` ✓ ${permission} `; permissionsList.appendChild(permissionItem); }); } // Add event listeners function addEventListeners() { // Server list item click serverList.addEventListener('click', (e) => { const serverItem = e.target.closest('.server-item'); if (serverItem) { renderServerDetails(serverItem.dataset.id); } }); // Leave server button leaveServerBtn.addEventListener('click', () => { if (currentServer) { if (confirm(`Are you sure you want to leave ${currentServer.name}?`)) { alert(`Left server: ${currentServer.name}`); // In a real app, you would make an API call here } } else { alert('Please select a server first'); } }); // Refresh button refreshBtn.addEventListener('click', () => { alert('Refreshing server data...'); // In a real app, you would refresh data from the API }); // Bot active toggle botActiveToggle.addEventListener('change', (e) => { if (currentServer) { const status = e.target.checked ? 'active' : 'inactive'; alert(`Bot set to ${status} in ${currentServer.name}`); // In a real app, you would update the bot status via API } else { alert('Please select a server first'); e.target.checked = false; } }); } // Initialize the dashboard when DOM is loaded document.addEventListener('DOMContentLoaded', initDashboard);