Обновить test.html
This commit is contained in:
parent
a48d25d9aa
commit
baa5f9651d
91
test.html
91
test.html
@ -22,19 +22,46 @@
|
|||||||
|
|
||||||
<div id="appsAccordionContainer">
|
<div id="appsAccordionContainer">
|
||||||
<div class="accordion" id="appsAccordion">
|
<div class="accordion" id="appsAccordion">
|
||||||
|
<!-- Android -->
|
||||||
<div class="accordion-item" data-os="Android">
|
<div class="accordion-item" data-os="Android">
|
||||||
<h2 class="accordion-header" id="headingAndroid">
|
<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">
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAndroid" aria-expanded="true" aria-controls="collapseAndroid">
|
||||||
Приложения для Android
|
Приложения для Android
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div id="collapseAndroid" class="accordion-collapse collapse" aria-labelledby="headingAndroid" data-bs-parent="#appsAccordion">
|
<div id="collapseAndroid" class="accordion-collapse collapse show" aria-labelledby="headingAndroid" data-bs-parent="#appsAccordion">
|
||||||
<div class="accordion-body">
|
<div class="accordion-body">
|
||||||
<p>Описание приложений для Android.</p>
|
<div class="accordion" id="androidSubAccordion">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingAndroidApp1">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAndroidApp1" aria-expanded="false" aria-controls="collapseAndroidApp1">
|
||||||
|
Приложение 1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseAndroidApp1" class="accordion-collapse collapse" aria-labelledby="headingAndroidApp1" data-bs-parent="#androidSubAccordion">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<p>Описание приложения 1 для Android.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingAndroidApp2">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAndroidApp2" aria-expanded="false" aria-controls="collapseAndroidApp2">
|
||||||
|
Приложение 2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseAndroidApp2" class="accordion-collapse collapse" aria-labelledby="headingAndroidApp2" data-bs-parent="#androidSubAccordion">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<p>Описание приложения 2 для Android.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- iOS -->
|
||||||
<div class="accordion-item" data-os="iOS">
|
<div class="accordion-item" data-os="iOS">
|
||||||
<h2 class="accordion-header" id="headingiOS">
|
<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">
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseiOS" aria-expanded="false" aria-controls="collapseiOS">
|
||||||
@ -43,11 +70,37 @@
|
|||||||
</h2>
|
</h2>
|
||||||
<div id="collapseiOS" class="accordion-collapse collapse" aria-labelledby="headingiOS" data-bs-parent="#appsAccordion">
|
<div id="collapseiOS" class="accordion-collapse collapse" aria-labelledby="headingiOS" data-bs-parent="#appsAccordion">
|
||||||
<div class="accordion-body">
|
<div class="accordion-body">
|
||||||
<p>Описание приложений для iOS.</p>
|
<div class="accordion" id="iosSubAccordion">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingiOSApp1">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseiOSApp1" aria-expanded="false" aria-controls="collapseiOSApp1">
|
||||||
|
Приложение 1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseiOSApp1" class="accordion-collapse collapse" aria-labelledby="headingiOSApp1" data-bs-parent="#iosSubAccordion">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<p>Описание приложения 1 для iOS.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingiOSApp2">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseiOSApp2" aria-expanded="false" aria-controls="collapseiOSApp2">
|
||||||
|
Приложение 2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseiOSApp2" class="accordion-collapse collapse" aria-labelledby="headingiOSApp2" data-bs-parent="#iosSubAccordion">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<p>Описание приложения 2 для iOS.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Windows -->
|
||||||
<div class="accordion-item" data-os="Windows">
|
<div class="accordion-item" data-os="Windows">
|
||||||
<h2 class="accordion-header" id="headingWindows">
|
<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">
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWindows" aria-expanded="false" aria-controls="collapseWindows">
|
||||||
@ -56,7 +109,32 @@
|
|||||||
</h2>
|
</h2>
|
||||||
<div id="collapseWindows" class="accordion-collapse collapse" aria-labelledby="headingWindows" data-bs-parent="#appsAccordion">
|
<div id="collapseWindows" class="accordion-collapse collapse" aria-labelledby="headingWindows" data-bs-parent="#appsAccordion">
|
||||||
<div class="accordion-body">
|
<div class="accordion-body">
|
||||||
<p>Описание приложений для Windows.</p>
|
<div class="accordion" id="windowsSubAccordion">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingWindowsApp1">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWindowsApp1" aria-expanded="false" aria-controls="collapseWindowsApp1">
|
||||||
|
Приложение 1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseWindowsApp1" class="accordion-collapse collapse" aria-labelledby="headingWindowsApp1" data-bs-parent="#windowsSubAccordion">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<p>Описание приложения 1 для Windows.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingWindowsApp2">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWindowsApp2" aria-expanded="false" aria-controls="collapseWindowsApp2">
|
||||||
|
Приложение 2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseWindowsApp2" class="accordion-collapse collapse" aria-labelledby="headingWindowsApp2" data-bs-parent="#windowsSubAccordion">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<p>Описание приложения 2 для Windows.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -65,7 +143,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Определение текущей ОС пользователя
|
|
||||||
function detectOS() {
|
function detectOS() {
|
||||||
const userAgent = navigator.userAgent;
|
const userAgent = navigator.userAgent;
|
||||||
if (/android/i.test(userAgent)) return "Android";
|
if (/android/i.test(userAgent)) return "Android";
|
||||||
@ -74,12 +151,10 @@
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Сортировка аккордеона
|
|
||||||
function sortAccordion(currentOS) {
|
function sortAccordion(currentOS) {
|
||||||
const accordionContainer = document.getElementById("appsAccordionContainer");
|
const accordionContainer = document.getElementById("appsAccordionContainer");
|
||||||
const accordionItems = Array.from(document.querySelectorAll(".accordion-item"));
|
const accordionItems = Array.from(document.querySelectorAll(".accordion-item"));
|
||||||
|
|
||||||
// Сортируем элементы, чтобы текущая ОС была первой
|
|
||||||
accordionItems.sort((a, b) => {
|
accordionItems.sort((a, b) => {
|
||||||
const osA = a.getAttribute("data-os");
|
const osA = a.getAttribute("data-os");
|
||||||
const osB = b.getAttribute("data-os");
|
const osB = b.getAttribute("data-os");
|
||||||
@ -88,7 +163,6 @@
|
|||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Перестраиваем аккордеон
|
|
||||||
accordionContainer.innerHTML = "";
|
accordionContainer.innerHTML = "";
|
||||||
const newAccordion = document.createElement("div");
|
const newAccordion = document.createElement("div");
|
||||||
newAccordion.className = "accordion";
|
newAccordion.className = "accordion";
|
||||||
@ -98,7 +172,6 @@
|
|||||||
accordionContainer.appendChild(newAccordion);
|
accordionContainer.appendChild(newAccordion);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Инициализация
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const currentOS = detectOS();
|
const currentOS = detectOS();
|
||||||
const osDetection = document.getElementById("os-detection");
|
const osDetection = document.getElementById("os-detection");
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user