# AI Research Assistant Interface Based on your requirements, I'll create a clean, responsive web interface for an AI research assistant that specializes in web research and content extraction. === index.html === AI Research Assistant

AI Research Assistant

Zaawansowany asystent do badań internetowych i ekstrakcji treści

Jak mogę Ci pomóc?

Jestem specjalistą w badaniach internetowych i ekstrakcji treści. Wybierz jedną z poniższych opcji:

Wyszukiwanie informacji w internecie

Wprowadź zapytanie, a przeszukam internet w poszukiwaniu odpowiedzi.

Pobieranie treści ze strony

Podaj adres URL, a pobiorę i wyczyścę treść ze wskazanej strony.

Zapisywanie treści do pliku

Wybierz format i zapisz pobrane treści.

Moje narzędzia

Wyszukiwanie WWW

Przeszukuję internet na podstawie Twoich zapytań, priorytetyzując wiarygodne źródła.

Scrapowanie treści

Pobieram i czyszczę treści ze stron, usuwając reklamy, menu i elementy powtarzalne.

Zapisywanie plików

Zapisuję treści w wybranych formatach: Markdown, JSON lub PDF.

=== assets/css/styles.css === /* Reset i podstawowe style */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Nagłówek */ header { background: linear-gradient(135deg, #4a6fa5, #2a4e6c); color: white; padding: 2rem 0; text-align: center; margin-bottom: 2rem; } header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; } header p { font-size: 1.1rem; opacity: 0.9; } /* Sekcja wprowadzenia */ .intro { text-align: center; margin-bottom: 2rem; } .intro h2 { font-size: 2rem; margin-bottom: 1rem; color: #2a4e6c; } /* Zakładki */ .tabs { background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 3rem; } .tab-buttons { display: flex; border-bottom: 1px solid #e9ecef; } .tab-button { padding: 1rem 1.5rem; background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; color: #6c757d; transition: all 0.3s ease; } .tab-button:hover { background-color: #f8f9fa; color: #4a6fa5; } .tab-button.active { color: #4a6fa5; border-bottom: 3px solid #4a6fa5; } .tab-content { padding: 2rem; } .tab-pane { display: none; } .tab-pane.active { display: block; } /* Formularze */ .form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: 500; } input[type="text"], input[type="url"], textarea, select { width: 100%; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem; transition: border-color 0.3s; } input[type="text"]:focus, input[type="url"]:focus, textarea:focus, select:focus { outline: none; border-color: #4a6fa5; box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.25); } textarea { resize: vertical; min-height: 120px; } /* Przyciski */ .btn-primary { background-color: #4a6fa5; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s; } .btn-primary:hover { background-color: #3a5a80; } /* Wyniki */ .results-container { margin-top: 2rem; padding: 1.5rem; background-color: #f8f9fa; border-radius: 4px; border-left: 4px solid #4a6fa5; } .hidden { display: none; } .result-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e9ecef; } .result-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .result-title { font-weight: 600; color: #2a4e6c; margin-bottom: 0.25rem; } .result-url { color: #6c757d; font-size: 0.9rem; margin-bottom: 0.5rem; } .result-description { margin-bottom: 0.5rem; } /* Sekcja funkcji */ .features { margin-bottom: 3rem; } .features h2 { text-align: center; font-size: 2rem; margin-bottom: 2rem; color: #2a4e6c; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .feature-card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); text-align: center; transition: transform 0.3s ease; } .feature-card:hover { transform: translateY(-5px); } .feature-card h3 { color: #4a6fa5; margin-bottom: 1rem; } /* Stopka */ footer { background-color: #2a4e6c; color: white; text-align: center; padding: 1.5rem 0; margin-top: 3rem; } /* Responsywność */ @media (max-width: 768px) { .tab-buttons { flex-direction: column; } .tab-button { width: 100%; text-align: center; } .feature-grid { grid-template-columns: 1fr; } header h1 { font-size: 2rem; } } === assets/js/script.js === document.addEventListener('DOMContentLoaded', function() { // Obsługa zakładek const tabButtons = document.querySelectorAll('.tab-button'); const tabPanes = document.querySelectorAll('.tab-pane'); tabButtons.forEach(button => { button.addEventListener('click', () => { const tabId = button.getAttribute('data-tab'); // Usuń aktywną klasę ze wszystkich przycisków i paneli tabButtons.forEach(btn => btn.classList.remove('active')); tabPanes.forEach(pane => pane.classList.remove('active')); // Dodaj aktywną klasę do klikniętego przycisku i odpowiedniego panelu button.classList.add('active'); document.getElementById(`${tabId}-tab`).classList.add('active'); }); }); // Obsługa formularza wyszukiwania const searchForm = document.getElementById('search-form'); const searchResults = document.getElementById('search-results'); searchForm.addEventListener('submit', function(e) { e.preventDefault(); const query = document.getElementById('search-query').value.trim(); if (query) { // Symulacja wyszukiwania (w rzeczywistości połączyłoby się z API) simulateWebSearch(query); } }); // Obsługa formularza scrapowania const scrapeForm = document.getElementById('scrape-form'); const scrapeResults = document.getElementById('scrape-results'); scrapeForm.addEventListener('submit', function(e) { e.preventDefault(); const url = document.getElementById('scrape-url').value.trim(); if (url) { // Symulacja scrapowania (w rzeczywistości połączyłoby się z API) simulateWebScrape(url); } }); // Obsługa formularza zapisywania const saveForm = document.getElementById('save-form'); const saveResults = document.getElementById('save-results'); saveForm.addEventListener('submit', function(e) { e.preventDefault(); const content = document.getElementById('save-content').value.trim(); const format = document.getElementById('format-select').value; const filename = document.getElementById('filename').value.trim(); if (content && filename) { // Symulacja zapisywania (w rzeczywistości połączyłoby się z API) simulateSaveFile(content, format, filename); } }); // Funkcje symulujące działanie API function simulateWebSearch(query) { searchResults.innerHTML = '

Wyszukiwanie... (symulacja)

'; searchResults.classList.remove('hidden'); // Symulacja opóźnienia zapytania setTimeout(() => { const results = [ { title: 'Wynik wyszukiwania 1 dla: ' + query, url: 'https://przyklad.com/wynik-1', description: 'To jest przykładowy opis wyniku wyszukiwania. Zawiera istotne informacje na temat zapytania.' }, { title: 'Wynik wyszukiwania 2 dla: ' + query, url: 'https://przyklad.com/wynik-2', description: 'Kolejny przykładowy wynik wyszukiwania z odpowiednimi informacjami.' }, { title: 'Wynik wyszukiwania 3 dla: ' + query, url: 'https://przyklad.com/wynik-3', description: 'Trzeci przykładowy wynik zawierający wartościowe treści związane z zapytaniem.' } ]; displaySearchResults(results); }, 1500); } function displaySearchResults(results) { let html = '

Wyniki wyszukiwania:

'; results.forEach(result => { html += `
${result.title}
${result.url}
${result.description}
`; }); searchResults.innerHTML = html; // Dodanie obsługi przycisków do scrapowania z wyników document.querySelectorAll('.scrape-from-result').forEach(button => { button.addEventListener('click', function() { const url = this.getAttribute('data-url'); document.getElementById('scrape-url').value = url; // Przełączenie na zakładkę scrapowania document.querySelector('[data-tab="scrape"]').click(); // Automatyczne uruchomienie scrapowania simulateWebScrape(url); }); }); } function simulateWebScrape(url) { scrapeResults.innerHTML = '

Pobieranie treści... (symulacja)

'; scrapeResults.classList.remove('hidden'); // Symulacja opóźnienia scrapowania setTimeout(() => { const content = `

Przykładowa treść pobrana z: ${url}

To jest symulowana treść artykułu pobrana ze wskazanej strony internetowej. W rzeczywistym scenariuszu ta treść zostałaby pobrana, wyczyszczona z elementów takich jak reklamy, menu nawigacyjne i komentarze.

Treść została przetworzona w celu zachowania tylko istotnych informacji z artykułu, zgodnie z zasadami robots.txt i warunkami serwisu.

`; scrapeResults.innerHTML = content; // Dodanie obsługi przycisku zapisywania document.querySelector('.save-scraped-content').addEventListener('click', function() { const content = this.getAttribute('data-content'); document.getElementById('save-content').value = content; // Przełączenie na zakładkę zapisywania document.querySelector('[data-tab="save"]').click(); }); }, 2000); } function simulateSaveFile(content, format, filename) { saveResults.innerHTML = '

Zapisywanie pliku... (symulacja)

'; saveResults.classList.remove('hidden'); // Symulacja opóźnienia zapisywania setTimeout(() => { const fullFilename = `${filename}.${format}`; saveResults.innerHTML = `

Plik został zapisany!

Treść została pomyślnie zapisana jako ${fullFilename}

W rzeczywistym scenariuszu plik zostałby pobrany na Twój komputer.

`; // Reset formularza document.getElementById('save-form').reset(); }, 1500); } });