Hugging Face's logo

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

App Files Community
rainbow-rendezvous-connection-station / index.html
Firefords's picture
Firefords
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
c7ca391 verified
raw
history blame contribute delete
20.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Rainbow Rendezvous - Premium LGBTQ+ Dating</title>
 <link rel="icon" type="image/x-icon" href="https://static.photos/yellow/200x200/1">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 body {
 font-family: 'Poppins', sans-serif;
 background-color: #000000;
 color: #FFFFFF;
 }
 .primary-yellow {
 background-color: #F4C430;
 }
 .text-yellow {
 color: #F4C430;
 }
 .border-yellow {
 border-color: #F4C430;
 }
 .banana-btn {
 background-color: #F4C430;
 color: #000000;
 border-radius: 50%;
 width: 60px;
 height: 60px;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0 4px 6px rgba(244, 196, 48, 0.3);
 }
 .profile-card {
 background: linear-gradient(145deg, #1a1a1a, #000000);
 border: 1px solid #333333;
 border-radius: 16px;
 transition: transform 0.3s ease;
 }
 .profile-card:hover {
 transform: translateY(-5px);
 }
 .filter-wheel {
 scroll-behavior: smooth;
 }
 .filter-wheel::-webkit-scrollbar {
 display: none;
 }
 .verification-circle {
 border: 3px dashed #F4C430;
 }
 </style>
</head>
<body class="min-h-screen">
 <!-- Vanta.js Globe Background -->
 <div id="vanta-globe" class="fixed inset-0 z-0 opacity-20"></div>
<!-- Main App Container -->
 <div class="relative z-10 max-w-md mx-auto min-h-screen flex flex-col">
 <!-- Header -->
 <header class="py-4 px-6 flex justify-between items-center bg-black/80 backdrop-blur-sm border-b border-yellow/20">
 <div class="flex items-center space-x-2">
 <i data-feather="users" class="text-yellow"></i>
 <h1 class="text-xl font-bold text-yellow">Rainbow Rendezvous</h1>
 </div>
 <div class="flex space-x-4">
 <button class="text-white"><i data-feather="search"></i></button>
 <button class="text-white"><i data-feather="settings"></i></button>
 </div>
 </header>
<!-- Discovery Section -->
 <main class="flex-1 px-4 py-6 overflow-y-auto">
 <div class="mb-8">
 <h2 class="text-lg font-semibold text-yellow mb-3">Primary Filter</h2>
 <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4">
 <!-- Profile Cards -->
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/1" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
 <i data-feather="check-circle" class="text-black w-4 h-4"></i>
 </div>
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Alex, 28</h3>
 <p class="text-xs text-gray-400">3 miles away</p>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/2" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
 <i data-feather="check-circle" class="text-black w-4 h-4"></i>
 </div>
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Jordan, 31</h3>
 <p class="text-xs text-gray-400">1 mile away</p>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/3" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Morgan, 26</h3>
 <p class="text-xs text-gray-400">5 miles away</p>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/4" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
 <i data-feather="check-circle" class="text-black w-4 h-4"></i>
 </div>
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Riley, 29</h3>
 <p class="text-xs text-gray-400">2 miles away</p>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/5" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Casey, 33</h3>
 <p class="text-xs text-gray-400">4 miles away</p>
 </div>
 </div>
</div>
 </div>
<div class="mb-8">
 <h2 class="text-lg font-semibold text-yellow mb-3">Secondary Filter</h2>
 <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4">
 <!-- Profile Cards -->
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/6" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Jamie, 32</h3>
 <p class="text-xs text-gray-400">5 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Chill</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">BB</span>
 </div>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/7" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Taylor, 27</h3>
 <p class="text-xs text-gray-400">3 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Gym</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
 </div>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/8" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Skyler, 30</h3>
 <p class="text-xs text-gray-400">7 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Vegan</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
 </div>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/9" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Avery, 24</h3>
 <p class="text-xs text-gray-400">2 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Chill</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Gym</span>
 </div>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/10" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Parker, 35</h3>
 <p class="text-xs text-gray-400">4 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">BB</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Vegan</span>
 </div>
 </div>
 </div>
</div>
 </div>
<div class="mb-8">
 <h2 class="text-lg font-semibold text-yellow mb-3">Triple Match</h2>
 <div class="filter-wheel flex space-x-4 overflow-x-auto pb-4">
 <!-- Profile Cards -->
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/11" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
 <i data-feather="check-circle" class="text-black w-4 h-4"></i>
 </div>
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Taylor, 25</h3>
 <p class="text-xs text-gray-400">2 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Gym</span>
 </div>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/12" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
 <i data-feather="check-circle" class="text-black w-4 h-4"></i>
 </div>
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Quinn, 29</h3>
 <p class="text-xs text-gray-400">1 mile away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Vegan</span>
 </div>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/13" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
 <i data-feather="check-circle" class="text-black w-4 h-4"></i>
 </div>
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Dakota, 34</h3>
 <p class="text-xs text-gray-400">3 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">BB</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Gym</span>
 </div>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/14" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
 <i data-feather="check-circle" class="text-black w-4 h-4"></i>
 </div>
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Reese, 26</h3>
 <p class="text-xs text-gray-400">5 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Chill</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">420</span>
 </div>
 </div>
 </div>
 <div class="profile-card flex-shrink-0 w-40 p-3">
 <div class="relative">
 <img src="https://static.photos/people/320x240/15" alt="Profile" class="rounded-lg w-full h-48 object-cover">
 <div class="absolute bottom-2 right-2 bg-yellow rounded-full p-1">
 <i data-feather="check-circle" class="text-black w-4 h-4"></i>
 </div>
 </div>
 <div class="mt-2">
 <h3 class="font-medium text-white">Cameron, 31</h3>
 <p class="text-xs text-gray-400">2 miles away</p>
 <div class="flex flex-wrap mt-1">
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Kink</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">Vegan</span>
 <span class="text-xs bg-yellow/20 text-yellow px-2 py-1 rounded-full mr-1 mb-1">BB</span>
 </div>
 </div>
 </div>
</div>
 </div>
 </main>
<!-- Navigation Footer -->
 <footer class="bg-black/90 backdrop-blur-sm border-t border-yellow/20 py-3 px-6 flex justify-around">
 <button class="text-white"><i data-feather="home"></i></button>
 <button class="text-white"><i data-feather="compass"></i></button>
 <button class="banana-btn"><i data-feather="heart" class="text-black"></i></button>
 <button class="text-white"><i data-feather="message-square"></i></button>
 <button class="text-white"><i data-feather="user"></i></button>
 </footer>
<!-- Verification Modal -->
 <div id="verificationModal" class="fixed inset-0 bg-black/90 z-20 flex items-center justify-center hidden">
 <div class="bg-black p-6 rounded-xl border border-yellow max-w-sm w-full">
 <div class="text-center mb-6">
 <h2 class="text-xl font-bold text-yellow mb-2">Secure Your Profile</h2>
 <p class="text-white">Protect the community with photo verification</p>
 </div>
 <div class="verification-circle w-64 h-64 mx-auto rounded-full flex items-center justify-center mb-6">
 <div class="text-center">
 <i data-feather="camera" class="w-12 h-12 text-yellow mx-auto mb-3"></i>
 <p class="text-white text-sm">Align your face with the silhouette</p>
 </div>
 </div>
 <button class="primary-yellow text-black font-bold py-3 px-6 rounded-lg w-full">
 Take Verification Photo
 </button>
 <button onclick="closeVerificationModal()" class="mt-3 text-white text-center w-full">
 Skip for now
 </button>
 </div>
 </div>
 </div>
<script>
 // Initialize Vanta.js globe
 VANTA.GLOBE({
 el: "#vanta-globe",
 mouseControls: true,
 touchControls: true,
 gyroControls: false,
 minHeight: 200.00,
 minWidth: 200.00,
 scale: 1.00,
 scaleMobile: 1.00,
 color: 0xf4c430,
 backgroundColor: 0x0
 });
 // Show verification modal after delay
 setTimeout(() => {
 document.getElementById('verificationModal').classList.remove('hidden');
 }, 3000);
 function closeVerificationModal() {
 document.getElementById('verificationModal').classList.add('hidden');
 }
 // Initialize feather icons
 feather.replace();
 // Animation for profile cards
 anime({
 targets: '.profile-card',
 translateY: [20, 0],
 opacity: [0, 1],
 delay: anime.stagger(100),
 easing: 'easeOutQuad'
 });
 </script>
</body>
</html>