# 🎨 Interface Overview

## Web Interface Layout

```
┌─────────────────────────────────────────────────────────────────────┐
│  [📊 Split View] [🗺️ Map Only] [🎮 Control Only]        [🟢 Connected]│
├──────────────────┬──────────────────────────────────────────────────┤
│                  │                                                   │
│  🐢 Turtle List  │            3D Map View                           │
│  ─────────────   │                                                   │
│                  │         ┌─────┐                                  │
│  ┌────────────┐  │         │ T-1 │  ← Selected Turtle               │
│  │ Turtle 1   │◄─┼─────────└─────┘                                  │
│  │ [mining]   │  │                                                   │
│  │ 100,64,200 │  │                                                   │
│  │ F:5000 I:8 │  │              🏠 HOME                             │
│  └────────────┘  │                                                   │
│                  │                                                   │
│  ┌────────────┐  │         Path Trail ----                          │
│  │ Turtle 2   │  │                        \                         │
│  │ [idle]     │  │                         ┌─────┐                  │
│  │ 105,65,195 │  │                         │ T-2 │                  │
│  │ F:3200 I:3 │  │                         └─────┘                  │
│  └────────────┘  │                                                   │
│                  │                                                   │
│  No turtles...   │         Grid Floor (5x5 blocks)                  │
│                  │                                                   │
├──────────────────┴──────────────────────────────────────────────────┤
│  Turtle 1 Control                                                    │
│  ───────────────                                                     │
│  Status:                                                             │
│    Mode: mining    Fuel: 5000                                       │
│    Position: X: 100, Y: 64, Z: 200                                  │
│    Home: X: 95, Y: 64, Z: 195                                       │
│                                                                      │
│  Commands:                                                           │
│    [🔍 Explore] [⛏️ Mine] [🏠 Return Home] [⏹️ Stop]                │
│                                                                      │
│  Manual Control:                                                     │
│                    [↑]                                               │
│              [←]       [→]                                           │
│                    [↓]                                               │
│              [⬆ Up] [⬇ Down]                                         │
│                                                                      │
│  Inventory:                                                          │
│    coal_ore x32    iron_ore x16    diamond_ore x3                   │
│    cobblestone x64  dirt x12                                        │
└──────────────────────────────────────────────────────────────────────┘
```

## Color Scheme

### Turtle Status Colors
- 🟢 **Green (#4ade80)**: Mining/Active
- 🔵 **Blue (#60a5fa)**: Exploring
- 🟠 **Orange (#f59e0b)**: Returning Home
- ⚪ **Gray (#9ca3af)**: Idle
- 🟣 **Purple (#a78bfa)**: Manual Control

### UI Colors
- **Background**: Dark blue (#0a0e1a, #0f172a)
- **Panels**: Slate (#1e293b)
- **Borders**: Gray-blue (#334155)
- **Text**: Light gray (#e2e8f0)
- **Accents**: Cyan (#60a5fa)

## Features Visualization

### 3D Map Features
```
┌─────────────────────────────┐
│  Orbital Camera Control     │
│  - Rotate: Left Click+Drag  │
│  - Zoom: Scroll Wheel       │
│  - Pan: Right Click+Drag    │
│                             │
│  Turtle Markers:            │
│  ┌─┐                        │
│  │░│ ← 3D Box               │
│  └─┘                        │
│   ▲  ← Selection Arrow      │
│   ⭕  ← Selection Ring       │
│  T-1 ← ID Label             │
│                             │
│  Path Trails:               │
│  ---- Dashed line to home  │
│                             │
│  Grid:                      │
│  □ □ □ 1-block grid         │
│  ▪ ▪ ▪ 5-block sections    │
└─────────────────────────────┘
```

### Control Panel Features
```
┌──────────────────────────────┐
│ Turtle Card (Clickable)      │
├──────────────────────────────┤
│ Turtle 1        [mining] ●   │
│ 100, 64, 200                 │
│ F: 5000  I: 8 items          │
│ Home: 15 blocks              │
└──────────────────────────────┘
    ↓ Click to select
┌──────────────────────────────┐
│ Detail View                  │
├──────────────────────────────┤
│ All stats + commands         │
│ Manual control arrows        │
│ Inventory grid               │
└──────────────────────────────┘
```

## Responsive Behavior

### View Modes

**Split View** (Default)
- Best for desktop monitors
- Side-by-side layout
- Full visibility of both map and controls

**Map Only**
- Fullscreen 3D visualization
- Great for presentations
- Multi-turtle overview

**Control Only**
- Detailed turtle management
- Better for laptops/smaller screens
- Focus on commands and data

## Real-time Updates

```
Turtle moves → Status broadcast → Web Bridge → Server → WebSocket → React
                                                              ↓
                                                         Update 3D Map
                                                         Update Stats
                                                         Animate Marker
```

Update frequency: Every 5 seconds or on command execution

## Interactive Elements

- **Clickable**: Turtle cards, 3D markers, command buttons
- **Hoverable**: Buttons show hover effects
- **Animated**: Selected turtle rotates, status dot pulses
- **Live**: Real-time position tracking on map
- **Responsive**: View mode switches, panel scrolling

---

Launch the interface to see it in action! 🚀