Cita Bonita ✨ — Invitación Romántica Interactiva

Una mini-aplicación web premium, interactiva y con un diseño visualmente espectacular para enviar invitaciones románticas personalizadas. Utiliza efectos de glassmorphism, orbes dinámicos de fondo, micro-animaciones fluidas con GSAP y cuenta con un flujo completo de selección de fecha, hora, plan y envío automatizado de confirmación.

---

Características Principales

• 💌 Sobre interactivo: Presenta un sobre de carta realista y elegante con sellado de corazón que se abre con una animación de 180° antes de revelar la invitación.
• 🎭 Diseño Premium y Efecto Glass: Fondos con orbes de colores degradados que flotan de forma sutil y un contenedor principal con efecto de vidrio esmerilado (glassmorphism).
• ✨ Efectos Visuales Dinámicos:
  • Rastro mágico que sigue al cursor o al tacto del dedo (✨, 💖, ⭐, 💕, ✦).
  • Lluvia de pétalos de flores y corazones que se activa al aceptar la invitación.
  • Estallidos de confeti emoji al hacer clic en los botones interactivos o confirmar la cita.
• 🏃‍♂️ Botón "No" Evasivo: Si el usuario intenta hacer clic o pulsar en "No", el botón se desplaza aleatoriamente por la pantalla e incrementa la insistencia de forma juguetona hasta que se rinde y ofrece pulsar el botón rosa.
• 📅 Calendario Plegable Personalizado: Selector de fecha interactivo restringido al mes actual, que bloquea automáticamente días del pasado y se despliega con transiciones suaves.
• ⏰ Selector de Hora: Grid responsivo de chips para seleccionar la hora deseada de la cita de forma táctil.
• 🎯 Selección de Plan: Grid interactivo con diferentes opciones ilustradas (Café, Sushi, Helado, Paseo bonito, Cena o Sorpresa).
• 🌍 Internacionalización y Autodetección: Soporte completo para Español, Inglés, Alemán y Serbio, detectando automáticamente la ubicación e idioma preferido a través de la dirección IP de forma asíncrona sin bloquear la interfaz.
• ✉️ Envío automatizado con EmailJS: Las respuestas se envían directamente al correo configurado del creador mediante la API de EmailJS.
• 📅 Calendario y Cuenta Atrás: Pantalla final con cuenta atrás exacta para el día del evento, botón de enlace directo para guardarlo en Google Calendar y descarga automatizada de un archivo .ics para Apple/Outlook.

---

Tecnologías Utilizadas

• Estructura y Contenido: HTML5 Semántico.
• Diseño y Maquetación: CSS3 Moderno (Custom Properties, Flexbox, Grid, Glassmorphism, animaciones @keyframes).
• Interactividad y Lógica: JavaScript Vanilla (ES6+).
• Animaciones: GSAP (GreenSock Animation Platform) para transiciones de entrada/salida de tarjetas, movimiento del botón "No" y rastro de partículas.
• Iconografía: Lucide Icons.
• Detección de Idioma: ipapi.co para mapear la ubicación IP a los idiomas soportados.
• Envío de Correo: EmailJS.

---

Estructura de Archivos

weblove/
├── index.html       # Estructura principal, meta-tags SEO y enlaces a librerías CDN
├── styles.css       # Sistema de diseño, tokens, animaciones y diseño responsivo
├── app.js           # Lógica principal del flujo de la app, eventos y animaciones GSAP
├── i18n.js          # Diccionario de traducciones (ES, EN, DE, SR) y lógica de detección por IP
└── README.md        # Documentación del proyecto (este archivo)

---

Configuración y Personalización

1. Configuración de EmailJS (para recibir los correos)

Abre el archivo app.js y reemplaza los valores de las constantes al inicio del documento con tus propias credenciales de EmailJS:

const EMAILJS_PUBLIC_KEY = 'TU_PUBLIC_KEY_DE_EMAILJS';
const SERVICE_ID        = 'TU_SERVICE_ID';
const TEMPLATE_ID       = 'TU_TEMPLATE_ID';
const TO_EMAIL          = '[email protected]';

2. URL Personalizada con Nombre de Invitado

La aplicación permite personalizar el mensaje de bienvenida y el texto sobre el sobre interactivo dinámicamente usando parámetros en la URL. Puedes enviar los siguientes enlaces:

• https://tu-sitio.com/?n=Sofía
• https://tu-sitio.com/?name=carlos

La aplicación detectará el nombre y mostrará: «Sofía, tengo una pregunta importante…» y en el sobre se leerá: «Una carta para Sofía 💌».

---

Cómo Ejecutar Localmente

Opción A (Recomendada para evitar restricciones CORS en peticiones de traducción/IP):

Levanta un servidor local liviano en el directorio raíz del proyecto:

En MacOS / Linux:

python3 -m http.server 8080

Luego accede a http://localhost:8080 desde tu navegador.

Opción B:

Abre el archivo index.html directamente haciendo doble clic desde el gestor de archivos. (Nota: La funcionalidad de traducción automática por IP podría dar error en algunas políticas estrictas de navegadores si se ejecuta a través del protocolo file://, pero la web cargará en Español por defecto sin problemas).