Ώρα για Ανεφοδιασμό! 🔋

\n Αύριο έχεις δύσκολη μέρα.
\n Κράτα πατημένο{\" \"}\n το κουμπί για να γεμίσεις ενέργεια!\n

\n\n {/* Η Μπαταρία */}\n

\n \n \n {Math.floor(progress)}%\n \n

\n\n {/* Το Κουμπί Φόρτισης */}\n e.preventDefault()} // Εμποδίζει το μενού στο κινητό\n >\n {isCharging ? \"Φορτίζει... ⚡\" : \"ΚΡΑΤΑ ΠΑΤΗΜΕΝΟ ❤️\"}\n \n

\n )\n : (\n

🎉✨🌸🎁✨🎉

{FINAL_MESSAGE.title}

{FINAL_MESSAGE.body}

\n )}\n

\n );\n}\n\n// --- CSS Styles ---\nconst styles: { [key: string]: React.CSSProperties } = {\n page: {\n fontFamily: FONT_FAMILY,\n backgroundColor: \"#111827\", // Dark slate background\n minHeight: \"100vh\",\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n margin: 0,\n color: \"#f8fafc\",\n touchAction: \"none\", // Κρίσιμο για να μη κάνει scroll/zoom όταν κρατάει πατημένο\n userSelect: \"none\",\n WebkitUserSelect: \"none\",\n },\n\n // Charging Screen\n chargingContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n zIndex: 10,\n padding: \"20px\",\n textAlign: \"center\",\n },\n title: {\n fontSize: \"28px\",\n color: \"#f87171\",\n marginBottom: \"10px\",\n textShadow: \"0 2px 10px rgba(248, 113, 113, 0.3)\",\n },\n subtitle: {\n fontSize: \"15px\",\n color: \"#94a3b8\",\n lineHeight: \"1.6\",\n marginBottom: \"40px\",\n },\n\n // Battery Design\n batteryWrapper: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n marginBottom: \"50px\",\n },\n batteryCap: {\n width: \"40px\",\n height: \"12px\",\n backgroundColor: \"#cbd5e1\",\n borderRadius: \"5px 5px 0 0\",\n marginBottom: \"-2px\",\n zIndex: 2,\n },\n batteryBody: {\n width: \"120px\",\n height: \"220px\",\n border: \"4px solid #cbd5e1\",\n borderRadius: \"15px\",\n position: \"relative\",\n overflow: \"hidden\",\n backgroundColor: \"rgba(255,255,255,0.05)\",\n boxShadow: \"0 0 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5)\",\n },\n batteryFill: {\n position: \"absolute\",\n bottom: 0,\n left: 0,\n right: 0,\n transition: \"height 0.1s linear, background-color 0.3s ease\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n progressText: {\n color: \"white\",\n fontWeight: \"bold\",\n fontSize: \"20px\",\n textShadow: \"0 2px 4px rgba(0,0,0,0.5)\",\n },\n\n // Button\n chargeButton: {\n padding: \"20px 40px\",\n fontSize: \"18px\",\n backgroundColor: BASE_COLOR,\n color: \"white\",\n border: \"none\",\n borderRadius: \"50px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n fontFamily: FONT_FAMILY,\n transition: \"all 0.1s ease\",\n outline: \"none\",\n WebkitTapHighlightColor: \"transparent\",\n },\n\n // Floating Particles\n particle: {\n position: \"absolute\",\n bottom: \"20%\",\n fontSize: \"24px\",\n animation: \"floatUp 2s ease-in forwards\",\n pointerEvents: \"none\",\n zIndex: 5,\n },\n\n // Final Screen\n wonContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n zIndex: 10,\n padding: \"20px\",\n animation: \"fadeIn 1s ease-out\",\n },\n confetti: {\n fontSize: \"40px\",\n marginBottom: \"20px\",\n animation: \"bounce 2s infinite\",\n },\n card: {\n backgroundColor: \"#fff0f6\",\n padding: \"30px 20px\",\n borderRadius: \"20px\",\n boxShadow: \"0 15px 35px rgba(214, 51, 132, 0.4)\",\n border: `3px solid ${BASE_COLOR}`,\n textAlign: \"center\",\n maxWidth: \"90%\",\n width: \"400px\",\n },\n successTitle: {\n fontSize: \"24px\",\n color: \"#e11d48\",\n marginBottom: \"20px\",\n fontWeight: \"bold\",\n },\n loveText: {\n fontSize: \"16px\",\n lineHeight: \"1.7\",\n color: \"#334155\",\n margin: 0,\n fontStyle: \"italic\",\n },\n};\n\n// --- Client / Server Setup ---\nfunction client() {\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');\n body { margin: 0; display: block; min-height: 100vh; background-color: #111827; } \n #root { display: block; width: 100%; min-height: 100vh; }\n \n @keyframes floatUp {\n 0% { transform: translateY(0) scale(0.8); opacity: 1; }\n 100% { transform: translateY(-200px) scale(1.5); opacity: 0; }\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-15px); }\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(request: 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}","label","children",[71],"contentHash","0e31f76b24e0499c9d6c39c73c08acd1c80a393e8dca1778b5e22b1f8eb2e9ba","fe0d1f7e-27b0-11f0-aecd-569c3dd06744","fddef4f0-27b0-11f0-aecd-569c3dd06744",["D",1739338420215],10,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Pretty please? 🥺\",\n \"But we'd be so cute together! 💕\",\n \"One more chance, pookie?\",\n \"Don't break my heart :(\",\n \"What about a maybe?\",\n \"Please don't do this to me, I'm fragile\",\n];\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg = \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg = \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const handleNo = () => {\n setNoClicks(prev => prev + 1);\n };\n\n const handleYes = () => {\n setIsValentine(true);\n };\n\n return (\n \n {!isValentine\n ? (\n <>\n

Will you be my Valentine? 💘

\n \n Yes\n \n \n {noClicks === 0 ? \"No\" : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n

\n \n )\n : (\n <>\n

\n \n Yay!!! 💖🎉\n \n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Valentine's Day Invitation\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}",[71],"219db6de0cde9d99ab623850153b424bf310bc4ca153e580028ccbf8fe9f9954",["D",1776691692237],"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,"_137":133},"org",{"_11":12,"_131":-5,"_132":133,"_105":106,"_134":135,"_136":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5ODYyMzhDV3h6QnVKc2dNaFN0akxjMUJSaCJ9","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":194,"_46":-5,"_101":48,"_49":50,"_102":50,"_103":-5,"_104":-5,"_105":106,"_107":78,"_108":26,"_109":-5,"_110":-5,"_111":22,"_53":112,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_126":195,"_128":196,"_130":197,"_47":48},"tree",[187,188],"files",[187,188],"counts",{"_177":22,"_178":173,"_179":22,"_180":181,"_182":183},"contents",[166,167],"file","upstreamProject",{"_32":39,"_13":56,"_103":-5,"_104":-5,"_49":50,"_126":164},"upstreamBranch",{"_32":33,"_34":162,"_36":163,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],["D",1739338420215],{"_11":52,"_137":165},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_32":170,"_13":171,"_77":172,"_79":-5,"_80":58,"_81":173,"_82":26,"_34":174,"_40":22,"_84":149,"_86":175,"_65":48,"_88":-5,"_70":176},{"_32":76,"_13":71,"_77":78,"_79":-5,"_80":58,"_81":57,"_82":26,"_34":168,"_40":20,"_84":85,"_86":87,"_65":48,"_88":-5,"_70":169},["D",1776691857214],[71],"c784299e-3cbc-11f1-aeff-42b51c65c3df","README.md","019dab13-c35f-7411-b51e-342ec053a77e",1,["D",1776691692237],"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.",[171],"pulls","branches","forks","envVars",{"_184":22,"_186":22},"connections",{"_184":22,"_185":22},"count","unfilledCount","emptyCount",{"_32":170,"_13":171,"_77":172,"_79":-5,"_80":58,"_81":173,"_82":26,"_34":191,"_40":22,"_84":149,"_86":175,"_65":48,"_88":-5,"_89":192,"_70":193},{"_32":76,"_13":71,"_77":78,"_79":-5,"_80":58,"_81":57,"_82":26,"_34":83,"_40":20,"_84":85,"_86":87,"_65":48,"_88":-5,"_89":189,"_70":190},[],[71],["D",1776691692237],[],[171],["D",1776691692237],{"_11":12,"_137":133},{"_11":12,"_131":-5,"_132":133,"_105":106,"_134":135,"_136":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":41,"_60":50,"_61":39,"_62":54,"_55":14,"_51":12},"ctx",{"_126":-5,"_159":231,"_232":233,"_234":235,"_236":48,"_237":48,"_238":48,"_239":26,"_240":-5,"_241":-7,"_242":-7,"_243":22,"_244":48,"_245":48,"_246":-5,"_247":48,"_248":48,"_249":48,"_250":-5},"ENV",{"_202":203,"_204":205,"_206":16,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Compare

Mergealexandrosgalazoulas96/mainintomewtru/main

Hmain.tsx+335-88