<style>
.boda-popup-container {
font-family: 'Playfair Display', 'Georgia', serif;
background-color: #ffffff;
padding: 10px;
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.boda-title {
font-size: 24px;
color: #594236;
margin-bottom: 5px;
letter-spacing: 1px;
}
.boda-subtitle {
font-size: 13px;
color: #a68b7c;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 25px;
}
.boda-field-group {
text-align: left;
margin-bottom: 20px;
}
.boda-field-group label {
display: block;
font-size: 14px;
color: #735d51;
margin-bottom: 8px;
font-weight: 500;
}
.boda-input {
width: 100%;
padding: 12px 15px;
border: 1px solid #e6ded8;
border-radius: 6px;
font-size: 15px;
color: #333333;
box-sizing: border-box;
transition: all 0.3s ease;
font-family: 'Arial', sans-serif;
}
.boda-input:focus {
border-color: #a68b7c;
outline: none;
box-shadow: 0 0 5px rgba(166, 139, 124, 0.2);
}
textarea.boda-input {
resize: vertical;
min-height: 80px;
}
.boda-radio-group {
display: flex;
gap: 25px;
margin-top: 5px;
}
.boda-radio-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #594236 !important;
cursor: pointer;
font-weight: normal !important;
}
.boda-radio-label input {
accent-color: #a68b7c;
width: 16px;
height: 16px;
}
.boda-thankyou {
font-size: 14px;
color: #a68b7c;
font-style: italic;
margin: 25px 0;
line-height: 1.5;
}
.boda-btn {
width: 100%;
padding: 14px;
border: none;
border-radius: 6px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
display: block;
text-decoration: none;
box-sizing: border-box;
}
.boda-btn-primary {
background-color: #a68b7c;
color: #ffffff;
text-align: center;
}
.boda-btn-primary:hover {
background-color: #8c7264;
}
.boda-btn-secondary {
background-color: #d9c5b6;
color: #594236;
margin-top: 15px;
display: none;
text-align: center;
}
.boda-btn-secondary:hover {
background-color: #ccb7a7;
}
.boda-instruccion-nota {
display: none;
font-size: 13.5px;
color: #735d51;
background-color: #fcfbfa;
border: 1px dashed #d9c5b6;
padding: 14px;
border-radius: 6px;
margin-top: 15px;
line-height: 1.4;
font-family: 'Arial', sans-serif;
text-align: left;
}
.line-separator {
width: 50px;
height: 1px;
background-color: #d9c5b6;
margin: 0 auto 20px auto;
}
</style>
<div class="boda-popup-container">
<div class="boda-title">Viviana & Miguel</div>
<div class="boda-subtitle">Confirmación de Asistencia</div>
<div class="line-separator"></div>
<div id="bodaFormContainer">
<div class="boda-field-group">
<label for="nombre">NOMBRE COMPLETO</label>
<input type="text" id="nombre" class="boda-input" placeholder="Ej. María García">
</div>
<div class="boda-field-group">
<label>INVITADO DE:</label>
<div class="boda-radio-group">
<label class="boda-radio-label">
<input type="radio" name="anfitrion" value="novio"> NOVIO
</label>
<label class="boda-radio-label">
<input type="radio" name="anfitrion" value="novia"> NOVIA
</label>
</div>
</div>
<div class="boda-field-group">
<label for="comentario">ALGUNA DUDA U COMENTARIO:</label>
<textarea id="comentario" class="boda-input" placeholder="Escribe aquí tus notas o dudas..."></textarea>
</div>
<div class="boda-thankyou">
¡AGRADECEMOS NOS ACOMPAÑES EN ESTE MOMENTO TAN ESPECIAL!
</div>
<button type="button" id="submitBtn" class="boda-btn boda-btn-primary" onclick="procesarBodaEnvio()">
Paso 1: Confirmar por WhatsApp
</button>
<div id="notaInstruccion" class="boda-instruccion-nota">
📌 <strong>¡Importante!</strong> Después de enviar la información por WhatsApp, regresa a esta página para agregar el evento a tu calendario personal en el botón de abajo.
</div>
<a href="https://google.com¡Te+esperamos+en+nuestro+gran+día!"
id="calendarBtn" class="boda-btn boda-btn-secondary" target="_blank">
Paso 2: Guardar en mi Google Calendar
</a>
</div>
</div>
<script>
function procesarBodaEnvio() {
var txtNombre = document.getElementById('nombre').value.trim();
var optRadio = document.querySelector('input[name="anfitrion"]:checked');
var txtComentario = document.getElementById('comentario').value.trim();
if (txtNombre === "") {
alert("Por favor, ingresa tu Nombre Completo.");
document.getElementById('nombre').focus();
return;
}
if (!optRadio) {
alert("Por favor, selecciona si eres invitado del Novio o de la Novia.");
return;
}
var valAnfitrion = optRadio.value;
var valComentario = txtComentario !== "" ? txtComentario : "No, ninguna (prueba)";
var numTelefono = (valAnfitrion === "novio") ? "5215613896477" : "5216143573666";
var strAnfitrionText = (valAnfitrion === "novio") ? "Miguel" : "Viviana";
var msgCompleto =
"*CONFIRMACIÓN DE ASISTENCIA - VIVIANA & MIGUEL*\n\n" +
"¡Cuenten conmigo en su boda!\n" +
"Quiero confirmar mi asistencia para acompañarlos en este día tan especial y compartir con ustedes uno de los momentos más importantes de sus vidas.\n\n" +
"*Nombre completo*: " + txtNombre + "\n" +
"*Invitado de:* " + strAnfitrionText + "\n" +
"*Comentario o mensaje adicional:* " + valComentario + "\n\n" +
"Me da mucho gusto poder ser parte de esta celebración y acompañarlos en una fecha tan significativa para ustedes. Sin duda será un día lleno de momentos inolvidables, alegría y recuerdos muy especiales.\n\n" +
"Gracias por la invitación y por permitirme compartir este momento tan bonito junto a ustedes.\n\n" +
"Nos vemos en la boda,";
var linkFinalWhastapp = "https://wa.me" + numTelefono + "?text=" + encodeURIComponent(msgCompleto);
window.open(linkFinalWhastapp, '_blank');
document.getElementById('notaInstruccion').style.display = 'block';
document.getElementById('calendarBtn').style.display = 'block';
var btnPrincipal = document.getElementById('submitBtn');
btnPrincipal.innerText = "✓ Mensaje Enviado";
btnPrincipal.style.backgroundColor = "#e6ded8";
btnPrincipal.style.color = "#735d51";
btnPrincipal.style.cursor = "default";
btnPrincipal.onclick = null;
}
</script>
