Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Unimate - Find Friends at Your University</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'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .chat-bubble { | |
| position: relative; | |
| background: #e2e8f0; | |
| border-radius: 1.5rem; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| max-width: 80%; | |
| } | |
| .chat-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 20%; | |
| width: 0; | |
| height: 0; | |
| border: 20px solid transparent; | |
| border-top-color: #e2e8f0; | |
| border-bottom: 0; | |
| border-left: 0; | |
| margin-left: -10px; | |
| margin-bottom: -20px; | |
| } | |
| .user-bubble { | |
| background: #6366f1; | |
| color: white; | |
| margin-left: auto; | |
| } | |
| .user-bubble:after { | |
| border-top-color: #6366f1; | |
| left: auto; | |
| right: 20%; | |
| } | |
| .profile-card { | |
| position: relative; | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| height: 500px; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .profile-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); | |
| padding: 2rem 1.5rem 1.5rem; | |
| color: white; | |
| } | |
| .swipe-buttons { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 1rem; | |
| gap: 1rem; | |
| } | |
| .swipe-button { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .swipe-button:hover { | |
| transform: scale(1.1); | |
| } | |
| .dislike-btn { | |
| background: white; | |
| color: #ef4444; | |
| } | |
| .like-btn { | |
| background: white; | |
| color: #10b981; | |
| } | |
| .message-btn { | |
| background: #6366f1; | |
| color: white; | |
| } | |
| .tab-button { | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| .tab-button.active:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: #6366f1; | |
| } | |
| .interest-tag { | |
| display: inline-block; | |
| background: rgba(255,255,255,0.2); | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| margin-right: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.875rem; | |
| } | |
| .university-badge { | |
| position: absolute; | |
| top: 1rem; | |
| left: 1rem; | |
| background: rgba(0,0,0,0.7); | |
| color: white; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.875rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .university-badge i { | |
| margin-right: 0.25rem; | |
| } | |
| /* Animation for matching */ | |
| @keyframes matchAnimation { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.2); opacity: 0.8; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .match-animation { | |
| animation: matchAnimation 0.5s ease-in-out; | |
| } | |
| /* Chat specific styles */ | |
| .chat-header { | |
| position: sticky; | |
| top: 0; | |
| background: white; | |
| z-index: 10; | |
| padding: 1rem; | |
| border-bottom: 1px solid #e2e8f0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .chat-messages { | |
| padding: 1rem; | |
| overflow-y: auto; | |
| height: calc(100vh - 200px); | |
| } | |
| .chat-input { | |
| position: sticky; | |
| bottom: 0; | |
| background: white; | |
| padding: 1rem; | |
| border-top: 1px solid #e2e8f0; | |
| } | |
| .back-button { | |
| margin-right: 1rem; | |
| cursor: pointer; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-users text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-indigo-600">Unimate</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <span class="sr-only">Notifications</span> | |
| <i class="fas fa-bell h-6 w-6"></i> | |
| <span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content with Tabs --> | |
| <div class="max-w-md mx-auto pb-16"> | |
| <!-- Tab Navigation --> | |
| <div class="flex border-b border-gray-200"> | |
| <button class="flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm tab-button active" id="discover-tab"> | |
| <i class="fas fa-user-friends mr-1"></i> Discover | |
| </button> | |
| <button class="flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm tab-button" id="matches-tab"> | |
| <i class="fas fa-heart mr-1"></i> Matches | |
| <span class="ml-1 bg-indigo-600 text-white text-xs font-bold px-2 py-0.5 rounded-full">3</span> | |
| </button> | |
| <button class="flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm tab-button" id="messages-tab"> | |
| <i class="fas fa-comment-dots mr-1"></i> Messages | |
| <span class="ml-1 bg-indigo-600 text-white text-xs font-bold px-2 py-0.5 rounded-full">2</span> | |
| </button> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="px-4 py-4" id="discover-content"> | |
| <!-- Profile Card (Swipeable) --> | |
| <div class="profile-card" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80')"> | |
| <div class="university-badge"> | |
| <i class="fas fa-university"></i> UCL | |
| </div> | |
| <div class="profile-overlay"> | |
| <h3 class="text-2xl font-bold">Emma, 20</h3> | |
| <p class="text-lg mb-2">Psychology Student</p> | |
| <div class="mb-2"> | |
| <span class="interest-tag">#CoffeeLover</span> | |
| <span class="interest-tag">#Hiking</span> | |
| <span class="interest-tag">#Reading</span> | |
| <span class="interest-tag">#Music</span> | |
| </div> | |
| <p class="text-sm opacity-90">"Just moved to London from Manchester and looking to meet new friends who enjoy exploring the city!"</p> | |
| </div> | |
| </div> | |
| <!-- Swipe Buttons --> | |
| <div class="swipe-buttons"> | |
| <button class="swipe-button dislike-btn" id="dislike-btn"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <button class="swipe-button message-btn" id="message-btn"> | |
| <i class="fas fa-comment"></i> | |
| </button> | |
| <button class="swipe-button like-btn" id="like-btn"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hidden px-4 py-4" id="matches-content"> | |
| <h3 class="text-xl font-bold mb-4">Your Matches</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80" class="w-full h-40 object-cover"> | |
| <div class="p-3"> | |
| <h4 class="font-medium">James, 21</h4> | |
| <p class="text-sm text-gray-500">Computer Science</p> | |
| <button class="mt-2 w-full bg-indigo-100 text-indigo-600 py-1 rounded-md text-sm font-medium message-match-btn" data-user="James"> | |
| Message | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80" class="w-full h-40 object-cover"> | |
| <div class="p-3"> | |
| <h4 class="font-medium">Priya, 19</h4> | |
| <p class="text-sm text-gray-500">Economics</p> | |
| <button class="mt-2 w-full bg-indigo-100 text-indigo-600 py-1 rounded-md text-sm font-medium message-match-btn" data-user="Priya"> | |
| Message | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80" class="w-full h-40 object-cover"> | |
| <div class="p-3"> | |
| <h4 class="font-medium">Alex, 22</h4> | |
| <p class="text-sm text-gray-500">Medicine</p> | |
| <button class="mt-2 w-full bg-indigo-100 text-indigo-600 py-1 rounded-md text-sm font-medium message-match-btn" data-user="Alex"> | |
| Message | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden px-4 py-4" id="messages-content"> | |
| <!-- Messages List View --> | |
| <div id="messages-list"> | |
| <h3 class="text-xl font-bold mb-4">Your Conversations</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-3 bg-white rounded-lg shadow-sm open-chat-btn" data-user="James"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium">James</h4> | |
| <span class="text-xs text-gray-500">2h ago</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Hey! Want to grab coffee tomorrow before class?</p> | |
| </div> | |
| <span class="ml-2 block h-2 w-2 rounded-full bg-indigo-600"></span> | |
| </div> | |
| <div class="flex items-center p-3 bg-white rounded-lg shadow-sm open-chat-btn" data-user="Priya"> | |
| <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium">Priya</h4> | |
| <span class="text-xs text-gray-500">1d ago</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">The study group is meeting at the library at 3pm</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-indigo-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-indigo-800 mb-2">Icebreaker Suggestions</h4> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left p-2 bg-white rounded-md text-sm"> | |
| "What's your favorite spot on campus?" | |
| </button> | |
| <button class="w-full text-left p-2 bg-white rounded-md text-sm"> | |
| "What are you studying and why did you choose it?" | |
| </button> | |
| <button class="w-full text-left p-2 bg-white rounded-md text-sm"> | |
| "Do you have any recommendations for good coffee near campus?" | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Individual Chat View (hidden by default) --> | |
| <div id="chat-view" class="hidden"> | |
| <div class="chat-header"> | |
| <button class="back-button" id="back-to-messages"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <img id="chat-user-avatar" src="" class="w-10 h-10 rounded-full object-cover"> | |
| <div class="ml-3"> | |
| <h4 id="chat-user-name" class="font-medium"></h4> | |
| <p id="chat-user-status" class="text-xs text-gray-500">Online</p> | |
| </div> | |
| </div> | |
| <div class="chat-messages" id="chat-messages"> | |
| <!-- Messages will be inserted here --> | |
| </div> | |
| <div class="chat-input"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Type a message..." class="flex-1 border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-md"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation (Mobile) --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg sm:hidden z-10"> | |
| <div class="flex justify-around"> | |
| <button class="p-4 text-indigo-600" id="mobile-discover-tab"> | |
| <i class="fas fa-user-friends text-xl"></i> | |
| </button> | |
| <button class="p-4 text-gray-500" id="mobile-matches-tab"> | |
| <i class="fas fa-heart text-xl"></i> | |
| </button> | |
| <button class="p-4 text-gray-500" id="mobile-messages-tab"> | |
| <i class="fas fa-comment-dots text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Match Modal (Hidden by default) --> | |
| <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-20 hidden" id="match-modal"> | |
| <div class="bg-white rounded-lg p-6 max-w-sm w-full text-center"> | |
| <div class="flex justify-center -space-x-4"> | |
| <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80" class="w-20 h-20 rounded-full border-4 border-white"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80" class="w-20 h-20 rounded-full border-4 border-white"> | |
| </div> | |
| <h3 class="text-2xl font-bold mt-4">It's a match!</h3> | |
| <p class="text-gray-600 mt-2">You and Emma have liked each other</p> | |
| <div class="mt-6 space-y-3"> | |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-md font-medium" id="match-message-btn"> | |
| Send Message | |
| </button> | |
| <button class="w-full border border-gray-300 text-gray-700 py-2 rounded-md font-medium" id="keep-swiping-btn"> | |
| Keep Swiping | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Current chat state | |
| let currentChatUser = null; | |
| // Tab switching functionality | |
| const tabs = { | |
| discover: { | |
| tab: document.getElementById('discover-tab'), | |
| mobileTab: document.getElementById('mobile-discover-tab'), | |
| content: document.getElementById('discover-content') | |
| }, | |
| matches: { | |
| tab: document.getElementById('matches-tab'), | |
| mobileTab: document.getElementById('mobile-matches-tab'), | |
| content: document.getElementById('matches-content') | |
| }, | |
| messages: { | |
| tab: document.getElementById('messages-tab'), | |
| mobileTab: document.getElementById('mobile-messages-tab'), | |
| content: document.getElementById('messages-content') | |
| } | |
| }; | |
| // Chat elements | |
| const messagesListView = document.getElementById('messages-list'); | |
| const chatView = document.getElementById('chat-view'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const chatUserName = document.getElementById('chat-user-name'); | |
| const chatUserAvatar = document.getElementById('chat-user-avatar'); | |
| const backToMessagesBtn = document.getElementById('back-to-messages'); | |
| function switchTab(activeTab) { | |
| // Update all tabs | |
| Object.keys(tabs).forEach(tabKey => { | |
| const tab = tabs[tabKey]; | |
| const isActive = tabKey === activeTab; | |
| // Update tab buttons | |
| if (tab.tab) { | |
| tab.tab.classList.toggle('active', isActive); | |
| tab.tab.classList.toggle('text-indigo-600', isActive); | |
| tab.tab.classList.toggle('text-gray-500', !isActive); | |
| } | |
| if (tab.mobileTab) { | |
| tab.mobileTab.classList.toggle('text-indigo-600', isActive); | |
| tab.mobileTab.classList.toggle('text-gray-500', !isActive); | |
| } | |
| // Update content | |
| tab.content.classList.toggle('hidden', !isActive); | |
| }); | |
| // If switching to messages tab, show the list view by default | |
| if (activeTab === 'messages') { | |
| messagesListView.classList.remove('hidden'); | |
| chatView.classList.add('hidden'); | |
| } | |
| } | |
| // Add event listeners to all tabs | |
| Object.keys(tabs).forEach(tabKey => { | |
| const tab = tabs[tabKey]; | |
| if (tab.tab) tab.tab.addEventListener('click', () => switchTab(tabKey)); | |
| if (tab.mobileTab) tab.mobileTab.addEventListener('click', () => switchTab(tabKey)); | |
| }); | |
| // Swipe button functionality | |
| const likeBtn = document.getElementById('like-btn'); | |
| const dislikeBtn = document.getElementById('dislike-btn'); | |
| const messageBtn = document.getElementById('message-btn'); | |
| const matchModal = document.getElementById('match-modal'); | |
| const keepSwipingBtn = document.getElementById('keep-swiping-btn'); | |
| const matchMessageBtn = document.getElementById('match-message-btn'); | |
| likeBtn.addEventListener('click', function() { | |
| // In a real app, this would send a like to the server | |
| // For demo, we'll show a match 30% of the time | |
| if (Math.random() < 0.3) { | |
| matchModal.classList.remove('hidden'); | |
| } else { | |
| // Animate the card swipe | |
| const profileCard = document.querySelector('.profile-card'); | |
| profileCard.classList.add('match-animation'); | |
| // After animation, we'd load a new profile | |
| setTimeout(() => { | |
| // In a real app, this would fetch a new profile | |
| alert('New profile would load here'); | |
| }, 500); | |
| } | |
| }); | |
| dislikeBtn.addEventListener('click', function() { | |
| // Animate the card swipe | |
| const profileCard = document.querySelector('.profile-card'); | |
| profileCard.style.transform = 'translateX(-100%) rotate(-10deg)'; | |
| profileCard.style.opacity = '0'; | |
| profileCard.style.transition = 'all 0.5s ease'; | |
| // After animation, we'd load a new profile | |
| setTimeout(() => { | |
| // In a real app, this would fetch a new profile | |
| alert('New profile would load here'); | |
| }, 500); | |
| }); | |
| messageBtn.addEventListener('click', function() { | |
| // Switch to messages tab and open chat with Emma | |
| switchTab('messages'); | |
| openChat('Emma', 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80'); | |
| }); | |
| // Close match modal | |
| keepSwipingBtn.addEventListener('click', function() { | |
| matchModal.classList.add('hidden'); | |
| // Animate the card swipe | |
| const profileCard = document.querySelector('.profile-card'); | |
| profileCard.classList.add('match-animation'); | |
| // After animation, we'd load a new profile | |
| setTimeout(() => { | |
| // In a real app, this would fetch a new profile | |
| alert('New profile would load here'); | |
| }, 500); | |
| }); | |
| // Message button in match modal | |
| matchMessageBtn.addEventListener('click', function() { | |
| matchModal.classList.add('hidden'); | |
| switchTab('messages'); | |
| openChat('Emma', 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=800&h=800&q=80'); | |
| }); | |
| // Message buttons in matches list | |
| document.querySelectorAll('.message-match-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const userName = this.getAttribute('data-user'); | |
| const userAvatar = this.closest('.bg-white').querySelector('img').src; | |
| switchTab('messages'); | |
| openChat(userName, userAvatar); | |
| }); | |
| }); | |
| // Open chat buttons in messages list | |
| document.querySelectorAll('.open-chat-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const userName = this.getAttribute('data-user'); | |
| const userAvatar = this.querySelector('img').src; | |
| openChat(userName, userAvatar); | |
| }); | |
| }); | |
| // Back to messages list button | |
| backToMessagesBtn.addEventListener('click', function() { | |
| messagesListView.classList.remove('hidden'); | |
| chatView.classList.add('hidden'); | |
| }); | |
| // Function to open a chat with a specific user | |
| function openChat(userName, userAvatar) { | |
| currentChatUser = userName; | |
| // Update chat header | |
| chatUserName.textContent = userName; | |
| chatUserAvatar.src = userAvatar; | |
| // Clear existing messages | |
| chatMessages.innerHTML = ''; | |
| // Add sample messages (in a real app, these would come from the server) | |
| if (userName === 'Emma') { | |
| addMessage('Emma', 'Hi there! How are you?', false); | |
| addMessage('You', "I'm good thanks! How about you?", true); | |
| addMessage('Emma', "Great! Just moved to London and looking to meet new friends", false); | |
| } else if (userName === 'James') { | |
| addMessage('James', 'Hey! Want to grab coffee tomorrow before class?', false); | |
| addMessage('You', "Sure, what time works for you?", true); | |
| addMessage('James', "How about 9am at the campus cafe?", false); | |
| } else if (userName === 'Priya') { | |
| addMessage('Priya', 'The study group is meeting at the library at 3pm', false); | |
| addMessage('You', "Thanks for letting me know! I'll be there", true); | |
| } else if (userName === 'Alex') { | |
| addMessage('Alex', 'Hey! Are you coming to the med school mixer this weekend?', false); | |
| } | |
| // Show the chat view and hide the messages list | |
| messagesListView.classList.add('hidden'); | |
| chatView.classList.remove('hidden'); | |
| } | |
| // Function to add a message to the chat | |
| function addMessage(sender, text, isCurrentUser) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `mb-4 ${isCurrentUser ? 'text-right' : 'text-left'}`; | |
| const bubble = document.createElement('div'); | |
| bubble.className = `inline-block px-4 py-2 rounded-lg ${isCurrentUser ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-800'}`; | |
| bubble.textContent = text; | |
| const senderName = document.createElement('div'); | |
| senderName.className = 'text-xs text-gray-500 mb-1'; | |
| senderName.textContent = sender; | |
| if (!isCurrentUser) { | |
| messageDiv.appendChild(senderName); | |
| } | |
| messageDiv.appendChild(bubble); | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| alert('Mobile menu would open here'); | |
| }); | |
| // User menu toggle | |
| const userMenuButton = document.getElementById('user-menu-button'); | |
| userMenuButton.addEventListener('click', function() { | |
| alert('User menu would open here'); | |
| }); | |
| // Initialize with discover tab | |
| switchTab('discover'); | |
| }); | |
| </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=mcbaicoding/unimates" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |