Changes on sidebar styles, and content of pages
This commit is contained in:
cagsun
parent
7ae4644893
commit
e3cd2c7f00
22 changed files with 1014 additions and 49 deletions
113
static/img/sink_diagram.svg
Normal file
113
static/img/sink_diagram.svg
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background -->
|
||||
<rect width="800" height="600" fill="#f8f9fa"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2c3e50">Smart Toddler Sink - Structure Schema</text>
|
||||
|
||||
<!-- Main trolley frame -->
|
||||
|
||||
<rect x="180" y="140" width="20" height="280" fill="#7fb069"/>
|
||||
<rect x="600" y="140" width="20" height="280" fill="#7fb069"/>
|
||||
<rect x="180" y="420" width="440" height="20" fill="#7fb069"/>
|
||||
|
||||
<!-- Cross supports -->
|
||||
<!--<rect x="200" y="200" width="400" height="8" fill="#7fb069"/>-->
|
||||
<rect x="200" y="330" width="400" height="8" fill="#7fb069"/>
|
||||
|
||||
<!-- Top shelf - sink basin -->
|
||||
<rect x="206" y="110" width="390" height="40" fill="#e8f4f8" stroke="#4a90b8" stroke-width="2" rx="8"/>
|
||||
<text x="400" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2c3e50">Washbasin (Tiltable)</text>
|
||||
|
||||
<!-- Faucet -->
|
||||
<rect x="380" y="50" width="8" height="59" fill="#DCD86B"/>
|
||||
<circle cx="384" cy="55" r="6" fill="#DCD86B"/>
|
||||
<text x="396" y="60" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Faucet</text>
|
||||
|
||||
<!-- Side accessories -->
|
||||
<rect x="160" y="150" width="30" height="20" fill="#ff6b6b" rx="4"/>
|
||||
<text x="120" y="164" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Switch</text>
|
||||
|
||||
<!-- Bottom level - water containers -->
|
||||
<rect x="220" y="210" width="170" height="120" fill="#e1f5fe" stroke="#0288d1" stroke-width="2" rx="8"/>
|
||||
<rect x="410" y="210" width="170" height="120" fill="#C0C0C0" stroke="#A9A9A9" stroke-width="2" rx="8"/>
|
||||
|
||||
<!-- Water containers
|
||||
<rect x="240" y="240" width="130" height="70" fill="#bbdefb" stroke="#1976d2" stroke-width="2" rx="4"/>
|
||||
<rect x="430" y="240" width="130" height="70" fill="#c8e6c8" stroke="#388e3c" stroke-width="2" rx="4"/>-->
|
||||
|
||||
<!-- Pump inside clean water container -->
|
||||
<rect x="260" y="260" width="40" height="15" fill="#333" rx="2"/>
|
||||
<text x="280" y="270" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="white">PUMP</text>
|
||||
|
||||
<!-- Labels for containers -->
|
||||
<text x="305" y="290" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#1976d2">Clean Water</text>
|
||||
<text x="305" y="305" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#1976d2">(Reusable)</text>
|
||||
|
||||
<text x="495" y="290" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#212121">Dirty Water</text>
|
||||
<text x="495" y="305" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#212121">(Collection for disposal)</text>
|
||||
|
||||
<!-- Wheels -->
|
||||
<circle cx="220" cy="450" r="15" fill="#666" stroke="#333" stroke-width="2"/>
|
||||
<circle cx="580" cy="450" r="15" fill="#666" stroke="#333" stroke-width="2"/>
|
||||
|
||||
<!-- Flow arrows -->
|
||||
<!-- From pump to faucet -->
|
||||
<path d="M 280 260 Q 230 100 384 55" fill="none" stroke="#2196f3" stroke-width="3" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<!-- From basin to dirty water (when tilted) -->
|
||||
<path d="M 450 150 Q 480 180 495 240" fill="none" stroke="#929292" stroke-width="3" stroke-dasharray="5,5" marker-end="url(#arrowhead-gray)"/>
|
||||
|
||||
<!-- Recirculation arrow -->
|
||||
<path d="M 300 150 Q 320 180 305 240" fill="none" stroke="#2196f3" stroke-width="3" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="6" markerHeight="8"
|
||||
refX="5" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 6 3.5, 0 7" fill="#2196f3"/>
|
||||
</marker>
|
||||
<marker id="arrowhead-orange" markerWidth="8" markerHeight="7"
|
||||
refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ff9800"/>
|
||||
</marker>
|
||||
<marker id="arrowhead-green" markerWidth="6" markerHeight="8"
|
||||
refX="5" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 6 3.5, 0 7" fill="#4caf50"/>
|
||||
</marker>
|
||||
<marker id="arrowhead-gray" markerWidth="6" markerHeight="8"
|
||||
refX="5" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 6 3.5, 0 7" fill="#929292"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="50" y="500" width="300" height="74" fill="white" stroke="#ddd" stroke-width="1" rx="8"/>
|
||||
<text x="60" y="520" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#2c3e50">Water Flow Legend:</text>
|
||||
|
||||
<line x1="60" y1="535" x2="80" y2="535" stroke="#2196f3" stroke-width="3" stroke-dasharray="5,5" />
|
||||
<text x="90" y="540" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Clean water circulation (play mode)</text>
|
||||
|
||||
<line x1="60" y1="555" x2="80" y2="555" stroke="#929292" stroke-width="3" stroke-dasharray="5,5"/>
|
||||
<text x="90" y="560" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Dirty water (when basin tilted to the right)</text>
|
||||
|
||||
<!--<line x1="60" y1="575" x2="80" y2="575" stroke="#4caf50" stroke-width="3" stroke-dasharray="5,5"/>
|
||||
<text x="90" y="580" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Water reuse </text>-->
|
||||
|
||||
<!-- Key features callouts -->
|
||||
<g>
|
||||
<!-- Callout 1 - Tiltable basin -->
|
||||
<circle cx="500" cy="110" r="3" fill="#9c27b0"/>
|
||||
<line x1="500" y1="110" x2="650" y2="55" stroke="#9c27b0" stroke-width="2"/>
|
||||
<rect x="650" y="40" width="140" height="30" fill="white" stroke="#212121" stroke-width="1" rx="4"/>
|
||||
<text x="720" y="58" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#212121">Tiltable for dual mode</text>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<!-- Callout 2 - Portable -->
|
||||
<circle cx="520" cy="480" r="3" fill="#9c27b0"/>
|
||||
<line x1="520" y1="480" x2="580" y2="450" stroke="#9c27b0" stroke-width="2"/>
|
||||
<rect x="450" y="485" width="120" height="30" fill="white" stroke="#212121" stroke-width="1" rx="4"/>
|
||||
<text x="510" y="504" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#212121">Wheels for mobility</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6 KiB |
Loading…
Add table
Add a link
Reference in a new issue