consultoria-as
e95f7cf684
Major features: - Pixel-Perfect glassmorphism design (landing + POS + public catalog) - OEM/Local catalog toggle with Nexpart taxonomy (14 groups, 108 subgroups, 558 part types) - Marketplace B2B Phase 1 (bodegas, POs, status machine, WA+email notifications) - Peer-to-peer inventory (multi-instance, LAN discovery) - WhatsApp: photo→Vision AI, voice→Whisper, conversational quotations - Smart unified search (VIN/plate/part_number/keyword auto-detect) - Shop Supplies tab (vehicle-independent parts) - Chatbot AI fallback chain (5 models) + response cache - CSV inventory import tool + setup_instance.sh installer - Tablet-responsive CSS + sidebar toggle - Filters, export CSV, employee edit, business data save - Quotation system (WA→POS) with auto-print on confirmation - Live stats on landing page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
633 lines
22 KiB
HTML
633 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-theme="industrial">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Catalogo — Nexus Autoparts</title>
|
|
<script>
|
|
(function(){
|
|
var t = localStorage.getItem('nexus-theme') || 'industrial';
|
|
document.documentElement.setAttribute('data-theme', t);
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="/static/css/tokens.css">
|
|
<style>
|
|
/* ── Reset ── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; scrollbar-width: none; }
|
|
html::-webkit-scrollbar { width: 0; }
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--color-bg-base);
|
|
color: var(--color-text-primary);
|
|
line-height: var(--leading-body);
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow-x: hidden;
|
|
}
|
|
a { color: var(--color-text-accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* ==========================================================================
|
|
HEADER — Glassmorphism sticky (matches landing)
|
|
========================================================================== */
|
|
|
|
.site-header {
|
|
position: sticky; top: 0;
|
|
z-index: var(--z-sticky);
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
|
border-bottom: 1px solid var(--glass-border);
|
|
}
|
|
.site-header .inner {
|
|
max-width: var(--content-xl); margin: 0 auto;
|
|
padding: 0 var(--space-6);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
height: 56px;
|
|
}
|
|
.logo {
|
|
font-family: var(--font-heading); font-size: var(--text-h5);
|
|
font-weight: var(--heading-weight-primary);
|
|
color: var(--color-text-accent);
|
|
text-transform: uppercase; letter-spacing: var(--tracking-wide);
|
|
text-decoration: none;
|
|
position: relative;
|
|
}
|
|
.logo::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -3px; left: 0; right: 0;
|
|
height: 2px;
|
|
background: var(--gradient-accent);
|
|
border-radius: 1px;
|
|
opacity: 0.5;
|
|
filter: blur(1px);
|
|
}
|
|
.header-right { display: flex; gap: var(--space-3); align-items: center; }
|
|
|
|
/* ── Catalog mode toggle (OEM / Local) ── */
|
|
.mode-toggle {
|
|
display: inline-flex;
|
|
padding: 3px;
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border: 1px dashed var(--glass-border);
|
|
border-radius: var(--radius-md);
|
|
gap: 2px;
|
|
}
|
|
.mode-toggle button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--color-text-muted);
|
|
padding: 4px 12px;
|
|
border-radius: calc(var(--radius-md) - 3px);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wider);
|
|
cursor: pointer;
|
|
transition: all 0.2s var(--ease-out);
|
|
}
|
|
.mode-toggle button:hover {
|
|
color: var(--color-text-accent);
|
|
}
|
|
.mode-toggle button.is-active {
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-text-accent);
|
|
box-shadow: 0 0 12px var(--glow-color-soft);
|
|
}
|
|
|
|
.theme-toggle {
|
|
width: 36px; height: 36px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: transparent;
|
|
border: 1px dashed var(--glass-border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-muted);
|
|
cursor: pointer; font-size: 1rem;
|
|
transition: var(--transition-fast);
|
|
}
|
|
.theme-toggle:hover {
|
|
border-color: var(--color-border-accent);
|
|
color: var(--color-text-accent);
|
|
box-shadow: 0 0 12px var(--glow-color-soft);
|
|
}
|
|
.header-back {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.header-back:hover { color: var(--color-text-accent); text-decoration: none; }
|
|
|
|
/* ==========================================================================
|
|
SEARCH BAR — Glass style
|
|
========================================================================== */
|
|
|
|
.search-bar {
|
|
max-width: var(--content-xl); margin: 0 auto;
|
|
padding: var(--space-4) var(--space-6);
|
|
}
|
|
.search-wrapper {
|
|
display: flex; gap: var(--space-2);
|
|
}
|
|
.search-wrapper input {
|
|
flex: 1;
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body);
|
|
outline: none;
|
|
transition: all 0.25s var(--ease-out);
|
|
}
|
|
.search-wrapper input:focus {
|
|
border-color: var(--color-border-focus);
|
|
box-shadow: 0 0 0 3px var(--glow-color-soft), 0 0 20px var(--glow-color-soft);
|
|
}
|
|
.search-wrapper input::placeholder { color: var(--color-text-muted); }
|
|
|
|
/* 3D search button */
|
|
.search-wrapper button {
|
|
padding: var(--space-3) var(--space-5);
|
|
background: var(--gradient-accent);
|
|
color: var(--btn-primary-text);
|
|
border: none; border-radius: var(--radius-md);
|
|
font-family: var(--font-body); font-size: var(--text-body);
|
|
font-weight: var(--font-weight-semibold); cursor: pointer;
|
|
transition: all 0.25s var(--ease-out);
|
|
box-shadow: 0 3px 0 var(--color-primary-active),
|
|
0 4px 10px var(--glow-color-soft);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.search-wrapper button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 0 var(--color-primary-active),
|
|
0 8px 20px var(--glow-color);
|
|
}
|
|
.search-wrapper button:active {
|
|
transform: translateY(1px);
|
|
box-shadow: 0 1px 0 var(--color-primary-active);
|
|
}
|
|
/* Shimmer */
|
|
.search-wrapper button::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: -100%; width: 60%; height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
.search-wrapper button:hover::after { left: 120%; }
|
|
|
|
/* ==========================================================================
|
|
REGION BAR — Glass pills
|
|
========================================================================== */
|
|
|
|
.region-bar {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--glass-border);
|
|
padding: var(--space-2) 0;
|
|
}
|
|
.region-inner {
|
|
max-width: var(--content-xl); margin: 0 auto;
|
|
padding: 0 var(--space-6);
|
|
display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
|
|
}
|
|
.region-label {
|
|
font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-muted); text-transform: uppercase;
|
|
letter-spacing: var(--tracking-widest); margin-right: var(--space-2);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.region-btn {
|
|
background: transparent;
|
|
border: 1px dashed var(--glass-border);
|
|
color: var(--color-text-muted);
|
|
padding: var(--space-1) var(--space-3);
|
|
border-radius: var(--radius-md); cursor: pointer;
|
|
font-size: var(--text-caption);
|
|
font-family: var(--font-body);
|
|
transition: all 0.25s ease;
|
|
}
|
|
.region-btn:hover {
|
|
border-color: var(--color-border-accent);
|
|
color: var(--color-text-accent);
|
|
box-shadow: 0 0 12px var(--glow-color-soft);
|
|
}
|
|
.region-btn.is-active {
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-text-accent);
|
|
border-color: var(--color-border-accent);
|
|
border-style: solid;
|
|
font-weight: var(--font-weight-semibold);
|
|
box-shadow: 0 0 16px var(--glow-color-soft);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
BREADCRUMB
|
|
========================================================================== */
|
|
|
|
.breadcrumb {
|
|
max-width: var(--content-xl); margin: 0 auto;
|
|
padding: var(--space-2) var(--space-6);
|
|
display: flex; flex-wrap: wrap; gap: var(--space-1);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.breadcrumb a { color: var(--color-text-accent); }
|
|
.breadcrumb .sep { margin: 0 var(--space-1); color: var(--color-text-muted); opacity: 0.4; }
|
|
|
|
/* ==========================================================================
|
|
MAIN CONTENT
|
|
========================================================================== */
|
|
|
|
.main {
|
|
max-width: var(--content-xl); margin: 0 auto;
|
|
padding: var(--space-4) var(--space-6) var(--space-16);
|
|
}
|
|
.main h2 {
|
|
font-family: var(--font-heading); font-size: var(--text-h3);
|
|
font-weight: var(--heading-weight-primary);
|
|
margin-bottom: var(--space-6);
|
|
letter-spacing: var(--heading-tracking-h3);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
NAV GRID — Glass cards for brands/models/years/engines/categories/groups
|
|
========================================================================== */
|
|
|
|
.nav-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: var(--space-3);
|
|
}
|
|
.nav-card {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-4) var(--space-5);
|
|
cursor: pointer;
|
|
transition: all 0.3s var(--ease-out);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
/* Top accent line on hover */
|
|
.nav-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: var(--gradient-accent);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.3s var(--ease-out);
|
|
}
|
|
.nav-card:hover::before { transform: scaleX(1); }
|
|
.nav-card:hover {
|
|
border-color: var(--color-border-accent);
|
|
box-shadow: 0 4px 20px var(--glow-color-soft);
|
|
transform: translateY(-2px);
|
|
}
|
|
.nav-card .name {
|
|
font-weight: var(--font-weight-semibold);
|
|
font-size: var(--text-body);
|
|
}
|
|
.nav-card .count {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
PARTS LIST — Glass rows with glow
|
|
========================================================================== */
|
|
|
|
.parts-list { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
.part-row {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-4) var(--space-5);
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: var(--space-3);
|
|
transition: all 0.3s var(--ease-out);
|
|
}
|
|
.part-row:hover {
|
|
border-color: var(--color-border-accent);
|
|
box-shadow: 0 4px 20px var(--glow-color-soft);
|
|
}
|
|
|
|
/* Local-mode priority highlights */
|
|
.part-row--tier1 {
|
|
border-color: var(--color-border-accent);
|
|
box-shadow: 0 0 16px var(--glow-color-soft);
|
|
}
|
|
.part-manu {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 3px 10px; margin-bottom: var(--space-2);
|
|
background: var(--color-primary-muted);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-bold);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wider);
|
|
color: var(--color-text-accent);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.part-row--tier2 .part-manu {
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.part-manu .manu-tier { color: var(--color-primary); font-size: 13px; }
|
|
.part-oem-sub { color: var(--color-text-muted); font-weight: var(--font-weight-regular); font-size: var(--text-caption); }
|
|
|
|
.part-stock {
|
|
display: inline-block;
|
|
margin-top: var(--space-2);
|
|
padding: 2px 10px;
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
.part-stock--yes { background: rgba(63,185,80,0.15); color: #3FB950; border: 1px solid rgba(63,185,80,0.3); }
|
|
.part-stock--no { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px dashed var(--glass-border); }
|
|
.part-name {
|
|
font-weight: var(--font-weight-semibold);
|
|
font-size: var(--text-body);
|
|
}
|
|
.part-oem {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-accent);
|
|
}
|
|
.part-desc {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-secondary);
|
|
margin-top: var(--space-1);
|
|
}
|
|
.part-alts {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
margin-top: var(--space-2);
|
|
}
|
|
.part-alts span {
|
|
display: inline-block;
|
|
background: var(--color-primary-muted);
|
|
padding: 2px var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
margin-right: var(--space-1);
|
|
margin-bottom: var(--space-1);
|
|
font-family: var(--font-mono);
|
|
border: 1px dashed var(--glass-border);
|
|
}
|
|
.part-img {
|
|
width: 80px; height: 80px;
|
|
object-fit: contain;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--glass-border);
|
|
}
|
|
.part-detail-btn {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-accent);
|
|
cursor: pointer;
|
|
border: none; background: none; font-family: var(--font-body);
|
|
padding: var(--space-1) 0;
|
|
transition: color 0.2s;
|
|
}
|
|
.part-detail-btn:hover { text-decoration: underline; }
|
|
|
|
/* ==========================================================================
|
|
PAGINATION — Glass buttons
|
|
========================================================================== */
|
|
|
|
.pagination {
|
|
display: flex; justify-content: center; gap: var(--space-2);
|
|
margin-top: var(--space-6);
|
|
}
|
|
.pagination button {
|
|
padding: var(--space-2) var(--space-4);
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-primary);
|
|
cursor: pointer; font-family: var(--font-body);
|
|
transition: all 0.25s ease;
|
|
}
|
|
.pagination button:hover {
|
|
border-color: var(--color-border-accent);
|
|
box-shadow: 0 0 12px var(--glow-color-soft);
|
|
}
|
|
.pagination button.active {
|
|
background: var(--gradient-accent);
|
|
color: var(--btn-primary-text);
|
|
border-color: transparent;
|
|
box-shadow: 0 3px 0 var(--color-primary-active),
|
|
0 4px 12px var(--glow-color-soft);
|
|
}
|
|
.pagination button:disabled { opacity: .4; cursor: default; }
|
|
|
|
/* ==========================================================================
|
|
SEARCH RESULTS
|
|
========================================================================== */
|
|
|
|
.search-results { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
|
|
/* ==========================================================================
|
|
PART DETAIL MODAL — Glass overlay
|
|
========================================================================== */
|
|
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed; inset: 0;
|
|
background: var(--overlay-backdrop);
|
|
z-index: var(--z-modal);
|
|
justify-content: center; align-items: flex-start;
|
|
padding: var(--space-10) var(--space-4);
|
|
overflow-y: auto;
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
}
|
|
.modal-overlay.open { display: flex; }
|
|
.modal-content {
|
|
background: var(--glass-bg-strong);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-lg);
|
|
max-width: 700px; width: 100%;
|
|
padding: var(--space-8);
|
|
position: relative;
|
|
box-shadow: 0 24px 48px rgba(0,0,0,0.3);
|
|
}
|
|
.modal-close {
|
|
position: absolute; top: var(--space-3); right: var(--space-3);
|
|
background: none; border: none; color: var(--color-text-muted);
|
|
font-size: 1.5rem; cursor: pointer; line-height: 1;
|
|
transition: color 0.2s;
|
|
}
|
|
.modal-close:hover { color: var(--color-text-accent); }
|
|
.detail-section { margin-top: var(--space-6); }
|
|
.detail-section h4 {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-h6);
|
|
font-weight: var(--heading-weight-secondary);
|
|
margin-bottom: var(--space-3);
|
|
color: var(--color-text-accent);
|
|
}
|
|
.alt-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
.alt-table th, .alt-table td {
|
|
padding: var(--space-2) var(--space-3);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--glass-border);
|
|
}
|
|
.alt-table th {
|
|
color: var(--color-text-muted);
|
|
font-weight: var(--font-weight-semibold);
|
|
text-transform: uppercase;
|
|
font-size: var(--text-caption);
|
|
letter-spacing: var(--tracking-widest);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
LOADING / EMPTY
|
|
========================================================================== */
|
|
|
|
.loading {
|
|
text-align: center; padding: var(--space-10);
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body);
|
|
}
|
|
.empty {
|
|
text-align: center; padding: var(--space-10);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
FOOTER
|
|
========================================================================== */
|
|
|
|
.site-footer {
|
|
padding: var(--space-4) 0; text-align: center;
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: var(--text-caption); color: var(--color-text-muted);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
RESPONSIVE
|
|
========================================================================== */
|
|
|
|
@media (max-width: 640px) {
|
|
.nav-grid { grid-template-columns: 1fr; }
|
|
.part-row { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="site-header">
|
|
<div class="inner">
|
|
<a href="/" class="logo">Nexus Autoparts</a>
|
|
<div class="header-right">
|
|
<div class="mode-toggle" id="modeToggle" title="Cambiar entre catalogo OEM (TecDoc) y marcas locales">
|
|
<button data-mode="oem" onclick="setCatalogMode('oem')">OEM</button>
|
|
<button data-mode="local" onclick="setCatalogMode('local')">Local</button>
|
|
</div>
|
|
<a href="/" class="header-back">← Inicio</a>
|
|
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">
|
|
<span id="themeIcon">☾</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Country / Region selector -->
|
|
<div class="region-bar">
|
|
<div class="region-inner">
|
|
<span class="region-label">Region:</span>
|
|
<button class="region-btn is-active" data-region="north-america" onclick="setRegion('north-america')">MX / USA / CA</button>
|
|
<button class="region-btn" data-region="europe" onclick="setRegion('europe')">Europa</button>
|
|
<button class="region-btn" data-region="asia" onclick="setRegion('asia')">Asia</button>
|
|
<button class="region-btn" data-region="all" onclick="setRegion('all')">Todos</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-bar">
|
|
<div class="search-wrapper">
|
|
<input type="text" id="searchInput" placeholder="Buscar por numero de parte o nombre..." autocomplete="off">
|
|
<button onclick="doSearch()">Buscar</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="breadcrumb" id="breadcrumb"></nav>
|
|
|
|
<main class="main" id="content">
|
|
<div class="loading">Cargando catalogo...</div>
|
|
</main>
|
|
|
|
<!-- Part detail modal -->
|
|
<div class="modal-overlay" id="detailModal">
|
|
<div class="modal-content" id="detailContent">
|
|
<button class="modal-close" onclick="closeDetail()">×</button>
|
|
<div id="detailBody"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="site-footer">
|
|
<div>© 2026 Nexus Autoparts</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Theme toggle (inline for catalog page)
|
|
function toggleTheme() {
|
|
var html = document.documentElement;
|
|
var current = html.getAttribute('data-theme');
|
|
var next = current === 'industrial' ? 'modern' : 'industrial';
|
|
html.setAttribute('data-theme', next);
|
|
localStorage.setItem('nexus-theme', next);
|
|
var icon = document.getElementById('themeIcon');
|
|
if (icon) icon.innerHTML = next === 'industrial' ? '☾' : '☀';
|
|
}
|
|
// Init icon
|
|
(function(){
|
|
var theme = document.documentElement.getAttribute('data-theme');
|
|
var icon = document.getElementById('themeIcon');
|
|
if (icon) icon.innerHTML = theme === 'industrial' ? '☾' : '☀';
|
|
})();
|
|
</script>
|
|
|
|
<script src="/catalog-public.js"></script>
|
|
|
|
<!-- AI Chat Widget -->
|
|
<link rel="stylesheet" href="/chat-public.css">
|
|
<script src="/chat-public.js"></script>
|
|
|
|
</body>
|
|
</html>
|