roomify / index.html
Aidevi's picture
Add 3 files
d562d87 verified
Raw History Blame Contribute Delete
72 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Roommate Match - Find Your Perfect Roommate</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> .gradient-bg { background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); } .match-card { transition: all 0.3s ease; } .match-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .progress-bar { height: 6px; border-radius: 3px; background-color: #e0e0e0; } .progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6B73FF 0%, #000DFF 100%); transition: width 0.5s ease; } .checkbox-container input[type="checkbox"] { display: none; } .checkbox-container label { display: inline-block; padding: 8px 16px; border: 1px solid #ddd; border-radius: 20px; margin: 5px; cursor: pointer; transition: all 0.3s; } .checkbox-container input[type="checkbox"]:checked + label { background-color: #6B73FF; color: white; border-color: #6B73FF; } .slider { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: #e0e0e0; outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #6B73FF; cursor: pointer; } .slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #6B73FF; cursor: pointer; } .animate-pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } </style> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="gradient-bg text-white shadow-lg"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center space-x-2"> <i class="fas fa-home text-2xl"></i> <span class="text-xl font-bold">RoommateMatch</span> </div> <div class="hidden md:flex space-x-6"> <a href="#" class="hover:text-gray-200">Home</a> <a href="#" class="hover:text-gray-200">How It Works</a> <a href="#" class="hover:text-gray-200">Testimonials</a> <a href="#" class="hover:text-gray-200">Contact</a> </div> <div class="flex items-center space-x-4"> <button id="loginBtn" class="px-4 py-2 rounded-full hover:bg-blue-700 transition">Login</button> <button id="signupBtn" class="px-4 py-2 bg-white text-blue-600 rounded-full hover:bg-gray-100 transition">Sign Up</button> </div> </div> </nav> <!-- Hero Section --> <section class="gradient-bg text-white py-16"> <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-10 md:mb-0"> <h1 class="text-4xl md:text-5xl font-bold mb-4">Find Your Perfect Roommate</h1> <p class="text-xl mb-8">Our advanced matching algorithm connects you with compatible roommates based on your lifestyle, habits, and preferences.</p> <button id="getStartedBtn" class="px-8 py-3 bg-white text-blue-600 rounded-full text-lg font-semibold hover:bg-gray-100 transition animate-pulse">Get Started</button> </div> <div class="md:w-1/2 flex justify-center"> <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Happy roommates" class="rounded-lg shadow-2xl max-w-md w-full"> </div> </div> </section> <!-- How It Works --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">How It Works</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="text-center p-6 rounded-lg shadow-md hover:shadow-lg transition"> <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-user-edit text-blue-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 your lifestyle, habits, and preferences to help us find your perfect match.</p> </div> <div class="text-center p-6 rounded-lg shadow-md hover:shadow-lg transition"> <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-cogs text-blue-600 text-2xl"></i> </div> <h3 class="text-xl font-semibold mb-2">Our Algorithm Works</h3> <p class="text-gray-600">We analyze thousands of data points to find roommates with the highest compatibility.</p> </div> <div class="text-center p-6 rounded-lg shadow-md hover:shadow-lg transition"> <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-handshake text-blue-600 text-2xl"></i> </div> <h3 class="text-xl font-semibold mb-2">Connect & Move In</h3> <p class="text-gray-600">Review your matches, connect with potential roommates, and start your new living arrangement.</p> </div> </div> </div> </section> <!-- Questionnaire Section (Hidden Initially) --> <section id="questionnaireSection" class="py-16 bg-gray-50 hidden"> <div class="container mx-auto px-4 max-w-4xl"> <div class="bg-white rounded-lg shadow-lg p-8"> <div class="flex justify-between items-center mb-8"> <h2 class="text-2xl font-bold">Roommate Preferences Questionnaire</h2> <div class="text-gray-500"> <span id="currentStep">1</span>/<span id="totalSteps">7</span> </div> </div> <div class="progress-bar mb-8"> <div id="progressFill" class="progress-fill" style="width: 14%"></div> </div> <!-- Step 1: Basic Info --> <div id="step1" class="step-content"> <h3 class="text-xl font-semibold mb-6">Basic Information</h3> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 mb-2">First Name</label> <input type="text" id="firstName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label class="block text-gray-700 mb-2">Last Name</label> <input type="text" id="lastName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label class="block text-gray-700 mb-2">Email</label> <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label class="block text-gray-700 mb-2">Phone Number</label> <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label class="block text-gray-700 mb-2">Age</label> <input type="number" id="age" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label class="block text-gray-700 mb-2">Gender</label> <select id="gender" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="">Select</option> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> <option value="prefer-not-to-say">Prefer not to say</option> </select> </div> </div> </div> <!-- Step 2: Location Preferences --> <div id="step2" class="step-content hidden"> <h3 class="text-xl font-semibold mb-6">Location Preferences</h3> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 mb-2">Current State</label> <select id="state" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="">Select State</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <!-- Add all states --> <option value="WY">Wyoming</option> </select> </div> <div> <label class="block text-gray-700 mb-2">City</label> <input type="text" id="city" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label class="block text-gray-700 mb-2">Preferred Neighborhoods (select up to 3)</label> <div class="checkbox-container"> <input type="checkbox" id="neighborhood1" name="neighborhood" value="downtown"> <label for="neighborhood1">Downtown</label> <input type="checkbox" id="neighborhood2" name="neighborhood" value="suburban"> <label for="neighborhood2">Suburban</label> <input type="checkbox" id="neighborhood3" name="neighborhood" value="university"> <label for="neighborhood3">University Area</label> <input type="checkbox" id="neighborhood4" name="neighborhood" value="arts"> <label for="neighborhood4">Arts District</label> <input type="checkbox" id="neighborhood5" name="neighborhood" value="waterfront"> <label for="neighborhood5">Waterfront</label> </div> </div> <div> <label class="block text-gray-700 mb-2">Maximum Budget ($ per month)</label> <input type="range" min="500" max="3000" value="1500" class="slider mb-2" id="budgetSlider"> <div class="flex justify-between"> <span>$500</span> <span id="budgetValue">$1500</span> <span>$3000</span> </div> </div> </div> </div> <!-- Step 3: Lifestyle --> <div id="step3" class="step-content hidden"> <h3 class="text-xl font-semibold mb-6">Lifestyle & Habits</h3> <div class="space-y-6"> <div> <label class="block text-gray-700 mb-2">Sleep Schedule</label> <div class="flex items-center space-x-4"> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Early Bird</label> <input type="range" min="1" max="10" value="5" class="slider" id="sleepScheduleSlider"> </div> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Night Owl</label> </div> </div> </div> <div> <label class="block text-gray-700 mb-2">Cleanliness</label> <div class="flex items-center space-x-4"> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Messy</label> <input type="range" min="1" max="10" value="7" class="slider" id="cleanlinessSlider"> </div> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Neat Freak</label> </div> </div> </div> <div> <label class="block text-gray-700 mb-2">Social Level</label> <div class="flex items-center space-x-4"> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Introvert</label> <input type="range" min="1" max="10" value="5" class="slider" id="socialSlider"> </div> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Extrovert</label> </div> </div> </div> <div> <label class="block text-gray-700 mb-2">Do you smoke?</label> <div class="flex space-x-4"> <label class="inline-flex items-center"> <input type="radio" name="smoking" value="yes" class="h-4 w-4 text-blue-600"> <span class="ml-2">Yes</span> </label> <label class="inline-flex items-center"> <input type="radio" name="smoking" value="no" checked class="h-4 w-4 text-blue-600"> <span class="ml-2">No</span> </label> <label class="inline-flex items-center"> <input type="radio" name="smoking" value="sometimes" class="h-4 w-4 text-blue-600"> <span class="ml-2">Sometimes</span> </label> </div> </div> <div> <label class="block text-gray-700 mb-2">Do you drink alcohol?</label> <div class="flex space-x-4"> <label class="inline-flex items-center"> <input type="radio" name="alcohol" value="yes" class="h-4 w-4 text-blue-600"> <span class="ml-2">Yes</span> </label> <label class="inline-flex items-center"> <input type="radio" name="alcohol" value="no" checked class="h-4 w-4 text-blue-600"> <span class="ml-2">No</span> </label> <label class="inline-flex items-center"> <input type="radio" name="alcohol" value="socially" class="h-4 w-4 text-blue-600"> <span class="ml-2">Socially</span> </label> </div> </div> </div> </div> <!-- Step 4: Food Preferences --> <div id="step4" class="step-content hidden"> <h3 class="text-xl font-semibold mb-6">Food Preferences</h3> <div class="space-y-6"> <div> <label class="block text-gray-700 mb-2">Dietary Preferences</label> <div class="checkbox-container"> <input type="checkbox" id="vegetarian" name="diet" value="vegetarian"> <label for="vegetarian">Vegetarian</label> <input type="checkbox" id="vegan" name="diet" value="vegan"> <label for="vegan">Vegan</label> <input type="checkbox" id="glutenFree" name="diet" value="gluten-free"> <label for="glutenFree">Gluten-Free</label> <input type="checkbox" id="kosher" name="diet" value="kosher"> <label for="kosher">Kosher</label> <input type="checkbox" id="halal" name="diet" value="halal"> <label for="halal">Halal</label> <input type="checkbox" id="none" name="diet" value="none" checked> <label for="none">No Restrictions</label> </div> </div> <div> <label class="block text-gray-700 mb-2">Cooking Habits</label> <div class="flex items-center space-x-4"> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Eat Out</label> <input type="range" min="1" max="10" value="5" class="slider" id="cookingSlider"> </div> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Cook at Home</label> </div> </div> </div> <div> <label class="block text-gray-700 mb-2">Shared Groceries Preference</label> <div class="flex space-x-4"> <label class="inline-flex items-center"> <input type="radio" name="groceries" value="share" class="h-4 w-4 text-blue-600"> <span class="ml-2">Prefer to share groceries</span> </label> <label class="inline-flex items-center"> <input type="radio" name="groceries" value="separate" checked class="h-4 w-4 text-blue-600"> <span class="ml-2">Prefer separate groceries</span> </label> </div> </div> </div> </div> <!-- Step 5: Personality & Interests --> <div id="step5" class="step-content hidden"> <h3 class="text-xl font-semibold mb-6">Personality & Interests</h3> <div class="space-y-6"> <div> <label class="block text-gray-700 mb-2">Personality Type</label> <select id="personalityType" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="">Select (optional)</option> <option value="introvert">Introvert</option> <option value="extrovert">Extrovert</option> <option value="ambivert">Ambivert</option> </select> </div> <div> <label class="block text-gray-700 mb-2">MBTI Personality Type (optional)</label> <select id="mbti" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="">Select (optional)</option> <option value="INTJ">INTJ</option> <option value="INTP">INTP</option> <!-- Add all MBTI types --> <option value="ESFP">ESFP</option> <option value="ESTJ">ESTJ</option> <option value="ESFJ">ESFJ</option> <option value="ENFP">ENFP</option> <option value="ENTP">ENTP</option> <option value="ESTP">ESTP</option> </select> </div> <div> <label class="block text-gray-700 mb-2">Interests (select up to 5)</label> <div class="checkbox-container"> <input type="checkbox" id="sports" name="interests" value="sports"> <label for="sports">Sports</label> <input type="checkbox" id="music" name="interests" value="music"> <label for="music">Music</label> <input type="checkbox" id="reading" name="interests" value="reading"> <label for="reading">Reading</label> <input type="checkbox" id="gaming" name="interests" value="gaming"> <label for="gaming">Gaming</label> <input type="checkbox" id="travel" name="interests" value="travel"> <label for="travel">Travel</label> <input type="checkbox" id="cooking" name="interests" value="cooking"> <label for="cooking">Cooking</label> <input type="checkbox" id="art" name="interests" value="art"> <label for="art">Art</label> <input type="checkbox" id="technology" name="interests" value="technology"> <label for="technology">Technology</label> <input type="checkbox" id="fitness" name="interests" value="fitness"> <label for="fitness">Fitness</label> <input type="checkbox" id="movies" name="interests" value="movies"> <label for="movies">Movies</label> </div> </div> </div> </div> <!-- Step 6: Roommate Preferences --> <div id="step6" class="step-content hidden"> <h3 class="text-xl font-semibold mb-6">Ideal Roommate Preferences</h3> <div class="space-y-6"> <div> <label class="block text-gray-700 mb-2">Preferred Gender of Roommate</label> <div class="flex space-x-4"> <label class="inline-flex items-center"> <input type="radio" name="prefGender" value="male" class="h-4 w-4 text-blue-600"> <span class="ml-2">Male</span> </label> <label class="inline-flex items-center"> <input type="radio" name="prefGender" value="female" class="h-4 w-4 text-blue-600"> <span class="ml-2">Female</span> </label> <label class="inline-flex items-center"> <input type="radio" name="prefGender" value="no-preference" checked class="h-4 w-4 text-blue-600"> <span class="ml-2">No Preference</span> </label> </div> </div> <div> <label class="block text-gray-700 mb-2">Age Range Preference</label> <div class="grid md:grid-cols-2 gap-4"> <div> <label class="block text-sm text-gray-600 mb-1">Minimum Age</label> <select id="minAge" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="18">18</option> <option value="20">20</option> <option value="22">22</option> <option value="25" selected>25</option> <option value="30">30</option> </select> </div> <div> <label class="block text-sm text-gray-600 mb-1">Maximum Age</label> <select id="maxAge" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="25">25</option> <option value="30">30</option> <option value="35" selected>35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> <option value="65">65</option> <option value="70">70</option> </select> </div> </div> </div> <div> <label class="block text-gray-700 mb-2">How important is it that your roommate shares your interests?</label> <div class="flex items-center space-x-4"> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Not Important</label> <input type="range" min="1" max="10" value="5" class="slider" id="interestImportanceSlider"> </div> <div class="flex-1"> <label class="block text-sm text-gray-600 mb-1">Very Important</label> </div> </div> </div> <div> <label class="block text-gray-700 mb-2">Additional Preferences (optional)</label> <textarea id="additionalPrefs" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="E.g., prefer graduate students, pet-friendly, quiet environment, etc."></textarea> </div> </div> </div> <!-- Step 7: Review & Submit --> <div id="step7" class="step-content hidden"> <h3 class="text-xl font-semibold mb-6">Review Your Information</h3> <div class="bg-gray-50 p-6 rounded-lg mb-6"> <h4 class="font-semibold text-lg mb-4">Basic Information</h4> <div class="grid md:grid-cols-2 gap-4 mb-4"> <div> <p class="text-gray-600">Name:</p> <p id="reviewName" class="font-medium">John Doe</p> </div> <div> <p class="text-gray-600">Email:</p> <p id="reviewEmail" class="font-medium">john.doe@example.com</p> </div> <div> <p class="text-gray-600">Age:</p> <p id="reviewAge" class="font-medium">28</p> </div> <div> <p class="text-gray-600">Gender:</p> <p id="reviewGender" class="font-medium">Male</p> </div> </div> <h4 class="font-semibold text-lg mb-4 mt-6">Location Preferences</h4> <div class="grid md:grid-cols-2 gap-4 mb-4"> <div> <p class="text-gray-600">Location:</p> <p id="reviewLocation" class="font-medium">New York, NY</p> </div> <div> <p class="text-gray-600">Budget:</p> <p id="reviewBudget" class="font-medium">$1500/month</p> </div> </div> <h4 class="font-semibold text-lg mb-4 mt-6">Lifestyle</h4> <div class="grid md:grid-cols-2 gap-4 mb-4"> <div> <p class="text-gray-600">Sleep Schedule:</p> <p id="reviewSleep" class="font-medium">Balanced</p> </div> <div> <p class="text-gray-600">Cleanliness:</p> <p id="reviewClean" class="font-medium">Neat</p> </div> <div> <p class="text-gray-600">Social Level:</p> <p id="reviewSocial" class="font-medium">Moderate</p> </div> <div> <p class="text-gray-600">Smoking:</p> <p id="reviewSmoking" class="font-medium">No</p> </div> </div> <h4 class="font-semibold text-lg mb-4 mt-6">Food Preferences</h4> <div class="mb-4"> <p class="text-gray-600">Dietary Preferences:</p> <p id="reviewDiet" class="font-medium">No restrictions</p> </div> <h4 class="font-semibold text-lg mb-4 mt-6">Roommate Preferences</h4> <div class="grid md:grid-cols-2 gap-4"> <div> <p class="text-gray-600">Preferred Gender:</p> <p id="reviewPrefGender" class="font-medium">No preference</p> </div> <div> <p class="text-gray-600">Age Range:</p> <p id="reviewAgeRange" class="font-medium">25-35</p> </div> </div> </div> <div class="mb-6"> <label class="inline-flex items-center"> <input type="checkbox" class="h-4 w-4 text-blue-600" id="agreeTerms"> <span class="ml-2">I agree to the <a href="#" class="text-blue-600 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a></span> </label> </div> </div> <!-- Navigation Buttons --> <div class="flex justify-between mt-8"> <button id="prevBtn" class="px-6 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition hidden">Previous</button> <button id="nextBtn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition ml-auto">Next</button> <button id="submitBtn" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition hidden">Submit</button> </div> </div> </div> </section> <!-- Matching Results Section (Hidden Initially) --> <section id="resultsSection" class="py-16 bg-gray-50 hidden"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-4">Your Roommate Matches</h2> <p class="text-center text-gray-600 mb-12">Based on your preferences, we've found these compatible roommates for you.</p> <div class="flex justify-center mb-8"> <div class="relative w-full max-w-2xl"> <input type="text" placeholder="Filter matches by location, interests, etc." class="w-full px-6 py-3 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 pl-12"> <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i> </div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="matchesContainer"> <!-- Matches will be inserted here by JavaScript --> </div> <div class="text-center mt-12"> <button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Load More Matches</button> </div> </div> </section> <!-- Testimonials --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Success Stories</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-blue-600"></i> </div> <div> <h4 class="font-semibold">Sarah K.</h4> <p class="text-gray-600 text-sm">New York, NY</p> </div> </div> <p class="text-gray-700">"I was skeptical at first, but the matching algorithm really works! My roommate and I have been living together for 8 months now and it's been perfect."</p> <div class="flex mt-4"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> </div> <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-blue-600"></i> </div> <div> <h4 class="font-semibold">Michael T.</h4> <p class="text-gray-600 text-sm">Austin, TX</p> </div> </div> <p class="text-gray-700">"As an introvert, finding a compatible roommate was crucial for me. RoommateMatch paired me with someone who respects my need for quiet time."</p> <div class="flex mt-4"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> </div> <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-blue-600"></i> </div> <div> <h4 class="font-semibold">Priya M.</h4> <p class="text-gray-600 text-sm">San Francisco, CA</p> </div> </div> <p class="text-gray-700">"The detailed questionnaire made all the difference. My roommate and I share similar schedules, cleanliness standards, and even food preferences!"</p> <div class="flex mt-4"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star-half-alt text-yellow-400"></i> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-800 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-4 gap-8"> <div> <h3 class="text-xl font-bold mb-4">RoommateMatch</h3> <p class="text-gray-400">Finding you the perfect roommate based on compatibility, lifestyle, and preferences.</p> </div> <div> <h4 class="font-semibold mb-4">Quick Links</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">How It Works</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Testimonials</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Legal</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Connect With Us</h4> <div class="flex space-x-4"> <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-400 transition"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600 transition"> <i class="fab fa-instagram"></i> </a> <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition"> <i class="fab fa-youtube"></i> </a> </div> <div class="mt-4"> <p class="text-gray-400">support@roommatematch.com</p> <p class="text-gray-400">+1 (555) 123-4567</p> </div> </div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> <p>&copy; 2023 RoommateMatch. All rights reserved.</p> </div> </div> </footer> <!-- Login Modal (Hidden Initially) --> <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold">Login</h3> <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700"> <i class="fas fa-times"></i> </button> </div> <form id="loginForm"> <div class="mb-4"> <label class="block text-gray-700 mb-2">Email</label> <input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> </div> <div class="mb-6"> <label class="block text-gray-700 mb-2">Password</label> <input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> </div> <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition mb-4">Login</button> <div class="text-center"> <a href="#" class="text-blue-600 hover:underline">Forgot password?</a> </div> </form> <div class="border-t border-gray-200 mt-6 pt-6 text-center"> <p class="text-gray-600">Don't have an account? <a href="#" class="text-blue-600 hover:underline" id="switchToSignup">Sign up</a></p> </div> </div> </div> <!-- Signup Modal (Hidden Initially) --> <div id="signupModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold">Sign Up</h3> <button id="closeSignupModal" class="text-gray-500 hover:text-gray-700"> <i class="fas fa-times"></i> </button> </div> <form id="signupForm"> <div class="mb-4"> <label class="block text-gray-700 mb-2">Full Name</label> <input type="text" id="signupName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Email</label> <input type="email" id="signupEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Password</label> <input type="password" id="signupPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> </div> <div class="mb-6"> <label class="block text-gray-700 mb-2">Confirm Password</label> <input type="password" id="signupConfirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> </div> <div class="mb-4"> <label class="inline-flex items-center"> <input type="checkbox" class="h-4 w-4 text-blue-600" required> <span class="ml-2">I agree to the <a href="#" class="text-blue-600 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a></span> </label> </div> <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition mb-4">Create Account</button> </form> <div class="border-t border-gray-200 mt-6 pt-6 text-center"> <p class="text-gray-600">Already have an account? <a href="#" class="text-blue-600 hover:underline" id="switchToLogin">Login</a></p> </div> </div> </div> <!-- Backend Simulation --> <script> // Backend simulation using localStorage class Backend { constructor() { this.users = JSON.parse(localStorage.getItem('roommateMatchUsers')) || []; this.profiles = JSON.parse(localStorage.getItem('roommateMatchProfiles')) || []; this.currentUser = null; } // User authentication signup(name, email, password) { if (this.users.some(user => user.email === email)) { return { success: false, message: 'Email already exists' }; } const user = { id: this.generateId(), name, email, password, // In a real app, passwords should be hashed createdAt: new Date().toISOString() }; this.users.push(user); localStorage.setItem('roommateMatchUsers', JSON.stringify(this.users)); this.currentUser = user; return { success: true, user }; } login(email, password) { const user = this.users.find(u => u.email === email && u.password === password); if (user) { this.currentUser = user; return { success: true, user }; } return { success: false, message: 'Invalid email or password' }; } logout() { this.currentUser = null; } // Profile management saveProfile(profileData) { if (!this.currentUser) { return { success: false, message: 'Not authenticated' }; } // Check if profile already exists for this user const existingIndex = this.profiles.findIndex(p => p.userId === this.currentUser.id); const profile = { userId: this.currentUser.id, ...profileData, updatedAt: new Date().toISOString() }; if (existingIndex >= 0) { this.profiles[existingIndex] = profile; } else { this.profiles.push(profile); } localStorage.setItem('roommateMatchProfiles', JSON.stringify(this.profiles)); return { success: true, profile }; } getProfile(userId) { return this.profiles.find(p => p.userId === userId); } // Matching algorithm findMatches(userId) { const userProfile = this.getProfile(userId); if (!userProfile) return []; // Simple matching algorithm - in a real app this would be more sophisticated return this.profiles .filter(profile => profile.userId !== userId) // Don't match with yourself .map(profile => { // Calculate compatibility score (0-100) let score = 0; // Location match if (profile.state === userProfile.state && profile.city === userProfile.city) { score += 20; } // Budget match (within 20%) const userBudget = parseInt(userProfile.budget); const profileBudget = parseInt(profile.budget); if (Math.abs(userBudget - profileBudget) <= (userBudget * 0.2)) { score += 15; } // Lifestyle match const sleepDiff = Math.abs(userProfile.sleepSchedule - profile.sleepSchedule); score += (10 - sleepDiff) * 1.5; const cleanDiff = Math.abs(userProfile.cleanliness - profile.cleanliness); score += (10 - cleanDiff) * 1.5; const socialDiff = Math.abs(userProfile.socialLevel - profile.socialLevel); score += (10 - socialDiff) * 1; // Smoking/drinking compatibility if (userProfile.smoking === profile.smoking) score += 10; if (userProfile.alcohol === profile.alcohol) score += 5; // Dietary preferences const userDiets = userProfile.dietaryPreferences || []; const profileDiets = profile.dietaryPreferences || []; const dietMatch = userDiets.some(diet => profileDiets.includes(diet)); if (dietMatch) score += 10; // Interests match const userInterests = userProfile.interests || []; const profileInterests = profile.interests || []; const commonInterests = userInterests.filter(interest => profileInterests.includes(interest) ).length; score += commonInterests * 2; // Cap at 100 score = Math.min(100, Math.round(score)); return { ...profile, compatibility: score }; }) .filter(match => match.compatibility >= 70) // Only show reasonably compatible matches .sort((a, b) => b.compatibility - a.compatibility); // Sort by compatibility } // Helper methods generateId() { return Math.random().toString(36).substr(2, 9); } } // Initialize backend const backend = new Backend(); </script> <!-- Frontend JavaScript --> <script> // DOM Elements const loginBtn = document.getElementById('loginBtn'); const signupBtn = document.getElementById('signupBtn'); const getStartedBtn = document.getElementById('getStartedBtn'); const loginModal = document.getElementById('loginModal'); const signupModal = document.getElementById('signupModal'); const closeLoginModal = document.getElementById('closeLoginModal'); const closeSignupModal = document.getElementById('closeSignupModal'); const questionnaireSection = document.getElementById('questionnaireSection'); const resultsSection = document.getElementById('resultsSection'); const switchToSignup = document.getElementById('switchToSignup'); const switchToLogin = document.getElementById('switchToLogin'); const loginForm = document.getElementById('loginForm'); const signupForm = document.getElementById('signupForm'); // Questionnaire navigation const currentStepEl = document.getElementById('currentStep'); const totalStepsEl = document.getElementById('totalSteps'); const progressFill = document.getElementById('progressFill'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const submitBtn = document.getElementById('submitBtn'); const stepContents = document.querySelectorAll('.step-content'); // Sliders const budgetSlider = document.getElementById('budgetSlider'); const budgetValue = document.getElementById('budgetValue'); // Current step tracking let currentStep = 1; const totalSteps = 7; // Event Listeners loginBtn.addEventListener('click', () => { loginModal.classList.remove('hidden'); }); signupBtn.addEventListener('click', () => { signupModal.classList.remove('hidden'); }); closeLoginModal.addEventListener('click', () => { loginModal.classList.add('hidden'); }); closeSignupModal.addEventListener('click', () => { signupModal.classList.add('hidden'); }); switchToSignup.addEventListener('click', (e) => { e.preventDefault(); loginModal.classList.add('hidden'); signupModal.classList.remove('hidden'); }); switchToLogin.addEventListener('click', (e) => { e.preventDefault(); signupModal.classList.add('hidden'); loginModal.classList.remove('hidden'); }); getStartedBtn.addEventListener('click', () => { questionnaireSection.classList.remove('hidden'); document.querySelector('html').scrollTop = 0; }); // Close modals when clicking outside window.addEventListener('click', (e) => { if (e.target === loginModal) { loginModal.classList.add('hidden'); } if (e.target === signupModal) { signupModal.classList.add('hidden'); } }); // Form submissions loginForm.addEventListener('submit', (e) => { e.preventDefault(); const email = document.getElementById('loginEmail').value; const password = document.getElementById('loginPassword').value; const result = backend.login(email, password); if (result.success) { alert('Login successful!'); loginModal.classList.add('hidden'); // Update UI for logged in user loginBtn.textContent = 'Logout'; signupBtn.classList.add('hidden'); } else { alert(result.message); } }); signupForm.addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('signupName').value; const email = document.getElementById('signupEmail').value; const password = document.getElementById('signupPassword').value; const confirmPassword = document.getElementById('signupConfirmPassword').value; if (password !== confirmPassword) { alert('Passwords do not match'); return; } const result = backend.signup(name, email, password); if (result.success) { alert('Account created successfully!'); signupModal.classList.add('hidden'); // Update UI for logged in user loginBtn.textContent = 'Logout'; signupBtn.classList.add('hidden'); } else { alert(result.message); } }); // Questionnaire navigation nextBtn.addEventListener('click', () => { if (currentStep < totalSteps) { currentStep++; updateStep(); } }); prevBtn.addEventListener('click', () => { if (currentStep > 1) { currentStep--; updateStep(); } }); submitBtn.addEventListener('click', () => { if (!document.getElementById('agreeTerms').checked) { alert('Please agree to the terms and conditions'); return; } // Collect all form data const profileData = { // Basic info firstName: document.getElementById('firstName').value, lastName: document.getElementById('lastName').value, email: document.getElementById('email').value, phone: document.getElementById('phone').value, age: parseInt(document.getElementById('age').value), gender: document.getElementById('gender').value, // Location state: document.getElementById('state').value, city: document.getElementById('city').value, neighborhoods: Array.from(document.querySelectorAll('input[name="neighborhood"]:checked')).map(el => el.value), budget: budgetSlider.value, // Lifestyle sleepSchedule: parseInt(document.getElementById('sleepScheduleSlider').value), cleanliness: parseInt(document.getElementById('cleanlinessSlider').value), socialLevel: parseInt(document.getElementById('socialSlider').value), smoking: document.querySelector('input[name="smoking"]:checked').value, alcohol: document.querySelector('input[name="alcohol"]:checked').value, // Food dietaryPreferences: Array.from(document.querySelectorAll('input[name="diet"]:checked')).map(el => el.value), cookingHabits: parseInt(document.getElementById('cookingSlider').value), groceriesPreference: document.querySelector('input[name="groceries"]:checked').value, // Personality personalityType: document.getElementById('personalityType').value, mbti: document.getElementById('mbti').value, interests: Array.from(document.querySelectorAll('input[name="interests"]:checked')).map(el => el.value), // Roommate preferences preferredGender: document.querySelector('input[name="prefGender"]:checked').value, minAge: parseInt(document.getElementById('minAge').value), maxAge: parseInt(document.getElementById('maxAge').value), interestImportance: parseInt(document.getElementById('interestImportanceSlider').value), additionalPreferences: document.getElementById('additionalPrefs').value }; // Save profile to backend const result = backend.saveProfile(profileData); if (result.success) { questionnaireSection.classList.add('hidden'); resultsSection.classList.remove('hidden'); displayMatches(); } else { alert('Error saving profile: ' + result.message); } }); // Slider updates budgetSlider.addEventListener('input', () => { budgetValue.textContent = '$' + budgetSlider.value; }); // Initialize totalStepsEl.textContent = totalSteps; // Functions function updateStep() { // Update UI currentStepEl.textContent = currentStep; progressFill.style.width = `${(currentStep / totalSteps) * 100}%`; // Show/hide step content stepContents.forEach((content, index) => { if (index === currentStep - 1) { content.classList.remove('hidden'); } else { content.classList.add('hidden'); } }); // Update navigation buttons if (currentStep === 1) { prevBtn.classList.add('hidden'); } else { prevBtn.classList.remove('hidden'); } if (currentStep === totalSteps) { nextBtn.classList.add('hidden'); submitBtn.classList.remove('hidden'); } else { nextBtn.classList.remove('hidden'); submitBtn.classList.add('hidden'); } // Update review section (for step 7) if (currentStep === 7) { updateReviewSection(); } } function updateReviewSection() { // Get values from form const firstName = document.getElementById('firstName').value; const lastName = document.getElementById('lastName').value; const email = document.getElementById('email').value; const age = document.getElementById('age').value; const gender = document.getElementById('gender').value; const state = document.getElementById('state').value; const city = document.getElementById('city').value; const budget = budgetSlider.value; const sleep = document.getElementById('sleepScheduleSlider').value; const clean = document.getElementById('cleanlinessSlider').value; const social = document.getElementById('socialSlider').value; const smoking = document.querySelector('input[name="smoking"]:checked').value; const diets = Array.from(document.querySelectorAll('input[name="diet"]:checked')).map(el => el.value); const prefGender = document.querySelector('input[name="prefGender"]:checked').value; const minAge = document.getElementById('minAge').value; const maxAge = document.getElementById('maxAge').value; // Update review fields document.getElementById('reviewName').textContent = `${firstName} ${lastName}`; document.getElementById('reviewEmail').textContent = email; document.getElementById('reviewAge').textContent = age; document.getElementById('reviewGender').textContent = gender; document.getElementById('reviewLocation').textContent = `${city}, ${state}`; document.getElementById('reviewBudget').textContent = `$${budget}/month`; // Map slider values to text const sleepText = sleep < 4 ? 'Night Owl' : sleep > 7 ? 'Early Bird' : 'Balanced'; const cleanText = clean < 4 ? 'Messy' : clean > 7 ? 'Neat Freak' : 'Average'; const socialText = social < 4 ? 'Introvert' : social > 7 ? 'Extrovert' : 'Moderate'; document.getElementById('reviewSleep').textContent = sleepText; document.getElementById('reviewClean').textContent = cleanText; document.getElementById('reviewSocial').textContent = socialText; document.getElementById('reviewSmoking').textContent = smoking === 'no' ? 'No' : smoking === 'yes' ? 'Yes' : 'Sometimes'; document.getElementById('reviewDiet').textContent = diets.length ? diets.join(', ') : 'No restrictions'; document.getElementById('reviewPrefGender').textContent = prefGender === 'no-preference' ? 'No preference' : prefGender === 'male' ? 'Male' : 'Female'; document.getElementById('reviewAgeRange').textContent = `${minAge}-${maxAge}`; } function displayMatches() { if (!backend.currentUser) return; const matches = backend.findMatches(backend.currentUser.id); const matchesContainer = document.getElementById('matchesContainer'); matchesContainer.innerHTML = ''; if (matches.length === 0) { matchesContainer.innerHTML = '<p class="text-center col-span-3 text-gray-600">No matches found yet. Check back later or adjust your preferences.</p>'; return; } matches.forEach(match => { const matchCard = document.createElement('div'); matchCard.className = 'bg-white rounded-lg shadow-md overflow-hidden match-card'; matchCard.innerHTML = ` <div class="relative"> <img src="https://randomuser.me/api/portraits/${match.gender === 'female' ? 'women' : 'men'}/${Math.floor(Math.random() * 100)}.jpg" alt="${match.firstName}" class="w-full h-48 object-cover"> <div class="absolute top-4 right-4 bg-white rounded-full w-12 h-12 flex items-center justify-center shadow-md"> <span class="font-bold text-blue-600">${match.compatibility}%</span> </div> </div> <div class="p-6"> <div class="flex justify-between items-start mb-2"> <h3 class="text-xl font-bold">${match.firstName} ${match.lastName}, ${match.age}</h3> <span class="text-gray-600">${match.city}, ${match.state}</span> </div> <p class="text-gray-600 mb-4">Budget: $${match.budget}/month</p> <p class="text-gray-700 mb-4">${match.personalityType ? `${match.personalityType.charAt(0).toUpperCase() + match.personalityType.slice(1)}` : ''} ${match.mbti ? `(${match.mbti})` : ''}</p> <div class="mb-4"> <h4 class="font-semibold mb-2">Habits</h4> <div class="flex flex-wrap"> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full mr-2 mb-2">${match.sleepSchedule < 4 ? 'Night Owl' : match.sleepSchedule > 7 ? 'Early Bird' : 'Balanced Sleeper'}</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full mr-2 mb-2">${match.cleanliness < 4 ? 'Messy' : match.cleanliness > 7 ? 'Neat Freak' : 'Average Cleanliness'}</span> <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full mr-2 mb-2">${match.smoking === 'no' ? 'Non-smoker' : match.smoking === 'yes' ? 'Smoker' : 'Occasional smoker'}</span> </div> </div> <div class="mb-4"> <h4 class="font-semibold mb-2">Interests</h4> <div class="flex flex-wrap"> ${match.interests ? match.interests.slice(0, 5).map(interest => `<span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full mr-2 mb-2">${interest}</span>`).join('') : ''} </div> </div> <div class="flex space-x-3 mt-6"> <button class="flex-1 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition">View Profile</button> <button class="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Message</button> </div> </div> `; matchesContainer.appendChild(matchCard); }); } </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=Aidevi/roomify" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roommate Match - Find Your Perfect Roommate</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>
.gradient-bg {
background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
}
.match-card {
transition: all 0.3s ease;
}
.match-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.progress-bar {
height: 6px;
border-radius: 3px;
background-color: #e0e0e0;
}
.progress-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #6B73FF 0%, #000DFF 100%);
transition: width 0.5s ease;
}
.checkbox-container input[type="checkbox"] {
display: none;
}
.checkbox-container label {
display: inline-block;
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 20px;
margin: 5px;
cursor: pointer;
transition: all 0.3s;
}
.checkbox-container input[type="checkbox"]:checked + label {
background-color: #6B73FF;
color: white;
border-color: #6B73FF;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: #e0e0e0;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6B73FF;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6B73FF;
cursor: pointer;
}
.animate-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-home text-2xl"></i>
<span class="text-xl font-bold">RoommateMatch</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-200">Home</a>
<a href="#" class="hover:text-gray-200">How It Works</a>
<a href="#" class="hover:text-gray-200">Testimonials</a>
<a href="#" class="hover:text-gray-200">Contact</a>