# Demo Endpoint Implementation

## Overview

A new endpoint `/demo` has been added to the OpenEventDatabase API. This endpoint serves an interactive HTML page with a MapLibre map that displays current events from the database.

## Features

- Interactive MapLibre map showing current events
- Events are fetched from the `/event` endpoint with the current date
- Each event is displayed as a marker on the map
- Clicking on a marker shows a popup with event details
- The map automatically zooms to fit all displayed events
- Sidebar with links to other API endpoints and the GitHub repository

## Implementation Details

The implementation consists of the following components:

1. **DemoResource Class**: A new resource class in `oedb/resources/demo.py` that handles GET requests to the `/demo` endpoint and returns an HTML page.

2. **HTML Page**: The HTML page includes:
   - MapLibre JS and CSS libraries
   - Custom CSS for styling the page
   - A full-screen map
   - A sidebar with information and links

3. **JavaScript**: The JavaScript code:
   - Initializes a MapLibre map
   - Fetches events from the `/event` endpoint
   - Displays events as markers on the map
   - Creates popups with event details
   - Fits the map view to include all events

4. **Route Registration**: The `/demo` endpoint is registered in `backend.py` with the line:
   ```python
   app.add_route('/demo', demo)
   ```

5. **Documentation**: The root endpoint (`/`) has been updated to include information about the demo endpoint.

## How to Test

To test the demo endpoint:

1. Start the server:
   ```bash
   python3 backend.py
   ```

2. Open a web browser and navigate to:
   ```
   http://127.0.0.1:8080/demo
   ```

3. Verify that:
   - The page loads correctly with a MapLibre map
   - Events are displayed on the map (if there are events for the current date)
   - Clicking on a marker shows a popup with event details
   - Links to other endpoints work correctly

## Troubleshooting

If no events appear on the map:

1. Check if there are events for the current date in the database
2. Try adding a test event using the `/event` endpoint
3. Check the browser console for any JavaScript errors
4. Verify that the `/event` endpoint is working correctly by accessing it directly

## Future Improvements

Potential future improvements for the demo page:

1. Add date selection to view events from different dates
2. Add filtering options (by event type, location, etc.)
3. Add a search box to find specific events
4. Improve the mobile experience
5. Add more interactive features to the map