selfpost/docs/assets/panel-ui/index.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SelfPost — макеты панели</title>
<link rel="icon" href="../selfpost-icon-16.svg" type="image/svg+xml">
<link rel="stylesheet" href="mock.css">
</head>
<body class="doc">
<div class="wrap">

<header>
  <p class="eyebrow">макеты · не панель</p>
  <h1>Self<b>Post</b> — полное обновление интерфейса</h1>
  <p>Проект системы — как собирать экраны, чтобы не чинить пустые колонки, высоту полей и ряды кнопок по одному. Каждый экран — отдельная страница, не простыня с якорями. Знак и палитра из листа утверждения не меняются. HTML в <code>docs/assets/panel-ui/</code>, не вёрстка <code>internal/web</code>.</p>
  <div class="cta-row">
    <a class="cta" href="status.html">Открыть Status</a>
    <a class="cta quiet" href="system.html">Система интерфейса</a>
    <a class="cta quiet" href="status.html?view=phone">Аварийный телефон</a>
    <a class="cta quiet" href="status.html?theme=dark">Status, тёмная тема</a>
  </div>
</header>

<section>
  <h2>Система, не рескин</h2>
  <p>Первый click-through повторил сетку живой панели, поэтому те же сбои чинились по одному. <a href="system.html">Грамматика</a> задаёт регионы (<code>measure</code> / <code>pair</code> / <code>fill</code>), карточку со слотом справки, <code>field-row</code> (Host и Type одной высоты) и <code>actions-row</code>. Макеты собраны только из этого: один экран — один HTML-файл.</p>
</section>

<section>
  <h2>Ширина окна</h2>
  <p>Сейчас оболочка центрируется, колонка контента упирается в <code>64rem</code>, формы ещё уже — <code>48rem</code>. На широком мониторе поля пустые. Растянуть поля на 100% окна нельзя — они становятся нечитаемыми. Две независимые карточки рядом — можно.</p>
  <h3>Гибрид</h3>
  <p>Навигация прижата влево. Ops-страницы (Status, Deliveries, очередь, лог, Backup, Settings, DMARC, inbound) занимают остаток до <strong>90rem (~1440px)</strong>. Backup — полный бэкап ‖ импорт. Settings — учётные данные ‖ DMARC (у domain-admin остаётся одна узкая карточка). Таблица Users — <code>fill</code>. Одиночные формы (подтверждения, форма пользователя) остаются <strong>42rem и выровнены влево</strong>. Login и setup — по-прежнему узкий центрированный блок.</p>
  <div class="compare">
    <div>
      <div class="row">сейчас, окно ~1600px</div>
      <div class="bar">
        <i class="navc">nav</i>
        <i class="col" style="width:42%">64rem</i>
        <i class="empty">пусто</i>
      </div>
    </div>
    <div>
      <div class="row">макет, ops-страница</div>
      <div class="bar">
        <i class="navc">nav</i>
        <i class="fill">контент до 90rem</i>
      </div>
    </div>
    <div>
      <div class="row">макет, форма</div>
      <div class="bar">
        <i class="navc">nav</i>
        <i class="col" style="width:28%">42rem</i>
        <i class="empty">поле не растягивает инпуты</i>
      </div>
    </div>
  </div>
  <div class="note">На телефоне это не «узкий десктоп». Таблицы из шести колонок складываются в список. Навигация — выезжающая колонка на CSS-checkbox, без обязательного JavaScript (как панели Edit у приложений уже сейчас).</div>
</section>

<section>
  <h2>Информационная архитектура</h2>
  <div class="ia">
    <div>
      <h3>Global administrator</h3>
      <ul>
        <li>Status</li>
        <li>Domains → domain → delete</li>
        <li>Deliveries → message</li>
        <li>Mail queue</li>
        <li>System log</li>
        <li>Inbound <span class="tag">1.x</span> — скрыт, пока <code>INBOUND_RELAY_ENABLE</code> выключен</li>
        <li>DMARC reports <span class="tag future">candidate</span></li>
        <li>Backup, Users, Settings</li>
        <li>Help <span class="tag future">candidate</span> — пункт навбара и drawer с карточек Status и страницы домена</li>
      </ul>
    </div>
    <div>
      <h3>Domain-admin</h3>
      <ul>
        <li>Domains (только назначенные) → domain → DMARC reports этого домена</li>
        <li>Deliveries → message, включая пояснение retry</li>
        <li>Settings — только учётные данные панели</li>
        <li>Help drawer</li>
        <li>Нет Status, очереди, system log, Backup, Users, inbound, глобального DMARC hub</li>
      </ul>
    </div>
  </div>
  <p class="muted" style="margin-top:1rem">В прототипе роль, inbound-флаг, ширина и тема переключаются в шапке. <code>contributing</code> и <code>schema-squash</code> экранов не имеют.</p>
</section>

<section>
  <h2>Знак и новые иконки</h2>
  <p>Утверждённый stamp не заменяется. Для узкой шапки телефона предлагается уже существующий SP-значок (фавикон), а не компактный wordmark: на 390px высота важнее, чем прочитать «SelfPost» второй раз.</p>
  <div class="mark-row">
    <figure>
      <img src="../selfpost-stamp.svg" width="220" height="100" alt="Полный знак">
      <figcaption>эталон · login / setup</figcaption>
    </figure>
    <figure>
      <img src="../selfpost-stamp-compact.svg" width="160" height="73" alt="Компактный знак">
      <figcaption>колонка навбара</figcaption>
    </figure>
    <figure>
      <img src="../selfpost-icon.svg" width="64" height="64" alt="SP">
      <figcaption>телефон · шапка drawer</figcaption>
    </figure>
  </div>
  <h3>Иконки новых пунктов</h3>
  <p class="muted">Тот же штрих 1.5, что у Status / Domains. Не пиктограммы-эмодзи и не заливка.</p>
  <div class="icons-row">
    <div class="icon-card">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 9.5h11"/><path d="M8 2.75v6.2"/><path d="M5.4 6.4 8 9.05 10.6 6.4"/><path d="M3.2 12.6h9.6"/></svg>
      <span>Inbound</span>
    </div>
    <div class="icon-card">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.85 2.75 3.7v4.2c0 3.15 2.15 5.2 5.25 6.25 3.1-1.05 5.25-3.1 5.25-6.25V3.7Z"/><path d="M5.4 8.05 7.15 9.8 10.7 6.2"/></svg>
      <span>DMARC</span>
    </div>
    <div class="icon-card">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="6.25"/><path d="M8 7.2V11.4"/><path d="M8 5.05v.01"/></svg>
      <span>Help</span>
    </div>
  </div>
</section>

<section>
  <h2>Экраны</h2>
  <h3>Система</h3>
  <div class="screen-index">
    <a href="system.html">Грамматика и живые образцы</a>
  </div>
  <h3>Вход</h3>
  <div class="screen-index">
    <a href="login.html">Sign in</a>
    <a href="setup.html">Create administrator</a>
  </div>
  <h3>Текущая панель</h3>
  <div class="screen-index">
    <a href="status.html">Status</a>
    <a href="domains.html">Domains</a>
    <a href="domain.html">Domain detail</a>
    <a href="domain-delete.html">Delete domain</a>
    <a href="deliveries.html">Deliveries</a>
    <a href="delivery.html">Delivery (deferred + retries)</a>
    <a href="mail-queue.html">Mail queue + retry policy</a>
    <a href="system-log.html">System log</a>
    <a href="backup.html">Backup</a>
    <a href="users.html">Users</a>
    <a href="user-form.html">Edit user</a>
    <a href="user-delete.html">Delete user</a>
    <a href="settings.html">Settings</a>
  </div>
  <h3>Roadmap</h3>
  <div class="screen-index">
    <a href="mail-queue.html">queue-retries — карточка на Mail queue</a>
    <a href="delivery.html">queue-retries — history deferred</a>
    <a href="inbound.html">Inbound list (колонка DNS = MX)</a>
    <a href="inbound-domain.html">Inbound domain — DNS ok</a>
    <a href="inbound-backup.html">Inbound domain — DNS error</a>
    <a href="inbound-delete.html">Delete inbound domain</a>
    <a href="status.html?inbound=0">Inbound выключен (пункта нет)</a>
    <a href="dmarc.html">DMARC reports hub <span class="tag future">candidate</span></a>
    <a href="dmarc-domain.html">DMARC — domain roll-up</a>
    <a href="dmarc-report.html">DMARC report — aligned</a>
    <a href="dmarc-report-fail.html">DMARC report — third-party fail</a>
    <a href="help.html">Help <span class="tag future">candidate</span></a>
  </div>
  <h3>Аварийный телефон</h3>
  <div class="screen-index">
    <a href="status.html?view=phone">Status 390px — Overall, then queue/cert, then the rest</a>
    <a href="mail-queue.html?view=phone">Mail queue 390px</a>
    <a href="deliveries.html?view=phone">Deliveries 390px — список, не таблица</a>
    <a href="delivery.html?view=phone">Delivery 390px</a>
  </div>
</section>

<section style="border-bottom:none">
  <h2>Как смотреть</h2>
  <p>Откройте любой экран из списка — это отдельная страница, не якорь в одном файле. Шапка прототипа — не часть панели: роль, Desktop/Phone, inbound, светлая/тёмная. Копирайт экранов английский, как в продукте. Drawer Help открывается с «?» на Status или с карточек домена; на карточках остаются показания и колонка Detail.</p>
  <p class="muted">После утверждения макетов вёрстка <code>panel.css</code> и шаблонов — отдельная задача. CSP и progressive enhancement в этом HTML не воспроизводятся один в один: здесь допустимы вещи, которые в панели останутся в файле стилей.</p>
</section>

</div>
</body>
</html>