PARKMASTER 🚗 Sistema Completo de Gestión de Estacionamiento
Otros | Estacionamiento y Parqueadero
Galería de Imágenes
Servicios a medida
¿Necesitas más que este template?
- Personalización completa de diseño y contenido
- Base de datos y backend (Node, .NET, PHP...)
- Versión en Angular, React o Vue.js
- Sistema completo listo para producción
Respuesta en menos de 1 hora
Video Demo Template completo
Valoración del Template
Haz clic en las estrellas para valorar este template
Descripción
PARKMASTER es un template HTML profesional y completo para la gestión integral de estacionamientos y parqueaderos. Incluye 41 vistas funcionales organizadas en 8 módulos de negocio: operaciones, tarifas, clientes, mantenimiento, inventario, reportes, integración IoT y portal del cliente. Diseño moderno con sidebar colapsable, soporte bilingüe español/inglés, modo oscuro y claro, gráficas interactivas con Chart.js, mapas con Leaflet.js y alertas con SweetAlert2. Listo para usar como base de un sistema administrativo real o prototipo de alta fidelidad.
Características
- 41 vistas HTML incluidas
- Sidebar con navegación colapsable
- 8 módulos de negocio completos
- Modo oscuro y claro (Dark/Light Mode)
- Soporte bilingüe español e inglés (i18n)
- Gráficas interactivas con Chart.js
- Mapas interactivos con Leaflet.js
- Alertas y confirmaciones con SweetAlert2
- Diseño responsive con Bootstrap 5
- Panel de monitoreo de ocupación en tiempo real
- Gestión de tarifas por hora, día, semana y mes
- Control de acceso y salida de vehículos
- Módulo de reservas y pre-pagos
- Administración de abonos y membresías
- Programas de fidelización de clientes
- Dashboard de rendimiento operativo
- Reportes financieros y de ingresos
- Análisis de ocupación y rotación
- Proyecciones de demanda
- Monitoreo de cámaras y alarmas
- Gestión de equipos y sensores IoT
- Integración con APIs de terceros
- Portal del cliente autoservicio
- Módulo de inventario y suministros
- Gestión de proveedores y órdenes de compra
- Módulo de mantenimiento preventivo y correctivo
- Emisión de comprobantes fiscales
- Conciliación de ingresos
- Sistema de quejas y reclamos
- Login con diseño profesional
- Sin dependencias de backend — 100% frontend estático
- Google Fonts (Outfit + Plus Jakarta Sans)
Documentación
Estructura del Proyecto
El template está compuesto por archivos HTML independientes, cada uno con su archivo .js de soporte para la internacionalización.
PARKMASTER/ ├── Login.html → Pantalla de inicio de sesión ├── Index.html → Layout principal con sidebar y navegación ├── Resources_Index.js → Recursos e i18n del Index ├── Resources_Login.js → Recursos e i18n del Login │ ├── [módulo].html → 39 vistas funcionales adicionales └── [módulo].js → Archivos i18n por vista
Cómo usar el template
1. Abrir el proyecto
No requiere instalación ni servidor. Abre Login.html directamente en el navegador o usa un servidor local como Live Server (extensión de VS Code).
2. Flujo de navegación
- El usuario inicia en
Login.html. - Tras autenticarse, accede a
Index.html, que contiene el sidebar y carga cada vista dentro de un<iframe>. - Cada ítem del menú carga la vista correspondiente mediante el atributo
data-page.
3. Cambiar el idioma
El template detecta automáticamente el idioma guardado en localStorage bajo la clave preferred_language. Los valores soportados son es (español) y en (inglés). Para forzar un idioma desde consola:
localStorage.setItem('preferred_language', 'en');
location.reload();
4. Cambiar entre modo oscuro y claro
El tema se controla mediante el atributo data-theme en el elemento <html>. Los valores son light y dark. El Index.html incluye el toggle en la barra superior.
Módulos incluidos
🚗 Operaciones de Estacionamiento
- asignacion_gestion_plazas.html — Mapa de plazas con estados en tiempo real
- control_acceso_salida.html — Registro de entradas y salidas de vehículos
- control_flujo_vehicular.html — Monitoreo del flujo por zona y hora
- gestion_incidentes_operativos.html — Registro y seguimiento de incidentes
- gestion_reservas_pre_pagos.html — Gestión de reservas anticipadas
- monitoreo_ocupacion_tiempo_real.html — Ocupación en vivo con gráficas
💰 Administración de Tarifas y Pagos
- configuracion_tarifas_promociones.html — Tarifas por hora, día, mes y por evento; promociones con descuentos
- procesamiento_pagos.html — Panel de cobro y procesamiento
- conciliacion_ingresos.html — Conciliación diaria de ingresos
- gestion_cuentas_por_cobrar.html — Cartera de cuentas pendientes
- emision_comprobantes_fiscales.html — Generación de facturas y comprobantes
👤 Gestión de Clientes y Abonados
- gestion_clientes_registrados.html — CRUD de clientes
- administracion_abonos_membresias.html — Gestión de membresías y abonos activos
- historial_estacionamiento_cliente.html — Historial por cliente con filtros
- programas_fidelizacion.html — Puntos, beneficios y niveles de fidelización
- gestion_quejas_reclamos.html — Registro y resolución de reclamos
🔒 Mantenimiento y Seguridad
- monitoreo_camaras_alarmas.html — Vista de cámaras y estado de alarmas
- gestion_incidencias_seguridad.html — Registro de incidencias de seguridad
- gestion_equipos_sensores.html — Inventario de equipos y sensores IoT
- programacion_mantenimiento_preventivo.html — Calendario de mantenimiento
- registro_seguimiento_mantenimiento_correctivo.html — Órdenes de trabajo correctivo
📦 Inventario y Suministros
- gestion_inventario_consumibles.html — Stock de consumibles
- control_suministros_equipos.html — Control de suministros por equipo
- ordenes_compra_recepcion.html — Órdenes de compra y recepción de mercancía
- gestion_proveedores_mantenimiento.html — Directorio y evaluación de proveedores
📊 Reportes y Análisis de Negocio
- dashboard_rendimiento_operativo.html — KPIs operativos con gráficas
- analisis_ocupacion_rotacion.html — Tasas de ocupación y rotación por periodo
- analisis_comportamiento_cliente.html — Patrones de uso y segmentación
- proyecciones_demanda.html — Proyecciones con visualizaciones predictivas
- reportes_financieros_ingresos.html — Reportes de ingresos por período y zona
- reportes_incidencias_seguridad.html — Estadísticas de incidencias
🌐 Integración y Conectividad
- configuracion_dispositivos_iot.html — Alta y configuración de dispositivos IoT
- gestion_apis_terceros.html — Gestión de credenciales y endpoints de APIs
- gestion_integraciones_sistemas_externos.html — Conectores con sistemas externos
🙋 Portal del Cliente
- reserva_pre_pago_plazas.html — Reserva de plazas con selección visual
- consulta_historial_estacionamiento.html — Historial personal del cliente
- consulta_tarifas_promociones.html — Consulta pública de tarifas y descuentos
- gestion_abonos_pagos.html — Gestión de abonos y métodos de pago
- gestion_datos_personales.html — Perfil y datos del cliente
Personalización
Cambiar colores del tema
Todos los colores se definen mediante variables CSS en el bloque :root de cada archivo. Las principales son:
:root {
--primary: #0A1628; /* Fondo del sidebar */
--accent: #0EA5E9; /* Color de acento / botones primarios */
--background: #F8FAFB; /* Fondo de la página */
--surface: #FFFFFF; /* Fondo de tarjetas */
--text: #0F172A; /* Color de texto principal */
}
Agregar o quitar un ítem del menú
Edita el bloque <ul class="nav flex-column"> dentro del <nav class="sidebar"> en Index.html. Cada ítem sigue esta estructura:
<li class="menu-item"> <a class="menu-enlace" href="#" data-page="mi_vista.html">Mi Vista</a> </li>
Agregar traducciones
Cada vista tiene su archivo .js con el objeto translations_. Para agregar una nueva clave:
const translations_ = {
"es": { "page": { "miClave": "Mi texto en español" } },
"en": { "page": { "miClave": "My text in English" } }
};
En el HTML, usa el atributo data-i18n="page.miClave" en el elemento correspondiente.
Librerías utilizadas (CDN)
LibreríaVersiónUsoBootstrap5.3.0Layout, componentes y modalesChart.jsLatestGráficas de barras, líneas, doughnutLeaflet.js1.9.4Mapas interactivosSweetAlert2v11Alertas y confirmacionesSelect24.1.0-rc.0Selectores mejoradosFont Awesome6.4.0IconografíajQuery3.6.0DOM y eventos (Index)Google Fonts—Outfit + Plus Jakarta Sans
Todas las librerías se cargan desde CDN. No requiere npm ni proceso de build.
Acciones
¡Obtén el Código Completo!
Versión premium con documentación completa, componentes adicionales y soporte prioritario
Solicitar por WhatsAppStack Tecnológico
Etiquetas
Información
- Publicado: 16/04/2026
- Última actualización: 16/04/2026
- Tipo: HTML5
Importante
- Este template es de uso gratuito para proyectos ilimitados sin restricciones
- El código completo incluye documentación detallada y ejemplos adicionales
- Al donar, apoyas el desarrollo de más templates gratuitos
- Ofrecemos servicios de personalización y desarrollo a medida