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>
98 lines
5.2 KiB
XML
98 lines
5.2 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">Suspension Delantera - Vista Explodida</text>
|
|
|
|
<!-- Shock absorber (center) -->
|
|
<g id="part-shock">
|
|
<rect x="370" y="80" width="60" height="200" rx="10" class="component" stroke-width="2.5"/>
|
|
<!-- Piston rod -->
|
|
<rect x="393" y="55" width="14" height="40" rx="3" fill="#bbb" stroke="#888"/>
|
|
<!-- Body detail -->
|
|
<rect x="380" y="130" width="40" height="100" rx="5" class="component-detail"/>
|
|
<!-- Top mount -->
|
|
<ellipse cx="400" cy="55" rx="25" ry="10" fill="#ccc" stroke="#999"/>
|
|
<!-- Bottom eye -->
|
|
<circle cx="400" cy="290" r="12" fill="#ccc" stroke="#999"/>
|
|
<circle cx="400" cy="290" r="5" fill="#999" stroke="#666"/>
|
|
<rect class="part-area" data-hotspot="1" x="365" y="43" width="70" height="260" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Coil spring (wrapped around shock, exploded to right) -->
|
|
<g id="part-spring">
|
|
<line x1="430" y1="180" x2="520" y2="180" class="line"/>
|
|
<!-- Spring coils -->
|
|
<path d="M540,80 Q580,95 540,110 Q500,125 540,140 Q580,155 540,170 Q500,185 540,200 Q580,215 540,230 Q500,245 540,260 Q580,275 540,290" stroke="#666" fill="none" stroke-width="5" stroke-linecap="round"/>
|
|
<!-- End plates -->
|
|
<rect x="520" y="70" width="40" height="8" rx="2" fill="#999" stroke="#777"/>
|
|
<rect x="520" y="290" width="40" height="8" rx="2" fill="#999" stroke="#777"/>
|
|
<rect class="part-area" data-hotspot="2" x="495" y="65" width="95" height="240" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Control arm (lower, exploded down) -->
|
|
<g id="part-control-arm">
|
|
<line x1="400" y1="302" x2="400" y2="360" class="line"/>
|
|
<!-- A-arm shape -->
|
|
<path d="M250,400 L400,380 L550,400 L400,420 Z" class="component" stroke-width="2"/>
|
|
<!-- Bushings -->
|
|
<circle cx="270" cy="405" r="12" fill="#777" stroke="#555"/>
|
|
<circle cx="530" cy="405" r="12" fill="#777" stroke="#555"/>
|
|
<!-- Ball joint socket -->
|
|
<circle cx="400" cy="395" r="10" fill="#bbb" stroke="#888"/>
|
|
<rect class="part-area" data-hotspot="3" x="245" y="375" width="310" height="50" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Ball joint (exploded down-left) -->
|
|
<g id="part-ball-joint">
|
|
<line x1="350" y1="395" x2="200" y2="460" class="line"/>
|
|
<!-- Ball joint body -->
|
|
<path d="M160,450 L240,450 L230,500 L170,500 Z" class="component" stroke-width="2"/>
|
|
<!-- Ball -->
|
|
<circle cx="200" cy="455" r="10" fill="#bbb" stroke="#888"/>
|
|
<!-- Stud -->
|
|
<rect x="194" y="500" width="12" height="30" rx="2" fill="#999" stroke="#777"/>
|
|
<!-- Boot -->
|
|
<path d="M172,465 Q200,490 228,465" stroke="#333" fill="#555" opacity="0.5"/>
|
|
<rect class="part-area" data-hotspot="4" x="155" y="440" width="90" height="95" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Tie rod (exploded to the left) -->
|
|
<g id="part-tie-rod">
|
|
<line x1="250" y1="400" x2="150" y2="320" class="line"/>
|
|
<!-- Rod -->
|
|
<rect x="30" y="280" width="160" height="14" rx="5" class="component"/>
|
|
<!-- Inner end -->
|
|
<circle cx="40" cy="287" r="10" fill="#bbb" stroke="#888"/>
|
|
<!-- Outer end (ball joint) -->
|
|
<path d="M180,275 L200,275 L195,300 L175,300 Z" class="component-detail"/>
|
|
<circle cx="190" cy="278" r="6" fill="#bbb" stroke="#888"/>
|
|
<!-- Boot -->
|
|
<path d="M175,280 Q190,295 205,280" stroke="#333" fill="#555" opacity="0.5"/>
|
|
<rect class="part-area" data-hotspot="5" x="25" y="265" width="185" height="45" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Callout numbers -->
|
|
<circle cx="400" cy="170" r="14" fill="#F5A623"/><text class="callout" x="400" y="175" text-anchor="middle" fill="white">1</text>
|
|
<circle cx="560" cy="55" r="14" fill="#F5A623"/><text class="callout" x="560" y="60" text-anchor="middle" fill="white">2</text>
|
|
<circle cx="400" cy="440" r="14" fill="#F5A623"/><text class="callout" x="400" y="445" text-anchor="middle" fill="white">3</text>
|
|
<circle cx="200" cy="550" r="14" fill="#F5A623"/><text class="callout" x="200" y="555" text-anchor="middle" fill="white">4</text>
|
|
<circle cx="40" cy="260" r="14" fill="#F5A623"/><text class="callout" x="40" y="265" text-anchor="middle" fill="white">5</text>
|
|
|
|
<!-- Labels -->
|
|
<text class="label" x="400" y="192" text-anchor="middle">Amortiguador</text>
|
|
<text class="label" x="560" y="48" text-anchor="middle" dy="-8">Resorte helicoidal</text>
|
|
<text class="label" x="400" y="460" text-anchor="middle">Brazo de control</text>
|
|
<text class="label" x="200" y="570" text-anchor="middle">Rotula</text>
|
|
<text class="label" x="40" y="253" text-anchor="middle" dy="-8">Barra de acoplamiento</text>
|
|
</svg>
|