Add 3 inline SVGs for slides 4-6 (1/10/100 servers)
SVG1: Single server with green checkmark (slide 4)
SVG2: Laptop fan-out to 10 servers via SSH lines (slide 5)
SVG3: Chaotic grid of ~60 servers with drift indicators —
warning triangles, snowflakes, mixed status dots (slide 6)
All use OVHcloud Design System colors, sized for 1280×720 canvas.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
231
index.html
231
index.html
@@ -139,18 +139,249 @@
|
|||||||
<section>
|
<section>
|
||||||
<h2>You have a server. It works.</h2>
|
<h2>You have a server. It works.</h2>
|
||||||
<p><em>Great.</em></p>
|
<p><em>Great.</em></p>
|
||||||
|
<!-- SVG1 — single server, green check -->
|
||||||
|
<svg width="700" height="250" viewBox="0 0 700 250" style="margin-top:0.5em;" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Server body -->
|
||||||
|
<rect x="270" y="30" width="160" height="140" rx="12" ry="12" fill="#f0f2f8" stroke="#00185e" stroke-width="2.5"/>
|
||||||
|
<!-- Rack lines -->
|
||||||
|
<line x1="290" y1="65" x2="410" y2="65" stroke="#4d5592" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="290" y1="100" x2="410" y2="100" stroke="#4d5592" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="290" y1="135" x2="410" y2="135" stroke="#4d5592" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<!-- Drive bays / LEDs -->
|
||||||
|
<circle cx="298" cy="50" r="4" fill="#0050d7"/>
|
||||||
|
<circle cx="298" cy="85" r="4" fill="#0050d7"/>
|
||||||
|
<circle cx="298" cy="120" r="4" fill="#0050d7"/>
|
||||||
|
<!-- Power button -->
|
||||||
|
<circle cx="402" cy="155" r="5" fill="#00185e"/>
|
||||||
|
<!-- Server legs -->
|
||||||
|
<rect x="290" y="170" width="14" height="10" rx="2" fill="#666666"/>
|
||||||
|
<rect x="396" y="170" width="14" height="10" rx="2" fill="#666666"/>
|
||||||
|
<!-- Green checkmark circle -->
|
||||||
|
<circle cx="350" cy="215" r="22" fill="#2ecc71"/>
|
||||||
|
<polyline points="339,215 347,224 363,207" fill="none" stroke="#fff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ─── SLIDE 5 ──────────────────────────────────────────────────── -->
|
<!-- ─── SLIDE 5 ──────────────────────────────────────────────────── -->
|
||||||
<section>
|
<section>
|
||||||
<h2>You have 10 servers.</h2>
|
<h2>You have 10 servers.</h2>
|
||||||
<p><em>Still manageable… but every small change means 10 SSH sessions, 10 vim edits, 10 chances to make a mistake.</em></p>
|
<p><em>Still manageable… but every small change means 10 SSH sessions, 10 vim edits, 10 chances to make a mistake.</em></p>
|
||||||
|
<!-- SVG2 — laptop + 10 servers fan-out -->
|
||||||
|
<svg width="720" height="260" viewBox="0 0 720 260" style="margin-top:0.5em;" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Laptop body -->
|
||||||
|
<rect x="20" y="60" width="120" height="80" rx="8" ry="8" fill="#f0f2f8" stroke="#00185e" stroke-width="2"/>
|
||||||
|
<!-- Screen inner -->
|
||||||
|
<rect x="30" y="68" width="100" height="56" rx="3" fill="#00185e"/>
|
||||||
|
<!-- Terminal prompt on screen -->
|
||||||
|
<text x="38" y="88" font-family="monospace" font-size="10" fill="#2ecc71">$</text>
|
||||||
|
<text x="48" y="88" font-family="monospace" font-size="9" fill="#aab4d5">ssh root@…</text>
|
||||||
|
<text x="38" y="103" font-family="monospace" font-size="10" fill="#2ecc71">$</text>
|
||||||
|
<text x="48" y="103" font-family="monospace" font-size="9" fill="#aab4d5">vim /etc/…</text>
|
||||||
|
<!-- Laptop base -->
|
||||||
|
<path d="M10,140 L150,140 L140,155 L20,155 Z" fill="#d8dce8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<!-- Keyboard hinge -->
|
||||||
|
<rect x="40" y="140" width="80" height="3" rx="1" fill="#666666"/>
|
||||||
|
<!-- 10 server icons on right, 2 columns of 5 -->
|
||||||
|
<!-- Dashed lines from laptop to each server -->
|
||||||
|
<!-- Column 1 (x=460) -->
|
||||||
|
<line x1="150" y1="100" x2="460" y2="18" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<line x1="150" y1="100" x2="460" y2="66" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<line x1="150" y1="100" x2="460" y2="114" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<line x1="150" y1="100" x2="460" y2="162" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<line x1="150" y1="100" x2="460" y2="210" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<!-- Column 2 (x=590) -->
|
||||||
|
<line x1="150" y1="100" x2="590" y2="18" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<line x1="150" y1="100" x2="590" y2="66" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<line x1="150" y1="100" x2="590" y2="114" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<line x1="150" y1="100" x2="590" y2="162" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<line x1="150" y1="100" x2="590" y2="210" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
|
||||||
|
<!-- Arrow tips (small triangles) on server end -->
|
||||||
|
<polygon points="458,16 458,20 463,18" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="458,64 458,68 463,66" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="458,112 458,116 463,114" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="458,160 458,164 463,162" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="458,208 458,212 463,210" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="588,16 588,20 593,18" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="588,64 588,68 593,66" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="588,112 588,116 593,114" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="588,160 588,164 593,162" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<polygon points="588,208 588,212 593,210" fill="#0050d7" opacity="0.7"/>
|
||||||
|
<!-- Column 1 servers -->
|
||||||
|
<rect x="465" y="5" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<rect x="465" y="53" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<rect x="465" y="101" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<rect x="465" y="149" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<rect x="465" y="197" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<!-- Column 1 rack lines -->
|
||||||
|
<line x1="475" y1="18" x2="555" y2="18" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<line x1="475" y1="66" x2="555" y2="66" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<line x1="475" y1="114" x2="555" y2="114" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<line x1="475" y1="162" x2="555" y2="162" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<line x1="475" y1="210" x2="555" y2="210" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<!-- Column 1 LEDs -->
|
||||||
|
<circle cx="473" cy="12" r="2.5" fill="#0050d7"/>
|
||||||
|
<circle cx="473" cy="60" r="2.5" fill="#0050d7"/>
|
||||||
|
<circle cx="473" cy="108" r="2.5" fill="#0050d7"/>
|
||||||
|
<circle cx="473" cy="156" r="2.5" fill="#0050d7"/>
|
||||||
|
<circle cx="473" cy="204" r="2.5" fill="#0050d7"/>
|
||||||
|
<!-- Column 2 servers -->
|
||||||
|
<rect x="595" y="5" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<rect x="595" y="53" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<rect x="595" y="101" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<rect x="595" y="149" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<rect x="595" y="197" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
|
||||||
|
<!-- Column 2 rack lines -->
|
||||||
|
<line x1="605" y1="18" x2="685" y2="18" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<line x1="605" y1="66" x2="685" y2="66" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<line x1="605" y1="114" x2="685" y2="114" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<line x1="605" y1="162" x2="685" y2="162" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<line x1="605" y1="210" x2="685" y2="210" stroke="#4d5592" stroke-width="1"/>
|
||||||
|
<!-- Column 2 LEDs -->
|
||||||
|
<circle cx="603" cy="12" r="2.5" fill="#0050d7"/>
|
||||||
|
<circle cx="603" cy="60" r="2.5" fill="#0050d7"/>
|
||||||
|
<circle cx="603" cy="108" r="2.5" fill="#0050d7"/>
|
||||||
|
<circle cx="603" cy="156" r="2.5" fill="#0050d7"/>
|
||||||
|
<circle cx="603" cy="204" r="2.5" fill="#0050d7"/>
|
||||||
|
<!-- "ssh" labels floating near lines -->
|
||||||
|
<text x="260" y="65" font-family="monospace" font-size="9" fill="#0050d7" opacity="0.7" transform="rotate(-8,260,65)">ssh</text>
|
||||||
|
<text x="280" y="115" font-family="monospace" font-size="9" fill="#0050d7" opacity="0.7">ssh</text>
|
||||||
|
<text x="260" y="160" font-family="monospace" font-size="9" fill="#0050d7" opacity="0.7" transform="rotate(6,260,160)">ssh</text>
|
||||||
|
</svg>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ─── SLIDE 6 ──────────────────────────────────────────────────── -->
|
<!-- ─── SLIDE 6 ──────────────────────────────────────────────────── -->
|
||||||
<section>
|
<section>
|
||||||
<h2>Now you have 100 servers.</h2>
|
<h2>Now you have 100 servers.</h2>
|
||||||
<p><em>Some 2 years old. Some a couple of months. Some freshly provisioned.<br>None of them are exactly alike.</em></p>
|
<p><em>Some 2 years old. Some a couple of months. Some freshly provisioned.<br>None of them are exactly alike.</em></p>
|
||||||
|
<!-- SVG3 — 100-server chaos grid with drift indicators -->
|
||||||
|
<svg width="700" height="260" viewBox="0 0 700 260" style="margin-top:0.5em;" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<!-- Warning triangle symbol -->
|
||||||
|
<symbol id="warn" viewBox="0 0 16 16">
|
||||||
|
<polygon points="8,1 15,15 1,15" fill="#e00034" stroke="#fff" stroke-width="0.5"/>
|
||||||
|
<text x="8" y="13" text-anchor="middle" font-size="10" font-weight="bold" fill="#fff">!</text>
|
||||||
|
</symbol>
|
||||||
|
<!-- Snowflake symbol -->
|
||||||
|
<symbol id="snow" viewBox="0 0 16 16">
|
||||||
|
<text x="8" y="14" text-anchor="middle" font-size="14" fill="#0050d7">❄</text>
|
||||||
|
</symbol>
|
||||||
|
</defs>
|
||||||
|
<!-- Generate a 10×6 grid of servers (60 shown, suggests ~100) -->
|
||||||
|
<!-- Row 0 -->
|
||||||
|
<rect x="10" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="78" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="146" y="5" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="214" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="282" y="5" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<rect x="350" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="418" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<rect x="486" y="5" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="554" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="622" y="5" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<rect x="10" y="45" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<rect x="78" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="146" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="214" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<rect x="282" y="45" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="350" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="418" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="486" y="45" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<rect x="554" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="622" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<rect x="10" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="78" y="85" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="146" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<rect x="214" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="282" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="350" y="85" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<rect x="418" y="85" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="486" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="554" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="622" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<!-- Row 3 -->
|
||||||
|
<rect x="10" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<rect x="78" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="146" y="125" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<rect x="214" y="125" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="282" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="350" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="418" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="486" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<rect x="554" y="125" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<rect x="622" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<!-- Row 4 -->
|
||||||
|
<rect x="10" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="78" y="165" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<rect x="146" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="214" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="282" y="165" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="350" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<rect x="418" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="486" y="165" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="554" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="622" y="165" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<!-- Row 5 (partial — fades into "...more") -->
|
||||||
|
<rect x="10" y="205" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
|
||||||
|
<rect x="78" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="146" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
|
||||||
|
<rect x="214" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="282" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<rect x="350" y="205" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
|
||||||
|
<rect x="418" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
|
||||||
|
<!-- Ellipsis to suggest more -->
|
||||||
|
<text x="510" y="226" font-family="sans-serif" font-size="22" fill="#666666" letter-spacing="4">· · ·</text>
|
||||||
|
<!-- Rack lines on every server (subtle) -->
|
||||||
|
<g stroke="#4d5592" stroke-width="0.6" opacity="0.4">
|
||||||
|
<!-- Just add a mid-line to each server for texture -->
|
||||||
|
<line x1="18" y1="20" x2="60" y2="20"/> <line x1="86" y1="20" x2="128" y2="20"/>
|
||||||
|
<line x1="18" y1="60" x2="60" y2="60"/> <line x1="86" y1="60" x2="128" y2="60"/>
|
||||||
|
<line x1="18" y1="100" x2="60" y2="100"/> <line x1="86" y1="100" x2="128" y2="100"/>
|
||||||
|
<line x1="18" y1="140" x2="60" y2="140"/> <line x1="86" y1="140" x2="128" y2="140"/>
|
||||||
|
<line x1="18" y1="180" x2="60" y2="180"/> <line x1="86" y1="180" x2="128" y2="180"/>
|
||||||
|
<line x1="18" y1="220" x2="60" y2="220"/> <line x1="86" y1="220" x2="128" y2="220"/>
|
||||||
|
</g>
|
||||||
|
<!-- Warning triangles on red-tinted servers -->
|
||||||
|
<use href="#warn" x="50" y="7" width="14" height="14"/>
|
||||||
|
<use href="#warn" x="528" y="7" width="14" height="14"/>
|
||||||
|
<use href="#warn" x="324" y="47" width="14" height="14"/>
|
||||||
|
<use href="#warn" x="120" y="87" width="14" height="14"/>
|
||||||
|
<use href="#warn" x="460" y="87" width="14" height="14"/>
|
||||||
|
<use href="#warn" x="256" y="127" width="14" height="14"/>
|
||||||
|
<use href="#warn" x="324" y="167" width="14" height="14"/>
|
||||||
|
<use href="#warn" x="528" y="167" width="14" height="14"/>
|
||||||
|
<use href="#warn" x="392" y="207" width="14" height="14"/>
|
||||||
|
<!-- Snowflakes on blue-tinted servers (drift / unique configs) -->
|
||||||
|
<use href="#snow" x="324" y="6" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="664" y="6" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="52" y="46" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="528" y="46" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="392" y="86" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="188" y="126" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="596" y="126" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="120" y="166" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="664" y="166" width="14" height="14"/>
|
||||||
|
<use href="#snow" x="52" y="206" width="14" height="14"/>
|
||||||
|
<!-- Small status dots (mixed: green OK, amber, red) scattered -->
|
||||||
|
<circle cx="18" cy="12" r="2.5" fill="#2ecc71"/> <circle cx="86" cy="12" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="154" cy="12" r="2.5" fill="#e00034"/> <circle cx="222" cy="12" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="494" cy="12" r="2.5" fill="#e00034"/> <circle cx="562" cy="12" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="18" cy="52" r="2.5" fill="#f39c12"/> <circle cx="86" cy="52" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="154" cy="52" r="2.5" fill="#2ecc71"/> <circle cx="290" cy="52" r="2.5" fill="#e00034"/>
|
||||||
|
<circle cx="358" cy="52" r="2.5" fill="#2ecc71"/> <circle cx="426" cy="52" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="18" cy="92" r="2.5" fill="#2ecc71"/> <circle cx="86" cy="92" r="2.5" fill="#e00034"/>
|
||||||
|
<circle cx="222" cy="92" r="2.5" fill="#2ecc71"/> <circle cx="290" cy="92" r="2.5" fill="#f39c12"/>
|
||||||
|
<circle cx="426" cy="92" r="2.5" fill="#e00034"/> <circle cx="494" cy="92" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="18" cy="132" r="2.5" fill="#f39c12"/> <circle cx="86" cy="132" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="222" cy="132" r="2.5" fill="#e00034"/> <circle cx="290" cy="132" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="494" cy="132" r="2.5" fill="#f39c12"/>
|
||||||
|
<circle cx="18" cy="172" r="2.5" fill="#2ecc71"/> <circle cx="290" cy="172" r="2.5" fill="#e00034"/>
|
||||||
|
<circle cx="358" cy="172" r="2.5" fill="#f39c12"/> <circle cx="494" cy="172" r="2.5" fill="#e00034"/>
|
||||||
|
<circle cx="562" cy="172" r="2.5" fill="#2ecc71"/>
|
||||||
|
<circle cx="86" cy="212" r="2.5" fill="#2ecc71"/> <circle cx="222" cy="212" r="2.5" fill="#f39c12"/>
|
||||||
|
<circle cx="290" cy="212" r="2.5" fill="#2ecc71"/> <circle cx="358" cy="212" r="2.5" fill="#e00034"/>
|
||||||
|
</svg>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ─── SLIDE 7 ──────────────────────────────────────────────────── -->
|
<!-- ─── SLIDE 7 ──────────────────────────────────────────────────── -->
|
||||||
|
|||||||
Reference in New Issue
Block a user