151 lines
7.0 KiB
Plaintext
151 lines
7.0 KiB
Plaintext
<!-- Плавающая кнопка FAQ -->
|
||
<div class="fixed bottom-4 xs:bottom-6 sm:bottom-8 left-4 xs:left-6 sm:left-8 z-50">
|
||
<button
|
||
id="floating-faq-btn"
|
||
class="group w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl xs:rounded-2xl shadow-2xl shadow-blue-500/25 hover:shadow-blue-400/40 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 flex items-center justify-center"
|
||
aria-label="Часто задаваемые вопросы"
|
||
>
|
||
<svg
|
||
class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 group-hover:scale-110 transition-transform duration-300"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- Тултип -->
|
||
<div
|
||
id="faq-tooltip"
|
||
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 xs:mb-4 px-2 xs:px-4 py-1 xs:py-2 bg-gray-900 text-white text-xs xs:text-sm rounded-lg xs:rounded-xl shadow-lg opacity-0 invisible transition-all duration-300 whitespace-nowrap font-gilroy border border-gray-700"
|
||
>
|
||
Часто задаваемые вопросы
|
||
<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно FAQ -->
|
||
<div
|
||
id="faq-modal"
|
||
class="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300 p-4"
|
||
>
|
||
<div
|
||
class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl xs:rounded-3xl p-6 xs:p-8 max-w-2xl w-full max-h-[90vh] xs:max-h-[80vh] overflow-y-auto relative border border-gray-700 shadow-2xl"
|
||
>
|
||
<button
|
||
id="close-faq-modal"
|
||
class="absolute top-4 xs:top-6 right-4 xs:right-6 w-8 h-8 xs:w-10 xs:h-10 bg-gray-700 hover:bg-gray-600 text-white rounded-lg xs:rounded-xl transition-colors duration-300 flex items-center justify-center"
|
||
>
|
||
<svg
|
||
class="w-4 h-4 xs:w-5 xs:h-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M6 18L18 6M6 6l12 12"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
|
||
<h2 class="text-2xl xs:text-3xl font-bold mb-6 xs:mb-8 text-white font-nevduplenysh">
|
||
Быстрые ответы
|
||
</h2>
|
||
|
||
<div class="space-y-4 xs:space-y-6">
|
||
<!-- Вопрос 1 -->
|
||
<div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
|
||
<h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
|
||
Какие драгоценные металлы вы предлагаете?
|
||
</h3>
|
||
<p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
|
||
Мы работаем с полным спектром драгоценных металлов: золото, серебро, платина, палладий, родий. Предлагаем различные формы: слитки, гранулы, проволока, фольга.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Вопрос 2 -->
|
||
<div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
|
||
<h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
|
||
Какова чистота ваших металлов?
|
||
</h3>
|
||
<p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
|
||
Мы гарантируем высочайшую чистоту: золото 999,9 пробы, серебро 999,9 пробы, платина 999,5 пробы. Каждая партия сопровождается сертификатом качества.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Вопрос 3 -->
|
||
<div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
|
||
<h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
|
||
Как быстро происходит доставка?
|
||
</h3>
|
||
<p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
|
||
Доставка по Москве — в день заказа, по России — 1-7 дней в зависимости от региона. Все грузы застрахованы и отслеживаются.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 xs:mt-8 text-center">
|
||
<a
|
||
href="/faq"
|
||
class="inline-flex items-center px-6 xs:px-8 py-3 xs:py-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl xs:rounded-2xl hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-blue-500/25 text-sm xs:text-base"
|
||
>
|
||
<svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
Все вопросы и ответы
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const faqBtn = document.getElementById("floating-faq-btn");
|
||
const faqModal = document.getElementById("faq-modal");
|
||
const closeFaqModal = document.getElementById("close-faq-modal");
|
||
const faqTooltip = document.getElementById("faq-tooltip");
|
||
|
||
// Показать тултип при наведении
|
||
faqBtn?.addEventListener("mouseenter", () => {
|
||
faqTooltip?.classList.remove("opacity-0", "invisible");
|
||
faqTooltip?.classList.add("opacity-100", "visible");
|
||
});
|
||
|
||
faqBtn?.addEventListener("mouseleave", () => {
|
||
faqTooltip?.classList.add("opacity-0", "invisible");
|
||
faqTooltip?.classList.remove("opacity-100", "visible");
|
||
});
|
||
|
||
// Открыть модальное окно
|
||
faqBtn?.addEventListener("click", () => {
|
||
faqModal?.classList.remove("opacity-0", "invisible");
|
||
faqModal?.classList.add("opacity-100", "visible");
|
||
document.body.style.overflow = "hidden";
|
||
});
|
||
|
||
// Закрыть модальное окно
|
||
closeFaqModal?.addEventListener("click", () => {
|
||
faqModal?.classList.add("opacity-0", "invisible");
|
||
faqModal?.classList.remove("opacity-100", "visible");
|
||
document.body.style.overflow = "auto";
|
||
});
|
||
|
||
// Закрыть при клике на фон
|
||
faqModal?.addEventListener("click", (e) => {
|
||
if (e.target === faqModal) {
|
||
faqModal?.classList.add("opacity-0", "invisible");
|
||
faqModal?.classList.remove("opacity-100", "visible");
|
||
document.body.style.overflow = "auto";
|
||
}
|
||
});
|
||
</script> |