Spaces:

SameerArz
/

undefined

Running

App Files Files Community

SameerArz commited on Oct 2, 2025

Commit

8b095fa

verified ·

1 Parent(s): b92cd10

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

Browse files

Files changed (2) hide show

event-details.html +167 -0
index.html +47 -49

event-details.html ADDED Viewed

	@@ -0,0 +1,167 @@

+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Event Details - SparkMeet</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
+        }
+        .attendee-avatar {
+            transition: transform 0.2s ease;
+        }
+        .attendee-avatar:hover {
+            transform: scale(1.1);
+        }
+        .dress-code-item {
+            transition: all 0.3s ease;
+        }
+        .dress-code-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm sticky top-0 z-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="flex justify-between items-center py-4">
+                <a href="index.html" class="flex items-center space-x-2">
+                    <span class="text-2xl font-bold text-indigo-600">SparkMeet</span>
+                </a>
+                <div class="flex items-center space-x-4">
+                    <a href="index.html" class="text-gray-600 hover:text-indigo-600 font-medium flex items-center">
+                        <i data-feather="home" class="mr-2"></i> Events
+                    </a>
+                    <a href="dashboard.html" class="text-gray-600 hover:text-indigo-600 font-medium flex items-center">
+                        <i data-feather="user" class="mr-2"></i> Dashboard
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Event Header -->
+    <div class="relative h-96 overflow-hidden">
+        <img id="event-image" src="" alt="Event" class="w-full h-full object-cover">
+        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
+        <div class="absolute bottom-8 left-8 right-8 text-white">
+            <div class="flex items-center space-x-2 mb-2">
+                <span id="event-category" class="px-3 py-1 bg-white/20 backdrop-blur rounded-full text-sm"></span>
+                <span class="px-3 py-1 bg-white/20 backdrop-blur rounded-full text-sm flex items-center">
+                    <i data-feather="users" class="w-4 h-4 mr-1"></i>
+                    <span id="attendee-count">127</span> attending
+                </span>
+            </div>
+            <h1 id="event-title" class="text-4xl font-bold mb-2"></h1>
+            <div class="flex items-center space-x-4 text-sm">
+                <span class="flex items-center">
+                    <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
+                    <span id="event-location"></span>
+                </span>
+                <span class="flex items-center">
+                    <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
+                    <span id="event-date"></span>
+                </span>
+                <span class="flex items-center">
+                    <i data-feather="clock" class="w-4 h-4 mr-1"></i>
+                    7:00 PM - 11:00 PM
+                </span>
+            </div>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div class="max-w-4xl mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Column -->
+            <div class="lg:col-span-2 space-y-8">
+                <!-- About Section -->
+                <div class="bg-white rounded-xl shadow-sm p-6">
+                    <h2 class="text-2xl font-bold mb-4">About This Event</h2>
+                    <p id="event-description" class="text-gray-700 leading-relaxed"></p>
+                </div>
+                <!-- Dress Code Section -->
+                <div class="bg-white rounded-xl shadow-sm p-6">
+                    <h2 class="text-2xl font-bold mb-4">What to Wear 👗</h2>
+                    <div id="dress-code" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <!-- Dress code items will be dynamically added -->
+                    </div>
+                </div>
+                <!-- Interest Matching Section -->
+                <div class="bg-white rounded-xl shadow-sm p-6">
+                    <h2 class="text-2xl font-bold mb-4">Is This Event for You? 🤔</h2>
+                    <div class="space-y-4">
+                        <div class="flex items-start space-x-3">
+                            <div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+                                <i data-feather="check" class="w-4 h-4 text-green-600"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold">You'll love this if:</h3>
+                                <p class="text-gray-600">You enjoy meeting new people and trying new experiences</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+                                <i data-feather="star" class="w-4 h-4 text-blue-600"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold">Perfect for:</h3>
+                                <p class="text-gray-600">Making new friends, networking, or just having fun!</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+                                <i data-feather="heart" class="w-4 h-4 text-purple-600"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold">Why join:</h3>
+                                <p class="text-gray-600">Create memorable experiences and expand your social circle</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Location Section -->
+                <div class="bg-white rounded-xl shadow-sm p-6">
+                    <h2 class="text-2xl font-bold mb-4">Location 📍</h2>
+                    <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
+                        <div class="text-center">
+                            <i data-feather="map-pin" class="w-12 h-12 text-gray-400 mx-auto mb-2"></i>
+                            <p class="text-gray-600" id="event-location-full"></p>
+                            <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+                                Get Directions
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Right Column -->
+            <div class="space-y-6">
+                <!-- Attendees Section -->
+                <div class="bg-white rounded-xl shadow-sm p-6">
+                    <h3 class="text-lg font-bold mb-4">Who's Attending 🎉</h3>
+                    <div class="flex flex-wrap gap-2 mb-4" id="attendees-list">
+                        <!-- Attendee avatars will be dynamically added -->
+                    </div>
+                    <button class="w-full px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
+                        View All Attendees
+                    </button>
+                </div>
+                <!-- Event Organizer -->
+                <div class

index.html CHANGED Viewed

@@ -135,11 +135,11 @@
                             <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">
                             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">
@@ -161,11 +161,11 @@
                             <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">
                             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">
@@ -187,11 +187,11 @@
                             <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">
                             View Details
                         </button>
                     </div>
-                </div>
             </div>
         </div>
     </div>
@@ -572,14 +572,14 @@ function createEventCard(event) {
                         </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">
-                                View Details
-                            </button>
                         </div>
                     </div>
                 </div>
             `;
@@ -590,13 +590,12 @@ function createEventCard(event) {
             // Clear current grid
             eventsGrid.innerHTML = '';
             // Add food culture events
-            foodCultureEvents.forEach(event => {
-                eventsGrid.innerHTML += createEventCard(event);
             });
-            // Re-attach event listeners to new buttons
             attachEventListeners();
         }
@@ -606,13 +605,12 @@ function createEventCard(event) {
             // Clear current grid
             eventsGrid.innerHTML = '';
             // Add party events
-            partyEvents.forEach(event => {
-                eventsGrid.innerHTML += createEventCard(event);
             });
-            // Re-attach event listeners to new buttons
             attachEventListeners();
         }
@@ -622,13 +620,12 @@ function createEventCard(event) {
             // Clear current grid
             eventsGrid.innerHTML = '';
             // Add workshop events
-            workshopEvents.forEach(event => {
-                eventsGrid.innerHTML += createEventCard(event);
             });
-            // Re-attach event listeners to new buttons
             attachEventListeners();
         }
@@ -638,13 +635,12 @@ function createEventCard(event) {
             // Clear current grid
             eventsGrid.innerHTML = '';
             // Add sport events
-            sportEvents.forEach(event => {
-                eventsGrid.innerHTML += createEventCard(event);
             });
-            // Re-attach event listeners to new buttons
             attachEventListeners();
         }
@@ -654,13 +650,12 @@ function createEventCard(event) {
             // Clear current grid
             eventsGrid.innerHTML = '';
             // Add networking events
-            networkingEvents.forEach(event => {
-                eventsGrid.innerHTML += createEventCard(event);
             });
-            // Re-attach event listeners to new buttons
             attachEventListeners();
         }
 function showAllEvents() {
@@ -700,7 +695,7 @@ function showAllEvents() {
                 }
             });
         });
-// Event details modal
         const eventModal = document.getElementById('event-modal');
         const closeModal = document.getElementById('close-modal');
         const viewDetailsBtns = document.querySelectorAll('.view-details-btn');
@@ -715,18 +710,22 @@ function showAllEvents() {
                 const eventDescription = eventCard.querySelector('p').textContent;
                 const eventImage = eventCard.querySelector('img').src;
-                document.getElementById('modal-event-title').textContent = eventTitle;
-                document.getElementById('modal-event-category').textContent = eventCategory;
-                document.getElementById('modal-event-location').textContent = eventLocation;
-                document.getElementById('modal-event-date').textContent = eventDate;
-                document.getElementById('modal-event-description').textContent = eventDescription;
-                document.getElementById('modal-event-image').src = eventImage;
-                eventModal.classList.remove('hidden');
             });
         });
-        closeModal.addEventListener('click', () => {
             eventModal.classList.add('hidden');
         });
@@ -765,7 +764,6 @@ function showAllEvents() {
         closeSuccessModal.addEventListener('click', () => {
             successModal.classList.add('hidden');
         });
         // Close modals when clicking outside
         const modals = document.querySelectorAll('.modal');

                             <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">
                             <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">
                             <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>
                         </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>
             `;
             // 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();
         }
             // 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();
         }
             // 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();
         }
             // 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();
         }
             // 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() {
                 }
             });
         });
+        // Event details modal
         const eventModal = document.getElementById('event-modal');
         const closeModal = document.getElementById('close-modal');
         const viewDetailsBtns = document.querySelectorAll('.view-details-btn');
                 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');
         });
         closeSuccessModal.addEventListener('click', () => {
             successModal.classList.add('hidden');
         });
         // Close modals when clicking outside
         const modals = document.querySelectorAll('.modal');