presentation.html - master - icedev/eks-present

presentation.html
418 строк19 KB
ICEDEV
init
12 май 2026, 12:50
12 май 2026, 12:50872c4b8
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>EKS — Презентация</title>
  <link rel="stylesheet" href="styles.css" />
  <style>
    @page { size: A4 landscape; margin: 14mm; }

    body {
      background: #0b1224;
    }

    .deck {
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }

    .slide {
      page-break-after: always;
      padding: 22px;
      border-radius: 22px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      background: rgba(15, 23, 42, 0.70);
      box-shadow: 0 24px 48px rgba(2, 6, 23, 0.35);
      backdrop-filter: blur(10px);
      min-height: 520px;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 16px;
      align-content: start;
    }

    .slide:last-child { page-break-after: auto; }

    .kicker {
      color: #a5b4fc;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      font-size: 12px;
      margin: 0 0 10px;
    }

    .h1 {
      margin: 0 0 10px;
      font-size: 34px;
      line-height: 1.1;
    }

    .lead {
      margin: 0 0 16px;
      color: rgba(226, 232, 240, 0.86);
      line-height: 1.5;
      font-size: 15px;
    }

    .bullets {
      margin: 0;
      padding-left: 18px;
      color: rgba(226, 232, 240, 0.86);
      line-height: 1.55;
      font-size: 14px;
    }

    .bullets li { margin: 8px 0; }

    .mock {
      border-radius: 18px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      background: rgba(30, 41, 59, 0.55);
      padding: 14px;
      min-height: 200px;
    }

    .mock-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .mock-brand {
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .mock-chip {
      border: 1px solid rgba(148, 163, 184, 0.25);
      background: rgba(15, 23, 42, 0.35);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      color: rgba(226, 232, 240, 0.9);
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .mini-card {
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 14px;
      background: rgba(15, 23, 42, 0.40);
      padding: 12px;
    }

    .mini-card h4 {
      margin: 0 0 6px;
      font-size: 14px;
      color: rgba(226, 232, 240, 0.95);
    }

    .mini-card p {
      margin: 0;
      color: rgba(148, 163, 184, 0.95);
      font-size: 12.5px;
      line-height: 1.45;
    }

    .footer {
      grid-column: 1 / -1;
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      color: rgba(148, 163, 184, 0.95);
      font-size: 12px;
    }

    code {
      background: rgba(15, 23, 42, 0.45);
      border: 1px solid rgba(148, 163, 184, 0.20);
      padding: 2px 6px;
      border-radius: 8px;
      color: rgba(226, 232, 240, 0.95);
    }
  </style>
</head>
<body>
  <main class="deck">
    <!-- 1: Cover -->
    <section class="slide">
      <div>
        <p class="kicker">EKS • Dashboard</p>
        <h1 class="h1">Презентация интерфейса и структуры продукта</h1>
        <p class="lead">
          Концепт административной панели для строительных процессов: роли, навигация, объекты, системы и сотрудники.
        </p>
        <ul class="bullets">
          <li>Единый визуальный стиль (glassmorphism) и понятная навигация по ролям.</li>
          <li>Сценарий работы: авторизация → выбор роли → контроль объектов → детализация здания.</li>
          <li>Быстрый доступ к сотрудникам организации для операционных процессов.</li>
        </ul>

        <div class="footer">
          <div>Файлы в проекте: <code>index.html</code>, <code>contractor.html</code>, <code>accounting.html</code>, <code>manager.html</code>, <code>objects.html</code>, <code>building.html</code>, <code>employees.html</code></div>
          <div>Версия: 1.0</div>
        </div>
      </div>

      <div class="mock">
        <div class="mock-top">
          <div class="mock-brand">EKS</div>
          <div class="mock-chip">Современный UI</div>
        </div>
        <div class="two-col">
          <div class="mini-card"><h4>Роли</h4><p>Подрядчик, бухгалтерия, руководитель — разные наборы разделов.</p></div>
          <div class="mini-card"><h4>Объекты</h4><p>Список зданий, прогресс, подрядчик, переход в детализацию.</p></div>
          <div class="mini-card"><h4>Системы</h4><p>Таблица систем по зданию: подрядчик + готовность.</p></div>
          <div class="mini-card"><h4>Сотрудники</h4><p>Единый список сотрудников организации с контактами и статусами.</p></div>
        </div>
      </div>
    </section>

    <!-- 2: Auth -->
    <section class="slide">
      <div>
        <p class="kicker">Экран 1</p>
        <h2 class="h1" style="font-size: 30px;">Авторизация и выбор роли</h2>
        <p class="lead">
          Вход в систему реализован как простая форма и выбор роли. Это позволяет быстро демонстрировать ролевые сценарии и навигацию без сложной серверной части.
        </p>
        <ul class="bullets">
          <li>Поддержка нескольких ролей в одном входе (демо-режим).</li>
          <li>Роль определяет стартовую страницу и набор доступных разделов.</li>
          <li>Дальнейшее развитие: SSO, 2FA, политики доступа по организациям.</li>
        </ul>
        <div class="footer">
          <div>Страница: <code>index.html</code></div>
          <div>Сценарий: вход → редирект по роли</div>
        </div>
      </div>

      <div class="mock">
        <div class="mock-top">
          <div class="mock-brand">Вход в EKS</div>
          <div class="mock-chip">Role-based</div>
        </div>
        <div class="mini-card">
          <h4>Поля формы</h4>
          <p>Email, пароль и роль. Кнопка «Войти» переводит на нужную главную страницу.</p>
        </div>
        <div class="mini-card" style="margin-top: 12px;">
          <h4>Тематический текст</h4>
          <p>«Быстрый вход и прозрачное разграничение прав — основа управляемых процессов и ответственности».</p>
        </div>
      </div>
    </section>

    <!-- 3: Contractor -->
    <section class="slide">
      <div>
        <p class="kicker">Экран 2</p>
        <h2 class="h1" style="font-size: 30px;">Главная подрядчика</h2>
        <p class="lead">
          Рабочая панель для ежедневных операций: сотрудники, объекты, документы, чат и отчёты. Плиточная навигация позволяет быстро перейти к нужному блоку.
        </p>
        <ul class="bullets">
          <li>Упор на производственные задачи и выполнение работ по объектам.</li>
          <li>Сотрудники — отдельная вложенная страница для управления персоналом организации.</li>
          <li>Развитие: уведомления, задачи, календарь смен, SLA и контроль рисков.</li>
        </ul>
        <div class="footer">
          <div>Страница: <code>contractor.html</code></div>
          <div>Ключ: быстрый доступ к операционным разделам</div>
        </div>
      </div>

      <div class="mock">
        <div class="mock-top">
          <div class="mock-brand">EKS | Подрядчик</div>
          <div class="mock-chip">Operations</div>
        </div>
        <div class="two-col">
          <div class="mini-card"><h4>Сотрудники</h4><p>Контакты и статусы; основа для назначений и учета.</p></div>
          <div class="mini-card"><h4>Объекты</h4><p>Быстрый переход к зданиям и контролю прогресса.</p></div>
          <div class="mini-card"><h4>Информация</h4><p>Контроль актуальности актов, версий и согласований.</p></div>
          <div class="mini-card"><h4>Чат и отчёты</h4><p>Коммуникации и регламентные сводки.</p></div>
        </div>
      </div>
    </section>

    <!-- 4: Accounting -->
    <section class="slide">
      <div>
        <p class="kicker">Экран 3</p>
        <h2 class="h1" style="font-size: 30px;">Главная бухгалтерии</h2>
        <p class="lead">
          Финансовый контур: компании, отчёты и коммуникации. Добавлен быстрый переход в «Сотрудники» для просмотра ответственных лиц контрагентов.
        </p>
        <ul class="bullets">
          <li>Фокус на прозрачности оплат, договоров и ответственности.</li>
          <li>Сотрудники: контакты для согласований и оперативного взаимодействия.</li>
          <li>Развитие: статусы документов (согласован/на доработке), реестр оплат, выгрузки.</li>
        </ul>
        <div class="footer">
          <div>Страница: <code>accounting.html</code></div>
          <div>Ключ: согласование и финансовая дисциплина</div>
        </div>
      </div>

      <div class="mock">
        <div class="mock-top">
          <div class="mock-brand">EKS | Бухгалтерия</div>
          <div class="mock-chip">Finance</div>
        </div>
        <div class="two-col">
          <div class="mini-card"><h4>Компании</h4><p>Реестр контрагентов, договоры и лимиты.</p></div>
          <div class="mini-card"><h4>Сотрудники</h4><p>Контактные лица и исполнители со статусами.</p></div>
          <div class="mini-card"><h4>Отчёты</h4><p>Дебиторка, платежи, сверки.</p></div>
          <div class="mini-card"><h4>Чат</h4><p>Согласование актов и закрывающих документов.</p></div>
        </div>
      </div>
    </section>

    <!-- 5: Manager -->
    <section class="slide">
      <div>
        <p class="kicker">Экран 4</p>
        <h2 class="h1" style="font-size: 30px;">Главная руководителя</h2>
        <p class="lead">
          Сводный обзор по компаниям, объектам и документам. Роль «руководитель» объединяет контроль прогресса, коммуникаций и складского блока.
        </p>
        <ul class="bullets">
          <li>Единая точка контроля: показатели, риски, статус ключевых разделов.</li>
          <li>Быстрый переход к объектам и их детализации (системы, документы).</li>
          <li>Развитие: KPI-дашборды, контроль критического пути, матрица ответственности.</li>
        </ul>
        <div class="footer">
          <div>Страница: <code>manager.html</code></div>
          <div>Ключ: стратегический контроль и координация</div>
        </div>
      </div>

      <div class="mock">
        <div class="mock-top">
          <div class="mock-brand">EKS | Руководитель</div>
          <div class="mock-chip">Control</div>
        </div>
        <div class="two-col">
          <div class="mini-card"><h4>Компании</h4><p>Контроль исполнителей и ответственности.</p></div>
          <div class="mini-card"><h4>Склад</h4><p>Материалы, остатки и движение.</p></div>
          <div class="mini-card"><h4>Объекты</h4><p>Критические статусы и дедлайны.</p></div>
          <div class="mini-card"><h4>Информация/отчёты</h4><p>Согласование и сводная аналитика.</p></div>
        </div>
      </div>
    </section>

    <!-- 6: Objects list -->
    <section class="slide">
      <div>
        <p class="kicker">Экран 5</p>
        <h2 class="h1" style="font-size: 30px;">Список объектов (зданий)</h2>
        <p class="lead">
          Табличный список зданий: количество систем, подрядчик и готовность. По клику на здание открывается вложенная страница с деталями.
        </p>
        <ul class="bullets">
          <li>Сфокусировано на управленческих метриках: объём (кол-во систем) и прогресс.</li>
          <li>Кликабельные здания ведут на детализацию: <code>building.html?id=...</code></li>
          <li>Развитие: фильтры (подрядчик/статус), сортировки, экспорт в отчёты.</li>
        </ul>
        <div class="footer">
          <div>Страница: <code>objects.html</code></div>
          <div>Ключ: быстрый обзор прогресса по зданиям</div>
        </div>
      </div>

      <div class="mock">
        <div class="mock-top">
          <div class="mock-brand">EKS | Объекты</div>
          <div class="mock-chip">Table</div>
        </div>
        <div class="mini-card">
          <h4>Тематический текст</h4>
          <p>«Объект — это единица управления. В одном месте видно: сколько систем, кто отвечает и каков прогресс».</p>
        </div>
        <div class="mini-card" style="margin-top: 12px;">
          <h4>Пример перехода</h4>
          <p>Клик по строке «Здание 404» → <code>building.html?id=404</code></p>
        </div>
      </div>
    </section>

    <!-- 7: Building detail -->
    <section class="slide">
      <div>
        <p class="kicker">Экран 6</p>
        <h2 class="h1" style="font-size: 30px;">Детализация здания: описание, системы, документы</h2>
        <p class="lead">
          Вложенная страница здания даёт контекст (описание и метаданные), а ниже — таблицу систем и блок документов по системам.
        </p>
        <ul class="bullets">
          <li>Описание и мета: тип, количество систем, генподрядчик, готовность.</li>
          <li>Таблица систем: система → подрядчик → готовность (badge).</li>
          <li>Информация по системам: проект, исполнительная, акты и спецификации.</li>
        </ul>
        <div class="footer">
          <div>Страница: <code>building.html</code></div>
          <div>Ключ: от общего прогресса к управлению системами</div>
        </div>
      </div>

      <div class="mock">
        <div class="mock-top">
          <div class="mock-brand">EKS | Здание</div>
          <div class="mock-chip">Drill-down</div>
        </div>
        <div class="two-col">
          <div class="mini-card"><h4>Системы</h4><p>Вентиляция, отопление, электрика, пожарная автоматика и др.</p></div>
          <div class="mini-card"><h4>Информация</h4><p>По каждой системе: проект/исполнительная/акты.</p></div>
          <div class="mini-card"><h4>Ценность</h4><p>Сразу понятно: где риск и у кого зона ответственности.</p></div>
          <div class="mini-card"><h4>Развитие</h4><p>История изменений, версии документов, контроль согласований.</p></div>
        </div>
      </div>
    </section>

    <!-- 8: Employees -->
    <section class="slide">
      <div>
        <p class="kicker">Экран 7</p>
        <h2 class="h1" style="font-size: 30px;">Сотрудники организации</h2>
        <p class="lead">
          Вложенная страница сотрудников позволяет быстро найти контакт и понять роль сотрудника. Есть переключение организации (в демо) и таблица контактов.
        </p>
        <ul class="bullets">
          <li>Таблица: ФИО, должность, статус (активен/неактивен), контакты.</li>
          <li>Переключение организации: <code>employees.html?id=1</code>, <code>?id=2</code>, <code>?id=3</code>.</li>
          <li>Развитие: карточка сотрудника, права доступа, заявки, привязка к объектам/системам.</li>
        </ul>
        <div class="footer">
          <div>Страница: <code>employees.html</code></div>
          <div>Ключ: быстрые коммуникации и управление персоналом</div>
        </div>
      </div>

      <div class="mock">
        <div class="mock-top">
          <div class="mock-brand">EKS | Сотрудники</div>
          <div class="mock-chip">Directory</div>
        </div>
        <div class="mini-card">
          <h4>Тематический текст</h4>
          <p>«Контакты должны быть под рукой: согласования ускоряются, а ответственность становится прозрачной».</p>
        </div>
        <div class="mini-card" style="margin-top: 12px;">
          <h4>Примечание</h4>
          <p>Столбец «Закреплено» специально убран по требованию — таблица максимально компактная.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>