<!DOCTYPE html>
<html lang="en">
<script src="scripts/image-animations.js"></script>
<script src="scripts/button-animation.js"></script>
<script src="scripts/modal.js"></script>
<script src="scripts/detect-device.js"></script>
<script src="scripts/open-invitation.js"></script>
<script src="scripts/form-handler.js"></script>
<script src="scripts/music-stop.js"></script>
<script src="scripts/copyToClipboard.js"></script>
<script src="scripts/countdown.js"></script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
    <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=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <title>Boda Ana y Pablo</title>

    <!-- Meta etiquetas Open Graph para redes sociales -->
    <meta property="og:title" content="Boda Ana y Pablo">
    <meta property="og:image" content="https://wedify.io/images/share.png">
    <meta property="og:url" content="https://wedify.io">
    <meta property="og:type" content="website">
</head>

<body>

    <div id="mobile-message" style="display: none;">
        <p style="font-size: 25px;">Para acceder a la invitación, abre esta web desde tu
            móvil.
        </p>
    </div>
    <audio id="background-music" loop>
        <source src="media/cancion.mp3" type="audio/mpeg">
        Tu navegador no soporta la etiqueta de audio.
    </audio>
    <div id="background" style="position: relative; height: 100vh; width: 100%; display: none;">
        <div style="background-image: url('images/background.png'); background-size: cover; background-position:
            center; height: 100%; width: 100%;">
        </div>
        <div
            style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.3);">
        </div> <!-- Capa negra transparente -->
        <div id="button-invitation" class="button-invitation"
            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <button class="button-1" style="font-size: 18px; line-height: 50px;" onclick="openInvitation()">ABRIR
                INVITACIÓN</button>
        </div>
    </div>


    <div id="content" style="display: none;">
        <!-- First screen -->
        <button id="floating-button" class="floating-button" onclick="toggleMusic()">
            <i class="fas fa-music"></i>
        </button>

        <button id="arrow-down" class="floating-button floating-button-center">
            <i class="fa-solid fa-chevron-down"></i>
        </button>

        <div class="page-container">
            <video id="background-video" playsinline>
                <source src="media/index.mp4" type="video/mp4">
                Tu navegador no soporta el video en HTML5.
            </video>
        </div>
        <div class="countdown-container">
            <div class="countdown">
                <div class="time" id="days">
                    <span class="number">00</span>
                    <span class="label">Días</span>
                </div>
                <div class="time" id="hours">
                    <span class="number">00</span>
                    <span class="label">Horas</span>
                </div>
                <div class="time" id="minutes">
                    <span class="number">00</span>
                    <span class="label">Minutos</span>
                </div>
            </div>
        </div>
        <div class="page-container">
            <div class="container-white">
                <img src="images/rings.png" class="vibrating-image">
                <h1>LA CEREMONIA</h1>
                <p style="margin: 0px;">Calle de la Boda 20,</p>
                <p style="margin: 0px;">Barcelona, Spain 08012</p>
                <h1 style="font-size: 10vw;">12:00h</h1>
                <a href="https://www.google.com/maps?q=Bareclona,Spain" class="button-1">VER
                    UBICACIÓN</a>

            </div>
        </div>

        <!-- Second screen -->
        <div class="page-container">
            <div class="container-rose">
                <img src="images/couple.png" class="vibrating-image">
                <div style="width: 100%; padding: 0 10vw;"> <!-- Ajusta el padding aquí -->
                    <h1>LA CELEBRACIÓN</h1>
                    <p style="margin: 0px;">Calle de la Boda 20,</p>
                    <p style="margin: 0px;">Barcelona, Spain 08012</p>
                    <h1 style="font-size: 10vw;">12:00h</h1>
                    <a href="https://www.google.com/maps?q=Bareclona,Spain" class="button-1">VER
                        UBICACIÓN</a>
                </div>
            </div>
        </div>

        <div class="empty"></div>
        <div class="timeline">
            <img src="images/clock.png" class="vibrating-image" style="width: 30vw">
            <h3>TIMELINE</h3>
            <p class="timeline">Cronología de la boda</p>
            <img src="images/church.png" class="sliding-image-left">
            <h3>12:30hs</h3>
            <p class="timeline">Ceremonia</p>
            <hr>
            <img src="images/reception.png" class="sliding-image-right">
            <h3>14:00hs</h3>
            <p class="timeline">Recepción</p>
            <hr>
            <img src="images/lunch.png" class="sliding-image-left">
            <h3>16:00hs</h3>
            <p class="timeline">Comida</p>
            <hr>
            <img src="images/party.png" class="sliding-image-right">
            <h3>17:30hs</h3>
            <p class="timeline">Fiesta</p>
        </div>
        <div class="empty"></div>

        <div class="page-container">
            <div class="container-rose">
                <img src="images/confirm.png" class="vibrating-image" style="width: 10vh;">
                <div style="width: 100%; padding: 0 10vw;"> <!-- Ajusta el padding aquí -->
                    <h1>CONFIRMAR ASISTENCIA</h1>
                    <p>Nos encantaría que formaras parte de nuestro gran día. ¡Esperamos poder contar contigo!</p>
                    <p>Por favor, pulsa el botón para acceder al formulario de confirmación y ayudarnos a organizar
                        nuestro día.</p>
                    <p>¡Muchas gracias!</p>
                </div>
                <a id="openModal" class="button-1">FORMULARIO</a>
            </div>
        </div>
        <!-- El Pop-Up -->
        <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h1 style="margin: 0px; margin-bottom: 2vh;">Confirmar Asistencia</h1>
                <form id="attendForm">
                    <label for="name">Nombre y apellidos:</label>
                    <input type="text" id="name" name="name" required><br><br>

                    <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
                        <label for="attend" style="margin-right: 10px; flex: 1;">¿Asistirás el día de nuestra
                            boda?</label>
                        <div style="display: flex; gap: 5px; margin-left: auto; align-items: center;">
                            <input type="radio" id="attendYes" name="attend" value="yes" required>
                            <label for="attendYes" style="margin: 0;">Sí</label>
                            <input type="radio" id="attendNo" name="attend" value="no" required>
                            <label for="attendNo" style="margin: 0;">No</label>
                        </div>
                    </div>

                    <div id="attendanceDetails" style="display: none;">
                        <br>


                        <div style="display: flex; align-items: center; width: 100%;">
                            <label for="allergies" style="margin-right: 10px; flex: 1;">¿Tienes alguna
                                alergia/intolerancia?</label>
                            <div style="display: flex; gap: 5px; margin-left: auto; align-items: center;">
                                <input type="radio" id="allergiesYes" name="allergies" value="yes">
                                <label for="allergiesYes" style="margin: 0;">Sí</label>
                                <input type="radio" id="allergiesNo" name="allergies" value="no"
                                    style="margin-right: 5px;">
                                <label for="allergiesNo" style="margin: 0;">No</label>
                            </div>
                        </div>

                        <br>

                        <div id="allergiesDetails" style="display: none;">
                            <label for="allergiesInfo">Por favor, especifica:</label>
                            <input type="text" id="allergiesInfo" name="allergiesInfo"><br><br>
                        </div>

                        <div style="display: flex; align-items: center; width: 100%;">
                            <label for="vegetarian" style="margin-right: 10px; flex: 1;">Menú vegetariano:</label>
                            <div style="display: flex; gap: 5px; margin-left: auto; align-items: center;">
                                <input type="radio" id="vegetarianYes" name="vegetarian" value="yes">
                                <label for="vegetarianYes" style="margin: 0;">Sí</label>
                                <input type="radio" id="vegetarianNo" name="vegetarian" value="no">
                                <label for="vegetarianNo" style="margin: 0;">No</label>
                            </div>
                        </div><br>

                        <div style="display: flex; align-items: center; width: 100%;">
                            <label for="bus" style="margin-right: 10px; flex: 1;">Necesitas autobús hasta el lugar de la
                                boda? (Ida y vuelta)</label>
                            <div style="display: flex; gap: 5px; margin-left: auto; align-items: center;">
                                <input type="radio" id="busYes" name="bus" value="yes">
                                <label for="busYes" style="margin: 0;">Sí</label>
                                <input type="radio" id="busNo" name="bus" value="no">
                                <label for="busNo" style="margin: 0;">No</label>
                            </div>
                        </div><br>
                    </div>
                    <button type="submit">Enviar</button>
                </form>
            </div>
        </div>

        <!-- FIN Pop-Up -->

        <div class="page-container">
            <div class="container-white" style="background-image: url(images/leafs.png);">
                <img src="images/music.png" class="vibrating-image">
                <div> <!-- Ajusta el padding aquí -->
                    <h1>¡Ayúdanos con la música!</h1>
                    <p>La música es clave para disfrutar y queremos asegurarnos de que no faltal tus canciones
                        favoritas. Ya sea un clásico, una canción nueva o ese temazo que siempre te hace bailar.</p>
                    <p>¡Queremos escucharlo en la boda!</p>
                    <a class="button-1" href="" target="_blank">
                        AÑADIR CANCIÓN
                    </a>
                </div>
            </div>
        </div>

        <div class="page-container">
            <div class="container-rose">
                <div style="width: 100%; padding: 0 10vw;"> <!-- Ajusta el padding aquí -->
                    <img src="images/hotel.png" class="vibrating-image">
                    <h1>Hotel Boda</h1>
                    <p>Si necesitas alojamiento para la noche de la boda, te dejamos información del Hotel Boda.
                        A solo 5 minutos en coche de la boda.</p>
                </div>
                <a href="https://www.google.com/maps?q=Bareclona,Spain" class="button-1">VER
                    UBICACIÓN</a>
            </div>
        </div>
        <div class="page-container">
            <div class="container-white">
                <img src="images/gift.png" class="vibrating-image" style="width: 15vh; margin-bottom: 1.5vh;">
                <div> <!-- Ajusta el padding aquí -->
                    <p>No hay mejor regalo que tu presencia en este día tan importante para nosotros.</p>
                    <p>Si también te gustaría ayudarnos con el comienzo de esta etapa, te dejamos este número de cuenta.
                    </p>
                    <h1 id="iban">ES0000000000000000000000</h1>

                    <i class="fa-regular fa-copy" style="font-size: 8vw; font-weight: 100; margin-top: 2vh;"
                        onclick="copyToClipboard()"></i>
                    <div class="empty"></div>
                    <h2 style="font-size: 6vw;">¡Muchas gracias!</h2>
                </div>
            </div>
        </div>
        <footer style="text-align: center; padding: 10px; background-color: #f4f0ed; font-size: 14px;">
            <p>Hecho con ❤️ por <a href="https://www.wedify.io" target="_blank"
                    style="text-decoration: none; color: #007BFF;">Wedify</a></p>
        </footer>
    </div>
    <script>
        window.onload = function () {
            detectDevice();
        };
    </script>


</body>

</html>