109 lines
5.3 KiB
HTML
109 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FAQ — OmégaKube</title>
|
|
<link rel="stylesheet" href="../assets/css/main.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div data-include="../components/background.html"></div>
|
|
<div data-include="../components/header.html"></div>
|
|
|
|
<section class="page-hero">
|
|
<div class="page-hero-content">
|
|
<p class="section-tag">FAQ</p>
|
|
<h1>Questions <span class="highlight">fréquentes</span></h1>
|
|
<p>Tout ce que vous devez savoir avant de nous contacter.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="faq-page-section">
|
|
<div class="faq-page-container" id="faq-container"></div>
|
|
</section>
|
|
|
|
<section class="faq-cta-section">
|
|
<div class="faq-cta-inner reveal">
|
|
<h2>Vous n'avez pas trouvé votre réponse ?</h2>
|
|
<p>Notre équipe est disponible pour répondre à toutes vos questions spécifiques. N'hésitez pas à nous contacter directement.</p>
|
|
<div class="faq-cta-btns">
|
|
<a href="../index.html#contact" class="btn btn-primary">
|
|
<i data-feather="message-circle"></i>
|
|
Nous contacter
|
|
</a>
|
|
<a href="https://discord.gg/FwvNkvu5dy" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
|
Rejoindre notre Discord
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div data-include="../components/footer.html"></div>
|
|
|
|
<script src="../assets/js/main.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
const container = document.getElementById('faq-container');
|
|
|
|
let faqData;
|
|
try {
|
|
const res = await fetch('../assets/data/faq.json');
|
|
if (!res.ok) throw new Error(res.statusText);
|
|
faqData = await res.json();
|
|
} catch (err) {
|
|
container.innerHTML = '<p style="text-align:center;color:var(--text-muted);">Impossible de charger la FAQ.</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = faqData.map((cat, ci) => `
|
|
<div class="faq-category reveal${ci > 0 ? ' reveal-delay-' + Math.min(ci, 3) : ''}">
|
|
<h3 class="faq-category-title">
|
|
<i data-feather="${cat.icon}"></i>
|
|
${cat.title}
|
|
</h3>
|
|
<div class="faq-list">
|
|
${cat.questions.map((item, qi) => `
|
|
<div class="faq-item" id="faq-${cat.id}-${qi}">
|
|
<button class="faq-question" aria-expanded="false">
|
|
${item.q}
|
|
<i data-feather="chevron-down" class="faq-chevron"></i>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<p>${item.a}</p>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
if (window.feather) feather.replace();
|
|
|
|
container.querySelectorAll('.faq-question').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const item = btn.closest('.faq-item');
|
|
const isOpen = item.classList.contains('open');
|
|
container.querySelectorAll('.faq-item').forEach(i => {
|
|
i.classList.remove('open');
|
|
i.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
|
|
});
|
|
if (!isOpen) {
|
|
item.classList.add('open');
|
|
btn.setAttribute('aria-expanded', 'true');
|
|
}
|
|
});
|
|
});
|
|
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.reveal').forEach(el => {
|
|
if (el.getBoundingClientRect().top < window.innerHeight - 50) {
|
|
el.classList.add('active');
|
|
}
|
|
});
|
|
}, 50);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|