Ogestan_Drossagyn_Papilocare/Ogestan_andractiv/contenido/02.html

<style>
    .back0 {
        background-image: url("img/bg02a.jpg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .btn-pop {
        cursor: pointer;
    }

    .pop_lateral {
        background: linear-gradient(180deg, #0064cf, #0064cf);
    }

    .card {
        background: linear-gradient(#0064cf, #00285b);
        color: white;
    }

    .card.completed {
        background: linear-gradient(#8c8f91, #4d5d73);
        color: white;
        border: solid 3px #86d3ff !important;
    }

    /* Marcadores personalizados para listas */
    ul.custom-li {
        list-style: none;
        padding-left: 0;
    }

    ul.custom-li li {
        position: relative;
        padding-left: 2em;
        margin-bottom: 0.5em;
    }

    ul.custom-li li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.4em;
        /* Ajusta este valor para alinear verticalmente */
        width: 1.2em;
        height: 1.2em;
        background-image: url('img/li1.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
    }

    @media(min-width: 768px) {
        .content-pop-lateral {
            grid-template-rows: 1fr !important;
        }

        .pop_lateral {
            grid-template-columns: 1fr !important;
            grid-template-rows: 85% auto !important;
            grid-row: 1 / 1 !important;
            place-self: start !important;
            width: 75% !important;
            height: 100%;
        }
    }
</style>
<style></style>
<div class="page-sco back0 py-3 py-md-4">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-12 col-md-12">
                <div class="row justify-content-center align-items-center">
                    <div class="col-12 col-md-12 mb-md-4 mb-2 animate__animated animate__fadeInDown">
                        <h2 class="text-blue-3 text-center fw-medium">Introducción a OGestan<sup>®</sup> Andractiv</h2>
                        <p>Para comenzar, exploraremos la información esencial de <b
                                class="text-gray-2">OGestan<sup>®</sup> Andractiv</b>.
                            Aquí
                            podrás revisar su <b class="text-gray-2">nombre comercial</b>, su <b
                                class="text-gray-2">presentación</b>, su <b class="text-gray-2">indicación</b> y su
                            <b class="text-gray-2">modo
                                de empleo</b>. Estos elementos forman la base del producto y te permitirán comprender
                            con
                            claridad qué es, cómo se utiliza y a quién está dirigido.
                        </p>
                    </div>
                    <div
                        class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInDown">
                        <div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
                            data-popid="#pop0" data-audio="0">
                            <div class="card-body">
                                <div class="d-flex flex-row justify-content-center align-items-center gap-2">
                                    <img src="img/02.1.png" class="img-fluid">
                                    <h2>Nombre comercial</h2>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div
                        class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInDown">
                        <div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
                            data-popid="#pop1" data-audio="1">
                            <div class="card-body">
                                <div class="d-flex flex-row justify-content-center align-items-center gap-2">
                                    <img src="img/02.2.png" class="img-fluid">
                                    <h2>Presentación</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInUp">
                        <div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
                            data-popid="#pop2" data-audio="2">
                            <div class="card-body">
                                <div class="d-flex flex-row justify-content-center align-items-center gap-2">
                                    <img src="img/02.3.png" class="img-fluid">
                                    <h2>Indicación</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInUp">
                        <div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
                            data-popid="#pop3" data-audio="3">
                            <div class="card-body">
                                <div class="d-flex flex-row justify-content-center align-items-center gap-2">
                                    <img src="img/02.4.png" class="img-fluid">
                                    <h2>Modo de empleo</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="d-none">
    <div id="pop0">
        <div class="container-fluid">
            <div class="row justify-content-center align-items-center">
                <div class="col-12">
                    <div class="row justify-content-center align-items-center">
                        <div class="col-12 col-md-12 col-xl-8 text-start text-white">
                            <h3 class="fw-semibold">Nombre comercial</h3>
                            <ul class="custom-li">
                                <li>OGestan® Andractiv</li>
                                <li>Suplemento alimenticio en cápsulas.</li>
                                <li><b class="text-yellow">Combinación de Antioxidantes, Vitaminas, Minerales y
                                        Omega-3</b> desarrollada para el
                                    hombre.</li>
                            </ul>
                        </div>
                        <div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
                            <img src="img/02.5.png" class="img-fluid floating" alt="Nombre comercial">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pop1">
        <div class="container-fluid">
            <div class="row justify-content-center align-items-center">
                <div class="col-12">
                    <div class="row justify-content-center align-items-center">
                        <div class="col-12 col-md-12 col-xl-8 text-start text-white">
                            <h3 class="fw-semibold">Presentación</h3>
                            <p>Caja de cartón con <b class="text-yellow">30 cápsulas</b> de 1.617gr.</p>
                        </div>
                        <div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
                            <img src="img/02.6.png" class="img-fluid floating" alt="Nombre comercial">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pop2">
        <div class="container-fluid">
            <div class="row justify-content-center align-items-center">
                <div class="col-12">
                    <div class="row justify-content-center align-items-center">
                        <div class="col-12 col-md-12 col-xl-10 text-start text-white">
                            <h3 class="fw-semibold">Indicación</h3>
                            <p>Suplemento alimenticio, para <b class="text-yellow">complementar</b> la alimentación en
                                los hombres.</p>
                        </div>
                        <div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
                            <img src="img/02.7.png" class="img-fluid floating" alt="Nombre comercial">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pop3">
        <div class="container-fluid">
            <div class="row justify-content-center align-items-center">
                <div class="col-12">
                    <div class="row justify-content-center align-items-center">
                        <div class="col-12 col-md-12 col-xl-10 text-start text-white">
                            <h3 class="fw-semibold">Modo de empleo</h3>
                            <ul class="custom-li">
                                <li>Dosis: <b class="text-yellow">1 cápsula al día</b> con algún alimento.</li>
                                <li>Edad: <b>A partir de 18 años</b>.</li>
                                <li><b>No exceder</b> la dosis recomendada.</li>
                            </ul>
                        </div>
                        <div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
                            <img src="img/02.8.png" class="img-fluid floating" alt="Nombre comercial">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        "use strict";
        $('body').addClass('fake');
        const audioh01 = CourseNav.createSound('audio/audioh01.mp3');

        CourseNav.audioController.stopAllSoundsAndPlay(audioh01);

        audioh01.on('play', function () {

            $('.btn-pop').removeClass('disabled');
        });

        audioh01.on('end', function () {
            $('.btn-pop').removeClass('disabled');
        });

        const audios = [
            CourseNav.createSound('audio/audioh02.mp3'),
            CourseNav.createSound('audio/audioh03.mp3'),
            CourseNav.createSound('audio/audioh04.mp3'),
            CourseNav.createSound('audio/audioh05.mp3')
        ];

        $('.btn-pop').click(function (e) {
            e.preventDefault();
            const html = $($(this).data('popid')).html();
            const audio = $(this).data('audio');
            $(this).addClass('completed').removeClass('animate__animated animate__pulse animate__infinite');
            Swal.fire({
                html: html,
                target: "body",
                customClass: {
                    container: 'p-0 content-pop-lateral',
                    popup: 'pop_lateral',
                    htmlContainer: 'd-flex justify-content-center align-items-center',
                    actions: 'my-0',
                    confirmButton: 'btn btn-begin border-3 border-blue-6 text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
                },
                confirmButtonText: "Cerrar",
                showConfirmButton: true,
                allowOutsideClick: false,
                allowEscapeKey: false,
                focusConfirm: false,
                backdrop: "rgba(0, 40, 91, .80)",
                grow: 'fullscreen',
                showClass: {
                    popup: 'animate__animated animate__fadeInLeft animate__faster' // Animación dinámica (derecha/izquierda)
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutLeft animate__faster' // Animación de salida coherente
                },
                didOpen: () => {
                    $('.swal2-confirm').show();
                    CourseNav.audioController.stopAllSoundsAndPlay(audios[audio]);
                    if (CourseNav.isVisited()) {
                        $('.swal2-confirm').show();
                    } else {
                        audios[audio].on('end', function () {
                            $('.swal2-confirm').show();
                        });
                    }
                },
                didClose: () => {
                    CourseNav.audioController.stopAudio();
                    isCompleted();
                },
            });
        });

        function isCompleted() {
            if ($('.btn-pop').length == $('.btn-pop.completed').length) {
                CourseNav.setSlideVisited();
            }
        }


    });
</script>