SYD Terminal // Meteorological Board ✈️

A highly stylized, premium weather dashboard designed to perfectly mimic the mechanical "split-flap" departure boards (Solari boards) found in classic airport terminals like Sydney International.

This application transforms standard weather data into an immersive, skeuomorphic terminal experience.

✨ Features

• Mechanical Flap Displays: Every single data point on the main board is dynamically rendered as a skeuomorphic mechanical flap, complete with monospace fonts, matte black backgrounds, and physical split-lines.
• Unified Departure Board: Manage all of your locations on a single massive flight manifest board that tracks:
  • 🕒 Local Time (Timezone aware)
  • 🏙️ Destination
  • 🌡️ Temperature & Apparent "Feels Like" Temperature
  • ⛅ Weather Remarks / Status
  • 🌧️ Precipitation Probability
  • 💨 Wind Speed
  • 💧 Relative Humidity
  • 🏭 Air Quality Index (AQI)
• CRT Flight Details Panel: Selecting any city on the board opens a vintage green-phosphor CRT monitor overlay, displaying the full 24-hour hourly manifest and a 7-day weather outlook.
• Command Console & Autosave: Search for any city in the world using the terminal input. Selecting a city instantly "autosaves" it to your board so you never lose track of your destinations.
• Fully Customizable: Easily remove default cities from the board with a single click in the CRT panel. Your board layout is saved locally in your browser.

🛠️ Tech Stack & APIs

• Core: HTML5, CSS3 (Vanilla), JavaScript (Vanilla)
• Tooling: Vite for blazing-fast local development and asset bundling.
• Data APIs:
  • Open-Meteo Weather API (Current, Hourly, Daily forecasts)
  • Open-Meteo Air Quality API
  • Open-Meteo Geocoding API
  • No API Keys required!
• Typography: Google Fonts (Space Mono, Bebas Neue)

🚀 Getting Started

This project uses Vite. Ensure you have Node.js installed on your machine.

1. Install Dependencies Run the following command in the project directory to install Vite:

   npm install

2. Start the Development Server Spin up the local server to see the terminal live:

   npm run dev

3. View the Terminal Open your browser and navigate to the address provided by Vite (typically http://localhost:5173/).

🎨 UI/UX Design

The interface was built with a strict adherence to industrial, skeuomorphic aesthetics:

• Colors: Deep navy/black enclosures, high-contrast amber lettering (#FFB703), and CRT-green accents (#00FF41).
• Interactive Elements: Rows feature 3D hover states that push inward slightly when interacted with, and the CRT screen includes subtle scanlines and phosphor bloom.

---

Created as an advanced agentic coding demonstration.