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>
104 lines
5.9 KiB
XML
104 lines
5.9 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; }
|
|
.component-accent { stroke: #444; fill: #F5A623; opacity: 0.3; }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- Title -->
|
|
<text x="400" y="35" text-anchor="middle" font-family="Inter, sans-serif" font-size="22" font-weight="700" fill="#333">Sistema de Frenos - Vista Explodida</text>
|
|
|
|
<!-- Brake disc (rotor) -->
|
|
<g id="part-disc">
|
|
<ellipse cx="400" cy="320" rx="130" ry="130" class="component" stroke-width="3"/>
|
|
<ellipse cx="400" cy="320" rx="110" ry="110" stroke="#888" fill="none" stroke-width="1"/>
|
|
<ellipse cx="400" cy="320" rx="45" ry="45" class="component-detail"/>
|
|
<!-- Ventilation slots -->
|
|
<line x1="310" y1="290" x2="350" y2="290" stroke="#aaa" stroke-width="1"/>
|
|
<line x1="310" y1="310" x2="350" y2="310" stroke="#aaa" stroke-width="1"/>
|
|
<line x1="310" y1="330" x2="350" y2="330" stroke="#aaa" stroke-width="1"/>
|
|
<line x1="310" y1="350" x2="350" y2="350" stroke="#aaa" stroke-width="1"/>
|
|
<line x1="450" y1="290" x2="490" y2="290" stroke="#aaa" stroke-width="1"/>
|
|
<line x1="450" y1="310" x2="490" y2="310" stroke="#aaa" stroke-width="1"/>
|
|
<line x1="450" y1="330" x2="490" y2="330" stroke="#aaa" stroke-width="1"/>
|
|
<line x1="450" y1="350" x2="490" y2="350" stroke="#aaa" stroke-width="1"/>
|
|
<!-- Mounting holes -->
|
|
<circle cx="400" cy="280" r="5" fill="#999" stroke="#666"/>
|
|
<circle cx="380" cy="285" r="5" fill="#999" stroke="#666"/>
|
|
<circle cx="420" cy="285" r="5" fill="#999" stroke="#666"/>
|
|
<circle cx="385" cy="360" r="5" fill="#999" stroke="#666"/>
|
|
<circle cx="415" cy="360" r="5" fill="#999" stroke="#666"/>
|
|
<rect class="part-area" data-hotspot="1" x="270" y="190" width="260" height="260" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Brake caliper (exploded out to right) -->
|
|
<g id="part-caliper">
|
|
<line x1="530" y1="320" x2="580" y2="250" class="line"/>
|
|
<rect x="580" y="200" width="120" height="100" rx="12" class="component" stroke-width="2.5"/>
|
|
<rect x="595" y="215" width="90" height="30" rx="4" class="component-detail"/>
|
|
<rect x="595" y="255" width="90" height="30" rx="4" class="component-detail"/>
|
|
<!-- Piston -->
|
|
<circle cx="640" cy="230" r="10" fill="#bbb" stroke="#888"/>
|
|
<circle cx="640" cy="270" r="10" fill="#bbb" stroke="#888"/>
|
|
<!-- Bleeder valve -->
|
|
<rect x="705" y="230" width="20" height="10" rx="3" fill="#999" stroke="#666"/>
|
|
<rect class="part-area" data-hotspot="2" x="575" y="195" width="155" height="115" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Brake pads (exploded above) -->
|
|
<g id="part-pads">
|
|
<line x1="400" y1="190" x2="400" y2="120" class="line"/>
|
|
<rect x="340" y="60" width="120" height="55" rx="6" class="component" stroke-width="2"/>
|
|
<rect x="348" y="68" width="104" height="20" rx="3" class="component-accent"/>
|
|
<!-- Friction material -->
|
|
<rect x="348" y="93" width="104" height="15" rx="2" fill="#a0522d" stroke="#8b4513" stroke-width="1"/>
|
|
<!-- Wear indicator slot -->
|
|
<rect x="370" y="100" width="4" height="8" fill="#F5A623"/>
|
|
<rect class="part-area" data-hotspot="3" x="335" y="55" width="130" height="65" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Brake hose (exploded to left) -->
|
|
<g id="part-hose">
|
|
<line x1="270" y1="320" x2="180" y2="280" class="line"/>
|
|
<path d="M80,240 Q100,220 120,240 Q140,260 160,240 Q180,220 180,260" stroke="#333" fill="none" stroke-width="4" stroke-linecap="round"/>
|
|
<!-- Fittings -->
|
|
<rect x="65" y="232" width="20" height="16" rx="3" fill="#999" stroke="#666"/>
|
|
<rect x="175" y="252" width="20" height="16" rx="3" fill="#999" stroke="#666"/>
|
|
<rect class="part-area" data-hotspot="4" x="60" y="215" width="145" height="60" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Master cylinder (top-left) -->
|
|
<g id="part-master">
|
|
<line x1="270" y1="200" x2="180" y2="120" class="line"/>
|
|
<rect x="50" y="80" width="140" height="50" rx="8" class="component" stroke-width="2.5"/>
|
|
<circle cx="80" cy="105" r="12" class="component-detail"/>
|
|
<circle cx="120" cy="105" r="12" class="component-detail"/>
|
|
<!-- Reservoir -->
|
|
<rect x="85" y="55" width="60" height="25" rx="5" fill="#cde" stroke="#89a"/>
|
|
<!-- Pushrod -->
|
|
<rect x="190" y="97" width="30" height="16" rx="3" fill="#bbb" stroke="#888"/>
|
|
<rect class="part-area" data-hotspot="5" x="45" y="50" width="180" height="85" rx="8"/>
|
|
</g>
|
|
|
|
<!-- Callout numbers -->
|
|
<circle cx="400" cy="475" r="14" fill="#F5A623"/><text class="callout" x="400" y="480" text-anchor="middle" fill="white">1</text>
|
|
<circle cx="720" cy="175" r="14" fill="#F5A623"/><text class="callout" x="720" y="180" text-anchor="middle" fill="white">2</text>
|
|
<circle cx="400" cy="45" r="14" fill="#F5A623"/><text class="callout" x="400" y="50" text-anchor="middle" fill="white">3</text>
|
|
<circle cx="65" cy="200" r="14" fill="#F5A623"/><text class="callout" x="65" y="205" text-anchor="middle" fill="white">4</text>
|
|
<circle cx="135" cy="45" r="14" fill="#F5A623"/><text class="callout" x="135" y="50" text-anchor="middle" fill="white">5</text>
|
|
|
|
<!-- Labels -->
|
|
<text class="label" x="400" y="500" text-anchor="middle">Disco de freno</text>
|
|
<text class="label" x="720" y="195" text-anchor="middle">Caliper</text>
|
|
<text class="label" x="400" y="30" text-anchor="middle" dy="-10">Pastillas de freno</text>
|
|
<text class="label" x="65" y="220" text-anchor="middle">Manguera de freno</text>
|
|
<text class="label" x="135" y="30" text-anchor="middle" dy="-10">Cilindro maestro</text>
|
|
</svg>
|