PowerBot

Sleeping

App Files Files Community

OrbitMC commited on Nov 4, 2025

Commit

00f2929

verified ·

1 Parent(s): d7cb46d

Rename index.j to index.html

Browse files

Files changed (2) hide show

index.html +784 -0
index.j +0 -338

index.html ADDED Viewed

	@@ -0,0 +1,784 @@

+<!DOCTYPE html>
+<html>
+<head>
+<title>Bot Manager - OrbitMC</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+    color: #fff;
+}
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+.header h1 {
+    font-size: 42px;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+.header p {
+    font-size: 18px;
+    opacity: 0.9;
+}
+/* Server Status Card */
+.server-card {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 30px;
+    margin-bottom: 25px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+.server-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.server-title {
+    font-size: 24px;
+    font-weight: bold;
+}
+.status-badge {
+    padding: 8px 20px;
+    border-radius: 20px;
+    font-weight: bold;
+    font-size: 14px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+.status-badge.online {
+    background: #10b981;
+    animation: pulse 2s infinite;
+}
+.status-badge.offline {
+    background: #ef4444;
+}
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: white;
+}
+.server-info {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+.info-item {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 10px;
+    text-align: center;
+}
+.info-label {
+    font-size: 12px;
+    opacity: 0.8;
+    margin-bottom: 5px;
+}
+.info-value {
+    font-size: 20px;
+    font-weight: bold;
+}
+/* Rotation Card */
+.rotation-card {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    border-radius: 20px;
+    padding: 30px;
+    margin-bottom: 25px;
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    text-align: center;
+}
+.rotation-title {
+    font-size: 18px;
+    opacity: 0.9;
+    margin-bottom: 15px;
+}
+.current-bot {
+    font-size: 48px;
+    font-weight: bold;
+    margin: 15px 0;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+.rotation-timer {
+    font-size: 36px;
+    font-weight: bold;
+    margin: 20px 0;
+    font-family: 'Courier New', monospace;
+}
+.progress-bar {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 10px;
+    height: 20px;
+    overflow: hidden;
+    margin: 20px 0;
+}
+.progress-fill {
+    background: rgba(255, 255, 255, 0.9);
+    height: 100%;
+    border-radius: 10px;
+    transition: width 1s linear;
+}
+.next-bot-info {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 15px;
+    border-radius: 10px;
+    margin-top: 15px;
+    font-size: 16px;
+}
+.controls {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+button {
+    background: rgba(255, 255, 255, 0.3);
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    color: white;
+    padding: 12px 30px;
+    border-radius: 25px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: all 0.3s;
+}
+button:hover {
+    background: rgba(255, 255, 255, 0.5);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+button:active {
+    transform: translateY(0);
+}
+button.primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+}
+button.primary:hover {
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+}
+/* Bot Grid */
+.bot-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+.bot-card {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s;
+    position: relative;
+    overflow: hidden;
+}
+.bot-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: #6b7280;
+}
+.bot-card.active::before {
+    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
+    animation: shimmer 2s infinite;
+}
+.bot-card.online::before {
+    background: #10b981;
+}
+.bot-card.connecting::before {
+    background: #f59e0b;
+}
+.bot-card.offline::before {
+    background: #6b7280;
+}
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+.bot-card.active {
+    border-color: rgba(240, 147, 251, 0.5);
+    background: rgba(240, 147, 251, 0.15);
+    transform: scale(1.05);
+    box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3);
+}
+.bot-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+.bot-name {
+    font-size: 20px;
+    font-weight: bold;
+}
+.active-badge {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: bold;
+}
+.bot-stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin: 15px 0;
+}
+.stat-item {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 10px;
+    border-radius: 8px;
+    text-align: center;
+}
+.stat-label {
+    font-size: 11px;
+    opacity: 0.7;
+    margin-bottom: 3px;
+}
+.stat-value {
+    font-size: 18px;
+    font-weight: bold;
+}
+.bot-status-text {
+    text-align: center;
+    padding: 8px;
+    border-radius: 8px;
+    font-weight: bold;
+    margin-top: 10px;
+}
+.bot-status-text.online {
+    background: rgba(16, 185, 129, 0.3);
+    color: #10b981;
+}
+.bot-status-text.offline {
+    background: rgba(107, 114, 128, 0.3);
+    color: #9ca3af;
+}
+.bot-status-text.connecting {
+    background: rgba(245, 158, 11, 0.3);
+    color: #f59e0b;
+}
+.bot-status-text.active {
+    background: rgba(240, 147, 251, 0.3);
+    color: #f093fb;
+}
+/* Queue Section */
+.queue-section {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 25px;
+    margin-bottom: 25px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.queue-title {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    text-align: center;
+}
+.queue-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+.queue-item {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 15px 25px;
+    border-radius: 15px;
+    font-weight: bold;
+    transition: all 0.3s;
+    border: 2px solid transparent;
+}
+.queue-item.active {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    transform: scale(1.15);
+    box-shadow: 0 5px 20px rgba(240, 147, 251, 0.4);
+}
+.queue-item.next {
+    border-color: rgba(245, 158, 11, 0.6);
+    background: rgba(245, 158, 11, 0.2);
+}
+.queue-arrow {
+    font-size: 24px;
+    opacity: 0.5;
+}
+.msg {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: #10b981;
+    color: white;
+    padding: 15px 25px;
+    border-radius: 10px;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+    z-index: 1000;
+    animation: slideIn 0.3s;
+}
+.msg.error {
+    background: #ef4444;
+}
+@keyframes slideIn {
+    from {
+        transform: translateX(400px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+@media (max-width: 768px) {
+    .header h1 { font-size: 28px; }
+    .current-bot { font-size: 32px; }
+    .rotation-timer { font-size: 24px; }
+    .bot-grid { grid-template-columns: 1fr; }
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1>🎮 Minecraft Bot Manager</h1>
+        <p>OrbitMC Server Monitor & Bot Rotation System</p>
+    </div>
+    <!-- Server Status -->
+    <div class="server-card">
+        <div class="server-header">
+            <div class="server-title">📡 Server Status</div>
+            <div class="status-badge" id="server-badge">
+                <div class="status-dot"></div>
+                <span id="server-status-text">Checking...</span>
+            </div>
+        </div>
+        <div class="server-info">
+            <div class="info-item">
+                <div class="info-label">Address</div>
+                <div class="info-value" id="server-address">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Players Online</div>
+                <div class="info-value" id="server-players">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Latency</div>
+                <div class="info-value" id="server-latency">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Version</div>
+                <div class="info-value" id="server-version">-</div>
+            </div>
+        </div>
+    </div>
+    <!-- Current Rotation -->
+    <div class="rotation-card">
+        <div class="rotation-title">🔄 CURRENT ACTIVE BOT</div>
+        <div class="current-bot" id="current-bot">-</div>
+        <div class="rotation-timer" id="rotation-timer">00:00:00</div>
+        <div class="progress-bar">
+            <div class="progress-fill" id="progress-fill"></div>
+        </div>
+        <div class="next-bot-info">
+            <strong>Next Bot:</strong> <span id="next-bot">-</span> in <span id="time-until-next">-</span>
+        </div>
+        <div class="controls">
+            <button class="primary" onclick="forceRotation()">⏭️ Switch to Next Bot</button>
+            <button onclick="refreshStatus()">🔄 Refresh</button>
+        </div>
+    </div>
+    <!-- Queue -->
+    <div class="queue-section">
+        <div class="queue-title">📋 Rotation Queue</div>
+        <div class="queue-list" id="queue-list"></div>
+    </div>
+    <!-- Bot Grid -->
+    <div class="bot-grid" id="bot-grid"></div>
+    <div id="msg-container"></div>
+</div>
+<script>
+// Simulated data for demo (replace with actual API calls)
+let data = {};
+let updateTimer;
+let serverCheckTimer;
+let simulatedTime = 0;
+let currentBotIndex = 0;
+const BOT_NAMES = ["moderator_1", "moderator_2", "moderator_3", "moderator_4", "moderator_5"];
+const ROTATION_DURATION = 3600; // 1 hour
+// Initialize with demo data
+function initializeDemoData() {
+    data = {
+        server_info: {
+            host: "orbitmc.progamer.me",
+            port: 40675,
+            version: "1.21.1"
+        },
+        server_status: {
+            online: true,
+            players: "12/100",
+            latency: 45,
+            last_check: new Date()
+        },
+        rotation: {
+            current_bot: BOT_NAMES[currentBotIndex],
+            next_bot: BOT_NAMES[(currentBotIndex + 1) % BOT_NAMES.length],
+            elapsed: simulatedTime,
+            remaining: ROTATION_DURATION - simulatedTime,
+            queue: BOT_NAMES
+        },
+        bots: BOT_NAMES.map((name, index) => ({
+            name: name,
+            status: index === currentBotIndex ? 'online' : 'offline',
+            is_active: index === currentBotIndex,
+            uptime: index === currentBotIndex ? simulatedTime : 0,
+            deaths: Math.floor(Math.random() * 5),
+            reconnects: Math.floor(Math.random() * 3),
+            position: index === currentBotIndex ? `${Math.floor(Math.random() * 100)}, 64, ${Math.floor(Math.random() * 100)}` : '0, 0, 0'
+        }))
+    };
+}
+// Simulate time passing
+function updateSimulation() {
+    simulatedTime++;
+    if (simulatedTime >= ROTATION_DURATION) {
+        simulatedTime = 0;
+        currentBotIndex = (currentBotIndex + 1) % BOT_NAMES.length;
+        showMsg('🔄 Rotated to next bot!', 'success');
+    }
+    // Update data
+    data.rotation.elapsed = simulatedTime;
+    data.rotation.remaining = ROTATION_DURATION - simulatedTime;
+    data.rotation.current_bot = BOT_NAMES[currentBotIndex];
+    data.rotation.next_bot = BOT_NAMES[(currentBotIndex + 1) % BOT_NAMES.length];
+    // Update bots
+    data.bots = BOT_NAMES.map((name, index) => ({
+        name: name,
+        status: index === currentBotIndex ? 'online' : 'offline',
+        is_active: index === currentBotIndex,
+        uptime: index === currentBotIndex ? simulatedTime : 0,
+        deaths: data.bots[index]?.deaths || 0,
+        reconnects: data.bots[index]?.reconnects || 0,
+        position: index === currentBotIndex ? `${100 + Math.floor(Math.random() * 10)}, 64, ${100 + Math.floor(Math.random() * 10)}` : '0, 0, 0'
+    }));
+    // Simulate random server status changes
+    if (Math.random() > 0.98) {
+        data.server_status.online = !data.server_status.online;
+    }
+    if (data.server_status.online) {
+        data.server_status.latency = 30 + Math.floor(Math.random() * 30);
+        data.server_status.players = `${10 + Math.floor(Math.random() * 20)}/100`;
+    }
+}
+// For production, use this instead:
+async function fetchStatus() {
+    try {
+        const r = await fetch('/api/status');
+        data = await r.json();
+        renderStatus();
+    } catch(e) {
+        console.error('Failed to fetch status', e);
+        // Fallback to demo mode
+        initializeDemoData();
+        renderStatus();
+    }
+}
+function renderStatus() {
+    // Server Status
+    const server = data.server_status;
+    const badge = document.getElementById('server-badge');
+    if (server.online) {
+        badge.className = 'status-badge online';
+        document.getElementById('server-status-text').textContent = 'Online';
+    } else {
+        badge.className = 'status-badge offline';
+        document.getElementById('server-status-text').textContent = 'Offline';
+    }
+    document.getElementById('server-address').textContent = `${data.server_info.host}:${data.server_info.port}`;
+    document.getElementById('server-players').textContent = server.players;
+    document.getElementById('server-latency').textContent = server.latency > 0 ? `${server.latency}ms` : 'N/A';
+    document.getElementById('server-version').textContent = data.server_info.version;
+    // Rotation Info
+    const rotation = data.rotation;
+    document.getElementById('current-bot').textContent = rotation.current_bot || '-';
+    document.getElementById('rotation-timer').textContent = formatTime(rotation.elapsed);
+    document.getElementById('next-bot').textContent = rotation.next_bot || '-';
+    document.getElementById('time-until-next').textContent = formatTime(rotation.remaining);
+    // Progress Bar
+    const progress = (rotation.elapsed / 3600) * 100;
+    document.getElementById('progress-fill').style.width = progress + '%';
+    // Queue
+    renderQueue(rotation.queue, rotation.current_bot, rotation.next_bot);
+    // Bot Grid
+    renderBots(data.bots);
+}
+function renderQueue(queue, current, next) {
+    const queueList = document.getElementById('queue-list');
+    queueList.innerHTML = '';
+    queue.forEach((bot, index) => {
+        const item = document.createElement('div');
+        item.className = 'queue-item';
+        if (bot === current) {
+            item.className += ' active';
+        } else if (bot === next) {
+            item.className += ' next';
+        }
+        item.textContent = bot;
+        queueList.appendChild(item);
+        if (index < queue.length - 1) {
+            const arrow = document.createElement('div');
+            arrow.className = 'queue-arrow';
+            arrow.textContent = '→';
+            queueList.appendChild(arrow);
+        }
+    });
+}
+function renderBots(bots) {
+    const grid = document.getElementById('bot-grid');
+    grid.innerHTML = '';
+    bots.forEach(bot => {
+        const card = document.createElement('div');
+        card.className = `bot-card ${bot.status}`;
+        if (bot.is_active) {
+            card.className += ' active';
+        }
+        const activeBadge = bot.is_active ? '<div class="active-badge">⚡ ACTIVE NOW</div>' : '';
+        const statusClass = bot.is_active ? 'active' : bot.status;
+        const statusText = bot.is_active ? '⚡ ACTIVE & ONLINE' : bot.status.toUpperCase();
+        card.innerHTML = `
+            <div class="bot-header">
+                <div class="bot-name">${bot.name}</div>
+                ${activeBadge}
+            </div>
+            <div class="bot-stats">
+                <div class="stat-item">
+                    <div class="stat-label">Uptime</div>
+                    <div class="stat-value">${formatTimeShort(bot.uptime)}</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">Deaths</div>
+                    <div class="stat-value">${bot.deaths}</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">Reconnects</div>
+                    <div class="stat-value">${bot.reconnects}</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">Position</div>
+                    <div class="stat-value">${bot.position}</div>
+                </div>
+            </div>
+            <div class="bot-status-text ${statusClass}">${statusText}</div>
+        `;
+        grid.appendChild(card);
+    });
+}
+function formatTime(seconds) {
+    if (!seconds || seconds < 0) return '00:00:00';
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    return `${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
+}
+function formatTimeShort(seconds) {
+    if (!seconds || seconds < 0) return '0m';
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h > 0) return `${h}h ${m}m`;
+    return `${m}m`;
+}
+async function forceRotation() {
+    if (!confirm('Switch to the next bot now?')) return;
+    // For demo mode
+    simulatedTime = ROTATION_DURATION;
+    updateSimulation();
+    renderStatus();
+    showMsg('✅ Switching to next bot...', 'success');
+    // For production, uncomment this:
+    /*
+    try {
+        const r = await fetch('/api/next_rotation', {method: 'POST'});
+        const res = await r.json();
+        if (res.success) {
+            showMsg('✅ Switching to next bot...', 'success');
+            setTimeout(fetchStatus, 1000);
+        } else {
+            showMsg('❌ ' + (res.error || 'Failed to rotate'), 'error');
+        }
+    } catch(e) {
+        showMsg('❌ Failed to switch bot', 'error');
+    }
+    */
+}
+function refreshStatus() {
+    renderStatus();
+    showMsg('🔄 Refreshing...', 'success');
+}
+function showMsg(text, type = 'success') {
+    const container = document.getElementById('msg-container');
+    const msg = document.createElement('div');
+    msg.className = 'msg' + (type === 'error' ? ' error' : '');
+    msg.textContent = text;
+    container.appendChild(msg);
+    setTimeout(() => {
+        msg.remove();
+    }, 3000);
+}
+function startAutoUpdate() {
+    if (updateTimer) clearInterval(updateTimer);
+    // Update every second for demo
+    updateTimer = setInterval(() => {
+        updateSimulation();
+        renderStatus();
+    }, 1000);
+}
+// Initialize
+initializeDemoData();
+renderStatus();
+startAutoUpdate();
+// For production with backend API, use this instead:
+/*
+fetchStatus();
+setInterval(fetchStatus, 2000); // Update every 2 seconds
+*/
+</script>
+</body>
+</html>

index.j DELETED Viewed

@@ -1,338 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bot Manager</title>
-    <script src="/socket.io/socket.io.js"></script>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: Arial, sans-serif;
-            background: #1a1a1a;
-            color: #e0e0e0;
-            padding: 10px;
-        }
-        .header {
-            background: #2a2a2a;
-            padding: 15px;
-            margin-bottom: 10px;
-            border: 1px solid #333;
-        }
-        h1 {
-            font-size: 20px;
-            margin-bottom: 10px;
-            color: #fff;
-        }
-        .stats {
-            display: flex;
-            gap: 15px;
-            flex-wrap: wrap;
-        }
-        .stat {
-            background: #333;
-            padding: 8px 12px;
-            border: 1px solid #444;
-            color: #ccc;
-        }
-        .stat strong {
-            color: #fff;
-        }
-        .controls {
-            background: #2a2a2a;
-            padding: 10px;
-            margin-bottom: 10px;
-            border: 1px solid #333;
-        }
-        .btn {
-            background: #4CAF50;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            cursor: pointer;
-        }
-        .btn:hover {
-            background: #45a049;
-        }
-        .btn:disabled {
-            background: #555;
-            color: #999;
-            cursor: not-allowed;
-        }
-        .bot-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 10px;
-        }
-        .bot-card {
-            background: #2a2a2a;
-            border: 1px solid #333;
-            padding: 10px;
-        }
-        .bot-header {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 8px;
-            align-items: center;
-        }
-        .bot-name {
-            font-weight: bold;
-            font-size: 14px;
-            color: #fff;
-        }
-        .status {
-            font-size: 12px;
-            padding: 2px 6px;
-            border: 1px solid;
-        }
-        .status-connected {
-            background: #1b4332;
-            color: #4ade80;
-            border-color: #16a34a;
-        }
-        .status-disconnected, .status-dead {
-            background: #450a0a;
-            color: #f87171;
-            border-color: #dc2626;
-        }
-        .bot-info {
-            font-size: 12px;
-            color: #aaa;
-            margin-bottom: 8px;
-        }
-        .bot-info div {
-            margin: 2px 0;
-        }
-        .info-highlight {
-            color: #4ade80;
-        }
-        .btn-rejoin {
-            background: #2196F3;
-            color: white;
-            border: none;
-            padding: 6px 12px;
-            cursor: pointer;
-            font-size: 12px;
-            width: 100%;
-        }
-        .btn-rejoin:hover {
-            background: #1976D2;
-        }
-        .btn-rejoin:disabled {
-            background: #555;
-            color: #999;
-            cursor: not-allowed;
-        }
-        .timer {
-            font-size: 11px;
-            color: #888;
-            text-align: center;
-            margin-top: 4px;
-        }
-        .loading {
-            padding: 20px;
-            color: #888;
-            text-align: center;
-        }
-        @media (max-width: 600px) {
-            .bot-grid {
-                grid-template-columns: 1fr;
-            }
-            h1 {
-                font-size: 18px;
-            }
-            .stats {
-                font-size: 12px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <h1>🤖 Bot Manager</h1>
-        <div class="stats">
-            <div class="stat">Total: <strong id="totalBots">0</strong></div>
-            <div class="stat">Connected: <strong id="connectedBots">0</strong></div>
-            <div class="stat">Disconnected: <strong id="disconnectedBots">0</strong></div>
-            <div class="stat">Deaths: <strong id="totalDeaths">0</strong></div>
-        </div>
-    </div>
-    <div class="controls">
-        <button class="btn" onclick="refreshSheet()">Refresh Sheet</button>
-    </div>
-    <div id="botContainer" class="bot-grid">
-        <div class="loading">Loading...</div>
-    </div>
-    <script>
-        const socket = io();
-        let botsData = [];
-        socket.on('connect', () => {
-            console.log('Connected to server');
-        });
-        socket.on('botUpdate', (data) => {
-            botsData = data;
-            updateUI();
-        });
-        socket.on('reconnectResult', (result) => {
-            if (!result.success) {
-                alert(`Cannot reconnect ${result.botName} yet. Wait 1 hour between reconnects.`);
-            }
-        });
-        function updateUI() {
-            const container = document.getElementById('botContainer');
-            // Filter out bots not in sheet
-            const validBots = botsData.filter(bot => bot.inSheet);
-            if (validBots.length === 0) {
-                container.innerHTML = '<div class="loading">No bots configured in sheet.</div>';
-                updateStats(0, 0, 0, 0);
-                return;
-            }
-            let html = '';
-            let totalBots = 0;
-            let connectedBots = 0;
-            let disconnectedBots = 0;
-            let totalDeaths = 0;
-            validBots.forEach(bot => {
-                totalBots++;
-                if (bot.status === 'Connected') {
-                    connectedBots++;
-                } else {
-                    disconnectedBots++;
-                }
-                totalDeaths += bot.deathCount;
-                const statusClass = bot.status === 'Connected' ? 'status-connected' :
-                                  bot.status === 'Connecting...' ? 'status-connected' :
-                                  'status-disconnected';
-                const showRejoinButton = (bot.status === 'Disconnected' || bot.status === 'Dead' ||
-                                         bot.status === 'Connection Failed' || bot.status === 'Server already has a bot') &&
-                                         bot.inSheet;
-                const canRejoinNow = bot.canReconnect;
-                const timeRemaining = bot.timeUntilReconnect;
-                html += `
-                    <div class="bot-card">
-                        <div class="bot-header">
-                            <div class="bot-name">${bot.botName}</div>
-                            <div class="status ${statusClass}">${bot.status}</div>
-                        </div>
-                        <div class="bot-info">
-                            <div>Deaths: ${bot.deathCount}</div>
-                            ${bot.status === 'Connected' && bot.connectedDuration > 0 ?
-                                `<div class="info-highlight">Connected: ${formatUptime(bot.connectedDuration)}</div>` : ''}
-                        </div>
-                        ${showRejoinButton ? `
-                            <button class="btn-rejoin"
-                                    onclick="reconnectBot('${bot.botName}')"
-                                    ${!canRejoinNow ? 'disabled' : ''}>
-                                ${canRejoinNow ? 'Rejoin' : 'Wait to Rejoin'}
-                            </button>
-                            ${!canRejoinNow && timeRemaining > 0 ?
-                                `<div class="timer">Can rejoin in: ${formatUptime(timeRemaining)}</div>` : ''}
-                        ` : ''}
-                    </div>
-                `;
-            });
-            container.innerHTML = html;
-            updateStats(totalBots, connectedBots, disconnectedBots, totalDeaths);
-        }
-        function updateStats(total, connected, disconnected, deaths) {
-            document.getElementById('totalBots').textContent = total;
-            document.getElementById('connectedBots').textContent = connected;
-            document.getElementById('disconnectedBots').textContent = disconnected;
-            document.getElementById('totalDeaths').textContent = deaths;
-        }
-        function formatUptime(seconds) {
-            if (seconds === 0) return '0s';
-            const days = Math.floor(seconds / 86400);
-            const hours = Math.floor((seconds % 86400) / 3600);
-            const minutes = Math.floor((seconds % 3600) / 60);
-            const secs = seconds % 60;
-            if (days > 0) {
-                return `${days}d ${hours}h ${minutes}m`;
-            } else if (hours > 0) {
-                return `${hours}h ${minutes}m`;
-            } else if (minutes > 0) {
-                return `${minutes}m ${secs}s`;
-            } else {
-                return `${secs}s`;
-            }
-        }
-        function reconnectBot(botName) {
-            socket.emit('reconnectBot', botName);
-        }
-        function refreshSheet() {
-            socket.emit('refreshSheet');
-        }
-        // Update UI every 2 seconds to show timer countdown and connection duration
-        setInterval(() => {
-            if (botsData.length > 0) {
-                botsData.forEach(bot => {
-                    if (bot.timeUntilReconnect > 0) {
-                        bot.timeUntilReconnect = Math.max(0, bot.timeUntilReconnect - 2);
-                    }
-                    if (bot.status === 'Connected' && bot.connectedDuration >= 0) {
-                        bot.connectedDuration += 2;
-                    }
-                    bot.canReconnect = bot.timeUntilReconnect === 0 &&
-                                      (bot.status === 'Disconnected' || bot.status === 'Dead' ||
-                                       bot.status === 'Connection Failed' || bot.status === 'Server already has a bot') &&
-                                      bot.inSheet;
-                });
-                updateUI();
-            }
-        }, 2000);
-    </script>
-</body>
-</html>