Spaces:
Running
Running
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Spark - Dating App</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=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; } .profile-card { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); border-radius: 16px; overflow: hidden; transform-style: preserve-3d; } .swipe-left { transform: translateX(-100%) rotate(-15deg); opacity: 0; transition: all 0.5s ease; } .swipe-right { transform: translateX(100%) rotate(15deg); opacity: 0; transition: all 0.5s ease; } .prompt-answer { background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); } .like-button { box-shadow: 0 4px 15px rgba(251, 113, 133, 0.4); } .dislike-button { box-shadow: 0 4px 15px rgba(156, 163, 175, 0.4); } .comment-button { box-shadow: 0 4px 15px rgba(96, 165, 250, 0.4); } .tab-active { color: #ec4899; position: relative; } .tab-active:after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background-color: #ec4899; border-radius: 50%; } .profile-image { transition: transform 0.3s ease; } .profile-image:hover { transform: scale(1.03); } </style> </head> <body class="bg-gray-50 text-gray-800 max-w-md mx-auto relative overflow-x-hidden"> <!-- Header --> <header class="sticky top-0 z-10 bg-white bg-opacity-90 backdrop-blur-sm p-4 border-b border-gray-100 flex justify-between items-center"> <button class="text-gray-500"> <i class="fas fa-gear text-xl"></i> </button> <h1 class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-rose-500 bg-clip-text text-transparent">Spark</h1> <button class="text-gray-500"> <i class="fas fa-inbox text-xl"></i> </button> </header> <!-- Main Content --> <main class="pb-24"> <!-- Discovery Section --> <section id="discovery" class="px-4 pt-4"> <!-- Profile Card --> <div class="profile-card bg-white mb-4 relative"> <!-- Profile Image --> <div class="relative h-96 w-full overflow-hidden"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Profile" class="w-full h-full object-cover profile-image"> <div class="absolute bottom-4 left-4"> <span class="bg-white bg-opacity-90 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">27</span> </div> </div> <!-- Profile Info --> <div class="p-4"> <div class="flex justify-between items-start mb-2"> <h2 class="text-xl font-bold">Sarah, 27</h2> <div class="flex space-x-1"> <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">5'7"</span> <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">Artist</span> </div> </div> <p class="text-gray-600 mb-4">📍 3 miles away</p> <!-- Prompts --> <div class="space-y-3"> <div class="prompt-answer p-3"> <p class="text-sm text-gray-500 mb-1">My simple pleasures</p> <p class="font-medium">Morning coffee, museum visits, and spontaneous road trips</p> </div> <div class="prompt-answer p-3"> <p class="text-sm text-gray-500 mb-1">I'll pick the first date spot</p> <p class="font-medium">A cozy bookstore café with great ambiance</p> </div> <div class="prompt-answer p-3"> <p class="text-sm text-gray-500 mb-1">Together, we could</p> <p class="font-medium">Explore local art galleries and try every ice cream shop in town</p> </div> </div> </div> </div> <!-- Action Buttons --> <div class="flex justify-center items-center space-x-6 py-4"> <button class="dislike-button bg-white w-14 h-14 rounded-full flex items-center justify-center text-gray-500 text-2xl"> <i class="fas fa-times"></i> </button> <button class="comment-button bg-white w-14 h-14 rounded-full flex items-center justify-center text-blue-400 text-xl"> <i class="fas fa-comment"></i> </button> <button class="like-button bg-rose-400 w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl"> <i class="fas fa-heart"></i> </button> </div> </section> <!-- Matches Section (Hidden by default) --> <section id="matches" class="hidden px-4 pt-4"> <h2 class="text-xl font-bold mb-4">Your Matches</h2> <div class="grid grid-cols-2 gap-3"> <!-- Match Card --> <div class="bg-white rounded-xl overflow-hidden shadow-sm"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Match" class="w-full h-40 object-cover"> <div class="p-3"> <h3 class="font-bold">Michael, 29</h3> <p class="text-sm text-gray-500">You both like hiking</p> <button class="mt-2 w-full bg-pink-50 text-pink-500 py-1 rounded-lg text-sm font-medium"> Message </button> </div> </div> <!-- Match Card --> <div class="bg-white rounded-xl overflow-hidden shadow-sm"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Match" class="w-full h-40 object-cover"> <div class="p-3"> <h3 class="font-bold">Jessica, 26</h3> <p class="text-sm text-gray-500">You both answered the same prompt</p> <button class="mt-2 w-full bg-pink-50 text-pink-500 py-1 rounded-lg text-sm font-medium"> Message </button> </div> </div> </div> </section> <!-- Profile Section (Hidden by default) --> <section id="profile" class="hidden px-4 pt-4"> <div class="bg-white rounded-xl p-4 shadow-sm mb-4"> <div class="flex items-center space-x-4 mb-4"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Your Profile" class="w-16 h-16 rounded-full object-cover"> <div> <h2 class="font-bold text-lg">Alex, 28</h2> <p class="text-gray-500">Software Developer</p> </div> </div> <button class="w-full border border-gray-200 py-2 rounded-lg text-sm font-medium"> Edit Profile </button> </div> <div class="bg-white rounded-xl p-4 shadow-sm"> <h3 class="font-bold mb-3">My Prompts</h3> <div class="space-y-3"> <div class="border border-gray-100 rounded-lg p-3"> <p class="text-sm text-gray-500 mb-1">I geek out on</p> <p class="font-medium">Indie films and obscure music genres</p> </div> <div class="border border-gray-100 rounded-lg p-3"> <p class="text-sm text-gray-500 mb-1">I won't shut up about</p> <p class="font-medium">My dog and the latest tech gadgets</p> </div> <div class="border border-gray-100 rounded-lg p-3"> <p class="text-sm text-gray-500 mb-1">A life goal of mine</p> <p class="font-medium">To visit every national park in the US</p> </div> </div> <button class="mt-4 w-full border border-gray-200 py-2 rounded-lg text-sm font-medium"> Add New Prompt </button> </div> </section> </main> <!-- Bottom Navigation --> <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-3 z-10"> <button class="tab-button flex flex-col items-center text-gray-400 tab-active" data-tab="discovery"> <i class="fas fa-home text-xl"></i> <span class="text-xs mt-1">Discover</span> </button> <button class="tab-button flex flex-col items-center text-gray-400" data-tab="matches"> <i class="fas fa-comments text-xl"></i> <span class="text-xs mt-1">Matches</span> </button> <button class="tab-button flex flex-col items-center text-gray-400" data-tab="profile"> <i class="fas fa-user text-xl"></i> <span class="text-xs mt-1">Profile</span> </button> </nav> <!-- Comment Modal (Hidden by default) --> <div id="comment-modal" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center p-4"> <div class="bg-white rounded-xl w-full max-w-md p-4"> <div class="flex justify-between items-center mb-4"> <h3 class="font-bold">Add a comment</h3> <button id="close-comment-modal" class="text-gray-500"> <i class="fas fa-times"></i> </button> </div> <div class="flex items-start space-x-3 mb-4"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Profile" class="w-10 h-10 rounded-full object-cover"> <div class="flex-1"> <p class="font-medium">Sarah's prompt</p> <p class="text-sm text-gray-600">Together, we could explore local art galleries and try every ice cream shop in town</p> </div> </div> <textarea class="w-full border border-gray-200 rounded-lg p-3 mb-3" placeholder="Add a comment to your like..." rows="3"></textarea> <button class="w-full bg-rose-400 text-white py-2 rounded-lg font-medium"> Send Like </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Tab Navigation const tabButtons = document.querySelectorAll('.tab-button'); const sections = { discovery: document.getElementById('discovery'), matches: document.getElementById('matches'), profile: document.getElementById('profile') }; tabButtons.forEach(button => { button.addEventListener('click', function() { const tabId = this.getAttribute('data-tab'); // Update active tab tabButtons.forEach(btn => btn.classList.remove('tab-active', 'text-pink-500')); this.classList.add('tab-active', 'text-pink-500'); // Show corresponding section Object.values(sections).forEach(section => section.classList.add('hidden')); sections[tabId].classList.remove('hidden'); }); }); // Swipe Actions const profileCard = document.querySelector('.profile-card'); const dislikeButton = document.querySelector('.dislike-button'); const likeButton = document.querySelector('.like-button'); const commentButton = document.querySelector('.comment-button'); const commentModal = document.getElementById('comment-modal'); const closeCommentModal = document.getElementById('close-comment-modal'); dislikeButton.addEventListener('click', function() { profileCard.classList.add('swipe-left'); setTimeout(() => { // In a real app, you would fetch a new profile here profileCard.classList.remove('swipe-left'); // For demo purposes, we'll just reload the same card setTimeout(() => { profileCard.style.opacity = '1'; }, 100); }, 500); }); likeButton.addEventListener('click', function() { profileCard.classList.add('swipe-right'); setTimeout(() => { // In a real app, you would fetch a new profile here profileCard.classList.remove('swipe-right'); // For demo purposes, we'll just reload the same card setTimeout(() => { profileCard.style.opacity = '1'; }, 100); }, 500); }); commentButton.addEventListener('click', function() { commentModal.classList.remove('hidden'); }); closeCommentModal.addEventListener('click', function() { commentModal.classList.add('hidden'); }); // Close modal when clicking outside commentModal.addEventListener('click', function(e) { if (e.target === commentModal) { commentModal.classList.add('hidden'); } }); // Simple drag functionality for the profile card let isDragging = false; let startPos = 0; let currentTranslate = 0; profileCard.addEventListener('mousedown', startDrag); profileCard.addEventListener('touchstart', startDrag); profileCard.addEventListener('mousemove', drag); profileCard.addEventListener('touchmove', drag); profileCard.addEventListener('mouseup', endDrag); profileCard.addEventListener('mouseleave', endDrag); profileCard.addEventListener('touchend', endDrag); function startDrag(e) { isDragging = true; startPos = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX; profileCard.style.transition = 'none'; } function drag(e) { if (!isDragging) return; const currentPosition = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX; currentTranslate = currentPosition - startPos; profileCard.style.transform = `translateX(${currentTranslate}px) rotate(${currentTranslate / 20}deg)`; } function endDrag() { if (!isDragging) return; isDragging = false; profileCard.style.transition = 'transform 0.5s ease'; if (Math.abs(currentTranslate) > 100) { if (currentTranslate > 0) { profileCard.classList.add('swipe-right'); } else { profileCard.classList.add('swipe-left'); } setTimeout(() => { profileCard.classList.remove('swipe-right', 'swipe-left'); profileCard.style.transform = 'none'; // In a real app, fetch new profile here }, 500); } else { profileCard.style.transform = 'none'; } } }); </script> </body> </html> |