327 lines
12 KiB
HTML
327 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Социальный замер — опрос общественного мнения</title>
|
||
<style>
|
||
:root {
|
||
--ink: #0F1218;
|
||
--cyan: #00E5FF;
|
||
--cyan-50: #E8FCFF;
|
||
--white: #FFFFFF;
|
||
--gray-500: #5B6573;
|
||
--gray-100: #F2F4F7;
|
||
--gray-200: #E4E7EC;
|
||
--green: #17B26A;
|
||
--red: #F04438;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||
color: var(--ink);
|
||
background: var(--white);
|
||
}
|
||
.container { max-width: 760px; margin: 0 auto; padding: 80px 24px; }
|
||
|
||
.hero {
|
||
text-align: center;
|
||
padding: 60px 24px 48px;
|
||
}
|
||
.hero .badge {
|
||
display: inline-block;
|
||
background: var(--cyan-50);
|
||
color: #0891B2;
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero h1 {
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
margin-bottom: 16px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.hero p {
|
||
font-size: 18px;
|
||
color: var(--gray-500);
|
||
max-width: 480px;
|
||
margin: 0 auto 8px;
|
||
}
|
||
.hero .hint {
|
||
font-size: 13px;
|
||
color: #98A2B3;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.form-section {
|
||
background: var(--white);
|
||
border-top: 1px solid var(--gray-100);
|
||
padding: 56px 0;
|
||
}
|
||
|
||
fieldset {
|
||
border: none;
|
||
margin-bottom: 40px;
|
||
}
|
||
legend {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin-bottom: 12px;
|
||
color: var(--ink);
|
||
}
|
||
legend .num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px; height: 28px;
|
||
border-radius: 50%;
|
||
background: var(--cyan);
|
||
color: var(--ink);
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
margin-right: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.radio-group, .checkbox-group {
|
||
display: flex; flex-direction: column; gap: 10px;
|
||
}
|
||
.radio-item, .checkbox-item {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 12px 16px;
|
||
border: 1.5px solid var(--gray-200);
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
}
|
||
.radio-item:hover, .checkbox-item:hover { border-color: var(--cyan); }
|
||
.radio-item input:checked + span, .checkbox-item input:checked + span { font-weight: 600; }
|
||
.radio-item:has(input:checked), .checkbox-item:has(input:checked) {
|
||
border-color: var(--cyan);
|
||
background: var(--cyan-50);
|
||
}
|
||
.radio-item input, .checkbox-item input { accent-color: var(--cyan); width: 18px; height: 18px; flex-shrink: 0; }
|
||
.radio-item label, .checkbox-item label { cursor: pointer; flex: 1; }
|
||
|
||
.text-input {
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
border: 1.5px solid var(--gray-200);
|
||
border-radius: 10px;
|
||
font: inherit;
|
||
font-size: 16px;
|
||
resize: vertical;
|
||
min-height: 100px;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.text-input:focus {
|
||
outline: none;
|
||
border-color: var(--cyan);
|
||
}
|
||
|
||
input[type="number"] {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
border: 1.5px solid var(--gray-200);
|
||
border-radius: 10px;
|
||
font: inherit;
|
||
font-size: 16px;
|
||
transition: border-color 0.15s;
|
||
}
|
||
input[type="number"]:focus { outline: none; border-color: var(--cyan); }
|
||
|
||
.submit-wrap {
|
||
text-align: center;
|
||
margin-top: 48px;
|
||
}
|
||
.btn-submit {
|
||
background: var(--ink);
|
||
color: var(--white);
|
||
border: none;
|
||
padding: 16px 48px;
|
||
border-radius: 10px;
|
||
font: inherit;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: background 0.15s, transform 0.1s;
|
||
}
|
||
.btn-submit:hover { background: #1D2939; }
|
||
.btn-submit:active { transform: scale(0.98); }
|
||
.btn-submit:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.toast {
|
||
display: none;
|
||
position: fixed;
|
||
bottom: 32px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--ink);
|
||
color: var(--white);
|
||
padding: 14px 28px;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
z-index: 100;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
|
||
}
|
||
.toast.show { display: block; animation: fadeUp 0.3s ease; }
|
||
.toast.error { background: var(--red); }
|
||
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateX(-50%) translateY(12px); }
|
||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
padding: 32px 24px 40px;
|
||
color: var(--gray-500);
|
||
font-size: 13px;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.hero h1 { font-size: 32px; }
|
||
.hero p { font-size: 16px; }
|
||
.container { padding: 48px 20px; }
|
||
legend { font-size: 16px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="badge">Анонимный опрос</div>
|
||
<h1>Социальный замер</h1>
|
||
<p>Короткий опрос об общественных настроениях. Ваше мнение важно — ответы полностью анонимны.</p>
|
||
<p class="hint">6 вопросов · ~2 минуты</p>
|
||
</section>
|
||
|
||
<section class="form-section" id="survey">
|
||
<div class="container">
|
||
<form id="surveyForm" novalidate>
|
||
|
||
<fieldset>
|
||
<legend><span class="num">1</span> Ваш возраст</legend>
|
||
<div class="radio-group">
|
||
<div class="radio-item"><input type="radio" name="age" value="18-24" id="a1" required><label for="a1">18–24 года</label></div>
|
||
<div class="radio-item"><input type="radio" name="age" value="25-34" id="a2"><label for="a2">25–34 года</label></div>
|
||
<div class="radio-item"><input type="radio" name="age" value="35-44" id="a3"><label for="a3">35–44 года</label></div>
|
||
<div class="radio-item"><input type="radio" name="age" value="45-54" id="a4"><label for="a4">45–54 года</label></div>
|
||
<div class="radio-item"><input type="radio" name="age" value="55+" id="a5"><label for="a5">55 лет и старше</label></div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend><span class="num">2</span> Род занятий</legend>
|
||
<div class="radio-group">
|
||
<div class="radio-item"><input type="radio" name="occupation" value="employed" id="o1" required><label for="o1">Работаю по найму</label></div>
|
||
<div class="radio-item"><input type="radio" name="occupation" value="business" id="o2"><label for="o2">Свой бизнес / фриланс</label></div>
|
||
<div class="radio-item"><input type="radio" name="occupation" value="student" id="o3"><label for="o3">Студент / учусь</label></div>
|
||
<div class="radio-item"><input type="radio" name="occupation" value="unemployed" id="o4"><label for="o4">Не работаю</label></div>
|
||
<div class="radio-item"><input type="radio" name="occupation" value="retired" id="o5"><label for="o5">На пенсии</label></div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend><span class="num">3</span> Как вы оцениваете текущую ситуацию в стране?</legend>
|
||
<div class="radio-group">
|
||
<div class="radio-item"><input type="radio" name="situation" value="positive" id="s1" required><label for="s1">В целом позитивно</label></div>
|
||
<div class="radio-item"><input type="radio" name="situation" value="neutral" id="s2"><label for="s2">Нейтрально, без изменений</label></div>
|
||
<div class="radio-item"><input type="radio" name="situation" value="negative" id="s3"><label for="s3">Скорее негативно</label></div>
|
||
<div class="radio-item"><input type="radio" name="situation" value="hard" id="s4"><label for="s4">Затрудняюсь ответить</label></div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend><span class="num">4</span> Что вас беспокоит больше всего?</legend>
|
||
<div class="checkbox-group">
|
||
<div class="checkbox-item"><input type="checkbox" name="concerns" value="economy" id="c1"><label for="c1">Экономика / рост цен</label></div>
|
||
<div class="checkbox-item"><input type="checkbox" name="concerns" value="health" id="c2"><label for="c2">Здравоохранение</label></div>
|
||
<div class="checkbox-item"><input type="checkbox" name="concerns" value="education" id="c3"><label for="c3">Образование</label></div>
|
||
<div class="checkbox-item"><input type="checkbox" name="concerns" value="security" id="c4"><label for="c4">Безопасность</label></div>
|
||
<div class="checkbox-item"><input type="checkbox" name="concerns" value="ecology" id="c5"><label for="c5">Экология</label></div>
|
||
<div class="checkbox-item"><input type="checkbox" name="concerns" value="corruption" id="c6"><label for="c6">Коррупция</label></div>
|
||
<div class="checkbox-item"><input type="checkbox" name="concerns" value="social" id="c7"><label for="c7">Социальная поддержка</label></div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend><span class="num">5</span> Ваше настроение в последний месяц?</legend>
|
||
<div class="radio-group">
|
||
<div class="radio-item"><input type="radio" name="mood" value="great" id="m1" required><label for="m1">Отличное, полон энергии</label></div>
|
||
<div class="radio-item"><input type="radio" name="mood" value="ok" id="m2"><label for="m2">Нормальное, всё стабильно</label></div>
|
||
<div class="radio-item"><input type="radio" name="mood" value="tired" id="m3"><label for="m3">Устал(а), выгорание</label></div>
|
||
<div class="radio-item"><input type="radio" name="mood" value="anxious" id="m4"><label for="m4">Тревожно, неопределённость</label></div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend><span class="num">6</span> Что бы вы хотели изменить в первую очередь?</legend>
|
||
<textarea class="text-input" name="comment" placeholder="Напишите своё мнение..." maxlength="500"></textarea>
|
||
</fieldset>
|
||
|
||
<div class="submit-wrap">
|
||
<button type="submit" class="btn-submit" id="submitBtn">Отправить ответы</button>
|
||
</div>
|
||
</form>
|
||
<div class="toast" id="toast"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
Все ответы анонимны. Данные используются только в обобщённом виде.
|
||
</footer>
|
||
|
||
<script>
|
||
const form = document.getElementById('surveyForm');
|
||
const toast = document.getElementById('toast');
|
||
const submitBtn = document.getElementById('submitBtn');
|
||
|
||
function showToast(msg, isError) {
|
||
toast.textContent = msg;
|
||
toast.className = 'toast show' + (isError ? ' error' : '');
|
||
setTimeout(function() { toast.className = 'toast'; }, 4000);
|
||
}
|
||
|
||
form.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
var age = form.querySelector('input[name="age"]:checked');
|
||
var occupation = form.querySelector('input[name="occupation"]:checked');
|
||
var situation = form.querySelector('input[name="situation"]:checked');
|
||
var mood = form.querySelector('input[name="mood"]:checked');
|
||
|
||
if (!age || !occupation || !situation || !mood) {
|
||
showToast('Пожалуйста, ответьте на все обязательные вопросы', true);
|
||
if (!age) form.querySelector('input[name="age"]').scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
else if (!occupation) form.querySelector('input[name="occupation"]').scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
else if (!situation) form.querySelector('input[name="situation"]').scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
else if (!mood) form.querySelector('input[name="mood"]').scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
return;
|
||
}
|
||
|
||
submitBtn.disabled = true;
|
||
submitBtn.textContent = 'Отправляем...';
|
||
|
||
setTimeout(function() {
|
||
submitBtn.textContent = 'Спасибо!';
|
||
showToast('Ваши ответы приняты. Спасибо за участие!', false);
|
||
form.reset();
|
||
submitBtn.disabled = false;
|
||
submitBtn.textContent = 'Отправить ответы';
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}, 800);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|