Val Town Code SearchReturn to Val Town

868function getClientScript() {
869  return `
870    /** @jsxImportSource https://esm.sh/react@18.2.0 */
871    import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
872    import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
873    import confetti from "https://esm.sh/canvas-confetti@1.6.0";
874
897      };
898
899      return React.createElement('div', { className: 'intro-screen fade-in' },
900        React.createElement('div', { className: 'intro-content' },
901          React.createElement('h1', null,
902            React.createElement('i', { className: 'fa-solid fa-rocket' }),
903            ' Discover Your Archetype'
904          ),
905          React.createElement('p', null, 'Uncover your unique personality type and connect with our Santa Barbara community'),
906          React.createElement('button', { onClick: handleStart, className: 'pulse-animation' }, 'Begin Your Journey')
907        )
908      );
928      };
929
930      return React.createElement('div', { className: 'intro-screen fade-in' },
931        React.createElement('div', { className: 'email-content' },
932          React.createElement('h2', null, 'Join Our Santa Barbara Community'),
933          React.createElement('p', null, 'Enter your email to begin the quiz and connect with like-minded individuals'),
934          React.createElement('div', { className: 'email-input-container' },
935            React.createElement('input', {
936              type: 'email',
937              placeholder: 'you@example.com',
941              className: 'email-input'
942            }),
943            React.createElement('button', { onClick: handleSubmit, className: 'email-submit-btn' }, 'Start Quiz')
944          ),
945          error && React.createElement('p', { className: 'error-message' }, error)
946        )
947      );
980      const progress = ((currentQuestion) / (staticQuestions.length - 1)) * 100;
981
982      return React.createElement('div', { className: \`personality-quiz \${isAnimating ? 'fade-out' : 'fade-in'}\` },
983        React.createElement('div', { className: 'progress-bar' },
984          React.createElement('div', { className: 'progress-fill', style: { width: \`\${progress}%\` } })
985        ),
986        React.createElement('div', { className: 'question-container' },
987          React.createElement('h2', { className: 'question-text' }, question.text),
988          React.createElement('div', { className: 'options-container' },
989            ...question.options.map((option, index) =>
990              React.createElement('button', {
991                key: index,
992                onClick: () => handleAnswer(index),
996            )
997          ),
998          React.createElement('div', { className: 'question-counter' }, 
999            \`Question \${currentQuestion} of \${staticQuestions.length - 1}\`
1000          )
1035
1036      if (showFinalMessage) {
1037        return React.createElement('div', { className: 'results-screen fade-in' },
1038          React.createElement('div', { className: 'results-content' },
1039            React.createElement('div', { className: 'archetype-header', style: { borderColor: archetypeDescriptions[selectedArchetype].color } },
1040              React.createElement('i', { className: archetypeIcons[selectedArchetype], style: { color: archetypeDescriptions[selectedArchetype].color } }),
1041              React.createElement('h1', null, \`You are \${archetypeDescriptions[selectedArchetype].title}\`)
1042            ),
1043            React.createElement('div', { className: 'final-message' },
1044              '✨ You are a part of something new unfolding... we will be in touch. ✨'
1045            )
1050      const result = archetypeDescriptions[calculatedArchetype];
1051
1052      return React.createElement('div', { className: 'results-screen fade-in' },
1053        React.createElement('div', { className: 'results-content' },
1054          React.createElement('div', { className: 'archetype-header', style: { borderColor: result.color } },
1055            React.createElement('i', { className: archetypeIcons[calculatedArchetype], style: { color: result.color } }),
1056            React.createElement('h1', null, \`Your Quiz Result: \${result.title}\`)
1057          ),
1058          
1059          React.createElement('div', { className: 'archetype-description' },
1060            React.createElement('p', null, result.description)
1061          ),
1062
1063          React.createElement('div', { className: 'scores-breakdown' },
1064            React.createElement('h3', null, 'Your Archetype Breakdown:'),
1065            React.createElement('div', { className: 'scores-grid' },
1066              ...Object.entries(scores).map(([type, score]) =>
1067                React.createElement('div', { key: type, className: 'score-item' },
1068                  React.createElement('div', { className: 'score-label' },
1069                    React.createElement('i', { className: archetypeIcons[type] }),
1070                    type
1071                  ),
1072                  React.createElement('div', { className: 'score-bar' },
1073                    React.createElement('div', {
1074                      className: 'score-fill',
1075                      style: {
1079                    })
1080                  ),
1081                  React.createElement('span', { className: 'score-value' }, score)
1082                )
1083              )
1085          ),
1086
1087          React.createElement('div', { style: { marginTop: '40px' } },
1088            React.createElement('h3', null, 'Choose Your Archetype:'),
1089            React.createElement('p', { style: { marginBottom: '20px', color: '#718096' } }, 
1090              'Based on your results, which archetype resonates most with you?'
1091            ),
1092            React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '15px' } },
1093              ...Object.entries(archetypeDescriptions).map(([type, desc]) =>
1094                React.createElement('button', {
1095                  key: type,
1096                  onClick: () => handleArchetypeSelect(type),
1098                  style: { borderColor: desc.color }
1099                },
1100                  React.createElement('div', { style: { marginBottom: '10px' } },
1101                    React.createElement('i', { className: archetypeIcons[type], style: { color: desc.color, fontSize: '2rem' } })
1102                  ),
1103                  React.createElement('div', { style: { fontWeight: 'bold', marginBottom: '5px' } }, desc.title),
1104                  React.createElement('div', { style: { fontSize: '0.9rem', color: '#718096' } }, 
1105                    desc.traits.slice(0, 2).join(', ')
1106                  )
1110          ),
1111
1112          selectedArchetype && React.createElement('div', { style: { marginTop: '30px' } },
1113            React.createElement('button', { onClick: handleConfirm, className: 'primary-button' }, 
1114              \`Confirm: I am \${archetypeDescriptions[selectedArchetype].title}\`
1115            )
1139      };
1140
1141      return React.createElement('div', { className: 'app' },
1142        currentScreen === 'intro' && React.createElement(IntroScreen, { onStart: handleStart }),
1143        currentScreen === 'email' && React.createElement(EmailScreen, { onEmailSubmit: handleEmailSubmit }),
1144        currentScreen === 'quiz' && React.createElement(PersonalityQuiz, { onComplete: handleQuizComplete }),
1145        currentScreen === 'results' && React.createElement(ResultsScreen, {
1146          calculatedArchetype: quizResults?.archetype,
1147          scores: quizResults?.scores,
1153    // Render the app
1154    const root = createRoot(document.getElementById('root'));
1155    root.render(React.createElement(App));
1156  `;
1157}

70## 🛠 Technical Stack
71
72- **Frontend**: React 18.2.0 with TypeScript
73- **Styling**: Custom CSS with glassmorphism and gradients
74- **Animations**: Canvas Confetti library
112- Single-file Val Town HTTP endpoint
113- Handles both GET (serve HTML) and POST (save results) requests
114- Uses React.createElement for client-side rendering
115- Glassmorphism achieved with backdrop-filter and rgba backgrounds
116- Confetti library imported via ESM for celebration effects