|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SparkMeet - Interactive Dating Events</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #ff6b6b; |
|
|
--primary-light: #ff8e8e; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #fef6f6; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); |
|
|
} |
|
|
|
|
|
.spark-animation { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.spark-animation:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.spark-animation::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); |
|
|
transform: scale(0); |
|
|
opacity: 0; |
|
|
transition: transform 0.5s, opacity 0.5s; |
|
|
} |
|
|
|
|
|
.spark-animation:hover::after { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.countdown { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.question-card { |
|
|
transform-style: preserve-3d; |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.question-card.flipped { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
.card-face { |
|
|
backface-visibility: hidden; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.card-back { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
.match-reveal { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0,0,0,0.5); |
|
|
z-index: 1000; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background: white; |
|
|
margin: 5% auto; |
|
|
width: 90%; |
|
|
max-width: 600px; |
|
|
border-radius: 20px; |
|
|
overflow: hidden; |
|
|
animation: modalFadeIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes modalFadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
|
|
|
.event-drawer { |
|
|
position: fixed; |
|
|
bottom: -100%; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 85vh; |
|
|
background: white; |
|
|
border-radius: 20px 20px 0 0; |
|
|
box-shadow: 0 -5px 20px rgba(0,0,0,0.1); |
|
|
transition: transform 0.3s ease-out; |
|
|
z-index: 900; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.event-drawer.open { |
|
|
transform: translateY(-100%); |
|
|
} |
|
|
|
|
|
.drawer-handle { |
|
|
width: 50px; |
|
|
height: 5px; |
|
|
background: #ddd; |
|
|
border-radius: 5px; |
|
|
margin: 15px auto; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.toast { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background: #333; |
|
|
color: white; |
|
|
padding: 12px 24px; |
|
|
border-radius: 30px; |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
|
|
z-index: 1100; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.toast.show { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.confetti { |
|
|
position: fixed; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #f00; |
|
|
opacity: 0; |
|
|
z-index: 999; |
|
|
animation: confettiFall 3s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes confettiFall { |
|
|
0% { |
|
|
transform: translateY(-100vh) rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(100vh) rotate(360deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.progress-step { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
border-radius: 50%; |
|
|
background: #eee; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: #999; |
|
|
font-weight: bold; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.progress-step.active { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.progress-step.completed { |
|
|
background: var(--primary-light); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.progress-step::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 100%; |
|
|
width: 50px; |
|
|
height: 2px; |
|
|
background: #eee; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.progress-step.completed::after { |
|
|
background: var(--primary-light); |
|
|
} |
|
|
|
|
|
.progress-step:last-child::after { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
padding: 4px 8px; |
|
|
border-radius: 20px; |
|
|
font-size: 12px; |
|
|
font-weight: 600; |
|
|
margin-right: 8px; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.badge i { |
|
|
margin-right: 4px; |
|
|
} |
|
|
|
|
|
|
|
|
.tabs-container { |
|
|
overflow-x: auto; |
|
|
white-space: nowrap; |
|
|
scrollbar-width: none; |
|
|
-ms-overflow-style: none; |
|
|
} |
|
|
|
|
|
.tabs-container::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.tab { |
|
|
display: inline-block; |
|
|
padding: 10px 20px; |
|
|
border-radius: 20px; |
|
|
margin-right: 8px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tab.active { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.comment { |
|
|
display: flex; |
|
|
margin-bottom: 16px; |
|
|
animation: commentFadeIn 0.3s ease; |
|
|
} |
|
|
|
|
|
@keyframes commentFadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.comment-avatar { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: #eee; |
|
|
margin-right: 12px; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.search-container { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.search-results { |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
background: white; |
|
|
border-radius: 0 0 10px 10px; |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
z-index: 100; |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.search-item { |
|
|
padding: 12px 16px; |
|
|
cursor: pointer; |
|
|
transition: background 0.2s ease; |
|
|
} |
|
|
|
|
|
.search-item:hover { |
|
|
background: #f5f5f5; |
|
|
} |
|
|
|
|
|
|
|
|
.bottom-sheet { |
|
|
position: fixed; |
|
|
bottom: -100%; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
background: white; |
|
|
border-radius: 20px 20px 0 0; |
|
|
box-shadow: 0 -5px 20px rgba(0,0,0,0.1); |
|
|
transition: transform 0.3s ease-out; |
|
|
z-index: 900; |
|
|
padding: 20px; |
|
|
max-height: 80vh; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.bottom-sheet.open { |
|
|
transform: translateY(-100%); |
|
|
} |
|
|
|
|
|
|
|
|
.spinner { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border: 4px solid rgba(0,0,0,0.1); |
|
|
border-radius: 50%; |
|
|
border-top-color: var(--primary); |
|
|
animation: spin 1s ease-in-out infinite; |
|
|
margin: 20px auto; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<nav class="bg-white shadow-sm py-4 px-6 flex justify-between items-center sticky top-0 z-50"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-fire text-2xl text-red-400 mr-2"></i> |
|
|
<span class="text-xl font-bold text-red-500">SparkMeet</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-600 hover:text-red-500 relative" id="notifications-btn"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-red-300 flex items-center justify-center text-white font-bold cursor-pointer" id="profile-btn"> |
|
|
<span>JS</span> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8 pb-20"> |
|
|
|
|
|
<div class="search-container relative mb-8"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search events, interests, locations..." |
|
|
class="w-full bg-white rounded-full py-3 px-6 pr-12 shadow-sm focus:outline-none focus:ring-2 focus:ring-red-300" |
|
|
id="search-input"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-red-500"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="search-results" id="search-results"> |
|
|
<div class="search-item"> |
|
|
<div class="font-medium">Beach Yoga</div> |
|
|
<div class="text-sm text-gray-500">Tomorrow, 8:00 AM • Santa Monica</div> |
|
|
</div> |
|
|
<div class="search-item"> |
|
|
<div class="font-medium">Hiking Club</div> |
|
|
<div class="text-sm text-gray-500">This weekend • Runyon Canyon</div> |
|
|
</div> |
|
|
<div class="search-item"> |
|
|
<div class="font-medium">Vegan Cooking</div> |
|
|
<div class="text-sm text-gray-500">Next Wednesday • Downtown</div> |
|
|
</div> |
|
|
<div class="search-item"> |
|
|
<div class="font-medium">Book Lovers Meetup</div> |
|
|
<div class="text-sm text-gray-500">Monthly event • The Last Bookstore</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tabs-container mb-6"> |
|
|
<div class="tab active" data-tab="all">All Events</div> |
|
|
<div class="tab" data-tab="today">Today</div> |
|
|
<div class="tab" data-tab="weekend">This Weekend</div> |
|
|
<div class="tab" data-tab="sports">Sports</div> |
|
|
<div class="tab" data-tab="food">Food & Drink</div> |
|
|
<div class="tab" data-tab="arts">Arts & Culture</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="gradient-bg rounded-3xl p-8 text-white mb-10 shadow-lg relative overflow-hidden"> |
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full transform translate-x-16 -translate-y-16"></div> |
|
|
<div class="absolute bottom-0 left-0 w-40 h-40 bg-white opacity-10 rounded-full transform -translate-x-20 translate-y-20"></div> |
|
|
<div class="relative z-10 max-w-md"> |
|
|
<h1 class="text-3xl font-bold mb-4">Find your spark at real-life events</h1> |
|
|
<p class="mb-6">No swiping. No games. Just meaningful connections through shared experiences.</p> |
|
|
<button class="bg-white text-red-500 font-bold py-3 px-6 rounded-full shadow-md hover:bg-gray-100 transition duration-300" id="create-event-btn"> |
|
|
Create an Event |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Upcoming Events</h2> |
|
|
<button class="text-red-500 font-medium flex items-center"> |
|
|
See all |
|
|
<i class="fas fa-chevron-right ml-1 text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="events-container"> |
|
|
|
|
|
<div class="event-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300 spark-animation cursor-pointer" data-event-id="1"> |
|
|
<div class="h-40 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative"> |
|
|
<i class="fas fa-running text-5xl text-white opacity-80"></i> |
|
|
<div class="absolute top-3 left-3 flex"> |
|
|
<span class="badge bg-white text-blue-500"> |
|
|
<i class="fas fa-running"></i> Sports |
|
|
</span> |
|
|
</div> |
|
|
<div class="absolute bottom-3 right-3 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full"> |
|
|
<i class="fas fa-users mr-1"></i> 12/15 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg text-gray-800">Sunrise Run Club</h3> |
|
|
<span class="bg-red-100 text-red-600 text-xs font-bold px-2 py-1 rounded-full">3 spots left</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-4">Join fellow runners for a 5k along the beach at sunrise.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-gray-500 text-sm"> |
|
|
<i class="fas fa-calendar-alt mr-1"></i> |
|
|
<span>Jun 15, 7:00 AM</span> |
|
|
</div> |
|
|
<button class="bg-red-500 text-white text-sm py-1 px-3 rounded-full hover:bg-red-600 transition duration-300 join-event-btn"> |
|
|
RSVP |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="event-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300 spark-animation cursor-pointer" data-event-id="2"> |
|
|
<div class="h-40 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative"> |
|
|
<i class="fas fa-utensils text-5xl text-white opacity-80"></i> |
|
|
<div class="absolute top-3 left-3 flex"> |
|
|
<span class="badge bg-white text-green-500"> |
|
|
<i class="fas fa-utensils"></i> Food |
|
|
</span> |
|
|
</div> |
|
|
<div class="absolute bottom-3 right-3 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full"> |
|
|
<i class="fas fa-users mr-1"></i> 8/12 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg text-gray-800">Vegan Cooking Class</h3> |
|
|
<span class="bg-green-100 text-green-600 text-xs font-bold px-2 py-1 rounded-full">New</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-4">Learn to cook delicious plant-based meals together.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-gray-500 text-sm"> |
|
|
<i class="fas fa-calendar-alt mr-1"></i> |
|
|
<span>Jun 18, 6:30 PM</span> |
|
|
</div> |
|
|
<button class="bg-red-500 text-white text-sm py-1 px-3 rounded-full hover:bg-red-600 transition duration-300 join-event-btn"> |
|
|
RSVP |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="event-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300 spark-animation cursor-pointer" data-event-id="3"> |
|
|
<div class="h-40 bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center relative"> |
|
|
<i class="fas fa-book text-5xl text-white opacity-80"></i> |
|
|
<div class="absolute top-3 left-3 flex"> |
|
|
<span class="badge bg-white text-yellow-500"> |
|
|
<i class="fas fa-book"></i> Arts |
|
|
</span> |
|
|
</div> |
|
|
<div class="absolute bottom-3 right-3 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full"> |
|
|
<i class="fas fa-users mr-1"></i> 15/25 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg text-gray-800">Book Lovers Meetup</h3> |
|
|
<span class="bg-blue-100 text-blue-600 text-xs font-bold px-2 py-1 rounded-full">10 spots left</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-4">Discuss this month's selected novel at the cozy downtown café.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-gray-500 text-sm"> |
|
|
<i class="fas fa-calendar-alt mr-1"></i> |
|
|
<span>Jun 22, 4:00 PM</span> |
|
|
</div> |
|
|
<button class="bg-red-500 text-white text-sm py-1 px-3 rounded-full hover:bg-red-600 transition duration-300 join-event-btn"> |
|
|
RSVP |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">How SparkMeet Works</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">1</div> |
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">Join an Event</h3> |
|
|
<p class="text-gray-600">Select from our curated events based on your interests and availability.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">2</div> |
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">Answer Questions</h3> |
|
|
<p class="text-gray-600">Complete our thoughtful questionnaire to help us understand you better.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-xl transition duration-300"> |
|
|
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">3</div> |
|
|
<h3 class="font-bold text-lg mb-2 text-gray-800">Get Matched</h3> |
|
|
<p class="text-gray-600">After the event, receive your AI-powered matches and connect meaningfully.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Sample Compatibility Questions</h2> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 max-w-md mx-auto"> |
|
|
<div class="question-card relative h-64 cursor-pointer" onclick="flipCard(this)"> |
|
|
<div class="card-face flex flex-col items-center justify-center p-6"> |
|
|
<i class="fas fa-question-circle text-5xl text-red-400 mb-4"></i> |
|
|
<p class="text-center text-gray-700 mb-4">Click to reveal a sample question</p> |
|
|
<button class="bg-red-500 text-white py-2 px-4 rounded-full text-sm">Tap to flip</button> |
|
|
</div> |
|
|
<div class="card-face card-back flex flex-col items-center justify-center p-6"> |
|
|
<h3 class="font-bold text-lg mb-4 text-center text-gray-800">What's your idea of a perfect Sunday?</h3> |
|
|
<div class="w-full space-y-2"> |
|
|
<button class="w-full bg-gray-100 hover:bg-red-50 text-gray-800 py-2 px-4 rounded-full text-sm text-left transition duration-300"> |
|
|
Sleeping in and a lazy brunch |
|
|
</button> |
|
|
<button class="w-full bg-gray-100 hover:bg-red-50 text-gray-800 py-2 px-4 rounded-full text-sm text-left transition duration-300"> |
|
|
An early hike followed by exploring new places |
|
|
</button> |
|
|
<button class="w-full bg-gray-100 hover:bg-red-50 text-gray-800 py-2 px-4 rounded-full text-sm text-left transition duration-300"> |
|
|
Catching up on work or personal projects |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Match Reveal Experience</h2> |
|
|
<div class="bg-white rounded-xl shadow-md p-8 max-w-md mx-auto text-center"> |
|
|
<div class="mb-6"> |
|
|
<i class="fas fa-heart text-5xl text-red-400 mb-4"></i> |
|
|
<h3 class="font-bold text-xl mb-2 text-gray-800">Your matches are being calculated!</h3> |
|
|
<p class="text-gray-600 mb-4">We're analyzing responses from the event to find your best connections.</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<p class="text-gray-500 mb-2">Matches will be revealed in:</p> |
|
|
<div class="countdown text-3xl font-bold text-red-500 mb-4">00:15:32</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-red-500 h-2.5 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="bg-red-500 text-white font-bold py-3 px-6 rounded-full shadow-md hover:bg-red-600 transition duration-300 match-reveal"> |
|
|
Reveal Matches Now |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Earn Badges</h2> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<p class="text-gray-600 mb-4">Complete challenges and earn badges to show off your SparkMeet journey!</p> |
|
|
<div class="flex flex-wrap"> |
|
|
<div class="badge bg-yellow-100 text-yellow-700"> |
|
|
<i class="fas fa-star"></i> First Event |
|
|
</div> |
|
|
<div class="badge bg-blue-100 text-blue-700"> |
|
|
<i class="fas fa-users"></i> Social Butterfly |
|
|
</div> |
|
|
<div class="badge bg-purple-100 text-purple-700"> |
|
|
<i class="fas fa-bolt"></i> Quick Responder |
|
|
</div> |
|
|
<div class="badge bg-green-100 text-green-700"> |
|
|
<i class="fas fa-heart"></i> Perfect Match |
|
|
</div> |
|
|
<div class="badge bg-red-100 text-red-700"> |
|
|
<i class="fas fa-fire"></i> Hot Streak |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-red-500 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Complete 3 more events to earn your next badge!</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-lg fixed bottom-0 w-full py-3 px-6 flex justify-around items-center z-50"> |
|
|
<button class="text-gray-500 hover:text-red-500 flex flex-col items-center"> |
|
|
<i class="fas fa-home text-xl mb-1"></i> |
|
|
<span class="text-xs">Home</span> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-red-500 flex flex-col items-center"> |
|
|
<i class="fas fa-calendar text-xl mb-1"></i> |
|
|
<span class="text-xs">Events</span> |
|
|
</button> |
|
|
<button class="text-red-500 flex flex-col items-center" id="floating-create-btn"> |
|
|
<div class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center text-white -mt-6 shadow-lg hover:shadow-xl transition duration-300"> |
|
|
<i class="fas fa-plus text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xs mt-1">Create</span> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-red-500 flex flex-col items-center"> |
|
|
<i class="fas fa-comments text-xl mb-1"></i> |
|
|
<span class="text-xs">Messages</span> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-red-500 flex flex-col items-center"> |
|
|
<i class="fas fa-user text-xl mb-1"></i> |
|
|
<span class="text-xs">Profile</span> |
|
|
</button> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="event-drawer" id="event-drawer"> |
|
|
<div class="drawer-handle"></div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold" id="drawer-event-title">Event Title</h2> |
|
|
<button class="text-gray-400 hover:text-gray-600" id="close-drawer-btn"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 rounded-xl mb-6 flex items-center justify-center relative"> |
|
|
<i class="fas fa-running text-6xl text-white opacity-80" id="drawer-event-icon"></i> |
|
|
<div class="absolute top-3 left-3 flex"> |
|
|
<span class="badge bg-white text-blue-500" id="drawer-event-category"> |
|
|
<i class="fas fa-running"></i> Sports |
|
|
</span> |
|
|
</div> |
|
|
<div class="absolute bottom-3 right-3 bg-black bg-opacity-50 text-white text-sm px-3 py-1 rounded-full"> |
|
|
<i class="fas fa-users mr-1"></i> <span id="drawer-event-attendees">12/15</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center text-gray-500 text-sm mb-4"> |
|
|
<i class="fas fa-calendar-alt mr-2"></i> |
|
|
<span id="drawer-event-date">Jun 15, 7:00 AM</span> |
|
|
<i class="fas fa-map-marker-alt ml-4 mr-2"></i> |
|
|
<span id="drawer-event-location">Santa Monica Beach</span> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-600 mb-6" id="drawer-event-description"> |
|
|
Join fellow runners for a 5k along the beach at sunrise. All fitness levels welcome! |
|
|
We'll meet at the lifeguard tower #26 and run along the bike path. Coffee and snacks |
|
|
provided afterwards at a nearby café. |
|
|
</p> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-bold text-lg mb-3 text-gray-800">Attendees</h3> |
|
|
<div class="flex flex-wrap"> |
|
|
<div class="w-10 h-10 rounded-full bg-red-300 flex items-center justify-center text-white font-bold mr-2 mb-2">JS</div> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-300 flex items-center justify-center text-white font-bold mr-2 mb-2">AM</div> |
|
|
<div class="w-10 h-10 rounded-full bg-green-300 flex items-center justify-center text-white font-bold mr-2 mb-2">TK</div> |
|
|
<div class="w-10 h-10 rounded-full bg-yellow-300 flex items-center justify-center text-white font-bold mr-2 mb-2">LP</div> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-300 flex items-center justify-center text-white font-bold mr-2 mb-2">+8</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-bold text-lg mb-3 text-gray-800">Discussion</h3> |
|
|
<div class="bg-gray-50 rounded-lg p-4 max-h-40 overflow-y-auto"> |
|
|
<div class="comment"> |
|
|
<div class="comment-avatar bg-blue-200 flex items-center justify-center">AM</div> |
|
|
<div> |
|
|
<div class="font-medium text-sm">Alex M.</div> |
|
|
<p class="text-gray-600 text-sm">Excited for this! What's the pace usually like?</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="comment"> |
|
|
<div class="comment-avatar bg-red-200 flex items-center justify-center">JS</div> |
|
|
<div> |
|
|
<div class="font-medium text-sm">Jamie S.</div> |
|
|
<p class="text-gray-600 text-sm">It's pretty relaxed, we usually have a few groups at different paces.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex mt-3"> |
|
|
<input type="text" placeholder="Add a comment..." class="flex-grow bg-white border border-gray-300 rounded-l-full py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300"> |
|
|
<button class="bg-red-500 text-white px-4 rounded-r-full"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full gradient-bg text-white font-bold py-3 px-6 rounded-full shadow-md hover:shadow-lg transition duration-300" id="drawer-rsvp-btn"> |
|
|
RSVP to Event |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal" id="create-event-modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="gradient-bg p-6 text-white"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 class="text-xl font-bold">Create New Event</h2> |
|
|
<button class="text-white hover:text-gray-200" id="close-modal-btn"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between mt-6 mb-4"> |
|
|
<div class="progress-step active">1</div> |
|
|
<div class="progress-step">2</div> |
|
|
<div class="progress-step">3</div> |
|
|
<div class="progress-step">4</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-6"> |
|
|
<div id="step-1" class="step-content"> |
|
|
<h3 class="font-bold text-lg mb-4 text-gray-800">Event Basics</h3> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="event-title">Event Title</label> |
|
|
<input type="text" id="event-title" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="e.g. Sunrise Beach Run"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="event-category">Category</label> |
|
|
<select id="event-category" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300"> |
|
|
<option value="">Select a category</option> |
|
|
<option value="sports">Sports & Fitness</option> |
|
|
<option value="food">Food & Drink</option> |
|
|
<option value="arts">Arts & Culture</option> |
|
|
<option value="outdoors">Outdoors</option> |
|
|
<option value="learning">Learning</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="event-description">Description</label> |
|
|
<textarea id="event-description" rows="3" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="Tell people what your event is about..."></textarea> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<button class="gradient-bg text-white font-medium py-2 px-6 rounded-full shadow-md hover:shadow-lg transition duration-300 next-step-btn"> |
|
|
Next <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="step-2" class="step-content hidden"> |
|
|
<h3 class="font-bold text-lg mb-4 text-gray-800">Event Details</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="event-date">Date</label> |
|
|
<input type="date" id="event-date" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="event-time">Time</label> |
|
|
<input type="time" id="event-time" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="event-location">Location</label> |
|
|
<input type="text" id="event-location" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="Where will your event take place?"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="event-capacity">Max Attendees</label> |
|
|
<input type="number" id="event-capacity" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="15" min="2"> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<button class="text-gray-600 font-medium py-2 px-6 rounded-full border border-gray-300 hover:bg-gray-50 transition duration-300 prev-step-btn"> |
|
|
<i class="fas fa-arrow-left mr-1"></i> Back |
|
|
</button> |
|
|
<button class="gradient-bg text-white font-medium py-2 px-6 rounded-full shadow-md hover:shadow-lg transition duration-300 next-step-btn"> |
|
|
Next <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="step-3" class="step-content hidden"> |
|
|
<h3 class="font-bold text-lg mb-4 text-gray-800">Compatibility Questions</h3> |
|
|
<p class="text-gray-600 mb-4">Add questions to help match attendees based on shared values and interests.</p> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-4"> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="question-1">Question 1</label> |
|
|
<input type="text" id="question-1" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="What's your ideal weekend activity?"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2"> |
|
|
<input type="text" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="Option 1"> |
|
|
<input type="text" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="Option 2"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-2"> |
|
|
<input type="text" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="Option 3"> |
|
|
<input type="text" class="w-full bg-white border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-1 focus:ring-red-300" placeholder="Option 4"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="text-red-500 font-medium py-2 px-4 rounded-full border border-red-300 hover:bg-red-50 transition duration-300 mb-4"> |
|
|
<i class="fas fa-plus mr-1"></i> Add Another Question |
|
|
</button> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button class="text-gray-600 font-medium py-2 px-6 rounded-full border border-gray-300 hover:bg-gray-50 transition duration-300 prev-step-btn"> |
|
|
<i class="fas fa-arrow-left mr-1"></i> Back |
|
|
</button> |
|
|
<button class="gradient-bg text-white font-medium py-2 px-6 rounded-full shadow-md hover:shadow-lg transition duration-300 next-step-btn"> |
|
|
Next <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="step-4" class="step-content hidden"> |
|
|
<h3 class="font-bold text-lg mb-4 text-gray-800">Preview & Publish</h3> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6"> |
|
|
<div class="h-32 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center"> |
|
|
<i class="fas fa-image text-4xl text-white opacity-50"></i> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h4 class="font-bold text-lg mb-1" id="preview-event-title">Sunrise Beach Run</h4> |
|
|
<div class="flex items-center text-gray-500 text-sm mb-2"> |
|
|
<i class="fas fa-calendar-alt mr-1"></i> |
|
|
<span id="preview-event-date">Jun 15, 7:00 AM</span> |
|
|
<i class="fas fa-map-marker-alt ml-3 mr-1"></i> |
|
|
<span id="preview-event-location">Santa Monica Beach</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm" id="preview-event-description">Join fellow runners for a 5k along the beach at sunrise. All fitness levels welcome!</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center mb-4"> |
|
|
<input type="checkbox" id="terms-check" class="mr-2"> |
|
|
<label for="terms-check" class="text-sm text-gray-600">I agree to the <a href="#" class="text-red-500 hover:underline">Terms of Service</a> and <a href="#" class="text-red-500 hover:underline">Community Guidelines</a></label> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button class="text-gray-600 font-medium py-2 px-6 rounded-full border border-gray-300 hover:bg-gray-50 transition duration-300 prev-step-btn"> |
|
|
<i class="fas fa-arrow-left mr-1"></i> Back |
|
|
</button> |
|
|
<button class="gradient-bg text-white font-medium py-2 px-6 rounded-full shadow-md hover:shadow-lg transition duration-300" id="publish-event-btn"> |
|
|
<i class="fas fa-check mr-1"></i> Publish Event |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="toast" id="toast"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span id="toast-message">Event created successfully!</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-1000 hidden" id="loading-overlay"> |
|
|
<div class="bg-white p-8 rounded-xl text-center max-w-sm"> |
|
|
<div class="spinner"></div> |
|
|
<h3 class="text-xl font-bold mt-4 mb-2" id="loading-title">Creating your event</h3> |
|
|
<p class="text-gray-600" id="loading-message">This may take a few seconds...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function flipCard(card) { |
|
|
card.classList.toggle('flipped'); |
|
|
} |
|
|
|
|
|
|
|
|
function updateCountdown() { |
|
|
const countdownElement = document.querySelector('.countdown'); |
|
|
let time = countdownElement.textContent; |
|
|
let [hours, minutes, seconds] = time.split(':').map(Number); |
|
|
|
|
|
if (seconds > 0) { |
|
|
seconds--; |
|
|
} else { |
|
|
if (minutes > 0) { |
|
|
minutes--; |
|
|
seconds = 59; |
|
|
} else { |
|
|
if (hours > 0) { |
|
|
hours--; |
|
|
minutes = 59; |
|
|
seconds = 59; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const formattedTime = |
|
|
`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
|
|
|
|
|
countdownElement.textContent = formattedTime; |
|
|
|
|
|
|
|
|
const totalSeconds = hours * 3600 + minutes * 60 + seconds; |
|
|
const initialTotal = 15 * 60 + 32; |
|
|
const progressPercent = ((initialTotal - totalSeconds) / initialTotal) * 100; |
|
|
document.querySelector('.bg-red-500').style.width = `${progressPercent}%`; |
|
|
|
|
|
|
|
|
if (hours === 0 && minutes === 0 && seconds === 0) { |
|
|
clearInterval(countdownInterval); |
|
|
document.querySelector('.match-reveal').textContent = 'View Your Matches'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const countdownInterval = setInterval(updateCountdown, 1000); |
|
|
|
|
|
|
|
|
document.querySelector('.match-reveal').addEventListener('click', function() { |
|
|
createConfetti(); |
|
|
showToast('✨ Your matches are ready! ✨'); |
|
|
|
|
|
setTimeout(() => { |
|
|
alert('You have 3 great connections from the event:\n\n1. Alex (92% match)\n2. Jordan (88% match)\n3. Taylor (85% match)\n\nWould you like to start a group chat?'); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
const eventDrawer = document.getElementById('event-drawer'); |
|
|
const closeDrawerBtn = document.getElementById('close-drawer-btn'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.event-card').forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
const eventId = this.getAttribute('data-event-id'); |
|
|
loadEventDetails(eventId); |
|
|
eventDrawer.classList.add('open'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
closeDrawerBtn.addEventListener('click', function() { |
|
|
eventDrawer.classList.remove('open'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.drawer-handle').addEventListener('click', function() { |
|
|
eventDrawer.classList.remove('open'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
function loadEventDetails(eventId) { |
|
|
|
|
|
const events = { |
|
|
'1': { |
|
|
title: 'Sunrise Run Club', |
|
|
icon: 'fa-running', |
|
|
category: 'Sports', |
|
|
attendees: '12/15', |
|
|
date: 'Jun 15, 7:00 AM', |
|
|
location: 'Santa Monica Beach', |
|
|
description: 'Join fellow runners for a 5k along the beach at sunrise. All fitness levels welcome! We\'ll meet at the lifeguard tower #26 and run along the bike path. Coffee and snacks provided afterwards at a nearby café.' |
|
|
}, |
|
|
'2': { |
|
|
title: 'Vegan Cooking Class', |
|
|
icon: 'fa-utensils', |
|
|
category: 'Food', |
|
|
attendees: '8/12', |
|
|
date: 'Jun 18, 6:30 PM', |
|
|
location: 'Downtown Kitchen Studio', |
|
|
description: 'Learn to cook delicious plant-based meals together with chef Maria Rodriguez. We\'ll be making a 3-course meal including appetizers, main course, and dessert. All ingredients provided, just bring your appetite!' |
|
|
}, |
|
|
'3': { |
|
|
title: 'Book Lovers Meetup', |
|
|
icon: 'fa-book', |
|
|
category: 'Arts', |
|
|
attendees: '15/25', |
|
|
date: 'Jun 22, 4:00 PM', |
|
|
location: 'The Last Bookstore', |
|
|
description: 'Discuss this month\'s selected novel "The Midnight Library" by Matt Haig at the cozy downtown café. Come prepared to share your thoughts and meet fellow book enthusiasts. First drink included with RSVP.' |
|
|
} |
|
|
}; |
|
|
|
|
|
const event = events[eventId]; |
|
|
|
|
|
document.getElementById('drawer-event-title').textContent = event.title; |
|
|
document.getElementById('drawer-event-icon').className = `fas ${event.icon} text-6xl text-white opacity-80`; |
|
|
document.getElementById('drawer-event-category').innerHTML = `<i class="fas ${event.icon}"></i> ${event.category}`; |
|
|
document.getElementById('drawer-event-attendees').textContent = event.attendees; |
|
|
document.getElementById('drawer-event-date').textContent = event.date; |
|
|
document.getElementById('drawer-event-location').textContent = event.location; |
|
|
document.getElementById('drawer-event-description').textContent = event.description; |
|
|
|
|
|
|
|
|
const spotsLeft = parseInt(event.attendees.split('/')[1]) - parseInt(event.attendees.split('/')[0]); |
|
|
const rsvpBtn = document.getElementById('drawer-rsvp-btn'); |
|
|
|
|
|
if (spotsLeft > 0) { |
|
|
rsvpBtn.textContent = `RSVP to Event (${spotsLeft} spots left)`; |
|
|
rsvpBtn.classList.remove('bg-gray-400'); |
|
|
rsvpBtn.classList.add('gradient-bg'); |
|
|
} else { |
|
|
rsvpBtn.textContent = 'Event Full'; |
|
|
rsvpBtn.classList.remove('gradient-bg'); |
|
|
rsvpBtn.classList.add('bg-gray-400'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('drawer-rsvp-btn').addEventListener('click', function() { |
|
|
if (!this.classList.contains('bg-gray-400')) { |
|
|
showToast('🎉 You\'ve RSVPed to this event!'); |
|
|
setTimeout(() => { |
|
|
eventDrawer.classList.remove('open'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}, 1500); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.join-event-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
showToast('🎉 You\'ve RSVPed to this event!'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const createEventModal = document.getElementById('create-event-modal'); |
|
|
const closeModalBtn = document.getElementById('close-modal-btn'); |
|
|
const createEventBtn = document.getElementById('create-event-btn'); |
|
|
const floatingCreateBtn = document.getElementById('floating-create-btn'); |
|
|
|
|
|
|
|
|
createEventBtn.addEventListener('click', function() { |
|
|
createEventModal.style.display = 'block'; |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
floatingCreateBtn.addEventListener('click', function() { |
|
|
createEventModal.style.display = 'block'; |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
|
|
|
closeModalBtn.addEventListener('click', function() { |
|
|
createEventModal.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', function(e) { |
|
|
if (e.target === createEventModal) { |
|
|
createEventModal.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
let currentStep = 1; |
|
|
const stepContents = document.querySelectorAll('.step-content'); |
|
|
|
|
|
document.querySelectorAll('.next-step-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
if (validateStep(currentStep)) { |
|
|
stepContents[currentStep - 1].classList.add('hidden'); |
|
|
currentStep++; |
|
|
stepContents[currentStep - 1].classList.remove('hidden'); |
|
|
updateProgressSteps(); |
|
|
updatePreview(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.prev-step-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
stepContents[currentStep - 1].classList.add('hidden'); |
|
|
currentStep--; |
|
|
stepContents[currentStep - 1].classList.remove('hidden'); |
|
|
updateProgressSteps(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function validateStep(step) { |
|
|
if (step === 1) { |
|
|
const title = document.getElementById('event-title').value; |
|
|
const category = document.getElementById('event-category').value; |
|
|
const description = document.getElementById('event-description').value; |
|
|
|
|
|
if (!title || !category || !description) { |
|
|
showToast('Please fill in all fields'); |
|
|
return false; |
|
|
} |
|
|
} else if (step === 2) { |
|
|
const date = document.getElementById('event-date').value; |
|
|
const time = document.getElementById('event-time').value; |
|
|
const location = document.getElementById('event-location').value; |
|
|
const capacity = document.getElementById('event-capacity').value; |
|
|
|
|
|
if (!date || !time || !location || !capacity) { |
|
|
showToast('Please fill in all fields'); |
|
|
return false; |
|
|
} |
|
|
} |
|
|
|
|
|
return true; |
|
|
} |
|
|
|
|
|
function updateProgressSteps() { |
|
|
const steps = document.querySelectorAll('.progress-step'); |
|
|
|
|
|
steps.forEach((step, index) => { |
|
|
step.classList.remove('active', 'completed'); |
|
|
|
|
|
if (index + 1 < currentStep) { |
|
|
step.classList.add('completed'); |
|
|
} else if (index + 1 === currentStep) { |
|
|
step.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function updatePreview() { |
|
|
if (currentStep === 4) { |
|
|
document.getElementById('preview-event-title').textContent = document.getElementById('event-title').value; |
|
|
|
|
|
const date = new Date(document.getElementById('event-date').value); |
|
|
const time = document.getElementById('event-time').value; |
|
|
const options = { month: 'short', day: 'numeric' }; |
|
|
const formattedDate = date.toLocaleDateString('en-US', options) + ', ' + time; |
|
|
|
|
|
document.getElementById('preview-event-date').textContent = formattedDate; |
|
|
document.getElementById('preview-event-location').textContent = document.getElementById('event-location').value; |
|
|
document.getElementById('preview-event-description').textContent = document.getElementById('event-description').value; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('publish-event-btn').addEventListener('click', function() { |
|
|
if (!document.getElementById('terms-check').checked) { |
|
|
showToast('Please agree to the terms and conditions'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('loading-overlay').classList.remove('hidden'); |
|
|
document.getElementById('loading-title').textContent = 'Creating your event'; |
|
|
document.getElementById('loading-message').textContent = 'This may take a few seconds...'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('loading-overlay').classList.add('hidden'); |
|
|
createEventModal.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
|
|
|
createConfetti(); |
|
|
showToast('🎉 Event created successfully!'); |
|
|
|
|
|
|
|
|
currentStep = 1; |
|
|
stepContents.forEach((content, index) => { |
|
|
content.classList.add('hidden'); |
|
|
if (index === 0) content.classList.remove('hidden'); |
|
|
}); |
|
|
updateProgressSteps(); |
|
|
document.getElementById('event-title').value = ''; |
|
|
document.getElementById('event-category').value = ''; |
|
|
document.getElementById('event-description').value = ''; |
|
|
document.getElementById('event-date').value = ''; |
|
|
document.getElementById('event-time').value = ''; |
|
|
document.getElementById('event-location').value = ''; |
|
|
document.getElementById('event-capacity').value = ''; |
|
|
document.getElementById('terms-check').checked = false; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
function showToast(message) { |
|
|
const toast = document.getElementById('toast'); |
|
|
document.getElementById('toast-message').textContent = message; |
|
|
|
|
|
toast.classList.add('show'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.remove('show'); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
function createConfetti() { |
|
|
const colors = ['#ff6b6b', '#ff8e8e', '#ffb3b3', '#ffd8d8', '#6b6bff', '#8e8eff']; |
|
|
|
|
|
for (let i = 0; i < 100; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.left = Math.random() * 100 + 'vw'; |
|
|
confetti.style.width = Math.random() * 10 + 5 + 'px'; |
|
|
confetti.style.height = Math.random() * 10 + 5 + 'px'; |
|
|
confetti.style.animationDuration = Math.random() * 3 + 2 + 's'; |
|
|
document.body.appendChild(confetti); |
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.remove(); |
|
|
}, 3000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const searchInput = document.getElementById('search-input'); |
|
|
const searchResults = document.getElementById('search-results'); |
|
|
|
|
|
searchInput.addEventListener('focus', function() { |
|
|
searchResults.style.display = 'block'; |
|
|
}); |
|
|
|
|
|
searchInput.addEventListener('blur', function() { |
|
|
setTimeout(() => { |
|
|
searchResults.style.display = 'none'; |
|
|
}, 200); |
|
|
}); |
|
|
|
|
|
searchInput.addEventListener('input', function() { |
|
|
|
|
|
if (this.value.length > 0) { |
|
|
searchResults.style.display = 'block'; |
|
|
} else { |
|
|
searchResults.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab').forEach(tab => { |
|
|
tab.addEventListener('click', function() { |
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); |
|
|
this.classList.add('active'); |
|
|
|
|
|
|
|
|
const tabName = this.getAttribute('data-tab'); |
|
|
showToast(`Showing ${tabName.replace('-', ' ')} events`); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('profile-btn').addEventListener('click', function() { |
|
|
showToast('Profile page coming soon!'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('notifications-btn').addEventListener('click', function() { |
|
|
showToast('You have 3 new notifications'); |
|
|
}); |
|
|
</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=SameerArz/sparkmeet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
