diff --git a/Frontend/JS/control-panel.js b/Frontend/JS/control-panel.js index 6211a39..3129abf 100644 --- a/Frontend/JS/control-panel.js +++ b/Frontend/JS/control-panel.js @@ -205,4 +205,28 @@ document.getElementById("logoutBtn").onclick = () => { document.getElementById("closeModal").onclick = hideModal; -tryAutoLogin(); \ No newline at end of file +tryAutoLogin(); + +// Переключение инструкций по платформам +document.querySelectorAll('.tab-btn').forEach(btn => { + btn.addEventListener('click', () => { + // Убираем active у всех кнопок + document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + + // Скрываем все инструкции + document.querySelectorAll('.instructions').forEach(el => el.classList.add('hidden')); + + // Показываем нужную + const platform = btn.dataset.platform; + const target = document.getElementById(`${platform}-instructions`); + if (target) { + target.classList.remove('hidden'); + } + }); +}); + +// Показываем Android по умолчанию при загрузке (если нужно) +document.addEventListener('DOMContentLoaded', () => { + // можно оставить как есть — первая вкладка уже active в HTML +}); \ No newline at end of file diff --git a/Frontend/Styles/control-panel.css b/Frontend/Styles/control-panel.css index 0e43ae6..fe4bcf7 100644 --- a/Frontend/Styles/control-panel.css +++ b/Frontend/Styles/control-panel.css @@ -191,4 +191,111 @@ h1{ color: #aaa; } -.hidden { display: none; } \ No newline at end of file +.how-to-connect { + margin-bottom: 60px; +} + +.platform-tabs { + display: flex; + justify-content: center; + gap: 12px; + margin-bottom: 32px; + flex-wrap: wrap; +} + +.tab-btn { + background: #1a1a1a; + border: 1px solid #444; + color: #aaa; + padding: 12px 24px; + border-radius: 50px; + font-size: 15px; + font-weight: 500; + cursor: pointer; + transition: all 0.22s ease; +} + +.tab-btn:hover { + border-color: #666; + color: #ddd; + background: #222; +} + +.tab-btn.active { + background: var(--accent); + color: #000; + border-color: var(--accent); + box-shadow: 0 0 20px rgba(0, 255, 255, 0.25); + font-weight: 600; +} + +.instructions { + background: var(--card); + border: 1px solid #333; + border-radius: 16px; + padding: 28px 32px; + transition: all 0.3s ease; +} + +.instructions ol { + counter-reset: step; + list-style: none; + font-size: 15.5px; + line-height: 1.65; +} + +.instructions li { + position: relative; + padding-left: 38px; + margin-bottom: 18px; +} + +.instructions li::before { + content: counter(step); + counter-increment: step; + position: absolute; + left: 0; + top: 2px; + width: 28px; + height: 28px; + background: #222; + border: 1px solid var(--accent); + color: var(--accent); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 600; +} + +.instructions a { + color: var(--accent); + text-decoration: none; + border-bottom: 1px solid rgba(0,255,255,0.3); + transition: all 0.2s; +} + +.instructions a:hover { + border-bottom-color: var(--accent); + color: #00ffff; +} + +.instructions kbd { + background: #1e1e1e; + border: 1px solid #444; + border-radius: 5px; + padding: 3px 7px; + font-family: monospace; + color: #aaa; +} + +.instructions ul { + margin: 12px 0 12px 24px; + list-style: disc; + color: #bbb; +} + +.hidden { + display: none !important; +} \ No newline at end of file diff --git a/Frontend/control-panel.html b/Frontend/control-panel.html index d05c238..96f23f4 100644 --- a/Frontend/control-panel.html +++ b/Frontend/control-panel.html @@ -18,6 +18,52 @@
+
+

Как подключиться

+ +
+ + + +
+ +
+
    +
  1. Создайте и скопируйте свою конфигурацию в личном кабинете.
    2. +
  2. Скачайте и установите приложение v2rayNG.
    3. +
  3. Откройте приложение.
    4. +
  4. Нажмите + в правом верхнем углу → Импорт из буфера обмена.
    5. +
  5. Готово! Включайте/выключайте соединение большой кнопкой внизу справа.
    6. +
+
+ + + + +

Ваши конфигурации