Ogestan_Drossagyn_Papilocare/Ogestan_andractiv/contenido/06.html

<style>
    .back0 {
        background: #0367d1;
        /* background-color: #fff; */
    }

    /* 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: 0em;
        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;
    }

    .bg-gra1 {
        background: linear-gradient(180deg, #0064cf, #37adff);
    }

    .bg-gra2 {
        background: linear-gradient(0deg, #8c8f91, #4d5d73);
    }

    .full-screen {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: max-content;
    }

    .wrapper-card {
        display: inline-flex;
        border-radius: 30px;
        background-color: transparent;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        -webkit-transition: background-color 0.5s ease;
        -moz-transition: background-color 0.5s ease;
        -o-transition: background-color 0.5s ease;
        transition: background-color 0.5s ease;
        width: 75%;
    }

    [data-popid="#pop-dexeed"]:hover {
        background-color: var(--bs-azul);
        color: #fff !important;
    }

    [data-popid="#pop-otros"]:hover {
        background-color: var(--bs-rosa);
        color: #fff !important;
    }

    .full-screen .middle {
        padding: 0;
        margin: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .rounded-15 {
        border-radius: 35px;
    }

    @media (min-width: 768px) {
        .full-screen {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
        }

        .eletxt {
            display: flex;
            flex-direction: row;
            position: absolute;
            width: 100%;
            margin: 0 auto;
            z-index: 5;
            text-align: center;
        }

        .pop-type0-new {
            width: 80%;
        }
    }

    @media (min-width: 1200px) {
        .pop-type0-new {
            width: 60%;
        }
    }
</style>
<div class="w-100 page-sco back0 h-100 p-0">
    <div class="full-screen">
        <div class="eletxt">
            <div class="w-100 text-center mt-md-4 mt-2 animate__animated animate__fadeInDown">
                <h2 class="fw-semibold text-blue-4"><span class="bg-white border-3 rounded-15 border border-blue-7 py-2 px-4">Competidores</span></h2>
            </div>
        </div>
        <div class="middle bg-gra1 animate__animated animate__fadeInLeft">
            <div data-popid="#pop-dexeed" data-audio="audioh21"
                data-backdrop="url(img/pool.webp) no-repeat center / cover"
                class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-azul">
                <!-- <i class="fa-regular fa-sack"></i>
                <div>DAXEED</div> -->
                <img src="img/06.1.png" alt="Dexeed Logo" class="img-fluid">
            </div>
        </div>
        <div class="middle bg-gra2 animate__animated animate__fadeInRight">
            <div data-popid="#pop-otros" data-backdrop="url(img/semilla.webp) no-repeat center / cover"
                data-audio="audioh22"
                class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-magenta">
                <!-- <i class="fa-regular fa-hand-holding-seedling"></i>
                <div>OTROS​</div> -->
                <img src="img/06.2.png" alt="Otros Logo" class="img-fluid">
            </div>
        </div>
    </div>
</div>
<div class="d-none">
    <div id="pop-dexeed">
        <div class="d-flex justify-content-center align-items-center flex-column align-self-center">
            <div class="container">
                <div class="row justify-content-center align-items-center">
                    <div class="col-12 col-md-10 col-xl-8">
                        <ul class="text-start custom-li">
                            <li>Comercializado por Corne.</li>
                            <li>8 componentes: antioxidantes, aminoácidos, vitaminas y zinc.</li>
                            <li><b class="text-orange-1">No contiene Omega-3.</b></li>
                            <li><b class="text-orange-1">No contiene Selenio.</b></li>
                            <li>Ácido fólico estándar.</li>
                            <li>Alto costo.</li>
                            <li>Limitada disponibilidad en puntos de venta.</li>
                            <li>Sin promoción médica.</li>
                            <li>Presentación en sobres.</li>
                        </ul>
                    </div>
                    <div class="col-12 col-md-5 col-xl-4">
                        <img src="img/06.1.png" class="img-fluid">
                    </div>
                </div>
            </div>
            <!-- <div class="w-100 text-center mt-4 pb-4">
                <div class="btn btn-mango text-white" onclick="Swal.close()">Cerrar</div>
            </div> -->
        </div>
    </div>
    <div id="pop-otros">
        <div class="d-flex justify-content-center align-items-center flex-column align-self-center">
            <div class="container">
                <div class="row justify-content-center align-items-center">
                    <div class="col-12 col-md-10 col-xl-8 text-center">
                        <ul class="text-start custom-li">
                            <li>Fabricantes <b class="text-orange-1"> establecidos, ni reconocidos</b> en México.</li>
                            <li>Venta sólo por E-commerce y enviados desde el extranjero.</li>
                            <li><b class="text-orange-1">Sin permisos</b> por la autoridad mexicana.</li>
                            <li><b class="text-orange-1">Sin respaldo</b> o soporte científico.</li>
                            <li>Calidad cuestionable.</li>
                            <li>Altos costos de envío.</li>
                        </ul>
                    </div>
                    <div class="col-12 col-md-5 col-xl-4">
                        <img src="img/06.2.png" class="img-fluid">
                    </div>
                </div>
            </div>
            <!-- <div class="w-100 text-center mt-4 pb-4">
                <div class="btn btn-mango text-white" onclick="Swal.close()">Cerrar</div>
            </div> -->
        </div>
    </div>
</div>
<script>
    $(function () {
        const audioh20 = CourseNav.createSound("audio/audioh20.mp3");
        const audioh21 = CourseNav.createSound("audio/audioh21.mp3");
        const audioh22 = CourseNav.createSound("audio/audioh22.mp3");

        audioh20.on("end", () => {
            $(".wrapper-card").removeClass("disabled");
        });
        setTimeout(() => {
            CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
        }, 100);

        audioh22.on("end", function () {

        });
        audioh21.on("end", function () {

        });

        $(".wrapper-card").click(function () {
            $(this).removeClass("animate__animated animate__pulse animate__infinite").addClass("visited");

            const $element = $(this);

            // Validación del HTML del pop-up
            const popId = $element.data("popid");
            const html = popId && $(popId).length ? $(popId).html() : "";

            // Validación del audio
            let audio = null;
            const audioData = $element.data("audio");
            if (audioData) {
                try {
                    audio = eval(audioData);
                    CourseNav.audioController.stopAllSoundsAndPlay(audio);
                } catch (error) {
                    console.error(`Error al evaluar el audio: ${audioData}`, error);
                }
            }

            // Validación de la clase personalizada
            const customClass = $element.data("customclass") || "";

            const backDrop = $element.data("backdrop") ? $element.data("backdrop") : true;
            // Validación de la función onclose
            let onclose = null;
            const oncloseData = $element.data("onclose");
            if (oncloseData) {
                try {
                    onclose = eval(oncloseData);
                    if (typeof onclose !== "function") {
                        console.warn(`El valor de onclose no es una función: ${oncloseData}`);
                        onclose = null;
                    }
                } catch (error) {
                    console.error(`Error al evaluar onclose: ${oncloseData}`, error);
                }
            }

            // const showConfirmButton = CourseNav.isVisited();

            Swal.fire({
                html: html,
                target: "body",
                customClass: `pop_class`,
                showConfirmButton: false,
                showCloseButton: false,
                closeButtonHtml: "",
                showDenyButton: false,
                showCancelButton: false,
                allowOutsideClick: false,
                allowEscapeKey: false,
                focusConfirm: false,
                confirmButtonText: "Cerrar",
                customClass: {
                    popup: 'pop-type0-new bg-transparent p-0',
                    htmlContainer: 'html-pop-style p-3',
                    confirmButton: 'btn btn-begin border-3 border-blue-6 text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
                },
                // backdrop: backDrop,
                willOpen: () => {
                    $('.swal2-actions').show();
                    $('.swal2-confirm').show();

                },
                didOpen: null,
                didRender: null,
                willClose: () => {
                    CourseNav.audioController.stopAudio();
                },
                didClose: onAllSlidesVisited,
                didDestroy: null,
            });
        });

        function onAllSlidesVisited() {
            if ($(".wrapper-card").length === $(".wrapper-card.visited").length) {
                CourseNav.setSlideVisited();
            }
        }
    });
</script>