Uncategorized

<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>
Hello world!
