bep40/web-scraper-pro
0
1// Shared JavaScript across all pages2console.log('Web Scraper Pro loaded');3 4// DOM Elements5const scraperForm = document.getElementById('scraperForm');6const urlInput = document.getElementById('urlInput');7const loading = document.getElementById('loading');8const results = document.getElementById('results');9const error = document.getElementById('error');10const errorMessage = document.getElementById('errorMessage');11const articleContent = document.getElementById('articleContent');12const imageGallery = document.getElementById('imageGallery');13 14// Form submission handler15scraperForm.addEventListener('submit', async (e) => {16 e.preventDefault();17 18 const url = urlInput.value.trim();19 if (!url) return;20 21 // Show loading state22 showLoading();23 hideResults();24 hideError();25 26 try {27 // Note: In a real implementation, you would call a backend API28 // For demo purposes, we'll simulate the scraping process29 await simulateScraping(url);30 } catch (err) {31 showError('Failed to extract content. Please check the URL and try again.');32 }33});34 35// Simulate scraping process (replace with actual API call)36async function simulateScraping(url) {37 // Simulate API delay38 await new Promise(resolve => setTimeout(resolve, 2000));39 40 // Hide loading41 hideLoading();42 43 // For demo purposes, we'll show sample content44 // In a real implementation, you would call your scraping API here45 displaySampleResults();46}47 48// Display sample results for demo49function displaySampleResults() {50 // Sample article content51 articleContent.innerHTML = `52 <h1>Sample Article Title</h1>53 <p class="text-gray-500 mb-6">Extracted from: ${urlInput.value}</p>54 55 <h2>Introduction</h2>56 <p>This is a sample demonstration of how extracted content would appear. In a real implementation, this would be the actual content from the provided URL.</p>57 58 <h2>Main Content</h2>59 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>60 61 <ul>62 <li>First extracted paragraph</li>63 <li>Second extracted paragraph</li>64 <li>Third extracted paragraph with more details</li>65 </ul>66 67 <h2>Conclusion</h2>68 <p>This demonstrates the web scraping capability. The actual implementation would connect to a backend service that extracts real content.</p>69 `;70 71 // Sample images72 imageGallery.innerHTML = `73 <div class="gallery-image">74 <img src="http://static.photos/technology/640x360/1" alt="Sample image 1" class="w-full h-48 object-cover">75 </div>76 <div class="gallery-image">77 <img src="http://static.photos/office/640x360/2" alt="Sample image 2" class="w-full h-48 object-cover">78 </div>79 <div class="gallery-image">80 <img src="http://static.photos/nature/640x360/3" alt="Sample image 3" class="w-full h-48 object-cover">81 </div>82 `;83 84 // Show results with animation85 showResults();86}87 88// UI Control Functions89function showLoading() {90 loading.classList.remove('hidden');91}92 93function hideLoading() {94 loading.classList.add('hidden');95}96 97function showResults() {98 results.classList.remove('hidden');99 results.classList.add('fade-in');100}101 102function hideResults() {103 results.classList.add('hidden');104 results.classList.remove('fade-in');105}106 107function showError(message) {108 errorMessage.textContent = message;109 error.classList.remove('hidden');110 hideLoading();111}112 113function hideError() {114 error.classList.add('hidden');115}116 117function clearResults() {118 urlInput.value = '';119 hideResults();120 hideError();121 hideLoading();122}123 124// Initialize the application125document.addEventListener('DOMContentLoaded', function() {126 console.log('Web Scraper Pro initialized');127 feather.replace();128});