"Pantalla de carga e instrucciones de instalacion"

lib/bars/app_bar

@@ -1,36 +1,37 @@
 import 'package:flutter/material.dart';
-import 'package:crcivan/pages/utils.dart'; // Importar la función global
+import 'package:crcivan/pages/utils.dart';
 
 class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
   const CustomAppBar({Key? key}) : super(key: key);
 
-  double _getIconSize(BuildContext context) {
-    double screenWidth = MediaQuery.of(context).size.width;
-    return screenWidth > 600 ? 40.0 : 32.0;
-  }
-
   @override
   Widget build(BuildContext context) {
-    double iconSize = _getIconSize(context);
+    // Determinar si estamos en una pantalla pequeña
+    final screenWidth = MediaQuery.of(context).size.width;
+    final isSmallScreen = screenWidth < 600;
+    
+    // Calcular la altura del AppBar dinámicamente
+    final appBarHeight = isSmallScreen ? 70.0 : 85.0;
+    
+    // Calcular el tamaño del logo - un tercio más pequeño que la propuesta anterior
+    final logoHeight = isSmallScreen ? 40.0 : 53.0;
+    final logoPadding = isSmallScreen ? 4.0 : 8.0;
 
     return AppBar(
+      toolbarHeight: appBarHeight,
       title: const Text(''),
       centerTitle: true,
       backgroundColor: const Color.fromARGB(255, 78, 169, 6),
-      iconTheme: IconThemeData(
+      iconTheme: const IconThemeData(
-        color: Colors.white, // Cambia este color al que desees
+        color: Colors.white,
-        size: iconSize, // Ajustar el tamaño del icono
       ),
       flexibleSpace: Container(
-        padding: const EdgeInsets.all(8.0),
+        padding: EdgeInsets.symmetric(vertical: logoPadding),
         child: Center(
-          child: Padding(
+          child: Image.asset(
-            padding: const EdgeInsets.only(top: 10.0),
+            'assets/logo-civan.png',
-            child: Image.asset(
+            height: logoHeight,
-              'assets/logo-civan.png',
+            fit: BoxFit.contain,
-              height: getResponsiveFontSize(context, 400.0), // Ajustar la altura de la imagen
-              width: getResponsiveFontSize(context, 400.0), // Ajustar el ancho de la imagen
-            ),
           ),
         ),
       ),
@@ -38,5 +39,8 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
   }
 
   @override
-  Size get preferredSize => const Size.fromHeight(kToolbarHeight); // Tamaño fijo para el AppBar
+  Size get preferredSize {
+    // Altura dinámica según el tamaño de pantalla
+    return Size.fromHeight(85.0); // Valor ajustado para el logo más pequeño
+  }
 }

lib/pages/my_home_page.dart

@@ -123,94 +123,349 @@ class _MyHomePageState extends State<MyHomePage> {
     final bool isAndroid = browserInfo['isAndroid'];
     
     String title = "Instala CR-Civán en tu dispositivo";
-    String instructions = "";
     List<Widget> contentWidgets = [];
     
     // Instrucciones específicas según navegador y dispositivo
     if (isIOS) {
       if (browser == 'safari') {
-        instructions = "1. Toca el botón Compartir en la parte inferior de Safari (ícono de flecha hacia arriba)\n"
-                      "2. Desplázate hacia abajo y selecciona 'Añadir a pantalla de inicio'\n"
-                      "3. Confirma tocando 'Añadir'";
-        
         contentWidgets = [
           Text("Para instalar esta aplicación en tu iPhone o iPad:"),
           SizedBox(height: 16),
-          Text(instructions),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("1. "),
+              Expanded(
+                child: RichText(
+                  text: TextSpan(
+                    style: TextStyle(color: Colors.black),
+                    children: [
+                      TextSpan(text: "Toca el botón Compartir "),
+                      WidgetSpan(
+                        child: Icon(Icons.ios_share, size: 18),
+                        alignment: PlaceholderAlignment.middle,
+                      ),
+                      TextSpan(text: " en la parte inferior de Safari"),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          SizedBox(height: 8),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("2. "),
+              Expanded(
+                child: Text("Desplázate hacia abajo y selecciona 'Añadir a pantalla de inicio'"),
+              ),
+            ],
+          ),
+          SizedBox(height: 8),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("3. "),
+              Expanded(child: Text("Confirma tocando 'Añadir'")),
+            ],
+          ),
           SizedBox(height: 16),
           Text("Nota: La instalación de PWAs en iOS solo es compatible con Safari.", 
                style: TextStyle(fontStyle: FontStyle.italic)),
         ];
       } else {
-        instructions = "Para instalar esta aplicación en iOS, debes abrir esta página en Safari.";
         contentWidgets = [
-          Text(instructions),
+          Text("Para instalar esta aplicación en iOS, debes abrir esta página en Safari."),
           SizedBox(height: 16),
-          Text("Las PWAs en iOS solo pueden instalarse desde Safari.", 
+          Row(
-               style: TextStyle(fontStyle: FontStyle.italic)),
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(Icons.info_outline, color: Colors.blue),
+              SizedBox(width: 8),
+              Flexible(
+                child: Text("Las PWAs en iOS solo pueden instalarse desde Safari.", 
+                     style: TextStyle(fontStyle: FontStyle.italic)),
+              ),
+            ],
+          ),
         ];
       }
     } else if (browser == 'chrome' || browser == 'edge') {
       String browserName = (browser == 'chrome') ? "Chrome" : "Edge";
+      IconData menuIcon = (browser == 'chrome') ? Icons.more_vert : Icons.more_horiz;
       
       if (isAndroid) {
-        instructions = "1. Toca el botón de menú (⋮) en la esquina superior derecha\n"
+        contentWidgets = [
-                      "2. Selecciona 'Instalar aplicación' o 'Añadir a pantalla de inicio'\n"
+          Text("Para instalar esta aplicación en $browserName:"),
-                      "3. Confirma la instalación";
+          SizedBox(height: 16),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("1. "),
+              Expanded(
+                child: RichText(
+                  text: TextSpan(
+                    style: TextStyle(color: Colors.black),
+                    children: [
+                      TextSpan(text: "Toca el botón de menú "),
+                      WidgetSpan(
+                        child: Icon(menuIcon, size: 18),
+                        alignment: PlaceholderAlignment.middle,
+                      ),
+                      TextSpan(text: " en la esquina superior derecha"),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          SizedBox(height: 8),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("2. "),
+              Expanded(
+                child: RichText(
+                  text: TextSpan(
+                    style: TextStyle(color: Colors.black),
+                    children: [
+                      TextSpan(text: "Selecciona 'Añadir a pantalla de inicio' "),
+                      WidgetSpan(
+                        child: Icon(Icons.add_to_home_screen, size: 18),
+                        alignment: PlaceholderAlignment.middle,
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          SizedBox(height: 8),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("3. "),
+              Expanded(child: Text("Confirma la instalación")),
+            ],
+          ),
+        ];
       } else {
-        instructions = "1. Haz clic en el icono de instalación que aparece en la barra de direcciones (icono ▽)\n"
+        contentWidgets = [
-                      "2. O bien, haz clic en el botón de menú (⋮) y selecciona 'Instalar CR-Civán...'\n"
+          Text("Para instalar esta aplicación en $browserName:"),
-                      "3. Confirma la instalación en el diálogo que aparece";
+          SizedBox(height: 16),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("1. "),
+              Expanded(
+                child: RichText(
+                  text: TextSpan(
+                    style: TextStyle(color: Colors.black),
+                    children: [
+                      TextSpan(text: "Haz clic en el icono de instalación "),
+                      WidgetSpan(
+                        child: Icon(Icons.download, size: 18),
+                        alignment: PlaceholderAlignment.middle,
+                      ),
+                      TextSpan(text: " que aparece en la barra de direcciones"),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          SizedBox(height: 8),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("2. "),
+              Expanded(
+                child: RichText(
+                  text: TextSpan(
+                    style: TextStyle(color: Colors.black),
+                    children: [
+                      TextSpan(text: "O bien, haz clic en el botón de menú "),
+                      WidgetSpan(
+                        child: Icon(menuIcon, size: 18),
+                        alignment: PlaceholderAlignment.middle,
+                      ),
+                      TextSpan(text: " y selecciona 'Instalar CR-Civán...'"),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          SizedBox(height: 8),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("3. "),
+              Expanded(child: Text("Confirma la instalación en el diálogo que aparece")),
+            ],
+          ),
+        ];
       }
-      
-      contentWidgets = [
-        Text("Para instalar esta aplicación en $browserName:"),
-        SizedBox(height: 16),
-        Text(instructions),
-      ];
     } else if (browser == 'firefox') {
-      instructions = "1. Haz clic en el botón de menú (≡) en la esquina superior derecha\n"
-                    "2. Selecciona 'Instalar aplicación' (si está disponible)\n"
-                    "3. O añade manualmente esta página a tu pantalla de inicio";
-      
       contentWidgets = [
-        Text("Para instalar esta aplicación en Firefox:"),
+        Text("Para acceder rápidamente a esta aplicación en Firefox:"),
         SizedBox(height: 16),
-        Text(instructions),
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text("1. "),
+            Expanded(
+              child: RichText(
+                text: TextSpan(
+                  style: TextStyle(color: Colors.black),
+                  children: [
+                    TextSpan(text: "Toca el botón de menú "),
+                    WidgetSpan(
+                      child: Icon(Icons.menu, size: 18),
+                      alignment: PlaceholderAlignment.middle,
+                    ),
+                    TextSpan(text: " en la esquina superior derecha"),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+        SizedBox(height: 8),
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text("2. "),
+            Expanded(
+              child: RichText(
+                text: TextSpan(
+                  style: TextStyle(color: Colors.black),
+                  children: [
+                    TextSpan(text: "Selecciona 'Añadir a marcadores' o 'Añadir a pantalla de inicio' "),
+                    WidgetSpan(
+                      child: Icon(Icons.bookmark_add, size: 18),
+                      alignment: PlaceholderAlignment.middle,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
         SizedBox(height: 16),
-        Text("Nota: Firefox tiene soporte limitado para PWAs en algunos sistemas.", 
+        Container(
-             style: TextStyle(fontStyle: FontStyle.italic)),
+          padding: EdgeInsets.all(8),
+          decoration: BoxDecoration(
+            color: Colors.orange.withOpacity(0.2),
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Row(
+            children: [
+              Icon(Icons.info_outline, color: Colors.deepOrange, size: 20),
+              SizedBox(width: 8),
+              Expanded(
+                child: Text(
+                  "Firefox tiene soporte limitado para instalar PWAs. Es posible que necesites usar Chrome para una instalación completa.", 
+                  style: TextStyle(fontStyle: FontStyle.italic),
+                ),
+              ),
+            ],
+          ),
+        ),
       ];
     } else {
-      instructions = "1. Busca en el menú de tu navegador la opción 'Instalar aplicación' o 'Añadir a pantalla de inicio'\n"
-                    "2. También puedes usar las opciones de marcadores/favoritos para acceder rápidamente";
-      
       contentWidgets = [
         Text("Para instalar esta aplicación:"),
         SizedBox(height: 16),
-        Text(instructions),
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text("1. "),
+            Expanded(
+              child: RichText(
+                text: TextSpan(
+                  style: TextStyle(color: Colors.black),
+                  children: [
+                    TextSpan(text: "Busca en el menú de tu navegador "),
+                    WidgetSpan(
+                      child: Icon(Icons.menu, size: 18),
+                      alignment: PlaceholderAlignment.middle,
+                    ),
+                    TextSpan(text: " la opción 'Instalar aplicación' o 'Añadir a pantalla de inicio'"),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+        SizedBox(height: 8),
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text("2. "),
+            Expanded(
+              child: RichText(
+                text: TextSpan(
+                  style: TextStyle(color: Colors.black),
+                  children: [
+                    TextSpan(text: "También puedes usar las opciones de marcadores "),
+                    WidgetSpan(
+                      child: Icon(Icons.bookmark, size: 18),
+                      alignment: PlaceholderAlignment.middle,
+                    ),
+                    TextSpan(text: " para acceder rápidamente"),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
       ];
     }
     
     // Mostrar el diálogo con instrucciones
     showDialog(
       context: context,
-      builder: (context) => AlertDialog(
+      builder: (context) {
-        title: Text(title),
+        // Detectar si es pantalla pequeña
-        content: SingleChildScrollView(
+        final isSmallScreen = MediaQuery.of(context).size.width < 360;
-          child: Column(
+        
-            mainAxisSize: MainAxisSize.min,
+        return AlertDialog(
-            crossAxisAlignment: CrossAxisAlignment.start,
+          title: Row(
-            children: contentWidgets,
+            children: [
+              Icon(Icons.install_mobile, color: Colors.green, size: isSmallScreen ? 18 : 24),
+              SizedBox(width: 8),
+              Flexible(
+                child: Text(
+                  isSmallScreen ? "Instalar CR-Civán" : title,
+                  style: TextStyle(
+                    fontSize: isSmallScreen ? 16 : 18,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+            ],
           ),
-        ),
+          content: SingleChildScrollView(
-        actions: [
+            child: Column(
-          TextButton(
+              mainAxisSize: MainAxisSize.min,
-            onPressed: () => Navigator.of(context).pop(),
+              crossAxisAlignment: CrossAxisAlignment.start,
-            child: Text("ENTENDIDO"),
+              children: contentWidgets,
+            ),
           ),
-        ],
+          actions: [
-      ),
+            TextButton.icon(
+              icon: Icon(Icons.check, size: isSmallScreen ? 18 : 24),
+              label: Text(
+                "ENTENDIDO",
+                style: TextStyle(fontSize: isSmallScreen ? 13 : 14),
+              ),
+              onPressed: () => Navigator.of(context).pop(),
+            ),
+          ],
+        );
+      },
     );
   }
 
@@ -301,12 +556,15 @@ class _MyHomePageState extends State<MyHomePage> {
     );
   }
 
+  // Primero ajustamos la función de tamaño responsivo para que devuelva valores más grandes
   double getResponsiveFontSize(BuildContext context, double baseFontSize) {
     double screenWidth = MediaQuery.of(context).size.width;
     if (screenWidth > 600) {
-      return baseFontSize * 1.5;
+      // Aumentamos el multiplicador para pantallas grandes
+      return baseFontSize * 1.7; // Era 1.5
     } else {
-      return baseFontSize;
+      // Para pantallas pequeñas usamos un valor ligeramente mayor al base
+      return baseFontSize * 1.2; // Añadido multiplicador para pantallas pequeñas
     }
   }
 
@@ -399,7 +657,8 @@ class _MyHomePageState extends State<MyHomePage> {
                                     style: TextStyle(
                                       color: Colors.blue,
                                       decoration: TextDecoration.underline,
-                                      fontSize: getResponsiveFontSize(context, 12),
+                                      fontSize: getResponsiveFontSize(context, 14), // Aumentado de 12 a 14
+                                      fontWeight: FontWeight.w500, // Añadido para mejorar legibilidad
                                     ),
                                   ),
                                 ),
@@ -410,8 +669,8 @@ class _MyHomePageState extends State<MyHomePage> {
                                   onPressed: mostrarAvisoLegal,
                                   style: ElevatedButton.styleFrom(
                                     padding: EdgeInsets.symmetric(
-                                      horizontal: 12, 
+                                      horizontal: 16, // Aumentado de 12 a 16
-                                      vertical: isVerySmallScreen ? 4 : 8
+                                      vertical: isVerySmallScreen ? 6 : 10 // Aumentado de 4:8 a 6:10
                                     ),
                                     minimumSize: Size.zero,
                                     tapTargetSize: MaterialTapTargetSize.shrinkWrap,
@@ -419,7 +678,8 @@ class _MyHomePageState extends State<MyHomePage> {
                                   child: Text(
                                     'Aviso Legal',
                                     style: TextStyle(
-                                      fontSize: getResponsiveFontSize(context, 12),
+                                      fontSize: getResponsiveFontSize(context, 14), // Aumentado de 12 a 14
+                                      fontWeight: FontWeight.w500, // Añadido para mejor legibilidad
                                     ),
                                   ),
                                 ),
@@ -429,12 +689,13 @@ class _MyHomePageState extends State<MyHomePage> {
                                 // Botón de instalación con tamaño reducido - solo se muestra si es web y no está instalada
                                 if (kIsWeb && !isAppInstalled)
                                   ElevatedButton.icon(
-                                    icon: Icon(Icons.download_rounded, color: Colors.white, size: isVerySmallScreen ? 14 : 16),
+                                    icon: Icon(Icons.download_rounded, color: Colors.white, 
+                                         size: isVerySmallScreen ? 16 : 18), // Aumentado de 14:16 a 16:18
                                     label: Text(
                                       "Instalar aplicación",
                                       style: TextStyle(
                                         color: Colors.white,
-                                        fontSize: isVerySmallScreen ? 12 : 14,
+                                        fontSize: isVerySmallScreen ? 14 : 16, // Aumentado de 12:14 a 14:16
                                         fontWeight: FontWeight.bold,
                                       ),
                                     ),
@@ -442,8 +703,8 @@ class _MyHomePageState extends State<MyHomePage> {
                                     style: ElevatedButton.styleFrom(
                                       backgroundColor: Colors.green,
                                       padding: EdgeInsets.symmetric(
-                                        horizontal: 12, 
+                                        horizontal: 16, // Aumentado de 12 a 16
-                                        vertical: isVerySmallScreen ? 4 : 8
+                                        vertical: isVerySmallScreen ? 6 : 10 // Aumentado de 4:8 a 6:10
                                       ),
                                       minimumSize: Size.zero,
                                       tapTargetSize: MaterialTapTargetSize.shrinkWrap,

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;
+      width: 180px;
-      height: 150px;
+      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>