PowerBot

Sleeping

App Files Files Community

OrbitMC commited on Nov 4, 2025

Commit

fe7ccd7

verified ·

1 Parent(s): d4d39bb

Update index.html

Browse files

Files changed (1) hide show

index.html +480 -687

index.html CHANGED Viewed

@@ -1,705 +1,498 @@
 <!-- index.html -->
 <!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-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;
-    animation: blink 1s infinite;
-}
-@keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.3; }
-}
-.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 {
-    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%);
-}
-.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;
-}
-.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;
-}
-.health-bar {
-    display: flex;
-    gap: 5px;
-    margin-top: 10px;
-}
-.health-item {
-    background: rgba(255, 255, 255, 0.1);
-    padding: 8px;
-    border-radius: 8px;
-    flex: 1;
-    text-align: center;
-}
-.health-item small {
-    display: block;
-    font-size: 10px;
-    opacity: 0.7;
-}
-.health-item strong {
-    display: block;
-    font-size: 16px;
-    margin-top: 3px;
-}
-.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>
-    <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>
-    <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>
-    <div class="queue-section">
-        <div class="queue-title">📋 Rotation Queue</div>
-        <div class="queue-list" id="queue-list"></div>
     </div>
-    <div class="bot-grid" id="bot-grid"></div>
-    <div id="msg-container"></div>
-</div>
-<script>
-let updateInterval;
-async function fetchStatus() {
-    try {
-        const r = await fetch('/api/status');
-        const data = await r.json();
-        renderStatus(data);
-    } catch(e) {
-        console.error('Failed to fetch status', e);
-    }
-}
-function renderStatus(data) {
-    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;
-    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);
-    const progress = (rotation.elapsed / 3600) * 100;
-    document.getElementById('progress-fill').style.width = progress + '%';
-    renderQueue(rotation.queue, rotation.current_bot, rotation.next_bot);
-    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();
-        const pos = bot.position;
-        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">${pos.x}, ${pos.y}, ${pos.z}</div>
-                </div>
-            </div>
-            <div class="health-bar">
-                <div class="health-item">
-                    <small>❤️ Health</small>
-                    <strong>${bot.health}</strong>
-                </div>
-                <div class="health-item">
-                    <small>🍖 Food</small>
-                    <strong>${bot.food}</strong>
-                </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;
-    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('❌ Failed to rotate', 'error');
-        }
-    } catch(e) {
-        showMsg('❌ Failed to switch bot', 'error');
-    }
-}
-function refreshStatus() {
-    fetchStatus();
-    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);
-}
-fetchStatus();
-updateInterval = setInterval(fetchStatus, 1000);
-</script>
 </body>
 </html>

 <!-- index.html -->
 <!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: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: #000;
+            color: #fff;
+            padding: 20px;
+            line-height: 1.5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid #333;
+        }
+        .header h1 {
+            font-size: 28px;
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        .header p {
+            color: #888;
+            font-size: 14px;
+        }
+        .card {
+            background: #111;
+            border: 1px solid #222;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .card-title {
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #888;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .server-info {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 15px;
+        }
+        .info-item {
+            background: #0a0a0a;
+            padding: 12px;
+            border-radius: 6px;
+            border: 1px solid #1a1a1a;
+        }
+        .info-label {
+            font-size: 11px;
+            color: #666;
+            margin-bottom: 5px;
+        }
+        .info-value {
+            font-size: 16px;
+            font-weight: 600;
+        }
+        .status-online {
+            color: #0f0;
+        }
+        .status-offline {
+            color: #f00;
+        }
+        .rotation-card {
+            background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
+            border: 1px solid #333;
+            text-align: center;
+            padding: 30px 20px;
+        }
+        .current-bot {
+            font-size: 36px;
+            font-weight: 700;
+            margin: 15px 0;
+            letter-spacing: 2px;
+        }
+        .timer {
+            font-size: 32px;
+            font-family: 'Courier New', monospace;
+            margin: 20px 0;
+            color: #888;
+        }
+        .progress-bar {
+            background: #1a1a1a;
+            height: 4px;
+            border-radius: 2px;
+            overflow: hidden;
+            margin: 20px 0;
+        }
+        .progress-fill {
+            background: #fff;
+            height: 100%;
+            transition: width 1s linear;
+        }
+        .next-info {
+            font-size: 14px;
+            color: #666;
+            margin-top: 15px;
+        }
+        button {
+            background: #fff;
+            color: #000;
+            border: none;
+            padding: 10px 24px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            margin: 10px 5px 0;
+            transition: all 0.2s;
+        }
+        button:hover {
+            background: #ddd;
+            transform: translateY(-1px);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        .queue {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            flex-wrap: wrap;
+            margin: 20px 0;
+        }
+        .queue-item {
+            background: #0a0a0a;
+            padding: 10px 20px;
+            border-radius: 6px;
+            border: 1px solid #1a1a1a;
+            font-size: 13px;
+            font-weight: 600;
+        }
+        .queue-item.active {
+            background: #fff;
+            color: #000;
+        }
+        .queue-item.next {
+            border-color: #666;
+        }
+        .bot-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 15px;
+        }
+        .bot-card {
+            background: #0a0a0a;
+            border: 1px solid #1a1a1a;
+            border-radius: 6px;
+            padding: 15px;
+            transition: all 0.3s;
+        }
+        .bot-card.active {
+            border-color: #fff;
+            background: #1a1a1a;
+        }
+        .bot-card.online {
+            border-left: 3px solid #0f0;
+        }
+        .bot-card.offline {
+            border-left: 3px solid #333;
+        }
+        .bot-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+        .bot-name {
+            font-size: 16px;
+            font-weight: 600;
+        }
+        .bot-badge {
+            background: #fff;
+            color: #000;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 10px;
+            font-weight: 700;
+        }
+        .bot-stats {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 8px;
+            margin: 12px 0;
+        }
+        .stat {
+            background: #000;
+            padding: 8px;
+            border-radius: 4px;
+            text-align: center;
+        }
+        .stat-label {
+            font-size: 10px;
+            color: #666;
+        }
+        .stat-value {
+            font-size: 14px;
+            font-weight: 600;
+            margin-top: 3px;
+        }
+        .bot-status {
+            text-align: center;
+            padding: 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 600;
+            background: #000;
+            margin-top: 10px;
+        }
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #fff;
+            color: #000;
+            padding: 12px 20px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            z-index: 1000;
+            animation: slideIn 0.3s;
+        }
+        @keyframes slideIn {
+            from {
+                transform: translateX(400px);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            .header h1 {
+                font-size: 22px;
+            }
+            .current-bot {
+                font-size: 24px;
+            }
+            .timer {
+                font-size: 20px;
+            }
+            .bot-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
 </head>
 <body>
+    <div class="container">
+        <div class="header">
+            <h1>🎮 BOT MANAGER</h1>
+            <p>OrbitMC Server Monitor</p>
+        </div>
+        <!-- Server Status -->
+        <div class="card">
+            <div class="card-title">Server Status</div>
+            <div class="server-info">
+                <div class="info-item">
+                    <div class="info-label">Address</div>
+                    <div class="info-value" id="server-addr">-</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">Status</div>
+                    <div class="info-value" id="server-status">-</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>
+        <!-- Rotation -->
+        <div class="card rotation-card">
+            <div class="card-title">Current Active Bot</div>
+            <div class="current-bot" id="current-bot">-</div>
+            <div class="timer" id="timer">00:00:00</div>
+            <div class="progress-bar">
+                <div class="progress-fill" id="progress"></div>
             </div>
+            <div class="next-info">
+                Next: <strong id="next-bot">-</strong> in <strong id="next-time">-</strong>
             </div>
+            <button onclick="forceRotation()">⏭ Next Bot</button>
         </div>
+        <!-- Queue -->
+        <div class="card">
+            <div class="card-title">Rotation Queue</div>
+            <div class="queue" id="queue"></div>
         </div>
+        <!-- Bots -->
+        <div class="bot-grid" id="bot-grid"></div>
     </div>
+    <div id="toast-container"></div>
+    <script>
+        const socket = io();
+        let data = {};
+        socket.on('update', (update) => {
+            data = update;
+            render();
+        });
+        function render() {
+            // Server
+            const srv = data.server;
+            if (srv) {
+                document.getElementById('server-addr').textContent = `${srv.host}:${srv.port}`;
+                const status = document.getElementById('server-status');
+                status.textContent = srv.status.online ? 'Online' : 'Offline';
+                status.className = 'info-value ' + (srv.status.online ? 'status-online' : 'status-offline');
+                document.getElementById('server-latency').textContent = srv.status.online ? `${srv.status.latency}ms` : 'N/A';
+                document.getElementById('server-version').textContent = srv.version;
+            }
+            // Rotation
+            const rot = data.rotation;
+            if (rot) {
+                document.getElementById('current-bot').textContent = rot.current || '-';
+                document.getElementById('timer').textContent = formatTime(rot.elapsed);
+                document.getElementById('next-bot').textContent = rot.next || '-';
+                document.getElementById('next-time').textContent = formatTime(rot.remaining);
+                const progress = (rot.elapsed / 3600) * 100;
+                document.getElementById('progress').style.width = progress + '%';
+                // Queue
+                const queueEl = document.getElementById('queue');
+                queueEl.innerHTML = '';
+                rot.queue.forEach((bot, i) => {
+                    const item = document.createElement('div');
+                    item.className = 'queue-item';
+                    if (bot === rot.current) item.className += ' active';
+                    else if (bot === rot.next) item.className += ' next';
+                    item.textContent = bot;
+                    queueEl.appendChild(item);
+                });
+            }
+            // Bots
+            const bots = data.bots;
+            if (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.isActive) card.className += ' active';
+                    const badge = bot.isActive ? '<div class="bot-badge">ACTIVE</div>' : '';
+                    card.innerHTML = `
+                        <div class="bot-header">
+                            <div class="bot-name">${bot.name}</div>
+                            ${badge}
+                        </div>
+                        <div class="bot-stats">
+                            <div class="stat">
+                                <div class="stat-label">Uptime</div>
+                                <div class="stat-value">${formatTimeShort(bot.uptimeSeconds || 0)}</div>
+                            </div>
+                            <div class="stat">
+                                <div class="stat-label">Deaths</div>
+                                <div class="stat-value">${bot.deaths}</div>
+                            </div>
+                            <div class="stat">
+                                <div class="stat-label">Position</div>
+                                <div class="stat-value">${bot.position.x}, ${bot.position.y}, ${bot.position.z}</div>
+                            </div>
+                            <div class="stat">
+                                <div class="stat-label">Health</div>
+                                <div class="stat-value">❤️ ${bot.health}</div>
+                            </div>
+                        </div>
+                        <div class="bot-status">${bot.status.toUpperCase()}</div>
+                    `;
+                    grid.appendChild(card);
+                });
+            }
+        }
+        function formatTime(sec) {
+            if (!sec) return '00:00:00';
+            const h = Math.floor(sec / 3600);
+            const m = Math.floor((sec % 3600) / 60);
+            const s = sec % 60;
+            return `${pad(h)}:${pad(m)}:${pad(s)}`;
+        }
+        function formatTimeShort(sec) {
+            if (!sec) return '0m';
+            const m = Math.floor(sec / 60);
+            if (m < 60) return `${m}m`;
+            const h = Math.floor(m / 60);
+            return `${h}h ${m % 60}m`;
+        }
+        function pad(n) {
+            return n.toString().padStart(2, '0');
+        }
+        function forceRotation() {
+            if (confirm('Switch to next bot?')) {
+                socket.emit('forceRotation');
+                toast('Switching to next bot...');
+            }
+        }
+        function toast(msg) {
+            const container = document.getElementById('toast-container');
+            const el = document.createElement('div');
+            el.className = 'toast';
+            el.textContent = msg;
+            container.appendChild(el);
+            setTimeout(() => el.remove(), 3000);
+        }
+        socket.on('rotationForced', () => {
+            toast('✅ Rotation forced');
+        });
+    </script>
 </body>
 </html>