Files
app_notificaciones_ador/web/index.html

179 lines
5.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<base href="/pwa/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Comunidad de Regantes de Civán">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Forzar renderizador HTML -->
<meta name="flutter-web-renderer" content="html">
<!-- PWA y iOS meta tags -->
<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">
<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="CR-Civán">
<link rel="apple-touch-icon" href="icons/iconoCuadrado.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="icons/iconoCuadrado.png"/>
<title>CR-Civán</title>
<link rel="manifest" href="manifest.json">
<!-- Prevenir flash de fondo blanco con CSS -->
<style>
body {
background-color: #4EA906; /* Verde de la aplicación */
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.initial-loader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
background-color: #4EA906; /* Verde de la aplicación */
position: fixed;
top: 0;
left: 0;
z-index: 999;
transition: opacity 0.5s ease-out;
}
.initial-loader img {
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>
<script>
// Definir la variable que falta
var serviceWorkerVersion = null;
window.flutterWebRenderer = 'html';
// Configuración específica para PWA
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('flutter_service_worker.js')
.then(function(reg) {
console.log('Service worker registered successfully');
})
.catch(function(e) {
console.error('Error during service worker registration:', e);
});
});
}
// Verificar si la app está instalada
function isAppInstalled() {
// Verificar si se está ejecutando como PWA
return window.matchMedia('(display-mode: standalone)').matches ||
window.navigator.standalone ||
document.referrer.includes('android-app://');
}
</script>
<script src="flutter.js" defer></script>
</head>
<body>
<!-- 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>
window.addEventListener('load', function(ev) {
// Ocultar el loader cuando Flutter esté listo
var initialLoader = document.getElementById('initial-loader');
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: null,
},
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine().then(function(appRunner) {
// Agregar un breve retraso antes de ocultar el loader
setTimeout(function() {
initialLoader.style.opacity = '0';
setTimeout(function() {
initialLoader.style.display = 'none';
}, 500);
}, 300);
appRunner.runApp();
});
}
});
});
// 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>
</html>