diff --git a/webui/app.js b/webui/app.js index b52d5e9..8eff7fe 100644 --- a/webui/app.js +++ b/webui/app.js @@ -144,6 +144,19 @@ function renderContinuous(data) { document.getElementById("continuous-logs").textContent = (status.logs || []).join("\n") || "Логов пока нет."; } +function setupTabs() { + const tabs = document.querySelectorAll(".content-tab"); + const panels = document.querySelectorAll(".tab-panel"); + + tabs.forEach((tab) => { + tab.addEventListener("click", () => { + const targetId = tab.dataset.tabTarget; + tabs.forEach((item) => item.classList.toggle("active", item === tab)); + panels.forEach((panel) => panel.classList.toggle("active", panel.id === targetId)); + }); + }); +} + async function refreshDashboard() { const data = await api("/api/dashboard"); const authData = await api("/api/auth"); @@ -157,6 +170,8 @@ async function refreshDashboard() { } async function main() { + setupTabs(); + document.getElementById("scrape-all-btn").addEventListener("click", async (event) => { setBusy(event.currentTarget, true); try { diff --git a/webui/index.html b/webui/index.html index 077b0c2..8789f17 100644 --- a/webui/index.html +++ b/webui/index.html @@ -68,99 +68,117 @@
-
-
-
Каналы
-
0
-
-
-
Media scraping
- -
-
-
Forwarding rules
-
0
-
+
+ + +
+ +
+
+
+
Каналы
+
0
+
+
+
Media scraping
+ +
+
+
Forwarding rules
+
0
+
+
+ +
+
+
+

Отслеживаемые каналы

+

Берутся из data/state.json, статистика подтягивается из SQLite.

+
+
+ + + +
+
+ +
+ + + + + + + + + + + +
КаналСообщенийМедиаПоследнее сообщениеДействия
+
+
+ +
+
+
+

Фоновые задачи

+

Очередь простая: задачи выполняются по одной, чтобы не драться за Telegram session.

+
+ +
+
+
-
-
-
-

Отслеживаемые каналы

-

Берутся из data/state.json, статистика подтягивается из SQLite.

+
+
+
+
+

Continuous Scraping

+

Основной long-running режим: периодически перескрапливает каналы и сохраняет лог цикла.

+
-
- - - + + + + + + +
-
-
- - - - - - - - - - - -
КаналСообщенийМедиаПоследнее сообщениеДействия
-
-
- -
-
-
-

Фоновые задачи

-

Очередь простая: задачи выполняются по одной, чтобы не драться за Telegram session.

+
+
Статус: —
+
Последний цикл: —
+
Последняя ошибка: —
- -
-
-
-
-
-
-

Continuous Scraping

-

Периодически перескрапливает каналы и пишет лог прямо в панель.

-
-
- -
- - - - - -
- -
-
Статус: —
-
Последний цикл: —
-
Последняя ошибка: —
-
- - 

+            

+          

         

       

     
diff --git a/webui/style.css b/webui/style.css
index 0e681dc..2df08d0 100644
--- a/webui/style.css
+++ b/webui/style.css
@@ -58,6 +58,34 @@ button {
   padding: 24px;
 }
 
+.content-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.content-tab {
+  border: 1px solid var(--line);
+  background: var(--panel);
+  color: var(--text);
+  padding: 10px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.content-tab.active {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
 .brand-block h1,
 .viewer-sidebar-head h1,
 .viewer-header h2,
@@ -165,6 +193,61 @@ button {
   gap: 12px;
 }
 
+.switch {
+  position: relative;
+  display: inline-flex;
+  width: 46px;
+  min-width: 46px;
+  height: 28px;
+}
+
+.switch input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.switch-slider {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: #0d141c;
+  border: 1px solid var(--line);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.switch-slider::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #c9d4df;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.switch input:checked + .switch-slider {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+.switch input:checked + .switch-slider::before {
+  transform: translateX(18px);
+  background: white;
+}
+
+.switch input:focus-visible + .switch-slider {
+  outline: 2px solid rgba(83, 167, 255, 0.45);
+  outline-offset: 2px;
+}
+
 .panel {
   padding: 18px;
   margin-bottom: 16px;