Event Platform Website

A complete static website for event management with calendar, ticket sales via Pretix, and performer application integration.

Features

• Interactive Event Calendar: Using FullCalendar.js to display upcoming events
• Event Listings and Details: Browse events with filtering options
• Ticket Sales: Integration with self-hosted Pretix for ticket sales
• Performer Applications: Integration with LimeSurvey for performer submissions
• Responsive Design: Mobile-friendly layout for all device sizes

Project Structure

event-website/
├── index.html               # Home page with event calendar
├── events/                  # Events pages
│   ├── index.html           # Events listing with filters
│   └── event-template.html  # Template for individual event pages
├── apply/                   # Performer application page
│   └── index.html           # Page with embedded LimeSurvey form
├── assets/
│   ├── css/                 # Stylesheets
│   │   ├── main.css         # Main styles
│   │   ├── calendar.css     # Calendar styles
│   │   ├── events.css       # Events page styles
│   │   ├── event-details.css # Event detail page styles
│   │   └── apply.css        # Application page styles
│   ├── js/                  # JavaScript files
│   │   ├── main.js          # Main site functionality
│   │   ├── calendar.js      # Calendar implementation
│   │   ├── events.js        # Events listing functionality
│   │   ├── event-details.js # Event detail page functionality
│   │   └── apply.js         # Application page functionality
│   └── images/              # Site images and event photos
├── data/
│   └── events.json          # Event data store (for static site)
└── README.md                # This documentation file

Setup Instructions

Prerequisites

• Web hosting service (like Porkbun's static hosting)
• Pretix.eu account (for ticket sales)
• LimeSurvey account (for performer applications)

Installation

1. Clone this repository
2. Customize the configuration:
   • Update your Pretix event URL in event-template.html
   • Update the LimeSurvey URL in apply/index.html
   • Customize branding, colors, and text in CSS files
   • Add your own event data to data/events.json
3. Add event images to assets/images/events/ directory
4. Upload the files to your web hosting service

Creating Event Pages

For each new event:

1. Create a new HTML file in the events/ directory (e.g., events/my-new-event.html)
2. Copy the content from event-template.html
3. Add event data to data/events.json with a matching slug
4. Add event images to assets/images/events/

The event details page will automatically load the event data based on the slug in the URL.

Working with Event Data

The events.json file contains all event data including:

• Basic information (title, date, location)
• Descriptions and images
• Performer details
• Schedule information
• Venue details
• Pretix event configuration

Example Event Object:

{
  "id": 1,
  "title": "Event Title",
  "slug": "event-slug",
  "category": "Music",
  "date": "2025-06-15",
  "startTime": "18:00",
  "endTime": "23:00",
  "location": "Venue Name",
  "shortDescription": "Brief description of event.",
  "description": "<p>Full HTML description...</p>",
  "image": "/assets/images/events/event-image.jpg",
  "bannerImage": "/assets/images/events/event-banner.jpg",
  "price": 45,
  "featured": true,
  "pretixEvent": {
    "organizerSlug": "hausmuerte",
    "eventSlug": "qw"
  },
  "performers": [
    {
      "name": "Performer Name",
      "role": "Role",
      "image": "/assets/images/performers/performer.jpg"
    }
  ],
  "schedule": [
    {
      "time": "19:00",
      "title": "Event Start",
      "description": "Description"
    }
  ],
  "venue": {
    "name": "Venue Name",
    "address": "Venue Address",
    "phone": "Phone Number",
    "website": "Website URL",
    "websiteLabel": "Display text"
  }
}

Customization

Styling

The site uses CSS variables for easy customization. Edit the :root section in assets/css/main.css to change colors, fonts, and other design elements:

:root {
    /* Color palette */
    --primary-color: #6200ea;
    --primary-light: #9d46ff;
    --primary-dark: #0a00b6;
    /* Add more custom variables here */
}

Adding Pages

To add new pages:

1. Create a new HTML file
2. Copy the header and footer from an existing page
3. Add your content
4. Link to the new page from the navigation menu in the header

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b new-feature
3. Commit your changes: git commit -m 'Add new feature'
4. Push to the branch: git push origin new-feature
5. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

• FullCalendar - JavaScript calendar library
• Pretix - Open source ticketing system
• LimeSurvey - Open source survey tool
• Font Awesome - Icons