Tul xxx Tul

Viewing: index.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="http://emprendo.com.co/eComercial/assets/img/Favicon-s.png" type="image/png">
    <title>eComercial Intercontinental</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <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=Jost:wght@100..900&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }

        header {
            margin-bottom: 20px;
            position: relative;
            z-index: 2;
        }

        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 102%;
            object-fit: cover;
            z-index: 1;
        }

        .card {
            margin: 15px;
            transition: transform 0.3s;
        }

        .card:hover {
            transform: scale(1.05);
        }

        .card-img-top {
            height: 280px;
            object-fit: cover;
        }

        .card-img-banner {
            width: 100%;
            height: 800px;
            object-fit: cover;
        }

        .card-img-mp {
            height: 200px;
            object-fit: contain;
            padding: 20px;
        }

        .btn {
            color: white;
            margin-right: 5px;
            font-size: 0.8rem;
        }

        .btn-play {
            background-color: #28a745;
        }

        .btn-pause {
            background-color: #ffc107;
        }

        .btn-stop {
            background-color: #dc3545;
        }

        .features,
        .pricing {
            margin-top: 30px;
            padding: 20px;
            border-radius: 8px;
        }

        .features {
            background-color: #e9ecef;
        }

        .pricing {
            background-color: #d3f9d8;
        }

        .pricing-item {
            background-color: #fff;
            border: 1px solid #28a745;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
        }

        #header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 10px 0;
            transition: background-color 0.3s ease;
        }

        #header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        #header.scrolled::before {
            opacity: 1;
        }

        #logo {
            width: 250px;
            transition: width 0.3s ease;
            display: block;
            margin: 0 auto;
        }

        #logo.shrink {
            width: 200px;
        }

        .header-placeholder {
            height: 80px;
        }

        .card {
            transition: transform 0.3s ease-in-out;
        }

        .card:hover {
            transform: scale(1.05);
        }

        .card-header {
            background-color: #007bff;
            color: white;
        }

        .card-footer {
            background-color: #f8f9fa;
        }

        .jost-custom {
            font-family: "Jost", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
        }

        h1,
        h2 {
            color: #007bff;
        }

        /* Nuevo estilo para el botón flotante */
        #toggleSeekBarButton {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1001;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        #toggleSeekBarButton:hover {
            background-color: #0056b3;
        }

        /* Ocultar inicialmente el control deslizante */
        #globalAudioSeekContainer {
            position: fixed;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: none;
            /* Ocultar inicialmente */
        }

        /* Nuevo estilo para el botón flotante */
        #stopAudioButton {
            position: fixed;
            bottom: 20px;
            right: 80px;
            /* Ajusta la posición si es necesario */
            z-index: 1001;
            background-color: #dc3545;
            /* Color rojo */
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        #stopAudioButton:hover {
            background-color: #c82333;
            /* Color rojo más oscuro al pasar el mouse */
        }

        .list-group-item.active-item {
            background-color: #007bff;
            /* Color destacado */
            color: white;
            /* Texto blanco para contraste */
            transform: scale(1.05);
            /* Aumentar tamaño al estar activo */
        }

        .list-group-item {
            transition: transform 0.3s;
            /* Transición suave */
        }

        .list-group-item:hover {
            transform: scale(1.02);
            /* Efecto hover */
        }

        .btn-play,
        .btn-download {
            margin-left: 10px;
            /* Espaciado entre botones */
            background-color: #28a745;
            /* Color del botón de reproducir */
            color: white;
            /* Color del texto del botón */
            border: none;
            /* Sin borde */
            border-radius: 5px;
            /* Bordes redondeados */
            cursor: pointer;
            /* Cambiar cursor al pasar */
        }

        .btn-download {
            background-color: #dc3545;
            /* Color del botón de descarga */
        }

        .float-end {
            float: right;
            /* Alinear botones a la derecha */
        }

        /* Estilos personalizados */
        .btn-custom {
            font-size: 1.5rem;
            /* Aumenta el tamaño de la fuente */
            padding: 10px 20px;
            /* Aumenta el padding para hacer el botón más grande */
        }

        /* Estilos para el modal */
        .modal {
            display: none;
            /* Oculta el modal por defecto */
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
            /* Fondo semitransparente */
        }

        /* Contenedor del contenido del modal */
        .modal-content {
            position: relative;
            margin: auto;
            width: 90%;
            /* Ajuste responsivo */
            max-width: 1080px;
            /* Tamaño máximo */
            background-color: transparent;
            /* Fondo transparente para resaltar el video */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        /* Video dentro del modal */
        .modal video {
            width: auto;
            height: 90%;
            /* Altura del video */
            max-height: 90%;
            /* Asegura que no se desborde */
            object-fit: contain;
            /* Mantiene la proporción del video */
            border: 0px solid white;
            /* Bordes blancos */
            border-radius: 10px;
            /* Bordes redondeados */
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
            /* Efecto de sombra */
        }

        /* Botón de cierre */
        .close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            text-shadow: 0 0 5px black;
            cursor: pointer;
            z-index: 1001;
        }

        .close:hover,
        .close:focus {
            color: #ccc;
            text-decoration: none;
            cursor: pointer;
        }
        #closeFullScreen {
    display: none; /* Inicialmente oculto */
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

#closeFullScreen:hover {
    background: rgba(255, 255, 255, 0.7);
    color: black;
}

/* Mostrar botón solo en dispositivos móviles */
@media (max-width: 768px) {
    #closeFullScreen {
        display: flex;
    }
}

    </style>
</head>

<body>
    <header id="header">
        <img id="logo" src="http://emprendo.com.co/eComercial/assets/img/eComercial.png" alt="Logo eComercial">
    </header>

    <button id="stopAudioButton" onclick="stopSound()">
        <i class="fas fa-stop"></i>
    </button>
    <button id="toggleSeekBarButton" onclick="toggleSeekBar()">
        <i class="fas fa-music"></i>
    </button>

    <div>
        <img src="https://emprendo.com.co/eComercial/intercontinental/intercontinental.jpg" class="card-img-banner" alt="ModaCell">
        <div
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, white, transparent); z-index: 1;">
        </div>
    </div>

    <div class="container py-5">
        <h1 class="text-center mb-5">Mis Contenidos</h1>
        <div class="row">
            <!-- Spots Publicitarios -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center">
                        <h5 class="card-title">Spots Publicitarios</h5>
                    </div>
                    <div class="card-body">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Spots.png" alt="Canciones"
                            style="display: block; margin: 0 auto;" height="100">
                        <br>
                        <ul class="list-group" id="playlist">
                            
                            <li class="list-group-item gallery-item"
                                data-src="https://emprendo.com.co/eComercial/intercontinental/JingleIntercontinental.mp3" id="item1">
                                Jingle Intercontinental
                                <div class="float-end">
                                    <button class="btn btn-play"
                                        onclick="playSound(this.parentElement.parentElement.getAttribute('data-src'), this.parentElement.parentElement)"><i
                                            class="fas fa-play"></i></button>
                                    <a href="https://emprendo.com.co/eComercial/intercontinental/JingleIntercontinental.mp3" download
                                        class="btn btn-download"><i class="fas fa-download"></i></a>
                                </div>
                            </li>
                            
                            <!--<li class="list-group-item gallery-item"
                                data-src="https://emprendo.com.co/eComercial/intercontinental/ModaCellSpot.mp3" id="item1">
                                ModaCell Spot
                                <div class="float-end">
                                    <button class="btn btn-play"
                                        onclick="playSound(this.parentElement.parentElement.getAttribute('data-src'), this.parentElement.parentElement)"><i
                                            class="fas fa-play"></i></button>
                                    <a href="https://emprendo.com.co/eComercial/intercontinental/ModaCellSpot.mp3" download
                                        class="btn btn-download"><i class="fas fa-download"></i></a>
                                </div>
                            </li>-->
                            
                        </ul>
                        <br>
                        <h5 class="text-center" style="color: #0056b3;">Beneficios</h5>

                            <ul class="list-unstyled">
                                <li>🔊 Guiones originales</li>
                                <li>🔊 100 % personalizadas</li>
                                <li>🔊 Grabación HD</li>
                                <li>🔊 Edición Mezcla y Master</li>
                                <li>🔊 Derechos de Explotación y Uso</li>
                                <li>🔊 Adaptabilidad Multiplataformas</li>
                            </ul>
                    </div>
                    <!-- <div class="card-footer text-center">
                        <a href="#" class="btn btn-primary" onclick="downloadAll()">Descargar Todos</a>
                    </div> -->
                </div>
            </div>
            <!-- Canciones Temáticas -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center">
                        <h5 class="card-title">Canciones Temáticas</h5>
                    </div>
                    <div class="card-body">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Canciones.png" alt="Canciones"
                            style="display: block; margin: 0 auto;" height="100">
                        <br>
                        <ul class="list-group" id="playlist">
                            <li class="list-group-item gallery-item"
                                data-src="https://emprendo.com.co/eComercial/intercontinental/IntercontinentalTechnology.mp3" id="item1">
                                Intercontinental
                                <div class="float-end">
                                    <button class="btn btn-play"
                                        onclick="playSound(this.parentElement.parentElement.getAttribute('data-src'), this.parentElement.parentElement)"><i
                                            class="fas fa-play"></i></button>
                                    <a href="https://emprendo.com.co/eComercial/intercontinental/IntercontinentalTechnology.mp3" download
                                        class="btn btn-download"><i class="fas fa-download"></i></a>
                                </div>
                            </li>
                            
                            <li class="list-group-item gallery-item"
                                data-src="https://emprendo.com.co/eComercial/intercontinental/InnovacionsinFronterasA.mp3" id="item1">
                                Innovación sin Fronteras A
                                <div class="float-end">
                                    <button class="btn btn-play"
                                        onclick="playSound(this.parentElement.parentElement.getAttribute('data-src'), this.parentElement.parentElement)"><i
                                            class="fas fa-play"></i></button>
                                    <a href="https://emprendo.com.co/eComercial/intercontinental/InnovacionsinFronterasA.mp3" download
                                        class="btn btn-download"><i class="fas fa-download"></i></a>
                                </div>
                            </li>
                            
                            <li class="list-group-item gallery-item"
                                data-src="https://emprendo.com.co/eComercial/intercontinental/InnovacionsinFronterasB.mp3" id="item1">
                                Innovación sin Fronteras B
                                <div class="float-end">
                                    <button class="btn btn-play"
                                        onclick="playSound(this.parentElement.parentElement.getAttribute('data-src'), this.parentElement.parentElement)"><i
                                            class="fas fa-play"></i></button>
                        <a href="https://emprendo.com.co/eComercial/intercontinental/InnovacionsinFronterasB.mp3" download
                                        class="btn btn-download"><i class="fas fa-download"></i></a>
                                </div>
                            </li>
                            
                            <li class="list-group-item gallery-item"
                                data-src="https://emprendo.com.co/eComercial/intercontinental/NavidadIntercontinentalA.mp3" id="item1">
                                Navidad Intercontinental A
                                <div class="float-end">
                                    <button class="btn btn-play"
                                        onclick="playSound(this.parentElement.parentElement.getAttribute('data-src'), this.parentElement.parentElement)"><i
                                            class="fas fa-play"></i></button>
                    <a href="https://emprendo.com.co/eComercial/intercontinental/NavidadIntercontinentalA.mp3" download
                                        class="btn btn-download"><i class="fas fa-download"></i></a>
                                </div>
                            </li>
                            
                            <li class="list-group-item gallery-item"
                                data-src="https://emprendo.com.co/eComercial/intercontinental/NavidadIntercontinentalB.mp3" id="item1">
                                Navidad Intercontinental B
                                <div class="float-end">
                                    <button class="btn btn-play"
                                        onclick="playSound(this.parentElement.parentElement.getAttribute('data-src'), this.parentElement.parentElement)"><i
                                            class="fas fa-play"></i></button>
                    <a href="https://emprendo.com.co/eComercial/intercontinental/NavidadIntercontinentalB.mp3" download
                                        class="btn btn-download"><i class="fas fa-download"></i></a>
                                </div>
                            </li>
                        </ul>
                        <br>
                        <h5 class="text-center" style="color: #0056b3;">Beneficios</h5>
                            <br>
                            <ul class="list-unstyled">
                                <li>🎶 Letras originales</li>
                                <li>🎶 100% personalizadas</li>
                                <li>🎶 Variedad de Géneros Musicales</li>
                                <li>🎶 Creación iA última generación</li>
                                <li>🎶 Edición Mezcla y Master</li>
                                <li>🎶 Derechos de Explotación y Uso</li>
                                <li>🎶 Adaptabilidad Multiplataformas</li>
                            </ul>
                    </div>
                    <!-- <div class="card-footer text-center">
                        <a href="#" class="btn btn-primary">Elegir</a>
                    </div> -->
                </div>
            </div>
            <!-- Videos -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center">
                        <h5 class="card-title">Video Publicitario</h5>
                    </div>
                    <div class="card-body">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Video.png" alt="Canciones"
                            style="display: block; margin: 0 auto;" height="100">
                        
                        <br>
                        <ul class="list-group" id="videoPlaylist">
                            <li class="list-group-item gallery-item"
                                data-video="">
                                Adquiere tu video
                                <div class="float-end">
<!-- <button class="btn btn-play"
                                        onclick="playVideo(this.parentElement.parentElement.getAttribute('data-video'))">
                                        <i class="fas fa-play"></i>
                                    </button>-->
                                </div>
                            </li>
                        </ul>
                        <br>
                        <h5 class="text-center" style="color: #0056b3;">Beneficios</h5>
                        <br>
                        <ul class="list-unstyled">
                            <li>🎥 Concepto Creativo y Guion</li>
                            <li>🎥 Grabación en Full HD</li>
                            <li>🎥 Animaciones y Efectos</li>
                            <li>🎥 Edición y Postproducción</li>
                            <li>🎥 Adaptabilidad Multiplataformas</li>
                            <li>🎥 Derechos de Explotación y Uso</li>
                        </ul>
                    </div>
                    <!-- <div class="card-footer text-center">
                        <a href="https://emprendo.com.co/eComercial/factura/?code=241221-0002" class="btn btn-primary btn-custom" target="_blank">Abrir</a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>

    <div class="container">

        <h1 class="text-center mb-4">Mi Factura</h1>

        <div class="card-footer text-center">
            <a href="https://emprendo.com.co/eComercial/factura/?code=250110-0004" class="btn btn-primary btn-custom"
                target="_blank">Abrir</a>
        </div>


        <h1 class="text-center" style="color: #007bff;">Haz que tu negocio resuene.</h1>


        <h2 class="text-center" style="color: #007bff;">¡Impulsa tu marca y conecta con tus clientes!
        </h2>
    </div>

    <!-- Add Modal for Video -->
   <div id="videoModal" class="modal">
    <span class="close" onclick="closeVideoModal()">&times;</span>
    <div class="modal-content">
        <video id="modalVideo" controls loop>
            <source src="" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <button id="closeFullScreen" class="btn-close" onclick="closeVideoModal()">Cerrar</button>
    </div>
</div>


    <footer class="text-center my-4">
        <p>© 2024 <a href="https://www.emprendo.com.co/" target="_blank" class="text-blue-600 hover:underline"
                style="color: #ff3900;">eMprendo</a>. Todos los derechos reservados</p>
    </footer>

    <div id="globalAudioSeekContainer">
        <input type="range" id="globalAudioSeek" value="0" min="0" max="100" step="1" onchange="seekAudio(this.value)">
    </div>

    <script>
        let currentAudio = null;
        const audioFiles = []; // Array para almacenar los archivos de audio

        function playSound(soundFile) {
            if (currentAudio) {
                currentAudio.pause();
            }
            currentAudio = new Audio(soundFile);
            currentAudio.play();
            audioFiles.push(currentAudio); // Agregar el audio actual al array
            updateGlobalSeek(); // Actualizar el control deslizante global
        }

        function stopSound() {
            if (currentAudio) {
                currentAudio.pause();
                currentAudio.currentTime = 0;
            }
        }

        function seekAudio(value) {
            audioFiles.forEach(audio => {
                if (audio) {
                    const duration = audio.duration;
                    audio.currentTime = (value / 100) * duration;
                }
            });
        }

        // Actualiza el control deslizante global mientras se reproduce el audio
        function updateGlobalSeek() {
            setInterval(() => {
                if (currentAudio) {
                    const seekBar = document.getElementById('globalAudioSeek');
                    seekBar.value = (currentAudio.currentTime / currentAudio.duration) * 100;
                }
            }, 1000);
        }

        window.onscroll = function () {
            const header = document.getElementById("header");
            const logo = document.getElementById("logo");
            if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
                header.classList.add("scrolled");
                logo.classList.add("shrink");
            } else {
                header.classList.remove("scrolled");
                logo.classList.remove("shrink");
            }
        };


        // Función para mostrar/ocultar el control deslizante global
        function toggleSeekBar() {
            var seekBarContainer = document.getElementById("globalAudioSeekContainer");
            if (seekBarContainer.style.display === "none" || seekBarContainer.style.display === "") {
                seekBarContainer.style.display = "block";
            } else {
                seekBarContainer.style.display = "none";
            }
        }

        function playVideo(videoUrl) {
    // Detener el audio actual si está reproduciéndose
    if (currentAudio) {
        currentAudio.pause();
        currentAudio.currentTime = 0; // Reiniciar el audio
    }

    // Mostrar el modal de video
    const modal = document.getElementById('videoModal');
    const modalVideo = document.getElementById('modalVideo');
    
    modalVideo.src = videoUrl; // Establecer la fuente del video
    modal.style.display = 'block'; // Mostrar el modal
    modalVideo.play(); // Reproducir el video

    // Detectar dispositivo móvil y activar pantalla completa
    if (isMobileDevice()) {
        requestFullScreen(modalVideo);
    }
}

// Función para cerrar el modal y salir de pantalla completa
function closeVideoModal() {
    const modal = document.getElementById('videoModal');
    const modalVideo = document.getElementById('modalVideo');

    modalVideo.pause();
    modalVideo.src = ''; // Limpiar la fuente del video
    modal.style.display = 'none';

    // Salir de pantalla completa si está activo
    if (document.fullscreenElement || document.webkitFullscreenElement) {
        exitFullScreen();
    }
}

// Función para salir de pantalla completa
function exitFullScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) { // Safari y Chrome en iOS
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) { // Edge
        document.msExitFullscreen();
    }
}

// Función para verificar si es un dispositivo móvil
function isMobileDevice() {
    return /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// Función para solicitar pantalla completa
function requestFullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) { // Safari y Chrome en iOS
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { // Edge
        element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) { // Firefox
        element.mozRequestFullScreen();
    }

    // Mostrar botón de cerrar en pantalla completa
    const closeButton = document.getElementById('closeFullScreen');
    closeButton.style.display = 'flex';
}




        function closeVideoModal() {
            const modal = document.getElementById('videoModal');
            const modalVideo = document.getElementById('modalVideo');

            modalVideo.pause();
            modalVideo.src = '';
            modal.style.display = 'none';
        }

        // Close modal when clicking outside
        window.onclick = function (event) {
            const modal = document.getElementById('videoModal');
            if (event.target == modal) {
                closeVideoModal();
            }
        }

        // Add escape key listener for closing modal
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                closeVideoModal();
            }
        });

    </script>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>


</body>

</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64