2025-01-10 13:00:21 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Marzban Subscription</title>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
body {
|
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
|
margin: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<h1 class="text-center mb-4">Подписка Marzban</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="os-detection" class="alert alert-info text-center">
|
|
|
|
|
|
Определение вашей операционной системы...
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-10 13:23:20 +00:00
|
|
|
|
<div id="appsAccordionContainer">
|
|
|
|
|
|
<div class="accordion" id="appsAccordion">
|
|
|
|
|
|
<div class="accordion-item" data-os="Android">
|
|
|
|
|
|
<h2 class="accordion-header" id="headingAndroid">
|
|
|
|
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAndroid" aria-expanded="true" aria-controls="collapseAndroid">
|
|
|
|
|
|
Приложения для Android
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<div id="collapseAndroid" class="accordion-collapse collapse" aria-labelledby="headingAndroid" data-bs-parent="#appsAccordion">
|
|
|
|
|
|
<div class="accordion-body">
|
2025-01-10 13:36:09 +00:00
|
|
|
|
<p>Описание приложений для Android.</p>
|
2025-01-10 13:07:04 +00:00
|
|
|
|
</div>
|
2025-01-10 13:00:21 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-10 13:23:20 +00:00
|
|
|
|
<div class="accordion-item" data-os="iOS">
|
|
|
|
|
|
<h2 class="accordion-header" id="headingiOS">
|
|
|
|
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseiOS" aria-expanded="false" aria-controls="collapseiOS">
|
|
|
|
|
|
Приложения для iOS
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<div id="collapseiOS" class="accordion-collapse collapse" aria-labelledby="headingiOS" data-bs-parent="#appsAccordion">
|
|
|
|
|
|
<div class="accordion-body">
|
2025-01-10 13:36:09 +00:00
|
|
|
|
<p>Описание приложений для iOS.</p>
|
2025-01-10 13:07:04 +00:00
|
|
|
|
</div>
|
2025-01-10 13:00:21 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-10 13:23:20 +00:00
|
|
|
|
<div class="accordion-item" data-os="Windows">
|
|
|
|
|
|
<h2 class="accordion-header" id="headingWindows">
|
|
|
|
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWindows" aria-expanded="false" aria-controls="collapseWindows">
|
|
|
|
|
|
Приложения для Windows
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<div id="collapseWindows" class="accordion-collapse collapse" aria-labelledby="headingWindows" data-bs-parent="#appsAccordion">
|
|
|
|
|
|
<div class="accordion-body">
|
2025-01-10 13:36:09 +00:00
|
|
|
|
<p>Описание приложений для Windows.</p>
|
2025-01-10 13:07:04 +00:00
|
|
|
|
</div>
|
2025-01-10 13:00:21 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-01-10 13:23:20 +00:00
|
|
|
|
// Определение текущей ОС пользователя
|
|
|
|
|
|
function detectOS() {
|
2025-01-10 13:00:21 +00:00
|
|
|
|
const userAgent = navigator.userAgent;
|
2025-01-10 13:23:20 +00:00
|
|
|
|
if (/android/i.test(userAgent)) return "Android";
|
|
|
|
|
|
if (/iPhone|iPad|iPod/i.test(userAgent)) return "iOS";
|
|
|
|
|
|
if (/Windows NT/i.test(userAgent)) return "Windows";
|
|
|
|
|
|
return null;
|
|
|
|
|
|
}
|
2025-01-10 13:00:21 +00:00
|
|
|
|
|
2025-01-10 13:23:20 +00:00
|
|
|
|
// Сортировка аккордеона
|
|
|
|
|
|
function sortAccordion(currentOS) {
|
|
|
|
|
|
const accordionContainer = document.getElementById("appsAccordionContainer");
|
|
|
|
|
|
const accordionItems = Array.from(document.querySelectorAll(".accordion-item"));
|
|
|
|
|
|
|
|
|
|
|
|
// Сортируем элементы, чтобы текущая ОС была первой
|
|
|
|
|
|
accordionItems.sort((a, b) => {
|
|
|
|
|
|
const osA = a.getAttribute("data-os");
|
|
|
|
|
|
const osB = b.getAttribute("data-os");
|
|
|
|
|
|
if (osA === currentOS) return -1;
|
|
|
|
|
|
if (osB === currentOS) return 1;
|
|
|
|
|
|
return 0;
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Перестраиваем аккордеон
|
|
|
|
|
|
accordionContainer.innerHTML = "";
|
|
|
|
|
|
const newAccordion = document.createElement("div");
|
|
|
|
|
|
newAccordion.className = "accordion";
|
|
|
|
|
|
newAccordion.id = "appsAccordion";
|
2025-01-10 13:00:21 +00:00
|
|
|
|
|
2025-01-10 13:23:20 +00:00
|
|
|
|
accordionItems.forEach(item => newAccordion.appendChild(item));
|
|
|
|
|
|
accordionContainer.appendChild(newAccordion);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Инициализация
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
|
|
|
const currentOS = detectOS();
|
|
|
|
|
|
const osDetection = document.getElementById("os-detection");
|
|
|
|
|
|
|
|
|
|
|
|
if (currentOS) {
|
|
|
|
|
|
osDetection.textContent = `Ваша операционная система: ${currentOS}`;
|
|
|
|
|
|
sortAccordion(currentOS);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
osDetection.textContent = "Не удалось определить вашу операционную систему.";
|
|
|
|
|
|
}
|
2025-01-10 13:00:21 +00:00
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
</body>
|
2025-01-10 13:07:04 +00:00
|
|
|
|
</html>
|
