Hugging Face's logo

Spaces:
Firefords
/
rainbow-rendezvous-connection-station
Running

App Files Community
Firefords commited on
Commit
c7ca391
·
verified ·
1 Parent(s): 909480d

i need there to be more than just one result on each carousel there needs to be all those profiles that meet either one filter, 2 filters or 3

Browse files
Files changed (1) hide show
  1. index.html +195 -112
index.html CHANGED
@@ -78,75 +78,230 @@
78
  <!-- Discovery Section -->
79
  <main class="flex-1 px-4 py-6 overflow-y-auto">
80
  <div class="mb-8">
81
- <h2 class="text-lg font-semibold text-yellow mb-3">Single Matches (${singleMatches.length})</h2>
82
- <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4" id="singleMatchesCarousel">
83
- ${singleMatches.map(profile => `
84
  <div class="profile-card flex-shrink-0 w-40 p-3">
85
  <div class="relative">
86
- <img src="${profile.image}" alt="Profile" class="rounded-lg w-full h-48 object-cover">
87
- ${profile.verified ? `<div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
88
  <i data-feather="check-circle" class="text-black w-4 h-4"></i>
89
- </div>` : ''}
90
  </div>
91
  <div class="mt-2">
92
- <h3 class="font-medium text-white">${profile.name}, ${profile.age}</h3>
93
- <p class="text-xs text-gray-400">${profile.distance} miles away</p>
94
  </div>
95
  </div>
96
- `).join('')}
97
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  </div>
99
 
100
  <div class="mb-8">
101
- <h2 class="text-lg font-semibold text-yellow mb-3">Double Matches (${doubleMatches.length})</h2>
102
- <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4" id="doubleMatchesCarousel">
103
- ${doubleMatches.map(profile => `
104
  <div class="profile-card flex-shrink-0 w-40 p-3">
105
  <div class="relative">
106
- <img src="${profile.image}" alt="Profile" class="rounded-lg w-full h-48 object-cover">
107
- ${profile.verified ? `<div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
108
- <i data-feather="check-circle" class="text-black w-4 h-4"></i>
109
- </div>` : ''}
110
  </div>
111
  <div class="mt-2">
112
- <h3 class="font-medium text-white">${profile.name}, ${profile.age}</h3>
113
- <p class="text-xs text-gray-400">${profile.distance} miles away</p>
114
  <div class="flex flex-wrap mt-1">
115
- ${profile.tags.slice(0, 2).map(tag => `
116
- <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">${tag}</span>
117
- `).join('')}
118
  </div>
119
  </div>
120
  </div>
121
- `).join('')}
122
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  </div>
124
 
125
  <div class="mb-8">
126
- <h2 class="text-lg font-semibold text-yellow mb-3">Triple Matches (${tripleMatches.length})</h2>
127
- <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4" id="tripleMatchesCarousel">
128
- ${tripleMatches.map(profile => `
129
  <div class="profile-card flex-shrink-0 w-40 p-3">
130
  <div class="relative">
131
- <img src="${profile.image}" alt="Profile" class="rounded-lg w-full h-48 object-cover">
132
- ${profile.verified ? `<div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
133
  <i data-feather="check-circle" class="text-black w-4 h-4"></i>
134
- </div>` : ''}
135
  </div>
136
  <div class="mt-2">
137
- <h3 class="font-medium text-white">${profile.name}, ${profile.age}</h3>
138
- <p class="text-xs text-gray-400">${profile.distance} miles away</p>
139
  <div class="flex flex-wrap mt-1">
140
- ${profile.tags.slice(0, 3).map(tag => `
141
- <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">${tag}</span>
142
- `).join('')}
143
  </div>
144
  </div>
145
  </div>
146
- `).join('')}
147
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  </div>
149
- </main>
150
 
151
  <!-- Navigation Footer -->
152
  <footer class="bg-black/90 backdrop-blur-sm border-t border-yellow/20 py-3 px-6 flex justify-around">
@@ -179,82 +334,10 @@
179
  </div>
180
  </div>
181
  </div>
182
- <script>
183
- // Mock data for profiles
184
- const profiles = [
185
- {
186
- id: 1,
187
- name: "Alex",
188
- age: 28,
189
- image: "https://static.photos/people/320x240/1",
190
- distance: 3,
191
- verified: true,
192
- tags: ["Chill", "420", "Music"]
193
- },
194
- {
195
- id: 2,
196
- name: "Jamie",
197
- age: 32,
198
- image: "https://static.photos/people/320x240/2",
199
- distance: 5,
200
- verified: false,
201
- tags: ["Gym", "BB", "Chill"]
202
- },
203
- {
204
- id: 3,
205
- name: "Taylor",
206
- age: 25,
207
- image: "https://static.photos/people/320x240/3",
208
- distance: 2,
209
- verified: true,
210
- tags: ["Kink", "420", "Gym"]
211
- },
212
- {
213
- id: 4,
214
- name: "Morgan",
215
- age: 30,
216
- image: "https://static.photos/people/320x240/4",
217
- distance: 4,
218
- verified: true,
219
- tags: ["Music", "420", "BB"]
220
- },
221
- {
222
- id: 5,
223
- name: "Casey",
224
- age: 27,
225
- image: "https://static.photos/people/320x240/5",
226
- distance: 1,
227
- verified: false,
228
- tags: ["Chill", "Music", "Kink"]
229
- },
230
- {
231
- id: 6,
232
- name: "Riley",
233
- age: 31,
234
- image: "https://static.photos/people/320x240/6",
235
- distance: 6,
236
- verified: true,
237
- tags: ["Gym", "BB", "Kink"]
238
- }
239
- ];
240
-
241
- // Filter profiles based on matching tags
242
- const userTags = ["Chill", "BB", "Kink"]; // Example user preferences
243
-
244
- const singleMatches = profiles.filter(profile =>
245
- profile.tags.some(tag => userTags.includes(tag))
246
- );
247
-
248
- const doubleMatches = profiles.filter(profile =>
249
- profile.tags.filter(tag => userTags.includes(tag)).length >= 2
250
- );
251
-
252
- const tripleMatches = profiles.filter(profile =>
253
- profile.tags.filter(tag => userTags.includes(tag)).length >= 3
254
- );
255
 
 
256
  // Initialize Vanta.js globe
257
- VANTA.GLOBE({
258
  el: "#vanta-globe",
259
  mouseControls: true,
260
  touchControls: true,
 
78
  <!-- Discovery Section -->
79
  <main class="flex-1 px-4 py-6 overflow-y-auto">
80
  <div class="mb-8">
81
+ <h2 class="text-lg font-semibold text-yellow mb-3">Primary Filter</h2>
82
+ <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4">
83
+ <!-- Profile Cards -->
84
  <div class="profile-card flex-shrink-0 w-40 p-3">
85
  <div class="relative">
86
+ <img src="https://static.photos/people/320x240/1" alt="Profile" class="rounded-lg w-full h-48 object-cover">
87
+ <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
88
  <i data-feather="check-circle" class="text-black w-4 h-4"></i>
89
+ </div>
90
  </div>
91
  <div class="mt-2">
92
+ <h3 class="font-medium text-white">Alex, 28</h3>
93
+ <p class="text-xs text-gray-400">3 miles away</p>
94
  </div>
95
  </div>
96
+ <div class="profile-card flex-shrink-0 w-40 p-3">
97
+ <div class="relative">
98
+ <img src="https://static.photos/people/320x240/2" alt="Profile" class="rounded-lg w-full h-48 object-cover">
99
+ <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
100
+ <i data-feather="check-circle" class="text-black w-4 h-4"></i>
101
+ </div>
102
+ </div>
103
+ <div class="mt-2">
104
+ <h3 class="font-medium text-white">Jordan, 31</h3>
105
+ <p class="text-xs text-gray-400">1 mile away</p>
106
+ </div>
107
+ </div>
108
+ <div class="profile-card flex-shrink-0 w-40 p-3">
109
+ <div class="relative">
110
+ <img src="https://static.photos/people/320x240/3" alt="Profile" class="rounded-lg w-full h-48 object-cover">
111
+ </div>
112
+ <div class="mt-2">
113
+ <h3 class="font-medium text-white">Morgan, 26</h3>
114
+ <p class="text-xs text-gray-400">5 miles away</p>
115
+ </div>
116
+ </div>
117
+ <div class="profile-card flex-shrink-0 w-40 p-3">
118
+ <div class="relative">
119
+ <img src="https://static.photos/people/320x240/4" alt="Profile" class="rounded-lg w-full h-48 object-cover">
120
+ <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
121
+ <i data-feather="check-circle" class="text-black w-4 h-4"></i>
122
+ </div>
123
+ </div>
124
+ <div class="mt-2">
125
+ <h3 class="font-medium text-white">Riley, 29</h3>
126
+ <p class="text-xs text-gray-400">2 miles away</p>
127
+ </div>
128
+ </div>
129
+ <div class="profile-card flex-shrink-0 w-40 p-3">
130
+ <div class="relative">
131
+ <img src="https://static.photos/people/320x240/5" alt="Profile" class="rounded-lg w-full h-48 object-cover">
132
+ </div>
133
+ <div class="mt-2">
134
+ <h3 class="font-medium text-white">Casey, 33</h3>
135
+ <p class="text-xs text-gray-400">4 miles away</p>
136
+ </div>
137
+ </div>
138
+ </div>
139
  </div>
140
 
141
  <div class="mb-8">
142
+ <h2 class="text-lg font-semibold text-yellow mb-3">Secondary Filter</h2>
143
+ <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4">
144
+ <!-- Profile Cards -->
145
  <div class="profile-card flex-shrink-0 w-40 p-3">
146
  <div class="relative">
147
+ <img src="https://static.photos/people/320x240/6" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 
 
 
148
  </div>
149
  <div class="mt-2">
150
+ <h3 class="font-medium text-white">Jamie, 32</h3>
151
+ <p class="text-xs text-gray-400">5 miles away</p>
152
  <div class="flex flex-wrap mt-1">
153
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Chill</span>
154
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">BB</span>
 
155
  </div>
156
  </div>
157
  </div>
158
+ <div class="profile-card flex-shrink-0 w-40 p-3">
159
+ <div class="relative">
160
+ <img src="https://static.photos/people/320x240/7" alt="Profile" class="rounded-lg w-full h-48 object-cover">
161
+ </div>
162
+ <div class="mt-2">
163
+ <h3 class="font-medium text-white">Taylor, 27</h3>
164
+ <p class="text-xs text-gray-400">3 miles away</p>
165
+ <div class="flex flex-wrap mt-1">
166
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Gym</span>
167
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ <div class="profile-card flex-shrink-0 w-40 p-3">
172
+ <div class="relative">
173
+ <img src="https://static.photos/people/320x240/8" alt="Profile" class="rounded-lg w-full h-48 object-cover">
174
+ </div>
175
+ <div class="mt-2">
176
+ <h3 class="font-medium text-white">Skyler, 30</h3>
177
+ <p class="text-xs text-gray-400">7 miles away</p>
178
+ <div class="flex flex-wrap mt-1">
179
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Vegan</span>
180
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="profile-card flex-shrink-0 w-40 p-3">
185
+ <div class="relative">
186
+ <img src="https://static.photos/people/320x240/9" alt="Profile" class="rounded-lg w-full h-48 object-cover">
187
+ </div>
188
+ <div class="mt-2">
189
+ <h3 class="font-medium text-white">Avery, 24</h3>
190
+ <p class="text-xs text-gray-400">2 miles away</p>
191
+ <div class="flex flex-wrap mt-1">
192
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Chill</span>
193
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Gym</span>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ <div class="profile-card flex-shrink-0 w-40 p-3">
198
+ <div class="relative">
199
+ <img src="https://static.photos/people/320x240/10" alt="Profile" class="rounded-lg w-full h-48 object-cover">
200
+ </div>
201
+ <div class="mt-2">
202
+ <h3 class="font-medium text-white">Parker, 35</h3>
203
+ <p class="text-xs text-gray-400">4 miles away</p>
204
+ <div class="flex flex-wrap mt-1">
205
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">BB</span>
206
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Vegan</span>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
  </div>
212
 
213
  <div class="mb-8">
214
+ <h2 class="text-lg font-semibold text-yellow mb-3">Triple Match</h2>
215
+ <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4">
216
+ <!-- Profile Cards -->
217
  <div class="profile-card flex-shrink-0 w-40 p-3">
218
  <div class="relative">
219
+ <img src="https://static.photos/people/320x240/11" alt="Profile" class="rounded-lg w-full h-48 object-cover">
220
+ <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
221
  <i data-feather="check-circle" class="text-black w-4 h-4"></i>
222
+ </div>
223
  </div>
224
  <div class="mt-2">
225
+ <h3 class="font-medium text-white">Taylor, 25</h3>
226
+ <p class="text-xs text-gray-400">2 miles away</p>
227
  <div class="flex flex-wrap mt-1">
228
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
229
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
230
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Gym</span>
231
  </div>
232
  </div>
233
  </div>
234
+ <div class="profile-card flex-shrink-0 w-40 p-3">
235
+ <div class="relative">
236
+ <img src="https://static.photos/people/320x240/12" alt="Profile" class="rounded-lg w-full h-48 object-cover">
237
+ <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
238
+ <i data-feather="check-circle" class="text-black w-4 h-4"></i>
239
+ </div>
240
+ </div>
241
+ <div class="mt-2">
242
+ <h3 class="font-medium text-white">Quinn, 29</h3>
243
+ <p class="text-xs text-gray-400">1 mile away</p>
244
+ <div class="flex flex-wrap mt-1">
245
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
246
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
247
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Vegan</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ <div class="profile-card flex-shrink-0 w-40 p-3">
252
+ <div class="relative">
253
+ <img src="https://static.photos/people/320x240/13" alt="Profile" class="rounded-lg w-full h-48 object-cover">
254
+ <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
255
+ <i data-feather="check-circle" class="text-black w-4 h-4"></i>
256
+ </div>
257
+ </div>
258
+ <div class="mt-2">
259
+ <h3 class="font-medium text-white">Dakota, 34</h3>
260
+ <p class="text-xs text-gray-400">3 miles away</p>
261
+ <div class="flex flex-wrap mt-1">
262
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
263
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">BB</span>
264
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Gym</span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ <div class="profile-card flex-shrink-0 w-40 p-3">
269
+ <div class="relative">
270
+ <img src="https://static.photos/people/320x240/14" alt="Profile" class="rounded-lg w-full h-48 object-cover">
271
+ <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
272
+ <i data-feather="check-circle" class="text-black w-4 h-4"></i>
273
+ </div>
274
+ </div>
275
+ <div class="mt-2">
276
+ <h3 class="font-medium text-white">Reese, 26</h3>
277
+ <p class="text-xs text-gray-400">5 miles away</p>
278
+ <div class="flex flex-wrap mt-1">
279
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
280
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Chill</span>
281
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ <div class="profile-card flex-shrink-0 w-40 p-3">
286
+ <div class="relative">
287
+ <img src="https://static.photos/people/320x240/15" alt="Profile" class="rounded-lg w-full h-48 object-cover">
288
+ <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
289
+ <i data-feather="check-circle" class="text-black w-4 h-4"></i>
290
+ </div>
291
+ </div>
292
+ <div class="mt-2">
293
+ <h3 class="font-medium text-white">Cameron, 31</h3>
294
+ <p class="text-xs text-gray-400">2 miles away</p>
295
+ <div class="flex flex-wrap mt-1">
296
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
297
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Vegan</span>
298
+ <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">BB</span>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
  </div>
304
+ </main>
305
 
306
  <!-- Navigation Footer -->
307
  <footer class="bg-black/90 backdrop-blur-sm border-t border-yellow/20 py-3 px-6 flex justify-around">
 
334
  </div>
335
  </div>
336
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
337
 
338
+ <script>
339
  // Initialize Vanta.js globe
340
+ VANTA.GLOBE({
341
  el: "#vanta-globe",
342
  mouseControls: true,
343
  touchControls: true,