765 lines
35 KiB
HTML
765 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Социальная поддержка — доступная помощь для людей с инвалидностью</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Unbounded:wght@700&display=swap" rel="stylesheet">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤝</text></svg>">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<a href="#main-content" class="skip-link">Перейти к основному содержанию</a>
|
||
|
||
<header role="banner">
|
||
<div class="container header-content">
|
||
<div class="logo">
|
||
<span class="logo-icon" aria-hidden="true">🤝</span>
|
||
<span class="logo-text">СоцПоддержка</span>
|
||
</div>
|
||
<nav role="navigation" aria-label="Основная навигация">
|
||
<ul class="nav-list">
|
||
<li><a href="#recipients">Получателям</a></li>
|
||
<li><a href="#benefactors">Благотворителям</a></li>
|
||
<li><a href="#types">Виды помощи</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
</ul>
|
||
</nav>
|
||
<button class="btn btn-outline" onclick="document.getElementById('accessibility-panel').classList.toggle('hidden')" aria-label="Настройки доступности">
|
||
👁️ Доступность
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="accessibility-panel" class="accessibility-panel hidden" role="region" aria-label="Настройки доступности">
|
||
<div class="container">
|
||
<div class="panel-content">
|
||
<span class="panel-label">Размер текста:</span>
|
||
<button class="size-btn" data-size="normal" aria-label="Обычный размер">A</button>
|
||
<button class="size-btn" data-size="large" aria-label="Увеличенный">A+</button>
|
||
<button class="size-btn" data-size="xlarge" aria-label="Крупный">A++</button>
|
||
<span class="panel-label">Контраст:</span>
|
||
<button class="contrast-btn" data-contrast="normal" aria-label="Обычный контраст">◐</button>
|
||
<button class="contrast-btn" data-contrast="high" aria-label="Высокий контраст">◑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<main id="main-content" role="main">
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-text">
|
||
<h1 id="hero-title">Социальная поддержка для людей с инвалидностью</h1>
|
||
<p class="hero-subtitle">Единый портал государственной и благотворительной помощи. Узнайте свои права, подайте заявку и получите поддержку в одном месте.</p>
|
||
<div class="hero-buttons">
|
||
<a href="#recipients" class="btn btn-primary">Я получатель помощи</a>
|
||
<a href="#benefactors" class="btn btn-secondary">Я хочу помочь</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-image" role="img" aria-label="Люди получают поддержку">
|
||
<img src="https://loremflickr.com/600/400/help,support" alt="Волонтёры помогают людям" loading="eager">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="recipients" class="section section-light" aria-labelledby="recipients-title">
|
||
<div class="container">
|
||
<h2 id="recipients-title">Получателям помощи</h2>
|
||
<p class="section-intro">Узнайте, на какую поддержку вы имеете право, и подайте заявку онлайн</p>
|
||
|
||
<div class="steps-grid">
|
||
<div class="step-card reveal">
|
||
<div class="step-number" aria-hidden="true">1</div>
|
||
<h3>Пройдите тест</h3>
|
||
<p>Ответьте на 10 вопросов о вашей ситуации и узнайте все доступные виды поддержки</p>
|
||
<button class="btn btn-primary" onclick="openModal('test-modal')">Пройти тест</button>
|
||
</div>
|
||
<div class="step-card reveal">
|
||
<div class="step-number" aria-hidden="true">2</div>
|
||
<h3>Получите список</h3>
|
||
<p>Система покажет льготы, выплаты и услуги, которые вам положены по закону</p>
|
||
</div>
|
||
<div class="step-card reveal">
|
||
<div class="step-number" aria-hidden="true">3</div>
|
||
<h3>Подайте заявки</h3>
|
||
<p>Оформите документы онлайн или запишитесь в центр соцзащиты</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quick-links">
|
||
<h3>Быстрый доступ</h3>
|
||
<div class="quick-grid">
|
||
<a href="#types" class="quick-card reveal" aria-label="Льготы и выплаты">
|
||
<span class="quick-icon" aria-hidden="true">💰</span>
|
||
<span class="quick-title">Льготы и выплаты</span>
|
||
</a>
|
||
<a href="#types" class="quick-card reveal" aria-label="Жильё и коммунальные услуги">
|
||
<span class="quick-icon" aria-hidden="true">🏠</span>
|
||
<span class="quick-title">Жильё и ЖКУ</span>
|
||
</a>
|
||
<a href="#types" class="quick-card reveal" aria-label="Транспорт и парковка">
|
||
<span class="quick-icon" aria-hidden="true">🚗</span>
|
||
<span class="quick-title">Транспорт</span>
|
||
</a>
|
||
<a href="#types" class="quick-card reveal" aria-label="Медицина и реабилитация">
|
||
<span class="quick-icon" aria-hidden="true">🏥</span>
|
||
<span class="quick-title">Медицина</span>
|
||
</a>
|
||
<a href="#types" class="quick-card reveal" aria-label="Образование и трудоустройство">
|
||
<span class="quick-icon" aria-hidden="true">📚</span>
|
||
<span class="quick-title">Образование и работа</span>
|
||
</a>
|
||
<a href="#types" class="quick-card reveal" aria-label="Технические средства реабилитации">
|
||
<span class="quick-icon" aria-hidden="true">♿</span>
|
||
<span class="quick-title">ТСР</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="benefactors" class="section section-dark" aria-labelledby="benefactors-title">
|
||
<div class="container">
|
||
<div class="benefactors-content">
|
||
<div class="benefactors-text">
|
||
<h2 id="benefactors-title">Благотворителям</h2>
|
||
<p class="section-intro">Помогайте людям с инвалидностью напрямую и прозрачно</p>
|
||
|
||
<div class="benefactor-ways">
|
||
<div class="way-card reveal">
|
||
<div class="way-icon" aria-hidden="true">🎯</div>
|
||
<h3>Целевая помощь</h3>
|
||
<p>Выберите конкретный проект или человека и помогите именно тем, что нужно</p>
|
||
</div>
|
||
<div class="way-card reveal">
|
||
<div class="way-icon" aria-hidden="true">📊</div>
|
||
<h3>Полная прозрачность</h3>
|
||
<p>Отчёты о каждом потраченном тенге. Фото и видео результатов</p>
|
||
</div>
|
||
<div class="way-card reveal">
|
||
<div class="way-icon" aria-hidden="true">🤝</div>
|
||
<h3>Личное участие</h3>
|
||
<p>Станьте наставником или волонтёром. Помогайте не только деньгами</p>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#projects" class="btn btn-primary">Выбрать проект</a>
|
||
</div>
|
||
<div class="benefactors-stats">
|
||
<div class="stat-card reveal">
|
||
<div class="stat-number">847</div>
|
||
<div class="stat-label">людей получили помощь</div>
|
||
</div>
|
||
<div class="stat-card reveal">
|
||
<div class="stat-number">2.3M ₸</div>
|
||
<div class="stat-label">собрано в этом месяце</div>
|
||
</div>
|
||
<div class="stat-card reveal">
|
||
<div class="stat-number">156</div>
|
||
<div class="stat-label">активных проектов</div>
|
||
</div>
|
||
<div class="stat-card reveal">
|
||
<div class="stat-number">100%</div>
|
||
<div class="stat-label">прозрачность</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="types" class="section section-light" aria-labelledby="types-title">
|
||
<div class="container">
|
||
<h2 id="types-title">Виды поддержки</h2>
|
||
<p class="section-intro">Государственная и благотворительная помощь в одном месте</p>
|
||
|
||
<div class="types-grid">
|
||
<div class="type-card reveal" data-type="state">
|
||
<div class="type-badge state">Государственная</div>
|
||
<div class="type-icon" aria-hidden="true">💰</div>
|
||
<h3>Денежные выплаты</h3>
|
||
<ul class="type-list">
|
||
<li>Пенсия по инвалидности</li>
|
||
<li>Ежемесячные выплаты (ЕДВ)</li>
|
||
<li>Компенсации по уходу</li>
|
||
<li>Материальная помощь</li>
|
||
</ul>
|
||
<a href="#" class="link-arrow" onclick="openModal('payments-modal')">Подробнее →</a>
|
||
</div>
|
||
|
||
<div class="type-card reveal" data-type="state">
|
||
<div class="type-badge state">Государственная</div>
|
||
<div class="type-icon" aria-hidden="true">🏠</div>
|
||
<h3>Жильё и коммунальные услуги</h3>
|
||
<ul class="type-list">
|
||
<li>Субсидии на оплату ЖКУ</li>
|
||
<li>Программы доступного жилья</li>
|
||
<li>Адаптация жилья</li>
|
||
<li>Льготы по капремонту</li>
|
||
</ul>
|
||
<a href="#" class="link-arrow" onclick="openModal('housing-modal')">Подробнее →</a>
|
||
</div>
|
||
|
||
<div class="type-card reveal" data-type="state">
|
||
<div class="type-badge state">Государственная</div>
|
||
<div class="type-icon" aria-hidden="true">🚗</div>
|
||
<h3>Транспорт и парковка</h3>
|
||
<ul class="type-list">
|
||
<li>Бесплатный проезд</li>
|
||
<li>Парковочные разрешения</li>
|
||
<li>Компенсация проезда к месту лечения</li>
|
||
<li>Льготы на такси</li>
|
||
</ul>
|
||
<a href="#" class="link-arrow">Подробнее →</a>
|
||
</div>
|
||
|
||
<div class="type-card reveal" data-type="state">
|
||
<div class="type-badge state">Государственная</div>
|
||
<div class="type-icon" aria-hidden="true">🏥</div>
|
||
<h3>Медицина и реабилитация</h3>
|
||
<ul class="type-list">
|
||
<li>Бесплатные лекарства</li>
|
||
<li>Санаторно-курортное лечение</li>
|
||
<li>Протезирование</li>
|
||
<li>Реабилитационные программы</li>
|
||
</ul>
|
||
<a href="#" class="link-arrow">Подробнее →</a>
|
||
</div>
|
||
|
||
<div class="type-card reveal" data-type="state">
|
||
<div class="type-badge state">Государственная</div>
|
||
<div class="type-icon" aria-hidden="true">📚</div>
|
||
<h3>Образование и работа</h3>
|
||
<ul class="type-list">
|
||
<li>Бесплатное образование</li>
|
||
<li>Квоты при трудоустройстве</li>
|
||
<li>Профпереподготовка</li>
|
||
<li>Специальные рабочие места</li>
|
||
</ul>
|
||
<a href="#" class="link-arrow">Подробнее →</a>
|
||
</div>
|
||
|
||
<div class="type-card reveal" data-type="state">
|
||
<div class="type-badge state">Государственная</div>
|
||
<div class="type-icon" aria-hidden="true">♿</div>
|
||
<h3>Технические средства (ТСР)</h3>
|
||
<ul class="type-list">
|
||
<li>Коляски и протезы</li>
|
||
<li>Слуховые аппараты</li>
|
||
<li>Средства для самообслуживания</li>
|
||
<li>Специальная одежда и обувь</li>
|
||
</ul>
|
||
<a href="#" class="link-arrow">Подробнее →</a>
|
||
</div>
|
||
|
||
<div class="type-card reveal" data-type="charity">
|
||
<div class="type-badge charity">Благотворительная</div>
|
||
<div class="type-icon" aria-hidden="true">🎯</div>
|
||
<h3>Адресная помощь</h3>
|
||
<ul class="type-list">
|
||
<li>Сбор на лечение</li>
|
||
<li>Покупка техники реабилитации</li>
|
||
<li>Оплата услуг сиделки</li>
|
||
<li>Экстренная помощь</li>
|
||
</ul>
|
||
<a href="#projects" class="link-arrow">Поддержать →</a>
|
||
</div>
|
||
|
||
<div class="type-card reveal" data-type="charity">
|
||
<div class="type-badge charity">Благотворительная</div>
|
||
<div class="type-icon" aria-hidden="true">🤝</div>
|
||
<h3>Волонтёрская поддержка</h3>
|
||
<ul class="type-list">
|
||
<li>Сопровождение и наставничество</li>
|
||
<li>Помощь по хозяйству</li>
|
||
<li>Транспортное волонтёрство</li>
|
||
<li>Юридические консультации</li>
|
||
</ul>
|
||
<a href="#volunteer" class="link-arrow">Стать волонтёром →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="projects" class="section section-light" aria-labelledby="projects-title">
|
||
<div class="container">
|
||
<h2 id="projects-title">Активные проекты</h2>
|
||
<p class="section-intro">Выберите проект, которому хотите помочь</p>
|
||
|
||
<div class="projects-grid">
|
||
<article class="project-card reveal">
|
||
<div class="project-image">
|
||
<img src="https://loremflickr.com/400/250/wheelchair,sport" alt="Коляска для спорта" loading="lazy">
|
||
<div class="project-badge charity">Срочно</div>
|
||
</div>
|
||
<div class="project-content">
|
||
<div class="project-meta">
|
||
<span class="project-category">Техническая помощь</span>
|
||
<span class="project-days">Осталось 12 дней</span>
|
||
</div>
|
||
<h3 class="project-title">Спортивная коляска для Айдина</h3>
|
||
<p class="project-desc">Айдин мечтает заниматься баскетболом на колясках. Нужна специализированная спортивная коляска.</p>
|
||
<div class="project-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 65%"></div>
|
||
</div>
|
||
<div class="progress-text">
|
||
<span class="raised">130 000 ₸</span>
|
||
<span class="target">из 200 000 ₸</span>
|
||
</div>
|
||
</div>
|
||
<div class="project-author">
|
||
<img src="https://loremflickr.com/100/100/family" alt="Семья Айдина" class="author-avatar" loading="lazy">
|
||
<span>Семья Айдина</span>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="openModal('donate-modal')">Помочь</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="project-card reveal">
|
||
<div class="project-image">
|
||
<img src="https://loremflickr.com/400/250/child,smile" alt="Улыбающийся ребёнок" loading="lazy">
|
||
<div class="project-badge charity">Важно</div>
|
||
</div>
|
||
<div class="project-content">
|
||
<div class="project-meta">
|
||
<span class="project-category">Лечение</span>
|
||
<span class="project-days">Осталось 25 дней</span>
|
||
</div>
|
||
<h3 class="project-title">Курс реабилитации для Дины</h3>
|
||
<p class="project-desc">Дине 8 лет, ДЦП. Ежегодный курс реабилитации поможет закрепить навыки ходьбы.</p>
|
||
<div class="project-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 42%"></div>
|
||
</div>
|
||
<div class="progress-text">
|
||
<span class="raised">420 000 ₸</span>
|
||
<span class="target">из 1 000 000 ₸</span>
|
||
</div>
|
||
</div>
|
||
<div class="project-author">
|
||
<img src="https://loremflickr.com/100/100/mother,child" alt="Мама с Диной" class="author-avatar" loading="lazy">
|
||
<span>Мама Дины</span>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="openModal('donate-modal')">Помочь</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="project-card reveal">
|
||
<div class="project-image">
|
||
<img src="https://loremflickr.com/400/250/elderly,home" alt="Пожилые люди дома" loading="lazy">
|
||
<div class="project-badge state">Госпрограмма</div>
|
||
</div>
|
||
<div class="project-content">
|
||
<div class="project-meta">
|
||
<span class="project-category">Жильё</span>
|
||
<span class="project-days">Постоянно</span>
|
||
</div>
|
||
<h3 class="project-title">Адаптация жилья для пожилых</h3>
|
||
<p class="project-desc">Установка поручней, пандусов и противоскользящих покрытий для людей старше 65 лет.</p>
|
||
<div class="project-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 78%"></div>
|
||
</div>
|
||
<div class="progress-text">
|
||
<span class="raised">780 000 ₸</span>
|
||
<span class="target">из 1 000 000 ₸</span>
|
||
</div>
|
||
</div>
|
||
<div class="project-author">
|
||
<img src="https://loremflickr.com/100/100/community" alt="Волонтёры" class="author-avatar" loading="lazy">
|
||
<span>Центр соцзащиты</span>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="openModal('donate-modal')">Поддержать</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<a href="#" class="btn btn-outline btn-center">Показать все проекты</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="faq" class="section section-dark" aria-labelledby="faq-title">
|
||
<div class="container">
|
||
<h2 id="faq-title">Частые вопросы</h2>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question" aria-expanded="false">
|
||
<span>Как узнать, какие льготы мне положены?</span>
|
||
<span class="faq-icon" aria-hidden="true">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Пройдите наш тест в разделе «Получателям» — он займёт 5 минут и покажет все доступные виды поддержки. Также можно обратиться в центр социальной защиты по месту жительства.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question" aria-expanded="false">
|
||
<span>Сколько времени занимает оформление?</span>
|
||
<span class="faq-icon" aria-hidden="true">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Большинство заявок рассматривается от 5 до 30 дней. Срочная благотворительная помощь может быть оказана в течение 1-3 дней.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question" aria-expanded="false">
|
||
<span>Нужно ли платить комиссию?</span>
|
||
<span class="faq-icon" aria-hidden="true">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Нет, все государственные услуги бесплатны. Благотворительные взносы идут напрямую получателям, комиссия платформы — 0%.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question" aria-expanded="false">
|
||
<span>Можно ли получить помощь, если я не гражданин РК?</span>
|
||
<span class="faq-icon" aria-hidden="true">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Государственная поддержка доступна гражданам РК и оралманам. Благотворительная помощь может быть оказана любому человеку, находящемуся на территории Казахстана.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question" aria-expanded="false">
|
||
<span>Как стать волонтёром?</span>
|
||
<span class="faq-icon" aria-hidden="true">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Заполните анкету волонтёра в разделе «Благотворителям». Мы свяжемся с вами в течение 3 дней и подберём подходящую форму участия.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section section-cta" aria-labelledby="cta-title">
|
||
<div class="container">
|
||
<div class="cta-content">
|
||
<h2 id="cta-title">Нужна помощь или хотите помочь?</h2>
|
||
<p>Мы соединяем тех, кто нуждается, с теми, кто может помочь. Начните прямо сейчас.</p>
|
||
<div class="cta-buttons">
|
||
<a href="#recipients" class="btn btn-primary btn-large">Получить поддержку</a>
|
||
<a href="#benefactors" class="btn btn-secondary btn-large">Стать частью команды</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer role="contentinfo">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-col">
|
||
<h4>СоцПоддержка</h4>
|
||
<p>Единый портал социальной поддержки людей с инвалидностью</p>
|
||
<div class="footer-contacts">
|
||
<span class="contact-item">📞 1414 — горячая линия</span>
|
||
<span class="contact-item">✉️ info@socsupport.kz</span>
|
||
</div>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Разделы</h4>
|
||
<ul>
|
||
<li><a href="#recipients">Получателям</a></li>
|
||
<li><a href="#benefactors">Благотворителям</a></li>
|
||
<li><a href="#types">Виды помощи</a></li>
|
||
<li><a href="#projects">Проекты</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Документы</h4>
|
||
<ul>
|
||
<li><a href="#">Политика конфиденциальности</a></li>
|
||
<li><a href="#">Публичная оферта</a></li>
|
||
<li><a href="#">Отчётность</a></li>
|
||
<li><a href="#">Контакты</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Мы в соцсетях</h4>
|
||
<div class="social-links">
|
||
<a href="#" aria-label="Instagram">📷 Instagram</a>
|
||
<a href="#" aria-label="Facebook">📘 Facebook</a>
|
||
<a href="#" aria-label="Telegram">✈ Telegram</a>
|
||
<a href="#" aria-label="YouTube">📺 YouTube</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2026 СоцПоддержка. Все права защищены.</p>
|
||
<p class="footer-note">Сайт создан для облегчения доступа к социальной поддержке</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Модальные окна -->
|
||
<div id="test-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="test-modal-title" hidden>
|
||
<div class="modal-backdrop" onclick="closeModal('test-modal')"></div>
|
||
<div class="modal-content">
|
||
<button class="modal-close" onclick="closeModal('test-modal')" aria-label="Закрыть">×</button>
|
||
<h2 id="test-modal-title">Тест на определение льгот</h2>
|
||
<div class="modal-body">
|
||
<form id="test-form" class="test-form">
|
||
<div class="form-step active">
|
||
<p class="step-progress">Вопрос 1 из 10</p>
|
||
<h3>Какая у вас степень инвалидности?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="disability" value="1"> I группа</label>
|
||
<label class="radio-option"><input type="radio" name="disability" value="2"> II группа</label>
|
||
<label class="radio-option"><input type="radio" name="disability" value="3"> III группа</label>
|
||
<label class="radio-option"><input type="radio" name="disability" value="child"> Ребёнок-инвалид</label>
|
||
<label class="radio-option"><input type="radio" name="disability" value="none"> Нет инвалидности</label>
|
||
</div>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(1)">Далее →</button>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 2 из 10</p>
|
||
<h3>Вы работаете?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="work" value="yes"> Да, работаю</label>
|
||
<label class="radio-option"><input type="radio" name="work" value="no"> Нет, не работаю</label>
|
||
<label class="radio-option"><input type="radio" name="work" value="student"> Учусь</label>
|
||
<label class="radio-option"><input type="radio" name="work" value="pensioner"> Пенсионер</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(2)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(2)">Далее →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 3 из 10</p>
|
||
<h3>Где вы проживаете?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="location" value="city"> Город</label>
|
||
<label class="radio-option"><input type="radio" name="location" value="village"> Село</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(3)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(3)">Далее →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 4 из 10</p>
|
||
<h3>Какой у вас ежемесячный доход?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="income" value="low"> Ниже прожиточного минимума</label>
|
||
<label class="radio-option"><input type="radio" name="income" value="medium"> Средний</label>
|
||
<label class="radio-option"><input type="radio" name="income" value="high"> Выше среднего</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(4)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(4)">Далее →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 5 из 10</p>
|
||
<h3>Нуждаетесь ли вы в улучшении жилищных условий?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="housing" value="yes"> Да</label>
|
||
<label class="radio-option"><input type="radio" name="housing" value="no"> Нет</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(5)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(5)">Далее →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 6 из 10</p>
|
||
<h3>Какие технические средства реабилитации вам нужны?</h3>
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-option"><input type="checkbox" name="tsr" value="wheelchair"> Коляска</label>
|
||
<label class="checkbox-option"><input type="checkbox" name="tsr" value="prosthesis"> Протезы</label>
|
||
<label class="checkbox-option"><input type="checkbox" name="tsr" value="hearing"> Слуховой аппарат</label>
|
||
<label class="checkbox-option"><input type="checkbox" name="tsr" value="vision"> Средства для слабовидящих</label>
|
||
<label class="checkbox-option"><input type="checkbox" name="tsr" value="other"> Другое</label>
|
||
<label class="checkbox-option"><input type="checkbox" name="tsr" value="none"> Ничего не нужно</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(6)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(6)">Далее →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 7 из 10</p>
|
||
<h3>Нужна ли вам помощь в трудоустройстве?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="employment" value="yes"> Да</label>
|
||
<label class="radio-option"><input type="radio" name="employment" value="no"> Нет</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(7)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(7)">Далее →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 8 из 10</p>
|
||
<h3>Есть ли у вас дети?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="children" value="yes"> Да</label>
|
||
<label class="radio-option"><input type="radio" name="children" value="no"> Нет</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(8)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(8)">Далее →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 9 из 10</p>
|
||
<h3>Нужна ли вам юридическая помощь?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="legal" value="yes"> Да</label>
|
||
<label class="radio-option"><input type="radio" name="legal" value="no"> Нет</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(9)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="nextStep(9)">Далее →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step">
|
||
<p class="step-progress">Вопрос 10 из 10</p>
|
||
<h3>Хотели бы вы получать волонтёрскую поддержку?</h3>
|
||
<div class="radio-group">
|
||
<label class="radio-option"><input type="radio" name="volunteer" value="yes"> Да</label>
|
||
<label class="radio-option"><input type="radio" name="volunteer" value="no"> Нет</label>
|
||
<label class="radio-option"><input type="radio" name="volunteer" value="maybe"> Возможно</label>
|
||
</div>
|
||
<div class="step-buttons">
|
||
<button type="button" class="btn btn-outline" onclick="prevStep(10)">← Назад</button>
|
||
<button type="button" class="btn btn-primary" onclick="submitTest()">Завершить тест</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-step result-step">
|
||
<h3>Ваши результаты</h3>
|
||
<div id="test-results" class="results-list"></div>
|
||
<div class="result-actions">
|
||
<button type="button" class="btn btn-primary" onclick="closeModal('test-modal')">Закрыть</button>
|
||
<button type="button" class="btn btn-outline" onclick="resetTest()">Пройти заново</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="donate-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="donate-modal-title" hidden>
|
||
<div class="modal-backdrop" onclick="closeModal('donate-modal')"></div>
|
||
<div class="modal-content">
|
||
<button class="modal-close" onclick="closeModal('donate-modal')" aria-label="Закрыть">×</button>
|
||
<h2 id="donate-modal-title">Благодарим за желание помочь!</h2>
|
||
<div class="modal-body">
|
||
<p class="donate-intro">Выберите сумму взноса или укажите свою</p>
|
||
<div class="donate-amounts">
|
||
<button class="amount-btn" data-amount="1000">1 000 ₸</button>
|
||
<button class="amount-btn" data-amount="3000">3 000 ₸</button>
|
||
<button class="amount-btn" data-amount="5000">5 000 ₸</button>
|
||
<button class="amount-btn" data-amount="10000">10 000 ₸</button>
|
||
<button class="amount-btn" data-amount="20000">20 000 ₸</button>
|
||
</div>
|
||
<div class="donate-custom">
|
||
<label for="custom-amount">Другая сумма:</label>
|
||
<input type="number" id="custom-amount" placeholder="Введите сумму" min="500" step="500">
|
||
</div>
|
||
<div class="donate-payment">
|
||
<h4>Способ оплаты</h4>
|
||
<div class="payment-methods">
|
||
<label class="payment-option">
|
||
<input type="radio" name="payment" value="card" checked>
|
||
<span>💳 Банковская карта</span>
|
||
</label>
|
||
<label class="payment-option">
|
||
<input type="radio" name="payment" value="kaspi">
|
||
<span>📱 Kaspi Pay</span>
|
||
</label>
|
||
<label class="payment-option">
|
||
<input type="radio" name="payment" value="transfer">
|
||
<span>🏦 Банковский перевод</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="alert('Спасибо! Переход к платежу...')">Перейти к оплате</button>
|
||
<p class="donate-note">🔒 Платёж защищён. Все данные передаются в зашифрованном виде.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="payments-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="payments-modal-title" hidden>
|
||
<div class="modal-backdrop" onclick="closeModal('payments-modal')"></div>
|
||
<div class="modal-content modal-large">
|
||
<button class="modal-close" onclick="closeModal('payments-modal')" aria-label="Закрыть">×</button>
|
||
<h2 id="payments-modal-title">Денежные выплаты и льготы</h2>
|
||
<div class="modal-body">
|
||
<div class="info-section">
|
||
<h3>Государственные выплаты</h3>
|
||
<ul class="info-list">
|
||
<li><strong>Пенсия по инвалидности:</strong> назначается при наличии инвалидности, размер зависит от группы и стажа</li>
|
||
<li><strong>ЕДВ (ежемесячная денежная выплата):</strong> дополнительная выплата для отдельных категорий</li>
|
||
<li><strong>Компенсация по уходу:</strong> для неработающих трудоспособных лиц, ухаживающих за инвалидом I группы</li>
|
||
<li><strong>Материальная помощь:</strong> единовременная выплата в трудной жизненной ситуации</li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-section">
|
||
<h3>Как оформить</h3>
|
||
<ol class="steps-list">
|
||
<li>Соберите документы: удостоверение личности, справка об инвалидности, документы о доходах</li>
|
||
<li>Подайте заявление через ЦОН, портал egov.kz или наш сайт</li>
|
||
<li>Дождитесь решения (до 30 дней)</li>
|
||
<li>Получайте выплаты на карту или почтовым переводом</li>
|
||
</ol>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="closeModal('payments-modal'); openModal('test-modal')">Пройти тест →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="housing-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="housing-modal-title" hidden>
|
||
<div class="modal-backdrop" onclick="closeModal('housing-modal')"></div>
|
||
<div class="modal-content modal-large">
|
||
<button class="modal-close" onclick="closeModal('housing-modal')" aria-label="Закрыть">×</button>
|
||
<h2 id="housing-modal-title">Жильё и коммунальные услуги</h2>
|
||
<div class="modal-body">
|
||
<div class="info-section">
|
||
<h3>Доступные программы</h3>
|
||
<ul class="info-list">
|
||
<li><strong>Субсидии на оплату ЖКУ:</strong> компенсация до 50% расходов на коммунальные услуги</li>
|
||
<li><strong>Социальное жильё:</strong> предоставление жилья из государственного фонда</li>
|
||
<li><strong>Адаптация жилья:</strong> установка пандусов, поручней, расширение дверных проёмов</li>
|
||
<li><strong>Льготы по капремонту:</strong> компенсация взносов на капитальный ремонт</li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-section">
|
||
<h3>Требуемые документы</h3>
|
||
<ul class="info-list">
|
||
<li>Удостоверение личности</li>
|
||
<li>Справка об инвалидности</li>
|
||
<li>Документы на жильё</li>
|
||
<li>Справка о составе семьи</li>
|
||
<li>Документы о доходах</li>
|
||
</ul>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="closeModal('housing-modal')">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|