raven/ControlPatente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod custom logo and min

Browse Source
This commit is contained in:
raven
2026-01-29 12:12:56 -03:00
parent ab3eb8b1c4
commit a6243413a1
3 changed files with 12682 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/index.html
View File

@@ -1,8 +1,9 @@
<!doctype html>
<html lang="es">
<head>
<head>
<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" />
<title>Control de Patentes - ALPR</title>
<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;
}
.loading-logo svg {
.loading-logo img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
}
@@ -91,17 +93,33 @@
/* Animations */
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
@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 {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Dots animation */
@@ -111,36 +129,34 @@
}
@keyframes dots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '...'; }
0%,
20% {
content: '';
}
40% {
content: '.';
}
60% {
content: '..';
}
80%,
100% {
content: '...';
}
}
</style>
</head>
<body>
</head>
<body>
<!-- Loading Screen (se remueve cuando React carga) -->
<div id="loading-screen">
<!-- Logo SVG (Car + Shield icon) -->
<!-- Logo personalizable - coloca tu imagen en /public/logo.png -->
<div class="loading-logo">
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 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>
<img src="/logo.png" alt="Logo" onerror="this.parentElement.style.display='none'" />
</div>
<!-- Spinner -->
@@ -162,15 +178,16 @@
<!-- Script para remover loading screen cuando React está listo -->
<script>
// Fallback: remover loading screen después de 10 segundos máximo
setTimeout(function() {
setTimeout(function () {
var loadingScreen = document.getElementById('loading-screen');
if (loadingScreen) {
loadingScreen.classList.add('fade-out');
setTimeout(function() {
setTimeout(function () {
loadingScreen.remove();
}, 500);
}
}, 10000);
</script>
</body>
</body>
</html>

BIN
frontend/public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 KiB

12506
frontend/public/vite.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 641 KiB