Add admin panel, enhanced search, Gonher import and expand API
- Add admin interface (admin.html, admin.js) for managing catalog data - Add enhanced search module with advanced filtering capabilities - Expand server.py with new API endpoints and admin functionality - Add Gonher catalog import scripts (import_gonher_catalog.py, import_gonher_complete.py) - Add demo data population script and sample CSV data - Update customer landing page and dashboard with UI improvements - Update database with enriched vehicle and parts data Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Catálogo de Autopartes - AutoParts DB</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">
|
||||
<style>
|
||||
@@ -135,6 +136,479 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Enhanced Search Styles */
|
||||
.search-box-enhanced {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.search-input-wrapper:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
|
||||
}
|
||||
|
||||
.search-input-wrapper .search-icon {
|
||||
padding: 0 0.5rem 0 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search-input-wrapper .search-input {
|
||||
flex: 1;
|
||||
padding: 0.9rem 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.search-filters-toggle {
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.search-filters-toggle:hover,
|
||||
.search-filters-toggle.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.search-spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* Search Dropdown */
|
||||
.search-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.search-dropdown.active {
|
||||
display: block;
|
||||
animation: slideDown 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Search Filters */
|
||||
.search-filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.search-filters .filter-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-filters label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.25rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.search-filters select {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Recent Searches */
|
||||
.search-recent {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.search-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.search-section-title i {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.clear-recent {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
color: var(--accent);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.clear-recent:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.search-recent-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.search-recent-item {
|
||||
padding: 0.4rem 0.8rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-recent-item:hover {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Search Results */
|
||||
.search-results-container {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.search-results-section {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.search-results-section .search-section-title {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.search-result-item:hover {
|
||||
background: rgba(255, 107, 53, 0.15);
|
||||
}
|
||||
|
||||
.search-result-item.highlighted {
|
||||
background: rgba(255, 107, 53, 0.2);
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.search-result-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-result-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-result-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-result-title {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.search-result-title .highlight {
|
||||
background: rgba(255, 107, 53, 0.3);
|
||||
color: var(--accent);
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.search-result-subtitle {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.search-result-badge {
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-result-badge.aftermarket {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
color: #66bb6a;
|
||||
}
|
||||
|
||||
.search-result-badge.cross_reference {
|
||||
background: rgba(255, 152, 0, 0.15);
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
.search-result-badge.vehicle-badge {
|
||||
background: rgba(33, 150, 243, 0.15);
|
||||
color: #42a5f5;
|
||||
}
|
||||
|
||||
/* Vehicle category buttons in search */
|
||||
.vehicle-item {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vehicle-categories-row {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vehicle-category-btn {
|
||||
padding: 0.35rem 0.6rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.vehicle-category-btn:hover {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.vehicle-category-btn i {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.vehicle-all-btn {
|
||||
margin-left: auto;
|
||||
background: rgba(33, 150, 243, 0.1);
|
||||
border-color: rgba(33, 150, 243, 0.3);
|
||||
color: #42a5f5;
|
||||
}
|
||||
|
||||
.vehicle-all-btn:hover {
|
||||
background: #42a5f5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Vehicle parts search results (combined search) */
|
||||
.vehicle-parts-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.05));
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
border-left: 3px solid #42a5f5;
|
||||
}
|
||||
|
||||
.vehicle-parts-header i {
|
||||
color: #42a5f5;
|
||||
}
|
||||
|
||||
.vehicle-parts-header span {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.vehicle-parts-header small {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.8rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.vehicle-part-item {
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
.vehicle-part-item:hover {
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
|
||||
.search-result-badge.vehicle-part-badge {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
color: #66bb6a;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.search-result-badge.vehicle-part-badge i {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.search-category-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 3px;
|
||||
color: var(--text-secondary);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.search-result-subtitle .part-number {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.search-suggestion-tags {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-tag {
|
||||
padding: 0.3rem 0.75rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.search-tag:hover {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* No Results */
|
||||
.search-no-results {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.search-no-results i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.search-no-results p {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.search-no-results span {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Dropdown Footer */
|
||||
.search-dropdown-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.search-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.search-hint kbd {
|
||||
padding: 0.15rem 0.4rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.search-view-all {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.search-view-all:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1221,16 +1695,97 @@
|
||||
</a>
|
||||
|
||||
<div class="search-container">
|
||||
<div class="search-box">
|
||||
<input type="text" class="search-input" id="searchInput"
|
||||
placeholder="Buscar por número de parte o nombre... (presiona /)"
|
||||
aria-label="Buscar partes">
|
||||
<button class="vin-btn" onclick="dashboard.openVinDecoder()" title="Decodificar VIN">
|
||||
<i class="fas fa-barcode"></i>
|
||||
</button>
|
||||
<button class="search-btn" onclick="dashboard.searchPartNumber()">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<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úmeros OEM, vehículos... (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>
|
||||
|
||||
<!-- Dropdown de resultados -->
|
||||
<div class="search-dropdown" id="searchDropdown">
|
||||
<!-- Filtros -->
|
||||
<div class="search-filters" id="searchFilters" style="display: none;">
|
||||
<div class="filter-group">
|
||||
<label>Categoría</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ículos</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Búsquedas recientes -->
|
||||
<div class="search-recent" id="searchRecent">
|
||||
<div class="search-section-title">
|
||||
<i class="fas fa-history"></i> Búsquedas recientes
|
||||
<span class="clear-recent" onclick="enhancedSearch.clearRecent()">Limpiar</span>
|
||||
</div>
|
||||
<div class="search-recent-items" id="searchRecentItems"></div>
|
||||
</div>
|
||||
|
||||
<!-- Resultados -->
|
||||
<div class="search-results-container" id="searchResultsContainer">
|
||||
<!-- Parts results -->
|
||||
<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>
|
||||
|
||||
<!-- Vehicles results -->
|
||||
<div class="search-results-section" id="vehiclesResults" style="display: none;">
|
||||
<div class="search-section-title"><i class="fas fa-car"></i> Vehículos</div>
|
||||
<div class="search-results-list" id="vehiclesResultsList"></div>
|
||||
</div>
|
||||
|
||||
<!-- No results -->
|
||||
<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érminos de búsqueda</span>
|
||||
<div class="search-suggestions" style="margin-top: 1rem;">
|
||||
<span style="display: block; margin-bottom: 0.5rem; font-size: 0.8rem;">Búsquedas 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>
|
||||
|
||||
<!-- Footer con acciones -->
|
||||
<div class="search-dropdown-footer" id="searchFooter" style="display: none;">
|
||||
<span class="search-hint">
|
||||
<kbd>↑↓</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>
|
||||
|
||||
@@ -1252,6 +1807,9 @@
|
||||
<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ón">
|
||||
<i class="fas fa-cog"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1310,7 +1868,7 @@
|
||||
<div class="modal-overlay" id="searchResultsModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">
|
||||
<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>
|
||||
@@ -1367,5 +1925,6 @@
|
||||
</div>
|
||||
|
||||
<script src="dashboard.js"></script>
|
||||
<script src="enhanced-search.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user