Add tabbed navigation and update styles for content panels

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 {

webui/index.html

@@ -68,6 +68,12 @@
       </aside>
 
       <main class="content">
+        <div class="content-tabs">
+          <button class="content-tab active" data-tab-target="overview-tab" type="button">Overview</button>
+          <button class="content-tab" data-tab-target="continuous-tab" type="button">Continuous</button>
+        </div>
+
+        <section id="overview-tab" class="tab-panel active">
           <section class="panel-grid">
             <div class="panel stat-panel">
               <div class="section-title">Каналы</div>
@@ -77,7 +83,10 @@
               <div class="section-title">Media scraping</div>
               <label class="toggle-row">
                 <span id="scrape-media-label">OFF</span>
+                <span class="switch">
                   <input id="scrape-media-toggle" type="checkbox" />
+                  <span class="switch-slider"></span>
+                </span>
               </label>
             </div>
             <div class="panel stat-panel">
@@ -125,19 +134,24 @@
             </div>
             <div id="jobs-list" class="jobs-list"></div>
           </section>
+        </section>
 
+        <section id="continuous-tab" class="tab-panel">
           <section class="panel">
             <div class="panel-header">
               <div>
                 <h2>Continuous Scraping</h2>
-              <p class="muted">Периодически перескрапливает каналы и пишет лог прямо в панель.</p>
+                <p class="muted">Основной long-running режим: периодически перескрапливает каналы и сохраняет лог цикла.</p>
               </div>
             </div>
 
             <form id="continuous-form" class="continuous-form">
               <label class="toggle-row">
                 <span>Включить</span>
+                <span class="switch">
                   <input id="continuous-enabled" type="checkbox" />
+                  <span class="switch-slider"></span>
+                </span>
               </label>
               <label class="stack-form">
                 <span class="muted small">Интервал, минут</span>
@@ -145,7 +159,10 @@
               </label>
               <label class="toggle-row">
                 <span>Все отслеживаемые каналы</span>
+                <span class="switch">
                   <input id="continuous-all" type="checkbox" checked />
+                  <span class="switch-slider"></span>
+                </span>
               </label>
               <label class="stack-form">
                 <span class="muted small">Если выключить опцию выше, сюда можно вписать ID каналов через запятую</span>
@@ -162,6 +179,7 @@
 
             <pre id="continuous-logs" class="job-logs"></pre>
           </section>
+        </section>
       </main>
     </div>
 

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;