actualizacion de imagenes y se agrego la leyenda que se solicito

This commit is contained in:
2026-03-06 14:57:57 -06:00
parent c8fee7fa15
commit 27a6ded88a
11 changed files with 216 additions and 55 deletions
+92 -18
View File
@@ -1,9 +1,12 @@
<!DOCTYPE html>
<!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="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" />
@@ -22,8 +25,18 @@
<div class="wrap-course-adaptive overflow-hidden">
<div class="wrap-course-content" id="wrap-course-content">
<header>
<nav class="navbar navbar-light bg-transparent sticky-top shadow-sm py-0" id="coursenav-navbar">
<div class="container-fluid d-flex align-items-center px-3">
<nav
class="navbar navbar-light bg-transparent sticky-top shadow-sm py-0"
id="coursenav-navbar"
>
<div class="container-fluid d-flex align-items-center p-0 pe-3">
<div
class="advertencia small bg-verde-claro-3 px-3 py-2 text-verde-pino"
style="border-top-right-radius: 30px; border-bottom-right-radius: 30px"
>
“Este material tiene fines educativos, no promocionales, de uso exclusivo para
profesionales de la salud.”
</div>
<!-- Logo -->
<a class="navbar-brand p-0 disabled ms-auto" href="#">
<img src="img/template/logo.svg" width="133" alt="Logo" />
@@ -31,11 +44,32 @@
<div class="flex-grow-1 d-none"></div>
<div class="d-flex align-items-center d-none">
<!-- Audio Control -->
<button id="coursenav-audio-control" class="btn controls-btn me-2" aria-label="Toggle audio">
<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" />
<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>
@@ -57,11 +91,20 @@
</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 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"
style="
background: url(&quot;img/template/close2.webp&quot;);
background-repeat: no-repeat;
"
type="button"
class="btn-close text-white"
data-bs-dismiss="offcanvas"
@@ -100,8 +143,14 @@
<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">
<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
class="btn controls-btn text-white bg-primary align-self-center me-2"
@@ -113,8 +162,12 @@
>
<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
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>
@@ -123,18 +176,39 @@
<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">
<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ú">
<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">
<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="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>