Hugging Face's logo

Spaces:
Aidevi
/
roomify-modified
Running

App Files Community
Aidevi commited on
Commit
56c9089
·
verified ·
1 Parent(s): 8191991

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +904 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Roomify Modified
3
- emoji: 💻
4
- colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: roomify-modified
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,904 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Roomify - Find Your Perfect Roommate</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6b21a8 0%, #9333ea 100%);
12
+ }
13
+ .room-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .testimonial-card {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .testimonial-card:hover {
21
+ transform: scale(1.03);
22
+ }
23
+ #preferenceForm {
24
+ scroll-margin-top: 100px;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="font-sans bg-gray-50">
29
+ <!-- Header -->
30
+ <header class="gradient-bg text-white shadow-lg">
31
+ <div class="container mx-auto px-4 py-6">
32
+ <div class="flex justify-between items-center">
33
+ <div class="flex items-center space-x-2">
34
+ <i class="fas fa-home text-2xl"></i>
35
+ <h1 class="text-2xl font-bold">Roomify</h1>
36
+ </div>
37
+ <nav class="hidden md:flex space-x-8">
38
+ <a href="#home" class="hover:text-purple-200 transition">Home</a>
39
+ <a href="#about" class="hover:text-purple-200 transition">About Us</a>
40
+ <a href="#services" class="hover:text-purple-200 transition">Services</a>
41
+ <a href="#locations" class="hover:text-purple-200 transition">Locations</a>
42
+ <a href="#testimonials" class="hover:text-purple-200 transition">Testimonials</a>
43
+ <a href="#contact" class="hover:text-purple-200 transition">Contact</a>
44
+ </nav>
45
+ <button class="md:hidden text-xl" id="mobileMenuButton">
46
+ <i class="fas fa-bars"></i>
47
+ </button>
48
+ </div>
49
+ </div>
50
+
51
+ <!-- Mobile Menu -->
52
+ <div class="md:hidden hidden bg-purple-900 py-4" id="mobileMenu">
53
+ <div class="container mx-auto px-4 flex flex-col space-y-4">
54
+ <a href="#home" class="hover:text-purple-200 transition">Home</a>
55
+ <a href="#about" class="hover:text-purple-200 transition">About Us</a>
56
+ <a href="#services" class="hover:text-purple-200 transition">Services</a>
57
+ <a href="#locations" class="hover:text-purple-200 transition">Locations</a>
58
+ <a href="#testimonials" class="hover:text-purple-200 transition">Testimonials</a>
59
+ <a href="#contact" class="hover:text-purple-200 transition">Contact</a>
60
+ </div>
61
+ </div>
62
+ </header>
63
+
64
+ <!-- Hero Section -->
65
+ <section id="home" class="gradient-bg text-white py-20">
66
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
67
+ <div class="md:w-1/2 mb-10 md:mb-0">
68
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Find Your Perfect Roommate in Karnataka</h1>
69
+ <p class="text-xl mb-8">Roomify matches you with compatible roommates based on your preferences, lifestyle, and budget.</p>
70
+ <a href="#preferenceForm" class="bg-white text-purple-800 px-8 py-3 rounded-full font-semibold hover:bg-purple-100 transition inline-block">Find a Roommate</a>
71
+ </div>
72
+ <div class="md:w-1/2 flex justify-center">
73
+ <img src="https://images.unsplash.com/photo-1554469384-e58f16ae882d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Happy roommates" class="rounded-lg shadow-2xl max-w-full h-auto">
74
+ </div>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Preference Form -->
79
+ <section id="preferenceForm" class="py-16 bg-white">
80
+ <div class="container mx-auto px-4">
81
+ <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Tell Us Your Preferences</h2>
82
+
83
+ <form id="roommateForm" class="max-w-3xl mx-auto bg-gray-100 p-8 rounded-lg shadow-lg">
84
+ <div class="grid md:grid-cols-2 gap-6">
85
+ <!-- Personal Info -->
86
+ <div class="md:col-span-2">
87
+ <h3 class="text-xl font-semibold mb-4 text-purple-800">Personal Information</h3>
88
+ </div>
89
+ <div>
90
+ <label for="name" class="block mb-2 font-medium">Full Name</label>
91
+ <input type="text" id="name" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
92
+ </div>
93
+ <div>
94
+ <label for="age" class="block mb-2 font-medium">Age</label>
95
+ <input type="number" id="age" min="18" max="60" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
96
+ </div>
97
+ <div>
98
+ <label for="gender" class="block mb-2 font-medium">Gender</label>
99
+ <select id="gender" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
100
+ <option value="">Select</option>
101
+ <option value="male">Male</option>
102
+ <option value="female">Female</option>
103
+ <option value="other">Other</option>
104
+ </select>
105
+ </div>
106
+ <div>
107
+ <label for="education" class="block mb-2 font-medium">Education Level</label>
108
+ <select id="education" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
109
+ <option value="">Select</option>
110
+ <option value="ug">Undergraduate (UG)</option>
111
+ <option value="pg">Postgraduate (PG)</option>
112
+ <option value="working">Working Professional</option>
113
+ </select>
114
+ </div>
115
+
116
+ <!-- Location Preferences -->
117
+ <div class="md:col-span-2 mt-6">
118
+ <h3 class="text-xl font-semibold mb-4 text-purple-800">Location Preferences</h3>
119
+ </div>
120
+ <div class="md:col-span-2">
121
+ <label for="city" class="block mb-2 font-medium">Preferred City in Karnataka</label>
122
+ <select id="city" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
123
+ <option value="">Select City</option>
124
+ <option value="bangalore">Bangalore</option>
125
+ <option value="mysore">Mysore</option>
126
+ <option value="hubli">Hubli</option>
127
+ <option value="mangalore">Mangalore</option>
128
+ <option value="belgaum">Belgaum</option>
129
+ <option value="udupi">Udupi</option>
130
+ <option value="manipal">Manipal</option>
131
+ <option value="dharwad">Dharwad</option>
132
+ <option value="gulbarga">Gulbarga</option>
133
+ <option value="shimoga">Shimoga</option>
134
+ </select>
135
+ </div>
136
+
137
+ <!-- Lifestyle Preferences -->
138
+ <div class="md:col-span-2 mt-6">
139
+ <h3 class="text-xl font-semibold mb-4 text-purple-800">Lifestyle Preferences</h3>
140
+ </div>
141
+ <div>
142
+ <label for="food" class="block mb-2 font-medium">Food Habit</label>
143
+ <select id="food" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
144
+ <option value="">Select</option>
145
+ <option value="vegetarian">Vegetarian</option>
146
+ <option value="non-vegetarian">Non-Vegetarian</option>
147
+ <option value="vegan">Vegan</option>
148
+ </select>
149
+ </div>
150
+ <div>
151
+ <label for="language" class="block mb-2 font-medium">Preferred Language</label>
152
+ <select id="language" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
153
+ <option value="">Select</option>
154
+ <option value="kannada">Kannada</option>
155
+ <option value="hindi">Hindi</option>
156
+ <option value="english">English</option>
157
+ <option value="tamil">Tamil</option>
158
+ <option value="telugu">Telugu</option>
159
+ <option value="malayalam">Malayalam</option>
160
+ </select>
161
+ </div>
162
+ <div>
163
+ <label for="budget" class="block mb-2 font-medium">Monthly Budget (₹)</label>
164
+ <select id="budget" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
165
+ <option value="">Select</option>
166
+ <option value="5000-10000">₹5,000 - ₹10,000</option>
167
+ <option value="10000-15000">₹10,000 - ₹15,000</option>
168
+ <option value="15000-20000">₹15,000 - ₹20,000</option>
169
+ <option value="20000-25000">₹20,000 - ₹25,000</option>
170
+ <option value="25000+">₹25,000+</option>
171
+ </select>
172
+ </div>
173
+ <div>
174
+ <label for="roomType" class="block mb-2 font-medium">Room Type</label>
175
+ <select id="roomType" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
176
+ <option value="">Select</option>
177
+ <option value="single">Single Room</option>
178
+ <option value="shared">Shared Room</option>
179
+ <option value="studio">Studio Apartment</option>
180
+ </select>
181
+ </div>
182
+
183
+ <!-- Additional Preferences -->
184
+ <div class="md:col-span-2 mt-6">
185
+ <h3 class="text-xl font-semibold mb-4 text-purple-800">Additional Preferences</h3>
186
+ </div>
187
+ <div class="md:col-span-2">
188
+ <label class="block mb-2 font-medium">Roommate Qualities (Select all that apply)</label>
189
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
190
+ <div class="flex items-center">
191
+ <input type="checkbox" id="clean" class="mr-2">
192
+ <label for="clean">Clean</label>
193
+ </div>
194
+ <div class="flex items-center">
195
+ <input type="checkbox" id="quiet" class="mr-2">
196
+ <label for="quiet">Quiet</label>
197
+ </div>
198
+ <div class="flex items-center">
199
+ <input type="checkbox" id="social" class="mr-2">
200
+ <label for="social">Social</label>
201
+ </div>
202
+ <div class="flex items-center">
203
+ <input type="checkbox" id="studious" class="mr-2">
204
+ <label for="studious">Studious</label>
205
+ </div>
206
+ <div class="flex items-center">
207
+ <input type="checkbox" id="petFriendly" class="mr-2">
208
+ <label for="petFriendly">Pet Friendly</label>
209
+ </div>
210
+ <div class="flex items-center">
211
+ <input type="checkbox" id="nonSmoker" class="mr-2">
212
+ <label for="nonSmoker">Non-Smoker</label>
213
+ </div>
214
+ <div class="flex items-center">
215
+ <input type="checkbox" id="earlyBird" class="mr-2">
216
+ <label for="earlyBird">Early Bird</label>
217
+ </div>
218
+ <div class="flex items-center">
219
+ <input type="checkbox" id="nightOwl" class="mr-2">
220
+ <label for="nightOwl">Night Owl</label>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="md:col-span-2">
226
+ <label for="additionalInfo" class="block mb-2 font-medium">Additional Information</label>
227
+ <textarea id="additionalInfo" rows="3" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Any other preferences or information you'd like to share..."></textarea>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="mt-8 text-center">
232
+ <button type="submit" class="gradient-bg text-white px-10 py-3 rounded-full font-semibold hover:opacity-90 transition">Find My Match</button>
233
+ </div>
234
+ </form>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Results Section (Initially Hidden) -->
239
+ <section id="resultsSection" class="py-16 bg-gray-100 hidden">
240
+ <div class="container mx-auto px-4">
241
+ <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Your Roommate Matches</h2>
242
+
243
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="matchesContainer">
244
+ <!-- Matches will be inserted here by JavaScript -->
245
+ </div>
246
+
247
+ <div class="text-center mt-10">
248
+ <button id="backToForm" class="bg-purple-800 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-700 transition">Adjust Preferences</button>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- About Us Section -->
254
+ <section id="about" class="py-16 bg-white">
255
+ <div class="container mx-auto px-4">
256
+ <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">About Roomify</h2>
257
+
258
+ <div class="flex flex-col md:flex-row items-center gap-10">
259
+ <div class="md:w-1/2">
260
+ <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Roomify" class="rounded-lg shadow-lg w-full">
261
+ </div>
262
+ <div class="md:w-1/2">
263
+ <h3 class="text-2xl font-semibold mb-4 text-purple-800">Our Story</h3>
264
+ <p class="mb-4 text-gray-700">Roomify was founded in 2023 with a simple mission: to make finding the perfect roommate in Karnataka as easy and stress-free as possible. We understand that your living situation can make or break your experience in a new city.</p>
265
+ <p class="mb-4 text-gray-700">Our team of housing experts and matchmaking specialists have developed a unique algorithm that considers all the important factors - from lifestyle preferences to budget constraints - to help you find your ideal living situation.</p>
266
+ <p class="text-gray-700">Whether you're a student, young professional, or relocating to Karnataka, Roomify is here to help you find not just a place to live, but a place to call home.</p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Services Section -->
273
+ <section id="services" class="py-16 bg-gray-100">
274
+ <div class="container mx-auto px-4">
275
+ <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Our Services</h2>
276
+
277
+ <div class="grid md:grid-cols-3 gap-8">
278
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition">
279
+ <div class="text-purple-600 mb-4">
280
+ <i class="fas fa-user-friends text-4xl"></i>
281
+ </div>
282
+ <h3 class="text-xl font-semibold mb-3">Roommate Matching</h3>
283
+ <p class="text-gray-700">Our advanced algorithm matches you with compatible roommates based on your lifestyle, habits, and preferences to ensure a harmonious living environment.</p>
284
+ </div>
285
+
286
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition">
287
+ <div class="text-purple-600 mb-4">
288
+ <i class="fas fa-home text-4xl"></i>
289
+ </div>
290
+ <h3 class="text-xl font-semibold mb-3">Verified Listings</h3>
291
+ <p class="text-gray-700">All our listings are personally verified by our team to ensure they meet our quality standards and match the description provided.</p>
292
+ </div>
293
+
294
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition">
295
+ <div class="text-purple-600 mb-4">
296
+ <i class="fas fa-handshake text-4xl"></i>
297
+ </div>
298
+ <h3 class="text-xl font-semibold mb-3">Rental Assistance</h3>
299
+ <p class="text-gray-700">We assist with all aspects of the rental process, from initial search to lease signing, making your transition as smooth as possible.</p>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="grid md:grid-cols-3 gap-8 mt-8">
304
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition">
305
+ <div class="text-purple-600 mb-4">
306
+ <i class="fas fa-rupee-sign text-4xl"></i>
307
+ </div>
308
+ <h3 class="text-xl font-semibold mb-3">Budget Planning</h3>
309
+ <p class="text-gray-700">We help you find accommodations that fit your budget, with options ranging from ₹5,000 to ₹25,000+ per month across Karnataka.</p>
310
+ </div>
311
+
312
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition">
313
+ <div class="text-purple-600 mb-4">
314
+ <i class="fas fa-utensils text-4xl"></i>
315
+ </div>
316
+ <h3 class="text-xl font-semibold mb-3">Food Preferences</h3>
317
+ <p class="text-gray-700">We match you with roommates who share similar food habits - vegetarian, non-vegetarian, or vegan - to avoid kitchen conflicts.</p>
318
+ </div>
319
+
320
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition">
321
+ <div class="text-purple-600 mb-4">
322
+ <i class="fas fa-language text-4xl"></i>
323
+ </div>
324
+ <h3 class="text-xl font-semibold mb-3">Language Compatibility</h3>
325
+ <p class="text-gray-700">Find roommates who speak your preferred language - Kannada, Hindi, English, Tamil, Telugu, or Malayalam - for better communication.</p>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- Locations Section -->
332
+ <section id="locations" class="py-16 bg-white">
333
+ <div class="container mx-auto px-4">
334
+ <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Our Locations in Karnataka</h2>
335
+
336
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
337
+ <!-- Bangalore -->
338
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
339
+ <img src="https://images.unsplash.com/photo-1522458203812-7e8d5f8e6c00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bangalore" class="w-full h-48 object-cover">
340
+ <div class="p-6">
341
+ <h3 class="text-xl font-semibold mb-2">Bangalore</h3>
342
+ <p class="text-gray-700 mb-4">The IT capital of India with vibrant nightlife and cosmopolitan culture.</p>
343
+ <div class="flex justify-between text-sm text-gray-600">
344
+ <span><i class="fas fa-home mr-1"></i> 120+ Listings</span>
345
+ <span><i class="fas fa-rupee-sign mr-1"></i> ₹8k - ₹25k</span>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Mysore -->
351
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
352
+ <img src="https://images.unsplash.com/photo-1587474260584-136574528ed5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mysore" class="w-full h-48 object-cover">
353
+ <div class="p-6">
354
+ <h3 class="text-xl font-semibold mb-2">Mysore</h3>
355
+ <p class="text-gray-700 mb-4">The cultural capital with palaces, yoga centers, and educational institutions.</p>
356
+ <div class="flex justify-between text-sm text-gray-600">
357
+ <span><i class="fas fa-home mr-1"></i> 45+ Listings</span>
358
+ <span><i class="fas fa-rupee-sign mr-1"></i> ₹5k - ₹15k</span>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Mangalore -->
364
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
365
+ <img src="https://images.unsplash.com/photo-1584697964358-3e16d5330f75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mangalore" class="w-full h-48 object-cover">
366
+ <div class="p-6">
367
+ <h3 class="text-xl font-semibold mb-2">Mangalore</h3>
368
+ <p class="text-gray-700 mb-4">Coastal city with beautiful beaches and renowned medical colleges.</p>
369
+ <div class="flex justify-between text-sm text-gray-600">
370
+ <span><i class="fas fa-home mr-1"></i> 35+ Listings</span>
371
+ <span><i class="fas fa-rupee-sign mr-1"></i> ₹5k - ₹12k</span>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Hubli -->
377
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
378
+ <img src="https://images.unsplash.com/photo-1581852057101-aa4497e9d52e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Hubli" class="w-full h-48 object-cover">
379
+ <div class="p-6">
380
+ <h3 class="text-xl font-semibold mb-2">Hubli</h3>
381
+ <p class="text-gray-700 mb-4">Commercial hub with growing IT sector and affordable living costs.</p>
382
+ <div class="flex justify-between text-sm text-gray-600">
383
+ <span><i class="fas fa-home mr-1"></i> 28+ Listings</span>
384
+ <span><i class="fas fa-rupee-sign mr-1"></i> ₹4k - ₹10k</span>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Manipal -->
390
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
391
+ <img src="https://images.unsplash.com/photo-1581852057101-aa4497e9d52e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Manipal" class="w-full h-48 object-cover">
392
+ <div class="p-6">
393
+ <h3 class="text-xl font-semibold mb-2">Manipal</h3>
394
+ <p class="text-gray-700 mb-4">University town with vibrant student community and international exposure.</p>
395
+ <div class="flex justify-between text-sm text-gray-600">
396
+ <span><i class="fas fa-home mr-1"></i> 50+ Listings</span>
397
+ <span><i class="fas fa-rupee-sign mr-1"></i> ₹5k - ₹15k</span>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Belgaum -->
403
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
404
+ <img src="https://images.unsplash.com/photo-1581852057101-aa4497e9d52e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Belgaum" class="w-full h-48 object-cover">
405
+ <div class="p-6">
406
+ <h3 class="text-xl font-semibold mb-2">Belgaum</h3>
407
+ <p class="text-gray-700 mb-4">Border city with mix of Karnataka and Maharashtra cultures, known for military presence.</p>
408
+ <div class="flex justify-between text-sm text-gray-600">
409
+ <span><i class="fas fa-home mr-1"></i> 22+ Listings</span>
410
+ <span><i class="fas fa-rupee-sign mr-1"></i> ₹4k - ₹9k</span>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="text-center mt-12">
417
+ <p class="text-gray-700 mb-4">We also serve these cities in Karnataka:</p>
418
+ <div class="flex flex-wrap justify-center gap-3 max-w-2xl mx-auto">
419
+ <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Udupi</span>
420
+ <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Dharwad</span>
421
+ <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Gulbarga</span>
422
+ <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Shimoga</span>
423
+ <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Tumkur</span>
424
+ <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Hassan</span>
425
+ <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Chikmagalur</span>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- Testimonials Section -->
432
+ <section id="testimonials" class="py-16 bg-gray-100">
433
+ <div class="container mx-auto px-4">
434
+ <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">What Our Users Say</h2>
435
+
436
+ <div class="grid md:grid-cols-3 gap-8">
437
+ <!-- Testimonial 1 -->
438
+ <div class="bg-white p-8 rounded-lg shadow-md testimonial-card">
439
+ <div class="flex items-center mb-4">
440
+ <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">P</div>
441
+ <div class="ml-4">
442
+ <h4 class="font-semibold">Priya Sharma</h4>
443
+ <p class="text-gray-600 text-sm">PG Student, Bangalore</p>
444
+ </div>
445
+ </div>
446
+ <div class="text-yellow-400 mb-3">
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ <i class="fas fa-star"></i>
452
+ </div>
453
+ <p class="text-gray-700">"Roomify helped me find the perfect vegetarian roommate in Bangalore. We share similar study habits and even became good friends. The ₹12,000 rent for our shared apartment is very reasonable for the location!"</p>
454
+ </div>
455
+
456
+ <!-- Testimonial 2 -->
457
+ <div class="bg-white p-8 rounded-lg shadow-md testimonial-card">
458
+ <div class="flex items-center mb-4">
459
+ <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">R</div>
460
+ <div class="ml-4">
461
+ <h4 class="font-semibold">Rahul Patel</h4>
462
+ <p class="text-gray-600 text-sm">Working Professional, Mangalore</p>
463
+ </div>
464
+ </div>
465
+ <div class="text-yellow-400 mb-3">
466
+ <i class="fas fa-star"></i>
467
+ <i class="fas fa-star"></i>
468
+ <i class="fas fa-star"></i>
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ </div>
472
+ <p class="text-gray-700">"As a non-vegetarian working night shifts, I was struggling to find compatible roommates. Roomify matched me with two others who have similar schedules. Our ₹18,000 3BHK is perfect and we all speak Kannada!"</p>
473
+ </div>
474
+
475
+ <!-- Testimonial 3 -->
476
+ <div class="bg-white p-8 rounded-lg shadow-md testimonial-card">
477
+ <div class="flex items-center mb-4">
478
+ <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">A</div>
479
+ <div class="ml-4">
480
+ <h4 class="font-semibold">Ananya Reddy</h4>
481
+ <p class="text-gray-600 text-sm">UG Student, Manipal</p>
482
+ </div>
483
+ </div>
484
+ <div class="text-yellow-400 mb-3">
485
+ <i class="fas fa-star"></i>
486
+ <i class="fas fa-star"></i>
487
+ <i class="fas fa-star"></i>
488
+ <i class="fas fa-star"></i>
489
+ <i class="fas fa-star-half-alt"></i>
490
+ </div>
491
+ <p class="text-gray-700">"Coming from Andhra Pradesh, I wanted roommates who understand Telugu. Roomify found me two amazing girls who speak Telugu and share my vegan lifestyle. Our ₹7,500 per person shared room is clean and near campus."</p>
492
+ </div>
493
+
494
+ <!-- Testimonial 4 -->
495
+ <div class="bg-white p-8 rounded-lg shadow-md testimonial-card md:hidden lg:block">
496
+ <div class="flex items-center mb-4">
497
+ <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">S</div>
498
+ <div class="ml-4">
499
+ <h4 class="font-semibold">Suresh Kumar</h4>
500
+ <p class="text-gray-600 text-sm">PG Student, Mysore</p>
501
+ </div>
502
+ </div>
503
+ <div class="text-yellow-400 mb-3">
504
+ <i class="fas fa-star"></i>
505
+ <i class="fas fa-star"></i>
506
+ <i class="fas fa-star"></i>
507
+ <i class="fas fa-star"></i>
508
+ <i class="fas fa-star"></i>
509
+ </div>
510
+ <p class="text-gray-700">"I needed a quiet, studious environment for my postgraduate studies. Roomify matched me with a PhD scholar who values silence. Our ₹9,000 single rooms in the same house are perfect, and we often study together in the common area."</p>
511
+ </div>
512
+
513
+ <!-- Testimonial 5 -->
514
+ <div class="bg-white p-8 rounded-lg shadow-md testimonial-card md:hidden lg:block">
515
+ <div class="flex items-center mb-4">
516
+ <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">D</div>
517
+ <div class="ml-4">
518
+ <h4 class="font-semibold">Deepak Joshi</h4>
519
+ <p class="text-gray-600 text-sm">Working Professional, Hubli</p>
520
+ </div>
521
+ </div>
522
+ <div class="text-yellow-400 mb-3">
523
+ <i class="fas fa-star"></i>
524
+ <i class="fas fa-star"></i>
525
+ <i class="fas fa-star"></i>
526
+ <i class="fas fa-star"></i>
527
+ <i class="fas fa-star"></i>
528
+ </div>
529
+ <p class="text-gray-700">"As a Hindi-speaking professional new to Karnataka, I was worried about communication. Roomify found me a flatmate who speaks Hindi and showed me around Hubli. Our ₹6,500 shared apartment is great value for money."</p>
530
+ </div>
531
+
532
+ <!-- Testimonial 6 -->
533
+ <div class="bg-white p-8 rounded-lg shadow-md testimonial-card md:hidden lg:block">
534
+ <div class="flex items-center mb-4">
535
+ <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">M</div>
536
+ <div class="ml-4">
537
+ <h4 class="font-semibold">Meena Krishnan</h4>
538
+ <p class="text-gray-600 text-sm">Medical Student, Belgaum</p>
539
+ </div>
540
+ </div>
541
+ <div class="text-yellow-400 mb-3">
542
+ <i class="fas fa-star"></i>
543
+ <i class="fas fa-star"></i>
544
+ <i class="fas fa-star"></i>
545
+ <i class="fas fa-star"></i>
546
+ <i class="far fa-star"></i>
547
+ </div>
548
+ <p class="text-gray-700">"Finding female roommates near my medical college was challenging. Roomify connected me with three other medical students. We share a ₹20,000 2BHK (₹5k each) and take turns cooking vegetarian meals. Perfect for our hectic schedules!"</p>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="text-center mt-12">
553
+ <button id="showMoreTestimonials" class="md:hidden bg-purple-800 text-white px-6 py-2 rounded-full font-semibold hover:bg-purple-700 transition">Show More Testimonials</button>
554
+ </div>
555
+ </div>
556
+ </section>
557
+
558
+ <!-- Contact Us Section -->
559
+ <section id="contact" class="py-16 bg-white">
560
+ <div class="container mx-auto px-4">
561
+ <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Contact Us</h2>
562
+
563
+ <div class="flex flex-col md:flex-row gap-10">
564
+ <div class="md:w-1/2">
565
+ <h3 class="text-2xl font-semibold mb-6 text-purple-800">Get in Touch</h3>
566
+
567
+ <div class="space-y-6">
568
+ <div class="flex items-start">
569
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
570
+ <i class="fas fa-envelope text-purple-600"></i>
571
+ </div>
572
+ <div>
573
+ <h4 class="font-semibold">Email</h4>
574
+ <p class="text-gray-700">roomify123@gmail.com</p>
575
+ </div>
576
+ </div>
577
+
578
+ <div class="flex items-start">
579
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
580
+ <i class="fas fa-phone-alt text-purple-600"></i>
581
+ </div>
582
+ <div>
583
+ <h4 class="font-semibold">Phone</h4>
584
+ <p class="text-gray-700">+91 98765 43210</p>
585
+ <p class="text-gray-700">+91 87654 32109</p>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="flex items-start">
590
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
591
+ <i class="fas fa-map-marker-alt text-purple-600"></i>
592
+ </div>
593
+ <div>
594
+ <h4 class="font-semibold">Office</h4>
595
+ <p class="text-gray-700">#123, MG Road, Bangalore</p>
596
+ <p class="text-gray-700">Karnataka - 560001</p>
597
+ </div>
598
+ </div>
599
+
600
+ <div class="flex items-start">
601
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
602
+ <i class="fas fa-clock text-purple-600"></i>
603
+ </div>
604
+ <div>
605
+ <h4 class="font-semibold">Working Hours</h4>
606
+ <p class="text-gray-700">Monday - Friday: 9 AM - 6 PM</p>
607
+ <p class="text-gray-700">Saturday: 10 AM - 4 PM</p>
608
+ </div>
609
+ </div>
610
+ </div>
611
+
612
+ <h3 class="text-2xl font-semibold mt-10 mb-4 text-purple-800">Follow Us</h3>
613
+ <div class="flex space-x-4">
614
+ <a href="#" class="bg-purple-100 p-3 rounded-full text-purple-600 hover:bg-purple-200 transition">
615
+ <i class="fab fa-facebook-f"></i>
616
+ </a>
617
+ <a href="#" class="bg-purple-100 p-3 rounded-full text-purple-600 hover:bg-purple-200 transition">
618
+ <i class="fab fa-twitter"></i>
619
+ </a>
620
+ <a href="#" class="bg-purple-100 p-3 rounded-full text-purple-600 hover:bg-purple-200 transition">
621
+ <i class="fab fa-instagram"></i>
622
+ </a>
623
+ <a href="#" class="bg-purple-100 p-3 rounded-full text-purple-600 hover:bg-purple-200 transition">
624
+ <i class="fab fa-linkedin-in"></i>
625
+ </a>
626
+ </div>
627
+ </div>
628
+
629
+ <div class="md:w-1/2">
630
+ <h3 class="text-2xl font-semibold mb-6 text-purple-800">Send Us a Message</h3>
631
+ <form class="space-y-4">
632
+ <div>
633
+ <label for="contactName" class="block mb-1 font-medium">Your Name</label>
634
+ <input type="text" id="contactName" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
635
+ </div>
636
+ <div>
637
+ <label for="contactEmail" class="block mb-1 font-medium">Email Address</label>
638
+ <input type="email" id="contactEmail" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
639
+ </div>
640
+ <div>
641
+ <label for="contactSubject" class="block mb-1 font-medium">Subject</label>
642
+ <input type="text" id="contactSubject" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
643
+ </div>
644
+ <div>
645
+ <label for="contactMessage" class="block mb-1 font-medium">Message</label>
646
+ <textarea id="contactMessage" rows="5" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required></textarea>
647
+ </div>
648
+ <button type="submit" class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition">Send Message</button>
649
+ </form>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </section>
654
+
655
+ <!-- Footer -->
656
+ <footer class="bg-purple-900 text-white py-12">
657
+ <div class="container mx-auto px-4">
658
+ <div class="grid md:grid-cols-4 gap-8">
659
+ <div>
660
+ <h3 class="text-xl font-bold mb-4 flex items-center">
661
+ <i class="fas fa-home mr-2"></i> Roomify
662
+ </h3>
663
+ <p class="mb-4">Finding your perfect roommate in Karnataka made simple and stress-free.</p>
664
+ <div class="flex space-x-4">
665
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
666
+ <a href="#"><i class="fab fa-twitter"></i></a>
667
+ <a href="#"><i class="fab fa-instagram"></i></a>
668
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
669
+ </div>
670
+ </div>
671
+
672
+ <div>
673
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
674
+ <ul class="space-y-2">
675
+ <li><a href="#home" class="hover:text-purple-200 transition">Home</a></li>
676
+ <li><a href="#about" class="hover:text-purple-200 transition">About Us</a></li>
677
+ <li><a href="#services" class="hover:text-purple-200 transition">Services</a></li>
678
+ <li><a href="#locations" class="hover:text-purple-200 transition">Locations</a></li>
679
+ <li><a href="#testimonials" class="hover:text-purple-200 transition">Testimonials</a></li>
680
+ <li><a href="#contact" class="hover:text-purple-200 transition">Contact</a></li>
681
+ </ul>
682
+ </div>
683
+
684
+ <div>
685
+ <h3 class="text-lg font-semibold mb-4">Services</h3>
686
+ <ul class="space-y-2">
687
+ <li><a href="#" class="hover:text-purple-200 transition">Roommate Matching</a></li>
688
+ <li><a href="#" class="hover:text-purple-200 transition">Verified Listings</a></li>
689
+ <li><a href="#" class="hover:text-purple-200 transition">Rental Assistance</a></li>
690
+ <li><a href="#" class="hover:text-purple-200 transition">Budget Planning</a></li>
691
+ <li><a href="#" class="hover:text-purple-200 transition">Food Preferences</a></li>
692
+ <li><a href="#" class="hover:text-purple-200 transition">Language Compatibility</a></li>
693
+ </ul>
694
+ </div>
695
+
696
+ <div>
697
+ <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
698
+ <p class="mb-4">Subscribe to get updates on new listings and roommate matching tips.</p>
699
+ <form class="flex">
700
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l focus:outline-none text-gray-900 w-full">
701
+ <button type="submit" class="bg-purple-600 px-4 py-2 rounded-r hover:bg-purple-700 transition">
702
+ <i class="fas fa-paper-plane"></i>
703
+ </button>
704
+ </form>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="border-t border-purple-800 mt-10 pt-6 text-center">
709
+ <p>&copy; 2023 Roomify. All rights reserved.</p>
710
+ </div>
711
+ </div>
712
+ </footer>
713
+
714
+ <script>
715
+ // Mobile menu toggle
716
+ document.getElementById('mobileMenuButton').addEventListener('click', function() {
717
+ const menu = document.getElementById('mobileMenu');
718
+ menu.classList.toggle('hidden');
719
+ });
720
+
721
+ // Show more testimonials on mobile
722
+ document.getElementById('showMoreTestimonials').addEventListener('click', function() {
723
+ const hiddenTestimonials = document.querySelectorAll('.testimonial-card.md\\:hidden');
724
+ hiddenTestimonials.forEach(card => {
725
+ card.classList.remove('md:hidden', 'lg:block');
726
+ card.classList.add('block');
727
+ });
728
+ this.style.display = 'none';
729
+ });
730
+
731
+ // Roommate matching form submission
732
+ document.getElementById('roommateForm').addEventListener('submit', function(e) {
733
+ e.preventDefault();
734
+
735
+ // Get form values
736
+ const name = document.getElementById('name').value;
737
+ const age = document.getElementById('age').value;
738
+ const gender = document.getElementById('gender').value;
739
+ const education = document.getElementById('education').value;
740
+ const city = document.getElementById('city').value;
741
+ const food = document.getElementById('food').value;
742
+ const language = document.getElementById('language').value;
743
+ const budget = document.getElementById('budget').value;
744
+ const roomType = document.getElementById('roomType').value;
745
+
746
+ // Hide form and show results
747
+ document.getElementById('preferenceForm').classList.add('hidden');
748
+ document.getElementById('resultsSection').classList.remove('hidden');
749
+
750
+ // Scroll to results
751
+ document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
752
+
753
+ // Generate matches (simulated data)
754
+ generateMatches(city, food, language, budget, roomType);
755
+ });
756
+
757
+ // Back to form button
758
+ document.getElementById('backToForm').addEventListener('click', function() {
759
+ document.getElementById('resultsSection').classList.add('hidden');
760
+ document.getElementById('preferenceForm').classList.remove('hidden');
761
+ document.getElementById('preferenceForm').scrollIntoView({ behavior: 'smooth' });
762
+ });
763
+
764
+ // Generate simulated matches
765
+ function generateMatches(city, food, language, budget, roomType) {
766
+ const matchesContainer = document.getElementById('matchesContainer');
767
+ matchesContainer.innerHTML = '';
768
+
769
+ // Sample data for matches based on preferences
770
+ const sampleMatches = [
771
+ {
772
+ name: "Arjun M.",
773
+ age: 24,
774
+ gender: "male",
775
+ education: "PG",
776
+ city: city,
777
+ food: food,
778
+ language: language,
779
+ budget: budget,
780
+ roomType: roomType,
781
+ image: "https://randomuser.me/api/portraits/men/32.jpg",
782
+ description: "Engineering student looking for a quiet place to study. Prefers clean environment and follows regular schedule."
783
+ },
784
+ {
785
+ name: "Priya S.",
786
+ age: 22,
787
+ gender: "female",
788
+ education: "UG",
789
+ city: city,
790
+ food: food,
791
+ language: language,
792
+ budget: budget,
793
+ roomType: roomType,
794
+ image: "https://randomuser.me/api/portraits/women/44.jpg",
795
+ description: "Medical student with hectic schedule. Needs a peaceful environment to rest between shifts."
796
+ },
797
+ {
798
+ name: "Rahul K.",
799
+ age: 26,
800
+ gender: "male",
801
+ education: "Working Professional",
802
+ city: city,
803
+ food: food,
804
+ language: language,
805
+ budget: budget,
806
+ roomType: roomType,
807
+ image: "https://randomuser.me/api/portraits/men/22.jpg",
808
+ description: "IT professional working from home 3 days a week. Values cleanliness and quiet during work hours."
809
+ },
810
+ {
811
+ name: "Ananya P.",
812
+ age: 23,
813
+ gender: "female",
814
+ education: "PG",
815
+ city: city,
816
+ food: food,
817
+ language: language,
818
+ budget: budget,
819
+ roomType: roomType,
820
+ image: "https://randomuser.me/api/portraits/women/63.jpg",
821
+ description: "Arts student who enjoys cooking and occasional movie nights. Looking for friendly flatmates."
822
+ },
823
+ {
824
+ name: "Vikram J.",
825
+ age: 25,
826
+ gender: "male",
827
+ education: "Working Professional",
828
+ city: city,
829
+ food: food,
830
+ language: language,
831
+ budget: budget,
832
+ roomType: roomType,
833
+ image: "https://randomuser.me/api/portraits/men/41.jpg",
834
+ description: "Bank employee with regular hours. Enjoys sports and looking for active roommates."
835
+ },
836
+ {
837
+ name: "Divya R.",
838
+ age: 24,
839
+ gender: "female",
840
+ education: "UG",
841
+ city: city,
842
+ food: food,
843
+ language: language,
844
+ budget: budget,
845
+ roomType: roomType,
846
+ image: "https://randomuser.me/api/portraits/women/33.jpg",
847
+ description: "Design student who loves art exhibitions and cultural events. Prefers creative environment."
848
+ }
849
+ ];
850
+
851
+ // Display matches
852
+ sampleMatches.forEach(match => {
853
+ const matchCard = document.createElement('div');
854
+ matchCard.className = 'bg-white rounded-lg shadow-md room-card transition overflow-hidden';
855
+ matchCard.innerHTML = `
856
+ <div class="h-48 overflow-hidden">
857
+ <img src="${match.image}" alt="${match.name}" class="w-full h-full object-cover">
858
+ </div>
859
+ <div class="p-6">
860
+ <div class="flex justify-between items-start mb-2">
861
+ <h3 class="text-xl font-semibold">${match.name}</h3>
862
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-sm">${match.age} yrs</span>
863
+ </div>
864
+ <div class="flex flex-wrap gap-2 mb-4">
865
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${match.gender === 'male' ? 'Male' : 'Female'}</span>
866
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${match.education === 'UG' ? 'Undergrad' : match.education === 'PG' ? 'Postgrad' : 'Working'}</span>
867
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${food === 'vegetarian' ? 'Vegetarian' : food === 'non-vegetarian' ? 'Non-Veg' : 'Vegan'}</span>
868
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${language === 'kannada' ? 'Kannada' : language === 'hindi' ? 'Hindi' : language === 'english' ? 'English' : language === 'tamil' ? 'Tamil' : language === 'telugu' ? 'Telugu' : 'Malayalam'}</span>
869
+ </div>
870
+ <p class="text-gray-700 mb-4">${match.description}</p>
871
+ <div class="flex justify-between items-center">
872
+ <span class="font-medium">${budget === '5000-10000' ? '₹5k-10k' : budget === '10000-15000' ? '₹10k-15k' : budget === '15000-20000' ? '₹15k-20k' : budget === '20000-25000' ? '₹20k-25k' : '₹25k+'}</span>
873
+ <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">Contact</button>
874
+ </div>
875
+ </div>
876
+ `;
877
+ matchesContainer.appendChild(matchCard);
878
+ });
879
+ }
880
+
881
+ // Smooth scrolling for navigation links
882
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
883
+ anchor.addEventListener('click', function(e) {
884
+ e.preventDefault();
885
+
886
+ const targetId = this.getAttribute('href');
887
+ const targetElement = document.querySelector(targetId);
888
+
889
+ if (targetElement) {
890
+ targetElement.scrollIntoView({
891
+ behavior: 'smooth'
892
+ });
893
+
894
+ // Close mobile menu if open
895
+ const mobileMenu = document.getElementById('mobileMenu');
896
+ if (!mobileMenu.classList.contains('hidden')) {
897
+ mobileMenu.classList.add('hidden');
898
+ }
899
+ }
900
+ });
901
+ });
902
+ </script>
903
+ <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-modified" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
904
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ i want the website to allocate rooms based on preference suppose if i give info it should find a match and allocate room, in the contact us page it should should show roomify123@gmail.com ,display ph no, social media links, add testimonials , in the locations add cities of karnataka, in a about us section add abt services, add amount in indian rupees, add food habit as vegan, vegetarian , non vegetarian, and in language section take indian languages, education as ug, pg, in testimonials take indian names, i want the website to be fully functional, website name should be Roomify.