Обновить bundled install_server.sh с официального get.hy2.sh

Синхронизация локальной копии после проверки SHA256.
Добавить make index: пересборка output/index.html из локальных экспортов
2026-07-23 09:02:06 +03:00 · 2026-07-23 08:56:04 +03:00 · 2026-07-23 08:46:17 +03:00 · 2026-07-23 08:32:08 +03:00 · 2026-07-01 14:06:46 +03:00 · 2026-07-01 13:37:53 +03:00
9 changed files with 269 additions and 1372 deletions
@@ -99,7 +99,7 @@ update: check ## Обновить бинарник, перекатить кон
 export: check ## Только перевыпустить URL и QR (без изменений на сервере)
 	$(ANSIBLE) playbook.yml --tags export $(ANSIBLE_OPTS)

-index: check ## Пересобрать HTML серверов + output/index.html и открыть в браузере
+index: check ## Пересобрать output/index.html из локальных server-info.yml и открыть в браузере
 	$(ANSIBLE) playbook-index.yml $(VAULT_ARGS) \
 		$(if $(EXTRA_VARS),--extra-vars "$(EXTRA_VARS)",)

@@ -8,20 +8,6 @@ Ansible-роль для установки [Hysteria 2](https://v2.hysteria.netw

 ---

-## Последние обновления
-
-### 2026-07-23
-
- **`make status`** — краткий статус по хостам (active / not installed, PID, RAM), без длинных логов journal.
- **`make index`** — пересборка HTML всех серверов и общего `output/index.html` из локальных `server-info.yml` (без SSH), открытие в браузере.
- **Каталог `output/index.html`** — вкладки «Статистика» (по умолчанию) и серверы (`vps-db`, `vps-kz`, …): IP, доступность TCP, пользователи, матрица присутствия.
- **Страницы серверов** — сетка карточек и визуальный стиль как у главной; ссылка «← Общий каталог».
- **Lightbox QR** — крупный просмотр на высоту экрана, кнопка скачивания `<сервер>-<пользователь>.png`.
- **Скачивание файлов** — ссылки `.url` / `.txt` / `.png` / `.qr.txt` принудительно скачивают файл как `<сервер>-<пользователь>.ext`, а не открывают его во вкладке браузера.
- **`make install` / `make update` / `make export`** — в конце тот же pipeline HTML, что и у `make index`.
-
---
-
 ## Выбор ветки: `main` или `salamander`

 | | **`main`** | **`salamander` (эта ветка)** |
@@ -86,7 +72,7 @@ make install    # → output/index.html откроется в браузере
 | `make install` | Установка Salamander + экспорт URL/QR/HTML |
 | `make update` | Обновить бинарник и конфиг; экспорт только для новых/изменённых пользователей |
 | `make export` | Только экспорт (URL, QR, HTML) без изменений на сервере |
-| `make index` | Пересобрать HTML всех серверов + общий `output/index.html` и открыть в браузере |
+| `make index` | Пересобрать `output/index.html` из локальных `server-info.yml` и открыть в браузере |
 | `make uninstall` | Полное удаление с VPS + `output/<server>/` + пересборка `output/index.html` |
 | `make vault-init` | Создать `.vault_pass`, включить `vault_password_file` в `ansible.cfg` |
 | `make vault-encrypt` | Зашифровать `vault.yml` |
@@ -1,11 +1,11 @@
 ---
- name: Rebuild HTML catalogs from local exports
+- name: Rebuild global output index from local exports
  hosts: localhost
  connection: local
  gather_facts: true
  become: false
  tasks:
-    - name: Regenerate server pages and global index.html
+    - name: Generate output/index.html and open in browser
      ansible.builtin.include_role:
        name: hysteria2
-        tasks_from: export_rebuild_local.yml
+        tasks_from: export_global.yml
@@ -5,14 +5,14 @@
  roles:
    - hysteria2

- name: Build HTML catalogs from local exports
+- name: Build global output index
  hosts: localhost
  connection: local
  gather_facts: true
  become: false
  tags: [install, update, export]
  tasks:
-    - name: Regenerate server pages and global index.html
+    - name: Generate global index.html and open in browser
      ansible.builtin.include_role:
        name: hysteria2
-        tasks_from: export_rebuild_local.yml
+        tasks_from: export_global.yml
@@ -46,7 +46,6 @@
      mode: salamander
      domain: {{ hysteria2_domain }}
      port: {{ hysteria2_listen_port }}
-      host_ip: "{{ ansible_host | default('') }}"
      obfs_password: "{{ hysteria2_obfs_password }}"
      users:
      {% for user in hysteria2_export_users %}
@@ -29,17 +29,11 @@
  when: not item.skipped | default(false)
  vars:
    _info: "{{ item.content | b64decode | from_yaml }}"
-    _server_name: "{{ _info.server }}"
    _entry:
-      name: "{{ _server_name }}"
+      name: "{{ _info.server }}"
      domain: "{{ _info.domain }}"
      port: "{{ _info.port }}"
      mode: "{{ _info.mode | default('salamander') }}"
-      host_ip: >-
-        {{
-          _info.host_ip
-          | default(hostvars[_server_name].ansible_host | default(''), true)
-        }}
      obfs_password: "{{ _info.obfs_password | default('') }}"
      dir: "{{ item.item.path | dirname | basename }}"
      users: "{{ _info.users }}"
@@ -51,64 +45,6 @@
  when: hysteria2_global_servers | default([]) | length > 0
  become: false

- name: Probe TCP reachability of exported servers
-  ansible.builtin.wait_for:
-    host: "{{ item.host_ip if (item.host_ip | default('') | length > 0) else item.domain }}"
-    port: "{{ item.port | int }}"
-    timeout: 3
-    state: started
-  loop: "{{ hysteria2_global_servers | default([]) }}"
-  loop_control:
-    label: "{{ item.name }}"
-  register: _hysteria2_probe
-  failed_when: false
-  changed_when: false
-  become: false
-  when: hysteria2_global_servers | default([]) | length > 0
-
- name: Merge probe result for each server
-  ansible.builtin.set_fact:
-    hysteria2_global_servers_enriched: >-
-      {{
-        (hysteria2_global_servers_enriched | default([]))
-        + [
-          hysteria2_global_servers[item] | combine({
-            'reachable': not ((_hysteria2_probe.results | default([]))[item].failed | default(true)),
-            'probe_seconds': (_hysteria2_probe.results | default([]))[item].elapsed | default(none)
-          })
-        ]
-      }}
-  loop: "{{ range(0, hysteria2_global_servers | length) | list }}"
-  when: hysteria2_global_servers | default([]) | length > 0
-  become: false
-
- name: Replace servers list with enriched data
-  ansible.builtin.set_fact:
-    hysteria2_global_servers: "{{ hysteria2_global_servers_enriched }}"
-  when: hysteria2_global_servers_enriched is defined
-  become: false
-
- name: Compute unique users across servers
-  ansible.builtin.set_fact:
-    hysteria2_unique_users: >-
-      {{
-        hysteria2_global_servers
-        | map(attribute='users')
-        | map('map', attribute='name')
-        | flatten
-        | unique
-        | sort
-      }}
-    hysteria2_reachable_count: >-
-      {{
-        hysteria2_global_servers
-        | selectattr('reachable')
-        | list
-        | length
-      }}
-  when: hysteria2_global_servers | default([]) | length > 0
-  become: false
-
 - name: Generate global HTML index
  ansible.builtin.template:
    src: export/global-index.html.j2
@@ -117,8 +53,6 @@
  vars:
    generated_at: "{{ now(utc=false, fmt='%Y-%m-%d %H:%M:%S') }}"
    total_users: "{{ hysteria2_global_servers | map(attribute='users') | map('length') | sum }}"
-    unique_users: "{{ hysteria2_unique_users | default([]) }}"
-    reachable_count: "{{ hysteria2_reachable_count | default(0) }}"
  when: hysteria2_global_servers | default([]) | length > 0
  become: false

@@ -1,41 +0,0 @@
---
-# Пересборка HTML-страниц серверов и общего index из локальных server-info.yml (без SSH)
- name: Find server-info.yml in output directories
-  ansible.builtin.find:
-    paths: "{{ hysteria2_output_dir }}"
-    patterns: server-info.yml
-    recurse: true
-  register: _hysteria2_local_server_info_files
-  become: false
-
- name: Load local server-info.yml files
-  ansible.builtin.slurp:
-    src: "{{ item.path }}"
-  loop: "{{ _hysteria2_local_server_info_files.files | default([]) }}"
-  register: _hysteria2_local_server_info_raw
-  when: _hysteria2_local_server_info_files.matched | default(0) | int > 0
-  become: false
-
- name: Rebuild per-server index.html from local export data
-  ansible.builtin.template:
-    src: export/index.html.j2
-    dest: "{{ _server_dir }}/index.html"
-    mode: "0644"
-  loop: "{{ _hysteria2_local_server_info_raw.results | default([]) }}"
-  when: not item.skipped | default(false)
-  loop_control:
-    label: "{{ _info.server | default('unknown') }}"
-  vars:
-    _info: "{{ item.content | b64decode | from_yaml }}"
-    _server_dir: "{{ item.item.path | dirname }}"
-    hysteria2_output_name: "{{ _info.server }}"
-    hysteria2_domain: "{{ _info.domain }}"
-    hysteria2_listen_port: "{{ _info.port }}"
-    hysteria2_export_users: "{{ _info.users }}"
-    hysteria2_obfs_password: "{{ _info.obfs_password | default('') }}"
-    hysteria2_mode: "{{ _info.mode | default('') }}"
-    generated_at: "{{ now(utc=false, fmt='%Y-%m-%d %H:%M:%S') }}"
-  become: false
-
- name: Rebuild global output index
-  ansible.builtin.import_tasks: export_global.yml
@@ -15,14 +15,11 @@
      --text: #e6edf3;
      --muted: #8b949e;
      --accent: #58a6ff;
-      --accent-2: #3fb950;
+      --accent-2: #a371f7;
      --accent-soft: rgba(88, 166, 255, 0.12);
+      --accent-soft-2: rgba(163, 113, 247, 0.12);
      --success: #3fb950;
      --success-soft: rgba(63, 185, 80, 0.15);
-      --danger: #f85149;
-      --danger-soft: rgba(248, 81, 73, 0.15);
-      --warn: #d29922;
-      --warn-soft: rgba(210, 153, 34, 0.15);
      --radius: 14px;
      --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    }
@@ -36,241 +33,96 @@
        --text: #1f2328;
        --muted: #656d76;
        --accent: #0969da;
-        --accent-2: #1a7f37;
+        --accent-2: #8250df;
        --accent-soft: rgba(9, 105, 218, 0.08);
+        --accent-soft-2: rgba(130, 80, 223, 0.08);
        --success: #1a7f37;
        --success-soft: rgba(26, 127, 55, 0.1);
-        --danger: #cf222e;
-        --danger-soft: rgba(207, 34, 46, 0.1);
-        --warn: #9a6700;
-        --warn-soft: rgba(154, 103, 0, 0.1);
        --shadow: 0 10px 30px rgba(31, 35, 40, 0.08);
      }
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
-      font-family: "Segoe UI", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
-      background:
-        radial-gradient(ellipse 80% 50% at 20% -10%, var(--accent-soft), transparent),
-        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(63, 185, 80, 0.08), transparent),
-        var(--bg);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      min-height: 100vh;
    }
    .hero {
-      padding: 2rem 1.5rem 1.25rem;
+      background:
+        radial-gradient(ellipse 80% 60% at 50% -10%, var(--accent-soft), transparent),
+        radial-gradient(ellipse 60% 40% at 90% 10%, var(--accent-soft-2), transparent),
+        var(--bg-soft);
+      border-bottom: 1px solid var(--border);
+      padding: 2.5rem 1.5rem 2rem;
      text-align: center;
    }
    .hero h1 {
      font-size: clamp(1.75rem, 4vw, 2.25rem);
      font-weight: 800;
      letter-spacing: -0.03em;
-      margin-bottom: 0.35rem;
-      color: var(--accent);
+      margin-bottom: 0.5rem;
+      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
    }
    .hero p { color: var(--muted); font-size: 0.95rem; }
-    .tabs {
+    .stats {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      flex-wrap: wrap;
+      margin-top: 1.25rem;
+    }
+    .stat {
+      padding: 0.5rem 1rem;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: var(--bg-card);
+      font-size: 0.85rem;
+      font-weight: 600;
+    }
+    .stat span { color: var(--accent); }
+    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
-      gap: 0.45rem;
+      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: center;
-      padding: 0.75rem 1rem;
-      background: color-mix(in srgb, var(--bg-soft) 90%, transparent);
-      backdrop-filter: blur(12px);
+      padding: 0.85rem 1rem;
+      background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
+      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
-    .tab {
-      appearance: none;
+    .nav a {
+      padding: 0.4rem 0.85rem;
+      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text);
-      padding: 0.5rem 0.95rem;
-      border-radius: 999px;
-      font-size: 0.85rem;
-      font-weight: 650;
-      cursor: pointer;
-      transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
+      text-decoration: none;
+      font-size: 0.82rem;
+      font-weight: 600;
+      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
-    .tab:hover {
+    .nav a:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-soft);
    }
-    .tab.active {
-      border-color: var(--accent);
-      background: var(--accent-soft);
-      color: var(--accent);
-      box-shadow: 0 0 0 3px var(--accent-soft);
-    }
-    .tab .dot {
-      display: inline-block;
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      margin-right: 0.35rem;
-      vertical-align: middle;
-      background: var(--muted);
-    }
-    .tab .dot.up { background: var(--success); box-shadow: 0 0 8px var(--success); }
-    .tab .dot.down { background: var(--danger); }
    .container {
-      max-width: 1080px;
+      max-width: 980px;
      margin: 0 auto;
      padding: 1.5rem 1rem 3rem;
    }
-    .tab-panel { display: none; animation: fadeIn 0.2s ease; }
-    .tab-panel.active { display: block; }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(6px); }
-      to { opacity: 1; transform: translateY(0); }
+    .server-section {
+      scroll-margin-top: 4.5rem;
+      margin-bottom: 2.5rem;
    }
-    .metrics {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-      gap: 0.85rem;
-      margin-bottom: 1.5rem;
-    }
-    .metric {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 1.1rem 1.2rem;
-      box-shadow: var(--shadow);
-    }
-    .metric .label {
-      font-size: 0.72rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      color: var(--muted);
-      margin-bottom: 0.35rem;
-    }
-    .metric .value {
-      font-size: 1.75rem;
-      font-weight: 800;
-      letter-spacing: -0.03em;
-      color: var(--accent);
-    }
-    .metric .sub {
-      margin-top: 0.2rem;
-      font-size: 0.78rem;
-      color: var(--muted);
-    }
-    .section-title {
-      font-size: 1.05rem;
-      font-weight: 700;
-      margin: 0 0 0.85rem;
-    }
-    .server-stats {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 1rem;
-      margin-bottom: 1.75rem;
-    }
-    .server-stat-card {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 1.15rem 1.25rem;
-      box-shadow: var(--shadow);
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-    .server-stat-card header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      gap: 0.75rem;
-    }
-    .server-stat-card h3 {
-      font-size: 1.1rem;
-      font-weight: 750;
-    }
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.35rem;
-      padding: 0.25rem 0.65rem;
-      border-radius: 999px;
-      font-size: 0.72rem;
-      font-weight: 700;
-      white-space: nowrap;
-    }
-    .badge.up {
-      background: var(--success-soft);
-      color: var(--success);
-      border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
-    }
-    .badge.down {
-      background: var(--danger-soft);
-      color: var(--danger);
-      border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
-    }
-    .meta-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 0.55rem 0.85rem;
-    }
-    .meta-item label {
-      display: block;
-      font-size: 0.68rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--muted);
-    }
-    .meta-item span,
-    .meta-item code {
-      font-size: 0.88rem;
-      font-weight: 600;
-      word-break: break-all;
-    }
-    .meta-item code {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      font-size: 0.8rem;
-    }
-    .matrix-wrap {
-      overflow-x: auto;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--bg-card);
-      box-shadow: var(--shadow);
-    }
-    table.matrix {
-      width: 100%;
-      border-collapse: collapse;
-      min-width: 480px;
-    }
-    table.matrix th,
-    table.matrix td {
-      padding: 0.65rem 0.85rem;
-      border-bottom: 1px solid var(--border);
-      text-align: center;
-      font-size: 0.85rem;
-    }
-    table.matrix th {
-      background: var(--bg-soft);
-      font-weight: 700;
-      position: sticky;
-      top: 0;
-    }
-    table.matrix th:first-child,
-    table.matrix td:first-child {
-      text-align: left;
-      font-weight: 650;
-      white-space: nowrap;
-    }
-    table.matrix tr:last-child td { border-bottom: none; }
-    .cell-yes {
-      color: var(--success);
-      font-weight: 800;
-    }
-    .cell-no { color: var(--muted); opacity: 0.45; }
    .server-header {
      display: flex;
      flex-wrap: wrap;
@@ -285,8 +137,15 @@
      box-shadow: var(--shadow);
      border-left: 4px solid var(--accent);
    }
-    .server-header h2 { font-size: 1.35rem; font-weight: 700; }
-    .server-header .domain { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
+    .server-header h2 {
+      font-size: 1.35rem;
+      font-weight: 700;
+    }
+    .server-header .domain {
+      color: var(--muted);
+      font-size: 0.9rem;
+      margin-top: 0.15rem;
+    }
    .server-link {
      display: inline-flex;
      align-items: center;
@@ -301,6 +160,17 @@
      font-weight: 600;
    }
    .server-link:hover { background: var(--accent-soft); border-color: var(--accent); }
+    .badge-salamander {
+      display: inline-block;
+      margin-top: 0.35rem;
+      padding: 0.2rem 0.6rem;
+      border-radius: 999px;
+      font-size: 0.72rem;
+      font-weight: 700;
+      background: var(--accent-soft-2);
+      color: var(--accent-2);
+    }
+    .server-obfs { margin-top: 0.75rem; width: 100%; }
    .users-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -377,13 +247,6 @@
      width: 160px;
      height: 160px;
      image-rendering: pixelated;
-      cursor: zoom-in;
-      border-radius: 4px;
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-    .qr-block img:hover {
-      transform: scale(1.03);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }
    .files {
      display: flex;
@@ -430,265 +293,43 @@
      z-index: 100;
    }
    .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
-    .lightbox {
-      position: fixed;
-      inset: 0;
-      z-index: 200;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1rem;
-      box-sizing: border-box;
-      background: rgba(8, 12, 18, 0.72);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      transition: opacity 0.22s ease, visibility 0.22s ease;
-    }
-    .lightbox.open {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-    .lightbox-panel {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      width: min(96vw, calc(100dvh - 2rem));
-      height: calc(100dvh - 2rem);
-      max-height: calc(100dvh - 2rem);
-      padding: 2.5rem 1rem 0.85rem;
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 18px;
-      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
-      text-align: center;
-      overflow: hidden;
-      box-sizing: border-box;
-      transform: translateY(12px) scale(0.96);
-      transition: transform 0.22s ease;
-    }
-    .lightbox.open .lightbox-panel { transform: translateY(0) scale(1); }
-    .lightbox-media {
-      flex: 1 1 auto;
-      min-height: 0;
-      width: 100%;
-      container-type: size;
-      display: grid;
-      place-items: center;
-    }
-    .lightbox-panel img {
-      display: block;
-      width: min(100cqi, 100cqb);
-      height: min(100cqi, 100cqb);
-      max-width: 100%;
-      max-height: 100%;
-      aspect-ratio: 1;
-      object-fit: contain;
-      background: #fff;
-      border-radius: 12px;
-      padding: 0.75rem;
-      box-sizing: border-box;
-      image-rendering: pixelated;
-    }
-    .lightbox-caption {
-      flex-shrink: 0;
-      margin-top: 0.55rem;
-      font-size: 0.95rem;
-      font-weight: 650;
-      color: var(--text);
-    }
-    .lightbox-actions {
-      flex-shrink: 0;
-      margin-top: 0.65rem;
-      display: flex;
-      justify-content: center;
-    }
-    .lightbox-download {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.45rem;
-      padding: 0.55rem 1rem;
-      border-radius: 999px;
-      border: 1px solid var(--border);
-      background: var(--bg-input);
-      color: var(--accent);
-      text-decoration: none;
-      font: inherit;
-      font-size: 0.85rem;
-      font-weight: 650;
-      cursor: pointer;
-      transition: color 0.15s, border-color 0.15s, background 0.15s;
-    }
-    .lightbox-download:hover {
-      border-color: var(--accent);
-      background: var(--accent-soft);
-    }
-    .lightbox-download svg { width: 16px; height: 16px; flex-shrink: 0; }
-    .lightbox-close {
-      position: absolute;
-      top: 0.65rem;
-      right: 0.65rem;
-      width: 36px;
-      height: 36px;
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      background: var(--bg-input);
-      color: var(--muted);
-      cursor: pointer;
-      font-size: 1.25rem;
-      line-height: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: color 0.15s, border-color 0.15s, background 0.15s;
-    }
-    .lightbox-close:hover {
-      color: var(--accent);
-      border-color: var(--accent);
-      background: var(--accent-soft);
-    }
-    body.lightbox-open { overflow: hidden; }
-    .probe-note {
-      margin-top: 1rem;
-      font-size: 0.78rem;
-      color: var(--muted);
-    }
  </style>
 </head>
 <body>
  <header class="hero">
-    <h1>Hysteria2</h1>
-    <p>Каталог VPN и сводная статистика</p>
+    <h1>Hysteria2 · Salamander</h1>
+    <p>Общий каталог VPN-подключений с обфускацией Salamander</p>
+    <div class="stats">
+      <div class="stat"><span>{{ hysteria2_global_servers | length }}</span> серверов</div>
+      <div class="stat"><span>{{ total_users }}</span> пользователей</div>
+    </div>
  </header>

-  <nav class="tabs" role="tablist" aria-label="Разделы">
-    <button type="button" class="tab active" role="tab" aria-selected="true" data-tab="stats" id="tab-btn-stats">Статистика</button>
+  <nav class="nav" aria-label="Серверы">
 {% for server in hysteria2_global_servers %}
-    <button type="button" class="tab" role="tab" aria-selected="false" data-tab="server-{{ server.dir | e }}" id="tab-btn-{{ server.dir | e }}">
-      <span class="dot {{ 'up' if server.reachable | default(false) else 'down' }}" aria-hidden="true"></span>{{ server.name | e }}
-    </button>
+    <a href="#server-{{ server.dir | e }}">{{ server.name | e }}</a>
 {% endfor %}
  </nav>

  <main class="container">
-    <section class="tab-panel active" id="tab-stats" role="tabpanel" aria-labelledby="tab-btn-stats">
-      <div class="metrics">
-        <div class="metric">
-          <div class="label">Серверы</div>
-          <div class="value">{{ hysteria2_global_servers | length }}</div>
-          <div class="sub">в локальном экспорте</div>
-        </div>
-        <div class="metric">
-          <div class="label">Доступность</div>
-          <div class="value">{{ reachable_count }}/{{ hysteria2_global_servers | length }}</div>
-          <div class="sub">TCP :порт отвечает</div>
-        </div>
-        <div class="metric">
-          <div class="label">Учётки</div>
-          <div class="value">{{ total_users }}</div>
-          <div class="sub">сумма по серверам</div>
-        </div>
-        <div class="metric">
-          <div class="label">Уникальные</div>
-          <div class="value">{{ unique_users | length }}</div>
-          <div class="sub">разных пользователей</div>
-        </div>
-      </div>
-
-      <h2 class="section-title">Серверы</h2>
-      <div class="server-stats">
 {% for server in hysteria2_global_servers %}
-        <article class="server-stat-card">
-          <header>
-            <div>
-              <h3>{{ server.name | e }}</h3>
-            </div>
-{% if server.reachable | default(false) %}
-            <span class="badge up">● online</span>
-{% else %}
-            <span class="badge down">● offline</span>
-{% endif %}
-          </header>
-          <div class="meta-grid">
-            <div class="meta-item">
-              <label>Домен</label>
-              <span>{{ server.domain | e }}</span>
-            </div>
-            <div class="meta-item">
-              <label>Порт</label>
-              <span>{{ server.port }}</span>
-            </div>
-            <div class="meta-item">
-              <label>IP</label>
-              <code>{{ server.host_ip | default('—') | e }}</code>
-            </div>
-            <div class="meta-item">
-              <label>Режим</label>
-              <span>{{ server.mode | default('masquerade') | e }}</span>
-            </div>
-            <div class="meta-item">
-              <label>Пользователи</label>
-              <span>{{ server.users | length }}</span>
-            </div>
-            <div class="meta-item">
-              <label>QR-коды</label>
-              <span>{{ server.users | selectattr('has_png') | list | length }}</span>
-            </div>
-          </div>
-          <div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.25rem;">
-            <button type="button" class="tab" data-tab="server-{{ server.dir | e }}" style="margin:0;">Открыть вкладку</button>
-            <a class="server-link" href="{{ server.dir | e }}/index.html">Страница сервера →</a>
-          </div>
-        </article>
-{% endfor %}
-      </div>
-
-      <h2 class="section-title">Пользователи × серверы</h2>
-      <div class="matrix-wrap">
-        <table class="matrix">
-          <thead>
-            <tr>
-              <th>Пользователь</th>
-{% for server in hysteria2_global_servers %}
-              <th>{{ server.name | e }}</th>
-{% endfor %}
-            </tr>
-          </thead>
-          <tbody>
-{% for uname in unique_users %}
-            <tr>
-              <td>{{ uname | e }}</td>
-{% for server in hysteria2_global_servers %}
-{% set names = server.users | map(attribute='name') | list %}
-              <td class="{{ 'cell-yes' if uname in names else 'cell-no' }}">{{ '✓' if uname in names else '—' }}</td>
-{% endfor %}
-            </tr>
-{% endfor %}
-          </tbody>
-        </table>
-      </div>
-      <p class="probe-note">Доступность проверена с control node при генерации ({{ generated_at | default('') }}): TCP connect к IP/домену и порту Hysteria.</p>
-    </section>
-
-{% for server in hysteria2_global_servers %}
-    <section class="tab-panel" id="tab-server-{{ server.dir | e }}" role="tabpanel" aria-labelledby="tab-btn-{{ server.dir | e }}" hidden>
+    <section class="server-section" id="server-{{ server.dir | e }}">
      <div class="server-header">
        <div>
          <h2>{{ server.name | e }}</h2>
-          <p class="domain">
-            {{ server.domain | e }}:{{ server.port }}
-{% if server.host_ip | default('') | length > 0 %}
-            · <code>{{ server.host_ip | e }}</code>
+          <p class="domain">{{ server.domain | e }}:{{ server.port }}</p>
+          <span class="badge-salamander">Salamander</span>
+{% if server.obfs_password | default('') | length > 0 %}
+          <div class="field server-obfs">
+            <label for="obfs-{{ server.dir | e }}">Пароль обфускации</label>
+            <div class="input-row">
+              <input type="text" id="obfs-{{ server.dir | e }}" value="{{ server.obfs_password | e }}" readonly>
+              <button type="button" class="btn-copy" onclick="copyField('obfs-{{ server.dir | e }}', this)" title="Копировать obfs-password" aria-label="Копировать obfs-password">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+              </button>
+            </div>
+          </div>
 {% endif %}
-{% if server.reachable | default(false) %}
-            · <span style="color:var(--success);font-weight:700;">online</span>
-{% else %}
-            · <span style="color:var(--danger);font-weight:700;">offline</span>
-{% endif %}
-          </p>
        </div>
        <a class="server-link" href="{{ server.dir | e }}/index.html">Страница сервера →</a>
      </div>
@@ -718,33 +359,19 @@
            </div>
          </div>

-{% set _png = namespace(b64='', data='') %}
 {% if user.has_png | default(false) %}
-{% set _png.b64 = lookup('pipe', 'base64 < ' ~ ((hysteria2_output_dir ~ '/' ~ server.dir ~ '/' ~ user.name ~ '.png') | quote)) | regex_replace('\\s+', '') %}
-{% set _png.data = 'data:image/png;base64,' ~ _png.b64 %}
          <div class="qr-block">
-            <img
-              src="{{ _png.data }}"
-              alt="QR {{ user.name | e }}"
-              width="160"
-              height="160"
-              role="button"
-              tabindex="0"
-              data-lightbox-src="{{ _png.data }}"
-              data-lightbox-caption="{{ server.name | e }} · {{ user.name | e }}"
-              data-lightbox-download="{{ server.name | e }}-{{ user.name | e }}.png"
-              aria-label="Открыть QR-код {{ user.name | e }}"
-            >
+            <img src="{{ server.dir | e }}/{{ user.name | e }}.png" alt="QR {{ user.name | e }}" width="160" height="160">
          </div>
 {% endif %}

          <nav class="files" aria-label="Файлы">
-            <a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.url" download="{{ server.name | e }}-{{ user.name | e }}.url" data-filename="{{ server.name | e }}-{{ user.name | e }}.url" data-text="{{ (user.url ~ '\n') | e }}">.url</a>
-            <a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.txt" download="{{ server.name | e }}-{{ user.name | e }}.txt" data-filename="{{ server.name | e }}-{{ user.name | e }}.txt" data-text="{{ ('Server: ' ~ server.name ~ '\nDomain: ' ~ server.domain ~ ':' ~ server.port ~ '\nUser: ' ~ user.name ~ '\nPassword: ' ~ user.password ~ '\n\nURL:\n' ~ user.url ~ '\n') | e }}">.txt</a>
-{% if user.has_png | default(false) and _png.b64 %}
-            <a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.png" download="{{ server.name | e }}-{{ user.name | e }}.png" data-filename="{{ server.name | e }}-{{ user.name | e }}.png" data-png-b64="{{ _png.b64 }}">.png</a>
+            <a href="{{ server.dir | e }}/{{ user.name | e }}.url" download>.url</a>
+            <a href="{{ server.dir | e }}/{{ user.name | e }}.txt" download>.txt</a>
+{% if user.has_png | default(false) %}
+            <a href="{{ server.dir | e }}/{{ user.name | e }}.png" download>.png</a>
 {% endif %}
-            <a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.qr.txt" download="{{ server.name | e }}-{{ user.name | e }}.qr.txt" data-filename="{{ server.name | e }}-{{ user.name | e }}.qr.txt" data-text="{{ lookup('file', hysteria2_output_dir ~ '/' ~ server.dir ~ '/' ~ user.name ~ '.qr.txt', errors='ignore') | default('URL: ' ~ user.url ~ '\n', true) | e }}">.qr.txt</a>
+            <a href="{{ server.dir | e }}/{{ user.name | e }}.qr.txt" download>.qr.txt</a>
          </nav>
        </article>
 {% endfor %}
@@ -756,22 +383,6 @@
  <footer>Сгенерировано Ansible · {{ generated_at | default('') }}</footer>
  <div class="toast" id="toast">Скопировано!</div>

-  <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="lightbox-caption">
-    <div class="lightbox-panel" role="document">
-      <button type="button" class="lightbox-close" id="lightbox-close" aria-label="Закрыть">&times;</button>
-      <div class="lightbox-media">
-        <img id="lightbox-img" src="" alt="">
-      </div>
-      <p class="lightbox-caption" id="lightbox-caption"></p>
-      <div class="lightbox-actions">
-        <button type="button" class="lightbox-download" id="lightbox-download">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-          Скачать QR
-        </button>
-      </div>
-    </div>
-  </div>
-
  <script>
    function copyField(id, btn) {
      var el = document.getElementById(id);
@@ -796,230 +407,6 @@
      t.classList.add('show');
      setTimeout(function() { t.classList.remove('show'); }, 1800);
    }
-
-    (function () {
-      function activateTab(id) {
-        document.querySelectorAll('.tab[data-tab]').forEach(function (btn) {
-          var on = btn.getAttribute('data-tab') === id;
-          btn.classList.toggle('active', on);
-          btn.setAttribute('aria-selected', on ? 'true' : 'false');
-        });
-        document.querySelectorAll('.tab-panel').forEach(function (panel) {
-          var on = panel.id === 'tab-' + id;
-          panel.classList.toggle('active', on);
-          if (on) panel.removeAttribute('hidden');
-          else panel.setAttribute('hidden', '');
-        });
-        try { history.replaceState(null, '', '#' + id); } catch (e) {}
-      }
-
-      document.querySelectorAll('.tab[data-tab]').forEach(function (btn) {
-        btn.addEventListener('click', function () {
-          activateTab(btn.getAttribute('data-tab'));
-        });
-      });
-
-      var hash = (location.hash || '#stats').replace(/^#/, '');
-      if (!document.getElementById('tab-' + hash)) hash = 'stats';
-      activateTab(hash);
-    })();
-
-    (function () {
-      var box = document.getElementById('lightbox');
-      var img = document.getElementById('lightbox-img');
-      var caption = document.getElementById('lightbox-caption');
-      var closeBtn = document.getElementById('lightbox-close');
-      var downloadBtn = document.getElementById('lightbox-download');
-      var downloadSrc = '';
-
-      function triggerDataUrlDownload(dataUrl, filename) {
-        var a = document.createElement('a');
-        a.href = dataUrl;
-        a.download = filename;
-        a.rel = 'noopener';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-      }
-
-      function triggerFileDownload(blob, filename) {
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        a.rel = 'noopener';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        setTimeout(function () { URL.revokeObjectURL(url); }, 1500);
-      }
-
-      function downloadQrFromCanvas(filename) {
-        if (!img.complete || !img.naturalWidth) return false;
-        try {
-          var canvas = document.createElement('canvas');
-          canvas.width = img.naturalWidth;
-          canvas.height = img.naturalHeight;
-          canvas.getContext('2d').drawImage(img, 0, 0);
-          // toDataURL sync — download stays in the user-gesture (Safari/Chrome)
-          triggerDataUrlDownload(canvas.toDataURL('image/png'), filename);
-          return true;
-        } catch (err) {
-          return false;
-        }
-      }
-
-      function downloadQrImage(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var filename = downloadBtn.getAttribute('data-filename') || 'qr.png';
-        var src = downloadSrc || img.currentSrc || img.src;
-
-        // Embedded data: URLs work on file:// (no CORS / tainted canvas)
-        if (src && src.indexOf('data:') === 0) {
-          triggerDataUrlDownload(src, filename);
-          return;
-        }
-        if (downloadQrFromCanvas(filename)) return;
-        if (!src || location.protocol === 'file:') return;
-
-        fetch(src)
-          .then(function (res) {
-            if (!res.ok) throw new Error('fetch failed');
-            return res.blob();
-          })
-          .then(function (blob) { triggerFileDownload(blob, filename); })
-          .catch(function () { /* avoid navigating to the image URL */ });
-      }
-
-      function openLightbox(src, text, alt, filename) {
-        var safeName = filename || 'qr.png';
-        img.src = src;
-        img.alt = alt || text || 'QR';
-        caption.textContent = text || '';
-        downloadSrc = src;
-        downloadBtn.setAttribute('data-filename', safeName);
-        downloadBtn.setAttribute('aria-label', 'Скачать ' + safeName);
-        box.classList.add('open');
-        box.setAttribute('aria-hidden', 'false');
-        document.body.classList.add('lightbox-open');
-        closeBtn.focus();
-      }
-
-      function closeLightbox() {
-        box.classList.remove('open');
-        box.setAttribute('aria-hidden', 'true');
-        document.body.classList.remove('lightbox-open');
-        img.removeAttribute('src');
-        downloadSrc = '';
-        downloadBtn.removeAttribute('data-filename');
-      }
-
-      document.querySelectorAll('[data-lightbox-src]').forEach(function (el) {
-        function openFromEl() {
-          openLightbox(
-            el.getAttribute('data-lightbox-src'),
-            el.getAttribute('data-lightbox-caption'),
-            el.getAttribute('alt'),
-            el.getAttribute('data-lightbox-download')
-          );
-        }
-        el.addEventListener('click', openFromEl);
-        el.addEventListener('keydown', function (e) {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            openFromEl();
-          }
-        });
-      });
-
-      downloadBtn.addEventListener('click', downloadQrImage);
-      closeBtn.addEventListener('click', closeLightbox);
-      box.addEventListener('click', function (e) {
-        if (e.target === box) closeLightbox();
-      });
-      document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && box.classList.contains('open')) closeLightbox();
-      });
-    })();
-
-    (function () {
-      function triggerDataUrlDownload(dataUrl, filename) {
-        var a = document.createElement('a');
-        a.href = dataUrl;
-        a.download = filename;
-        a.rel = 'noopener';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-      }
-
-      function triggerFileDownload(blob, filename) {
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        a.rel = 'noopener';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        setTimeout(function () { URL.revokeObjectURL(url); }, 1500);
-      }
-
-      function pngFromCard(link, filename) {
-        var card = link.closest('.user-card');
-        var qrImg = card && card.querySelector('img[data-lightbox-src], .qr-block img');
-        if (!qrImg) return false;
-        var src = qrImg.currentSrc || qrImg.src || '';
-        if (src.indexOf('data:image/') === 0) {
-          triggerDataUrlDownload(src, filename);
-          return true;
-        }
-        if (!qrImg.complete || !qrImg.naturalWidth) return false;
-        try {
-          var canvas = document.createElement('canvas');
-          canvas.width = qrImg.naturalWidth;
-          canvas.height = qrImg.naturalHeight;
-          canvas.getContext('2d').drawImage(qrImg, 0, 0);
-          triggerDataUrlDownload(canvas.toDataURL('image/png'), filename);
-          return true;
-        } catch (err) {
-          return false;
-        }
-      }
-
-      document.querySelectorAll('a.file-download').forEach(function (link) {
-        link.addEventListener('click', function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          var filename = link.getAttribute('data-filename') || link.getAttribute('download') || 'download';
-          var href = link.getAttribute('href');
-          var fallbackText = link.getAttribute('data-text');
-          var pngB64 = link.getAttribute('data-png-b64');
-          var isPng = /\.png$/i.test(filename);
-
-          // Sync paths first — file:// blocks fetch (CORS) and taints canvas
-          if (pngB64) {
-            triggerDataUrlDownload('data:image/png;base64,' + pngB64, filename);
-            return;
-          }
-          if (isPng && pngFromCard(link, filename)) return;
-          if (fallbackText !== null) {
-            triggerFileDownload(new Blob([fallbackText], { type: 'text/plain;charset=utf-8' }), filename);
-            return;
-          }
-          if (!href || location.protocol === 'file:') return;
-
-          fetch(href)
-            .then(function (res) {
-              if (!res.ok) throw new Error('fetch failed');
-              return res.blob();
-            })
-            .then(function (blob) { triggerFileDownload(blob, filename); })
-            .catch(function () { /* do not navigate to the file URL */ });
-        });
-      });
-    })();
  </script>
 </body>
 </html>
@@ -7,171 +7,142 @@
  <style>
    :root {
      color-scheme: light dark;
-      --bg: #0b0f14;
-      --bg-soft: #121820;
-      --bg-card: #161d27;
+      --bg: #0f1419;
+      --bg-card: #1a2332;
      --bg-input: #0d1117;
-      --border: #2a3544;
+      --border: #2d3a4f;
      --text: #e6edf3;
      --muted: #8b949e;
      --accent: #58a6ff;
-      --accent-soft: rgba(88, 166, 255, 0.12);
+      --accent-soft: rgba(88, 166, 255, 0.15);
      --success: #3fb950;
      --success-soft: rgba(63, 185, 80, 0.15);
-      --radius: 14px;
-      --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+      --radius: 12px;
+      --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    }
    @media (prefers-color-scheme: light) {
      :root {
-        --bg: #eef2f7;
-        --bg-soft: #f6f8fb;
+        --bg: #f0f4f8;
        --bg-card: #ffffff;
        --bg-input: #f6f8fa;
-        --border: #d8dee4;
+        --border: #d0d7de;
        --text: #1f2328;
        --muted: #656d76;
        --accent: #0969da;
-        --accent-soft: rgba(9, 105, 218, 0.08);
+        --accent-soft: rgba(9, 105, 218, 0.1);
        --success: #1a7f37;
        --success-soft: rgba(26, 127, 55, 0.1);
-        --shadow: 0 10px 30px rgba(31, 35, 40, 0.08);
+        --shadow: 0 8px 24px rgba(31, 35, 40, 0.08);
      }
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
-      font-family: "Segoe UI", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
-      background:
-        radial-gradient(ellipse 80% 50% at 20% -10%, var(--accent-soft), transparent),
-        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(63, 185, 80, 0.08), transparent),
-        var(--bg);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      min-height: 100vh;
+      padding: 2rem 1rem 3rem;
    }
-    .hero {
-      padding: 2rem 1.5rem 1.25rem;
+    .container { max-width: 720px; margin: 0 auto; }
+    header {
      text-align: center;
-    }
-    .hero h1 {
-      font-size: clamp(1.75rem, 4vw, 2.25rem);
-      font-weight: 800;
-      letter-spacing: -0.03em;
-      margin-bottom: 0.35rem;
-      color: var(--accent);
-    }
-    .hero p { color: var(--muted); font-size: 0.95rem; }
-    .hero .meta strong { color: var(--text); font-weight: 650; }
-    .badges {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.45rem;
-      justify-content: center;
-      margin-top: 1rem;
-    }
-    .badge {
-      display: inline-block;
-      padding: 0.25rem 0.75rem;
-      background: var(--accent-soft);
-      color: var(--accent);
-      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
-      border-radius: 999px;
-      font-size: 0.8rem;
-      font-weight: 650;
-    }
-    .badge-salamander {
-      background: rgba(63, 185, 80, 0.12);
-      color: var(--success);
-      border-color: color-mix(in srgb, var(--success) 35%, transparent);
-    }
-    .top-nav {
-      display: flex;
-      justify-content: center;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-      padding: 0 1rem 1rem;
-    }
-    .nav-link {
-      display: inline-flex;
-      align-items: center;
-      padding: 0.45rem 0.9rem;
-      border-radius: 999px;
-      border: 1px solid var(--border);
-      background: var(--bg-card);
-      color: var(--accent);
-      text-decoration: none;
-      font-size: 0.82rem;
-      font-weight: 650;
-    }
-    .nav-link:hover { background: var(--accent-soft); border-color: var(--accent); }
-    .container {
-      max-width: 1080px;
-      margin: 0 auto;
-      padding: 0 1rem 3rem;
-    }
-    .server-obfs {
-      max-width: 640px;
-      margin: 0 auto 1.25rem;
-      padding: 1rem 1.15rem;
-      background: var(--bg-card);
+      margin-bottom: 2.5rem;
+      padding: 2rem 1.5rem;
+      background: linear-gradient(135deg, var(--accent-soft), transparent);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
-      text-align: left;
    }
-    .users-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-      gap: 1rem;
+    header h1 {
+      font-size: 1.75rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.5rem;
+    }
+    header .meta {
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+    header .meta strong { color: var(--text); font-weight: 600; }
+    .badge {
+      display: inline-block;
+      margin-top: 1rem;
+      padding: 0.25rem 0.75rem;
+      background: var(--accent-soft);
+      color: var(--accent);
+      border-radius: 999px;
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+    .badge-salamander {
+      margin-left: 0.35rem;
+      background: rgba(163, 113, 247, 0.18);
+      color: #a371f7;
+    }
+    .server-obfs {
+      margin-top: 1.25rem;
+      max-width: 100%;
    }
    .user-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
-      padding: 1.25rem;
      box-shadow: var(--shadow);
-      display: flex;
-      flex-direction: column;
-      gap: 0.85rem;
+      padding: 1.5rem;
+      margin-bottom: 1.25rem;
    }
    .user-card h2 {
-      font-size: 1.05rem;
+      font-size: 1.25rem;
+      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .user-card h2::before {
      content: "";
-      width: 7px;
-      height: 7px;
+      width: 8px;
+      height: 8px;
      border-radius: 50%;
      background: var(--success);
+      box-shadow: 0 0 8px var(--success);
    }
+    .field { margin-bottom: 1rem; }
    .field label {
      display: block;
-      font-size: 0.7rem;
-      font-weight: 700;
+      font-size: 0.75rem;
+      font-weight: 600;
      text-transform: uppercase;
-      letter-spacing: 0.06em;
+      letter-spacing: 0.05em;
      color: var(--muted);
-      margin-bottom: 0.35rem;
+      margin-bottom: 0.4rem;
+    }
+    .input-row {
+      display: flex;
+      gap: 0.5rem;
+      align-items: stretch;
    }
-    .input-row { display: flex; gap: 0.45rem; }
    .input-row input {
      flex: 1;
      min-width: 0;
-      padding: 0.55rem 0.75rem;
+      padding: 0.65rem 0.85rem;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      font-size: 0.72rem;
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+      font-size: 0.8rem;
+    }
+    .input-row input:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .btn-copy {
      display: flex;
      align-items: center;
      justify-content: center;
-      width: 38px;
+      width: 42px;
      flex-shrink: 0;
      background: var(--bg-input);
      border: 1px solid var(--border);
@@ -180,53 +151,65 @@
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
-    .btn-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
-    .btn-copy.copied { color: var(--success); border-color: var(--success); background: var(--success-soft); }
-    .btn-copy svg { width: 16px; height: 16px; }
+    .btn-copy:hover {
+      color: var(--accent);
+      border-color: var(--accent);
+      background: var(--accent-soft);
+    }
+    .btn-copy.copied {
+      color: var(--success);
+      border-color: var(--success);
+      background: var(--success-soft);
+    }
+    .btn-copy svg { width: 18px; height: 18px; }
    .qr-block {
      text-align: center;
-      padding: 0.75rem;
+      margin: 1.25rem 0;
+      padding: 1rem;
      background: #fff;
      border-radius: 8px;
      border: 1px solid var(--border);
    }
-    .qr-block img {
-      width: 160px;
-      height: 160px;
-      image-rendering: pixelated;
-      cursor: zoom-in;
-      border-radius: 4px;
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    @media (prefers-color-scheme: dark) {
+      .qr-block { background: #fff; }
    }
-    .qr-block img:hover {
-      transform: scale(1.03);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+    .qr-block img {
+      max-width: 220px;
+      width: 100%;
+      height: auto;
+      image-rendering: pixelated;
    }
    .files {
      display: flex;
      flex-wrap: wrap;
-      gap: 0.4rem;
-      margin-top: auto;
-      padding-top: 0.75rem;
+      gap: 0.5rem;
+      margin-top: 1rem;
+      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }
    .files a {
-      padding: 0.3rem 0.6rem;
-      border-radius: 6px;
-      border: 1px solid var(--border);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      padding: 0.35rem 0.75rem;
      background: var(--bg-input);
+      border: 1px solid var(--border);
+      border-radius: 6px;
      color: var(--accent);
      text-decoration: none;
-      font-size: 0.72rem;
-      font-weight: 600;
+      font-size: 0.8rem;
+      font-weight: 500;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .files a:hover {
+      background: var(--accent-soft);
+      border-color: var(--accent);
    }
-    .files a:hover { background: var(--accent-soft); border-color: var(--accent); }
    footer {
      text-align: center;
-      padding: 1.5rem;
+      margin-top: 2rem;
      color: var(--muted);
      font-size: 0.8rem;
-      border-top: 1px solid var(--border);
    }
    .toast {
      position: fixed;
@@ -246,236 +229,82 @@
      pointer-events: none;
      z-index: 100;
    }
-    .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
-    .lightbox {
-      position: fixed;
-      inset: 0;
-      z-index: 200;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1rem;
-      box-sizing: border-box;
-      background: rgba(8, 12, 18, 0.72);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      transition: opacity 0.22s ease, visibility 0.22s ease;
-    }
-    .lightbox.open {
+    .toast.show {
+      transform: translateX(-50%) translateY(0);
      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
    }
-    .lightbox-panel {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      width: min(96vw, calc(100dvh - 2rem));
-      height: calc(100dvh - 2rem);
-      max-height: calc(100dvh - 2rem);
-      padding: 2.5rem 1rem 0.85rem;
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 18px;
-      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
-      text-align: center;
-      overflow: hidden;
-      box-sizing: border-box;
-      transform: translateY(12px) scale(0.96);
-      transition: transform 0.22s ease;
-    }
-    .lightbox.open .lightbox-panel { transform: translateY(0) scale(1); }
-    .lightbox-media {
-      flex: 1 1 auto;
-      min-height: 0;
-      width: 100%;
-      container-type: size;
-      display: grid;
-      place-items: center;
-    }
-    .lightbox-panel img {
-      display: block;
-      width: min(100cqi, 100cqb);
-      height: min(100cqi, 100cqb);
-      max-width: 100%;
-      max-height: 100%;
-      aspect-ratio: 1;
-      object-fit: contain;
-      background: #fff;
-      border-radius: 12px;
-      padding: 0.75rem;
-      box-sizing: border-box;
-      image-rendering: pixelated;
-    }
-    .lightbox-caption {
-      flex-shrink: 0;
-      margin-top: 0.55rem;
-      font-size: 0.95rem;
-      font-weight: 650;
-      color: var(--text);
-    }
-    .lightbox-actions {
-      flex-shrink: 0;
-      margin-top: 0.65rem;
-      display: flex;
-      justify-content: center;
-    }
-    .lightbox-download {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.45rem;
-      padding: 0.55rem 1rem;
-      border-radius: 999px;
-      border: 1px solid var(--border);
-      background: var(--bg-input);
-      color: var(--accent);
-      text-decoration: none;
-      font: inherit;
-      font-size: 0.85rem;
-      font-weight: 650;
-      cursor: pointer;
-    }
-    .lightbox-download:hover {
-      border-color: var(--accent);
-      background: var(--accent-soft);
-    }
-    .lightbox-download svg { width: 16px; height: 16px; flex-shrink: 0; }
-    .lightbox-close {
-      position: absolute;
-      top: 0.65rem;
-      right: 0.65rem;
-      width: 36px;
-      height: 36px;
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      background: var(--bg-input);
-      color: var(--muted);
-      cursor: pointer;
-      font-size: 1.25rem;
-      line-height: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .lightbox-close:hover {
-      color: var(--accent);
-      border-color: var(--accent);
-      background: var(--accent-soft);
-    }
-    body.lightbox-open { overflow: hidden; }
  </style>
 </head>
 <body>
-  <header class="hero">
-    <h1>{{ hysteria2_output_name | e }}</h1>
-    <p class="meta">
-      <strong>{{ hysteria2_domain | e }}:{{ hysteria2_listen_port }}</strong>
-    </p>
-    <div class="badges">
+  <div class="container">
+    <header>
+      <h1>Hysteria2</h1>
+      <p class="meta">
+        Сервер: <strong>{{ hysteria2_output_name }}</strong><br>
+        Домен: <strong>{{ hysteria2_domain }}:{{ hysteria2_listen_port }}</strong>
+      </p>
      <span class="badge">{{ hysteria2_export_users | length }} {{ 'пользователь' if hysteria2_export_users | length == 1 else 'пользователей' }}</span>
-{% if (hysteria2_mode | default('')) == 'salamander' or (hysteria2_obfs_password | default('') | length > 0) %}
      <span class="badge badge-salamander">Salamander</span>
-{% endif %}
-    </div>
-  </header>

-  <div class="top-nav">
-    <a class="nav-link" href="../index.html">← Общий каталог</a>
-  </div>
-
-  <main class="container">
-{% if hysteria2_obfs_password | default('') | length > 0 %}
-    <div class="field server-obfs">
-      <label for="obfs-server">Пароль обфускации (Salamander)</label>
-      <div class="input-row">
-        <input type="text" id="obfs-server" value="{{ hysteria2_obfs_password | e }}" readonly>
-        <button type="button" class="btn-copy" onclick="copyField('obfs-server', this)" title="Копировать obfs-password" aria-label="Копировать obfs-password">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-        </button>
+      <div class="field server-obfs">
+        <label for="obfs-server">Пароль обфускации (Salamander)</label>
+        <div class="input-row">
+          <input type="text" id="obfs-server" value="{{ hysteria2_obfs_password | e }}" readonly>
+          <button type="button" class="btn-copy" onclick="copyField('obfs-server', this)" title="Копировать obfs-password" aria-label="Копировать obfs-password">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+          </button>
+        </div>
      </div>
-    </div>
-{% endif %}
+    </header>

-    <div class="users-grid">
 {% for user in hysteria2_export_users %}
-      <article class="user-card">
-        <h2>{{ user.name | e }}</h2>
+    <article class="user-card">
+      <h2>{{ user.name }}</h2>

-        <div class="field">
-          <label for="pwd-{{ loop.index }}">Пароль</label>
-          <div class="input-row">
-            <input type="text" id="pwd-{{ loop.index }}" value="{{ user.password | e }}" readonly>
-            <button type="button" class="btn-copy" onclick="copyField('pwd-{{ loop.index }}', this)" title="Копировать пароль" aria-label="Копировать пароль">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-            </button>
-          </div>
+      <div class="field">
+        <label for="pwd-{{ loop.index }}">Пароль</label>
+        <div class="input-row">
+          <input type="text" id="pwd-{{ loop.index }}" value="{{ user.password | e }}" readonly>
+          <button type="button" class="btn-copy" onclick="copyField('pwd-{{ loop.index }}', this)" title="Копировать пароль" aria-label="Копировать пароль">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+          </button>
        </div>
+      </div>

-        <div class="field">
-          <label for="url-{{ loop.index }}">Ссылка</label>
-          <div class="input-row">
-            <input type="text" id="url-{{ loop.index }}" value="{{ user.url | e }}" readonly>
-            <button type="button" class="btn-copy" onclick="copyField('url-{{ loop.index }}', this)" title="Копировать ссылку" aria-label="Копировать ссылку">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2 2v1"/></svg>
-            </button>
-          </div>
+      <div class="field">
+        <label for="url-{{ loop.index }}">Ссылка подключения</label>
+        <div class="input-row">
+          <input type="text" id="url-{{ loop.index }}" value="{{ user.url | e }}" readonly>
+          <button type="button" class="btn-copy" onclick="copyField('url-{{ loop.index }}', this)" title="Копировать ссылку" aria-label="Копировать ссылку">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+          </button>
        </div>
+      </div>

-{% set _png = namespace(b64='', data='') %}
-{% if user.has_png | default(false) %}
-{% set _png.b64 = lookup('pipe', 'base64 < ' ~ ((hysteria2_output_dir ~ '/' ~ hysteria2_output_name ~ '/' ~ user.name ~ '.png') | quote)) | regex_replace('\\s+', '') %}
-{% set _png.data = 'data:image/png;base64,' ~ _png.b64 %}
-        <div class="qr-block">
-          <img
-            src="{{ _png.data }}"
-            alt="QR {{ user.name | e }}"
-            width="160"
-            height="160"
-            role="button"
-            tabindex="0"
-            data-lightbox-src="{{ _png.data }}"
-            data-lightbox-caption="{{ hysteria2_output_name | e }} · {{ user.name | e }}"
-            data-lightbox-download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.png"
-            aria-label="Открыть QR-код {{ user.name | e }}"
-          >
-        </div>
+{% if user.has_png %}
+      <div class="qr-block">
+        <img src="{{ user.name | e }}.png" alt="QR-код {{ user.name | e }}" width="220" height="220">
+      </div>
 {% endif %}

-        <nav class="files" aria-label="Файлы">
-          <a class="file-download" href="{{ user.name | e }}.url" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.url" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.url" data-text="{{ (user.url ~ '\n') | e }}">.url</a>
-          <a class="file-download" href="{{ user.name | e }}.txt" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.txt" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.txt" data-text="{{ ('Server: ' ~ hysteria2_output_name ~ '\nDomain: ' ~ hysteria2_domain ~ ':' ~ hysteria2_listen_port ~ '\nUser: ' ~ user.name ~ '\nPassword: ' ~ user.password ~ '\n\nURL:\n' ~ user.url ~ '\n') | e }}">.txt</a>
-{% if user.has_png | default(false) and _png.b64 %}
-          <a class="file-download" href="{{ user.name | e }}.png" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.png" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.png" data-png-b64="{{ _png.b64 }}">.png</a>
+      <nav class="files" aria-label="Файлы">
+        <a href="{{ user.name | e }}.url" download>{{ user.name | e }}.url</a>
+        <a href="{{ user.name | e }}.txt" download>{{ user.name | e }}.txt</a>
+{% if user.has_png %}
+        <a href="{{ user.name | e }}.png" download>{{ user.name | e }}.png</a>
 {% endif %}
-          <a class="file-download" href="{{ user.name | e }}.qr.txt" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.qr.txt" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.qr.txt" data-text="{{ lookup('file', hysteria2_output_dir ~ '/' ~ hysteria2_output_name ~ '/' ~ user.name ~ '.qr.txt', errors='ignore') | default('URL: ' ~ user.url ~ '\n', true) | e }}">.qr.txt</a>
-        </nav>
-      </article>
+        <a href="{{ user.name | e }}.qr.txt" download>{{ user.name | e }}.qr.txt</a>
+      </nav>
+    </article>
 {% endfor %}
-    </div>
-  </main>

-  <footer>Сгенерировано Ansible · {{ generated_at | default('') }}</footer>
-  <div class="toast" id="toast">Скопировано!</div>
-
-  <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="lightbox-caption">
-    <div class="lightbox-panel" role="document">
-      <button type="button" class="lightbox-close" id="lightbox-close" aria-label="Закрыть">&times;</button>
-      <div class="lightbox-media">
-        <img id="lightbox-img" src="" alt="">
-      </div>
-      <p class="lightbox-caption" id="lightbox-caption"></p>
-      <div class="lightbox-actions">
-        <button type="button" class="lightbox-download" id="lightbox-download">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-          Скачать QR
-        </button>
-      </div>
-    </div>
+    <footer>
+      Сгенерировано Ansible · {{ generated_at | default('') }}
+    </footer>
  </div>

+  <div class="toast" id="toast">Скопировано!</div>
+
  <script>
    function copyField(id, btn) {
      var el = document.getElementById(id);
@@ -500,203 +329,6 @@
      t.classList.add('show');
      setTimeout(function() { t.classList.remove('show'); }, 1800);
    }
-
-    (function () {
-      var box = document.getElementById('lightbox');
-      var img = document.getElementById('lightbox-img');
-      var caption = document.getElementById('lightbox-caption');
-      var closeBtn = document.getElementById('lightbox-close');
-      var downloadBtn = document.getElementById('lightbox-download');
-      var downloadSrc = '';
-
-      function triggerDataUrlDownload(dataUrl, filename) {
-        var a = document.createElement('a');
-        a.href = dataUrl;
-        a.download = filename;
-        a.rel = 'noopener';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-      }
-
-      function triggerFileDownload(blob, filename) {
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        a.rel = 'noopener';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        setTimeout(function () { URL.revokeObjectURL(url); }, 1500);
-      }
-
-      function downloadQrFromCanvas(filename) {
-        if (!img.complete || !img.naturalWidth) return false;
-        try {
-          var canvas = document.createElement('canvas');
-          canvas.width = img.naturalWidth;
-          canvas.height = img.naturalHeight;
-          canvas.getContext('2d').drawImage(img, 0, 0);
-          // toDataURL sync — download stays in the user-gesture (Safari/Chrome)
-          triggerDataUrlDownload(canvas.toDataURL('image/png'), filename);
-          return true;
-        } catch (err) {
-          return false;
-        }
-      }
-
-      function downloadQrImage(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var filename = downloadBtn.getAttribute('data-filename') || 'qr.png';
-        var src = downloadSrc || img.currentSrc || img.src;
-
-        // Embedded data: URLs work on file:// (no CORS / tainted canvas)
-        if (src && src.indexOf('data:') === 0) {
-          triggerDataUrlDownload(src, filename);
-          return;
-        }
-        if (downloadQrFromCanvas(filename)) return;
-        if (!src || location.protocol === 'file:') return;
-
-        fetch(src)
-          .then(function (res) {
-            if (!res.ok) throw new Error('fetch failed');
-            return res.blob();
-          })
-          .then(function (blob) { triggerFileDownload(blob, filename); })
-          .catch(function () { /* avoid navigating to the image URL */ });
-      }
-
-      function openLightbox(src, text, alt, filename) {
-        var safeName = filename || 'qr.png';
-        img.src = src;
-        img.alt = alt || text || 'QR';
-        caption.textContent = text || '';
-        downloadSrc = src;
-        downloadBtn.setAttribute('data-filename', safeName);
-        downloadBtn.setAttribute('aria-label', 'Скачать ' + safeName);
-        box.classList.add('open');
-        box.setAttribute('aria-hidden', 'false');
-        document.body.classList.add('lightbox-open');
-        closeBtn.focus();
-      }
-
-      function closeLightbox() {
-        box.classList.remove('open');
-        box.setAttribute('aria-hidden', 'true');
-        document.body.classList.remove('lightbox-open');
-        img.removeAttribute('src');
-        downloadSrc = '';
-        downloadBtn.removeAttribute('data-filename');
-      }
-
-      document.querySelectorAll('[data-lightbox-src]').forEach(function (el) {
-        function openFromEl() {
-          openLightbox(
-            el.getAttribute('data-lightbox-src'),
-            el.getAttribute('data-lightbox-caption'),
-            el.getAttribute('alt'),
-            el.getAttribute('data-lightbox-download')
-          );
-        }
-        el.addEventListener('click', openFromEl);
-        el.addEventListener('keydown', function (e) {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            openFromEl();
-          }
-        });
-      });
-
-      downloadBtn.addEventListener('click', downloadQrImage);
-      closeBtn.addEventListener('click', closeLightbox);
-      box.addEventListener('click', function (e) {
-        if (e.target === box) closeLightbox();
-      });
-      document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && box.classList.contains('open')) closeLightbox();
-      });
-    })();
-
-    (function () {
-      function triggerDataUrlDownload(dataUrl, filename) {
-        var a = document.createElement('a');
-        a.href = dataUrl;
-        a.download = filename;
-        a.rel = 'noopener';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-      }
-
-      function triggerFileDownload(blob, filename) {
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        a.rel = 'noopener';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        setTimeout(function () { URL.revokeObjectURL(url); }, 1500);
-      }
-
-      function pngFromCard(link, filename) {
-        var card = link.closest('.user-card');
-        var qrImg = card && card.querySelector('img[data-lightbox-src], .qr-block img');
-        if (!qrImg) return false;
-        var src = qrImg.currentSrc || qrImg.src || '';
-        if (src.indexOf('data:image/') === 0) {
-          triggerDataUrlDownload(src, filename);
-          return true;
-        }
-        if (!qrImg.complete || !qrImg.naturalWidth) return false;
-        try {
-          var canvas = document.createElement('canvas');
-          canvas.width = qrImg.naturalWidth;
-          canvas.height = qrImg.naturalHeight;
-          canvas.getContext('2d').drawImage(qrImg, 0, 0);
-          triggerDataUrlDownload(canvas.toDataURL('image/png'), filename);
-          return true;
-        } catch (err) {
-          return false;
-        }
-      }
-
-      document.querySelectorAll('a.file-download').forEach(function (link) {
-        link.addEventListener('click', function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          var filename = link.getAttribute('data-filename') || link.getAttribute('download') || 'download';
-          var href = link.getAttribute('href');
-          var fallbackText = link.getAttribute('data-text');
-          var pngB64 = link.getAttribute('data-png-b64');
-          var isPng = /\.png$/i.test(filename);
-
-          // Sync paths first — file:// blocks fetch (CORS) and taints canvas
-          if (pngB64) {
-            triggerDataUrlDownload('data:image/png;base64,' + pngB64, filename);
-            return;
-          }
-          if (isPng && pngFromCard(link, filename)) return;
-          if (fallbackText !== null) {
-            triggerFileDownload(new Blob([fallbackText], { type: 'text/plain;charset=utf-8' }), filename);
-            return;
-          }
-          if (!href || location.protocol === 'file:') return;
-
-          fetch(href)
-            .then(function (res) {
-              if (!res.ok) throw new Error('fetch failed');
-              return res.blob();
-            })
-            .then(function (blob) { triggerFileDownload(blob, filename); })
-            .catch(function () { /* do not navigate to the file URL */ });
-        });
-      });
-    })();
  </script>
 </body>
 </html>
Author	SHA1	Message	Date
Sergey Antropoff	d4dc25cdd3	Обновить bundled install_server.sh с официального get.hy2.sh Синхронизация локальной копии после проверки SHA256.	2026-07-23 09:02:06 +03:00
Sergey Antropoff	f5f2384252	Добавить make index: пересборка output/index.html из локальных экспортов Отдельный playbook на localhost читает server-info.yml, обновляет общий каталог и открывает его в браузере без обращения к VPS.	2026-07-23 08:56:04 +03:00
Sergey Antropoff	100e3cee12	fix: корректный make status при inactive и без -o systemctl is-active с rc≠0 больше не дублирует inactive; убран deprecated флаг -o.	2026-07-23 08:46:17 +03:00
Sergey Antropoff	062512121d	Улучшить вывод make status: кратко и без логов journal Одна строка на хост (active/not installed, since, PID, RAM); хост без установки больше не валит весь make.	2026-07-23 08:32:08 +03:00
Sergey Antropoff	8ba1c6c45f	fix: пропускать sync install_server.sh при сетевой ошибке Если get.hy2.sh недоступен (таймаут без VPN), используется локальная копия в roles/hysteria2/files/; падение только если её нет.	2026-07-01 14:06:46 +03:00
Sergey Antropoff	3034be388b	docs: LIMIT при добавлении сервера и force_export в README Описано, что make install LIMIT не трогает старые VPS и как принудительно перевыпустить URL/QR через hysteria2_force_export.	2026-07-01 13:37:53 +03:00
Sergey Antropoff	83b47dbc30	fix: пересборка output/index.html при uninstall с LIMIT Второй play перенесён на hysteria2_servers с run_once на localhost, чтобы LIMIT не пропускал пересборку. Пустой index.html удаляется.	2026-07-01 13:31:28 +03:00
Sergey Antropoff	4b5a1ef51f	Полная очистка при uninstall: VPS и output/<server>/ Скрипт --remove снимает только бинарник и systemd; Ansible дочищает конфиг, пользователя, ufw, пакеты и всегда удаляет локальную папку экспорта.	2026-07-01 13:28:59 +03:00
Sergey Antropoff	bdc316efac	fix: run only uninstall tasks, not full role on make uninstall Tagging the whole role with uninstall caused install/configure/update/export to run first. Use include_role tasks_from uninstall.yml; add safe defaults for uninstall variables.	2026-07-01 13:20:17 +03:00
Sergey Antropoff	01198b4f77	docs: update README for Salamander branch features Mirror main documentation: install script sync, incremental update/export, uninstall, vault wiring, Makefile and role structure.	2026-07-01 13:16:38 +03:00
Sergey Antropoff	0745fdce2c	feat: incremental user passwords and export on update Preserve passwords from server-info.yml and vault; generate only for new users; remove deleted users from output; re-export URL/QR only when password, domain, port, obfs or files changed.	2026-07-01 13:06:33 +03:00
Sergey Antropoff	5e42d60778	feat: complete uninstall cleanup on server and local output Remove binary, config, masq, system user, ufw rules, and apt packages from VPS; delete output/<server>/ by default and rebuild global index.html via localhost play.	2026-07-01 12:56:20 +03:00
Sergey Antropoff	b9e622e5c2	feat: bundle and sync official Hysteria2 install script locally Store install_server.sh in role files, compare SHA256 with get.hy2.sh on the control node before install/update, refresh the bundled copy when upstream changes, then copy and run it on VPS.	2026-07-01 12:00:37 +03:00
Sergey Antropoff	2f88108a8d	fix: disable become on localhost play and drop deprecated facts Use now() for export timestamps and ansible_facts['system'] for browser detection. Set become: false on the localhost play to avoid sudo on local fact gathering.	2026-07-01 11:56:18 +03:00
Sergey Antropoff	4242093ca1	fix: generate VPN passwords without pwgen, set EDITOR=nano Use Ansible password lookup on the control node so install works before packages are installed on VPS and without pwgen on macOS. Export EDITOR=nano in Makefile for vault-edit.	2026-07-01 11:43:34 +03:00
Sergey Antropoff	e3d3103dc2	fix: replace removed yaml callback with default + result_format community.general.yaml was removed in collection 12.0; use ansible.builtin.default with result_format=yaml for Ansible 2.13+.	2026-07-01 11:09:08 +03:00
Sergey Antropoff	63b21d5df6	Align README with main branch: branches comparison, ACME renewal, switching. Unified documentation structure across main and salamander branches.	2026-07-01 02:22:28 +03:00
Sergey Antropoff	0aec9e6e54	Add Salamander obfs branch: replace masquerade with packet obfuscation. - ACME TLS challenge on 443 (no port 80 or nginx decoy) - Auto-generate and persist obfs password per server - Update client export, HTML catalog, and vault examples - Document Salamander vs main and ACME auto-renewal in README	2026-07-01 02:17:22 +03:00
Sergey Antropoff	6f96a26bed	Initial commit: Ansible role for Hysteria2 VPN server deployment. Includes install/update/uninstall playbooks, Makefile, vault-based SSH credentials, per-server and global HTML export with QR codes.	2026-07-01 02:02:58 +03:00