Spaces:

privateuserh
/

chandelier-events

Running

App Files Files Community

privateuserh commited on Jun 2

Commit

1294605

verified ·

1 Parent(s): 38f46f9

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +592 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Chandelier Events
-emoji: 🔥
-colorFrom: gray
 colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: chandelier-events
+emoji: 🐳
+colorFrom: red
 colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,592 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Event Management System</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .custom-checkbox:checked {
+            background-color: #4f46e5;
+        }
+        #eventModal {
+            transition: all 0.3s ease;
+        }
+        .month-nav:hover {
+            background-color: #4f46e5;
+            color: white;
+        }
+        .event-day {
+            background-color: #e0e7ff;
+        }
+        .has-event {
+            position: relative;
+        }
+        .has-event::after {
+            content: '';
+            position: absolute;
+            bottom: 5px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 6px;
+            height: 6px;
+            background-color: #4f46e5;
+            border-radius: 50%;
+        }
+        .floating-btn {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            transition: all 0.3s ease;
+        }
+        .floating-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .event-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Header -->
+    <header class="bg-indigo-600 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <h1 class="text-2xl md:text-3xl font-bold">Local Event Calendar</h1>
+                <div class="hidden md:block">
+                    <input type="text" placeholder="Search events..." class="px-4 py-2 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-300">
+                </div>
+            </div>
+            <div class="flex mt-4 space-x-4">
+                <button class="px-4 py-2 rounded-full bg-indigo-700 hover:bg-indigo-800 transition">All Events</button>
+                <button class="px-4 py-2 rounded-full hover:bg-indigo-700 transition">Music</button>
+                <button class="px-4 py-2 rounded-full hover:bg-indigo-700 transition">Sports</button>
+                <button class="px-4 py-2 rounded-full hover:bg-indigo-700 transition">Art</button>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Calendar Section -->
+            <div class="lg:w-2/3">
+                <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-xl font-bold text-gray-800">Event Calendar</h2>
+                        <div class="flex space-x-2">
+                            <button onclick="previousMonth()" class="month-nav px-3 py-1 rounded-lg bg-indigo-100 text-indigo-600"><i class="fas fa-chevron-left"></i></button>
+                            <h3 id="currentMonthYear" class="px-4 py-1 font-semibold text-gray-700">June 2023</h3>
+                            <button onclick="nextMonth()" class="month-nav px-3 py-1 rounded-lg bg-indigo-100 text-indigo-600"><i class="fas fa-chevron-right"></i></button>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-7 gap-2 mb-2">
+                        <div class="text-center font-semibold text-gray-500 py-2">Sun</div>
+                        <div class="text-center font-semibold text-gray-500 py-2">Mon</div>
+                        <div class="text-center font-semibold text-gray-500 py-2">Tue</div>
+                        <div class="text-center font-semibold text-gray-500 py-2">Wed</div>
+                        <div class="text-center font-semibold text-gray-500 py-2">Thu</div>
+                        <div class="text-center font-semibold text-gray-500 py-2">Fri</div>
+                        <div class="text-center font-semibold text-gray-500 py-2">Sat</div>
+                    </div>
+                    <div id="calendarDays" class="grid grid-cols-7 gap-2">
+                        <!-- Calendar days will be populated by JavaScript -->
+                    </div>
+                </div>
+                <!-- Events List Section -->
+                <div id="eventsList" class="space-y-4">
+                    <!-- Events will be displayed here -->
+                </div>
+            </div>
+            <!-- Sidebar -->
+            <div class="lg:w-1/3">
+                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4">Featured Venues</h2>
+                    <div class="space-y-4">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
+                                <i class="fas fa-music text-indigo-600"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold">The Jazz Club</h3>
+                                <p class="text-sm text-gray-500">Live music venue</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
+                                <i class="fas fa-theater-masks text-indigo-600"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold">City Theater</h3>
+                                <p class="text-sm text-gray-500">Drama & plays</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
+                                <i class="fas fa-futbol text-indigo-600"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold">Sports Arena</h3>
+                                <p class="text-sm text-gray-500">Athletic events</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4">Recently Added</h2>
+                    <div id="recentEvents" class="space-y-4">
+                        <!-- Recent events will be shown here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Floating Add Event Button -->
+    <div id="addEventBtn" class="fixed bottom-6 right-6 bg-indigo-600 text-white rounded-full w-16 h-16 flex items-center justify-center cursor-pointer shadow-lg floating-btn z-50">
+        <i class="fas fa-plus text-2xl"></i>
+    </div>
+    <!-- Event Form Modal -->
+    <div id="eventModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
+            <div class="flex justify-between items-center border-b px-6 py-4">
+                <h3 class="text-lg font-semibold text-gray-800">Add New Event</h3>
+                <button id="closeModal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-6">
+                <form id="eventForm" class="space-y-4">
+                    <div>
+                        <label for="eventName" class="block text-sm font-medium text-gray-700 mb-1">Event Name</label>
+                        <input type="text" id="eventName" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required>
+                    </div>
+                    <div>
+                        <label for="artistName" class="block text-sm font-medium text-gray-700 mb-1">Performer/Artist</label>
+                        <input type="text" id="artistName" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required>
+                    </div>
+                    <div>
+                        <label for="eventDate" class="block text-sm font-medium text-gray-700 mb-1">Date & Time</label>
+                        <input type="datetime-local" id="eventDate" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required>
+                    </div>
+                    <div>
+                        <label for="venueName" class="block text-sm font-medium text-gray-700 mb-1">Venue Name</label>
+                        <input type="text" id="venueName" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required>
+                    </div>
+                    <div>
+                        <label for="ticketPrice" class="block text-sm font-medium text-gray-700 mb-1">Ticket Price ($)</label>
+                        <input type="number" id="ticketPrice" min="0" step="0.01" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                    </div>
+                    <div>
+                        <label for="eventUrl" class="block text-sm font-medium text-gray-700 mb-1">Event Website URL</label>
+                        <input type="url" id="eventUrl" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <div class="flex items-center">
+                            <input type="radio" id="statusActive" name="eventStatus" value="active" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500" checked>
+                            <label for="statusActive" class="ml-2 block text-sm text-gray-700">Active</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="radio" id="statusCancelled" name="eventStatus" value="cancelled" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
+                            <label for="statusCancelled" class="ml-2 block text-sm text-gray-700">Cancelled</label>
+                        </div>
+                    </div>
+                    <div class="flex justify-end space-x-3 pt-4">
+                        <button type="button" id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
+                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Add Event</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Sample events data
+        let events = [
+            {
+                id: 1,
+                name: "Jazz Night with Sarah Smith",
+                artist: "Sarah Smith Quartet",
+                date: "2023-06-15T20:00:00",
+                venue: "The Jazz Club",
+                price: 25.00,
+                status: "active",
+                url: "https://thejazzclub.com/events"
+            },
+            {
+                id: 2,
+                name: "Rock Festival 2023",
+                artist: "Various Artists",
+                date: "2023-06-22T15:00:00",
+                venue: "City Park",
+                price: 45.00,
+                status: "active",
+                url: "https://rockfest.city"
+            },
+            {
+                id: 3,
+                name: "Modern Art Exhibition",
+                artist: "Contemporary Artists",
+                date: "2023-06-10T10:00:00",
+                venue: "City Art Gallery",
+                price: 12.50,
+                status: "active",
+                url: "https://cityartgallery.net"
+            },
+            {
+                id: 4,
+                name: "Cancelled: Summer Poetry Slam",
+                artist: "Local Poets",
+                date: "2023-06-08T19:30:00",
+                venue: "Downtown Books",
+                price: 10.00,
+                status: "cancelled",
+                url: "https://dtbooks.com/events"
+            }
+        ];
+        // DOM elements
+        const calendarDays = document.getElementById('calendarDays');
+        const currentMonthYear = document.getElementById('currentMonthYear');
+        const eventsList = document.getElementById('eventsList');
+        const recentEvents = document.getElementById('recentEvents');
+        const addEventBtn = document.getElementById('addEventBtn');
+        const eventModal = document.getElementById('eventModal');
+        const closeModal = document.getElementById('closeModal');
+        const cancelBtn = document.getElementById('cancelBtn');
+        const eventForm = document.getElementById('eventForm');
+        // Calendar variables
+        let currentDate = new Date();
+        let currentMonth = currentDate.getMonth();
+        let currentYear = currentDate.getFullYear();
+        // Initialize app
+        document.addEventListener('DOMContentLoaded', () => {
+            renderCalendar();
+            displayEvents();
+            displayRecentEvents();
+            // Event listeners
+            addEventBtn.addEventListener('click', () => {
+                eventModal.classList.remove('hidden');
+            });
+            closeModal.addEventListener('click', () => {
+                eventModal.classList.add('hidden');
+            });
+            cancelBtn.addEventListener('click', () => {
+                eventModal.classList.add('hidden');
+            });
+            eventForm.addEventListener('submit', addNewEvent);
+        });
+        // Render calendar
+        function renderCalendar() {
+            // Clear previous calendar
+            calendarDays.innerHTML = '';
+            // Set month and year display
+            const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+            currentMonthYear.textContent = `${monthNames[currentMonth]} ${currentYear}`;
+            // Get first day of month and total days
+            const firstDay = new Date(currentYear, currentMonth, 1).getDay();
+            const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+            // Get days from previous month
+            const daysInPrevMonth = new Date(currentYear, currentMonth, 0).getDate();
+            // Get days from next month
+            const totalCells = Math.ceil((daysInMonth + firstDay) / 7) * 7;
+            const daysFromNextMonth = totalCells - (daysInMonth + firstDay);
+            // Previous month days
+            for (let i = 0; i < firstDay; i++) {
+                const day = daysInPrevMonth - firstDay + i + 1;
+                const dayElement = document.createElement('div');
+                dayElement.className = 'text-center py-2 text-gray-400';
+                dayElement.textContent = day;
+                calendarDays.appendChild(dayElement);
+            }
+            // Current month days
+            for (let i = 1; i <= daysInMonth; i++) {
+                const dayElement = document.createElement('div');
+                dayElement.className = 'text-center py-2 cursor-pointer rounded-lg';
+                // Check if this is today
+                const today = new Date();
+                if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && i === today.getDate()) {
+                    dayElement.classList.add('bg-indigo-100', 'font-semibold', 'text-indigo-700');
+                }
+                // Check if there are events on this day
+                const hasEvent = events.some(event => {
+                    const eventDate = new Date(event.date);
+                    return eventDate.getFullYear() === currentYear &&
+                           eventDate.getMonth() === currentMonth &&
+                           eventDate.getDate() === i;
+                });
+                if (hasEvent) {
+                    dayElement.classList.add('has-event', 'event-day', 'hover:bg-indigo-200');
+                } else {
+                    dayElement.classList.add('hover:bg-gray-100');
+                }
+                dayElement.textContent = i;
+                dayElement.dataset.day = i;
+                dayElement.dataset.month = currentMonth;
+                dayElement.dataset.year = currentYear;
+                dayElement.addEventListener('click', () => {
+                    showEventsForDay(i, currentMonth, currentYear);
+                });
+                calendarDays.appendChild(dayElement);
+            }
+            // Next month days
+            for (let i = 1; i <= daysFromNextMonth; i++) {
+                const dayElement = document.createElement('div');
+                dayElement.className = 'text-center py-2 text-gray-400';
+                dayElement.textContent = i;
+                calendarDays.appendChild(dayElement);
+            }
+        }
+        // Navigate to previous month
+        function previousMonth() {
+            currentMonth--;
+            if (currentMonth < 0) {
+                currentMonth = 11;
+                currentYear--;
+            }
+            renderCalendar();
+            displayEvents(); // Update events display for the new month
+        }
+        // Navigate to next month
+        function nextMonth() {
+            currentMonth++;
+            if (currentMonth > 11) {
+                currentMonth = 0;
+                currentYear++;
+            }
+            renderCalendar();
+            displayEvents(); // Update events display for the new month
+        }
+        // Display all events for current month
+        function displayEvents() {
+            eventsList.innerHTML = '';
+            const filteredEvents = events.filter(event => {
+                const eventDate = new Date(event.date);
+                return eventDate.getFullYear() === currentYear && eventDate.getMonth() === currentMonth;
+            });
+            if (filteredEvents.length === 0) {
+                eventsList.innerHTML = '<p class="text-gray-500 text-center py-4">No events scheduled for this month.</p>';
+                return;
+            }
+            // Sort events by date
+            filteredEvents.sort((a, b) => new Date(a.date) - new Date(b.date));
+            filteredEvents.forEach(event => {
+                const eventCard = createEventCard(event);
+                eventsList.appendChild(eventCard);
+            });
+        }
+        // Show events for a specific day
+        function showEventsForDay(day, month, year) {
+            eventsList.innerHTML = '';
+            const filteredEvents = events.filter(event => {
+                const eventDate = new Date(event.date);
+                return eventDate.getFullYear() == year &&
+                       eventDate.getMonth() == month &&
+                       eventDate.getDate() == day;
+            });
+            if (filteredEvents.length === 0) {
+                const date = new Date(year, month, day);
+                const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+                eventsList.innerHTML = `
+                    <div class="bg-white rounded-lg shadow-md p-6 text-center">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">No Events Scheduled</h3>
+                        <p class="text-gray-500">${date.toLocaleDateString('en-US', options)}</p>
+                    </div>
+                `;
+                return;
+            }
+            filteredEvents.forEach(event => {
+                const eventCard = createEventCard(event);
+                eventsList.appendChild(eventCard);
+            });
+        }
+        // Display recent events in sidebar
+        function displayRecentEvents() {
+            recentEvents.innerHTML = '';
+            const now = new Date();
+            const recent = events.filter(event => {
+                const eventDate = new Date(event.date);
+                return eventDate > now && event.status === 'active';
+            }).sort((a, b) => new Date(a.date) - new Date(b.date));
+            const maxRecent = 3;
+            const displayCount = Math.min(recent.length, maxRecent);
+            if (displayCount === 0) {
+                recentEvents.innerHTML = '<p class="text-gray-500">No upcoming events</p>';
+                return;
+            }
+            for (let i = 0; i < displayCount; i++) {
+                const eventCard = document.createElement('div');
+                eventCard.className = 'bg-gray-50 rounded-lg p-4 event-card transition cursor-pointer';
+                const eventDate = new Date(recent[i].date);
+                const options = { month: 'short', day: 'numeric' };
+                eventCard.innerHTML = `
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="font-semibold text-gray-800">${recent[i].name}</h3>
+                            <p class="text-sm text-indigo-600">${recent[i].artist}</p>
+                        </div>
+                        <div class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2 py-1 rounded-lg">
+                            ${eventDate.toLocaleDateString('en-US', options)}
+                        </div>
+                    </div>
+                    <div class="mt-2 text-sm text-gray-600">
+                        <p>${recent[i].venue} • $${recent[i].price.toFixed(2)}</p>
+                    </div>
+                `;
+                eventCard.addEventListener('click', () => {
+                    // Scroll to the event in the main list
+                    const eventElement = document.querySelector(`[data-event-id="${recent[i].id}"]`);
+                    if (eventElement) {
+                        eventElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        eventElement.classList.add('ring-2', 'ring-indigo-500');
+                        setTimeout(() => {
+                            eventElement.classList.remove('ring-2', 'ring-indigo-500');
+                        }, 2000);
+                    }
+                });
+                recentEvents.appendChild(eventCard);
+            }
+        }
+        // Create event card element
+        function createEventCard(event) {
+            const eventDate = new Date(event.date);
+            const eventDay = eventDate.getDate();
+            const eventMonth = eventDate.toLocaleString('default', { month: 'short' });
+            const eventTime = eventDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            const fullDate = eventDate.toLocaleString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+            const eventCard = document.createElement('div');
+            eventCard.className = `bg-white rounded-lg shadow-md overflow-hidden event-card transition ${event.status === 'cancelled' ? 'opacity-70' : ''}`;
+            eventCard.dataset.eventId = event.id;
+            eventCard.innerHTML = `
+                <div class="p-6">
+                    <div class="flex items-start justify-between">
+                        <div class="flex items-start space-x-4">
+                            <div class="bg-indigo-100 text-indigo-800 p-3 rounded-lg text-center">
+                                <div class="font-bold text-xl">${eventDay}</div>
+                                <div class="text-sm uppercase">${eventMonth}</div>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 ${event.status === 'cancelled' ? 'line-through' : ''}">${event.name}</h3>
+                                <p class="text-indigo-600">${event.artist}</p>
+                                <p class="text-gray-500 text-sm mt-1">${fullDate} at ${eventTime}</p>
+                                <div class="flex items-center mt-2 space-x-4">
+                                    <span class="text-gray-700">${event.venue}</span>
+                                    <span class="text-gray-700">$${event.price.toFixed(2)}</span>
+                                    ${event.status === 'cancelled' ?
+                                        '<span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-0.5 rounded">Cancelled</span>' :
+                                        '<span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded">Active</span>'}
+                                </div>
+                                ${event.url ? `<a href="${event.url}" target="_blank" class="inline-block mt-3 text-sm text-indigo-600 hover:underline">More info & tickets →</a>` : ''}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            return eventCard;
+        }
+        // Add new event
+        function addNewEvent(e) {
+            e.preventDefault();
+            // Get form values
+            const eventName = document.getElementById('eventName').value;
+            const artistName = document.getElementById('artistName').value;
+            const eventDate = document.getElementById('eventDate').value;
+            const venueName = document.getElementById('venueName').value;
+            const ticketPrice = parseFloat(document.getElementById('ticketPrice').value) || 0;
+            const eventUrl = document.getElementById('eventUrl').value;
+            const eventStatus = document.querySelector('input[name="eventStatus"]:checked').value;
+            // Create new event object
+            const newEvent = {
+                id: events.length > 0 ? Math.max(...events.map(e => e.id)) + 1 : 1,
+                name: eventName,
+                artist: artistName,
+                date: eventDate,
+                venue: venueName,
+                price: ticketPrice,
+                status: eventStatus,
+                url: eventUrl
+            };
+            // Add to events array
+            events.push(newEvent);
+            // Reset form and close modal
+            eventForm.reset();
+            eventModal.classList.add('hidden');
+            // Update UI
+            renderCalendar();
+            displayEvents();
+            displayRecentEvents();
+            // For demo purposes, show success message
+            alert('Event added successfully!');
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/chandelier-events" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Keep all components and AI Agent working add a floating button to allow a venue to post an event allow the data to be displayed on a main page event calendar include relevant event details that can be entered like performance artist name, date, ticket price, and if event is active or cancelled also include web address link for user entering show data. keep the same site design and color scheme and locations