pos_bluetooth_thermal_printer/CSS_VISUAL_PREVIEW.md

# CSS Visual Preview

## Status Indicators

### Connected State
```
┌─────────────────────────────┐
│  ●  Connected               │  ← Green indicator with glow
│  ↑                          │
│  Green (#28a745)            │
└─────────────────────────────┘
```

### Disconnected State
```
┌─────────────────────────────┐
│  ●  Disconnected            │  ← Red indicator with glow
│  ↑                          │
│  Red (#dc3545)              │
└─────────────────────────────┘
```

### Connecting State
```
┌─────────────────────────────┐
│  ◐  Connecting...           │  ← Yellow indicator, pulsing & spinning
│  ↑                          │
│  Yellow (#ffc107)           │
│  Pulse + Spin animation     │
└─────────────────────────────┘
```

### Error State
```
┌─────────────────────────────┐
│  ●  Error                   │  ← Red indicator with enhanced glow
│  ↑                          │
│  Red (#dc3545)              │
└─────────────────────────────┘
```

## Configuration Dialog Layout

```
┌────────────────────────────────────────────────────────────┐
│  Bluetooth Printer Configuration                           │
│  Configure your bluetooth thermal printer for this POS     │
├────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────────────────────────────────────────────┐ │
│  │ 1. Scan for Devices                                  │ │
│  │ Click the button below to scan for available...      │ │
│  │                                                       │ │
│  │  [🔍 Scan for Devices]                               │ │
│  └──────────────────────────────────────────────────────┘ │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐ │
│  │ 2. Select a Printer                                  │ │
│  │ Choose your bluetooth thermal printer from the list  │ │
│  │                                                       │ │
│  │  ┌────────────────────────────────────────────────┐ │ │
│  │  │ ⚡ RPP02 Printer              📶 Strong    ✓  │ │ │ ← Selected
│  │  │ 00:11:22:33:44:55                             │ │ │
│  │  ├────────────────────────────────────────────────┤ │ │
│  │  │ ⚡ Thermal Printer 2          📶 Medium       │ │ │ ← Hover
│  │  │ 00:11:22:33:44:66                             │ │ │
│  │  ├────────────────────────────────────────────────┤ │ │
│  │  │ ⚡ POS Printer                📶 Weak         │ │ │
│  │  │ 00:11:22:33:44:77                             │ │ │
│  │  └────────────────────────────────────────────────┘ │ │
│  └──────────────────────────────────────────────────────┘ │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐ │
│  │ 3. Printer Settings                                  │ │
│  │ Configure printer-specific settings                  │ │
│  │                                                       │ │
│  │  Character Set:  [CP437 (USA, Standard Europe) ▼]   │ │
│  │  Paper Width:    [48 characters (80mm) ▼]           │ │
│  │  ☑ Enable automatic reconnection                    │ │
│  │  Timeout:        [10000] ms                          │ │
│  └──────────────────────────────────────────────────────┘ │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐ │
│  │ 4. Test Connection                                   │ │
│  │ Test your printer configuration                      │ │
│  │                                                       │ │
│  │  [🖨️ Test Print]  [✕ Disconnect]                    │ │
│  └──────────────────────────────────────────────────────┘ │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐ │
│  │ Need Help?                                           │ │
│  │ • Make sure your bluetooth printer is powered on     │ │
│  │ • Ensure bluetooth is enabled on your device         │ │
│  │ • This feature requires Chrome, Edge, or Opera       │ │
│  └──────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘
```

## Button States

### Primary Button (Scan)
```
Normal:    [🔍 Scan for Devices]  ← Blue (#007bff)
Hover:     [🔍 Scan for Devices]  ← Darker blue, lifted
Active:    [🔍 Scan for Devices]  ← Pressed down
Disabled:  [🔍 Scan for Devices]  ← 50% opacity
Loading:   [⟳ Scanning...]        ← Spinner animation
```

### Success Button (Test Print)
```
Normal:    [🖨️ Test Print]  ← Green (#28a745)
Hover:     [🖨️ Test Print]  ← Darker green, lifted
Active:    [🖨️ Test Print]  ← Pressed down
Disabled:  [🖨️ Test Print]  ← 50% opacity
Loading:   [⟳ Printing...]  ← Spinner animation
```

### Danger Button (Disconnect)
```
Normal:    [✕ Disconnect]  ← Red (#dc3545)
Hover:     [✕ Disconnect]  ← Darker red, lifted
Active:    [✕ Disconnect]  ← Pressed down
Disabled:  [✕ Disconnect]  ← 50% opacity
```

## Notifications

### Success Notification
```
┌────────────────────────────────────────────────┐
│ ✓  Successfully connected to printer          │  ← Green background
│                                                │     Pulse animation
└────────────────────────────────────────────────┘
```

### Error Notification
```
┌────────────────────────────────────────────────┐
│ ⚠  Failed to connect to printer               │  ← Red background
│                                                │     Shake animation
└────────────────────────────────────────────────┘
```

### Warning Notification
```
┌────────────────────────────────────────────────┐
│ ⚠  Bluetooth printer unavailable               │  ← Yellow background
│                                                │
└────────────────────────────────────────────────┘
```

### Info Notification
```
┌────────────────────────────────────────────────┐
│ ℹ  Connecting to printer...                   │  ← Blue background
│                                                │
└────────────────────────────────────────────────┘
```

## Responsive Layouts

### Desktop (>1024px)
```
┌─────────────────────────────────────────────────────────┐
│  Full width dialog (700px max)                          │
│  All sections visible                                   │
│  Horizontal button layout                               │
│  Device list: 300px height                              │
└─────────────────────────────────────────────────────────┘
```

### Tablet Landscape (769px-1024px)
```
┌──────────────────────────────────────────────────┐
│  Narrower dialog (600px max)                     │
│  All sections visible                            │
│  Horizontal button layout                        │
│  Device list: 280px height                       │
└──────────────────────────────────────────────────┘
```

### Tablet Portrait (≤768px)
```
┌────────────────────────────────────┐
│  Full width dialog                 │
│  Reduced padding                   │
│  Vertical button layout            │
│  Device list: 250px height         │
│  Smaller fonts                     │
└────────────────────────────────────┘
```

## Animation Sequences

### Connecting Animation
```
Frame 1:  ●  (scale: 1.0,  glow: 8px)
          ↓
Frame 2:  ◉  (scale: 1.05, glow: 16px)  ← Pulse peak
          ↓
Frame 3:  ●  (scale: 1.0,  glow: 8px)
          ↓
Repeat...

Icon:     ⚡ → ⚡ → ⚡  (rotating 360°)
```

### Device List Slide-in
```
Item 1:  ←─── (delay: 0.05s)
Item 2:   ←─── (delay: 0.10s)
Item 3:    ←─── (delay: 0.15s)
Item 4:     ←─── (delay: 0.20s)
Item 5:      ←─── (delay: 0.25s)
```

### Success Pulse
```
Frame 1:  ✓  ○         (ring: 0px)
          ↓
Frame 2:  ✓   ○        (ring: 5px, fading)
          ↓
Frame 3:  ✓    ○       (ring: 10px, invisible)
```

### Error Shake
```
Frame 1:  ⚠  (x: 0)
          ↓
Frame 2:  ⚠  (x: -10px)
          ↓
Frame 3:  ⚠  (x: +10px)
          ↓
Frame 4:  ⚠  (x: 0)
```

## Color Palette Reference

### Status Colors
```
Connected:    ████ #28a745 (Green)
Disconnected: ████ #dc3545 (Red)
Connecting:   ████ #ffc107 (Yellow/Orange)
Error:        ████ #dc3545 (Red)
```

### Action Colors
```
Primary:      ████ #007bff (Blue)
Success:      ████ #28a745 (Green)
Warning:      ████ #ffc107 (Yellow)
Danger:       ████ #dc3545 (Red)
Info:         ████ #17a2b8 (Cyan)
```

### Neutral Colors
```
Background:   ████ #f8f9fa (Light Gray)
Border:       ████ #dee2e6 (Medium Gray)
Text Primary: ████ #212529 (Dark Gray)
Text Muted:   ████ #6c757d (Medium Gray)
```

### Dark Mode Colors
```
Background:   ████ #2d3748 (Dark Blue-Gray)
Surface:      ████ #1a202c (Darker Blue-Gray)
Border:       ████ #4a5568 (Medium Gray)
Text:         ████ #e2e8f0 (Light Gray)
```

## Spacing System

```
Extra Small:  4px   ▪
Small:        8px   ▪▪
Medium:       12px  ▪▪▪
Large:        16px  ▪▪▪▪
Extra Large:  24px  ▪▪▪▪▪▪
```

## Typography Scale

```
Extra Large:  24px  Bluetooth Printer Configuration
Large:        18px  1. Scan for Devices
Medium:       14px  Click the button below to scan...
Small:        13px  Helper text and descriptions
Extra Small:  12px  Device IDs and metadata
```

## Border Radius Scale

```
Small:   4px   ┌─┐
Medium:  6px   ┌──┐
Large:   8px   ┌───┐
Circle:  50%   ●
```

## Shadow Depths

```
Level 1:  0 1px 3px rgba(0,0,0,0.05)   ▁
Level 2:  0 2px 4px rgba(0,0,0,0.1)    ▂
Level 3:  0 4px 8px rgba(0,0,0,0.15)   ▃
Level 4:  0 4px 16px rgba(0,0,0,0.1)   ▄
```

## Interaction States

### Hover
```
Before:  [Button]
After:   [Button]  ← Lifted 1px, enhanced shadow
```

### Active
```
Before:  [Button]
After:   [Button]  ← Pressed down, reduced shadow
```

### Focus
```
Before:  [Button]
After:   [Button]  ← Blue outline, 2px offset
         ┗━━━━━━┛
```

### Disabled
```
Before:  [Button]
After:   [Button]  ← 50% opacity, no pointer
```

## Accessibility Features

### Focus Indicators
```
Keyboard Focus:  ┏━━━━━━━┓  ← 2px blue outline
                 ┃ Button ┃
                 ┗━━━━━━━┛
```

### High Contrast Mode
```
Normal:          [Button]
High Contrast:   ┏━━━━━━━┓  ← Enhanced borders
                 ┃ Button ┃
                 ┗━━━━━━━┛
```

### Touch Targets
```
Minimum Size:    ┌────────────┐
                 │   Button   │  ← 44px × 44px
                 └────────────┘
```

## Conclusion

This visual preview demonstrates the comprehensive styling implemented for the bluetooth printer module. All elements are designed to be:

- **Visually Clear**: Distinct colors and states
- **Responsive**: Adapts to different screen sizes
- **Accessible**: Keyboard navigation and screen reader friendly
- **Animated**: Smooth transitions and feedback
- **Professional**: Modern, polished appearance

The CSS implementation provides a complete, production-ready user interface.