whenever i click on view details button it should open a page showing all the details of taht event and about how manybpoeple attending what kind of clothes they need to wear and about your interestv to join the event and a buttion of join event should show that ask for you informationa nd when you comlete fillng up the information and submitn it should show suucesfully registered with differeent emojis everytime you submit a event and it should then accesible on ypur dashboard after registereing as registered event
8b095fa
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SparkMeet - Discover Events</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .event-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .category-filter.active { | |
| background-color: #6366f1; | |
| color: white; | |
| } | |
| .modal { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <span class="text-2xl font-bold text-indigo-600">SparkMeet</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="text-indigo-600 font-medium flex items-center"> | |
| <i data-feather="home" class="mr-2"></i> Home | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium flex items-center"> | |
| <i data-feather="calendar" class="mr-2"></i> Create Event | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium flex items-center"> | |
| <i data-feather="message-square" class="mr-2"></i> Messages | |
| </a> | |
| <div class="relative"> | |
| <button id="user-menu" class="flex items-center space-x-2 focus:outline-none"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| <div id="dropdown-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Dashboard</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-600 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-indigo-600">Home</a> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">Create Event</a> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">Messages</a> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">Dashboard</a> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Discover Your Next Adventure</h1> | |
| <p class="text-xl md:text-2xl mb-8">Find and join amazing events happening around you</p> | |
| <div class="max-w-md mx-auto"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search for events..." class="w-full px-6 py-4 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-400 text-gray-800"> | |
| <button class="absolute right-2 top-2 bg-indigo-600 text-white p-2 rounded-full"> | |
| <i data-feather="search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Category Filters --> | |
| <div class="max-w-6xl mx-auto px-4 py-8"> | |
| <div class="flex overflow-x-auto space-x-4 pb-4 scrollbar-hide"> | |
| <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium active"> | |
| All Events | |
| </button> | |
| <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium" data-category="food-culture"> | |
| Food & Culture | |
| </button> | |
| <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium" data-category="party"> | |
| Parties | |
| </button> | |
| <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium" data-category="workshop"> | |
| Workshops | |
| </button> | |
| <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium" data-category="sport"> | |
| Sports | |
| </button> | |
| <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium" data-category="networking"> | |
| Networking | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Events Grid --> | |
| <div class="max-w-6xl mx-auto px-4 py-8"> | |
| <h2 class="text-2xl font-bold mb-6">Popular Events Near You</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Event Card 1 --> | |
| <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="food-culture"> | |
| <div class="h-48 bg-indigo-100 relative"> | |
| <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Event" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 shadow flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-1 text-indigo-600"></i> | |
| <span class="text-sm font-medium">New York</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Food Festival 2023</h3> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">Food & Culture</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Join us for the biggest food festival of the year with top chefs and amazing dishes.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i> | |
| <span class="text-sm">Oct 15, 2023</span> | |
| </div> | |
| <button class="view-details-btn px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors" data-event-id="food-festival-2023"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 2 --> | |
| <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="party"> | |
| <div class="h-48 bg-purple-100 relative"> | |
| <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Event" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 shadow flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-1 text-indigo-600"></i> | |
| <span class="text-sm font-medium">Miami</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Beach Party</h3> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Party</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">The hottest beach party of the summer with DJs, drinks and amazing vibes.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i> | |
| <span class="text-sm">Nov 5, 2023</span> | |
| </div> | |
| <button class="view-details-btn px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors" data-event-id="beach-party-2023"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 3 --> | |
| <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="workshop"> | |
| <div class="h-48 bg-green-100 relative"> | |
| <img src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Event" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 shadow flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-1 text-indigo-600"></i> | |
| <span class="text-sm font-medium">San Francisco</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Tech Workshop</h3> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Workshop</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Learn the latest in web development from industry experts.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i> | |
| <span class="text-sm">Dec 12, 2023</span> | |
| </div> | |
| <button class="view-details-btn px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors" data-event-id="tech-workshop-2023"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Details Modal --> | |
| <div id="event-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="relative"> | |
| <button id="close-modal" class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-lg"> | |
| <i data-feather="x"></i> | |
| </button> | |
| <div class="h-64 bg-indigo-100"> | |
| <img id="modal-event-image" src="" alt="Event" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h2 id="modal-event-title" class="text-2xl font-bold"></h2> | |
| <div class="flex items-center mt-2"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2 text-indigo-600"></i> | |
| <span id="modal-event-location" class="text-gray-600"></span> | |
| </div> | |
| </div> | |
| <span id="modal-event-category" class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full"></span> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <div class="mr-8"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i> | |
| <span id="modal-event-date" class="text-gray-600"></span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 mr-2 text-indigo-600"></i> | |
| <span id="modal-event-time" class="text-gray-600">7:00 PM - 11:00 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-2">About the Event</h3> | |
| <p id="modal-event-description" class="text-gray-700"></p> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-2">Organizer</h3> | |
| <div class="flex items-center"> | |
| <img id="modal-event-organizer-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Organizer" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p id="modal-event-organizer-name" class="font-medium">Sarah Johnson</p> | |
| <p class="text-sm text-gray-500">Event Organizer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Price</p> | |
| <p id="modal-event-price" class="text-xl font-bold">$25.00</p> | |
| </div> | |
| <button id="register-btn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"> | |
| Register Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Registration Form Modal --> | |
| <div id="registration-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl max-w-md w-full p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Register for <span id="register-event-title"></span></h2> | |
| <button id="close-registration-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <form id="registration-form" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="tickets" class="block text-sm font-medium text-gray-700 mb-1">Number of Tickets</label> | |
| <select id="tickets" name="tickets" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| <option value="5">5</option> | |
| </select> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"> | |
| Complete Registration | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Registration Success Modal --> | |
| <div id="success-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl max-w-md w-full p-8 text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4"> | |
| <i data-feather="check" class="h-6 w-6 text-green-600"></i> | |
| </div> | |
| <h2 class="text-xl font-bold mb-2">Registration Successful!</h2> | |
| <p class="text-gray-600 mb-6">You're all set for <span id="success-event-title" class="font-medium"></span>. We've sent the details to your email.</p> | |
| <button id="close-success-modal" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"> | |
| Back to Events | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">SparkMeet</h3> | |
| <p class="text-gray-400">Connecting people through amazing events and experiences.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Explore</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Events</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Categories</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cities</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Popular</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 SparkMeet. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // User dropdown menu | |
| const userMenu = document.getElementById('user-menu'); | |
| const dropdownMenu = document.getElementById('dropdown-menu'); | |
| userMenu.addEventListener('click', () => { | |
| dropdownMenu.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!userMenu.contains(e.target) && !dropdownMenu.contains(e.target)) { | |
| dropdownMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Category filter | |
| const categoryFilters = document.querySelectorAll('.category-filter'); | |
| const eventCards = document.querySelectorAll('.event-card'); | |
| const eventsGrid = document.querySelector('.grid'); | |
| const popularEventsTitle = document.querySelector('h2.text-2xl.font-bold.mb-6'); | |
| // Food & Culture events data | |
| const foodCultureEvents = [ | |
| { | |
| title: "Italian Cooking Masterclass", | |
| category: "Food & Culture", | |
| location: "San Francisco", | |
| date: "Nov 20, 2023", | |
| description: "Learn authentic Italian cooking techniques from a Michelin-starred chef.", | |
| image: "http://static.photos/food/640x360/101", | |
| price: "$75.00" | |
| }, | |
| { | |
| title: "Wine Tasting Experience", | |
| category: "Food & Culture", | |
| location: "Napa Valley", | |
| date: "Nov 25, 2023", | |
| description: "Explore premium wines with expert sommeliers in beautiful vineyard settings.", | |
| image: "http://static.photos/food/640x360/102", | |
| price: "$45.00" | |
| }, | |
| { | |
| title: "Street Food Festival", | |
| category: "Food & Culture", | |
| location: "Los Angeles", | |
| date: "Dec 2, 2023", | |
| description: "Taste the best street food from around the world in one amazing location.", | |
| image: "http://static.photos/food/640x360/103", | |
| price: "$15.00" | |
| } | |
| ]; | |
| const partyEvents = [ | |
| { | |
| title: "Neon Glow Party", | |
| category: "Party", | |
| location: "Miami", | |
| date: "Nov 18, 2023", | |
| description: "Dance the night away under neon lights with the best DJs in town.", | |
| image: "http://static.photos/technology/640x360/201", | |
| price: "$25.00" | |
| }, | |
| { | |
| title: "Beach Sunset Rave", | |
| category: "Party", | |
| location: "Santa Monica", | |
| date: "Nov 22, 2023", | |
| description: "Epic beach party with fire dancers and electronic beats at sunset.", | |
| image: "http://static.photos/outdoor/640x360/202", | |
| price: "$30.00" | |
| }, | |
| { | |
| title: "Rooftop VIP Night", | |
| category: "Party", | |
| location: "New York", | |
| date: "Dec 1, 2023", | |
| description: "Exclusive rooftop party with skyline views and premium cocktails.", | |
| image: "http://static.photos/cityscape/640x360/203", | |
| price: "$50.00" | |
| } | |
| ]; | |
| const workshopEvents = [ | |
| { | |
| title: "Pottery Workshop", | |
| category: "Workshop", | |
| location: "Portland", | |
| date: "Nov 19, 2023", | |
| description: "Get your hands dirty and create beautiful ceramic pieces with expert guidance.", | |
| image: "http://static.photos/studio/640x360/301", | |
| price: "$40.00" | |
| }, | |
| { | |
| title: "Digital Photography Basics", | |
| category: "Workshop", | |
| location: "Seattle", | |
| date: "Nov 28, 2023", | |
| description: "Learn the fundamentals of photography and master your camera settings.", | |
| image: "http://static.photos/technology/640x360/302", | |
| price: "$55.00" | |
| }, | |
| { | |
| title: "Bread Making Class", | |
| category: "Workshop", | |
| location: "San Francisco", | |
| date: "Dec 5, 2023", | |
| description: "From sourdough to baguettes - master the art of artisan bread making.", | |
| image: "http://static.photos/food/640x360/303", | |
| price: "$35.00" | |
| } | |
| ]; | |
| const sportEvents = [ | |
| { | |
| title: "Sunrise Yoga Session", | |
| category: "Sports", | |
| location: "San Diego", | |
| date: "Nov 21, 2023", | |
| description: "Start your day with energizing yoga by the beach as the sun rises.", | |
| image: "http://static.photos/outdoor/640x360/401", | |
| price: "$20.00" | |
| }, | |
| { | |
| title: "Group Hiking Adventure", | |
| category: "Sports", | |
| location: "Denver", | |
| date: "Nov 26, 2023", | |
| description: "Explore beautiful mountain trails with experienced guides and new friends.", | |
| image: "http://static.photos/nature/640x360/402", | |
| price: "$15.00" | |
| }, | |
| { | |
| title: "Beach Volleyball Tournament", | |
| category: "Sports", | |
| location: "Santa Barbara", | |
| date: "Dec 3, 2023", | |
| description: "Join the ultimate beach volleyball competition - teams and solo players welcome!", | |
| image: "http://static.photos/outdoor/640x360/403", | |
| price: "$10.00" | |
| } | |
| ]; | |
| const networkingEvents = [ | |
| { | |
| title: "Startup Mixer", | |
| category: "Networking", | |
| location: "Palo Alto", | |
| date: "Nov 23, 2023", | |
| description: "Connect with entrepreneurs, investors, and tech professionals over drinks.", | |
| image: "http://static.photos/office/640x360/501", | |
| price: "$0.00" | |
| }, | |
| { | |
| title: "Creative Professionals Meetup", | |
| category: "Networking", | |
| location: "Brooklyn", | |
| date: "Nov 30, 2023", | |
| description: "Artists, designers, and creatives unite for collaboration and inspiration.", | |
| image: "http://static.photos/studio/640x360/502", | |
| price: "$5.00" | |
| }, | |
| { | |
| title: "Women in Tech Summit", | |
| category: "Networking", | |
| location: "Austin", | |
| date: "Dec 8, 2023", | |
| description: "Empowering women in technology through networking and knowledge sharing.", | |
| image: "http://static.photos/technology/640x360/503", | |
| price: "$25.00" | |
| } | |
| ]; | |
| function createEventCard(event) { | |
| return ` | |
| <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="food-culture"> | |
| <div class="h-48 bg-indigo-100 relative"> | |
| <img src="${event.image}" alt="${event.title}" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 shadow flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-1 text-indigo-600"></i> | |
| <span class="text-sm font-medium">${event.location}</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">${event.title}</h3> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">${event.category}</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">${event.description}</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i> | |
| <span class="text-sm">${event.date}</span> | |
| </div> | |
| <button class="view-details-btn px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors" data-event-id="${event.id || event.title.toLowerCase().replace(/\s+/g, '-')}"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| function showFoodCultureEvents() { | |
| // Update title | |
| popularEventsTitle.textContent = "Food & Culture Events"; | |
| // Clear current grid | |
| eventsGrid.innerHTML = ''; | |
| // Add food culture events | |
| foodCultureEvents.forEach((event, index) => { | |
| const eventWithId = { ...event, id: `food-culture-${index + 1}` }; | |
| eventsGrid.innerHTML += createEventCard(eventWithId); | |
| }); | |
| // Re-attach event listeners to new buttons | |
| attachEventListeners(); | |
| } | |
| function showPartyEvents() { | |
| // Update title | |
| popularEventsTitle.textContent = "Party Events"; | |
| // Clear current grid | |
| eventsGrid.innerHTML = ''; | |
| // Add party events | |
| partyEvents.forEach((event, index) => { | |
| const eventWithId = { ...event, id: `party-${index + 1}` }; | |
| eventsGrid.innerHTML += createEventCard(eventWithId); | |
| }); | |
| // Re-attach event listeners to new buttons | |
| attachEventListeners(); | |
| } | |
| function showWorkshopEvents() { | |
| // Update title | |
| popularEventsTitle.textContent = "Workshop Events"; | |
| // Clear current grid | |
| eventsGrid.innerHTML = ''; | |
| // Add workshop events | |
| workshopEvents.forEach((event, index) => { | |
| const eventWithId = { ...event, id: `workshop-${index + 1}` }; | |
| eventsGrid.innerHTML += createEventCard(eventWithId); | |
| }); | |
| // Re-attach event listeners to new buttons | |
| attachEventListeners(); | |
| } | |
| function showSportEvents() { | |
| // Update title | |
| popularEventsTitle.textContent = "Sports Events"; | |
| // Clear current grid | |
| eventsGrid.innerHTML = ''; | |
| // Add sport events | |
| sportEvents.forEach((event, index) => { | |
| const eventWithId = { ...event, id: `sport-${index + 1}` }; | |
| eventsGrid.innerHTML += createEventCard(eventWithId); | |
| }); | |
| // Re-attach event listeners to new buttons | |
| attachEventListeners(); | |
| } | |
| function showNetworkingEvents() { | |
| // Update title | |
| popularEventsTitle.textContent = "Networking Events"; | |
| // Clear current grid | |
| eventsGrid.innerHTML = ''; | |
| // Add networking events | |
| networkingEvents.forEach((event, index) => { | |
| const eventWithId = { ...event, id: `networking-${index + 1}` }; | |
| eventsGrid.innerHTML += createEventCard(eventWithId); | |
| }); | |
| // Re-attach event listeners to new buttons | |
| attachEventListeners(); | |
| } | |
| function showAllEvents() { | |
| // Reset to original content | |
| popularEventsTitle.textContent = "Popular Events Near You"; | |
| location.reload(); | |
| } | |
| function attachEventListeners() { | |
| // Re-attach view details listeners | |
| document.querySelectorAll('.view-details-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const eventCard = btn.closest('.event-card'); | |
| // ... existing modal logic | |
| }); | |
| }); | |
| } | |
| categoryFilters.forEach(filter => { | |
| filter.addEventListener('click', () => { | |
| categoryFilters.forEach(f => f.classList.remove('active')); | |
| filter.classList.add('active'); | |
| const category = filter.dataset.category; | |
| if (category === 'food-culture') { | |
| showFoodCultureEvents(); | |
| } else if (category === 'party') { | |
| showPartyEvents(); | |
| } else if (category === 'workshop') { | |
| showWorkshopEvents(); | |
| } else if (category === 'sport') { | |
| showSportEvents(); | |
| } else if (category === 'networking') { | |
| showNetworkingEvents(); | |
| } else if (category === 'all') { | |
| showAllEvents(); | |
| } | |
| }); | |
| }); | |
| // Event details modal | |
| const eventModal = document.getElementById('event-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const viewDetailsBtns = document.querySelectorAll('.view-details-btn'); | |
| viewDetailsBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const eventCard = btn.closest('.event-card'); | |
| const eventTitle = eventCard.querySelector('h3').textContent; | |
| const eventCategory = eventCard.querySelector('span').textContent; | |
| const eventLocation = eventCard.querySelector('.text-sm.font-medium').textContent; | |
| const eventDate = eventCard.querySelector('.text-sm').textContent; | |
| const eventDescription = eventCard.querySelector('p').textContent; | |
| const eventImage = eventCard.querySelector('img').src; | |
| // Store event details in localStorage for event-details page | |
| const eventDetails = { | |
| title: eventTitle, | |
| category: eventCategory, | |
| location: eventLocation, | |
| date: eventDate, | |
| description: eventDescription, | |
| image: eventImage | |
| }; | |
| localStorage.setItem('selectedEvent', JSON.stringify(eventDetails)); | |
| // Redirect to event details page | |
| window.location.href = 'event-details.html'; | |
| }); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| eventModal.classList.add('hidden'); | |
| }); | |
| // Registration modal | |
| const registrationModal = document.getElementById('registration-modal'); | |
| const closeRegistrationModal = document.getElementById('close-registration-modal'); | |
| const registerBtn = document.getElementById('register-btn'); | |
| registerBtn.addEventListener('click', () => { | |
| const eventTitle = document.getElementById('modal-event-title').textContent; | |
| document.getElementById('register-event-title').textContent = eventTitle; | |
| eventModal.classList.add('hidden'); | |
| registrationModal.classList.remove('hidden'); | |
| }); | |
| closeRegistrationModal.addEventListener('click', () => { | |
| registrationModal.classList.add('hidden'); | |
| }); | |
| // Registration form submission | |
| const registrationForm = document.getElementById('registration-form'); | |
| const successModal = document.getElementById('success-modal'); | |
| const closeSuccessModal = document.getElementById('close-success-modal'); | |
| registrationForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const eventTitle = document.getElementById('register-event-title').textContent; | |
| document.getElementById('success-event-title').textContent = eventTitle; | |
| registrationModal.classList.add('hidden'); | |
| successModal.classList.remove('hidden'); | |
| }); | |
| closeSuccessModal.addEventListener('click', () => { | |
| successModal.classList.add('hidden'); | |
| }); | |
| // Close modals when clicking outside | |
| const modals = document.querySelectorAll('.modal'); | |
| modals.forEach(modal => { | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| modal.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |