2025-09-11 16:48:41 -06:00
<!DOCTYPE html>
< html lang = "es" >
< head >
< meta charset = "UTF-8" / >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" / >
< meta name = "theme-color" content = "#FFA300" / >
< meta name = "mobile-web-app-capable" content = "yes" / >
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" / >
< link rel = "icon" href = "img/favicon.ico" / >
< title > < / title >
< link rel = "stylesheet" href = "css/all.css" / >
< link rel = "stylesheet" href = "css/animate.css" / >
< link rel = "stylesheet" href = "css/sweetalert2.min.css" / >
< link rel = "stylesheet" href = "css/swiper-bundle.min.css" / >
< link rel = "stylesheet" href = "font/arial/stylesheet.css" / >
< link rel = "stylesheet" href = "css/theme.min.css" / >
< link rel = "stylesheet" href = "css/style.min.css" / >
< / head >
< body >
< div class = "wrap-course-adaptive overflow-hidden" >
< div class = "wrap-course-content" id = "wrap-course-content" >
2025-09-18 11:58:18 -06:00
< header >
2025-09-25 14:12:38 -06:00
< nav class = "navbar navbar-light bg-transparent sticky-top shadow-none py-0" id = "coursenav-navbar" >
2025-12-05 10:31:16 -06:00
< div class = "container-fluid d-flex align-items-center ps-0 pe-3" >
< div class = "advertencia small bg-verde2 px-3 py-2 text-verde-pino" style = "border-top-right-radius: 30px;border-bottom-right-radius: 30px;" > “ESTE MATERIAL ES CON FINES EDUCATIVOS”< / div >
2025-09-11 16:48:41 -06:00
<!-- Logo -->
2025-09-18 11:58:18 -06:00
< a class = "navbar-brand p-0 disabled ms-auto" href = "#" >
< img src = "img/template/logo.svg" width = "133" alt = "Logo" / >
2025-09-11 16:48:41 -06:00
< / a >
2025-09-18 11:58:18 -06:00
< div class = "flex-grow-1 d-none" > < / div >
< div class = "d-flex align-items-center d-none" >
2025-09-11 16:48:41 -06:00
<!-- Audio Control -->
< button id = "coursenav-audio-control" class = "btn controls-btn me-2" aria-label = "Toggle audio" >
< div class = "position-relative" >
< svg viewBox = "0 0 100 100" class = "w-100 h-100" >
< circle cx = "50" cy = "50" r = "45" stroke = "#e9ecef" stroke-width = "10" fill = "none" / >
< circle id = "coursenav-progress-circle" cx = "50" cy = "50" r = "45" stroke = "#FFA300" stroke-width = "10" fill = "none" stroke-dasharray = "283" stroke-dashoffset = "283" / >
< / svg >
< i id = "coursenav-audio-icon" class = "fa-duotone fa-solid fa-volume" > < / i >
< / div >
< / button >
<!-- Offcanvas Toggle -->
< button
class="btn controls-btn"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#coursenav-offcanvas"
aria-controls="coursenav-offcanvas"
aria-label="Open navigation"
>
< i class = "fa-duotone fa-solid fa-bars-staggered fa-lg" > < / i >
< / button >
< / div >
< / div >
< / nav >
< / header >
<!-- OFFCANVAS DESDE DERECHA -->
< div class = "offcanvas offcanvas-start bg-primary text-white" tabindex = "-1" id = "coursenav-offcanvas" aria-labelledby = "coursenav-offcanvas-label" data-bs-backdrop = "false" >
< div class = "offcanvas-header" >
< h5 id = "coursenav-offcanvas-label" class = "offcanvas-title" > Índice< / h5 >
< button
style="background: url('img/template/close2.webp'); background-repeat: no-repeat"
type="button"
class="btn-close text-white"
data-bs-dismiss="offcanvas"
aria-label="Close"
>< / button >
< / div >
< div class = "offcanvas-body d-flex flex-column p-0" >
< div class = "w-100 text-center my-2" >
< img src = "img/template/logo.svg" width = "133" / >
< / div >
<!-- Menú principal -->
< nav id = "coursenav-main-menu" class = "course-menu flex-grow-1 overflow-auto px-3" >
<!-- buildMenu() inyecta aquí -->
< / nav >
<!-- Progreso -->
< div class = "w-100 px-3 pb-3" >
< span class = "small" > Progreso< / span >
< div class = "progress" style = "height: 20px" >
< div
id="coursenav-progress-bar"
class="progress-bar progress-bar-striped progress-bar-animated bg-secondary"
role="progressbar"
style="width: 0%"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
>
0%
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- CONTENIDO DINÁMICO -->
< main id = "coursenav-main-content" > < / main >
<!-- FOOTER -->
< footer class = "bg-cafe d-flex justify-content-around flex-row gap-4" style = "position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10" >
< div class = "d-inline-flex justify-content-center flex-row bg-transparent text-white" id = "wrap-course-controls" >
<!-- Offcanvas Toggle -->
< button
2025-09-18 11:58:18 -06:00
class="btn controls-btn text-white bg-primary align-self-center me-2"
2025-09-11 16:48:41 -06:00
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#coursenav-offcanvas"
aria-controls="coursenav-offcanvas"
aria-label="Open navigation"
>
< i class = "fa-solid fa-chevron-right font-custom" > < / i >
< / button >
< div class = "footer-details d-flex align-items-center bg-secondary text-white fw-lighter" >
< span class = "small text-white" id = "coursenav-footer-title" > < span id = "coursenav-course-title" > < / span > < / span >
< / div >
< / div >
< div class = "stepper-container d-none" >
< div id = "stepper" class = "stepper" data-steps = "5" data-current = "3" >
< div id = "step-movil" > < / div >
< / div >
< / div >
< div class = "d-flex align-items-center flex-row bg-verde-claro mx-auto gap-4" id = "wrap-course-content-navigation" >
< button id = "coursenav-prev-btn" class = "coursenav-btn-navigation me-2" data-bs-toggle = "tooltip" title = "Anterior" >
< img src = "img/template/prev.webp" alt = "" / >
< / button >
< button id = "coursenav-other-btn" class = "coursenav-btn-navigation me-2 d-none" data-bs-toggle = "tooltip" title = "Menú" >
< img src = "img/template/other.webp" alt = "" / >
< / button >
< button id = "coursenav-next-btn" class = "coursenav-btn-navigation" data-bs-toggle = "tooltip" title = "Siguiente" >
< img src = "img/template/next.webp" alt = "" / >
< / button >
< / div >
< div class = "d-flex align-items-center flex-row text-white bg-secondary" id = "wrap-course-paginator" >
< div class = "paginator" >
< span id = "coursenav-page-number" > < / span >
< / div >
< div class = "paginator" >
< span id = "coursenav-total-pages" > < / span >
< / div >
< / div >
< / footer >
<!-- LOADER -->
< div id = "coursenav-loader-course" class = "position-absolute top-0 start-0 w-100 h-100" >
< div class = "d-flex justify-content-center align-items-center h-100 text-primary" >
< i class = "fa-duotone fa-solid fa-spinner-third fa-spin fa-2xl" > < / i >
< / div >
< / div >
< / div >
< / div >
<!-- SCRIPTS -->
< script src = "js/jquery-3.7.1.min.js" > < / script >
< script src = "js/swiper-bundle.min.js" > < / script >
< script src = "js/bootstrap.bundle.min.js" > < / script >
< script src = "js/howler.min.js" > < / script >
< script src = "js/sweetalert2.min.js" > < / script >
< script src = "js/SCORM_API_wrapper.js" > < / script >
< script src = "js/gsap.min.js" > < / script >
< script src = "js/xlsx.full.min.js" > < / script >
< script src = "js/jquery-ui.min.js" > < / script >
< script src = "js/jquery.ui.touch-punch.min.js" > < / script >
2025-09-23 10:11:35 -06:00
< script src = "js/jquery.flip.min.js" > < / script >
2025-09-11 16:48:41 -06:00
<!-- Configuración del curso -->
< script src = "js/config.min.js" defer > < / script >
<!-- librería principal -->
< script src = "js/coursenav.min.js" defer > < / script >
< / body >
< / html >
