Eventbrite MCP Server
by vishalsachdev
Verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventbrite Events Viewer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
color: #f05537; /* Eventbrite orange */
text-align: center;
}
.filters {
background-color: white;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.filter-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.filter-item {
flex: 1;
min-width: 200px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #f05537;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button:hover {
background-color: #d04527;
}
.events {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.event-card {
background-color: white;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.event-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.event-header {
background-color: #f05537;
color: white;
padding: 15px;
}
.event-header h2 {
margin: 0;
font-size: 18px;
}
.event-body {
padding: 15px;
}
.event-date {
color: #666;
margin-bottom: 10px;
font-weight: bold;
}
.event-description {
color: #333;
margin-bottom: 15px;
line-height: 1.4;
}
.event-link {
display: inline-block;
background-color: #f05537;
color: white;
text-decoration: none;
padding: 8px 12px;
border-radius: 4px;
font-weight: bold;
}
.event-link:hover {
background-color: #d04527;
}
.status-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
}
.status-live {
background-color: #4CAF50;
color: white;
}
.status-completed {
background-color: #2196F3;
color: white;
}
.status-ended {
background-color: #FF9800;
color: white;
}
.status-canceled {
background-color: #F44336;
color: white;
}
.loading {
text-align: center;
padding: 20px;
font-size: 18px;
color: #666;
}
.no-events {
text-align: center;
padding: 30px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>Eventbrite Events Viewer</h1>
<div class="filters">
<div class="filter-group">
<div class="filter-item">
<label for="status">Status</label>
<select id="status">
<option value="">All</option>
<option value="live">Live</option>
<option value="started">Started</option>
<option value="ended">Ended</option>
<option value="completed">Completed</option>
<option value="canceled">Canceled</option>
</select>
</div>
<div class="filter-item">
<label for="start-date">Start Date</label>
<input type="date" id="start-date">
</div>
<div class="filter-item">
<label for="end-date">End Date</label>
<input type="date" id="end-date">
</div>
</div>
<button id="load-events">Load Events</button>
</div>
<div id="events-container" class="events">
<div class="loading">Loading events...</div>
</div>
</div>
<script>
// Format date for display
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleString('en-US', {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true
});
}
// Format date for API
function formatDateForApi(dateObj) {
if (!dateObj) return '';
const year = dateObj.getFullYear();
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
const day = String(dateObj.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
// Load events from events.json
async function loadEvents() {
const eventsContainer = document.getElementById('events-container');
eventsContainer.innerHTML = '<div class="loading">Loading events...</div>';
try {
const response = await fetch('events.json');
const events = await response.json();
// Filter events based on selected filters
const statusFilter = document.getElementById('status').value;
const startDateInput = document.getElementById('start-date').value;
const endDateInput = document.getElementById('end-date').value;
const startDate = startDateInput ? new Date(startDateInput) : null;
const endDate = endDateInput ? new Date(endDateInput) : null;
const filteredEvents = events.filter(event => {
// Filter by status
if (statusFilter && event.status !== statusFilter) {
return false;
}
// Filter by date range
const eventStartDate = new Date(event.start);
if (startDate && eventStartDate < startDate) {
return false;
}
if (endDate) {
// Set end date to end of day
const endOfDay = new Date(endDate);
endOfDay.setHours(23, 59, 59, 999);
if (eventStartDate > endOfDay) {
return false;
}
}
return true;
});
if (filteredEvents.length === 0) {
eventsContainer.innerHTML = '<div class="no-events">No events found matching your criteria</div>';
return;
}
// Sort events by start date (newest first)
filteredEvents.sort((a, b) => new Date(b.start) - new Date(a.start));
// Render events
eventsContainer.innerHTML = '';
filteredEvents.forEach(event => {
const eventCard = document.createElement('div');
eventCard.className = 'event-card';
const eventHtml = `
<div class="event-header">
<h2>${event.name}</h2>
</div>
<div class="event-body">
<div class="event-date">${formatDate(event.start)} - ${formatDate(event.end)}</div>
<div class="event-description">${event.description || 'No description available'}</div>
<a href="${event.url}" target="_blank" class="event-link">View Event</a>
<div>
<span class="status-badge status-${event.status}">${event.status}</span>
</div>
</div>
`;
eventCard.innerHTML = eventHtml;
eventsContainer.appendChild(eventCard);
});
} catch (error) {
console.error('Error loading events:', error);
eventsContainer.innerHTML = '<div class="no-events">Error loading events. Please try again.</div>';
}
}
// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
// Set default dates
const today = new Date();
const oneYearAgo = new Date();
oneYearAgo.setFullYear(today.getFullYear() - 1);
document.getElementById('start-date').value = formatDateForApi(oneYearAgo);
document.getElementById('end-date').value = formatDateForApi(today);
// Load events on button click
document.getElementById('load-events').addEventListener('click', loadEvents);
// Load events on page load
loadEvents();
});
</script>
</body>
</html>