DevOps1762/soulsync-sparkles
0
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>SoulSync - Onboarding Journey</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');13 body {14 font-family: 'Inter', sans-serif;15 }16 .progress-bar {17 height: 6px;18 border-radius: 3px;19 transition: width 0.5s ease;20 }21 .chat-bubble {22 border-radius: 24px 24px 24px 4px;23 }24 .chat-bubble.user {25 border-radius: 24px 24px 4px 24px;26 }27 .gradient-text {28 background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);29 -webkit-background-clip: text;30 background-clip: text;31 color: transparent;32 }33 </style>34</head>35<body class="bg-gray-50">36 <div class="container mx-auto px-4 py-8 max-w-4xl">37 <div class="flex justify-between items-center mb-8">38 <a href="/" class="flex items-center gap-2">39 <i data-feather="heart" class="text-primary-500 w-6 h-6"></i>40 <span class="font-bold text-xl">SoulSync</span>41 </a>42 <div class="w-32 bg-gray-200 rounded-full h-2">43 <div class="progress-bar bg-gradient-to-r from-primary-500 to-secondary-500 h-2 rounded-full" style="width: 20%"></div>44 </div>45 </div>46 47 <div class="bg-white rounded-3xl shadow-lg overflow-hidden border border-gray-100">48 <!-- Header -->49 <div class="bg-gradient-to-r from-primary-500 to-secondary-500 p-6 text-white">50 <h1 class="text-2xl font-bold">Welcome to Your Journey</h1>51 <p>Let's discover what truly matters to you in relationships</p>52 </div>53 54 <!-- Chat Container -->55 <div class="p-6 space-y-6 min-h-[500px]">56 <div class="space-y-4">57 <div class="flex items-start gap-3">58 <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0">59 <i data-feather="user" class="text-primary-500 w-5 h-5"></i>60 </div>61 <div class="bg-gray-100 p-4 chat-bubble max-w-xs md:max-w-md">62 <p class="text-gray-800">Welcome to SoulSync! I'm your AI guide. Let's start by understanding what you're looking for in a meaningful relationship.</p>63 </div>64 </div>65 66 <div class="flex items-start gap-3 justify-end">67 <div class="bg-primary-100 p-4 chat-bubble user max-w-xs md:max-w-md">68 <p class="text-primary-800">I'm excited to begin!</p>69 </div>70 </div>71 72 <div class="flex items-start gap-3">73 <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0">74 <i data-feather="user" class="text-primary-500 w-5 h-5"></i>75 </div>76 <div class="bg-gray-100 p-4 chat-bubble max-w-xs md:max-w-md">77 <p class="text-gray-800">Great energy! Our process focuses on authenticity. We'll use thoughtful questions to reveal your true self and what you need in a partner.</p>78 </div>79 </div>80 </div>81 82 <!-- Current Question -->83 <div class="bg-primary-50 border border-primary-100 rounded-xl p-6 mt-8">84 <h3 class="font-bold text-lg mb-4 text-gray-900">Question 1 of 12</h3>85 <p class="text-lg mb-6">"What do you value most in a relationship - emotional connection, intellectual stimulation, shared adventures, or something else? Describe your ideal dynamic."</p>86 87 <div class="space-y-4">88 <textarea 89 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-all" 90 rows="4"91 placeholder="Your thoughtful response..."></textarea>92 <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all">93 Continue94 </button>95 </div>96 </div>97 </div>98 99 <!-- Progress Info -->100 <div class="bg-gray-50 p-6 border-t border-gray-200">101 <div class="flex items-center justify-between">102 <div>103 <p class="text-sm text-gray-500">Profile Completion</p>104 <p class="font-medium">20% complete</p>105 </div>106 <div class="text-right">107 <p class="text-sm text-gray-500">Estimated time</p>108 <p class="font-medium">12-15 minutes remaining</p>109 </div>110 </div>111 </div>112 </div>113 114 <div class="mt-8 text-center text-gray-500 text-sm">115 <p>This guided process helps us match you with compatible partners based on authentic values and personality.</p>116 </div>117 </div>118 119 <script>120 feather.replace();121 122 // Update progress bar as user goes through questions123 document.querySelector('textarea').addEventListener('input', function() {124 if(this.value.length > 50) {125 document.querySelector('.progress-bar').style.width = '30%';126 }127 });128 </script>129</body>130</html>131