meeting-protocol-service/.superpowers/brainstorm/47219-1775222083/content/templates-and-ui.html

<h2>Секция 3: Шаблоны протоколов и веб-интерфейс</h2>
<p class="subtitle">Предустановленные промпты и структура UI</p>

<div class="section">
  <h3>Предустановленные шаблоны протоколов</h3>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">

    <div style="background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; flex: 1; min-width: 250px; border-left: 4px solid #8b5cf6;">
      <div style="font-weight: bold; color: #a78bfa; margin-bottom: 8px;">📋 Обследование процессов клиента</div>
      <div style="font-size: 12px; line-height: 1.8;">
        <div style="color: #94a3b8; margin-bottom: 4px;">Разделы протокола:</div>
        1. Дата, участники, тема встречи<br>
        2. Описание обследуемого процесса<br>
        <small style="color: #64748b;">&nbsp;&nbsp;&nbsp;(задачи бизнеса, подпроцесс)</small><br>
        3. Текущее состояние (as-is)<br>
        4. Выявленные проблемы / узкие места<br>
        5. Договорённости и решения<br>
        6. Открытые вопросы<br>
        7. Задачи с ответственными и сроками<br>
        8. Следующие шаги
      </div>
    </div>

    <div style="background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; flex: 1; min-width: 250px; border-left: 4px solid #3b82f6;">
      <div style="font-weight: bold; color: #60a5fa; margin-bottom: 8px;">🏢 Внутренняя рабочая встреча</div>
      <div style="font-size: 12px; line-height: 1.8;">
        <div style="color: #94a3b8; margin-bottom: 4px;">Разделы протокола:</div>
        1. Дата, участники, тема<br>
        2. Обсуждённые вопросы<br>
        3. Принятые решения<br>
        4. Задачи с ответственными и сроками<br>
        5. Следующие шаги
      </div>
    </div>

    <div style="background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; flex: 1; min-width: 250px; border-left: 4px solid #10b981;">
      <div style="font-weight: bold; color: #34d399; margin-bottom: 8px;">⚡ Стендап / короткая встреча</div>
      <div style="font-size: 12px; line-height: 1.8;">
        <div style="color: #94a3b8; margin-bottom: 4px;">Разделы протокола:</div>
        1. Дата, участники<br>
        2. Статус по задачам (кто / что сделал)<br>
        3. Блокеры и проблемы<br>
        4. План на следующий период
      </div>
    </div>

  </div>
  <div style="margin-top: 12px; font-size: 13px; color: #64748b;">
    + Возможность создать кастомный шаблон с произвольными разделами и промптом
  </div>
</div>

<div class="section" style="margin-top: 28px;">
  <h3>Структура веб-интерфейса</h3>
</div>

<div class="mockup">
  <div class="mockup-header">Основные экраны</div>
  <div class="mockup-body" style="padding: 0;">

    <!-- Nav -->
    <div style="background: #1e293b; color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px;">
      <div style="display: flex; gap: 20px; align-items: center;">
        <strong style="color: #60a5fa;">MeetingProto</strong>
        <span>Записи</span>
        <span>Протоколы</span>
        <span>Шаблоны</span>
        <span style="color: #94a3b8;">Настройки</span>
      </div>
      <div style="display: flex; align-items: center; gap: 12px; font-size: 12px;">
        <span style="color: #64748b;">Занято: 45.2 ГБ</span>
        <span>👤 admin</span>
      </div>
    </div>

    <!-- Recordings list -->
    <div style="padding: 20px;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
        <h3 style="margin: 0;">Записи</h3>
        <div style="display: flex; gap: 8px;">
          <button style="background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer;">+ Загрузить</button>
        </div>
      </div>

      <div style="font-size: 13px;">
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e2e8f0; font-weight: bold; color: #64748b;">
          <span>Название</span>
          <span>Источник</span>
          <span>Длительность</span>
          <span>Статус</span>
          <span>Действия</span>
        </div>
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f1f5f9;">
          <span>Обследование_КлиентА_2026-04-01.mp4</span>
          <span style="color: #8b5cf6;">🌐 Web</span>
          <span>01:23:45</span>
          <span><span style="background: #d1fae5; color: #065f46; padding: 2px 8px; border-radius: 10px; font-size: 11px;">Готово</span></span>
          <span style="color: #3b82f6;">Протокол | Скачать</span>
        </div>
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f1f5f9;">
          <span>standup_2026-04-02.ogg</span>
          <span style="color: #8b5cf6;">💬 Telegram</span>
          <span>00:15:32</span>
          <span><span style="background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 10px; font-size: 11px;">Транскрибация...</span></span>
          <span style="color: #94a3b8;">—</span>
        </div>
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f1f5f9;">
          <span>retro_sprint42.webm</span>
          <span style="color: #8b5cf6;">💬 Lensa</span>
          <span>00:45:10</span>
          <span><span style="background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 10px; font-size: 11px;">Протокол...</span></span>
          <span style="color: #94a3b8;">—</span>
        </div>
      </div>
    </div>

  </div>
</div>

<div class="section" style="margin-top: 20px;">
  <h3>Страницы интерфейса</h3>
  <div style="display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px;">
    <div style="background: #f1f5f9; padding: 12px; border-radius: 8px; flex: 1; min-width: 200px;">
      <strong>Записи</strong> — список, загрузка, статус обработки, фильтры по источнику/дате
    </div>
    <div style="background: #f1f5f9; padding: 12px; border-radius: 8px; flex: 1; min-width: 200px;">
      <strong>Протоколы</strong> — просмотр, редактирование, экспорт в DOCX/PDF/MD, перегенерация с другим шаблоном
    </div>
    <div style="background: #f1f5f9; padding: 12px; border-radius: 8px; flex: 1; min-width: 200px;">
      <strong>Шаблоны</strong> — управление промптами, создание кастомных шаблонов, предпросмотр
    </div>
    <div style="background: #f1f5f9; padding: 12px; border-radius: 8px; flex: 1; min-width: 200px;">
      <strong>Настройки</strong> — LLM провайдер/модель, retention period, очистка данных, API ключи, профиль
    </div>
  </div>
</div>