Anton
278 lines
16 KiB
HTML
278 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Sunset Pass — Опросник</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</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">Sunset Pass — Опросник о проекте</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>
|
||
|
||
<!-- Flash сообщение -->
|
||
<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 из 12</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">
|
||
|
||
<!-- О парке -->
|
||
<section class="section" data-section-id="park">
|
||
<div class="section-header">
|
||
<h2 contenteditable="false">О парке</h2>
|
||
</div>
|
||
|
||
<div class="question" data-index="1">
|
||
<label for="park_size">1. Какой размер парка? (площадь, примерно)</label>
|
||
<textarea id="park_size" name="park_size" placeholder="Например: 2000 кв.м, примерно 50x40 метров"></textarea>
|
||
<textarea id="park_size_comment" name="park_size_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="2">
|
||
<label for="max_people">2. Сколько человек максимум могут быть в парке одновременно?</label>
|
||
<textarea id="max_people" name="max_people" placeholder="Например: 5 человек с собаками"></textarea>
|
||
<textarea id="max_people_comment" name="max_people_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="3">
|
||
<label for="slot_duration">3. Какова минимальная и максимальная длительность одного слота?</label>
|
||
<textarea id="slot_duration" name="slot_duration" placeholder="Например: минимум 30 минут, максимум 2 часа"></textarea>
|
||
<textarea id="slot_duration_comment" name="slot_duration_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="4">
|
||
<label for="working_hours">4. Часы работы парка (по дням недели)?</label>
|
||
<textarea id="working_hours" name="working_hours" placeholder="Например: пн-пт 8:00-20:00, сб-вс 9:00-21:00"></textarea>
|
||
<textarea id="working_hours_comment" name="working_hours_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<button type="button" class="add-field-btn" onclick="addField(this)">+ Добавить поле</button>
|
||
</section>
|
||
|
||
<button type="button" class="add-section-btn" onclick="addSection(this)">+ Добавить раздел</button>
|
||
|
||
<!-- О бронировании -->
|
||
<section class="section" data-section-id="booking">
|
||
<div class="section-header">
|
||
<h2 contenteditable="false">О бронировании</h2>
|
||
</div>
|
||
|
||
<div class="question" data-index="5">
|
||
<label for="payment">5. Как вы хотите принимать оплату?</label>
|
||
<textarea id="payment" name="payment" placeholder="Например: онлайн картой, наличными на месте, выставлять счёт"></textarea>
|
||
<textarea id="payment_comment" name="payment_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="6">
|
||
<label for="cancellation">6. Нужна ли возможность отмены бронирования? За сколько часов до начала?</label>
|
||
<textarea id="cancellation" name="cancellation" placeholder="Например: да, за 24 часа до начала / нет, отмена невозможна"></textarea>
|
||
<textarea id="cancellation_comment" name="cancellation_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="7">
|
||
<label for="registration">7. Нужна ли регистрация пользователя или достаточно имя + email?</label>
|
||
<textarea id="registration" name="registration" placeholder="Например: достаточно имени и email / нужна полная регистрация с паролем"></textarea>
|
||
<textarea id="registration_comment" name="registration_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<button type="button" class="add-field-btn" onclick="addField(this)">+ Добавить поле</button>
|
||
</section>
|
||
|
||
<button type="button" class="add-section-btn" onclick="addSection(this)">+ Добавить раздел</button>
|
||
|
||
<!-- О воротах -->
|
||
<section class="section" data-section-id="gates">
|
||
<div class="section-header">
|
||
<h2 contenteditable="false">О воротах</h2>
|
||
</div>
|
||
|
||
<div class="question" data-index="8">
|
||
<label for="gate_equipment">8. Какое оборудование уже есть на воротах или нужно закупить?</label>
|
||
<textarea id="gate_equipment" name="gate_equipment" placeholder="Например: уже есть электронный замок марки X / нужно закупить всё с нуля"></textarea>
|
||
<textarea id="gate_equipment_comment" name="gate_equipment_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="9">
|
||
<label for="pin_generation">9. PIN-код — кто его генерирует: вы вручную или система автоматически?</label>
|
||
<textarea id="pin_generation" name="pin_generation" placeholder="Например: система должна генерировать автоматически после оплаты"></textarea>
|
||
<textarea id="pin_generation_comment" name="pin_generation_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<button type="button" class="add-field-btn" onclick="addField(this)">+ Добавить поле</button>
|
||
</section>
|
||
|
||
<button type="button" class="add-section-btn" onclick="addSection(this)">+ Добавить раздел</button>
|
||
|
||
<!-- О дизайне -->
|
||
<section class="section" data-section-id="design">
|
||
<div class="section-header">
|
||
<h2 contenteditable="false">О дизайне и языке</h2>
|
||
</div>
|
||
|
||
<div class="question" data-index="10">
|
||
<label for="branding">10. Есть ли логотип, фирменные цвета, название парка?</label>
|
||
<textarea id="branding" name="branding" placeholder="Например: название 'Koira Park', цвета зелёный и белый, логотип есть (могу прислать)"></textarea>
|
||
<textarea id="branding_comment" name="branding_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="11">
|
||
<label for="language">11. На каком языке должен быть сайт/приложение?</label>
|
||
<textarea id="language" name="language" placeholder="Например: только финский / финский + английский / финский + русский"></textarea>
|
||
<textarea id="language_comment" name="language_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<button type="button" class="add-field-btn" onclick="addField(this)">+ Добавить поле</button>
|
||
</section>
|
||
|
||
<button type="button" class="add-section-btn" onclick="addSection(this)">+ Добавить раздел</button>
|
||
|
||
<!-- О сроках -->
|
||
<section class="section" data-section-id="deadlines">
|
||
<div class="section-header">
|
||
<h2 contenteditable="false">О сроках</h2>
|
||
</div>
|
||
|
||
<div class="question" data-index="12">
|
||
<label for="deadline">12. Когда нужен готовый продукт?</label>
|
||
<textarea id="deadline" name="deadline" placeholder="Например: через 2 месяца / к лету 2026 / как можно скорее"></textarea>
|
||
<textarea id="deadline_comment" name="deadline_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<button type="button" class="add-field-btn" onclick="addField(this)">+ Добавить поле</button>
|
||
</section>
|
||
|
||
<button type="button" class="add-section-btn" onclick="addSection(this)">+ Добавить раздел</button>
|
||
|
||
<!-- Контактные данные -->
|
||
<section class="section" data-section-id="contacts">
|
||
<div class="section-header">
|
||
<h2 contenteditable="false">Ваши контактные данные</h2>
|
||
</div>
|
||
<div class="question">
|
||
<label for="client_name">Имя</label>
|
||
<input type="text" id="client_name" name="client_name" required placeholder="Ваше имя">
|
||
</div>
|
||
<div class="question">
|
||
<label for="client_email">Email</label>
|
||
<input type="email" id="client_email" name="client_email" required placeholder="ваш@email.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="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>
|
||
|
||
<!-- Кнопка внизу страницы -->
|
||
<div class="bottom-contact">
|
||
<button class="bottom-contact-btn" onclick="openModal()">✉ Форма по другому вопросу</button>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|