Files
Kirik 3de138ff41 UX overhaul: glassmorphism nav/footer, forms redesign, mobile fixes
Navigation:
- Nav bar pill shape (border-radius: 100px), dark glass style
- Icons added to all nav items (FA4 outline variants, fixed-width alignment)
- Footer hidden on all devices (nav panel covers mobile)
- Footer nav icons + text added before removal

Forms (ask.md, plan.md):
- Full glassmorphism redesign: rounded card, blur backdrop
- Input borders visible (#b8c4ce), focus ring, proper placeholder colors
- Select: self-contained CSS, no backdrop-filter conflict, arrow fixed
- Submit button: gradient with shadow
- File upload button: .file-btn class, fa-arrow-down icon
- form-note styled as info callout with left border + ⓘ icon
- Footnotes sup.fn: circular badge, baseline positioning (no line-height jump)
- Footnote ¹ on both consent checkboxes, accordion = full legal text
- Dark mode: opaque dark card (rgba 22,26,34,0.88), proper contrast
- Dark mode success/error messages adapted
- Double checkmark bug fixed (removed ::after overlay)
- Italic removed from privacy-details text

Layout:
- #main rounded corners (20px all sides) + margin for visibility
- Post card images rounded (border-radius: 10px)
- Page titles: uppercase removed, font-weight 900, left-aligned
- "Подробнее" button hidden on post cards
- iOS background-attachment: fixed bug fixed (scroll on mobile)
- Pagination mobile: counter restored, buttons above footer

Content:
- Page titles uncommented in front matter (gallery, map, ask, plan)
- Duplicate rawhtml title blocks removed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 00:44:57 +01:00

202 lines
12 KiB
Markdown
Executable File

+++
title = 'Хочу поехать'
slug = 'ask'
disableComments = true
+++
{{< rawhtml >}}
<p class="page-lead">Есть вопрос или хотите предложить маршрут — напишите нам. <a href="/plan/">Смотреть календарь поездок →</a></p>
{{< /rawhtml >}}
{{< rawhtml >}}
<div class="contact-form-container">
<!-- Сообщения об успехе/ошибке -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const success = urlParams.get('success');
const error = urlParams.get('error');
if (success) {
const messageDiv = document.createElement('div');
messageDiv.className = 'form-message form-success';
messageDiv.textContent = success;
document.querySelector('.contact-form-container').insertBefore(messageDiv, document.querySelector('.contact-form'));
}
if (error) {
const messageDiv = document.createElement('div');
messageDiv.className = 'form-message form-error';
messageDiv.textContent = error;
document.querySelector('.contact-form-container').insertBefore(messageDiv, document.querySelector('.contact-form'));
}
// Русские сообщения валидации
const inputs = document.querySelectorAll('input[required], select[required], textarea[required]');
inputs.forEach(function(input) {
input.addEventListener('invalid', function() {
if (input.type === 'checkbox') {
input.setCustomValidity('Пожалуйста, отметьте этот пункт для продолжения');
} else if (input.type === 'email') {
input.setCustomValidity('Пожалуйста, введите корректный email адрес');
} else if (input.tagName === 'SELECT') {
input.setCustomValidity('Пожалуйста, выберите один из вариантов');
} else {
input.setCustomValidity('Пожалуйста, заполните это поле');
}
});
input.addEventListener('input', function() {
input.setCustomValidity('');
});
});
// Загружаем скрипт шифрования
const script = document.createElement('script');
script.src = '/js/encryption.js';
script.onload = function() {};
script.onerror = function() {};
document.head.appendChild(script);
});
// Обработчик отправки формы
function handleFormSubmit(event) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
const submitBtn = form.querySelector('.submit-btn');
// Показываем состояние загрузки
submitBtn.textContent = 'Отправляем...';
submitBtn.disabled = true;
fetch('/forms/send_ask.php', {
method: 'POST',
body: formData
})
.then(response => {
return response.text();
})
.then(text => {
try {
const data = JSON.parse(text);
return data;
} catch (e) {
throw new Error('Сервер вернул не JSON: ' + text.substring(0, 100));
}
})
.then(data => {
if (data.success) {
// Успех
const successDiv = document.createElement('div');
successDiv.className = 'form-message form-success';
successDiv.textContent = data.message;
form.parentNode.insertBefore(successDiv, form);
form.reset();
} else {
// Ошибка
const errorDiv = document.createElement('div');
errorDiv.className = 'form-message form-error';
errorDiv.textContent = data.error;
form.parentNode.insertBefore(errorDiv, form);
}
})
.catch(error => {
// Ошибка сети
const errorDiv = document.createElement('div');
errorDiv.className = 'form-message form-error';
errorDiv.textContent = 'Ошибка отправки формы. Попробуйте еще раз.';
form.parentNode.insertBefore(errorDiv, form);
})
.finally(() => {
// Восстанавливаем кнопку
submitBtn.textContent = 'Отправить вопрос';
submitBtn.disabled = false;
});
return false;
}
</script>
<form class="contact-form" action="/forms/send_ask.php" method="POST" onsubmit="return handleFormSubmit(event)">
<div class="form-group">
<label for="name">Ваше имя *</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="ivan@mail.ru">
</div>
<div class="form-group">
<label for="telegram">Ник в Telegram</label>
<input type="text" id="telegram" name="telegram" placeholder="@ваш_ник">
</div>
<div class="form-note">
<p>Укажите email или Telegram ник (одно из двух обязательно)</p>
</div>
<div class="form-group">
<label for="subject">Тема *</label>
<select id="subject" name="subject" required>
<option value="" disabled selected></option>
<option value="работа сайта">Работа сайта</option>
<option value="запланированные мероприятия">Запланированные мероприятия</option>
<option value="пройденные маршруты">Пройденные маршруты</option>
<option value="условия участия">Условия участия</option>
<option value="условия сотрудничества">Условия сотрудничества</option>
<option value="хочу предложить поездку">Предложить поездку</option>
<option value="контакты для связи">Контакты для связи</option>
</select>
</div>
<div class="form-group">
<label for="message">Ваш вопрос *</label>
<textarea id="message" name="message" placeholder="Задайте ваш вопрос или предложите свою идею для поездки..." required></textarea>
</div>
<div class="form-group checkbox-group">
<label class="checkbox-container">
<input type="checkbox" id="privacy_consent" name="privacy_consent" required>
<span class="checkmark"></span>
<span class="privacy-text">
Я согласен на обработку персональных данных в соответствии с ФЗ №152 <sup class="fn">1</sup>
<div class="privacy-details">
<p>Данные будут обрабатываться для ответа на ваш вопрос.</p>
<p>Согласие действует 1 месяц. Отзыв согласия: <a href="mailto:sleep-trip@ya.ru">sleep-trip@ya.ru</a></p>
</div>
</span>
</label>
</div>
<button type="submit" class="submit-btn">
Отправить вопрос
</button>
</form>
</div>
{{< /rawhtml >}}
{{< rawhtml >}}
<details class="legal-details">
<summary><sup class="fn">1</sup> Постановка «галочки» в чекбоксе является подтверждением вашего согласия — читать полный текст (ФЗ №152)</summary>
<div class="legal-text">
<p>Заполнение «чек-бокса» (проставление «галочки»/«веб-метки» на сайте sleeptrip.ru в графе «Я согласен на обработку персональных данных») и нажатие соответствующей кнопки и (или) направление персональных данных (фамилия, имя, телефон, имя (ник) в Телеграм) в ответном письме на адрес: sleep-trip@ya.ru является подтверждением Вашего согласия на обработку персональных данных либо с целью получения разрешения на полёты беспилотного воздушного судна (БВС), либо с целью ответа на вопрос, заданный на сайте sleeptrip.ru.</p>
<p>Предоставленные персональные данные будут обрабатываться в соответствии с положениями Федерального закона Российской Федерации №152-ФЗ от 27.07.2006 «О персональных данных».</p>
<p>Заявление об уточнении персональных данных, отзыве настоящего согласия может быть направлено по электронной почте по адресу: <a href="mailto:sleep-trip@ya.ru">sleep-trip@ya.ru</a>.</p>
<p>Я выражаю свое согласие на обработку, включая: сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (предоставление, доступ), блокирование, обезличивание, удаление, уничтожение, своих персональных данных (в случае предоставления мной) Оператору (владельцу сайта sleeptrip.ru) для целей:</p>
<ul>
<li>обеспечения получения разрешения на полёты БВС и направления мне информационных сообщений о статусе получения такого разрешения;</li>
<li>ответа на вопрос, заданный на сайте sleeptrip.ru.</li>
</ul>
<p>Я согласен и разрешаю Оператору обрабатывать мои персональные данные с использованием средств автоматизации или без использования таких средств (смешанная обработка).</p>
<p>Я согласен с тем, что мои персональные данные будут переданы третьим лицам – Единой системе организации воздушного движения, сервису «Небосвод» (skyarc.ru) или сервису СППИ (sppi.ivprf.ru), а также сотрудникам полиции (в случае взаимодействия с ними на местности) для реализации целей обработки персональных данных — получения разрешения на полёты БВС. Без передачи данных указанным организациям реализация целей обработки персональных данных будет невозможна.</p>
<p>Настоящее Согласие действует до момента достижения целей обработки или отзыва согласия на обработку, но не более 1 (одного) месяца с момента предоставления Согласия.</p>
</div>
</details>
{{< /rawhtml >}}