🤖 Η Προσωπική σου AI Σύσταση 🌍

\n {loading ? (\n

Δημιουργία εξατομικευμένης πρότασης...

\n ) : (\n

{recommendation}

\n )}\n \n

\n );\n}\n\nfunction UltraEngagedSurvey({ onComplete }) {\n const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);\n const [answers, setAnswers] = useState([]);\n const [animationClass, setAnimationClass] = useState('');\n const [showAIRecommendation, setShowAIRecommendation] = useState(false);\n const textareaRef = useRef(null);\n\n const currentQuestion = ULTRA_QUESTIONS[currentQuestionIndex];\n\n const handleAnswer = (answer) => {\n const newAnswers = [...answers, answer];\n \n setAnimationClass('slide-out');\n \n setTimeout(() => {\n if (currentQuestionIndex < ULTRA_QUESTIONS.length - 1) {\n setCurrentQuestionIndex(currentQuestionIndex + 1);\n setAnswers(newAnswers);\n setAnimationClass('slide-in');\n } else {\n setAnswers(newAnswers);\n setShowAIRecommendation(true);\n }\n }, 300);\n };\n\n const handleFreeTextSubmit = () => {\n if (textareaRef.current) {\n const textValue = textareaRef.current.value.trim();\n if (textValue) {\n handleAnswer(textValue);\n } else {\n alert(\"Παρακαλώ εισάγετε κάποιο κείμενο πριν υποβάλετε.\");\n }\n }\n };\n\n const renderQuestionContent = () => {\n switch(currentQuestion.type) {\n case \"emoji\":\n return (\n

\n {currentQuestion.options.map((emoji, index) => (\n \n ))}\n

\n );\n case \"free-text\":\n return (\n

\n            <button onClick={handleFreeTextSubmit}>\n              Υποβολή\n            </button>\n          </div>\n        );\n      case \"creative\":\n        return (\n          <div className=\"creative-selector\">\n            {currentQuestion.options.map((option, index) => (\n              <button \n                key={index} \n                onClick={() => handleAnswer(option)}\n                className=\"creative-option\"\n              >\n                {option}\n              </button>\n            ))}\n          </div>\n        );\n    }\n  };\n\n  const handleAIRecommendationClose = () => {\n    onComplete(answers);\n    setShowAIRecommendation(false);\n  };\n\n  return (\n    <div className={`ultra-engaged-survey ${animationClass}`}>\n      {showAIRecommendation ? (\n        <AIRecommendationModal \n          preferences={answers} \n          onClose={handleAIRecommendationClose} \n        />\n      ) : (\n        <>\n          <div className=\"survey-progress\">\n            <div \n              className=\"progress-bar\" \n              style={{width: `${(currentQuestionIndex / ULTRA_QUESTIONS.length) * 100}%`}}\n            />\n          </div>\n          <h2>{currentQuestion.question}</h2>\n          {renderQuestionContent()}\n          <div className=\"question-counter\">\n            Ερώτηση {currentQuestionIndex + 1} από {ULTRA_QUESTIONS.length}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nfunction TravelPersonalityTest() {\n  const [engagementLevel, setEngagementLevel] = useState(null);\n  const [showUltraSurvey, setShowUltraSurvey] = useState(false);\n\n  const determineEngagementLevel = (answers) => {\n    const randomLevel = Object.values(ENGAGEMENT_LEVELS)[\n      Math.floor(Math.random() * Object.values(ENGAGEMENT_LEVELS).length)\n    ];\n    setEngagementLevel(randomLevel);\n  };\n\n  return (\n    <div className=\"travel-personality-container\">\n      {!showUltraSurvey ? (\n        <div className=\"personality-intro\">\n          <h1>🌍 Ανακάλυψε τον Ταξιδιωτικό σου Εαυτό 🧭</h1>\n          <p>Μια διασκεδαστική και βαθιά προσωπική εμπειρία που θα σε εκπλήξει!</p>\n          <button \n            onClick={() => setShowUltraSurvey(true)}\n            className=\"start-journey-btn\"\n          >\n            Ξεκίνα το Ταξίδι σου 🚀\n          </button>\n        </div>\n      ) : (\n        <UltraEngagedSurvey onComplete={determineEngagementLevel} />\n      )}\n\n      {engagementLevel && (\n        <div className=\"engagement-result\">\n          <h2>Η Ταξιδιωτική σου Προσωπικότητα 🌈</h2>\n          <div className=\"personality-badge\">\n            {engagementLevel}\n          </div>\n          <p>Κάθε ταξίδι είναι μια μοναδική περιπέτεια. Η δική σου είναι απίστευτη!</p>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<TravelPersonalityTest />);\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <html>\n      <head>\n        <title>Ταξιδιωτική Προσωπικότητα</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"content-type\": \"text/html\" }\n  });\n}\n\nconst css = `\nbody {\n  font-family: 'Arial', sans-serif;\n  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  margin: 0;\n  color: #333;\n}\n\n.travel-personality-container {\n  background: white;\n  border-radius: 20px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n  padding: 40px;\n  text-align: center;\n  max-width: 500px;\n  width: 100%;\n  transition: all 0.3s ease;\n}\n\n.personality-intro h1 {\n  font-size: 2.2em;\n  margin-bottom: 20px;\n}\n\n.start-journey-btn {\n  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);\n  color: white;\n  border: none;\n  padding: 15px 30px;\n  border-radius: 50px;\n  font-size: 1.1em;\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n\n.start-journey-btn:hover {\n  transform: scale(1.05);\n}\n\n.ultra-engaged-survey {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.emoji-selector, .creative-selector {\n  display: flex;\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.emoji-button, .creative-option {\n  font-size: 2em;\n  background: transparent;\n  border: 2px solid #2575fc;\n  border-radius: 10px;\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.emoji-button:hover, .creative-option:hover {\n  background: #2575fc;\n  color: white;\n}\n\n.free-text-input textarea {\n  width: 100%;\n  min-height: 100px;\n  border: 2px solid #2575fc;\n  border-radius: 10px;\n  padding: 10px;\n  margin-bottom: 15px;\n}\n\n.engagement-result {\n  margin-top: 20px;\n}\n\n.personality-badge {\n  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);\n  color: white;\n  padding: 15px;\n  border-radius: 10px;\n  font-size: 1.2em;\n  margin: 20px 0;\n}\n\n.ai-recommendation-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: white;\n  padding: 30px;\n  border-radius: 20px;\n  max-width: 500px;\n  text-align: center;\n}\n\n.slide-in {\n  animation: slideIn 0.3s forwards;\n}\n\n.slide-out {\n  animation: slideOut 0.3s forwards;\n}\n\n@keyframes slideIn {\n  from { opacity: 0; transform: translateX(100%); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes slideOut {\n  from { opacity: 1; transform: translateX(0); }\n  to { opacity: 0; transform: translateX(-100%); }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/ntontischris/travelSurveyApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>