\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} ",[],[179,186,193],{"_104":202,"_95":203,"_152":204,"_154":187,"_155":138,"_156":205,"_158":22,"_106":206,"_100":32,"_161":197,"_163":207,"_164":22,"_165":-5,"_166":208,"_98":209},"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} ",[],[179,186,203],{"_104":211,"_95":212,"_152":213,"_154":187,"_155":138,"_156":214,"_158":159,"_106":215,"_100":32,"_161":197,"_163":216,"_164":22,"_165":-5,"_166":217,"_98":218},"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} ",[],[179,186,212],{"_104":220,"_95":221,"_152":222,"_154":187,"_155":138,"_156":223,"_158":22,"_106":224,"_100":32,"_161":197,"_163":225,"_164":22,"_165":-5,"_166":226,"_98":227},"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} ",[],[179,186,221],{"_104":229,"_95":230,"_152":231,"_154":187,"_155":138,"_156":232,"_158":22,"_106":233,"_100":32,"_161":197,"_163":234,"_164":22,"_165":-5,"_166":235,"_98":236},"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} ",[],[179,186,230],[179,186],{"_104":239,"_95":240,"_152":241,"_154":180,"_155":138,"_156":242,"_158":22,"_106":243,"_100":32,"_161":244,"_163":245,"_164":22,"_165":-5,"_166":246,"_98":247},"f468df0e-4d48-11f0-b33f-76b3cceeab13","index.html","f468dfcc-4d48-11f0-b33f-76b3cceeab13",21,["D",1750363618159],"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 ",[],[179,240],{"_104":249,"_95":250,"_152":251,"_154":180,"_155":138,"_156":252,"_158":22,"_106":253,"_100":32,"_161":197,"_163":254,"_164":22,"_165":-5,"_166":255,"_98":256},"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} ",[],[179,250],{"_104":258,"_95":259,"_152":260,"_154":180,"_155":138,"_156":261,"_158":22,"_106":262,"_100":32,"_161":244,"_163":263,"_164":22,"_165":-5,"_166":264,"_98":265},"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} ",[],[179,259],[179],{"_104":268,"_95":269,"_152":270,"_154":-5,"_155":138,"_156":271,"_158":159,"_106":272,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":273,"_98":282},"77682000-4d48-11f0-ae3c-76b3cceeab13","shared","776820a0-4d48-11f0-ae3c-76b3cceeab13",5,["D",1750363408471],[274],{"_104":275,"_95":276,"_152":277,"_154":270,"_155":138,"_156":101,"_158":22,"_106":278,"_100":32,"_161":197,"_163":279,"_164":22,"_165":-5,"_166":280,"_98":281},"f473088a-4d48-11f0-b4b9-76b3cceeab13","types.ts","f4730952-4d48-11f0-b4b9-76b3cceeab13",["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} ",[],[269,276],[269],{"_104":284,"_95":285,"_152":286,"_154":-5,"_155":138,"_156":287,"_158":159,"_106":288,"_100":32,"_161":244,"_163":289,"_164":22,"_165":-5,"_166":290,"_98":291},"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",[],[285],{"_104":293,"_95":294,"_152":295,"_154":-5,"_155":138,"_156":296,"_158":22,"_106":297,"_100":298,"_161":244,"_163":299,"_164":22,"_165":-5,"_166":300,"_98":301},"77d600f2-4d48-11f0-a201-76b3cceeab13","README.md","59043340-4d45-11f0-866c-76b3cceeab13",14,["D",1750363409188],1,"# 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\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\r\n### Environment Variables\r\n- `VAL_TOWN_API_KEY`: Automatically provided by Val Town\r\n- Optional: `ADMIN_EMAIL`, `SITE_URL`, `HASH_SALT` for production overrides\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",[],[294],{"_104":303,"_95":304,"_152":305,"_154":-5,"_155":138,"_156":306,"_158":22,"_106":307,"_100":32,"_161":308,"_163":309,"_164":22,"_165":-5,"_166":310,"_98":311},"779def82-4d48-11f0-8fde-76b3cceeab13","admin.http.ts","779df040-4d48-11f0-8fde-76b3cceeab13",9,["D",1750363408808],"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 = config.database.tableName;\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\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 \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 📥 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 ${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 }).join('')}\r\n \r\n
ID Email Archetype Completion Timestamp Breakdown
${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 ${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\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; ",[],[304],{"_104":313,"_95":314,"_152":315,"_154":-5,"_155":138,"_156":316,"_158":22,"_106":317,"_100":32,"_161":197,"_163":318,"_164":22,"_165":-5,"_166":319,"_98":320},"77a6159a-4d48-11f0-9294-76b3cceeab13","config.ts","77a6164e-4d48-11f0-9294-76b3cceeab13",10,["D",1750363408875],"// 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\r\n emailConfig: {\r\n fromName: \"Social Archetype Quiz\",\r\n replyTo: \"tom@cal.town\"\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} ",[],[314],{"_104":322,"_95":323,"_152":324,"_154":-5,"_155":138,"_156":325,"_158":159,"_106":326,"_100":32,"_161":244,"_163":327,"_164":22,"_165":-5,"_166":328,"_98":329},"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}",[],[323],{"_104":331,"_95":332,"_152":333,"_154":-5,"_155":138,"_156":334,"_158":22,"_106":335,"_100":32,"_161":308,"_163":336,"_164":22,"_165":337,"_166":338,"_98":339},"77c7f642-4d48-11f0-9bc0-76b3cceeab13","index.http.ts","77c7f700-4d48-11f0-9bc0-76b3cceeab13",12,["D",1750363409097],"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';\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 // Validate required fields\r\n if (!email || !results || !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 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 // Store in database following Val Town patterns\r\n 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\r\n // Send email to user with results\r\n await sendResultsEmail(email, results, completionTime);\r\n\r\n // Send notification email to admin (if configured)\r\n if (config.adminEmail) {\r\n await sendAdminNotification(email, results);\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({ error: \"Failed to submit quiz results\" }, 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 // 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
\r\n \r\n \r\n `;\r\n\r\n await email({\r\n to: userEmail,\r\n subject: `🎯 Your Social Archetype: ${results.primaryArchetype}`,\r\n html: htmlTemplate,\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\n });\r\n}\r\n\r\n// Enhanced admin notification following Val Town patterns\r\nasync function sendAdminNotification(userEmail: string, results: QuizResults) {\r\n if (!config.adminEmail) return;\r\n\r\n await email({\r\n to: config.adminEmail,\r\n subject: `📊 New Quiz Submission: ${results.primaryArchetype}`,\r\n html: `\r\n
\r\n
🎯 New Quiz Submission
\r\n
\r\n
📧 Email: ${userEmail}
\r\n
🎭 Primary Archetype: ${results.primaryArchetype}
\r\n
📅 Timestamp: ${new Date().toISOString()}
\r\n
\r\n \r\n
📊 Breakdown:
\r\n
\r\n ${Object.entries(results.breakdown)\r\n .sort(([,a], [,b]) => b - a)\r\n .map(([archetype, percentage]) => `
${archetype}: ${percentage}%
`)\r\n .join('')}\r\n
\r\n
\r\n `,\r\n text: `\r\nNew Quiz Submission\r\n\r\nEmail: ${userEmail}\r\nPrimary Archetype: ${results.primaryArchetype}\r\nBreakdown: ${JSON.stringify(results.breakdown, null, 2)}\r\nTimestamp: ${new Date().toISOString()}\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",[],[332],{"_104":341,"_95":342,"_152":343,"_154":-5,"_155":138,"_156":344,"_158":159,"_106":345,"_100":346,"_161":308,"_163":347,"_164":22,"_165":-5,"_166":348,"_98":349},"77d2063c-4d48-11f0-8efa-76b3cceeab13","main.tsx","58feef2a-4d45-11f0-91f7-76b3cceeab13",13,["D",1750363409161],2,"// 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\";",[],[342],"files",[150,169,177,184,191,201,210,219,228,238,248,257,267,274,283,292,302,312,321,330,340],"counts",{"_354":32,"_355":298,"_356":32,"_357":346},"pulls","branches","forks","envVars","contents",[],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":361,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":362},["D",1750363408581],[99],"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":371,"_148":376,"_350":440,"_244":441,"_358":443,"_444":-5,"_445":22,"_446":-5,"_447":-5,"_448":-5,"_449":450},{"_104":105,"_95":96,"_106":372,"_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":373,"_132":374,"_135":375,"_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},[377,380,383,413,419,422,425,428,431,434,437],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":378,"_98":379},[],[99],{"_104":170,"_95":171,"_152":172,"_154":-5,"_155":138,"_156":173,"_158":159,"_106":174,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":381,"_98":382},[],[171],{"_104":178,"_95":179,"_152":180,"_154":-5,"_155":138,"_156":181,"_158":159,"_106":182,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":384,"_98":412},[385,403,406,409],{"_104":185,"_95":186,"_152":187,"_154":180,"_155":138,"_156":188,"_158":159,"_106":189,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":386,"_98":402},[387,390,393,396,399],{"_104":192,"_95":193,"_152":194,"_154":187,"_155":138,"_156":195,"_158":159,"_106":196,"_100":32,"_161":197,"_163":198,"_164":22,"_165":-5,"_166":388,"_98":389},[],[179,186,193],{"_104":202,"_95":203,"_152":204,"_154":187,"_155":138,"_156":205,"_158":22,"_106":206,"_100":32,"_161":197,"_163":207,"_164":22,"_165":-5,"_166":391,"_98":392},[],[179,186,203],{"_104":211,"_95":212,"_152":213,"_154":187,"_155":138,"_156":214,"_158":159,"_106":215,"_100":32,"_161":197,"_163":216,"_164":22,"_165":-5,"_166":394,"_98":395},[],[179,186,212],{"_104":220,"_95":221,"_152":222,"_154":187,"_155":138,"_156":223,"_158":22,"_106":224,"_100":32,"_161":197,"_163":225,"_164":22,"_165":-5,"_166":397,"_98":398},[],[179,186,221],{"_104":229,"_95":230,"_152":231,"_154":187,"_155":138,"_156":232,"_158":22,"_106":233,"_100":32,"_161":197,"_163":234,"_164":22,"_165":-5,"_166":400,"_98":401},[],[179,186,230],[179,186],{"_104":239,"_95":240,"_152":241,"_154":180,"_155":138,"_156":242,"_158":22,"_106":243,"_100":32,"_161":244,"_163":245,"_164":22,"_165":-5,"_166":404,"_98":405},[],[179,240],{"_104":249,"_95":250,"_152":251,"_154":180,"_155":138,"_156":252,"_158":22,"_106":253,"_100":32,"_161":197,"_163":254,"_164":22,"_165":-5,"_166":407,"_98":408},[],[179,250],{"_104":258,"_95":259,"_152":260,"_154":180,"_155":138,"_156":261,"_158":22,"_106":262,"_100":32,"_161":244,"_163":263,"_164":22,"_165":-5,"_166":410,"_98":411},[],[179,259],[179],{"_104":268,"_95":269,"_152":270,"_154":-5,"_155":138,"_156":271,"_158":159,"_106":272,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":414,"_98":418},[415],{"_104":275,"_95":276,"_152":277,"_154":270,"_155":138,"_156":101,"_158":22,"_106":278,"_100":32,"_161":197,"_163":279,"_164":22,"_165":-5,"_166":416,"_98":417},[],[269,276],[269],{"_104":284,"_95":285,"_152":286,"_154":-5,"_155":138,"_156":287,"_158":159,"_106":288,"_100":32,"_161":244,"_163":289,"_164":22,"_165":-5,"_166":420,"_98":421},[],[285],{"_104":293,"_95":294,"_152":295,"_154":-5,"_155":138,"_156":296,"_158":22,"_106":297,"_100":298,"_161":244,"_163":299,"_164":22,"_165":-5,"_166":423,"_98":424},[],[294],{"_104":303,"_95":304,"_152":305,"_154":-5,"_155":138,"_156":306,"_158":22,"_106":307,"_100":32,"_161":308,"_163":309,"_164":22,"_165":-5,"_166":426,"_98":427},[],[304],{"_104":313,"_95":314,"_152":315,"_154":-5,"_155":138,"_156":316,"_158":22,"_106":317,"_100":32,"_161":197,"_163":318,"_164":22,"_165":-5,"_166":429,"_98":430},[],[314],{"_104":322,"_95":323,"_152":324,"_154":-5,"_155":138,"_156":325,"_158":159,"_106":326,"_100":32,"_161":244,"_163":327,"_164":22,"_165":-5,"_166":432,"_98":433},[],[323],{"_104":331,"_95":332,"_152":333,"_154":-5,"_155":138,"_156":334,"_158":22,"_106":335,"_100":32,"_161":308,"_163":336,"_164":22,"_165":337,"_166":435,"_98":436},[],[332],{"_104":341,"_95":342,"_152":343,"_154":-5,"_155":138,"_156":344,"_158":159,"_106":345,"_100":346,"_161":308,"_163":347,"_164":22,"_165":-5,"_166":438,"_98":439},[],[342],[377,380,383,385,387,390,393,396,399,403,406,409,413,415,419,422,425,428,431,434,437],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":361,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":442},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]