Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| af97758c0c | |||
| f065e408c7 | |||
| 220ad2fcdd | |||
| b3a1ac900a | |||
| 7102e17912 | |||
| e565872b3a | |||
| 68dfad3565 | |||
| 3c76e33739 | |||
| cad96a0dcd | |||
| 28c20eda62 | |||
| 93ce22780f | |||
| 3de696a092 | |||
| 4942cdceb2 |
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||||
|
# Vibe42 — учебная песочница для лендингов
|
||||||
|
|
||||||
|
Workspace юзера `Alina_mussina`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 ТВОЯ РОЛЬ
|
||||||
|
|
||||||
|
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||||
|
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/Alina_mussina/<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/Alina_mussina/<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/Alina_mussina`)** — это папка-контейнер юзера, не репозиторий.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ВСЕГДА работай через `./new-project`
|
||||||
|
|
||||||
|
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /workspaces/Alina_mussina
|
||||||
|
./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/Alina_mussina
|
||||||
|
- Pages (живые лендинги): https://pages.git.vibe42.kz/Alina_mussina/<repo>/
|
||||||
|
- Креды уже в `/workspaces/Alina_mussina/.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
|
||||||
468
index.html
Normal file
468
index.html
Normal file
@ -0,0 +1,468 @@
|
|||||||
|
<!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:#1a1a2e;--cyan:#6c5ce7;--cyan-50:#f8f7ff;--white:#fff;--gray-500:#6c757d;--gray-100:#f1f3f5;--border:#e9ecef}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:#fafbfc}
|
||||||
|
.container{max-width:960px;margin:0 auto;padding:60px 24px}
|
||||||
|
.hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:var(--white);text-align:center;padding:80px 24px}
|
||||||
|
.hero h1{font-size:42px;font-weight:700;line-height:1.2;margin-bottom:16px;letter-spacing:-0.5px}
|
||||||
|
.hero p{font-size:18px;color:rgba(255,255,255,0.85);max-width:500px;margin:0 auto}
|
||||||
|
.btn{display:inline-block;background:var(--cyan);color:var(--white);padding:14px 32px;border-radius:10px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all 0.2s ease}
|
||||||
|
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(108,92,231,0.4)}
|
||||||
|
.section{padding:48px 0}
|
||||||
|
.section h2{font-size:28px;font-weight:700;margin-bottom:24px;color:var(--ink)}
|
||||||
|
.card{background:var(--white);border-radius:12px;padding:32px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid var(--border)}
|
||||||
|
@media (max-width:640px){.hero h1{font-size:32px}.section h2{font-size:24px}.container{padding:40px 20px}.hero{padding:60px 20px}}
|
||||||
|
|
||||||
|
.form-group{margin-bottom:20px}
|
||||||
|
.form-group label{display:block;margin-bottom:8px;font-weight:600;font-size:14px;color:var(--ink)}
|
||||||
|
.form-group input,.form-group select{width:100%;padding:14px 16px;border:2px solid var(--border);border-radius:10px;font-size:15px;transition:border-color 0.2s ease;background:var(--white)}
|
||||||
|
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(108,92,231,0.1)}
|
||||||
|
.form-group small{display:block;margin-top:6px;font-size:13px;color:var(--gray-500)}
|
||||||
|
.btn-add{background:var(--gray-100);color:var(--ink);padding:12px 24px;border:none;border-radius:10px;font-weight:600;cursor:pointer;margin-bottom:24px;transition:all 0.2s ease}
|
||||||
|
.btn-add:hover{background:var(--border)}
|
||||||
|
.result-section{margin-top:32px;padding:32px;background:var(--white);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid var(--border)}
|
||||||
|
.result-section h3{margin-bottom:20px;font-size:20px;color:var(--ink)}
|
||||||
|
.result-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:16px;background:var(--gray-100);border-radius:10px}
|
||||||
|
.result-item.excluded{background:#fff5f5;border-left:4px solid #ff6b6b}
|
||||||
|
.result-item.included{background:#f8fff8;border-left:4px solid #51cf66}
|
||||||
|
.total{font-weight:700;font-size:24px;margin-top:24px;padding-top:24px;border-top:2px solid var(--border);color:var(--ink)}
|
||||||
|
.btn-export{background:linear-gradient(135deg,#00b894 0%,#00cec9 100%);color:var(--white);padding:14px 32px;border-radius:10px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all 0.2s ease;display:inline-block;margin-top:16px}
|
||||||
|
.btn-export:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,184,148,0.4)}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Помощник Алины</h1>
|
||||||
|
<p>Перерасчет по испытательному сроку для расчета текущего премирования</p>
|
||||||
|
<a class="btn" href="#calculator">Начать расчет</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="calculator" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Добавьте работников</h2>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h3 style="margin-bottom:16px">Загрузка списка работников</h3>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="fileUpload">Загрузите файл Excel (.xlsx)</label>
|
||||||
|
<input type="file" id="fileUpload" accept=".xlsx,.xls">
|
||||||
|
<small style="color:var(--gray-500)">Ожидаемые столбцы: Табельный номер, ФИО, Штатная должность, Грейд, МВЗ, ОрганизационнЕдиница, Текст Орг.Единицы, Факт-дни, Оклад по ШР, Оклад факт, ДатаВзыскания, ВидВзыскания, ДатаПриема (формат: ДД.ММ.ГГГГ)</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="reportMonth">Отчетный месяц</label>
|
||||||
|
<input type="month" id="reportMonth">
|
||||||
|
</div>
|
||||||
|
<button class="btn-add" onclick="loadFromFile()">Загрузить из файла</button>
|
||||||
|
|
||||||
|
<div style="margin:24px 0;text-align:center;color:var(--gray-500)">— или добавляйте вручную —</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="fullName">ФИО работника</label>
|
||||||
|
<input type="text" id="fullName" placeholder="Иванов Иван Иванович">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="hireDate">Дата приема на работу</label>
|
||||||
|
<input type="date" id="hireDate">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="salary">Фактический оклад (₽)</label>
|
||||||
|
<input type="number" id="salary" placeholder="50000">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="workedDays">Фактически отработанные рабочие дни</label>
|
||||||
|
<input type="number" id="workedDays" placeholder="22">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn-add" onclick="addWorker()">Добавить работника</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn" onclick="calculateBonus()" style="margin-top:24px">Рассчитать премию</button>
|
||||||
|
|
||||||
|
<div id="results" class="result-section" style="display:none">
|
||||||
|
<h3>Результаты расчета</h3>
|
||||||
|
<div id="resultsList"></div>
|
||||||
|
<div id="totalResult" class="total"></div>
|
||||||
|
<button class="btn-export" onclick="exportToExcel()">Выгрузить в Excel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
|
||||||
|
<script>
|
||||||
|
let workers = [];
|
||||||
|
let originalData = []; // Store original Excel data for export
|
||||||
|
|
||||||
|
function addWorker() {
|
||||||
|
const fullName = document.getElementById('fullName').value;
|
||||||
|
const hireDate = document.getElementById('hireDate').value;
|
||||||
|
const salary = parseFloat(document.getElementById('salary').value);
|
||||||
|
const workedDays = parseInt(document.getElementById('workedDays').value);
|
||||||
|
const reportMonth = document.getElementById('reportMonth').value;
|
||||||
|
|
||||||
|
if (!fullName || !hireDate || isNaN(salary) || isNaN(workedDays) || !reportMonth) {
|
||||||
|
alert('Заполните все поля');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
workers.push({
|
||||||
|
id: Date.now(),
|
||||||
|
fullName,
|
||||||
|
hireDate,
|
||||||
|
salary,
|
||||||
|
workedDays,
|
||||||
|
reportMonth
|
||||||
|
});
|
||||||
|
|
||||||
|
clearForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadFromFile() {
|
||||||
|
const fileInput = document.getElementById('fileUpload');
|
||||||
|
const reportMonth = document.getElementById('reportMonth').value;
|
||||||
|
|
||||||
|
if (!fileInput.files.length) {
|
||||||
|
alert('Выберите файл для загрузки');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!reportMonth) {
|
||||||
|
alert('Укажите отчетный месяц');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const file = fileInput.files[0];
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = function(e) {
|
||||||
|
try {
|
||||||
|
const data = new Uint8Array(e.target.result);
|
||||||
|
const workbook = XLSX.read(data, {type: 'array'});
|
||||||
|
|
||||||
|
// Get first sheet
|
||||||
|
const firstSheetName = workbook.SheetNames[0];
|
||||||
|
const worksheet = workbook.Sheets[firstSheetName];
|
||||||
|
|
||||||
|
// Convert to JSON
|
||||||
|
const jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1});
|
||||||
|
|
||||||
|
if (jsonData.length === 0) {
|
||||||
|
alert('Файл пуст');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store original data for export
|
||||||
|
originalData = jsonData;
|
||||||
|
|
||||||
|
// Find header row index (look for "ФИО" in any cell)
|
||||||
|
let headerRowIndex = -1;
|
||||||
|
for (let i = 0; i < Math.min(5, jsonData.length); i++) {
|
||||||
|
const row = jsonData[i];
|
||||||
|
if (row && row.some(cell => cell && cell.toString().includes('ФИО'))) {
|
||||||
|
headerRowIndex = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (headerRowIndex === -1) {
|
||||||
|
// Assume first row is header
|
||||||
|
headerRowIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get data rows (skip header)
|
||||||
|
const dataRows = jsonData.slice(headerRowIndex + 1);
|
||||||
|
|
||||||
|
let loadedCount = 0;
|
||||||
|
|
||||||
|
for (let i = 0; i < dataRows.length; i++) {
|
||||||
|
const row = dataRows[i];
|
||||||
|
|
||||||
|
// Skip empty rows
|
||||||
|
if (!row || row.length < 13) {
|
||||||
|
console.log(`Строка ${i + headerRowIndex + 2}: недостаточно столбцов, пропускаем`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fullName = row[1] ? row[1].toString().trim() : '';
|
||||||
|
const workedDays = row[7] ? parseInt(row[7]) : NaN;
|
||||||
|
const salary = row[9] ? parseFloat(row[9].toString().replace(/\s/g, '')) : NaN;
|
||||||
|
const hireDateRaw = row[12] ? row[12].toString().trim() : '';
|
||||||
|
|
||||||
|
// Parse hire date (format: DD.MM.YYYY or Excel date)
|
||||||
|
let hireDate;
|
||||||
|
if (hireDateRaw.includes('.')) {
|
||||||
|
const [day, month, year] = hireDateRaw.split('.');
|
||||||
|
hireDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
|
||||||
|
} else if (hireDateRaw.includes('-')) {
|
||||||
|
hireDate = hireDateRaw;
|
||||||
|
} else if (typeof row[12] === 'number') {
|
||||||
|
// Excel date serial number
|
||||||
|
const excelDate = new Date((row[12] - 25569) * 86400 * 1000);
|
||||||
|
hireDate = excelDate.toISOString().split('T')[0];
|
||||||
|
} else {
|
||||||
|
console.log(`Строка ${i + headerRowIndex + 2}: неверный формат даты "${hireDateRaw}", пропускаем`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!fullName || isNaN(workedDays) || isNaN(salary)) {
|
||||||
|
console.log(`Строка ${i + headerRowIndex + 2}: некорректные данные, пропускаем`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
workers.push({
|
||||||
|
id: Date.now() + i,
|
||||||
|
fullName,
|
||||||
|
hireDate,
|
||||||
|
salary,
|
||||||
|
workedDays,
|
||||||
|
reportMonth
|
||||||
|
});
|
||||||
|
|
||||||
|
loadedCount++;
|
||||||
|
}
|
||||||
|
|
||||||
|
alert(`Загружено ${loadedCount} работников`);
|
||||||
|
fileInput.value = '';
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Ошибка чтения файла:', error);
|
||||||
|
alert('Ошибка чтения файла. Убедитесь, что файл в формате Excel (.xlsx)');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsArrayBuffer(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearForm() {
|
||||||
|
document.getElementById('fullName').value = '';
|
||||||
|
document.getElementById('hireDate').value = '';
|
||||||
|
document.getElementById('salary').value = '';
|
||||||
|
document.getElementById('workedDays').value = '';
|
||||||
|
document.getElementById('reportMonth').value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(dateStr) {
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
const day = date.getDate().toString().padStart(2, '0');
|
||||||
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
const year = date.getFullYear().toString().slice(-2);
|
||||||
|
return `${day}.${month}.${year}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatMonth(monthStr) {
|
||||||
|
const [year, month] = monthStr.split('-');
|
||||||
|
const months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
|
||||||
|
'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
|
||||||
|
return `${months[parseInt(month)-1]} ${year}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateBonus() {
|
||||||
|
if (workers.length === 0) {
|
||||||
|
alert('Добавьте хотя бы одного работника');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = [];
|
||||||
|
let totalBonus = 0;
|
||||||
|
|
||||||
|
workers.forEach(worker => {
|
||||||
|
const hireDate = new Date(worker.hireDate);
|
||||||
|
const probationEndDate = new Date(hireDate);
|
||||||
|
probationEndDate.setMonth(probationEndDate.getMonth() + 1);
|
||||||
|
|
||||||
|
const [reportYear, reportMonth] = worker.reportMonth.split('-').map(Number);
|
||||||
|
const reportStartDate = new Date(reportYear, reportMonth - 1, 1);
|
||||||
|
const reportEndDate = new Date(reportYear, reportMonth, 0);
|
||||||
|
const daysInMonth = reportEndDate.getDate();
|
||||||
|
|
||||||
|
let includedDays = 0;
|
||||||
|
let recalculatedSalary = 0;
|
||||||
|
let excludedReason = '';
|
||||||
|
let isExcluded = false;
|
||||||
|
|
||||||
|
// Check if probation ends after the report month
|
||||||
|
if (probationEndDate > reportEndDate) {
|
||||||
|
isExcluded = true;
|
||||||
|
excludedReason = `Испытательный срок до ${formatDate(probationEndDate.toISOString().split('T')[0])}`;
|
||||||
|
} else {
|
||||||
|
// Calculate days after probation ends
|
||||||
|
let daysAfterProbation;
|
||||||
|
|
||||||
|
if (probationEndDate <= reportStartDate) {
|
||||||
|
// Probation ended before the report month started - full month
|
||||||
|
daysAfterProbation = daysInMonth;
|
||||||
|
} else {
|
||||||
|
// Probation ends during the report month
|
||||||
|
const probationEndDay = probationEndDate.getDate();
|
||||||
|
daysAfterProbation = daysInMonth - probationEndDay + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recalculate worked days and salary proportionally
|
||||||
|
includedDays = Math.round((worker.workedDays / daysInMonth) * daysAfterProbation * 100) / 100;
|
||||||
|
recalculatedSalary = Math.round((worker.salary / daysInMonth) * daysAfterProbation * 100) / 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate detailed note only for workers with recalculation
|
||||||
|
let note = '';
|
||||||
|
const probEndFormatted = formatDate(probationEndDate.toISOString().split('T')[0]);
|
||||||
|
|
||||||
|
if (!isExcluded && probationEndDate > reportStartDate) {
|
||||||
|
// Probation ends during the report month - recalculation happened
|
||||||
|
note = `Пересчет с ${probEndFormatted}: факт.дни ${includedDays} из ${worker.workedDays}, оклад ${recalculatedSalary.toLocaleString('ru-RU')}₸ из ${worker.salary.toLocaleString('ru-RU')}₸`;
|
||||||
|
}
|
||||||
|
// If excluded or probation ended before report month - no note needed
|
||||||
|
|
||||||
|
results.push({
|
||||||
|
...worker,
|
||||||
|
isExcluded,
|
||||||
|
includedDays,
|
||||||
|
recalculatedSalary,
|
||||||
|
excludedReason,
|
||||||
|
note,
|
||||||
|
probationEndDate: formatDate(probationEndDate.toISOString().split('T')[0]),
|
||||||
|
daysAfterProbation: isExcluded ? 0 : (probationEndDate <= reportStartDate ? daysInMonth : daysInMonth - probationEndDate.getDate() + 1)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isExcluded) {
|
||||||
|
totalBonus += recalculatedSalary;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
displayResults(results, totalBonus);
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayResults(results, totalBonus) {
|
||||||
|
const resultsDiv = document.getElementById('results');
|
||||||
|
const resultsList = document.getElementById('resultsList');
|
||||||
|
const totalResult = document.getElementById('totalResult');
|
||||||
|
|
||||||
|
resultsList.innerHTML = results.map(r => `
|
||||||
|
<div class="result-item ${r.isExcluded ? 'excluded' : 'included'}">
|
||||||
|
<div>
|
||||||
|
<strong>${r.fullName}</strong><br>
|
||||||
|
<small>${r.isExcluded ?
|
||||||
|
`Исключен: ${r.excludedReason}` :
|
||||||
|
`Включен: ${r.includedDays} дней (пересчет с ${r.probationEndDate}), оклад ${r.recalculatedSalary.toLocaleString('ru-RU')} ₸`
|
||||||
|
}</small>
|
||||||
|
</div>
|
||||||
|
<div>${r.isExcluded ? '—' : r.recalculatedSalary.toLocaleString('ru-RU') + ' ₸'}</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
totalResult.innerHTML = `Итого к выплате: ${totalBonus.toLocaleString('ru-RU')} ₸`;
|
||||||
|
resultsDiv.style.display = 'block';
|
||||||
|
|
||||||
|
// Store results for export
|
||||||
|
window.lastResults = results;
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportToExcel() {
|
||||||
|
if (!window.lastResults || window.lastResults.length === 0) {
|
||||||
|
alert('Сначала выполните расчет');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (originalData.length === 0) {
|
||||||
|
alert('Нет исходных данных для экспорта');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = window.lastResults;
|
||||||
|
|
||||||
|
// Create new workbook
|
||||||
|
const wb = XLSX.utils.book_new();
|
||||||
|
|
||||||
|
// Prepare data for export
|
||||||
|
// Start with original data (header + data rows)
|
||||||
|
const exportData = [];
|
||||||
|
|
||||||
|
// Find header row index
|
||||||
|
let headerRowIndex = 0;
|
||||||
|
for (let i = 0; i < Math.min(5, originalData.length); i++) {
|
||||||
|
const row = originalData[i];
|
||||||
|
if (row && row.some(cell => cell && cell.toString().includes('ФИО'))) {
|
||||||
|
headerRowIndex = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add header rows (before actual data header)
|
||||||
|
for (let i = 0; i <= headerRowIndex; i++) {
|
||||||
|
const row = originalData[i] ? [...originalData[i]] : [];
|
||||||
|
if (i === headerRowIndex) {
|
||||||
|
// Add new column headers to the header row
|
||||||
|
row.push('Факт-дни (перерасчет)', 'Оклад факт (перерасчет)', 'Примечание');
|
||||||
|
}
|
||||||
|
exportData.push(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add data rows with results
|
||||||
|
const dataRows = originalData.slice(headerRowIndex + 1);
|
||||||
|
|
||||||
|
for (let i = 0; i < dataRows.length; i++) {
|
||||||
|
const row = dataRows[i] ? [...dataRows[i]] : [];
|
||||||
|
|
||||||
|
// Find matching result by worker name (column 1)
|
||||||
|
const workerName = row[1] ? row[1].toString().trim() : '';
|
||||||
|
const result = results.find(r => r.fullName === workerName);
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
if (result.isExcluded) {
|
||||||
|
row.push(0, 0, result.note);
|
||||||
|
} else {
|
||||||
|
row.push(
|
||||||
|
result.includedDays,
|
||||||
|
result.recalculatedSalary,
|
||||||
|
result.note
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
row.push('', '', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
exportData.push(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create worksheet
|
||||||
|
const ws = XLSX.utils.aoa_to_sheet(exportData);
|
||||||
|
|
||||||
|
// Set column widths
|
||||||
|
ws['!cols'] = [
|
||||||
|
{wch: 15}, // Табельный номер
|
||||||
|
{wch: 30}, // ФИО
|
||||||
|
{wch: 25}, // Штатная должность
|
||||||
|
{wch: 10}, // Грейд
|
||||||
|
{wch: 15}, // МВЗ
|
||||||
|
{wch: 20}, // ОрганизационнЕдиница
|
||||||
|
{wch: 25}, // Текст Орг.Единицы
|
||||||
|
{wch: 12}, // Факт-дни
|
||||||
|
{wch: 15}, // Оклад по ШР
|
||||||
|
{wch: 15}, // Оклад факт
|
||||||
|
{wch: 15}, // ДатаВзыскания
|
||||||
|
{wch: 20}, // ВидВзыскания
|
||||||
|
{wch: 15}, // ДатаПриема
|
||||||
|
{wch: 18}, // Факт-дни (перерасчет)
|
||||||
|
{wch: 18}, // Оклад факт (перерасчет)
|
||||||
|
{wch: 30} // Примечание
|
||||||
|
];
|
||||||
|
|
||||||
|
// Add worksheet to workbook
|
||||||
|
XLSX.utils.book_append_sheet(wb, ws, 'Результат');
|
||||||
|
|
||||||
|
// Generate file and download
|
||||||
|
const fileName = `Премии_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||||
|
XLSX.writeFile(wb, fileName);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user