Spaces:

CYV28
/

RetinAI

Sleeping

App Files Files Community

ViannyCruz commited on Mar 19

Commit

bc774b9

verified ·

1 Parent(s): 83296cb

Update web/index.html

Browse files

Files changed (1) hide show

web/index.html +49 -26

web/index.html CHANGED Viewed

@@ -1986,39 +1986,62 @@
         _fObserver.observe(document.body, { childList: true, subtree: true });
     });
 </script>
-  <script>
 (function () {
-  // Inyecta el CSS de transición en el <head>
-  const style = document.createElement('style');
-  style.textContent = [
-    '.theme-transitioning *,',
-    '.theme-transitioning *::before,',
-    '.theme-transitioning *::after {',
-    '  transition:',
-    '    background-color 0.25s ease,',
-    '    color            0.20s ease,',
-    '    border-color     0.20s ease,',
-    '    box-shadow       0.20s ease !important;',
-    '}'
-  ].join('\n');
-  document.head.appendChild(style);
-  // Activa la transición durante el cambio de tema
-  function smoothThemeSwitch() {
-    document.body.classList.add('theme-transitioning');
     setTimeout(function () {
-      document.body.classList.remove('theme-transitioning');
-    }, 400);
   }
-  // Intercepta el botón #modeSwitcher que ya existe en tu HTML
   document.addEventListener('DOMContentLoaded', function () {
     const btn = document.getElementById('modeSwitcher');
-    if (btn) {
-      btn.addEventListener('click', smoothThemeSwitch, true);
-      // true = capture phase: se ejecuta antes que el listener de apps.js
-    }
   });
 })();

         _fObserver.observe(document.body, { childList: true, subtree: true });
     });
 </script>
+<script>
 (function () {
+  // Crea un overlay negro/blanco que hace fade sobre toda la página
+  const overlay = document.createElement('div');
+  overlay.id = 'theme-overlay';
+  overlay.style.cssText = [
+    'position:fixed',
+    'inset:0',
+    'z-index:99999',
+    'pointer-events:none',
+    'opacity:0',
+    'transition:opacity 0.18s ease',
+    'background:#fff'
+  ].join(';');
+  document.body.appendChild(overlay);
+  function switchTheme() {
+    const lightTheme = document.getElementById('lightTheme');
+    const darkTheme  = document.getElementById('darkTheme');
+    const goingDark  = !darkTheme.disabled;
+    // El overlay es blanco al ir a dark, negro al ir a light
+    overlay.style.background = goingDark ? '#fff' : '#1a1a2e';
+    // 1. Fade IN del overlay (tapa la página)
+    overlay.style.opacity = '1';
     setTimeout(function () {
+      // 2. Cambia el tema mientras está tapado
+      lightTheme.disabled = !lightTheme.disabled;
+      darkTheme.disabled  = !darkTheme.disabled;
+      // 3. Fade OUT del overlay (revela el nuevo tema)
+      setTimeout(function () {
+        overlay.style.opacity = '0';
+      }, 50);
+    }, 180);
   }
+  // Reemplaza el comportamiento del botón existente
   document.addEventListener('DOMContentLoaded', function () {
     const btn = document.getElementById('modeSwitcher');
+    if (!btn) return;
+    // Clona el botón para eliminar listeners anteriores de apps.js
+    const newBtn = btn.cloneNode(true);
+    btn.parentNode.replaceChild(newBtn, btn);
+    newBtn.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      switchTheme();
+    });
   });
 })();