Anton
564 lines
32 KiB
HTML
564 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Saarijärven koirapuisto — Уточняющий опросник</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<style>
|
||
.radio-group, .checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin-top: 8px;
|
||
}
|
||
.radio-group label, .checkbox-group label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-weight: 400;
|
||
cursor: pointer;
|
||
padding: 10px 14px;
|
||
border: 1.5px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
}
|
||
.radio-group label:hover, .checkbox-group label:hover {
|
||
border-color: #2d6a4f;
|
||
background: #f0faf4;
|
||
}
|
||
.radio-group input[type="radio"],
|
||
.checkbox-group input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
accent-color: #2d6a4f;
|
||
flex-shrink: 0;
|
||
}
|
||
.radio-group input[type="radio"]:checked + span,
|
||
.checkbox-group input[type="checkbox"]:checked + span {
|
||
font-weight: 600;
|
||
color: #2d6a4f;
|
||
}
|
||
.radio-group label:has(input:checked),
|
||
.checkbox-group label:has(input:checked) {
|
||
border-color: #2d6a4f;
|
||
background: #f0faf4;
|
||
}
|
||
.question-comment {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1.5px dashed #ddd;
|
||
border-radius: 8px;
|
||
font-size: 0.85rem;
|
||
font-family: inherit;
|
||
color: #555;
|
||
background: #f9f9f9;
|
||
resize: vertical;
|
||
min-height: 44px;
|
||
}
|
||
.question-comment::placeholder { color: #bbb; font-style: italic; }
|
||
.question-comment:focus { outline: none; border-color: #2d6a4f; background: #fff; }
|
||
.other-input {
|
||
margin-top: 6px;
|
||
margin-left: 28px;
|
||
width: calc(100% - 28px);
|
||
padding: 8px 12px;
|
||
border: 1.5px solid #ddd;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
font-family: inherit;
|
||
display: none;
|
||
}
|
||
.other-input.visible { display: block; }
|
||
.question-label {
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 4px;
|
||
display: block;
|
||
}
|
||
.context-note {
|
||
font-size: 0.85rem;
|
||
color: #888;
|
||
font-style: italic;
|
||
margin-bottom: 16px;
|
||
padding: 10px 14px;
|
||
background: #f8f8f8;
|
||
border-radius: 8px;
|
||
border-left: 3px solid #c8e6c9;
|
||
}
|
||
.variant-card {
|
||
border: 1.5px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
padding: 14px 18px;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
}
|
||
.variant-card:has(input:checked) {
|
||
border-color: #2d6a4f;
|
||
background: #f0faf4;
|
||
}
|
||
.variant-card.recommended {
|
||
border-color: #2d6a4f;
|
||
}
|
||
.variant-card label {
|
||
font-weight: 400;
|
||
cursor: pointer;
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
.variant-card label:hover { background: none; border: none; }
|
||
.variant-title { font-weight: 700; font-size: 0.95rem; }
|
||
.variant-desc { font-size: 0.85rem; color: #555; margin-top: 4px; }
|
||
.variant-badge {
|
||
display: inline-block;
|
||
font-size: 0.72rem;
|
||
padding: 2px 8px;
|
||
border-radius: 20px;
|
||
margin-left: 8px;
|
||
font-weight: 600;
|
||
}
|
||
.badge-green { background: #e8f5e9; color: #2d6a4f; }
|
||
.badge-orange { background: #fff3e0; color: #e65100; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="company-header">
|
||
<img src="logo.jpg" alt="Kot Kanagrilli Oy" class="company-logo">
|
||
<div class="company-info">
|
||
<div class="company-name">Kot Kanagrilli Oy</div>
|
||
<a href="mailto:kotkanagrilli@gmail.com" class="company-email">kotkanagrilli@gmail.com</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<div class="toolbar-left">
|
||
<span class="toolbar-title">Saarijärven koirapuisto — Уточняющий опросник</span>
|
||
<span class="save-status" id="saveStatus"></span>
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<button class="toolbar-btn" id="btnReset" title="Очистить форму"><span class="btn-icon">↺</span><span class="btn-text"> Заново</span></button>
|
||
<button class="toolbar-btn" id="btnSave" title="Сохранить"><span class="btn-icon">💾</span><span class="btn-text"> Сохранить</span></button>
|
||
<button class="toolbar-btn primary" id="btnShare" title="Поделиться ссылкой"><span class="btn-icon">🔗</span><span class="btn-text"> Поделиться</span></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flash" id="flash"></div>
|
||
|
||
<div class="app-layout">
|
||
<div class="form-column">
|
||
<header>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<p class="progress-text" id="progressText">Заполнено: 0 из 24</p>
|
||
</header>
|
||
|
||
<form id="questionnaireForm" action="https://formspree.io/f/xrejjoav" method="POST">
|
||
<input type="hidden" name="_replyto" id="_replyto">
|
||
<input type="hidden" name="sender_time" id="sender_time">
|
||
<input type="hidden" name="sender_timezone" id="sender_timezone">
|
||
<input type="hidden" name="anton_time" id="anton_time">
|
||
<input type="hidden" name="questionnaire_number" value="2">
|
||
|
||
<!-- 1. Бронирование -->
|
||
<section class="section" data-section-id="booking">
|
||
<div class="section-header"><h2>Как работает бронирование</h2></div>
|
||
|
||
<div class="question" data-index="1">
|
||
<span class="question-label">1. Как устроены слоты времени?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="slot_type" value="fixed"><span>Фиксированные каждый час (9:00, 10:00, 11:00...)</span></label>
|
||
<label><input type="radio" name="slot_type" value="flexible"><span>Клиент сам выбирает любое время начала</span></label>
|
||
<label><input type="radio" name="slot_type" value="advice"><span>Не знаю, посоветуйте</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="2">
|
||
<span class="question-label">2. Можно ли взять несколько часов подряд одним бронированием?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="multi_hour" value="yes"><span>Да, без ограничений</span></label>
|
||
<label><input type="radio" name="multi_hour" value="limited"><span>Да, но не больше X часов</span></label>
|
||
<label><input type="radio" name="multi_hour" value="no"><span>Нет, только по одному часу</span></label>
|
||
</div>
|
||
<input type="text" class="other-input" id="multi_hour_limit" name="multi_hour_limit" placeholder="Максимум сколько часов?">
|
||
</div>
|
||
|
||
<div class="question" data-index="3">
|
||
<span class="question-label">3. Что видит клиент в календаре?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="calendar_view" value="free_only"><span>Только свободные слоты</span></label>
|
||
<label><input type="radio" name="calendar_view" value="both"><span>И свободные и занятые (занятые отмечены серым)</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="4">
|
||
<span class="question-label">4. Как далеко вперёд можно бронировать?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="advance_booking" value="7"><span>7 дней</span></label>
|
||
<label><input type="radio" name="advance_booking" value="14"><span>14 дней</span></label>
|
||
<label><input type="radio" name="advance_booking" value="30"><span>30 дней</span></label>
|
||
<label><input type="radio" name="advance_booking" value="60"><span>60 дней</span></label>
|
||
<label><input type="radio" name="advance_booking" value="unlimited"><span>Без ограничений</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="5">
|
||
<span class="question-label">5. Клиент может сам отменить бронирование через приложение?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="self_cancel" value="yes"><span>Да, самостоятельно через приложение</span></label>
|
||
<label><input type="radio" name="self_cancel" value="contact"><span>Нет, только написав мне</span></label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. Оплата -->
|
||
<section class="section" data-section-id="payment">
|
||
<div class="section-header"><h2>Оплата</h2></div>
|
||
|
||
<div class="question" data-index="6">
|
||
<span class="question-label">6. Цена за один час аренды парка (€)</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="price_per_hour" value="under10"><span>До 10€</span></label>
|
||
<label><input type="radio" name="price_per_hour" value="10-15"><span>10–15€</span></label>
|
||
<label><input type="radio" name="price_per_hour" value="15-20"><span>15–20€</span></label>
|
||
<label><input type="radio" name="price_per_hour" value="over20"><span>Больше 20€</span></label>
|
||
<label><input type="radio" name="price_per_hour" value="other"><span>Свой вариант</span></label>
|
||
</div>
|
||
<input type="text" class="other-input" id="price_other" name="price_other" placeholder="Напишите сумму...">
|
||
</div>
|
||
|
||
<div class="question" data-index="7">
|
||
<span class="question-label">7. Будут ли разные тарифы?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="price_tiers" value="single"><span>Один тариф для всех</span></label>
|
||
<label><input type="radio" name="price_tiers" value="weekday_weekend"><span>Будни дешевле, выходные дороже</span></label>
|
||
<label><input type="radio" name="price_tiers" value="evening"><span>Вечерний/ночной тариф отдельно</span></label>
|
||
<label><input type="radio" name="price_tiers" value="complex"><span>Несколько разных тарифов</span></label>
|
||
<label><input type="radio" name="price_tiers" value="later"><span>Решу позже</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="8">
|
||
<span class="question-label">8. При отмене за 24+ часа — что происходит с деньгами?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="refund_policy" value="full"><span>Полный возврат автоматически</span></label>
|
||
<label><input type="radio" name="refund_policy" value="partial"><span>Возврат за вычетом комиссии</span></label>
|
||
<label><input type="radio" name="refund_policy" value="reschedule"><span>Нет возврата, только перенос на другую дату</span></label>
|
||
<label><input type="radio" name="refund_policy" value="no_refund"><span>Возврат не предусмотрен</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="9">
|
||
<span class="question-label">9. Нужен ли счёт-фактура (lasku) для корпоративных клиентов?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="invoice" value="yes"><span>Да</span></label>
|
||
<label><input type="radio" name="invoice" value="no"><span>Нет</span></label>
|
||
<label><input type="radio" name="invoice" value="later"><span>Решу позже</span></label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. PIN и ворота -->
|
||
<section class="section" data-section-id="pin">
|
||
<div class="section-header"><h2>PIN-код и ворота</h2></div>
|
||
<p class="context-note">Наше приложение будет автоматически генерировать PIN и отправлять его в систему замка. Нам важно знать какую систему вы планируете установить — чтобы подключить к ней наше приложение.</p>
|
||
|
||
<div class="question" data-index="10">
|
||
<span class="question-label">10. Какую систему замка/ворот планируете установить?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="lock_system" value="nuki"><span>Nuki</span></label>
|
||
<label><input type="radio" name="lock_system" value="yale"><span>Yale</span></label>
|
||
<label><input type="radio" name="lock_system" value="abloy"><span>Abloy (финский стандарт)</span></label>
|
||
<label><input type="radio" name="lock_system" value="unknown"><span>Ещё не выбрала, нужна рекомендация</span></label>
|
||
<label><input type="radio" name="lock_system" value="other"><span>Другая система</span></label>
|
||
</div>
|
||
<input type="text" class="other-input" id="lock_other" name="lock_other" placeholder="Напишите марку/модель...">
|
||
</div>
|
||
|
||
<div class="question" data-index="11">
|
||
<span class="question-label">11. PIN-код — сколько цифр?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="pin_length" value="4"><span>4 цифры</span></label>
|
||
<label><input type="radio" name="pin_length" value="6"><span>6 цифр</span></label>
|
||
<label><input type="radio" name="pin_length" value="advice"><span>Посоветуйте</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="12">
|
||
<span class="question-label">12. Как клиент получает PIN после оплаты?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="pin_delivery" value="email"><span>По email</span></label>
|
||
<label><input type="radio" name="pin_delivery" value="app"><span>В приложении (пуш-уведомление)</span></label>
|
||
<label><input type="radio" name="pin_delivery" value="both"><span>И email и в приложении</span></label>
|
||
<label><input type="radio" name="pin_delivery" value="sms"><span>По SMS</span></label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. Уведомления -->
|
||
<section class="section" data-section-id="notifications">
|
||
<div class="section-header"><h2>Уведомления</h2></div>
|
||
|
||
<div class="question" data-index="13">
|
||
<span class="question-label">13. Подтверждение бронирования клиенту сразу после оплаты?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="booking_confirm" value="email"><span>Да, по email</span></label>
|
||
<label><input type="radio" name="booking_confirm" value="sms"><span>Да, по SMS</span></label>
|
||
<label><input type="radio" name="booking_confirm" value="both"><span>И email и SMS</span></label>
|
||
<label><input type="radio" name="booking_confirm" value="no"><span>Не нужно</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="14">
|
||
<span class="question-label">14. Напоминание клиенту перед началом слота — за сколько?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="reminder_before" value="24h"><span>За 24 часа</span></label>
|
||
<label><input type="radio" name="reminder_before" value="1h"><span>За 1 час</span></label>
|
||
<label><input type="radio" name="reminder_before" value="30min"><span>За 30 минут</span></label>
|
||
<label><input type="radio" name="reminder_before" value="no"><span>Не нужно</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="15">
|
||
<span class="question-label">15. Предупреждение когда время заканчивается — за сколько минут?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="time_warning" value="30min"><span>За 30 минут</span></label>
|
||
<label><input type="radio" name="time_warning" value="15min"><span>За 15 минут</span></label>
|
||
<label><input type="radio" name="time_warning" value="5min"><span>За 5 минут</span></label>
|
||
<label><input type="radio" name="time_warning" value="no"><span>Не нужно</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="16">
|
||
<span class="question-label">16. Вы (Сирпа) получаете уведомление о каждом новом бронировании?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="admin_notify" value="email"><span>Да, по email</span></label>
|
||
<label><input type="radio" name="admin_notify" value="sms"><span>Да, по SMS</span></label>
|
||
<label><input type="radio" name="admin_notify" value="both"><span>И email и SMS</span></label>
|
||
<label><input type="radio" name="admin_notify" value="no"><span>Нет, буду сама проверять</span></label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. Панель управления -->
|
||
<section class="section" data-section-id="admin">
|
||
<div class="section-header"><h2>Ваша панель управления</h2></div>
|
||
|
||
<div class="question" data-index="17">
|
||
<span class="question-label">17. Что хотите видеть в своей панели? (можно несколько)</span>
|
||
<div class="checkbox-group">
|
||
<label><input type="checkbox" name="admin_features" value="bookings_list"><span>Список всех бронирований</span></label>
|
||
<label><input type="checkbox" name="admin_features" value="revenue"><span>Статистику доходов</span></label>
|
||
<label><input type="checkbox" name="admin_features" value="manual_booking"><span>Создать/отменить бронирование вручную</span></label>
|
||
<label><input type="checkbox" name="admin_features" value="block_dates"><span>Блокировка дат (техработы, отпуск)</span></label>
|
||
<label><input type="checkbox" name="admin_features" value="change_price"><span>Изменение цен</span></label>
|
||
<label><input type="checkbox" name="admin_features" value="clients"><span>История клиентов</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="18">
|
||
<span class="question-label">18. Нужна ли история клиентов (кто бронировал раньше)?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="client_history" value="yes"><span>Да</span></label>
|
||
<label><input type="radio" name="client_history" value="no"><span>Нет</span></label>
|
||
<label><input type="radio" name="client_history" value="later"><span>Решу позже</span></label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. Формат приложения -->
|
||
<section class="section" data-section-id="format">
|
||
<div class="section-header"><h2>Формат приложения</h2></div>
|
||
|
||
<div class="question" data-index="19">
|
||
<span class="question-label">19. Какой формат приложения?</span>
|
||
|
||
<div class="variant-card">
|
||
<label>
|
||
<input type="radio" name="product_format" value="web">
|
||
<div>
|
||
<div class="variant-title">Только сайт <span class="variant-badge badge-green">Быстро, дёшево</span></div>
|
||
<div class="variant-desc">Работает в браузере телефона, компьютера, планшета. Не нужно ничего устанавливать.</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="variant-card recommended">
|
||
<label>
|
||
<input type="radio" name="product_format" value="web_pwa">
|
||
<div>
|
||
<div class="variant-title">Сайт + установка на телефон <span class="variant-badge badge-green">Рекомендуем</span></div>
|
||
<div class="variant-desc">Работает как приложение, но не требует App Store. Клиент добавляет на экран — и всё.</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="variant-card">
|
||
<label>
|
||
<input type="radio" name="product_format" value="ios_android">
|
||
<div>
|
||
<div class="variant-title">Приложение для iPhone и Android <span class="variant-badge badge-orange">Дороже, дольше</span></div>
|
||
<div class="variant-desc">Полноценное приложение в App Store и Google Play. Максимальный комфорт для клиентов.</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="20">
|
||
<span class="question-label">20. Язык приложения?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="language" value="fi"><span>Только финский</span></label>
|
||
<label><input type="radio" name="language" value="fi_en"><span>Финский + английский</span></label>
|
||
<label><input type="radio" name="language" value="fi_en_ru"><span>Финский + английский + русский</span></label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7. Дизайн -->
|
||
<section class="section" data-section-id="design">
|
||
<div class="section-header"><h2>Дизайн</h2></div>
|
||
|
||
<div class="question" data-index="21">
|
||
<span class="question-label">21. Логотип?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="logo" value="make_simple"><span>Сделайте простой логотип</span></label>
|
||
<label><input type="radio" name="logo" value="own_designer"><span>Найду дизайнера сама</span></label>
|
||
<label><input type="radio" name="logo" value="not_needed"><span>Логотип не нужен</span></label>
|
||
<label><input type="radio" name="logo" value="later"><span>Решу позже</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="22">
|
||
<span class="question-label">22. Цвета и стиль сайта?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="design_style" value="nature"><span>Природные (зелёный, коричневый, тёплые тона)</span></label>
|
||
<label><input type="radio" name="design_style" value="minimal"><span>Современный минимализм (белый/чёрный)</span></label>
|
||
<label><input type="radio" name="design_style" value="bright"><span>Яркий и дружелюбный</span></label>
|
||
<label><input type="radio" name="design_style" value="no_pref"><span>Нет предпочтений, доверяю вам</span></label>
|
||
<label><input type="radio" name="design_style" value="other"><span>Свой вариант</span></label>
|
||
</div>
|
||
<input type="text" class="other-input" id="design_other" name="design_other" placeholder="Опишите пожелания...">
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8. Юридическое -->
|
||
<section class="section" data-section-id="legal">
|
||
<div class="section-header"><h2>Юридическое</h2></div>
|
||
<p class="context-note">По закону ЕС (GDPR) любой финский сайт обязан иметь политику конфиденциальности и правила использования.</p>
|
||
|
||
<div class="question" data-index="23">
|
||
<span class="question-label">23. Правила пользования парком — кто составляет?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="terms" value="you_template"><span>Подготовьте шаблон, я дополню своими правилами</span></label>
|
||
<label><input type="radio" name="terms" value="me"><span>Составлю сама</span></label>
|
||
<label><input type="radio" name="terms" value="you_full"><span>Подготовьте полностью</span></label>
|
||
<label><input type="radio" name="terms" value="what_is_it"><span>Не знаю что это — объясните</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question" data-index="24">
|
||
<span class="question-label">24. Политика конфиденциальности (GDPR) — кто составляет?</span>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="privacy" value="you_template"><span>Подготовьте шаблон, я дополню</span></label>
|
||
<label><input type="radio" name="privacy" value="me"><span>Составлю сама</span></label>
|
||
<label><input type="radio" name="privacy" value="you_full"><span>Подготовьте полностью</span></label>
|
||
<label><input type="radio" name="privacy" value="what_is_it"><span>Не знаю что это — объясните</span></label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Контакты -->
|
||
<section class="section" data-section-id="contacts">
|
||
<div class="section-header"><h2>Ваши контактные данные</h2></div>
|
||
<div class="question">
|
||
<label for="client_name">Имя</label>
|
||
<input type="text" id="client_name" name="client_name" required placeholder="Ваше имя" value="Sirpa Lehtinen">
|
||
</div>
|
||
<div class="question">
|
||
<label for="client_email">Email</label>
|
||
<input type="email" id="client_email" name="client_email" required placeholder="ваш@email.com" value="sirpulik@gmail.com">
|
||
</div>
|
||
<div class="question">
|
||
<label for="client_phone">Телефон (необязательно)</label>
|
||
<input type="tel" id="client_phone" name="client_phone" placeholder="+358 XX XXX XXXX">
|
||
</div>
|
||
</section>
|
||
|
||
<button type="submit" id="submitBtn">Отправить ответы</button>
|
||
<p class="submit-note">После отправки мы свяжемся с вами в течение 1-2 рабочих дней.</p>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Предпросмотр -->
|
||
<div class="preview-column">
|
||
<div class="preview-panel">
|
||
<div class="preview-header">Предпросмотр</div>
|
||
<div class="preview-a4" id="previewContent">
|
||
<p class="preview-empty">Начните заполнять форму — здесь появится предпросмотр</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Кнопка внизу страницы -->
|
||
<div class="bottom-contact">
|
||
<button class="bottom-contact-btn" onclick="openModal()">✉ Форма по другому вопросу</button>
|
||
</div>
|
||
|
||
<!-- Модальное окно -->
|
||
<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="script2.js"></script>
|
||
</body>
|
||
</html>
|