Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
18 views22 pages

Index HTML

Uploaded by

jimenez.rma5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views22 pages

Index HTML

Uploaded by

jimenez.rma5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 22

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema de Taller Inteligente - Autodiagnóstico</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.nav-link {
transition: all 0.3s ease;
position: relative;
padding: 12px 24px;
border-radius: 8px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.nav-link:hover, .nav-link.active {
background: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-2px);
}
.content-section {
display: none;
animation: fadeIn 0.5s ease-in;
}
.content-section.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.step-card {
transition: all 0.3s ease;
border-left: 4px solid #10b981;
}
.step-card:hover {
transform: translateX(8px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.diagnostic-card {
background: rgba(255, 255, 255, 0.1);
color: white;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.diagnostic-card:hover {
transform: scale(1.02);
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.progress-bar {
transition: width 0.8s ease;
}
.model-card {
transition: all 0.3s ease;
cursor: pointer;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
}
.model-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
background: rgba(255, 255, 255, 0.1);
}
.fault-item {
transition: all 0.3s ease;
border-radius: 8px;
padding: 12px;
margin: 8px 0;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
}
.fault-item:hover {
background: rgba(255,255,255,0.1);
transform: translateX(5px);
}
.chart-responsive-container {
position: relative;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 45vh;
}
@media (min-width: 768px) {
.chart-responsive-container {
height: 350px;
}
}
@media (min-width: 1024px) {
.chart-responsive-container {
height: 400px;
}
}
.visual-map-display-area {
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
</head>
<body>
<!-- Header -->
<header class="glass-effect text-white p-6 sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600
rounded-lg flex items-center justify-center">
<span class="text-xl font-bold">🔧</span>
</div>
<h1 class="text-2xl font-bold">Sistema de Taller Inteligente</h1>
</div>
<nav class="hidden md:flex space-x-2">
<a href="#dashboard" class="nav-link active"
onclick="showSection(event, 'dashboard')">Dashboard</a>
<a href="#autodiagnostico" class="nav-link"
onclick="showSection(event, 'autodiagnostico')">Autodiagnóstico</a>
<a href="#modelos" class="nav-link" onclick="showSection(event,
'modelos')">Modelos</a>
<a href="#diagramas" class="nav-link" onclick="showSection(event,
'diagramas')">Diagramas y Mapas</a>
<a href="#reportes" class="nav-link" onclick="showSection(event,
'reportes')">Reportes</a>
</nav>
<button id="mobile-menu-button" class="md:hidden text-white
focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0
24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4 pt-2">
<a href="#dashboard" class="block py-2 text-white/80 hover:text-white
hover:bg-white/20 rounded-md px-3 transition-all" onclick="showSection(event,
'dashboard')">Dashboard</a>
<a href="#autodiagnostico" class="block py-2 text-white/80 hover:text-
white hover:bg-white/20 rounded-md px-3 transition-all" onclick="showSection(event,
'autodiagnostico')">Autodiagnóstico</a>
<a href="#modelos" class="block py-2 text-white/80 hover:text-white
hover:bg-white/20 rounded-md px-3 transition-all" onclick="showSection(event,
'modelos')">Modelos</a>
<a href="#diagramas" class="block py-2 text-white/80 hover:text-white
hover:bg-white/20 rounded-md px-3 transition-all" onclick="showSection(event,
'diagramas')">Diagramas y Mapas</a>
<a href="#reportes" class="block py-2 text-white/80 hover:text-white
hover:bg-white/20 rounded-md px-3 transition-all" onclick="showSection(event,
'reportes')">Reportes</a>
</div>
</header>

<div class="container mx-auto px-6 py-8">


<!-- Dashboard Section -->
<section id="dashboard" class="content-section active">
<h2 class="text-4xl font-bold text-white text-center mb-8">🚀 Visión
General del Taller</h2>
<p class="text-white/80 text-lg text-center max-w-3xl mx-auto mb-10">
Esta sección te ofrece un panorama instantáneo de las operaciones
clave de tu taller, incluyendo los diagnósticos del día, la variedad de modelos
atendidos, y el rendimiento general en la resolución de fallas. Es tu punto de
control rápido para la eficiencia.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="diagnostic-card p-6 rounded-xl">
<div class="flex items-center justify-between">
<div>
<p class="text-blue-100">Diagnósticos Hoy</p>
<p class="text-3xl font-bold">24</p>
</div>
<div class="text-4xl">📊</div>
</div>
</div>
<div class="diagnostic-card p-6 rounded-xl">
<div class="flex items-center justify-between">
<div>
<p class="text-blue-100">Modelos Registrados</p>
<p class="text-3xl font-bold">156</p>
</div>
<div class="text-4xl">🚗</div>
</div>
</div>
<div class="diagnostic-card p-6 rounded-xl">
<div class="flex items-center justify-between">
<div>
<p class="text-blue-100">Fallas Resueltas</p>
<p class="text-3xl font-bold">89%</p>
</div>
<div class="text-4xl">✅</div>
</div>
</div>
<div class="diagnostic-card p-6 rounded-xl">
<div class="flex items-center justify-between">
<div>
<p class="text-blue-100">Tiempo Promedio</p>
<p class="text-3xl font-bold">45min</p>
</div>
<div class="text-4xl"></div>
</div>
</div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">


<div class="bg-white rounded-xl p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-
800">Diagnósticos Recientes</h3>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-
50 rounded-lg">
<div>
<p class="font-medium">Toyota Corolla 2020</p>
<p class="text-sm text-gray-600">Falla en sistema
de frenos</p>
</div>
<span class="px-3 py-1 bg-green-100 text-green-800
rounded-full text-sm">Resuelto</span>
</div>
<div class="flex items-center justify-between p-4 bg-gray-
50 rounded-lg">
<div>
<p class="font-medium">Honda Civic 2019</p>
<p class="text-sm text-gray-600">Problema en
transmisión</p>
</div>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800
rounded-full text-sm">En proceso</span>
</div>
<div class="flex items-center justify-between p-4 bg-gray-
50 rounded-lg">
<div>
<p class="font-medium">Ford Focus 2021</p>
<p class="text-sm text-gray-600">Falla
eléctrica</p>
</div>
<span class="px-3 py-1 bg-blue-100 text-blue-800
rounded-full text-sm">Pendiente</span>
</div>
</div>
</div>

<div class="bg-white rounded-xl p-6 shadow-lg flex flex-col">


<h3 class="text-xl font-semibold mb-4 text-gray-800">Tipos de
Fallas Más Comunes</h3>
<div class="chart-responsive-container">
<canvas id="faultChart"></canvas>
</div>
</div>
</div>
</section>

<!-- Autodiagnóstico Section -->


<section id="autodiagnostico" class="content-section">
<h2 class="text-4xl font-bold text-white text-center mb-8">⚙️
Autodiagnóstico Inteligente: Guía Paso a Paso</h2>
<p class="text-white/80 text-lg text-center max-w-3xl mx-auto mb-10">
Esta herramienta simplifica el proceso de diagnóstico de fallas.
Simplemente selecciona el modelo del vehículo y el tipo de problema para obtener
una guía detallada y sugerencias de la IA, diseñada para que cualquier persona
pueda entenderla.
</p>
<div class="bg-white rounded-xl p-8 shadow-lg mb-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Selector de Modelo -->
<div class="lg:col-span-1">
<h3 class="text-xl font-semibold mb-4 text-gray-700">1.
Selecciona el Modelo</h3>
<select id="modelSelect" class="w-full p-3 border border-
gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
onchange="loadModelFaults()">
<option value="">Selecciona un modelo...</option>
<option value="toyota-corolla">Toyota Corolla 2020-
2023</option>
<option value="honda-civic">Honda Civic
2019-2023</option>
<option value="ford-focus">Ford Focus
2020-2023</option>
<option value="nissan-sentra">Nissan Sentra 2019-
2023</option>
<option value="chevrolet-cruze">Chevrolet Cruze 2018-
2023</option>
</select>

<div id="modelInfo" class="mt-4 p-4 bg-blue-50 rounded-lg


hidden">
<h4 class="font-semibold text-blue-800 mb-
2">Información del Modelo</h4>
<div id="modelDetails" class="text-sm text-blue-
700"></div>
</div>
</div>

<!-- Selector de Falla -->


<div class="lg:col-span-1">
<h3 class="text-xl font-semibold mb-4 text-gray-700">2.
Tipo de Falla</h3>
<select id="faultSelect" class="w-full p-3 border border-
gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
onchange="loadDiagnosticSteps()" disabled>
<option value="">Primero selecciona un
modelo...</option>
</select>

<div id="faultDescription" class="mt-4 p-4 bg-yellow-50


rounded-lg hidden">
<h4 class="font-semibold text-yellow-800 mb-
2">Descripción de la Falla</h4>
<div id="faultDetails" class="text-sm text-yellow-
700"></div>
</div>
</div>

<!-- Botón de Diagnóstico -->


<div class="lg:col-span-1 flex flex-col justify-center">
<button id="startDiagnostic" class="w-full bg-gradient-to-r
from-blue-500 to-purple-600 text-white py-4 px-6 rounded-lg font-semibold text-lg
hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform
hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
onclick="startDiagnostic()" disabled>
🚀 Iniciar Diagnóstico
</button>

<div id="diagnosticProgress" class="mt-4 hidden">


<div class="bg-gray-200 rounded-full h-2">
<div id="progressBar" class="progress-bar bg-
gradient-to-r from-green-400 to-blue-500 h-2 rounded-full" style="width: 0%"></div>
</div>
<p class="text-sm text-gray-600 mt-2 text-
center">Analizando sistema...</p>
</div>
</div>
</div>
</div>

<!-- Pasos de Diagnóstico -->


<div id="diagnosticSteps" class="hidden">
<div class="bg-white rounded-xl p-8 shadow-lg">
<h3 class="text-2xl font-bold text-gray-800 mb-6">📋 Pasos de
Diagnóstico Recomendados por IA</h3>
<div id="stepsContainer" class="space-y-4"></div>

<div class="mt-8 p-6 bg-green-50 rounded-lg">


<h4 class="font-semibold text-green-800 mb-3"> Herramientas
Necesarias</h4>
<div id="toolsList" class="grid grid-cols-2 md:grid-cols-4
gap-2 text-sm text-green-700"></div>
</div>

<div class="mt-6 p-6 bg-red-50 rounded-lg">


<h4 class="font-semibold text-red-800 mb-3">⚠️ Precauciones
de Seguridad</h4>
<div id="safetyWarnings" class="text-sm
text-red-700"></div>
</div>
</div>
</div>
</section>

<!-- Modelos Section -->


<section id="modelos" class="content-section">
<h2 class="text-4xl font-bold text-white text-center mb-8">🚗 Explora
Nuestros Modelos Soportados</h2>
<p class="text-white/80 text-lg text-center max-w-3xl mx-auto mb-10">
Aquí encontrarás una lista de todos los modelos de vehículos para
los cuales nuestro sistema tiene información de diagnóstico detallada. Haz clic en
cualquiera para ver sus datos y comenzar un diagnóstico.
</p>
<div class="bg-white rounded-xl p-8 shadow-lg">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
id="modelsGrid">
<!-- Los modelos se cargarán dinámicamente -->
</div>
</div>
</section>

<!-- Diagramas Section -->


<section id="diagramas" class="content-section">
<h2 class="text-4xl font-bold text-white text-center mb-8"> Diagramas y
Mapas Visuales</h2>
<p class="text-white/80 text-lg text-center max-w-3xl mx-auto mb-10">
Accede a diagramas eléctricos detallados y mapas visuales de
componentes por modelo de vehículo, facilitando la comprensión de sistemas
complejos y la ubicación de fallas.
</p>
<div class="bg-white rounded-xl p-8 shadow-lg mb-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Selector de Modelo para Diagramas -->
<div>
<h3 class="text-xl font-semibold mb-4 text-gray-700">1.
Selecciona el Modelo</h3>
<select id="modelSelectDiagrams" class="w-full p-3 border
border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-
transparent" onchange="loadAvailableDiagrams()">
<option value="">Selecciona un modelo...</option>
</select>
<div id="diagramsListContainer" class="mt-6 space-y-4">
<h4 class="font-semibold text-gray-700 mb-3">Diagramas
Disponibles:</h4>
<div id="availableDiagrams" class="grid grid-cols-1
sm:grid-cols-2 gap-4">
<!-- Diagramas cargados dinámicamente -->
</div>
</div>
</div>

<!-- Área de Visualización del Diagrama/Mapa -->


<div>
<h3 class="text-xl font-semibold mb-4 text-gray-700">2.
Visualización del Mapa/Diagrama</h3>
<div id="visualMapDisplay" class="bg-gray-50 p-6 rounded-lg
border border-gray-200 text-center visual-map-display-area">
<p class="text-gray-600">Selecciona un modelo y un
diagrama para visualizar.</p>
</div>
</div>
</div>
</div>
</section>

<!-- Reportes Section -->


<section id="reportes" class="content-section">
<h2 class="text-4xl font-bold text-white text-center mb-8">📊 Reportes y
Estadísticas Clave</h2>
<p class="text-white/80 text-lg text-center max-w-3xl mx-auto mb-10">
Obtén una visión profunda del rendimiento de tu taller con estos
gráficos interactivos. Analiza las fallas más comunes y el tiempo promedio de
resolución para optimizar tus operaciones.
</p>
<div class="bg-white rounded-xl p-8 shadow-lg">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="flex flex-col">
<h3 class="text-xl font-semibold mb-4 text-gray-800">Fallas
por Modelo (Top 5)</h3>
<div class="chart-responsive-container">
<canvas id="modelFaultChart"></canvas>
</div>
</div>
<div class="flex flex-col">
<h3 class="text-xl font-semibold mb-4 text-gray-800">Tiempo
Promedio de Resolución por Falla (Minutos)</h3>
<div class="chart-responsive-container">
<canvas id="timeChart"></canvas>
</div>
</div>
</div>
</div>
</section>
</div>

<script>
// Global object for visual maps and diagrams
const diagramsAndMaps = {
'corolla-electrical': {
name: 'Diagrama Eléctrico General',
title: 'Diagrama Eléctrico General: Toyota Corolla',
description: 'Diagrama principal del sistema eléctrico del Toyota
Corolla 2020-2023.',
image: 'https://placehold.co/600x400/ADD8E6/000000?
text=Diagrama+Electrico+Corolla',
type: 'electrical'
},
'corolla-engine-layout': {
name: 'Mapa Visual Motor',
title: 'Mapa Visual: Componentes Motor Toyota Corolla',
description: 'Ubicación y descripción de los principales
componentes del motor 1.8L del Toyota Corolla.',
image: 'https://placehold.co/600x400/90EE90/000000?
text=Motor+Corolla+Layout',
type: 'visual-map'
},
'brake-system-layout': {
name: 'Mapa Visual: Sistema de Frenos',
title: 'Mapa Visual: Sistema de Frenos General',
description: 'Diagrama visual de los componentes del sistema de
frenos (pinzas, discos, pastillas, cilindro maestro, y líneas hidráulicas).',
image: 'https://placehold.co/600x400/FFA07A/FFFFFF?
text=Mapa+Sistema+Frenos',
type: 'visual-map'
},
'electrical-system-layout': {
name: 'Mapa Visual: Sistema Eléctrico',
title: 'Mapa Visual: Componentes Eléctricos Clave',
description: 'Representación visual de la batería, alternador, caja
de fusibles y cableado principal del vehículo.',
image: 'https://placehold.co/600x400/98FB98/000000?
text=Mapa+Sistema+Electrico',
type: 'visual-map'
},
'turbo-system-layout': {
name: 'Mapa Visual: Sistema Turbo',
title: 'Mapa Visual: Componentes del Sistema Turbocompresor',
description: 'Vista esquemática del turbocompresor, intercooler y
mangueras de un motor turbo, mostrando su flujo de aire.',
image: 'https://placehold.co/600x400/FFDAB9/000000?
text=Mapa+Sistema+Turbo',
type: 'visual-map'
}
};

// Base de datos de modelos y fallas


const vehicleDatabase = {
'toyota-corolla': {
name: 'Toyota Corolla 2020-2023',
engine: '1.8L 4-cilindros',
transmission: 'CVT/Manual',
commonIssues: 12,
diagramKeys: ['corolla-electrical', 'corolla-engine-layout'],
faults: {
'brake-system': {
name: 'Sistema de Frenos',
description: 'Problemas con pastillas, discos o sistema
hidráulico',
steps: [
'Verificar nivel de líquido de frenos en el depósito',
'Inspeccionar visualmente las pastillas de freno',
'Comprobar el grosor de los discos de freno',
'Revisar las mangueras de freno por fugas',
'Probar la presión del pedal de freno',
'Verificar el funcionamiento del ABS',
'Comprobar el desgaste de los tambores traseros',
'Revisar el cilindro maestro'
],
tools: ['Llave de tubo 10mm', 'Calibrador', 'Manómetro',
'Gato hidráulico'],
safety: 'Usar gafas de protección. Nunca trabajar bajo un
vehículo sin soportes adecuados. El líquido de frenos es corrosivo.',
visualMapLinkKey: 'brake-system-layout'
},
'transmission': {
name: 'Transmisión CVT',
description: 'Problemas con la transmisión continuamente
variable',
steps: [
'Verificar nivel y color del aceite CVT',
'Comprobar códigos de error con escáner OBD',
'Revisar el filtro de transmisión',
'Inspeccionar las conexiones eléctricas',
'Probar el funcionamiento en diferentes marchas',
'Verificar la temperatura de operación',
'Comprobar el sistema de enfriamiento CVT'
],
tools: ['Escáner OBD2', 'Termómetro infrarrojo', 'Llave de
filtro', 'Multímetro'],
safety: 'Motor debe estar caliente para verificación
correcta. Usar guantes resistentes al aceite.'
},
'electrical': {
name: 'Sistema Eléctrico',
description: 'Fallas en alternador, batería o cableado',
steps: [
'Medir voltaje de la batería (12.6V en reposo)',
'Probar la carga del alternador (13.5-14.5V)',
'Verificar conexiones de terminales',
'Comprobar fusibles principales',
'Revisar el sistema de arranque',
'Inspeccionar el cableado por corrosión',
'Probar el regulador de voltaje'
],
tools: ['Multímetro', 'Probador de batería', 'Limpiador de
contactos', 'Alicates'],
safety: 'Desconectar batería antes de trabajar. Evitar
cortocircuitos. Usar herramientas aisladas.',
visualMapLinkKey: 'electrical-system-layout'
}
}
},
'honda-civic': {
name: 'Honda Civic 2019-2023',
engine: '1.5L Turbo/2.0L',
transmission: 'CVT/Manual',
commonIssues: 8,
diagramKeys: ['turbo-system-layout'],
faults: {
'engine-turbo': {
name: 'Sistema Turbo',
description: 'Problemas con el turbocompresor y sistema de
admisión',
steps: [
'Verificar presión de turbo con manómetro',
'Inspeccionar mangueras de vacío',
'Comprobar el intercooler por obstrucciones',
'Revisar el filtro de aire',
'Verificar la válvula wastegate',
'Comprobar códigos P0234, P0299',
'Inspeccionar el aceite por contaminación'
],
tools: ['Manómetro de turbo', 'Escáner OBD2', 'Linterna',
'Llaves métricas'],
safety: 'Motor debe estar frío antes de inspección. Cuidado
con componentes calientes.',
visualMapLinkKey: 'turbo-system-layout'
},
'cvt-honda': {
name: 'Transmisión CVT Honda',
description: 'Problemas específicos del CVT de Honda',
steps: [
'Verificar aceite CVT Honda original',
'Comprobar actualizaciones de software TCM',
'Revisar sensores de velocidad',
'Inspeccionar la bomba de aceite CVT',
'Verificar la cadena metálica CVT',
'Comprobar válvulas de control'
],
tools: ['Aceite CVT Honda', 'Escáner Honda', 'Llaves
especiales CVT'],
safety: 'Solo usar aceite CVT especificado por Honda.
Temperatura correcta es crítica.'
}
}
},
'ford-focus': {
name: 'Ford Focus 2020-2023',
engine: '1.0L EcoBoost/1.5L',
transmission: 'Automática/Manual',
commonIssues: 10,
diagramKeys: ['electrical-system-layout'],
faults: {
'ecoboost-engine': {
name: 'Motor EcoBoost',
description: 'Problemas con el motor turbo de 3 cilindros',
steps: [
'Verificar presión de aceite',
'Comprobar sistema de enfriamiento',
'Revisar bujías y bobinas',
'Inspeccionar turbocompresor',
'Verificar inyectores de combustible',
'Comprobar válvula PCV',
'Revisar sistema de admisión variable'
],
tools: ['Manómetro aceite', 'Probador bobinas', 'Escáner
Ford', 'Compresómetro'],
safety: 'Motor de alta presión. Verificar temperatura antes
de trabajar.',
visualMapLinkKey: 'engine-layout'
},
'dual-clutch': {
name: 'Transmisión Dual Clutch',
description: 'Problemas con embrague doble PowerShift',
steps: [
'Verificar adaptación de embragues',
'Comprobar actuadores hidráulicos',
'Revisar sensores de posición',
'Inspeccionar bomba de aceite',
'Verificar módulo TCM',
'Comprobar calibración software'
],
tools: ['Escáner Ford IDS', 'Multímetro', 'Manómetro
hidráulico'],
safety: 'Sistema bajo presión. Seguir procedimientos Ford
específicos.'
}
}
},
'nissan-sentra': {
name: 'Nissan Sentra 2019-2023',
engine: '2.0L 4-cilindros',
transmission: 'Xtronic CVT',
commonIssues: 7,
diagramKeys: ['electrical-system-layout'],
faults: {
'xtronic-cvt': {
name: 'CVT Xtronic',
description: 'Problemas con transmisión CVT de Nissan',
steps: [
'Verificar fluido CVT NS-3',
'Comprobar válvula de control primaria',
'Revisar sensores de velocidad',
'Inspeccionar cadena de transmisión',
'Verificar bomba de aceite CVT',
'Comprobar módulo TCM'
],
tools: ['Fluido NS-3', 'Escáner Nissan', 'Termómetro'],
safety: 'Usar solo fluido NS-3 especificado. Temperatura
crítica para diagnóstico.'
},
'engine-knock': {
name: 'Golpeteo Motor',
description: 'Ruidos anormales en el motor',
steps: [
'Verificar octanaje de combustible',
'Comprobar sensor de detonación',
'Revisar tiempo de encendido',
'Inspeccionar cámaras de combustión',
'Verificar sistema EGR',
'Comprobar inyectores'
],
tools: ['Estetoscopio mecánico', 'Escáner OBD2',
'Boroscopio'],
safety: 'No acelerar motor con golpeteo. Puede causar daño
severo.',
visualMapLinkKey: 'engine-layout'
}
}
},
'chevrolet-cruze': {
name: 'Chevrolet Cruze 2018-2023',
engine: '1.4L Turbo/1.6L',
transmission: '6AT/Manual',
commonIssues: 9,
diagramKeys: ['electrical-system-layout', 'turbo-system-layout'],
faults: {
'turbo-coolant': {
name: 'Sistema Refrigeración Turbo',
description: 'Problemas de sobrecalentamiento en turbo',
steps: [
'Verificar nivel refrigerante',
'Comprobar bomba de agua',
'Revisar termostato',
'Inspeccionar radiador',
'Verificar ventiladores',
'Comprobar mangueras turbo',
'Revisar intercooler'
],
tools: ['Termómetro infrarrojo', 'Probador presión',
'Refractómetro'],
safety: 'Sistema bajo presión cuando caliente. Esperar
enfriamiento completo.',
visualMapLinkKey: 'turbo-system-layout'
},
'transmission-6at': {
name: 'Transmisión 6AT',
description: 'Problemas con transmisión automática de 6
velocidades',
steps: [
'Verificar nivel aceite ATF',
'Comprobar filtro transmisión',
'Revisar solenoides',
'Inspeccionar convertidor torque',
'Verificar módulo TCM',
'Comprobar adaptaciones'
],
tools: ['Aceite Dexron VI', 'Escáner GM', 'Manómetro
transmisión'],
safety: 'Aceite caliente puede causar quemaduras. Usar
equipo protección.'
}
}
}
};

// Charts instances
let faultTypeChart;
let modelFaultsChart;
let timeResolutionChart;

// General UI functions
function showSection(event, sectionId, modelToLoad = null, mapKeyToDisplay
= null) {
if (event) event.preventDefault();

document.querySelectorAll('.content-section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(sectionId).classList.add('active');

document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('active');
});
const activeLink = document.querySelector(`.nav-link[href="#$
{sectionId}"]`);
if (activeLink) {
activeLink.classList.add('active');
}

// Close mobile menu if open


const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}

// Load specific content for sections


if (sectionId === 'modelos') {
loadModelsGrid();
} else if (sectionId === 'reportes') {
loadReports();
} else if (sectionId === 'autodiagnostico') {
loadModelFaults();
if (modelToLoad) {
const modelSelect = document.getElementById('modelSelect');
modelSelect.value = modelToLoad;
loadModelFaults();
}
} else if (sectionId === 'diagramas') {
populateModelSelectDiagrams();
if (modelToLoad) {
document.getElementById('modelSelectDiagrams').value =
modelToLoad;
loadAvailableDiagrams(mapKeyToDisplay);
} else {
document.getElementById('visualMapDisplay').innerHTML = '<p
class="text-gray-600">Selecciona un modelo y un diagrama para visualizar.</p>';
loadAvailableDiagrams();
}
}
}

// Dashboard Chart: Fault Types Distribution


function createFaultTypeChart() {
const ctx = document.getElementById('faultChart').getContext('2d');
if (faultTypeChart) faultTypeChart.destroy();

const faultTypeCounts = {};


for (const modelKey in vehicleDatabase) {
const model = vehicleDatabase[modelKey];
for (const faultKey in model.faults) {
const fault = model.faults[faultKey];
const faultCategory = fault.name.split(' ')[0];
faultTypeCounts[faultCategory] =
(faultTypeCounts[faultCategory] || 0) + 1;
}
}

const labels = Object.keys(faultTypeCounts);


const data = Object.values(faultTypeCounts);

faultTypeChart = new Chart(ctx, {


type: 'doughnut',
data: {
labels: labels,
datasets: [{
label: 'Número de Fallas',
data: data,
backgroundColor: [
'rgba(99, 132, 255, 0.7)',
'rgba(255, 99, 132, 0.7)',
'rgba(255, 205, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(153, 102, 255, 0.7)',
'rgba(255, 159, 64, 0.7)'
],
borderColor: '#ffffff',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
color: '#333'
}
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.label || '';
if (label) {
label += ': ';
}
if (context.parsed !== null) {
label += context.parsed;
}
return label;
}
}
}
}
}
});
}

// Autodiagnóstico functions
function loadModelFaults() {
const modelSelect = document.getElementById('modelSelect');
const faultSelect = document.getElementById('faultSelect');
const modelInfo = document.getElementById('modelInfo');
const modelDetails = document.getElementById('modelDetails');
const faultDescriptionDiv =
document.getElementById('faultDescription');
const startButton = document.getElementById('startDiagnostic');
const diagnosticStepsSection =
document.getElementById('diagnosticSteps');

const selectedModel = modelSelect.value;

diagnosticStepsSection.classList.add('hidden');

if (selectedModel && vehicleDatabase[selectedModel]) {


const model = vehicleDatabase[selectedModel];

modelInfo.classList.remove('hidden');
modelDetails.innerHTML = `
<p><strong>Motor:</strong> ${model.engine}</p>
<p><strong>Transmisión:</strong> ${model.transmission}</p>
<p><strong>Fallas Comunes:</strong> ${model.commonIssues}</p>
`;

faultSelect.innerHTML = '<option value="">Selecciona tipo de


falla...</option>';
Object.keys(model.faults).forEach(faultKey => {
const fault = model.faults[faultKey];
faultSelect.innerHTML += `<option value="${faultKey}">$
{fault.name}</option>`;
});

faultSelect.disabled = false;
faultDescriptionDiv.classList.add('hidden');
startButton.disabled = true;
} else {
modelInfo.classList.add('hidden');
faultSelect.innerHTML = '<option value="">Primero selecciona un
modelo...</option>';
faultSelect.disabled = true;
faultDescriptionDiv.classList.add('hidden');
startButton.disabled = true;
}
}

function loadDiagnosticSteps() {
const modelSelect = document.getElementById('modelSelect');
const faultSelect = document.getElementById('faultSelect');
const faultDescriptionDiv =
document.getElementById('faultDescription');
const faultDetails = document.getElementById('faultDetails');
const startButton = document.getElementById('startDiagnostic');
const diagnosticStepsSection =
document.getElementById('diagnosticSteps');

const selectedModel = modelSelect.value;


const selectedFault = faultSelect.value;

diagnosticStepsSection.classList.add('hidden');
if (selectedModel && selectedFault && vehicleDatabase[selectedModel]) {
const fault = vehicleDatabase[selectedModel].faults[selectedFault];

if (fault) {
faultDescriptionDiv.classList.remove('hidden');
faultDetails.innerHTML = `
<p><strong>Problema:</strong> ${fault.description}</p>
<p><strong>Pasos recomendados:</strong> $
{fault.steps.length} procedimientos</p>
`;
startButton.disabled = false;
}
} else {
faultDescriptionDiv.classList.add('hidden');
startButton.disabled = true;
}
}

function startDiagnostic() {
const modelSelect = document.getElementById('modelSelect');
const faultSelect = document.getElementById('faultSelect');
const progressContainer =
document.getElementById('diagnosticProgress');
const progressBar = document.getElementById('progressBar');
const stepsSection = document.getElementById('diagnosticSteps');

const selectedModel = modelSelect.value;


const selectedFault = faultSelect.value;

if (!selectedModel || !selectedFault) return;

stepsSection.classList.add('hidden');
progressContainer.classList.remove('hidden');
progressBar.style.width = '0%';

let progress = 0;
const interval = setInterval(() => {
progress += 20;
progressBar.style.width = progress + '%';

if (progress >= 100) {


clearInterval(interval);
setTimeout(() => {
progressContainer.classList.add('hidden');
showDiagnosticStepsContent(selectedModel, selectedFault);
}, 500);
}
}, 300);
}

function showDiagnosticStepsContent(modelKey, faultKey) {


const fault = vehicleDatabase[modelKey].faults[faultKey];
const stepsContainer = document.getElementById('stepsContainer');
const toolsList = document.getElementById('toolsList');
const safetyWarnings = document.getElementById('safetyWarnings');
const stepsSection = document.getElementById('diagnosticSteps');

stepsContainer.innerHTML = '';
toolsList.innerHTML = '';
safetyWarnings.textContent = '';

fault.steps.forEach((step, index) => {


const stepCard = document.createElement('div');
stepCard.className = 'step-card bg-white p-4 rounded-lg shadow-md';
stepCard.innerHTML = `
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white
rounded-full flex items-center justify-center font-bold">
${index + 1}
</div>
<div class="flex-1">
<p class="text-gray-800">${step}</p>
</div>
<div class="flex-shrink-0">
<input type="checkbox" class="w-5 h-5 text-blue-600
rounded focus:ring-blue-500">
</div>
</div>
`;
stepsContainer.appendChild(stepCard);
});

fault.tools.forEach(tool => {
toolsList.innerHTML += `<span class="inline-flex items-center px-3
py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">${tool}</span>`;
});

safetyWarnings.textContent = fault.safety;

if (fault.visualMapLinkKey && diagramsAndMaps[fault.visualMapLinkKey])


{
const visualMapButton = document.createElement('button');
visualMapButton.className = 'mt-6 w-full bg-green-500 text-white
py-3 px-6 rounded-lg font-semibold hover:bg-green-600 transition-all duration-300';
visualMapButton.textContent = ' Ver Mapa Visual de la Falla';
visualMapButton.onclick = () => showSection(null, 'diagramas',
modelKey, fault.visualMapLinkKey);
stepsSection.appendChild(visualMapButton);
}

stepsSection.classList.remove('hidden');
window.scrollTo({ top: stepsSection.offsetTop, behavior: 'smooth' });
}

// Models Section functions


function loadModelsGrid() {
const modelsGrid = document.getElementById('modelsGrid');
modelsGrid.innerHTML = '';

for (const modelKey in vehicleDatabase) {


const model = vehicleDatabase[modelKey];
const modelCard = document.createElement('div');
modelCard.className = 'model-card p-6 rounded-xl shadow-lg flex
flex-col items-center text-center';
modelCard.onclick = () => showSection(null, 'autodiagnostico',
modelKey);

modelCard.innerHTML = `
<div class="text-5xl mb-4">🚗</div>
<h3 class="text-xl font-bold mb-2">${model.name}</h3>
<p class="text-white/80 text-sm mb-1">Motor:
${model.engine}</p>
<p class="text-white/80 text-sm mb-1">Transmisión: $
{model.transmission}</p>
<p class="text-white/80 text-sm">Fallas Comunes: $
{model.commonIssues}</p>
`;
modelsGrid.appendChild(modelCard);
}
}

// Diagrams Section functions


function populateModelSelectDiagrams() {
const modelSelectDiagrams =
document.getElementById('modelSelectDiagrams');
modelSelectDiagrams.innerHTML = '<option value="">Selecciona un
modelo...</option>';
for (const modelKey in vehicleDatabase) {
const model = vehicleDatabase[modelKey];
modelSelectDiagrams.innerHTML += `<option value="${modelKey}">$
{model.name}</option>`;
}
}

function loadAvailableDiagrams(mapKeyToDisplay = null) {


const modelSelectDiagrams =
document.getElementById('modelSelectDiagrams');
const availableDiagramsDiv =
document.getElementById('availableDiagrams');
const visualMapDisplay = document.getElementById('visualMapDisplay');
const selectedModelKey = modelSelectDiagrams.value;

availableDiagramsDiv.innerHTML = '';
visualMapDisplay.innerHTML = '<p class="text-gray-600">Selecciona un
modelo y un diagrama para visualizar.</p>';

if (selectedModelKey && vehicleDatabase[selectedModelKey]) {


const model = vehicleDatabase[selectedModelKey];

if (model.diagramKeys) {
model.diagramKeys.forEach(diagramKey => {
const diagram = diagramsAndMaps[diagramKey];
if (diagram) {
const diagramCard = document.createElement('div');
diagramCard.className = 'bg-blue-50 p-3 rounded-lg flex
items-center justify-between shadow-sm hover:shadow-md transition-all';
diagramCard.innerHTML = `
<span class="text-blue-800 font-medium">$
{diagram.name}</span>
<button onclick="displayVisualMap('${diagramKey}')"
class="px-3 py-1 bg-blue-200 text-blue-900 rounded-full text-xs hover:bg-blue-300
transition-all">Ver</button>
`;
availableDiagramsDiv.appendChild(diagramCard);
}
});
} else {
availableDiagramsDiv.innerHTML = '<p class="text-gray-600 text-
sm">No hay diagramas específicos para este modelo.</p>';
}

if (mapKeyToDisplay && diagramsAndMaps[mapKeyToDisplay]) {


displayVisualMap(mapKeyToDisplay);
}
}
}

function displayVisualMap(mapKey) {
const visualMapDisplay = document.getElementById('visualMapDisplay');
const mapData = diagramsAndMaps[mapKey];

if (mapData) {
visualMapDisplay.innerHTML = `
<h4 class="font-bold text-lg text-gray-800 mb-2">$
{mapData.title || mapData.name}</h4>
<p class="text-sm text-gray-600
mb-4">${mapData.description}</p>
<img src="${mapData.image}" alt="${mapData.title ||
mapData.name}" class="max-w-full h-auto rounded-lg shadow-md border border-gray-
200">
<button class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-
lg hover:bg-purple-700 transition-colors" onclick="window.open('${mapData.image}',
'_blank')">Descargar/Ver Completo</button>
`;
} else {
visualMapDisplay.innerHTML = '<p class="text-gray-600">Diagrama o
mapa no disponible.</p>';
}
}

// Reports Section Charts


function loadReports() {
createModelFaultsChart();
createTimeResolutionChart();
}

function createModelFaultsChart() {
const ctx =
document.getElementById('modelFaultChart').getContext('2d');
if (modelFaultsChart) modelFaultsChart.destroy();

const modelFaultCounts = [
{ model: 'Toyota Corolla', faults: 250 },
{ model: 'Ford Focus', faults: 210 },
{ model: 'Honda Civic', faults: 180 },
{ model: 'Nissan Sentra', faults: 150 },
{ model: 'Chevrolet Cruze', faults: 130 }
];

const labels = modelFaultCounts.map(item => item.model);


const data = modelFaultCounts.map(item => item.faults);

modelFaultsChart = new Chart(ctx, {


type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Número de Fallas Registradas',
data: data,
backgroundColor: 'rgba(75, 192, 192, 0.7)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
title: { display: false }
},
scales: {
y: {
beginAtZero: true,
ticks: { color: '#333' }
},
x: {
ticks: { color: '#333' }
}
}
}
});
}

function createTimeResolutionChart() {
const ctx = document.getElementById('timeChart').getContext('2d');
if (timeResolutionChart) timeResolutionChart.destroy();

const timeData = [
{ fault: 'Frenos', time: 45 },
{ fault: 'Transmisión', time: 90 },
{ fault: 'Eléctrico', time: 60 },
{ fault: 'Motor', time: 75 },
{ fault: 'Turbo', time: 80 }
];

const labels = timeData.map(item => item.fault);


const data = timeData.map(item => item.time);

timeResolutionChart = new Chart(ctx, {


type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Tiempo Promedio (min)',
data: data,
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 2,
fill: true,
tension: 0.3
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
title: { display: false }
},
scales: {
y: {
beginAtZero: true,
ticks: { color: '#333' }
},
x: {
ticks: { color: '#333' }
}
}
}
});
}

// Initial setup on DOMContentLoaded


document.addEventListener('DOMContentLoaded', function () {
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});

// Initialize Dashboard charts


createFaultTypeChart();

// Set initial state for Autodiagnóstico section


loadModelFaults();
populateModelSelectDiagrams();
});
</script>
</body>
</html>

You might also like