\n {/* Header */}\n

Χρόνια Πολλά! 🌷

\n Άνοιξε τα δώρα με τη σειρά για να δεις τι σημαίνει το όνομά σου για\n μένα...\n

\n\n {/* Grid 3x3 με τα Δώρα / Γράμματα */}\n

\n {ACROSTIC.map((item, index) => (\n handleOpen(index)}\n >\n \n {/* Μπροστινή όψη: Δώρο */}\n

🎁

\n\n {/* Πίσω όψη: Γράμμα */}\n

\n {item.letter}\n

\n ))}\n \n\n {/* Περιοχή Μηνύματος για το κάθε γράμμα */}\n

\n {lastOpenedIndex !== null\n ? (\n

\n {ACROSTIC[lastOpenedIndex].letter} -{\" \"}\n {ACROSTIC[lastOpenedIndex].word}\n

\n {ACROSTIC[lastOpenedIndex].desc}\n

\n )\n : (\n

\n Πάτα το πρώτο δώρο για να ξεκινήσεις...\n

\n )}\n

\n\n {/* Modal Ολοκλήρωσης (Το τελικό δώρο) */}\n {showModal && (\n

\n {/* Confetti */}\n {confetti.map((c, i) => (\n \n ))}\n\n

\n \n 💐\n

Να χαίρεσαι το όνομά σου!

\n Παρασκευή μου...\n

\n Ελπίζω τα λουλούδια της Πέμπτης και αυτή η μικρή έκπληξη να σου\n φτιάξουν τη μέρα.\n

\n \n Είσαι ο,τι πιο όμορφο έχω στη ζωή μου. Σε αγαπάω! ❤️\n

\n\n \n

\n \n )}\n \n );\n}\n\n// ==========================================\n// 3. ΣΤΥΛ (CSS in JS)\n// ==========================================\nconst styles: { [key: string]: React.CSSProperties } = {\n page: {\n fontFamily: \"'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif\",\n background:\n \"linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%)\", // Ρομαντικό ροζ gradient\n minHeight: \"100vh\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n padding: \"30px 20px\",\n boxSizing: \"border-box\",\n userSelect: \"none\",\n },\n header: {\n textAlign: \"center\",\n marginBottom: \"30px\",\n },\n title: {\n color: \"#d81b60\",\n margin: \"0 0 10px 0\",\n fontSize: \"32px\",\n fontWeight: \"900\",\n textShadow: \"2px 2px 4px rgba(0,0,0,0.1)\",\n },\n subtitle: {\n color: \"#555\",\n fontSize: \"15px\",\n margin: 0,\n maxWidth: \"300px\",\n lineHeight: \"1.4\",\n },\n grid: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(3, 1fr)\",\n gap: \"15px\",\n width: \"100%\",\n maxWidth: \"350px\",\n marginBottom: \"40px\",\n },\n cardContainer: {\n backgroundColor: \"transparent\",\n aspectRatio: \"1/1\",\n perspective: \"1000px\",\n cursor: \"pointer\",\n },\n cardInner: {\n position: \"relative\",\n width: \"100%\",\n height: \"100%\",\n textAlign: \"center\",\n transition: \"transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1)\",\n transformStyle: \"preserve-3d\",\n },\n cardFront: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n backfaceVisibility: \"hidden\",\n backgroundColor: \"#fff\",\n borderRadius: \"15px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n boxShadow: \"0 8px 15px rgba(216, 27, 96, 0.2)\",\n border: \"2px solid #f8bbd0\",\n },\n cardBack: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n backfaceVisibility: \"hidden\",\n backgroundColor: \"#d81b60\",\n color: \"white\",\n borderRadius: \"15px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: \"45px\",\n fontWeight: \"bold\",\n transform: \"rotateY(180deg)\",\n boxShadow: \"0 8px 15px rgba(216, 27, 96, 0.4)\",\n },\n messageBox: {\n backgroundColor: \"rgba(255, 255, 255, 0.8)\",\n padding: \"20px\",\n borderRadius: \"20px\",\n width: \"100%\",\n maxWidth: \"350px\",\n minHeight: \"100px\",\n textAlign: \"center\",\n boxShadow: \"0 10px 20px rgba(0,0,0,0.05)\",\n backdropFilter: \"blur(5px)\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n wordHighlight: {\n color: \"#d81b60\",\n margin: \"0 0 5px 0\",\n fontSize: \"22px\",\n },\n wordDesc: {\n color: \"#444\",\n margin: 0,\n fontSize: \"15px\",\n lineHeight: \"1.5\",\n },\n modalOverlay: {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: \"rgba(0,0,0,0.6)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n zIndex: 1000,\n padding: \"20px\",\n animation: \"fadeIn 0.5s ease\",\n },\n modalContent: {\n backgroundColor: \"white\",\n padding: \"30px 20px\",\n borderRadius: \"25px\",\n textAlign: \"center\",\n maxWidth: \"350px\",\n boxShadow: \"0 20px 40px rgba(0,0,0,0.3)\",\n zIndex: 1010,\n animation: \"zoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)\",\n },\n modalTitle: {\n color: \"#d81b60\",\n fontSize: \"24px\",\n margin: \"0 0 15px 0\",\n },\n modalText: {\n color: \"#555\",\n fontSize: \"15px\",\n lineHeight: \"1.6\",\n margin: \"0 0 10px 0\",\n },\n closeBtn: {\n marginTop: \"20px\",\n backgroundColor: \"#d81b60\",\n color: \"white\",\n border: \"none\",\n padding: \"12px 30px\",\n borderRadius: \"25px\",\n fontSize: \"16px\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n boxShadow: \"0 5px 15px rgba(216, 27, 96, 0.4)\",\n transition: \"transform 0.2s ease\",\n },\n};\n\n// ==========================================\n// 4. CLIENT & SERVER SETUP (CSS + Confetti)\n// ==========================================\nfunction client() {\n const styleSheet = document.createElement(\"style\");\n styleSheet.innerText = `\n @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');\n body { margin: 0; padding: 0; background-color: #fecfef; }\n * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes zoomIn {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n /* Confetti Styles */\n .confetti-piece {\n position: absolute;\n width: 10px;\n height: 20px;\n top: -20px;\n opacity: 0;\n animation: fall 3s linear infinite;\n border-radius: 5px;\n }\n\n @keyframes fall {\n 0% { opacity: 1; transform: translateY(0) rotate(0deg); }\n 100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }\n }\n\n button:active {\n transform: scale(0.95);\n }\n `;\n document.head.appendChild(styleSheet);\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(req: Request): Promise {\n return new Response(\n `\n \n \n \n Χρόνια Πολλά Παρασκευή! 🌷\n \n \n \n \n

\n \n \n \n `,\n { headers: { \"content-type\": \"text/html; charset=UTF-8\" } },\n );\n}","deleted","label",[62],"3e18fd18-7e48-4963-9daa-98e09d2c49e5","README.md","019f94b5-403b-724a-beca-88b6799232f0",1,["D",1784906334211],"Hello!!! \n\nFeel free to mess around with this val and make it your own :). Just click on \"Fork\" in the top right.\n\nYou can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!\n\nHave fun with it and hopefully your crush says yes hehe.",[81],{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":93,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_90":94,"_18":95},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":89,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_90":91,"_18":92},["D",1784999676305],"children",[],[62],["D",1784906334211],[],[81],"db23d987-ff8a-464f-966b-e5d7a7fd9ab2",["D",1784906334211],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019c201a-c6d5-73df-9c72-e5a567918c20","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019c201a-c6d5-73df-9c72-eb12f876751d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_138":134},"org",{"_11":12,"_132":-5,"_133":134,"_102":103,"_135":136,"_137":50},"branch",{"_17":69,"_13":16,"_35":67,"_41":96,"_44":36,"_45":43,"_129":52,"_130":42,"_131":56,"_57":14,"_53":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5ODYyMzhDV3h6QnVKc2dNaFN0akxjMUJSaCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":96,"_13":14,"_37":182,"_48":-5,"_98":50,"_51":52,"_99":52,"_100":-5,"_101":-5,"_102":103,"_104":64,"_105":71,"_106":-5,"_107":-5,"_108":33,"_55":109,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":115,"_116":115,"_117":118,"_119":118,"_120":118,"_121":115,"_122":115,"_123":183,"_125":184,"_127":185,"_49":50},[176,177],"files",[176,177],"counts",{"_167":33,"_168":83,"_169":33,"_34":170,"_171":172},[163,164],"upstreamProject",{"_35":42,"_13":58,"_100":-5,"_101":-5,"_51":52,"_123":161},"upstreamBranch",{"_35":36,"_37":159,"_39":160,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],["D",1739338420215],{"_11":54,"_138":162},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":84,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_18":166},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":72,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_18":165},[62],[81],"pulls","branches","forks",{"_173":33,"_175":33},"connections",{"_173":33,"_174":33},"count","unfilledCount","emptyCount",{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":93,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_90":180,"_18":181},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":89,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_90":178,"_18":179},[],[62],[],[81],["D",1784906334211],{"_11":12,"_138":134},{"_11":12,"_132":-5,"_133":134,"_102":103,"_135":136,"_137":50},{"_17":69,"_13":16,"_35":67,"_41":96,"_44":36,"_45":43,"_129":52,"_130":42,"_131":56,"_57":14,"_53":12},"ctx",{"_123":-5,"_156":219,"_220":221,"_222":223,"_224":50,"_225":50,"_226":50,"_227":71,"_228":-5,"_229":-7,"_230":-7,"_231":33,"_232":50,"_233":50,"_234":-5,"_235":50,"_236":50,"_237":50,"_238":-5},"ENV",{"_190":191,"_192":193,"_194":16,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code