Spaces:

Jensin
/

linked-agent

Running

App Files Files Community

Jensin commited on Jun 26

Commit

2566d19

verified ·

1 Parent(s): 8f29d1d

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LinkedIn Profile Scraper | 10K Profiles per Batch</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { theme: { extend: { colors: { linkedin: '#0A66C2', primary: '#0A66C2', secondary: '#378FE9', accent: '#16437E', dark: '#1D2226', light: '#F5F5F5' } } } } </script> <style> .scraper-card { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border-radius: 16px; transition: all 0.3s ease; } .scraper-card:hover { transform: translateY(-5px); box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15); } .progress-bar { height: 8px; border-radius: 4px; overflow: hidden; background-color: #e0e0e0; } .progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #0A66C2, #378FE9); transition: width 0.5s ease; } .profile-card { transition: all 0.2s ease; border-left: 4px solid #0A66C2; } .profile-card:hover { transform: translateX(5px); background-color: #f8fafc; } .scrape-btn { background: linear-gradient(135deg, #0A66C2, #16437E); transition: all 0.3s ease; } .scrape-btn:hover { transform: scale(1.02); box-shadow: 0 10px 20px -5px rgba(10, 102, 194, 0.4); } .scrape-btn:active { transform: scale(0.98); } .tab-btn { transition: all 0.2s ease; border-bottom: 3px solid transparent; } .tab-btn.active { border-bottom-color: #0A66C2; color: #0A66C2; } .result-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .result-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .floating-notification { animation: floatUp 0.5s ease-out forwards; } @keyframes floatUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body class="bg-gray-50 min-h-screen">  <header class="bg-white shadow-sm"> <div class="container mx-auto px-4 py-4 flex justify-between items-center"> <div class="flex items-center"> <div class="bg-primary p-2 rounded-lg mr-3"> <i class="fab fa-linkedin text-white text-2xl"></i> </div> <h1 class="text-2xl font-bold text-gray-800">LinkedIn<span class="text-primary">Scraper</span></h1> </div> <nav> <ul class="hidden md:flex space-x-6"> <li><a href="#" class="text-gray-600 hover:text-primary font-medium">Dashboard</a></li> <li><a href="#" class="text-gray-600 hover:text-primary font-medium">Scrape History</a></li> <li><a href="#" class="text-gray-600 hover:text-primary font-medium">API</a></li> <li><a href="#" class="text-gray-600 hover:text-primary font-medium">Help</a></li> </ul> <button class="md:hidden text-gray-600"> <i class="fas fa-bars text-xl"></i> </button> </nav> <div class="flex items-center"> <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg font-medium flex items-center"> <i class="fas fa-user-plus mr-2"></i> Upgrade </button> <div class="ml-4 relative"> <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center cursor-pointer"> <i class="fas fa-user text-gray-600"></i> </div> </div> </div> </div> </header>  <main class="container mx-auto px-4 py-8"> <div class="text-center mb-10"> <h2 class="text-4xl font-bold text-gray-800 mb-3">LinkedIn Profile Scraper</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto">Extract up to 10,000 LinkedIn profiles per batch with professional details including name, title, company, location, and more.</p> </div>  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 mb-8"> <div class="scraper-card bg-white p-6 rounded-xl"> <div class="flex justify-between items-center"> <div> <p class="text-gray-500 text-sm">Total Scraped</p> <h3 class="text-2xl font-bold text-gray-800">124,856</h3> </div> <div class="bg-blue-100 p-3 rounded-lg"> <i class="fas fa-database text-primary text-xl"></i> </div> </div> </div> <div class="scraper-card bg-white p-6 rounded-xl"> <div class="flex justify-between items-center"> <div> <p class="text-gray-500 text-sm">This Month</p> <h3 class="text-2xl font-bold text-gray-800">8,420</h3> </div> <div class="bg-green-100 p-3 rounded-lg"> <i class="fas fa-chart-line text-green-500 text-xl"></i> </div> </div> </div> <div class="scraper-card bg-white p-6 rounded-xl"> <div class="flex justify-between items-center"> <div> <p class="text-gray-500 text-sm">Batch Size</p> <h3 class="text-2xl font-bold text-gray-800">10,000</h3> </div> <div class="bg-purple-100 p-3 rounded-lg"> <i class="fas fa-layer-group text-purple-500 text-xl"></i> </div> </div> </div> <div class="scraper-card bg-white p-6 rounded-xl"> <div class="flex justify-between items-center"> <div> <p class="text-gray-500 text-sm">Success Rate</p> <h3 class="text-2xl font-bold text-gray-800">98.7%</h3> </div> <div class="bg-yellow-100 p-3 rounded-lg"> <i class="fas fa-check-circle text-yellow-500 text-xl"></i> </div> </div> </div> </div>  <div class="scraper-card bg-white p-6 md:p-8 rounded-xl mb-8"> <div class="flex flex-wrap mb-6 border-b"> <button class="tab-btn px-4 py-2 font-medium text-gray-600 mr-4 active">New Scrape</button> <button class="tab-btn px-4 py-2 font-medium text-gray-600 mr-4">Saved Templates</button> <button class="tab-btn px-4 py-2 font-medium text-gray-600">Advanced Filters</button> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-6"> <div> <label class="block text-gray-700 font-medium mb-2">Search Keywords</label> <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="e.g., Software Engineer, Marketing Manager"> </div> <div> <label class="block text-gray-700 font-medium mb-2">Location</label> <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="e.g., United States, San Francisco"> </div> <div> <label class="block text-gray-700 font-medium mb-2">Industry</label> <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> <option value="">All Industries</option> <option value="it">Information Technology</option> <option value="finance">Finance</option> <option value="healthcare">Healthcare</option> <option value="education">Education</option> <option value="marketing">Marketing</option> </select> </div> <div> <label class="block text-gray-700 font-medium mb-2">Company Size</label> <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> <option value="">All Sizes</option> <option value="1-10">1-10 employees</option> <option value="11-50">11-50 employees</option> <option value="51-200">51-200 employees</option> <option value="201-500">201-500 employees</option> <option value="501+">501+ employees</option> </select> </div> </div> <div class="mb-6"> <label class="block text-gray-700 font-medium mb-2">Number of Profiles</label> <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4"> <input type="range" min="100" max="10000" step="100" value="5000" class="w-full sm:mr-4" id="profileRange"> <div class="bg-gray-100 px-4 py-2 rounded-lg w-full sm:w-auto text-center"> <span id="profileCount">5,000</span> profiles </div> </div> <div class="text-sm text-gray-500 mt-2">Max 10,000 profiles per batch</div> </div> <div class="flex flex-wrap items-center justify-between"> <div class="flex items-center mb-4 md:mb-0"> <input type="checkbox" id="includeContact" class="mr-2 h-5 w-5 text-primary rounded focus:ring-primary"> <label for="includeContact" class="text-gray-700">Include contact information</label> </div> <button id="scrapeBtn" class="scrape-btn text-white px-8 py-3 rounded-lg font-semibold flex items-center w-full sm:w-auto justify-center"> <i class="fas fa-bolt mr-2"></i> Start Scraping </button> </div> </div>  <div id="progressSection" class="scraper-card bg-white p-6 md:p-8 rounded-xl mb-8 hidden"> <h3 class="text-xl font-bold text-gray-800 mb-4">Scraping in Progress</h3> <div class="mb-4"> <div class="flex justify-between mb-2"> <span class="text-gray-700">Extracting profiles...</span> <span id="progressPercent" class="text-primary font-medium">0%</span> </div> <div class="progress-bar"> <div id="progressFill" class="progress-fill" style="width: 0%"></div> </div> </div> <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mt-6"> <div class="text-center p-4 bg-gray-50 rounded-lg"> <div class="text-2xl font-bold text-primary" id="profilesScraped">0</div> <div class="text-gray-600">Profiles Scraped</div> </div> <div class="text-center p-4 bg-gray-50 rounded-lg"> <div class="text-2xl font-bold text-green-500" id="successRate">0%</div> <div class="text-gray-600">Success Rate</div> </div> <div class="text-center p-4 bg-gray-50 rounded-lg"> <div class="text-2xl font-bold text-gray-800" id="timeElapsed">0s</div> <div class="text-gray-600">Time Elapsed</div> </div> <div class="text-center p-4 bg-gray-50 rounded-lg"> <div class="text-2xl font-bold text-gray-800" id="timeRemaining">~30s</div> <div class="text-gray-600">Estimated Time</div> </div> </div> </div>  <div id="resultsSection" class="hidden"> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6"> <h3 class="text-2xl font-bold text-gray-800">Scraping Results</h3> <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 w-full sm:w-auto"> <button class="bg-white border border-gray-300 px-4 py-2 rounded-lg font-medium flex items-center"> <i class="fas fa-download mr-2"></i> Export CSV </button> <button class="bg-white border border-gray-300 px-4 py-2 rounded-lg font-medium flex items-center"> <i class="fas fa-file-excel mr-2"></i> Export Excel </button> </div> </div> <div class="result-grid mb-8">  </div> <div class="flex justify-between items-center bg-white p-4 rounded-lg"> <div class="text-gray-600"> Showing <span id="showingCount">10</span> of <span id="totalCount">5,000</span> profiles </div> <div class="flex flex-wrap justify-center gap-2"> <button class="px-4 py-2 bg-gray-100 rounded-lg"> <i class="fas fa-chevron-left"></i> </button> <button class="px-4 py-2 bg-primary text-white rounded-lg">1</button> <button class="px-4 py-2 bg-gray-100 rounded-lg">2</button> <button class="px-4 py-2 bg-gray-100 rounded-lg">3</button> <button class="px-4 py-2 bg-gray-100 rounded-lg">...</button> <button class="px-4 py-2 bg-gray-100 rounded-lg">50</button> <button class="px-4 py-2 bg-gray-100 rounded-lg"> <i class="fas fa-chevron-right"></i> </button> </div> </div> </div>  <div id="notification" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg hidden"> <i class="fas fa-check-circle mr-2"></i> <span>Scraping completed successfully!</span> </div> </main>  <footer class="bg-dark text-gray-300 py-8 mt-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"> <div> <h4 class="text-white text-lg font-semibold mb-4">LinkedIn Scraper</h4> <p class="mb-4">Professional LinkedIn data extraction tool for recruiters, marketers, and sales professionals.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a> </div> </div> <div> <h4 class="text-white text-lg font-semibold mb-4">Features</h4> <ul class="space-y-2"> <li><a href="#" class="hover:text-white">Profile Scraping</a></li> <li><a href="#" class="hover:text-white">Company Data</a></li> <li><a href="#" class="hover:text-white">Email Extraction</a></li> <li><a href="#" class="hover:text-white">Bulk Processing</a></li> </ul> </div> <div> <h4 class="text-white text-lg font-semibold mb-4">Resources</h4> <ul class="space-y-2"> <li><a href="#" class="hover:text-white">Documentation</a></li> <li><a href="#" class="hover:text-white">API Reference</a></li> <li><a href="#" class="hover:text-white">Tutorials</a></li> <li><a href="#" class="hover:text-white">Blog</a></li> </ul> </div> <div> <h4 class="text-white text-lg font-semibold mb-4">Legal</h4> <ul class="space-y-2"> <li><a href="#" class="hover:text-white">Privacy Policy</a></li> <li><a href="#" class="hover:text-white">Terms of Service</a></li> <li><a href="#" class="hover:text-white">Compliance</a></li> <li><a href="#" class="hover:text-white">GDPR</a></li> </ul> </div> </div> <div class="border-t border-gray-700 mt-8 pt-6 text-center"> <p>© 2023 LinkedInScraper. All rights reserved.</p> </div> </div> </footer> <script> // DOM Elements const profileRange = document.getElementById('profileRange'); const profileCount = document.getElementById('profileCount'); const scrapeBtn = document.getElementById('scrapeBtn'); const progressSection = document.getElementById('progressSection'); const resultsSection = document.getElementById('resultsSection'); const progressFill = document.getElementById('progressFill'); const progressPercent = document.getElementById('progressPercent'); const profilesScraped = document.getElementById('profilesScraped'); const successRate = document.getElementById('successRate'); const timeElapsed = document.getElementById('timeElapsed'); const timeRemaining = document.getElementById('timeRemaining'); const notification = document.getElementById('notification'); const resultGrid = document.querySelector('.result-grid'); // Update profile count display profileRange.addEventListener('input', function() { const count = parseInt(this.value).toLocaleString(); profileCount.textContent = count; }); // Scrape button handler scrapeBtn.addEventListener('click', function() { // Show progress section progressSection.classList.remove('hidden'); // Hide results if shown resultsSection.classList.add('hidden'); // Reset progress let progress = 0; let elapsed = 0; let scraped = 0; const totalProfiles = parseInt(profileRange.value); const successPercent = 98 + Math.random() * 1.3; // Random success rate between 98-99.3% // Start progress simulation const interval = setInterval(() => { progress += 1; elapsed += 1; scraped = Math.floor(totalProfiles * (progress/100)); // Update progress bar progressFill.style.width = `${progress}%`; progressPercent.textContent = `${progress}%`; profilesScraped.textContent = scraped.toLocaleString(); successRate.textContent = `${successPercent.toFixed(1)}%`; timeElapsed.textContent = `${elapsed}s`; // Calculate remaining time const remaining = Math.max(1, Math.floor((100 - progress) * elapsed / progress)); timeRemaining.textContent = `~${remaining}s`; // When progress completes if (progress >= 100) { clearInterval(interval); // Show notification notification.classList.remove('hidden'); notification.classList.add('floating-notification'); // Hide notification after 3 seconds setTimeout(() => { notification.classList.add('hidden'); notification.classList.remove('floating-notification'); }, 3000); // Show results after a delay setTimeout(() => { progressSection.classList.add('hidden'); resultsSection.classList.remove('hidden'); populateResults(totalProfiles); }, 1000); } }, 50); // Update every 50ms }); // Populate results with mock data function populateResults(total) { // Clear existing results resultGrid.innerHTML = ''; // Update counts document.getElementById('showingCount').textContent = '10'; document.getElementById('totalCount').textContent = total.toLocaleString(); // Generate mock profile cards const titles = [ 'Senior Software Engineer', 'Marketing Director', 'Product Manager', 'Data Scientist', 'UX Designer', 'Sales Executive', 'HR Specialist', 'Financial Analyst', 'Operations Manager', 'Content Strategist' ]; const companies = [ 'Google', 'Microsoft', 'Amazon', 'Apple', 'Meta', 'Netflix', 'Adobe', 'Salesforce', 'IBM', 'Intel' ]; const locations = [ 'San Francisco, CA', 'New York, NY', 'Seattle, WA', 'Austin, TX', 'Boston, MA', 'Chicago, IL', 'Los Angeles, CA' ]; for (let i = 0; i < 10; i++) { const title = titles[Math.floor(Math.random() * titles.length)]; const company = companies[Math.floor(Math.random() * companies.length)]; const location = locations[Math.floor(Math.random() * locations.length)]; const card = document.createElement('div'); card.className = 'profile-card bg-white p-5 rounded-lg shadow-sm'; card.innerHTML = ` <div class="flex items-start mb-4"> <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" /> <div class="ml-4"> <h4 class="font-bold text-lg text-gray-800">${getRandomName()}</h4> <p class="text-gray-600">${title} at ${company}</p> </div> </div> <div class="grid grid-cols-2 gap-3 mb-4"> <div class="flex items-center"> <i class="fas fa-building text-gray-500 mr-2"></i> <span>${company}</span> </div> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> <span>${location}</span> </div> <div class="flex items-center"> <i class="fas fa-briefcase text-gray-500 mr-2"></i> <span>${Math.floor(Math.random() * 15) + 3} years exp</span> </div> <div class="flex items-center"> <i class="fas fa-user-friends text-gray-500 mr-2"></i> <span>${(Math.floor(Math.random() * 500) + 100).toLocaleString()}+ connections</span> </div> </div> <div class="flex justify-between"> <button class="text-primary hover:text-secondary font-medium"> <i class="fas fa-envelope mr-1"></i> Contact </button> <button class="text-gray-600 hover:text-gray-800"> <i class="fas fa-save mr-1"></i> Save Profile </button> </div> `; resultGrid.appendChild(card); } } // Generate random names function getRandomName() { const firstNames = ['James', 'Mary', 'John', 'Patricia', 'Robert', 'Jennifer', 'Michael', 'Linda', 'William', 'Elizabeth']; const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez']; const firstName = firstNames[Math.floor(Math.random() * firstNames.length)]; const lastName = lastNames[Math.floor(Math.random() * lastNames.length)]; return `${firstName} ${lastName}`; } </script> </body> </html> - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +843 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Linked Agent
-emoji: 💻
-colorFrom: pink
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: linked-agent
+emoji: 🐳
+colorFrom: blue
 colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,843 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LinkedIn Profile Scraper | 10K Profiles per Batch</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        linkedin: '#0A66C2',
+                        primary: '#0A66C2',
+                        secondary: '#378FE9',
+                        accent: '#16437E',
+                        dark: '#1D2226',
+                        light: '#F5F5F5',
+                        darkBg: '#12181D',
+                        darkCard: '#1D2933'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .scraper-card {
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            border-radius: 16px;
+            transition: all 0.3s ease;
+        }
+        .scraper-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15);
+        }
+        .progress-bar {
+            height: 8px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #e0e0e0;
+        }
+        .progress-fill {
+            height: 100%;
+            border-radius: 4px;
+            background: linear-gradient(90deg, #0A66C2, #378FE9);
+            transition: width 0.5s ease;
+        }
+        .profile-card {
+            transition: all 0.2s ease;
+            border-left: 4px solid #0A66C2;
+        }
+        .profile-card:hover {
+            transform: translateX(5px);
+            background-color: #f8fafc;
+        }
+        .dark .profile-card:hover {
+            background-color: #1f2a33;
+        }
+        .scrape-btn {
+            background: linear-gradient(135deg, #0A66C2, #16437E);
+            transition: all 0.3s ease;
+        }
+        .scrape-btn:hover {
+            transform: scale(1.02);
+            box-shadow: 0 10px 20px -5px rgba(10, 102, 194, 0.4);
+        }
+        .scrape-btn:active {
+            transform: scale(0.98);
+        }
+        .tab-btn {
+            transition: all 0.2s ease;
+            border-bottom: 3px solid transparent;
+        }
+        .tab-btn.active {
+            border-bottom-color: #0A66C2;
+            color: #0A66C2;
+        }
+        .result-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 1rem;
+        }
+        @media (min-width: 640px) {
+            .result-grid {
+                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                gap: 1.5rem;
+            }
+        }
+        .animate-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .floating-notification {
+            animation: floatUp 0.5s ease-out forwards;
+        }
+        @keyframes floatUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .skeleton {
+            background-color: #e2e8f0;
+            border-radius: 4px;
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        .dark .skeleton {
+            background-color: #2d3748;
+        }
+        .dark-mode-toggle {
+            transition: all 0.3s ease;
+        }
+        .dark-mode-toggle:hover {
+            transform: rotate(15deg);
+        }
+        .stat-card:hover .stat-icon {
+            transform: scale(1.1) rotate(5deg);
+        }
+        .stat-icon {
+            transition: all 0.3s ease;
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block;
+        }
+        .tooltip .tooltip-text {
+            visibility: hidden;
+            width: 200px;
+            background-color: #1D2226;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 8px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            font-size: 0.875rem;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .tooltip:hover .tooltip-text {
+            visibility: visible;
+            opacity: 1;
+        }
+        .dark .tooltip .tooltip-text {
+            background-color: #2d3748;
+        }
+        .mobile-menu {
+            transform: translateX(-100%);
+            transition: transform 0.3s ease;
+        }
+        .mobile-menu.open {
+            transform: translateX(0);
+        }
+        .export-btn {
+            transition: all 0.2s ease;
+        }
+        .export-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .pagination-btn {
+            transition: all 0.2s ease;
+        }
+        .pagination-btn:hover:not(.disabled) {
+            background-color: #e5e7eb;
+            transform: translateY(-2px);
+        }
+        .dark .pagination-btn:hover:not(.disabled) {
+            background-color: #2d3748;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen dark:bg-darkBg">
+    <!-- Header -->
+    <header class="bg-white shadow-sm dark:bg-darkCard">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center">
+                <div class="bg-primary p-2 rounded-lg mr-3">
+                    <i class="fab fa-linkedin text-white text-2xl"></i>
+                </div>
+                <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">LinkedIn<span class="text-primary">Scraper</span></h1>
+            </div>
+            <nav>
+                <ul class="hidden md:flex space-x-6">
+                    <li><a href="#" class="text-gray-600 hover:text-primary font-medium dark:text-gray-300 dark:hover:text-secondary">Dashboard</a></li>
+                    <li><a href="#" class="text-gray-600 hover:text-primary font-medium dark:text-gray-300 dark:hover:text-secondary">Scrape History</a></li>
+                    <li><a href="#" class="text-gray-600 hover:text-primary font-medium dark:text-gray-300 dark:hover:text-secondary">API</a></li>
+                    <li><a href="#" class="text-gray-600 hover:text-primary font-medium dark:text-gray-300 dark:hover:text-secondary">Help</a></li>
+                </ul>
+                <button id="mobileMenuBtn" class="md:hidden text-gray-600 dark:text-gray-300">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+            </nav>
+            <div class="flex items-center">
+                <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg font-medium flex items-center mr-4">
+                    <i class="fas fa-user-plus mr-2"></i> Upgrade
+                </button>
+                <button id="darkModeToggle" class="dark-mode-toggle bg-gray-200 dark:bg-gray-700 p-2 rounded-full mr-4">
+                    <i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i>
+                </button>
+                <div class="relative">
+                    <div class="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center cursor-pointer">
+                        <i class="fas fa-user text-gray-600 dark:text-gray-300"></i>
+                    </div>
+                    <div class="absolute right-0 bottom-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-darkCard"></div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobileMenu" class="mobile-menu fixed inset-0 z-50 bg-black bg-opacity-50 hidden">
+        <div class="bg-white dark:bg-darkCard w-64 h-full p-4">
+            <div class="flex justify-between items-center mb-8">
+                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Menu</h3>
+                <button id="closeMobileMenu" class="p-2 text-gray-600 dark:text-gray-300">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <ul class="space-y-4">
+                <li><a href="#" class="text-gray-600 hover:text-primary font-medium block py-2 dark:text-gray-300 dark:hover:text-secondary">Dashboard</a></li>
+                <li><a href="#" class="text-gray-600 hover:text-primary font-medium block py-2 dark:text-gray-300 dark:hover:text-secondary">Scrape History</a></li>
+                <li><a href="#" class="text-gray-600 hover:text-primary font-medium block py-2 dark:text-gray-300 dark:hover:text-secondary">API</a></li>
+                <li><a href="#" class="text-gray-600 hover:text-primary font-medium block py-2 dark:text-gray-300 dark:hover:text-secondary">Help</a></li>
+                <li class="pt-4">
+                    <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg font-medium flex items-center w-full">
+                        <i class="fas fa-user-plus mr-2"></i> Upgrade Account
+                    </button>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-10">
+            <h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-3">LinkedIn Profile Scraper</h2>
+            <p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">Extract up to 10,000 LinkedIn profiles per batch with professional details including name, title, company, location, and more.</p>
+        </div>
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 mb-8">
+            <div class="scraper-card stat-card bg-white dark:bg-darkCard p-6 rounded-xl">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm">Total Scraped</p>
+                        <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200">124,856</h3>
+                    </div>
+                    <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg">
+                        <i class="fas fa-database text-primary dark:text-blue-300 text-xl stat-icon"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="scraper-card stat-card bg-white dark:bg-darkCard p-6 rounded-xl">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm">This Month</p>
+                        <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200">8,420</h3>
+                    </div>
+                    <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg">
+                        <i class="fas fa-chart-line text-green-500 dark:text-green-300 text-xl stat-icon"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="scraper-card stat-card bg-white dark:bg-darkCard p-6 rounded-xl">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm">Batch Size</p>
+                        <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200">10,000</h3>
+                    </div>
+                    <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg">
+                        <i class="fas fa-layer-group text-purple-500 dark:text-purple-300 text-xl stat-icon"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="scraper-card stat-card bg-white dark:bg-darkCard p-6 rounded-xl">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm">Success Rate</p>
+                        <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200">98.7%</h3>
+                    </div>
+                    <div class="bg-yellow-100 dark:bg-yellow-900 p-3 rounded-lg">
+                        <i class="fas fa-check-circle text-yellow-500 dark:text-yellow-300 text-xl stat-icon"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Scraper Interface -->
+        <div class="scraper-card bg-white dark:bg-darkCard p-6 md:p-8 rounded-xl mb-8">
+            <div class="flex flex-wrap mb-6 border-b dark:border-gray-700">
+                <button class="tab-btn px-4 py-2 font-medium text-gray-600 dark:text-gray-300 mr-4 active">New Scrape</button>
+                <button class="tab-btn px-4 py-2 font-medium text-gray-600 dark:text-gray-300 mr-4">Saved Templates</button>
+                <button class="tab-btn px-4 py-2 font-medium text-gray-600 dark:text-gray-300">Advanced Filters</button>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-6">
+                <div>
+                    <label class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Search Keywords</label>
+                    <input type="text" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-gray-200" placeholder="e.g., Software Engineer, Marketing Manager">
+                </div>
+                <div>
+                    <label class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Location</label>
+                    <input type="text" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-gray-200" placeholder="e.g., United States, San Francisco">
+                </div>
+                <div>
+                    <label class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Industry</label>
+                    <select class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-gray-200">
+                        <option value="">All Industries</option>
+                        <option value="it">Information Technology</option>
+                        <option value="finance">Finance</option>
+                        <option value="healthcare">Healthcare</option>
+                        <option value="education">Education</option>
+                        <option value="marketing">Marketing</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Company Size</label>
+                    <select class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-gray-200">
+                        <option value="">All Sizes</option>
+                        <option value="1-10">1-10 employees</option>
+                        <option value="11-50">11-50 employees</option>
+                        <option value="51-200">51-200 employees</option>
+                        <option value="201-500">201-500 employees</option>
+                        <option value="501+">501+ employees</option>
+                    </select>
+                </div>
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Number of Profiles</label>
+                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4">
+                    <input type="range" min="100" max="10000" step="100" value="5000" class="w-full sm:mr-4 dark:accent-primary" id="profileRange">
+                    <div class="bg-gray-100 dark:bg-gray-800 px-4 py-2 rounded-lg w-full sm:w-auto text-center dark:text-gray-200">
+                        <span id="profileCount">5,000</span> profiles
+                    </div>
+                </div>
+                <div class="text-sm text-gray-500 dark:text-gray-400 mt-2">Max 10,000 profiles per batch</div>
+            </div>
+            <div class="flex flex-wrap items-center justify-between">
+                <div class="flex items-center mb-4 md:mb-0">
+                    <input type="checkbox" id="includeContact" class="mr-2 h-5 w-5 text-primary rounded focus:ring-primary dark:bg-gray-800">
+                    <label for="includeContact" class="text-gray-700 dark:text-gray-300">Include contact information</label>
+                </div>
+                <button id="scrapeBtn" class="scrape-btn text-white px-8 py-3 rounded-lg font-semibold flex items-center w-full sm:w-auto justify-center">
+                    <i class="fas fa-bolt mr-2"></i>
+                    <span id="scrapeBtnText">Start Scraping</span>
+                    <span id="scrapeSpinner" class="ml-2 hidden">
+                        <i class="fas fa-spinner fa-spin"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+        <!-- Progress Section -->
+        <div id="progressSection" class="scraper-card bg-white dark:bg-darkCard p-6 md:p-8 rounded-xl mb-8 hidden">
+            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Scraping in Progress</h3>
+            <div class="mb-4">
+                <div class="flex justify-between mb-2">
+                    <span class="text-gray-700 dark:text-gray-300">Extracting profiles...</span>
+                    <span id="progressPercent" class="text-primary font-medium">0%</span>
+                </div>
+                <div class="progress-bar">
+                    <div id="progressFill" class="progress-fill" style="width: 0%"></div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mt-6">
+                <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div class="text-2xl font-bold text-primary" id="profilesScraped">0</div>
+                    <div class="text-gray-600 dark:text-gray-400">Profiles Scraped</div>
+                </div>
+                <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div class="text-2xl font-bold text-green-500" id="successRate">0%</div>
+                    <div class="text-gray-600 dark:text-gray-400">Success Rate</div>
+                </div>
+                <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-200" id="timeElapsed">0s</div>
+                    <div class="text-gray-600 dark:text-gray-400">Time Elapsed</div>
+                </div>
+                <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div class="text-2xl font-bold text-gray-800 dark:text-gray-200" id="timeRemaining">~30s</div>
+                    <div class="text-gray-600 dark:text-gray-400">Estimated Time</div>
+                </div>
+            </div>
+        </div>
+        <!-- Results Section -->
+        <div id="resultsSection" class="hidden">
+            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
+                <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Scraping Results</h3>
+                <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 w-full sm:w-auto">
+                    <button class="export-btn bg-white dark:bg-darkCard border border-gray-300 dark:border-gray-700 px-4 py-2 rounded-lg font-medium flex items-center justify-center">
+                        <i class="fas fa-download mr-2"></i> Export CSV
+                    </button>
+                    <button class="export-btn bg-white dark:bg-darkCard border border-gray-300 dark:border-gray-700 px-4 py-2 rounded-lg font-medium flex items-center justify-center">
+                        <i class="fas fa-file-excel mr-2"></i> Export Excel
+                    </button>
+                </div>
+            </div>
+            <div class="result-grid mb-8" id="resultGrid">
+                <!-- Profile cards will be inserted here by JavaScript -->
+            </div>
+            <div class="flex flex-col sm:flex-row justify-between items-center bg-white dark:bg-darkCard p-4 rounded-lg">
+                <div class="text-gray-600 dark:text-gray-400 mb-4 sm:mb-0">
+                    Showing <span id="showingCount">10</span> of <span id="totalCount">5,000</span> profiles
+                </div>
+                <div class="flex flex-wrap justify-center gap-2">
+                    <button class="pagination-btn px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed" id="prevPageBtn" disabled>
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    <button class="pagination-btn px-4 py-2 bg-primary text-white rounded-lg">1</button>
+                    <button class="pagination-btn px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg">2</button>
+                    <button class="pagination-btn px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg">3</button>
+                    <button class="pagination-btn px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg">...</button>
+                    <button class="pagination-btn px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg">50</button>
+                    <button class="pagination-btn px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg" id="nextPageBtn">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Notification -->
+        <div id="notification" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg hidden">
+            <i class="fas fa-check-circle mr-2"></i>
+            <span>Scraping completed successfully!</span>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-dark text-gray-300 py-8 mt-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
+                <div>
+                    <h4 class="text-white text-lg font-semibold mb-4">LinkedIn Scraper</h4>
+                    <p class="mb-4">Professional LinkedIn data extraction tool for recruiters, marketers, and sales professionals.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-white text-lg font-semibold mb-4">Features</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">Profile Scraping</a></li>
+                        <li><a href="#" class="hover:text-white">Company Data</a></li>
+                        <li><a href="#" class="hover:text-white">Email Extraction</a></li>
+                        <li><a href="#" class="hover:text-white">Bulk Processing</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-white text-lg font-semibold mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">Documentation</a></li>
+                        <li><a href="#" class="hover:text-white">API Reference</a></li>
+                        <li><a href="#" class="hover:text-white">Tutorials</a></li>
+                        <li><a href="#" class="hover:text-white">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-white text-lg font-semibold mb-4">Legal</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
+                        <li><a href="#" class="hover:text-white">Terms of Service</a></li>
+                        <li><a href="#" class="hover:text-white">Compliance</a></li>
+                        <li><a href="#" class="hover:text-white">GDPR</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-6 text-center">
+                <p>&copy; 2023 LinkedInScraper. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // DOM Elements
+        const profileRange = document.getElementById('profileRange');
+        const profileCount = document.getElementById('profileCount');
+        const scrapeBtn = document.getElementById('scrapeBtn');
+        const scrapeBtnText = document.getElementById('scrapeBtnText');
+        const scrapeSpinner = document.getElementById('scrapeSpinner');
+        const progressSection = document.getElementById('progressSection');
+        const resultsSection = document.getElementById('resultsSection');
+        const progressFill = document.getElementById('progressFill');
+        const progressPercent = document.getElementById('progressPercent');
+        const profilesScraped = document.getElementById('profilesScraped');
+        const successRate = document.getElementById('successRate');
+        const timeElapsed = document.getElementById('timeElapsed');
+        const timeRemaining = document.getElementById('timeRemaining');
+        const notification = document.getElementById('notification');
+        const resultGrid = document.getElementById('resultGrid');
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const mobileMenu = document.getElementById('mobileMenu');
+        const closeMobileMenu = document.getElementById('closeMobileMenu');
+        const prevPageBtn = document.getElementById('prevPageBtn');
+        const nextPageBtn = document.getElementById('nextPageBtn');
+        const showingCount = document.getElementById('showingCount');
+        const totalCount = document.getElementById('totalCount');
+        // Update profile count display
+        profileRange.addEventListener('input', function() {
+            const count = parseInt(this.value).toLocaleString();
+            profileCount.textContent = count;
+        });
+        // Dark mode toggle
+        darkModeToggle.addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+            const isDark = document.documentElement.classList.contains('dark');
+            localStorage.setItem('darkMode', isDark);
+            // Update icon
+            const icon = darkModeToggle.querySelector('i');
+            if (isDark) {
+                icon.classList.remove('fa-moon');
+                icon.classList.add('fa-sun');
+            } else {
+                icon.classList.remove('fa-sun');
+                icon.classList.add('fa-moon');
+            }
+        });
+        // Check for saved dark mode preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark');
+            const icon = darkModeToggle.querySelector('i');
+            icon.classList.remove('fa-moon');
+            icon.classList.add('fa-sun');
+        }
+        // Mobile menu toggle
+        mobileMenuBtn.addEventListener('click', function() {
+            mobileMenu.classList.remove('hidden');
+            setTimeout(() => {
+                mobileMenu.classList.add('open');
+            }, 10);
+        });
+        closeMobileMenu.addEventListener('click', function() {
+            mobileMenu.classList.remove('open');
+            setTimeout(() => {
+                mobileMenu.classList.add('hidden');
+            }, 300);
+        });
+        // Close mobile menu when clicking outside
+        mobileMenu.addEventListener('click', function(e) {
+            if (e.target === mobileMenu) {
+                mobileMenu.classList.remove('open');
+                setTimeout(() => {
+                    mobileMenu.classList.add('hidden');
+                }, 300);
+            }
+        });
+        // Scrape button handler
+        scrapeBtn.addEventListener('click', function() {
+            // Show spinner and change text
+            scrapeSpinner.classList.remove('hidden');
+            scrapeBtnText.textContent = 'Scraping...';
+            scrapeBtn.disabled = true;
+            // Show progress section
+            progressSection.classList.remove('hidden');
+            // Hide results if shown
+            resultsSection.classList.add('hidden');
+            // Reset progress
+            let progress = 0;
+            let elapsed = 0;
+            let scraped = 0;
+            const totalProfiles = parseInt(profileRange.value);
+            const successPercent = 98 + Math.random() * 1.3; // Random success rate between 98-99.3%
+            // Show skeleton loaders
+            showSkeletonLoaders(totalProfiles);
+            // Start progress simulation
+            const interval = setInterval(() => {
+                progress += 1;
+                elapsed += 1;
+                scraped = Math.floor(totalProfiles * (progress/100));
+                // Update progress bar
+                progressFill.style.width = `${progress}%`;
+                progressPercent.textContent = `${progress}%`;
+                profilesScraped.textContent = scraped.toLocaleString();
+                successRate.textContent = `${successPercent.toFixed(1)}%`;
+                timeElapsed.textContent = `${elapsed}s`;
+                // Calculate remaining time
+                const remaining = Math.max(1, Math.floor((100 - progress) * elapsed / progress));
+                timeRemaining.textContent = `~${remaining}s`;
+                // When progress completes
+                if (progress >= 100) {
+                    clearInterval(interval);
+                    // Reset button
+                    scrapeSpinner.classList.add('hidden');
+                    scrapeBtnText.textContent = 'Start Scraping';
+                    scrapeBtn.disabled = false;
+                    // Show notification
+                    notification.classList.remove('hidden');
+                    notification.classList.add('floating-notification');
+                    // Hide notification after 3 seconds
+                    setTimeout(() => {
+                        notification.classList.add('hidden');
+                        notification.classList.remove('floating-notification');
+                    }, 3000);
+                    // Show results after a delay
+                    setTimeout(() => {
+                        progressSection.classList.add('hidden');
+                        resultsSection.classList.remove('hidden');
+                        populateResults(totalProfiles);
+                    }, 1000);
+                }
+            }, 50); // Update every 50ms
+        });
+        // Show skeleton loaders
+        function showSkeletonLoaders(total) {
+            resultGrid.innerHTML = '';
+            // Update counts
+            showingCount.textContent = '10';
+            totalCount.textContent = total.toLocaleString();
+            // Generate skeleton cards
+            for (let i = 0; i < 10; i++) {
+                const card = document.createElement('div');
+                card.className = 'profile-card bg-white dark:bg-darkCard p-5 rounded-lg shadow-sm';
+                card.innerHTML = `
+                    <div class="flex items-start mb-4">
+                        <div class="skeleton w-16 h-16 rounded-full"></div>
+                        <div class="ml-4 flex-1">
+                            <div class="skeleton h-5 w-3/4 mb-2"></div>
+                            <div class="skeleton h-4 w-1/2"></div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-3 mb-4">
+                        <div class="flex items-center">
+                            <div class="skeleton w-4 h-4 mr-2"></div>
+                            <div class="skeleton h-4 w-3/4"></div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="skeleton w-4 h-4 mr-2"></div>
+                            <div class="skeleton h-4 w-3/4"></div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="skeleton w-4 h-4 mr-2"></div>
+                            <div class="skeleton h-4 w-3/4"></div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="skeleton w-4 h-4 mr-2"></div>
+                            <div class="skeleton h-4 w-3/4"></div>
+                        </div>
+                    </div>
+                    <div class="flex justify-between">
+                        <div class="skeleton h-8 w-24"></div>
+                        <div class="skeleton h-8 w-24"></div>
+                    </div>
+                `;
+                resultGrid.appendChild(card);
+            }
+        }
+        // Populate results with mock data
+        function populateResults(total) {
+            // Clear existing results
+            resultGrid.innerHTML = '';
+            // Update counts
+            showingCount.textContent = '10';
+            totalCount.textContent = total.toLocaleString();
+            // Generate mock profile cards
+            const titles = [
+                'Senior Software Engineer',
+                'Marketing Director',
+                'Product Manager',
+                'Data Scientist',
+                'UX Designer',
+                'Sales Executive',
+                'HR Specialist',
+                'Financial Analyst',
+                'Operations Manager',
+                'Content Strategist'
+            ];
+            const companies = [
+                'Google', 'Microsoft', 'Amazon', 'Apple', 'Meta',
+                'Netflix', 'Adobe', 'Salesforce', 'IBM', 'Intel'
+            ];
+            const locations = [
+                'San Francisco, CA', 'New York, NY', 'Seattle, WA',
+                'Austin, TX', 'Boston, MA', 'Chicago, IL', 'Los Angeles, CA'
+            ];
+            for (let i = 0; i < 10; i++) {
+                const title = titles[Math.floor(Math.random() * titles.length)];
+                const company = companies[Math.floor(Math.random() * companies.length)];
+                const location = locations[Math.floor(Math.random() * locations.length)];
+                const card = document.createElement('div');
+                card.className = 'profile-card bg-white dark:bg-darkCard p-5 rounded-lg shadow-sm';
+                card.innerHTML = `
+                    <div class="flex items-start mb-4">
+                        <div class="bg-gray-200 dark:bg-gray-700 rounded-xl w-16 h-16 flex items-center justify-center">
+                            <i class="fas fa-user text-gray-500 dark:text-gray-400 text-xl"></i>
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold text-lg text-gray-800 dark:text-gray-200">${getRandomName()}</h4>
+                            <p class="text-gray-600 dark:text-gray-400">${title} at ${company}</p>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-3 mb-4">
+                        <div class="flex items-center">
+                            <i class="fas fa-building text-gray-500 dark:text-gray-400 mr-2"></i>
+                            <span class="text-gray-700 dark:text-gray-300">${company}</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-map-marker-alt text-gray-500 dark:text-gray-400 mr-2"></i>
+                            <span class="text-gray-700 dark:text-gray-300">${location}</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-briefcase text-gray-500 dark:text-gray-400 mr-2"></i>
+                            <span class="text-gray-700 dark:text-gray-300">${Math.floor(Math.random() * 15) + 3} years exp</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-user-friends text-gray-500 dark:text-gray-400 mr-2"></i>
+                            <span class="text-gray-700 dark:text-gray-300">${(Math.floor(Math.random() * 500) + 100).toLocaleString()}+ connections</span>
+                        </div>
+                    </div>
+                    <div class="flex justify-between">
+                        <button class="text-primary hover:text-secondary font-medium">
+                            <i class="fas fa-envelope mr-1"></i> Contact
+                        </button>
+                        <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
+                            <i class="fas fa-save mr-1"></i> Save Profile
+                        </button>
+                    </div>
+                `;
+                resultGrid.appendChild(card);
+            }
+        }
+        // Generate random names
+        function getRandomName() {
+            const firstNames = ['James', 'Mary', 'John', 'Patricia', 'Robert', 'Jennifer', 'Michael', 'Linda', 'William', 'Elizabeth'];
+            const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
+            const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+            const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+            return `${firstName} ${lastName}`;
+        }
+        // Pagination functionality
+        prevPageBtn.addEventListener('click', function() {
+            // In a real app, this would fetch previous page data
+            alert('Previous page functionality would be implemented here');
+        });
+        nextPageBtn.addEventListener('click', function() {
+            // In a real app, this would fetch next page data
+            alert('Next page functionality would be implemented here');
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jensin/linked-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>