<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nuestra Boda - Javier & Angela</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
<!-- Chosen Palette: Serene Vows (Cream, Stone Gray, Muted Rose Gold) -->
<!-- Application Structure Plan: A single-page, top-to-bottom scrolling narrative. Starts with an animated hero/countdown for immediate engagement. Follows with essential details (Ceremony, Reception) using icons and map links for clarity. An animated timeline details the day's events. Personal story and RSVP follow, placing the call-to-action after the user has all necessary info. This structure guides the user logically from announcement to action, making it more intuitive than a static report layout. -->
<!-- Visualization & Content Choices: Report Info -> Hero section; Goal -> Announce & Engage; Viz/Method -> Animated text (CSS keyframes) & JS Countdown Timer; Interaction -> None, purely visual; Justification -> Fulfills "dynamic" request immediately, creates excitement. | Report Info -> Locations; Goal -> Inform & Guide; Viz/Method -> HTML/Tailwind layout with Unicode icons (⛪, 💍); Interaction -> Clickable addresses opening Google Maps; Justification -> Highly practical for guests. | Report Info -> Itinerary; Goal -> Detail schedule; Viz/Method -> Vertical timeline (HTML/Tailwind); Interaction -> Scroll-triggered fade-in animations (JS IntersectionObserver); Justification -> Presents info clearly and dynamically. | Report Info -> RSVP; Goal -> Collect responses; Viz/Method -> HTML/Tailwind Modal; Interaction -> Click to open/close, form submission; Justification -> Key interactive feature for wedding planning. CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Montserrat', sans-serif;
background-color: #FDFBF8;
color: #4B423D;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
.text-accent { color: #A17C6B; }
.bg-accent { background-color: #A17C6B; }
.border-accent { border-color: #A17C6B; }
.hero-bg {
background-image: url('https://placehold.co/1200x800/FDFBF8/A17C6B?text=A%26J');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 2s ease-in-out; }
.fade-in-up { animation: fadeInUp 1.5s ease-in-out; }
.fade-in-up-delay-1 { animation: fadeInUp 1.5s 0.5s ease-in-out forwards; opacity: 0; }
.fade-in-up-delay-2 { animation: fadeInUp 1.5s 1s ease-in-out forwards; opacity: 0; }
.timeline-item::before {
content: '';
position: absolute;
top: 1rem;
left: -0.875rem;
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
background-color: #FDFBF8;
border: 4px solid #A17C6B;
z-index: 10;
}
</style>
</head>
<body class="leading-relaxed">
<header class="hero-bg">
<div class="h-screen w-full flex flex-col justify-center items-center text-white bg-black bg-opacity-40 text-center p-4">
<div class="fade-in-up">
<h3 class="text-lg md:text-2xl tracking-widest">NOS CASAMOS</h3>
<h1 class="text-5xl md:text-8xl lg:text-9xl font-bold my-4">Javier & Angela</h1>
</div>
<div id="countdown" class="fade-in-up-delay-1 flex space-x-4 md:space-x-8 mt-8 text-lg md:text-xl">
<div><span id="days" class="block text-3xl md:text-5xl font-bold"></span>Días</div>
<div><span id="hours" class="block text-3xl md:text-5xl font-bold"></span>Horas</div>
<div><span id="minutes" class="block text-3xl md:text-5xl font-bold"></span>Minutos</div>
<div><span id="seconds" class="block text-3xl md:text-5xl font-bold"></span>Segundos</div>
</div>
<p class="mt-8 text-lg md:text-xl fade-in-up-delay-2">Viernes, 6 de Septiembre de 2025</p>
</div>
</header>
<main class="container mx-auto px-6 py-16 md:py-24 max-w-4xl">
<section class="text-center reveal">
<h2 class="text-4xl md:text-5xl text-accent mb-6">Con la bendición de Dios</h2>
<p class="text-lg md:text-xl max-w-2xl mx-auto">
"El amor es paciente, el amor es bondadoso. No tiene envidia, no es jactancioso, no se envanece." - 1 Corintios 13:4
</p>
<p class="mt-4 text-base md:text-lg max-w-3xl mx-auto">
Porque los planes de Dios son perfectos, hemos decidido unir nuestras vidas en sagrado matrimonio y nos encantaría celebrar este día tan especial en compañía de las personas que más queremos.
</p>
</section>
<div class="my-16 border-t-2 border-dashed border-accent border-opacity-30"></div>
<section class="reveal">
<h2 class="text-4xl md:text-5xl text-accent text-center mb-12">Detalles del Evento</h2>
<div class="grid md:grid-cols-2 gap-12">
<div class="text-center">
<div class="text-6xl text-accent mb-4">⛪</div>
<h3 class="text-3xl mb-2">Ceremonia Religiosa</h3>
<p class="font-semibold">Parroquia Nuestra Señora de la Reconciliación</p>
<p>Jr. Los Pinos 291, Santiago de Surco</p>
<p class="mt-2 font-bold">16:00 horas</p>
<a href="https://maps.google.com/?q=Parroquia+Nuestra+Señora+de+la+Reconciliación,Jr.+Los+Pinos+291,Santiago+de+Surco" target="_blank" class="inline-block mt-4 text-accent font-semibold border-b-2 border-accent hover:text-stone-800 transition-colors">Ver en mapa</a>
</div>
<div class="text-center">
<div class="text-6xl text-accent mb-4">🥂</div>
<h3 class="text-3xl mb-2">Recepción</h3>
<p class="font-semibold">Parroquia Nuestra Señora de la Reconciliación</p>
<p>Salón de Recepciones</p>
<p class="mt-2 font-bold">17:00 horas</p>
<a href="https://maps.google.com/?q=Parroquia+Nuestra+Señora+de+la+Reconciliación,Jr.+Los+Pinos+291,Santiago+de+Surco" target="_blank" class="inline-block mt-4 text-accent font-semibold border-b-2 border-accent hover:text-stone-800 transition-colors">Ver en mapa</a>
</div>
</div>
</section>
<div class="my-16 border-t-2 border-dashed border-accent border-opacity-30"></div>
<section class="text-center reveal">
<h2 class="text-4xl md:text-5xl text-accent mb-6">Nuestra Historia</h2>
<p class="text-base md:text-lg max-w-3xl mx-auto">
Desde el día en que nuestros caminos se cruzaron, supimos que Dios tenía un plan para nosotros. Cada paso, cada sonrisa y cada desafío nos ha traído hasta este momento sagrado. Estamos muy emocionados de empezar este nuevo capítulo y agradecidos de poder compartirlo con ustedes. ¡Gracias por ser parte de nuestra historia!
</p>
</section>
<div class="my-16 border-t-2 border-dashed border-accent border-opacity-30"></div>
<section class="text-center reveal">
<h2 class="text-4xl md:text-5xl text-accent mb-6">Confirma tu Asistencia</h2>
<p class="text-base md:text-lg max-w-3xl mx-auto mb-8">
Tu presencia es el mejor regalo. Por favor, ayúdanos a organizarnos confirmando tu asistencia antes del 15 de Octubre de 2025.
</p>
<button id="rsvp-button" class="bg-accent text-white font-bold py-3 px-8 rounded-full hover:bg-opacity-80 transition-all text-lg shadow-lg">
Confirmar Asistencia (RSVP)
</button>
</section>
<div class="my-16 border-t-2 border-dashed border-accent border-opacity-30"></div>
<section class="reveal">
<h2 class="text-4xl md:text-5xl text-accent text-center mb-12">Información Adicional</h2>
<div class="grid md:grid-cols-2 gap-8 text-center max-w-3xl mx-auto">
<div class="reveal">
<div class="text-5xl text-accent mb-3">🎁</div>
<h3 class="text-2xl mb-2">Regalos</h3>
<p>Su presencia es nuestro mayor regalo. Si desean hacernos un obsequio, agradeceríamos una contribución para nuestra nueva vida juntos.</p>
</div>
<div class="reveal">
<div class="text-5xl text-accent mb-3">👔</div>
<h3 class="text-2xl mb-2">Código de Vestimenta</h3>
<p>Formal. ¡Queremos verlos a todos muy elegantes!</p>
</div>
<div class="md:col-span-2 reveal">
<div class="text-5xl text-accent mb-3">#</div>
<h3 class="text-2xl mb-2">Hashtag de la Boda</h3>
<p>Comparte tus fotos y momentos con nosotros usando <span class="font-bold text-accent">#JavierYAngelaSeCasan</span></p>
</div>
</div>
</section>
</main>
<footer class="text-center py-10 bg-stone-100">
<p class="text-2xl font-bold text-accent" style="font-family: 'Playfair Display', serif;">¡Te esperamos!</p>
<p class="mt-2">Javier & Angela</p>
</footer>
<!-- RSVP Modal -->
<div id="rsvp-modal" class="fixed inset-0 bg-black bg-opacity-60 hidden items-center justify-center p-4 z-50">
<div class="bg-white rounded-lg shadow-2xl p-8 md:p-12 max-w-lg w-full relative transform transition-all opacity-0 -translate-y-4" id="modal-content">
<button id="close-modal" class="absolute top-4 right-4 text-stone-500 hover:text-stone-800 text-2xl">×</button>
<div id="form-view">
<h2 class="text-3xl md:text-4xl text-accent mb-6 text-center">Confirmar Asistencia</h2>
<form id="rsvp-form">
<div class="mb-4">
<label for="name" class="block text-stone-700 mb-1">Nombre(s) y Apellido(s)</label>
<input type="text" id="name" name="name" class="w-full px-4 py-2 border border-stone-300 rounded-md focus:ring-accent focus:border-accent" required>
</div>
<div class="mb-4">
<label class="block text-stone-700 mb-2">¿Asistirás?</label>
<div class="flex space-x-4">
<label class="flex items-center"><input type="radio" name="attendance" value="yes" class="mr-2" checked> Sí, con gusto asistiré</label>
<label class="flex items-center"><input type="radio" name="attendance" value="no" class="mr-2"> No, lamentablemente no podré</label>
</div>
</div>
<div class="mb-6">
<label for="message" class="block text-stone-700 mb-1">¿Alguna alergia o restricción alimentaria?</label>
<textarea id="message" name="message" rows="3" class="w-full px-4 py-2 border border-stone-300 rounded-md focus:ring-accent focus:border-accent"></textarea>
</div>
<button type="submit" class="w-full bg-accent text-white font-bold py-3 px-8 rounded-full hover:bg-opacity-80 transition-all text-lg">Enviar Confirmación</button>
</form>
</div>
<div id="confirmation-view" class="hidden text-center">
<h2 class="text-3xl md:text-4xl text-accent mb-6">¡Gracias!</h2>
<p class="text-lg">Tu confirmación ha sido recibida.</p>
<button id="close-confirmation" class="mt-6 w-full bg-stone-500 text-white font-bold py-3 px-8 rounded-full hover:bg-opacity-80 transition-all text-lg">Cerrar</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const weddingDate = new Date("Sep 6, 2025 16:00:00").getTime();
const countdownFunction = setInterval(function() {
const now = new Date().getTime();
const distance = weddingDate - now;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "<div class='text-center text-3xl'>¡Llegó el gran día!</div>";
return;
}
document.getElementById("days").innerText = Math.floor(distance / (1000 * 60 * 60 * 24));
document.getElementById("hours").innerText = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
document.getElementById("minutes").innerText = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
document.getElementById("seconds").innerText = Math.floor((distance % (1000 * 60)) / 1000);
}, 1000);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
const rsvpModal = document.getElementById('rsvp-modal');
const modalContent = document.getElementById('modal-content');
const rsvpButton = document.getElementById('rsvp-button');
const closeModalButton = document.getElementById('close-modal');
const rsvpForm = document.getElementById('rsvp-form');
const formView = document.getElementById('form-view');
const confirmationView = document.getElementById('confirmation-view');
const closeConfirmationButton = document.getElementById('close-confirmation');
const openModal = () => {
rsvpModal.classList.remove('hidden');
rsvpModal.classList.add('flex');
setTimeout(() => {
modalContent.classList.remove('opacity-0', '-translate-y-4');
}, 10);
};
const closeModal = () => {
modalContent.classList.add('opacity-0', '-translate-y-4');
setTimeout(() => {
rsvpModal.classList.add('hidden');
rsvpModal.classList.remove('flex');
formView.classList.remove('hidden');
confirmationView.classList.add('hidden');
}, 300);
};
rsvpButton.addEventListener('click', openModal);
closeModalButton.addEventListener('click', closeModal);
closeConfirmationButton.addEventListener('click', closeModal);
rsvpModal.addEventListener('click', (event) => {
if (event.target === rsvpModal) {
closeModal();
}
});
rsvpForm.addEventListener('submit', (e) => {
e.preventDefault();
formView.classList.add('hidden');
confirmationView.classList.remove('hidden');
});
});
</script>
</body>
</html>