Добавить lightbox для QR-кодов в HTML-каталогах

Клик по QR открывает крупный просмотр с подписью; закрытие по Esc,
кнопке и клику на фон. В global и server index.

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

@@ -247,7 +247,96 @@
       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);
+    }
+    .lightbox {
+      position: fixed;
+      inset: 0;
+      z-index: 200;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1.5rem;
+      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;
+      max-width: min(92vw, 420px);
+      width: 100%;
+      padding: 1.25rem 1.25rem 1rem;
+      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;
+      transform: translateY(12px) scale(0.96);
+      transition: transform 0.22s ease;
+    }
+    .lightbox.open .lightbox-panel {
+      transform: translateY(0) scale(1);
+    }
+    .lightbox-panel img {
+      width: 100%;
+      max-width: 320px;
+      height: auto;
+      aspect-ratio: 1;
+      background: #fff;
+      border-radius: 12px;
+      padding: 0.75rem;
+      image-rendering: pixelated;
+    }
+    .lightbox-caption {
+      margin-top: 0.85rem;
+      font-size: 0.95rem;
+      font-weight: 650;
+      color: var(--text);
+    }
+    .lightbox-hint {
+      margin-top: 0.25rem;
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    .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; }
     .files {
       display: flex;
       flex-wrap: wrap;
@@ -361,7 +450,17 @@
 
 {% if user.has_png | default(false) %}
           <div class="qr-block">
-            <img src="{{ server.dir | e }}/{{ user.name | e }}.png" alt="QR {{ user.name | e }}" width="160" height="160">
+            <img
+              src="{{ server.dir | e }}/{{ user.name | e }}.png"
+              alt="QR {{ user.name | e }}"
+              width="160"
+              height="160"
+              role="button"
+              tabindex="0"
+              data-lightbox-src="{{ server.dir | e }}/{{ user.name | e }}.png"
+              data-lightbox-caption="{{ server.name | e }} · {{ user.name | e }}"
+              aria-label="Открыть QR-код {{ user.name | e }}"
+            >
           </div>
 {% endif %}
 
@@ -383,6 +482,15 @@
   <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>
+      <img id="lightbox-img" src="" alt="">
+      <p class="lightbox-caption" id="lightbox-caption"></p>
+      <p class="lightbox-hint">Клик вне QR или Esc — закрыть</p>
+    </div>
+  </div>
+
   <script>
     function copyField(id, btn) {
       var el = document.getElementById(id);
@@ -407,6 +515,51 @@
       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');
+
+      function openLightbox(src, text, alt) {
+        img.src = src;
+        img.alt = alt || text || 'QR';
+        caption.textContent = text || '';
+        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');
+      }
+
+      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.addEventListener('click', openFromEl);
+        el.addEventListener('keydown', function (e) {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            openFromEl();
+          }
+        });
+      });
+
+      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();
+      });
+    })();
   </script>
 </body>
 </html>

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

@@ -178,7 +178,96 @@
       width: 100%;
       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);
+    }
+    .lightbox {
+      position: fixed;
+      inset: 0;
+      z-index: 200;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1.5rem;
+      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;
+      max-width: min(92vw, 420px);
+      width: 100%;
+      padding: 1.25rem 1.25rem 1rem;
+      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;
+      transform: translateY(12px) scale(0.96);
+      transition: transform 0.22s ease;
+    }
+    .lightbox.open .lightbox-panel {
+      transform: translateY(0) scale(1);
+    }
+    .lightbox-panel img {
+      width: 100%;
+      max-width: 320px;
+      height: auto;
+      aspect-ratio: 1;
+      background: #fff;
+      border-radius: 12px;
+      padding: 0.75rem;
+      image-rendering: pixelated;
+    }
+    .lightbox-caption {
+      margin-top: 0.85rem;
+      font-size: 0.95rem;
+      font-weight: 650;
+      color: var(--text);
+    }
+    .lightbox-hint {
+      margin-top: 0.25rem;
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    .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; }
     .files {
       display: flex;
       flex-wrap: wrap;
@@ -283,7 +372,17 @@
 
 {% if user.has_png %}
       <div class="qr-block">
-        <img src="{{ user.name | e }}.png" alt="QR-код {{ user.name | e }}" width="220" height="220">
+        <img
+          src="{{ user.name | e }}.png"
+          alt="QR-код {{ user.name | e }}"
+          width="220"
+          height="220"
+          role="button"
+          tabindex="0"
+          data-lightbox-src="{{ user.name | e }}.png"
+          data-lightbox-caption="{{ user.name | e }}"
+          aria-label="Открыть QR-код {{ user.name | e }}"
+        >
       </div>
 {% endif %}
 
@@ -305,6 +404,15 @@
 
   <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>
+      <img id="lightbox-img" src="" alt="">
+      <p class="lightbox-caption" id="lightbox-caption"></p>
+      <p class="lightbox-hint">Клик вне QR или Esc — закрыть</p>
+    </div>
+  </div>
+
   <script>
     function copyField(id, btn) {
       var el = document.getElementById(id);
@@ -329,6 +437,51 @@
       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');
+
+      function openLightbox(src, text, alt) {
+        img.src = src;
+        img.alt = alt || text || 'QR';
+        caption.textContent = text || '';
+        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');
+      }
+
+      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.addEventListener('click', openFromEl);
+        el.addEventListener('keydown', function (e) {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            openFromEl();
+          }
+        });
+      });
+
+      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();
+      });
+    })();
   </script>
 </body>
 </html>