docs/legacy/VISUAL_GUIDE.md

# API Configuration Helper - Visual Guide

## Button Location

The API Configuration Helper button appears in two places:

### 1. Dashboard Header (Top Right)
```
┌─────────────────────────────────────────────────────────┐
│  Enhanced Dashboard                    [💲] [🔄] [🌙]   │
│  Real-time Market Data                                  │
└─────────────────────────────────────────────────────────┘
                                           ↑
                                    Config Helper Button
```

### 2. Global Header (All Pages)
```
┌─────────────────────────────────────────────────────────┐
│  ☰  Home                    [💲] [🌙] [🔔] [⚙️]        │
└─────────────────────────────────────────────────────────┘
                              ↑
                       Config Helper Button
```

## Button Design

The button is a small, circular icon button with:
- **Icon**: Dollar sign (💲) representing API/services
- **Color**: Teal gradient matching your design system
- **Size**: 20x20px icon, 40x40px clickable area
- **Hover**: Slight scale animation
- **Tooltip**: "API Configuration Guide"

## Modal Layout

When you click the button, a modal opens:

```
┌─────────────────────────────────────────────────────────┐
│  💲 API Configuration Guide                          ✕  │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  Copy and paste these configurations to use our          │
│  services in your application.                           │
│                                                          │
│  Base URL: http://localhost:7860              [Copy]    │
│                                                          │
│  ┌─ Core Services ────────────────────────────────┐    │
│  │                                                  │    │
│  │  ▼ Market Data API                              │    │
│  │    Real-time cryptocurrency market data         │    │
│  │                                                  │    │
│  │    Endpoints:                                    │    │
│  │    [GET] /api/market/top          [Copy]        │    │
│  │    [GET] /api/market/trending     [Copy]        │    │
│  │                                                  │    │
│  │    Example Usage:                    [Copy]     │    │
│  │    ┌──────────────────────────────────────┐    │    │
│  │    │ fetch('http://localhost:7860/api/... │    │    │
│  │    │   .then(res => res.json())           │    │    │
│  │    │   .then(data => console.log(data));  │    │    │
│  │    └──────────────────────────────────────┘    │    │
│  │                                                  │    │
│  └──────────────────────────────────────────────────┘    │
│                                                          │
│  ┌─ AI Services ──────────────────────────────────┐    │
│  │  ▶ Sentiment Analysis API                       │    │
│  │  ▶ AI Models API                                │    │
│  └──────────────────────────────────────────────────┘    │
│                                                          │
│  ┌─ Trading Services ─────────────────────────────┐    │
│  │  ▶ OHLCV Data API                               │    │
│  │  ▶ Trading & Backtesting API                    │    │
│  └──────────────────────────────────────────────────┘    │
│                                                          │
└─────────────────────────────────────────────────────────┘
```

## Interaction Flow

### Step 1: Click Button
```
User clicks [💲] button
         ↓
Modal slides in with animation
```

### Step 2: Browse Services
```
User sees 10 services organized by category
         ↓
Click on any service to expand
         ↓
See endpoints and examples
```

### Step 3: Copy Configuration
```
User clicks [Copy] button
         ↓
Text copied to clipboard
         ↓
Button shows checkmark ✓
         ↓
Visual feedback (green color)
```

### Step 4: Use in Code
```
User pastes into their application
         ↓
Configuration works immediately
```

## Color Scheme

The modal uses your existing design system:

```css
Primary Color:   #14b8a6 (Teal)
Secondary:       #2dd4bf (Teal Light)
Background:      #ffffff (White)
Text:            #0f2926 (Dark)
Border:          #e5e7eb (Light Gray)
Success:         #10b981 (Green)
```

## Responsive Design

### Desktop (>768px)
```
┌─────────────────────────────────────┐
│  Full modal with all features       │
│  900px max width                    │
│  85vh max height                    │
└─────────────────────────────────────┘
```

### Mobile (<768px)
```
┌───────────────────┐
│  Compact layout   │
│  Full width       │
│  95vh height      │
│  Stacked items    │
└───────────────────┘
```

## Service Categories

The modal organizes services into these categories:

1. **Core Services** (2 services)
   - Market Data API
   - News Aggregator API

2. **AI Services** (2 services)
   - Sentiment Analysis API
   - AI Models API

3. **Trading Services** (2 services)
   - OHLCV Data API
   - Trading & Backtesting API

4. **Advanced Services** (2 services)
   - Multi-Source Fallback API
   - Technical Analysis API

5. **System Services** (2 services)
   - Resources API
   - Real-Time Monitoring API

## Copy Button States

### Normal State
```
┌─────────┐
│  Copy   │  ← Teal background
└─────────┘
```

### Hover State
```
┌─────────┐
│  Copy   │  ← Darker teal, slight lift
└─────────┘
```

### Copied State
```
┌─────────┐
│    ✓    │  ← Green background, checkmark
└─────────┘
```

## Example Service Card

```
┌────────────────────────────────────────────────────┐
│  ▼ Market Data API                                 │
│     Real-time cryptocurrency market data           │
│                                                     │
│  Endpoints:                                         │
│  ┌──────────────────────────────────────────────┐ │
│  │ [GET] /api/market/top                 [Copy] │ │
│  │       Top cryptocurrencies                   │ │
│  ├──────────────────────────────────────────────┤ │
│  │ [GET] /api/market/trending            [Copy] │ │
│  │       Trending coins                         │ │
│  └──────────────────────────────────────────────┘ │
│                                                     │
│  Example Usage:                          [Copy]    │
│  ┌──────────────────────────────────────────────┐ │
│  │ fetch('http://localhost:7860/api/market/top')│ │
│  │   .then(res => res.json())                   │ │
│  │   .then(data => console.log(data));          │ │
│  └──────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────┘
```

## HTTP Method Badges

The modal uses color-coded badges for HTTP methods:

```
[GET]   ← Green badge
[POST]  ← Blue badge
[PUT]   ← Orange badge
[DELETE]← Red badge
```

## Animations

### Modal Open
- Fade in overlay (0.3s)
- Slide down + scale up (0.3s)
- Smooth easing

### Service Expand
- Smooth height transition (0.3s)
- Rotate arrow icon (0.2s)

### Copy Feedback
- Button color change (instant)
- Icon swap (instant)
- Reset after 2 seconds

## Accessibility

The modal is fully accessible:

✅ **Keyboard Navigation**
- Tab through all interactive elements
- ESC to close modal
- Enter to activate buttons

✅ **Screen Readers**
- Proper ARIA labels
- Semantic HTML
- Descriptive button text

✅ **Focus Management**
- Focus trapped in modal
- Focus returns to button on close

## Mobile Experience

On mobile devices:

1. **Button**: Same size, easy to tap
2. **Modal**: Full-screen overlay
3. **Scrolling**: Smooth vertical scroll
4. **Copy**: Native clipboard integration
5. **Close**: Large X button or tap overlay

## Performance

The modal is optimized for performance:

- **Lazy Loading**: Only loads when button is clicked
- **Singleton Pattern**: One instance reused
- **Minimal DOM**: Efficient rendering
- **CSS Animations**: Hardware accelerated

## Browser Support

Tested and working on:

✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
✅ Mobile browsers

## Tips for Users

1. **Quick Access**: Button is always visible in header
2. **Copy Everything**: Every URL and code snippet is copyable
3. **Expand as Needed**: Only expand services you need
4. **Mobile Friendly**: Works great on phones and tablets
5. **Always Updated**: Shows current server URL automatically

---

**Visual Design**: Clean, modern, professional
**User Experience**: Intuitive, fast, helpful
**Implementation**: Solid, maintainable, extensible