Embed QR PNGs as data URLs for file:// downloads

Chrome blocks fetch/canvas for sibling file:// images (CORS/tainted).
Inline base64 in HTML so lightbox and .png chips download offline.

Makefile

@@ -99,7 +99,7 @@ update: check ## Обновить бинарник, перекатить кон
 export: check ## Только перевыпустить URL и QR (без изменений на сервере)
 	$(ANSIBLE) playbook.yml --tags export $(ANSIBLE_OPTS)
 
-index: check ## Пересобрать output/index.html из локальных server-info.yml и открыть в браузере
+index: check ## Пересобрать HTML серверов + output/index.html и открыть в браузере
 	$(ANSIBLE) playbook-index.yml $(VAULT_ARGS) \
 		$(if $(EXTRA_VARS),--extra-vars "$(EXTRA_VARS)",)
 

README.md

@@ -8,6 +8,20 @@ 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`** |
@@ -73,7 +87,7 @@ make install    # → output/index.html откроется в браузере
 | `make install` | Установка masquerade + экспорт URL/QR/HTML |
 | `make update` | Обновить бинарник и конфиг; экспорт только для новых/изменённых пользователей |
 | `make export` | Только экспорт (URL, QR, HTML) без изменений на сервере |
-| `make index` | Пересобрать `output/index.html` из локальных `server-info.yml` и открыть в браузере |
+| `make index` | Пересобрать HTML всех серверов + общий `output/index.html` и открыть в браузере |
 | `make uninstall` | Полное удаление с VPS + `output/<server>/` + пересборка `output/index.html` |
 | `make vault-init` | Создать `.vault_pass`, включить `vault_password_file` в `ansible.cfg` |
 | `make vault-encrypt` | Зашифровать `vault.yml` |

playbook-index.yml

@@ -1,11 +1,11 @@
 ---
-- name: Rebuild global output index from local exports
+- name: Rebuild HTML catalogs from local exports
   hosts: localhost
   connection: local
   gather_facts: true
   become: false
   tasks:
-    - name: Generate output/index.html and open in browser
+    - name: Regenerate server pages and global index.html
       ansible.builtin.include_role:
         name: hysteria2
-        tasks_from: export_global.yml
+        tasks_from: export_rebuild_local.yml

playbook.yml

@@ -5,14 +5,14 @@
   roles:
     - hysteria2
 
-- name: Build global output index
+- name: Build HTML catalogs from local exports
   hosts: localhost
   connection: local
   gather_facts: true
   become: false
   tags: [install, update, export]
   tasks:
-    - name: Generate global index.html and open in browser
+    - name: Regenerate server pages and global index.html
       ansible.builtin.include_role:
         name: hysteria2
-        tasks_from: export_global.yml
+        tasks_from: export_rebuild_local.yml

roles/hysteria2/tasks/export.yml

@@ -45,6 +45,8 @@
       server: {{ hysteria2_output_name }}
       domain: {{ hysteria2_domain }}
       port: {{ hysteria2_listen_port }}
+      host_ip: "{{ ansible_host | default('') }}"
+      mode: masquerade
       users:
       {% for user in hysteria2_export_users %}
         - name: {{ user.name }}

roles/hysteria2/tasks/export_global.yml

@@ -29,10 +29,17 @@
   when: not item.skipped | default(false)
   vars:
     _info: "{{ item.content | b64decode | from_yaml }}"
+    _server_name: "{{ _info.server }}"
     _entry:
-      name: "{{ _info.server }}"
+      name: "{{ _server_name }}"
       domain: "{{ _info.domain }}"
       port: "{{ _info.port }}"
+      mode: "{{ _info.mode | default('masquerade') }}"
+      host_ip: >-
+        {{
+          _info.host_ip
+          | default(hostvars[_server_name].ansible_host | default(''), true)
+        }}
       dir: "{{ item.item.path | dirname | basename }}"
       users: "{{ _info.users }}"
   become: false
@@ -43,6 +50,64 @@
   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
@@ -51,6 +116,8 @@
   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
 

roles/hysteria2/tasks/export_rebuild_local.yml

@@ -0,0 +1,41 @@
+---
+# Пересборка 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

roles/hysteria2/templates/export/global-index.html.j2

@@ -15,11 +15,14 @@
       --text: #e6edf3;
       --muted: #8b949e;
       --accent: #58a6ff;
-      --accent-2: #a371f7;
+      --accent-2: #3fb950;
       --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);
     }
@@ -33,96 +36,241 @@
         --text: #1f2328;
         --muted: #656d76;
         --accent: #0969da;
-        --accent-2: #8250df;
+        --accent-2: #1a7f37;
         --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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      font-family: "Segoe UI", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
-      background: var(--bg);
+      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);
       color: var(--text);
       line-height: 1.5;
       min-height: 100vh;
     }
     .hero {
-      background:
+      padding: 2rem 1.5rem 1.25rem;
-        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.5rem;
+      margin-bottom: 0.35rem;
-      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      color: var(--accent);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
     }
     .hero p { color: var(--muted); font-size: 0.95rem; }
-    .stats {
+    .tabs {
-      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.5rem;
+      gap: 0.45rem;
       flex-wrap: wrap;
       justify-content: center;
-      padding: 0.85rem 1rem;
+      padding: 0.75rem 1rem;
-      background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
+      background: color-mix(in srgb, var(--bg-soft) 90%, transparent);
-      backdrop-filter: blur(10px);
+      backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--border);
     }
-    .nav a {
+    .tab {
-      padding: 0.4rem 0.85rem;
+      appearance: none;
-      border-radius: 999px;
       border: 1px solid var(--border);
       background: var(--bg-card);
       color: var(--text);
-      text-decoration: none;
+      padding: 0.5rem 0.95rem;
-      font-size: 0.82rem;
+      border-radius: 999px;
-      font-weight: 600;
+      font-size: 0.85rem;
-      transition: border-color 0.15s, background 0.15s, color 0.15s;
+      font-weight: 650;
+      cursor: pointer;
+      transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
     }
-    .nav a:hover {
+    .tab: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: 980px;
+      max-width: 1080px;
       margin: 0 auto;
       padding: 1.5rem 1rem 3rem;
     }
-    .server-section {
+    .tab-panel { display: none; animation: fadeIn 0.2s ease; }
-      scroll-margin-top: 4.5rem;
+    .tab-panel.active { display: block; }
-      margin-bottom: 2.5rem;
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(6px); }
+      to { opacity: 1; transform: translateY(0); }
     }
+    .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;
@@ -137,15 +285,8 @@
       box-shadow: var(--shadow);
       border-left: 4px solid var(--accent);
     }
-    .server-header h2 {
+    .server-header h2 { font-size: 1.35rem; font-weight: 700; }
-      font-size: 1.35rem;
+    .server-header .domain { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
-      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;
@@ -236,6 +377,13 @@
       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;
@@ -282,31 +430,265 @@
       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>
+    <p>Каталог VPN и сводная статистика</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="nav" aria-label="Серверы">
+  <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>
 {% for server in hysteria2_global_servers %}
-    <a href="#server-{{ server.dir | e }}">{{ server.name | e }}</a>
+    <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>
 {% 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 %}
-    <section class="server-section" id="server-{{ server.dir | e }}">
+        <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>
       <div class="server-header">
         <div>
           <h2>{{ server.name | e }}</h2>
-          <p class="domain">{{ server.domain | e }}:{{ server.port }}</p>
+          <p class="domain">
+            {{ server.domain | e }}:{{ server.port }}
+{% if server.host_ip | default('') | length > 0 %}
+            · <code>{{ server.host_ip | e }}</code>
+{% 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>
@@ -336,19 +718,33 @@
             </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="{{ server.dir | e }}/{{ user.name | e }}.png" alt="QR {{ user.name | e }}" width="160" height="160">
+            <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 }}"
+            >
           </div>
 {% endif %}
 
           <nav class="files" aria-label="Файлы">
-            <a href="{{ server.dir | e }}/{{ user.name | e }}.url" download>.url</a>
+            <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 href="{{ server.dir | e }}/{{ user.name | e }}.txt" download>.txt</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) %}
+{% if user.has_png | default(false) and _png.b64 %}
-            <a href="{{ server.dir | e }}/{{ user.name | e }}.png" download>.png</a>
+            <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>
 {% endif %}
-            <a href="{{ server.dir | e }}/{{ user.name | e }}.qr.txt" download>.qr.txt</a>
+            <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>
           </nav>
         </article>
 {% endfor %}
@@ -360,6 +756,22 @@
   <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);
@@ -384,6 +796,230 @@
       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>

roles/hysteria2/templates/export/index.html.j2

@@ -7,133 +7,171 @@
   <style>
     :root {
       color-scheme: light dark;
-      --bg: #0f1419;
+      --bg: #0b0f14;
-      --bg-card: #1a2332;
+      --bg-soft: #121820;
+      --bg-card: #161d27;
       --bg-input: #0d1117;
-      --border: #2d3a4f;
+      --border: #2a3544;
       --text: #e6edf3;
       --muted: #8b949e;
       --accent: #58a6ff;
-      --accent-soft: rgba(88, 166, 255, 0.15);
+      --accent-soft: rgba(88, 166, 255, 0.12);
       --success: #3fb950;
       --success-soft: rgba(63, 185, 80, 0.15);
-      --radius: 12px;
+      --radius: 14px;
-      --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+      --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
     }
     @media (prefers-color-scheme: light) {
       :root {
-        --bg: #f0f4f8;
+        --bg: #eef2f7;
+        --bg-soft: #f6f8fb;
         --bg-card: #ffffff;
         --bg-input: #f6f8fa;
-        --border: #d0d7de;
+        --border: #d8dee4;
         --text: #1f2328;
         --muted: #656d76;
         --accent: #0969da;
-        --accent-soft: rgba(9, 105, 218, 0.1);
+        --accent-soft: rgba(9, 105, 218, 0.08);
         --success: #1a7f37;
         --success-soft: rgba(26, 127, 55, 0.1);
-        --shadow: 0 8px 24px rgba(31, 35, 40, 0.08);
+        --shadow: 0 10px 30px rgba(31, 35, 40, 0.08);
       }
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      font-family: "Segoe UI", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
-      background: var(--bg);
+      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);
       color: var(--text);
       line-height: 1.5;
       min-height: 100vh;
-      padding: 2rem 1rem 3rem;
     }
-    .container { max-width: 720px; margin: 0 auto; }
+    .hero {
-    header {
+      padding: 2rem 1.5rem 1.25rem;
       text-align: center;
-      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);
     }
-    header h1 {
+    .hero h1 {
-      font-size: 1.75rem;
+      font-size: clamp(1.75rem, 4vw, 2.25rem);
-      font-weight: 700;
+      font-weight: 800;
-      letter-spacing: -0.02em;
+      letter-spacing: -0.03em;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.35rem;
+      color: var(--accent);
     }
-    header .meta {
+    .hero p { color: var(--muted); font-size: 0.95rem; }
-      color: var(--muted);
+    .hero .meta strong { color: var(--text); font-weight: 650; }
-      font-size: 0.9rem;
+    .badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.45rem;
+      justify-content: center;
+      margin-top: 1rem;
     }
-    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: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
       border-radius: 999px;
       font-size: 0.8rem;
-      font-weight: 600;
+      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);
+      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;
     }
     .user-card {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
+      padding: 1.25rem;
       box-shadow: var(--shadow);
-      padding: 1.5rem;
+      display: flex;
-      margin-bottom: 1.25rem;
+      flex-direction: column;
+      gap: 0.85rem;
     }
     .user-card h2 {
-      font-size: 1.25rem;
+      font-size: 1.05rem;
-      margin-bottom: 1rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
     }
     .user-card h2::before {
       content: "";
-      width: 8px;
+      width: 7px;
-      height: 8px;
+      height: 7px;
       border-radius: 50%;
       background: var(--success);
-      box-shadow: 0 0 8px var(--success);
     }
-    .field { margin-bottom: 1rem; }
     .field label {
       display: block;
-      font-size: 0.75rem;
+      font-size: 0.7rem;
-      font-weight: 600;
+      font-weight: 700;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.06em;
       color: var(--muted);
-      margin-bottom: 0.4rem;
+      margin-bottom: 0.35rem;
-    }
-    .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.65rem 0.85rem;
+      padding: 0.55rem 0.75rem;
       background: var(--bg-input);
       border: 1px solid var(--border);
       border-radius: 8px;
       color: var(--text);
-      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      font-size: 0.8rem;
+      font-size: 0.72rem;
-    }
-    .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: 42px;
+      width: 38px;
       flex-shrink: 0;
       background: var(--bg-input);
       border: 1px solid var(--border);
@@ -142,65 +180,53 @@
       cursor: pointer;
       transition: color 0.15s, border-color 0.15s, background 0.15s;
     }
-    .btn-copy:hover {
+    .btn-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
-      color: var(--accent);
+    .btn-copy.copied { color: var(--success); border-color: var(--success); background: var(--success-soft); }
-      border-color: var(--accent);
+    .btn-copy svg { width: 16px; height: 16px; }
-      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;
-      margin: 1.25rem 0;
+      padding: 0.75rem;
-      padding: 1rem;
       background: #fff;
       border-radius: 8px;
       border: 1px solid var(--border);
     }
-    @media (prefers-color-scheme: dark) {
-      .qr-block { background: #fff; }
-    }
     .qr-block img {
-      max-width: 220px;
+      width: 160px;
-      width: 100%;
+      height: 160px;
-      height: auto;
       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;
       flex-wrap: wrap;
-      gap: 0.5rem;
+      gap: 0.4rem;
-      margin-top: 1rem;
+      margin-top: auto;
-      padding-top: 1rem;
+      padding-top: 0.75rem;
       border-top: 1px solid var(--border);
     }
     .files a {
-      display: inline-flex;
+      padding: 0.3rem 0.6rem;
-      align-items: center;
-      gap: 0.35rem;
-      padding: 0.35rem 0.75rem;
-      background: var(--bg-input);
-      border: 1px solid var(--border);
       border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg-input);
       color: var(--accent);
       text-decoration: none;
-      font-size: 0.8rem;
+      font-size: 0.72rem;
-      font-weight: 500;
+      font-weight: 600;
-      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;
-      margin-top: 2rem;
+      padding: 1.5rem;
       color: var(--muted);
       font-size: 0.8rem;
+      border-top: 1px solid var(--border);
     }
     .toast {
       position: fixed;
@@ -220,71 +246,236 @@
       pointer-events: none;
       z-index: 100;
     }
-    .toast.show {
+    .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
-      transform: translateX(-50%) translateY(0);
+    .lightbox {
-      opacity: 1;
+      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;
+    }
+    .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>
-  <div class="container">
+  <header class="hero">
-    <header>
+    <h1>{{ hysteria2_output_name | e }}</h1>
-      <h1>Hysteria2</h1>
+    <p class="meta">
-      <p class="meta">
+      <strong>{{ hysteria2_domain | e }}:{{ hysteria2_listen_port }}</strong>
-        Сервер: <strong>{{ hysteria2_output_name }}</strong><br>
+    </p>
-        Домен: <strong>{{ hysteria2_domain }}:{{ hysteria2_listen_port }}</strong>
+    <div class="badges">
-      </p>
       <span class="badge">{{ hysteria2_export_users | length }} {{ 'пользователь' if hysteria2_export_users | length == 1 else 'пользователей' }}</span>
-    </header>
+{% if (hysteria2_mode | default('')) == 'salamander' or (hysteria2_obfs_password | default('') | length > 0) %}
-
+      <span class="badge badge-salamander">Salamander</span>
-{% for user in hysteria2_export_users %}
-    <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" 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" 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>
-
-{% 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 %}
+    </div>
+  </header>
 
-      <nav class="files" aria-label="Файлы">
+  <div class="top-nav">
-        <a href="{{ user.name | e }}.url" download>{{ user.name | e }}.url</a>
+    <a class="nav-link" href="../index.html">← Общий каталог</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 href="{{ user.name | e }}.qr.txt" download>{{ user.name | e }}.qr.txt</a>
-      </nav>
-    </article>
-{% endfor %}
-
-    <footer>
-      Сгенерировано Ansible · {{ generated_at | default('') }}
-    </footer>
   </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>
+    </div>
+{% endif %}
+
+    <div class="users-grid">
+{% for user in hysteria2_export_users %}
+      <article class="user-card">
+        <h2>{{ user.name | e }}</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>
+
+        <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>
+
+{% 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>
+{% 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>
+{% 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>
+{% 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>
+  </div>
+
   <script>
     function copyField(id, btn) {
       var el = document.getElementById(id);
@@ -309,6 +500,203 @@
       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>