[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_189":190,"_191":192},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":84,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":57,"_126":-5,"_127":-5,"_128":129},"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",201,"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","019c4abc-9f14-7339-ac0d-371546a4f848","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 useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\n/* ═══════════════════════════════════════════════════════════════\n ✏️ AQUÍ EDITAS TODO. No necesitas tocar nada más abajo.\n ═══════════════════════════════════════════════════════════════ */\n\nconst CONFIG = {\n apodo: \"mi bomnita\",\n tuNombre: \"Obed\",\n titulo: \"Feliz día de la novia\",\n subtitulo: \"Para mi niña\",\n\n // Desde el 16 de mayo de 2025, 3:30 pm\n fechaInicio: \"2025-05-16T15:30:00\",\n\n // Música opcional (MP3 directo). Deja \"\" si no quieres.\n musicaUrl: \"\",\n\n gifSecreto: \"https://media.tenor.com/76BaX0eo304AAAAi/kitty-kitty-heart.gif\",\n textoSecreto: \"Bechito ❤️\",\n\n notaCorta: [\n \"Hola mi niña.\",\n \"Te hice este pequeño detalle para que fuera algo mejor que una simple historia.\",\n \"Ve bajando despacio pechocha.\",\n ],\n\n // ── FOTOS DE LOS DOS ──────────────────────────────────────────\n // Pega el enlace directo de cada imagen en \"url\".\n // El comentario te dice qué archivo va en cada lugar.\n fotos: [\n {\n url: \"https://i.postimg.cc/gjmSWwCV/image-(3).jpg\",\n nota: \"Cuando nos quedabamos horas juntos en horas libres\",\n }, // image__3_.jpg\n {\n url: \"https://i.postimg.cc/h41Z0rmr/image-(4).jpg\",\n nota: \"Pololos felices\",\n }, // image__4_.jpg\n {\n url: \"https://i.postimg.cc/wxQ4kVNW/image-(5).jpg\",\n nota: \"Pololos serios\",\n }, // image__5_.jpg\n {\n url: \"https://i.postimg.cc/50w7T5Rd/20260312-131621.jpg\",\n nota: \"Cuando nos ibamos a la ENALLT\",\n }, // 20260312_131621.jpg\n {\n url: \"https://i.postimg.cc/JnwYpYKN/IMG-20260228-WA0061.jpg\",\n nota: \"Cuando no conseguimos dinoquesadillas pero si birria\",\n }, // IMG-20260228-WA0061.jpg\n {\n url: \"https://i.postimg.cc/hj9y683H/20251129-212757.jpg\",\n nota: \"Esa noche en CU\",\n }, // 20251129_212757.jpg\n {\n url: \"https://i.postimg.cc/d1MN5NnX/retouch-2025110118330921.jpg\",\n nota: \"Pololos disfrazados\",\n }, // retouch_2025110118330921.jpg\n {\n url: \"https://i.postimg.cc/7hwskCFC/image-(1).jpg\",\n nota: \"Pololos navideños\",\n }, // image__1_.jpg\n {\n url: \"https://i.postimg.cc/FzNW4fMS/image-(2).jpg\",\n nota: \"Tamos trompudos o queremos becho\",\n }, // image__2_.jpg\n {\n url: \"https://i.postimg.cc/nzvRgKPc/20260409-160157.jpg\",\n nota: \"Nuestra primer convención ñoña\",\n }, // 20260409_160157.jpg\n {\n url: \"https://i.postimg.cc/qq4bTtPg/20260516-113644.jpg\",\n nota: \"Nuestro primer aniversario\",\n }, // 20260516_113644.jpg\n {\n url: \"https://i.postimg.cc/j2tgbWp5/20260516-113711.jpg\",\n nota: \"Un añito de pololos\",\n }, // 20260516_113711.jpg\n ],\n\n // ── FOTOS DE ELLA (la tira de abajo) ──────────────────────────\n retratos: [\n {\n url: \"https://i.postimg.cc/RFrpgpGK/IMG-20260730-143856-792.webp\",\n nota: \"esta carita toda pechocha\",\n }, // IMG_20260730_143856_792.webp\n {\n url: \"https://i.postimg.cc/jjnkQY6M/IMG-20251015-WA0074.jpg\",\n nota: \"follable\",\n }, // IMG-20251015-WA0074.jpg\n {\n url: \"https://i.postimg.cc/858XZXwh/IMG-20251222-WA0012.jpg\",\n nota: \"sin ver nada por el sol\",\n }, // IMG-20251222-WA0012.jpg\n {\n url: \"https://i.postimg.cc/Y91nZNyZ/20260211-121959.jpg\",\n nota: \"ternurin\",\n }, // 20260211_121959.jpg\n {\n url: \"https://i.postimg.cc/3rFfZBG9/IMG-20250224-125200-150.webp\",\n nota: \"guapota\",\n }, // IMG_20250224_125200_150.webp\n {\n url: \"https://i.postimg.cc/0NKHd1G0/IMG-20250505-162706-591.webp\",\n nota: \"ta trompuda o quiere becho\",\n }, // IMG_20250505_162706_591.webp\n {\n url: \"https://i.postimg.cc/zfHPSYwj/IMG-20250811-114144-917.webp\",\n nota: \"follable x2\",\n }, // IMG_20250811_114144_917.webp\n {\n url: \"https://i.postimg.cc/fL4q8q5Y/IMG-20250923-165016-737.webp\",\n nota: \"preciosa\",\n }, // IMG_20250923_165016_737.webp\n ],\n\n razones: [\n \"Por tu bonita sonrisa y por cómo te ríes.\",\n \"Porque contigo hasta lo aburrido se vuelve divertido.\",\n \"Por lo hiperatctiva que te pones cuando te gusta algo.\",\n \"Porque me escuchas de verdad, me apoyas y se siente mucho el amor\",\n \"Por tu manera de amar toda bonita\",\n \"Porque me haces querer ser una mejor versión de mí.\",\n \"Porque tas bien follable pero al mismo tiempo te ves como tern.\",\n \"Porque contigo se me hace fácil ser yo, sin fingir nada.\",\n ],\n};\n\n/* ═══════════════════════════════════════════════════════════════\n De aquí para abajo ya es puro código.\n ═══════════════════════════════════════════════════════════════ */\n\nfunction Sobre({ abierto }: any) {\n return (\n \n );\n}\n\nfunction SelloMini({ className }: any) {\n return (\n \n );\n}\n\nfunction MarcoVacio() {\n return (\n

\n \n Aquí va la foto\n

\n );\n}\n\nfunction Confeti() {\n const piezas = useMemo(\n () =>\n Array.from({ length: 16 }).map((_, i) => ({\n id: i,\n x: Math.random() * 100,\n delay: Math.random() * 16,\n dur: 16 + Math.random() * 14,\n size: 5 + Math.random() * 6,\n op: 0.14 + Math.random() * 0.18,\n color: [\"#A63A4E\", \"#D98A94\", \"#26313F\", \"#C9AE8B\"][i % 4],\n })),\n [],\n );\n return (\n

\n {piezas.map((p) => (\n \n ))}\n

\n );\n}\n\nfunction useRevelar(activo: boolean) {\n useEffect(() => {\n if (!activo) return;\n const els = Array.from(document.querySelectorAll(\".rev\"));\n const io = new IntersectionObserver(\n (entries) => {\n entries.forEach((e) => {\n if (e.isIntersecting) {\n e.target.classList.add(\"vis\");\n io.unobserve(e.target);\n }\n });\n },\n { threshold: 0.1, rootMargin: \"0px 0px -40px 0px\" },\n );\n els.forEach((el) => io.observe(el));\n return () => io.disconnect();\n }, [activo]);\n}\n\nfunction Contador() {\n const [ahora, setAhora] = useState(() => Date.now());\n useEffect(() => {\n const t = setInterval(() => setAhora(Date.now()), 1000);\n return () => clearInterval(t);\n }, []);\n\n const inicio = new Date(CONFIG.fechaInicio).getTime();\n const diff = Math.max(0, ahora - inicio);\n const seg = Math.floor(diff / 1000);\n const dias = Math.floor(seg / 86400);\n const horas = Math.floor((seg % 86400) / 3600);\n const mins = Math.floor((seg % 3600) / 60);\n const segs = seg % 60;\n\n const anios = Math.floor(dias / 365);\n const resto = dias % 365;\n const frase = anios > 0\n ? (anios === 1 ? \"Un año\" : anios + \" años\") +\n (resto > 0 ? \" y \" + resto + (resto === 1 ? \" día\" : \" días\") : \"\")\n : dias + (dias === 1 ? \" día\" : \" días\");\n\n const items = [\n { n: dias, l: dias === 1 ? \"día\" : \"días\" },\n { n: horas, l: horas === 1 ? \"hora\" : \"horas\" },\n { n: mins, l: \"min\" },\n { n: segs, l: \"seg\" },\n ];\n\n return (\n <>\n

\n {items.map((it, i) => (\n

\n {String(it.n).padStart(2, \"0\")}\n {it.l}\n

\n ))}\n

{frase} juntos, y siguen contando

\n \n );\n}\n\nfunction Polaroid({ foto, i, onAbrir }: any) {\n const rots = [-2.4, 1.8, -1.2, 2.6, -3, 1.4];\n return (\n \n foto.url && onAbrir(foto)}\n role={foto.url ? \"button\" : undefined}\n tabIndex={foto.url ? 0 : undefined}\n onKeyDown={(e: any) => {\n if (foto.url && (e.key === \"Enter\" || e.key === \" \")) onAbrir(foto);\n }}\n >\n \n

\n {foto.url\n ? {foto.nota}

\n : }\n

{foto.nota}

\n \n \n );\n}\n\nfunction TarjetaRazon({ texto, i }: any) {\n const [abierta, setAbierta] = useState(false);\n return (\n setAbierta(!abierta)}\n aria-expanded={abierta}\n >\n \n \n ábreme\n \n {texto}\n \n );\n}\n\nfunction App() {\n const [abierto, setAbierto] = useState(false);\n const [abriendo, setAbriendo] = useState(false);\n const [secreto, setSecreto] = useState(false);\n const [lightbox, setLightbox] = useState(null);\n const [sonando, setSonando] = useState(false);\n const audioRef = useRef(null);\n\n useRevelar(abierto);\n\n useEffect(() => {\n document.body.classList.toggle(\"bloqueado\", !abierto);\n }, [abierto]);\n\n const abrir = () => {\n if (abriendo) return;\n setAbriendo(true);\n if (CONFIG.musicaUrl && audioRef.current) {\n audioRef.current.play().then(() => setSonando(true)).catch(() => {});\n }\n setTimeout(() => setAbierto(true), 1400);\n };\n\n const toggleMusica = () => {\n const a = audioRef.current;\n if (!a) return;\n if (a.paused) {\n a.play().then(() => setSonando(true)).catch(() => {});\n } else {\n a.pause();\n setSonando(false);\n }\n };\n\n return (\n

\n \n\n {/* ── PORTADA ── */}\n

\n para {CONFIG.apodo} · de{\" \"}\n {CONFIG.tuNombre}\n

{CONFIG.titulo}

{CONFIG.subtitulo}

\n\n {\n if (e.key === \"Enter\" || e.key === \" \") abrir();\n }}\n aria-label=\"Abrir la carta\"\n >\n \n

\n\n {!abierto\n ? (\n

\n {abriendo ? \"\" : \"toca el sobre\"}\n

\n )\n :

desliza hacia abajo ↓

}\n \n\n {/* ── ÁLBUM ── */}\n {abierto && (\n

\n \n {CONFIG.notaCorta.map((l, i) => (\n

{l}

\n ))}\n

\n\n

desde el 16 de mayo de 2025

\n \n

\n\n

Un año de nosotros

\n Algunas pruebas de lo que hemos vivido hasta ahora.\n

\n {CONFIG.fotos.map((f, i) => (\n \n ))}\n

\n\n

Ahora unas fotos tuyas

\n Nomás pa mostrar lo hermosa que te ves.\n

\n {CONFIG.retratos.map((f, i) => (\n f.url && setLightbox(f)}\n >\n

\n {f.url\n ? {f.nota}

\n : }\n

\n {f.nota}\n

\n ))}\n \n

\n\n

Por qué te amo

\n Toca cada sello. Cada uno guarda una razón.\n

\n {CONFIG.razones.map((r, i) => (\n \n ))}\n

\n\n \n

\n )}\n\n {lightbox && (\n setLightbox(null)}\n >\n

e.stopPropagation()}>\n

{lightbox.nota}

\n \n

\n \n )}\n\n {secreto && (\n setSecreto(false)}\n >\n

e.stopPropagation()}>\n {CONFIG.gifSecreto && (\n $\"sorpresa\"$ \n )}\n

{CONFIG.textoSecreto}

\n \n setSecreto(false)}\n >\n cerrar\n \n

\n \n )}\n\n {CONFIG.musicaUrl && (\n <>\n

Diff · v201