[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_179":180,"_181":182},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","019d2c44-f94f-7250-abff-9097c7fa5169","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\n// --- Configuration ---\nconst FONT_FAMILY = \"'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nconst BASE_COLOR = \"#d63384\"; // Deep pink για UI στοιχεία\nconst CANVAS_BG = \"#0d1117\"; // Πολύ σκούρο μπλε/μαύρο (Night sky feel)\nconst FINAL_MESSAGE_TEXT =\n \"Κάθε λέξη είναι μια πτυχή σου που ομορφαίνει τον κόσμο μου. Ο έρωτάς μας είναι μια ατελείωτη, πολύχρωμη διαδρομή. Σ' αγαπώ.\";\n\n// --- Types ---\ninterface SpiralSegment {\n id: number;\n word: string;\n hash: number;\n hue: number;\n lengthMultiplier: number; // Πόσες στροφές (radians) θα κάνει\n complexity: number; // Τυχαιότητα για τα procedural σύμβολα\n}\n\n// --- Helpers ---\nconst hashString = (str: string): number => {\n let hash = 0;\n if (str.length === 0) return hash;\n for (let i = 0; i < str.length; i++) {\n const char = str.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash |= 0; // Convert to 32bit integer\n }\n return Math.abs(hash);\n};\n\n// --- Main App Component ---\nfunction App() {\n const [inputText, setInputText] = useState(\"\");\n const [spiralSegments, setSpiralSegments] = useState([]);\n const [showFinalMessage, setShowFinalMessage] = useState(false);\n const canvasRef = useRef(null);\n const animationFrameId = useRef();\n const [time, setTime] = useState(0);\n\n // Responsive: Δυναμικός υπολογισμός διαστάσεων canvas\n const updateCanvasSize = useCallback(() => {\n const canvas = canvasRef.current;\n if (canvas) {\n canvas.width = Math.min(600, window.innerWidth * 0.9);\n canvas.height = Math.min(600, window.innerHeight * 0.6);\n }\n }, []);\n\n useEffect(() => {\n updateCanvasSize();\n window.addEventListener(\"resize\", updateCanvasSize);\n return () => window.removeEventListener(\"resize\", updateCanvasSize);\n }, [updateCanvasSize]);\n\n const handleAddSegment = () => {\n const cleaned = inputText.trim().toUpperCase();\n if (cleaned.length === 0) return;\n\n const hash = hashString(cleaned);\n const newSegment: SpiralSegment = {\n id: Date.now(),\n word: cleaned,\n hash: hash,\n hue: hash % 360,\n // Το μήκος (στροφές) εξαρτάται από το μήκος της λέξης\n lengthMultiplier: Math.min(20, 5 + cleaned.length * 1.5),\n complexity: (hash % 100) / 100, // Τυχαιότητα (0-1)\n };\n\n setSpiralSegments((prev) => [...prev, newSegment]);\n setInputText(\"\"); // Καθαρισμός input\n\n if (spiralSegments.length + 1 >= 5) {\n setTimeout(() => setShowFinalMessage(true), 3000); // Δείξε το μήνυμα μετά από 3s\n }\n };\n\n // --- Procedural Spiral Drawing Algorithm (Canvas) ---\n const drawSpiral = (\n ctx: CanvasRenderingContext2D,\n width: number,\n height: number,\n time: number,\n ) => {\n const centerX = width / 2;\n const centerY = height / 2;\n // Responsive κλιμάκωση της σπείρας (Archimedean)\n const spiralA = 2; // initial radius\n const spiralB = 3; // distance multiplier per radian\n\n // Ξεκινάμε από το κέντρο\n let currentR = spiralA;\n let currentAngle = time * 0.001 * (Math.PI / 180); // Πολύ αργή περιστροφή βάσει χρόνου\n\n ctx.save();\n ctx.translate(centerX, centerY);\n\n // Ζωγραφίζουμε κάθε ενότητα που προστέθηκε\n spiralSegments.forEach((segment, segmentIndex) => {\n ctx.beginPath();\n ctx.strokeStyle = `hsl(${segment.hue}, 80%, 65%)`; // Procedural χρώμα\n ctx.lineWidth = 1 +\n Math.sin(time * 0.001 + segment.complexity * Math.PI * 2) * 0.5; // Πάχος γραμμής με pulsation animation\n\n // Υπολογίζουμε πόσες στροφές (radians) θα κάνει αυτή η ενότητα\n const angleMultiplier = segment.lengthMultiplier * Math.PI / 180;\n const stepAngle = (0.5 + segment.complexity * 0.5) * (Math.PI / 180); // Point density\n\n const numSteps = Math.floor(angleMultiplier / stepAngle);\n\n for (let step = 0; step < numSteps; step++) {\n // Υπολογισμός συντεταγμένων\n currentR = spiralA + spiralB * currentAngle;\n const x = currentR * Math.cos(currentAngle);\n const y = currentR * Math.sin(currentAngle);\n\n if (step === 0) {\n ctx.moveTo(x, y);\n } else {\n ctx.lineTo(x, y);\n }\n\n // --- Procedural Branching Patterns (Smart Design) ---\n // Κάθε i βήματα, ζωγραφίζουμε ένα Procedural σύμβολο\n if (\n segmentIndex > 0 &&\n step % Math.floor(20 + segment.complexity * 30) === 0 && step > 0\n ) {\n ctx.save();\n ctx.translate(x, y);\n ctx.rotate(currentAngle + (Math.PI / 2)); // Rotate to align with spiral tangent\n\n // Procedural επιλογή συμβόλου βάσει hash (0=hearts, 1=stars, 2=dots)\n const symbolType = segment.hash % 3;\n ctx.fillStyle = `hsl(${segment.hue}, 90%, 80%, 0.4)`; // Ημιδιαφανές χρώμα\n\n if (symbolType === 0) { // Heart-like curve\n const hr = 5 * (1 - segment.complexity * 0.3);\n ctx.beginPath();\n ctx.ellipse(0, hr, hr, hr * 0.8, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.beginPath();\n ctx.ellipse(0, hr * 1.8, hr * 0.8, hr, Math.PI / 4, 0, Math.PI);\n ctx.fill();\n ctx.beginPath();\n ctx.ellipse(0, hr * 1.8, hr * 0.8, hr, -Math.PI / 4, 0, Math.PI);\n ctx.fill();\n } else if (symbolType === 1) { // Star-like branch\n const sr = 6 * (1 - segment.complexity * 0.3);\n const numPoints = 5 + (segment.hash % 3);\n ctx.beginPath();\n for (let si = 0; si < numPoints * 2; si++) {\n const sat = (si / numPoints / 2) * Math.PI * 2;\n const sir = si % 2 === 0 ? sr : sr * 0.4;\n ctx.lineTo(sir * Math.cos(sat), sir * Math.sin(sat));\n }\n ctx.fill();\n } else { // Multi-dots\n const dr = 4 * (1 - segment.complexity * 0.3);\n const numDots = 3 + (segment.hash % 3);\n for (let di = 0; di < numDots; di++) {\n const dat = (di / numDots) * Math.PI * 2;\n ctx.beginPath();\n ctx.arc(\n dr * 2 * Math.cos(dat),\n dr * 2 * Math.sin(dat),\n dr * 0.5,\n 0,\n Math.PI * 2,\n );\n ctx.fill();\n }\n }\n ctx.restore();\n }\n\n currentAngle += stepAngle; // Προχωράμε στην επόμενη γωνία\n }\n ctx.stroke(); // Ζωγραφίζουμε την ενότητα\n });\n ctx.restore();\n };\n\n // --- Animation Loop ---\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n const animate = (timestamp: number) => {\n setTime(timestamp);\n // Καθαρισμός canvas και σχεδίαση background\n ctx.fillStyle = CANVAS_BG;\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n drawSpiral(ctx, canvas.width, canvas.height, timestamp);\n\n animationFrameId.current = requestAnimationFrame(animate);\n };\n\n animationFrameId.current = requestAnimationFrame(animate);\n\n return () => {\n if (animationFrameId.current) {\n cancelAnimationFrame(animationFrameId.current);\n }\n };\n }, [spiralSegments]); // Run once and whenever spiralSegments change\n\n return (\n

Ο Ελικοειδής Δρόμος μας ✨

\n Γράψε μια λέξη που σε εκφράζει και δες το δρόμο μας να ξετυλίγεται...\n

\n\n

\n setInputText(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleAddSegment()}\n placeholder=\"π.χ. ΑΓΑΠΗ, ΓΕΛΙΟ, ΖΩΗ\"\n style={styles.input}\n maxLength={20}\n />\n \n

\n\n {showFinalMessage && (\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: \"#e2e8f0\", // Light slate gray\n margin: 0,\n padding: 0,\n minHeight: \"100vh\",\n backgroundColor: \"#161b22\", // Dark gray\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n overflowX: \"hidden\",\n },\n header: {\n textAlign: \"center\",\n padding: \"30px 20px\",\n width: \"100%\",\n },\n title: {\n fontSize: \"28px\",\n color: BASE_COLOR,\n margin: \"0 0 10px 0\",\n fontWeight: \"700\",\n letterSpacing: \"2px\",\n textTransform: \"uppercase\",\n },\n subtitle: {\n fontSize: \"14px\",\n color: \"#888\",\n margin: 0,\n fontStyle: \"italic\",\n padding: \"0 20px\",\n },\n main: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"20px\",\n flex: 1,\n padding: \"20px 0\",\n },\n canvas: {\n background: CANVAS_BG,\n borderRadius: \"20px\",\n boxShadow: `0 10px 30px rgba(214, 51, 132, 0.2)`,\n border: `2px solid ${BASE_COLOR}`,\n cursor: \"default\",\n },\n controls: {\n display: \"flex\",\n gap: \"10px\",\n width: \"90%\",\n maxWidth: \"400px\",\n padding: \"10px\",\n background: \"rgba(255,255,255,0.05)\",\n borderRadius: \"50px\",\n backdropFilter: \"blur(5px)\",\n boxShadow: \"0 4px 15px rgba(0,0,0,0.1)\",\n },\n input: {\n flex: 1,\n padding: \"12px 20px\",\n fontSize: \"16px\",\n border: \"1px solid #444\",\n backgroundColor: \"rgba(255,255,255,0.05)\",\n color: \"#e2e8f0\",\n borderRadius: \"50px\",\n outline: \"none\",\n fontFamily: FONT_FAMILY,\n textTransform: \"uppercase\",\n transition: \"border-color 0.3s\",\n },\n button: {\n padding: \"12px 20px\",\n fontSize: \"16px\",\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.3s\",\n boxShadow: `0 4px 10px rgba(214, 51, 132, 0.4)`,\n },\n footer: {\n textAlign: \"center\",\n padding: \"30px 20px 50px 20px\",\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n animation: \"fadeInUp 1s ease-out forwards\",\n },\n finalCard: {\n backgroundColor: \"white\",\n padding: \"2rem\",\n borderRadius: \"2rem\",\n textAlign: \"center\",\n boxShadow: `0 15px 40px rgba(214, 51, 132, 0.2)`,\n width: \"90%\",\n maxWidth: \"380px\",\n },\n finalHeartEmoji: {\n fontSize: \"50px\",\n marginBottom: \"1rem\",\n animation: \"heartBeat 1.5s infinite\",\n },\n finalText: {\n fontSize: \"16px\",\n color: \"#4a4a4a\", // Dark gray for card text\n lineHeight: \"1.8\",\n fontStyle: \"italic\",\n margin: 0,\n },\n};\n\n// --- Client/Server Setup & Global Styles ---\nfunction client() {\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n body { margin: 0; }\n button:hover { background-color: #bc2a72 !important; transform: scale(1.05); }\n button:active { transform: scale(0.95); }\n \n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes heartBeat {\n 0% { transform: scale(1); }\n 14% { transform: scale(1.1); }\n 28% { transform: scale(1); }\n 42% { transform: scale(1.1); }\n 70% { transform: scale(1); }\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}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\n// --- Configuration & Content ---\nconst GOOGLE_FONT_URL =\n \"https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap\";\nconst FONT_FAMILY = \"'Dancing Script', cursive\";\nconst PARTICLE_COLOR = \"#ff4d6d\"; // Deep pink\nconst PARTICLE_SIZE = 1.8;\nconst TEXT_SIZE = 70; // Σε pixels, responsive\n\n// *** ΤΑ ΜΗΝΥΜΑΤΑ ΣΟΥ - Άλλαξε τα εδώ! ***\nconst messages = [\n \"Σ' αγαπώ\",\n \"Είσαι η ζωή μου\",\n \"Το γέλιο σου...\",\n \"Η ηρεμία μου\",\n \"Μόνο εσύ\",\n \"Για πάντα\",\n \"❤️\", // Το τελευταίο σύμβολο\n];\n\n// --- Physics Constants ---\nconst F_MOUSE_RADIUS = 100; // Ακτίνα αλληλεπίδρασης με το δάχτυλο\nconst F_MOUSE_STRENGTH = 0.5; // Δύναμη απώθησης\nconst F_RETRACT_STRENGTH = 0.08; // Δύναμη έλξης προς το στόχο\nconst F_FRICTION = 0.94; // Τριβή (πόσο γρήγορα σταματάνε)\n\n// --- Particle Class (The complex part) ---\nclass Particle {\n x: number;\n y: number;\n targetX: number;\n targetY: number;\n vx: number;\n vy: number;\n color: string;\n size: number;\n baseX: number; // Αρχική θέση για το floating state\n baseY: number;\n\n constructor(x: number, y: number, color: string, size: number) {\n this.x = x;\n this.y = y;\n this.baseX = x;\n this.baseY = y;\n this.targetX = x;\n this.targetY = y;\n this.vx = (Math.random() - 0.5) * 4; // Τυχαία αρχική ταχύτητα\n this.vy = (Math.random() - 0.5) * 4;\n this.color = color;\n this.size = size;\n }\n\n // Ενημέρωση θέσης βάσει φυσικής\n update(mouseX: number | null, mouseY: number | null, isFormingText: boolean) {\n // 1. Έλξη προς το στόχο (αν σχηματίζουμε κείμενο)\n if (isFormingText) {\n const dx = this.targetX - this.x;\n const dy = this.targetY - this.y;\n this.vx += dx * F_RETRACT_STRENGTH;\n this.vy += dy * F_RETRACT_STRENGTH;\n } else {\n // Floating State: Απλή κίνηση γύρω από την αρχική θέση\n this.vx += (this.baseX - this.x) * 0.001 + (Math.random() - 0.5) * 0.1;\n this.vy += (this.baseY - this.y) * 0.001 + (Math.random() - 0.5) * 0.1;\n }\n\n // 2. Απώθηση από το δάχτυλο (αν υπάρχει)\n if (mouseX !== null && mouseY !== null) {\n const dx = mouseX - this.x;\n const dy = mouseY - this.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n if (distance < F_MOUSE_RADIUS) {\n const force = (F_MOUSE_RADIUS - distance) / F_MOUSE_RADIUS;\n this.vx -= dx * force * F_MOUSE_STRENGTH;\n this.vy -= dy * force * F_MOUSE_STRENGTH;\n }\n }\n\n // 3. Εφαρμογή τριβής και ενημέρωση θέσης\n this.vx *= F_FRICTION;\n this.vy *= F_FRICTION;\n this.x += this.vx;\n this.y += this.vy;\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = this.color;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n }\n}\n\n// --- Main App Component ---\nfunction App() {\n const canvasRef = useRef(null);\n const contextRef = useRef(null);\n const particlesRef = useRef([]);\n const animationFrameId = useRef();\n const [currentMessageIndex, setCurrentMessageIndex] = useState(0);\n const [isFormingText, setIsFormingText] = useState(false);\n\n // Θέση δαχτύλου/ποντικιού\n const mousePos = useRef({\n x: null as number | null,\n y: null as number | null,\n });\n\n // --- responsive Text Handling (The complex part) ---\n const getTextPoints = useCallback(\n (\n text: string,\n width: number,\n height: number,\n ): { x: number; y: number }[] => {\n const ctx = contextRef.current;\n if (!ctx) return [];\n\n // 1. Ζωγραφίζουμε το κείμενο σε έναν κρυφό Canvas για να πάρουμε τα pixel\n ctx.clearRect(0, 0, width, height);\n ctx.fillStyle = \"white\";\n const dynamicTextSize = Math.min(\n TEXT_SIZE,\n width / (text.length > 5 ? text.length * 0.4 : 1.5),\n );\n ctx.font = `700 ${dynamicTextSize}px ${FONT_FAMILY}`;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(text, width / 2, height / 2);\n\n // 2. Παίρνουμε τα δεδομένα των pixel\n const imageData = ctx.getImageData(0, 0, width, height).data;\n const points = [];\n const step = 4; // Πόσο συχνά παίρνουμε pixel (step=4 σημασία παίρνουμε 1 στα 16 pixel)\n\n // 3. Σαρώνουμε τα pixel και κρατάμε αυτά που είναι \"άσπρα\" (κείμενο)\n for (let y = 0; y < height; y += step) {\n for (let x = 0; x < width; x += step) {\n const index = (y * width + x) * 4;\n const alpha = imageData[index + 3];\n if (alpha > 128) { // Αν το pixel είναι αρκετά ορατό\n points.push({ x, y });\n }\n }\n }\n return points;\n },\n [],\n );\n\n // --- Initialization & Animation Loop ---\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n contextRef.current = ctx;\n\n const updateCanvasSize = () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n // Αρχικοποίηση particles (π.χ. 3000 σωματίδια)\n particlesRef.current = Array.from({ length: 3000 }).map(() =>\n new Particle(\n Math.random() * canvas.width,\n Math.random() * canvas.height,\n PARTICLE_COLOR,\n PARTICLE_SIZE,\n )\n );\n };\n updateCanvasSize();\n window.addEventListener(\"resize\", updateCanvasSize);\n\n // --- Animation Loop ---\n const animate = () => {\n ctx.fillStyle = \"rgba(10, 15, 25, 0.2)\"; // Σκούρο background με trail effect\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n particlesRef.current.forEach((p) => {\n p.update(mousePos.current.x, mousePos.current.y, isFormingText);\n p.draw(ctx);\n });\n\n animationFrameId.current = requestAnimationFrame(animate);\n };\n animate();\n\n return () => {\n if (animationFrameId.current) {\n cancelAnimationFrame(animationFrameId.current);\n }\n window.removeEventListener(\"resize\", updateCanvasSize);\n };\n }, [isFormingText]); // Επανεκτέλεση όταν αλλάζει η κατάσταση του κειμένου\n\n // --- Logic για την εναλλαγή μηνυμάτων ---\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n // Λειτουργία για τον σχηματισμό της επόμενης λέξης\n const cycleMessages = () => {\n // 1. Παίρνουμε τα σημεία για την τρέχουσα λέξη\n const points = getTextPoints(\n messages[currentMessageIndex],\n canvas.width,\n canvas.height,\n );\n if (points.length === 0) return;\n\n // 2. Αναθέτουμε τυχαία ένα σημείο-στόχο σε κάθε σωματίδιο\n particlesRef.current.forEach((p) => {\n const targetPoint = points[Math.floor(Math.random() * points.length)];\n p.targetX = targetPoint.x;\n p.targetY = targetPoint.y;\n });\n\n // 3. Ενεργοποιούμε το σχηματισμό κειμένου\n setIsFormingText(true);\n\n // 4. Μετά από 3 δευτερόλεπτα, διαλύουμε το κείμενο\n setTimeout(() => {\n setIsFormingText(false);\n // Προετοιμασία για το επόμενο μήνυμα\n setCurrentMessageIndex((prev) => (prev + 1) % messages.length);\n }, 3000); // Χρόνος που μένει η λέξη σχηματισμένη\n };\n\n // Ξεκινάμε τη λούπα (κάθε 6 δευτερόλεπτα: 3s formation + 3s floating)\n const intervalId = setInterval(cycleMessages, 6000);\n cycleMessages(); // Εκτέλεση αμέσως την πρώτη φορά\n\n return () => clearInterval(intervalId);\n }, [currentMessageIndex, getTextPoints]);\n\n // --- Mouse/Touch Events ---\n const handleMove = (e: React.MouseEvent | React.TouchEvent) => {\n let clientX, clientY;\n if (\"touches\" in e) {\n clientX = e.touches[0].clientX;\n clientY = e.touches[0].clientY;\n } else {\n clientX = e.clientX;\n clientY = e.clientY;\n }\n mousePos.current = { x: clientX, y: clientY };\n };\n\n const handleEnd = () => {\n mousePos.current = { x: null, y: null };\n };\n\n return (\n

\n \n {/* Προαιρετικό: Ένα μόνιμο, διακριτικό overlay */}\n

✨ (Άγγιξε την οθόνη) ✨

\n );\n}\n\n// --- CSS Styles (In JavaScript) ---\nconst styles: { [key: string]: React.CSSProperties } = {\n container: {\n width: \"100vw\",\n height: \"100vh\",\n margin: 0,\n padding: 0,\n backgroundColor: \"#0a0f19\", // Πολύ σκούρο μπλε\n overflow: \"hidden\",\n position: \"relative\",\n touchAction: \"none\", // Απενεργοποίηση zoom/scroll στο κινητό\n userSelect: \"none\",\n },\n canvas: {\n display: \"block\",\n cursor: \"default\",\n },\n overlay: {\n position: \"absolute\",\n bottom: \"20px\",\n left: \"50%\",\n transform: \"translateX(-50%)\",\n color: \"rgba(255, 255, 255, 0.3)\",\n fontFamily: \"'Segoe UI', sans-serif\",\n fontSize: \"12px\",\n pointerEvents: \"none\",\n textAlign: \"center\",\n },\n};\n\n// --- Client / Server Setup (Val Town) ---\nfunction client() {\n // Προσθήκη Google Font στο head\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n @import url('${GOOGLE_FONT_URL}');\n body { margin: 0; }\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}","createdAt",["D",1774565489120],"branchVersion","branchId","59cb80ee-2963-11f1-b23e-42dde27851f2","id","59c5c974-2963-11f1-b23e-42dde27851f2","spiral",["D",1774564210880],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c201a-c6d5-73df-9c72-e5a567918c20","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c201a-c6d5-73df-9c72-eb12f876751d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":45,"_97":98},"isOwned",14,"main","projectId","forkedBranchId","fdd9b22e-27b0-11f0-aecd-569c3dd06744","forkedBranchVersion",11,"forkedProjectPrivacy","forkedProjectId","fdd966ca-27b0-11f0-aecd-569c3dd06744","forkedProjectOrgId","1ea2ca52-aecd-4993-8c60-cb61483dff1b","projectName","userHandle","alexandrosgalazoulas96","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5ODYyMzhDV3h6QnVKc2dNaFN0akxjMUJSaCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":175,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":176,"_79":177,"_81":178,"_83":25},"tree",[166,167],"files",[166,167],"counts",{"_156":61,"_157":152,"_158":61,"_159":160,"_161":162},"contents",[140,141],"upstreamProject",{"_43":93,"_32":137,"_52":-5,"_53":-5,"_49":50,"_77":138},"upstreamBranch",{"_43":88,"_38":131,"_132":133,"_32":85,"_86":93,"_13":90,"_87":-5,"_89":-5,"_134":135,"_47":-5,"_83":25,"_49":50,"_97":136,"_62":95,"_96":137},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],"updatedAt",["D",1739338420215],"lockfileKey","1767110342515-esm.town_v_mewtru_valentine@11-main","mewtru","valentine",{"_99":136,"_106":139},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_43":149,"_32":150,"_30":151,"_143":-5,"_41":42,"_40":152,"_144":57,"_38":153,"_13":61,"_33":20,"_35":154,"_24":25,"_147":-5,"_27":155},{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":145,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_27":148},"539c62f8-2966-11f1-b3dc-42dde27851f2","parentId","latest",["D",1774565489120],2,"label",[28],"59cf3900-2963-11f1-b23e-42dde27851f2","README.md","019d2c44-f94f-7250-abff-8f0e7fbb22dc",1,["D",1774564210880],"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.",[150],"pulls","branches","forks","envVars",{"_163":61,"_165":61},"connections",{"_163":61,"_164":61},"count","unfilledCount","emptyCount",{"_43":149,"_32":150,"_30":151,"_143":-5,"_41":42,"_40":152,"_144":57,"_38":172,"_13":61,"_33":20,"_35":154,"_24":25,"_147":-5,"_169":173,"_27":174},{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":168,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_169":170,"_27":171},["D",1774565489120],"children",[],[28],["D",1774564210880],[],[150],["D",1774564210880],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":45,"_97":98},"ctx",{"_77":-5,"_128":212,"_213":214,"_215":216,"_217":25,"_218":25,"_219":25,"_220":57,"_221":-5,"_222":-7,"_223":-7,"_224":61,"_225":25,"_226":25,"_227":-5,"_228":25,"_229":25,"_230":25,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":85,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"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"]

Diff · v3