"Pantalla de carga e instrucciones de instalacion"

web/index.html

@@ -28,7 +28,7 @@
   <!-- Prevenir flash de fondo blanco con CSS -->
   <style>
     body {
-      background-color: #000000;
+      background-color: #4EA906; /* Verde de la aplicación */
       margin: 0;
       padding: 0;
       height: 100vh;
@@ -38,11 +38,12 @@
     
     .initial-loader {
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
       height: 100vh;
       width: 100vw;
-      background-color: #000000;
+      background-color: #4EA906; /* Verde de la aplicación */
       position: fixed;
       top: 0;
       left: 0;
@@ -51,8 +52,44 @@
     }
     
     .initial-loader img {
-      width: 150px;
-      height: 150px;
+      width: 180px;
+      height: 180px;
+      filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.3));
+      margin-bottom: 20px;
+    }
+
+    .loader-text {
+      color: white;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      font-size: 18px;
+      font-weight: 500;
+      text-align: center;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+      margin-bottom: 15px;
+    }
+    
+    .progress-container {
+      width: 250px;
+      height: 8px;
+      background-color: rgba(255, 255, 255, 0.3);
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+    
+    .progress-bar {
+      height: 100%;
+      width: 0%;
+      background-color: white;
+      border-radius: 10px;
+      transition: width 0.3s ease;
+      animation: loading 2.5s ease-in-out infinite;
+    }
+    
+    @keyframes loading {
+      0% { width: 0%; }
+      50% { width: 70%; }
+      100% { width: 100%; }
     }
   </style>
   
@@ -90,6 +127,10 @@
   <!-- Pantalla de carga inicial para evitar parpadeo -->
   <div id="initial-loader" class="initial-loader">
     <img src="icons/iconoCuadrado.png" alt="Cargando...">
+    <div class="loader-text">Cargando CR-Civán</div>
+    <div class="progress-container">
+      <div class="progress-bar" id="progress-bar"></div>
+    </div>
   </div>
   
   <script>
@@ -116,6 +157,21 @@
         }
       });
     });
+
+    // Simulación de progreso de carga
+    function updateProgress() {
+      let loadTime = 0;
+      const interval = setInterval(function() {
+        loadTime += 2;
+        if (loadTime > 100) {
+          clearInterval(interval);
+        }
+      }, 50);
+    }
+    
+    window.addEventListener('load', function() {
+      updateProgress();
+    });
   </script>
   <script src="main.dart.js" type="application/javascript"></script>
 </body>