test2/Amnezia-Web-Panel-main
Template
1
2
Fork 1
Code Issues Pull Requests Packages Projects Releases 18 Wiki Activity

Replace emoji UI icons with a shared SVG icon system.

Browse Source 
Add an icons sprite and helpers so nav, actions, and protocol cards use consistent stroke icons.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
orohi
2026-07-26 04:58:06 +03:00
co-authored by Cursor
parent 30ae4d476c
commit 16d14a7256
12 changed files with 398 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+32 -28
View File
@@ -28,12 +28,13 @@
</head>
<body>
{% from "macros/icons.html" import icon %}
<div class="toast-container" id="toastContainer"></div>
<div class="app-container">
<header class="app-header">
<a href="/" class="app-logo" style="text-decoration:none">
<div class="logo-icon">{{ site_settings.logo }}</div>
<div class="logo-icon">{% if site_settings.logo and site_settings.logo|length <= 3 and not site_settings.logo.startswith('<') %}{{ site_settings.logo }}{% else %}{{ icon('shield') }}{% endif %}</div>
<div>
<div class="logo-text">{{ site_settings.title }}</div>
<div class="logo-subtitle">{{ site_settings.subtitle }}</div>
@@ -43,24 +44,23 @@
{% if current_user %}
<nav class="header-nav">
{% if current_user.role in ['admin', 'support'] %}
<a href="/" class="nav-link">{{ _('nav_servers') }}</a>
<a href="/users" class="nav-link">{{ _('nav_users') }}</a>
<a href="/invites" class="nav-link">{{ _('nav_invites') }}</a>
<a href="/" class="nav-link">{{ icon('server') }} {{ _('nav_servers') }}</a>
<a href="/users" class="nav-link">{{ icon('users') }} {{ _('nav_users') }}</a>
<a href="/invites" class="nav-link">{{ icon('link') }} {{ _('nav_invites') }}</a>
{% endif %}
{% if current_user.role == 'admin' %}
<a href="/settings" class="nav-link">{{ _('nav_settings') }}</a>
<a href="/settings" class="nav-link">{{ icon('settings') }} {{ _('nav_settings') }}</a>
{% endif %}
<a href="/my" class="nav-link">{{ _('nav_connections') }}</a>
<a href="/my" class="nav-link">{{ icon('layers') }} {{ _('nav_connections') }}</a>
</nav>
<div class="nav-user">
<button class="theme-toggle" onclick="openModal('langModal')" title="{{ _('select_lang') }}"
style="margin-right: var(--space-sm);">
{% if lang == 'ru' %}🇷🇺{% elif lang == 'fr' %}🇫🇷{% elif lang == 'zh' %}🇨🇳{% elif lang == 'fa'
%}🇮🇷{% else %}🇺🇸{% endif %}
style="margin-right: var(--space-sm);" type="button">
{{ icon('globe') }}
</button>
<button class="theme-toggle" onclick="toggleTheme()" title="{{ _('toggle_theme') }}"
id="themeToggle">🌙</button>
id="themeToggle" type="button">{{ icon('moon') }}</button>
<span class="nav-username">{{ current_user.username }}</span>
<span
class="badge badge-{{ 'success' if current_user.role == 'admin' else ('info' if current_user.role == 'support' else 'warn') }}"
@@ -72,12 +72,11 @@
{% else %}
<div class="nav-user">
<button class="theme-toggle" onclick="openModal('langModal')" title="{{ _('select_lang') }}"
style="margin-right: var(--space-sm);">
{% if lang == 'ru' %}🇷🇺{% elif lang == 'fr' %}🇫🇷{% elif lang == 'zh' %}🇨🇳{% elif lang == 'fa'
%}🇮🇷{% else %}🇺🇸{% endif %}
style="margin-right: var(--space-sm);" type="button">
{{ icon('globe') }}
</button>
<button class="theme-toggle" onclick="toggleTheme()" title="{{ _('toggle_theme') }}"
id="themeToggle">🌙</button>
id="themeToggle" type="button">{{ icon('moon') }}</button>
</div>
{% endif %}
</header>
@@ -96,19 +95,19 @@
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-sm);">
{% set langs = [
('en', '🇺🇸', 'lang_en'),
('ru', '🇷🇺', 'lang_ru'),
('fr', '🇫🇷', 'lang_fr'),
('zh', '🇨🇳', 'lang_zh'),
('fa', '🇮🇷', 'lang_fa')
('en', 'EN', 'lang_en'),
('ru', 'RU', 'lang_ru'),
('fr', 'FR', 'lang_fr'),
('zh', 'ZH', 'lang_zh'),
('fa', 'FA', 'lang_fa')
] %}
{% for l_code, l_flag, l_key in langs %}
<a href="/set_lang/{{ l_code }}" class="btn btn-secondary"
style="justify-content: flex-start; gap: var(--space-md); padding: var(--space-md);">
<span style="font-size: 1.4rem;">{{ l_flag }}</span>
<span class="lang-code">{{ l_flag }}</span>
<span style="font-weight: 500;">{{ _(l_key) }}</span>
{% if lang == l_code %}
<span class="lang-check">✓</span>
<span class="lang-check">{{ icon('check') }}</span>
{% endif %}
</a>
{% endfor %}
@@ -120,6 +119,12 @@
window.I18N = {{ translations_json | safe }};
window._ = function (key) { return window.I18N[key] || key; };
/* ===== SVG icons (same sprite as templates) ===== */
window.uiIcon = function (name, className) {
const cls = className ? `ui-icon ${className}` : 'ui-icon';
return `<svg class="${cls}" aria-hidden="true" focusable="false"><use href="/static/icons.svg#${name}"></use></svg>`;
};
/* ===== Theme Toggle ===== */
(function () {
const saved = localStorage.getItem('theme') || 'dark';
@@ -128,10 +133,9 @@
const updateUI = () => {
const isLight = document.documentElement.getAttribute('data-theme') === 'light';
document.querySelectorAll('.theme-toggle').forEach(btn => {
const isLang = btn.getAttribute('onclick').includes('langModal');
if (!isLang) {
btn.textContent = isLight ? '☀️' : '🌙';
}
const onclick = btn.getAttribute('onclick') || '';
if (onclick.includes('langModal')) return;
btn.innerHTML = uiIcon(isLight ? 'sun' : 'moon');
});
};
@@ -166,8 +170,8 @@
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;
const icons = { success: '✓', error: '✕', info: 'ℹ' };
toast.innerHTML = `<span>${icons[type] || 'ℹ'}</span> <span>${message}</span>`;
const icons = { success: 'check', error: 'x', info: 'info' };
toast.innerHTML = `${uiIcon(icons[type] || 'info')} <span>${message}</span>`;
container.appendChild(toast);
setTimeout(() => {
@@ -273,4 +277,4 @@
{% block scripts %}{% endblock %}
</body>
</html>
</html>
templates/guest.html
+2 -1
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% from "macros/icons.html" import icon %}
{% block title_extra %} — {{ _('guest_title') }}{% endblock %}
@@ -12,7 +13,7 @@
{% if need_password %}
<div style="padding: var(--space-lg); text-align: center;">
<div class="logo-icon" style="font-size: 3rem; margin-bottom: var(--space-md);">🔐</div>
<div class="logo-icon" style="width:64px;height:64px;margin:0 auto var(--space-md);">{{ icon('lock') }}</div>
<p style="margin-bottom: var(--space-md);">{{ _('guest_protected_desc') }}</p>
<form id="authForm" onsubmit="authGuest(event)"
templates/index.html
+8 -7
View File
@@ -1,14 +1,15 @@
{% extends "base.html" %}
{% from "macros/icons.html" import icon %}
{% block content %}
<section>
<div class="flex items-center justify-between" style="margin-bottom: var(--space-lg);">
<h1 class="section-title" style="margin-bottom:0;">
<span class="icon">🖥</span>
<span class="icon">{{ icon('server') }}</span>
{{ _('nav_servers') }}
</h1>
<button class="btn btn-primary" onclick="openModal('addServerModal')">
<span>＋</span> {{ _('add_server') }}
{{ icon('plus') }} {{ _('add_server') }}
</button>
</div>
@@ -20,7 +21,7 @@
data-username="{{ server.username }}" data-auth="{{ 'key' if server.private_key else 'password' }}"
draggable="true">
<div class="server-meta">
<div class="server-icon">🖥</div>
<div class="server-icon">{{ icon('server') }}</div>
<div style="min-width: 0; flex: 1;">
<div class="server-name">
<span class="ping-dot ping-pending" id="ping-{{ loop.index0 }}"
@@ -57,11 +58,11 @@
</a>
<button class="btn btn-secondary btn-sm btn-icon" onclick="openEditServer(this)"
title="{{ _('edit') }}">
✏️
{{ icon('pencil') }}
</button>
<button class="btn btn-danger btn-sm btn-icon" onclick="deleteServer({{ loop.index0 }})"
title="{{ _('delete') }}">
🗑
{{ icon('trash') }}
</button>
</div>
</div>
@@ -69,13 +70,13 @@
</div>
{% else %}
<div class="empty-state">
<div class="empty-icon">🛡</div>
<div class="empty-icon">{{ icon('shield') }}</div>
<div class="empty-title">{{ _('no_servers') }}</div>
<div class="empty-desc">
{{ _('add_server_desc') }}
</div>
<button class="btn btn-primary" onclick="openModal('addServerModal')">
<span>＋</span> {{ _('add_server') }}
{{ icon('plus') }} {{ _('add_server') }}
</button>
</div>
{% endif %}
templates/invites.html
+9 -8
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% from "macros/icons.html" import icon %}
{% block title_extra %} — {{ _('invites_title') }}{% endblock %}
@@ -7,18 +8,18 @@
<div style="display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-md); flex-wrap:wrap; margin-bottom:var(--space-lg);">
<div>
<h1 class="section-title" style="margin-bottom:var(--space-xs);">
<span class="icon">🔗</span>
<span class="icon">{{ icon('link') }}</span>
{{ _('invites_title') }}
</h1>
<p style="color:var(--text-muted); margin:0; max-width:42rem; line-height:1.45;">{{ _('invites_hint') }}</p>
</div>
<button class="btn btn-primary" onclick="openCreateInvite()">
<span>＋</span> {{ _('invite_create') }}
{{ icon('plus') }} {{ _('invite_create') }}
</button>
</div>
<div id="invitesEmpty" class="empty-state {% if invites %}hidden{% endif %}">
<div class="empty-icon">🔗</div>
<div class="empty-icon">{{ icon('link') }}</div>
<div class="empty-title">{{ _('invites_empty') }}</div>
<div class="empty-desc">{{ _('invites_empty_desc') }}</div>
</div>
@@ -58,12 +59,12 @@
</div>
<div style="display:flex; gap:var(--space-xs); flex-wrap:wrap;">
<button class="btn btn-primary btn-sm" onclick="copyInviteUrl('{{ inv.token }}')">📋 {{ _('copy') }}</button>
<button class="btn btn-secondary btn-sm" onclick="editInvite('{{ inv.id }}')">✏️</button>
<button class="btn btn-secondary btn-sm" onclick="toggleInvite('{{ inv.id }}', {{ 'false' if inv.enabled else 'true' }})">
{% if inv.enabled %}⏸{% else %}▶️{% endif %}
<button class="btn btn-primary btn-sm" onclick="copyInviteUrl('{{ inv.token }}')">{{ icon('copy') }} {{ _('copy') }}</button>
<button class="btn btn-secondary btn-sm btn-icon" onclick="editInvite('{{ inv.id }}')" title="{{ _('edit') }}">{{ icon('pencil') }}</button>
<button class="btn btn-secondary btn-sm btn-icon" onclick="toggleInvite('{{ inv.id }}', {{ 'false' if inv.enabled else 'true' }})" title="{% if inv.enabled %}{{ _('disabled') }}{% else %}{{ _('invite_active') }}{% endif %}">
{% if inv.enabled %}{{ icon('pause') }}{% else %}{{ icon('play') }}{% endif %}
</button>
<button class="btn btn-danger btn-sm" onclick="deleteInvite('{{ inv.id }}')">🗑</button>
<button class="btn btn-danger btn-sm btn-icon" onclick="deleteInvite('{{ inv.id }}')" title="{{ _('delete') }}">{{ icon('trash') }}</button>
</div>
</div>
{% endfor %}
templates/login.html
+19 -17
View File
@@ -76,20 +76,20 @@
</head>
<body>
{% from "macros/icons.html" import icon %}
<button class="theme-toggle" onclick="openModal('langModal')" id="langToggle"
style="position:fixed; top:20px; {% if lang == 'fa' %}left:65px;{% else %}right:65px;{% endif %} z-index:10;"
title="{{ _('select_lang') }}">
{% if lang == 'ru' %}🇷🇺{% elif lang == 'fr' %}🇫🇷{% elif lang == 'zh' %}🇨🇳{% elif lang == 'fa' %}🇮🇷{%
else %}🇺🇸{% endif %}
title="{{ _('select_lang') }}" type="button">
{{ icon('globe') }}
</button>
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle"
style="position:fixed; top:20px; {% if lang == 'fa' %}left:20px;{% else %}right:20px;{% endif %} z-index:10;"
title="{{ _('toggle_theme') }}">🌙</button>
title="{{ _('toggle_theme') }}" type="button">{{ icon('moon') }}</button>
<div class="login-wrapper">
<div class="login-card">
<div class="login-logo">
<div class="logo-icon">{{ site_settings.logo or '🛡' }}</div>
<div class="logo-icon">{{ icon('shield') }}</div>
<div class="logo-text">{{ site_settings.title or 'Amnezia Panel' }}</div>
<div class="logo-subtitle">{{ site_settings.subtitle or 'Web Panel' }}</div>
</div>
@@ -153,19 +153,19 @@
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-sm);">
{% set langs = [
('en', '🇺🇸', 'lang_en'),
('ru', '🇷🇺', 'lang_ru'),
('fr', '🇫🇷', 'lang_fr'),
('zh', '🇨🇳', 'lang_zh'),
('fa', '🇮🇷', 'lang_fa')
('en', 'EN', 'lang_en'),
('ru', 'RU', 'lang_ru'),
('fr', 'FR', 'lang_fr'),
('zh', 'ZH', 'lang_zh'),
('fa', 'FA', 'lang_fa')
] %}
{% for l_code, l_flag, l_key in langs %}
<a href="/set_lang/{{ l_code }}" class="btn btn-secondary"
style="justify-content: flex-start; gap: var(--space-md); padding: var(--space-md);">
<span style="font-size: 1.4rem;">{{ l_flag }}</span>
<span class="lang-code">{{ l_flag }}</span>
<span style="font-weight: 500;">{{ _(l_key) }}</span>
{% if lang == l_code %}
<span class="lang-check">✓</span>
<span class="lang-check">{{ icon('check') }}</span>
{% endif %}
</a>
{% endfor %}
@@ -177,6 +177,11 @@
window.I18N = {{ translations_json | safe }};
window._ = function (key) { return window.I18N[key] || key; };
window.uiIcon = function (name, className) {
const cls = className ? `ui-icon ${className}` : 'ui-icon';
return `<svg class="${cls}" aria-hidden="true" focusable="false"><use href="/static/icons.svg#${name}"></use></svg>`;
};
/* Theme toggle */
(function () {
const saved = localStorage.getItem('theme') || 'dark';
@@ -184,11 +189,8 @@
const updateUI = () => {
const isLight = document.documentElement.getAttribute('data-theme') === 'light';
document.querySelectorAll('.theme-toggle').forEach(btn => {
if (btn.id === 'themeToggle') {
btn.textContent = isLight ? '☀️' : '🌙';
}
});
const btn = document.getElementById('themeToggle');
if (btn) btn.innerHTML = uiIcon(isLight ? 'sun' : 'moon');
};
if (document.readyState === 'loading') {
templates/macros/icons.html
+4
View File
@@ -0,0 +1,4 @@
{# SVG icon via sprite — usage: {% from "macros/icons.html" import icon %} {{ icon('server') }} #}
{% macro icon(name, class='', size=None) -%}
<svg class="ui-icon{% if class %} {{ class }}{% endif %}"{% if size %} style="width:{{ size }};height:{{ size }};"{% endif %} aria-hidden="true" focusable="false"><use href="/static/icons.svg#{{ name }}"></use></svg>
{%- endmacro %}
templates/my_connections.html
+5 -4
View File
@@ -1,11 +1,12 @@
{% extends "base.html" %}
{% from "macros/icons.html" import icon %}
{% block title_extra %} — {{ _('my_connections_title') }}{% endblock %}
{% block content %}
<section>
<h1 class="section-title">
<span class="icon">🔗</span>
<span class="icon">{{ icon('layers') }}</span>
{{ _('my_connections_title') }}
</h1>
@@ -14,11 +15,11 @@
{% for c in connections %}
<div class="client-item">
<div class="client-info">
<div class="client-avatar">🔗</div>
<div class="client-avatar">{{ icon('link') }}</div>
<div>
<div class="client-name">{{ c.name or 'VPN Connection' }}</div>
<div class="client-meta">
<span>🖥 {{ c.server_name }}</span>
<span style="display:inline-flex;align-items:center;gap:4px;">{{ icon('server') }} {{ c.server_name }}</span>
<span class="badge badge-info" style="font-size:0.65rem;">
{{ 'AmneziaWG' if c.protocol == 'awg' else ('AmneziaWG 2.0' if c.protocol == 'awg2' else ('AWG Legacy' if c.protocol == 'awg_legacy' else
('Xray' if c.protocol == 'xray' else c.protocol | upper))) }}
@@ -40,7 +41,7 @@
</div>
{% else %}
<div class="empty-state">
<div class="empty-icon">🔗</div>
<div class="empty-icon">{{ icon('link') }}</div>
<div class="empty-title">{{ _('no_connections') }}</div>
<div class="empty-desc">{{ _('no_connections_user_desc') }}</div>
</div>
templates/server.html
+55 -54
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% from "macros/icons.html" import icon %}
{% block title_extra %} — {{ server.name }}{% endblock %}
@@ -125,7 +126,7 @@
<div class="card" style="margin-bottom: var(--space-xl);">
<div class="flex items-center justify-between" style="flex-wrap: wrap; gap: var(--space-md);">
<div class="flex items-center gap-md">
<div class="server-icon" style="width:56px; height:56px; font-size:1.6rem;">🖥</div>
<div class="server-icon" style="width:56px; height:56px; font-size:1.6rem;">{{ icon('server') }}</div>
<div>
<h1 style="font-size:1.4rem; font-weight:700;">{{ server.name }}</h1>
<div class="font-mono text-muted text-sm">{{ server.host }}:{{ server.ssh_port }} • {{ server.username
@@ -146,10 +147,10 @@
<div class="flex gap-md" style="flex-wrap:wrap" id="statusBadges"></div>
<div class="server-status-actions">
<button class="btn btn-primary btn-sm" onclick="openMarketplaceModal()" id="marketplaceBtn">
<span>🛒</span> {{ _('marketplace') }}
<span>{{ icon('cart') }}</span> {{ _('marketplace') }}
</button>
<button class="btn btn-secondary btn-sm" onclick="openManagementModal()" id="managementBtn">
<span>⚙️</span> {{ _('management') }}
<span>{{ icon('settings') }}</span> {{ _('management') }}
</button>
</div>
</div>
@@ -163,7 +164,7 @@
<span>{{ _('checking_server') }}</span>
</div>
<div class="empty-state hidden" id="installedAppsEmpty" style="padding: var(--space-xl) 0; margin-bottom: var(--space-xl);">
<div class="empty-icon">🛒</div>
<div class="empty-icon">{{ icon('cart') }}</div>
<div class="empty-title">{{ _('no_installed_apps') }}</div>
<div class="empty-desc">{{ _('no_installed_apps_desc') }}</div>
<button class="btn btn-primary btn-sm" onclick="openMarketplaceModal()" style="margin-top: var(--space-md);">
@@ -175,7 +176,7 @@
<!-- AWG2 Card (first - new version) -->
<div class="card card-hover protocol-card protocol-awg" id="proto-awg2">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">✨</div>
<div class="protocol-icon">{{ icon('sparkles') }}</div>
<div class="flex gap-sm" id="awg2-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">AmneziaWG 2.0 <span
@@ -201,7 +202,7 @@
<!-- AWG Card -->
<div class="card card-hover protocol-card protocol-awg" id="proto-awg">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">🔮</div>
<div class="protocol-icon">{{ icon('shield') }}</div>
<div class="flex gap-sm" id="awg-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">AmneziaWG</div>
@@ -225,7 +226,7 @@
<!-- AWG Legacy Card -->
<div class="card card-hover protocol-card protocol-legacy" id="proto-awg-legacy">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">📡</div>
<div class="protocol-icon">{{ icon('radio') }}</div>
<div class="flex gap-sm" id="awg-legacy-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">AmneziaWG Legacy</div>
@@ -249,7 +250,7 @@
<!-- Xray Card -->
<div class="card card-hover protocol-card protocol-xray" id="proto-xray">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">⚡</div>
<div class="protocol-icon">{{ icon('zap') }}</div>
<div class="flex gap-sm" id="xray-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">Xray (VLESS-Reality)</div>
@@ -273,7 +274,7 @@
<!-- Telemt Card -->
<div class="card card-hover protocol-card protocol-telemt" id="proto-telemt">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">✈</div>
<div class="protocol-icon">{{ icon('plane') }}</div>
<div class="flex gap-sm" id="telemt-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">Telemt (Telegram Proxy)</div>
@@ -297,7 +298,7 @@
<!-- WireGuard Card -->
<div class="card card-hover protocol-card protocol-wireguard" id="proto-wireguard">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">🔒</div>
<div class="protocol-icon">{{ icon('lock') }}</div>
<div class="flex gap-sm" id="wireguard-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">WireGuard</div>
@@ -325,9 +326,9 @@
<span class="promo-orb"></span>
<span class="promo-orb"></span>
</div>
<span class="promo-lock-badge">🔒 {{ _('coming_soon') }}</span>
<span class="promo-lock-badge">{{ icon('lock') }} {{ _('coming_soon') }}</span>
<div class="promo-content">
<div class="promo-icon" aria-hidden="true">🧠</div>
<div class="promo-icon" aria-hidden="true">{{ icon('brain') }}</div>
<div class="promo-text">
<div class="promo-title">AIVPN</div>
<div class="promo-subtitle">{{ _('aivpn_subtitle') }}</div>
@@ -341,7 +342,7 @@
<!-- DNS Card -->
<div class="card card-hover protocol-card protocol-dns" id="proto-dns">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">🔍</div>
<div class="protocol-icon">{{ icon('search') }}</div>
<div class="flex gap-sm" id="dns-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">AmneziaDNS</div>
@@ -365,7 +366,7 @@
<!-- AdGuard Home Card -->
<div class="card card-hover protocol-card protocol-adguard" id="proto-adguard">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">🛡️</div>
<div class="protocol-icon">{{ icon('shield-check') }}</div>
<div class="flex gap-sm" id="adguard-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">AdGuard Home</div>
@@ -389,7 +390,7 @@
<!-- SOCKS5 Card -->
<div class="card card-hover protocol-card protocol-socks5" id="proto-socks5">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">🧦</div>
<div class="protocol-icon">{{ icon('network') }}</div>
<div class="flex gap-sm" id="socks5-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">SOCKS5 Proxy</div>
@@ -414,7 +415,7 @@
<!-- NGINX Card -->
<div class="card card-hover protocol-card protocol-nginx" id="proto-nginx">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm);">
<div class="protocol-icon">🌐</div>
<div class="protocol-icon">{{ icon('globe') }}</div>
<div class="flex gap-sm" id="nginx-ctrl" style="display:none!important;"></div>
</div>
<div class="protocol-name">NGINX</div>
@@ -443,9 +444,9 @@
<span class="promo-orb"></span>
<span class="promo-orb"></span>
</div>
<span class="promo-lock-badge">🔒 {{ _('coming_soon') }}</span>
<span class="promo-lock-badge">{{ icon('lock') }} {{ _('coming_soon') }}</span>
<div class="promo-content">
<div class="promo-icon" aria-hidden="true">🛡️</div>
<div class="promo-icon" aria-hidden="true">{{ icon('shield-check') }}</div>
<div class="promo-text">
<div class="promo-title">{{ _('revproxy_title') }}</div>
<div class="promo-subtitle">{{ _('revproxy_subtitle') }}</div>
@@ -463,9 +464,9 @@
<span class="promo-orb"></span>
<span class="promo-orb"></span>
</div>
<span class="promo-lock-badge">🔒 Coming soon</span>
<span class="promo-lock-badge">{{ icon('lock') }} Coming soon</span>
<div class="promo-content">
<div class="promo-icon" aria-hidden="true">🧠</div>
<div class="promo-icon" aria-hidden="true">{{ icon('brain') }}</div>
<div class="promo-text">
<div class="promo-title">AIVPN</div>
<div class="promo-subtitle">AI-driven protocol selection that picks the right tunnel for the moment. Land it sooner — drop a star.</div>
@@ -480,7 +481,7 @@
<div class="clients-section" id="connectionsSection" style="display:none;">
<div class="clients-header">
<h2 class="section-title" style="margin-bottom:0;">
<span class="icon">🔗</span>
<span class="icon">{{ icon('link') }}</span>
{{ _('connections') }}
</h2>
<div class="flex gap-sm items-center">
@@ -494,7 +495,7 @@
<option value="wireguard">WireGuard</option>
</select>
<button class="btn btn-primary btn-sm" onclick="openAddConnectionModal()">
<span>＋</span> {{ _('add') }}
<span>{{ icon('plus') }}</span> {{ _('add') }}
</button>
</div>
</div>
@@ -505,7 +506,7 @@
<span>{{ _('loading_connections') }}</span>
</div>
<div id="connectionsEmpty" class="empty-state hidden" style="padding: var(--space-xl) 0;">
<div class="empty-icon">🔗</div>
<div class="empty-icon">{{ icon('link') }}</div>
<div class="empty-title">{{ _('no_connections') }}</div>
<div class="empty-desc">{{ _('no_connections_desc') }}</div>
</div>
@@ -518,7 +519,7 @@
<div class="modal" style="max-width: 980px;">
<div class="modal-header">
<div>
<h2 class="modal-title">🛒 {{ _('marketplace') }}</h2>
<h2 class="modal-title">{{ icon('cart') }} {{ _('marketplace') }}</h2>
<div class="text-muted text-sm">{{ _('marketplace_desc') }}</div>
</div>
<button class="modal-close" onclick="closeModal('marketplaceModal')">×</button>
@@ -532,7 +533,7 @@
<div class="modal" style="max-width: 520px;">
<div class="modal-header">
<div>
<h2 class="modal-title">⚙️ {{ _('server_management') }}</h2>
<h2 class="modal-title">{{ icon('settings') }} {{ _('server_management') }}</h2>
<div class="text-muted text-sm">{{ _('server_management_desc') }}</div>
</div>
<button class="modal-close" onclick="closeModal('managementModal')">×</button>
@@ -758,7 +759,7 @@
</div>
<div id="backupLoading" class="form-hint hidden">{{ _('loading') }}</div>
<div id="backupEmpty" class="empty-state hidden" style="padding:var(--space-xl);">
<div class="empty-icon">📦</div>
<div class="empty-icon">{{ icon('package') }}</div>
<div class="empty-title">{{ _('no_backups') }}</div>
<div class="empty-desc">{{ _('no_backups_desc') }}</div>
</div>
@@ -952,21 +953,21 @@
const SERVER_ID = {{ server_id }};
const SERVER_HOST = "{{ server.host }}";
const MARKETPLACE_APPS = [
{ proto: 'awg2', category: 'protocols', icon: '✨', title: 'AmneziaWG 2.0', descKey: 'awg_desc', badge: 'NEW' },
{ proto: 'awg', category: 'protocols', icon: '🔮', title: 'AmneziaWG', descKey: 'awg_desc' },
{ proto: 'awg_legacy', category: 'protocols', icon: '📡', title: 'AmneziaWG Legacy', descKey: 'awg_legacy_desc' },
{ proto: 'xray', category: 'protocols', icon: '⚡', title: 'Xray (VLESS-Reality)', descKey: 'xray_desc' },
{ proto: 'telemt', category: 'protocols', icon: '✈', title: 'Telemt (Telegram Proxy)', descKey: 'telemt_desc' },
{ proto: 'wireguard', category: 'protocols', icon: '🔒', title: 'WireGuard', descKey: 'wireguard_desc' },
{ proto: 'dns', category: 'services', icon: '🔍', title: 'AmneziaDNS', descKey: 'dns_desc' },
{ proto: 'adguard', category: 'services', icon: '🛡️', title: 'AdGuard Home', descKey: 'adguard_desc' },
{ proto: 'socks5', category: 'services', icon: '🧦', title: 'SOCKS5 Proxy', descKey: 'socks5_desc' },
{ proto: 'nginx', category: 'web_servers', icon: '🌐', title: 'NGINX', descKey: 'nginx_desc' },
{ proto: 'awg2', category: 'protocols', icon: 'sparkles', title: 'AmneziaWG 2.0', descKey: 'awg_desc', badge: 'NEW' },
{ proto: 'awg', category: 'protocols', icon: 'shield', title: 'AmneziaWG', descKey: 'awg_desc' },
{ proto: 'awg_legacy', category: 'protocols', icon: 'radio', title: 'AmneziaWG Legacy', descKey: 'awg_legacy_desc' },
{ proto: 'xray', category: 'protocols', icon: 'zap', title: 'Xray (VLESS-Reality)', descKey: 'xray_desc' },
{ proto: 'telemt', category: 'protocols', icon: 'plane', title: 'Telemt (Telegram Proxy)', descKey: 'telemt_desc' },
{ proto: 'wireguard', category: 'protocols', icon: 'lock', title: 'WireGuard', descKey: 'wireguard_desc' },
{ proto: 'dns', category: 'services', icon: 'search', title: 'AmneziaDNS', descKey: 'dns_desc' },
{ proto: 'adguard', category: 'services', icon: 'shield-check', title: 'AdGuard Home', descKey: 'adguard_desc' },
{ proto: 'socks5', category: 'services', icon: 'network', title: 'SOCKS5 Proxy', descKey: 'socks5_desc' },
{ proto: 'nginx', category: 'web_servers', icon: 'globe', title: 'NGINX', descKey: 'nginx_desc' },
];
const MARKETPLACE_CATEGORIES = [
{ id: 'protocols', icon: '🔐', titleKey: 'protocols' },
{ id: 'services', icon: '🛠', titleKey: 'services' },
{ id: 'web_servers', icon: '🌐', titleKey: 'web_servers' },
{ id: 'protocols', icon: 'lock', titleKey: 'protocols' },
{ id: 'services', icon: 'wrench', titleKey: 'services' },
{ id: 'web_servers', icon: 'globe', titleKey: 'web_servers' },
];
let currentInstallProto = 'awg';
let currentInstallAnother = false;
@@ -1041,16 +1042,16 @@
el.innerHTML = `
<div class="flex" style="flex-direction: column; gap: var(--space-sm);">
<button class="btn btn-secondary" onclick="closeModal('managementModal'); checkServer();" style="justify-content: flex-start; padding: 12px 20px;">
<span style="font-size: 1.2rem; margin-right: 8px;">🔄</span> ${_('check_server_services')}
<span style="font-size: 1.2rem; margin-right: 8px; display:inline-flex;">${uiIcon('refresh')}</span> ${_('check_server_services')}
</button>
<button class="btn btn-warning" onclick="closeModal('managementModal'); rebootServer();" style="justify-content: flex-start; padding: 12px 20px;">
<span style="font-size: 1.2rem; margin-right: 8px;">🔁</span> ${_('reboot_server')}
<span style="font-size: 1.2rem; margin-right: 8px; display:inline-flex;">${uiIcon('refresh')}</span> ${_('reboot_server')}
</button>
<button class="btn btn-danger" onclick="closeModal('managementModal'); clearServer();" style="justify-content: flex-start; padding: 12px 20px;">
<span style="font-size: 1.2rem; margin-right: 8px;">🧹</span> ${_('clear_server')}
<span style="font-size: 1.2rem; margin-right: 8px; display:inline-flex;">${uiIcon('trash')}</span> ${_('clear_server')}
</button>
<button class="btn btn-danger" onclick="closeModal('managementModal'); deleteServer();" style="justify-content: flex-start; padding: 12px 20px;">
<span style="font-size: 1.2rem; margin-right: 8px;">🗑️</span> ${_('remove_server')}
<span style="font-size: 1.2rem; margin-right: 8px; display:inline-flex;">${uiIcon('trash')}</span> ${_('remove_server')}
</button>
</div>
`;
@@ -1080,7 +1081,7 @@
const apps = MARKETPLACE_APPS.filter(app => app.category === cat.id);
return `
<div class="marketplace-category">
<div class="marketplace-category-title"><span>${cat.icon}</span> ${_(cat.titleKey)}</div>
<div class="marketplace-category-title"><span>${uiIcon(cat.icon)}</span> ${_(cat.titleKey)}</div>
<div class="marketplace-grid">
${apps.map(app => {
const installed = baseInstalled(app.proto);
@@ -1089,7 +1090,7 @@
<div class="marketplace-app-card">
<div class="marketplace-app-top">
<div class="flex items-center gap-sm">
<div class="protocol-icon" style="width:38px;height:38px;font-size:1.2rem;">${app.icon}</div>
<div class="protocol-icon" style="width:38px;height:38px;font-size:1.2rem;">${uiIcon(app.icon)}</div>
<div>
<div class="marketplace-app-title">${app.title} ${app.badge ? `<span class="badge badge-info" style="font-size:0.65rem;">${app.badge}</span>` : ''}</div>
${marketplaceAppStatus(app.proto)}
@@ -1214,10 +1215,10 @@
const el = document.getElementById('serverStats');
el.style.display = '';
el.innerHTML = `
<span class="stat-pill" title="CPU">⚡ ${stats.cpu || 0}%</span>
<span class="stat-pill" title="RAM: ${formatBytes(stats.ram_used)} / ${formatBytes(stats.ram_total)}">🧠 ${stats.ram_percent || 0}%</span>
<span class="stat-pill" title="Disk: ${formatBytes(stats.disk_used)} / ${formatBytes(stats.disk_total)}">💾 ${stats.disk_percent || 0}%</span>
<span class="stat-pill" title="Network">🌐 ↓${formatBytes(stats.net_rx)} ↑${formatBytes(stats.net_tx)}</span>
<span class="stat-pill" title="CPU">${uiIcon('zap')} ${stats.cpu || 0}%</span>
<span class="stat-pill" title="RAM: ${formatBytes(stats.ram_used)} / ${formatBytes(stats.ram_total)}">${uiIcon('brain')} ${stats.ram_percent || 0}%</span>
<span class="stat-pill" title="Disk: ${formatBytes(stats.disk_used)} / ${formatBytes(stats.disk_total)}">${uiIcon('package')} ${stats.disk_percent || 0}%</span>
<span class="stat-pill" title="Network">${uiIcon('globe')} ↓${formatBytes(stats.net_rx)} ↑${formatBytes(stats.net_tx)}</span>
`;
} catch (err) {
console.warn('Stats load failed:', err);
@@ -2220,11 +2221,11 @@
if (!enabled) metaHtml += `<span class="badge badge-danger" style="font-size:0.65rem">${_('stop')}</span>`;
const disabledStyle = enabled ? '' : 'opacity:0.5;';
const toggleIcon = enabled ? '🔵' : '⚫';
const toggleIcon = enabled ? uiIcon('pause') : uiIcon('play');
const toggleTitle = enabled ? _('stop') : _('starting');
// Show config button for all WireGuard-based clients.
// If clientPrivateKey is missing (created via native app), we show a warning instead.
const canShowConfig = proto === 'xray' || true; // always show 📄 button
const canShowConfig = proto === 'xray' || true; // always show config button
listEl.innerHTML += `
<div class="client-item" style="${disabledStyle}">
@@ -2236,10 +2237,10 @@
</div>
</div>
<div class="client-actions">
<button class="btn btn-secondary btn-sm btn-icon" onclick="showConnectionConfig('${escapeJs(client.clientId)}', '${escapeJs(name)}', ${!!userData.clientPrivateKey || proto === 'xray' || proto === 'telemt'})" title="${_('config')}">📄</button>
${proto === 'telemt' ? `<button class="btn btn-secondary btn-sm btn-icon" onclick="editConnection('${escapeJs(client.clientId)}')" title="${_('edit')}">✏️</button>` : ''}
<button class="btn btn-secondary btn-sm btn-icon" onclick="showConnectionConfig('${escapeJs(client.clientId)}', '${escapeJs(name)}', ${!!userData.clientPrivateKey || proto === 'xray' || proto === 'telemt'})" title="${_('config')}">${uiIcon('file')}</button>
${proto === 'telemt' ? `<button class="btn btn-secondary btn-sm btn-icon" onclick="editConnection('${escapeJs(client.clientId)}')" title="${_('edit')}">${uiIcon('pencil')}</button>` : ''}
<button class="btn btn-secondary btn-sm btn-icon" onclick="toggleConnection('${escapeJs(client.clientId)}', ${!enabled})" title="${toggleTitle}">${toggleIcon}</button>
<button class="btn btn-danger btn-sm btn-icon" onclick="removeConnection('${escapeJs(client.clientId)}')" title="${_('delete')}">🗑</button>
<button class="btn btn-danger btn-sm btn-icon" onclick="removeConnection('${escapeJs(client.clientId)}')" title="${_('delete')}">${uiIcon('trash')}</button>
</div>
</div>
`;
templates/settings.html
+7 -6
View File
@@ -1,10 +1,11 @@
{% extends "base.html" %}
{% from "macros/icons.html" import icon %}
{% block title_extra %} — {{ _('nav_settings') }}{% endblock %}
{% block content %}
<div class="section-title">
<span class="icon">⚙️</span>
<span class="icon">{{ icon('settings') }}</span>
{{ _('settings_title') }}
</div>
@@ -65,7 +66,7 @@
<input type="text" class="form-input" id="guest_link_display" readonly
value="{% if settings.guest.token %}{{ request.url.scheme }}://{{ request.url.netloc }}/guest/{{ settings.guest.token }}{% endif %}"
placeholder="{{ _('guest_link_placeholder') }}">
<button type="button" class="btn btn-secondary btn-sm" onclick="copyGuestLink()">📋</button>
<button type="button" class="btn btn-secondary btn-sm btn-icon" onclick="copyGuestLink()" title="{{ _('copy') }}">{{ icon('copy') }}</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="regenGuestToken()" title="{{ _('guest_regen_token') }}">🔄</button>
</div>
<input type="hidden" id="guest_token" value="{{ settings.guest.token or '' }}">
@@ -376,7 +377,7 @@
</button>
<button type="button" class="btn btn-danger btn-sm" onclick="deleteSyncRemnawave()"
id="syncDelBtn">
<span id="syncDelBtnText">🗑 {{ _('delete_sync_btn') }}</span>
<span id="syncDelBtnText">{{ icon('trash') }} {{ _('delete_sync_btn') }}</span>
<div class="spinner hidden" id="syncDelSpinner" style="width:14px; height:14px;"></div>
</button>
</div>
@@ -452,7 +453,7 @@
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-md);">
<h3 class="card-title" style="margin:0;">🔑 {{ _('api_tokens_title') }}</h3>
<button type="button" class="btn btn-primary btn-sm" onclick="openCreateTokenModal()">
<span>＋</span> {{ _('api_tokens_create') }}
{{ icon('plus') }} {{ _('api_tokens_create') }}
</button>
</div>
<p class="form-hint" style="margin-bottom: var(--space-md);">
@@ -546,7 +547,7 @@
curl -H "Authorization: Bearer &lt;your_token&gt;" {{ request.url.scheme }}://{{ request.url.netloc }}/api/users
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="copyNewToken()">📋 {{ _('copy') }}</button>
<button class="btn btn-secondary" onclick="copyNewToken()">{{ icon('copy') }} {{ _('copy') }}</button>
<button class="btn btn-primary" onclick="closeModal('newTokenModal')">{{ _('done') }}</button>
</div>
</div>
@@ -838,7 +839,7 @@
showToast(`${_('error')}: ` + err.message, 'error');
} finally {
btn.disabled = false;
text.textContent = `🗑 ${_('delete_sync_btn')}`;
text.innerHTML = `${uiIcon('trash')} ${_('delete_sync_btn')}`;
spinner.classList.add('hidden');
}
}
templates/users.html
+15 -14
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% from "macros/icons.html" import icon %}
{% block title_extra %} — {{ _('users_title') }}{% endblock %}
@@ -7,19 +8,19 @@
<div class="flex items-center justify-between"
style="margin-bottom: var(--space-lg); gap: var(--space-md); flex-wrap: wrap;">
<h1 class="section-title" style="margin-bottom:0; flex-shrink: 0;">
<span class="icon">👥</span>
<span class="icon">{{ icon('users') }}</span>
{{ _('users_title') }}
</h1>
<div style="flex: 1; min-width: 250px; max-width: 500px; position: relative;">
<input type="text" class="form-input" id="userSearch" placeholder="{{ _('search_placeholder') }}"
oninput="handleSearch(this.value)" style="padding-left: 40px;">
<span style="position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: 0.5;">🔍</span>
<span style="position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display:flex;">{{ icon('search') }}</span>
</div>
{% if current_user.role == 'admin' %}
<button class="btn btn-primary" onclick="openModal('addUserModal')" style="flex-shrink: 0;">
<span>＋</span> {{ _('add_user') }}
{{ icon('plus') }} {{ _('add_user') }}
</button>
{% endif %}
</div>
@@ -45,7 +46,7 @@
</div>
<div id="usersEmpty" class="empty-state hidden">
<div class="empty-icon">👤</div>
<div class="empty-icon">{{ icon('user') }}</div>
<div class="empty-title">{{ _('nothing_found') }}</div>
<div class="empty-desc">{{ _('search_empty_desc') }}</div>
</div>
@@ -496,7 +497,7 @@
${u.enabled ? '' : `<span class="badge badge-danger" style="font-size:0.65rem;">${_('disabled')}</span>`}
</div>
<div class="client-meta">
<span style="cursor:pointer; color:var(--primary); text-decoration: underline;" onclick="viewUserConnections('${u.id}', '${u.username.replace(/'/g, "\\'")}')">🔗 ${u.connections_count} ${_('connections')}</span>
<span style="cursor:pointer; color:var(--primary); text-decoration: underline; display:inline-flex; align-items:center; gap:4px;" onclick="viewUserConnections('${u.id}', '${u.username.replace(/'/g, "\\'")}')">${uiIcon('link')} ${u.connections_count} ${_('connections')}</span>
${u.created_at ? `<span>📅 ${u.created_at.substring(0, 10)}</span>` : ''}
${u.telegramId ? `<span>💬 ${u.telegramId}</span>` : ''}
${u.email ? `<span>📧 ${u.email}</span>` : ''}
@@ -542,22 +543,22 @@
{% if current_user.role == 'admin' %}
<button class="btn btn-secondary btn-sm btn-icon"
onclick="openAddConnectionForUser('${u.id}', '${u.username}')"
title="${_('add_connection')}">🔗</button>
title="${_('add_connection')}">${uiIcon('link')}</button>
<button class="btn btn-secondary btn-sm btn-icon"
onclick='openEditUser({"id": "${u.id}", "username": "${u.username}", "tg": "${u.telegramId || ""}", "email": "${u.email || ""}", "desc": "${u.description || ""}", "limit": "${u.traffic_limit ? (u.traffic_limit / Math.pow(1024, 3)).toFixed(2) : 0}", "strategy": "${u.traffic_reset_strategy || 'never'}", "expiration": "${u.expiration_date || ''}"})'
title="${_('edit')}">✏️</button>
title="${_('edit')}">${uiIcon('pencil')}</button>
<button class="btn btn-secondary btn-sm btn-icon" onclick="openShareModal(this.dataset)"
data-id="${u.id}" data-username="${u.username}" data-token="${u.share_token || ''}"
data-enabled="${u.share_enabled ? 'true' : 'false'}"
data-haspassword="${u.has_share_password ? 'true' : 'false'}"
title="${_('share_access')}">📤</button>
title="${_('share_access')}">${uiIcon('share')}</button>
${u.id !== "{{ current_user.id }}" ? `
<button class="btn btn-secondary btn-sm btn-icon" onclick="toggleUser(this.dataset)"
data-id="${u.id}" data-enable="${u.enabled ? 'false' : 'true'}"
title="${u.enabled ? _('stop_btn') : _('start_btn')}">
${u.enabled ? '🔵' : '⚫'}
${u.enabled ? uiIcon('pause') : uiIcon('play')}
</button>
<button class="btn btn-danger btn-sm btn-icon" onclick="deleteUser('${u.id}')" title="${_('delete')}">🗑</button>
<button class="btn btn-danger btn-sm btn-icon" onclick="deleteUser('${u.id}')" title="${_('delete')}">${uiIcon('trash')}</button>
` : ''}
{% endif %}
</div>
@@ -860,17 +861,17 @@
listEl.innerHTML += `
<div class="client-item">
<div class="client-info">
<div class="client-avatar">🔗</div>
<div class="client-avatar">${uiIcon('link')}</div>
<div>
<div class="client-name">${c.name || 'Connection'}</div>
<div class="client-meta">
<span>🖥 ${c.server_name || ''}</span>
<span style="display:inline-flex;align-items:center;gap:4px;">${uiIcon('server')} ${c.server_name || ''}</span>
<span>${c.protocol === 'awg' ? 'AmneziaWG' : (c.protocol === 'awg2' ? 'AmneziaWG 2.0' : (c.protocol === 'awg_legacy' ? 'AWG Legacy' : (c.protocol === 'xray' ? 'Xray' : c.protocol.toUpperCase())))}</span>
</div>
</div>
</div>
<div class="client-actions">
<button class="btn btn-secondary btn-sm btn-icon" onclick="showUserConnectionConfig(${c.server_id}, '${c.client_id}', '${c.protocol}', '${(c.name || 'VPN').replace(/'/g, "\\'")}')" title="${_('config')}">📄</button>
<button class="btn btn-secondary btn-sm btn-icon" onclick="showUserConnectionConfig(${c.server_id}, '${c.client_id}', '${c.protocol}', '${(c.name || 'VPN').replace(/'/g, "\\'")}')" title="${_('config')}">${uiIcon('file')}</button>
</div>
</div>
`;
@@ -949,7 +950,7 @@
<div class="flex gap-sm">
<input class="form-input" type="text" id="shareLink" readonly
style="background: var(--bg-primary);">
<button class="btn btn-secondary" onclick="copyShareLink()">📋</button>
<button class="btn btn-secondary btn-icon" onclick="copyShareLink()" title="{{ _('copy') }}">{{ icon('copy') }}</button>
</div>
</div>
</div>