consultoria-as
c333f2eaf0
- Blueprint with API endpoints: list, detail, SVG serve, vehicle-linked diagrams - Interactive SVG viewer with zoom/pan (mouse wheel, drag, touch, keyboard) - Clickable hotspots that highlight on hover and show part detail panel - Parts sidebar listing all callout numbers with catalog search integration - 3 placeholder SVG diagrams: braking system, suspension, engine components - Seeded diagrams, hotspots, and vehicle_diagrams in DB - Added to sidebar nav, i18n (ES/EN), and "Ver diagramas" link in catalog Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
118 lines
6.5 KiB
XML
118 lines
6.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" fill="none" stroke-width="2">
|
|
<defs>
|
|
<style>
|
|
.part-area { fill: transparent; stroke: none; cursor: pointer; }
|
|
.part-area:hover { fill: rgba(245, 166, 35, 0.15); stroke: #F5A623; stroke-width: 2; }
|
|
.label { font-family: 'Inter', sans-serif; font-size: 13px; fill: #666; }
|
|
.callout { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; fill: #F5A623; }
|
|
.line { stroke: #999; stroke-width: 1; stroke-dasharray: 4 2; }
|
|
.component { stroke: #444; fill: #e8e8e8; }
|
|
.component-detail { stroke: #666; fill: #d0d0d0; }
|
|
</style>
|
|
</defs>
|
|
|
|
<text x="400" y="35" text-anchor="middle" font-family="Inter, sans-serif" font-size="22" font-weight="700" fill="#333">Motor - Componentes Principales</text>
|
|
|
|
<!-- Engine block (center) -->
|
|
<g id="engine-block">
|
|
<rect x="250" y="180" width="300" height="250" rx="8" class="component" stroke-width="3"/>
|
|
<!-- Cylinder bores -->
|
|
<rect x="280" y="200" width="50" height="80" rx="4" class="component-detail"/>
|
|
<rect x="340" y="200" width="50" height="80" rx="4" class="component-detail"/>
|
|
<rect x="400" y="200" width="50" height="80" rx="4" class="component-detail"/>
|
|
<rect x="460" y="200" width="50" height="80" rx="4" class="component-detail"/>
|
|
<!-- Oil pan area -->
|
|
<rect x="260" y="380" width="280" height="40" rx="4" fill="#ddd" stroke="#999"/>
|
|
</g>
|
|
|
|
<!-- Air filter (top-left, exploded) -->
|
|
<g id="part-filter">
|
|
<line x1="270" y1="180" x2="130" y2="100" class="line"/>
|
|
<ellipse cx="100" cy="75" rx="60" ry="30" class="component" stroke-width="2"/>
|
|
<ellipse cx="100" cy="75" rx="45" ry="20" fill="#c4a35a" stroke="#a08030" stroke-width="1"/>
|
|
<!-- Pleats -->
|
|
<line x1="65" y1="70" x2="65" y2="80" stroke="#b89040" stroke-width="1"/>
|
|
<line x1="80" y1="65" x2="80" y2="85" stroke="#b89040" stroke-width="1"/>
|
|
<line x1="95" y1="63" x2="95" y2="87" stroke="#b89040" stroke-width="1"/>
|
|
<line x1="110" y1="63" x2="110" y2="87" stroke="#b89040" stroke-width="1"/>
|
|
<line x1="125" y1="65" x2="125" y2="85" stroke="#b89040" stroke-width="1"/>
|
|
<line x1="135" y1="70" x2="135" y2="80" stroke="#b89040" stroke-width="1"/>
|
|
<rect class="part-area" data-hotspot="1" x="35" y="40" width="130" height="70" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Spark plugs (top, exploded) -->
|
|
<g id="part-spark-plugs">
|
|
<line x1="400" y1="180" x2="400" y2="100" class="line"/>
|
|
<!-- Spark plug -->
|
|
<rect x="385" y="50" width="30" height="50" rx="3" fill="#bbb" stroke="#888"/>
|
|
<!-- Ceramic insulator -->
|
|
<rect x="392" y="40" width="16" height="20" rx="4" fill="#f0e8d0" stroke="#c0b090"/>
|
|
<!-- Terminal -->
|
|
<rect x="397" y="30" width="6" height="12" rx="1" fill="#999" stroke="#777"/>
|
|
<!-- Electrode -->
|
|
<path d="M398,100 L398,108 L405,108" stroke="#888" stroke-width="2"/>
|
|
<!-- Second plug hint -->
|
|
<rect x="430" y="53" width="25" height="44" rx="3" fill="#bbb" stroke="#888" opacity="0.5"/>
|
|
<rect x="340" y="53" width="25" height="44" rx="3" fill="#bbb" stroke="#888" opacity="0.5"/>
|
|
<rect class="part-area" data-hotspot="2" x="330" y="25" width="135" height="85" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Belt (right side, exploded) -->
|
|
<g id="part-belt">
|
|
<line x1="550" y1="280" x2="610" y2="230" class="line"/>
|
|
<!-- Serpentine belt shape -->
|
|
<path d="M620,160 Q680,160 680,210 Q680,260 650,280 Q620,300 620,340 Q620,370 660,370" stroke="#333" fill="none" stroke-width="6" stroke-linecap="round"/>
|
|
<!-- Ribs pattern -->
|
|
<path d="M622,165 Q678,165 678,210 Q678,258 650,278" stroke="#555" fill="none" stroke-width="1" stroke-dasharray="3 3"/>
|
|
<!-- Pulleys -->
|
|
<circle cx="620" cy="160" r="15" fill="#ccc" stroke="#999" stroke-width="2"/>
|
|
<circle cx="660" cy="370" r="15" fill="#ccc" stroke="#999" stroke-width="2"/>
|
|
<circle cx="680" cy="260" r="10" fill="#ccc" stroke="#999" stroke-width="2"/>
|
|
<rect class="part-area" data-hotspot="3" x="600" y="140" width="100" height="250" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Gasket (bottom, exploded) -->
|
|
<g id="part-gasket">
|
|
<line x1="400" y1="430" x2="400" y2="480" class="line"/>
|
|
<!-- Head gasket flat view -->
|
|
<rect x="280" y="490" width="240" height="20" rx="3" fill="#a0a0a0" stroke="#777" stroke-width="1.5"/>
|
|
<!-- Cylinder holes -->
|
|
<ellipse cx="320" cy="500" rx="18" ry="7" fill="#888" stroke="#666"/>
|
|
<ellipse cx="370" cy="500" rx="18" ry="7" fill="#888" stroke="#666"/>
|
|
<ellipse cx="420" cy="500" rx="18" ry="7" fill="#888" stroke="#666"/>
|
|
<ellipse cx="470" cy="500" rx="18" ry="7" fill="#888" stroke="#666"/>
|
|
<!-- Bolt holes -->
|
|
<circle cx="290" cy="500" r="3" fill="#666"/>
|
|
<circle cx="505" cy="500" r="3" fill="#666"/>
|
|
<rect class="part-area" data-hotspot="4" x="275" y="485" width="250" height="30" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Oil filter (bottom-left, exploded) -->
|
|
<g id="part-oil-filter">
|
|
<line x1="270" y1="400" x2="160" y2="470" class="line"/>
|
|
<!-- Canister -->
|
|
<rect x="80" y="450" width="60" height="90" rx="10" class="component" stroke-width="2"/>
|
|
<!-- Base plate -->
|
|
<ellipse cx="110" cy="540" rx="30" ry="8" fill="#999" stroke="#777"/>
|
|
<!-- Gasket ring -->
|
|
<ellipse cx="110" cy="536" rx="25" ry="4" fill="none" stroke="#333" stroke-width="2"/>
|
|
<!-- Thread -->
|
|
<rect x="102" y="540" width="16" height="12" rx="2" fill="#bbb" stroke="#999"/>
|
|
<rect class="part-area" data-hotspot="5" x="75" y="445" width="70" height="115" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Callout numbers -->
|
|
<circle cx="100" cy="120" r="14" fill="#F5A623"/><text class="callout" x="100" y="125" text-anchor="middle" fill="white">1</text>
|
|
<circle cx="400" cy="18" r="14" fill="#F5A623"/><text class="callout" x="400" y="23" text-anchor="middle" fill="white">2</text>
|
|
<circle cx="720" cy="140" r="14" fill="#F5A623"/><text class="callout" x="720" y="145" text-anchor="middle" fill="white">3</text>
|
|
<circle cx="400" cy="530" r="14" fill="#F5A623"/><text class="callout" x="400" y="535" text-anchor="middle" fill="white">4</text>
|
|
<circle cx="110" cy="575" r="14" fill="#F5A623"/><text class="callout" x="110" y="580" text-anchor="middle" fill="white">5</text>
|
|
|
|
<!-- Labels -->
|
|
<text class="label" x="100" y="140" text-anchor="middle">Filtro de aire</text>
|
|
<text class="label" x="400" y="10" text-anchor="middle" dy="-8">Bujias</text>
|
|
<text class="label" x="720" y="160" text-anchor="middle">Banda serpentina</text>
|
|
<text class="label" x="400" y="550" text-anchor="middle">Junta de culata</text>
|
|
<text class="label" x="110" y="595" text-anchor="middle">Filtro de aceite</text>
|
|
</svg>
|