235 lines
15 KiB
HTML
235 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Схема организации связи — Косшы ↔ Астана ↔ Алматы</title>
|
||
<style>
|
||
* { margin: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
|
||
background: #0f1218;
|
||
color: #f4f4f5;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 40px 20px;
|
||
}
|
||
h1 { font-size: 26px; margin-bottom: 6px; text-align: center; }
|
||
.subtitle { color: #8a8a92; font-size: 14px; margin-bottom: 32px; text-align: center; }
|
||
.schema-wrap { width: 100%; max-width: 1200px; overflow-x: auto; }
|
||
svg { display: block; margin: 0 auto; }
|
||
.legend { margin-top: 28px; display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
|
||
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c8c8d0; }
|
||
.legend-line { width: 36px; height: 3px; border-radius: 2px; }
|
||
.legend-line.primary { background: #00b8cc; }
|
||
.legend-line.backup { background: #f59e0b; }
|
||
.legend-line.mpls { background: #a78bfa; }
|
||
.info {
|
||
margin-top: 24px; background: #171719; border: 1px solid #2a2a30;
|
||
border-radius: 12px; padding: 20px 28px; max-width: 700px; width: 100%;
|
||
}
|
||
.info h3 { font-size: 15px; margin-bottom: 12px; color: #00b8cc; }
|
||
.info table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||
.info td { padding: 5px 0; border-bottom: 1px solid #222228; }
|
||
.info td:first-child { color: #8a8a92; width: 200px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Схема организации связи</h1>
|
||
<p class="subtitle">Косшы ↔ Астана ↔ Алматы — географически разнесённые трассы ВОЛС</p>
|
||
|
||
<div class="schema-wrap">
|
||
<svg viewBox="0 0 1160 560" width="1160" height="560" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<marker id="arr-cyan" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto">
|
||
<path d="M0,0 L10,4 L0,8 L2,4 Z" fill="#00b8cc"/>
|
||
</marker>
|
||
<marker id="arr-amber" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto">
|
||
<path d="M0,0 L10,4 L0,8 L2,4 Z" fill="#f59e0b"/>
|
||
</marker>
|
||
<marker id="arr-purple" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto">
|
||
<path d="M0,0 L10,4 L0,8 L2,4 Z" fill="#a78bfa"/>
|
||
</marker>
|
||
<filter id="glow-cyan">
|
||
<feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
<filter id="glow-amber">
|
||
<feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
<filter id="glow-purple">
|
||
<feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
<linearGradient id="cloud-grad" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#a78bfa" stop-opacity="0.15"/>
|
||
<stop offset="100%" stop-color="#6d28d9" stop-opacity="0.08"/>
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
<!-- ==================== г. КОСШЫ ==================== -->
|
||
<rect x="20" y="140" width="170" height="200" rx="14" fill="#1a1a24" stroke="#2a2a30" stroke-width="1.5"/>
|
||
<text x="105" y="170" text-anchor="middle" fill="#8a8a92" font-size="11" font-weight="600" letter-spacing="1.5">г. КОСШЫ</text>
|
||
<text x="105" y="186" text-anchor="middle" fill="#5a5a62" font-size="10">ул. Республики, уч. 3</text>
|
||
<rect x="72" y="205" width="66" height="48" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||
<rect x="82" y="214" width="12" height="11" rx="2" fill="#00b8cc" opacity="0.35"/>
|
||
<rect x="98" y="214" width="12" height="11" rx="2" fill="#00b8cc" opacity="0.35"/>
|
||
<rect x="82" y="229" width="12" height="11" rx="2" fill="#00b8cc" opacity="0.35"/>
|
||
<rect x="98" y="229" width="12" height="11" rx="2" fill="#00b8cc" opacity="0.35"/>
|
||
<text x="105" y="270" text-anchor="middle" fill="#c8c8d0" font-size="11">Абонент</text>
|
||
<circle cx="190" cy="240" r="5" fill="#00b8cc" filter="url(#glow-cyan)"/>
|
||
|
||
<!-- ==================== г. АСТАНА ==================== -->
|
||
<rect x="310" y="100" width="240" height="280" rx="14" fill="#1a1a24" stroke="#2a2a30" stroke-width="1.5"/>
|
||
<text x="430" y="130" text-anchor="middle" fill="#8a8a92" font-size="11" font-weight="600" letter-spacing="1.5">г. АСТАНА</text>
|
||
|
||
<!-- asta-mx-1 (основной) -->
|
||
<rect x="330" y="150" width="100" height="64" rx="10" fill="#0a1628" stroke="#00b8cc" stroke-width="1.5"/>
|
||
<rect x="340" y="159" width="18" height="12" rx="2" fill="#00b8cc" opacity="0.3"/>
|
||
<rect x="362" y="159" width="18" height="12" rx="2" fill="#00b8cc" opacity="0.3"/>
|
||
<rect x="384" y="159" width="18" height="12" rx="2" fill="#00b8cc" opacity="0.15"/>
|
||
<circle cx="410" cy="165" r="3.5" fill="#22c55e"/>
|
||
<text x="380" y="192" text-anchor="middle" fill="#e4e4e7" font-size="12" font-weight="600">asta-mx-1</text>
|
||
<text x="380" y="206" text-anchor="middle" fill="#00b8cc" font-size="9">основной</text>
|
||
|
||
<!-- asta-mx-1-2 (резервный) -->
|
||
<rect x="440" y="240" width="100" height="64" rx="10" fill="#1a1408" stroke="#f59e0b" stroke-width="1.5"/>
|
||
<rect x="450" y="249" width="18" height="12" rx="2" fill="#f59e0b" opacity="0.3"/>
|
||
<rect x="472" y="249" width="18" height="12" rx="2" fill="#f59e0b" opacity="0.3"/>
|
||
<rect x="494" y="249" width="18" height="12" rx="2" fill="#f59e0b" opacity="0.15"/>
|
||
<circle cx="520" cy="255" r="3.5" fill="#22c55e"/>
|
||
<text x="490" y="282" text-anchor="middle" fill="#e4e4e7" font-size="12" font-weight="600">asta-mx-1-2</text>
|
||
<text x="490" y="296" text-anchor="middle" fill="#f59e0b" font-size="9">резервный</text>
|
||
|
||
<!-- sync между устройствами Астаны -->
|
||
<line x1="430" y1="214" x2="470" y2="240" stroke="#3a3a44" stroke-width="1.2" stroke-dasharray="4 3"/>
|
||
<text x="455" y="224" text-anchor="middle" fill="#5a5a62" font-size="8">sync</text>
|
||
|
||
<!-- Порт вправо из asta-mx-1 (к облаку) -->
|
||
<circle cx="550" cy="182" r="4" fill="#a78bfa" filter="url(#glow-purple)"/>
|
||
<!-- Порт вправо из asta-mx-1-2 (к облаку) -->
|
||
<circle cx="550" cy="272" r="4" fill="#a78bfa" filter="url(#glow-purple)"/>
|
||
|
||
<!-- ==================== ОБЛАКО IP/MPLS ==================== -->
|
||
<ellipse cx="680" cy="225" rx="75" ry="90" fill="url(#cloud-grad)" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="6 3"/>
|
||
<text x="680" y="215" text-anchor="middle" fill="#a78bfa" font-size="14" font-weight="700">IP/MPLS</text>
|
||
<text x="680" y="235" text-anchor="middle" fill="#7c6bb5" font-size="10">骨干网络</text>
|
||
<!-- Маршрутизаторы внутри облака -->
|
||
<circle cx="655" cy="195" r="6" fill="#a78bfa" opacity="0.3"/>
|
||
<circle cx="705" cy="195" r="6" fill="#a78bfa" opacity="0.3"/>
|
||
<circle cx="680" cy="255" r="6" fill="#a78bfa" opacity="0.3"/>
|
||
<line x1="655" y1="195" x2="705" y2="195" stroke="#a78bfa" stroke-width="0.8" opacity="0.4"/>
|
||
<line x1="655" y1="195" x2="680" y2="255" stroke="#a78bfa" stroke-width="0.8" opacity="0.4"/>
|
||
<line x1="705" y1="195" x2="680" y2="255" stroke="#a78bfa" stroke-width="0.8" opacity="0.4"/>
|
||
|
||
<!-- Трассы Астана → облако (основной — верх) -->
|
||
<path d="M 554,182 C 590,175 630,170 650,185" stroke="#00b8cc" stroke-width="2.5" fill="none" marker-end="url(#arr-cyan)" filter="url(#glow-cyan)"/>
|
||
<!-- Трассы Астана → облако (резерв — низ) -->
|
||
<path d="M 554,272 C 590,280 630,285 650,265" stroke="#f59e0b" stroke-width="2.5" fill="none" stroke-dasharray="7 4" marker-end="url(#arr-amber)" filter="url(#glow-amber)"/>
|
||
|
||
<!-- Трассы облако → Алматы (основной — верх) -->
|
||
<path d="M 730,185 C 755,170 780,175 800,182" stroke="#00b8cc" stroke-width="2.5" fill="none" marker-end="url(#arr-cyan)" filter="url(#glow-cyan)"/>
|
||
<!-- Трассы облако → Алматы (резерв — низ) -->
|
||
<path d="M 730,265 C 755,280 780,275 800,272" stroke="#f59e0b" stroke-width="2.5" fill="none" stroke-dasharray="7 4" marker-end="url(#arr-amber)" filter="url(#glow-amber)"/>
|
||
|
||
<!-- Подпись трасс Астана↔Алматы -->
|
||
<text x="680" y="155" text-anchor="middle" fill="#00b8cc" font-size="10" font-weight="600">3 Гбит/с</text>
|
||
<text x="680" y="300" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="600">2 Гбит/с</text>
|
||
|
||
<!-- ==================== г. АЛМАТЫ ==================== -->
|
||
<rect x="800" y="100" width="240" height="280" rx="14" fill="#1a1a24" stroke="#2a2a30" stroke-width="1.5"/>
|
||
<text x="920" y="130" text-anchor="middle" fill="#8a8a92" font-size="11" font-weight="600" letter-spacing="1.5">г. АЛМАТЫ</text>
|
||
|
||
<!-- alma-mx-1 (основной) -->
|
||
<rect x="820" y="150" width="100" height="64" rx="10" fill="#0a1628" stroke="#00b8cc" stroke-width="1.5"/>
|
||
<rect x="830" y="159" width="18" height="12" rx="2" fill="#00b8cc" opacity="0.3"/>
|
||
<rect x="852" y="159" width="18" height="12" rx="2" fill="#00b8cc" opacity="0.3"/>
|
||
<rect x="874" y="159" width="18" height="12" rx="2" fill="#00b8cc" opacity="0.15"/>
|
||
<circle cx="900" cy="165" r="3.5" fill="#22c55e"/>
|
||
<text x="870" y="192" text-anchor="middle" fill="#e4e4e7" font-size="12" font-weight="600">alma-mx-1</text>
|
||
<text x="870" y="206" text-anchor="middle" fill="#00b8cc" font-size="9">основной</text>
|
||
|
||
<!-- alma-mx-6 (резервный) -->
|
||
<rect x="930" y="240" width="100" height="64" rx="10" fill="#1a1408" stroke="#f59e0b" stroke-width="1.5"/>
|
||
<rect x="940" y="249" width="18" height="12" rx="2" fill="#f59e0b" opacity="0.3"/>
|
||
<rect x="962" y="249" width="18" height="12" rx="2" fill="#f59e0b" opacity="0.3"/>
|
||
<rect x="984" y="249" width="18" height="12" rx="2" fill="#f59e0b" opacity="0.15"/>
|
||
<circle cx="1010" cy="255" r="3.5" fill="#22c55e"/>
|
||
<text x="980" y="282" text-anchor="middle" fill="#e4e4e7" font-size="12" font-weight="600">alma-mx-6</text>
|
||
<text x="980" y="296" text-anchor="middle" fill="#f59e0b" font-size="9">резервный</text>
|
||
|
||
<!-- sync между устройствами Алматы -->
|
||
<line x1="920" y1="214" x2="960" y2="240" stroke="#3a3a44" stroke-width="1.2" stroke-dasharray="4 3"/>
|
||
<text x="945" y="224" text-anchor="middle" fill="#5a5a62" font-size="8">sync</text>
|
||
|
||
<!-- Порты вниз от устройств Алматы -->
|
||
<circle cx="870" cy="314" r="4" fill="#00b8cc" filter="url(#glow-cyan)"/>
|
||
<circle cx="980" cy="304" r="4" fill="#f59e0b" filter="url(#glow-amber)"/>
|
||
|
||
<!-- ==================== Абонент Алматы ==================== -->
|
||
<rect x="870" y="390" width="160" height="55" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||
<text x="950" y="413" text-anchor="middle" fill="#c8c8d0" font-size="11" font-weight="600">мкр. Коктем-3, д. 21</text>
|
||
<text x="950" y="430" text-anchor="middle" fill="#5a5a62" font-size="10">г. Алматы</text>
|
||
<circle cx="950" cy="390" r="4" fill="#22c55e"/>
|
||
|
||
<!-- Трассы alma-mx → абонент (основной) -->
|
||
<path d="M 870,318 C 870,350 900,375 920,390" stroke="#00b8cc" stroke-width="2.5" fill="none" marker-end="url(#arr-cyan)" filter="url(#glow-cyan)"/>
|
||
<!-- Трассы alma-mx-6 → абонент (резерв) -->
|
||
<path d="M 980,308 C 985,345 975,370 970,390" stroke="#f59e0b" stroke-width="2.5" fill="none" stroke-dasharray="7 4" marker-end="url(#arr-amber)" filter="url(#glow-amber)"/>
|
||
|
||
<!-- Подписи скоростей к абоненту Алматы -->
|
||
<text x="885" y="360" fill="#00b8cc" font-size="9" font-weight="600">3 Гбит/с</text>
|
||
<text x="985" y="355" fill="#f59e0b" font-size="9" font-weight="600">2 Гбит/с</text>
|
||
|
||
<!-- Подпись «Разнесённые трассы ВОЛС» у Алматы -->
|
||
<text x="950" y="370" text-anchor="middle" fill="#5a5a62" font-size="9" font-style="italic">разнесённые трассы ВОЛС</text>
|
||
|
||
<!-- ==================== Трассы Косшы → Астана ==================== -->
|
||
<!-- Основной (верх) -->
|
||
<path d="M 195,230 C 230,170 270,155 330,170" stroke="#00b8cc" stroke-width="2.5" fill="none" marker-end="url(#arr-cyan)" filter="url(#glow-cyan)"/>
|
||
<!-- Резерв (низ) -->
|
||
<path d="M 195,250 C 230,310 270,320 330,305" stroke="#f59e0b" stroke-width="2.5" fill="none" stroke-dasharray="7 4" marker-end="url(#arr-amber)" filter="url(#glow-amber)"/>
|
||
|
||
<!-- Подписи трасс Косшы→Астана -->
|
||
<text x="260" y="162" text-anchor="middle" fill="#00b8cc" font-size="10" font-weight="600">3 Гбит/с</text>
|
||
<text x="260" y="325" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="600">2 Гбит/с</text>
|
||
<text x="260" y="248" text-anchor="middle" fill="#5a5a62" font-size="9" font-style="italic">ВОЛС</text>
|
||
|
||
<!-- ==================== Статус-бар ==================== -->
|
||
<circle cx="20" cy="540" r="4" fill="#22c55e"/>
|
||
<text x="30" y="544" fill="#8a8a92" font-size="10">Активен</text>
|
||
<circle cx="100" cy="540" r="4" fill="#f59e0b"/>
|
||
<text x="110" y="544" fill="#8a8a92" font-size="10">Резерв</text>
|
||
<circle cx="180" cy="540" r="4" fill="#a78bfa"/>
|
||
<text x="190" y="544" fill="#8a8a92" font-size="10">IP/MPLS</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item"><div class="legend-line primary"></div><span>Основной канал — 3 Гбит/с</span></div>
|
||
<div class="legend-item"><div class="legend-line backup"></div><span>Резервный канал — 2 Гбит/с</span></div>
|
||
<div class="legend-item"><div class="legend-line mpls"></div><span>Облако IP/MPLS</span></div>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<h3>Параметры каналов</h3>
|
||
<table>
|
||
<tr><td colspan="2" style="color:#00b8cc;font-weight:600;padding-top:8px">Косшы → Астана</td></tr>
|
||
<tr><td>Точка А</td><td>г. Косшы, ул. Республики, участок 3</td></tr>
|
||
<tr><td>Основной канал</td><td>3 Гбит/с → asta-mx-1</td></tr>
|
||
<tr><td>Резервный канал</td><td>2 Гбит/с → asta-mx-1-2</td></tr>
|
||
<tr><td>Трассы</td><td>Географически разнесённые ВОЛС</td></tr>
|
||
<tr><td colspan="2" style="color:#a78bfa;font-weight:600;padding-top:12px">Астана ↔ Алматы</td></tr>
|
||
<tr><td>Магистраль</td><td>IP/MPLS (облако)</td></tr>
|
||
<tr><td colspan="2" style="color:#00b8cc;font-weight:600;padding-top:12px">Алматы → абонент</td></tr>
|
||
<tr><td>Точка Б</td><td>г. Алматы, мкр. Коктем-3, д. 21</td></tr>
|
||
<tr><td>Основной канал</td><td>3 Гбит/с → alma-mx-1</td></tr>
|
||
<tr><td>Резервный канал</td><td>2 Гбит/с → alma-mx-6</td></tr>
|
||
<tr><td>Трассы</td><td>Географически разнесённые ВОЛС</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|