<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VBot Control Panel - Robotics MCP</title>
<link rel="stylesheet" href="styles.css">
<style>
.vbot-specific-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.control-group {
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.control-group h3 {
margin-top: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.vbot-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: rgba(0, 0, 0, 0.2);
margin-bottom: 5px;
border-radius: 4px;
cursor: pointer;
}
.vbot-list-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.vbot-list-item.selected {
background: rgba(0, 100, 200, 0.3);
border: 1px solid rgba(0, 150, 255, 0.5);
}
.form-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.form-row input,
.form-row select {
flex: 1;
padding: 8px;
border-radius: 4px;
border: 1px solid #444;
background: #222;
color: white;
}
</style>
</head>
<body>
<div class="container">
<header>
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
<h1>🤖 VBot Control Panel</h1>
<nav>
<a href="/" class="btn-secondary">← Back to Main</a>
</nav>
</div>
<div class="status-bar">
<span id="connection-status" class="status-disconnected">🔴 Disconnected</span>
<button id="refresh-btn" class="btn-secondary">🔄 Refresh</button>
</div>
</header>
<main>
<section class="vbot-management">
<h2>Virtual Bot Management</h2>
<div class="control-group">
<h3>Create New VBot</h3>
<div class="form-row">
<input type="text" id="new-vbot-id" placeholder="VBot ID (e.g., vbot_01)">
<select id="new-vbot-type">
<option value="scout">Scout (Rover)</option>
<option value="unitree_go2">Unitree Go2</option>
<option value="unitree_h1">Unitree H1</option>
<option value="generic_arm">Generic Arm</option>
</select>
<select id="new-vbot-platform">
<option value="unity">Unity</option>
<option value="pixels">Pixels (2D)</option>
</select>
<button id="create-vbot-btn" class="action-btn">➕ Create</button>
</div>
</div>
<div class="control-group" style="margin-top: 20px;">
<h3>Active VBots</h3>
<div id="vbot-list" class="vbot-list">
<!-- Populated via JS -->
<div style="text-align: center; padding: 20px; color: #888;">Loading VBots...</div>
</div>
</div>
</section>
<div id="vbot-control-panel" style="display: none;">
<section class="robot-status">
<h2><span id="current-vbot-id">Select a VBot</span> Status</h2>
<div class="status-grid">
<div class="status-item">
<span class="label">Type:</span>
<span id="vbot-type">-</span>
</div>
<div class="status-item">
<span class="label">Platform:</span>
<span id="vbot-platform">-</span>
</div>
<div class="status-item">
<span class="label">Position:</span>
<span id="vbot-position">-</span>
</div>
<div class="status-item">
<span class="label">Rotation:</span>
<span id="vbot-rotation">-</span>
</div>
</div>
</section>
<div class="vbot-specific-controls">
<!-- Transformation Controls -->
<div class="control-group">
<h3>Transformation</h3>
<div class="movement-grid">
<div></div>
<button id="move-fwd" class="move-btn forward">⬆️</button>
<div></div>
<button id="move-left" class="move-btn left">⬅️</button>
<button id="stop-move" class="move-btn stop">⏹️</button>
<button id="move-right" class="move-btn right">➡️</button>
<div></div>
<button id="move-back" class="move-btn backward">⬇️</button>
<div></div>
</div>
<div style="margin-top: 10px; display: flex; gap: 5px; justify-content: center;">
<button id="rotate-left" class="btn-secondary">↺ L</button>
<button id="rotate-right" class="btn-secondary">R ↻</button>
</div>
</div>
<!-- Animation/Action Controls -->
<div class="control-group">
<h3>Actions & Animations</h3>
<div style="display: flex; flex-direction: column; gap: 10px;">
<button id="anim-wave" class="action-btn">👋 Wave</button>
<button id="anim-dance" class="action-btn">💃 Dance</button>
<button id="anim-sit" class="action-btn">🪑 Sit</button>
<button id="anim-stand" class="action-btn">🧍 Stand</button>
<div class="form-row" style="margin-top: 10px;">
<input type="text" id="custom-anim" placeholder="Custom Animation">
<button id="play-custom-anim" class="btn-secondary">Play</button>
</div>
</div>
</div>
<!-- Environment/Physics -->
<div class="control-group">
<h3>Environment</h3>
<div style="display: flex; flex-direction: column; gap: 10px;">
<button id="reset-pos" class="action-btn warning">📍 Reset Position</button>
<button id="respawn" class="action-btn warning">♻️ Respawn</button>
<div class="form-row">
<label style="display: flex; align-items: center; gap: 10px; color: white;">
<input type="checkbox" id="physics-enabled" checked> Enable Physics
</label>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Reusing script.js logic structure but for VBot -->
<script src="vbot.js"></script>
</body>
</html>
