| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NEPSARA - Connect with Nepali Worldwide</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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| neon: '#ccff00', |
| purple: { |
| light: '#c084fc', |
| DEFAULT: '#9333ea', |
| dark: '#6b21a8', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <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: #0f172a; |
| color: white; |
| overflow-x: hidden; |
| } |
| |
| .neon-text { |
| text-shadow: 0 0 5px #ccff00, 0 0 10px #ccff00, 0 0 20px #ccff00; |
| } |
| |
| .neon-border { |
| box-shadow: 0 0 5px #ccff00, 0 0 10px #ccff00; |
| } |
| |
| .purple-glow { |
| box-shadow: 0 0 10px #9333ea, 0 0 20px #9333ea; |
| } |
| |
| .profile-card { |
| background: linear-gradient(145deg, #1e293b, #0f172a); |
| border-radius: 20px; |
| transform-style: preserve-3d; |
| transition: all 0.5s ease; |
| } |
| |
| .profile-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .action-btn { |
| transition: all 0.3s ease; |
| } |
| |
| .action-btn:hover { |
| transform: scale(1.1); |
| } |
| |
| .connect-btn { |
| background: linear-gradient(45deg, #ccff00, #93ff00); |
| } |
| |
| .pass-btn { |
| background: linear-gradient(45deg, #ff3366, #ff0066); |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #6b21a8, #0f172a); |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -2px; |
| left: 0; |
| background-color: #ccff00; |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .pulse { |
| animation: pulse 1.5s infinite; |
| } |
| |
| |
| .swipe-right { |
| transform: translate(150px, 0) rotate(30deg); |
| opacity: 0; |
| transition: all 0.5s ease; |
| } |
| |
| .swipe-left { |
| transform: translate(-150px, 0) rotate(-30deg); |
| opacity: 0; |
| transition: all 0.5s ease; |
| } |
| |
| |
| .profile-header { |
| background: linear-gradient(135deg, #6b21a8, #9333ea); |
| } |
| |
| .edit-btn { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| } |
| |
| .profile-tab { |
| border-bottom: 3px solid transparent; |
| transition: all 0.3s ease; |
| } |
| |
| .profile-tab.active { |
| border-bottom-color: #ccff00; |
| color: #ccff00; |
| } |
| |
| .interest-badge { |
| background: rgba(147, 51, 234, 0.2); |
| transition: all 0.3s ease; |
| } |
| |
| .interest-badge:hover { |
| background: rgba(147, 51, 234, 0.4); |
| transform: translateY(-2px); |
| } |
| |
| .stats-card { |
| background: rgba(15, 23, 42, 0.7); |
| backdrop-filter: blur(10px); |
| } |
| |
| |
| .chat-bubble { |
| max-width: 70%; |
| padding: 12px 16px; |
| border-radius: 18px; |
| margin-bottom: 8px; |
| position: relative; |
| } |
| |
| .chat-bubble.sent { |
| background-color: #9333ea; |
| align-self: flex-end; |
| border-bottom-right-radius: 4px; |
| } |
| |
| .chat-bubble.received { |
| background-color: #1e293b; |
| align-self: flex-start; |
| border-bottom-left-radius: 4px; |
| } |
| |
| |
| .discover-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
| gap: 20px; |
| } |
| |
| |
| .page { |
| display: none; |
| } |
| |
| .page.active { |
| display: block; |
| } |
| |
| |
| .spinner { |
| width: 40px; |
| height: 40px; |
| border: 4px solid rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| border-top-color: #9333ea; |
| animation: spin 1s ease-in-out infinite; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <nav class="gradient-bg py-4 px-6 shadow-lg sticky top-0 z-50"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-globe-asia text-3xl text-neon"></i> |
| <h1 class="text-2xl font-bold neon-text">NEPSARA</h1> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link text-white hover:text-neon page-link" data-page="home">Home</a> |
| <a href="#discover" class="nav-link text-white hover:text-neon page-link" data-page="discover">Discover</a> |
| <a href="#messages" class="nav-link text-white hover:text-neon page-link" data-page="messages">Messages</a> |
| <a href="#profile" class="nav-link text-white hover:text-neon page-link" data-page="profile">Profile</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button id="loginBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full transition"> |
| Login |
| </button> |
| <button class="md:hidden text-white text-2xl" id="mobileMenuBtn"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobileMenu" class="md:hidden hidden absolute top-full left-0 right-0 bg-gray-900 py-4 px-6 shadow-lg"> |
| <div class="flex flex-col space-y-4"> |
| <a href="#home" class="nav-link text-white hover:text-neon page-link" data-page="home">Home</a> |
| <a href="#discover" class="nav-link text-white hover:text-neon page-link" data-page="discover">Discover</a> |
| <a href="#messages" class="nav-link text-white hover:text-neon page-link" data-page="messages">Messages</a> |
| <a href="#profile" class="nav-link text-white hover:text-neon page-link" data-page="profile">Profile</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden"> |
| <div class="bg-gray-800 rounded-xl p-8 w-full max-w-md relative"> |
| <button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-white"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| <h2 class="text-2xl font-bold mb-6 text-center text-neon">Welcome to NEPSARA</h2> |
| <form id="loginForm" class="space-y-4"> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required> |
| </div> |
| <div> |
| <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Password</label> |
| <input type="password" id="password" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required> |
| </div> |
| <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg transition">Login</button> |
| <p class="text-center text-gray-400">Don't have an account? <a href="#" id="showSignup" class="text-purple-400 hover:text-purple-300">Sign up</a></p> |
| </form> |
| |
| <form id="signupForm" class="space-y-4 hidden"> |
| <div> |
| <label for="fullname" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label> |
| <input type="text" id="fullname" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required> |
| </div> |
| <div> |
| <label for="signupEmail" class="block text-sm font-medium text-gray-300 mb-1">Email</label> |
| <input type="email" id="signupEmail" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required> |
| </div> |
| <div> |
| <label for="signupPassword" class="block text-sm font-medium text-gray-300 mb-1">Password</label> |
| <input type="password" id="signupPassword" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required> |
| </div> |
| <div> |
| <label for="age" class="block text-sm font-medium text-gray-300 mb-1">Age</label> |
| <input type="number" id="age" min="18" max="100" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required> |
| </div> |
| <div> |
| <label for="location" class="block text-sm font-medium text-gray-300 mb-1">Current Location</label> |
| <select id="location" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required> |
| <option value="">Select your location</option> |
| <option value="usa">United States</option> |
| <option value="uk">United Kingdom</option> |
| <option value="australia">Australia</option> |
| <option value="canada">Canada</option> |
| <option value="japan">Japan</option> |
| <option value="uae">UAE</option> |
| <option value="malaysia">Malaysia</option> |
| <option value="qatar">Qatar</option> |
| <option value="nepal">Nepal</option> |
| <option value="other">Other</option> |
| </select> |
| </div> |
| <div> |
| <label for="bio" class="block text-sm font-medium text-gray-300 mb-1">Bio</label> |
| <textarea id="bio" rows="3" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required></textarea> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="terms" class="mr-2" required> |
| <label for="terms" class="text-sm text-gray-300">I agree to the terms and conditions</label> |
| </div> |
| <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg transition">Create Account</button> |
| <p class="text-center text-gray-400">Already have an account? <a href="#" id="showLogin" class="text-purple-400 hover:text-purple-300">Login</a></p> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto px-4 py-8"> |
| |
| <div id="homePage" class="page active"> |
| <div class="flex flex-col md:flex-row gap-8"> |
| |
| <div class="w-full md:w-1/4"> |
| <div class="profile-card p-6 mb-6 shadow-lg"> |
| <div class="flex flex-col items-center"> |
| <div class="relative mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile" class="w-24 h-24 rounded-full border-4 border-purple-500"> |
| <div class="absolute bottom-0 right-0 bg-neon text-black w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </div> |
| </div> |
| <h3 class="text-xl font-semibold">Anjali Shrestha</h3> |
| <p class="text-purple-300">Kathmandu, Nepal</p> |
| <div class="flex space-x-2 mt-2"> |
| <span class="bg-gray-700 px-2 py-1 rounded-full text-xs">25</span> |
| <span class="bg-gray-700 px-2 py-1 rounded-full text-xs">Student</span> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <h4 class="font-medium text-gray-400 mb-2">About Me</h4> |
| <p class="text-sm">Namaste! I'm Anjali, currently studying in Kathmandu. Love to meet new people and share our Nepali culture.</p> |
| </div> |
| <div class="mt-4"> |
| <h4 class="font-medium text-gray-400 mb-2">Interests</h4> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-purple-900 text-purple-200 px-2 py-1 rounded-full text-xs">Music</span> |
| <span class="bg-purple-900 text-purple-200 px-2 py-1 rounded-full text-xs">Travel</span> |
| <span class="bg-purple-900 text-purple-200 px-2 py-1 rounded-full text-xs">Food</span> |
| <span class="bg-purple-900 text-purple-200 px-2 py-1 rounded-full text-xs">Dance</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="profile-card p-6 shadow-lg"> |
| <h3 class="text-lg font-semibold mb-4">Nearby Nepali</h3> |
| <div class="space-y-4"> |
| <div class="flex items-center space-x-3"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full"> |
| <div> |
| <h4 class="font-medium">Rajesh Gurung</h4> |
| <p class="text-xs text-gray-400">1.2 km away</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full"> |
| <div> |
| <h4 class="font-medium">Puja Thapa</h4> |
| <p class="text-xs text-gray-400">0.8 km away</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-12 h-12 rounded-full"> |
| <div> |
| <h4 class="font-medium">Bikram Rai</h4> |
| <p class="text-xs text-gray-400">2.5 km away</p> |
| </div> |
| </div> |
| </div> |
| <button class="w-full mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg text-sm transition"> |
| View All Nearby |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="w-full md:w-2/4"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-bold">Discover Nepali Nearby</h2> |
| <div class="flex items-center space-x-2"> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full"> |
| <i class="fas fa-sliders-h text-sm"></i> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full"> |
| <i class="fas fa-map-marker-alt text-sm"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div id="profileContainer" class="relative h-96"> |
| |
| <div id="currentProfile" class="profile-card absolute w-full h-full p-6 shadow-xl"> |
| <div class="relative h-full"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-xl z-10"></div> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile" class="absolute inset-0 w-full h-full object-cover rounded-xl"> |
| <div class="absolute bottom-0 left-0 p-6 z-20 w-full"> |
| <div class="flex justify-between items-end"> |
| <div> |
| <h3 class="text-2xl font-bold">Sita Tamang</h3> |
| <p class="text-purple-300">Sydney, Australia</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm"><i class="fas fa-map-marker-alt mr-1"></i> 5 km away</p> |
| <p class="text-sm"><i class="fas fa-user-graduate mr-1"></i> Nurse</p> |
| </div> |
| </div> |
| <p class="mt-2 text-sm">Namaste! I'm a nurse working in Sydney. Miss home but love to connect with fellow Nepali here.</p> |
| <div class="flex flex-wrap gap-2 mt-3"> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Healthcare</span> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Travel</span> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Cooking</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-center space-x-8 mt-8"> |
| <button id="passBtn" class="action-btn pass-btn w-16 h-16 rounded-full flex items-center justify-center text-white shadow-lg"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| <button id="connectBtn" class="action-btn connect-btn w-16 h-16 rounded-full flex items-center justify-center text-black shadow-lg"> |
| <i class="fas fa-heart text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="w-full md:w-1/4"> |
| <div class="profile-card p-6 shadow-lg"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Your Matches</h3> |
| <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded-full">3 New</span> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex items-center space-x-3 bg-gray-700 bg-opacity-50 p-3 rounded-lg pulse"> |
| <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Match" class="w-12 h-12 rounded-full border-2 border-neon"> |
| <div> |
| <h4 class="font-medium">Ramesh Karki</h4> |
| <p class="text-xs text-gray-400">New York, USA</p> |
| <button class="mt-1 bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1 rounded-full transition"> |
| Message |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-3 bg-gray-700 bg-opacity-50 p-3 rounded-lg"> |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Match" class="w-12 h-12 rounded-full"> |
| <div> |
| <h4 class="font-medium">Gita Basnet</h4> |
| <p class="text-xs text-gray-400">London, UK</p> |
| <button class="mt-1 bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1 rounded-full transition"> |
| Message |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-3 bg-gray-700 bg-opacity-50 p-3 rounded-lg"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Match" class="w-12 h-12 rounded-full"> |
| <div> |
| <h4 class="font-medium">Hari Thapa</h4> |
| <p class="text-xs text-gray-400">Melbourne, Australia</p> |
| <button class="mt-1 bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1 rounded-full transition"> |
| Message |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <button class="w-full mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg text-sm transition"> |
| View All Matches |
| </button> |
| </div> |
| |
| <div class="profile-card p-6 mt-6 shadow-lg"> |
| <h3 class="text-lg font-semibold mb-4">Upcoming Events</h3> |
| <div class="space-y-4"> |
| <div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg border-l-4 border-neon"> |
| <h4 class="font-medium">Nepali New Year Celebration</h4> |
| <p class="text-xs text-gray-400 mt-1">April 14, 2023 | Sydney</p> |
| <button class="mt-2 bg-neon hover:bg-green-300 text-black text-xs px-3 py-1 rounded-full transition"> |
| RSVP |
| </button> |
| </div> |
| <div class="bg-gray-700 bg-opacity-50 p-3 rounded-lg"> |
| <h4 class="font-medium">Dashain Gathering</h4> |
| <p class="text-xs text-gray-400 mt-1">October 15, 2023 | New York</p> |
| <button class="mt-2 bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1 rounded-full transition"> |
| Interested |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="discoverPage" class="page"> |
| <div class="flex flex-col md:flex-row gap-8"> |
| |
| <div class="w-full md:w-1/4"> |
| <div class="profile-card p-6 mb-6 shadow-lg"> |
| <h3 class="text-lg font-semibold mb-4">Filters</h3> |
| |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-2">Gender</label> |
| <div class="flex space-x-2"> |
| <button class="filter-btn active bg-purple-600 text-white px-3 py-1 rounded-full text-sm">All</button> |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Male</button> |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Female</button> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-2">Age Range</label> |
| <div class="flex items-center space-x-2"> |
| <input type="number" min="18" max="100" value="18" class="w-16 px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white"> |
| <span>to</span> |
| <input type="number" min="18" max="100" value="40" class="w-16 px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white"> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-2">Location</label> |
| <select class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white"> |
| <option>Anywhere</option> |
| <option>Same City</option> |
| <option>Same Country</option> |
| <option>Nearby (50km)</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-2">Interests</label> |
| <div class="flex flex-wrap gap-2"> |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Music</button> |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Travel</button> |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Food</button> |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Sports</button> |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Arts</button> |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Technology</button> |
| </div> |
| </div> |
| |
| <button class="w-full mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg transition"> |
| Apply Filters |
| </button> |
| </div> |
| </div> |
| |
| <div class="profile-card p-6 shadow-lg"> |
| <h3 class="text-lg font-semibold mb-4">Premium Features</h3> |
| <div class="space-y-3"> |
| <div class="flex items-start space-x-3"> |
| <i class="fas fa-crown text-yellow-400 mt-1"></i> |
| <div> |
| <h4 class="font-medium">See who liked you</h4> |
| <p class="text-xs text-gray-400">Unlock unlimited likes</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <i class="fas fa-bolt text-purple-400 mt-1"></i> |
| <div> |
| <h4 class="font-medium">Boost your profile</h4> |
| <p class="text-xs text-gray-400">Get 10x more matches</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <i class="fas fa-globe text-neon mt-1"></i> |
| <div> |
| <h4 class="font-medium">Global search</h4> |
| <p class="text-xs text-gray-400">Connect with Nepali worldwide</p> |
| </div> |
| </div> |
| </div> |
| <button class="w-full mt-4 bg-neon hover:bg-green-300 text-black py-2 rounded-lg font-medium transition"> |
| Upgrade Now |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="w-full md:w-3/4"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-bold">Discover Nepali Worldwide</h2> |
| <div class="flex items-center space-x-2"> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full"> |
| <i class="fas fa-search text-sm"></i> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full"> |
| <i class="fas fa-map-marker-alt text-sm"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="discover-grid"> |
| |
| <div class="profile-card overflow-hidden"> |
| <div class="relative h-64"> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-4 w-full"> |
| <h3 class="text-lg font-bold">Sita Tamang</h3> |
| <p class="text-purple-300 text-sm">Sydney, Australia</p> |
| <div class="flex justify-between items-center mt-2"> |
| <div class="flex space-x-1"> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Nurse</span> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">25</span> |
| </div> |
| <button class="bg-neon hover:bg-green-300 text-black w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-heart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="profile-card overflow-hidden"> |
| <div class="relative h-64"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-4 w-full"> |
| <h3 class="text-lg font-bold">Rajesh Gurung</h3> |
| <p class="text-purple-300 text-sm">New York, USA</p> |
| <div class="flex justify-between items-center mt-2"> |
| <div class="flex space-x-1"> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Engineer</span> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">28</span> |
| </div> |
| <button class="bg-neon hover:bg-green-300 text-black w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-heart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="profile-card overflow-hidden"> |
| <div class="relative h-64"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-4 w-full"> |
| <h3 class="text-lg font-bold">Puja Thapa</h3> |
| <p class="text-purple-300 text-sm">London, UK</p> |
| <div class="flex justify-between items-center mt-2"> |
| <div class="flex space-x-1"> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Student</span> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">22</span> |
| </div> |
| <button class="bg-neon hover:bg-green-300 text-black w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-heart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="profile-card overflow-hidden"> |
| <div class="relative h-64"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-4 w-full"> |
| <h3 class="text-lg font-bold">Bikram Rai</h3> |
| <p class="text-purple-300 text-sm">Melbourne, Australia</p> |
| <div class="flex justify-between items-center mt-2"> |
| <div class="flex space-x-1"> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Chef</span> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">30</span> |
| </div> |
| <button class="bg-neon hover:bg-green-300 text-black w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-heart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="profile-card overflow-hidden"> |
| <div class="relative h-64"> |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Profile" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-4 w-full"> |
| <h3 class="text-lg font-bold">Gita Basnet</h3> |
| <p class="text-purple-300 text-sm">Tokyo, Japan</p> |
| <div class="flex justify-between items-center mt-2"> |
| <div class="flex space-x-1"> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Teacher</span> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">27</span> |
| </div> |
| <button class="bg-neon hover:bg-green-300 text-black w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-heart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="profile-card overflow-hidden"> |
| <div class="relative h-64"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Profile" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-4 w-full"> |
| <h3 class="text-lg font-bold">Hari Thapa</h3> |
| <p class="text-purple-300 text-sm">Dubai, UAE</p> |
| <div class="flex justify-between items-center mt-2"> |
| <div class="flex space-x-1"> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">Engineer</span> |
| <span class="bg-purple-900 bg-opacity-70 text-purple-200 px-2 py-1 rounded-full text-xs">32</span> |
| </div> |
| <button class="bg-neon hover:bg-green-300 text-black w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-heart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-center mt-8"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition"> |
| Load More Profiles |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="messagesPage" class="page"> |
| <div class="flex flex-col md:flex-row gap-8"> |
| |
| <div class="w-full md:w-1/3"> |
| <div class="profile-card p-6 shadow-lg"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Messages</h3> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-edit"></i> |
| </button> |
| </div> |
| |
| <div class="relative mb-4"> |
| <input type="text" placeholder="Search messages..." class="w-full px-4 py-2 pl-10 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| |
| <div class="space-y-3"> |
| <div class="flex items-center space-x-3 bg-gray-700 bg-opacity-50 p-3 rounded-lg cursor-pointer active-conversation"> |
| <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Match" class="w-12 h-12 rounded-full"> |
| <div class="flex-1"> |
| <div class="flex justify-between items-center"> |
| <h4 class="font-medium">Ramesh Karki</h4> |
| <span class="text-xs text-gray-400">2h ago</span> |
| </div> |
| <p class="text-sm text-gray-400 truncate">Hey! How are you doing? Let's meet this weekend...</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-3 bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600"> |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Match" class="w-12 h-12 rounded-full"> |
| <div class="flex-1"> |
| <div class="flex justify-between items-center"> |
| <h4 class="font-medium">Gita Basnet</h4> |
| <span class="text-xs text-gray-400">1d ago</span> |
| </div> |
| <p class="text-sm text-gray-400 truncate">Did you see the new Nepali restaurant that opened...</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-3 bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Match" class="w-12 h-12 rounded-full"> |
| <div class="flex-1"> |
| <div class="flex justify-between items-center"> |
| <h4 class="font-medium">Hari Thapa</h4> |
| <span class="text-xs text-gray-400">3d ago</span> |
| </div> |
| <p class="text-sm text-gray-400 truncate">Thanks for the recommendation! I'll check it out...</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-3 bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600"> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Match" class="w-12 h-12 rounded-full"> |
| <div class="flex-1"> |
| <div class="flex justify-between items-center"> |
| <h4 class="font-medium">Sita Tamang</h4> |
| <span class="text-xs text-gray-400">1w ago</span> |
| </div> |
| <p class="text-sm text-gray-400 truncate">Let me know when you're free for that coffee...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="w-full md:w-2/3"> |
| <div class="profile-card p-6 shadow-lg h-full"> |
| <div class="flex items-center space-x-3 border-b border-gray-700 pb-4 mb-4"> |
| <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Match" class="w-10 h-10 rounded-full"> |
| <div> |
| <h3 class="font-medium">Ramesh Karki</h3> |
| <p class="text-xs text-gray-400">New York, USA</p> |
| </div> |
| <div class="ml-auto flex space-x-2"> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full"> |
| <i class="fas fa-phone"></i> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full"> |
| <i class="fas fa-video"></i> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div id="chatMessages" class="h-96 overflow-y-auto mb-4 flex flex-col space-y-3"> |
| <div class="chat-bubble received"> |
| <p>Namaste! How are you doing?</p> |
| <span class="text-xs text-gray-400 block mt-1 text-right">10:30 AM</span> |
| </div> |
| |
| <div class="chat-bubble sent"> |
| <p>Namaste! I'm good, thanks. How about you?</p> |
| <span class="text-xs text-gray-400 block mt-1 text-right">10:32 AM</span> |
| </div> |
| |
| <div class="chat-bubble received"> |
| <p>I'm doing well. Just busy with work. Did you see the new Nepali restaurant that opened downtown?</p> |
| <span class="text-xs text-gray-400 block mt-1 text-right">10:33 AM</span> |
| </div> |
| |
| <div class="chat-bubble sent"> |
| <p>No, I haven't! What's it called? We should check it out sometime.</p> |
| <span class="text-xs text-gray-400 block mt-1 text-right">10:35 AM</span> |
| </div> |
| |
| <div class="chat-bubble received"> |
| <p>It's called "Himalayan Flavors". They have momo, thukpa, and even sel roti!</p> |
| <span class="text-xs text-gray-400 block mt-1 text-right">10:36 AM</span> |
| </div> |
| |
| <div class="chat-bubble sent"> |
| <p>Wow, sel roti? That's amazing! Let's plan to go this weekend?</p> |
| <span class="text-xs text-gray-400 block mt-1 text-right">10:38 AM</span> |
| </div> |
| |
| <div class="chat-bubble received"> |
| <p>Sounds perfect! How about Saturday evening?</p> |
| <span class="text-xs text-gray-400 block mt-1 text-right">10:40 AM</span> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-2"> |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full"> |
| <i class="fas fa-paperclip"></i> |
| </button> |
| <input type="text" placeholder="Type a message..." class="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white"> |
| <button class="bg-purple-600 hover:bg-purple-700 p-2 rounded-full text-white"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="profilePage" class="page"> |
| |
| <div class="profile-header rounded-xl overflow-hidden mb-8"> |
| <div class="relative h-64"> |
| <img src="https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80" |
| alt="Cover" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
| |
| <div class="absolute bottom-0 left-0 p-6 w-full"> |
| <div class="flex items-end space-x-6"> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile" |
| class="w-32 h-32 rounded-full border-4 border-purple-500"> |
| <button class="edit-btn absolute bottom-0 right-0 w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-camera text-white"></i> |
| </button> |
| </div> |
| <div> |
| <h1 class="text-3xl font-bold">Anjali Shrestha</h1> |
| <p class="text-purple-300">Kathmandu, Nepal</p> |
| <div class="flex space-x-2 mt-2"> |
| <span class="bg-gray-700 px-2 py-1 rounded-full text-xs">25 years</span> |
| <span class="bg-gray-700 px-2 py-1 rounded-full text-xs">Student</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <button class="edit-btn absolute top-4 right-4 px-4 py-2 rounded-full flex items-center space-x-2"> |
| <i class="fas fa-pencil-alt text-white"></i> |
| <span class="text-white text-sm">Edit Profile</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex border-b border-gray-700 mb-8"> |
| <button class="profile-tab active px-6 py-3 font-medium" data-tab="about">About</button> |
| <button class="profile-tab px-6 py-3 font-medium" data-tab="photos">Photos</button> |
| <button class="profile-tab px-6 py-3 font-medium" data-tab="interests">Interests</button> |
| <button class="profile-tab px-6 py-3 font-medium" data-tab="matches">Matches</button> |
| <button class="profile-tab px-6 py-3 font-medium" data-tab="settings">Settings</button> |
| </div> |
| |
| |
| <div class="flex flex-col md:flex-row gap-8"> |
| |
| <div class="w-full md:w-2/3"> |
| |
| <div id="aboutTab" class="profile-tab-content"> |
| <div class="profile-card p-6 mb-6"> |
| <h2 class="text-xl font-bold mb-4">About Me</h2> |
| <p class="text-gray-300 mb-6"> |
| Namaste! I'm Anjali, currently studying Computer Science in Kathmandu. I moved here from Pokhara 3 years ago for my studies. |
| I love meeting new people and sharing our rich Nepali culture. In my free time, I enjoy hiking in the Himalayas, |
| cooking traditional Nepali dishes, and learning about different cultures. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Basic Information</h3> |
| <div class="space-y-3"> |
| <div class="flex justify-between border-b border-gray-700 pb-2"> |
| <span class="text-gray-400">Age</span> |
| <span>25</span> |
| </div> |
| <div class="flex justify-between border-b border-gray-700 pb-2"> |
| <span class="text-gray-400">Gender</span> |
| <span>Female</span> |
| </div> |
| <div class="flex justify-between border-b border-gray-700 pb-2"> |
| <span class="text-gray-400">Location</span> |
| <span>Kathmandu, Nepal</span> |
| </div> |
| <div class="flex justify-between border-b border-gray-700 pb-2"> |
| <span class="text-gray-400">From</span> |
| <span>Pokhara, Nepal</span> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Education & Work</h3> |
| <div class="space-y-3"> |
| <div class="flex justify-between border-b border-gray-700 pb-2"> |
| <span class="text-gray-400">Education</span> |
| <span>BSc Computer Science</span> |
| </div> |
| <div class="flex justify-between border-b border-gray-700 pb-2"> |
| <span class="text-gray-400">University</span> |
| <span>Tribhuvan University</span> |
| </div> |
| <div class="flex justify-between border-b border-gray-700 pb-2"> |
| <span class="text-gray-400">Profession</span> |
| <span>Student</span> |
| </div> |
| <div class="flex justify-between border-b border-gray-700 pb-2"> |
| <span class="text-gray-400">Workplace</span> |
| <span>-</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="profile-card p-6 mb-6"> |
| <h2 class="text-xl font-bold mb-4">Life Abroad</h2> |
| <div class="space-y-4"> |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Countries Visited</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-purple-900 text-purple-200 px-3 py-1 rounded-full text-sm">Nepal</span> |
| <span class="bg-purple-900 text-purple-200 px-3 py-1 rounded-full text-sm">India</span> |
| <span class="bg-purple-900 text-purple-200 px-3 py-1 rounded-full text-sm">Thailand</span> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Languages</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-purple-900 text-purple-200 px-3 py-1 rounded-full text-sm">Nepali (Native)</span> |
| <span class="bg-purple-900 text-purple-200 px-3 py-1 rounded-full text-sm">English (Fluent)</span> |
| <span class="bg-purple-900 text-purple-200 px-3 py-1 rounded-full text-sm">Hindi (Intermediate)</span> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Future Plans</h3> |
| <p class="text-gray-300"> |
| I plan to pursue my master's degree abroad after completing my bachelor's. My dream countries are Canada or Australia. |
| Eventually, I'd like to return to Nepal and contribute to the growing tech industry there. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="photosTab" class="profile-tab-content hidden"> |
| <div class="profile-card p-6"> |
| <h2 class="text-xl font-bold mb-4">Gallery</h2> |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
| <div class="h-40 rounded-xl overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1889&q=80" |
| alt="Gallery" class="w-full h-full object-cover"> |
| </div> |
| <div class="h-40 rounded-xl overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" |
| alt="Gallery" class="w-full h-full object-cover"> |
| </div> |
| <div class="h-40 rounded-xl overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80" |
| alt="Gallery" class="w-full h-full object-cover"> |
| </div> |
| <div class="h-40 rounded-xl overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" |
| alt="Gallery" class="w-full h-full object-cover"> |
| </div> |
| <div class="h-40 rounded-xl overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1889&q=80" |
| alt="Gallery" class="w-full h-full object-cover"> |
| </div> |
| <div class="h-40 rounded-xl overflow-hidden bg-purple-900 bg-opacity-30 flex items-center justify-center"> |
| <button class="text-purple-400 text-4xl"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="interestsTab" class="profile-tab-content hidden"> |
| <div class="profile-card p-6 mb-6"> |
| <h2 class="text-xl font-bold mb-4">Interests & Hobbies</h2> |
| <div class="flex flex-wrap gap-3"> |
| <span class="interest-badge px-4 py-2 rounded-full">Hiking</span> |
| <span class="interest-badge px-4 py-2 rounded-full">Cooking</span> |
| <span class="interest-badge px-4 py-2 rounded-full">Travel</span> |
| <span class="interest-badge px-4 py-2 rounded-full">Photography</span> |
| <span class="interest-badge px-4 py-2 rounded-full">Music</span> |
| <span class="interest-badge px-4 py-2 rounded-full">Dance</span> |
| <span class="interest-badge px-4 py-2 rounded-full">Technology</span> |
| <span class="interest-badge px-4 py-2 rounded-full">Yoga</span> |
| </div> |
| </div> |
| |
| <div class="profile-card p-6"> |
| <h2 class="text-xl font-bold mb-4">Favorite Nepali Things</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Food</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Momo</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Dal Bhat</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Sel Roti</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Yomari</span> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Festivals</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Dashain</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Tihar</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Holi</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Teej</span> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Places</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Pokhara</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Chitwan</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Lumbini</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Mustang</span> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-400 mb-2">Music</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Nepathya</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">1974 AD</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Traditional</span> |
| <span class="interest-badge px-3 py-1 rounded-full text-sm">Lok Dohori</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="matchesTab" class="profile-tab-content hidden"> |
| <div class="profile-card p-6"> |
| <h2 class="text-xl font-bold mb-4">Your Matches</h2> |
| <div class="space-y-4"> |
| <div class="flex items-center space-x-4 p-4 bg-gray-700 bg-opacity-50 rounded-lg"> |
| <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Match" class="w-16 h-16 rounded-full"> |
| <div class="flex-1"> |
| <h3 class="font-medium">Ramesh Karki</h3> |
| <p class="text-sm text-gray-400">New York, USA | Engineer</p> |
| <div class="flex space-x-2 mt-2"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1 rounded-full transition"> |
| Message |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white text-xs px-3 py-1 rounded-full transition"> |
| View Profile |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4 p-4 bg-gray-700 bg-opacity-50 rounded-lg"> |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Match" class="w-16 h-16 rounded-full"> |
| <div class="flex-1"> |
| <h3 class="font-medium">Gita Basnet</h3> |
| <p class="text-sm text-gray-400">London, UK | Teacher</p> |
| <div class="flex space-x-2 mt-2"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1 rounded-full transition"> |
| Message |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white text-xs px-3 py-1 rounded-full transition"> |
| View Profile |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4 p-4 bg-gray-700 bg-opacity-50 rounded-lg"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Match" class="w-16 h-16 rounded-full"> |
| <div class="flex-1"> |
| <h3 class="font-medium">Hari Thapa</h3> |
| <p class="text-sm text-gray-400">Melbourne, Australia | Chef</p> |
| <div class="flex space-x-2 mt-2"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1 rounded-full transition"> |
| Message |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white text-xs px-3 py-1 rounded-full transition"> |
| View Profile |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4 p-4 bg-gray-700 bg-opacity-50 rounded-lg"> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Match" class="w-16 h-16 rounded-full"> |
| <div class="flex-1"> |
| <h3 class="font-medium">Sita Tamang</h3> |
| <p class="text-sm text-gray-400">Sydney, Australia | Nurse</p> |
| <div class="flex space-x-2 mt-2"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white text-xs px-3 py-1 rounded-full transition"> |
| Message |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white text-xs px-3 py-1 rounded-full transition"> |
| View Profile |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <button class="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg transition"> |
| View All Matches |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="settingsTab" class="profile-tab-content hidden"> |
| <div class="profile-card p-6 mb-6"> |
| <h2 class="text-xl font-bold mb-6">Account Settings</h2> |
| |
| <div class="space-y-6"> |
| <div> |
| <h3 class="font-medium text-gray-400 mb-3">Privacy</h3> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center"> |
| <span>Profile Visibility</span> |
| <select class="px-3 py-1 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white text-sm"> |
| <option>Public</option> |
| <option>Only Matches</option> |
| <option>Private</option> |
| </select> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>Show Distance</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer" checked> |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div> |
| </label> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>Show Age</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer" checked> |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div> |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-400 mb-3">Notifications</h3> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center"> |
| <span>New Matches</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer" checked> |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[' |
| </html> |
