Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a6c76433a2 |
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
||||
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||
# Vibe42 — учебная песочница для лендингов
|
||||
|
||||
Workspace юзера `samal_iskakova`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 ТВОЯ РОЛЬ
|
||||
|
||||
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/samal_iskakova/<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/samal_iskakova/<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/samal_iskakova`)** — это папка-контейнер юзера, не репозиторий.
|
||||
|
||||
---
|
||||
|
||||
## ✅ ВСЕГДА работай через `./new-project`
|
||||
|
||||
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
|
||||
|
||||
```bash
|
||||
cd /workspaces/samal_iskakova
|
||||
./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/samal_iskakova
|
||||
- Pages (живые лендинги): https://pages.git.vibe42.kz/samal_iskakova/<repo>/
|
||||
- Креды уже в `/workspaces/samal_iskakova/.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
|
||||
270
index.html
Normal file
270
index.html
Normal file
@ -0,0 +1,270 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>AI Аналитика — Английский язык</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="container header-inner">
|
||||
<div class="logo">📊 AI Analytics</div>
|
||||
<nav class="nav">
|
||||
<a href="#overview" class="nav-link active">Обзор</a>
|
||||
<a href="#groups" class="nav-link">Группы</a>
|
||||
<a href="#students" class="nav-link">Студенты</a>
|
||||
</nav>
|
||||
<div class="badge">Q2 2026</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<section id="overview" class="kpi-grid">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon">📋</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-value">87%</div>
|
||||
<div class="kpi-label">Посещаемость</div>
|
||||
<div class="kpi-trend up">↑ +3% к прошлому мес.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon">📝</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-value">72 из 100</div>
|
||||
<div class="kpi-label">Средний балл тестов</div>
|
||||
<div class="kpi-trend up">↑ +5 баллов</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon">📈</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-value">+18%</div>
|
||||
<div class="kpi-label">Прогресс за квартал</div>
|
||||
<div class="kpi-trend up">↑ стабильный рост</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card danger">
|
||||
<div class="kpi-icon">⚠️</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-value">4</div>
|
||||
<div class="kpi-label">Риски отсева</div>
|
||||
<div class="kpi-trend down">↓ 2 студента в зоне риска</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Charts Row -->
|
||||
<section class="charts-row">
|
||||
<div class="chart-card">
|
||||
<h3>Посещаемость по месяцам</h3>
|
||||
<canvas id="attendanceChart"></canvas>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h3>Динамика тестовых баллов</h3>
|
||||
<canvas id="scoresChart"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Groups Table -->
|
||||
<section id="groups" class="section">
|
||||
<h2>Группы</h2>
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Группа</th>
|
||||
<th>Студентов</th>
|
||||
<th>Посещаемость</th>
|
||||
<th>Ср. балл</th>
|
||||
<th>Прогресс</th>
|
||||
<th>Риск отсева</th>
|
||||
<th>AI-рекомендация</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Английский A1-1</strong></td>
|
||||
<td>12</td>
|
||||
<td><span class="tag green">92%</span></td>
|
||||
<td>78</td>
|
||||
<td><div class="progress-bar"><div class="fill" style="width:78%"></div></div></td>
|
||||
<td><span class="tag green">Низкий</span></td>
|
||||
<td class="ai-rec">Продолжать текущий темп</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Английский A1-2</strong></td>
|
||||
<td>10</td>
|
||||
<td><span class="tag yellow">76%</span></td>
|
||||
<td>64</td>
|
||||
<td><div class="progress-bar"><div class="fill warn" style="width:64%"></div></div></td>
|
||||
<td><span class="tag yellow">Средний</span></td>
|
||||
<td class="ai-rec">Доп. задания для отстающих, парные занятия</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Английский B1-1</strong></td>
|
||||
<td>15</td>
|
||||
<td><span class="tag green">89%</span></td>
|
||||
<td>81</td>
|
||||
<td><div class="progress-bar"><div class="fill" style="width:81%"></div></div></td>
|
||||
<td><span class="tag green">Низкий</span></td>
|
||||
<td class="ai-rec">Готовы к переходу на B2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Английский B1-2</strong></td>
|
||||
<td>8</td>
|
||||
<td><span class="tag red">61%</span></td>
|
||||
<td>52</td>
|
||||
<td><div class="progress-bar"><div class="fill danger" style="width:52%"></div></div></td>
|
||||
<td><span class="tag red">Высокий</span></td>
|
||||
<td class="ai-rec">Срочно: индивидуальные встречи, мотивационные сообщения</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Students at Risk -->
|
||||
<section class="section">
|
||||
<h2>Студенты в зоне риска</h2>
|
||||
<div class="risk-grid">
|
||||
<div class="risk-card">
|
||||
<div class="risk-avatar">А</div>
|
||||
<div class="risk-info">
|
||||
<div class="risk-name">Абдуллаев Н.</div>
|
||||
<div class="risk-group">B1-2 · Посещаемость 48%</div>
|
||||
<div class="risk-reason">Не посещал 3 занятия подряд. Балл тестов упал с 65 до 38.</div>
|
||||
<div class="risk-action">
|
||||
<strong>AI:</strong> Написать в мессенджер, предложить补课, связаться с руководителем
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-card">
|
||||
<div class="risk-avatar">К</div>
|
||||
<div class="risk-info">
|
||||
<div class="risk-name">Ким А.</div>
|
||||
<div class="risk-group">A1-2 · Посещаемость 55%</div>
|
||||
<div class="risk-reason">Пропустил 4 из 8 занятий. Не сдавал тесты.</div>
|
||||
<div class="risk-action">
|
||||
<strong>AI:</strong> Личная встреча, выяснить причины, предложить гибкий график
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-card">
|
||||
<div class="risk-avatar">М</div>
|
||||
<div class="risk-info">
|
||||
<div class="risk-name">Молдагалиева Д.</div>
|
||||
<div class="risk-group">B1-2 · Посещаемость 68%</div>
|
||||
<div class="risk-reason">Посещает, но баллы ниже 50. Возможна перегрузка на работе.</div>
|
||||
<div class="risk-action">
|
||||
<strong>AI:</strong> Предложить вечернюю группу, упрощённые задания на первое время
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-card">
|
||||
<div class="risk-avatar">С</div>
|
||||
<div class="risk-info">
|
||||
<div class="risk-name">Сатпаев Е.</div>
|
||||
<div class="risk-group">A1-2 · Посещаемость 62%</div>
|
||||
<div class="risk-reason">Стабильно низкая мотивация, не выполняет домашние задания.</div>
|
||||
<div class="risk-action">
|
||||
<strong>AI:</strong> Gamification — предложить челлендж, бейджи за посещение
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Employee Progress -->
|
||||
<section id="students" class="section">
|
||||
<h2>Прогресс сотрудников (топ-10)</h2>
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Сотрудник</th>
|
||||
<th>Группа</th>
|
||||
<th>Уровень</th>
|
||||
<th>Баллы</th>
|
||||
<th>Прогресс</th>
|
||||
<th>Статус</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Иванов П.</td>
|
||||
<td>B1-1</td>
|
||||
<td>B1</td>
|
||||
<td>92</td>
|
||||
<td><div class="progress-bar"><div class="fill" style="width:92%"></div></div></td>
|
||||
<td><span class="tag green">Отлично</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Петрова М.</td>
|
||||
<td>B1-1</td>
|
||||
<td>B1</td>
|
||||
<td>87</td>
|
||||
<td><div class="progress-bar"><div class="fill" style="width:87%"></div></div></td>
|
||||
<td><span class="tag green">Отлично</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Нурланов К.</td>
|
||||
<td>A1-1</td>
|
||||
<td>A2</td>
|
||||
<td>84</td>
|
||||
<td><div class="progress-bar"><div class="fill" style="width:84%"></div></div></td>
|
||||
<td><span class="tag green">Хорошо</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Смирнова О.</td>
|
||||
<td>B1-1</td>
|
||||
<td>B1</td>
|
||||
<td>81</td>
|
||||
<td><div class="progress-bar"><div class="fill" style="width:81%"></div></div></td>
|
||||
<td><span class="tag green">Хорошо</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Турсунов А.</td>
|
||||
<td>A1-1</td>
|
||||
<td>A1</td>
|
||||
<td>75</td>
|
||||
<td><div class="progress-bar"><div class="fill" style="width:75%"></div></div></td>
|
||||
<td><span class="tag yellow">Норма</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ким А.</td>
|
||||
<td>A1-2</td>
|
||||
<td>A1</td>
|
||||
<td>58</td>
|
||||
<td><div class="progress-bar"><div class="fill warn" style="width:58%"></div></div></td>
|
||||
<td><span class="tag red">Риск</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Абдуллаев Н.</td>
|
||||
<td>B1-2</td>
|
||||
<td>A2</td>
|
||||
<td>42</td>
|
||||
<td><div class="progress-bar"><div class="fill danger" style="width:42%"></div></div></td>
|
||||
<td><span class="tag red">Риск</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>AI Analytics · English Training · 2026</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
135
script.js
Normal file
135
script.js
Normal file
@ -0,0 +1,135 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const months = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн'];
|
||||
|
||||
// Attendance Chart
|
||||
const attCtx = document.getElementById('attendanceChart').getContext('2d');
|
||||
new Chart(attCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: months,
|
||||
datasets: [
|
||||
{
|
||||
label: 'A1-1',
|
||||
data: [88, 90, 85, 91, 93, 92],
|
||||
backgroundColor: '#00E5FF',
|
||||
borderRadius: 6,
|
||||
barPercentage: 0.7
|
||||
},
|
||||
{
|
||||
label: 'A1-2',
|
||||
data: [82, 78, 75, 70, 74, 76],
|
||||
backgroundColor: '#EAB308',
|
||||
borderRadius: 6,
|
||||
barPercentage: 0.7
|
||||
},
|
||||
{
|
||||
label: 'B1-1',
|
||||
data: [85, 87, 90, 88, 91, 89],
|
||||
backgroundColor: '#22C55E',
|
||||
borderRadius: 6,
|
||||
barPercentage: 0.7
|
||||
},
|
||||
{
|
||||
label: 'B1-2',
|
||||
data: [80, 75, 70, 65, 63, 61],
|
||||
backgroundColor: '#EF4444',
|
||||
borderRadius: 6,
|
||||
barPercentage: 0.7
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true } }
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
min: 40,
|
||||
max: 100,
|
||||
ticks: { callback: v => v + '%' },
|
||||
grid: { color: '#F2F4F7' }
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Scores Chart
|
||||
const scoresCtx = document.getElementById('scoresChart').getContext('2d');
|
||||
new Chart(scoresCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: months,
|
||||
datasets: [
|
||||
{
|
||||
label: 'A1-1',
|
||||
data: [68, 70, 72, 74, 76, 78],
|
||||
borderColor: '#00E5FF',
|
||||
backgroundColor: 'rgba(0,229,255,.1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 4
|
||||
},
|
||||
{
|
||||
label: 'A1-2',
|
||||
data: [62, 60, 58, 61, 63, 64],
|
||||
borderColor: '#EAB308',
|
||||
backgroundColor: 'rgba(234,179,8,.1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 4
|
||||
},
|
||||
{
|
||||
label: 'B1-1',
|
||||
data: [72, 74, 76, 78, 80, 81],
|
||||
borderColor: '#22C55E',
|
||||
backgroundColor: 'rgba(34,197,94,.1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 4
|
||||
},
|
||||
{
|
||||
label: 'B1-2',
|
||||
data: [60, 56, 54, 50, 48, 52],
|
||||
borderColor: '#EF4444',
|
||||
backgroundColor: 'rgba(239,68,68,.1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true } }
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
min: 30,
|
||||
max: 100,
|
||||
grid: { color: '#F2F4F7' }
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth scroll for nav links
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
227
style.css
Normal file
227
style.css
Normal file
@ -0,0 +1,227 @@
|
||||
:root {
|
||||
--ink: #0F1218;
|
||||
--cyan: #00E5FF;
|
||||
--cyan-50: #E8FCFF;
|
||||
--white: #FFFFFF;
|
||||
--gray-500: #5B6573;
|
||||
--gray-100: #F2F4F7;
|
||||
--green: #22C55E;
|
||||
--yellow: #EAB308;
|
||||
--red: #EF4444;
|
||||
--green-bg: #DCFCE7;
|
||||
--yellow-bg: #FEF9C3;
|
||||
--red-bg: #FEE2E2;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||||
color: var(--ink);
|
||||
background: var(--gray-100);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: var(--ink);
|
||||
color: var(--white);
|
||||
padding: 16px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.header-inner { display: flex; align-items: center; gap: 32px; }
|
||||
.logo { font-size: 20px; font-weight: 800; white-space: nowrap; }
|
||||
.nav { display: flex; gap: 8px; }
|
||||
.nav-link {
|
||||
color: #9aa3b2;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all .2s;
|
||||
}
|
||||
.nav-link:hover, .nav-link.active { color: var(--white); background: rgba(255,255,255,.1); }
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
background: var(--cyan);
|
||||
color: var(--ink);
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* KPI Grid */
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
.kpi-card {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.kpi-card:hover { border-color: var(--cyan); }
|
||||
.kpi-card.danger { border-color: var(--red-bg); }
|
||||
.kpi-icon { font-size: 32px; }
|
||||
.kpi-value { font-size: 32px; font-weight: 800; line-height: 1.1; }
|
||||
.kpi-label { color: var(--gray-500); font-size: 14px; margin-top: 4px; }
|
||||
.kpi-trend { font-size: 13px; margin-top: 8px; font-weight: 500; }
|
||||
.kpi-trend.up { color: var(--green); }
|
||||
.kpi-trend.down { color: var(--red); }
|
||||
|
||||
/* Charts */
|
||||
.charts-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.chart-card {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
.chart-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 16px; }
|
||||
|
||||
/* Sections */
|
||||
.section { margin-bottom: 40px; }
|
||||
.section h2 { font-size: 28px; font-weight: 700; margin-bottom: 20px; }
|
||||
|
||||
/* Table */
|
||||
.table-wrap {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.table th {
|
||||
text-align: left;
|
||||
padding: 14px 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-500);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .5px;
|
||||
background: var(--gray-100);
|
||||
}
|
||||
.table td {
|
||||
padding: 14px 20px;
|
||||
border-top: 1px solid var(--gray-100);
|
||||
font-size: 14px;
|
||||
}
|
||||
.table tr:hover td { background: var(--cyan-50); }
|
||||
|
||||
/* Tags */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tag.green { background: var(--green-bg); color: #15803D; }
|
||||
.tag.yellow { background: var(--yellow-bg); color: #A16207; }
|
||||
.tag.red { background: var(--red-bg); color: #DC2626; }
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--gray-100);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar .fill {
|
||||
height: 100%;
|
||||
background: var(--green);
|
||||
border-radius: 4px;
|
||||
transition: width .6s ease;
|
||||
}
|
||||
.progress-bar .fill.warn { background: var(--yellow); }
|
||||
.progress-bar .fill.danger { background: var(--red); }
|
||||
|
||||
/* AI Recommendation */
|
||||
.ai-rec {
|
||||
font-style: italic;
|
||||
color: var(--gray-500);
|
||||
max-width: 260px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Risk Grid */
|
||||
.risk-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.risk-card {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
border-left: 4px solid var(--red);
|
||||
}
|
||||
.risk-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--red-bg);
|
||||
color: var(--red);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.risk-name { font-weight: 700; font-size: 16px; }
|
||||
.risk-group { color: var(--gray-500); font-size: 13px; margin-top: 2px; }
|
||||
.risk-reason { margin-top: 8px; font-size: 14px; color: #374151; }
|
||||
.risk-action {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
background: var(--cyan-50);
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 32px 0;
|
||||
color: var(--gray-500);
|
||||
font-size: 14px;
|
||||
border-top: 1px solid var(--gray-100);
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.charts-row { grid-template-columns: 1fr; }
|
||||
.risk-grid { grid-template-columns: 1fr; }
|
||||
.table-wrap { overflow-x: auto; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.kpi-grid { grid-template-columns: 1fr; }
|
||||
.header-inner { flex-wrap: wrap; gap: 12px; }
|
||||
.nav { order: 3; width: 100%; }
|
||||
.badge { margin-left: 0; }
|
||||
.section h2 { font-size: 22px; }
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user