Anton
146 lines
8.0 KiB
HTML
146 lines
8.0 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="container">
|
||
<header>
|
||
<h1>Sunset Pass</h1>
|
||
<p class="subtitle">Опросник для разработки системы бронирования парка</p>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<p class="progress-text" id="progressText">Вопрос 1 из 12</p>
|
||
</header>
|
||
|
||
<form id="questionnaireForm">
|
||
|
||
<!-- О парке -->
|
||
<section class="section">
|
||
<h2>О парке</h2>
|
||
|
||
<div class="question" data-index="1">
|
||
<label>1. Какой размер парка? (площадь, примерно)</label>
|
||
<textarea name="park_size" placeholder="Например: 2000 кв.м, примерно 50x40 метров"></textarea>
|
||
<textarea name="park_size_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="2">
|
||
<label>2. Сколько человек максимум могут быть в парке одновременно?</label>
|
||
<textarea name="max_people" placeholder="Например: 5 человек с собаками"></textarea>
|
||
<textarea name="max_people_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="3">
|
||
<label>3. Какова минимальная и максимальная длительность одного слота?</label>
|
||
<textarea name="slot_duration" placeholder="Например: минимум 30 минут, максимум 2 часа"></textarea>
|
||
<textarea name="slot_duration_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="4">
|
||
<label>4. Часы работы парка (по дням недели)?</label>
|
||
<textarea name="working_hours" placeholder="Например: пн-пт 8:00-20:00, сб-вс 9:00-21:00"></textarea>
|
||
<textarea name="working_hours_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- О бронировании -->
|
||
<section class="section">
|
||
<h2>О бронировании</h2>
|
||
|
||
<div class="question" data-index="5">
|
||
<label>5. Как вы хотите принимать оплату?</label>
|
||
<textarea name="payment" placeholder="Например: онлайн картой, наличными на месте, выставлять счёт"></textarea>
|
||
<textarea name="payment_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="6">
|
||
<label>6. Нужна ли возможность отмены бронирования? За сколько часов до начала?</label>
|
||
<textarea name="cancellation" placeholder="Например: да, за 24 часа до начала / нет, отмена невозможна"></textarea>
|
||
<textarea name="cancellation_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="7">
|
||
<label>7. Нужна ли регистрация пользователя или достаточно имя + email?</label>
|
||
<textarea name="registration" placeholder="Например: достаточно имени и email / нужна полная регистрация с паролем"></textarea>
|
||
<textarea name="registration_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- О воротах -->
|
||
<section class="section">
|
||
<h2>О воротах</h2>
|
||
|
||
<div class="question" data-index="8">
|
||
<label>8. Какое оборудование уже есть на воротах или нужно закупить?</label>
|
||
<textarea name="gate_equipment" placeholder="Например: уже есть электронный замок марки X / нужно закупить всё с нуля"></textarea>
|
||
<textarea name="gate_equipment_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="9">
|
||
<label>9. PIN-код — кто его генерирует: вы вручную или система автоматически?</label>
|
||
<textarea name="pin_generation" placeholder="Например: система должна генерировать автоматически после оплаты"></textarea>
|
||
<textarea name="pin_generation_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- О дизайне -->
|
||
<section class="section">
|
||
<h2>О дизайне и языке</h2>
|
||
|
||
<div class="question" data-index="10">
|
||
<label>10. Есть ли логотип, фирменные цвета, название парка?</label>
|
||
<textarea name="branding" placeholder="Например: название 'Koira Park', цвета зелёный и белый, логотип есть (могу прислать)"></textarea>
|
||
<textarea name="branding_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
|
||
<div class="question" data-index="11">
|
||
<label>11. На каком языке должен быть сайт/приложение?</label>
|
||
<textarea name="language" placeholder="Например: только финский / финский + английский / финский + русский"></textarea>
|
||
<textarea name="language_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- О сроках -->
|
||
<section class="section">
|
||
<h2>О сроках</h2>
|
||
|
||
<div class="question" data-index="12">
|
||
<label>12. Когда нужен готовый продукт?</label>
|
||
<textarea name="deadline" placeholder="Например: через 2 месяца / к лету 2026 / как можно скорее"></textarea>
|
||
<textarea name="deadline_comment" class="comment" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Контактные данные -->
|
||
<section class="section">
|
||
<h2>Ваши контактные данные</h2>
|
||
<div class="question">
|
||
<label>Имя</label>
|
||
<input type="text" name="client_name" required placeholder="Ваше имя">
|
||
</div>
|
||
<div class="question">
|
||
<label>Email</label>
|
||
<input type="email" name="client_email" required placeholder="ваш@email.com">
|
||
</div>
|
||
<div class="question">
|
||
<label>Телефон (необязательно)</label>
|
||
<input type="tel" 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>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|