fix: performance improvements, shared UI, and cross-reference data quality
Backend (server.py): - Fix N+1 query in /api/diagrams/<id>/parts with batch cross-ref query - Add LIMIT safety nets to 15 endpoints (50-5000 per data type) - Add pagination to /api/vehicles, /api/model-year-engine, /api/vehicles/<id>/parts, /api/admin/export - Optimize search_vehicles() EXISTS subquery to JOIN - Restrict static route to /static/* subdir (security fix) - Add detailed=true support to /api/brands and /api/models Frontend: - Extract shared CSS into shared.css (variables, reset, buttons, forms, scrollbar) - Create shared nav.js component (logo + navigation links, auto-highlights) - Update all 4 HTML pages to use shared CSS and nav - Update JS to handle paginated API responses Data quality: - Fix cross-reference source field: map 72K records from catalog names to actual brands - Fix aftermarket_parts manufacturer_id: correct 8K records with wrong brand attribution - Delete 98MB backup file, orphan records, and garbage cross-references - Add import scripts for DAR, FRAM, WIX, MOOG, Cartek catalogs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,125 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AutoParts DB - Tienda de Autopartes</title>
|
||||
<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="/shared.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-primary: #0a0a0f;
|
||||
--bg-secondary: #12121a;
|
||||
--bg-card: #1a1a24;
|
||||
--bg-hover: #252532;
|
||||
--accent: #ff6b35;
|
||||
--accent-hover: #ff8555;
|
||||
--accent-glow: rgba(255, 107, 53, 0.3);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a0a0b0;
|
||||
--border: #2a2a3a;
|
||||
--success: #22c55e;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: rgba(18, 18, 26, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 1rem 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
box-shadow: 0 4px 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
transition: color 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.nav-links a:hover::after,
|
||||
.nav-links a.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-links a.admin-link {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.nav-links a.admin-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Landing page-specific header extras */
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -165,29 +49,34 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.7rem 1.5rem;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-size: 0.9rem;
|
||||
/* Footer logo (reuses .logo classes) */
|
||||
.footer .logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.footer .logo-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
box-shadow: 0 4px 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 25px var(--accent-glow);
|
||||
.footer .logo-text {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
@@ -1060,30 +949,23 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<a href="customer-landing.html" class="logo">
|
||||
<div class="logo-icon">⚙️</div>
|
||||
<div class="logo-text">AUTOPARTS DB</div>
|
||||
</a>
|
||||
<nav class="nav-links">
|
||||
<a href="customer-landing.html" class="active">Inicio</a>
|
||||
<a href="index.html">Catálogo</a>
|
||||
<a href="#brands-section">Marcas</a>
|
||||
<a href="#featured-section">Productos</a>
|
||||
<a href="#cta-section">Contacto</a>
|
||||
<a href="admin.html" class="admin-link">⚡ Admin</a>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<button class="search-btn" onclick="openSearchModal()">🔍</button>
|
||||
<button class="cart-btn">
|
||||
🛒
|
||||
<span class="cart-badge" id="cart-count">0</span>
|
||||
</button>
|
||||
<a href="index.html" class="btn btn-primary">Dashboard</a>
|
||||
<button class="mobile-menu-btn">☰</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Shared Navigation -->
|
||||
<div id="shared-nav"></div>
|
||||
<script src="/nav.js"></script>
|
||||
<script>
|
||||
// Inject landing-page-specific header extras (search, cart, dashboard btn)
|
||||
(function() {
|
||||
var extra = document.getElementById('shared-nav-extra');
|
||||
if (!extra) return;
|
||||
extra.innerHTML = ''
|
||||
+ '<div class="header-actions">'
|
||||
+ '<button class="search-btn" onclick="openSearchModal()">\uD83D\uDD0D</button>'
|
||||
+ '<button class="cart-btn">\uD83D\uDED2<span class="cart-badge" id="cart-count">0</span></button>'
|
||||
+ '<a href="index.html" class="btn btn-primary">Dashboard</a>'
|
||||
+ '<button class="mobile-menu-btn">\u2630</button>'
|
||||
+ '</div>';
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Search Modal -->
|
||||
<div class="search-modal" id="searchModal" onclick="closeSearchModal(event)">
|
||||
|
||||
Reference in New Issue
Block a user