| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Are You Carrying Generational Patterns? | A Reflection for Transgenerational people</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| .fade-in { |
| animation: fadeIn 0.8s ease-in-out; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .option-card { |
| transition: all 0.3s ease; |
| } |
| .option-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| .progress-bar { |
| height: 6px; |
| transition: width 0.5s ease; |
| } |
| .floating-leaves { |
| position: absolute; |
| opacity: 0.1; |
| z-index: -1; |
| } |
| </style> |
| </head> |
| <body class="bg-[#FFFFFF] font-[Montserrat] text-[#70511F] min-h-screen"> |
| <div class="container mx-auto px-4 py-12 max-w-3xl"> |
| |
| <header class="text-center mb-12 fade-in"> |
| <h1 class="text-3xl md:text-4xl font-mb font-bold text-[#cba872] mb-4">Are You Carrying Generational Patterns?</h1> |
| <p class="text-lg text-[#cba872] max-w-2xl mx-auto">A compassionate reflection for those bridging past and future</p> |
| <div class="w-full bg-[#cba872] h-1 mt-6 rounded-full"></div> |
| </header> |
|
|
| |
| <div id="quiz-container" class="bg-[#FFFFFF] rounded-xl shadow-lg overflow-hidden fade-in"> |
| |
| <div class="bg-[#f5f5f5] h-2 w-full"> |
| <div id="progress-bar" class="progress-bar bg-[#cba872] rounded-r-full" style="width: 0%"></div> |
| </div> |
|
|
| |
| <div id="welcome-screen" class="p-8 md:p-10"> |
| <div class="flex justify-center mb-8"> |
| <div class="w-20 h-20 rounded-full bg-[#f5f5f5] flex items-center justify-center text-[#cba872]"> |
| <i class="fas fa-hands-helping text-3xl"></i> |
| </div> |
| </div> |
| <h2 class="text-2xl font-mb font-bold text-center text-[#CBA872] mb-6">Welcome</h2> |
| <p class="text-[#70511F] mb-6 leading-relaxed"> |
| This isn't just another quiz, it's a mirror held with care, inviting you to reflect on the emotional patterns you may have inherited and the legacy you're creating. There are no right or wrong answers, only truth to discover with kindness. |
| </p> |
| <p class="text-[#70511F] mb-8 leading-relaxed"> |
| As someone rooted in Florida's vibrant communities, you carry so much: Cultural pride, family expectations, personal dreams. Let's gently explore what might be yours to keep, and what might be ready to transform. |
| </p> |
| <div class="text-center"> |
| <button onclick="startQuiz()" class="bg-[#cba872] hover:bg-[#b59762] text-white font-medium py-3 px-8 rounded-full shadow-md transition-all duration-300 transform hover:scale-105"> |
| Begin Your Reflection <i class="fas fa-chevron-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="question-screens" class="hidden"> |
| |
| </div> |
|
|
| |
| <div id="results-screen" class="hidden p-8 md:p-10"> |
| |
| </div> |
| </div> |
|
|
| <div class="flex justify-center mt-12 mb-8"> |
| <a href="https://www.gentogentherapy.com/home" target="_blank"> |
| <img src="https://images.squarespace-cdn.com/content/v1/67d5e30f7dbed968b71e4869/fe3e9636-5b91-4143-9331-f43fceae455f/_Transgenerational+Therapy+Logo.png?format=1000w" |
| alt="Transgenerational Therapy Logo" |
| class="h-16 object-contain hover:opacity-90 transition-opacity"> |
| </a> |
| </div> |
|
|
| <footer class="text-center mt-4 text-sm text-[#cba872] opacity-80"> |
| <p>Created with care for the transgenerational people in Florida.</p> |
| <p class="mt-1">Your story matters. Your healing creates ripples.</p> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| const questions = [ |
| { |
| question: "When life gets hard, do you ever feel like you're carrying more than just your own problems?", |
| options: [ |
| "Yes, like I'm carrying the weight of my whole family's struggles", |
| "Sometimes, especially when it's about family", |
| "Not usually, I try to keep boundaries", |
| "I'm not sure" |
| ], |
| theme: "burden" |
| }, |
| { |
| question: "How often do you put your own needs aside to keep the peace in your family?", |
| options: [ |
| "Often, it feels like I have to", |
| "Only during big conflicts", |
| "Rarely, I prioritize my needs", |
| "I'm working on finding balance" |
| ], |
| theme: "self-sacrifice" |
| }, |
| { |
| question: "Do your emotional reactions ever feel bigger than what's actually happening in the moment?", |
| options: [ |
| "Yes, it feels like I'm reacting to more than just now", |
| "Sometimes, I wonder where it comes from", |
| "Not really, my reactions feel about the present", |
| "I haven't noticed" |
| ], |
| theme: "emotional-patterns" |
| }, |
| { |
| question: "In your daily life, how often do you feel pulled between the way your family has always done things and the way you want to do them?", |
| options: [ |
| "Almost every day, it's a constant push and pull", |
| "Sometimes, usually in certain situations", |
| "Rarely, I mostly follow my own way", |
| "I'm still figuring out what feels right for me" |
| ], |
| theme: "cultural-identity" |
| }, |
| { |
| question: "When you succeed, do you ever feel guilt or wonder, 'Why me?'", |
| options: [ |
| "Yes, like I've gone further than my family ever could", |
| "Sometimes, especially when I compare myself to family", |
| "No, I see it as something I've earned", |
| "I feel proud, but also a bit of pressure" |
| ], |
| theme: "success-guilt" |
| }, |
| { |
| question: "How comfortable are you with showing vulnerability in yourself?", |
| options: [ |
| "Rarely, there's pressure to always be strong", |
| "Only with close friends", |
| "I'm learning to be more open", |
| "Very comfortable" |
| ], |
| theme: "vulnerability" |
| }, |
| { |
| question: "Do you see family patterns around money, relationships, or health repeating?", |
| options: [ |
| "Definitely, and I'm working to change them", |
| "Some, but I'm not sure why they happen", |
| "Not really", |
| "I see both patterns and changes" |
| ], |
| theme: "behavioral-patterns" |
| }, |
| { |
| question: "How often do you feel caught between traditional values and modern expectations?", |
| options: [ |
| "All the time, it's a daily challenge", |
| "In certain situations only", |
| "I've found a balance that works for me", |
| "I don't feel that conflict much" |
| ], |
| theme: "cultural-identity" |
| }, |
| { |
| question: "When making big decisions, how much do your family's expectations influence you?", |
| options: [ |
| "A lot, it's hard to separate what I want from what they want", |
| "Some, but I still consider my own needs", |
| "Very little, I follow my own path", |
| "It depends on the situation" |
| ], |
| theme: "family-expectations" |
| }, |
| { |
| question: "Do you feel responsible for keeping family traditions or cultural practices alive?", |
| options: [ |
| "Yes, it feels like my duty", |
| "Some, but I adapt them to my life", |
| "Not really", |
| "I'm creating new traditions of my own" |
| ], |
| theme: "cultural-preservation" |
| } |
| ]; |
| |
| |
| const results = [ |
| { |
| title: "You Carry Light Generational Threads", |
| range: [0, 10], |
| description: "You've done important work noticing and changing patterns you grew up with. You respect where you come from, but you've also taken charge of the story you want to live now. Keep building this healthy connection with your past as you create the next chapters of your life.", |
| action: "Think about supporting someone who's just starting this process. What you've learned could make their path a little easier.", |
| icon: "fas fa-feather-alt", |
| color: "#CBA872" |
| }, |
| { |
| title: "In the Middle of Your Transformation", |
| range: [11, 20], |
| description: "You're noticing the patterns that have been passed down in your family and taking brave steps to change the ones that no longer help you. Some parts still feel messy or hard to untangle, that's completely normal. Simply being aware is already a powerful step toward healing.", |
| action: "Try exploring healing practices that feel natural in your culture or daily life. Even small, meaningful rituals can help you feel lighter and more connected as you keep moving forward. Also, don't forget to seek for professional help, click the button below to schedule a free consulation.", |
| icon: "fas fa-hands", |
| color: "#CBA872" |
| }, |
| { |
| title: "Carrying More Than You Should", |
| range: [21, 30], |
| description: "You're holding a lot of emotional weight that's been passed down through your family, maybe more than you even realize. The good news is, you're starting to notice it. Many people with deep cultural roots feel this way, and you're not alone. This weight isn't yours to carry forever.", |
| action: "You don't have to sort through this alone. Talking with a therapist can help you understand where this weight comes from and how to set it down. If you're ready, you can schedule a free consultation using the button below, it's a simple first step toward feeling lighter.", |
| icon: "fas fa-hand-holding-heart", |
| color: "#CBA872" |
| } |
| ]; |
| |
| |
| let currentQuestion = 0; |
| let score = 0; |
| const scoreValues = [3, 2, 1, 0]; |
| |
| |
| const quizContainer = document.getElementById('quiz-container'); |
| const welcomeScreen = document.getElementById('welcome-screen'); |
| const questionScreens = document.getElementById('question-screens'); |
| const resultsScreen = document.getElementById('results-screen'); |
| const progressBar = document.getElementById('progress-bar'); |
| |
| |
| function startQuiz() { |
| welcomeScreen.classList.add('hidden'); |
| questionScreens.classList.remove('hidden'); |
| renderQuestion(); |
| } |
| |
| |
| function renderQuestion() { |
| updateProgressBar(); |
| |
| const question = questions[currentQuestion]; |
| let optionsHtml = ''; |
| |
| question.options.forEach((option, index) => { |
| optionsHtml += ` |
| <div class="option-card cursor-pointer bg-[#f5f5f5] border border-[#e0e0e0] rounded-lg p-4 mb-3 hover:bg-[#e8e8e8] transition-colors" |
| onclick="selectOption(${index})"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-white border border-[#e0e0e0] mr-3 flex items-center justify-center text-[#cba872]"> |
| ${index + 1} |
| </div> |
| <div class="text-[#70511F]">${option}</div> |
| </div> |
| </div> |
| `; |
| }); |
| |
| questionScreens.innerHTML = ` |
| <div class="p-8 md:p-10 fade-in"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full bg-${getThemeColor(question.theme)} bg-opacity-20 flex items-center justify-center text-${getThemeColor(question.theme)} mr-4"> |
| <i class="${getThemeIcon(question.theme)}"></i> |
| </div> |
| <span class="text-sm font-medium text-${getThemeColor(question.theme)}">Question ${currentQuestion + 1} of ${questions.length}</span> |
| </div> |
| <h3 class="text-xl font-bold text-[#cba872] mb-6 leading-tight">${question.question}</h3> |
| <div class="space-y-3"> |
| ${optionsHtml} |
| </div> |
| </div> |
| `; |
| } |
| |
| |
| function getThemeIcon(theme) { |
| const icons = { |
| "burden": "fas fa-mountain", |
| "self-sacrifice": "fas fa-heart", |
| "emotional-patterns": "fas fa-brain", |
| "cultural-identity": "fas fa-globe-americas", |
| "success-guilt": "fas fa-trophy", |
| "vulnerability": "fas fa-hand-holding-heart", |
| "behavioral-patterns": "fas fa-redo", |
| "family-expectations": "fas fa-users", |
| "cultural-preservation": "fas fa-archive" |
| }; |
| return icons[theme] || "fas fa-question"; |
| } |
| |
| |
| function getThemeColor(theme) { |
| const colors = { |
| "burden": "amber", |
| "self-sacrifice": "rose", |
| "emotional-patterns": "violet", |
| "cultural-identity": "emerald", |
| "success-guilt": "amber", |
| "vulnerability": "rose", |
| "behavioral-patterns": "indigo", |
| "family-expectations": "blue", |
| "cultural-preservation": "teal" |
| }; |
| return colors[theme] || "amber"; |
| } |
| |
| |
| function selectOption(optionIndex) { |
| score += scoreValues[optionIndex]; |
| currentQuestion++; |
| |
| if (currentQuestion < questions.length) { |
| renderQuestion(); |
| } else { |
| showResults(); |
| } |
| } |
| |
| |
| function updateProgressBar() { |
| const progress = ((currentQuestion) / questions.length) * 100; |
| progressBar.style.width = `${progress}%`; |
| } |
| |
| |
| function showResults() { |
| questionScreens.classList.add('hidden'); |
| resultsScreen.classList.remove('hidden'); |
| |
| let result; |
| for (const r of results) { |
| if (score >= r.range[0] && score <= r.range[1]) { |
| result = r; |
| break; |
| } |
| } |
| |
| resultsScreen.innerHTML = ` |
| <div class="text-center fade-in"> |
| <div class="w-24 h-24 rounded-full bg-${result.color.split('-')[1]}-100 mx-auto flex items-center justify-center text-4xl ${result.color} mb-6"> |
| <i class="${result.icon}"></i> |
| </div> |
| <h2 class="text-2xl font-mb font-semibold text-[#CBA872] mb-4">${result.title}</h2> |
| |
| <div class="bg-[#f5f5f5] rounded-lg p-6 mb-8 text-left"> |
| <p class="text-[#70511F] mb-6 leading-relaxed">${result.description}</p> |
| <div class="bg-white p-4 rounded border-l-4 border-[#cba872] mb-4"> |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-2 gap-2"> |
| <h4 class="font-medium text-${result.color.split('-')[1]}-700">Your Next Step</h4> |
| <div class="text-xs sm:text-sm text-[#cba872] font-medium"> |
| Score: ${score}/30 |
| </div> |
| </div> |
| <p class="text-[#70511F]">${result.action}</p> |
| </div> |
| </div> |
| <div class="flex flex-col items-center space-y-4 mt-8"> |
| <a href="https://calendar.app.google/gU8KEajg4FnTjzKm6" target="_blank" class="bg-gradient-to-r from-[#cba872] to-[#70511F] hover:from-[#b59762] hover:to-[#5a4018] text-white font-medium py-2 px-6 rounded-full shadow-md transition-all"> |
| Book a Free Call <i class="fas fa-external-link-alt ml-2"></i> |
| </a> |
| |
| <button onclick="showAllResults()" class="text-[#cba872] font-medium py-2 px-6 border border-[#cba872] rounded-full hover:bg-[#cba872] hover:text-white transition-all"> |
| Compare All Possible Results <i class="fas fa-exchange-alt ml-2"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| } |
| |
| |
| |
| function showAllResults() { |
| let allResultsHtml = ` |
| <div class="mt-8 text-center fade-in"> |
| <h3 class="text-xl font-semibold text-[#cba872] mb-6">All Possible Results</h3> |
| <div class="grid gap-6"> |
| `; |
| |
| results.forEach((result, index) => { |
| allResultsHtml += ` |
| <div class="bg-[#f5f5f5] rounded-lg p-4 sm:p-6 text-left mx-2 sm:mx-0 ${index === 0 ? 'border-l-4 border-[#cba872]' : index === 1 ? 'border-l-4 border-[#cba872]' : 'border-l-4 border-[#cba872]'}"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-${result.color.split('-')[1]}-100 flex items-center justify-center text-sm sm:text-lg ${result.color} mr-2 sm:mr-3"> |
| <i class="${result.icon}"></i> |
| </div> |
| <h4 class="text-base sm:text-lg font-medium text-[#cba872]">${result.title}</h4> |
| </div> |
| </div> |
| <p class="text-[#70511F] mb-1 text-xs sm:text-sm"> |
| ${result.title.includes('Light') ? 'Minimal generational patterns, mostly conscious of your own path' : |
| result.title.includes('Middle') ? 'Noticeable patterns mixed with intentional changes' : |
| 'Strong generational influences that may need attention'} |
| </p> |
| <div class="text-2xs sm:text-xs text-[#cba872] font-medium">Score Range: ${result.range[0]} - ${result.range[1]}</div> |
| </div> |
| `; |
| }); |
| |
| allResultsHtml += ` |
| </div> |
| <button onclick="document.getElementById('results-comparison').remove();" |
| class="mt-6 text-[#cba872] font-medium py-2 px-6 border border-[#cba872] rounded-full hover:bg-[#cba872] hover:text-white transition-all"> |
| Back to My Results <i class="fas fa-arrow-left ml-2"></i> |
| </button> |
| </div> |
| `; |
| |
| const comparisonDiv = document.createElement('div'); |
| comparisonDiv.id = 'results-comparison'; |
| comparisonDiv.innerHTML = allResultsHtml; |
| resultsScreen.appendChild(comparisonDiv); |
| } |
| |
| function shareResults() { |
| if (navigator.share) { |
| navigator.share({ |
| title: 'Generational Patterns Reflection Results', |
| text: 'I just completed the Generational Patterns Reflection and discovered something meaningful about my emotional patterns. Try it for yourself!', |
| url: window.location.href |
| }).catch(console.error); |
| } else { |
| |
| const shareUrl = `https://twitter.com/intent/tweet?text=I%20just%20completed%20the%20Generational%20Trauma%20Reflection%20and%20discovered%20something%20meaningful%20about%20my%20emotional%20patterns.%20Try%20it%20for%20yourself!%20${encodeURIComponent(window.location.href)}`; |
| window.open(shareUrl, '_blank'); |
| } |
| } |
| |
| |
| function restartQuiz() { |
| currentQuestion = 0; |
| score = 0; |
| progressBar.style.width = '0%'; |
| resultsScreen.classList.add('hidden'); |
| welcomeScreen.classList.remove('hidden'); |
| } |
| </script> |
| </body> |
| </html> |
