Add EGE support prototype v0.1.0

public/index.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Поддержка ЕГЭ · Обращения</title>
+    <link rel="stylesheet" href="/styles.css">
+    <script src="/app.js" defer></script>
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="topbar-inner">
+        <span class="product">Поддержка ЕГЭ</span>
+        <div class="header-actions">
+          <span id="mode" class="mode">Загрузка</span>
+          <button id="panel-exit" class="header-button" type="button">Выход</button>
+        </div>
+      </div>
+    </header>
+    <main id="panel-view">
+      <h1>Обращения в поддержку</h1>
+      <nav class="page-actions" aria-label="Чаты поддержки">
+        <a class="secondary" href="/site-chat" target="_blank" rel="noopener">Чат пользователей</a>
+        <a class="secondary" href="/staff-chat" target="_blank" rel="noopener">Чат сотрудников</a>
+      </nav>
+      <div class="workspace">
+        <section class="panel intake" aria-labelledby="intake-title">
+          <h2 id="intake-title">Ручной ввод</h2>
+          <label for="example">Учебный пример</label>
+          <select id="example" disabled>
+            <option value="">Выбрать из списка</option>
+          </select>
+          <form id="intake-form">
+            <label for="actor">Кто обратился</label>
+            <select id="actor" name="actor" required disabled></select>
+            <label for="message">Текст сообщения</label>
+            <textarea id="message" name="message" rows="7" maxlength="4000" required placeholder="Вставьте текст из чата" disabled></textarea>
+            <p class="note">Используйте учебные или обезличенные сообщения.</p>
+            <button id="submit" type="submit" disabled>Обработать и записать</button>
+          </form>
+          <p class="feedback" id="intake-feedback" aria-live="polite"></p>
+        </section>
+
+        <section class="panel queue" aria-labelledby="queue-title">
+          <div class="queue-header">
+            <div>
+              <h2 id="queue-title">Очередь</h2>
+              <p class="note" id="counter">Загрузка обращений</p>
+            </div>
+            <div class="queue-actions">
+              <a class="secondary" href="/export.csv" download>Скачать CSV</a>
+              <button class="secondary clear-button" type="button" id="clear-buffer" disabled>Очистить буфер</button>
+            </div>
+          </div>
+          <div class="queue-filters" aria-label="Папки очереди" role="group">
+            <button class="queue-filter" type="button" id="regular-filter" aria-pressed="true">Обращения</button>
+            <button class="queue-filter" type="button" id="spam-filter" aria-pressed="false">Спам</button>
+          </div>
+          <div id="empty" class="empty" hidden>
+            <p id="empty-title">Обращений пока нет</p>
+            <span id="empty-note">Они появятся после отправки из чата или ручного ввода.</span>
+          </div>
+          <div class="table-scroll" id="table-container" hidden>
+            <table role="table" aria-label="Журнал обращений">
+              <thead>
+                <tr><th scope="col">Обращение</th><th scope="col">Категория</th><th scope="col">Очередь</th><th scope="col">Статус</th></tr>
+              </thead>
+              <tbody id="ticket-rows"></tbody>
+            </table>
+          </div>
+          <div id="ticket-detail" class="ticket-detail" hidden></div>
+          <p class="feedback" id="queue-feedback" aria-live="polite"></p>
+        </section>
+      </div>
+    </main>
+    <main id="panel-exit-view" class="exit-view" hidden>
+      <section class="panel">
+        <h1>Вы вышли</h1>
+        <button type="button" id="panel-return">Вернуться к работе</button>
+      </section>
+    </main>
+  </body>
+</html>