make index и install/update: единый стиль страниц серверов и каталога

Пересборка HTML серверов из server-info.yml; сетка карточек и вид
как у главной. Тот же pipeline после install/update/export.

Co-authored-by: Cursor <cursoragent@cursor.com>

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

@@ -73,7 +73,7 @@ make install    # → output/index.html откроется в браузере
 | `make install` | Установка masquerade + экспорт URL/QR/HTML |
 | `make update` | Обновить бинарник и конфиг; экспорт только для новых/изменённых пользователей |
 | `make export` | Только экспорт (URL, QR, HTML) без изменений на сервере |
-| `make index` | Пересобрать `output/index.html` (вкладки серверов + статистика) и открыть в браузере |
+| `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_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/index.html.j2

@@ -7,73 +7,116 @@
   <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: 1080px; margin: 0 auto; }
+    .hero {
-    header {
+      padding: 2rem 1.5rem 1.25rem;
       text-align: center;
-      margin-bottom: 2rem;
-      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;
@@ -84,63 +127,51 @@
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      box-shadow: var(--shadow);
       padding: 1.25rem;
+      box-shadow: var(--shadow);
       display: flex;
       flex-direction: column;
       gap: 0.85rem;
     }
     .user-card h2 {
       font-size: 1.05rem;
-      margin-bottom: 0;
       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: 0; }
     .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);
@@ -149,32 +180,19 @@
       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: 0;
       padding: 0.75rem;
       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;
@@ -184,6 +202,51 @@
       transform: scale(1.03);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
     }
+    .files {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+      margin-top: auto;
+      padding-top: 0.75rem;
+      border-top: 1px solid var(--border);
+    }
+    .files a {
+      padding: 0.3rem 0.6rem;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg-input);
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 0.72rem;
+      font-weight: 600;
+    }
+    .files a:hover { background: var(--accent-soft); border-color: var(--accent); }
+    footer {
+      text-align: center;
+      padding: 1.5rem;
+      color: var(--muted);
+      font-size: 0.8rem;
+      border-top: 1px solid var(--border);
+    }
+    .toast {
+      position: fixed;
+      bottom: 1.5rem;
+      left: 50%;
+      transform: translateX(-50%) translateY(100px);
+      background: var(--bg-card);
+      border: 1px solid var(--success);
+      color: var(--success);
+      padding: 0.6rem 1.2rem;
+      border-radius: 999px;
+      font-size: 0.85rem;
+      font-weight: 600;
+      box-shadow: var(--shadow);
+      opacity: 0;
+      transition: transform 0.25s, opacity 0.25s;
+      pointer-events: none;
+      z-index: 100;
+    }
+    .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
     .lightbox {
       position: fixed;
       inset: 0;
@@ -224,9 +287,7 @@
       transform: translateY(12px) scale(0.96);
       transition: transform 0.22s ease;
     }
-    .lightbox.open .lightbox-panel {
+    .lightbox.open .lightbox-panel { transform: translateY(0) scale(1); }
-      transform: translateY(0) scale(1);
-    }
     .lightbox-media {
       flex: 1 1 auto;
       min-height: 0;
@@ -274,17 +335,12 @@
       text-decoration: none;
       font-size: 0.85rem;
       font-weight: 650;
-      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 {
+    .lightbox-download svg { width: 16px; height: 16px; flex-shrink: 0; }
-      width: 16px;
-      height: 16px;
-      flex-shrink: 0;
-    }
     .lightbox-close {
       position: absolute;
       top: 0.65rem;
@@ -301,7 +357,6 @@
       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);
@@ -309,109 +364,75 @@
       background: var(--accent-soft);
     }
     body.lightbox-open { overflow: hidden; }
-    .files {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-      margin-top: auto;
-      padding-top: 0.75rem;
-      border-top: 1px solid var(--border);
-    }
-    .files a {
-      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.8rem;
-      font-weight: 500;
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .files a:hover {
-      background: var(--accent-soft);
-      border-color: var(--accent);
-    }
-    footer {
-      text-align: center;
-      margin-top: 2rem;
-      color: var(--muted);
-      font-size: 0.8rem;
-    }
-    .toast {
-      position: fixed;
-      bottom: 1.5rem;
-      left: 50%;
-      transform: translateX(-50%) translateY(100px);
-      background: var(--bg-card);
-      border: 1px solid var(--success);
-      color: var(--success);
-      padding: 0.6rem 1.2rem;
-      border-radius: 999px;
-      font-size: 0.85rem;
-      font-weight: 600;
-      box-shadow: var(--shadow);
-      opacity: 0;
-      transition: transform 0.25s, opacity 0.25s;
-      pointer-events: none;
-      z-index: 100;
-    }
-    .toast.show {
-      transform: translateX(-50%) translateY(0);
-      opacity: 1;
-    }
   </style>
 </head>
 <body>
-  <div class="container">
+  <header class="hero">
-    <header>
+    <h1>{{ hysteria2_output_name | e }}</h1>
-      <h1>Hysteria2</h1>
     <p class="meta">
-        Сервер: <strong>{{ hysteria2_output_name }}</strong><br>
+      <strong>{{ hysteria2_domain | e }}:{{ hysteria2_listen_port }}</strong>
-        Домен: <strong>{{ hysteria2_domain }}:{{ hysteria2_listen_port }}</strong>
     </p>
+    <div class="badges">
       <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>
+    </div>
+{% endif %}
+
     <div class="users-grid">
 {% for user in hysteria2_export_users %}
       <article class="user-card">
-      <h2>{{ user.name }}</h2>
+        <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" 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>
+              <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>
+          <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>
+              <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>
 
-{% if user.has_png %}
+{% if user.has_png | default(false) %}
         <div class="qr-block">
           <img
             src="{{ user.name | e }}.png"
-          alt="QR-код {{ user.name | e }}"
+            alt="QR {{ user.name | e }}"
-          width="220"
+            width="160"
-          height="220"
+            height="160"
             role="button"
             tabindex="0"
             data-lightbox-src="{{ user.name | e }}.png"
-          data-lightbox-caption="{{ user.name | e }}"
+            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 }}"
           >
@@ -419,22 +440,19 @@
 {% endif %}
 
         <nav class="files" aria-label="Файлы">
-        <a href="{{ user.name | e }}.url" download>{{ user.name | e }}.url</a>
+          <a href="{{ user.name | e }}.url" download>.url</a>
-        <a href="{{ user.name | e }}.txt" download>{{ user.name | e }}.txt</a>
+          <a href="{{ user.name | e }}.txt" download>.txt</a>
-{% if user.has_png %}
+{% if user.has_png | default(false) %}
-        <a href="{{ user.name | e }}.png" download>{{ user.name | e }}.png</a>
+          <a href="{{ user.name | e }}.png" download>.png</a>
 {% endif %}
-        <a href="{{ user.name | e }}.qr.txt" download>{{ user.name | e }}.qr.txt</a>
+          <a href="{{ user.name | e }}.qr.txt" download>.qr.txt</a>
         </nav>
       </article>
 {% endfor %}
     </div>
+  </main>
 
-    <footer>
+  <footer>Сгенерировано Ansible · {{ generated_at | default('') }}</footer>
-      Сгенерировано Ansible · {{ generated_at | default('') }}
-    </footer>
-  </div>
-
   <div class="toast" id="toast">Скопировано!</div>
 
   <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="lightbox-caption">