Spaces:

CYV28
/

RetinAI

Sleeping

App Files Files Community

Akira-Kurusu commited on Mar 19

Commit

15c658c

verified ·

1 Parent(s): 42fa7da

Update web/index.html

Browse files

Files changed (1) hide show

web/index.html +123 -32

web/index.html CHANGED Viewed

@@ -3,8 +3,10 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="icon" href="favicon.ico">
     <title>Dashboard</title>
     <link rel="stylesheet" href="css/simplebar.css">
@@ -17,8 +19,19 @@
     <link rel="stylesheet" href="css/jquery.timepicker.css">
     <link rel="stylesheet" href="css/quill.snow.css">
     <link rel="stylesheet" href="css/daterangepicker.css">
-    <link rel="stylesheet" href="css/app-light.css" id="lightTheme">
-    <link rel="stylesheet" href="css/app-dark.css" id="darkTheme" disabled>
 </head>
 <body class="vertical  light  ">
 <div class="wrapper">
@@ -28,6 +41,12 @@
         </button>
         <ul class="nav">
             <li class="nav-item dropdown">
@@ -599,6 +618,11 @@
     </script>
     <script src="js/apps.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
@@ -1034,22 +1058,8 @@
                 chartElement.innerHTML = '';
-                // Convertir "YYYY-MM-DD" a timestamp UTC mediodia para evitar
-                // desfases de zona horaria que desplazan el dia al anterior
-                function dateStrToTs(d) {
-                    var parts = d.split('-').map(Number);
-                    return Date.UTC(parts[0], parts[1] - 1, parts[2], 12, 0, 0);
-                }
-                // Series con objetos {x: timestamp, y: valor}
-                // ApexCharts maneja las fechas nativamente con type:'datetime'
-                function toSeries(values) {
-                    return dates.map(function(d, i) { return { x: dateStrToTs(d), y: values[i] }; });
-                }
                 setTimeout(() => {
                     try {
-                        var maxVal = Math.max.apply(null, totalConsultations) || 1;
                         const options = {
                             chart: {
                                 type: 'area',
@@ -1075,11 +1085,22 @@
                                 background: 'transparent'
                             },
                             colors: ['#2E93fA', '#FF9800', '#66DA26'],
-                            series: [
-                                { name: 'Total Consultas', data: toSeries(totalConsultations) },
-                                { name: 'Con Retinopatía',  data: toSeries(positiveCases) },
-                                { name: 'Sin Retinopatía',  data: toSeries(negativeCases) }
-                            ],
                             xaxis: {
                                 type: 'datetime',
                                 labels: {
@@ -1112,7 +1133,7 @@
                                     }
                                 },
                                 min: 0,
-                                tickAmount: maxVal,
                                 labels: {
                                     formatter: function(val) { return Math.floor(val); },
                                     style: {
@@ -1126,8 +1147,7 @@
                                 intersect: false,
                                 x: {
                                     formatter: function(value) {
-                                        var d = new Date(value);
-                                        return d.toLocaleDateString('es-ES', {
                                             weekday: 'long',
                                             year: 'numeric',
                                             month: 'long',
@@ -1868,7 +1888,6 @@
             }
             window.addEventListener('load', centerWindow);
-            window.addEventListener('focus', centerWindow);
         })();
     </script>
@@ -1956,16 +1975,88 @@
         });
     </script>
 <script>
-    function _initFeather() {
-        if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
     }
-    document.addEventListener('DOMContentLoaded', _initFeather);
-    var _fObserver = new MutationObserver(function(mutations) {
-        if (mutations.some(function(m){ return m.addedNodes.length > 0; })) _initFeather();
     });
-    document.addEventListener('DOMContentLoaded', function() {
-        _fObserver.observe(document.body, { childList: true, subtree: true });
     });
 </script>
 </body>
 </html>

 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="icon" href="favicon.ico">
     <title>Dashboard</title>
     <link rel="stylesheet" href="css/simplebar.css">
     <link rel="stylesheet" href="css/jquery.timepicker.css">
     <link rel="stylesheet" href="css/quill.snow.css">
     <link rel="stylesheet" href="css/daterangepicker.css">
+<style id="themeBlock">html{visibility:hidden}</style>
+<script>
+  (function(){
+    var dark = localStorage.getItem('theme') === 'dark';
+    document.write(
+      '<link rel="stylesheet" href="css/app-' + (dark?'dark':'light') + '.css" id="' + (dark?'dark':'light') + 'Theme">' +
+      '<link rel="stylesheet" href="css/app-' + (dark?'light':'dark') + '.css" id="' + (dark?'light':'dark') + 'Theme" disabled>'
+    );
+    if(dark) document.documentElement.style.backgroundColor = '#1a1a2e';
+  })();
+</script>
+<style>html{visibility:visible}</style>
 </head>
 <body class="vertical  light  ">
 <div class="wrapper">
         </button>
         <ul class="nav">
+          <li class="nav-item">
+            <a class="nav-link text-muted my-2" href="#" id="modeSwitcher" data-mode="light">
+              <i data-feather="sun"></i>
+            </a>
+          </li>
             <li class="nav-item dropdown">
     </script>
     <script src="js/apps.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.1/feather.min.js"></script>
+    <script>
+    feather.replace();
+    </script>
     <script>
         window.dataLayer = window.dataLayer || [];
                 chartElement.innerHTML = '';
                 setTimeout(() => {
                     try {
                         const options = {
                             chart: {
                                 type: 'area',
                                 background: 'transparent'
                             },
                             colors: ['#2E93fA', '#FF9800', '#66DA26'],
+                            // Convertir "YYYY-MM-DD" a timestamp UTC mediodia para evitar
+                            // desfases de zona horaria que desplazan el dia al anterior
+                            series: (function() {
+                                function toTs(d) {
+                                    var p = d.split('-').map(Number);
+                                    return Date.UTC(p[0], p[1] - 1, p[2], 12, 0, 0);
+                                }
+                                function toSeries(vals) {
+                                    return dates.map(function(d, i) { return { x: toTs(d), y: vals[i] }; });
+                                }
+                                return [
+                                    { name: 'Total Consultas', data: toSeries(totalConsultations) },
+                                    { name: 'Con Retinopatía',  data: toSeries(positiveCases) },
+                                    { name: 'Sin Retinopatía',  data: toSeries(negativeCases) }
+                                ];
+                            })(),
                             xaxis: {
                                 type: 'datetime',
                                 labels: {
                                     }
                                 },
                                 min: 0,
+                                tickAmount: Math.max.apply(null, totalConsultations) || 1,
                                 labels: {
                                     formatter: function(val) { return Math.floor(val); },
                                     style: {
                                 intersect: false,
                                 x: {
                                     formatter: function(value) {
+                                        return new Date(value).toLocaleDateString('es-ES', {
                                             weekday: 'long',
                                             year: 'numeric',
                                             month: 'long',
             }
             window.addEventListener('load', centerWindow);
         })();
     </script>
         });
     </script>
 <script>
+(function () {
+  // Feather: reemplazar SOLO íconos que aún son <i>, nunca tocar SVGs ya renderizados
+  function _initFeather() {
+    if (typeof feather === 'undefined') return;
+    // Solo actuar si hay elementos <i data-feather> sin reemplazar todavía
+    var pending = document.querySelectorAll('i[data-feather]');
+    if (pending.length > 0) {
+      feather.replace({ 'stroke-width': 1.8 });
     }
+  }
+  document.addEventListener('DOMContentLoaded', _initFeather);
+  var _fObserverActive = false;
+  document.addEventListener('DOMContentLoaded', function () {
+    var observer = new MutationObserver(function (mutations) {
+      if (_fObserverActive) return; // evitar loops
+      var hasPendingFeather = mutations.some(function (m) {
+        return Array.from(m.addedNodes).some(function (n) {
+          if (n.nodeType !== 1) return false;
+          // Solo disparar si el nodo agregado tiene <i data-feather> dentro
+          return n.matches('i[data-feather]') || n.querySelector('i[data-feather]');
+        });
+      });
+      if (hasPendingFeather) {
+        _fObserverActive = true;
+        _initFeather();
+        setTimeout(function () { _fObserverActive = false; }, 50);
+      }
     });
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
+})();
+</script>
+<script>
+(function () {
+  function applyTheme(theme) {
+    var lightTheme = document.getElementById('lightTheme');
+    var darkTheme  = document.getElementById('darkTheme');
+    if (!lightTheme || !darkTheme) return;
+    if (theme === 'dark') {
+      lightTheme.disabled = true;
+      darkTheme.disabled  = false;
+      document.documentElement.style.backgroundColor = '#1a1a2e';
+    } else {
+      lightTheme.disabled = false;
+      darkTheme.disabled  = true;
+      document.documentElement.style.backgroundColor = '';
+    }
+    // ✅ NO tocar visibility aquí — solo el script del <head> debe hacerlo al cargar
+  }
+  // Aplicar tema guardado (sin tocar visibility)
+  applyTheme(localStorage.getItem('theme') || 'light');
+  // Sincronizar entre pestañas
+  window.addEventListener('storage', function (e) {
+    if (e.key === 'theme') applyTheme(e.newValue);
+  });
+  function switchTheme() {
+    var darkTheme = document.getElementById('darkTheme');
+    if (!darkTheme) return;
+    var newTheme = darkTheme.disabled ? 'dark' : 'light';
+    applyTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+  }
+  document.addEventListener('DOMContentLoaded', function () {
+    var btn = document.getElementById('modeSwitcher');
+    if (!btn) return;
+    var newBtn = btn.cloneNode(true);
+    btn.parentNode.replaceChild(newBtn, btn);
+    newBtn.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      switchTheme();
     });
+  });
+})();
 </script>
 </body>
 </html>