Hugging Face's logo

Spaces:
Aidevi
/
roomify
Running

App Files Community
roomify / index.html
Aidevi's picture
Aidevi
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>