Create public/script.js

public/script.js

@@ -0,0 +1,246 @@
+// DOM Elements
+const videoElement = document.getElementById('funk-video');
+const themeToggle = document.getElementById('theme-toggle');
+const musicToggle = document.getElementById('music-toggle');
+const authSection = document.getElementById('auth-section');
+const botSection = document.getElementById('bot-section');
+const loginForm = document.getElementById('login-form');
+const registerForm = document.getElementById('register-form');
+const loginBtn = document.getElementById('login-btn');
+const registerBtn = document.getElementById('register-btn');
+const deployBtn = document.getElementById('deploy-btn');
+const commandInput = document.getElementById('command-input');
+const sendCommand = document.getElementById('send-command');
+const outputDiv = document.getElementById('output');
+const tabs = document.querySelectorAll('.tab');
+
+// State
+let currentUser = null;
+let socket = null;
+let isMusicPlaying = false;
+let isDarkMode = true;
+
+// Funk/Phunk videos
+const funkVideos = [
+    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/funk1.mp4",
+    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/funk2.mp4",
+    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/funk3.mp4",
+    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/phunk1.mp4",
+    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/phunk2.mp4"
+];
+
+// Initialize
+function init() {
+    setupEventListeners();
+    setupSocket();
+    playRandomVideo();
+    updateUptime();
+    setInterval(updateUptime, 1000);
+}
+
+// Event Listeners
+function setupEventListeners() {
+    // Theme toggle
+    themeToggle.addEventListener('click', toggleTheme);
+    
+    // Music toggle
+    musicToggle.addEventListener('click', toggleMusic);
+    
+    // Tab switching
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            document.querySelectorAll('.form').forEach(form => {
+                form.classList.remove('active');
+            });
+            
+            document.getElementById(`${tab.dataset.tab}-form`).classList.add('active');
+        });
+    });
+    
+    // Login
+    loginBtn.addEventListener('click', handleLogin);
+    
+    // Register
+    registerBtn.addEventListener('click', handleRegister);
+    
+    // Deploy bot
+    deployBtn.addEventListener('click', deployBot);
+    
+    // Send command
+    sendCommand.addEventListener('click', sendBotCommand);
+    commandInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') sendBotCommand();
+    });
+}
+
+// Socket.io setup
+function setupSocket() {
+    socket = io();
+    
+    // Handle connection events
+    socket.on('connect', () => {
+        console.log("Connected to server");
+    });
+    
+    // Bot output
+    socket.on('bot-output', (data) => {
+        appendToOutput(data, 'output');
+    });
+    
+    socket.on('bot-error', (data) => {
+        appendToOutput(data, 'error');
+    });
+    
+    // Auth responses
+    socket.on('login-success', (data) => {
+        currentUser = data.userId;
+        authSection.classList.add('hidden');
+        botSection.classList.remove('hidden');
+        showMessage('login-message', `Welcome back!`, 'success');
+        
+        // Start playing music if enabled
+        if (isMusicPlaying) {
+            videoElement.muted = false;
+        }
+    });
+    
+    socket.on('login-error', (message) => {
+        showMessage('login-message', message, 'error');
+    });
+    
+    socket.on('register-success', () => {
+        showMessage('register-message', 'Registration successful! Please login.', 'success');
+        tabs[0].click();
+    });
+    
+    socket.on('register-error', (message) => {
+        showMessage('register-message', message, 'error');
+    });
+}
+
+// Play random funk/phunk video
+function playRandomVideo() {
+    const randomVideo = funkVideos[Math.floor(Math.random() * funkVideos.length)];
+    videoElement.src = randomVideo;
+    videoElement.play();
+    
+    // When video ends, play another random one
+    videoElement.onended = () => {
+        playRandomVideo();
+    };
+}
+
+// Toggle music
+function toggleMusic() {
+    isMusicPlaying = !isMusicPlaying;
+    videoElement.muted = !isMusicPlaying;
+    musicToggle.textContent = isMusicPlaying ? "🔊 Music On" : "🔇 Music Off";
+}
+
+// Toggle theme
+function toggleTheme() {
+    isDarkMode = !isDarkMode;
+    document.body.classList.toggle('light-theme', !isDarkMode);
+    themeToggle.textContent = isDarkMode ? "🌙 Dark Mode" : "☀️ Light Mode";
+}
+
+// Handle login
+function handleLogin() {
+    const username = document.getElementById('login-username').value;
+    const password = document.getElementById('login-password').value;
+    
+    if (!username || !password) {
+        showMessage('login-message', 'Please fill all fields', 'error');
+        return;
+    }
+    
+    socket.emit('login', { username, password });
+}
+
+// Handle registration
+function handleRegister() {
+    const username = document.getElementById('register-username').value;
+    const password = document.getElementById('register-password').value;
+    const confirm = document.getElementById('register-confirm').value;
+    
+    if (!username || !password || !confirm) {
+        showMessage('register-message', 'Please fill all fields', 'error');
+        return;
+    }
+    
+    if (password !== confirm) {
+        showMessage('register-message', 'Passwords do not match', 'error');
+        return;
+    }
+    
+    if (password.length < 8) {
+        showMessage('register-message', 'Password must be at least 8 characters', 'error');
+        return;
+    }
+    
+    socket.emit('register', { username, password });
+}
+
+// Deploy bot
+function deployBot() {
+    const repoUrl = document.getElementById('repo-url').value;
+    const entryFile = document.getElementById('entry-file').value;
+    
+    if (!repoUrl || !entryFile) {
+        alert('Please fill all fields');
+        return;
+    }
+    
+    socket.emit('deploy-bot', {
+        userId: currentUser,
+        repoUrl,
+        entryFile
+    });
+    
+    appendToOutput(`🚀 Starting deployment: ${repoUrl}\n`, 'info');
+}
+
+// Send command to bot
+function sendBotCommand() {
+    const command = commandInput.value.trim();
+    if (!command) return;
+    
+    appendToOutput(`$ ${command}\n`, 'command');
+    socket.emit('send-command', { userId: currentUser, command });
+    commandInput.value = '';
+}
+
+// Append to output terminal
+function appendToOutput(text, type = 'output') {
+    const line = document.createElement('div');
+    line.textContent = text;
+    line.className = type;
+    outputDiv.appendChild(line);
+    outputDiv.scrollTop = outputDiv.scrollHeight;
+}
+
+// Show message
+function showMessage(elementId, message, type) {
+    const element = document.getElementById(elementId);
+    element.textContent = message;
+    element.className = `message ${type}`;
+}
+
+// Update uptime counter
+function updateUptime() {
+    const uptimeElement = document.getElementById('uptime');
+    if (!uptimeElement) return;
+    
+    const now = new Date();
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+    
+    uptimeElement.textContent = `${hours}:${minutes}:${seconds}`;
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', init);