15 KiB
15 KiB
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.