From c52745107e7fa8b19c66f58bf4c1ff08ffad44ef Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 25 Jun 2026 17:19:52 -0500
Subject: [PATCH] feat: add splash screen and remove unused scripts from
 index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add full-screen gradient splash (blue #42A4EF → #1565C0) with logo
  and spinner shown while Flutter engine loads
- Fade out splash on flutter-first-frame event (smooth 300ms transition)
- Remove unused Firebase and reCAPTCHA scripts that slowed initial load
- Set body background-color to match splash so no white flash at any point
- Update title/description to ProsApp branding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/index.html | 94 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 80 insertions(+), 14 deletions(-)
diff --git a/web/index.html b/web/index.html
index eb91e4e..7d82e92 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,34 +2,100 @@
 <html>
 <head>
   <base href="$FLUTTER_BASE_HREF">
-
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
-
+  <meta name="description" content="ProsApp - Conecta con los mejores profesionales">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="prosapp_web_app">
+  <meta name="apple-mobile-web-app-title" content="ProsApp">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
-
   <link rel="icon" type="image/png" href="favicon.png"/>
-
-  <title>prosapp_web_app</title>
+  <title>ProsApp</title>
   <link rel="manifest" href="manifest.json">
 
-  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js"></script>
-
-  <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
-
-
   <script type="text/javascript">
     window.flutterWebRenderer = 'html';
   </script>
 
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    html, body {
+      height: 100%;
+      background-color: #42A4EF;
+    }
+
+    #splash {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(180deg, #42A4EF 0%, #1565C0 100%);
+      z-index: 9999;
+      transition: opacity 0.3s ease;
+    }
+
+    #splash .logo-box {
+      background: white;
+      border-radius: 16px;
+      padding: 14px 24px;
+      margin-bottom: 20px;
+    }
+
+    #splash img {
+      height: 48px;
+      display: block;
+    }
+
+    #splash .tagline {
+      color: rgba(255,255,255,0.75);
+      font-family: sans-serif;
+      font-size: 14px;
+      margin-bottom: 40px;
+    }
+
+    #splash .spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid rgba(255,255,255,0.3);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    #splash.hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  </style>
 </head>
 <body>
-  <div id="recaptcha-container"></div>
+
+  <div id="splash">
+    <div class="logo-box">
+      <img src="https://prosapp.co/img/logo_prosapp.png" alt="ProsApp"
+           onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
+      <span style="display:none;font-size:22px;font-weight:bold;color:#42A4EF;font-family:sans-serif">ProsApp</span>
+    </div>
+    <p class="tagline">Conecta con los mejores profesionales</p>
+    <div class="spinner"></div>
+  </div>
+
+  <script>
+    window.addEventListener('flutter-first-frame', function () {
+      var splash = document.getElementById('splash');
+      if (splash) {
+        splash.classList.add('hidden');
+        setTimeout(function () { splash.remove(); }, 350);
+      }
+    });
+  </script>
 
   <script src="flutter_bootstrap.js" async></script>
 </body>
