\r\n

{count || \"GO!\"}

\r\n

\r\n {count > 0 \r\n ? \"Get ready to discover your social archetype...\" \r\n : \"Let's begin your journey!\"}\r\n

\r\n

\r\n );\r\n} ",[],[180,187,194],{"_104":203,"_95":204,"_153":205,"_155":188,"_156":138,"_157":206,"_159":22,"_106":207,"_100":32,"_162":198,"_164":208,"_165":22,"_166":-5,"_167":209,"_98":210},"f4555e0c-4d48-11f0-839c-76b3cceeab13","EmailScreen.tsx","f4555ec0-4d48-11f0-839c-76b3cceeab13",18,["D",1750363618030],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\r\nimport { validateEmail } from \"../../shared/utils.ts\";\r\n\r\ninterface EmailScreenProps {\r\n onEmailSubmit: (email: string) => void;\r\n}\r\n\r\nexport default function EmailScreen({ onEmailSubmit }: EmailScreenProps) {\r\n const [email, setEmail] = useState(\"\");\r\n const [error, setError] = useState(\"\");\r\n const [isValid, setIsValid] = useState(false);\r\n\r\n const handleEmailChange = (e: React.ChangeEvent) => {\r\n const value = e.target.value;\r\n setEmail(value);\r\n setError(\"\");\r\n setIsValid(validateEmail(value));\r\n };\r\n\r\n const handleSubmit = (e: React.FormEvent) => {\r\n e.preventDefault();\r\n \r\n if (!email.trim()) {\r\n setError(\"Email is required\");\r\n return;\r\n }\r\n\r\n if (!validateEmail(email)) {\r\n setError(\"Please enter a valid email address\");\r\n return;\r\n }\r\n\r\n onEmailSubmit(email);\r\n };\r\n\r\n return (\r\n

\r\n

🎯 Discover Your Social Archetype

\r\n

\r\n Uncover your unique social personality and find the communities where you'll thrive most.\r\n

\r\n\r\n \r\n\r\n

\r\n

📧 Your results will be emailed to you after completion

\r\n

⏱️ Takes about 3-5 minutes

\r\n

🔒 Your email is safe and will never be shared

\r\n

\r\n\r\n

\r\n

\r\n \r\n

The Visionary

\r\n

Forward-thinking innovator

\r\n

\r\n \r\n

The Nurturer

\r\n

Community builder

\r\n

\r\n \r\n

The Sage

\r\n

Knowledge seeker

\r\n

\r\n \r\n

The Artisan

\r\n

Creative expresser

\r\n

\r\n );\r\n} ",[],[180,187,204],{"_104":212,"_95":213,"_153":214,"_155":188,"_156":138,"_157":215,"_159":160,"_106":216,"_100":32,"_162":198,"_164":217,"_165":22,"_166":-5,"_167":218,"_98":219},"f451d516-4d48-11f0-a6f9-76b3cceeab13","IntroScreen.tsx","f451d5f2-4d48-11f0-a6f9-76b3cceeab13",17,["D",1750363618029],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React from \"https://esm.sh/react@18.2.0\";\r\n\r\ninterface IntroScreenProps {\r\n email: string;\r\n onStart: () => void;\r\n}\r\n\r\nexport default function IntroScreen({ email, onStart }: IntroScreenProps) {\r\n return (\r\n

\r\n

Ready to Discover?

\r\n \r\n

Welcome, {email.split('@')[0]}! 👋

\r\n

\r\n Get ready for a journey of self-discovery through 15 carefully crafted questions.\r\n

\r\n\r\n

\r\n

\r\n What You'll Discover:\r\n

\r\n

\r\n 🎯 Your Primary Archetype - Your dominant social personality\r\n
\r\n 📊 Personality Breakdown - How all archetypes blend in you\r\n
\r\n 🌟 Personalized Insights - Deep understanding of your social style\r\n
\r\n 🎪 Ideal Events & Communities - Where you'll thrive most\r\n

\r\n

\r\n\r\n

\r\n

\r\n 💡 Quick Tips for Best Results:\r\n

\r\n

Go with your first instinct
Think about your natural tendencies, not ideal self
Choose what feels most authentic to you

\r\n

\r\n\r\n \r\n\r\n

\r\n

\r\n ⏱️ Estimated time: 3-5 minutes
\r\n 📧 Results will be sent to: {email}\r\n

\r\n

\r\n );\r\n} ",[],[180,187,213],{"_104":221,"_95":222,"_153":223,"_155":188,"_156":138,"_157":224,"_159":22,"_106":225,"_100":32,"_162":198,"_164":226,"_165":22,"_166":-5,"_167":227,"_98":228},"f44ee4f0-4d48-11f0-b728-76b3cceeab13","PersonalityQuiz.tsx","f44ee57c-4d48-11f0-b728-76b3cceeab13",16,["D",1750363618022],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\r\nimport { quizQuestions } from \"../../shared/quizData.ts\";\r\n\r\ninterface PersonalityQuizProps {\r\n onComplete: (answers: number[]) => void;\r\n}\r\n\r\nexport default function PersonalityQuiz({ onComplete }: PersonalityQuizProps) {\r\n const [currentQuestion, setCurrentQuestion] = useState(0);\r\n const [answers, setAnswers] = useState([]);\r\n const [isAnimating, setIsAnimating] = useState(false);\r\n\r\n const question = quizQuestions[currentQuestion];\r\n const progress = ((currentQuestion + 1) / quizQuestions.length) * 100;\r\n\r\n const handleAnswer = (optionIndex: number) => {\r\n if (isAnimating) return;\r\n\r\n const newAnswers = [...answers, optionIndex];\r\n setAnswers(newAnswers);\r\n setIsAnimating(true);\r\n\r\n setTimeout(() => {\r\n if (currentQuestion < quizQuestions.length - 1) {\r\n setCurrentQuestion(currentQuestion + 1);\r\n setIsAnimating(false);\r\n } else {\r\n // Quiz complete\r\n onComplete(newAnswers);\r\n }\r\n }, 300);\r\n };\r\n\r\n const getOptionIcon = (index: number) => {\r\n const icons = [\"💡\", \"❤️\", \"🧠\", \"🎨\"];\r\n return icons[index] || \"✨\";\r\n };\r\n\r\n return (\r\n

\r\n

Question {currentQuestion + 1} of {quizQuestions.length}

\r\n

\r\n\r\n

\r\n

\r\n {Math.round(progress)}% Complete\r\n

\r\n

\r\n\r\n

\r\n

\r\n {question.text}\r\n

\r\n\r\n

\r\n {question.options.map((option, index) => (\r\n handleAnswer(index)}\r\n disabled={isAnimating}\r\n >\r\n \r\n {getOptionIcon(index)}\r\n \r\n {option}\r\n \r\n \r\n ))}\r\n

\r\n

\r\n\r\n
\r\n 💭 Choose the option that feels most natural to you\r\n
\r\n

\r\n );\r\n} ",[],[180,187,222],{"_104":230,"_95":231,"_153":232,"_155":188,"_156":138,"_157":233,"_159":22,"_106":234,"_100":32,"_162":198,"_164":235,"_165":22,"_166":-5,"_167":236,"_98":237},"f458c114-4d48-11f0-b4b9-76b3cceeab13","QuizResultsComponent.tsx","f458c272-4d48-11f0-b4b9-76b3cceeab13",19,["D",1750363618086],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\r\nimport { QuizResults, ArchetypeInfo } from \"../../shared/types.ts\";\r\nimport { archetypeInfo } from \"../../shared/quizData.ts\";\r\nimport { formatTime } from \"../../shared/utils.ts\";\r\n\r\ninterface QuizResultsComponentProps {\r\n results: QuizResults;\r\n email: string;\r\n completionTime: number;\r\n isSubmitting: boolean;\r\n onRestart: () => void;\r\n}\r\n\r\nexport default function QuizResultsComponent({ \r\n results, \r\n email, \r\n completionTime, \r\n isSubmitting, \r\n onRestart \r\n}: QuizResultsComponentProps) {\r\n const [activeTab, setActiveTab] = useState<'overview' | 'insights' | 'events' | 'breakdown'>('overview');\r\n\r\n const archetype = archetypeInfo[results.primaryArchetype];\r\n const sortedArchetypes = Object.entries(results.breakdown)\r\n .sort(([,a], [,b]) => b - a)\r\n .filter(([,percentage]) => percentage > 0);\r\n\r\n const shareText = `I just discovered I'm ${results.primaryArchetype}! 🎯 Find out your social archetype too.`;\r\n\r\n const handleShare = (platform: string) => {\r\n const url = window.location.href;\r\n const text = encodeURIComponent(shareText);\r\n \r\n const shareUrls = {\r\n twitter: `https://twitter.com/intent/tweet?text=${text}&url=${encodeURIComponent(url)}`,\r\n linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,\r\n facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`\r\n };\r\n\r\n window.open(shareUrls[platform as keyof typeof shareUrls], '_blank');\r\n };\r\n\r\n const downloadResults = () => {\r\n const resultsData = {\r\n email,\r\n primaryArchetype: results.primaryArchetype,\r\n breakdown: results.breakdown,\r\n completionTime: formatTime(completionTime),\r\n timestamp: new Date().toISOString()\r\n };\r\n\r\n const blob = new Blob([JSON.stringify(resultsData, null, 2)], {\r\n type: 'application/json'\r\n });\r\n\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `social-archetype-results-${Date.now()}.json`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n };\r\n\r\n return (\r\n
\r\n
\r\n
\r\n You are {results.primaryArchetype} {archetype.icon}\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n\r\n {isSubmitting && (\r\n
\r\n 📧 Sending detailed results to {email}...\r\n
\r\n )}\r\n\r\n
\r\n
\r\n {[\r\n { key: 'overview', label: 'Overview', icon: '🎯' },\r\n { key: 'insights', label: 'Insights', icon: '💡' },\r\n { key: 'events', label: 'Events', icon: '🎪' },\r\n { key: 'breakdown', label: 'Breakdown', icon: '📊' }\r\n ].map(tab => (\r\n setActiveTab(tab.key as any)}\r\n >\r\n {tab.icon} {tab.label}\r\n \r\n ))}\r\n
\r\n\r\n
\r\n {activeTab === 'overview' && (\r\n
\r\n
\r\n
{archetype.name} {archetype.icon}
\r\n
{archetype.description}
\r\n
\r\n\r\n
Your Key Traits:
\r\n
\r\n {archetype.traits.map((trait, index) => (\r\n
\r\n \r\n {trait}\r\n
\r\n ))}\r\n
\r\n\r\n
Famous Examples:
\r\n
\r\n {archetype.famousExamples.map((person, index) => (\r\n
\r\n \r\n {person}\r\n
\r\n ))}\r\n
\r\n
\r\n )}\r\n\r\n {activeTab === 'insights' && (\r\n
\r\n
Personalized Insights
\r\n
\r\n {archetype.insights.map((insight, index) => (\r\n
\r\n \r\n {insight}\r\n
\r\n ))}\r\n
\r\n\r\n
\r\n
Your Quiz Performance:
\r\n
⏱️ Completion Time: {formatTime(completionTime)}
\r\n
🎯 Primary Archetype Strength: {results.breakdown[results.primaryArchetype]}%
\r\n
🌟 Personality Complexity: \r\n {sortedArchetypes.length > 4 ? 'Complex' : \r\n sortedArchetypes.length > 2 ? 'Balanced' : 'Focused'}\r\n
\r\n
\r\n
\r\n )}\r\n\r\n {activeTab === 'events' && (\r\n
\r\n
Ideal Events & Communities
\r\n
\r\n {archetype.idealEvents.map((event, index) => (\r\n
\r\n
\r\n {event.icon}\r\n
\r\n
\r\n
{event.title}
\r\n
{event.description}
\r\n {event.link && (\r\n \r\n Learn More\r\n \r\n )}\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n )}\r\n\r\n {activeTab === 'breakdown' && (\r\n
\r\n
Your Archetype Breakdown
\r\n {sortedArchetypes.map(([archetype, percentage]) => (\r\n
\r\n
\r\n \r\n {archetype}\r\n
\r\n
\r\n
\r\n
\r\n {percentage}%\r\n
\r\n
\r\n
\r\n ))}\r\n
\r\n )}\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n
\r\n 📧 Detailed results sent to: {email}
\r\n ⏱️ Completed in: {formatTime(completionTime)}\r\n
\r\n
\r\n
\r\n
\r\n );\r\n} ",[],[180,187,231],[180,187],{"_104":240,"_95":241,"_153":242,"_155":181,"_156":138,"_157":243,"_159":160,"_106":244,"_100":245,"_162":246,"_164":247,"_165":22,"_166":-5,"_167":248,"_98":249},"df43b9ee-4d4a-11f0-950e-76b3cceeab13","index.html","f468dfcc-4d48-11f0-b33f-76b3cceeab13",31,["D",1750364441704],1,"file","\r\n\r\n\r\n \r\n \r\n Discover Your Social Archetype | Interactive Personality Quiz\r\n \r\n \r\n \r\n 🎯\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n
\r\n
\r\n
\r\n \r\n \r\n\r\n ",[],[180,241],{"_104":251,"_95":252,"_153":253,"_155":181,"_156":138,"_157":254,"_159":22,"_106":255,"_100":32,"_162":198,"_164":256,"_165":22,"_166":-5,"_167":257,"_98":258},"f46c5364-4d48-11f0-a112-76b3cceeab13","index.tsx","f46c54ae-4d48-11f0-a112-76b3cceeab13",22,["D",1750363618177],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\r\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\r\nimport { QuizState, QuizResults as QuizResultsType } from \"../shared/types.ts\";\r\nimport EmailScreen from \"./components/EmailScreen.tsx\";\r\nimport IntroScreen from \"./components/IntroScreen.tsx\";\r\nimport CountdownScreen from \"./components/CountdownScreen.tsx\";\r\nimport PersonalityQuiz from \"./components/PersonalityQuiz.tsx\";\r\nimport QuizResultsComponent from \"./components/QuizResultsComponent.tsx\";\r\nimport { calculateResults, generateInsights } from \"../shared/utils.ts\";\r\n\r\nfunction App() {\r\n const [quizState, setQuizState] = useState({\r\n phase: \"email\",\r\n email: \"\",\r\n currentQuestion: 0,\r\n answers: [],\r\n startTime: 0,\r\n results: undefined\r\n });\r\n\r\n const [isSubmitting, setIsSubmitting] = useState(false);\r\n\r\n const handleEmailSubmit = (email: string) => {\r\n setQuizState(prev => ({\r\n ...prev,\r\n email,\r\n phase: \"intro\"\r\n }));\r\n };\r\n\r\n const handleStart = () => {\r\n setQuizState(prev => ({\r\n ...prev,\r\n phase: \"countdown\"\r\n }));\r\n };\r\n\r\n const handleCountdownComplete = () => {\r\n setQuizState(prev => ({\r\n ...prev,\r\n phase: \"quiz\",\r\n startTime: Date.now()\r\n }));\r\n };\r\n\r\n const handleQuizComplete = async (answers: number[]) => {\r\n const completionTime = Date.now() - quizState.startTime;\r\n const results = calculateResults(answers);\r\n const insights = generateInsights(results, completionTime);\r\n\r\n // Update state first\r\n setQuizState(prev => ({\r\n ...prev,\r\n answers,\r\n results,\r\n phase: \"results\"\r\n }));\r\n\r\n // Trigger confetti\r\n if ((window as any).confetti) {\r\n (window as any).confetti({\r\n particleCount: 250,\r\n spread: 120,\r\n origin: { x: 0.5, y: 0.4 },\r\n });\r\n }\r\n\r\n // Submit to backend\r\n setIsSubmitting(true);\r\n try {\r\n const response = await fetch('/api/submit-quiz', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n body: JSON.stringify({\r\n email: quizState.email,\r\n results,\r\n answers,\r\n completionTime,\r\n insights\r\n }),\r\n });\r\n\r\n const data = await response.json();\r\n if (!response.ok) {\r\n throw new Error(data.error || 'Failed to submit quiz');\r\n }\r\n\r\n console.log('Quiz submitted successfully:', data.message);\r\n } catch (error) {\r\n console.error('Error submitting quiz:', error);\r\n // Could show an error message to user here\r\n } finally {\r\n setIsSubmitting(false);\r\n }\r\n };\r\n\r\n const handleRestart = () => {\r\n setQuizState({\r\n phase: \"email\",\r\n email: \"\",\r\n currentQuestion: 0,\r\n answers: [],\r\n startTime: 0,\r\n results: undefined\r\n });\r\n };\r\n\r\n switch (quizState.phase) {\r\n case \"email\":\r\n return ;\r\n case \"intro\":\r\n return ;\r\n case \"countdown\":\r\n return ;\r\n case \"quiz\":\r\n return ;\r\n case \"results\":\r\n return (\r\n \r\n );\r\n default:\r\n return null;\r\n }\r\n}\r\n\r\nfunction client() {\r\n createRoot(document.getElementById(\"root\")!).render();\r\n}\r\n\r\nif (typeof document !== \"undefined\") {\r\n client();\r\n} ",[],[180,252],{"_104":260,"_95":261,"_153":262,"_155":181,"_156":138,"_157":263,"_159":22,"_106":264,"_100":32,"_162":246,"_164":265,"_165":22,"_166":-5,"_167":266,"_98":267},"f4703cd6-4d48-11f0-a02d-76b3cceeab13","style.css","f4703d8a-4d48-11f0-a02d-76b3cceeab13",23,["D",1750363618202],"/* Global Reset & Variables */\r\n:root {\r\n --primary-color: #4361ee;\r\n --secondary-color: #3a86ff;\r\n --tertiary-color: #4cc9f0;\r\n --accent-color: #f72585;\r\n --success-color: #4bc06c;\r\n --warning-color: #ff9f1c;\r\n --error-color: #e63946;\r\n --text-color: #333;\r\n --text-light: #666;\r\n --background-color: #f8f9fa;\r\n --card-bg: #ffffff;\r\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n --border-radius: 12px;\r\n --transition: all 0.3s ease;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: 'Poppins', sans-serif;\r\n background-color: var(--background-color);\r\n color: var(--text-color);\r\n line-height: 1.6;\r\n}\r\n\r\nh1, h2, h3, h4 {\r\n font-family: 'Playfair Display', serif;\r\n margin-bottom: 1rem;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n border: none;\r\n outline: none;\r\n font-family: 'Poppins', sans-serif;\r\n font-weight: 500;\r\n transition: var(--transition);\r\n}\r\n\r\n/* Container */\r\n.app-container {\r\n max-width: 800px;\r\n margin: 2rem auto;\r\n background-color: var(--card-bg);\r\n border-radius: var(--border-radius);\r\n box-shadow: var(--shadow);\r\n overflow: hidden;\r\n}\r\n\r\n/* Animation Classes */\r\n.fade-in {\r\n animation: fadeIn 0.6s ease-in forwards;\r\n}\r\n\r\n.fade-out {\r\n animation: fadeOut 0.4s ease-out forwards;\r\n}\r\n\r\n@keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n@keyframes fadeOut {\r\n from { opacity: 1; transform: translateY(0); }\r\n to { opacity: 0; transform: translateY(-10px); }\r\n}\r\n\r\n.pulse-animation {\r\n animation: pulse 2s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.05); }\r\n 100% { transform: scale(1); }\r\n}\r\n\r\n/* Email Screen */\r\n.email-screen {\r\n padding: 3rem 2rem;\r\n text-align: center;\r\n}\r\n\r\n.email-screen h1 {\r\n color: var(--primary-color);\r\n font-size: 2.5rem;\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.email-form {\r\n max-width: 400px;\r\n margin: 2rem auto;\r\n}\r\n\r\n.email-input {\r\n width: 100%;\r\n padding: 1rem 1.5rem;\r\n border: 2px solid rgba(67, 97, 238, 0.2);\r\n border-radius: var(--border-radius);\r\n font-size: 1rem;\r\n margin-bottom: 1rem;\r\n transition: var(--transition);\r\n}\r\n\r\n.email-input:focus {\r\n border-color: var(--primary-color);\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);\r\n}\r\n\r\n.email-submit {\r\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\r\n color: white;\r\n padding: 1rem 2rem;\r\n border-radius: 30px;\r\n font-size: 1.1rem;\r\n width: 100%;\r\n box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);\r\n}\r\n\r\n.email-submit:hover:not(:disabled) {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);\r\n}\r\n\r\n.email-submit:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Intro Screen */\r\n.intro-screen {\r\n padding: 3rem 2rem;\r\n text-align: center;\r\n position: relative;\r\n}\r\n\r\n.intro-badge {\r\n position: absolute;\r\n top: 1rem;\r\n right: 1rem;\r\n background: linear-gradient(45deg, var(--accent-color), var(--primary-color));\r\n color: white;\r\n padding: 0.5rem 1rem;\r\n border-radius: 20px;\r\n font-weight: 600;\r\n font-size: 0.8rem;\r\n}\r\n\r\n.intro-screen h1 {\r\n color: var(--primary-color);\r\n font-size: 2.5rem;\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.intro-tagline {\r\n font-size: 1.2rem;\r\n color: var(--text-light);\r\n margin-bottom: 2rem;\r\n}\r\n\r\n.intro-screen button {\r\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\r\n color: white;\r\n padding: 1rem 2rem;\r\n border-radius: 30px;\r\n font-size: 1.1rem;\r\n margin-top: 2rem;\r\n box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);\r\n}\r\n\r\n.intro-screen button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);\r\n}\r\n\r\n/* Countdown Screen */\r\n.countdown-screen {\r\n height: 400px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem;\r\n}\r\n\r\n.countdown-circle {\r\n width: 150px;\r\n height: 150px;\r\n border-radius: 50%;\r\n background: linear-gradient(45deg, var(--primary-color), var(--tertiary-color));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n box-shadow: 0 8px 25px rgba(67, 97, 238, 0.3);\r\n}\r\n\r\n.countdown-circle h1 {\r\n color: white;\r\n font-size: 3.5rem;\r\n margin: 0;\r\n}\r\n\r\n.countdown-message {\r\n font-size: 1.2rem;\r\n color: var(--text-light);\r\n text-align: center;\r\n}\r\n\r\n/* Progress Bar */\r\n.progress-container {\r\n margin-bottom: 2rem;\r\n}\r\n\r\n.progress-bar {\r\n height: 8px;\r\n background-color: rgba(67, 97, 238, 0.1);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--primary-color), var(--tertiary-color));\r\n transition: width 0.4s ease;\r\n}\r\n\r\n.progress-indicator {\r\n text-align: right;\r\n font-size: 0.85rem;\r\n color: var(--text-light);\r\n}\r\n\r\n/* Option Buttons */\r\n.options {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n}\r\n\r\n.option-button {\r\n background-color: white;\r\n border: 1px solid rgba(67, 97, 238, 0.2);\r\n padding: 1rem 1.5rem;\r\n border-radius: var(--border-radius);\r\n text-align: left;\r\n font-size: 1rem;\r\n transition: var(--transition);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.option-button:hover {\r\n background-color: rgba(67, 97, 238, 0.05);\r\n border-color: var(--primary-color);\r\n transform: translateX(5px);\r\n}\r\n\r\n/* Results */\r\n.quiz-results {\r\n padding: 2rem;\r\n}\r\n\r\n.results-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 2rem;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n}\r\n\r\n.archetype-highlight {\r\n background: linear-gradient(45deg, var(--primary-color), var(--tertiary-color));\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n}\r\n\r\n/* Tabs */\r\n.tabs-container {\r\n margin: 2rem 0;\r\n background-color: white;\r\n border-radius: var(--border-radius);\r\n overflow: hidden;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.tabs {\r\n display: flex;\r\n background-color: rgba(67, 97, 238, 0.05);\r\n border-bottom: 1px solid rgba(67, 97, 238, 0.1);\r\n}\r\n\r\n.tabs button {\r\n padding: 1rem 1.5rem;\r\n background: none;\r\n font-size: 0.95rem;\r\n color: var(--text-light);\r\n flex: 1;\r\n border-bottom: 3px solid transparent;\r\n}\r\n\r\n.tabs button.tab-active {\r\n color: var(--primary-color);\r\n border-bottom: 3px solid var(--primary-color);\r\n background-color: white;\r\n}\r\n\r\n.tab-content {\r\n padding: 2rem;\r\n min-height: 300px;\r\n}\r\n\r\n/* Archetype cards and grids */\r\n.archetype-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 1rem;\r\n margin: 2rem 0;\r\n}\r\n\r\n.archetype-card {\r\n background-color: rgba(67, 97, 238, 0.05);\r\n padding: 1.5rem 1rem;\r\n border-radius: var(--border-radius);\r\n transition: var(--transition);\r\n text-align: center;\r\n}\r\n\r\n.archetype-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: var(--shadow);\r\n}\r\n\r\n.archetype-card i {\r\n color: var(--primary-color);\r\n font-size: 1.5rem;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.archetype-card h4 {\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.archetype-card p {\r\n font-size: 0.85rem;\r\n color: var(--text-light);\r\n}\r\n\r\n/* Archetype description */\r\n.archetype-description {\r\n background-color: rgba(67, 97, 238, 0.05);\r\n padding: 1.5rem;\r\n border-radius: var(--border-radius);\r\n margin-bottom: 2rem;\r\n border-left: 4px solid var(--primary-color);\r\n}\r\n\r\n/* Famous examples */\r\n.famous-examples {\r\n display: flex;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.famous-example {\r\n background-color: white;\r\n border: 1px solid rgba(67, 97, 238, 0.2);\r\n padding: 0.8rem 1.5rem;\r\n border-radius: 30px;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.famous-example i {\r\n color: var(--warning-color);\r\n margin-right: 0.5rem;\r\n}\r\n\r\n/* Insights */\r\n.insights-list {\r\n list-style: none;\r\n}\r\n\r\n.insight-item {\r\n margin-bottom: 1rem;\r\n padding: 1rem;\r\n background-color: white;\r\n border-radius: var(--border-radius);\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.insight-item i {\r\n color: var(--success-color);\r\n margin-right: 0.5rem;\r\n}\r\n\r\n/* Events */\r\n.events-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 1.5rem;\r\n}\r\n\r\n.event-card {\r\n background-color: white;\r\n border-radius: var(--border-radius);\r\n overflow: hidden;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n display: flex;\r\n transition: var(--transition);\r\n}\r\n\r\n.event-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.event-icon {\r\n background: linear-gradient(45deg, var(--primary-color), var(--tertiary-color));\r\n color: white;\r\n padding: 1.5rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n}\r\n\r\n.event-details {\r\n padding: 1.5rem;\r\n flex: 1;\r\n}\r\n\r\n.event-details h4 {\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.event-details p {\r\n font-size: 0.85rem;\r\n color: var(--text-light);\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.event-button {\r\n background-color: var(--primary-color);\r\n color: white;\r\n padding: 0.5rem 1rem;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n text-decoration: none;\r\n display: inline-block;\r\n}\r\n\r\n.event-button:hover {\r\n background-color: var(--secondary-color);\r\n}\r\n\r\n/* Percentage bars */\r\n.percentage-bar {\r\n margin-bottom: 1.5rem;\r\n}\r\n\r\n.percentage-label {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.percentage-label i {\r\n color: var(--primary-color);\r\n margin-right: 0.5rem;\r\n}\r\n\r\n.percentage-container {\r\n height: 24px;\r\n background-color: rgba(67, 97, 238, 0.1);\r\n border-radius: 12px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.percentage-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--primary-color), var(--tertiary-color));\r\n border-radius: 12px;\r\n transition: width 1s ease;\r\n}\r\n\r\n.percentage-value {\r\n position: absolute;\r\n right: 10px;\r\n top: 0;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n color: white;\r\n font-weight: 600;\r\n font-size: 0.85rem;\r\n}\r\n\r\n/* Share buttons */\r\n.share-buttons {\r\n display: flex;\r\n gap: 0.8rem;\r\n}\r\n\r\n.share-button, .download-button {\r\n background-color: white;\r\n border: 1px solid rgba(67, 97, 238, 0.2);\r\n padding: 0.5rem 1rem;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n color: var(--primary-color);\r\n}\r\n\r\n.share-button:hover, .download-button:hover {\r\n background-color: rgba(67, 97, 238, 0.05);\r\n border-color: var(--primary-color);\r\n}\r\n\r\n/* Results footer */\r\n.results-footer {\r\n margin-top: 2rem;\r\n text-align: center;\r\n}\r\n\r\n.cta-button {\r\n background: linear-gradient(45deg, var(--accent-color), var(--primary-color));\r\n color: white;\r\n padding: 1rem 2rem;\r\n border-radius: 30px;\r\n font-size: 1.1rem;\r\n margin-bottom: 1.5rem;\r\n box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);\r\n}\r\n\r\n.cta-button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(247, 37, 133, 0.4);\r\n}\r\n\r\n.source-link {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.source-link a {\r\n color: var(--text-light);\r\n text-decoration: none;\r\n}\r\n\r\n.source-link a:hover {\r\n color: var(--primary-color);\r\n}\r\n\r\n/* Responsive - Enhanced for all devices */\r\n@media (max-width: 768px) {\r\n .app-container {\r\n margin: 1rem;\r\n max-width: 100%;\r\n }\r\n \r\n .email-screen, .intro-screen, .quiz-results {\r\n padding: 1.5rem;\r\n }\r\n \r\n .intro-screen h1 {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .intro-tagline {\r\n font-size: 1rem;\r\n }\r\n\r\n .results-header {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .tabs button {\r\n padding: 0.8rem;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .tabs {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .tabs button {\r\n flex: auto;\r\n min-width: 50%;\r\n }\r\n\r\n .tab-content {\r\n padding: 1.5rem;\r\n }\r\n \r\n /* Enhanced quiz interactions for mobile */\r\n .quiz-card {\r\n margin: 0.5rem 0;\r\n padding: 1rem;\r\n }\r\n \r\n .quiz-header h1 {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .question-container h2 {\r\n font-size: 1.1rem;\r\n line-height: 1.4;\r\n }\r\n \r\n .option-button {\r\n padding: 0.75rem;\r\n font-size: 0.9rem;\r\n min-height: 44px; /* Touch-friendly */\r\n }\r\n \r\n .navigation-buttons {\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n }\r\n \r\n .nav-button {\r\n min-width: 120px;\r\n padding: 0.75rem;\r\n }\r\n \r\n /* Mobile form improvements */\r\n .email-input {\r\n font-size: 16px; /* Prevents zoom on iOS */\r\n min-height: 44px;\r\n }\r\n \r\n .email-submit {\r\n min-height: 44px;\r\n width: 100%;\r\n margin-top: 1rem;\r\n }\r\n \r\n /* Events grid mobile optimization */\r\n .events-grid {\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n }\r\n \r\n .event-card {\r\n flex-direction: column;\r\n }\r\n \r\n .event-icon {\r\n padding: 1rem;\r\n font-size: 1.2rem;\r\n }\r\n \r\n .event-details {\r\n padding: 1rem;\r\n }\r\n \r\n /* Percentage bars mobile optimization */\r\n .percentage-container {\r\n height: 20px;\r\n }\r\n \r\n .percentage-value {\r\n font-size: 0.75rem;\r\n }\r\n \r\n /* Share buttons mobile layout */\r\n .share-buttons {\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n }\r\n \r\n .share-button, .download-button {\r\n flex: 1;\r\n min-width: 120px;\r\n text-align: center;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .app-container {\r\n margin: 0.5rem;\r\n }\r\n \r\n .email-screen, .intro-screen, .quiz-results {\r\n padding: 1rem;\r\n }\r\n \r\n .intro-screen h1 {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .intro-tagline {\r\n font-size: 0.9rem;\r\n }\r\n \r\n .quiz-header h1 {\r\n font-size: 1.3rem;\r\n }\r\n \r\n .question-container h2 {\r\n font-size: 1rem;\r\n }\r\n \r\n .option-button {\r\n padding: 0.6rem;\r\n font-size: 0.85rem;\r\n }\r\n \r\n .nav-button {\r\n padding: 0.6rem;\r\n font-size: 0.9rem;\r\n min-width: 100px;\r\n }\r\n \r\n .countdown-circle {\r\n width: 120px;\r\n height: 120px;\r\n }\r\n \r\n .countdown-circle h1 {\r\n font-size: 3rem;\r\n }\r\n \r\n .tabs button {\r\n padding: 0.6rem;\r\n font-size: 0.8rem;\r\n min-width: 45%;\r\n }\r\n \r\n .tab-content {\r\n padding: 1rem;\r\n }\r\n \r\n .archetype-card {\r\n padding: 1rem;\r\n }\r\n \r\n .archetype-card h4 {\r\n font-size: 1rem;\r\n }\r\n \r\n .results-header h1 {\r\n font-size: 1.3rem;\r\n }\r\n \r\n .archetype-highlight {\r\n font-size: 1.1rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n}\r\n\r\n/* Touch device optimizations */\r\n@media (hover: none) and (pointer: coarse) {\r\n .option-button:hover {\r\n background: var(--option-bg);\r\n border-color: var(--border-color);\r\n }\r\n \r\n .option-button:active {\r\n background: var(--primary-color);\r\n color: white;\r\n transform: scale(0.98);\r\n }\r\n \r\n .nav-button:active,\r\n .email-submit:active,\r\n .tabs button:active {\r\n transform: scale(0.98);\r\n }\r\n \r\n /* Remove hover effects on touch devices */\r\n .event-card:hover {\r\n transform: none;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n }\r\n \r\n .archetype-card:hover {\r\n transform: none;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n }\r\n} ",[],[180,261],[180],{"_104":270,"_95":271,"_153":272,"_155":-5,"_156":138,"_157":273,"_159":160,"_106":274,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":275,"_98":303},"77682000-4d48-11f0-ae3c-76b3cceeab13","shared","776820a0-4d48-11f0-ae3c-76b3cceeab13",5,["D",1750363408471],[276,285,294],{"_104":277,"_95":278,"_153":279,"_155":272,"_156":138,"_157":280,"_159":22,"_106":281,"_100":32,"_162":198,"_164":282,"_165":22,"_166":-5,"_167":283,"_98":284},"f47b2dd0-4d48-11f0-90f4-76b3cceeab13","quizData.ts","f47b2eac-4d48-11f0-90f4-76b3cceeab13",25,["D",1750363618234],"import { QuizQuestion, ArchetypeInfo } from \"./types.ts\";\r\n\r\nexport const quizQuestions: QuizQuestion[] = [\r\n {\r\n text: \"When you envision the future, what excites you most?\",\r\n options: [\r\n \"Innovative technology\",\r\n \"Nurturing community bonds\",\r\n \"Exploring ancient wisdom\",\r\n \"Expressing creative ideas\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"How do you prefer to spend your free time?\",\r\n options: [\r\n \"Brainstorming groundbreaking ideas\",\r\n \"Caring for friends and family\",\r\n \"Reading and learning\",\r\n \"Dabbling in creative projects\",\r\n ],\r\n mapping: [\r\n \"The Catalyst\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"What's your ideal weekend activity?\",\r\n options: [\r\n \"Networking with like-minded people\",\r\n \"Volunteering in your community\",\r\n \"Attending workshops or lectures\",\r\n \"Creating art or DIY crafts\",\r\n ],\r\n mapping: [\r\n \"The Connector\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"When facing a challenge, you are most likely to:\",\r\n options: [\r\n \"Innovate a new solution\",\r\n \"Seek support and comfort from others\",\r\n \"Analyze the situation deeply\",\r\n \"Take a hands-on approach\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"Which environment inspires you most?\",\r\n options: [\r\n \"A futuristic cityscape\",\r\n \"A cozy home filled with loved ones\",\r\n \"A quiet library or study\",\r\n \"An art studio with endless possibilities\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"How would your friends describe you?\",\r\n options: [\r\n \"Visionary and forward-thinking\",\r\n \"Caring and empathetic\",\r\n \"Wise and insightful\",\r\n \"Creative and imaginative\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"What motivates you to get out of bed every morning?\",\r\n options: [\r\n \"The drive to change the world\",\r\n \"The desire to care for others\",\r\n \"The quest for knowledge\",\r\n \"The urge to create something new\",\r\n ],\r\n mapping: [\r\n \"The Catalyst\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"Which quote resonates with you the most?\",\r\n options: [\r\n \"'The future belongs to those who believe in the beauty of their dreams.'\",\r\n \"'The best way to find yourself is to lose yourself in the service of others.'\",\r\n \"'Knowledge speaks, but wisdom listens.'\",\r\n \"'Creativity is intelligence having fun.'\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"What type of event would you attend?\",\r\n options: [\r\n \"Tech innovation conferences\",\r\n \"Community service meetups\",\r\n \"Philosophy and book clubs\",\r\n \"Art and design exhibitions\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"In a group project, what role do you take?\",\r\n options: [\r\n \"Idea generator\",\r\n \"Support coordinator\",\r\n \"Research lead\",\r\n \"Creative director\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"When making decisions, you rely on:\",\r\n options: [\r\n \"Bold intuition\",\r\n \"Empathy and care\",\r\n \"Logical analysis\",\r\n \"Artistic flair\",\r\n ],\r\n mapping: [\r\n \"The Catalyst\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"Which hobby appeals to you the most?\",\r\n options: [\r\n \"Experimenting with new gadgets\",\r\n \"Gardening and cooking\",\r\n \"Studying history or science\",\r\n \"Painting or sculpting\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"Your perfect vacation would be:\",\r\n options: [\r\n \"A tour of innovative cities\",\r\n \"A retreat with loved ones\",\r\n \"A cultural and educational journey\",\r\n \"A creative workshop in an inspiring locale\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"What's your approach to social media?\",\r\n options: [\r\n \"Share innovative ideas and trends\",\r\n \"Connect with friends and support others\",\r\n \"Share knowledge and thoughtful content\",\r\n \"Showcase creative work and inspiration\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n },\r\n {\r\n text: \"When attending a party, you're most likely to:\",\r\n options: [\r\n \"Discuss exciting new possibilities\",\r\n \"Make sure everyone feels included\",\r\n \"Engage in deep, meaningful conversations\",\r\n \"Appreciate the aesthetic details\",\r\n ],\r\n mapping: [\r\n \"The Visionary\",\r\n \"The Nurturer\",\r\n \"The Sage\",\r\n \"The Artisan\",\r\n ],\r\n }\r\n];\r\n\r\nexport const archetypeInfo: Record = {\r\n \"The Visionary\": {\r\n name: \"The Visionary\",\r\n description: \"You're a forward-thinking innovator who sees possibilities others miss. You thrive in environments where you can explore new ideas and push boundaries.\",\r\n icon: \"🔮\",\r\n traits: [\r\n \"Forward-thinking and innovative\",\r\n \"Comfortable with uncertainty\",\r\n \"Natural ability to see the big picture\",\r\n \"Passionate about future possibilities\",\r\n \"Strategic and ambitious\"\r\n ],\r\n famousExamples: [\"Elon Musk\", \"Steve Jobs\", \"Oprah Winfrey\"],\r\n idealEvents: [\r\n {\r\n title: \"Tech Innovation Summit\",\r\n description: \"Explore cutting-edge technologies and future trends\",\r\n icon: \"💡\"\r\n },\r\n {\r\n title: \"Entrepreneurship Meetup\",\r\n description: \"Connect with fellow innovators and startup founders\",\r\n icon: \"🚀\"\r\n },\r\n {\r\n title: \"Future of Work Conference\",\r\n description: \"Discuss emerging workplace trends and possibilities\",\r\n icon: \"🌟\"\r\n }\r\n ],\r\n insights: [\r\n \"You're energized by brainstorming sessions and blue-sky thinking\",\r\n \"You work best when you can see the long-term vision\",\r\n \"You prefer environments that encourage experimentation\",\r\n \"You're motivated by the potential to create meaningful change\"\r\n ]\r\n },\r\n \"The Nurturer\": {\r\n name: \"The Nurturer\",\r\n description: \"You're a caring, empathetic person who finds fulfillment in supporting others and building strong communities. You create warm, inclusive environments wherever you go.\",\r\n icon: \"🤗\",\r\n traits: [\r\n \"Naturally empathetic and caring\",\r\n \"Excellent at building relationships\",\r\n \"Values harmony and cooperation\",\r\n \"Puts others' needs first\",\r\n \"Creates inclusive environments\"\r\n ],\r\n famousExamples: [\"Mr. Rogers\", \"Maya Angelou\", \"Mother Teresa\"],\r\n idealEvents: [\r\n {\r\n title: \"Community Service Projects\",\r\n description: \"Make a difference in your local community\",\r\n icon: \"❤️\"\r\n },\r\n {\r\n title: \"Support Group Meetings\",\r\n description: \"Help others through shared experiences\",\r\n icon: \"🫂\"\r\n },\r\n {\r\n title: \"Family-Friendly Gatherings\",\r\n description: \"Connect with others in warm, welcoming settings\",\r\n icon: \"🏠\"\r\n }\r\n ],\r\n insights: [\r\n \"You thrive in collaborative, supportive environments\",\r\n \"You're energized by helping others achieve their goals\",\r\n \"You prefer face-to-face interactions over digital communication\",\r\n \"You're motivated by creating positive impacts in people's lives\"\r\n ]\r\n },\r\n \"The Sage\": {\r\n name: \"The Sage\",\r\n description: \"You're a thoughtful, knowledge-seeking individual who values wisdom and deep understanding. You prefer meaningful conversations and continuous learning.\",\r\n icon: \"📚\",\r\n traits: [\r\n \"Values knowledge and wisdom\",\r\n \"Enjoys deep, meaningful conversations\",\r\n \"Thoughtful and reflective\",\r\n \"Seeks to understand rather than judge\",\r\n \"Natural teacher and mentor\"\r\n ],\r\n famousExamples: [\"Carl Sagan\", \"Jane Goodall\", \"Albert Einstein\"],\r\n idealEvents: [\r\n {\r\n title: \"Philosophy Discussion Groups\",\r\n description: \"Explore life's big questions with fellow thinkers\",\r\n icon: \"🤔\"\r\n },\r\n {\r\n title: \"Academic Lectures\",\r\n description: \"Learn from experts in various fields\",\r\n icon: \"🎓\"\r\n },\r\n {\r\n title: \"Book Clubs\",\r\n description: \"Dive deep into literature and ideas\",\r\n icon: \"📖\"\r\n }\r\n ],\r\n insights: [\r\n \"You're energized by learning and intellectual stimulation\",\r\n \"You prefer smaller, intimate gatherings over large crowds\",\r\n \"You value quality over quantity in relationships\",\r\n \"You're motivated by the pursuit of truth and understanding\"\r\n ]\r\n },\r\n \"The Artisan\": {\r\n name: \"The Artisan\",\r\n description: \"You're a creative, hands-on person who expresses yourself through art, craft, and innovation. You value authenticity and original expression.\",\r\n icon: \"🎨\",\r\n traits: [\r\n \"Highly creative and artistic\",\r\n \"Values authenticity and originality\",\r\n \"Enjoys hands-on activities\",\r\n \"Sees beauty in everyday things\",\r\n \"Independent and self-directed\"\r\n ],\r\n famousExamples: [\"Frida Kahlo\", \"Leonardo da Vinci\", \"David Bowie\"],\r\n idealEvents: [\r\n {\r\n title: \"Art Gallery Openings\",\r\n description: \"Discover new artists and creative expressions\",\r\n icon: \"🖼️\"\r\n },\r\n {\r\n title: \"Maker Workshops\",\r\n description: \"Learn new crafts and create with your hands\",\r\n icon: \"🔨\"\r\n },\r\n {\r\n title: \"Creative Festivals\",\r\n description: \"Celebrate art, music, and creative expression\",\r\n icon: \"🎭\"\r\n }\r\n ],\r\n insights: [\r\n \"You're energized by creative challenges and artistic expression\",\r\n \"You prefer environments that encourage individuality\",\r\n \"You work best with flexible schedules and creative freedom\",\r\n \"You're motivated by the ability to create something unique\"\r\n ]\r\n },\r\n \"The Catalyst\": {\r\n name: \"The Catalyst\",\r\n description: \"You're a dynamic change-maker who brings energy and innovation to everything you do. You're excellent at inspiring others and driving transformation.\",\r\n icon: \"⚡\",\r\n traits: [\r\n \"Natural leader and motivator\",\r\n \"Thrives on change and innovation\",\r\n \"Excellent at inspiring others\",\r\n \"Comfortable taking risks\",\r\n \"Energy and enthusiasm are contagious\"\r\n ],\r\n famousExamples: [\"Richard Branson\", \"Malala Yousafzai\", \"Tony Robbins\"],\r\n idealEvents: [\r\n {\r\n title: \"Leadership Conferences\",\r\n description: \"Learn from and connect with other leaders\",\r\n icon: \"👑\"\r\n },\r\n {\r\n title: \"Innovation Challenges\",\r\n description: \"Solve problems and create breakthrough solutions\",\r\n icon: \"🧠\"\r\n },\r\n {\r\n title: \"Networking Events\",\r\n description: \"Build connections and inspire collaboration\",\r\n icon: \"🤝\"\r\n }\r\n ],\r\n insights: [\r\n \"You're energized by high-energy, dynamic environments\",\r\n \"You prefer roles where you can influence and inspire others\",\r\n \"You work best when you have autonomy and can take initiative\",\r\n \"You're motivated by the opportunity to create positive change\"\r\n ]\r\n },\r\n \"The Connector\": {\r\n name: \"The Connector\",\r\n description: \"You're a natural networker who excels at bringing people together. You see the value in relationships and love creating communities.\",\r\n icon: \"🌐\",\r\n traits: [\r\n \"Excellent at building networks\",\r\n \"Sees connections others miss\",\r\n \"Values relationships and collaboration\",\r\n \"Natural community builder\",\r\n \"Enjoys bringing people together\"\r\n ],\r\n famousExamples: [\"Reid Hoffman\", \"Arianna Huffington\", \"Simon Sinek\"],\r\n idealEvents: [\r\n {\r\n title: \"Professional Networking Events\",\r\n description: \"Build valuable business relationships\",\r\n icon: \"💼\"\r\n },\r\n {\r\n title: \"Community Meetups\",\r\n description: \"Connect people with shared interests\",\r\n icon: \"👥\"\r\n },\r\n {\r\n title: \"Conference Mixers\",\r\n description: \"Facilitate connections between attendees\",\r\n icon: \"🎪\"\r\n }\r\n ],\r\n insights: [\r\n \"You're energized by meeting new people and making connections\",\r\n \"You prefer collaborative environments over competitive ones\",\r\n \"You work best when you can leverage your network\",\r\n \"You're motivated by helping others succeed through connections\"\r\n ]\r\n }\r\n}; ",[],[271,278],{"_104":286,"_95":287,"_153":288,"_155":272,"_156":138,"_157":289,"_159":22,"_106":290,"_100":32,"_162":198,"_164":291,"_165":22,"_166":-5,"_167":292,"_98":293},"f473088a-4d48-11f0-b4b9-76b3cceeab13","types.ts","f4730952-4d48-11f0-b4b9-76b3cceeab13",24,["D",1750363618247],"export interface QuizQuestion {\r\n text: string;\r\n options: string[];\r\n mapping: string[];\r\n}\r\n\r\nexport interface QuizResults {\r\n primaryArchetype: string;\r\n breakdown: Record;\r\n description?: string;\r\n}\r\n\r\nexport interface QuizSubmission {\r\n email: string;\r\n results: QuizResults;\r\n answers: number[];\r\n completionTime?: number;\r\n insights?: Record;\r\n}\r\n\r\nexport interface ArchetypeInfo {\r\n name: string;\r\n description: string;\r\n icon: string;\r\n traits: string[];\r\n famousExamples: string[];\r\n idealEvents: EventInfo[];\r\n insights: string[];\r\n}\r\n\r\nexport interface EventInfo {\r\n title: string;\r\n description: string;\r\n icon: string;\r\n link?: string;\r\n}\r\n\r\nexport type QuizPhase = \"email\" | \"intro\" | \"countdown\" | \"quiz\" | \"results\";\r\n\r\nexport interface QuizState {\r\n phase: QuizPhase;\r\n email: string;\r\n currentQuestion: number;\r\n answers: number[];\r\n startTime: number;\r\n results?: QuizResults;\r\n} ",[],[271,287],{"_104":295,"_95":296,"_153":297,"_155":272,"_156":138,"_157":298,"_159":22,"_106":299,"_100":32,"_162":198,"_164":300,"_165":22,"_166":-5,"_167":301,"_98":302},"f4846670-4d48-11f0-beec-76b3cceeab13","utils.ts","f484671a-4d48-11f0-beec-76b3cceeab13",26,["D",1750363618332],"import { QuizQuestion, QuizResults } from \"./types.ts\";\r\nimport { quizQuestions, archetypeInfo } from \"./quizData.ts\";\r\n\r\nexport function calculateResults(answers: number[]): QuizResults {\r\n const archetypeCounts: Record = {};\r\n \r\n // Count votes for each archetype\r\n answers.forEach((answerIndex, questionIndex) => {\r\n const question = quizQuestions[questionIndex];\r\n if (question && question.mapping[answerIndex]) {\r\n const archetype = question.mapping[answerIndex];\r\n archetypeCounts[archetype] = (archetypeCounts[archetype] || 0) + 1;\r\n }\r\n });\r\n\r\n // Calculate percentages\r\n const totalAnswers = answers.length;\r\n const breakdown: Record = {};\r\n \r\n Object.entries(archetypeCounts).forEach(([archetype, count]) => {\r\n breakdown[archetype] = Math.round((count / totalAnswers) * 100);\r\n });\r\n\r\n // Find primary archetype (highest percentage)\r\n const primaryArchetype = Object.entries(breakdown).reduce((a, b) => \r\n breakdown[a[0]] > breakdown[b[0]] ? a : b\r\n )[0];\r\n\r\n return {\r\n primaryArchetype,\r\n breakdown,\r\n description: archetypeInfo[primaryArchetype]?.description\r\n };\r\n}\r\n\r\nexport function generateInsights(results: QuizResults, completionTime?: number): Record {\r\n const insights: Record = {};\r\n \r\n // Completion time analysis\r\n if (completionTime) {\r\n const avgTimePerQuestion = completionTime / quizQuestions.length;\r\n insights.completionAnalysis = {\r\n totalTime: completionTime,\r\n avgTimePerQuestion,\r\n pace: avgTimePerQuestion > 15000 ? \"thoughtful\" : avgTimePerQuestion > 8000 ? \"moderate\" : \"quick\"\r\n };\r\n }\r\n\r\n // Archetype distribution analysis\r\n const sortedArchetypes = Object.entries(results.breakdown)\r\n .sort(([,a], [,b]) => b - a);\r\n \r\n insights.archetypeStrength = {\r\n dominance: sortedArchetypes[0][1] - (sortedArchetypes[1]?.[1] || 0),\r\n isBalanced: sortedArchetypes[0][1] < 40,\r\n secondaryArchetype: sortedArchetypes[1]?.[0]\r\n };\r\n\r\n // Personality complexity\r\n const nonZeroArchetypes = sortedArchetypes.filter(([,percentage]) => percentage > 0);\r\n insights.personalityComplexity = {\r\n numberOfArchetypes: nonZeroArchetypes.length,\r\n complexity: nonZeroArchetypes.length > 4 ? \"complex\" : nonZeroArchetypes.length > 2 ? \"balanced\" : \"focused\"\r\n };\r\n\r\n return insights;\r\n}\r\n\r\nexport function validateEmail(email: string): boolean {\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n return emailRegex.test(email);\r\n}\r\n\r\nexport function shuffleArray(array: T[]): T[] {\r\n const shuffled = [...array];\r\n for (let i = shuffled.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\r\n }\r\n return shuffled;\r\n}\r\n\r\nexport function getRandomQuestions(count: number = quizQuestions.length): QuizQuestion[] {\r\n return shuffleArray(quizQuestions).slice(0, count);\r\n}\r\n\r\nexport function formatTime(milliseconds: number): string {\r\n const seconds = Math.floor(milliseconds / 1000);\r\n const minutes = Math.floor(seconds / 60);\r\n const remainingSeconds = seconds % 60;\r\n \r\n if (minutes > 0) {\r\n return `${minutes}m ${remainingSeconds}s`;\r\n }\r\n return `${remainingSeconds}s`;\r\n} ",[],[271,296],[271],{"_104":305,"_95":306,"_153":307,"_155":-5,"_156":138,"_157":308,"_159":160,"_106":309,"_100":32,"_162":246,"_164":310,"_165":22,"_166":-5,"_167":311,"_98":312},"779b264e-4d48-11f0-b4b7-76b3cceeab13",".vtignore","779b26f8-4d48-11f0-b4b7-76b3cceeab13",8,["D",1750363408806],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[306],{"_104":314,"_95":315,"_153":316,"_155":-5,"_156":138,"_157":317,"_159":22,"_106":318,"_100":319,"_162":246,"_164":320,"_165":22,"_166":-5,"_167":321,"_98":322},"ba966fc8-4d4b-11f0-bf5c-76b3cceeab13","README.md","59043340-4d45-11f0-866c-76b3cceeab13",36,["D",1750364809554],3,"# Social Archetype Quiz - Refactored\r\n\r\nA comprehensive personality quiz application built with Val Town that helps users discover their social archetype through interactive questions. The application has been fully refactored following Val Town best practices with a modern, scalable architecture.\r\n\r\n## 🚀 Features\r\n\r\n### Core Functionality\r\n- **Email Collection**: Users must provide email to begin quiz\r\n- **Interactive Quiz**: 15 carefully crafted questions with smooth animations\r\n- **Personality Analysis**: Advanced algorithm determining primary social archetype\r\n- **Email Delivery**: Automated email with detailed results and insights\r\n- **Data Persistence**: All submissions stored in SQLite database\r\n\r\n### Enhanced Features\r\n- **Real-time Progress Tracking**: Visual progress bar and question counter\r\n- **Completion Time Analysis**: Tracks and analyzes user completion patterns\r\n- **Personality Insights**: Deep analysis of user's social tendencies\r\n- **Ideal Events Matching**: Personalized event and community recommendations\r\n- **Social Sharing**: Built-in sharing capabilities for social media\r\n- **Results Download**: Export results as JSON file\r\n- **Admin Analytics**: Backend analytics for archetype distribution\r\n- **Professional Email System**: HTML/text emails following Val Town standards\r\n- **Custom Email Headers**: Tracking and branding headers for analytics\r\n- **Configurable Email Templates**: Dynamic subject lines and content\r\n- **Reply-To Support**: Users can reply directly to quiz emails\r\n\r\n### User Experience\r\n- **Responsive Design**: Works seamlessly on desktop and mobile\r\n- **Smooth Animations**: Fade-in/out transitions and progress animations\r\n- **Modern UI**: Clean, professional design with CSS variables\r\n- **Accessibility**: WCAG compliant with proper contrast and keyboard navigation\r\n\r\n## 🏗️ Architecture\r\n\r\n### Project Structure\r\n```\r\nssscQuiz/\r\n├── index.http.ts # 🌐 Main HTTP Val - Primary quiz application\r\n├── admin.http.ts # 📊 Admin HTTP Val - Dashboard for data analytics\r\n├── config.ts # ⚙️ Configuration file for email and app settings\r\n├── frontend/\r\n│ ├── components/\r\n│ │ ├── EmailScreen.tsx # Email collection component\r\n│ │ ├── IntroScreen.tsx # Welcome and instructions\r\n│ │ ├── CountdownScreen.tsx # Pre-quiz countdown\r\n│ │ ├── PersonalityQuiz.tsx # Main quiz interface\r\n│ │ └── QuizResultsComponent.tsx # Results display with tabs\r\n│ ├── index.html # Main HTML template\r\n│ ├── index.tsx # React app entry point\r\n│ └── style.css # Comprehensive CSS styles with mobile responsiveness\r\n├── shared/\r\n│ ├── types.ts # TypeScript interfaces and types\r\n│ ├── quizData.ts # Quiz questions and archetype information\r\n│ └── utils.ts # Shared utility functions\r\n├── main.tsx # Legacy entry point (redirects to index.http.ts)\r\n├── deno.json # Deno configuration\r\n└── README.md # This file\r\n```\r\n\r\n### Technology Stack\r\n- **Backend**: Hono web framework on Deno\r\n- **Frontend**: React 18 with TypeScript\r\n- **Database**: Val Town SQLite\r\n- **Email**: Val Town email service\r\n- **Styling**: CSS with custom properties and responsive design\r\n- **Build Tool**: Native Deno/ES modules\r\n\r\n## 🎯 Social Archetypes\r\n\r\nThe quiz identifies six primary social archetypes:\r\n\r\n1. **The Visionary** 🔮 - Forward-thinking innovators\r\n2. **The Nurturer** 🤗 - Community builders and carers\r\n3. **The Sage** 📚 - Knowledge seekers and wisdom sharers\r\n4. **The Artisan** 🎨 - Creative expressers and makers\r\n5. **The Catalyst** ⚡ - Change-makers and motivators \r\n6. **The Connector** 🌐 - Natural networkers and community builders\r\n\r\nEach archetype includes:\r\n- Detailed personality description\r\n- Key traits and characteristics\r\n- Famous examples\r\n- Ideal events and communities\r\n- Personalized insights\r\n\r\n## 🔧 Technical Implementation\r\n\r\n### HTTP Vals Architecture (Following Val Town Best Practices)\r\n\r\n#### Main Application (`index.http.ts`)\r\n- Primary HTTP val that users visit\r\n- Hono web server with comprehensive error handling\r\n- SQLite database with optimized schema and indexing\r\n- Enhanced email system with HTML/text templates\r\n- API endpoints for quiz submission and analytics\r\n- Static file serving for all frontend assets\r\n- Mobile-responsive design\r\n\r\n#### Admin Dashboard (`admin.http.ts`)\r\n- Separate HTTP val for administrative functions\r\n- Real-time analytics and data visualization\r\n- Responsive table displaying all quiz submissions\r\n- Pagination for large datasets\r\n- CSV export functionality for data analysis\r\n- Mobile-optimized admin interface\r\n\r\n### Backend (Hono)\r\n- RESTful API with proper error handling\r\n- SQLite database with structured schema and indexes\r\n- Email automation with professional HTML templates\r\n- Admin analytics with real-time data\r\n- Static file serving for frontend assets\r\n- IP hashing for privacy compliance\r\n\r\n### Frontend (React + TypeScript)\r\n- Component-based architecture\r\n- State management with React hooks\r\n- Type-safe interfaces throughout\r\n- Smooth animations and transitions\r\n- Progressive enhancement\r\n\r\n### Database Schema\r\n```sql\r\nCREATE TABLE sssc_quiz_submissions (\r\n id INTEGER PRIMARY KEY AUTOINCREMENT,\r\n email TEXT NOT NULL,\r\n primary_archetype TEXT NOT NULL,\r\n breakdown TEXT NOT NULL, -- JSON of archetype percentages\r\n answers TEXT NOT NULL, -- JSON of user answers\r\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,\r\n completion_time INTEGER, -- Milliseconds\r\n insights TEXT -- JSON of generated insights\r\n);\r\n```\r\n\r\n## 📊 Analytics & Insights\r\n\r\n### User Analytics\r\n- **Completion Time Analysis**: Fast/moderate/thoughtful pacing\r\n- **Archetype Strength**: Dominance vs balanced personality\r\n- **Personality Complexity**: Focused/balanced/complex profiles\r\n\r\n### Admin Analytics\r\n- Archetype distribution across all users\r\n- Average completion times by archetype\r\n- Total submission tracking\r\n- Performance metrics\r\n\r\n## 🚦 User Flow\r\n\r\n1. **Email Collection**: User enters email address with validation\r\n2. **Introduction**: Welcome screen with instructions and tips\r\n3. **Countdown**: 3-second countdown to build anticipation\r\n4. **Quiz Questions**: 15 questions with progress tracking\r\n5. **Results Processing**: Calculation of archetype and insights\r\n6. **Results Display**: Comprehensive results with multiple tabs\r\n7. **Email Delivery**: Automated email with detailed results\r\n\r\n## 🎨 Design System\r\n\r\n### Color Palette\r\n- Primary: #4361ee (Vibrant Blue)\r\n- Secondary: #3a86ff (Sky Blue) \r\n- Tertiary: #4cc9f0 (Cyan)\r\n- Accent: #f72585 (Pink)\r\n- Success: #4bc06c (Green)\r\n- Warning: #ff9f1c (Orange)\r\n\r\n### Typography\r\n- Headers: Playfair Display (Serif)\r\n- Body: Poppins (Sans-serif)\r\n- Consistent spacing and hierarchy\r\n\r\n### Responsive Breakpoints\r\n- Desktop: 768px+\r\n- Tablet: 481px - 767px\r\n- Mobile: 480px and below\r\n\r\n## 🔐 Security & Privacy\r\n\r\n- **Email Validation**: Client and server-side validation\r\n- **Data Sanitization**: All inputs sanitized before database storage\r\n- **Privacy Focused**: No tracking beyond essential quiz functionality\r\n- **Secure Storage**: Encrypted database storage through Val Town\r\n\r\n## 🚀 Deployment\r\n\r\nThe application follows Val Town best practices with HTTP val naming:\r\n\r\n1. **Main Application**: `index.http.ts` - Primary entry point users visit\r\n2. **Admin Dashboard**: `admin.http.ts` - Analytics and data management\r\n3. **Database**: Automatic SQLite initialization with proper indexing\r\n4. **Email**: Enhanced email service with HTML templates following Val Town standards\r\n5. **Frontend**: Served as static files with mobile-responsive design\r\n\r\n### Configuration\r\nUpdate `config.ts` with your settings:\r\n- `adminEmail`: Your email for admin notifications\r\n- `siteUrl`: Your Val Town URL \r\n- `hashSalt`: Unique salt for privacy protection\r\n- `emailConfig.from.email`: Must be in format `username.valname@valtown.email`\r\n- `emailConfig.from.name`: Display name for outgoing emails\r\n- `emailConfig.replyTo`: Where users can reply to emails\r\n- `emailConfig.headers`: Custom email headers for tracking and branding\r\n\r\n### Email Configuration (Following Val Town Standards)\r\nBased on [Val Town's email documentation](https://docs.val.town/std/email/), the email system supports:\r\n\r\n#### From Field Configuration\r\n```typescript\r\nfrom: {\r\n email: \"username.valname@valtown.email\", // Must follow Val Town format\r\n name: \"Display Name\"\r\n}\r\n```\r\n\r\n**Important**: According to [Val Town's email documentation](https://docs.val.town/std/email/), the `from` field must be either:\r\n- `{ email: \"your_username.valname@valtown.email\" }` or \r\n- `{ email: \"your_username.valname@valtown.email\", name: \"Sender Name\" }`\r\n\r\n#### Reply-To Configuration \r\n```typescript\r\nreplyTo: {\r\n email: \"your-email@example.com\",\r\n name: \"Your Name\"\r\n}\r\n```\r\n\r\n#### Custom Headers\r\n```typescript\r\nheaders: {\r\n \"X-Quiz-Type\": \"Social Archetype Assessment\",\r\n \"X-App-Name\": \"ssscQuiz\", \r\n \"X-App-Version\": \"2.0\",\r\n \"X-Priority\": \"3\" // 1=High, 3=Normal, 5=Low\r\n}\r\n```\r\n\r\n### Environment Variables\r\n- `VAL_TOWN_API_KEY`: Automatically provided by Val Town\r\n- Optional overrides:\r\n - `ADMIN_EMAIL`: Admin notification email\r\n - `SITE_URL`: Your Val Town site URL\r\n - `HASH_SALT`: Unique salt for privacy protection\r\n - `EMAIL_FROM`: Override from email address\r\n - `EMAIL_FROM_NAME`: Override from display name\r\n - `EMAIL_REPLY_TO`: Override reply-to email\r\n - `EMAIL_REPLY_TO_NAME`: Override reply-to name\r\n\r\n## 📈 Performance\r\n\r\n### Optimizations\r\n- **Lazy Loading**: Components loaded as needed\r\n- **Efficient Rendering**: Optimized React components\r\n- **CSS Optimization**: Custom properties and efficient selectors\r\n- **Database Queries**: Indexed and optimized queries\r\n\r\n\r\n### Testing\r\n- Manual testing across all user flows\r\n- Cross-browser compatibility testing\r\n- Mobile responsiveness testing\r\n- Email delivery testing\r\n\r\n## 🔄 Future Enhancements\r\n\r\n### Planned Features\r\n- **A/B Testing**: Different quiz variations\r\n- **Advanced Analytics**: User behavior tracking\r\n- **Social Features**: Community building around archetypes\r\n- **API Integration**: Connect with event platforms\r\n\r\n### Technical Improvements\r\n- **Caching**: Redis integration for performance\r\n- **CDN**: Static asset optimization\r\n- **Advanced Security**: Rate limiting and CSRF protection\r\n- **Monitoring**: Performance and error tracking\r\n\r\n\r\n\r\n---\r\n\r\n",[],[315],{"_104":324,"_95":325,"_153":326,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":327,"_100":328,"_162":329,"_164":330,"_165":22,"_166":-5,"_167":331,"_98":332},"4f903226-4d4c-11f0-9434-76b3cceeab13","admin.http.ts","779df040-4d48-11f0-8fde-76b3cceeab13",["D",1750365059606],2,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\r\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\r\nimport { config } from \"./config.ts\";\r\n\r\nconst app = new Hono();\r\n\r\n// Unwrap Hono errors to see original error details\r\napp.onError((err, c) => {\r\n throw err;\r\n});\r\n\r\nconst TABLE_NAME = 'sssc_quiz_submissions_v1'; // Must match the table name in index.http.ts\r\n\r\n// Database initialization - ensure table exists\r\nasync function initDatabase() {\r\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\r\n id INTEGER PRIMARY KEY AUTOINCREMENT,\r\n email TEXT NOT NULL,\r\n primary_archetype TEXT NOT NULL,\r\n breakdown TEXT NOT NULL,\r\n answers TEXT NOT NULL,\r\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,\r\n completion_time INTEGER,\r\n insights TEXT,\r\n user_agent TEXT,\r\n ip_hash TEXT\r\n )`);\r\n \r\n // Create indexes for better performance\r\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_email ON ${TABLE_NAME}(email)`);\r\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_archetype ON ${TABLE_NAME}(primary_archetype)`);\r\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_timestamp ON ${TABLE_NAME}(timestamp)`);\r\n}\r\n\r\n// Initialize database on startup\r\nawait initDatabase();\r\n\r\n// Main admin dashboard route\r\napp.get(\"/\", async c => {\r\n try {\r\n // Get analytics data\r\n const statsResult = await sqlite.execute(`\r\n SELECT \r\n primary_archetype,\r\n COUNT(*) as count,\r\n ROUND(AVG(completion_time), 2) as avg_completion_time,\r\n MIN(timestamp) as first_submission,\r\n MAX(timestamp) as latest_submission\r\n FROM ${TABLE_NAME} \r\n GROUP BY primary_archetype\r\n ORDER BY count DESC\r\n `);\r\n const stats = Array.isArray(statsResult) ? statsResult : [];\r\n\r\n const totalSubmissionsResult = await sqlite.execute(\r\n `SELECT COUNT(*) as total FROM ${TABLE_NAME}`\r\n );\r\n const totalSubmissions = Array.isArray(totalSubmissionsResult) ? totalSubmissionsResult : [];\r\n\r\n // Get recent submissions with pagination\r\n const page = parseInt(c.req.query('page') || '1');\r\n const limit = 20;\r\n const offset = (page - 1) * limit;\r\n\r\n const submissionsResult = await sqlite.execute(`\r\n SELECT \r\n id,\r\n email,\r\n primary_archetype,\r\n completion_time,\r\n timestamp,\r\n user_agent,\r\n breakdown\r\n FROM ${TABLE_NAME}\r\n ORDER BY timestamp DESC\r\n LIMIT ? OFFSET ?\r\n `, [limit, offset]);\r\n const submissions = Array.isArray(submissionsResult) ? submissionsResult : [];\r\n\r\n const totalPages = Math.ceil((totalSubmissions[0]?.total || 0) / limit);\r\n\r\n // Generate responsive HTML dashboard\r\n const html = generateDashboardHTML(stats, submissions, totalSubmissions[0]?.total || 0, page, totalPages);\r\n \r\n return c.html(html);\r\n } catch (error) {\r\n console.error(\"Error loading admin dashboard:\", error);\r\n return c.html(`\r\n \r\n \r\n Admin Dashboard - Error\r\n \r\n \r\n \r\n
\r\n
⚠️ Database Error
\r\n
Unable to load dashboard data. Please check if the database is initialized.
\r\n ← Back to Quiz\r\n
\r\n \r\n \r\n `, 500);\r\n }\r\n});\r\n\r\n// API endpoint for JSON data\r\napp.get(\"/api/data\", async c => {\r\n try {\r\n const submissionsResult = await sqlite.execute(`\r\n SELECT \r\n id,\r\n email,\r\n primary_archetype,\r\n breakdown,\r\n completion_time,\r\n timestamp,\r\n user_agent\r\n FROM ${TABLE_NAME}\r\n ORDER BY timestamp DESC\r\n LIMIT 100\r\n `);\r\n const submissions = Array.isArray(submissionsResult) ? submissionsResult : [];\r\n\r\n return c.json({\r\n submissions,\r\n total: submissions.length,\r\n generatedAt: new Date().toISOString()\r\n });\r\n } catch (error) {\r\n return c.json({ error: \"Failed to fetch data\" }, 500);\r\n }\r\n});\r\n\r\n// Export individual submission data\r\napp.get(\"/api/export\", async c => {\r\n try {\r\n const submissionsResult = await sqlite.execute(`\r\n SELECT \r\n email,\r\n primary_archetype,\r\n breakdown,\r\n completion_time,\r\n timestamp\r\n FROM ${TABLE_NAME}\r\n ORDER BY timestamp DESC\r\n `);\r\n const submissions = Array.isArray(submissionsResult) ? submissionsResult : [];\r\n\r\n const csv = generateCSV(submissions);\r\n \r\n return c.text(csv, 200, {\r\n 'Content-Type': 'text/csv',\r\n 'Content-Disposition': 'attachment; filename=\"quiz-submissions.csv\"'\r\n });\r\n } catch (error) {\r\n return c.json({ error: \"Failed to export data\" }, 500);\r\n }\r\n});\r\n\r\n// Delete individual submission\r\napp.delete(\"/api/submissions/:id\", async c => {\r\n try {\r\n const id = c.req.param('id');\r\n \r\n if (!id || isNaN(parseInt(id))) {\r\n return c.json({ error: \"Invalid submission ID\" }, 400);\r\n }\r\n\r\n // Check if submission exists\r\n const existingResult = await sqlite.execute(\r\n `SELECT id FROM ${TABLE_NAME} WHERE id = ?`, \r\n [parseInt(id)]\r\n );\r\n const existing = Array.isArray(existingResult) ? existingResult : [];\r\n \r\n if (existing.length === 0) {\r\n return c.json({ error: \"Submission not found\" }, 404);\r\n }\r\n\r\n // Delete the submission\r\n await sqlite.execute(\r\n `DELETE FROM ${TABLE_NAME} WHERE id = ?`, \r\n [parseInt(id)]\r\n );\r\n\r\n return c.json({ \r\n success: true, \r\n message: `Submission ${id} deleted successfully` \r\n });\r\n } catch (error) {\r\n console.error(\"Error deleting submission:\", error);\r\n return c.json({ error: \"Failed to delete submission\" }, 500);\r\n }\r\n});\r\n\r\n// Refresh data endpoint (for real-time updates)\r\napp.get(\"/api/refresh\", async c => {\r\n try {\r\n // Force refresh by redirecting back to main page\r\n return c.redirect(\"/\");\r\n } catch (error) {\r\n return c.json({ error: \"Failed to refresh data\" }, 500);\r\n }\r\n});\r\n\r\n// Debug endpoint to check database contents\r\napp.get(\"/api/debug\", async c => {\r\n try {\r\n // Get all tables\r\n const tablesResult = await sqlite.execute(`\r\n SELECT name FROM sqlite_master WHERE type='table'\r\n `);\r\n const tables = Array.isArray(tablesResult) ? tablesResult : [];\r\n \r\n // Get count from our table\r\n const countResult = await sqlite.execute(`\r\n SELECT COUNT(*) as count FROM ${TABLE_NAME}\r\n `);\r\n const count = Array.isArray(countResult) ? countResult : [];\r\n \r\n // Get recent entries\r\n const recentResult = await sqlite.execute(`\r\n SELECT id, email, primary_archetype, timestamp \r\n FROM ${TABLE_NAME} \r\n ORDER BY timestamp DESC \r\n LIMIT 5\r\n `);\r\n const recent = Array.isArray(recentResult) ? recentResult : [];\r\n \r\n return c.json({\r\n tableName: TABLE_NAME,\r\n allTables: tables,\r\n recordCount: count[0]?.count || 0,\r\n recentEntries: recent,\r\n timestamp: new Date().toISOString()\r\n });\r\n } catch (error) {\r\n return c.json({ \r\n error: error.message,\r\n tableName: TABLE_NAME,\r\n timestamp: new Date().toISOString()\r\n }, 500);\r\n }\r\n});\r\n\r\nfunction generateDashboardHTML(stats: any[], submissions: any[], total: number, currentPage: number, totalPages: number): string {\r\n return `\r\n \r\n \r\n \r\n \r\n \r\n Admin Dashboard - Social Archetype Quiz\r\n \r\n \r\n \r\n
\r\n
\r\n
📊 Admin Dashboard
\r\n
Social Archetype Quiz Analytics
\r\n
Total Submissions: ${total}
\r\n
\r\n 🔍 Debug Database\r\n
\r\n
\r\n \r\n
\r\n ${stats.map(stat => `\r\n
\r\n
${stat.primary_archetype}
\r\n
${stat.count}
\r\n
Avg: ${stat.avg_completion_time ? Math.round(stat.avg_completion_time / 1000) + 's' : 'N/A'}
\r\n
\r\n `).join('')}\r\n
\r\n \r\n
\r\n
\r\n
Recent Submissions
\r\n
\r\n \r\n 📥 Export CSV\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ${submissions.map(sub => {\r\n const breakdown = JSON.parse(sub.breakdown || '{}');\r\n const topArchetypes = Object.entries(breakdown)\r\n .sort(([,a], [,b]) => (b as number) - (a as number))\r\n .slice(0, 2)\r\n .map(([arch, pct]) => `${arch.split(' ')[1] || arch}: ${pct}%`)\r\n .join(', ');\r\n \r\n return `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n `;\r\n }).join('')}\r\n \r\n
ID Email Archetype Completion Timestamp Breakdown Actions
${sub.id} ${sub.email} ${sub.primary_archetype} ${sub.completion_time ? Math.round(sub.completion_time / 1000) + 's' : 'N/A'} ${new Date(sub.timestamp).toLocaleDateString()} ${new Date(sub.timestamp).toLocaleTimeString()} ${topArchetypes} \r\n \r\n
\r\n
\r\n
\r\n \r\n ${totalPages > 1 ? `\r\n
\r\n ${currentPage > 1 ? `← Previous` : ''}\r\n ${Array.from({length: Math.min(5, totalPages)}, (_, i) => {\r\n const page = i + 1;\r\n return page === currentPage \r\n ? `${page}`\r\n : `${page}`;\r\n }).join('')}\r\n ${currentPage < totalPages ? `Next →` : ''}\r\n
\r\n ` : ''}\r\n \r\n
\r\n ← Back to Quiz\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n `;\r\n}\r\n\r\nfunction generateCSV(submissions: any[]): string {\r\n const headers = ['Email', 'Primary Archetype', 'Completion Time (ms)', 'Timestamp', 'Breakdown'];\r\n const rows = submissions.map(sub => [\r\n sub.email,\r\n sub.primary_archetype,\r\n sub.completion_time || '',\r\n sub.timestamp,\r\n sub.breakdown\r\n ]);\r\n \r\n return [headers, ...rows]\r\n .map(row => row.map(field => `\"${String(field).replace(/\"/g, '\"\"')}\"`).join(','))\r\n .join('\\n');\r\n}\r\n\r\nexport default app.fetch; ",[],[325],{"_104":334,"_95":335,"_153":336,"_155":-5,"_156":138,"_157":337,"_159":22,"_106":338,"_100":319,"_162":198,"_164":339,"_165":22,"_166":-5,"_167":340,"_98":341},"ba7a40e6-4d4b-11f0-a5b6-76b3cceeab13","config.ts","77a6164e-4d48-11f0-9294-76b3cceeab13",34,["D",1750364809484],"// Configuration file for the Social Archetype Quiz\r\n// Following Val Town best practices for environment configuration\r\n\r\nexport const config = {\r\n // Admin email for notifications (set to null to disable admin notifications)\r\n adminEmail: \"tom@cal.town\", // Change this to your admin email\r\n \r\n // Site configuration\r\n siteUrl: \"https://ssscQuiz.web.val.run\", // Update with your actual Val Town URL\r\n siteName: \"Social Archetype Quiz\",\r\n \r\n // Email configuration following Val Town standards\r\n emailConfig: {\r\n // From field - following Val Town documentation format\r\n from: { \r\n email: \"all.ssscQuiz@valtown.email\", \r\n name: \"SSSC\" \r\n },\r\n \r\n // Reply-to configuration\r\n replyTo: \"tom@cal.town\",\r\n \r\n // Custom headers for email tracking and branding\r\n headers: {\r\n \"X-Quiz-Type\": \"Social Archetype Assessment\",\r\n \"X-App-Name\": \"ssscQuiz\",\r\n \"X-App-Version\": \"2.0\",\r\n \"X-Priority\": \"3\" // 1=High, 3=Normal, 5=Low\r\n },\r\n \r\n // Email templates configuration\r\n templates: {\r\n userResultsSubject: \"🎯 Your Social Archetype: {archetype}\",\r\n adminNotificationSubject: \"📊 New Quiz Submission: {archetype}\",\r\n defaultSubject: \"Social Archetype Quiz Results\"\r\n }\r\n },\r\n \r\n // Database configuration\r\n database: {\r\n tableName: \"sssc_quiz_submissions_v1\",\r\n enableIndexes: true\r\n },\r\n \r\n // Security configuration\r\n hashSalt: \"ssscQuiz2025\", // Change this to a unique salt\r\n \r\n // Analytics configuration\r\n analytics: {\r\n enableUserTracking: true,\r\n maxRecentSubmissions: 10\r\n },\r\n \r\n // Feature flags\r\n features: {\r\n enableAdminNotifications: true,\r\n enableCompletionTimeTracking: true,\r\n enableIPHashing: true,\r\n enableUserAgentTracking: true\r\n },\r\n \r\n // Quiz configuration\r\n quiz: {\r\n maxQuestions: 15,\r\n enableRandomization: false,\r\n completionTimeoutMinutes: 30\r\n }\r\n};\r\n\r\n// Environment-specific overrides\r\n// In production, you might want to use environment variables\r\nif (typeof Deno !== \"undefined\" && Deno.env) {\r\n // Override with environment variables if available\r\n if (Deno.env.get(\"ADMIN_EMAIL\")) {\r\n config.adminEmail = Deno.env.get(\"ADMIN_EMAIL\");\r\n }\r\n \r\n if (Deno.env.get(\"SITE_URL\")) {\r\n config.siteUrl = Deno.env.get(\"SITE_URL\");\r\n }\r\n \r\n if (Deno.env.get(\"HASH_SALT\")) {\r\n config.hashSalt = Deno.env.get(\"HASH_SALT\");\r\n }\r\n \r\n // Email configuration overrides\r\n if (Deno.env.get(\"EMAIL_FROM\")) {\r\n config.emailConfig.from.email = Deno.env.get(\"EMAIL_FROM\");\r\n }\r\n \r\n if (Deno.env.get(\"EMAIL_FROM_NAME\")) {\r\n config.emailConfig.from.name = Deno.env.get(\"EMAIL_FROM_NAME\");\r\n }\r\n \r\n if (Deno.env.get(\"EMAIL_REPLY_TO\")) {\r\n config.emailConfig.replyTo = Deno.env.get(\"EMAIL_REPLY_TO\");\r\n }\r\n} ",[],[335],{"_104":343,"_95":344,"_153":345,"_155":-5,"_156":138,"_157":346,"_159":160,"_106":347,"_100":32,"_162":246,"_164":348,"_165":22,"_166":-5,"_167":349,"_98":350},"77aa2fd6-4d48-11f0-970a-76b3cceeab13","deno.json","77aa3094-4d48-11f0-970a-76b3cceeab13",11,["D",1750363408892],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[344],{"_104":352,"_95":353,"_153":354,"_155":-5,"_156":138,"_157":355,"_159":22,"_106":356,"_100":319,"_162":329,"_164":357,"_165":22,"_166":358,"_167":359,"_98":360},"ba8498a2-4d4b-11f0-969e-76b3cceeab13","index.http.ts","77c7f700-4d48-11f0-9bc0-76b3cceeab13",35,["D",1750364809552],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\r\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\r\nimport { email } from \"https://esm.town/v/std/email\";\r\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\r\nimport type { QuizResults, QuizSubmission } from \"./shared/types.ts\";\r\nimport { config } from \"./config.ts\";\r\n\r\nconst app = new Hono();\r\n\r\n// Unwrap Hono errors to see original error details\r\napp.onError((err, c) => {\r\n throw err;\r\n});\r\n\r\n// Database setup following Val Town standards \r\nconst TABLE_NAME = 'sssc_quiz_submissions_v1'; // Must match admin.http.ts table name\r\n\r\n// Initialize database with Val Town best practices\r\nasync function initDatabase() {\r\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\r\n id INTEGER PRIMARY KEY AUTOINCREMENT,\r\n email TEXT NOT NULL,\r\n primary_archetype TEXT NOT NULL,\r\n breakdown TEXT NOT NULL,\r\n answers TEXT NOT NULL,\r\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,\r\n completion_time INTEGER,\r\n insights TEXT,\r\n user_agent TEXT,\r\n ip_hash TEXT\r\n )`);\r\n \r\n // Create indexes for better performance\r\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_email ON ${TABLE_NAME}(email)`);\r\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_archetype ON ${TABLE_NAME}(primary_archetype)`);\r\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_timestamp ON ${TABLE_NAME}(timestamp)`);\r\n}\r\n\r\n// Initialize database on startup\r\nawait initDatabase();\r\n\r\n// Serve static files\r\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\r\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\r\n\r\n// Main route - serve the quiz with initial data\r\napp.get(\"/\", async c => {\r\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\r\n \r\n // Inject any initial data if needed\r\n const dataScript = ``;\r\n\r\n html = html.replace(\"\", `${dataScript}`);\r\n return c.html(html);\r\n});\r\n\r\n// API Routes\r\napp.post(\"/api/submit-quiz\", async c => {\r\n try {\r\n const body = await c.req.json() as QuizSubmission;\r\n const { email, results, answers, completionTime, insights } = body;\r\n\r\n console.log(\"Received quiz submission for:\", email);\r\n\r\n // Validate required fields\r\n if (!email || !results || !answers) {\r\n console.error(\"Missing required fields:\", { email: !!email, results: !!results, answers: !!answers });\r\n return c.json({ error: \"Missing required fields\" }, 400);\r\n }\r\n\r\n // Email validation following Val Town standards\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n if (!emailRegex.test(email)) {\r\n console.error(\"Invalid email format:\", email);\r\n return c.json({ error: \"Invalid email address\" }, 400);\r\n }\r\n\r\n // Get user metadata for analytics\r\n const userAgent = c.req.header('user-agent') || '';\r\n const forwarded = c.req.header('x-forwarded-for') || '';\r\n const ipHash = forwarded ? await hashIP(forwarded.split(',')[0].trim()) : '';\r\n\r\n console.log(\"Storing in database...\");\r\n console.log(\"Table name:\", TABLE_NAME);\r\n console.log(\"Data to insert:\", {\r\n email: email.toLowerCase().trim(),\r\n primaryArchetype: results.primaryArchetype,\r\n completionTime,\r\n userAgent: userAgent?.substring(0, 50) + \"...\",\r\n ipHash: ipHash?.substring(0, 10) + \"...\"\r\n });\r\n \r\n // Store in database following Val Town patterns\r\n const insertResult = await sqlite.execute(\r\n `INSERT INTO ${TABLE_NAME} (\r\n email, primary_archetype, breakdown, answers, \r\n completion_time, insights, user_agent, ip_hash\r\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\r\n [\r\n email.toLowerCase().trim(),\r\n results.primaryArchetype,\r\n JSON.stringify(results.breakdown),\r\n JSON.stringify(answers),\r\n completionTime || null,\r\n JSON.stringify(insights || {}),\r\n userAgent,\r\n ipHash\r\n ]\r\n );\r\n console.log(\"Database insert successful, result:\", insertResult);\r\n \r\n // Verify the insert worked\r\n const verifyResult = await sqlite.execute(\r\n `SELECT COUNT(*) as count FROM ${TABLE_NAME} WHERE email = ?`,\r\n [email.toLowerCase().trim()]\r\n );\r\n console.log(\"Verification count for this email:\", verifyResult);\r\n\r\n // Send email to user with results\r\n console.log(\"Sending email to user...\");\r\n try {\r\n await sendResultsEmail(email, results, completionTime);\r\n console.log(\"User email sent successfully\");\r\n } catch (emailError) {\r\n console.error(\"Failed to send user email:\", emailError);\r\n // Don't fail the whole request if email fails\r\n }\r\n\r\n // Send notification email to admin (if configured)\r\n if (config.adminEmail) {\r\n console.log(\"Sending admin notification...\");\r\n try {\r\n await sendAdminNotification(email, results, completionTime);\r\n console.log(\"Admin notification sent successfully\");\r\n } catch (adminEmailError) {\r\n console.error(\"Failed to send admin notification:\", adminEmailError);\r\n // Don't fail the whole request if admin email fails\r\n }\r\n }\r\n\r\n return c.json({ \r\n success: true, \r\n message: \"Quiz results submitted successfully and emailed!\" \r\n });\r\n\r\n } catch (error) {\r\n console.error(\"Error submitting quiz:\", error);\r\n return c.json({ \r\n error: \"Failed to submit quiz results\", \r\n details: error.message \r\n }, 500);\r\n }\r\n});\r\n\r\n// Test email endpoint for debugging\r\napp.get(\"/api/test-email\", async c => {\r\n try {\r\n console.log(\"Testing email functionality...\");\r\n await email({\r\n from: config.emailConfig.from,\r\n replyTo: config.emailConfig.replyTo,\r\n subject: \"Test Email from Social Archetype Quiz\",\r\n text: \"This is a test email to verify email functionality is working.\",\r\n html: \"
Test Email
This is a test email to verify email functionality is working.
\",\r\n headers: {\r\n ...config.emailConfig.headers,\r\n \"X-Email-Type\": \"test\"\r\n }\r\n });\r\n console.log(\"Test email sent successfully\");\r\n return c.json({ success: true, message: \"Test email sent successfully\" });\r\n } catch (error) {\r\n console.error(\"Test email failed:\", error);\r\n return c.json({ error: \"Test email failed\", details: error.message }, 500);\r\n }\r\n});\r\n\r\n// Debug endpoint for troubleshooting\r\napp.get(\"/api/debug-config\", async c => {\r\n try {\r\n return c.json({\r\n tableName: TABLE_NAME,\r\n adminEmail: config.adminEmail,\r\n siteUrl: config.siteUrl,\r\n emailConfigFrom: config.emailConfig.from,\r\n emailConfigReplyTo: config.emailConfig.replyTo,\r\n timestamp: new Date().toISOString()\r\n });\r\n } catch (error) {\r\n return c.json({ error: error.message }, 500);\r\n }\r\n});\r\n\r\n// Test insert endpoint for debugging\r\napp.get(\"/api/test-insert\", async c => {\r\n try {\r\n console.log(\"Testing database insert...\");\r\n \r\n const testEmail = `test${Date.now()}@example.com`;\r\n const testResult = await sqlite.execute(\r\n `INSERT INTO ${TABLE_NAME} (\r\n email, primary_archetype, breakdown, answers, \r\n completion_time, insights, user_agent, ip_hash\r\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\r\n [\r\n testEmail,\r\n \"The Visionary\",\r\n JSON.stringify({\"The Visionary\": 100}),\r\n JSON.stringify([1,2,3,4,5]),\r\n 30000,\r\n JSON.stringify({}),\r\n \"test-agent\",\r\n \"test-hash\"\r\n ]\r\n );\r\n \r\n console.log(\"Test insert result:\", testResult);\r\n \r\n // Verify it was inserted\r\n const verifyResult = await sqlite.execute(\r\n `SELECT * FROM ${TABLE_NAME} WHERE email = ?`,\r\n [testEmail]\r\n );\r\n \r\n return c.json({\r\n success: true,\r\n insertResult: testResult,\r\n verifyResult: verifyResult,\r\n testEmail: testEmail,\r\n tableName: TABLE_NAME\r\n });\r\n } catch (error) {\r\n console.error(\"Test insert failed:\", error);\r\n return c.json({ error: error.message }, 500);\r\n }\r\n});\r\n\r\n// Enhanced debug endpoint to check table structure and data\r\napp.get(\"/api/debug-table\", async c => {\r\n try {\r\n // Get table schema\r\n const schemaResult = await sqlite.execute(`\r\n PRAGMA table_info(${TABLE_NAME})\r\n `);\r\n const schema = Array.isArray(schemaResult) ? schemaResult : [];\r\n \r\n // Get count\r\n const countResult = await sqlite.execute(`\r\n SELECT COUNT(*) as count FROM ${TABLE_NAME}\r\n `);\r\n const count = Array.isArray(countResult) ? countResult : [];\r\n \r\n // Get all entries (limit 10)\r\n const entriesResult = await sqlite.execute(`\r\n SELECT * FROM ${TABLE_NAME} ORDER BY timestamp DESC LIMIT 10\r\n `);\r\n const entries = Array.isArray(entriesResult) ? entriesResult : [];\r\n \r\n // Get all tables\r\n const tablesResult = await sqlite.execute(`\r\n SELECT name FROM sqlite_master WHERE type='table'\r\n `);\r\n const tables = Array.isArray(tablesResult) ? tablesResult : [];\r\n \r\n return c.json({\r\n tableName: TABLE_NAME,\r\n tableSchema: schema,\r\n recordCount: count[0]?.count || 0,\r\n recentEntries: entries,\r\n allTables: tables,\r\n timestamp: new Date().toISOString()\r\n });\r\n } catch (error) {\r\n return c.json({ \r\n error: error.message,\r\n tableName: TABLE_NAME,\r\n timestamp: new Date().toISOString()\r\n }, 500);\r\n }\r\n});\r\n\r\n// Get analytics endpoint with proper error handling\r\napp.get(\"/api/analytics\", async c => {\r\n try {\r\n const stats = await sqlite.execute(`\r\n SELECT \r\n primary_archetype,\r\n COUNT(*) as count,\r\n ROUND(AVG(completion_time), 2) as avg_completion_time,\r\n MIN(timestamp) as first_submission,\r\n MAX(timestamp) as latest_submission\r\n FROM ${TABLE_NAME} \r\n GROUP BY primary_archetype\r\n ORDER BY count DESC\r\n `);\r\n\r\n const totalSubmissions = await sqlite.execute(\r\n `SELECT COUNT(*) as total FROM ${TABLE_NAME}`\r\n );\r\n\r\n const recentSubmissions = await sqlite.execute(`\r\n SELECT primary_archetype, timestamp, completion_time\r\n FROM ${TABLE_NAME}\r\n ORDER BY timestamp DESC\r\n LIMIT 10\r\n `);\r\n \r\n return c.json({\r\n archetypeDistribution: stats,\r\n totalSubmissions: totalSubmissions[0]?.total || 0,\r\n recentSubmissions,\r\n generatedAt: new Date().toISOString()\r\n });\r\n } catch (error) {\r\n console.error(\"Error fetching analytics:\", error);\r\n return c.json({ error: \"Failed to fetch analytics\" }, 500);\r\n }\r\n});\r\n\r\n// Enhanced email function following Val Town standards\r\nasync function sendResultsEmail(userEmail: string, results: QuizResults, completionTime?: number) {\r\n const completionTimeText = completionTime \r\n ? `Completion time: ${Math.round(completionTime / 1000)} seconds`\r\n : '';\r\n\r\n const topArchetypes = Object.entries(results.breakdown)\r\n .sort(([,a], [,b]) => b - a)\r\n .slice(0, 3)\r\n .map(([archetype, percentage]) => `${archetype}: ${percentage}%`)\r\n .join('\\n');\r\n\r\n // Generate subject from template\r\n const subject = config.emailConfig.templates.userResultsSubject\r\n .replace('{archetype}', results.primaryArchetype);\r\n\r\n // Enhanced HTML email template following Val Town best practices\r\n const htmlTemplate = `\r\n \r\n \r\n \r\n \r\n \r\n Your Social Archetype Results\r\n \r\n \r\n \r\n
\r\n
\r\n
🎯 Your Social Archetype Results
\r\n
${results.primaryArchetype}
\r\n
\r\n \r\n
\r\n
\r\n
Your Primary Archetype: ${results.primaryArchetype}
\r\n
${results.description || 'You have a unique social personality that influences how you connect with others and engage with communities.'}
\r\n
\r\n\r\n
\r\n
📊 Your Results Breakdown:
\r\n
${topArchetypes}
\r\n ${completionTimeText ? `
⏱️ ${completionTimeText}
` : ''}\r\n
\r\n\r\n
🌟 What This Means:
\r\n
\r\n
Your primary archetype reflects your natural social tendencies
\r\n
Look for events and communities that align with your archetype
\r\n
Connect with others who share similar values
\r\n
Consider how your archetype influences your social interactions
\r\n
\r\n\r\n
\r\n Take Quiz Again\r\n
\r\n
\r\n\r\n
\r\n
Thank you for taking the Social Archetype Quiz!
\r\n
Built with ❤️ on Val Town
\r\n
\r\n Questions? Reply to this email to contact our team.\r\n
\r\n
\r\n
\r\n \r\n \r\n `;\r\n\r\n // Send email following Val Town documentation standards\r\n await email({\r\n to: userEmail,\r\n from: config.emailConfig.from,\r\n replyTo: config.emailConfig.replyTo,\r\n subject: subject,\r\n html: htmlTemplate,\r\n headers: {\r\n ...config.emailConfig.headers,\r\n \"X-Quiz-Result\": results.primaryArchetype,\r\n \"X-Completion-Time\": completionTime ? Math.round(completionTime / 1000).toString() : \"unknown\"\r\n },\r\n text: `\r\nYour Social Archetype: ${results.primaryArchetype}\r\n\r\n${results.description || 'You have a unique social personality.'}\r\n\r\nResults Breakdown:\r\n${topArchetypes}\r\n\r\n${completionTimeText}\r\n\r\nWhat This Means:\r\n- Your primary archetype reflects your natural social tendencies\r\n- Look for events and communities that align with your archetype\r\n- Connect with others who share similar values\r\n- Consider how your archetype influences your social interactions\r\n\r\nThank you for taking the Social Archetype Quiz!\r\n\r\nQuestions? Reply to this email to contact our team.\r\n `\r\n });\r\n}\r\n\r\n// Enhanced admin notification following Val Town patterns\r\nasync function sendAdminNotification(userEmail: string, results: QuizResults, completionTime?: number) {\r\n if (!config.adminEmail) return;\r\n\r\n // Generate subject from template\r\n const subject = config.emailConfig.templates.adminNotificationSubject\r\n .replace('{archetype}', results.primaryArchetype);\r\n\r\n const completionTimeText = completionTime \r\n ? `⏱️ Completion Time: ${Math.round(completionTime / 1000)} seconds`\r\n : '';\r\n\r\n await email({\r\n to: config.adminEmail,\r\n from: config.emailConfig.from,\r\n replyTo: config.emailConfig.replyTo,\r\n subject: subject,\r\n headers: {\r\n ...config.emailConfig.headers,\r\n \"X-Email-Type\": \"admin-notification\",\r\n \"X-User-Email\": userEmail,\r\n \"X-Quiz-Result\": results.primaryArchetype\r\n },\r\n html: `\r\n
\r\n
\r\n
🎯 New Quiz Submission
\r\n
Social Archetype Quiz Admin Notification
\r\n
\r\n \r\n
\r\n
📋 Submission Details
\r\n
📧 User Email: ${userEmail}
\r\n
🎭 Primary Archetype: ${results.primaryArchetype}
\r\n
📅 Timestamp: ${new Date().toLocaleString()}
\r\n ${completionTimeText ? `
${completionTimeText}
` : ''}\r\n
\r\n \r\n
\r\n
📊 Archetype Breakdown:
\r\n
\r\n ${Object.entries(results.breakdown)\r\n .sort(([,a], [,b]) => b - a)\r\n .map(([archetype, percentage]) => `\r\n
\r\n ${archetype}\r\n ${percentage}%\r\n
\r\n `).join('')}\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n 📊 View Admin Dashboard\r\n \r\n
\r\n
\r\n \r\n
\r\n
Sent from ${config.siteName} on Val Town
\r\n
\r\n
\r\n `,\r\n text: `\r\n🎯 NEW QUIZ SUBMISSION\r\n\r\n📋 Submission Details:\r\n• User Email: ${userEmail}\r\n• Primary Archetype: ${results.primaryArchetype}\r\n• Timestamp: ${new Date().toLocaleString()}\r\n${completionTimeText ? `• ${completionTimeText}` : ''}\r\n\r\n📊 Archetype Breakdown:\r\n${Object.entries(results.breakdown)\r\n .sort(([,a], [,b]) => b - a)\r\n .map(([archetype, percentage]) => `• ${archetype}: ${percentage}%`)\r\n .join('\\n')}\r\n\r\n📊 Admin Dashboard: ${config.siteUrl}/admin.http\r\n\r\n---\r\nSent from ${config.siteName} on Val Town\r\n `\r\n });\r\n}\r\n\r\n// Utility function to hash IP for privacy compliance\r\nasync function hashIP(ip: string): Promise {\r\n const encoder = new TextEncoder();\r\n const data = encoder.encode(ip + config.hashSalt);\r\n const hashBuffer = await crypto.subtle.digest('SHA-256', data);\r\n const hashArray = Array.from(new Uint8Array(hashBuffer));\r\n return hashArray.map(b => b.toString(16).padStart(2, '0')).join('').substring(0, 16);\r\n}\r\n\r\n// Export the Hono app as the default export for HTTP val\r\nexport default app.fetch; ","club",[],[353],{"_104":362,"_95":363,"_153":364,"_155":-5,"_156":138,"_157":365,"_159":160,"_106":366,"_100":328,"_162":329,"_164":367,"_165":22,"_166":-5,"_167":368,"_98":369},"77d2063c-4d48-11f0-8efa-76b3cceeab13","main.tsx","58feef2a-4d45-11f0-91f7-76b3cceeab13",13,["D",1750363409161],"// This file now redirects to the new HTTP val structure following Val Town best practices\n// The main application is now in index.http.ts and admin dashboard is in admin.http.ts\nexport { default } from \"./index.http.ts\";",[],[363],"files",[150,170,178,185,192,202,211,220,229,239,250,259,269,276,285,294,304,313,323,333,342,351,361],"counts",{"_374":32,"_375":245,"_376":32,"_377":328},"pulls","branches","forks","envVars","contents",[380,383,386,389,392],{"_104":193,"_95":194,"_153":195,"_155":188,"_156":138,"_157":196,"_159":160,"_106":381,"_100":32,"_162":198,"_164":199,"_165":22,"_166":-5,"_98":382},["D",1750363618024],[180,187,194],{"_104":203,"_95":204,"_153":205,"_155":188,"_156":138,"_157":206,"_159":22,"_106":384,"_100":32,"_162":198,"_164":208,"_165":22,"_166":-5,"_98":385},["D",1750363618030],[180,187,204],{"_104":212,"_95":213,"_153":214,"_155":188,"_156":138,"_157":215,"_159":160,"_106":387,"_100":32,"_162":198,"_164":217,"_165":22,"_166":-5,"_98":388},["D",1750363618029],[180,187,213],{"_104":221,"_95":222,"_153":223,"_155":188,"_156":138,"_157":224,"_159":22,"_106":390,"_100":32,"_162":198,"_164":226,"_165":22,"_166":-5,"_98":391},["D",1750363618022],[180,187,222],{"_104":230,"_95":231,"_153":232,"_155":188,"_156":138,"_157":233,"_159":22,"_106":393,"_100":32,"_162":198,"_164":235,"_165":22,"_166":-5,"_98":394},["D",1750363618086],[180,187,231],{"_104":186,"_95":187,"_153":188,"_155":181,"_156":138,"_157":189,"_159":160,"_106":396,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":397},["D",1750363617905],[180,187],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":406,"_148":411,"_370":481,"_246":482,"_378":484,"_495":-5,"_496":22,"_497":-5,"_498":-5,"_499":-5,"_500":501},{"_104":105,"_95":96,"_106":407,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":408,"_132":409,"_135":410,"_147":22},["D",1750362068477],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[412,415,418,448,460,463,466,469,472,475,478],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":413,"_98":414},[],[152],{"_104":171,"_95":172,"_153":173,"_155":-5,"_156":138,"_157":174,"_159":160,"_106":175,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":416,"_98":417},[],[172],{"_104":179,"_95":180,"_153":181,"_155":-5,"_156":138,"_157":182,"_159":160,"_106":183,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":419,"_98":447},[420,438,441,444],{"_104":186,"_95":187,"_153":188,"_155":181,"_156":138,"_157":189,"_159":160,"_106":190,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":421,"_98":437},[422,425,428,431,434],{"_104":193,"_95":194,"_153":195,"_155":188,"_156":138,"_157":196,"_159":160,"_106":197,"_100":32,"_162":198,"_164":199,"_165":22,"_166":-5,"_167":423,"_98":424},[],[180,187,194],{"_104":203,"_95":204,"_153":205,"_155":188,"_156":138,"_157":206,"_159":22,"_106":207,"_100":32,"_162":198,"_164":208,"_165":22,"_166":-5,"_167":426,"_98":427},[],[180,187,204],{"_104":212,"_95":213,"_153":214,"_155":188,"_156":138,"_157":215,"_159":160,"_106":216,"_100":32,"_162":198,"_164":217,"_165":22,"_166":-5,"_167":429,"_98":430},[],[180,187,213],{"_104":221,"_95":222,"_153":223,"_155":188,"_156":138,"_157":224,"_159":22,"_106":225,"_100":32,"_162":198,"_164":226,"_165":22,"_166":-5,"_167":432,"_98":433},[],[180,187,222],{"_104":230,"_95":231,"_153":232,"_155":188,"_156":138,"_157":233,"_159":22,"_106":234,"_100":32,"_162":198,"_164":235,"_165":22,"_166":-5,"_167":435,"_98":436},[],[180,187,231],[180,187],{"_104":240,"_95":241,"_153":242,"_155":181,"_156":138,"_157":243,"_159":160,"_106":244,"_100":245,"_162":246,"_164":247,"_165":22,"_166":-5,"_167":439,"_98":440},[],[180,241],{"_104":251,"_95":252,"_153":253,"_155":181,"_156":138,"_157":254,"_159":22,"_106":255,"_100":32,"_162":198,"_164":256,"_165":22,"_166":-5,"_167":442,"_98":443},[],[180,252],{"_104":260,"_95":261,"_153":262,"_155":181,"_156":138,"_157":263,"_159":22,"_106":264,"_100":32,"_162":246,"_164":265,"_165":22,"_166":-5,"_167":445,"_98":446},[],[180,261],[180],{"_104":270,"_95":271,"_153":272,"_155":-5,"_156":138,"_157":273,"_159":160,"_106":274,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":449,"_98":459},[450,453,456],{"_104":277,"_95":278,"_153":279,"_155":272,"_156":138,"_157":280,"_159":22,"_106":281,"_100":32,"_162":198,"_164":282,"_165":22,"_166":-5,"_167":451,"_98":452},[],[271,278],{"_104":286,"_95":287,"_153":288,"_155":272,"_156":138,"_157":289,"_159":22,"_106":290,"_100":32,"_162":198,"_164":291,"_165":22,"_166":-5,"_167":454,"_98":455},[],[271,287],{"_104":295,"_95":296,"_153":297,"_155":272,"_156":138,"_157":298,"_159":22,"_106":299,"_100":32,"_162":198,"_164":300,"_165":22,"_166":-5,"_167":457,"_98":458},[],[271,296],[271],{"_104":305,"_95":306,"_153":307,"_155":-5,"_156":138,"_157":308,"_159":160,"_106":309,"_100":32,"_162":246,"_164":310,"_165":22,"_166":-5,"_167":461,"_98":462},[],[306],{"_104":314,"_95":315,"_153":316,"_155":-5,"_156":138,"_157":317,"_159":22,"_106":318,"_100":319,"_162":246,"_164":320,"_165":22,"_166":-5,"_167":464,"_98":465},[],[315],{"_104":324,"_95":325,"_153":326,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":327,"_100":328,"_162":329,"_164":330,"_165":22,"_166":-5,"_167":467,"_98":468},[],[325],{"_104":334,"_95":335,"_153":336,"_155":-5,"_156":138,"_157":337,"_159":22,"_106":338,"_100":319,"_162":198,"_164":339,"_165":22,"_166":-5,"_167":470,"_98":471},[],[335],{"_104":343,"_95":344,"_153":345,"_155":-5,"_156":138,"_157":346,"_159":160,"_106":347,"_100":32,"_162":246,"_164":348,"_165":22,"_166":-5,"_167":473,"_98":474},[],[344],{"_104":352,"_95":353,"_153":354,"_155":-5,"_156":138,"_157":355,"_159":22,"_106":356,"_100":319,"_162":329,"_164":357,"_165":22,"_166":358,"_167":476,"_98":477},[],[353],{"_104":362,"_95":363,"_153":364,"_155":-5,"_156":138,"_157":365,"_159":160,"_106":366,"_100":328,"_162":329,"_164":367,"_165":22,"_166":-5,"_167":479,"_98":480},[],[363],[412,415,418,420,422,425,428,431,434,438,441,444,448,450,453,456,460,463,466,469,472,475,478],{"_104":186,"_95":187,"_153":188,"_155":181,"_156":138,"_157":189,"_159":160,"_106":396,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":483},[180,187],[485,487,489,491,493],{"_104":193,"_95":194,"_153":195,"_155":188,"_156":138,"_157":196,"_159":160,"_106":381,"_100":32,"_162":198,"_164":199,"_165":22,"_166":-5,"_98":486},[180,187,194],{"_104":203,"_95":204,"_153":205,"_155":188,"_156":138,"_157":206,"_159":22,"_106":384,"_100":32,"_162":198,"_164":208,"_165":22,"_166":-5,"_98":488},[180,187,204],{"_104":212,"_95":213,"_153":214,"_155":188,"_156":138,"_157":215,"_159":160,"_106":387,"_100":32,"_162":198,"_164":217,"_165":22,"_166":-5,"_98":490},[180,187,213],{"_104":221,"_95":222,"_153":223,"_155":188,"_156":138,"_157":224,"_159":22,"_106":390,"_100":32,"_162":198,"_164":226,"_165":22,"_166":-5,"_98":492},[180,187,222],{"_104":230,"_95":231,"_153":232,"_155":188,"_156":138,"_157":233,"_159":22,"_106":393,"_100":32,"_162":198,"_164":235,"_165":22,"_166":-5,"_98":494},[180,187,231],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]