Ο Πάπυρος της Αγάπης μας

Κάνε scroll για πάντα... ❤️

\n\n

\n {messages.map((msg, index) => {\n // Αν είναι το τελευταίο μήνυμα, βάζουμε το ref\n const isLast = index === messages.length - 1;\n return (\n \n 💖\n

{msg.content}

\n );\n })}\n \n\n \n \n );\n}\n\n// --- CSS Styles (In JavaScript) ---\nconst styles: { [key: string]: React.CSSProperties } = {\n container: {\n fontFamily: FONT_FAMILY,\n color: \"#4a4a4a\",\n margin: 0,\n padding: 0,\n minHeight: \"100vh\",\n // Αργό, soft animation στο background\n animation: \"backgroundChange 15s infinite alternate ease-in-out\",\n overflowX: \"hidden\", // Για να μην έχουμε οριζόντιο scroll από τις καρδιές\n },\n header: {\n textAlign: \"center\",\n padding: \"60px 20px\",\n borderBottom: \"1px solid rgba(255,182,193, 0.3)\",\n background: \"rgba(255,255,255, 0.5)\",\n backdropFilter: \"blur(5px)\", // Εφέ θολώματος\n },\n title: {\n fontSize: \"48px\",\n color: \"#d63384\", // Deep pink\n margin: \"0 0 10px 0\",\n fontWeight: \"700\",\n },\n subtitle: {\n fontSize: \"18px\",\n color: \"#888\",\n margin: 0,\n fontStyle: \"italic\",\n },\n main: {\n maxWidth: \"600px\",\n margin: \"40px auto\",\n padding: \"0 20px\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"30px\",\n },\n messageCard: {\n background: \"#fff\",\n padding: \"30px\",\n borderRadius: \"20px\",\n boxShadow: \"0 10px 25px rgba(255,182,193, 0.2)\",\n display: \"flex\",\n alignItems: \"center\",\n gap: \"20px\",\n border: \"1px solid rgba(255,182,193, 0.1)\",\n opacity: 0, // Για το animation\n transform: \"translateY(20px)\", // Για το animation\n },\n heartIcon: {\n fontSize: \"30px\",\n },\n messageContent: {\n fontSize: \"22px\",\n margin: 0,\n lineHeight: \"1.4\",\n flex: 1,\n },\n footer: {\n textAlign: \"center\",\n padding: \"40px 20px\",\n color: \"#aaa\",\n fontStyle: \"italic\",\n },\n};\n\n// --- Client/Server Setup & Global Styles ---\n\n// Δημιουργία ιπτάμενης καρδιάς (Vanila JS)\nfunction createFloatingHeart() {\n const heart = document.createElement(\"div\");\n heart.innerHTML = \"❤️\";\n heart.style.position = \"fixed\";\n heart.style.bottom = \"-50px\"; // Ξεκινάει κάτω από την οθόνη\n heart.style.left = Math.random() * 100 + \"vw\"; // Τυχαία οριζόντια θέση\n heart.style.fontSize = Math.random() * 20 + 10 + \"px\"; // Τυχαίο μέγεθος\n heart.style.opacity = (Math.random() * 0.5 + 0.2).toString(); // Τυχαία ημιδιαφάνεια\n heart.style.pointerEvents = \"none\"; // Δεν εμποδίζει το click\n heart.style.zIndex = \"1000\";\n heart.style.animation = `floatUp ${Math.random() * 3 + 2}s linear forwards`; // Τυχαία ταχύτητα\n\n document.body.appendChild(heart);\n\n // Αφαίρεση του στοιχείου μετά το animation\n setTimeout(() => {\n heart.remove();\n }, 5000);\n}\n\nfunction client() {\n // Προσθήκη CSS animations και Google Font στο head\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n @import url('${GOOGLE_FONT_URL}');\n \n body { margin: 0; }\n \n /* Animation για το Background */\n @keyframes backgroundChange {\n 0% { background-color: #fff0f5; } /* Lavender Blush */\n 50% { background-color: #fff5ee; } /* Seashell */\n 100% { background-color: #fdf2f8; } /* Pink 50 */\n }\n\n /* Animation για την εμφάνιση των καρτών */\n .message-card {\n animation: fadeInSlideUp 0.6s ease-out forwards;\n }\n\n @keyframes fadeInSlideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* Animation για τις ιπτάμενες καρδιές */\n @keyframes floatUp {\n to {\n transform: translateY(-120vh) translateX(${\n Math.random() > 0.5 ? \"50px\" : \"-50px\"\n });\n opacity: 0;\n }\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 { headers: { \"content-type\": \"text/html\" } },\n );\n}","deleted","label",[103],"permalink","https://www.val.town/x/alexandrosgalazoulas96/papiros/code/main.tsx","extension","actionData","errors"]