feat(ui): add archive/api data source switch

web/static/css/style.css

@@ -40,6 +40,35 @@ main {
 }
 
 /* Upload section */
+.source-switch {
+    display: inline-flex;
+    gap: 0.25rem;
+    background: #e9ecef;
+    border-radius: 8px;
+    padding: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+.source-switch-btn {
+    border: none;
+    background: transparent;
+    color: #495057;
+    padding: 0.45rem 0.9rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.source-switch-btn:hover {
+    background: #dee2e6;
+}
+
+.source-switch-btn.active {
+    background: #3498db;
+    color: #fff;
+}
+
 .upload-area {
     border: 2px dashed #ccc;
     border-radius: 8px;
@@ -74,6 +103,15 @@ main {
     color: #888;
 }
 
+.api-placeholder {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 2rem;
+    text-align: center;
+    color: #555;
+}
+
 #upload-status {
     margin-top: 1rem;
     text-align: center;

web/static/js/app.js

@@ -1,12 +1,39 @@
 // LOGPile Frontend Application
 
 document.addEventListener('DOMContentLoaded', () => {
+    initSourceType();
     initUpload();
     initTabs();
     initFilters();
     loadParsersInfo();
 });
 
+let sourceType = 'archive';
+
+function initSourceType() {
+    const sourceButtons = document.querySelectorAll('.source-switch-btn');
+    sourceButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            setSourceType(button.dataset.sourceType);
+        });
+    });
+
+    setSourceType(sourceType);
+}
+
+function setSourceType(nextType) {
+    sourceType = nextType === 'api' ? 'api' : 'archive';
+
+    document.querySelectorAll('.source-switch-btn').forEach(button => {
+        button.classList.toggle('active', button.dataset.sourceType === sourceType);
+    });
+
+    const archiveContent = document.getElementById('archive-source-content');
+    const apiPlaceholder = document.getElementById('api-source-placeholder');
+    archiveContent.classList.toggle('hidden', sourceType !== 'archive');
+    apiPlaceholder.classList.toggle('hidden', sourceType !== 'api');
+}
+
 // Load and display available parsers
 async function loadParsersInfo() {
     try {

web/templates/index.html

@@ -14,6 +14,12 @@
 
     <main>
         <section id="upload-section">
+            <div class="source-switch" role="tablist" aria-label="Источник данных">
+                <button type="button" class="source-switch-btn active" data-source-type="archive">Архив</button>
+                <button type="button" class="source-switch-btn" data-source-type="api">API</button>
+            </div>
+
+            <div id="archive-source-content">
                 <div class="upload-area" id="drop-zone">
                     <p>Перетащите архив сюда или</p>
                     <input type="file" id="file-input" accept="application/gzip,application/x-gzip,application/x-tar,application/zip" hidden>
@@ -22,6 +28,11 @@
                 </div>
                 <div id="upload-status"></div>
                 <div id="parsers-info" class="parsers-info"></div>
+            </div>
+
+            <div id="api-source-placeholder" class="api-placeholder hidden">
+                <p>Подключение по API будет реализовано на следующих шагах.</p>
+            </div>
         </section>
 
         <section id="data-section" class="hidden">