<!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 Melina Y Kevin</title>

    <!-- Meta etiquetas Open Graph para redes sociales -->
    <meta property="og:title" content="Boda Melina y Kevin">
    <meta property="og:image" content="https://melinaykevin.web.app/images/share.png">
    <meta property="og:url" content="https://melinaykevin.web.app">
    <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 de la boda de Melina y Kevin, 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.500);">
        </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"
            style="height: 85vh; background-image: url('images/index.png'); background-position: center; background-repeat: no-repeat; background-size: contain;">



        </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>
        <!-- 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>Finca La Estación</h1>
                    <p style="margin: 0px;">Calle de la Estación 14,</p>
                    <p style="margin: 0px;">Otero de Herreros, Spain 40422</p>
                    <h1 style="font-size: 10vw;">18:00h</h1>
                    <a href="https://www.google.com/maps?q=Finca,+40422+La+Estación,+Segovia" 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>18:30hs</h3>
            <p class="timeline">Ceremonia</p>
            <hr>
            <img src="images/reception.png" class="sliding-image-right">
            <h3>19:30hs</h3>
            <p class="timeline">Recepción/Cocktail</p>
            <hr>
            <img src="images/lunch.png" class="sliding-image-left">
            <h3>21:00hs</h3>
            <p class="timeline">Cena</p>
            <hr>
            <img src="images/party.png" class="sliding-image-right">
            <h3>22:00hs</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 puedas acompañarnos en un día tan especial para nosotros!</p>
                    <p>Por favor completa el formulario de asistencia para ayudarnos a organizar nuestro día.</p>
                    <p>¡Muchas gracias!</p>
                </div>
                <a id="openModal" class="button-1">RSVP</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 a alguna comida?</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 desde el hotel
                                Segovia Sierra de Guadarrama 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 style="display: flex; align-items: center; width: 100%;">
                            <label for="companion" style="margin-right: 10px; flex: 1;">¿Vendrás con
                                acompañante?</label>
                            <div style="display: flex; gap: 5px; margin-left: auto; align-items: center;">
                                <input type="radio" id="companionYes" name="companion" value="yes">
                                <label for="companionYes" style="margin: 0;">Sí</label>
                                <input type="radio" id="companionNo" name="companion" value="no">
                                <label for="companionNo" style="margin: 0;">No</label>
                            </div>
                        </div><br>

                        <div id="companionDetails" style="display: none;">
                            <label for="companionName" style="margin-right: 10px;">Nombre y apellidos
                                acompañante:</label>
                            <input type="text" id="companionName" name="companionName"><br><br>

                            <div style="display: flex; align-items: center; width: 100%;">
                                <label for="companionAllergies" style="margin-right: 10px; flex: 1;">¿Tu acompañante
                                    tiene alergia/intolerancia a alguna comida?</label>
                                <div style="display: flex; gap: 5px; margin-left: auto; align-items: center;">
                                    <input type="radio" id="companionAllergiesYes" name="companionAllergies"
                                        value="yes">
                                    <label for="companionAllergiesYes" style="margin: 0;">Sí</label>
                                    <input type="radio" id="companionAllergiesNo" name="companionAllergies" value="no">
                                    <label for="companionAllergiesNo" style="margin: 0;">No</label>
                                </div>
                            </div><br>

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

                            <div style="display: flex; align-items: center; width: 100%;">
                                <label for="companionVegetarian" 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="companionVegetarianYes" name="companionVegetarian"
                                        value="yes">
                                    <label for="companionVegetarianYes" style="margin: 0;">Sí</label>
                                    <input type="radio" id="companionVegetarianNo" name="companionVegetarian"
                                        value="no">
                                    <label for="companionVegetarianNo" style="margin: 0;">No</label>
                                </div>
                            </div><br>

                            <div style="display: flex; align-items: center; width: 100%;">
                                <label for="companionBus" style="margin-right: 10px; flex: 1;">¿Necesita autobús tu
                                    acompañante?</label>
                                <div style="display: flex; gap: 5px; margin-left: auto; align-items: center;">
                                    <input type="radio" id="companionBusYes" name="companionBus" value="yes">
                                    <label for="companionBusYes" style="margin: 0;">Sí</label>
                                    <input type="radio" id="companionBusNo" name="companionBus" value="no">
                                    <label for="companionBusNo" style="margin: 0;">No</label>
                                </div>
                            </div>
                        </div>
                    </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/leafs2.png);">
                <img src="images/music.png" class="vibrating-image">
                <div> <!-- Ajusta el padding aquí -->
                    <h1>¡Ayúdanos con la música!</h1>
                    <p>Tendremos un gran DJ que se va a asegurar de que suenen todos los temazos
                        que no pueden faltar, pero queremos que nos ayudes a que tu canción favorita suene el día de
                        nuestra
                        boda.</p>
                    <a class="button-1" href="https://festify.us/party/-ODlD4o4i8tpOzrNBxlM" 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 Segovia Sierra de Guadarrama</h1>
                    <p>Si necesitas alojamiento para la noche de la boda, te dejamos información del Hotel Segovia
                        Sierra de
                        Guadarrama, a 7 minutos en coche del lugar de la boda, con tarifas especiales para nuestros
                        invitados.</p>
                </div>
                <a href="https://www.google.com/maps?q=Hotel+Segovia+Sierra+de+Guadarrama,+Segovia,+España"
                    class="button-1">VER UBICACIÓN</a>
                <a href="media/hotel.pdf" class="button-1" download="hotel.pdf">INFORMACIÓN RESERVAS HOTEL</a>
                <a href="media/segovia.pdf" class="button-1" download="segovia.pdf">QUE HACER EN SEGOVIA</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">ES3801821294100206332170</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>
    </div>
    <script>
        window.onload = function () {
            detectDevice();
        };
    </script>

</body>

</html>