actualizacion de imagenes y se agrego la leyenda que se solicito
This commit is contained in:
parent
c8fee7fa15
commit
27a6ded88a
@ -151,7 +151,7 @@
|
||||
<div class="col-12 mb-3 px-0">
|
||||
<div class="card bg-rosa-lavanda border-0 rounded-0 shadow p-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||
<img src="img/book1.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
|
||||
2
css/theme.min.css
vendored
2
css/theme.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,22 +1,23 @@
|
||||
// Import Bootstrap functions, variables, and mixins
|
||||
@import '../bootstrap-5.2.3/scss/functions';
|
||||
@import '../bootstrap-5.2.3/scss/variables';
|
||||
@import '../bootstrap-5.2.3/scss/mixins';
|
||||
@import "../bootstrap-5.2.3/scss/functions";
|
||||
@import "../bootstrap-5.2.3/scss/variables";
|
||||
@import "../bootstrap-5.2.3/scss/mixins";
|
||||
|
||||
// Definir colores personalizados
|
||||
$custom-colors: (
|
||||
'rosa-lavanda': #ede3ec,
|
||||
'lila-rosa': #d8c4d6,
|
||||
'verde-ceniza': #84a79c,
|
||||
'verde-oscuro': #105742,
|
||||
'verde-pino': #4c8071,
|
||||
'verde-pasto': #84a816,
|
||||
'verde-claro': #d6e3da,
|
||||
'verde-gris': #cadcd4,
|
||||
'verde-claro-2': #b3cdb9,
|
||||
'lila-claro': #905c8b,
|
||||
'morado-claro': #915c8c,
|
||||
'gris': #959595,
|
||||
"rosa-lavanda": #ede3ec,
|
||||
"lila-rosa": #d8c4d6,
|
||||
"verde-ceniza": #84a79c,
|
||||
"verde-oscuro": #105742,
|
||||
"verde-pino": #4c8071,
|
||||
"verde-pasto": #84a816,
|
||||
"verde-claro": #d6e3da,
|
||||
"verde-gris": #cadcd4,
|
||||
"verde-claro-2": #b3cdb9,
|
||||
"verde-claro-3": #d3e0d7,
|
||||
"lila-claro": #905c8b,
|
||||
"morado-claro": #915c8c,
|
||||
"gris": #959595,
|
||||
);
|
||||
|
||||
// Colores base principales
|
||||
@ -48,24 +49,24 @@ $white: #ffffff; // Blanco puro
|
||||
// Combinar colores en $theme-colors
|
||||
$theme-colors: map-merge(
|
||||
(
|
||||
'primary': $primary,
|
||||
'primary-light': $primary-light,
|
||||
'primary-lighter': $primary-lighter,
|
||||
'primary-dark': $primary-dark,
|
||||
'primary-darker': $primary-darker,
|
||||
'secondary': $secondary,
|
||||
'secondary-light': $secondary-light,
|
||||
'secondary-lighter': $secondary-lighter,
|
||||
'secondary-dark': $secondary-dark,
|
||||
'secondary-darker': $secondary-darker,
|
||||
'success': $success,
|
||||
'danger': $danger,
|
||||
'warning': $warning,
|
||||
'info': $info,
|
||||
'light': $light,
|
||||
'dark': $dark,
|
||||
'muted': $muted,
|
||||
'white': $white,
|
||||
"primary": $primary,
|
||||
"primary-light": $primary-light,
|
||||
"primary-lighter": $primary-lighter,
|
||||
"primary-dark": $primary-dark,
|
||||
"primary-darker": $primary-darker,
|
||||
"secondary": $secondary,
|
||||
"secondary-light": $secondary-light,
|
||||
"secondary-lighter": $secondary-lighter,
|
||||
"secondary-dark": $secondary-dark,
|
||||
"secondary-darker": $secondary-darker,
|
||||
"success": $success,
|
||||
"danger": $danger,
|
||||
"warning": $warning,
|
||||
"info": $info,
|
||||
"light": $light,
|
||||
"dark": $dark,
|
||||
"muted": $muted,
|
||||
"white": $white,
|
||||
),
|
||||
$custom-colors
|
||||
);
|
||||
@ -79,7 +80,7 @@ $body-color: #515151; // Azul/gris oscuro para texto
|
||||
--swiper-theme-color: $primary;
|
||||
--swiper-navigation-color: $primary;
|
||||
--swiper-pagination-color: $primary;
|
||||
--swiper-pagination-bullet-inactive-color: map-get($custom-colors, 'silver');
|
||||
--swiper-pagination-bullet-inactive-color: map-get($custom-colors, "silver");
|
||||
}
|
||||
|
||||
.swiper {
|
||||
@ -107,4 +108,4 @@ $container-max-widths: (
|
||||
xxl: 100%,
|
||||
);
|
||||
// Import Bootstrap components
|
||||
@import '../bootstrap-5.2.3/scss/bootstrap';
|
||||
@import "../bootstrap-5.2.3/scss/bootstrap";
|
||||
|
||||
@ -74,6 +74,7 @@
|
||||
--bs-verde-claro: #d6e3da;
|
||||
--bs-verde-gris: #cadcd4;
|
||||
--bs-verde-claro-2: #b3cdb9;
|
||||
--bs-verde-claro-3: #d3e0d7;
|
||||
--bs-lila-claro: #905c8b;
|
||||
--bs-morado-claro: #915c8c;
|
||||
--bs-gris: #959595;
|
||||
@ -104,6 +105,7 @@
|
||||
--bs-verde-claro-rgb: 214, 227, 218;
|
||||
--bs-verde-gris-rgb: 202, 220, 212;
|
||||
--bs-verde-claro-2-rgb: 179, 205, 185;
|
||||
--bs-verde-claro-3-rgb: 211, 224, 215;
|
||||
--bs-lila-claro-rgb: 144, 92, 139;
|
||||
--bs-morado-claro-rgb: 145, 92, 140;
|
||||
--bs-gris-rgb: 149, 149, 149;
|
||||
@ -3358,6 +3360,23 @@ textarea.form-control-lg {
|
||||
--bs-btn-disabled-border-color: #b3cdb9;
|
||||
}
|
||||
|
||||
.btn-verde-claro-3 {
|
||||
--bs-btn-color: #000;
|
||||
--bs-btn-bg: #d3e0d7;
|
||||
--bs-btn-border-color: #d3e0d7;
|
||||
--bs-btn-hover-color: #000;
|
||||
--bs-btn-hover-bg: #dae5dd;
|
||||
--bs-btn-hover-border-color: #d7e3db;
|
||||
--bs-btn-focus-shadow-rgb: 179, 190, 183;
|
||||
--bs-btn-active-color: #000;
|
||||
--bs-btn-active-bg: #dce6df;
|
||||
--bs-btn-active-border-color: #d7e3db;
|
||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--bs-btn-disabled-color: #000;
|
||||
--bs-btn-disabled-bg: #d3e0d7;
|
||||
--bs-btn-disabled-border-color: #d3e0d7;
|
||||
}
|
||||
|
||||
.btn-lila-claro {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: #905c8b;
|
||||
@ -3868,6 +3887,23 @@ textarea.form-control-lg {
|
||||
--bs-gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-verde-claro-3 {
|
||||
--bs-btn-color: #d3e0d7;
|
||||
--bs-btn-border-color: #d3e0d7;
|
||||
--bs-btn-hover-color: #000;
|
||||
--bs-btn-hover-bg: #d3e0d7;
|
||||
--bs-btn-hover-border-color: #d3e0d7;
|
||||
--bs-btn-focus-shadow-rgb: 211, 224, 215;
|
||||
--bs-btn-active-color: #000;
|
||||
--bs-btn-active-bg: #d3e0d7;
|
||||
--bs-btn-active-border-color: #d3e0d7;
|
||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--bs-btn-disabled-color: #d3e0d7;
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: #d3e0d7;
|
||||
--bs-gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-lila-claro {
|
||||
--bs-btn-color: #905c8b;
|
||||
--bs-btn-border-color: #905c8b;
|
||||
@ -5702,6 +5738,15 @@ textarea.form-control-lg {
|
||||
color: #3a423b;
|
||||
}
|
||||
|
||||
.alert-verde-claro-3 {
|
||||
--bs-alert-color: #545a56;
|
||||
--bs-alert-bg: #f6f9f7;
|
||||
--bs-alert-border-color: #f2f6f3;
|
||||
}
|
||||
.alert-verde-claro-3 .alert-link {
|
||||
color: #434845;
|
||||
}
|
||||
|
||||
.alert-lila-claro {
|
||||
--bs-alert-color: #563753;
|
||||
--bs-alert-bg: #e9dee8;
|
||||
@ -6399,6 +6444,20 @@ textarea.form-control-lg {
|
||||
border-color: #48524a;
|
||||
}
|
||||
|
||||
.list-group-item-verde-claro-3 {
|
||||
color: #545a56;
|
||||
background-color: #f6f9f7;
|
||||
}
|
||||
.list-group-item-verde-claro-3.list-group-item-action:hover, .list-group-item-verde-claro-3.list-group-item-action:focus {
|
||||
color: #545a56;
|
||||
background-color: #dde0de;
|
||||
}
|
||||
.list-group-item-verde-claro-3.list-group-item-action.active {
|
||||
color: #ffffff;
|
||||
background-color: #545a56;
|
||||
border-color: #545a56;
|
||||
}
|
||||
|
||||
.list-group-item-lila-claro {
|
||||
color: #563753;
|
||||
background-color: #e9dee8;
|
||||
@ -8099,6 +8158,11 @@ textarea.form-control-lg {
|
||||
background-color: RGBA(179, 205, 185, var(--bs-bg-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
.text-bg-verde-claro-3 {
|
||||
color: #000 !important;
|
||||
background-color: RGBA(211, 224, 215, var(--bs-bg-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
.text-bg-lila-claro {
|
||||
color: #fff !important;
|
||||
background-color: RGBA(144, 92, 139, var(--bs-bg-opacity, 1)) !important;
|
||||
@ -8303,6 +8367,13 @@ textarea.form-control-lg {
|
||||
color: #c2d7c7 !important;
|
||||
}
|
||||
|
||||
.link-verde-claro-3 {
|
||||
color: #d3e0d7 !important;
|
||||
}
|
||||
.link-verde-claro-3:hover, .link-verde-claro-3:focus {
|
||||
color: #dce6df !important;
|
||||
}
|
||||
|
||||
.link-lila-claro {
|
||||
color: #905c8b !important;
|
||||
}
|
||||
@ -8880,6 +8951,11 @@ textarea.form-control-lg {
|
||||
border-color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-border-opacity)) !important;
|
||||
}
|
||||
|
||||
.border-verde-claro-3 {
|
||||
--bs-border-opacity: 1;
|
||||
border-color: rgba(var(--bs-verde-claro-3-rgb), var(--bs-border-opacity)) !important;
|
||||
}
|
||||
|
||||
.border-lila-claro {
|
||||
--bs-border-opacity: 1;
|
||||
border-color: rgba(var(--bs-lila-claro-rgb), var(--bs-border-opacity)) !important;
|
||||
@ -9847,6 +9923,11 @@ textarea.form-control-lg {
|
||||
color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-text-opacity)) !important;
|
||||
}
|
||||
|
||||
.text-verde-claro-3 {
|
||||
--bs-text-opacity: 1;
|
||||
color: rgba(var(--bs-verde-claro-3-rgb), var(--bs-text-opacity)) !important;
|
||||
}
|
||||
|
||||
.text-lila-claro {
|
||||
--bs-text-opacity: 1;
|
||||
color: rgba(var(--bs-lila-claro-rgb), var(--bs-text-opacity)) !important;
|
||||
@ -10038,6 +10119,11 @@ textarea.form-control-lg {
|
||||
background-color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.bg-verde-claro-3 {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: rgba(var(--bs-verde-claro-3-rgb), var(--bs-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.bg-lila-claro {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: rgba(var(--bs-lila-claro-rgb), var(--bs-bg-opacity)) !important;
|
||||
|
||||
BIN
img/03.0.png
BIN
img/03.0.png
Binary file not shown.
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
BIN
img/05.1.png
BIN
img/05.1.png
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
BIN
img/05.6.png
BIN
img/05.6.png
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 38 KiB |
BIN
img/07.0.png
BIN
img/07.0.png
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 169 KiB |
BIN
img/14.0.png
BIN
img/14.0.png
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 90 KiB |
BIN
img/15.6.png
BIN
img/15.6.png
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
110
index.html
110
index.html
@ -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("img/template/close2.webp");
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user