molodezhny-portal/index.html
2026-06-04 11:53:58 +00:00

176 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SAMRUK JASTARY — Цифровая платформа молодёжного сообщества</title>
<style>
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
*{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:1140px;margin:0 auto;padding:80px 24px}
.hero{background:linear-gradient(135deg,var(--ink) 0%,#1a1f2e 100%);color:var(--white);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(0,229,255,.08) 0%,transparent 70%);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero .badge{display:inline-block;background:rgba(0,229,255,.12);color:var(--cyan);padding:6px 16px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:24px}
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
.hero h1 span{color:var(--cyan)}
.hero p.subhero{font-size:20px;color:#9aa3b2;max-width:650px;margin-bottom:40px;line-height:1.5}
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:17px;transition:background .2s}
.btn:hover{background:#1be5ff}
.btn-outline{display:inline-block;background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.3);padding:12px 26px;border-radius:8px;font-weight:700;text-decoration:none;font-size:17px;margin-left:12px;transition:all .2s}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1)}
.stat-num{font-size:40px;font-weight:800;color:var(--cyan);line-height:1}
.stat-label{font-size:14px;color:#9aa3b2;margin-top:6px}
.section h2{font-size:36px;font-weight:700;margin-bottom:16px}
.section .section-sub{color:var(--gray-500);font-size:18px;margin-bottom:48px;max-width:650px}
.section-alt{background:var(--gray-100)}
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.module-card{background:var(--white);border:1px solid var(--gray-100);border-radius:16px;padding:28px;transition:transform .2s,box-shadow .2s}
.module-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.module-num{font-size:13px;font-weight:700;color:var(--cyan);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.module-card h3{font-size:20px;font-weight:700;margin-bottom:10px}
.module-card p{color:var(--gray-500);font-size:15px;line-height:1.5}
.module-card .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;padding:3px 10px;border-radius:12px;background:var(--gray-100);color:var(--gray-500)}
.platforms{display:flex;align-items:center;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.platform{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);padding:10px 20px;border-radius:8px;font-size:15px;color:#9aa3b2}
.platform .icon{font-size:20px}
.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.tech-card{background:var(--white);border:1px solid var(--gray-100);border-radius:12px;padding:24px;text-align:center}
.tech-card .emoji{font-size:36px;margin-bottom:12px}
.tech-card h4{font-size:17px;font-weight:700;margin-bottom:6px}
.tech-card p{font-size:14px;color:var(--gray-500)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.col-box{background:var(--white);border:1px solid var(--gray-100);border-radius:16px;padding:32px}
.col-box h3{font-size:22px;font-weight:700;margin-bottom:16px}
.col-box ul{list-style:none;padding:0}
.col-box li{padding:8px 0;font-size:15px;color:var(--gray-500);display:flex;gap:8px;align-items:flex-start}
.col-box li::before{content:'●';color:var(--cyan);font-size:8px;margin-top:7px;flex-shrink:0}
.cta{background:linear-gradient(135deg,#00d4e8 0%,var(--cyan) 100%);text-align:center}
.cta h2{color:var(--ink)}
.cta .section-sub{color:var(--ink);opacity:.7}
.footer{background:var(--ink);color:var(--gray-500);text-align:center;padding:32px 24px;font-size:14px}
.footer a{color:var(--cyan);text-decoration:none}
.footer a:hover{text-decoration:underline}
@media(max-width:768px){
.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}
.stats{grid-template-columns:1fr 1fr}.stat-num{font-size:30px}
.btn-outline{margin-left:0;margin-top:12px}.two-col{grid-template-columns:1fr}.modules{grid-template-columns:1fr}
}
</style>
</head>
<body>
<section class="hero">
<div class="container">
<div class="badge">Группа компаний АО «Самрук-Казына»</div>
<h1>Цифровая платформа<br>молодёжного сообщества<br><span>SAMRUK JASTARY</span></h1>
<p class="subhero">Единая цифровая среда для молодых сотрудников. Горизонтальное взаимодействие, профессиональное развитие, корпоративные инициативы — всё в одной платформе.</p>
<div class="platforms">
<div class="platform"><span class="icon">🌐</span> Web</div>
<div class="platform"><span class="icon">🍎</span> iOS 15+</div>
<div class="platform"><span class="icon">🤖</span> Android 9+</div>
</div>
<a class="btn" href="#modules">Состав платформы</a>
<a class="btn-outline" href="#tech">Технические требования</a>
<div class="stats">
<div><div class="stat-num">~94 000</div><div class="stat-label">Пользователей</div></div>
<div><div class="stat-num">19</div><div class="stat-label">Модулей</div></div>
<div><div class="stat-num">99%</div><div class="stat-label">SLA доступность</div></div>
<div><div class="stat-num">3</div><div class="stat-label">Платформы</div></div>
</div>
</div>
</section>
<section id="modules" class="section">
<div class="container">
<h2>Модули платформы</h2>
<p class="section-sub">Полный состав цифровой экосистемы молодёжного сообщества</p>
<div class="modules">
<div class="module-card"><div class="module-num">Модуль 01</div><h3>Новостная лента и социальная активность</h3><p>Публикация постов с вложениями, лайки и эмодзи-реакции, древовидные комментарии, тегирование пользователей, жалобы на контент с модерацией.</p><div class="tags"><span class="tag">Посты</span><span class="tag">Реакции</span><span class="tag">Комментарии</span><span class="tag">Модерация</span></div></div>
<div class="module-card"><div class="module-num">Модуль 02</div><h3>Маркетинговое продвижение и AI-амбассадоры</h3><p>Банк из 1000 промо-постов, 10 AI-аватаров для видео-инструкций и дайджестов, 10 лендингов для конвертации трафика.</p><div class="tags"><span class="tag">Промо-материалы</span><span class="tag">AI-аватары</span><span class="tag">Лендинги</span></div></div>
<div class="module-card"><div class="module-num">Модуль 03</div><h3>Мессенджер</h3><p>Личные и групповые чаты в реальном времени, отправка медиафайлов и аудиосообщений, push-уведомления на мобильных устройствах и в браузере.</p><div class="tags"><span class="tag">Чаты</span><span class="tag">Файлы</span><span class="tag">Push-уведомления</span></div></div>
<div class="module-card"><div class="module-num">Модуль 04</div><h3>Мероприятия</h3><p>Карточки мероприятий, календарь и список с фильтрацией, онлайн-регистрация с учётом мест, выгрузка участников в XLSX, начисление Samruk Points.</p><div class="tags"><span class="tag">Календарь</span><span class="tag">Регистрация</span><span class="tag">XLSX</span></div></div>
<div class="module-card"><div class="module-num">Модуль 05</div><h3>Челленджи</h3><p>Геймифицированные активности: создание, регистрация, загрузка отчётов, верификация модератором, автозачисление Samruk Points, рейтинг участников.</p><div class="tags"><span class="tag">Геймификация</span><span class="tag">Верификация</span><span class="tag">Рейтинг</span></div></div>
<div class="module-card"><div class="module-num">Модуль 06</div><h3>Банк идей</h3><p>Создание карточек идей, голосование за/против, статусная модель жизненного цикла, уведомления об изменении статуса, выгрузка реестра в XLSX.</p><div class="tags"><span class="tag">Идеи</span><span class="tag">Голосование</span><span class="tag">Статусы</span></div></div>
<div class="module-card"><div class="module-num">Модуль 07</div><h3>Опросы</h3><p>Конструктор с 5 типами вопросов, анонимность, ограничение аудитории, агрегация результатов с диаграммами, экспорт в XLSX и PDF.</p><div class="tags"><span class="tag">Опросы</span><span class="tag">Диаграммы</span><span class="tag">Экспорт</span></div></div>
<div class="module-card"><div class="module-num">Модуль 08</div><h3>Геймификация — Samruk Points</h3><p>Внутренняя балловая система: гибкая матрица начислений, 10+ уровней, рейтинги по компаниям, система бейджей и прогресс-бары.</p><div class="tags"><span class="tag">Баллы</span><span class="tag">Уровни</span><span class="tag">Бейджи</span><span class="tag">Рейтинг</span></div></div>
<div class="module-card"><div class="module-num">Модуль 09</div><h3>Академия (обучение)</h3><p>Иерархия Learning Path → Курс → Модуль → Урок. Видео, тесты, PDF, SCORM. Трекинг прогресса, сертификаты, обязательные курсы с дедлайнами.</p><div class="tags"><span class="tag">Learning Path</span><span class="tag">SCORM</span><span class="tag">Сертификаты</span></div></div>
<div class="module-card"><div class="module-num">Модуль 10</div><h3>Образовательные курсы по ИИ</h3><p>20+ академических часов: основы генеративного ИИ, промпт-инжиниринг, ИИ в офисных задачах, этика и безопасность. Уровни: базовый, средний, продвинутый.</p><div class="tags"><span class="tag">GenAI</span><span class="tag">Промпт-инжиниринг</span><span class="tag">Безопасность</span></div></div>
<div class="module-card"><div class="module-num">Модуль 11</div><h3>Верифицированная сертификация</h3><p>Цифровые сертификаты с уникальным ID, QR-код верификации со страницей подтверждения, защищённый реестр без возможности удаления.</p><div class="tags"><span class="tag">QR-код</span><span class="tag">Верификация</span><span class="tag">Реестр</span></div></div>
<div class="module-card"><div class="module-num">Модуль 12</div><h3>AI-ассистент</h3><p>Диалоговый чат-интерфейс: навигация по платформе, информационный поиск, персональные рекомендации, история диалогов до 90 суток.</p><div class="tags"><span class="tag">AI</span><span class="tag">Чат</span><span class="tag">Рекомендации</span></div></div>
<div class="module-card"><div class="module-num">Модуль 13</div><h3>Нетворкинг</h3><p>Персональные профили с навыками, полнотекстовый поиск по сотрудникам, профессиональные связи, лента активности в профиле.</p><div class="tags"><span class="tag">Профили</span><span class="tag">Поиск</span><span class="tag">Связи</span></div></div>
<div class="module-card"><div class="module-num">Модуль 14</div><h3>Совет молодёжи</h3><p>Рабочие области для каждого Совета, управление инициативами, хранение протоколов и повесток, голосование с фиксацией результатов.</p><div class="tags"><span class="tag">Инициативы</span><span class="tag">Протоколы</span><span class="tag">Голосование</span></div></div>
<div class="module-card"><div class="module-num">Модуль 15</div><h3>Talents Hub</h3><p>Каталог талантов, расширенный профиль с достижениями, AI-оценка потенциала, рекомендации по развитию, привлечение к внутренним проектам.</p><div class="tags"><span class="tag">Каталог</span><span class="tag">AI-оценка</span><span class="tag">Проекты</span></div></div>
<div class="module-card"><div class="module-num">Модуль 16</div><h3>Career Hub</h3><p>Агрегация вакансий всех компаний группы, AI-подбор с match score, AI-генерация отклика, отслеживание статуса заявок, карьерные рекомендации.</p><div class="tags"><span class="tag">Вакансии</span><span class="tag">AI-подбор</span><span class="tag">Отклики</span></div></div>
<div class="module-card"><div class="module-num">Модуль 17</div><h3>Личный кабинет и профиль</h3><p>Персональное пространство: профиль, сводка активности, баланс SP, бейджи и сертификаты, гибкие настройки уведомлений (in-app, push, email).</p><div class="tags"><span class="tag">Профиль</span><span class="tag">Активность</span><span class="tag">Уведомления</span></div></div>
<div class="module-card"><div class="module-num">Модуль 18</div><h3>Отчёты и аналитика</h3><p>Дашборды: DAU/WAU/MAU, активность по компаниям, охват мероприятий, прогресс обучения. Big Data анализ каждый квартал, Sentiment Analysis.</p><div class="tags"><span class="tag">Дашборды</span><span class="tag">Big Data</span><span class="tag">PDF/XLSX</span></div></div>
<div class="module-card"><div class="module-num">Модуль 19</div><h3>Администрирование</h3><p>Управление пользователями и ролями, мониторинг и аудит действий, настройки модерации контента, гибкая ролевая модель.</p><div class="tags"><span class="tag">Роли</span><span class="tag">Аудит</span><span class="tag">Модерация</span></div></div>
</div>
</div>
</section>
<section id="tech" class="section section-alt">
<div class="container">
<h2>Технические требования</h2>
<p class="section-sub">Ключевые параметры платформы согласно спецификации</p>
<div class="tech-grid">
<div class="tech-card"><div class="emoji"></div><h4>Масштабируемость</h4><p>До 100 000 пользователей без деградации производительности</p></div>
<div class="tech-card"><div class="emoji">📱</div><h4>Кроссплатформенность</h4><p>Web (Chrome, Firefox, Safari, Edge)<br>iOS 15+ · Android 9+</p></div>
<div class="tech-card"><div class="emoji">🛡</div><h4>Доступность (SLA)</h4><p>Не менее 99% в рабочие часы. Круглосуточная работа демо-версии</p></div>
<div class="tech-card"><div class="emoji">📦</div><h4>Модульность</h4><p>19 независимых подсистем с гибкой настройкой компонентов</p></div>
<div class="tech-card"><div class="emoji">🧩</div><h4>Открытая архитектура</h4><p>Готовые пакеты ПО, интеграции, адаптация к любым условиям</p></div>
<div class="tech-card"><div class="emoji">📊</div><h4>Экспорт данных</h4><p>Выгрузка отчётов в XLSX и PDF. Ежеквартальный Big Data анализ</p></div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h2>Документация и обучение</h2>
<p class="section-sub">Поставщик предоставляет полный пакет документации на русском языке</p>
<div class="two-col">
<div class="col-box">
<h3>Пользовательская документация</h3>
<ul>
<li>Инструкция по подготовке данных и настроек</li>
<li>Инструкция по заполнению НСИ</li>
<li>Инструкция по работе с модулями платформы</li>
<li>Инструкция по работе с отчётами</li>
<li>Описание интерфейса пользователя</li>
<li>5+ видеоинструкций (от 3 мин каждая)</li>
</ul>
</div>
<div class="col-box">
<h3>Руководство администратора</h3>
<ul>
<li>Инструменты администрирования</li>
<li>Управление ролями и правами</li>
<li>Настройка интеграций</li>
<li>Резервное копирование и восстановление</li>
<li>Мониторинг и аудит действий</li>
<li>Настройки модерации контента</li>
</ul>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<h2>Требования к демо-версии</h2>
<p class="section-sub">Поставщик обязан предоставить работающий прототип 24/7 на весь период оценки. Три роли доступа: Сотрудник, Модератор, Администратор.</p>
<a class="btn" href="#modules" style="background:var(--ink);color:var(--cyan)">Смотреть состав платформы ↑</a>
</div>
</section>
<footer class="footer">
SAMRUK JASTARY — Цифровая платформа молодёжного сообщества группы компаний АО «Самрук-Казына»<br>
<a href="https://sk.kz" target="_blank">sk.kz</a>
</footer>
</body>
</html>