121 lines
5.4 KiB
Vue
121 lines
5.4 KiB
Vue
<script setup lang="ts">
|
||
import { Head } from '@inertiajs/vue3';
|
||
import { ref, onMounted, nextTick } from 'vue';
|
||
import UserLayout from '../layouts/user/userlayout.vue';
|
||
|
||
const faqs = ref([
|
||
{
|
||
q: 'What is BetiX?',
|
||
a: 'BetiX is an online gaming platform. Create an account, verify your email, deposit funds responsibly, and enjoy games. Always follow your local laws and our terms.'
|
||
},
|
||
{
|
||
q: 'How do I secure my account?',
|
||
a: 'Use a strong, unique password and enable two-factor authentication (2FA). We also email you when a new login is detected so you can react quickly if it was not you.'
|
||
},
|
||
{
|
||
q: 'I did not receive an email. What should I do?',
|
||
a: 'Check your spam folder and ensure your email address is correct. If you still have issues, try again in a few minutes or contact support at the address in the footer.'
|
||
},
|
||
{
|
||
q: 'What are responsible gaming limits?',
|
||
a: 'You can set optional limits for losses, wagers, session duration, and timeouts to help manage your play. Adjust these from the Responsible Gaming section in your account.'
|
||
},
|
||
{
|
||
q: 'Why do I see “Too many requests” (429)?',
|
||
a: 'Rate limiting protects the platform from abuse. If you hit this limit, wait a minute and try again. Avoid running automated scripts or rapidly refreshing pages.'
|
||
},
|
||
{
|
||
q: 'Which browsers are supported?',
|
||
a: 'We support the latest versions of Chrome, Firefox, Safari, and Edge. Enable cookies and JavaScript for the best experience.'
|
||
},
|
||
{
|
||
q: 'How do I contact support?',
|
||
a: 'You can reach us via the email address listed in the site footer or the Help/Support section of your account once logged in.'
|
||
},
|
||
]);
|
||
|
||
const expanded = ref<Record<number, boolean>>({});
|
||
|
||
const toggle = (idx: number) => {
|
||
expanded.value[idx] = !expanded.value[idx];
|
||
};
|
||
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
if (window.lucide) window.lucide.createIcons();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<UserLayout>
|
||
<Head title="FAQ" />
|
||
<section class="content">
|
||
<div class="wrap">
|
||
<div class="panel">
|
||
<header class="page-head">
|
||
<div class="title">Frequently Asked Questions</div>
|
||
<p class="subtitle">Answers to common questions about accounts, security, and responsible gaming.</p>
|
||
</header>
|
||
|
||
<div class="grid">
|
||
<div class="left">
|
||
<div v-for="(item, idx) in faqs" :key="idx" class="faq-item" :class="{ open: expanded[idx] }">
|
||
<button class="q" @click="toggle(idx)" :aria-expanded="expanded[idx] ? 'true' : 'false'" :aria-controls="'faq-'+idx">
|
||
<span class="q-text">{{ item.q }}</span>
|
||
<i data-lucide="chevron-down" class="chev" aria-hidden="true"></i>
|
||
</button>
|
||
<div class="a" :id="'faq-'+idx" v-show="expanded[idx]">
|
||
<p>{{ item.a }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<aside class="right">
|
||
<div class="side-card">
|
||
<div class="card-head">Need more help?</div>
|
||
<p class="card-text">If your question isn’t listed here, reach out to our support team.</p>
|
||
<ul class="help-list">
|
||
<li><i data-lucide="mail" class="icon"></i> Email: <a href="mailto:support@example.com">Contact Support</a></li>
|
||
<li><i data-lucide="shield" class="icon"></i> Read our <a href="/self-exclusion">Responsible Gaming</a> info</li>
|
||
</ul>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</UserLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.content { padding: 30px; }
|
||
.wrap { max-width: 1100px; margin: 0 auto; }
|
||
.panel { background: var(--bg-card, #0a0a0a); border: 1px solid var(--border, #151515); border-radius: 16px; overflow: hidden; }
|
||
.page-head { padding: 20px; border-bottom: 1px solid var(--border, #151515); }
|
||
.title { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 2px; text-transform: uppercase; }
|
||
.subtitle { color: #9aa0a6; margin-top: 6px; }
|
||
|
||
.grid { padding: 20px; display: grid; grid-template-columns: 1.6fr .8fr; gap: 22px; }
|
||
.left { display: flex; flex-direction: column; gap: 12px; }
|
||
|
||
.faq-item { border: 1px solid var(--border, #151515); background: #0a0a0a; border-radius: 14px; overflow: hidden; }
|
||
.q { width: 100%; text-align: left; background: transparent; color: #e6e6e6; padding: 16px 18px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 800; }
|
||
.q:hover { background: rgba(255,255,255,0.02); }
|
||
.q-text { font-size: 14px; }
|
||
.chev { width: 18px; color: #aaa; transition: transform .2s ease; }
|
||
.faq-item.open .chev { transform: rotate(180deg); }
|
||
.a { padding: 0 18px 16px; color: #cfcfcf; font-size: 14px; line-height: 1.6; }
|
||
|
||
.side-card { border: 1px solid var(--border, #151515); background: #0a0a0a; border-radius: 14px; padding: 16px; position: sticky; top: 20px; }
|
||
.card-head { color: #fff; font-weight: 900; margin-bottom: 8px; }
|
||
.card-text { color: #9aa0a6; margin-bottom: 8px; }
|
||
.help-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
|
||
.help-list a { color: var(--cyan, #00f2ff); text-decoration: none; }
|
||
.icon { width: 16px; color: #666; margin-right: 6px; vertical-align: -2px; }
|
||
|
||
@media (max-width: 900px) {
|
||
.grid { grid-template-columns: 1fr; padding: 16px; }
|
||
.side-card { position: static; }
|
||
}
|
||
</style>
|