Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
d3a3099915 | ||
|
|
bbebdb96da | ||
|
|
3378e3be95 | ||
|
|
c9f4b8902a |
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
||||
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||
# Vibe42 — учебная песочница для лендингов
|
||||
|
||||
Workspace юзера `y.umirzakov`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 ТВОЯ РОЛЬ
|
||||
|
||||
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/y.umirzakov/<repo>/`,
|
||||
2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
|
||||
|
||||
Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
|
||||
|
||||
---
|
||||
|
||||
## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
|
||||
|
||||
1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
|
||||
2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
|
||||
- Промо хобби (фотография / музыка / спорт)
|
||||
- Резюме / personal page с контактами
|
||||
- Афиша мероприятия (концерт, день рождения, мастер-класс)
|
||||
- Меню заведения / прайс услуг
|
||||
- Лендинг продукта или будущего проекта (waitlist)
|
||||
3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
|
||||
4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
|
||||
|
||||
---
|
||||
|
||||
## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
|
||||
|
||||
Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
|
||||
|
||||
Скажи: «Давай определимся, я задам 3 коротких вопроса:
|
||||
1. Это для тебя лично, для проекта/бизнеса, или для события?
|
||||
2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
|
||||
3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
|
||||
|
||||
После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
|
||||
|
||||
---
|
||||
|
||||
## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ
|
||||
|
||||
| Запрос | Что делаем вместо |
|
||||
|--------|-------------------|
|
||||
| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram |
|
||||
| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) |
|
||||
| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium |
|
||||
| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp |
|
||||
| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) |
|
||||
| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` |
|
||||
|
||||
**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут.
|
||||
|
||||
---
|
||||
|
||||
## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
|
||||
|
||||
### A — Промо продукта/услуги
|
||||
**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
|
||||
|
||||
### B — Personal / резюме
|
||||
**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
|
||||
|
||||
### C — Афиша мероприятия
|
||||
**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
|
||||
|
||||
### D — Меню / прайс
|
||||
**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
|
||||
|
||||
### E — Waitlist для будущего проекта
|
||||
**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
|
||||
|
||||
Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
|
||||
|
||||
---
|
||||
|
||||
## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
|
||||
|
||||
Как только готов первый рабочий вариант (даже грубый):
|
||||
|
||||
1. **Сразу запушь:**
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "v1"
|
||||
git push origin HEAD:pages
|
||||
```
|
||||
2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**:
|
||||
> 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/y.umirzakov/<repo>/**
|
||||
3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?»
|
||||
4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
|
||||
|
||||
1. **Только статика — HTML + CSS + JS в браузере.**
|
||||
2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis.
|
||||
3. **Никакой аутентификации / OAuth / JWT.**
|
||||
4. **Никакого Docker, nginx, sudo, системных настроек.**
|
||||
5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN.
|
||||
6. **НИКОГДА `git init` в workspace root (`/workspaces/y.umirzakov`)** — это папка-контейнер юзера, не репозиторий.
|
||||
|
||||
---
|
||||
|
||||
## ✅ ВСЕГДА работай через `./new-project`
|
||||
|
||||
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
|
||||
|
||||
```bash
|
||||
cd /workspaces/y.umirzakov
|
||||
./new-project NAME # создаёт repo в Gitea + клонит локально в ./NAME/
|
||||
cd NAME
|
||||
# теперь создавай index.html / style.css / script.js внутри ./NAME
|
||||
```
|
||||
|
||||
`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`.
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Git и публикация
|
||||
|
||||
**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
|
||||
|
||||
- Профиль юзера: https://git.vibe42.kz/y.umirzakov
|
||||
- Pages (живые лендинги): https://pages.git.vibe42.kz/y.umirzakov/<repo>/
|
||||
- Креды уже в `/workspaces/y.umirzakov/.git-credentials` — git push/clone работают без пароля
|
||||
- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно
|
||||
|
||||
### Опубликовать лендинг
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "site"
|
||||
git push origin HEAD:pages
|
||||
```
|
||||
|
||||
Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно.
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Когда что-то идёт не так
|
||||
|
||||
- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
|
||||
- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
|
||||
- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
|
||||
- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
|
||||
|
||||
---
|
||||
|
||||
## ❌ Чего НЕ делать НИКОГДА
|
||||
|
||||
- ❌ `git init` в workspace root
|
||||
- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
|
||||
- ❌ Создавать `server.js` / `app.py` / `main.go` как backend
|
||||
- ❌ Использовать `gh` CLI или GitHub API
|
||||
- ❌ Вызывать Gitea Pages-API (его нет)
|
||||
- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
|
||||
- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
|
||||
- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
|
||||
- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
|
||||
- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
|
||||
- ❌ Говорить «это сложно» — переформулируй в простое
|
||||
- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
|
||||
|
||||
---
|
||||
|
||||
## 🎨 design.md
|
||||
|
||||
Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
|
||||
110
design.md
Normal file
110
design.md
Normal file
@ -0,0 +1,110 @@
|
||||
<!-- vibe42-design-version: v1-2026-06-01 -->
|
||||
# Design system — Vibe42 песочница
|
||||
|
||||
Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого.
|
||||
|
||||
## Палитра
|
||||
|
||||
| Token | Hex | Использование |
|
||||
|-------|-----|---------------|
|
||||
| `--ink` | `#0F1218` | Тёмный фон / основной текст |
|
||||
| `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) |
|
||||
| `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов |
|
||||
| `--white` | `#FFFFFF` | Основной фон |
|
||||
| `--gray-500` | `#5B6573` | Вторичный текст |
|
||||
| `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны |
|
||||
|
||||
## Типографика
|
||||
|
||||
```css
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||||
```
|
||||
|
||||
| Уровень | Размер | Вес | line-height |
|
||||
|---------|--------|-----|-------------|
|
||||
| h1 (hero) | 56px | 800 | 1.05 |
|
||||
| h2 (section) | 36px | 700 | 1.15 |
|
||||
| h3 | 22px | 700 | 1.3 |
|
||||
| body | 17px | 400 | 1.6 |
|
||||
| small | 14px | 400 | 1.5 |
|
||||
|
||||
На мобиле — h1 уменьши до 36px, h2 до 28px.
|
||||
|
||||
## Лейаут
|
||||
|
||||
- max-width контента: **1140px** (контейнер с padding по бокам)
|
||||
- секция: `padding: 80px 24px` (мобила: `48px 20px`)
|
||||
- gap между блоками внутри секции: `24-32px`
|
||||
- border-radius: `8px` (кнопки, карточки), `16px` (большие карточки)
|
||||
|
||||
## Кнопки
|
||||
|
||||
```css
|
||||
.btn-primary {
|
||||
background: var(--cyan); color: var(--ink);
|
||||
padding: 14px 28px; border-radius: 8px;
|
||||
font-weight: 700; text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: transparent; color: var(--ink);
|
||||
border: 2px solid var(--ink);
|
||||
padding: 12px 26px; border-radius: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
## Стартер `index.html`
|
||||
|
||||
```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:#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:var(--ink);color:var(--white)}
|
||||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||||
.btn:hover{background:#1be5ff}
|
||||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||||
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Заголовок проекта</h1>
|
||||
<p>Подзаголовок — пара предложений о чём это.</p>
|
||||
<a class="btn" href="#section">Начать</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="section" class="section">
|
||||
<div class="container">
|
||||
<h2>Секция</h2>
|
||||
<div class="card">Контент карточки.</div>
|
||||
<div class="card">Контент карточки.</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Чем НЕ пользоваться
|
||||
|
||||
- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
|
||||
- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
|
||||
- jQuery — vanilla JS более чем достаточно
|
||||
|
||||
## Чем МОЖНО (если очень надо)
|
||||
|
||||
- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
|
||||
- **Lottie animations через CDN**
|
||||
- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
|
||||
- **Шрифты Google Fonts через `<link>`** в head
|
||||
696
index.html
Normal file
696
index.html
Normal file
@ -0,0 +1,696 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Трудовой замер — АО «Самрук-Казына»</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--ink: #0F1218;
|
||||
--sky: #00839C;
|
||||
--sky-light: #00A3C4;
|
||||
--sky-50: #E6F7FA;
|
||||
--white: #FFFFFF;
|
||||
--gray-500: #5B6573;
|
||||
--gray-400: #98A2B3;
|
||||
--gray-100: #F2F4F7;
|
||||
--gray-200: #E4E7EC;
|
||||
--green: #12B76A;
|
||||
--amber: #F79009;
|
||||
--red: #F04438;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
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: 0 24px; }
|
||||
|
||||
/* Nav */
|
||||
.nav {
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
padding: 0;
|
||||
position: sticky; top: 0; background: var(--white); z-index: 100;
|
||||
}
|
||||
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 60px; }
|
||||
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
|
||||
.nav-brand .sk {
|
||||
width: 34px; height: 34px; border-radius: 7px;
|
||||
background: linear-gradient(135deg, var(--sky), var(--sky-light));
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--white); font-size: 15px; font-weight: 800; flex-shrink: 0;
|
||||
}
|
||||
.nav-links { display: flex; gap: 8px; align-items: center; }
|
||||
.nav-links a {
|
||||
font-size: 14px; font-weight: 600; text-decoration: none; color: var(--gray-500);
|
||||
padding: 8px 16px; border-radius: 8px; transition: all 0.15s;
|
||||
}
|
||||
.nav-links a:hover, .nav-links a.active { color: var(--sky); background: var(--sky-50); }
|
||||
|
||||
/* Hero */
|
||||
.hero { padding: 80px 0 56px; text-align: center; }
|
||||
.hero .badge { display: inline-block; background: var(--sky-50); color: var(--sky); padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
|
||||
.hero h1 { font-size: 48px; font-weight: 800; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em; }
|
||||
.hero h1 em { font-style: normal; color: var(--sky); }
|
||||
.hero p.sub { font-size: 19px; color: var(--gray-500); max-width: 650px; margin: 0 auto 36px; }
|
||||
.hero .btn {
|
||||
display: inline-block; background: var(--ink); color: var(--white);
|
||||
padding: 16px 40px; border-radius: 10px; font-size: 16px; font-weight: 700;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.hero .btn:hover { background: #1D2939; }
|
||||
|
||||
/* Stats bar */
|
||||
.stats-bar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
padding: 48px 0;
|
||||
border-top: 1px solid var(--gray-100);
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
margin-top: 48px;
|
||||
}
|
||||
.stat-item { text-align: center; }
|
||||
.stat-num { font-size: 42px; font-weight: 800; color: var(--sky); line-height: 1; }
|
||||
.stat-num small { font-size: 20px; font-weight: 600; color: var(--gray-400); }
|
||||
.stat-label { font-size: 13px; color: var(--gray-500); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
|
||||
/* Sections */
|
||||
.section { padding: 72px 0; }
|
||||
.section h2 { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
|
||||
.section p.lead { font-size: 17px; color: var(--gray-500); max-width: 600px; margin-bottom: 40px; }
|
||||
.section-header { margin-bottom: 40px; }
|
||||
.section-header .label { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sky); margin-bottom: 8px; }
|
||||
.section-gray { background: var(--gray-100); }
|
||||
|
||||
/* Metric cards */
|
||||
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; }
|
||||
.metric-card {
|
||||
background: var(--white); border-radius: 16px; padding: 28px 32px;
|
||||
border: 1px solid var(--gray-100);
|
||||
}
|
||||
.metric-card .label { font-size: 13px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
|
||||
.metric-card .value { font-size: 32px; font-weight: 800; line-height: 1.1; }
|
||||
.metric-card .sub { font-size: 13px; color: var(--gray-500); margin-top: 6px; }
|
||||
.value.green { color: var(--green); }
|
||||
.value.amber { color: var(--amber); }
|
||||
.value.red { color: var(--red); }
|
||||
|
||||
/* Chart grid */
|
||||
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 28px; }
|
||||
.chart-box {
|
||||
background: var(--white); border-radius: 16px; padding: 28px;
|
||||
border: 1px solid var(--gray-100);
|
||||
}
|
||||
.chart-box h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
|
||||
.chart-box canvas { max-height: 300px; }
|
||||
|
||||
/* Cards */
|
||||
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
|
||||
.card {
|
||||
background: var(--white); border-radius: 16px; padding: 32px;
|
||||
border: 1px solid var(--gray-100);
|
||||
}
|
||||
.card .emoji { font-size: 32px; margin-bottom: 12px; }
|
||||
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
|
||||
.card p { font-size: 15px; color: var(--gray-500); }
|
||||
|
||||
/* Survey form */
|
||||
fieldset {
|
||||
border: 1px solid var(--gray-200); border-radius: 16px;
|
||||
padding: 36px 40px; margin-bottom: 24px; background: var(--white);
|
||||
}
|
||||
legend {
|
||||
font-size: 20px; font-weight: 700; padding: 0 12px;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
legend .num {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
background: var(--sky); color: var(--white);
|
||||
font-size: 15px; font-weight: 800; flex-shrink: 0;
|
||||
}
|
||||
.radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, max-content)); gap: 10px; margin-top: 16px; }
|
||||
.radio-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 12px 18px; border: 1.5px solid var(--gray-200); border-radius: 10px;
|
||||
cursor: pointer; transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.radio-item:hover { border-color: var(--sky); }
|
||||
.radio-item:has(input:checked) { border-color: var(--sky); background: var(--sky-50); font-weight: 600; }
|
||||
.radio-item input { accent-color: var(--sky); width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.radio-item label { cursor: pointer; }
|
||||
|
||||
.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: 110px; margin-top: 12px;
|
||||
}
|
||||
.text-input:focus { outline: none; border-color: var(--sky); }
|
||||
|
||||
.btn-primary {
|
||||
display: inline-block; background: var(--ink); color: var(--white);
|
||||
padding: 16px 48px; border-radius: 10px; font: inherit; font-size: 17px;
|
||||
font-weight: 700; border: none; cursor: pointer; text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-primary:hover { background: #1D2939; }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.submit-wrap { text-align: center; margin-top: 32px; padding-bottom: 48px; }
|
||||
|
||||
.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: 200; 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: 40px 24px; color: var(--gray-500); font-size: 13px; border-top: 1px solid var(--gray-100); }
|
||||
.footer a { color: var(--sky); text-decoration: none; }
|
||||
.required-note { font-size: 13px; color: var(--gray-500); margin-bottom: 24px; }
|
||||
|
||||
/* Tables */
|
||||
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
|
||||
.data-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--gray-400); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--gray-100); }
|
||||
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
|
||||
.data-table td.bar-cell { width: 200px; }
|
||||
.bar-bg { height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
|
||||
.bar-fill { height: 100%; border-radius: 4px; background: var(--sky); }
|
||||
.data-table .pct { font-weight: 700; text-align: right; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 30px; }
|
||||
.stats-bar { grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
||||
.section h2 { font-size: 26px; }
|
||||
.charts { grid-template-columns: 1fr; }
|
||||
fieldset { padding: 24px 20px; }
|
||||
.radio-group { grid-template-columns: 1fr; }
|
||||
.nav-links { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<div class="container">
|
||||
<div class="nav-brand">
|
||||
<div class="sk">SK</div>
|
||||
Трудовой замер
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="#home" class="active">Главная</a>
|
||||
<a href="#dashboard">Дашборд</a>
|
||||
<a href="#about">О проекте</a>
|
||||
<a href="#survey">Опрос</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ===== HOME ===== -->
|
||||
<section id="home" class="hero">
|
||||
<div class="container">
|
||||
<div class="badge">АО «Самрук-Казына»</div>
|
||||
<h1>Единый портал<br>трудовых замеров <em>Самрук-Казына</em></h1>
|
||||
<p class="sub">Платформа анонимных опросов сотрудников группы компаний. Аналитика вовлечённости, зарплат, условий труда и карьерных ожиданий в реальном времени.</p>
|
||||
<a href="#survey" class="btn">Пройти опрос</a>
|
||||
|
||||
<div class="stats-bar" style="border-top:none; margin-top:56px;">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">247<small> 831</small></div>
|
||||
<div class="stat-label">Сотрудников в группе</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">142<small> 503</small></div>
|
||||
<div class="stat-label">Прошли опрос</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">57,6<small>%</small></div>
|
||||
<div class="stat-label">Охват опроса</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">15</div>
|
||||
<div class="stat-label">Вопросов в анкете</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== DASHBOARD ===== -->
|
||||
<section id="dashboard" class="section-gray">
|
||||
<div class="container section">
|
||||
<div class="section-header">
|
||||
<div class="label">Дашборд</div>
|
||||
<h2>Результаты опроса</h2>
|
||||
<p class="lead">Агрегированные данные по состоянию на июнь 2026. Обновляется еженедельно.</p>
|
||||
</div>
|
||||
|
||||
<div class="metrics">
|
||||
<div class="metric-card">
|
||||
<div class="label">Индекс eNPS</div>
|
||||
<div class="value green">+32</div>
|
||||
<div class="sub">готовы рекомендовать как работодателя</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="label">Удовлетворённость зарплатой</div>
|
||||
<div class="value amber">61%</div>
|
||||
<div class="sub">довольны или скорее довольны</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="label">Планируют уйти из холдинга</div>
|
||||
<div class="value red">18,4%</div>
|
||||
<div class="sub">в частный сектор или релокация</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="label">Информированы о стратегии</div>
|
||||
<div class="value amber">43%</div>
|
||||
<div class="sub">хорошо информированы</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="charts">
|
||||
<div class="chart-box">
|
||||
<h3>Удовлетворённость зарплатой</h3>
|
||||
<canvas id="chartSalary"></canvas>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<h3>Карьерный рост</h3>
|
||||
<canvas id="chartCareer"></canvas>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<h3>Переработки</h3>
|
||||
<canvas id="chartOvertime"></canvas>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<h3>Что нужно улучшить</h3>
|
||||
<canvas id="chartImprove"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:36px; display:grid; grid-template-columns: repeat(auto-fit, minmax(380px,1fr)); gap:28px;">
|
||||
<div class="chart-box">
|
||||
<h3>По компаниям группы</h3>
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Компания</th><th>eNPS</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Корпоративный центр</td><td class="pct">+48</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:96%"></div></div></td></tr>
|
||||
<tr><td>Эйр Астана</td><td class="pct">+41</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:82%"></div></div></td></tr>
|
||||
<tr><td>Казатомпром</td><td class="pct">+37</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:74%"></div></div></td></tr>
|
||||
<tr><td>KEGOC</td><td class="pct">+35</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:70%"></div></div></td></tr>
|
||||
<tr><td>Казахтелеком</td><td class="pct">+33</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:66%"></div></div></td></tr>
|
||||
<tr><td>КазМунайГаз</td><td class="pct">+28</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:56%"></div></div></td></tr>
|
||||
<tr><td>Самрук-Энерго</td><td class="pct">+24</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:48%"></div></div></td></tr>
|
||||
<tr><td>ҚТЖ</td><td class="pct">+19</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:38%"></div></div></td></tr>
|
||||
<tr><td>Казпочта</td><td class="pct">+10</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:20%"></div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<h3>По макро-регионам</h3>
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Регион</th><th>Охват</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Астана</td><td class="pct">72%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:72%"></div></div></td></tr>
|
||||
<tr><td>Алматы</td><td class="pct">68%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:68%"></div></div></td></tr>
|
||||
<tr><td>Запад</td><td class="pct">61%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:61%"></div></div></td></tr>
|
||||
<tr><td>Восток</td><td class="pct">55%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:55%"></div></div></td></tr>
|
||||
<tr><td>Юг</td><td class="pct">49%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:49%"></div></div></td></tr>
|
||||
<tr><td>Центр</td><td class="pct">47%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:47%"></div></div></td></tr>
|
||||
<tr><td>Север</td><td class="pct">44%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:44%"></div></div></td></tr>
|
||||
<tr><td>Шымкент</td><td class="pct">42%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:42%"></div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== ABOUT ===== -->
|
||||
<section id="about">
|
||||
<div class="container section">
|
||||
<div class="section-header">
|
||||
<div class="label">О проекте</div>
|
||||
<h2>Что измеряем</h2>
|
||||
<p class="lead">Пять ключевых направлений анализа трудового климата в холдинге.</p>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="card"><div class="emoji">💰</div><h3>Доход и премирование</h3><p>Справедливость зарплат, бонусов и KPI. Сравнение между портфельными компаниями.</p></div>
|
||||
<div class="card"><div class="emoji">⚖️</div><h3>Условия труда</h3><p>График, переработки, соцпакет, безопасность труда в производственных и офисных подразделениях.</p></div>
|
||||
<div class="card"><div class="emoji">📈</div><h3>Карьерный рост</h3><p>Прозрачность назначений, кадровый резерв, обучение и горизонтальная ротация внутри холдинга.</p></div>
|
||||
<div class="card"><div class="emoji">🏛</div><h3>Корпоративная культура</h3><p>Ценности, информированность о стратегии, доверие к руководству компании и холдинга.</p></div>
|
||||
<div class="card"><div class="emoji">😰</div><h3>Вовлечённость</h3><p>Готовность рекомендовать компанию, стабильность, планы на будущее внутри группы.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== SURVEY ===== -->
|
||||
<section id="survey" style="border-top:1px solid var(--gray-100);">
|
||||
<div class="container" style="padding-top:72px; padding-bottom:32px;">
|
||||
<div class="section-header">
|
||||
<div class="label">Анкета</div>
|
||||
<h2>Пройти опрос</h2>
|
||||
<p class="lead">Все ответы анонимны. Результаты будут представлены в виде обезличенной аналитики по группе компаний.</p>
|
||||
</div>
|
||||
<p class="required-note">* — обязательные вопросы</p>
|
||||
|
||||
<form id="surveyForm" novalidate>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">1</span> В какой компании группы вы работаете? *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="company" value="corp" id="co1" required><label for="co1">Корпоративный центр (АО «Самрук-Казына»)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="kmg" id="co2"><label for="co2">АО «НК «КазМунайГаз»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="ktzh" id="co3"><label for="co3">АО «НК «Қазақстан Темір Жолы»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="kegoc" id="co4"><label for="co4">АО «KEGOC»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="kazatom" id="co5"><label for="co5">АО «НАК «Казатомпром»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="kazpost" id="co6"><label for="co6">АО «Казпочта»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="air" id="co7"><label for="co7">АО «Эйр Астана»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="energy" id="co8"><label for="co8">АО «Самрук-Энерго»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="telecom" id="co9"><label for="co9">АО «Казахтелеком»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="qazaqgaz" id="co10"><label for="co10">АО «НК «QazaqGaz»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="tauken" id="co11"><label for="co11">АО «НГК «Тау-Кен Самрук»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="company" value="other" id="co12"><label for="co12">Другая компания группы</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">2</span> Регион вашей работы *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="region" value="astana" id="r1" required><label for="r1">Астана</label></div>
|
||||
<div class="radio-item"><input type="radio" name="region" value="almaty" id="r2"><label for="r2">Алматы</label></div>
|
||||
<div class="radio-item"><input type="radio" name="region" value="shymkent" id="r3"><label for="r3">Шымкент</label></div>
|
||||
<div class="radio-item"><input type="radio" name="region" value="north" id="r4"><label for="r4">Север (СКО, Акмолинская, Павлодарская, Костанайская)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="region" value="south" id="r5"><label for="r5">Юг (Туркестанская, Жамбылская, Кызылординская, Алматинская, Жетысуская)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="region" value="west" id="r6"><label for="r6">Запад (Атырауская, Мангистауская, ЗКО, Актюбинская)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="region" value="east" id="r7"><label for="r7">Восток (ВКО, Абайская)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="region" value="center" id="r8"><label for="r8">Центр (Карагандинская, Улытауская)</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">3</span> Ваш возраст *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="age" value="18-22" id="a1" required><label for="a1">18–22 года</label></div>
|
||||
<div class="radio-item"><input type="radio" name="age" value="23-29" id="a2"><label for="a2">23–29 лет</label></div>
|
||||
<div class="radio-item"><input type="radio" name="age" value="30-39" id="a3"><label for="a3">30–39 лет</label></div>
|
||||
<div class="radio-item"><input type="radio" name="age" value="40-49" id="a4"><label for="a4">40–49 лет</label></div>
|
||||
<div class="radio-item"><input type="radio" name="age" value="50-59" id="a5"><label for="a5">50–59 лет</label></div>
|
||||
<div class="radio-item"><input type="radio" name="age" value="60+" id="a6"><label for="a6">60 лет и старше</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">4</span> Ваш стаж в компании *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="tenure" value="lt1" id="t1" required><label for="t1">Менее 1 года</label></div>
|
||||
<div class="radio-item"><input type="radio" name="tenure" value="1-3" id="t2"><label for="t2">1–3 года</label></div>
|
||||
<div class="radio-item"><input type="radio" name="tenure" value="3-7" id="t3"><label for="t3">3–7 лет</label></div>
|
||||
<div class="radio-item"><input type="radio" name="tenure" value="7-15" id="t4"><label for="t4">7–15 лет</label></div>
|
||||
<div class="radio-item"><input type="radio" name="tenure" value="gt15" id="t5"><label for="t5">Более 15 лет</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">5</span> Категория должности *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="position" value="worker" id="p1" required><label for="p1">Рабочий / производственный персонал</label></div>
|
||||
<div class="radio-item"><input type="radio" name="position" value="specialist" id="p2"><label for="p2">Специалист / инженер</label></div>
|
||||
<div class="radio-item"><input type="radio" name="position" value="senior" id="p3"><label for="p3">Ведущий / главный специалист</label></div>
|
||||
<div class="radio-item"><input type="radio" name="position" value="manager" id="p4"><label for="p4">Руководитель отдела / подразделения</label></div>
|
||||
<div class="radio-item"><input type="radio" name="position" value="director" id="p5"><label for="p5">Директор департамента / топ-менеджмент</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">6</span> Ваш месячный доход (на руки) *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="income" value="lt150" id="inc1" required><label for="inc1">до 150 000 ₸</label></div>
|
||||
<div class="radio-item"><input type="radio" name="income" value="150-250" id="inc2"><label for="inc2">150 000 – 250 000 ₸</label></div>
|
||||
<div class="radio-item"><input type="radio" name="income" value="250-400" id="inc3"><label for="inc3">250 000 – 400 000 ₸</label></div>
|
||||
<div class="radio-item"><input type="radio" name="income" value="400-600" id="inc4"><label for="inc4">400 000 – 600 000 ₸</label></div>
|
||||
<div class="radio-item"><input type="radio" name="income" value="600-900" id="inc5"><label for="inc5">600 000 – 900 000 ₸</label></div>
|
||||
<div class="radio-item"><input type="radio" name="income" value="gt900" id="inc6"><label for="inc6">более 900 000 ₸</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">7</span> Формат работы *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="format" value="office" id="f1" required><label for="f1">Офис / административное здание</label></div>
|
||||
<div class="radio-item"><input type="radio" name="format" value="production" id="f2"><label for="f2">Производство / промплощадка</label></div>
|
||||
<div class="radio-item"><input type="radio" name="format" value="hybrid" id="f3"><label for="f3">Гибрид (офис + удалёнка)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="format" value="remote" id="f4"><label for="f4">Удалённая работа</label></div>
|
||||
<div class="radio-item"><input type="radio" name="format" value="field" id="f5"><label for="f5">Вахтовый / разъездной метод</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">8</span> Удовлетворены ли вы своей заработной платой? *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="salary_ok" value="5" id="s1" required><label for="s1">Полностью доволен(а)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="salary_ok" value="4" id="s2"><label for="s2">Скорее доволен(а)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="salary_ok" value="3" id="s3"><label for="s3">Нейтрально</label></div>
|
||||
<div class="radio-item"><input type="radio" name="salary_ok" value="2" id="s4"><label for="s4">Скорее недоволен(а)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="salary_ok" value="1" id="s5"><label for="s5">Совсем недоволен(а)</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">9</span> Считаете ли вы систему премирования справедливой? *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="bonus_fair" value="yes" id="b1" required><label for="b1">Да, критерии понятны и достижимы</label></div>
|
||||
<div class="radio-item"><input type="radio" name="bonus_fair" value="partly" id="b2"><label for="b2">Частично — критерии есть, но непрозрачны</label></div>
|
||||
<div class="radio-item"><input type="radio" name="bonus_fair" value="no" id="b3"><label for="b3">Нет, премии непредсказуемы</label></div>
|
||||
<div class="radio-item"><input type="radio" name="bonus_fair" value="no_bonus" id="b4"><label for="b4">У меня нет переменной части</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">10</span> Перерабатываете ли вы? *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="overtime" value="never" id="ov1" required><label for="ov1">Нет, строго по графику</label></div>
|
||||
<div class="radio-item"><input type="radio" name="overtime" value="sometimes" id="ov2"><label for="ov2">Иногда (1–2 раза в неделю)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="overtime" value="often" id="ov3"><label for="ov3">Часто (3+ раз в неделю)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="overtime" value="always" id="ov4"><label for="ov4">Постоянно, это норма</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">11</span> Оцените возможности карьерного роста *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="career" value="great" id="cr1" required><label for="cr1">Отличные — вижу свой трек развития</label></div>
|
||||
<div class="radio-item"><input type="radio" name="career" value="ok" id="cr2"><label for="cr2">Средние — рост есть, но медленно</label></div>
|
||||
<div class="radio-item"><input type="radio" name="career" value="unclear" id="cr3"><label for="cr3">Непонятно — механизмы непрозрачны</label></div>
|
||||
<div class="radio-item"><input type="radio" name="career" value="none" id="cr4"><label for="cr4">Нет — повышают «своих»</label></div>
|
||||
<div class="radio-item"><input type="radio" name="career" value="not_interested" id="cr5"><label for="cr5">Не интересует — устраивает позиция</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">12</span> Насколько вы информированы о стратегии и планах холдинга? *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="info" value="well" id="inf1" required><label for="inf1">Хорошо — регулярные коммуникации</label></div>
|
||||
<div class="radio-item"><input type="radio" name="info" value="surface" id="inf2"><label for="inf2">Поверхностно — что-то слышал(а)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="info" value="rumors" id="inf3"><label for="inf3">Только слухи</label></div>
|
||||
<div class="radio-item"><input type="radio" name="info" value="none" id="inf4"><label for="inf4">Никак — информации нет</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">13</span> Хотели бы вы сменить работу в ближайший год? *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="change_job" value="stay" id="cj1" required><label for="cj1">Нет, меня всё устраивает</label></div>
|
||||
<div class="radio-item"><input type="radio" name="change_job" value="inside" id="cj2"><label for="cj2">Да, но внутри группы (в другую компанию холдинга)</label></div>
|
||||
<div class="radio-item"><input type="radio" name="change_job" value="outside" id="cj3"><label for="cj3">Да, хочу уйти в частный сектор</label></div>
|
||||
<div class="radio-item"><input type="radio" name="change_job" value="abroad" id="cj4"><label for="cj4">Да, планирую релокацию</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">14</span> Рекомендовали бы вы свою компанию как работодателя? *</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="radio" name="nps" value="10-9" id="n1" required><label for="n1">9–10 — обязательно порекомендую</label></div>
|
||||
<div class="radio-item"><input type="radio" name="nps" value="8-7" id="n2"><label for="n2">7–8 — скорее да</label></div>
|
||||
<div class="radio-item"><input type="radio" name="nps" value="6-5" id="n3"><label for="n3">5–6 — нейтрально</label></div>
|
||||
<div class="radio-item"><input type="radio" name="nps" value="4-0" id="n4"><label for="n4">0–4 — не рекомендую</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><span class="num">15</span> Что больше всего нужно улучшить? (можно несколько)</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-item"><input type="checkbox" name="improve" value="salary" id="im1"><label for="im1">Повышение зарплат</label></div>
|
||||
<div class="radio-item"><input type="checkbox" name="improve" value="transparency" id="im2"><label for="im2">Прозрачность KPI и премий</label></div>
|
||||
<div class="radio-item"><input type="checkbox" name="improve" value="career" id="im3"><label for="im3">Кадровый рост и назначения</label></div>
|
||||
<div class="radio-item"><input type="checkbox" name="improve" value="training" id="im4"><label for="im4">Обучение и развитие</label></div>
|
||||
<div class="radio-item"><input type="checkbox" name="improve" value="conditions" id="im5"><label for="im5">Условия и безопасность труда</label></div>
|
||||
<div class="radio-item"><input type="checkbox" name="improve" value="social" id="im6"><label for="im6">Соцпакет и льготы</label></div>
|
||||
<div class="radio-item"><input type="checkbox" name="improve" value="communication" id="im7"><label for="im7">Коммуникация от руководства</label></div>
|
||||
<div class="radio-item"><input type="checkbox" name="improve" value="digital" id="im8"><label for="im8">Цифровизация процессов</label></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Ваш комментарий (по желанию)</legend>
|
||||
<textarea class="text-input" name="comment" placeholder="Что вы хотите донести до руководства? Какие проблемы требуют внимания?" maxlength="600"></textarea>
|
||||
</fieldset>
|
||||
|
||||
<div class="submit-wrap">
|
||||
<button type="submit" class="btn-primary" id="submitBtn">Отправить ответы</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="toast" id="toast"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<p>АО «Самрук-Казына» · Внутренний анонимный опрос · 2026</p>
|
||||
<p style="margin-top:4px;">Все ответы конфиденциальны. Данные используются только в обобщённом виде.</p>
|
||||
<p style="margin-top:8px;"><a href="#home">Главная</a> · <a href="#dashboard">Дашборд</a> · <a href="#about">О проекте</a> · <a href="#survey">Опрос</a></p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// ---- Charts ----
|
||||
var colors = { sky: '#00839C', skyLight: '#00A3C4', sky50: '#E6F7FA', red: '#F04438', amber: '#F79009', green: '#12B76A', gray: '#E4E7EC' };
|
||||
|
||||
new Chart(document.getElementById('chartSalary'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Полностью доволен', 'Скорее доволен', 'Нейтрально', 'Скорее недоволен', 'Недоволен'],
|
||||
datasets: [{
|
||||
data: [24, 37, 19, 12, 8],
|
||||
backgroundColor: [colors.green, colors.skyLight, colors.gray, colors.amber, colors.red],
|
||||
borderRadius: 6, borderSkipped: false
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: true, max: 50, ticks: { callback: function(v) { return v + '%'; } }, grid: { color: '#f2f4f7' } },
|
||||
x: { ticks: { font: { size: 11 } }, grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
new Chart(document.getElementById('chartCareer'), {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Отличные', 'Средние', 'Непрозрачно', 'Нет роста', 'Не интересует'],
|
||||
datasets: [{
|
||||
data: [18, 34, 24, 14, 10],
|
||||
backgroundColor: [colors.green, colors.skyLight, colors.amber, colors.red, colors.gray],
|
||||
borderWidth: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 }, usePointStyle: true, pointStyleWidth: 10 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
new Chart(document.getElementById('chartOvertime'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Нет переработок', 'Иногда', 'Часто', 'Постоянно'],
|
||||
datasets: [{
|
||||
data: [38, 34, 18, 10],
|
||||
backgroundColor: [colors.green, colors.skyLight, colors.amber, colors.red],
|
||||
borderRadius: 6, borderSkipped: false
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
indexAxis: 'y',
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
x: { beginAtZero: true, max: 50, ticks: { callback: function(v) { return v + '%'; } }, grid: { color: '#f2f4f7' } },
|
||||
y: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
new Chart(document.getElementById('chartImprove'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Зарплаты', 'KPI/премии', 'Карьерный рост', 'Коммуникации', 'Цифровизация', 'Соцпакет', 'Условия труда', 'Обучение'],
|
||||
datasets: [{
|
||||
data: [52, 44, 38, 31, 27, 24, 20, 17],
|
||||
backgroundColor: colors.sky, borderRadius: 6, borderSkipped: false
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: true, max: 65, ticks: { callback: function(v) { return v + '%'; } }, grid: { color: '#f2f4f7' } },
|
||||
x: { ticks: { font: { size: 10 }, maxRotation: 45, minRotation: 45 }, grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Nav active ----
|
||||
(function() {
|
||||
var sections = document.querySelectorAll('section[id]');
|
||||
var links = document.querySelectorAll('.nav-links a');
|
||||
window.addEventListener('scroll', function() {
|
||||
var scrollY = window.pageYOffset + 100;
|
||||
var current = '';
|
||||
sections.forEach(function(s) {
|
||||
if (scrollY >= s.offsetTop) current = s.getAttribute('id');
|
||||
});
|
||||
links.forEach(function(l) {
|
||||
l.classList.remove('active');
|
||||
if (l.getAttribute('href') === '#' + current) l.classList.add('active');
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
// ---- Form ----
|
||||
var form = document.getElementById('surveyForm');
|
||||
var toast = document.getElementById('toast');
|
||||
var submitBtn = document.getElementById('submitBtn');
|
||||
|
||||
var requiredFields = ['company','region','age','tenure','position','income','format','salary_ok','bonus_fair','overtime','career','info','change_job','nps'];
|
||||
|
||||
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 missing = null;
|
||||
for (var i = 0; i < requiredFields.length; i++) {
|
||||
if (!form.querySelector('input[name="' + requiredFields[i] + '"]:checked')) { missing = requiredFields[i]; break; }
|
||||
}
|
||||
if (missing) {
|
||||
showToast('Ответьте на все обязательные вопросы (помечены *)', true);
|
||||
form.querySelector('input[name="' + missing + '"]').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>
|
||||
Loading…
Reference in New Issue
Block a user