Página de boda / evento

Invitación digital elegante para bodas, XV años, bautizos, aniversarios o eventos corporativos. Incluye cuenta regresiva en vivo, botón para agregar el evento a Google Calendar, historia de la pareja, itinerario, ubicaciones con mapa, código de vestimenta, galería con visor, mesa de regalos con CLABE copiable y confirmación de asistencia (RSVP) por WhatsApp.

Es un producto muy fácil de vender: se cobra por evento, se reutiliza la misma plantilla cambiando textos y fotos, y los invitados la comparten por WhatsApp.

Vista previa

Valeria & Andrés

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Secciones

Sección	Detalle
Portada	Foto a pantalla completa, nombres en letra manuscrita, fecha y ciudad. Flecha animada para bajar.
Cuenta regresiva	Días, horas, minutos y segundos hasta el evento; al llegar la fecha muestra "¡Hoy es el gran día!". Botón para agregar a Google Calendar.
Nuestra historia	Dos fotos superpuestas tipo polaroid y momentos clave.
Padres y padrinos	Tres columnas con los nombres.
Itinerario	Línea de tiempo central con iconos; en móvil pasa a una sola columna.
Ubicación	Tarjetas para ceremonia y recepción con botón a Google Maps.
Código de vestimenta	Fondo con imagen y paleta de colores sugerida.
Galería	Mosaico tipo Pinterest con columns de CSS y visor al hacer clic.
Mesa de regalos	Liverpool, Amazon y transferencia con botón para copiar la CLABE.
RSVP	Formulario que oculta "número de personas" si no asiste y envía la confirmación por WhatsApp.

Personalización

Fecha del evento

Una sola línea controla la cuenta regresiva y el enlace de calendario. Incluye la zona horaria para que funcione igual para invitados en otros países:

const FECHA_BODA = new Date('2027-02-14T17:00:00-06:00'); // -06:00 = centro de México
const WHATSAPP_RSVP = '524151234567';                     // quien recibe las confirmaciones

Colores y tipografía

:root {
  --primario: #9f7a5a;   /* dorado/café: títulos manuscritos, botones */
  --salvia: #8a9a7b;     /* fondo del código de vestimenta */
  --rosa: #e8cfc4;       /* bordes suaves */
  --crema: #fbf7f2;      /* fondo general */
  --script: 'Brush Script MT', 'Segoe Script', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
}

Para una tipografía manuscrita más bonita y consistente en todos los dispositivos, carga desde Google Fonts Great Vibes o Parisienne (para --script) y Cormorant Garamond (para --serif).

Paletas por tipo de evento:

Evento	Primario	Secundario
Boda rústica	#9f7a5a	#8a9a7b
Boda en playa	#0e7490	#f4d8b8
XV años	#be185d	#f9a8d4
Bautizo	#60a5fa	#e0f2fe
Evento corporativo	#1e3a8a	#ca8a04

Itinerario

Cada momento es un bloque con hora, icono y detalle. Duplica o elimina según el programa:

<div class="evento revelar">
  <span class="hora">20:00</span>
  <span class="ico">🍽️</span>
  <div class="detalle"><h3>Cena</h3><p>Menú de tres tiempos</p></div>
</div>

Mapas

Los botones abren Google Maps con una búsqueda. Para un punto exacto, busca el lugar en Google Maps, pulsa Compartir → Copiar vínculo y pega ese enlace en el href.

Cómo funciona la cuenta regresiva

function actualizar() {
  const diff = FECHA_BODA - Date.now();          // milisegundos restantes
  if (diff <= 0) { /* mensaje final */ return clearInterval(intervalo); }
  el('dias').textContent = Math.floor(diff / 864e5);                              // 86 400 000 ms = 1 día
  el('horas').textContent = String(Math.floor(diff / 36e5) % 24).padStart(2, '0');
  el('minutos').textContent = String(Math.floor(diff / 6e4) % 60).padStart(2, '0');
  el('segundos').textContent = String(Math.floor(diff / 1e3) % 60).padStart(2, '0');
}
const intervalo = setInterval(actualizar, 1000);

Guardar confirmaciones en una hoja de cálculo

WhatsApp es práctico, pero con 200 invitados conviene tener todo en una tabla. Una opción gratuita es Google Sheets + Apps Script:

1. Crea una hoja con columnas: Fecha, Nombre, Asiste, Personas, Alimentos, Mensaje.
2. En Extensiones → Apps Script pega:

function doPost(e) {
  const hoja = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  const d = JSON.parse(e.postData.contents);
  hoja.appendRow([new Date(), d.nombre, d.asiste, d.personas, d.alimentos, d.mensaje]);
  return ContentService.createTextOutput(JSON.stringify({ ok: true })).setMimeType(ContentService.MimeType.JSON);
}

3. Implementar → Nueva implementación → Aplicación web (acceso: cualquier usuario) y copia la URL.
4. En el submit del formulario, además de (o en lugar de) WhatsApp:

await fetch('https://script.google.com/macros/s/TU_ID/exec', {
  method: 'POST',
  body: JSON.stringify(d), // sin cabecera Content-Type para evitar el preflight de CORS
});

Extras que puedes ofrecer

• Invitación personalizada por invitado: boda.html?invitado=Familia%20Pérez&pases=4 y lee los parámetros con URLSearchParams para mostrar "Querida Familia Pérez, tienes 4 pases".
• Música de fondo con un botón de reproducir (nunca automática).
• Álbum compartido después del evento (Google Photos o una galería subida con multer).
• Código QR impreso en la invitación física que lleve a la página.

Vista previa al compartir

Añade etiquetas Open Graph en el head (og:title, og:description, og:image) con una foto de la pareja. Así, cuando compartan el enlace por WhatsApp, aparecerá una tarjeta bonita en lugar de un enlace plano.

Privacidad

La página es pública para quien tenga el enlace. Evita poner la dirección de la casa de los novios o datos bancarios completos si el enlace se va a compartir en redes; para la CLABE basta con mostrarla en la invitación privada.