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

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

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

README.md

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

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

@@ -516,10 +516,8 @@
       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 {
@@ -627,7 +625,7 @@
             </div>
             <div class="meta-item">
               <label>Режим</label>
-              <span>{{ server.mode | default('masquerade') | e }}</span>
+              <span>{{ server.mode | default('salamander') | e }}</span>
             </div>
             <div class="meta-item">
               <label>Пользователи</label>
@@ -718,19 +716,16 @@
             </div>
           </div>
 
-{% set _png = namespace(b64='', data='') %}
 {% if user.has_png | default(false) %}
-{% set _png.b64 = lookup('pipe', 'base64 < ' ~ ((hysteria2_output_dir ~ '/' ~ server.dir ~ '/' ~ user.name ~ '.png') | quote)) | regex_replace('\\s+', '') %}
-{% set _png.data = 'data:image/png;base64,' ~ _png.b64 %}
           <div class="qr-block">
             <img
-              src="{{ _png.data }}"
+              src="{{ server.dir | e }}/{{ user.name | e }}.png"
               alt="QR {{ user.name | e }}"
               width="160"
               height="160"
               role="button"
               tabindex="0"
-              data-lightbox-src="{{ _png.data }}"
+              data-lightbox-src="{{ server.dir | e }}/{{ user.name | e }}.png"
               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 }}"
@@ -739,12 +734,12 @@
 {% endif %}
 
           <nav class="files" aria-label="Файлы">
-            <a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.url" download="{{ server.name | e }}-{{ user.name | e }}.url" data-filename="{{ server.name | e }}-{{ user.name | e }}.url" data-text="{{ (user.url ~ '\n') | e }}">.url</a>
+            <a href="{{ server.dir | e }}/{{ user.name | e }}.url" download>.url</a>
-            <a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.txt" download="{{ server.name | e }}-{{ user.name | e }}.txt" data-filename="{{ server.name | e }}-{{ user.name | e }}.txt" data-text="{{ ('Server: ' ~ server.name ~ '\nDomain: ' ~ server.domain ~ ':' ~ server.port ~ '\nUser: ' ~ user.name ~ '\nPassword: ' ~ user.password ~ '\n\nURL:\n' ~ user.url ~ '\n') | e }}">.txt</a>
+            <a href="{{ server.dir | e }}/{{ user.name | e }}.txt" download>.txt</a>
-{% if user.has_png | default(false) and _png.b64 %}
+{% if user.has_png | default(false) %}
-            <a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.png" download="{{ server.name | e }}-{{ user.name | e }}.png" data-filename="{{ server.name | e }}-{{ user.name | e }}.png" data-png-b64="{{ _png.b64 }}">.png</a>
+            <a href="{{ server.dir | e }}/{{ user.name | e }}.png" download>.png</a>
 {% endif %}
-            <a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.qr.txt" download="{{ server.name | e }}-{{ user.name | e }}.qr.txt" data-filename="{{ server.name | e }}-{{ user.name | e }}.qr.txt" data-text="{{ lookup('file', hysteria2_output_dir ~ '/' ~ server.dir ~ '/' ~ user.name ~ '.qr.txt', errors='ignore') | default('URL: ' ~ user.url ~ '\n', true) | e }}">.qr.txt</a>
+            <a href="{{ server.dir | e }}/{{ user.name | e }}.qr.txt" download>.qr.txt</a>
           </nav>
         </article>
 {% endfor %}
@@ -764,10 +759,10 @@
       </div>
       <p class="lightbox-caption" id="lightbox-caption"></p>
       <div class="lightbox-actions">
-        <button type="button" class="lightbox-download" id="lightbox-download">
+        <a class="lightbox-download" id="lightbox-download" href="#" 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>
+        </a>
       </div>
     </div>
   </div>
@@ -830,76 +825,14 @@
       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.href = src;
-        downloadBtn.setAttribute('data-filename', safeName);
+        downloadBtn.setAttribute('download', filename || 'qr.png');
-        downloadBtn.setAttribute('aria-label', 'Скачать ' + safeName);
+        downloadBtn.setAttribute('aria-label', 'Скачать ' + (filename || 'qr.png'));
         box.classList.add('open');
         box.setAttribute('aria-hidden', 'false');
         document.body.classList.add('lightbox-open');
@@ -911,8 +844,7 @@
         box.setAttribute('aria-hidden', 'true');
         document.body.classList.remove('lightbox-open');
         img.removeAttribute('src');
-        downloadSrc = '';
+        downloadBtn.removeAttribute('href');
-        downloadBtn.removeAttribute('data-filename');
       }
 
       document.querySelectorAll('[data-lightbox-src]').forEach(function (el) {
@@ -933,7 +865,6 @@
         });
       });
 
-      downloadBtn.addEventListener('click', downloadQrImage);
       closeBtn.addEventListener('click', closeLightbox);
       box.addEventListener('click', function (e) {
         if (e.target === box) closeLightbox();
@@ -942,84 +873,6 @@
         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

@@ -333,10 +333,8 @@
       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);
@@ -424,19 +422,16 @@
           </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 }}"
+            src="{{ user.name | e }}.png"
             alt="QR {{ user.name | e }}"
             width="160"
             height="160"
             role="button"
             tabindex="0"
-            data-lightbox-src="{{ _png.data }}"
+            data-lightbox-src="{{ user.name | e }}.png"
             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 }}"
@@ -445,12 +440,12 @@
 {% 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 href="{{ user.name | e }}.url" download>.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>
+          <a href="{{ user.name | e }}.txt" download>.txt</a>
-{% if user.has_png | default(false) and _png.b64 %}
+{% if user.has_png | default(false) %}
-          <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>
+          <a href="{{ user.name | e }}.png" download>.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>
+          <a href="{{ user.name | e }}.qr.txt" download>.qr.txt</a>
         </nav>
       </article>
 {% endfor %}
@@ -468,10 +463,10 @@
       </div>
       <p class="lightbox-caption" id="lightbox-caption"></p>
       <div class="lightbox-actions">
-        <button type="button" class="lightbox-download" id="lightbox-download">
+        <a class="lightbox-download" id="lightbox-download" href="#" 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>
+        </a>
       </div>
     </div>
   </div>
@@ -507,76 +502,14 @@
       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.href = src;
-        downloadBtn.setAttribute('data-filename', safeName);
+        downloadBtn.setAttribute('download', filename || 'qr.png');
-        downloadBtn.setAttribute('aria-label', 'Скачать ' + safeName);
+        downloadBtn.setAttribute('aria-label', 'Скачать ' + (filename || 'qr.png'));
         box.classList.add('open');
         box.setAttribute('aria-hidden', 'false');
         document.body.classList.add('lightbox-open');
@@ -588,8 +521,7 @@
         box.setAttribute('aria-hidden', 'true');
         document.body.classList.remove('lightbox-open');
         img.removeAttribute('src');
-        downloadSrc = '';
+        downloadBtn.removeAttribute('href');
-        downloadBtn.removeAttribute('data-filename');
       }
 
       document.querySelectorAll('[data-lightbox-src]').forEach(function (el) {
@@ -610,7 +542,6 @@
         });
       });
 
-      downloadBtn.addEventListener('click', downloadQrImage);
       closeBtn.addEventListener('click', closeLightbox);
       box.addEventListener('click', function (e) {
         if (e.target === box) closeLightbox();
@@ -619,84 +550,6 @@
         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>