Hugging Face's logo

Spaces:
Aidevi
/
roomify
Running

App Files Community
Aidevi commited on
Commit
d562d87
·
verified ·
1 Parent(s): b5b2027

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1284 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Roomify
3
- emoji: 🏃
4
- colorFrom: red
5
  colorTo: purple
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
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: purple
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,1284 @@
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>Roommate Match - 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, #6B73FF 0%, #000DFF 100%);
12
+ }
13
+ .match-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .match-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .progress-bar {
21
+ height: 6px;
22
+ border-radius: 3px;
23
+ background-color: #e0e0e0;
24
+ }
25
+ .progress-fill {
26
+ height: 100%;
27
+ border-radius: 3px;
28
+ background: linear-gradient(90deg, #6B73FF 0%, #000DFF 100%);
29
+ transition: width 0.5s ease;
30
+ }
31
+ .checkbox-container input[type="checkbox"] {
32
+ display: none;
33
+ }
34
+ .checkbox-container label {
35
+ display: inline-block;
36
+ padding: 8px 16px;
37
+ border: 1px solid #ddd;
38
+ border-radius: 20px;
39
+ margin: 5px;
40
+ cursor: pointer;
41
+ transition: all 0.3s;
42
+ }
43
+ .checkbox-container input[type="checkbox"]:checked + label {
44
+ background-color: #6B73FF;
45
+ color: white;
46
+ border-color: #6B73FF;
47
+ }
48
+ .slider {
49
+ -webkit-appearance: none;
50
+ width: 100%;
51
+ height: 8px;
52
+ border-radius: 4px;
53
+ background: #e0e0e0;
54
+ outline: none;
55
+ }
56
+ .slider::-webkit-slider-thumb {
57
+ -webkit-appearance: none;
58
+ appearance: none;
59
+ width: 20px;
60
+ height: 20px;
61
+ border-radius: 50%;
62
+ background: #6B73FF;
63
+ cursor: pointer;
64
+ }
65
+ .slider::-moz-range-thumb {
66
+ width: 20px;
67
+ height: 20px;
68
+ border-radius: 50%;
69
+ background: #6B73FF;
70
+ cursor: pointer;
71
+ }
72
+ .animate-pulse {
73
+ animation: pulse 2s infinite;
74
+ }
75
+ @keyframes pulse {
76
+ 0% {
77
+ transform: scale(1);
78
+ }
79
+ 50% {
80
+ transform: scale(1.05);
81
+ }
82
+ 100% {
83
+ transform: scale(1);
84
+ }
85
+ }
86
+ </style>
87
+ </head>
88
+ <body class="bg-gray-50">
89
+ <!-- Navigation -->
90
+ <nav class="gradient-bg text-white shadow-lg">
91
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
92
+ <div class="flex items-center space-x-2">
93
+ <i class="fas fa-home text-2xl"></i>
94
+ <span class="text-xl font-bold">RoommateMatch</span>
95
+ </div>
96
+ <div class="hidden md:flex space-x-6">
97
+ <a href="#" class="hover:text-gray-200">Home</a>
98
+ <a href="#" class="hover:text-gray-200">How It Works</a>
99
+ <a href="#" class="hover:text-gray-200">Testimonials</a>
100
+ <a href="#" class="hover:text-gray-200">Contact</a>
101
+ </div>
102
+ <div class="flex items-center space-x-4">
103
+ <button id="loginBtn" class="px-4 py-2 rounded-full hover:bg-blue-700 transition">Login</button>
104
+ <button id="signupBtn" class="px-4 py-2 bg-white text-blue-600 rounded-full hover:bg-gray-100 transition">Sign Up</button>
105
+ </div>
106
+ </div>
107
+ </nav>
108
+
109
+ <!-- Hero Section -->
110
+ <section class="gradient-bg text-white py-16">
111
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
112
+ <div class="md:w-1/2 mb-10 md:mb-0">
113
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Find Your Perfect Roommate</h1>
114
+ <p class="text-xl mb-8">Our advanced matching algorithm connects you with compatible roommates based on your lifestyle, habits, and preferences.</p>
115
+ <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>
116
+ </div>
117
+ <div class="md:w-1/2 flex justify-center">
118
+ <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">
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- How It Works -->
124
+ <section class="py-16 bg-white">
125
+ <div class="container mx-auto px-4">
126
+ <h2 class="text-3xl font-bold text-center mb-12">How It Works</h2>
127
+ <div class="grid md:grid-cols-3 gap-8">
128
+ <div class="text-center p-6 rounded-lg shadow-md hover:shadow-lg transition">
129
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
130
+ <i class="fas fa-user-edit text-blue-600 text-2xl"></i>
131
+ </div>
132
+ <h3 class="text-xl font-semibold mb-2">Create Your Profile</h3>
133
+ <p class="text-gray-600">Tell us about your lifestyle, habits, and preferences to help us find your perfect match.</p>
134
+ </div>
135
+ <div class="text-center p-6 rounded-lg shadow-md hover:shadow-lg transition">
136
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
137
+ <i class="fas fa-cogs text-blue-600 text-2xl"></i>
138
+ </div>
139
+ <h3 class="text-xl font-semibold mb-2">Our Algorithm Works</h3>
140
+ <p class="text-gray-600">We analyze thousands of data points to find roommates with the highest compatibility.</p>
141
+ </div>
142
+ <div class="text-center p-6 rounded-lg shadow-md hover:shadow-lg transition">
143
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
144
+ <i class="fas fa-handshake text-blue-600 text-2xl"></i>
145
+ </div>
146
+ <h3 class="text-xl font-semibold mb-2">Connect & Move In</h3>
147
+ <p class="text-gray-600">Review your matches, connect with potential roommates, and start your new living arrangement.</p>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- Questionnaire Section (Hidden Initially) -->
154
+ <section id="questionnaireSection" class="py-16 bg-gray-50 hidden">
155
+ <div class="container mx-auto px-4 max-w-4xl">
156
+ <div class="bg-white rounded-lg shadow-lg p-8">
157
+ <div class="flex justify-between items-center mb-8">
158
+ <h2 class="text-2xl font-bold">Roommate Preferences Questionnaire</h2>
159
+ <div class="text-gray-500">
160
+ <span id="currentStep">1</span>/<span id="totalSteps">7</span>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="progress-bar mb-8">
165
+ <div id="progressFill" class="progress-fill" style="width: 14%"></div>
166
+ </div>
167
+
168
+ <!-- Step 1: Basic Info -->
169
+ <div id="step1" class="step-content">
170
+ <h3 class="text-xl font-semibold mb-6">Basic Information</h3>
171
+ <div class="grid md:grid-cols-2 gap-6">
172
+ <div>
173
+ <label class="block text-gray-700 mb-2">First Name</label>
174
+ <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">
175
+ </div>
176
+ <div>
177
+ <label class="block text-gray-700 mb-2">Last Name</label>
178
+ <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">
179
+ </div>
180
+ <div>
181
+ <label class="block text-gray-700 mb-2">Email</label>
182
+ <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">
183
+ </div>
184
+ <div>
185
+ <label class="block text-gray-700 mb-2">Phone Number</label>
186
+ <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">
187
+ </div>
188
+ <div>
189
+ <label class="block text-gray-700 mb-2">Age</label>
190
+ <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">
191
+ </div>
192
+ <div>
193
+ <label class="block text-gray-700 mb-2">Gender</label>
194
+ <select id="gender" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
195
+ <option value="">Select</option>
196
+ <option value="male">Male</option>
197
+ <option value="female">Female</option>
198
+ <option value="other">Other</option>
199
+ <option value="prefer-not-to-say">Prefer not to say</option>
200
+ </select>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Step 2: Location Preferences -->
206
+ <div id="step2" class="step-content hidden">
207
+ <h3 class="text-xl font-semibold mb-6">Location Preferences</h3>
208
+ <div class="grid md:grid-cols-2 gap-6">
209
+ <div>
210
+ <label class="block text-gray-700 mb-2">Current State</label>
211
+ <select id="state" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
212
+ <option value="">Select State</option>
213
+ <option value="AL">Alabama</option>
214
+ <option value="AK">Alaska</option>
215
+ <!-- Add all states -->
216
+ <option value="WY">Wyoming</option>
217
+ </select>
218
+ </div>
219
+ <div>
220
+ <label class="block text-gray-700 mb-2">City</label>
221
+ <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">
222
+ </div>
223
+ <div>
224
+ <label class="block text-gray-700 mb-2">Preferred Neighborhoods (select up to 3)</label>
225
+ <div class="checkbox-container">
226
+ <input type="checkbox" id="neighborhood1" name="neighborhood" value="downtown">
227
+ <label for="neighborhood1">Downtown</label>
228
+ <input type="checkbox" id="neighborhood2" name="neighborhood" value="suburban">
229
+ <label for="neighborhood2">Suburban</label>
230
+ <input type="checkbox" id="neighborhood3" name="neighborhood" value="university">
231
+ <label for="neighborhood3">University Area</label>
232
+ <input type="checkbox" id="neighborhood4" name="neighborhood" value="arts">
233
+ <label for="neighborhood4">Arts District</label>
234
+ <input type="checkbox" id="neighborhood5" name="neighborhood" value="waterfront">
235
+ <label for="neighborhood5">Waterfront</label>
236
+ </div>
237
+ </div>
238
+ <div>
239
+ <label class="block text-gray-700 mb-2">Maximum Budget ($ per month)</label>
240
+ <input type="range" min="500" max="3000" value="1500" class="slider mb-2" id="budgetSlider">
241
+ <div class="flex justify-between">
242
+ <span>$500</span>
243
+ <span id="budgetValue">$1500</span>
244
+ <span>$3000</span>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Step 3: Lifestyle -->
251
+ <div id="step3" class="step-content hidden">
252
+ <h3 class="text-xl font-semibold mb-6">Lifestyle & Habits</h3>
253
+ <div class="space-y-6">
254
+ <div>
255
+ <label class="block text-gray-700 mb-2">Sleep Schedule</label>
256
+ <div class="flex items-center space-x-4">
257
+ <div class="flex-1">
258
+ <label class="block text-sm text-gray-600 mb-1">Early Bird</label>
259
+ <input type="range" min="1" max="10" value="5" class="slider" id="sleepScheduleSlider">
260
+ </div>
261
+ <div class="flex-1">
262
+ <label class="block text-sm text-gray-600 mb-1">Night Owl</label>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div>
267
+ <label class="block text-gray-700 mb-2">Cleanliness</label>
268
+ <div class="flex items-center space-x-4">
269
+ <div class="flex-1">
270
+ <label class="block text-sm text-gray-600 mb-1">Messy</label>
271
+ <input type="range" min="1" max="10" value="7" class="slider" id="cleanlinessSlider">
272
+ </div>
273
+ <div class="flex-1">
274
+ <label class="block text-sm text-gray-600 mb-1">Neat Freak</label>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ <div>
279
+ <label class="block text-gray-700 mb-2">Social Level</label>
280
+ <div class="flex items-center space-x-4">
281
+ <div class="flex-1">
282
+ <label class="block text-sm text-gray-600 mb-1">Introvert</label>
283
+ <input type="range" min="1" max="10" value="5" class="slider" id="socialSlider">
284
+ </div>
285
+ <div class="flex-1">
286
+ <label class="block text-sm text-gray-600 mb-1">Extrovert</label>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ <div>
291
+ <label class="block text-gray-700 mb-2">Do you smoke?</label>
292
+ <div class="flex space-x-4">
293
+ <label class="inline-flex items-center">
294
+ <input type="radio" name="smoking" value="yes" class="h-4 w-4 text-blue-600">
295
+ <span class="ml-2">Yes</span>
296
+ </label>
297
+ <label class="inline-flex items-center">
298
+ <input type="radio" name="smoking" value="no" checked class="h-4 w-4 text-blue-600">
299
+ <span class="ml-2">No</span>
300
+ </label>
301
+ <label class="inline-flex items-center">
302
+ <input type="radio" name="smoking" value="sometimes" class="h-4 w-4 text-blue-600">
303
+ <span class="ml-2">Sometimes</span>
304
+ </label>
305
+ </div>
306
+ </div>
307
+ <div>
308
+ <label class="block text-gray-700 mb-2">Do you drink alcohol?</label>
309
+ <div class="flex space-x-4">
310
+ <label class="inline-flex items-center">
311
+ <input type="radio" name="alcohol" value="yes" class="h-4 w-4 text-blue-600">
312
+ <span class="ml-2">Yes</span>
313
+ </label>
314
+ <label class="inline-flex items-center">
315
+ <input type="radio" name="alcohol" value="no" checked class="h-4 w-4 text-blue-600">
316
+ <span class="ml-2">No</span>
317
+ </label>
318
+ <label class="inline-flex items-center">
319
+ <input type="radio" name="alcohol" value="socially" class="h-4 w-4 text-blue-600">
320
+ <span class="ml-2">Socially</span>
321
+ </label>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Step 4: Food Preferences -->
328
+ <div id="step4" class="step-content hidden">
329
+ <h3 class="text-xl font-semibold mb-6">Food Preferences</h3>
330
+ <div class="space-y-6">
331
+ <div>
332
+ <label class="block text-gray-700 mb-2">Dietary Preferences</label>
333
+ <div class="checkbox-container">
334
+ <input type="checkbox" id="vegetarian" name="diet" value="vegetarian">
335
+ <label for="vegetarian">Vegetarian</label>
336
+ <input type="checkbox" id="vegan" name="diet" value="vegan">
337
+ <label for="vegan">Vegan</label>
338
+ <input type="checkbox" id="glutenFree" name="diet" value="gluten-free">
339
+ <label for="glutenFree">Gluten-Free</label>
340
+ <input type="checkbox" id="kosher" name="diet" value="kosher">
341
+ <label for="kosher">Kosher</label>
342
+ <input type="checkbox" id="halal" name="diet" value="halal">
343
+ <label for="halal">Halal</label>
344
+ <input type="checkbox" id="none" name="diet" value="none" checked>
345
+ <label for="none">No Restrictions</label>
346
+ </div>
347
+ </div>
348
+ <div>
349
+ <label class="block text-gray-700 mb-2">Cooking Habits</label>
350
+ <div class="flex items-center space-x-4">
351
+ <div class="flex-1">
352
+ <label class="block text-sm text-gray-600 mb-1">Eat Out</label>
353
+ <input type="range" min="1" max="10" value="5" class="slider" id="cookingSlider">
354
+ </div>
355
+ <div class="flex-1">
356
+ <label class="block text-sm text-gray-600 mb-1">Cook at Home</label>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ <div>
361
+ <label class="block text-gray-700 mb-2">Shared Groceries Preference</label>
362
+ <div class="flex space-x-4">
363
+ <label class="inline-flex items-center">
364
+ <input type="radio" name="groceries" value="share" class="h-4 w-4 text-blue-600">
365
+ <span class="ml-2">Prefer to share groceries</span>
366
+ </label>
367
+ <label class="inline-flex items-center">
368
+ <input type="radio" name="groceries" value="separate" checked class="h-4 w-4 text-blue-600">
369
+ <span class="ml-2">Prefer separate groceries</span>
370
+ </label>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Step 5: Personality & Interests -->
377
+ <div id="step5" class="step-content hidden">
378
+ <h3 class="text-xl font-semibold mb-6">Personality & Interests</h3>
379
+ <div class="space-y-6">
380
+ <div>
381
+ <label class="block text-gray-700 mb-2">Personality Type</label>
382
+ <select id="personalityType" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
383
+ <option value="">Select (optional)</option>
384
+ <option value="introvert">Introvert</option>
385
+ <option value="extrovert">Extrovert</option>
386
+ <option value="ambivert">Ambivert</option>
387
+ </select>
388
+ </div>
389
+ <div>
390
+ <label class="block text-gray-700 mb-2">MBTI Personality Type (optional)</label>
391
+ <select id="mbti" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
392
+ <option value="">Select (optional)</option>
393
+ <option value="INTJ">INTJ</option>
394
+ <option value="INTP">INTP</option>
395
+ <!-- Add all MBTI types -->
396
+ <option value="ESFP">ESFP</option>
397
+ <option value="ESTJ">ESTJ</option>
398
+ <option value="ESFJ">ESFJ</option>
399
+ <option value="ENFP">ENFP</option>
400
+ <option value="ENTP">ENTP</option>
401
+ <option value="ESTP">ESTP</option>
402
+ </select>
403
+ </div>
404
+ <div>
405
+ <label class="block text-gray-700 mb-2">Interests (select up to 5)</label>
406
+ <div class="checkbox-container">
407
+ <input type="checkbox" id="sports" name="interests" value="sports">
408
+ <label for="sports">Sports</label>
409
+ <input type="checkbox" id="music" name="interests" value="music">
410
+ <label for="music">Music</label>
411
+ <input type="checkbox" id="reading" name="interests" value="reading">
412
+ <label for="reading">Reading</label>
413
+ <input type="checkbox" id="gaming" name="interests" value="gaming">
414
+ <label for="gaming">Gaming</label>
415
+ <input type="checkbox" id="travel" name="interests" value="travel">
416
+ <label for="travel">Travel</label>
417
+ <input type="checkbox" id="cooking" name="interests" value="cooking">
418
+ <label for="cooking">Cooking</label>
419
+ <input type="checkbox" id="art" name="interests" value="art">
420
+ <label for="art">Art</label>
421
+ <input type="checkbox" id="technology" name="interests" value="technology">
422
+ <label for="technology">Technology</label>
423
+ <input type="checkbox" id="fitness" name="interests" value="fitness">
424
+ <label for="fitness">Fitness</label>
425
+ <input type="checkbox" id="movies" name="interests" value="movies">
426
+ <label for="movies">Movies</label>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Step 6: Roommate Preferences -->
433
+ <div id="step6" class="step-content hidden">
434
+ <h3 class="text-xl font-semibold mb-6">Ideal Roommate Preferences</h3>
435
+ <div class="space-y-6">
436
+ <div>
437
+ <label class="block text-gray-700 mb-2">Preferred Gender of Roommate</label>
438
+ <div class="flex space-x-4">
439
+ <label class="inline-flex items-center">
440
+ <input type="radio" name="prefGender" value="male" class="h-4 w-4 text-blue-600">
441
+ <span class="ml-2">Male</span>
442
+ </label>
443
+ <label class="inline-flex items-center">
444
+ <input type="radio" name="prefGender" value="female" class="h-4 w-4 text-blue-600">
445
+ <span class="ml-2">Female</span>
446
+ </label>
447
+ <label class="inline-flex items-center">
448
+ <input type="radio" name="prefGender" value="no-preference" checked class="h-4 w-4 text-blue-600">
449
+ <span class="ml-2">No Preference</span>
450
+ </label>
451
+ </div>
452
+ </div>
453
+ <div>
454
+ <label class="block text-gray-700 mb-2">Age Range Preference</label>
455
+ <div class="grid md:grid-cols-2 gap-4">
456
+ <div>
457
+ <label class="block text-sm text-gray-600 mb-1">Minimum Age</label>
458
+ <select id="minAge" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
459
+ <option value="18">18</option>
460
+ <option value="20">20</option>
461
+ <option value="22">22</option>
462
+ <option value="25" selected>25</option>
463
+ <option value="30">30</option>
464
+ </select>
465
+ </div>
466
+ <div>
467
+ <label class="block text-sm text-gray-600 mb-1">Maximum Age</label>
468
+ <select id="maxAge" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
469
+ <option value="25">25</option>
470
+ <option value="30">30</option>
471
+ <option value="35" selected>35</option>
472
+ <option value="40">40</option>
473
+ <option value="45">45</option>
474
+ <option value="50">50</option>
475
+ <option value="55">55</option>
476
+ <option value="60">60</option>
477
+ <option value="65">65</option>
478
+ <option value="70">70</option>
479
+ </select>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ <div>
484
+ <label class="block text-gray-700 mb-2">How important is it that your roommate shares your interests?</label>
485
+ <div class="flex items-center space-x-4">
486
+ <div class="flex-1">
487
+ <label class="block text-sm text-gray-600 mb-1">Not Important</label>
488
+ <input type="range" min="1" max="10" value="5" class="slider" id="interestImportanceSlider">
489
+ </div>
490
+ <div class="flex-1">
491
+ <label class="block text-sm text-gray-600 mb-1">Very Important</label>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ <div>
496
+ <label class="block text-gray-700 mb-2">Additional Preferences (optional)</label>
497
+ <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>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- Step 7: Review & Submit -->
503
+ <div id="step7" class="step-content hidden">
504
+ <h3 class="text-xl font-semibold mb-6">Review Your Information</h3>
505
+ <div class="bg-gray-50 p-6 rounded-lg mb-6">
506
+ <h4 class="font-semibold text-lg mb-4">Basic Information</h4>
507
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
508
+ <div>
509
+ <p class="text-gray-600">Name:</p>
510
+ <p id="reviewName" class="font-medium">John Doe</p>
511
+ </div>
512
+ <div>
513
+ <p class="text-gray-600">Email:</p>
514
+ <p id="reviewEmail" class="font-medium">john.doe@example.com</p>
515
+ </div>
516
+ <div>
517
+ <p class="text-gray-600">Age:</p>
518
+ <p id="reviewAge" class="font-medium">28</p>
519
+ </div>
520
+ <div>
521
+ <p class="text-gray-600">Gender:</p>
522
+ <p id="reviewGender" class="font-medium">Male</p>
523
+ </div>
524
+ </div>
525
+
526
+ <h4 class="font-semibold text-lg mb-4 mt-6">Location Preferences</h4>
527
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
528
+ <div>
529
+ <p class="text-gray-600">Location:</p>
530
+ <p id="reviewLocation" class="font-medium">New York, NY</p>
531
+ </div>
532
+ <div>
533
+ <p class="text-gray-600">Budget:</p>
534
+ <p id="reviewBudget" class="font-medium">$1500/month</p>
535
+ </div>
536
+ </div>
537
+
538
+ <h4 class="font-semibold text-lg mb-4 mt-6">Lifestyle</h4>
539
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
540
+ <div>
541
+ <p class="text-gray-600">Sleep Schedule:</p>
542
+ <p id="reviewSleep" class="font-medium">Balanced</p>
543
+ </div>
544
+ <div>
545
+ <p class="text-gray-600">Cleanliness:</p>
546
+ <p id="reviewClean" class="font-medium">Neat</p>
547
+ </div>
548
+ <div>
549
+ <p class="text-gray-600">Social Level:</p>
550
+ <p id="reviewSocial" class="font-medium">Moderate</p>
551
+ </div>
552
+ <div>
553
+ <p class="text-gray-600">Smoking:</p>
554
+ <p id="reviewSmoking" class="font-medium">No</p>
555
+ </div>
556
+ </div>
557
+
558
+ <h4 class="font-semibold text-lg mb-4 mt-6">Food Preferences</h4>
559
+ <div class="mb-4">
560
+ <p class="text-gray-600">Dietary Preferences:</p>
561
+ <p id="reviewDiet" class="font-medium">No restrictions</p>
562
+ </div>
563
+
564
+ <h4 class="font-semibold text-lg mb-4 mt-6">Roommate Preferences</h4>
565
+ <div class="grid md:grid-cols-2 gap-4">
566
+ <div>
567
+ <p class="text-gray-600">Preferred Gender:</p>
568
+ <p id="reviewPrefGender" class="font-medium">No preference</p>
569
+ </div>
570
+ <div>
571
+ <p class="text-gray-600">Age Range:</p>
572
+ <p id="reviewAgeRange" class="font-medium">25-35</p>
573
+ </div>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="mb-6">
578
+ <label class="inline-flex items-center">
579
+ <input type="checkbox" class="h-4 w-4 text-blue-600" id="agreeTerms">
580
+ <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>
581
+ </label>
582
+ </div>
583
+ </div>
584
+
585
+ <!-- Navigation Buttons -->
586
+ <div class="flex justify-between mt-8">
587
+ <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>
588
+ <button id="nextBtn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition ml-auto">Next</button>
589
+ <button id="submitBtn" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition hidden">Submit</button>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </section>
594
+
595
+ <!-- Matching Results Section (Hidden Initially) -->
596
+ <section id="resultsSection" class="py-16 bg-gray-50 hidden">
597
+ <div class="container mx-auto px-4">
598
+ <h2 class="text-3xl font-bold text-center mb-4">Your Roommate Matches</h2>
599
+ <p class="text-center text-gray-600 mb-12">Based on your preferences, we've found these compatible roommates for you.</p>
600
+
601
+ <div class="flex justify-center mb-8">
602
+ <div class="relative w-full max-w-2xl">
603
+ <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">
604
+ <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
605
+ </div>
606
+ </div>
607
+
608
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="matchesContainer">
609
+ <!-- Matches will be inserted here by JavaScript -->
610
+ </div>
611
+
612
+ <div class="text-center mt-12">
613
+ <button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Load More Matches</button>
614
+ </div>
615
+ </div>
616
+ </section>
617
+
618
+ <!-- Testimonials -->
619
+ <section class="py-16 bg-white">
620
+ <div class="container mx-auto px-4">
621
+ <h2 class="text-3xl font-bold text-center mb-12">Success Stories</h2>
622
+ <div class="grid md:grid-cols-3 gap-8">
623
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
624
+ <div class="flex items-center mb-4">
625
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
626
+ <i class="fas fa-user text-blue-600"></i>
627
+ </div>
628
+ <div>
629
+ <h4 class="font-semibold">Sarah K.</h4>
630
+ <p class="text-gray-600 text-sm">New York, NY</p>
631
+ </div>
632
+ </div>
633
+ <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>
634
+ <div class="flex mt-4">
635
+ <i class="fas fa-star text-yellow-400"></i>
636
+ <i class="fas fa-star text-yellow-400"></i>
637
+ <i class="fas fa-star text-yellow-400"></i>
638
+ <i class="fas fa-star text-yellow-400"></i>
639
+ <i class="fas fa-star text-yellow-400"></i>
640
+ </div>
641
+ </div>
642
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
643
+ <div class="flex items-center mb-4">
644
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
645
+ <i class="fas fa-user text-blue-600"></i>
646
+ </div>
647
+ <div>
648
+ <h4 class="font-semibold">Michael T.</h4>
649
+ <p class="text-gray-600 text-sm">Austin, TX</p>
650
+ </div>
651
+ </div>
652
+ <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>
653
+ <div class="flex mt-4">
654
+ <i class="fas fa-star text-yellow-400"></i>
655
+ <i class="fas fa-star text-yellow-400"></i>
656
+ <i class="fas fa-star text-yellow-400"></i>
657
+ <i class="fas fa-star text-yellow-400"></i>
658
+ <i class="fas fa-star text-yellow-400"></i>
659
+ </div>
660
+ </div>
661
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
662
+ <div class="flex items-center mb-4">
663
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
664
+ <i class="fas fa-user text-blue-600"></i>
665
+ </div>
666
+ <div>
667
+ <h4 class="font-semibold">Priya M.</h4>
668
+ <p class="text-gray-600 text-sm">San Francisco, CA</p>
669
+ </div>
670
+ </div>
671
+ <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>
672
+ <div class="flex mt-4">
673
+ <i class="fas fa-star text-yellow-400"></i>
674
+ <i class="fas fa-star text-yellow-400"></i>
675
+ <i class="fas fa-star text-yellow-400"></i>
676
+ <i class="fas fa-star text-yellow-400"></i>
677
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </section>
683
+
684
+ <!-- Footer -->
685
+ <footer class="bg-gray-800 text-white py-12">
686
+ <div class="container mx-auto px-4">
687
+ <div class="grid md:grid-cols-4 gap-8">
688
+ <div>
689
+ <h3 class="text-xl font-bold mb-4">RoommateMatch</h3>
690
+ <p class="text-gray-400">Finding you the perfect roommate based on compatibility, lifestyle, and preferences.</p>
691
+ </div>
692
+ <div>
693
+ <h4 class="font-semibold mb-4">Quick Links</h4>
694
+ <ul class="space-y-2">
695
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
696
+ <li><a href="#" class="text-gray-400 hover:text-white transition">How It Works</a></li>
697
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Testimonials</a></li>
698
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
699
+ </ul>
700
+ </div>
701
+ <div>
702
+ <h4 class="font-semibold mb-4">Legal</h4>
703
+ <ul class="space-y-2">
704
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
705
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
706
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li>
707
+ </ul>
708
+ </div>
709
+ <div>
710
+ <h4 class="font-semibold mb-4">Connect With Us</h4>
711
+ <div class="flex space-x-4">
712
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition">
713
+ <i class="fab fa-facebook-f"></i>
714
+ </a>
715
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-400 transition">
716
+ <i class="fab fa-twitter"></i>
717
+ </a>
718
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600 transition">
719
+ <i class="fab fa-instagram"></i>
720
+ </a>
721
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition">
722
+ <i class="fab fa-youtube"></i>
723
+ </a>
724
+ </div>
725
+ <div class="mt-4">
726
+ <p class="text-gray-400">support@roommatematch.com</p>
727
+ <p class="text-gray-400">+1 (555) 123-4567</p>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
732
+ <p>&copy; 2023 RoommateMatch. All rights reserved.</p>
733
+ </div>
734
+ </div>
735
+ </footer>
736
+
737
+ <!-- Login Modal (Hidden Initially) -->
738
+ <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
739
+ <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
740
+ <div class="flex justify-between items-center mb-6">
741
+ <h3 class="text-2xl font-bold">Login</h3>
742
+ <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700">
743
+ <i class="fas fa-times"></i>
744
+ </button>
745
+ </div>
746
+ <form id="loginForm">
747
+ <div class="mb-4">
748
+ <label class="block text-gray-700 mb-2">Email</label>
749
+ <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>
750
+ </div>
751
+ <div class="mb-6">
752
+ <label class="block text-gray-700 mb-2">Password</label>
753
+ <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>
754
+ </div>
755
+ <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition mb-4">Login</button>
756
+ <div class="text-center">
757
+ <a href="#" class="text-blue-600 hover:underline">Forgot password?</a>
758
+ </div>
759
+ </form>
760
+ <div class="border-t border-gray-200 mt-6 pt-6 text-center">
761
+ <p class="text-gray-600">Don't have an account? <a href="#" class="text-blue-600 hover:underline" id="switchToSignup">Sign up</a></p>
762
+ </div>
763
+ </div>
764
+ </div>
765
+
766
+ <!-- Signup Modal (Hidden Initially) -->
767
+ <div id="signupModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
768
+ <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
769
+ <div class="flex justify-between items-center mb-6">
770
+ <h3 class="text-2xl font-bold">Sign Up</h3>
771
+ <button id="closeSignupModal" class="text-gray-500 hover:text-gray-700">
772
+ <i class="fas fa-times"></i>
773
+ </button>
774
+ </div>
775
+ <form id="signupForm">
776
+ <div class="mb-4">
777
+ <label class="block text-gray-700 mb-2">Full Name</label>
778
+ <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>
779
+ </div>
780
+ <div class="mb-4">
781
+ <label class="block text-gray-700 mb-2">Email</label>
782
+ <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>
783
+ </div>
784
+ <div class="mb-4">
785
+ <label class="block text-gray-700 mb-2">Password</label>
786
+ <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>
787
+ </div>
788
+ <div class="mb-6">
789
+ <label class="block text-gray-700 mb-2">Confirm Password</label>
790
+ <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>
791
+ </div>
792
+ <div class="mb-4">
793
+ <label class="inline-flex items-center">
794
+ <input type="checkbox" class="h-4 w-4 text-blue-600" required>
795
+ <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>
796
+ </label>
797
+ </div>
798
+ <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>
799
+ </form>
800
+ <div class="border-t border-gray-200 mt-6 pt-6 text-center">
801
+ <p class="text-gray-600">Already have an account? <a href="#" class="text-blue-600 hover:underline" id="switchToLogin">Login</a></p>
802
+ </div>
803
+ </div>
804
+ </div>
805
+
806
+ <!-- Backend Simulation -->
807
+ <script>
808
+ // Backend simulation using localStorage
809
+ class Backend {
810
+ constructor() {
811
+ this.users = JSON.parse(localStorage.getItem('roommateMatchUsers')) || [];
812
+ this.profiles = JSON.parse(localStorage.getItem('roommateMatchProfiles')) || [];
813
+ this.currentUser = null;
814
+ }
815
+
816
+ // User authentication
817
+ signup(name, email, password) {
818
+ if (this.users.some(user => user.email === email)) {
819
+ return { success: false, message: 'Email already exists' };
820
+ }
821
+
822
+ const user = {
823
+ id: this.generateId(),
824
+ name,
825
+ email,
826
+ password, // In a real app, passwords should be hashed
827
+ createdAt: new Date().toISOString()
828
+ };
829
+
830
+ this.users.push(user);
831
+ localStorage.setItem('roommateMatchUsers', JSON.stringify(this.users));
832
+ this.currentUser = user;
833
+ return { success: true, user };
834
+ }
835
+
836
+ login(email, password) {
837
+ const user = this.users.find(u => u.email === email && u.password === password);
838
+ if (user) {
839
+ this.currentUser = user;
840
+ return { success: true, user };
841
+ }
842
+ return { success: false, message: 'Invalid email or password' };
843
+ }
844
+
845
+ logout() {
846
+ this.currentUser = null;
847
+ }
848
+
849
+ // Profile management
850
+ saveProfile(profileData) {
851
+ if (!this.currentUser) {
852
+ return { success: false, message: 'Not authenticated' };
853
+ }
854
+
855
+ // Check if profile already exists for this user
856
+ const existingIndex = this.profiles.findIndex(p => p.userId === this.currentUser.id);
857
+
858
+ const profile = {
859
+ userId: this.currentUser.id,
860
+ ...profileData,
861
+ updatedAt: new Date().toISOString()
862
+ };
863
+
864
+ if (existingIndex >= 0) {
865
+ this.profiles[existingIndex] = profile;
866
+ } else {
867
+ this.profiles.push(profile);
868
+ }
869
+
870
+ localStorage.setItem('roommateMatchProfiles', JSON.stringify(this.profiles));
871
+ return { success: true, profile };
872
+ }
873
+
874
+ getProfile(userId) {
875
+ return this.profiles.find(p => p.userId === userId);
876
+ }
877
+
878
+ // Matching algorithm
879
+ findMatches(userId) {
880
+ const userProfile = this.getProfile(userId);
881
+ if (!userProfile) return [];
882
+
883
+ // Simple matching algorithm - in a real app this would be more sophisticated
884
+ return this.profiles
885
+ .filter(profile => profile.userId !== userId) // Don't match with yourself
886
+ .map(profile => {
887
+ // Calculate compatibility score (0-100)
888
+ let score = 0;
889
+
890
+ // Location match
891
+ if (profile.state === userProfile.state && profile.city === userProfile.city) {
892
+ score += 20;
893
+ }
894
+
895
+ // Budget match (within 20%)
896
+ const userBudget = parseInt(userProfile.budget);
897
+ const profileBudget = parseInt(profile.budget);
898
+ if (Math.abs(userBudget - profileBudget) <= (userBudget * 0.2)) {
899
+ score += 15;
900
+ }
901
+
902
+ // Lifestyle match
903
+ const sleepDiff = Math.abs(userProfile.sleepSchedule - profile.sleepSchedule);
904
+ score += (10 - sleepDiff) * 1.5;
905
+
906
+ const cleanDiff = Math.abs(userProfile.cleanliness - profile.cleanliness);
907
+ score += (10 - cleanDiff) * 1.5;
908
+
909
+ const socialDiff = Math.abs(userProfile.socialLevel - profile.socialLevel);
910
+ score += (10 - socialDiff) * 1;
911
+
912
+ // Smoking/drinking compatibility
913
+ if (userProfile.smoking === profile.smoking) score += 10;
914
+ if (userProfile.alcohol === profile.alcohol) score += 5;
915
+
916
+ // Dietary preferences
917
+ const userDiets = userProfile.dietaryPreferences || [];
918
+ const profileDiets = profile.dietaryPreferences || [];
919
+ const dietMatch = userDiets.some(diet => profileDiets.includes(diet));
920
+ if (dietMatch) score += 10;
921
+
922
+ // Interests match
923
+ const userInterests = userProfile.interests || [];
924
+ const profileInterests = profile.interests || [];
925
+ const commonInterests = userInterests.filter(interest =>
926
+ profileInterests.includes(interest)
927
+ ).length;
928
+ score += commonInterests * 2;
929
+
930
+ // Cap at 100
931
+ score = Math.min(100, Math.round(score));
932
+
933
+ return {
934
+ ...profile,
935
+ compatibility: score
936
+ };
937
+ })
938
+ .filter(match => match.compatibility >= 70) // Only show reasonably compatible matches
939
+ .sort((a, b) => b.compatibility - a.compatibility); // Sort by compatibility
940
+ }
941
+
942
+ // Helper methods
943
+ generateId() {
944
+ return Math.random().toString(36).substr(2, 9);
945
+ }
946
+ }
947
+
948
+ // Initialize backend
949
+ const backend = new Backend();
950
+ </script>
951
+
952
+ <!-- Frontend JavaScript -->
953
+ <script>
954
+ // DOM Elements
955
+ const loginBtn = document.getElementById('loginBtn');
956
+ const signupBtn = document.getElementById('signupBtn');
957
+ const getStartedBtn = document.getElementById('getStartedBtn');
958
+ const loginModal = document.getElementById('loginModal');
959
+ const signupModal = document.getElementById('signupModal');
960
+ const closeLoginModal = document.getElementById('closeLoginModal');
961
+ const closeSignupModal = document.getElementById('closeSignupModal');
962
+ const questionnaireSection = document.getElementById('questionnaireSection');
963
+ const resultsSection = document.getElementById('resultsSection');
964
+ const switchToSignup = document.getElementById('switchToSignup');
965
+ const switchToLogin = document.getElementById('switchToLogin');
966
+ const loginForm = document.getElementById('loginForm');
967
+ const signupForm = document.getElementById('signupForm');
968
+
969
+ // Questionnaire navigation
970
+ const currentStepEl = document.getElementById('currentStep');
971
+ const totalStepsEl = document.getElementById('totalSteps');
972
+ const progressFill = document.getElementById('progressFill');
973
+ const prevBtn = document.getElementById('prevBtn');
974
+ const nextBtn = document.getElementById('nextBtn');
975
+ const submitBtn = document.getElementById('submitBtn');
976
+ const stepContents = document.querySelectorAll('.step-content');
977
+
978
+ // Sliders
979
+ const budgetSlider = document.getElementById('budgetSlider');
980
+ const budgetValue = document.getElementById('budgetValue');
981
+
982
+ // Current step tracking
983
+ let currentStep = 1;
984
+ const totalSteps = 7;
985
+
986
+ // Event Listeners
987
+ loginBtn.addEventListener('click', () => {
988
+ loginModal.classList.remove('hidden');
989
+ });
990
+
991
+ signupBtn.addEventListener('click', () => {
992
+ signupModal.classList.remove('hidden');
993
+ });
994
+
995
+ closeLoginModal.addEventListener('click', () => {
996
+ loginModal.classList.add('hidden');
997
+ });
998
+
999
+ closeSignupModal.addEventListener('click', () => {
1000
+ signupModal.classList.add('hidden');
1001
+ });
1002
+
1003
+ switchToSignup.addEventListener('click', (e) => {
1004
+ e.preventDefault();
1005
+ loginModal.classList.add('hidden');
1006
+ signupModal.classList.remove('hidden');
1007
+ });
1008
+
1009
+ switchToLogin.addEventListener('click', (e) => {
1010
+ e.preventDefault();
1011
+ signupModal.classList.add('hidden');
1012
+ loginModal.classList.remove('hidden');
1013
+ });
1014
+
1015
+ getStartedBtn.addEventListener('click', () => {
1016
+ questionnaireSection.classList.remove('hidden');
1017
+ document.querySelector('html').scrollTop = 0;
1018
+ });
1019
+
1020
+ // Close modals when clicking outside
1021
+ window.addEventListener('click', (e) => {
1022
+ if (e.target === loginModal) {
1023
+ loginModal.classList.add('hidden');
1024
+ }
1025
+ if (e.target === signupModal) {
1026
+ signupModal.classList.add('hidden');
1027
+ }
1028
+ });
1029
+
1030
+ // Form submissions
1031
+ loginForm.addEventListener('submit', (e) => {
1032
+ e.preventDefault();
1033
+ const email = document.getElementById('loginEmail').value;
1034
+ const password = document.getElementById('loginPassword').value;
1035
+
1036
+ const result = backend.login(email, password);
1037
+ if (result.success) {
1038
+ alert('Login successful!');
1039
+ loginModal.classList.add('hidden');
1040
+ // Update UI for logged in user
1041
+ loginBtn.textContent = 'Logout';
1042
+ signupBtn.classList.add('hidden');
1043
+ } else {
1044
+ alert(result.message);
1045
+ }
1046
+ });
1047
+
1048
+ signupForm.addEventListener('submit', (e) => {
1049
+ e.preventDefault();
1050
+ const name = document.getElementById('signupName').value;
1051
+ const email = document.getElementById('signupEmail').value;
1052
+ const password = document.getElementById('signupPassword').value;
1053
+ const confirmPassword = document.getElementById('signupConfirmPassword').value;
1054
+
1055
+ if (password !== confirmPassword) {
1056
+ alert('Passwords do not match');
1057
+ return;
1058
+ }
1059
+
1060
+ const result = backend.signup(name, email, password);
1061
+ if (result.success) {
1062
+ alert('Account created successfully!');
1063
+ signupModal.classList.add('hidden');
1064
+ // Update UI for logged in user
1065
+ loginBtn.textContent = 'Logout';
1066
+ signupBtn.classList.add('hidden');
1067
+ } else {
1068
+ alert(result.message);
1069
+ }
1070
+ });
1071
+
1072
+ // Questionnaire navigation
1073
+ nextBtn.addEventListener('click', () => {
1074
+ if (currentStep < totalSteps) {
1075
+ currentStep++;
1076
+ updateStep();
1077
+ }
1078
+ });
1079
+
1080
+ prevBtn.addEventListener('click', () => {
1081
+ if (currentStep > 1) {
1082
+ currentStep--;
1083
+ updateStep();
1084
+ }
1085
+ });
1086
+
1087
+ submitBtn.addEventListener('click', () => {
1088
+ if (!document.getElementById('agreeTerms').checked) {
1089
+ alert('Please agree to the terms and conditions');
1090
+ return;
1091
+ }
1092
+
1093
+ // Collect all form data
1094
+ const profileData = {
1095
+ // Basic info
1096
+ firstName: document.getElementById('firstName').value,
1097
+ lastName: document.getElementById('lastName').value,
1098
+ email: document.getElementById('email').value,
1099
+ phone: document.getElementById('phone').value,
1100
+ age: parseInt(document.getElementById('age').value),
1101
+ gender: document.getElementById('gender').value,
1102
+
1103
+ // Location
1104
+ state: document.getElementById('state').value,
1105
+ city: document.getElementById('city').value,
1106
+ neighborhoods: Array.from(document.querySelectorAll('input[name="neighborhood"]:checked')).map(el => el.value),
1107
+ budget: budgetSlider.value,
1108
+
1109
+ // Lifestyle
1110
+ sleepSchedule: parseInt(document.getElementById('sleepScheduleSlider').value),
1111
+ cleanliness: parseInt(document.getElementById('cleanlinessSlider').value),
1112
+ socialLevel: parseInt(document.getElementById('socialSlider').value),
1113
+ smoking: document.querySelector('input[name="smoking"]:checked').value,
1114
+ alcohol: document.querySelector('input[name="alcohol"]:checked').value,
1115
+
1116
+ // Food
1117
+ dietaryPreferences: Array.from(document.querySelectorAll('input[name="diet"]:checked')).map(el => el.value),
1118
+ cookingHabits: parseInt(document.getElementById('cookingSlider').value),
1119
+ groceriesPreference: document.querySelector('input[name="groceries"]:checked').value,
1120
+
1121
+ // Personality
1122
+ personalityType: document.getElementById('personalityType').value,
1123
+ mbti: document.getElementById('mbti').value,
1124
+ interests: Array.from(document.querySelectorAll('input[name="interests"]:checked')).map(el => el.value),
1125
+
1126
+ // Roommate preferences
1127
+ preferredGender: document.querySelector('input[name="prefGender"]:checked').value,
1128
+ minAge: parseInt(document.getElementById('minAge').value),
1129
+ maxAge: parseInt(document.getElementById('maxAge').value),
1130
+ interestImportance: parseInt(document.getElementById('interestImportanceSlider').value),
1131
+ additionalPreferences: document.getElementById('additionalPrefs').value
1132
+ };
1133
+
1134
+ // Save profile to backend
1135
+ const result = backend.saveProfile(profileData);
1136
+ if (result.success) {
1137
+ questionnaireSection.classList.add('hidden');
1138
+ resultsSection.classList.remove('hidden');
1139
+ displayMatches();
1140
+ } else {
1141
+ alert('Error saving profile: ' + result.message);
1142
+ }
1143
+ });
1144
+
1145
+ // Slider updates
1146
+ budgetSlider.addEventListener('input', () => {
1147
+ budgetValue.textContent = '$' + budgetSlider.value;
1148
+ });
1149
+
1150
+ // Initialize
1151
+ totalStepsEl.textContent = totalSteps;
1152
+
1153
+ // Functions
1154
+ function updateStep() {
1155
+ // Update UI
1156
+ currentStepEl.textContent = currentStep;
1157
+ progressFill.style.width = `${(currentStep / totalSteps) * 100}%`;
1158
+
1159
+ // Show/hide step content
1160
+ stepContents.forEach((content, index) => {
1161
+ if (index === currentStep - 1) {
1162
+ content.classList.remove('hidden');
1163
+ } else {
1164
+ content.classList.add('hidden');
1165
+ }
1166
+ });
1167
+
1168
+ // Update navigation buttons
1169
+ if (currentStep === 1) {
1170
+ prevBtn.classList.add('hidden');
1171
+ } else {
1172
+ prevBtn.classList.remove('hidden');
1173
+ }
1174
+
1175
+ if (currentStep === totalSteps) {
1176
+ nextBtn.classList.add('hidden');
1177
+ submitBtn.classList.remove('hidden');
1178
+ } else {
1179
+ nextBtn.classList.remove('hidden');
1180
+ submitBtn.classList.add('hidden');
1181
+ }
1182
+
1183
+ // Update review section (for step 7)
1184
+ if (currentStep === 7) {
1185
+ updateReviewSection();
1186
+ }
1187
+ }
1188
+
1189
+ function updateReviewSection() {
1190
+ // Get values from form
1191
+ const firstName = document.getElementById('firstName').value;
1192
+ const lastName = document.getElementById('lastName').value;
1193
+ const email = document.getElementById('email').value;
1194
+ const age = document.getElementById('age').value;
1195
+ const gender = document.getElementById('gender').value;
1196
+ const state = document.getElementById('state').value;
1197
+ const city = document.getElementById('city').value;
1198
+ const budget = budgetSlider.value;
1199
+ const sleep = document.getElementById('sleepScheduleSlider').value;
1200
+ const clean = document.getElementById('cleanlinessSlider').value;
1201
+ const social = document.getElementById('socialSlider').value;
1202
+ const smoking = document.querySelector('input[name="smoking"]:checked').value;
1203
+ const diets = Array.from(document.querySelectorAll('input[name="diet"]:checked')).map(el => el.value);
1204
+ const prefGender = document.querySelector('input[name="prefGender"]:checked').value;
1205
+ const minAge = document.getElementById('minAge').value;
1206
+ const maxAge = document.getElementById('maxAge').value;
1207
+
1208
+ // Update review fields
1209
+ document.getElementById('reviewName').textContent = `${firstName} ${lastName}`;
1210
+ document.getElementById('reviewEmail').textContent = email;
1211
+ document.getElementById('reviewAge').textContent = age;
1212
+ document.getElementById('reviewGender').textContent = gender;
1213
+ document.getElementById('reviewLocation').textContent = `${city}, ${state}`;
1214
+ document.getElementById('reviewBudget').textContent = `$${budget}/month`;
1215
+
1216
+ // Map slider values to text
1217
+ const sleepText = sleep < 4 ? 'Night Owl' : sleep > 7 ? 'Early Bird' : 'Balanced';
1218
+ const cleanText = clean < 4 ? 'Messy' : clean > 7 ? 'Neat Freak' : 'Average';
1219
+ const socialText = social < 4 ? 'Introvert' : social > 7 ? 'Extrovert' : 'Moderate';
1220
+
1221
+ document.getElementById('reviewSleep').textContent = sleepText;
1222
+ document.getElementById('reviewClean').textContent = cleanText;
1223
+ document.getElementById('reviewSocial').textContent = socialText;
1224
+ document.getElementById('reviewSmoking').textContent = smoking === 'no' ? 'No' : smoking === 'yes' ? 'Yes' : 'Sometimes';
1225
+ document.getElementById('reviewDiet').textContent = diets.length ? diets.join(', ') : 'No restrictions';
1226
+ document.getElementById('reviewPrefGender').textContent = prefGender === 'no-preference' ? 'No preference' : prefGender === 'male' ? 'Male' : 'Female';
1227
+ document.getElementById('reviewAgeRange').textContent = `${minAge}-${maxAge}`;
1228
+ }
1229
+
1230
+ function displayMatches() {
1231
+ if (!backend.currentUser) return;
1232
+
1233
+ const matches = backend.findMatches(backend.currentUser.id);
1234
+ const matchesContainer = document.getElementById('matchesContainer');
1235
+ matchesContainer.innerHTML = '';
1236
+
1237
+ if (matches.length === 0) {
1238
+ matchesContainer.innerHTML = '<p class="text-center col-span-3 text-gray-600">No matches found yet. Check back later or adjust your preferences.</p>';
1239
+ return;
1240
+ }
1241
+
1242
+ matches.forEach(match => {
1243
+ const matchCard = document.createElement('div');
1244
+ matchCard.className = 'bg-white rounded-lg shadow-md overflow-hidden match-card';
1245
+ matchCard.innerHTML = `
1246
+ <div class="relative">
1247
+ <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">
1248
+ <div class="absolute top-4 right-4 bg-white rounded-full w-12 h-12 flex items-center justify-center shadow-md">
1249
+ <span class="font-bold text-blue-600">${match.compatibility}%</span>
1250
+ </div>
1251
+ </div>
1252
+ <div class="p-6">
1253
+ <div class="flex justify-between items-start mb-2">
1254
+ <h3 class="text-xl font-bold">${match.firstName} ${match.lastName}, ${match.age}</h3>
1255
+ <span class="text-gray-600">${match.city}, ${match.state}</span>
1256
+ </div>
1257
+ <p class="text-gray-600 mb-4">Budget: $${match.budget}/month</p>
1258
+ <p class="text-gray-700 mb-4">${match.personalityType ? `${match.personalityType.charAt(0).toUpperCase() + match.personalityType.slice(1)}` : ''} ${match.mbti ? `(${match.mbti})` : ''}</p>
1259
+ <div class="mb-4">
1260
+ <h4 class="font-semibold mb-2">Habits</h4>
1261
+ <div class="flex flex-wrap">
1262
+ <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>
1263
+ <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>
1264
+ <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>
1265
+ </div>
1266
+ </div>
1267
+ <div class="mb-4">
1268
+ <h4 class="font-semibold mb-2">Interests</h4>
1269
+ <div class="flex flex-wrap">
1270
+ ${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('') : ''}
1271
+ </div>
1272
+ </div>
1273
+ <div class="flex space-x-3 mt-6">
1274
+ <button class="flex-1 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition">View Profile</button>
1275
+ <button class="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Message</button>
1276
+ </div>
1277
+ </div>
1278
+ `;
1279
+ matchesContainer.appendChild(matchCard);
1280
+ });
1281
+ }
1282
+ </script>
1283
+ <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>
1284
+ </html>
prompts.txt ADDED
File without changes