usite-sas-bic/prosappweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add splash screen and remove unused scripts from index.html

Browse Source 
- 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>
This commit is contained in:
Lizandro Guarnizo
2026-06-25 17:19:52 -05:00
co-authored by Claude Sonnet 4.6
parent 2688aa94c9
commit c52745107e
1 changed files with 80 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+80 -14
View File
@@ -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>