docs: больше наглядности (схемы + скриншот)

Made-with: Cursor
2026-09-20 14:42:01 +00:00 · 2026-04-26 17:06:12 +03:00
parent bf504f4b28
commit ee031b09dd
5 changed files with 131 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@

 ![Интерфейс](docs/ui.png)

+![Схема туннеля (через VPS)](docs/tunnel-diagram.svg)
+
 ---

 ## Самое главное (чтобы было безопасно)
@@ -41,6 +43,8 @@ curl -fsSL https://raw.githubusercontent.com/andrey271192/keenetic_ssh-web/main/

 #### 2 команды “с нуля” (самый простой путь)

+![2 шага установки (VPS → роутер)](docs/steps.svg)
+
 **Команда 1 — на VPS (Ubuntu):** поставить туннель и сразу добавить роутер.

 ```sh
--- a/docs/dns-routes-test.png
+++ b/docs/dns-routes-test.png
--- a/docs/steps.svg
+++ b/docs/steps.svg
@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="520" viewBox="0 0 1200 520">
+  <defs>
+    <style>
+      .bg{fill:#0d1117}
+      .card{fill:#161b22;stroke:#30363d;stroke-width:2}
+      .txt{fill:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
+      .mut{fill:#8b949e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
+      .ttl{font-size:26px;font-weight:800}
+      .h{font-size:18px;font-weight:800}
+      .p{font-size:15px}
+      .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace}
+      .accent{fill:#1f6feb}
+      .ok{fill:#3fb950}
+      .pill{fill:#0b1220;stroke:#30363d;stroke-width:2}
+      .arrow{stroke:#3fb950;stroke-width:4;fill:none;marker-end:url(#m)}
+    </style>
+    <marker id="m" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#3fb950"/>
+    </marker>
+  </defs>
+
+  <rect class="bg" x="0" y="0" width="1200" height="520"/>
+
+  <text class="txt ttl" x="40" y="60">Установка «серый IP через VPS» — всего 2 шага</text>
+  <text class="mut p" x="40" y="92">Выполняете одну команду на VPS, получаете блок — вставляете его на роутере.</text>
+
+  <!-- Step 1 -->
+  <rect class="card" x="40" y="140" rx="16" ry="16" width="520" height="320"/>
+  <circle cx="80" cy="190" r="18" class="accent"/>
+  <text class="txt h" x="110" y="197">Шаг 1 (на VPS)</text>
+  <text class="mut p" x="70" y="235">Ставим туннель и добавляем роутер:</text>
+
+  <rect class="pill" x="70" y="255" rx="12" ry="12" width="460" height="110"/>
+  <text class="txt p mono" x="90" y="295">curl -fsSL https://raw.githubusercontent.com/</text>
+  <text class="txt p mono" x="90" y="320">andrey271192/keenetic_ssh-web/main/setup-vps.sh</text>
+  <text class="txt p mono" x="90" y="345">| sudo bash -s -- add home --dnat 777</text>
+
+  <text class="mut p" x="70" y="400">Результат: VPS печатает блок <tspan class="mono">export ...</tspan> для роутера.</text>
+
+  <!-- Step 2 -->
+  <rect class="card" x="640" y="140" rx="16" ry="16" width="520" height="320"/>
+  <circle cx="680" cy="190" r="18" class="ok"/>
+  <text class="txt h" x="710" y="197">Шаг 2 (на роутере)</text>
+  <text class="mut p" x="670" y="235">Вставляем блок, который выдал VPS:</text>
+
+  <rect class="pill" x="670" y="255" rx="12" ry="12" width="460" height="140"/>
+  <text class="txt p mono" x="690" y="295">export VPS_ENDPOINT=...</text>
+  <text class="txt p mono" x="690" y="320">export VPS_PUBKEY='...'</text>
+  <text class="txt p mono" x="690" y="345">export CLIENT_IP=10.99.0.X</text>
+  <text class="txt p mono" x="690" y="370">export DNAT_PORTS='777'</text>
+  <text class="txt p mono" x="690" y="395">curl -fsSL .../tunnel-install.sh | sh</text>
+
+  <text class="mut p" x="670" y="445">Готово: открываете <tspan class="mono">http://10.99.0.X:2001</tspan></text>
+
+  <path class="arrow" d="M 560 300 C 600 300, 610 300, 640 300"/>
+</svg>
--- a/docs/tunnel-diagram.svg
+++ b/docs/tunnel-diagram.svg
@@ -0,0 +1,69 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="520" viewBox="0 0 1200 520">
+  <defs>
+    <style>
+      .bg{fill:#0d1117}
+      .card{fill:#161b22;stroke:#30363d;stroke-width:2}
+      .txt{fill:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
+      .mut{fill:#8b949e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
+      .ttl{font-size:26px;font-weight:800}
+      .h{font-size:18px;font-weight:700}
+      .p{font-size:15px}
+      .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace}
+      .accent{fill:#1f6feb}
+      .ok{fill:#3fb950}
+      .arrow{stroke:#1f6feb;stroke-width:4;fill:none;marker-end:url(#m)}
+      .arrow2{stroke:#3fb950;stroke-width:4;fill:none;marker-end:url(#m2)}
+    </style>
+    <marker id="m" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#1f6feb"/>
+    </marker>
+    <marker id="m2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#3fb950"/>
+    </marker>
+  </defs>
+
+  <rect class="bg" x="0" y="0" width="1200" height="520"/>
+
+  <text class="txt ttl" x="40" y="60">Схема работы (серый IP → доступ через VPS)</text>
+  <text class="mut p" x="40" y="92">Роутер сам подключается к VPS по WireGuard, и VPS видит роутер как «локальный» IP 10.99.0.X.</text>
+
+  <!-- PC -->
+  <rect class="card" x="40" y="150" rx="16" ry="16" width="320" height="260"/>
+  <text class="txt h" x="70" y="195">Ваш ПК / телефон</text>
+  <text class="mut p" x="70" y="225">Открываете панель:</text>
+  <text class="txt p mono" x="70" y="255">http://10.99.0.X:2001</text>
+  <text class="mut p" x="70" y="290">(если туннель включён)</text>
+  <text class="mut p" x="70" y="335">Или дома в LAN:</text>
+  <text class="txt p mono" x="70" y="365">http://192.168.88.1:2001</text>
+
+  <!-- VPS -->
+  <rect class="card" x="440" y="150" rx="16" ry="16" width="320" height="260"/>
+  <text class="txt h" x="470" y="195">VPS (белый IP)</text>
+  <text class="mut p" x="470" y="225">WireGuard сервер:</text>
+  <text class="txt p mono" x="470" y="255">wg0 10.99.0.1</text>
+  <text class="mut p" x="470" y="295">Порт:</text>
+  <text class="txt p mono" x="520" y="295">UDP 51820</text>
+  <text class="mut p" x="470" y="335">Проверка:</text>
+  <text class="txt p mono" x="470" y="365">ping 10.99.0.X</text>
+
+  <!-- Router -->
+  <rect class="card" x="840" y="150" rx="16" ry="16" width="320" height="260"/>
+  <text class="txt h" x="870" y="195">Роутер Keenetic (Entware)</text>
+  <text class="mut p" x="870" y="225">WireGuard клиент:</text>
+  <text class="txt p mono" x="870" y="255">wg0 10.99.0.X</text>
+
+  <rect x="870" y="285" rx="12" ry="12" width="260" height="44" fill="#0b1220" stroke="#30363d" stroke-width="2"/>
+  <circle cx="892" cy="307" r="8" class="ok"/>
+  <text class="txt p" x="910" y="312">keenetic_ssh-web :2001</text>
+
+  <rect x="870" y="342" rx="12" ry="12" width="260" height="44" fill="#0b1220" stroke="#30363d" stroke-width="2"/>
+  <circle cx="892" cy="364" r="8" class="accent"/>
+  <text class="txt p" x="910" y="369">SSH :22</text>
+
+  <!-- Arrows -->
+  <path class="arrow" d="M 360 280 C 400 280, 410 280, 440 280"/>
+  <path class="arrow2" d="M 760 280 C 800 280, 810 280, 840 280"/>
+
+  <text class="mut p" x="505" y="140">WireGuard туннель</text>
+  <text class="mut p mono" x="515" y="118">10.99.0.0/24</text>
+</svg>
--- a/tunnel/README.md
+++ b/tunnel/README.md
@@ -9,6 +9,8 @@
                                                            …и т. д.
 ```

+![Схема (коротко)](../docs/tunnel-diagram.svg)
+
 UDP `51820`, подсеть `10.99.0.0/24`. Параметры можно поменять через ENV.

 ---