mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 14:04:46 +00:00
142 lines
14 KiB
HTML
142 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Структура финального ТЗ · @wasrusgen1 | КОНСАЛТИНГ</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{--primary:#047857;--dark:#064E3B;--mid:#10B981;--light:#ECFDF5;--bg:#F5F6F8;--white:#fff;--border:#E5E7EB;--text:#1A1A2E;--muted:#6B7280}
|
||
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;padding:0 0 80px}
|
||
.hero{background:linear-gradient(145deg,#022C22,#064E3B 50%,#047857);color:#fff;padding:48px 40px}
|
||
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:100px;padding:6px 14px;font-size:12px;font-weight:600;margin-bottom:20px}
|
||
.hero h1{font-family:'Montserrat';font-weight:800;font-size:32px;letter-spacing:-1px;margin-bottom:8px}
|
||
.hero p{font-size:15px;color:rgba(255,255,255,.7);max-width:640px}
|
||
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
|
||
.intro{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:20px 24px;margin:-30px 0 28px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
|
||
.intro p{font-size:14px;color:#374151;margin-bottom:6px}
|
||
.intro .cp{color:#DC2626;font-weight:600}
|
||
.part{background:var(--white);border:1.5px solid var(--border);border-radius:14px;margin-bottom:18px;overflow:hidden}
|
||
.part-h{display:flex;align-items:center;gap:14px;padding:18px 24px;background:var(--light);border-bottom:1.5px solid rgba(4,120,87,.12)}
|
||
.part-letter{width:42px;height:42px;border-radius:11px;background:var(--primary);color:#fff;font-family:'Montserrat';font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.part-t{font-size:18px;font-weight:800;color:var(--dark)}
|
||
.part-src{font-size:12px;color:var(--primary);margin-top:2px}
|
||
.part-b{padding:18px 24px}
|
||
.sect{margin-bottom:18px}
|
||
.sect:last-child{margin-bottom:0}
|
||
.sect-t{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px}
|
||
.sect-n{font-size:11px;font-weight:800;color:var(--primary);background:var(--light);border-radius:6px;padding:2px 7px}
|
||
.sect ul{list-style:none;padding-left:0}
|
||
.sect li{font-size:14px;color:#374151;padding:3px 0 3px 18px;position:relative}
|
||
.sect li::before{content:'';position:absolute;left:4px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--mid)}
|
||
.cp-box{display:flex;align-items:center;gap:12px;background:#FEF2F2;border:1.5px solid #FECACA;border-radius:11px;padding:13px 16px;margin-top:14px}
|
||
.cp-ic{font-size:20px;flex-shrink:0}
|
||
.cp-txt{font-size:13px;color:#991B1B;font-weight:600}
|
||
.principle{background:linear-gradient(135deg,#0F0F1A,#1a1a3e);color:#fff;border-radius:16px;padding:28px 32px;margin-top:28px}
|
||
.principle h2{font-family:'Montserrat';font-size:20px;margin-bottom:16px;color:#6EE7B7}
|
||
.principle ol{padding-left:20px;margin-bottom:18px}
|
||
.principle li{font-size:14px;color:rgba(255,255,255,.85);margin-bottom:8px}
|
||
.principle .punch{font-size:16px;font-weight:700;text-align:center;padding:16px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:11px}
|
||
.saas-tag{display:inline-block;font-size:10px;font-weight:700;color:#6366F1;background:#EEF2FF;border:1px solid #C7D2FE;border-radius:5px;padding:1px 7px;margin-left:6px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="hero">
|
||
<div class="wrap" style="padding:0">
|
||
<div class="hero-tag">@wasrusgen1 · КОНСАЛТИНГ</div>
|
||
<h1>Структура финального ТЗ</h1>
|
||
<p>Эталон документа, который Елена собирает по итогам работы с клиентом. Конечный получатель — разработчик. От интервью до готового технического задания на ПО.</p>
|
||
</div>
|
||
</div>
|
||
<div class="wrap">
|
||
<div class="intro">
|
||
<p><strong>Принцип:</strong> Елена заполняет ТЗ по частям A→F. На каждой контрольной точке останавливается и показывает Руслану.</p>
|
||
<p class="cp">✋ КОНТРОЛЬНАЯ ТОЧКА — место, где Руслан утверждает прежде чем Елена идёт дальше.</p>
|
||
</div>
|
||
|
||
<!-- A -->
|
||
<div class="part">
|
||
<div class="part-h"><div class="part-letter">A</div><div><div class="part-t">Бизнес-контекст</div><div class="part-src">Источник: интервью + модель IDEF0</div></div></div>
|
||
<div class="part-b">
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">A1</span>Резюме бизнеса</div><ul><li>Чем занимается, ниша, размер</li><li>Главная боль ради которой нужна система</li><li>Что изменится после внедрения (измеримо)</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">A2</span>Цель системы</div><ul><li>Одно предложение: что система делает</li><li>Границы: что входит, что НЕ входит</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">A3</span>Роли пользователей <span style="font-size:11px;color:#9ca3af;font-weight:500">← Mechanisms из IDEF0</span></div><ul><li>Кто работает в системе</li><li>Что каждая роль делает</li><li>Права доступа</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">A4</span>Операционная карта (приложение)</div><ul><li>IDEF0 «как есть» (AS-IS)</li><li>Найденные разрывы</li><li>Модель «как должно быть» (TO-BE)</li></ul></div>
|
||
<div class="cp-box"><div class="cp-ic">✋</div><div class="cp-txt">КОНТРОЛЬНАЯ ТОЧКА 1 — Верно ли понят бизнес и роли?</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- B -->
|
||
<div class="part">
|
||
<div class="part-h"><div class="part-letter">B</div><div><div class="part-t">Функциональные требования</div><div class="part-src">Источник: функции IDEF0 → модули системы</div></div></div>
|
||
<div class="part-b">
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">B1</span>Карта модулей</div><ul><li>Каждая функция IDEF0 = модуль</li><li>Связи между модулями (из стрелок)</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">B2</span>Описание каждого модуля</div><ul><li>Назначение · экраны · действия</li><li>Входные/выходные данные (из Input/Output)</li><li>Бизнес-правила (из Control)</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">B3</span>Сценарии использования <span style="font-size:11px;color:#9ca3af;font-weight:500">← стрелки между функциями</span></div><ul><li>Типовые рабочие потоки от начала до конца</li></ul></div>
|
||
<div class="cp-box"><div class="cp-ic">✋</div><div class="cp-txt">КОНТРОЛЬНАЯ ТОЧКА 2 — Утверждение набора модулей и функциональности</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C -->
|
||
<div class="part">
|
||
<div class="part-h"><div class="part-letter">C</div><div><div class="part-t">Модель данных</div><div class="part-src">Источник: Input/Output + хранилища → ERD</div></div></div>
|
||
<div class="part-b">
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">C1</span>Сущности (ERD)</div><ul><li>Список сущностей (Клиент, Заказ, Материал...)</li><li>Связи между ними + диаграмма ERD</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">C2</span>Таблицы</div><ul><li>Поля: имя, тип, обязательность</li><li>Ключи, индексы</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">C3</span>Примеры данных</div><ul><li>2-3 строки реальных данных по таблице</li><li>На основе данных клиента из интервью</li></ul></div>
|
||
<div class="cp-box"><div class="cp-ic">✋</div><div class="cp-txt">КОНТРОЛЬНАЯ ТОЧКА 3 — Утверждение модели данных</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D -->
|
||
<div class="part">
|
||
<div class="part-h"><div class="part-letter">D</div><div><div class="part-t">Экраны (мокапы)</div><div class="part-src">Источник: функции → UI</div></div></div>
|
||
<div class="part-b">
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">D1</span>WebApp — экраны</div><ul><li>Мокап + данные с примерами</li><li>Действия, кнопки, доступ по роли</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">D2</span>Telegram MiniApp — экраны <span class="saas-tag">SaaS</span></div><ul><li>Адаптация под мобильный формат</li><li>Подмножество функций WebApp</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">D3</span>Карта переходов</div><ul><li>Схема навигации между экранами</li></ul></div>
|
||
<div class="cp-box"><div class="cp-ic">✋</div><div class="cp-txt">КОНТРОЛЬНАЯ ТОЧКА 4 — Утверждение экранов и UX</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- E -->
|
||
<div class="part">
|
||
<div class="part-h"><div class="part-letter">E</div><div><div class="part-t">Техническая архитектура <span class="saas-tag">SaaS</span></div><div class="part-src">Критично — основа продукта Руслана</div></div></div>
|
||
<div class="part-b">
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">E1</span>Стек технологий</div><ul><li>Frontend (WebApp + MiniApp), Backend, БД, хостинг</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">E2</span>Архитектура БД (мультитенант)</div><ul><li>Изоляция данных клиентов</li><li>Структура под много компаний на платформе</li><li>Резервное копирование</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">E3</span>Серверы и мощности</div><ul><li>Расчёт нагрузки (пользователи, запросы)</li><li>Конфигурация (CPU, RAM, диск) + стоимость/мес</li><li>Масштабирование при росте</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">E4</span>Структура взаимодействия</div><ul><li>Схема: клиент → frontend → API → БД</li><li>Интеграции (Telegram, платежи) + DFD</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">E5</span>Безопасность</div><ul><li>Аутентификация, изоляция данных</li><li>Защита ПДн (152-ФЗ)</li></ul></div>
|
||
<div class="cp-box"><div class="cp-ic">✋</div><div class="cp-txt">КОНТРОЛЬНАЯ ТОЧКА 5 — Утверждение технической архитектуры</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- F -->
|
||
<div class="part">
|
||
<div class="part-h"><div class="part-letter">F</div><div><div class="part-t">План реализации</div><div class="part-src">От MVP к полной версии</div></div></div>
|
||
<div class="part-b">
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">F1</span>Этапы разработки</div><ul><li>MVP (минимум для запуска)</li><li>Версия 1.0 — полный функционал</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">F2</span>Оценка трудозатрат</div><ul><li>По модулям: часы/недели + приоритизация</li></ul></div>
|
||
<div class="sect"><div class="sect-t"><span class="sect-n">F3</span>Стоимость и сроки</div><ul><li>Бюджет разработки</li><li>Стоимость обслуживания → SaaS-ценообразование</li></ul></div>
|
||
<div class="cp-box"><div class="cp-ic">✋</div><div class="cp-txt">КОНТРОЛЬНАЯ ТОЧКА 6 — Финальное утверждение. Готово к разработке.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="principle">
|
||
<h2>Принцип работы Елены</h2>
|
||
<ol>
|
||
<li>Заполняет ТЗ по частям, от A к F</li>
|
||
<li>На каждой ✋ — останавливается и показывает Руслану</li>
|
||
<li>Руслан утверждает / правит / возвращает на доработку</li>
|
||
<li>Только после утверждения — идёт к следующей части</li>
|
||
<li>Все методологии (IDEF0, BPMN, DFD, ERD, Canvas) — инструменты Елены, но выбор и контроль за Русланом</li>
|
||
</ol>
|
||
<div class="punch">Елена предлагает. Руслан решает. Разработчик получает готовое ТЗ.</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|