638 lines
31 KiB
Plaintext
638 lines
31 KiB
Plaintext
@using QRRapidoApp.Services
|
|
@using Microsoft.Extensions.Localization
|
|
@inject AdDisplayService AdService
|
|
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer
|
|
|
|
@{
|
|
ViewData["Title"] = "FAQ";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
<div class="container py-5">
|
|
<!-- Hero Section -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<div class="mb-5">
|
|
<h1 class="display-5 fw-bold text-primary mb-3">
|
|
<i class="fas fa-question-circle me-3"></i>@Localizer["FrequentlyAskedQuestions"]
|
|
</h1>
|
|
<p class="lead text-muted">@Localizer["FAQSubtitle"]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search FAQ -->
|
|
<div class="row justify-content-center mb-5">
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<i class="fas fa-search"></i>
|
|
</span>
|
|
<input type="text" id="faq-search" class="form-control form-control-lg" placeholder="@Localizer["SearchFAQ"]">
|
|
<button class="btn btn-outline-secondary" type="button" id="clear-search" title="Limpar busca">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="d-flex justify-content-between mt-2">
|
|
<small class="text-muted">@Localizer["SearchFAQHint"]</small>
|
|
<small id="search-results" class="text-primary fw-bold" style="display: none;"></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Categories -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="accordion" id="faqAccordion">
|
|
|
|
<!-- General Questions -->
|
|
<div class="mb-4">
|
|
<h3 class="text-primary mb-3">
|
|
<i class="fas fa-info-circle me-2"></i>@Localizer["GeneralQuestions"]
|
|
</h3>
|
|
|
|
<!-- QR Codes Expire? -->
|
|
<div class="accordion-item faq-item" data-search="qr code expira expiram validade tempo duracao permanente">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
|
<i class="fas fa-calendar-times text-warning me-2"></i>
|
|
<strong>@Localizer["FAQ_DoQRCodesExpire"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<p><strong>@Localizer["FAQ_QRExpireAnswer1"]</strong></p>
|
|
<p>@Localizer["FAQ_QRExpireAnswer2"]</p>
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-lightbulb me-2"></i>@Localizer["FAQ_QRExpireTip"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ideal Size for Printing -->
|
|
<div class="accordion-item faq-item" data-search="tamanho ideal impressao imprimir qualidade resolucao dpi">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
|
<i class="fas fa-print text-primary me-2"></i>
|
|
<strong>@Localizer["FAQ_IdealPrintSize"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<p>@Localizer["FAQ_PrintSizeAnswer1"]</p>
|
|
<ul class="mb-3">
|
|
<li><strong>@Localizer["FAQ_PrintSizeSmall"]</strong> @Localizer["FAQ_PrintSizeSmallDesc"]</li>
|
|
<li><strong>@Localizer["FAQ_PrintSizeMedium"]</strong> @Localizer["FAQ_PrintSizeMediumDesc"]</li>
|
|
<li><strong>@Localizer["FAQ_PrintSizeLarge"]</strong> @Localizer["FAQ_PrintSizeLargeDesc"]</li>
|
|
</ul>
|
|
<div class="alert alert-success">
|
|
<i class="fas fa-check me-2"></i>@Localizer["FAQ_PrintSizeTip"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How to Test QR Codes -->
|
|
<div class="accordion-item faq-item" data-search="testar qr code funciona scanner leitor app aplicativo">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
|
|
<i class="fas fa-mobile-alt text-success me-2"></i>
|
|
<strong>@Localizer["FAQ_HowToTestQR"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<p>@Localizer["FAQ_TestQRAnswer1"]</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6><i class="fab fa-android text-success me-2"></i>Android:</h6>
|
|
<ul>
|
|
<li>@Localizer["FAQ_AndroidCamera"]</li>
|
|
<li>@Localizer["FAQ_AndroidGoogleLens"]</li>
|
|
<li>@Localizer["FAQ_AndroidQRApps"]</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6><i class="fab fa-apple text-secondary me-2"></i>iOS:</h6>
|
|
<ul>
|
|
<li>@Localizer["FAQ_iOSCamera"]</li>
|
|
<li>@Localizer["FAQ_iOSControlCenter"]</li>
|
|
<li>@Localizer["FAQ_iOSQRApps"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code Security -->
|
|
<div class="accordion-item faq-item" data-search="seguro seguranca malware virus perigoso confiavel">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
|
|
<i class="fas fa-shield-alt text-success me-2"></i>
|
|
<strong>@Localizer["FAQ_QRSecurity"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<p>@Localizer["FAQ_SecurityAnswer1"]</p>
|
|
<p>@Localizer["FAQ_SecurityAnswer2"]</p>
|
|
<div class="alert alert-warning">
|
|
<h6><i class="fas fa-exclamation-triangle me-2"></i>@Localizer["FAQ_SecurityTips"]</h6>
|
|
<ul class="mb-0">
|
|
<li>@Localizer["FAQ_SecurityTip1"]</li>
|
|
<li>@Localizer["FAQ_SecurityTip2"]</li>
|
|
<li>@Localizer["FAQ_SecurityTip3"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technical Questions -->
|
|
<div class="mb-4">
|
|
<h3 class="text-primary mb-3">
|
|
<i class="fas fa-cogs me-2"></i>@Localizer["TechnicalQuestions"]
|
|
</h3>
|
|
|
|
<!-- Static vs Dynamic -->
|
|
<div class="accordion-item faq-item" data-search="estatico dinamico diferenca tracking rastreamento analytics">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
|
|
<i class="fas fa-exchange-alt text-primary me-2"></i>
|
|
<strong>@Localizer["FAQ_StaticVsDynamic"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-success"><i class="fas fa-circle me-2"></i>@Localizer["FAQ_StaticQR"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_StaticFeature1"]</li>
|
|
<li>@Localizer["FAQ_StaticFeature2"]</li>
|
|
<li>@Localizer["FAQ_StaticFeature3"]</li>
|
|
<li>@Localizer["FAQ_StaticFeature4"]</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-warning"><i class="fas fa-crown me-2"></i>@Localizer["FAQ_DynamicQR"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_DynamicFeature1"]</li>
|
|
<li>@Localizer["FAQ_DynamicFeature2"]</li>
|
|
<li>@Localizer["FAQ_DynamicFeature3"]</li>
|
|
<li>@Localizer["FAQ_DynamicFeature4"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-info mt-3">
|
|
<i class="fas fa-info-circle me-2"></i>@Localizer["FAQ_DynamicQRNote"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customization -->
|
|
<div class="accordion-item faq-item" data-search="personalizar cores logo design estilo customizar">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq6">
|
|
<i class="fas fa-palette text-warning me-2"></i>
|
|
<strong>@Localizer["FAQ_Customization"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<p>@Localizer["FAQ_CustomizationAnswer1"]</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-success"><i class="fas fa-check me-2"></i>@Localizer["FAQ_FreeCustomization"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_FreeFeature1"]</li>
|
|
<li>@Localizer["FAQ_FreeFeature2"]</li>
|
|
<li>@Localizer["FAQ_FreeFeature3"]</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-warning"><i class="fas fa-crown me-2"></i>@Localizer["FAQ_PremiumCustomization"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_PremiumFeature1"]</li>
|
|
<li>@Localizer["FAQ_PremiumFeature2"]</li>
|
|
<li>@Localizer["FAQ_PremiumFeature3"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Offline Usage -->
|
|
<div class="accordion-item faq-item" data-search="offline internet conexao funciona sem wifi">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq7">
|
|
<i class="fas fa-wifi-slash text-secondary me-2"></i>
|
|
<strong>@Localizer["FAQ_OfflineUsage"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq7" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<p>@Localizer["FAQ_OfflineAnswer1"]</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-success"><i class="fas fa-check me-2"></i>@Localizer["FAQ_WorksOffline"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_OfflineType1"]</li>
|
|
<li>@Localizer["FAQ_OfflineType2"]</li>
|
|
<li>@Localizer["FAQ_OfflineType3"]</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-warning"><i class="fas fa-wifi me-2"></i>@Localizer["FAQ_NeedsInternet"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_OnlineType1"]</li>
|
|
<li>@Localizer["FAQ_OnlineType2"]</li>
|
|
<li>@Localizer["FAQ_OnlineType3"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Questions -->
|
|
<div class="mb-4">
|
|
<h3 class="text-primary mb-3">
|
|
<i class="fas fa-user me-2"></i>@Localizer["UsageQuestions"]
|
|
</h3>
|
|
|
|
<!-- Color Choice -->
|
|
<div class="accordion-item faq-item" data-search="cores escolher melhor contraste legibilidade visibility">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq8">
|
|
<i class="fas fa-eye text-info me-2"></i>
|
|
<strong>@Localizer["FAQ_ColorChoice"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq8" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<p>@Localizer["FAQ_ColorAnswer1"]</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-success"><i class="fas fa-check me-2"></i>@Localizer["FAQ_GoodColors"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_ColorGood1"]</li>
|
|
<li>@Localizer["FAQ_ColorGood2"]</li>
|
|
<li>@Localizer["FAQ_ColorGood3"]</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-danger"><i class="fas fa-times me-2"></i>@Localizer["FAQ_AvoidColors"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_ColorBad1"]</li>
|
|
<li>@Localizer["FAQ_ColorBad2"]</li>
|
|
<li>@Localizer["FAQ_ColorBad3"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-success">
|
|
<i class="fas fa-lightbulb me-2"></i>@Localizer["FAQ_ColorTip"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Daily Limits -->
|
|
<div class="accordion-item faq-item" data-search="limite diario quantos qr codes por dia restricao premium">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq9">
|
|
<i class="fas fa-chart-line text-primary me-2"></i>
|
|
<strong>@Localizer["FAQ_DailyLimits"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq9" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="text-center p-3 border rounded">
|
|
<h6 class="text-muted">@Localizer["FAQ_AnonymousUsers"]</h6>
|
|
<div class="display-6 text-secondary">@Localizer["FAQ_AnonymousLimit"]</div>
|
|
<small>@Localizer["FAQ_AnonymousNote"]</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-center p-3 border rounded border-primary">
|
|
<h6 class="text-primary">@Localizer["FAQ_RegisteredUsers"]</h6>
|
|
<div class="display-6 text-primary">@Localizer["FAQ_RegisteredLimit"]</div>
|
|
<small>@Localizer["FAQ_RegisteredNote"]</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-center p-3 border rounded border-warning">
|
|
<h6 class="text-warning"><i class="fas fa-crown me-1"></i>Premium</h6>
|
|
<div class="display-6 text-warning">∞</div>
|
|
<small>@Localizer["FAQ_PremiumNote"]</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Premium Questions -->
|
|
<div class="mb-4">
|
|
<h3 class="text-primary mb-3">
|
|
<i class="fas fa-crown me-2"></i>@Localizer["PremiumQuestions"]
|
|
</h3>
|
|
|
|
<!-- Premium Benefits -->
|
|
<div class="accordion-item faq-item" data-search="premium beneficios vantagens preco custo plano assinatura">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq10">
|
|
<i class="fas fa-star text-warning me-2"></i>
|
|
<strong>@Localizer["FAQ_PremiumBenefits"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="faq10" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
<p>@Localizer["FAQ_PremiumAnswer1"]</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-primary"><i class="fas fa-rocket me-2"></i>@Localizer["FAQ_PerformanceBenefits"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_PremiumPerf1"]</li>
|
|
<li>@Localizer["FAQ_PremiumPerf2"]</li>
|
|
<li>@Localizer["FAQ_PremiumPerf3"]</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-warning"><i class="fas fa-magic me-2"></i>@Localizer["FAQ_FeatureBenefits"]</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["FAQ_PremiumFeat1"]</li>
|
|
<li>@Localizer["FAQ_PremiumFeat2"]</li>
|
|
<li>@Localizer["FAQ_PremiumFeat3"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact CTA -->
|
|
<div class="row mt-5">
|
|
<div class="col-12">
|
|
<div class="card bg-primary text-white">
|
|
<div class="card-body p-4 text-center">
|
|
<h4 class="mb-3">@Localizer["FAQ_NotFoundAnswer"]</h4>
|
|
<p class="mb-4">@Localizer["FAQ_ContactUsDesc"]</p>
|
|
<a href="@Url.Action("Contact", "Home")" class="btn btn-light btn-lg">
|
|
<i class="fas fa-envelope me-2"></i>@Localizer["ContactUs"]
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ad Space Footer (conditional) -->
|
|
@await Html.PartialAsync("_AdSpace", new { position = "footer" })
|
|
|
|
<script>
|
|
// FAQ Search functionality - Enhanced
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.getElementById('faq-search');
|
|
const clearButton = document.getElementById('clear-search');
|
|
const searchResults = document.getElementById('search-results');
|
|
const faqItems = document.querySelectorAll('.faq-item');
|
|
const categoryHeaders = document.querySelectorAll('h3.text-primary');
|
|
|
|
// Search functionality
|
|
function performSearch() {
|
|
const searchTerm = searchInput.value.toLowerCase().trim();
|
|
let visibleCount = 0;
|
|
let totalItems = faqItems.length;
|
|
|
|
// If search is empty, show all items
|
|
if (searchTerm === '') {
|
|
faqItems.forEach(item => {
|
|
item.style.display = 'block';
|
|
// Remove any highlight
|
|
removeHighlight(item);
|
|
});
|
|
categoryHeaders.forEach(header => {
|
|
header.style.display = 'block';
|
|
});
|
|
searchResults.style.display = 'none';
|
|
clearButton.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
// Show clear button when there's text
|
|
clearButton.style.display = 'block';
|
|
|
|
// Search through items
|
|
faqItems.forEach(function(item) {
|
|
const searchData = item.getAttribute('data-search')?.toLowerCase() || '';
|
|
const questionText = item.querySelector('button strong')?.textContent.toLowerCase() || '';
|
|
const answerText = item.querySelector('.accordion-body')?.textContent.toLowerCase() || '';
|
|
|
|
// Check if search term matches
|
|
if (searchData.includes(searchTerm) ||
|
|
questionText.includes(searchTerm) ||
|
|
answerText.includes(searchTerm)) {
|
|
item.style.display = 'block';
|
|
visibleCount++;
|
|
// Highlight matching terms
|
|
highlightText(item, searchTerm);
|
|
} else {
|
|
item.style.display = 'none';
|
|
removeHighlight(item);
|
|
}
|
|
});
|
|
|
|
// Update category headers visibility
|
|
updateCategoryVisibility();
|
|
|
|
// Show search results count
|
|
if (visibleCount === 0) {
|
|
searchResults.innerHTML = `<i class="fas fa-search me-1"></i>Nenhum resultado encontrado para "${searchTerm}"`;
|
|
searchResults.className = 'text-warning fw-bold';
|
|
} else if (visibleCount === totalItems) {
|
|
searchResults.innerHTML = `<i class="fas fa-check me-1"></i>Mostrando todas as ${totalItems} perguntas`;
|
|
searchResults.className = 'text-success fw-bold';
|
|
} else {
|
|
searchResults.innerHTML = `<i class="fas fa-search me-1"></i>${visibleCount} de ${totalItems} perguntas encontradas`;
|
|
searchResults.className = 'text-primary fw-bold';
|
|
}
|
|
searchResults.style.display = 'block';
|
|
}
|
|
|
|
// Update category header visibility based on visible items
|
|
function updateCategoryVisibility() {
|
|
categoryHeaders.forEach(header => {
|
|
const nextSibling = header.nextElementSibling;
|
|
let hasVisibleItems = false;
|
|
|
|
// Check if any FAQ items in this category are visible
|
|
let currentElement = nextSibling;
|
|
while (currentElement && !currentElement.querySelector('h3.text-primary')) {
|
|
if (currentElement.classList.contains('faq-item') &&
|
|
currentElement.style.display !== 'none') {
|
|
hasVisibleItems = true;
|
|
break;
|
|
}
|
|
currentElement = currentElement.nextElementSibling;
|
|
}
|
|
|
|
header.style.display = hasVisibleItems ? 'block' : 'none';
|
|
});
|
|
}
|
|
|
|
// Highlight search terms in text
|
|
function highlightText(item, searchTerm) {
|
|
const questionElement = item.querySelector('button strong');
|
|
if (questionElement) {
|
|
const originalText = questionElement.textContent;
|
|
const regex = new RegExp(`(${escapeRegex(searchTerm)})`, 'gi');
|
|
const highlightedText = originalText.replace(regex, '<mark class="bg-warning">$1</mark>');
|
|
questionElement.innerHTML = highlightedText;
|
|
}
|
|
}
|
|
|
|
// Remove highlights
|
|
function removeHighlight(item) {
|
|
const questionElement = item.querySelector('button strong');
|
|
if (questionElement) {
|
|
const text = questionElement.textContent;
|
|
questionElement.innerHTML = text;
|
|
}
|
|
}
|
|
|
|
// Escape special regex characters
|
|
function escapeRegex(string) {
|
|
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
}
|
|
|
|
// Clear search function
|
|
function clearSearch() {
|
|
searchInput.value = '';
|
|
performSearch();
|
|
searchInput.focus();
|
|
}
|
|
|
|
// Event listeners
|
|
searchInput.addEventListener('input', performSearch);
|
|
searchInput.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
clearSearch();
|
|
}
|
|
});
|
|
|
|
clearButton.addEventListener('click', clearSearch);
|
|
|
|
// Initialize
|
|
clearButton.style.display = 'none';
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.faq-item {
|
|
transition: all 0.3s ease;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.faq-item:hover {
|
|
border-left-color: var(--bs-primary);
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
background-color: var(--bs-primary);
|
|
color: white;
|
|
}
|
|
|
|
.accordion-button:focus {
|
|
box-shadow: none;
|
|
border-color: var(--bs-primary);
|
|
}
|
|
|
|
#faq-search {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#faq-search:focus {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 0 20px rgba(0,123,255,0.25);
|
|
}
|
|
|
|
/* Search highlight styles */
|
|
mark.bg-warning {
|
|
background-color: #fff3cd !important;
|
|
color: #856404;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Clear button animation */
|
|
#clear-search {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#clear-search:hover {
|
|
background-color: #dc3545;
|
|
border-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
/* Search results animation */
|
|
#search-results {
|
|
transition: all 0.3s ease;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Category headers fade when hidden */
|
|
h3.text-primary {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
/* Improved FAQ item visibility transition */
|
|
.faq-item[style*="display: none"] {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.faq-item[style*="display: block"] {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Search input enhancements */
|
|
.input-group:focus-within .input-group-text {
|
|
border-color: var(--bs-primary);
|
|
box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
|
|
}
|
|
|
|
/* Responsive search results */
|
|
@@media (max-width: 768px) {
|
|
#search-results {
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.d-flex.justify-content-between {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style> |