Schengen Visa 90/180 Day Rule Travel Calculator

Overview

A high-precision, client-side utility designed to help travelers track and manage their days spent in the Schengen Area. This tool uses a dynamic, sliding-window algorithm to calculate past, present, and future stay compliance based on the official 90/180 day rule.

Technical Constraints & Requirements

• Strictly Single-File: The entire application must reside within one HTML file. No build steps, no external frameworks, no React/Vue/Angular.
• No Persistent Storage: Due to iframe sandboxing, do NOT use localStorage, sessionStorage, or cookies. Maintain state exclusively in JavaScript memory.
• No Popups: Do not use alert() or confirm(). Implement custom UI modals for warnings and notifications.
• Light Mode Only: Force a clean, professional aesthetic. No dark mode toggle. Use whites, soft grays, and a high-contrast accent color (e.g., a professional navy blue or emerald green).
• Responsive Design: Must work seamlessly on mobile, tablet, and desktop.

Feature Set

1. Dynamic Trip Manager:
   • Add/Edit/Delete trips with entry and exit date pickers.
   • Visual list of trips organized chronologically.
2. Compliance Dashboard:
   • Live indicator showing total days spent in the last 180-day window.
   • Progress bar visually representing the 90-day limit.
   • 'Warning' state if the user exceeds or approaches the limit.
3. Planning Mode:
   • Ability to add 'planned' trips to see if they will violate the rule before booking.
4. Data Privacy:
   • Zero server-side interaction. All calculations happen in the browser.

UI Layout

• Header: Simple, clean typography with the app title and a brief 'How it works' toggle.
• Main Content Area:
  • Left/Top Column: Input form for Entry Date and Exit Date.
  • Right/Bottom Column: The 'Dashboard' which renders the calculated timeline and the status (e.g., 'Compliant', 'Limit Reached', 'Overstay Warning').
• List Section: A responsive table/list view showing all added trips, with delete buttons (trash icon) for each entry.

Color Palette

• Background: #FFFFFF (White)
• Surface: #F8FAFC (Very light gray)
• Primary Accent: #2563EB (Professional Blue)
• Success/Compliant: #059669 (Emerald)
• Warning: #D97706 (Amber)
• Danger/Overstay: #DC2626 (Red)
• Text: #1E293B (Slate/Dark Gray)

Animations & Micro-interactions

• Entry: Smooth fade-in for trip list items when added.
• Transitions: Use transition: all 0.3s ease; on buttons and result cards.
• Feedback: Subtle scale up/down animation on result status changes to draw the user's attention to the compliance status.

Implementation Notes for Developer

• Ensure the date math correctly handles leap years and cross-month transitions.
• Use a library like date-fns via CDN for reliable date manipulation if desired, or pure Vanilla JS Date objects.
• Keep the UI 'SaaS-like': Use high-quality box-shadows, rounded corners (border-radius: 8px), and generous whitespace (padding/margins).