mod custom logo and min
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Control de Patentes - ALPR</title>
|
<title>Control de Patentes - ALPR</title>
|
||||||
<meta name="description" content="Sistema de Control de Acceso mediante Reconocimiento Automático de Patentes" />
|
<meta name="description" content="Sistema de Control de Acceso mediante Reconocimiento Automático de Patentes" />
|
||||||
@@ -38,9 +39,10 @@
|
|||||||
animation: pulse 2s ease-in-out infinite;
|
animation: pulse 2s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-logo svg {
|
.loading-logo img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
|
filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -91,17 +93,33 @@
|
|||||||
|
|
||||||
/* Animations */
|
/* Animations */
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
to { transform: rotate(360deg); }
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%, 100% { transform: scale(1); opacity: 1; }
|
|
||||||
50% { transform: scale(1.05); opacity: 0.8; }
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shimmer {
|
@keyframes shimmer {
|
||||||
0% { background-position: -200% 0; }
|
0% {
|
||||||
100% { background-position: 200% 0; }
|
background-position: -200% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 200% 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dots animation */
|
/* Dots animation */
|
||||||
@@ -111,36 +129,34 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes dots {
|
@keyframes dots {
|
||||||
0%, 20% { content: ''; }
|
|
||||||
40% { content: '.'; }
|
0%,
|
||||||
60% { content: '..'; }
|
20% {
|
||||||
80%, 100% { content: '...'; }
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
content: '.';
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
content: '..';
|
||||||
|
}
|
||||||
|
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
content: '...';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
<body>
|
||||||
<!-- Loading Screen (se remueve cuando React carga) -->
|
<!-- Loading Screen (se remueve cuando React carga) -->
|
||||||
<div id="loading-screen">
|
<div id="loading-screen">
|
||||||
<!-- Logo SVG (Car + Shield icon) -->
|
<!-- Logo personalizable - coloca tu imagen en /public/logo.png -->
|
||||||
<div class="loading-logo">
|
<div class="loading-logo">
|
||||||
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<img src="/logo.png" alt="Logo" onerror="this.parentElement.style.display='none'" />
|
||||||
<!-- Shield background -->
|
|
||||||
<path d="M50 8L15 25V50C15 72 30 88 50 95C70 88 85 72 85 50V25L50 8Z"
|
|
||||||
fill="url(#shield-gradient)" stroke="#3b82f6" stroke-width="2"/>
|
|
||||||
<!-- Car silhouette -->
|
|
||||||
<path d="M30 55H70M35 45H65L60 38H40L35 45ZM32 55V62H38V55H32ZM62 55V62H68V55H62Z"
|
|
||||||
stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<!-- Plate icon -->
|
|
||||||
<rect x="38" y="48" width="24" height="8" rx="1" fill="#3b82f6" stroke="#fff" stroke-width="1"/>
|
|
||||||
<text x="50" y="54" text-anchor="middle" fill="#fff" font-size="5" font-family="monospace" font-weight="bold">ALPR</text>
|
|
||||||
<!-- Gradient definitions -->
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="shield-gradient" x1="15" y1="8" x2="85" y2="95" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0%" stop-color="#1e40af"/>
|
|
||||||
<stop offset="100%" stop-color="#3730a3"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Spinner -->
|
<!-- Spinner -->
|
||||||
@@ -162,15 +178,16 @@
|
|||||||
<!-- Script para remover loading screen cuando React está listo -->
|
<!-- Script para remover loading screen cuando React está listo -->
|
||||||
<script>
|
<script>
|
||||||
// Fallback: remover loading screen después de 10 segundos máximo
|
// Fallback: remover loading screen después de 10 segundos máximo
|
||||||
setTimeout(function() {
|
setTimeout(function () {
|
||||||
var loadingScreen = document.getElementById('loading-screen');
|
var loadingScreen = document.getElementById('loading-screen');
|
||||||
if (loadingScreen) {
|
if (loadingScreen) {
|
||||||
loadingScreen.classList.add('fade-out');
|
loadingScreen.classList.add('fade-out');
|
||||||
setTimeout(function() {
|
setTimeout(function () {
|
||||||
loadingScreen.remove();
|
loadingScreen.remove();
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
}, 10000);
|
}, 10000);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
BIN
frontend/public/logo.png
Normal file
BIN
frontend/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 638 KiB |
12506
frontend/public/vite.svg
12506
frontend/public/vite.svg
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 641 KiB |
Reference in New Issue
Block a user