diff --git a/audio/flip.mp3 b/audio/flip.mp3 new file mode 100644 index 0000000..08f7e08 Binary files /dev/null and b/audio/flip.mp3 differ diff --git a/config.json b/config.json index 56cde3f..be2481d 100644 --- a/config.json +++ b/config.json @@ -35,6 +35,30 @@ { "title": "Navegación", "content": "contenido/08.html" + }, + { + "title": "Navegación", + "content": "contenido/09.html" + }, + { + "title": "Navegación", + "content": "contenido/10.html" + }, + { + "title": "Navegación", + "content": "contenido/11.html" + }, + { + "title": "Navegación", + "content": "contenido/12.html" + }, + { + "title": "Navegación", + "content": "contenido/13.html" + }, + { + "title": "Navegación", + "content": "contenido/14.html" } ] } diff --git a/contenido/02.html b/contenido/02.html index 27d39c7..9d23183 100644 --- a/contenido/02.html +++ b/contenido/02.html @@ -176,7 +176,7 @@ \ No newline at end of file + diff --git a/contenido/04.html b/contenido/04.html index 36adb13..a16b3e6 100644 --- a/contenido/04.html +++ b/contenido/04.html @@ -26,8 +26,7 @@ .drop-card { border: none; - width: 200px; - min-width: 80px; + width: 100%; height: 40px; } @@ -105,7 +104,7 @@
1
-
+
@@ -118,7 +117,7 @@
2
-
+
@@ -131,7 +130,7 @@
3
-
+
@@ -144,7 +143,7 @@
4
-
+
@@ -181,7 +180,7 @@ diff --git a/contenido/09.html b/contenido/09.html new file mode 100644 index 0000000..6581f16 --- /dev/null +++ b/contenido/09.html @@ -0,0 +1,250 @@ + +
+
+
+
+
+
+

¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?

+
+
+
+
+
+ +

Instrucciones: Da clic en los elementos para descubrir cuáles son necesarios para realizar la DPA.

+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

¡Recuerda!

+
+
+

Siempre debes lavar tus manos antes de empezar cualquier terapia.

+
+
+
+
+
+ diff --git a/contenido/10.html b/contenido/10.html new file mode 100644 index 0000000..381f0b9 --- /dev/null +++ b/contenido/10.html @@ -0,0 +1,45 @@ + +
+
+
+
+
+
+
+

¿Qué es un catéter?

+
+
+
+
+ +
+
+
+
+
+
+ diff --git a/contenido/11.html b/contenido/11.html new file mode 100644 index 0000000..e8c5afc --- /dev/null +++ b/contenido/11.html @@ -0,0 +1,58 @@ + +
+
+
+
+
+
+

Características del sitio de salida

+
+
+
+
+
+ +
+

Instrucciones: Observa las imágenes del sitio de salida que se presentan en las + tarjetas.

+

Si consideras que se encuentra sano, desliza la tarjeta a la derecha. Si + crees que no está sano, + desliza la tarjeta a la izquierda.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/css/style.css b/css/style.css index 9537bd7..0690ef4 100644 --- a/css/style.css +++ b/css/style.css @@ -380,7 +380,7 @@ body > main { } #coursenav-main-content { - height: 100%; + height: calc(100% - 85px); overflow-x: hidden; } diff --git a/css/style.min.css b/css/style.min.css index c380ed4..8e4a1a0 100644 --- a/css/style.min.css +++ b/css/style.min.css @@ -1 +1 @@ -html{box-sizing:border-box;height:100%}*,*::before,*::after{box-sizing:inherit}body{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:0;font-family:"Arial",sans-serif;line-height:1.3;font-size:18px}body>header,body>footer{flex:0 0 auto}body>header .coursenav-btn-navigation,body>footer .coursenav-btn-navigation{width:48px;height:48px;padding:0;border:none;background:none;display:flex;align-items:center;justify-content:center;color:inherit;position:relative;cursor:pointer}body>header .coursenav-btn-navigation:disabled,body>footer .coursenav-btn-navigation:disabled{cursor:not-allowed;filter:opacity(0.5)}body>main{flex:1 0 auto;width:100%}#coursenav-offcanvas{padding:1em;width:50%}#coursenav-offcanvas-label{-webkit-user-select:none;-moz-user-select:none;user-select:none}#coursenav-navbar .navbar-brand img{-o-object-fit:contain;object-fit:contain;aspect-ratio:1/1;height:45px}.course-menu,.course-menu ul{list-style:none !important;margin:0;padding:0}.course-menu .witem{display:flex;width:100%;flex-direction:row}.course-menu .witem>span{margin-left:auto}.course-menu .menu-item+.course-menu .menu-item{margin-top:.5rem}.course-menu .coursenav-link{display:block;padding:.5rem 1rem;color:inherit;text-decoration:none;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none}.course-menu .sub-ul{display:none;padding-left:1rem}.course-menu .sub-ul.open{display:block}.course-menu .sub-ul .coursenav-link{cursor:pointer}.course-menu .sub-ul .coursenav-link:hover{filter:invert(100%)}.course-menu .sub-ul .coursenav-link[data-coursenavvisited=false]::before{content:"";font-family:"Font Awesome 6 Pro";font-weight:lighter;display:inline-block;margin-right:.5rem;color:inherit}.course-menu .sub-ul .coursenav-link[data-coursenavvisited=true]::before{content:"";font-family:"Font Awesome 6 Pro";font-weight:900;display:inline-block;margin-right:.5rem;color:var(--bs-success)}.course-menu .toggle-icon{cursor:pointer;margin-left:.5rem;color:inherit}.controls-btn{width:48px;height:48px;padding:0;border:none;background:none;display:flex;align-items:center;justify-content:center;color:inherit;position:relative}.controls-btn>svg{width:100%;height:100%;display:block}.controls-btn>i{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.controls-btn:focus{outline:2px solid #ffa300;outline-offset:2px}.controls-btn .position-relative{position:relative;width:100%;height:100%}.controls-btn .position-relative svg{width:100%;height:100%;display:block}.controls-btn .position-relative i{font-size:2rem}.controls-btn{width:55px;height:100%;padding:0;border:none;background:none;display:flex;align-items:center;justify-content:center;color:inherit;position:relative;border-top-left-radius:0;border-bottom-left-radius:0}.font-custom{font-size:2.5rem}.navbar-toggler{width:48px;height:48px;padding:0;border:none;background:none;display:flex;align-items:center;justify-content:center;color:inherit;position:relative}.navbar-toggler>svg{width:100%;height:100%;display:block}.navbar-toggler>i{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.navbar-toggler:focus{outline:2px solid #ffa300;outline-offset:2px}.navbar-toggler .position-relative{position:relative;width:100%;height:100%}.navbar-toggler .position-relative svg{width:100%;height:100%;display:block}.navbar-toggler .position-relative i{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.disabled{pointer-events:none;animation:none}.text-white *{color:#fff}.page-sco{height:100%;display:flex;flex-direction:column;position:relative}.card.flat{margin:0;padding:0;border-radius:0;border:none;box-shadow:none;background-color:rgba(0,0,0,0)}.card.flat .card-body{margin:0;padding:0;border-radius:0;border:none;box-shadow:none;background-color:rgba(0,0,0,0)}.cursor{cursor:pointer}.wrap-course-adaptive{position:fixed;top:0;left:0;width:100vw;height:100vh;min-width:100vw;min-height:100vh;max-width:none;max-height:none;overflow:hidden;z-index:0;background:inherit}.wrap-course-content{width:1366px;height:768px;position:absolute;left:0;top:0;overflow:hidden;z-index:1}.wrap-course-content footer{position:absolute;bottom:0;left:0;width:100%}#coursenav-offcanvas{border-top-right-radius:30px !important;border-bottom-right-radius:30px !important}.footer-details{border-top-right-radius:30px !important;border-bottom-right-radius:30px !important;width:100%;padding:0% .5rem}.stepper-container{width:80%;max-width:400px}.stepper{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.stepper::before{content:"";position:absolute;top:50%;left:0;right:0;height:4px;background:#ddd;transform:translateY(-50%);border-radius:2px;z-index:0}.stepper::after{content:"";position:absolute;top:50%;left:0;height:4px;background:#4caf50;transform:translateY(-50%);border-radius:2px;z-index:1;width:var(--pct, 0);transition:width .3s ease}.stepper .step{position:relative;z-index:2;width:24px;height:24px;background:#ddd;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s ease,width .3s ease,height .3s ease,top .3s ease}.stepper .step.completed{background:#4caf50}.stepper .step.current{background:#4caf50;border:4px solid #fff;width:32px;height:32px;top:-4px}.stepper .step.current::before{content:attr(data-label);position:absolute;top:-2.5rem;left:50%;transform:translateX(-50%);font-size:1rem;color:#fff;white-space:nowrap}#wrap-course-content-navigation{padding:.5rem;border-radius:30px !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}#wrap-course-content-navigation button{margin-left:.33rem;margin-right:.33rem;padding:0;border:none;box-shadow:none;background:none}#wrap-course-paginator{justify-self:end;margin-left:auto;border-top-left-radius:20px;border-bottom-left-radius:20px;padding:0% .5rem;width:120px;justify-content:center}#wrap-course-controls{width:40%}#coursenav-main-content{height:100%;overflow-x:hidden}.stepper #step-movil{background:#4caf50;border:4px solid #fff;width:32px;height:32px;top:12px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:4}.stepper #step-movil::before{content:attr(data-label);position:absolute;top:1.9rem;left:50%;transform:translateX(-50%);font-size:.8rem;color:#fff;white-space:nowrap}.coursenav-btn-navigation:disabled{cursor:not-allowed;filter:opacity(0.5);pointer-events:none}.offcanvas-backdrop{width:100%;height:100%}.pop_class{width:100%;max-width:1000px;padding:0;border-radius:1em;overflow:hidden}.pop_class .swal2-html-container{padding:0}.pop_class .img-fit-pop{-o-object-fit:cover;object-fit:cover;height:100%;width:100%}.pop_class .swal2-close{width:50px;height:50px;border-radius:50%}h6{color:#4c4c4c;font-weight:bold;font-size:14px}.pop_html_style .swal2-html-container{padding:.5em} \ No newline at end of file +html{box-sizing:border-box;height:100%}*,*::before,*::after{box-sizing:inherit}body{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:0;font-family:"Arial",sans-serif;line-height:1.3;font-size:18px}body>header,body>footer{flex:0 0 auto}body>header .coursenav-btn-navigation,body>footer .coursenav-btn-navigation{width:48px;height:48px;padding:0;border:none;background:none;display:flex;align-items:center;justify-content:center;color:inherit;position:relative;cursor:pointer}body>header .coursenav-btn-navigation:disabled,body>footer .coursenav-btn-navigation:disabled{cursor:not-allowed;filter:opacity(0.5)}body>main{flex:1 0 auto;width:100%}#coursenav-offcanvas{padding:1em;width:50%}#coursenav-offcanvas-label{-webkit-user-select:none;-moz-user-select:none;user-select:none}#coursenav-navbar .navbar-brand img{-o-object-fit:contain;object-fit:contain;aspect-ratio:1/1;height:45px}.course-menu,.course-menu ul{list-style:none !important;margin:0;padding:0}.course-menu .witem{display:flex;width:100%;flex-direction:row}.course-menu .witem>span{margin-left:auto}.course-menu .menu-item+.course-menu .menu-item{margin-top:.5rem}.course-menu .coursenav-link{display:block;padding:.5rem 1rem;color:inherit;text-decoration:none;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none}.course-menu .sub-ul{display:none;padding-left:1rem}.course-menu .sub-ul.open{display:block}.course-menu .sub-ul .coursenav-link{cursor:pointer}.course-menu .sub-ul .coursenav-link:hover{filter:invert(100%)}.course-menu .sub-ul .coursenav-link[data-coursenavvisited=false]::before{content:"";font-family:"Font Awesome 6 Pro";font-weight:lighter;display:inline-block;margin-right:.5rem;color:inherit}.course-menu .sub-ul .coursenav-link[data-coursenavvisited=true]::before{content:"";font-family:"Font Awesome 6 Pro";font-weight:900;display:inline-block;margin-right:.5rem;color:var(--bs-success)}.course-menu .toggle-icon{cursor:pointer;margin-left:.5rem;color:inherit}.controls-btn{width:48px;height:48px;padding:0;border:none;background:none;display:flex;align-items:center;justify-content:center;color:inherit;position:relative}.controls-btn>svg{width:100%;height:100%;display:block}.controls-btn>i{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.controls-btn:focus{outline:2px solid #ffa300;outline-offset:2px}.controls-btn .position-relative{position:relative;width:100%;height:100%}.controls-btn .position-relative svg{width:100%;height:100%;display:block}.controls-btn .position-relative i{font-size:2rem}.controls-btn{width:55px;height:100%;padding:0;border:none;background:none;display:flex;align-items:center;justify-content:center;color:inherit;position:relative;border-top-left-radius:0;border-bottom-left-radius:0}.font-custom{font-size:2.5rem}.navbar-toggler{width:48px;height:48px;padding:0;border:none;background:none;display:flex;align-items:center;justify-content:center;color:inherit;position:relative}.navbar-toggler>svg{width:100%;height:100%;display:block}.navbar-toggler>i{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.navbar-toggler:focus{outline:2px solid #ffa300;outline-offset:2px}.navbar-toggler .position-relative{position:relative;width:100%;height:100%}.navbar-toggler .position-relative svg{width:100%;height:100%;display:block}.navbar-toggler .position-relative i{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.disabled{pointer-events:none;animation:none}.text-white *{color:#fff}.page-sco{height:100%;display:flex;flex-direction:column;position:relative}.card.flat{margin:0;padding:0;border-radius:0;border:none;box-shadow:none;background-color:rgba(0,0,0,0)}.card.flat .card-body{margin:0;padding:0;border-radius:0;border:none;box-shadow:none;background-color:rgba(0,0,0,0)}.cursor{cursor:pointer}.wrap-course-adaptive{position:fixed;top:0;left:0;width:100vw;height:100vh;min-width:100vw;min-height:100vh;max-width:none;max-height:none;overflow:hidden;z-index:0;background:inherit}.wrap-course-content{width:1366px;height:768px;position:absolute;left:0;top:0;overflow:hidden;z-index:1}#coursenav-offcanvas{border-top-right-radius:30px !important;border-bottom-right-radius:30px !important}.footer-details{border-top-right-radius:30px !important;border-bottom-right-radius:30px !important;width:100%;padding:0% .5rem}.stepper-container{width:80%;max-width:400px}.stepper{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.stepper::before{content:"";position:absolute;top:50%;left:0;right:0;height:4px;background:#ddd;transform:translateY(-50%);border-radius:2px;z-index:0}.stepper::after{content:"";position:absolute;top:50%;left:0;height:4px;background:#4caf50;transform:translateY(-50%);border-radius:2px;z-index:1;width:var(--pct, 0);transition:width .3s ease}.stepper .step{position:relative;z-index:2;width:24px;height:24px;background:#ddd;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s ease,width .3s ease,height .3s ease,top .3s ease}.stepper .step.completed{background:#4caf50}.stepper .step.current{background:#4caf50;border:4px solid #fff;width:32px;height:32px;top:-4px}.stepper .step.current::before{content:attr(data-label);position:absolute;top:-2.5rem;left:50%;transform:translateX(-50%);font-size:1rem;color:#fff;white-space:nowrap}#wrap-course-content-navigation{padding:.5rem;border-radius:30px !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}#wrap-course-content-navigation button{margin-left:.33rem;margin-right:.33rem;padding:0;border:none;box-shadow:none;background:none}#wrap-course-paginator{justify-self:end;margin-left:auto;border-top-left-radius:20px;border-bottom-left-radius:20px;padding:0% .5rem;width:120px;justify-content:center}#wrap-course-controls{width:40%}#coursenav-main-content{height:calc(100% - 85px);overflow-x:hidden}.stepper #step-movil{background:#4caf50;border:4px solid #fff;width:32px;height:32px;top:12px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:4}.stepper #step-movil::before{content:attr(data-label);position:absolute;top:1.9rem;left:50%;transform:translateX(-50%);font-size:.8rem;color:#fff;white-space:nowrap}.coursenav-btn-navigation:disabled{cursor:not-allowed;filter:opacity(0.5);pointer-events:none}.offcanvas-backdrop{width:100%;height:100%}.pop_class{width:100%;max-width:1000px;padding:0;border-radius:1em;overflow:hidden}.pop_class .swal2-html-container{padding:0}.pop_class .img-fit-pop{-o-object-fit:cover;object-fit:cover;height:100%;width:100%}.pop_class .swal2-close{width:50px;height:50px;border-radius:50%}h6{color:#4c4c4c;font-weight:bold;font-size:14px}.pop_html_style .swal2-html-container{padding:.5em} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 6c030fb..9e302e4 100644 --- a/css/style.scss +++ b/css/style.scss @@ -495,3 +495,7 @@ h6 { .pop_html_style .swal2-html-container { padding: 0.5em; } + +/* .wrap-course-content { + transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease; +} */ diff --git a/css/stylee.css b/css/stylee.css index 2d003d2..63ee1b9 100644 --- a/css/stylee.css +++ b/css/stylee.css @@ -481,4 +481,8 @@ h6 { .pop_html_style .swal2-html-container { padding: 0.5em; -} \ No newline at end of file +} + +/* .wrap-course-content { + transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease; +} */ \ No newline at end of file diff --git a/img/08.1.png b/img/08.1.png new file mode 100644 index 0000000..a3873f0 Binary files /dev/null and b/img/08.1.png differ diff --git a/img/08.1c.png b/img/08.1c.png new file mode 100644 index 0000000..cf7972a Binary files /dev/null and b/img/08.1c.png differ diff --git a/img/08.2.png b/img/08.2.png new file mode 100644 index 0000000..8daedd1 Binary files /dev/null and b/img/08.2.png differ diff --git a/img/08.2c.png b/img/08.2c.png new file mode 100644 index 0000000..fa32935 Binary files /dev/null and b/img/08.2c.png differ diff --git a/img/08.3.png b/img/08.3.png new file mode 100644 index 0000000..bf6939f Binary files /dev/null and b/img/08.3.png differ diff --git a/img/08.3c.png b/img/08.3c.png new file mode 100644 index 0000000..1992cde Binary files /dev/null and b/img/08.3c.png differ diff --git a/img/08.4.png b/img/08.4.png new file mode 100644 index 0000000..79d3e27 Binary files /dev/null and b/img/08.4.png differ diff --git a/img/08.4c.png b/img/08.4c.png new file mode 100644 index 0000000..c1dd42e Binary files /dev/null and b/img/08.4c.png differ diff --git a/img/08.5.png b/img/08.5.png new file mode 100644 index 0000000..c80a608 Binary files /dev/null and b/img/08.5.png differ diff --git a/img/08.5c.png b/img/08.5c.png new file mode 100644 index 0000000..8b8e9aa Binary files /dev/null and b/img/08.5c.png differ diff --git a/img/08.6.png b/img/08.6.png new file mode 100644 index 0000000..c6e62db Binary files /dev/null and b/img/08.6.png differ diff --git a/img/08.6c.png b/img/08.6c.png new file mode 100644 index 0000000..08b40cd Binary files /dev/null and b/img/08.6c.png differ diff --git a/img/08.front.png b/img/08.front.png new file mode 100644 index 0000000..2f94245 Binary files /dev/null and b/img/08.front.png differ diff --git a/img/09.0.png b/img/09.0.png new file mode 100644 index 0000000..e24cf8e Binary files /dev/null and b/img/09.0.png differ diff --git a/img/09.1.png b/img/09.1.png new file mode 100644 index 0000000..71bd240 Binary files /dev/null and b/img/09.1.png differ diff --git a/img/09.10.png b/img/09.10.png new file mode 100644 index 0000000..80388f0 Binary files /dev/null and b/img/09.10.png differ diff --git a/img/09.11.png b/img/09.11.png new file mode 100644 index 0000000..e1d3ead Binary files /dev/null and b/img/09.11.png differ diff --git a/img/09.12.png b/img/09.12.png new file mode 100644 index 0000000..e64329c Binary files /dev/null and b/img/09.12.png differ diff --git a/img/09.13.png b/img/09.13.png new file mode 100644 index 0000000..a108655 Binary files /dev/null and b/img/09.13.png differ diff --git a/img/09.14.png b/img/09.14.png new file mode 100644 index 0000000..a396225 Binary files /dev/null and b/img/09.14.png differ diff --git a/img/09.2.png b/img/09.2.png new file mode 100644 index 0000000..5b2fea5 Binary files /dev/null and b/img/09.2.png differ diff --git a/img/09.3.png b/img/09.3.png new file mode 100644 index 0000000..47fc95e Binary files /dev/null and b/img/09.3.png differ diff --git a/img/09.4.png b/img/09.4.png new file mode 100644 index 0000000..62713aa Binary files /dev/null and b/img/09.4.png differ diff --git a/img/09.5.png b/img/09.5.png new file mode 100644 index 0000000..65af21d Binary files /dev/null and b/img/09.5.png differ diff --git a/img/09.6.png b/img/09.6.png new file mode 100644 index 0000000..f8562f1 Binary files /dev/null and b/img/09.6.png differ diff --git a/img/09.7.png b/img/09.7.png new file mode 100644 index 0000000..d55de11 Binary files /dev/null and b/img/09.7.png differ diff --git a/img/09.8.png b/img/09.8.png new file mode 100644 index 0000000..efe58ca Binary files /dev/null and b/img/09.8.png differ diff --git a/img/09.9.png b/img/09.9.png new file mode 100644 index 0000000..95188e8 Binary files /dev/null and b/img/09.9.png differ diff --git a/img/10.0.png b/img/10.0.png new file mode 100644 index 0000000..352c416 Binary files /dev/null and b/img/10.0.png differ diff --git a/img/bg06.jpg b/img/bg06.jpg new file mode 100644 index 0000000..f075d3a Binary files /dev/null and b/img/bg06.jpg differ diff --git a/img/bg07.jpg b/img/bg07.jpg new file mode 100644 index 0000000..c76d160 Binary files /dev/null and b/img/bg07.jpg differ diff --git a/img/bg11.jpg b/img/bg11.jpg new file mode 100644 index 0000000..d43d296 Binary files /dev/null and b/img/bg11.jpg differ diff --git a/index.html b/index.html index 8bb4317..d9588da 100644 --- a/index.html +++ b/index.html @@ -164,6 +164,7 @@ + diff --git a/js/config.js b/js/config.js index d86def3..579784d 100644 --- a/js/config.js +++ b/js/config.js @@ -167,52 +167,37 @@ function animateOnScroll(selector, animationClass, options = {}) { return observer; } -/** - * Ajusta el contenido del curso para ocupar el máximo de pantalla. - * @function scaleWrapCourseContent - */ function scaleWrapCourseContent() { const content = document.querySelector('.wrap-course-content'); - const mainContent = document.querySelector('#coursenav-main-content'); if (!content) return; - const header = document.querySelector('header'); - const footer = document.querySelector('footer'); - const headerHeight = header ? header.offsetHeight : 0; - const footerHeight = footer ? footer.offsetHeight : 0; - const ww = window.innerWidth; - const wh = window.innerHeight - headerHeight; + const wh = window.innerHeight; - if (ww < 1366) { - const scale = Math.min(ww / 1366, wh / 768); - content.style.transform = `scale(${scale})`; - content.style.transformOrigin = 'top left'; - content.style.width = '1366px'; - content.style.height = '768px'; - content.style.position = 'absolute'; - content.style.left = (ww - 1366 * scale) / 2 + 'px'; - content.style.top = headerHeight + (wh - 768 * scale) / 2 + 'px'; - content.style.overflow = 'hidden'; - - if (mainContent) { - const availableHeight = 768 - 80; - mainContent.style.height = availableHeight + 'px'; - } + // Breakpoint a 1500px + let baseWidth, baseHeight; + + if (ww < 1500) { + // Menor a 1500px: usar 1366x768 + baseWidth = 1366; + baseHeight = 768; } else { - content.style.transform = ''; - content.style.transformOrigin = ''; - content.style.width = '100%'; - content.style.height = '100vh'; - content.style.position = 'relative'; - content.style.left = ''; - content.style.top = ''; - content.style.overflow = 'hidden'; - - if (mainContent) { - mainContent.style.height = `calc(100vh - ${headerHeight + footerHeight}px)`; - } + // 1500px o más: usar 1920x1080 + baseWidth = 1920; + baseHeight = 1080; } + + // Escala simple + const scale = Math.min(ww / baseWidth, wh / baseHeight); + + content.style.transform = `scale(${scale})`; + content.style.transformOrigin = 'top left'; + content.style.width = baseWidth + 'px'; + content.style.height = baseHeight + 'px'; + content.style.position = 'absolute'; + content.style.left = (ww - baseWidth * scale) / 2 + 'px'; + content.style.top = (wh - baseHeight * scale) / 2 + 'px'; + content.style.overflow = 'hidden'; content.style.zIndex = '1'; } @@ -300,10 +285,29 @@ function gotoFirstMenuToolSlide() { * @event DOMContentLoaded */ document.addEventListener('DOMContentLoaded', () => { - // Ajustar contenido al cargar y redimensionar + // Escalado inicial y continuo + scaleWrapCourseContent(); setTimeout(scaleWrapCourseContent, 100); - window.addEventListener('resize', () => setTimeout(scaleWrapCourseContent, 100)); - + + // Escalado en redimensionamiento con debounce + let resizeTimeout; + window.addEventListener('resize', () => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(scaleWrapCourseContent, 50); + }); + + // Escalado en cambio de orientación (móviles/tablets) + window.addEventListener('orientationchange', () => { + setTimeout(scaleWrapCourseContent, 200); + }); + + // Escalado cuando cambia la visibilidad (cambio de pestaña) + document.addEventListener('visibilitychange', () => { + if (!document.hidden) { + setTimeout(scaleWrapCourseContent, 100); + } + }); + /** * Evento antes de cambiar de slide. * @event beforeSlideChange diff --git a/js/config.min.js b/js/config.min.js index bc5aa11..562abf3 100644 --- a/js/config.min.js +++ b/js/config.min.js @@ -1 +1 @@ -function renderPagination(e,t){const n=document.getElementById("coursenav-page-number"),o=document.getElementById("coursenav-total-pages");if(!Array.isArray(t))return;manageMenuVisibility(e,t);const r=t[e];if(!r)return;const s=t.filter((e=>e.moduleTitle===r.moduleTitle)),l=s.findIndex((e=>e.content===r.content));n&&(n.textContent=l+1),o&&(o.textContent=" / "+s.length),updateNavButtons(l,s)}function updateNavButtons(e,t){const n=document.getElementById("coursenav-next-btn"),o=document.getElementById("coursenav-prev-btn");if(!n||!o)return;const r=e+1===t.length,s=0===e,l=CourseNav.isDebug();n.classList.toggle("disabled",r&&!l),o.classList.toggle("disabled",s&&!l)}function manageMenuVisibility(e,t){const n=document.querySelectorAll("#coursenav-main-menu > ul.course-menu");if(!n.length)return;if(n[0].style.display="block",!Array.isArray(t)||!t.length){for(let e=1;e{const n=parseInt(e.dataset.coursenavindex);return n>=0&&t[n]?.moduleTitle===r}));n[e].style.display=o?"block":"none"}}function scrollToElementTop(e,t={}){const n=Object.assign({behavior:"smooth",block:"start",inline:"nearest"},t),o=document.querySelector(e);o&&o.scrollIntoView(n)}function animateOnScroll(e,t,n={}){const{threshold:o=.1,animateOnce:r=!0,prefix:s="animate__animated"}=n,l=new IntersectionObserver(((e,n)=>{e.forEach((e=>{e.isIntersecting?(e.target.classList.add(s,t),r&&n.unobserve(e.target)):r||e.target.classList.remove(s,t)}))}),{threshold:o});return document.querySelectorAll(e).forEach((e=>l.observe(e))),l}function scaleWrapCourseContent(){const e=document.querySelector(".wrap-course-content"),t=document.querySelector("#coursenav-main-content");if(!e)return;const n=document.querySelector("header"),o=document.querySelector("footer"),r=n?n.offsetHeight:0,s=o?o.offsetHeight:0,l=window.innerWidth,i=window.innerHeight-r;if(l<1366){const n=Math.min(l/1366,i/768);if(e.style.transform=`scale(${n})`,e.style.transformOrigin="top left",e.style.width="1366px",e.style.height="768px",e.style.position="absolute",e.style.left=(l-1366*n)/2+"px",e.style.top=r+(i-768*n)/2+"px",e.style.overflow="hidden",t){const e=688;t.style.height=e+"px"}}else e.style.transform="",e.style.transformOrigin="",e.style.width="100%",e.style.height="100vh",e.style.position="relative",e.style.left="",e.style.top="",e.style.overflow="hidden",t&&(t.style.height=`calc(100vh - ${r+s}px)`);e.style.zIndex="1"}function renderStepper(e,t,n,o=5){if("string"==typeof e&&(e=document.querySelector(e)),"string"==typeof n&&(n=document.querySelector(n)),!(e instanceof HTMLElement&&n instanceof HTMLElement))throw new Error("renderStepper: elementos inválidos.");e.querySelectorAll(".step").forEach((e=>e.remove()));const r=Array.from({length:o},((e,t)=>t/(o-1)*100)),s=r.map(((e,t)=>({p:e,i:t}))).filter((({p:e})=>e<=t)).pop().i;r.forEach(((t,n)=>{const o=document.createElement("div");o.classList.add("step"),n"Menús de la herramienta"===e.title&&e.moduleTitle===t.moduleTitle));-1!==n&&CourseNav.gotoSlide(n)}window.COURSE_CONFIG={COURSE_CONFIG_URL:"config.json",DEBUG:!1},document.addEventListener("DOMContentLoaded",(()=>{setTimeout(scaleWrapCourseContent,100),window.addEventListener("resize",(()=>setTimeout(scaleWrapCourseContent,100))),document.body.addEventListener("beforeSlideChange",(e=>{})),document.body.addEventListener("slideChange",(e=>{if(e.detail&&"number"==typeof e.detail.slideIndex&&Array.isArray(e.detail.contentArray)){renderPagination(e.detail.slideIndex,e.detail.contentArray);const t=e.detail.contentArray,n="Menús de la herramienta",o=CourseNav.getCurrentSlide(),r=t.findIndex((e=>e.title===n&&e.moduleTitle===o.moduleTitle)),s=document.getElementById("coursenav-other-btn");if(!s)return;-1!==r?s.classList.remove("disabled"):s.classList.add("disabled")}const t=document.getElementById("coursenav-course-title");if(t){const n=e.detail.contentArray[e.detail.slideIndex],o=n.moduleTitle?n.moduleTitle+" | ":"",r=n.title||"Sin título";t.textContent=o+r}const n=document.getElementById("stepper"),o=document.getElementById("step-movil");renderStepper(n,CourseNav.getProgressPercent(!0),o)})),document.body.addEventListener("slideCompleted",(e=>{const t=document.getElementById("stepper"),n=document.getElementById("step-movil");renderStepper(t,CourseNav.getProgressPercent(!0),n),renderPagination(e.detail.slideIndex,CourseNav.getCourseContentArray())}));const e=document.getElementById("coursenav-other-btn");e&&e.addEventListener("click",(()=>{gotoFirstMenuToolSlide()}))})),window.addEventListener("DOMContentLoaded",(()=>scaleWrapCourseContent())),window.addEventListener("resize",(()=>scaleWrapCourseContent())); \ No newline at end of file +function renderPagination(e,t){const n=document.getElementById("coursenav-page-number"),o=document.getElementById("coursenav-total-pages");if(!Array.isArray(t))return;manageMenuVisibility(e,t);const r=t[e];if(!r)return;const s=t.filter((e=>e.moduleTitle===r.moduleTitle)),l=s.findIndex((e=>e.content===r.content));n&&(n.textContent=l+1),o&&(o.textContent=" / "+s.length),updateNavButtons(l,s)}function updateNavButtons(e,t){const n=document.getElementById("coursenav-next-btn"),o=document.getElementById("coursenav-prev-btn");if(!n||!o)return;const r=e+1===t.length,s=0===e,l=CourseNav.isDebug();n.classList.toggle("disabled",r&&!l),o.classList.toggle("disabled",s&&!l)}function manageMenuVisibility(e,t){const n=document.querySelectorAll("#coursenav-main-menu > ul.course-menu");if(!n.length)return;if(n[0].style.display="block",!Array.isArray(t)||!t.length){for(let e=1;e{const n=parseInt(e.dataset.coursenavindex);return n>=0&&t[n]?.moduleTitle===r}));n[e].style.display=o?"block":"none"}}function scrollToElementTop(e,t={}){const n=Object.assign({behavior:"smooth",block:"start",inline:"nearest"},t),o=document.querySelector(e);o&&o.scrollIntoView(n)}function animateOnScroll(e,t,n={}){const{threshold:o=.1,animateOnce:r=!0,prefix:s="animate__animated"}=n,l=new IntersectionObserver(((e,n)=>{e.forEach((e=>{e.isIntersecting?(e.target.classList.add(s,t),r&&n.unobserve(e.target)):r||e.target.classList.remove(s,t)}))}),{threshold:o});return document.querySelectorAll(e).forEach((e=>l.observe(e))),l}function scaleWrapCourseContent(){const e=document.querySelector(".wrap-course-content");if(!e)return;const t=window.innerWidth,n=window.innerHeight;let o,r;t<1500?(o=1366,r=768):(o=1920,r=1080);const s=Math.min(t/o,n/r);e.style.transform=`scale(${s})`,e.style.transformOrigin="top left",e.style.width=o+"px",e.style.height=r+"px",e.style.position="absolute",e.style.left=(t-o*s)/2+"px",e.style.top=(n-r*s)/2+"px",e.style.overflow="hidden",e.style.zIndex="1"}function renderStepper(e,t,n,o=5){if("string"==typeof e&&(e=document.querySelector(e)),"string"==typeof n&&(n=document.querySelector(n)),!(e instanceof HTMLElement&&n instanceof HTMLElement))throw new Error("renderStepper: elementos inválidos.");e.querySelectorAll(".step").forEach((e=>e.remove()));const r=Array.from({length:o},((e,t)=>t/(o-1)*100)),s=r.map(((e,t)=>({p:e,i:t}))).filter((({p:e})=>e<=t)).pop().i;r.forEach(((t,n)=>{const o=document.createElement("div");o.classList.add("step"),n"Menús de la herramienta"===e.title&&e.moduleTitle===t.moduleTitle));-1!==n&&CourseNav.gotoSlide(n)}window.COURSE_CONFIG={COURSE_CONFIG_URL:"config.json",DEBUG:!1},document.addEventListener("DOMContentLoaded",(()=>{let e;scaleWrapCourseContent(),setTimeout(scaleWrapCourseContent,100),window.addEventListener("resize",(()=>{clearTimeout(e),e=setTimeout(scaleWrapCourseContent,50)})),window.addEventListener("orientationchange",(()=>{setTimeout(scaleWrapCourseContent,200)})),document.addEventListener("visibilitychange",(()=>{document.hidden||setTimeout(scaleWrapCourseContent,100)})),document.body.addEventListener("beforeSlideChange",(e=>{})),document.body.addEventListener("slideChange",(e=>{if(e.detail&&"number"==typeof e.detail.slideIndex&&Array.isArray(e.detail.contentArray)){renderPagination(e.detail.slideIndex,e.detail.contentArray);const t=e.detail.contentArray,n="Menús de la herramienta",o=CourseNav.getCurrentSlide(),r=t.findIndex((e=>e.title===n&&e.moduleTitle===o.moduleTitle)),s=document.getElementById("coursenav-other-btn");if(!s)return;-1!==r?s.classList.remove("disabled"):s.classList.add("disabled")}const t=document.getElementById("coursenav-course-title");if(t){const n=e.detail.contentArray[e.detail.slideIndex],o=n.moduleTitle?n.moduleTitle+" | ":"",r=n.title||"Sin título";t.textContent=o+r}const n=document.getElementById("stepper"),o=document.getElementById("step-movil");renderStepper(n,CourseNav.getProgressPercent(!0),o)})),document.body.addEventListener("slideCompleted",(e=>{const t=document.getElementById("stepper"),n=document.getElementById("step-movil");renderStepper(t,CourseNav.getProgressPercent(!0),n),renderPagination(e.detail.slideIndex,CourseNav.getCourseContentArray())}));const t=document.getElementById("coursenav-other-btn");t&&t.addEventListener("click",(()=>{gotoFirstMenuToolSlide()}))})),window.addEventListener("DOMContentLoaded",(()=>scaleWrapCourseContent())),window.addEventListener("resize",(()=>scaleWrapCourseContent())); \ No newline at end of file diff --git a/js/jquery.flip.min.js b/js/jquery.flip.min.js new file mode 100644 index 0000000..3661d7d --- /dev/null +++ b/js/jquery.flip.min.js @@ -0,0 +1,6 @@ +/*! flip - v1.0.11 - 2015-07-13 +* https://github.com/nnattawat/flip +* Copyright (c) 2015 Nattawat Nonsung; Licensed MIT */ + +!function(a){var b=function(a){a.data("flipped",!0);var b="rotate"+a.data("axis");a.find(a.data("front")).css({transform:b+(a.data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}),a.find(a.data("back")).css({transform:b+"(0deg)","z-index":"1"})},c=function(a){a.data("flipped",!1);var b="rotate"+a.data("axis");a.find(a.data("front")).css({transform:b+"(0deg)","z-index":"1"}),a.find(a.data("back")).css({transform:b+(a.data("reverse")?"(180deg)":"(-180deg)"),"z-index":"0"})},d=function(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]};a.fn.flip=function(f,g){return"function"==typeof f&&(g=f),this.each(function(){var h=a(this);if(void 0===f||"boolean"!=typeof f&&"string"!=typeof f)if(h.data("initiated"))void 0!==f.axis&&e.call(this,f.axis,g);else{h.data("initiated",!0);var i=a.extend({axis:"y",reverse:!1,trigger:"click",speed:500,forceHeight:!1,forceWidth:!1,autoSize:!0,front:"auto",back:"auto"},f);"auto"==i.front?i.front=h.find(".front").length>0?".front":"div:first-child":"autostrict"==i.front&&(i.front="div:first-child"),"auto"==i.back?i.back=h.find(".back").length>0?".back":"div:first-child + div":"autostrict"==i.back&&(i.back="div:first-child + div"),h.data("reverse",i.reverse),h.data("axis",i.axis),h.data("front",i.front),h.data("back",i.back);var j="rotate"+("x"==i.axis.toLowerCase()?"x":"y"),k=2*h["outer"+("rotatex"==j?"Height":"Width")]();h.find(h.data("back")).css({transform:j+"("+(i.reverse?"180deg":"-180deg")+")"}),h.css({perspective:k,position:"relative"});var l=i.speed/1e3||.5,m=h.find(i.front).add(i.back,h);if(i.forceHeight?m.outerHeight(h.height()):i.autoSize&&m.css({height:"100%"}),i.forceWidth?m.outerWidth(h.width()):i.autoSize&&m.css({width:"100%"}),m.css({"backface-visibility":"hidden","transform-style":"preserve-3d",position:"absolute","z-index":"1"}),h.find(h.data("back")).css({transform:j+"("+(i.reverse?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){m.css({transition:"all "+l+"s ease-out"}),void 0!==g&&g.call(this)},20),"click"==i.trigger.toLowerCase())h.on(a.fn.tap?"tap":"click",function(){h.find(a(event.target).closest('button, a, input[type="submit"]')).length||(h.data("flipped")?c(h):b(h))});else if("hover"==i.trigger.toLowerCase()){var n=function(){h.unbind("mouseleave",o),b(h),setTimeout(function(){h.bind("mouseleave",o),h.is(":hover")||c(h)},i.speed+150)},o=function(){c(h)};h.mouseenter(n),h.mouseleave(o)}}else"toggle"==f&&(f=!h.data("flipped")),f?b(h):c(h),void 0!==g&&a(this).one(d(),function(){g.call(this)})}),this};var e=function(b,c){if(a(this).data("axis")!=b.toLowerCase()){var d=a(this).find(a(this).data("front")).add(a(this).data("back"),a(this)),e=d.css("transition");d.css({transition:"none"}),b=b.toLowerCase(),a(this).data("axis",b);var f="rotate"+b;a(this).data("flipped")?a(this).find(a(this).data("front")).css({transform:f+(a(this).data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}):a(this).find(a(this).data("back")).css({transform:f+"("+(a(this).data("reverse")?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){d.css({transition:e}),void 0!==c&&c.call(this)},0)}else void 0!==c&&setTimeout(c.bind(this),0)}}(jQuery); +//# sourceMappingURL=jquery.flip.min.js.map \ No newline at end of file