Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Dream Matchmaker - Select Preferences</title> | |
| <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> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .selection-screen { | |
| min-height: 100vh; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .selection-overlay { | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .option-card { | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| } | |
| .option-card:hover { | |
| transform: translateY(-5px); | |
| border-color: #FF1493; | |
| } | |
| .option-card.selected { | |
| border-color: #FF1493; | |
| box-shadow: 0 10px 25px rgba(255, 20, 147, 0.4); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background: linear-gradient(90deg, #FF6B8B 0%, #FF1493 100%); | |
| } | |
| .btn-next { | |
| background: linear-gradient(135deg, #FF6B8B 0%, #FF1493 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-next:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(255, 20, 147, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Progress Bar --> | |
| <div class="w-full bg-gray-200"> | |
| <div id="progress" class="progress-bar" style="width: 16.66%"></div> | |
| </div> | |
| <!-- Gender Selection Screen --> | |
| <div id="gender-screen" class="selection-screen flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <div class="selection-overlay absolute inset-0"></div> | |
| <div class="relative z-10 w-full max-w-4xl py-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-10">What's your dream partner's gender?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('gender', 'male')"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-xl font-semibold">Male</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('gender', 'female')"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-xl font-semibold">Female</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('gender', 'non-binary')"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i data-feather="user" class="w-12 h-12 text-gray-500"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Non-binary</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Age Selection Screen (hidden initially) --> | |
| <!-- <div id="age-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1529333164857-4230a53a2a31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> --> | |
| <div id="age-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <div class="selection-overlay absolute inset-0"></div> | |
| <div class="relative z-10 w-full max-w-4xl py-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-10">What age range are you looking for?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('age', '18-25')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-lg font-semibold">18-25</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('age', '26-35')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80')"></div> | |
| <h3 class="text-lg font-semibold">26-35</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('age', '36-45')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-lg font-semibold">36-45</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('age', '46+')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-lg font-semibold">46+</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ethnicity Selection Screen (hidden initially) --> | |
| <!-- <div id="ethnicity-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> --> | |
| <div id="ethnicity-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <div class="selection-overlay absolute inset-0"></div> | |
| <div class="relative z-10 w-full max-w-4xl py-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-10">What ethnicity do you prefer?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-4"> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('ethnicity', 'asian')"> | |
| <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-md font-semibold">Asian</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('ethnicity', 'caucasian')"> | |
| <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-md font-semibold">Caucasian</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('ethnicity', 'black')"> | |
| <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-md font-semibold">Black</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('ethnicity', 'hispanic')"> | |
| <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-md font-semibold">Hispanic</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('ethnicity', 'mixed')"> | |
| <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1525875975471-999f65706a10?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-md font-semibold">Mixed</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Personality Selection Screen (hidden initially) --> | |
| <!-- <div id="personality-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> --> | |
| <div id="personality-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <div class="selection-overlay absolute inset-0"></div> | |
| <div class="relative z-10 w-full max-w-4xl py-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-10">What personality vibe do you prefer?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('personality', 'adventurous')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1501555088652-021faa106b9b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Adventurous</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('personality', 'romantic')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1529333164857-4230a53a2a31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Romantic</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('personality', 'intellectual')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Intellectual</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('personality', 'funny')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Funny</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('personality', 'serious')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Serious</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('personality', 'chill')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Chill</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clothing Style Selection Screen (hidden initially) --> | |
| <!-- <div id="clothing-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1483181957632-8bda974cbc91?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> --> | |
| <div id="clothing-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <div class="selection-overlay absolute inset-0"></div> | |
| <div class="relative z-10 w-full max-w-4xl py-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-10">What clothing style do you prefer?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('clothing', 'casual')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1520367445093-50dc08a59d9d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Casual</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('clothing', 'elegant')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1489980557514-251d61e3eeb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Elegant</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('clothing', 'streetwear')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Streetwear</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('clothing', 'sporty')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Sporty</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('clothing', 'formal')"> | |
| <div class="w-24 h-24 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1527203561188-dae1bc1a417f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Formal</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Background Scene Selection Screen (hidden initially) --> | |
| <!-- <div id="background-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> --> | |
| <div id="background-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <div class="selection-overlay absolute inset-0"></div> | |
| <div class="relative z-10 w-full max-w-4xl py-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-10">Choose a background scene</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('background', 'beach')"> | |
| <div class="w-full h-32 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Beach</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('background', 'city')"> | |
| <div class="w-full h-32 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">City</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('background', 'cafe')"> | |
| <div class="w-full h-32 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1445116572660-236099ec97a0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Café</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('background', 'nature')"> | |
| <div class="w-full h-32 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Nature</h3> | |
| </div> | |
| <div class="option-card bg-white rounded-xl p-6 text-center cursor-pointer" onclick="selectOption('background', 'luxury')"> | |
| <div class="w-full h-32 mx-auto mb-4 rounded-lg bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> | |
| <h3 class="text-lg font-semibold">Luxury</h3> | |
| </div> | |
| </div> | |
| <!-- <div class="mt-8 text-center"> | |
| <button onclick="skipStep()" class="text-white font-medium hover:underline">Skip this step</button> | |
| </div> --> | |
| </div> | |
| </div> | |
| <!-- Reference Image Upload Screen (hidden initially) --> | |
| <!-- <div id="reference-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> --> | |
| <div id="reference-screen" class="selection-screen hidden flex items-center justify-center px-4" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <div class="selection-overlay absolute inset-0"></div> | |
| <div class="relative z-10 w-full max-w-4xl py-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-6">Want to upload a reference image?</h2> | |
| <p class="text-white text-center mb-10 max-w-2xl mx-auto">Upload a photo to help our AI better understand your preferences (optional)</p> | |
| <div class="bg-white rounded-xl p-8 max-w-md mx-auto"> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-pink-400 transition-colors" id="upload-container"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i data-feather="upload" class="w-12 h-12 text-gray-400 mb-4"></i> | |
| <p class="text-gray-600 mb-2">Click to upload reference image</p> | |
| <p class="text-gray-400 text-sm">JPG or PNG, max 5MB</p> | |
| </div> | |
| <input type="file" id="reference-upload" class="hidden" accept="image/*"> | |
| </div> | |
| <div id="preview-container" class="hidden mt-6"> | |
| <div class="relative"> | |
| <img id="reference-preview" class="w-full h-64 object-cover rounded-lg"> | |
| <button onclick="removeReference()" class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center flex flex-col gap-4"> | |
| <button onclick="skipStep()" class="text-pink-600 font-medium hover:underline">Skip this step</button> | |
| <button onclick="handleGenerateClick()" | |
| class="btn-primary w-full py-3 rounded-full font-semibold text-white bg-gradient-to-r from-pink-500 to-pink-600 shadow-md hover:opacity-90"> | |
| Generate My Dream Match | |
| </button> | |
| <p id="warningMessage" class="text-red-500 text-sm mt-2 hidden"> | |
| ⚠ Please upload a reference image or click Skip. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="fixed bottom-0 left-0 right-0 p-4 bg-white shadow-lg flex justify-between"> | |
| <button id="btn-prev" class="bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-full" onclick="prevStep()"> | |
| <i data-feather="arrow-left" class="inline mr-2"></i> Back | |
| </button> | |
| <button id="btn-next" class="btn-next text-white font-semibold py-3 px-6 rounded-full hidden" onclick="nextStep()"> | |
| Next <i data-feather="arrow-right" class="inline ml-2"></i> | |
| </button> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| const selections = { | |
| gender: null, | |
| age: null, | |
| ethnicity: null, | |
| personality: null, | |
| clothing: null, | |
| background: null, | |
| referenceImage: null | |
| }; | |
| let currentStep = 1; | |
| const totalSteps = 7; | |
| function selectOption(category, value) { | |
| const currentScreen = document.getElementById(`${category}-screen`); | |
| const options = currentScreen.querySelectorAll('.option-card'); | |
| options.forEach(option => option.classList.remove('selected')); | |
| event.currentTarget.classList.add('selected'); | |
| selections[category] = value; | |
| // Automatically go to next step after a short delay | |
| setTimeout(() => { | |
| nextStep(); | |
| }, 400); // 400ms lets the user see the highlight effect | |
| } | |
| function nextStep() { | |
| if (currentStep < totalSteps) { | |
| // Hide current screen | |
| document.getElementById(getScreenId(currentStep)).classList.add('hidden'); | |
| // Show next screen | |
| currentStep++; | |
| document.getElementById(getScreenId(currentStep)).classList.remove('hidden'); | |
| // Update progress bar | |
| document.getElementById('progress').style.width = `${(currentStep / totalSteps) * 100}%`; | |
| // Hide next button until selection is made | |
| document.getElementById('btn-next').classList.add('hidden'); | |
| // Show/hide back button | |
| if (currentStep > 1) { | |
| document.getElementById('btn-prev').classList.remove('hidden'); | |
| } | |
| // // If last step, change next button text | |
| // if (currentStep === totalSteps) { | |
| // document.getElementById('btn-next').innerHTML = 'Generate My Dream Match <i data-feather="arrow-right" class="inline ml-2"></i>'; | |
| // document.getElementById('btn-next').onclick = function() { | |
| // window.location.href = 'generation.html'; | |
| // }; | |
| // } | |
| } | |
| } | |
| function prevStep() { | |
| if (currentStep > 1) { | |
| // Hide current screen | |
| document.getElementById(getScreenId(currentStep)).classList.add('hidden'); | |
| // Show previous screen | |
| currentStep--; | |
| document.getElementById(getScreenId(currentStep)).classList.remove('hidden'); | |
| // Update progress bar | |
| document.getElementById('progress').style.width = `${(currentStep / totalSteps) * 100}%`; | |
| // Show next button if selection was made | |
| if (selections[getCategory(currentStep)] !== null) { | |
| document.getElementById('btn-next').classList.remove('hidden'); | |
| } | |
| // Hide back button if on first step | |
| if (currentStep === 1) { | |
| document.getElementById('btn-prev').classList.add('hidden'); | |
| } | |
| } | |
| } | |
| function getScreenId(step) { | |
| const categories = ['gender', 'age', 'ethnicity', 'personality', 'clothing', 'background', 'reference']; | |
| return `${categories[step-1]}-screen`; | |
| } | |
| function getCategory(step) { | |
| const categories = ['gender', 'age', 'ethnicity', 'personality', 'clothing', 'background', 'reference']; | |
| return categories[step-1]; | |
| } | |
| // Store selections in localStorage when moving to generation page | |
| function skipStep() { | |
| if (currentStep < totalSteps) { | |
| nextStep(); | |
| } else { | |
| goToGeneration(); | |
| } | |
| } | |
| // Handle reference image upload | |
| document.getElementById('upload-container').addEventListener('click', function() { | |
| document.getElementById('reference-upload').click(); | |
| }); | |
| document.getElementById('reference-upload').addEventListener('change', function(e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| document.getElementById('preview-container').classList.remove('hidden'); | |
| document.getElementById('reference-preview').src = event.target.result; | |
| selections.referenceImage = event.target.result; | |
| } | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| function handleGenerateClick() { | |
| const fileInput = document.getElementById('reference-upload'); | |
| const warning = document.getElementById('warningMessage'); | |
| if (!fileInput.files.length) { | |
| // no image → show warning | |
| warning.classList.remove('hidden'); | |
| return; | |
| } | |
| // hide warning if it was visible | |
| warning.classList.add('hidden'); | |
| // proceed with generation (with reference) | |
| goToGeneration(true); | |
| } | |
| function removeReference() { | |
| document.getElementById('preview-container').classList.add('hidden'); | |
| document.getElementById('reference-upload').value = ''; | |
| selections.referenceImage = null; | |
| } | |
| function goToGeneration(withReference = false) { | |
| // Generate the AI prompt based on selections | |
| const promptParts = []; | |
| if (selections.gender) { | |
| promptParts.push(`${selections.gender}`); | |
| } | |
| if (selections.age) { | |
| const ageText = selections.age === '46+' ? 'middle-aged' : `${selections.age.split('-')[0]}-year-old`; | |
| promptParts.push(ageText); | |
| } | |
| if (selections.ethnicity) { | |
| promptParts.push(selections.ethnicity); | |
| } | |
| if (selections.personality) { | |
| const personalityMap = { | |
| 'adventurous': 'with an adventurous spark in their eyes', | |
| 'romantic': 'with a gentle romantic smile', | |
| 'intellectual': 'with a thoughtful, intellectual gaze', | |
| 'funny': 'with a playful, humorous expression', | |
| 'serious': 'with a composed, serious demeanor', | |
| 'chill': 'with a relaxed, easygoing expression' | |
| }; | |
| promptParts.push(personalityMap[selections.personality]); | |
| } | |
| if (selections.clothing) { | |
| const clothingMap = { | |
| 'casual': 'wearing casual clothes', | |
| 'elegant': 'wearing an elegant outfit', | |
| 'streetwear': 'in stylish streetwear', | |
| 'sporty': 'in sporty attire', | |
| 'formal': 'in formal wear' | |
| }; | |
| promptParts.push(clothingMap[selections.clothing]); | |
| } | |
| if (selections.background) { | |
| const backgroundMap = { | |
| 'beach': 'on a beach at sunset', | |
| 'city': 'in a vibrant city setting', | |
| 'cafe': 'in a cozy café', | |
| 'nature': 'in a beautiful natural setting', | |
| 'luxury': 'in a luxurious environment' | |
| }; | |
| promptParts.push(backgroundMap[selections.background]); | |
| } | |
| const fullPrompt = `A photorealistic portrait of ${promptParts.join(' ')}, dating app profile style photo, professional photoshoot quality, cinematic lighting, DSLR effect, soft natural light, ultra realistic.`; | |
| // store selections + prompt | |
| const dataToStore = { | |
| ...selections, | |
| aiPrompt: fullPrompt | |
| }; | |
| // if user uploaded reference image | |
| if (withReference) { | |
| const fileInput = document.getElementById('reference-upload'); | |
| if (fileInput.files.length > 0) { | |
| const file = fileInput.files[0]; | |
| // store as Base64 (so it can survive redirect) | |
| const reader = new FileReader(); | |
| reader.onload = function (e) { | |
| dataToStore.referenceImage = e.target.result; // Base64 string | |
| localStorage.setItem('dreamMatchSelections', JSON.stringify(dataToStore)); | |
| window.location.href = 'generation.html'; | |
| }; | |
| reader.readAsDataURL(file); | |
| return; // prevent immediate redirect | |
| } | |
| } | |
| localStorage.setItem('dreamMatchSelections', JSON.stringify(dataToStore)); | |
| window.location.href = 'generation.html'; | |
| } | |
| </script> | |
| </body> | |
| </html> | |