Technical Specification: Interactive World Travel Map Visualizer

Overview

A high-performance, single-file browser application designed to allow users to visualize their travel history. Users interact with a responsive SVG world map, clicking countries to toggle their status between 'Visited' and 'Not Visited', and exporting the resulting visualization as an image file.

Core Features

• Interactive SVG Map: A detailed SVG world map where individual country paths are clickable targets.
• Dynamic Statistics: Live calculation of total countries visited and the percentage of the world covered.
• Customizable Color Coding: User-defined color selection for visited vs. unvisited regions using a simple interface.
• PNG Export Functionality: Integration of the html2canvas library to render the current map state as a downloadable high-resolution image.
• Stateless Operation: Because the app cannot use storage APIs, a prominent warning is displayed reminding users to export their work before refreshing the page.

UI/UX Layout

• Header: Contains the tool title, a 'Reset Map' button (clears state), and an 'Export to PNG' button with a download icon.
• Main Tool Area: A centered, responsive container housing the SVG map. Hovering over a country displays a tooltip with the country name.
• Control Sidebar/Panel: A light, modern panel showing:
  • 'Statistics' block (Visited count, Percentage).
  • 'Legend' block (Color toggles).
  • 'Instructions' section (Helpful text on how to interact).
• Responsive Behavior: The map scales down on mobile devices, with a touch-friendly interface for selecting countries.

Design System & Aesthetic

• Aesthetic: Premium light-mode SaaS style. Crisp whites (#ffffff), soft grays (#f9fafb), and professional blue/green accents (#2563eb, #10b981).
• Typography: Clean, sans-serif font stack (Inter or System UI).
• Shadows: Subtle box-shadow usage on the control panel to lift it from the background.
• Transitions: Smooth transition: fill 0.2s ease on SVG paths for hover and click interactions.

Technical Implementation Constraints

• Architecture: Single HTML file containing all HTML, CSS, and Vanilla JavaScript. No external build processes.
• External Assets: Use CDN-hosted libraries (e.g., Tailwind CSS, html2canvas) via script tags.
• Security/Compatibility:
  • No Storage: Absolutely no use of localStorage, sessionStorage, or cookies. Maintain application state using a plain JavaScript object.
  • No Browser Prompts: Replace alert() or prompt() with custom DOM-based modal elements if notifications are required.
  • Sandboxing: Ensure all elements are compatible with iframe sandboxing (avoid synchronous blocking calls).
• External Links: All links (if any) must use target="_blank" and rel="noopener noreferrer".