Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c1ff23caa6 | |||
| 2680a7fa62 | |||
| 9eed700fd5 | |||
| 47866734e5 |
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||||
|
# Vibe42 — учебная песочница для лендингов
|
||||||
|
|
||||||
|
Workspace юзера `azhar_ankibayeva`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 ТВОЯ РОЛЬ
|
||||||
|
|
||||||
|
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||||
|
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/azhar_ankibayeva/<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/azhar_ankibayeva/<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/azhar_ankibayeva`)** — это папка-контейнер юзера, не репозиторий.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ВСЕГДА работай через `./new-project`
|
||||||
|
|
||||||
|
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /workspaces/azhar_ankibayeva
|
||||||
|
./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/azhar_ankibayeva
|
||||||
|
- Pages (живые лендинги): https://pages.git.vibe42.kz/azhar_ankibayeva/<repo>/
|
||||||
|
- Креды уже в `/workspaces/azhar_ankibayeva/.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
|
||||||
366
index.html
Normal file
366
index.html
Normal file
@ -0,0 +1,366 @@
|
|||||||
|
<!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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<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}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||||||
|
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-100)}
|
||||||
|
.header .container{padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
|
||||||
|
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;text-decoration:none;color:var(--ink)}
|
||||||
|
.logo-icon{width:36px;height:36px;background:var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:20px}
|
||||||
|
.nav{display:flex;gap:24px;align-items:center}
|
||||||
|
.nav a{text-decoration:none;color:var(--gray-500);font-size:15px;font-weight:500;transition:color .2s}
|
||||||
|
.nav a:hover{color:var(--ink)}
|
||||||
|
.nav .nav-highlight{color:var(--ink);font-weight:600}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero{background:linear-gradient(135deg,#0F1218 0%,#1a1f2e 100%);position:relative;overflow:hidden}
|
||||||
|
.hero::before{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{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:70vh}
|
||||||
|
.hero-content{position:relative;z-index:1}
|
||||||
|
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,229,255,.12);color:var(--cyan);padding:8px 16px;border-radius:100px;font-size:14px;font-weight:600;margin-bottom:24px}
|
||||||
|
.hero h1{font-size:52px;font-weight:800;line-height:1.08;color:var(--white);margin-bottom:20px}
|
||||||
|
.hero h1 span{color:var(--cyan)}
|
||||||
|
.hero p{font-size:19px;color:#9aa3b2;max-width:520px;margin-bottom:36px;line-height:1.6}
|
||||||
|
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
|
||||||
|
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:var(--ink);padding:16px 32px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;transition:all .2s}
|
||||||
|
.btn-primary:hover{background:#1be5ff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,229,255,.3)}
|
||||||
|
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.2);padding:14px 30px;border-radius:10px;font-weight:600;font-size:16px;text-decoration:none;transition:all .2s}
|
||||||
|
.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
|
||||||
|
.hero-visual{position:relative;z-index:1;display:flex;justify-content:center}
|
||||||
|
.chat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px;width:100%;max-width:420px;backdrop-filter:blur(8px)}
|
||||||
|
.chat-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
|
||||||
|
.chat-avatar{width:40px;height:40px;background:var(--cyan);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink)}
|
||||||
|
.chat-name{font-weight:600;color:var(--white);font-size:15px}
|
||||||
|
.chat-status{font-size:13px;color:#6b7280;display:flex;align-items:center;gap:6px}
|
||||||
|
.chat-status::before{content:'';width:6px;height:6px;background:#22c55e;border-radius:50%;display:inline-block}
|
||||||
|
.chat-msg{background:rgba(255,255,255,.08);border-radius:12px 12px 12px 4px;padding:14px 18px;margin-bottom:12px;color:#d1d5db;font-size:15px;line-height:1.5}
|
||||||
|
.chat-msg b{color:var(--cyan)}
|
||||||
|
.chat-msg.user{background:var(--cyan);color:var(--ink);border-radius:12px 12px 4px 12px;margin-left:auto;max-width:85%;font-weight:500}
|
||||||
|
.chat-input{display:flex;gap:8px;margin-top:6px}
|
||||||
|
.chat-input input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 16px;color:var(--white);font-size:14px;outline:none}
|
||||||
|
.chat-input input::placeholder{color:#6b7280}
|
||||||
|
.chat-input input:focus{border-color:var(--cyan)}
|
||||||
|
.chat-input button{background:var(--cyan);border:none;border-radius:10px;padding:12px 16px;cursor:pointer;color:var(--ink);font-size:18px;transition:background .2s}
|
||||||
|
.chat-input button:hover{background:#1be5ff}
|
||||||
|
|
||||||
|
/* Sections common */
|
||||||
|
.section{padding:80px 0}
|
||||||
|
.section-label{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--cyan);margin-bottom:12px}
|
||||||
|
.section h2{font-size:36px;font-weight:700;margin-bottom:16px;line-height:1.15}
|
||||||
|
.section-sub{font-size:18px;color:var(--gray-500);max-width:640px;margin-bottom:48px;line-height:1.5}
|
||||||
|
|
||||||
|
/* Rules grid */
|
||||||
|
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
|
||||||
|
.rule-card{background:var(--white);border:1px solid var(--gray-100);border-radius:16px;padding:32px;transition:all .3s;position:relative}
|
||||||
|
.rule-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.06);transform:translateY(-4px);border-color:var(--cyan-50)}
|
||||||
|
.rule-card.modified{border-left:4px solid #f59e0b}
|
||||||
|
.rule-card.added{border-left:4px solid #22c55e}
|
||||||
|
.rule-icon{font-size:32px;margin-bottom:16px}
|
||||||
|
.rule-card h3{font-size:20px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
||||||
|
.rule-card p{font-size:15px;color:var(--gray-500);line-height:1.6}
|
||||||
|
.rule-tag{display:inline-block;margin-top:16px;font-size:13px;font-weight:600;color:var(--cyan);background:var(--cyan-50);padding:4px 12px;border-radius:100px}
|
||||||
|
.rule-chip{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 10px;border-radius:100px}
|
||||||
|
.rule-chip.modified{background:#fef3c7;color:#92400e}
|
||||||
|
.rule-chip.added{background:#dcfce7;color:#166534}
|
||||||
|
.version-badge{font-size:13px;color:var(--gray-500);background:var(--gray-100);padding:6px 14px;border-radius:100px;font-weight:500}
|
||||||
|
|
||||||
|
/* Version archive */
|
||||||
|
.version-archive{margin-top:48px;border:1px solid var(--gray-100);border-radius:12px;overflow:hidden}
|
||||||
|
.version-archive-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;cursor:pointer;font-size:15px;font-weight:600;background:var(--gray-100);transition:background .2s}
|
||||||
|
.version-archive-header:hover{background:#e5e7eb}
|
||||||
|
.version-arrow{font-size:12px;transition:transform .3s}
|
||||||
|
.version-archive.open .version-arrow{transform:rotate(180deg)}
|
||||||
|
.version-archive-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
|
||||||
|
.version-archive.open .version-archive-body{max-height:400px}
|
||||||
|
.version-row{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--gray-100);font-size:14px}
|
||||||
|
.version-row:last-child{border-bottom:none}
|
||||||
|
.version-row.current{background:var(--cyan-50)}
|
||||||
|
.version-num{font-weight:700;color:var(--ink);white-space:nowrap;min-width:40px}
|
||||||
|
.version-date{color:var(--gray-500);white-space:nowrap;min-width:110px;font-size:13px}
|
||||||
|
.version-desc{color:var(--gray-500);font-size:13px}
|
||||||
|
|
||||||
|
/* Steps */
|
||||||
|
.steps{background:var(--gray-100)}
|
||||||
|
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
|
||||||
|
.step{text-align:center;padding:24px}
|
||||||
|
.step-num{width:48px;height:48px;background:var(--ink);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin:0 auto 16px}
|
||||||
|
.step h3{font-size:18px;font-weight:700;margin-bottom:8px}
|
||||||
|
.step p{font-size:15px;color:var(--gray-500);line-height:1.5}
|
||||||
|
|
||||||
|
/* FAQ */
|
||||||
|
.faq-list{max-width:760px;margin:0 auto}
|
||||||
|
.faq-item{border-bottom:1px solid var(--gray-100);padding:20px 0}
|
||||||
|
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:17px;font-weight:600;gap:16px}
|
||||||
|
.faq-q::after{content:'+';font-size:22px;color:var(--gray-500);transition:transform .3s;flex-shrink:0}
|
||||||
|
.faq-item.open .faq-q::after{content:'−'}
|
||||||
|
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:15px;color:var(--gray-500);line-height:1.6}
|
||||||
|
.faq-item.open .faq-a{max-height:300px;padding-top:12px}
|
||||||
|
|
||||||
|
/* CTA */
|
||||||
|
.cta{background:var(--ink);text-align:center}
|
||||||
|
.cta h2{color:var(--white)}
|
||||||
|
.cta .section-sub{color:#9aa3b2;margin-left:auto;margin-right:auto}
|
||||||
|
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer{background:var(--gray-100);text-align:center;padding:32px 24px;font-size:14px;color:var(--gray-500)}
|
||||||
|
.counter{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;color:var(--gray-500)}
|
||||||
|
|
||||||
|
@media (max-width:900px){
|
||||||
|
.hero .container{grid-template-columns:1fr;gap:40px;padding:60px 24px}
|
||||||
|
.hero h1{font-size:36px}
|
||||||
|
.chat-card{max-width:100%}
|
||||||
|
.container{padding:48px 24px}
|
||||||
|
.section{padding:48px 0}
|
||||||
|
.section h2{font-size:28px}
|
||||||
|
.rules-grid{grid-template-columns:1fr}
|
||||||
|
.steps-grid{grid-template-columns:1fr 1fr}
|
||||||
|
.nav{display:none}
|
||||||
|
}
|
||||||
|
@media (max-width:480px){
|
||||||
|
.steps-grid{grid-template-columns:1fr}
|
||||||
|
.hero-buttons{flex-direction:column}
|
||||||
|
.hero-buttons .btn-primary,.hero-buttons .btn-secondary{width:100%;justify-content:center}
|
||||||
|
.cta-buttons{flex-direction:column}
|
||||||
|
.cta-buttons .btn-primary,.cta-buttons .btn-secondary{width:100%;justify-content:center}
|
||||||
|
}
|
||||||
|
/* Yandex.Metrica — замени ID на свой */
|
||||||
|
</style>
|
||||||
|
<!-- Yandex.Metrica -->
|
||||||
|
<script>(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();for(var j=0;j<document.scripts.length;j++){if(document.scripts[j].src===r)return;}k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window,document,"script","https://mc.yandex.ru/metrika/tag.js","ym");ym(XXXXXXXX,"init",{clickmap:true,trackLinks:true,accurateTrackBounce:true});</script>
|
||||||
|
<noscript><div><img src="https://mc.yandex.ru/watch/XXXXXXXX" style="position:absolute;left:-9999px" alt=""></div></noscript>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="container">
|
||||||
|
<a href="#" class="logo">
|
||||||
|
<div class="logo-icon">✦</div>
|
||||||
|
AssistHR
|
||||||
|
</a>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="#rules">Правила</a>
|
||||||
|
<a href="#how">Как это работает</a>
|
||||||
|
<a href="#faq">FAQ</a>
|
||||||
|
<a href="https://wa.me/77777777777" style="color:var(--ink);font-weight:600">Связаться</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-badge">⚡ ИИ-ассистент</div>
|
||||||
|
<h1>Правила обучения<br>и развития <span>в Компании</span></h1>
|
||||||
|
<p>Виртуальный помощник поможет разобраться в правилах, программах обучения и карьерного роста — быстро, понятно, без лишних звонков в HR.</p>
|
||||||
|
<div class="hero-buttons">
|
||||||
|
<a href="#rules" class="btn-primary">📋 Смотреть правила</a>
|
||||||
|
<a href="#faq" class="btn-secondary">❓ Частые вопросы</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-visual">
|
||||||
|
<div class="chat-card">
|
||||||
|
<div class="chat-header">
|
||||||
|
<div class="chat-avatar">✦</div>
|
||||||
|
<div>
|
||||||
|
<div class="chat-name">ИИ-помощник</div>
|
||||||
|
<div class="chat-status">онлайн</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">👋 Привет! Я помогу с правилами обучения. Что вас интересует?</div>
|
||||||
|
<div class="chat-msg user">Какие курсы можно пройти за счёт компании?</div>
|
||||||
|
<div class="chat-msg">Компания оплачивает:<br>— <b>профильные курсы</b> (до 200 000 ₸/год)<br>— <b>сертификации</b> (полностью)<br>— <b>конференции</b> (2 раза в год)<br><br>Подробнее — в разделе «Правила» 👇</div>
|
||||||
|
<div class="chat-input">
|
||||||
|
<input type="text" placeholder="Задай вопрос..." disabled>
|
||||||
|
<button disabled>➤</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="rules" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label">Правила • Версия 2.1</div>
|
||||||
|
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px">
|
||||||
|
<h2 style="margin-bottom:0">Что покрывает программа обучения</h2>
|
||||||
|
<span class="version-badge">актуально на 15 июня 2026</span>
|
||||||
|
</div>
|
||||||
|
<p class="section-sub">Все сотрудники могут развиваться за счёт компании. Правила регулярно обновляются — следите за версиями.</p>
|
||||||
|
<div class="rules-grid">
|
||||||
|
<div class="rule-card modified">
|
||||||
|
<div class="rule-icon">📚</div>
|
||||||
|
<h3>Профессиональные курсы <span class="rule-chip modified">изменено</span></h3>
|
||||||
|
<p>Компания компенсирует до 200 000 ₸ в год на профильные онлайн-курсы, тренинги и мастер-классы. <strong>Добавлены курсы по Soft Skills</strong> — до 150 000 ₸/год дополнительно.</p>
|
||||||
|
<span class="rule-tag">до 350 000 ₸/год</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-card modified">
|
||||||
|
<div class="rule-icon">🎓</div>
|
||||||
|
<h3>Сертификация <span class="rule-chip modified">изменено</span></h3>
|
||||||
|
<p>Подготовка и сдача профессиональных экзаменов (PMP, AWS, CFA и др.) оплачиваются полностью при одобрении руководителя. <strong>Пересдача — одна за счёт компании.</strong></p>
|
||||||
|
<span class="rule-tag">100% оплата</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-card modified">
|
||||||
|
<div class="rule-icon">🗣️</div>
|
||||||
|
<h3>Конференции и митапы <span class="rule-chip modified">изменено</span></h3>
|
||||||
|
<p>Участие в профильных конференциях <strong>до 2 раз в год</strong> (было 1). Включает билеты, дорогу и проживание. Бюджет — до 300 000 ₸.</p>
|
||||||
|
<span class="rule-tag">до 2 раз/год</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-card">
|
||||||
|
<div class="rule-icon">🌐</div>
|
||||||
|
<h3>Иностранные языки</h3>
|
||||||
|
<p>Курсы английского и других языков — до 100 000 ₸ в год с уровнем не ниже Intermediate.</p>
|
||||||
|
<span class="rule-tag">до 100 000 ₸/год</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-card">
|
||||||
|
<div class="rule-icon">📖</div>
|
||||||
|
<h3>Корпоративная библиотека</h3>
|
||||||
|
<p>Доступ к подпискам на профессиональную литературу (O'Reilly, Bookmate, ЛитРес) для всех сотрудников.</p>
|
||||||
|
<span class="rule-tag">бесплатно</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-card added">
|
||||||
|
<div class="rule-icon">🧭</div>
|
||||||
|
<h3>Менторинг-программа <span class="rule-chip added">новое</span></h3>
|
||||||
|
<p>Каждый сотрудник может получить ментора из числа senior-специалистов на 3 месяца. Запись через HR-портал.</p>
|
||||||
|
<span class="rule-tag">по запросу</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="version-archive">
|
||||||
|
<div class="version-archive-header" onclick="this.parentElement.classList.toggle('open')">
|
||||||
|
<span>📦 Архив версий</span>
|
||||||
|
<span class="version-arrow">▼</span>
|
||||||
|
</div>
|
||||||
|
<div class="version-archive-body">
|
||||||
|
<div class="version-row current">
|
||||||
|
<span class="version-num">v2.1</span>
|
||||||
|
<span class="version-date">15 июня 2026</span>
|
||||||
|
<span class="version-desc">Добавлены курсы Soft Skills, увеличен лимит конференций до 2, уточнены условия сертификации</span>
|
||||||
|
</div>
|
||||||
|
<div class="version-row">
|
||||||
|
<span class="version-num">v2.0</span>
|
||||||
|
<span class="version-date">1 апреля 2026</span>
|
||||||
|
<span class="version-desc">Бюджет на курсы повышен до 200 000 ₸, запущена менторинг-программа</span>
|
||||||
|
</div>
|
||||||
|
<div class="version-row">
|
||||||
|
<span class="version-num">v1.0</span>
|
||||||
|
<span class="version-date">1 января 2026</span>
|
||||||
|
<span class="version-desc">Первая версия Правил обучения и развития</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="how" class="section steps">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label">Процесс</div>
|
||||||
|
<h2>Как получить обучение</h2>
|
||||||
|
<p class="section-sub">Всё просто: 3 шага до одобрения заявки.</p>
|
||||||
|
<div class="steps-grid">
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">1</div>
|
||||||
|
<h3>Выбери программу</h3>
|
||||||
|
<p>Найди курс, сертификацию или конференцию по своему профилю.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">2</div>
|
||||||
|
<h3>Согласуй с руководителем</h3>
|
||||||
|
<p>Обсуди с тимлидом — он подтвердит, что обучение соответствует задачам отдела.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">3</div>
|
||||||
|
<h3>Отправь заявку в HR</h3>
|
||||||
|
<p>Заполни форму в корпоративном портале. Ответ — до 3 рабочих дней.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="faq" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label">FAQ</div>
|
||||||
|
<h2>Частые вопросы</h2>
|
||||||
|
<p class="section-sub">Ответы на то, что обычно спрашивают сотрудники.</p>
|
||||||
|
<div class="faq-list">
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-q">Можно ли учиться в рабочее время?</div>
|
||||||
|
<div class="faq-a">Да, если обучение согласовано с руководителем. Рекомендуется выделять до 4 часов в неделю. Для курсов с фиксированным расписанием — возможен гибкий график.</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-q">Что будет, если я не сдам сертификацию?</div>
|
||||||
|
<div class="faq-a">Компания оплачивает одну пересдачу. Если не сдаёте со второго раза — пересдача за ваш счёт, но компания может частично компенсировать при хорошей успеваемости.</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-q">Нужно ли отрабатывать после обучения?</div>
|
||||||
|
<div class="faq-a">Для курсов дороже 100 000 ₸ — да, нужно отработать 6 месяцев после завершения. Если увольняетесь раньше — сумма пропорционально возвращается.</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-q">Можно ли выбрать курс на иностранной платформе (Coursera, Udemy)?</div>
|
||||||
|
<div class="faq-a">Да, если курс профильный и на английском/другом языке, которым вы владеете. Заявка рассматривается стандартно — через руководителя и HR.</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-q">Как часто можно подавать заявки?</div>
|
||||||
|
<div class="faq-a">Ограничений по количеству нет, но суммарно в год — не более утверждённого бюджета для вашей должности. Рекомендуется 1-2 крупные заявки в год.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section cta">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label" style="color:var(--cyan)">Остались вопросы?</div>
|
||||||
|
<h2>Спроси ИИ-ассистента</h2>
|
||||||
|
<p class="section-sub">Напиши в Telegram или WhatsApp — получишь ответ за секунду.</p>
|
||||||
|
<div class="cta-buttons">
|
||||||
|
<a href="https://t.me/assisthr_bot" class="btn-primary">✈️ Написать в Telegram</a>
|
||||||
|
<a href="https://wa.me/77777777777" class="btn-secondary" style="border-color:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3)">💬 Написать в WhatsApp</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<p>© 2026 AssistHR — виртуальный помощник по обучению и развитию</p>
|
||||||
|
<span class="counter">👁️ Просмотров: <span id="viewCount">...</span></span>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll('.faq-q').forEach(q => {
|
||||||
|
q.addEventListener('click', () => {
|
||||||
|
q.parentElement.classList.toggle('open')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
;(async () => {
|
||||||
|
try {
|
||||||
|
const key = 'assisthr_training_rules'
|
||||||
|
let count = localStorage.getItem(key)
|
||||||
|
if (!count) {
|
||||||
|
const r = await fetch('https://api.countapi.xyz/hit/vibe42/training-rules')
|
||||||
|
const d = await r.json()
|
||||||
|
count = d.value
|
||||||
|
} else {
|
||||||
|
const r = await fetch('https://api.countapi.xyz/get/vibe42/training-rules')
|
||||||
|
const d = await r.json()
|
||||||
|
count = d.value
|
||||||
|
}
|
||||||
|
document.getElementById('viewCount').textContent = count.toLocaleString()
|
||||||
|
} catch {
|
||||||
|
document.getElementById('viewCount').textContent = '—'
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user