diff --git a/.gitkeep b/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..6c078f3 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,23 @@ + + + + + + FAQ — Часто задаваемые вопросы + + + +
+

Часто задаваемые вопросы

+ + + + + +
+

Загрузка...

+
+
+ + + \ No newline at end of file diff --git a/frontend/script.js b/frontend/script.js new file mode 100644 index 0000000..1532ee8 --- /dev/null +++ b/frontend/script.js @@ -0,0 +1,88 @@ +document.addEventListener('DOMContentLoaded', async () => { + const faqList = document.getElementById('faq-list'); + const searchInput = document.getElementById('search-input'); + + faqList.innerHTML = '

Загрузка...

'; + + let faqs = []; + + try { + const response = await fetch('http://backend.lc:8000/api/faq'); + faqs = await response.json(); + + faqList.innerHTML = ''; + + if (faqs.length === 0) { + faqList.innerHTML = '

Пока нет вопросов.

'; + return; + } + + // Функция для отображения вопросов + function renderFaqs(filteredFaqs) { + faqList.innerHTML = ''; + filteredFaqs.forEach(faq => { + const item = document.createElement('div'); + item.className = 'faq-item'; + + // Кнопка +/− + const button = document.createElement('button'); + button.textContent = '+'; + button.style.cssText = ` + background: none; + border: none; + font-size: 20px; + color: #7f8c8d; + cursor: pointer; + margin-left: 10px; + transition: transform 0.2s; + `; + button.onclick = () => { + const answer = item.querySelector('.faq-answer'); + if (answer.style.display === 'block') { + answer.style.display = 'none'; + button.textContent = '+'; + } else { + answer.style.display = 'block'; + button.textContent = '−'; + } + }; + + // Вопрос + const questionEl = document.createElement('div'); + questionEl.className = 'faq-question'; + questionEl.textContent = faq.question; + questionEl.appendChild(button); + + // Ответ + const answerEl = document.createElement('div'); + answerEl.className = 'faq-answer'; + answerEl.style.display = 'none'; + answerEl.textContent = faq.answer; + + item.appendChild(questionEl); + item.appendChild(answerEl); + faqList.appendChild(item); + }); + } + + // Показать все при старте + renderFaqs(faqs); + + // Поиск по вопросам + searchInput.addEventListener('input', () => { + const query = searchInput.value.toLowerCase().trim(); + if (query === '') { + renderFaqs(faqs); // Показать все + } else { + const filtered = faqs.filter(faq => + faq.question.toLowerCase().includes(query) + ); + renderFaqs(filtered); + } + }); + + } catch (err) { + faqList.innerHTML = `

Ошибка загрузки: ${err.message}

`; + console.error(err); + } +}); \ No newline at end of file diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 0000000..72e74c0 --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,153 @@ +/* Сброс и базовые стили */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; + background: #f5f7fa; + color: #333; + line-height: 1.7; + background-image: + radial-gradient(circle at 10% 20%, rgba(52, 152, 219, 0.03) 0%, transparent 20%), + radial-gradient(circle at 90% 80%, rgba(46, 204, 113, 0.03) 0%, transparent 20%); +} + +.container { + max-width: 900px; + margin: 50px auto; + padding: 30px; + background: white; + border-radius: 16px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + border: 1px solid rgba(255, 255, 255, 0.5); +} + +h1 { + text-align: center; + margin-bottom: 40px; + font-size: 32px; + font-weight: 600; + color: #2c3e50; + letter-spacing: -0.5px; +} + +.faq-item { + margin-bottom: 16px; + border-bottom: 1px solid #e0e6ed; + padding-bottom: 12px; + transition: all 0.2s ease; +} + +.faq-item:hover { + transform: translateX(4px); +} + +.faq-question { + font-weight: 600; + font-size: 18px; + color: #2980b9; + cursor: pointer; + padding: 14px 18px; + background: #f8fafd; + border-radius: 10px; + display: flex; + justify-content: space-between; + align-items: center; + transition: all 0.2s ease; + border-left: 4px solid #3498db; +} + +.faq-question:hover { + background: #eef5fd; + color: #1a5f9e; +} + +.faq-question::after { + font-size: 20px; + font-weight: bold; + color: #7f8c8d; + transition: all 0.2s ease; +} + +.faq-question.active::after { + content: '−'; + color: #2980b9; +} + +.faq-question.active { + background: #e1f0ff; + border-left-color: #2980b9; +} + +.faq-answer { + margin-top: 14px; + padding: 16px 20px; + background: #f1f8ff; + border-radius: 10px; + border-left: 4px solid #3498db; + color: #555; + line-height: 1.6; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); + display: none; /* Скрыто по умолчанию */ +} + +/* Анимация появления */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.faq-item { + animation: fadeIn 0.4s ease forwards; +} + +/* Адаптивность */ +@media (max-width: 768px) { + .container { + margin: 20px; + padding: 20px; + } + + h1 { + font-size: 26px; + } + + .faq-question { + font-size: 17px; + padding: 12px 16px; + } + + .faq-answer { + font-size: 15px; + padding: 14px 16px; + } +} + +.loading { + text-align: center; + color: #7f8c8d; + font-style: italic; + padding: 30px; +} + +#search-input { + width: 100%; + padding: 14px 18px; + margin-bottom: 30px; + border: 1px solid #ddd; + border-radius: 10px; + font-size: 16px; + color: #555; + background: #f8f9fa; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); + transition: border-color 0.2s, box-shadow 0.2s; +} + +#search-input:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 2px 12px rgba(52, 152, 219, 0.15); +} \ No newline at end of file