Подсказки
This commit is contained in:
parent
1cf75c8a29
commit
60226aea76
3 changed files with 179 additions and 2 deletions
|
|
@ -205,4 +205,28 @@ document.getElementById("logoutBtn").onclick = () => {
|
|||
|
||||
document.getElementById("closeModal").onclick = hideModal;
|
||||
|
||||
tryAutoLogin();
|
||||
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
|
||||
});
|
||||
|
|
@ -191,4 +191,111 @@ h1{
|
|||
color: #aaa;
|
||||
}
|
||||
|
||||
.hidden { display: none; }
|
||||
.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;
|
||||
}
|
||||
|
|
@ -18,6 +18,52 @@
|
|||
</header>
|
||||
|
||||
<main id="mainContent" class="hidden">
|
||||
<div class="how-to-connect">
|
||||
<h1>Как подключиться</h1>
|
||||
|
||||
<div class="platform-tabs">
|
||||
<button class="tab-btn active" data-platform="android">Android</button>
|
||||
<button class="tab-btn" data-platform="windows">ПК (Windows)</button>
|
||||
<button class="tab-btn" data-platform="ios">iOS</button>
|
||||
</div>
|
||||
|
||||
<div class="instructions" id="android-instructions">
|
||||
<ol>
|
||||
<li>Создайте и скопируйте свою конфигурацию в личном кабинете.</li>
|
||||
<li>Скачайте и установите <a href="https://github.com/2dust/v2rayNG/releases/download/2.0.13/v2rayNG_2.0.13_universal.apk" target="_blank" rel="noopener">приложение v2rayNG</a>.</li>
|
||||
<li>Откройте приложение.</li>
|
||||
<li>Нажмите <b>+</b> в правом верхнем углу → <b>Импорт из буфера обмена</b>.</li>
|
||||
<li><b>Готово!</b> Включайте/выключайте соединение большой кнопкой внизу справа.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="instructions hidden" id="windows-instructions">
|
||||
<ol>
|
||||
<li>Создайте и скопируйте свою конфигурацию в личном кабинете.</li>
|
||||
<li>Скачайте и установите <a href="https://github.com/qr243vbi/nekobox/releases/download/5.10.25/nekobox-5.10.25-windows64-installer.exe" target="_blank" rel="noopener">NekoBox for Windows</a>.</li>
|
||||
<li>Откройте программу.</li>
|
||||
<li>Нажмите <kbd>Ctrl</kbd> + <kbd>V</kbd> — конфигурация добавится автоматически.</li>
|
||||
<li>Выделите добавленную конфигурацию и нажмите <kbd>Enter</kbd>.</li>
|
||||
<li>Вверху включите:
|
||||
<ul>
|
||||
<li><b>Системный прокси</b> — для работы в браузерах</li>
|
||||
<li><b>Режим TUN</b> — для всей системы</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Готово!</b> Вы подключены.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="instructions hidden" id="ios-instructions">
|
||||
<ol>
|
||||
<li>Создайте и скопируйте свою конфигурацию в личном кабинете.</li>
|
||||
<li>Скачайте приложение <a href="https://apps.apple.com/ru/app/v2raytun/id6476628951" target="_blank" rel="noopener">V2RayTun</a> из App Store.</li>
|
||||
<li>Откройте приложение.</li>
|
||||
<li>Нажмите <b>+</b> в правом верхнем углу → <b>Импорт из буфера обмена</b>.</li>
|
||||
<li><b>Готово!</b> Включайте/выключайте соединение центральной кнопкой.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Ваши конфигурации</h1>
|
||||
<div class="urls-list" id="urlsList"></div>
|
||||
<button class="add-btn" id="addUrlBtn">+ Добавить конфиг</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue