Spaces:

privateuserh
/

chandelier-events

Running

File size: 28,735 Bytes
<!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>