12. React Web Dashboard UI (web-react)
Architecture Overview
The web-react package is the browser dashboard frontend for the AirMouse system built with React, TypeScript, Vite, and Tailwind CSS with neon glassmorphism aesthetic styling.
Design System & Features
1. Visual Styling (index.css & Components)
- Glassmorphism Aesthetic: Vibrant dark-mode color scheme (
#0B0F19background) with blurred glass containers (backdrop-filter: blur(16px)). - Animated Gradients & Micro-Animations: Smooth pulse animations, glowing status rings, and toast notifications.
2. Dashboard Components
Toast.tsx: Neon glassmorphic alert notifications with dynamic progress bar timers.- Device Management Panel: Displays active connected Android devices with one-click Approve/Block controls.
- Server Control Panel: Provides global "Pause Movement / Resume Movement" controls synced bidirectionally with Android devices.
- Real-Time Telemetry: Live charts showing IMU sensor orientation (Pitch, Roll, Yaw) and packet throughput.
Xet Storage Details
- Size:
- 1.07 kB
- Xet hash:
- 7ecc49d83d75ef806b39b5560e8496569ec4f495acbac4afb87ed46e1444d6ae
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.