New UI with TailwindCSS

[eshirvana]

PR Type

Enhancement

---

Description

• Complete UI redesign using TailwindCSS with modern gradient backgrounds and dark mode support

• Replaced canvas-based gauges with animated SVG speedometer featuring gradient colors and smooth transitions

• Refactored HTML structure to semantic layout with improved accessibility (ARIA labels, roles)

• Enhanced IP/ISP information parsing with fallback logic for multiple data source formats

• Added dark mode toggle with localStorage persistence and system preference detection

---

Diagram Walkthrough

flowchart LR
  A["Old Canvas-based UI"] -->|Replace| B["TailwindCSS Modern UI"]
  C["Canvas Gauges"] -->|Replace| D["Animated SVG Speedometer"]
  E["Basic HTML"] -->|Enhance| F["Semantic HTML with ARIA"]
  G["No Dark Mode"] -->|Add| H["Dark Mode Toggle"]
  I["Simple IP Display"] -->|Improve| J["Enhanced IP/ISP Parsing"]

File Walkthrough

Relevant files

Enhancement

index.html Complete UI redesign with TailwindCSS and animated speedometer index.html Integrated TailwindCSS CDN with custom animation keyframes (pulse-slow, fade-in, spin-slow, progress-fill, glow-pulse, bounce-gentle) Replaced canvas-based meter drawing with animated SVG speedometer using stroke-dasharray for progress visualization Completely restructured HTML layout using semantic elements with TailwindCSS utility classes for responsive design Added dark mode toggle button with localStorage persistence and system preference detection via initThemeToggle() function Enhanced IP/ISP information parsing with multiple fallback formats (space-separated, hyphen-separated, combined formats) Improved server selection UI with server info display (distance, sponsor) via updateServerInfo() function Refactored speedometer color scheme to use gradient fills that change based on test type (download/upload/ping) Added comprehensive ARIA labels, roles, and live regions for improved accessibility Replaced inline CSS styles with TailwindCSS classes and removed old stylesheet entirely Enhanced privacy policy modal with improved styling and backdrop blur effects +674/-365

---