Add interactive accordion functionality to FAQ page

404.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Infinity X - 404 Not Found</title>
-    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
-    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
+    <link rel="icon" href="/assets/favicon/favicon.png" type="image/png">
     <link rel="preload" href="assets/css/layout-404.css" as="style">
     <link rel="stylesheet" href="assets/css/layout-404.css">
     <link rel="preload" as="style" href="assets/css/fa-minimal.css" onload="this.onload=null;this.rel='stylesheet'">

apply-for-maintainership/index.html

@@ -5,7 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Apply to become an official Infinity X maintainer. Help bring optimized, customizable Android builds to more devices." />
     <title>Infinity X - Maintainership</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/favicon-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/favicon-512x512.png">
     <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
     <link rel="preload" href="../assets/css/layout.css" as="style">
     <link rel="stylesheet" href="../assets/css/layout.css">

assets/css/fa-minimal.css

@@ -41,6 +41,8 @@
 .fa-cogs:before{content:"\f085"}
 .fa-wrench:before{content:"\f0ad"}
 .fa-question-circle:before{content:"\f059"}
+.fa-chevron-up:before{content:"\f077"}
+.fa-chevron-down:before{content:"\f078"}
 
 /* Brand icons */
 .fa-github:before{content:"\f09b"}

assets/css/faq.css

@@ -271,12 +271,133 @@ header {
     border-bottom: none;
 }
 
-.faq-item h3 {
+
+.faq-toggle-icon {
+    font-size: 1.2rem;
+    margin-left: auto;
+    color: var(--primary);
+    transition: color 0.3s ease;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.faq-toggle-icon .fa-chevron-up,
+.faq-toggle-icon .fa-chevron-down {
+    position: absolute;
+    transition: opacity 0.2s ease;
+}
+
+.faq-toggle-icon .fa-chevron-up {
+    opacity: 1;
+}
+
+.faq-toggle-icon .fa-chevron-down {
+    opacity: 0;
+}
+
+.faq-content {
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: max-height, opacity;
+}
+
+.faq-content:not(.collapsed) {
+    max-height: 10000px;
+    opacity: 1;
+    margin-top: 0;
+}
+
+.faq-content.collapsed {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+}
+
+/* FAQ Question/Answer (for individual items) */
+.faq-question {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    user-select: none;
+    transition: color 0.3s ease;
+    padding: 5px 0;
+}
+
+.faq-question:hover {
+    color: var(--primary);
+}
+
+.faq-question h3 {
     font-family: 'Google Sans', sans-serif;
     font-size: 1.3rem;
     font-weight: 600;
-    margin-bottom: 10px;
+    margin-bottom: 0;
     color: var(--light);
+    transition: color 0.3s ease;
+    flex: 1;
+}
+
+.faq-question:hover h3 {
+    color: var(--primary);
+}
+
+.faq-question .faq-icon {
+    margin-left: 10px;
+    flex-shrink: 0;
+    font-size: 0.9rem;
+    color: var(--primary);
+    transition: color 0.3s ease;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.faq-question .faq-icon .fa-chevron-up,
+.faq-question .faq-icon .fa-chevron-down {
+    position: absolute;
+    transition: opacity 0.2s ease;
+}
+
+.faq-question .faq-icon .fa-chevron-up {
+    opacity: 1;
+}
+
+.faq-question .faq-icon .fa-chevron-down {
+    opacity: 0;
+}
+
+.faq-question.collapsed .faq-icon .fa-chevron-up {
+    opacity: 0;
+}
+
+.faq-question.collapsed .faq-icon .fa-chevron-down {
+    opacity: 1;
+}
+
+.faq-answer {
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: max-height, opacity;
+}
+
+.faq-answer:not(.collapsed) {
+    max-height: 5000px;
+    opacity: 1;
+    margin-top: 10px;
+}
+
+.faq-answer.collapsed {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
 }
 
 .faq-item p {

assets/js/faq-accordion.js

@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const faqQuestions = document.querySelectorAll('.faq-question');
+
+  document.querySelectorAll('.faq-content').forEach(section => {
+    section.classList.remove('collapsed');
+    section.querySelectorAll('.faq-item').forEach((item, i) => {
+      const [question, answer] = item.querySelectorAll('.faq-question, .faq-answer');
+      question.classList.toggle('collapsed', i !== 0);
+      answer.classList.toggle('collapsed', i !== 0);
+    });
+  });
+
+
+  faqQuestions.forEach(question => {
+    question.addEventListener('click', e => {
+      e.stopPropagation();
+      toggleItem(question);
+    });
+  });
+
+  document.querySelectorAll('.faq-question').forEach(el => {
+    el.tabIndex = 0;
+    el.role = 'button';
+    el.ariaExpanded = 'true';
+  });
+
+  document.addEventListener('keydown', e => {
+    if (['Enter', ' '].includes(e.key) && e.target.matches('.faq-question')) {
+      e.preventDefault();
+      e.target.classList.contains('faq-question')
+        ? toggleItem(e.target)
+        : toggleSection(e.target);
+    }
+  });
+});
+
+function toggleItem(question) {
+  const answer = question.nextElementSibling;
+  question.classList.toggle('collapsed');
+  answer.classList.toggle('collapsed');
+}
+
+function toggleSection(header) {
+  const content = header.nextElementSibling;
+  const collapsed = content.classList.toggle('collapsed');
+  header.classList.toggle('collapsed', collapsed);
+
+  if (!collapsed) {
+    content.querySelectorAll('.faq-question, .faq-answer')
+      .forEach(el => el.classList.remove('collapsed'));
+  }
+}

assets/js/main.js

@@ -169,7 +169,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 swiperEl.addEventListener('touchend', removeTouching, { passive: true });
                 swiperEl.addEventListener('touchcancel', removeTouching, { passive: true });
 
-                new Swiper('.swiper', {
+                const swiper = new Swiper('.swiper', {
                     // Use lighter config on small screens to avoid heavy 3D transforms / filters
                     ...(function(){
                         const isSmall = window.matchMedia('(max-width: 780px)').matches;
@@ -235,7 +235,8 @@ document.addEventListener('DOMContentLoaded', () => {
                                 992: { slidesPerView: 'auto', spaceBetween: 30 }
                             }
                         };
-                    })()
+                    })(),
+                    keyboard: { enabled: true, onlyInViewport: false }
                 });
             };
             document.head.appendChild(script);

downloads/index.html

@@ -5,7 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Download official Infinity X custom ROM builds for supported Android devices. Find the latest release / flashguide / changelog for your phone." />
     <title>Infinity X - Download</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/favicon-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/favicon-512x512.png">
     <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
     <link rel="preconnect" href="https://api.github.com">
     <link rel="preconnect" href="https://raw.githubusercontent.com">