Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HeartMatch - Find Your Perfect Match</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for elements that need more precise styling */ | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| } | |
| .profile-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .profile-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .message-bubble { | |
| max-width: 70%; | |
| word-wrap: break-word; | |
| } | |
| .swipe-card { | |
| transition: all 0.5s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .swipe-left { | |
| transform: translateX(-100px) rotate(-10deg); | |
| opacity: 0; | |
| } | |
| .swipe-right { | |
| transform: translateX(100px) rotate(10deg); | |
| opacity: 0; | |
| } | |
| .online-dot { | |
| width: 12px; | |
| height: 12px; | |
| background-color: #4ade80; | |
| border-radius: 50%; | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| border: 2px solid white; | |
| } | |
| .verified-badge { | |
| background-color: #3b82f6; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| margin-left: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-pink-600">HeartMatch</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium"><i class="fas fa-home mr-1"></i> Home</a> | |
| <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium"><i class="fas fa-search mr-1"></i> Discover</a> | |
| <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium"><i class="fas fa-comments mr-1"></i> Messages</a> | |
| <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium"><i class="fas fa-bell mr-1"></i> Notifications</a> | |
| <div class="relative"> | |
| <button id="profileDropdown" 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 object-cover"> | |
| <span class="text-gray-700 text-sm font-medium">Sarah</span> | |
| </button> | |
| <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-user mr-2"></i> Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-cog mr-2"></i> Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-heart mr-2"></i> Matches</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobileMenuButton" class="text-gray-700 hover:text-pink-600 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobileMenu" class="hidden md:hidden bg-white border-t"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-pink-600 hover:bg-gray-50"><i class="fas fa-home mr-2"></i> Home</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-pink-600 hover:bg-gray-50"><i class="fas fa-search mr-2"></i> Discover</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-pink-600 hover:bg-gray-50"><i class="fas fa-comments mr-2"></i> Messages</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-pink-600 hover:bg-gray-50"><i class="fas fa-bell mr-2"></i> Notifications</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-pink-600 hover:bg-gray-50"><i class="fas fa-user mr-2"></i> Profile</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-pink-600 hover:bg-gray-50"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white rounded-xl p-8 mb-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <h1 class="text-4xl font-bold mb-4">Find Your Perfect Match Today</h1> | |
| <p class="text-xl mb-6">Join thousands of singles who have found love through HeartMatch. Our advanced matching algorithm helps you connect with compatible partners.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-white text-pink-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">Sign Up Free</button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-pink-600 transition duration-300">Learn More</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Happy couple" class="absolute top-0 left-0 w-32 h-32 md:w-40 md:h-40 rounded-full object-cover border-4 border-white shadow-lg"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Happy couple" class="absolute bottom-0 right-0 w-32 h-32 md:w-40 md:h-40 rounded-full object-cover border-4 border-white shadow-lg"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="bg-white rounded-full p-4 shadow-lg"> | |
| <i class="fas fa-heart text-pink-600 text-3xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-3xl font-bold text-center mb-8">How HeartMatch Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user-plus text-pink-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Create Your Profile</h3> | |
| <p class="text-gray-600">Tell us about yourself and what you're looking for in a partner.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-heart text-pink-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Find Matches</h3> | |
| <p class="text-gray-600">Our algorithm suggests compatible partners based on your preferences.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-comments text-pink-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Start Chatting</h3> | |
| <p class="text-gray-600">Connect with your matches and start building meaningful relationships.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Discovery Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-3xl font-bold">Discover Potential Matches</h2> | |
| <button class="bg-pink-600 text-white px-4 py-2 rounded-full hover:bg-pink-700 transition duration-300"> | |
| <i class="fas fa-sliders-h mr-2"></i> Filters | |
| </button> | |
| </div> | |
| <!-- Swipe Cards --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Profile Card 1 --> | |
| <div class="profile-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile" class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 right-4"> | |
| <span class="bg-white text-pink-600 px-3 py-1 rounded-full text-xs font-bold">New</span> | |
| </div> | |
| <div class="absolute bottom-4 left-4"> | |
| <button class="bg-white text-pink-600 p-2 rounded-full shadow-md hover:bg-pink-600 hover:text-white transition duration-300 mr-2"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="bg-white text-gray-600 p-2 rounded-full shadow-md hover:bg-gray-600 hover:text-white transition duration-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-xl">Emily, 28</h3> | |
| <p class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> New York, NY</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="verified-badge"><i class="fas fa-check"></i></span> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-gray-700">Adventure seeker and coffee enthusiast. Looking for someone to share life's journey with.</p> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Travel</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Photography</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Yoga</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Card 2 --> | |
| <div class="profile-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-64 object-cover"> | |
| <div class="absolute bottom-4 left-4"> | |
| <button class="bg-white text-pink-600 p-2 rounded-full shadow-md hover:bg-pink-600 hover:text-white transition duration-300 mr-2"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="bg-white text-gray-600 p-2 rounded-full shadow-md hover:bg-gray-600 hover:text-white transition duration-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-xl">Michael, 31</h3> | |
| <p class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Los Angeles, CA</p> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-gray-700">Chef by profession, foodie by passion. Love hiking and exploring new restaurants.</p> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Cooking</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Hiking</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Wine</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Card 3 --> | |
| <div class="profile-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Profile" class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 right-4"> | |
| <span class="bg-white text-pink-600 px-3 py-1 rounded-full text-xs font-bold">Online</span> | |
| </div> | |
| <div class="absolute bottom-4 left-4"> | |
| <button class="bg-white text-pink-600 p-2 rounded-full shadow-md hover:bg-pink-600 hover:text-white transition duration-300 mr-2"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="bg-white text-gray-600 p-2 rounded-full shadow-md hover:bg-gray-600 hover:text-white transition duration-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-xl">Sophia, 26</h3> | |
| <p class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Chicago, IL</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="verified-badge"><i class="fas fa-check"></i></span> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-gray-700">Bookworm and amateur painter. Looking for someone who appreciates art and deep conversations.</p> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Reading</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Art</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Music</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-white border border-pink-600 text-pink-600 px-6 py-3 rounded-full font-bold hover:bg-pink-600 hover:text-white transition duration-300"> | |
| Load More Profiles | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Premium Membership Section --> | |
| <section class="gradient-bg text-white rounded-xl p-8 mb-12"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold mb-2">Upgrade to Premium</h2> | |
| <p class="text-xl">Unlock all features and increase your chances of finding love</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Basic Plan --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 border border-white border-opacity-20"> | |
| <h3 class="text-xl font-bold mb-2">Basic</h3> | |
| <p class="text-3xl font-bold mb-4">Free</p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Create a profile</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Browse profiles</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Send 5 likes per day</li> | |
| <li class="flex items-center text-gray-300"><i class="fas fa-times mr-2"></i> Unlimited messaging</li> | |
| <li class="flex items-center text-gray-300"><i class="fas fa-times mr-2"></i> See who liked you</li> | |
| <li class="flex items-center text-gray-300"><i class="fas fa-times mr-2"></i> Advanced search filters</li> | |
| </ul> | |
| <button class="w-full bg-white text-pink-600 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">Current Plan</button> | |
| </div> | |
| <!-- Premium Plan --> | |
| <div class="bg-white bg-opacity-20 rounded-xl p-6 border-2 border-white border-opacity-40 transform scale-105 relative"> | |
| <div class="absolute top-0 right-0 bg-yellow-400 text-gray-800 px-3 py-1 rounded-bl-lg rounded-tr-lg text-xs font-bold">POPULAR</div> | |
| <h3 class="text-xl font-bold mb-2">Premium</h3> | |
| <p class="text-3xl font-bold mb-4">$29.99<span class="text-lg">/month</span></p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Unlimited likes</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Unlimited messaging</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> See who liked you</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Advanced search filters</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Profile boost weekly</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Read receipts</li> | |
| </ul> | |
| <button class="w-full bg-white text-pink-600 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">Upgrade Now</button> | |
| </div> | |
| <!-- VIP Plan --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 border border-white border-opacity-20"> | |
| <h3 class="text-xl font-bold mb-2">VIP</h3> | |
| <p class="text-3xl font-bold mb-4">$59.99<span class="text-lg">/month</span></p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> All Premium features</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Priority customer support</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Profile highlighted</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Daily profile boost</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Exclusive events</li> | |
| <li class="flex items-center"><i class="fas fa-check mr-2"></i> Verified badge</li> | |
| </ul> | |
| <button class="w-full bg-white text-pink-600 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">Go VIP</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Success Stories</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Testimonial" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-bold">Jessica & Mark</h3> | |
| <p class="text-gray-600">Married for 2 years</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"We matched on HeartMatch and instantly connected over our love for hiking and travel. Six months later we were engaged, and now we're happily married with a baby on the way!"</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Testimonial" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-bold">David & Sarah</h3> | |
| <p class="text-gray-600">Together for 1 year</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"After years of unsuccessful dating, I almost gave up. Then I found Sarah on HeartMatch. Our first date lasted 8 hours and we've been inseparable ever since. Thank you HeartMatch!"</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl 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">HeartMatch</h3> | |
| <p class="text-gray-400">Helping singles find meaningful connections since 2015.</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest-p"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold 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">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Help</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Safety Tips</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Download Our App</h4> | |
| <div class="space-y-4"> | |
| <button class="flex items-center bg-black text-white px-4 py-2 rounded-lg w-full"> | |
| <i class="fab fa-apple text-2xl mr-2"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Download on the</div> | |
| <div class="font-bold">App Store</div> | |
| </div> | |
| </button> | |
| <button class="flex items-center bg-black text-white px-4 py-2 rounded-lg w-full"> | |
| <i class="fab fa-google-play text-xl mr-2"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Get it on</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 HeartMatch. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Chat Widget --> | |
| <div class="fixed bottom-6 right-6 z-50"> | |
| <button id="chatToggle" class="bg-pink-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center hover:bg-pink-700 transition duration-300"> | |
| <i class="fas fa-comment-dots text-xl"></i> | |
| <span class="absolute top-0 right-0 bg-white text-pink-600 text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </button> | |
| <div id="chatWindow" class="hidden absolute bottom-20 right-0 w-80 bg-white rounded-t-lg shadow-xl"> | |
| <div class="bg-pink-600 text-white px-4 py-3 rounded-t-lg flex justify-between items-center"> | |
| <h3 class="font-bold">Messages</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-white hover:text-gray-200"><i class="fas fa-cog"></i></button> | |
| <button id="closeChat" class="text-white hover:text-gray-200"><i class="fas fa-times"></i></button> | |
| </div> | |
| </div> | |
| <div class="h-96 overflow-y-auto"> | |
| <!-- Chat list --> | |
| <div class="border-b border-gray-200 px-4 py-3 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover"> | |
| <span class="online-dot"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-bold">Michael</h4> | |
| <span class="text-xs text-gray-500">2 min ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 truncate">Hey! How about that restaurant I mentioned?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 px-4 py-3 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-bold">Emily</h4> | |
| <span class="text-xs text-gray-500">1 hr ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 truncate">Thanks for the great date yesterday!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 px-4 py-3 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover"> | |
| <span class="online-dot"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-bold">Sophia</h4> | |
| <span class="text-xs text-gray-500">3 hrs ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 truncate">Are you free this weekend for the art exhibit?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-200"> | |
| <button class="w-full bg-pink-600 text-white py-2 rounded-lg font-bold hover:bg-pink-700 transition duration-300"> | |
| View All Messages | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 z-40"> | |
| <div class="flex justify-around py-3"> | |
| <a href="#" class="text-pink-600 flex flex-col items-center"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-search text-xl"></i> | |
| <span class="text-xs mt-1">Discover</span> | |
| </a> | |
| <a href="#" class="text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-comments text-xl"></i> | |
| <span class="text-xs mt-1">Messages</span> | |
| </a> | |
| <a href="#" class="text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-user text-xl"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Profile dropdown toggle | |
| const profileDropdown = document.getElementById('profileDropdown'); | |
| const dropdownMenu = document.getElementById('dropdownMenu'); | |
| profileDropdown.addEventListener('click', () => { | |
| dropdownMenu.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!profileDropdown.contains(e.target) && !dropdownMenu.contains(e.target)) { | |
| dropdownMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Chat widget toggle | |
| const chatToggle = document.getElementById('chatToggle'); | |
| const chatWindow = document.getElementById('chatWindow'); | |
| const closeChat = document.getElementById('closeChat'); | |
| chatToggle.addEventListener('click', () => { | |
| chatWindow.classList.toggle('hidden'); | |
| }); | |
| closeChat.addEventListener('click', () => { | |
| chatWindow.classList.add('hidden'); | |
| }); | |
| // Swipe card functionality | |
| const cards = document.querySelectorAll('.profile-card'); | |
| cards.forEach(card => { | |
| let startX, moveX; | |
| let isDragging = false; | |
| card.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| startX = e.clientX; | |
| card.style.cursor = 'grabbing'; | |
| card.style.transition = 'none'; | |
| }); | |
| card.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| moveX = e.clientX - startX; | |
| let rotate = moveX / 20; | |
| card.style.transform = `translateX(${moveX}px) rotate(${rotate}deg)`; | |
| }); | |
| card.addEventListener('mouseup', (e) => { | |
| if (!isDragging) return; | |
| isDragging = false; | |
| card.style.cursor = 'pointer'; | |
| card.style.transition = 'all 0.5s ease'; | |
| const threshold = 100; | |
| if (moveX > threshold) { | |
| // Swiped right (like) | |
| card.classList.add('swipe-right'); | |
| setTimeout(() => { | |
| card.style.display = 'none'; | |
| // In a real app, you would send this like to the server | |
| }, 500); | |
| } else if (moveX < -threshold) { | |
| // Swiped left (pass) | |
| card.classList.add('swipe-left'); | |
| setTimeout(() => { | |
| card.style.display = 'none'; | |
| // In a real app, you would send this pass to the server | |
| }, 500); | |
| } else { | |
| // Return to original position | |
| card.style.transform = 'translateX(0) rotate(0)'; | |
| } | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| if (isDragging) { | |
| isDragging = false; | |
| card.style.cursor = 'pointer'; | |
| card.style.transition = 'all 0.5s ease'; | |
| card.style.transform = 'translateX(0) rotate(0)'; | |
| } | |
| }); | |
| // Touch events for mobile | |
| card.addEventListener('touchstart', (e) => { | |
| isDragging = true; | |
| startX = e.touches[0].clientX; | |
| card.style.transition = 'none'; | |
| }); | |
| card.addEventListener('touchmove', (e) => { | |
| if (!isDragging) return; | |
| moveX = e.touches[0].clientX - startX; | |
| let rotate = moveX / 20; | |
| card.style.transform = `translateX(${moveX}px) rotate(${rotate}deg)`; | |
| }); | |
| card.addEventListener('touchend', () => { | |
| if (!isDragging) return; | |
| isDragging = false; | |
| card.style.transition = 'all 0.5s ease'; | |
| const threshold = 50; | |
| if (moveX > threshold) { | |
| // Swiped right (like) | |
| card.classList.add('swipe-right'); | |
| setTimeout(() => { | |
| card.style.display = 'none'; | |
| }, 500); | |
| } else if (moveX < -threshold) { | |
| // Swiped left (pass) | |
| card.classList.add('swipe-left'); | |
| setTimeout(() => { | |
| card.style.display = 'none'; | |
| }, 500); | |
| } else { | |
| // Return to original position | |
| card.style.transform = 'translateX(0) rotate(0)'; | |
| } | |
| }); | |
| }); | |
| // Like/Pass buttons functionality | |
| document.querySelectorAll('.profile-card button').forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const card = this.closest('.profile-card'); | |
| if (this.querySelector('.fa-heart')) { | |
| // Like button | |
| card.classList.add('swipe-right'); | |
| setTimeout(() => { | |
| card.style.display = 'none'; | |
| // In a real app, send like to server | |
| }, 500); | |
| } else if (this.querySelector('.fa-times')) { | |
| // Pass button | |
| card.classList.add('swipe-left'); | |
| setTimeout(() => { | |
| card.style.display = 'none'; | |
| // In a real app, send pass to server | |
| }, 500); | |
| } | |
| }); | |
| }); | |
| // Simulate loading more profiles | |
| document.querySelector('button:contains("Load More Profiles")').addEventListener('click', function() { | |
| // In a real app, this would fetch more profiles from the server | |
| alert('Loading more profiles...'); | |
| }); | |
| </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=Batfly/heartmatch" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |