/Coast-Guard-Beach-Display-

Real-time beach insights, XAMPP-powered, safety and enjoyment! 🏖️🚀

Primary LanguageJavaScriptMIT LicenseMIT

Coast-Guard-Beach-Display

Real-time Patrolled Beach Web App 🌊☀️

Overview

Real-time Patrolled Beach Web App displaying essential information using APIs, JavaScript, HTML, CSS, and PHP. Interactive map powered by Leaflet.js.

Screenshot 2024-01-09 124636

🚀 Getting Started with XAMPP

Installation

  1. Download the Zip File:

    • Click on the "Code" button and select "Download ZIP."
    • Extract the contents to your XAMPP htdocs directory (e.g., C:\xampp\htdocs\ on Windows or /Applications/XAMPP/htdocs/ on macOS).

  2. Start XAMPP:

    • Launch XAMPP and start the Apache server.

  3. Open the Application:

    • Open your preferred browser and navigate to http://localhost/your-project-directory.

    For more information on how to download Xampp https://phpandmysql.com/extras/installing-xampp/#:~:text=To%20install%20XAMPP%20on%20your,installer%20to%20start%20the%20installation.

Usage

  • Explore patrolled beaches in Brisbane by interacting with the map.
  • Click on map markers to view detailed information on each beach.
  • Access point information is displayed in a card when clicked on the corresponding marker.

Beach Information

  • Swell, Swimmers, Wind: Real-time conditions.
  • Patrolled By, Frequency: Organization and schedule.

Map Features

  • Interactive Map: Leaflet.js integration.
  • Custom Markers: Beaches and access points.
  • Popup Cards: Detailed info on click.

Tech Stack

  • HTML, CSS, JavaScript (Frontend)
  • PHP (Backend)
  • Leaflet.js (Interactive Maps)

License

This project is licensed under the MIT License.

Contributions

Contributions are welcome! Open issues or pull requests.

Explore Brisbane's beaches with the Patrolled Beach Web App! 🚀🏖️

Happy browsing! 🌟