consultoria-as
f893391916
- Extraído CSS inline de 15 templates POS + 13 templates Dashboard - CSS movido a archivos .css externos en pos/static/css/ y dashboard/ - Generados .min.css vía minify-assets.sh - Nginx auto-serve transparente para .min.css - Tests: 73/73 pasando - Script: scripts/extract-inline-css.py
266 lines
14 KiB
HTML
266 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Catálogo - Nexus Autoparts</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link rel="stylesheet" href="/shared.css">
|
|
<link rel="stylesheet" href="index.css">
|
|
</head>
|
|
<body>
|
|
<a href="#mainContent" class="skip-link">Saltar al contenido</a>
|
|
|
|
<!-- Shared Navigation -->
|
|
<div id="shared-nav"></div>
|
|
<script src="/nav.js"></script>
|
|
<script>
|
|
// Inject page-specific search bar and stats into the shared nav header
|
|
(function() {
|
|
var extra = document.getElementById('shared-nav-extra');
|
|
if (!extra) return;
|
|
extra.innerHTML = ''
|
|
+ '<div class="search-container">'
|
|
+ '<div class="search-box-enhanced">'
|
|
+ '<div class="search-input-wrapper">'
|
|
+ '<i class="fas fa-search search-icon"></i>'
|
|
+ '<input type="text" class="search-input" id="searchInput"'
|
|
+ ' placeholder="Buscar partes, n\u00fameros OEM, veh\u00edculos... (presiona /)"'
|
|
+ ' aria-label="Buscar partes"'
|
|
+ ' autocomplete="off"'
|
|
+ ' oninput="enhancedSearch.onInput(this.value)"'
|
|
+ ' onkeydown="enhancedSearch.onKeydown(event)"'
|
|
+ ' onfocus="enhancedSearch.onFocus()">'
|
|
+ '<div class="search-filters-toggle" onclick="enhancedSearch.toggleFilters()">'
|
|
+ '<i class="fas fa-sliders-h"></i>'
|
|
+ '</div>'
|
|
+ '<button class="vin-btn" onclick="dashboard.openVinDecoder()" title="Decodificar VIN">'
|
|
+ '<i class="fas fa-barcode"></i>'
|
|
+ '</button>'
|
|
+ '<div class="search-loading" id="searchLoading" style="display: none;">'
|
|
+ '<div class="search-spinner"></div>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '<div class="search-dropdown" id="searchDropdown">'
|
|
+ '<div class="search-filters" id="searchFilters" style="display: none;">'
|
|
+ '<div class="filter-group"><label>Categor\u00eda</label>'
|
|
+ '<select id="searchCategoryFilter" onchange="enhancedSearch.applyFilters()"><option value="">Todas</option></select>'
|
|
+ '</div>'
|
|
+ '<div class="filter-group"><label>Buscar en</label>'
|
|
+ '<select id="searchTypeFilter" onchange="enhancedSearch.applyFilters()">'
|
|
+ '<option value="all">Todo</option><option value="parts">Solo Partes</option><option value="vehicles">Solo Veh\u00edculos</option>'
|
|
+ '</select>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '<div class="search-recent" id="searchRecent">'
|
|
+ '<div class="search-section-title"><i class="fas fa-history"></i> B\u00fasquedas recientes '
|
|
+ '<span class="clear-recent" onclick="enhancedSearch.clearRecent()">Limpiar</span></div>'
|
|
+ '<div class="search-recent-items" id="searchRecentItems"></div>'
|
|
+ '</div>'
|
|
+ '<div class="search-results-container" id="searchResultsContainer">'
|
|
+ '<div class="search-results-section" id="partsResults" style="display: none;">'
|
|
+ '<div class="search-section-title"><i class="fas fa-cog"></i> Partes</div>'
|
|
+ '<div class="search-results-list" id="partsResultsList"></div>'
|
|
+ '</div>'
|
|
+ '<div class="search-results-section" id="vehiclesResults" style="display: none;">'
|
|
+ '<div class="search-section-title"><i class="fas fa-car"></i> Veh\u00edculos</div>'
|
|
+ '<div class="search-results-list" id="vehiclesResultsList"></div>'
|
|
+ '</div>'
|
|
+ '<div class="search-no-results" id="searchNoResults" style="display: none;">'
|
|
+ '<i class="fas fa-search"></i><p>No se encontraron resultados</p>'
|
|
+ '<span>Intenta con otros t\u00e9rminos de b\u00fasqueda</span>'
|
|
+ '<div class="search-suggestions" style="margin-top: 1rem;">'
|
|
+ '<span style="display: block; margin-bottom: 0.5rem; font-size: 0.8rem;">B\u00fasquedas populares:</span>'
|
|
+ '<div class="search-suggestion-tags">'
|
|
+ '<span class="search-tag" onclick="enhancedSearch.searchRecent(\'brake\')">brake</span>'
|
|
+ '<span class="search-tag" onclick="enhancedSearch.searchRecent(\'filter\')">filter</span>'
|
|
+ '<span class="search-tag" onclick="enhancedSearch.searchRecent(\'spark plug\')">spark plug</span>'
|
|
+ '<span class="search-tag" onclick="enhancedSearch.searchRecent(\'camry\')">camry</span>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '<div class="search-dropdown-footer" id="searchFooter" style="display: none;">'
|
|
+ '<span class="search-hint"><kbd>\u2191\u2193</kbd> navegar <kbd>Enter</kbd> seleccionar <kbd>Esc</kbd> cerrar</span>'
|
|
+ '<button class="search-view-all" onclick="enhancedSearch.viewAllResults()">Ver todos los resultados <i class="fas fa-arrow-right"></i></button>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '<div class="header-actions">'
|
|
+ '<div class="header-stats">'
|
|
+ '<div class="header-stat"><div class="header-stat-value" id="totalBrands">0</div><div class="header-stat-label">Marcas</div></div>'
|
|
+ '<div class="header-stat"><div class="header-stat-value" id="totalModels">0</div><div class="header-stat-label">Modelos</div></div>'
|
|
+ '<div class="header-stat"><div class="header-stat-value" id="totalParts">0</div><div class="header-stat-label">Partes</div></div>'
|
|
+ '</div>'
|
|
+ '<a href="customer-landing.html" class="btn btn-secondary btn-icon" title="Ir a inicio"><i class="fas fa-home"></i></a>'
|
|
+ '<a href="admin.html" class="btn btn-primary btn-icon" title="Panel de administraci\u00f3n"><i class="fas fa-cog"></i></a>'
|
|
+ '</div>';
|
|
})();
|
|
</script>
|
|
|
|
<!-- Main Container -->
|
|
<div class="main-container">
|
|
<!-- Breadcrumb -->
|
|
<div class="breadcrumb-container" id="breadcrumbNav">
|
|
<nav class="breadcrumb" id="breadcrumb" aria-label="Navegación">
|
|
<span class="breadcrumb-item active">
|
|
<i class="fas fa-home"></i> Marcas
|
|
</span>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Filters Bar -->
|
|
<div class="filters-bar" id="filtersBar">
|
|
<span class="filter-label">Filtrar por:</span>
|
|
<select id="yearFilter" class="filter-select" aria-label="Filtrar por año">
|
|
<option value="">Todos los años</option>
|
|
</select>
|
|
<select id="engineFilter" class="filter-select" aria-label="Filtrar por motor">
|
|
<option value="">Todos los motores</option>
|
|
</select>
|
|
<span class="result-count" id="resultCount">0 resultados</span>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main id="mainContent" tabindex="-1" aria-live="polite">
|
|
<div class="state-container">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<h4>Cargando...</h4>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Part Detail Modal -->
|
|
<div class="modal-overlay" id="partDetailModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">
|
|
<i class="fas fa-cog"></i> Detalle de Parte
|
|
</h2>
|
|
<button class="modal-close" onclick="dashboard.closeModal('partDetailModal')">×</button>
|
|
</div>
|
|
<div class="modal-body" id="partDetailContent">
|
|
<!-- Dynamic content -->
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="dashboard.closeModal('partDetailModal')">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results Modal -->
|
|
<div class="modal-overlay" id="searchResultsModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title" id="searchResultsModalLabel">
|
|
<i class="fas fa-search"></i> Resultados de Búsqueda
|
|
</h2>
|
|
<button class="modal-close" onclick="dashboard.closeModal('searchResultsModal')">×</button>
|
|
</div>
|
|
<div class="modal-body" id="searchResultsContent">
|
|
<!-- Dynamic content -->
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="dashboard.closeModal('searchResultsModal')">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diagram Modal -->
|
|
<div class="modal-overlay" id="diagramModal">
|
|
<div class="modal-content large">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title" id="diagramModalTitle">
|
|
<i class="fas fa-project-diagram"></i> Diagrama
|
|
</h2>
|
|
<button class="modal-close" onclick="dashboard.closeModal('diagramModal')">×</button>
|
|
</div>
|
|
<div class="modal-body" id="diagramModalContent" style="padding: 0;">
|
|
<!-- Dynamic content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VIN Decoder Modal -->
|
|
<div class="modal-overlay" id="vinDecoderModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">
|
|
<i class="fas fa-barcode"></i> Decodificador de VIN
|
|
</h2>
|
|
<button class="modal-close" onclick="dashboard.closeModal('vinDecoderModal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="vin-input-container">
|
|
<label class="vin-label" for="vinInput">Ingresa el VIN (17 caracteres)</label>
|
|
<div class="vin-input-group">
|
|
<input type="text" class="vin-input" id="vinInput"
|
|
maxlength="17" placeholder="Ej: 4T1BF1FK5CU123456"
|
|
onkeypress="if(event.key==='Enter') dashboard.decodeVin()">
|
|
<button class="btn btn-primary" onclick="dashboard.decodeVin()">
|
|
<i class="fas fa-search"></i> Decodificar
|
|
</button>
|
|
</div>
|
|
<p class="vin-help">El VIN se encuentra en la placa del tablero o en la puerta del conductor</p>
|
|
</div>
|
|
<div id="vinResult"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diagram Viewer Overlay (split layout) -->
|
|
<div class="diagram-viewer-overlay" id="diagramViewerOverlay">
|
|
<div class="dv-layout">
|
|
<!-- Left: Diagram image -->
|
|
<div class="dv-image-panel">
|
|
<div class="dv-toolbar">
|
|
<div style="flex:1">
|
|
<div class="dv-title" id="dvTitle">F200</div>
|
|
<div class="dv-subtitle" id="dvSubtitle">Suspension Delantera</div>
|
|
</div>
|
|
<button class="dv-toolbar-btn" id="dvPrevBtn" title="Anterior"><i class="fas fa-chevron-left"></i></button>
|
|
<button class="dv-toolbar-btn" id="dvNextBtn" title="Siguiente"><i class="fas fa-chevron-right"></i></button>
|
|
<button class="dv-close-btn" id="dvCloseBtn" title="Cerrar"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="dv-img-container" id="dvImgContainer">
|
|
<div class="dv-img-wrapper" id="dvImgWrapper">
|
|
<img id="dvImg" src="" alt="Diagram">
|
|
<!-- Hotspot markers rendered here -->
|
|
</div>
|
|
<div class="dv-zoom-controls">
|
|
<button class="dv-zoom-btn" id="dvZoomOut"><i class="fas fa-minus"></i></button>
|
|
<span class="dv-zoom-level" id="dvZoomLevel">100%</span>
|
|
<button class="dv-zoom-btn" id="dvZoomIn"><i class="fas fa-plus"></i></button>
|
|
<button class="dv-zoom-btn" id="dvZoomFit"><i class="fas fa-expand"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Parts panel -->
|
|
<div class="dv-parts-panel">
|
|
<div class="dv-parts-header">
|
|
<i class="fas fa-list-ul" style="color: var(--accent)"></i>
|
|
<h3>Partes del Diagrama</h3>
|
|
<span class="dv-parts-count" id="dvPartsCount">0</span>
|
|
</div>
|
|
<div class="dv-parts-search">
|
|
<input type="text" id="dvPartsFilter" placeholder="Filtrar partes...">
|
|
</div>
|
|
<div class="dv-parts-list" id="dvPartsList">
|
|
<div style="text-align:center;padding:3rem;color:var(--text-secondary)">
|
|
<i class="fas fa-spinner fa-spin" style="font-size:1.5rem;margin-bottom:0.5rem"></i>
|
|
<p>Cargando partes...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="dashboard.js"></script>
|
|
<script src="enhanced-search.js"></script>
|
|
</body>
|
|
</html>
|