Our 6 Months ❤️

[{"_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",4,"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","019eb8eb-ce92-70ae-9926-e3169589de20","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 useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\n// ==========================================\n// 1. ΤΑ ΔΕΔΟΜΕΝΑ ΣΟΥ (Βάλε τα δικά σου links!)\n// ==========================================\n// Προσοχή: Για τη μουσική, χρειάζεσαι links που να καταλήγουν σε .mp3\n// Για τις εικόνες, βάλε τα links όπως τα έβαζες στο άλμπουμ.\nconst SLIDES = [\n {\n image: \"https://i.postimg.cc/zBtXBdTs/20260418-131101.jpg\", // Βάλε εδώ το δικό σου link εικόνας\n audio:\n \"https://actions.google.com/sounds/v1/water/waves_crashing_on_rock_beach.ogg\", // Βάλε το δικό σου mp3/ogg link\n top: \"ΕΤΟΙΜΑΣΟΥ...\",\n main: \"Our 6 Months\\nWrapped\",\n bottom: \"Ενεργοποίησε τον ήχο και απόλαυσε τη διαδρομή μας...\",\n },\n {\n image: \"https://i.postimg.cc/tTC490nf/20260131-020542.jpg\",\n audio: \"https://actions.google.com/sounds/v1/ambiences/coffee_shop.ogg\",\n top: \"ΑΣ ΔΟΥΜΕ ΤΑ ΝΟΥΜΕΡΑ\",\n main: \"180 Μέρες\",\n bottom: \"από εκείνο το πάρτι στις 13 Δεκεμβρίου...\",\n },\n {\n image: \"https://i.postimg.cc/HW3dTPpj/20260306-165700.avif\",\n audio: \"https://actions.google.com/sounds/v1/weather/rain_heavy_loud.ogg\",\n top: \"ΚΑΙ ΠΙΟ ΣΥΓΚΕΚΡΙΜΕΝΑ...\",\n main: \"3 Μήνες\",\n bottom: \"επίσημα μαζί. Το καλύτερο τρίμηνο ever.\",\n },\n {\n image: \"https://i.postimg.cc/ydQYdfF8/20260509-053115.jpg\",\n audio:\n \"https://actions.google.com/sounds/v1/water/waves_crashing_on_rock_beach.ogg\",\n top: \"ΤΟ ΑΓΑΠΗΜΕΝΟ ΜΟΥ NOTIFICATION\",\n main: \"Τα μηνύματά\\nσου\",\n bottom: \"Δεν υπάρχει τίποτα που να μου φτιάχνει πιο γρήγορα τη μέρα.\",\n },\n {\n image: \"https://i.postimg.cc/zBtXBdTs/20260418-131101.jpg\",\n audio: \"https://actions.google.com/sounds/v1/ambiences/coffee_shop.ogg\",\n top: \"ΣΥΝΟΛΙΚΑ ΧΑΜΟΓΕΛΑ ΠΟΥ ΜΟΥ ΧΑΡΙΣΕΣ\",\n main: \"Άπειρα.\",\n bottom: \"Κυριολεκτικά, έχασα το μέτρημα.\",\n },\n {\n image: \"https://i.postimg.cc/tTC490nf/20260131-020542.jpg\",\n audio: \"https://actions.google.com/sounds/v1/weather/rain_heavy_loud.ogg\",\n top: \"ΟΜΩΣ ΤΟ ΠΙΟ ΣΗΜΑΝΤΙΚΟ ΝΟΥΜΕΡΟ...\",\n main: \"Είναι το 1.\",\n bottom:\n \"Γιατί είσαι η 1 και μοναδική για μένα. Χαρούμενη επέτειο αγάπη μου! ❤️\",\n },\n];\n\nconst SLIDE_DURATION = 6000; // 6000ms = 6 δευτερόλεπτα το κάθε slide\n\n// ==========================================\n// 2. ΕΦΑΡΜΟΓΗ REACT\n// ==========================================\nfunction App() {\n const [hasStarted, setHasStarted] = useState(false);\n const [currentSlide, setCurrentSlide] = useState(0);\n const [progress, setProgress] = useState(0);\n const [isPaused, setIsPaused] = useState(false);\n\n const audioRef = useRef(null);\n const pressStartRef = useRef(0);\n const animationRef = useRef(null);\n\n // Διαχείριση Audio\n useEffect(() => {\n if (hasStarted && audioRef.current) {\n audioRef.current.src = SLIDES[currentSlide].audio;\n audioRef.current.load();\n if (!isPaused) {\n audioRef.current.play().catch((e) =>\n console.log(\"Audio play blocked\", e)\n );\n }\n }\n }, [currentSlide, hasStarted]);\n\n useEffect(() => {\n if (audioRef.current) {\n if (isPaused) {\n audioRef.current.pause();\n } else if (hasStarted) {\n audioRef.current.play().catch((e) =>\n console.log(\"Audio play blocked\", e)\n );\n }\n }\n }, [isPaused]);\n\n // Κινητήρας Progress Bar\n useEffect(() => {\n if (!hasStarted || isPaused) return;\n\n let startTime = Date.now() - (progress / 100) * SLIDE_DURATION;\n\n const updateProgress = () => {\n const now = Date.now();\n const newProgress = ((now - startTime) / SLIDE_DURATION) * 100;\n\n if (newProgress >= 100) {\n if (currentSlide < SLIDES.length - 1) {\n setCurrentSlide((prev) => prev + 1);\n setProgress(0);\n } else {\n setProgress(100);\n setIsPaused(true); // Σταματάει στο τελευταίο slide\n }\n } else {\n setProgress(newProgress);\n animationRef.current = requestAnimationFrame(updateProgress);\n }\n };\n\n animationRef.current = requestAnimationFrame(updateProgress);\n\n return () => {\n if (animationRef.current) cancelAnimationFrame(animationRef.current);\n };\n }, [hasStarted, isPaused, currentSlide, progress]);\n\n // Διαχείριση Tap vs Hold (Κλικ vs Κράτημα)\n const handlePointerDown = () => {\n setIsPaused(true);\n pressStartRef.current = Date.now();\n };\n\n const handlePointerUp = (direction: \"left\" | \"right\") => {\n setIsPaused(false);\n const pressDuration = Date.now() - pressStartRef.current;\n\n // Αν το κράτησε κάτω από 250ms, θεωρείται \"Tap\" (Αλλαγή slide)\n if (pressDuration < 250) {\n if (direction === \"left\" && currentSlide > 0) {\n setCurrentSlide((prev) => prev - 1);\n setProgress(0);\n } else if (direction === \"right\" && currentSlide < SLIDES.length - 1) {\n setCurrentSlide((prev) => prev + 1);\n setProgress(0);\n }\n }\n };\n\n // Αρχική Οθόνη (Για να επιτρέψει ο browser τη μουσική)\n if (!hasStarted) {\n return (\n

🎧

\n \n Έτοιμη για μια μικρή αναδρομή;\n \n \n (Άνοιξε τον ήχο του κινητού σου)\n

\n {\n setHasStarted(true);\n setProgress(0);\n }}\n >\n ΞΕΚΙΝΑ ΤΗΝ ΕΜΠΕΙΡΙΑ\n \n

\n );\n }\n\n const slide = SLIDES[currentSlide];\n\n return (\n

\n {/* Background Image με Dark Overlay για να διαβάζονται τα γράμματα */}\n \n

\n\n {/* Κρυφό Audio Player */}\n

Diff · v4