Spaces:

Transgenerational
/

tt-generational-trauma-quiz

Running

App Files Files Community

Transgenerational commited on Aug 28, 2025

Commit

48d111f

verified ·

1 Parent(s): 906e408

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +350 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tt Generational Trauma Quiz
-emoji: 📊
-colorFrom: red
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tt-generational-trauma-quiz
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,350 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Do You Carry Generational Trauma? | A Reflection for Transgenerational Women</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">
+    <!-- Floating decorative elements -->
+    <div class="floating-leaves top-20 left-10 text-[#cba872] text-6xl transform rotate-12"><i class="fas fa-leaf"></i></div>
+    <div class="floating-leaves top-1/3 right-5 text-[#cba872] text-5xl transform -rotate-15"><i class="fas fa-seedling"></i></div>
+    <div class="floating-leaves bottom-1/4 left-1/4 text-[#cba872] text-7xl transform rotate-45"><i class="fas fa-spa"></i></div>
+    <div class="container mx-auto px-4 py-12 max-w-3xl">
+        <!-- Header -->
+        <header class="text-center mb-12 fade-in">
+            <h1 class="text-3xl md:text-4xl font-mb font-bold text-[#cba872] mb-4">Do You Carry Generational Trauma?</h1>
+            <p class="text-lg text-[#cba872] max-w-2xl mx-auto">A compassionate reflection for women bridging past and future</p>
+            <div class="w-full bg-[#cba872] h-1 mt-6 rounded-full"></div>
+        </header>
+        <!-- Quiz Container -->
+        <div id="quiz-container" class="bg-[#FFFFFF] rounded-xl shadow-lg overflow-hidden fade-in">
+            <!-- Progress Bar -->
+            <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>
+            <!-- Welcome Screen -->
+            <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, Sister</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 a transgenerational woman 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>
+            <!-- Question Screens (initially hidden) -->
+            <div id="question-screens" class="hidden">
+                <!-- Questions will be inserted here by JavaScript -->
+            </div>
+            <!-- Results Screen (initially hidden) -->
+            <div id="results-screen" class="hidden p-8 md:p-10">
+                <!-- Results will be inserted here by JavaScript -->
+            </div>
+        </div>
+        <footer class="text-center mt-12 text-sm text-[#cba872] opacity-80">
+            <p>Created with care for transgenerational women in Florida</p>
+            <p class="mt-1">Your story matters. Your healing creates ripples.</p>
+        </footer>
+    </div>
+    <script>
+        // Quiz questions tailored to the audience
+        const questions = [
+            {
+                question: "When facing challenges, do you often feel you're carrying more than just your own struggles?",
+                options: [
+                    "Yes, like I'm solving problems for my whole lineage",
+                    "Sometimes, especially with family matters",
+                    "Not usually—I try to keep boundaries",
+                    "I'm not sure"
+                ],
+                theme: "burden"
+            },
+            {
+                question: "How often do you suppress your needs to maintain family harmony?",
+                options: [
+                    "Frequently—it feels necessary",
+                    "Only in major conflicts",
+                    "Rarely, I prioritize my needs",
+                    "I'm working on finding balance"
+                ],
+                theme: "self-sacrifice"
+            },
+            {
+                question: "Do certain emotional reactions feel bigger than the current situation warrants?",
+                options: [
+                    "Yes, like echoes from past generations",
+                    "Sometimes—I wonder where it comes from",
+                    "Not really, my reactions feel current",
+                    "I haven't noticed"
+                ],
+                theme: "emotional-patterns"
+            },
+            {
+                question: "How connected do you feel to your cultural roots while living in Florida's diverse environment?",
+                options: [
+                    "Deeply connected but sometimes conflicted",
+                    "I blend traditions in my own way",
+                    "More Americanized than my ancestors",
+                    "I'm still exploring this"
+                ],
+                theme: "cultural-identity"
+            },
+            {
+                question: "When you achieve success, do you ever feel guilt or 'why me?' thoughts?",
+                options: [
+                    "Yes, like I'm surpassing what was possible for ancestors",
+                    "Sometimes, especially compared to family",
+                    "No, I see it as my rightful blessing",
+                    "I feel proud but also pressure"
+                ],
+                theme: "success-guilt"
+            },
+            {
+                question: "How comfortable are you with showing vulnerability in your community?",
+                options: [
+                    "Rarely—there's pressure to be strong",
+                    "With close friends only",
+                    "I'm learning to be more open",
+                    "Quite comfortable"
+                ],
+                theme: "vulnerability"
+            },
+            {
+                question: "Do you notice family patterns around money, relationships, or health repeating?",
+                options: [
+                    "Clearly—I'm working to change them",
+                    "Some, but I'm not sure why",
+                    "Not particularly",
+                    "I see both patterns and breaks"
+                ],
+                theme: "behavioral-patterns"
+            }
+        ];
+        // Possible results based on score ranges
+        const results = [
+            {
+                title: "You Carry Light Threads",
+                range: [0, 10],
+                description: "You've done remarkable work identifying and transforming inherited patterns. While you honor your roots, you've claimed agency over your emotional legacy. Continue nurturing this conscious relationship with your history as you write new chapters.",
+                action: "Consider mentoring others in your community who are earlier in this journey. Your wisdom is valuable.",
+                icon: "fas fa-feather-alt",
+                color: "#CBA872"
+            },
+            {
+                title: "A Tapestry in Transformation",
+                range: [11, 18],
+                description: "You're actively aware of generational patterns and courageously working to change what no longer serves you. Some threads still feel tangled—this is normal. Your awareness is the first powerful step toward healing.",
+                action: "Explore intergenerational healing practices that resonate with your culture. Even small rituals can create meaningful shifts.",
+                icon: "fas fa-hands",
+                color: "#CBA872"
+            },
+            {
+                title: "Honoring the Weight You Carry",
+                range: [19, 28],
+                description: "You're carrying significant emotional inheritance, perhaps more than you realize. The good news? Your awareness is growing. Many transgenerational women in Florida's intense cultural mix feel this way. You're not alone, and this weight isn't yours to carry forever.",
+                action: "Begin with small acts of reparenting yourself. What would the child version of you need to hear? Start there.",
+                icon: "fas fa-hand-holding-heart",
+                color: "#CBA872"
+            }
+        ];
+        // Quiz state variables
+        let currentQuestion = 0;
+        let score = 0;
+        const scoreValues = [3, 2, 1, 0]; // Points for each answer option
+        // DOM elements
+        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');
+        // Start the quiz
+        function startQuiz() {
+            welcomeScreen.classList.add('hidden');
+            questionScreens.classList.remove('hidden');
+            renderQuestion();
+        }
+        // Render the current question
+        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>
+            `;
+        }
+        // Get icon based on question theme
+        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"
+            };
+            return icons[theme] || "fas fa-question";
+        }
+        // Get color based on question theme
+        function getThemeColor(theme) {
+            const colors = {
+                "burden": "amber",
+                "self-sacrifice": "rose",
+                "emotional-patterns": "violet",
+                "cultural-identity": "emerald",
+                "success-guilt": "amber",
+                "vulnerability": "rose",
+                "behavioral-patterns": "indigo"
+            };
+            return colors[theme] || "amber";
+        }
+        // Handle option selection
+        function selectOption(optionIndex) {
+            score += scoreValues[optionIndex];
+            currentQuestion++;
+            if (currentQuestion < questions.length) {
+                renderQuestion();
+            } else {
+                showResults();
+            }
+        }
+        // Update progress bar
+        function updateProgressBar() {
+            const progress = ((currentQuestion) / questions.length) * 100;
+            progressBar.style.width = `${progress}%`;
+        }
+        // Show results
+        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]">
+                            <h4 class="font-medium text-${result.color.split('-')[1]}-700 mb-2">Your Next Step</h4>
+                            <p class="text-[#70511F]">${result.action}</p>
+                        </div>
+                    </div>
+                    <div class="flex flex-col sm:flex-row justify-center gap-4 mt-8">
+                        <button onclick="restartQuiz()" class="bg-[#CBA872] hover:bg-[#b59762] text-[#FFFFFF] font-medium py-2 px-6 rounded-full transition-colors">
+                            Reflect Again
+                        </button>
+                        <a href="https://www.gentogentherapy.com/book-now" 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">
+                            Start Healing <i class="fas fa-external-link-alt ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+            `;
+        }
+        // Restart the quiz
+        function restartQuiz() {
+            currentQuestion = 0;
+            score = 0;
+            progressBar.style.width = '0%';
+            resultsScreen.classList.add('hidden');
+            welcomeScreen.classList.remove('hidden');
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Transgenerational/tt-generational-trauma-quiz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>