feat: add floating button with universal contact modal

2026-05-12 18:03:31 +03:00
parent 3079624e77
commit ce6720309f
3 changed files with 288 additions and 0 deletions
@@ -212,6 +212,60 @@

  </div>

+  <!-- Плавающая кнопка -->
+  <button class="fab" id="fabBtn" onclick="openModal()">✉ Форма по другому вопросу</button>
+
+  <!-- Модальное окно -->
+  <div class="modal-overlay" id="modalOverlay" onclick="closeModalOutside(event)">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>Обращение по другому вопросу</h3>
+        <button class="modal-close" onclick="closeModal()">×</button>
+      </div>
+      <div class="modal-body">
+        <p class="modal-subtitle">Заполните форму — мы свяжемся с вами в ближайшее время.</p>
+        <form id="generalForm" action="https://formspree.io/f/xrejjoav" method="POST">
+          <input type="hidden" name="form_type" value="general_inquiry">
+          <input type="hidden" name="_replyto" id="general_replyto">
+
+          <div class="modal-field">
+            <label for="g_subject">Тема обращения <span class="required">*</span></label>
+            <input type="text" id="g_subject" name="subject" required placeholder="Например: вопрос о сотрудничестве">
+          </div>
+
+          <div class="modal-field">
+            <label for="g_message">Сообщение <span class="required">*</span></label>
+            <textarea id="g_message" name="message" required placeholder="Опишите ваш вопрос или предложение..."></textarea>
+          </div>
+
+          <div class="modal-field">
+            <label for="g_name">Ваше имя <span class="required">*</span></label>
+            <input type="text" id="g_name" name="name" required placeholder="Имя и фамилия">
+          </div>
+
+          <div class="modal-field">
+            <label for="g_email">Электронная почта <span class="required">*</span></label>
+            <input type="email" id="g_email" name="email" required placeholder="ваш@email.com">
+          </div>
+
+          <div class="modal-field">
+            <label for="g_phone">Телефон <span class="optional">(необязательно)</span></label>
+            <input type="tel" id="g_phone" name="phone" placeholder="+358 XX XXX XXXX">
+          </div>
+
+          <button type="submit" class="modal-submit" id="generalSubmitBtn">Отправить обращение</button>
+          <p class="modal-note">Нажимая кнопку, вы соглашаетесь на обработку персональных данных</p>
+        </form>
+        <div class="modal-success" id="modalSuccess" style="display:none;">
+          <div class="modal-success-icon">✅</div>
+          <h4>Обращение отправлено!</h4>
+          <p>Мы получили ваше сообщение и свяжемся с вами в ближайшее время.</p>
+          <button class="modal-submit" onclick="closeModal()">Закрыть</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
  <script src="script.js"></script>
 </body>
 </html>
@@ -358,6 +358,61 @@ function addSection(btn, titleVal) {
  return section;
 }

+// ─── Модальное окно ──────────────────────────────────────────────────────────
+function openModal() {
+  document.getElementById('modalOverlay').classList.add('open');
+  document.body.style.overflow = 'hidden';
+}
+
+function closeModal() {
+  document.getElementById('modalOverlay').classList.remove('open');
+  document.body.style.overflow = '';
+}
+
+function closeModalOutside(e) {
+  if (e.target === document.getElementById('modalOverlay')) closeModal();
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const generalForm = document.getElementById('generalForm');
+  if (generalForm) {
+    generalForm.addEventListener('submit', async function (e) {
+      e.preventDefault();
+      const btn = document.getElementById('generalSubmitBtn');
+      btn.disabled = true;
+      btn.textContent = 'Отправляем...';
+
+      // Синхронизировать _replyto
+      const emailVal = document.getElementById('g_email').value;
+      document.getElementById('general_replyto').value = emailVal;
+
+      try {
+        const formData = new FormData(generalForm);
+        const res = await fetch(generalForm.action, {
+          method: 'POST',
+          body: formData,
+          headers: { 'Accept': 'application/json' }
+        });
+        if (res.ok) {
+          generalForm.style.display = 'none';
+          document.getElementById('modalSuccess').style.display = 'block';
+        } else {
+          throw new Error('Ошибка сервера');
+        }
+      } catch (err) {
+        btn.disabled = false;
+        btn.textContent = 'Отправить обращение';
+        showFlash('Ошибка отправки. Попробуйте ещё раз.');
+      }
+    });
+  }
+
+  // Закрыть по Escape
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') closeModal();
+  });
+});
+
 function escapeAttr(str) {
  return str.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
@@ -463,6 +463,185 @@ button[type="submit"]:disabled { background: #aaa; cursor: not-allowed; }
  margin-top: 2px;
 }

+/* ─── Плавающая кнопка ─── */
+.fab {
+  position: fixed;
+  bottom: 28px;
+  right: 28px;
+  z-index: 150;
+  padding: 14px 22px;
+  background: #1a1a1a;
+  color: #fff;
+  border: none;
+  border-radius: 50px;
+  font-size: 0.9rem;
+  font-family: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
+}
+
+.fab:hover {
+  background: #e53935;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(229,57,53,0.35);
+}
+
+/* ─── Модальное окно ─── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+.modal-overlay.open {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.modal {
+  background: #fff;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 520px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+  transform: translateY(20px);
+  transition: transform 0.2s;
+}
+
+.modal-overlay.open .modal {
+  transform: translateY(0);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.modal-header h3 {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #999;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 4px;
+  border-radius: 4px;
+}
+
+.modal-close:hover {
+  color: #333;
+  background: #f0f0f0;
+}
+
+.modal-body {
+  padding: 20px 24px 24px;
+}
+
+.modal-subtitle {
+  color: #666;
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+}
+
+.modal-field {
+  margin-bottom: 16px;
+}
+
+.modal-field label {
+  font-weight: 500;
+  font-size: 0.9rem;
+  margin-bottom: 6px;
+  display: block;
+}
+
+.modal-field textarea {
+  min-height: 100px;
+}
+
+.required {
+  color: #e53935;
+}
+
+.optional {
+  color: #aaa;
+  font-weight: 400;
+  font-size: 0.82rem;
+}
+
+.modal-submit {
+  display: block;
+  width: 100%;
+  padding: 14px;
+  background: #1a1a1a;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: 20px;
+  transition: background 0.2s;
+}
+
+.modal-submit:hover {
+  background: #e53935;
+}
+
+.modal-submit:disabled {
+  background: #aaa;
+  cursor: not-allowed;
+}
+
+.modal-note {
+  font-size: 0.75rem;
+  color: #bbb;
+  text-align: center;
+  margin-top: 10px;
+}
+
+.modal-success {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.modal-success-icon {
+  font-size: 3rem;
+  margin-bottom: 12px;
+}
+
+.modal-success h4 {
+  font-size: 1.2rem;
+  margin-bottom: 8px;
+}
+
+.modal-success p {
+  color: #666;
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+}
+
 /* ─── Планшет ─── */
@media (max-width: 1024px) {
  .app-layout {