Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Twitter Leads Generator | Your Tools Website</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"> | |
| <style> | |
| .lead-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .loading-spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-radius: 50%; | |
| border-top: 4px solid #1da1f2; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #1da1f2; | |
| color: #1da1f2; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Header --> | |
| <header class="mb-10 text-center"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Twitter Leads Generator</h1> | |
| <p class="text-lg text-gray-600">Find high-quality sales leads from Twitter to grow your business</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Tabs --> | |
| <div class="flex border-b"> | |
| <button id="search-tab" class="px-6 py-4 text-gray-600 tab-active">Search Leads</button> | |
| <button id="saved-tab" class="px-6 py-4 text-gray-600">Saved Leads</button> | |
| <button id="export-tab" class="px-6 py-4 text-gray-600">Export Leads</button> | |
| </div> | |
| <!-- Search Leads Tab Content --> | |
| <div id="search-content" class="p-6"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Find Twitter Leads</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div> | |
| <label for="keywords" class="block text-sm font-medium text-gray-700 mb-1">Keywords</label> | |
| <input type="text" id="keywords" placeholder="e.g. marketing, SaaS" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="hashtags" class="block text-sm font-medium text-gray-700 mb-1">Hashtags</label> | |
| <input type="text" id="hashtags" placeholder="e.g. #digitalmarketing" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> | |
| <input type="text" id="location" placeholder="e.g. New York, USA" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <label for="min-followers" class="block text-sm font-medium text-gray-700 mb-1">Min Followers</label> | |
| <input type="number" id="min-followers" placeholder="1000" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="max-followers" class="block text-sm font-medium text-gray-700 mb-1">Max Followers</label> | |
| <input type="number" id="max-followers" placeholder="100000" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="search-btn" class="px-6 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-200 flex items-center"> | |
| <i class="fas fa-search mr-2"></i> Find Leads | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-gray-800">Potential Leads</h3> | |
| <div class="text-sm text-gray-600"> | |
| <span id="results-count">0</span> results found | |
| </div> | |
| </div> | |
| <div id="loading" class="flex justify-center items-center py-10 hidden"> | |
| <div class="loading-spinner"></div> | |
| </div> | |
| <div id="results-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Leads will be inserted here by JavaScript --> | |
| </div> | |
| <div id="no-results" class="text-center py-10 hidden"> | |
| <i class="fas fa-exclamation-circle text-4xl text-gray-400 mb-3"></i> | |
| <h4 class="text-xl font-medium text-gray-600">No leads found</h4> | |
| <p class="text-gray-500">Try adjusting your search criteria</p> | |
| </div> | |
| <div class="flex justify-center mt-8"> | |
| <button id="load-more" class="px-6 py-2 border border-blue-500 text-blue-500 font-medium rounded-lg hover:bg-blue-50 transition duration-200 hidden"> | |
| Load More Leads | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Saved Leads Tab Content --> | |
| <div id="saved-content" class="p-6 hidden"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Your Saved Leads</h2> | |
| <p class="text-gray-600">Manage your collected leads here</p> | |
| </div> | |
| <div id="saved-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Saved leads will be inserted here by JavaScript --> | |
| </div> | |
| <div id="no-saved" class="text-center py-10"> | |
| <i class="fas fa-bookmark text-4xl text-gray-400 mb-3"></i> | |
| <h4 class="text-xl font-medium text-gray-600">No saved leads yet</h4> | |
| <p class="text-gray-500">Search for leads and save them for later</p> | |
| </div> | |
| </div> | |
| <!-- Export Leads Tab Content --> | |
| <div id="export-content" class="p-6 hidden"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Export Leads</h2> | |
| <p class="text-gray-600">Download your leads in various formats</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-white transition duration-200"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-file-csv text-blue-500 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800">CSV Format</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Compatible with Excel, Google Sheets, and most CRM systems</p> | |
| <button class="export-btn w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200" data-format="csv"> | |
| Export as CSV | |
| </button> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-white transition duration-200"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-file-excel text-green-500 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800">Excel Format</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Direct Excel file with formatted columns for easy analysis</p> | |
| <button class="export-btn w-full py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition duration-200" data-format="xlsx"> | |
| Export as Excel | |
| </button> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-white transition duration-200"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-file-alt text-purple-500 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800">JSON Format</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Structured data format for developers and API integrations</p> | |
| <button class="export-btn w-full py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition duration-200" data-format="json"> | |
| Export as JSON | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h4 class="font-medium text-gray-800 mb-3">Advanced Export Options</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Include Fields</label> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked> | |
| <span class="ml-2 text-sm text-gray-700">Username</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked> | |
| <span class="ml-2 text-sm text-gray-700">Name</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked> | |
| <span class="ml-2 text-sm text-gray-700">Bio</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked> | |
| <span class="ml-2 text-sm text-gray-700">Location</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked> | |
| <span class="ml-2 text-sm text-gray-700">Followers Count</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Filter Saved Leads</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>All Leads</option> | |
| <option>Saved in last 7 days</option> | |
| <option>Saved in last 30 days</option> | |
| <option>High Engagement</option> | |
| <option>Verified Accounts</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="mt-16"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Powerful Features for Lead Generation</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-filter text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Advanced Filters</h3> | |
| <p class="text-gray-600">Narrow down leads by keywords, hashtags, location, follower count, and engagement metrics to find your ideal prospects.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200"> | |
| <div class="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-database text-green-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Lead Database</h3> | |
| <p class="text-gray-600">Save and organize your leads for future reference. Access your lead database anytime from any device.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200"> | |
| <div class="bg-purple-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-file-export text-purple-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Multiple Export Options</h3> | |
| <p class="text-gray-600">Export leads in CSV, Excel, or JSON format for easy integration with your CRM or marketing tools.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="mt-20 bg-blue-50 rounded-xl p-8 md:p-12"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Users Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">Marketing Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"This tool helped us identify 200+ high-quality leads in our niche within minutes. The export feature made it super easy to import these into our CRM."</p> | |
| <div class="flex mt-3"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Michael Chen</h4> | |
| <p class="text-sm text-gray-500">Sales Manager</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The location and follower count filters saved us countless hours. We can now target decision-makers in specific regions with just a few clicks."</p> | |
| <div class="flex mt-3"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="mt-20 text-center"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Ready to Find Your Next Customers?</h2> | |
| <p class="text-xl text-gray-600 mb-8">Start generating high-quality Twitter leads today</p> | |
| <button class="px-8 py-4 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition duration-200"> | |
| Get Started Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white mt-20"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Twitter Leads Generator</h3> | |
| <p class="text-gray-400">The most powerful tool for finding and connecting with potential customers on Twitter.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Support</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Connect With Us</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-500 transition duration-200"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-700 transition duration-200"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600 transition duration-200"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-200"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400">Subscribe to our newsletter</p> | |
| <div class="flex mt-2"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg bg-gray-700 text-white w-full focus:outline-none"> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-r-lg hover:bg-blue-600 transition duration-200"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Twitter Leads Generator. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab Switching | |
| const tabs = { | |
| 'search-tab': 'search-content', | |
| 'saved-tab': 'saved-content', | |
| 'export-tab': 'export-content' | |
| }; | |
| Object.entries(tabs).forEach(([tabId, contentId]) => { | |
| document.getElementById(tabId).addEventListener('click', () => { | |
| // Hide all content | |
| Object.values(tabs).forEach(id => { | |
| document.getElementById(id).classList.add('hidden'); | |
| document.getElementById(id.replace('-content', '-tab')).classList.remove('tab-active'); | |
| }); | |
| // Show selected content | |
| document.getElementById(contentId).classList.remove('hidden'); | |
| document.getElementById(tabId).classList.add('tab-active'); | |
| // If saved tab is clicked, load saved leads | |
| if (tabId === 'saved-tab') { | |
| loadSavedLeads(); | |
| } | |
| }); | |
| }); | |
| // Sample lead data (in a real app, this would come from an API) | |
| const sampleLeads = [ | |
| { | |
| id: 1, | |
| username: 'marketingpro', | |
| name: 'Sarah Johnson', | |
| bio: 'Digital Marketing Expert | Helping brands grow online | Speaker & Consultant', | |
| location: 'New York, USA', | |
| followers: 12500, | |
| engagement: 'High', | |
| verified: true, | |
| lastTweet: 'Just published my latest article on social media trends for 2023! #marketing #socialmedia', | |
| tweetDate: '2 days ago' | |
| }, | |
| { | |
| id: 2, | |
| username: 'techguru', | |
| name: 'Michael Chen', | |
| bio: 'CTO at TechSolutions | AI & Machine Learning Enthusiast | Startup Advisor', | |
| location: 'San Francisco, CA', | |
| followers: 32000, | |
| engagement: 'Very High', | |
| verified: true, | |
| lastTweet: 'Excited to announce our new AI-powered analytics platform launching next month! #AI #tech', | |
| tweetDate: '1 day ago' | |
| }, | |
| { | |
| id: 3, | |
| username: 'startupfounder', | |
| name: 'Alex Rodriguez', | |
| bio: 'Founder & CEO @StartupVentures | Angel Investor | Business Growth Strategist', | |
| location: 'Austin, TX', | |
| followers: 8500, | |
| engagement: 'Medium', | |
| verified: false, | |
| lastTweet: 'Looking for SaaS startups with unique value propositions to invest in. DM me your pitch! #startups #investing', | |
| tweetDate: '5 hours ago' | |
| }, | |
| { | |
| id: 4, | |
| username: 'salesexpert', | |
| name: 'Emily Wilson', | |
| bio: 'B2B Sales Consultant | Helping companies scale revenue | Author of "Modern Selling"', | |
| location: 'Chicago, IL', | |
| followers: 18000, | |
| engagement: 'High', | |
| verified: true, | |
| lastTweet: 'Just wrapped up an amazing sales training workshop with an incredible team! #sales #training', | |
| tweetDate: '3 days ago' | |
| }, | |
| { | |
| id: 5, | |
| username: 'digitalnomad', | |
| name: 'David Miller', | |
| bio: 'Freelance Developer | Traveling the world while building apps | Remote work advocate', | |
| location: 'Bali, Indonesia', | |
| followers: 4200, | |
| engagement: 'Medium', | |
| verified: false, | |
| lastTweet: 'Just launched my new portfolio website - check it out and let me know what you think! #webdev #freelance', | |
| tweetDate: '1 day ago' | |
| }, | |
| { | |
| id: 6, | |
| username: 'growthhacker', | |
| name: 'Lisa Thompson', | |
| bio: 'Growth Marketing at ScaleUp | Data-driven strategies for explosive growth | Speaker', | |
| location: 'Boston, MA', | |
| followers: 24500, | |
| engagement: 'Very High', | |
| verified: true, | |
| lastTweet: 'Our latest case study shows how we grew a SaaS from 0 to 10k users in 6 months. Breakdown coming soon! #growthhacking', | |
| tweetDate: '8 hours ago' | |
| } | |
| ]; | |
| // Saved leads in localStorage | |
| let savedLeads = JSON.parse(localStorage.getItem('savedLeads')) || []; | |
| // Search button click handler | |
| document.getElementById('search-btn').addEventListener('click', function() { | |
| const keywords = document.getElementById('keywords').value; | |
| const hashtags = document.getElementById('hashtags').value; | |
| const location = document.getElementById('location').value; | |
| const minFollowers = document.getElementById('min-followers').value; | |
| const maxFollowers = document.getElementById('max-followers').value; | |
| // Show loading | |
| document.getElementById('results-section').classList.remove('hidden'); | |
| document.getElementById('loading').classList.remove('hidden'); | |
| document.getElementById('results-container').innerHTML = ''; | |
| document.getElementById('no-results').classList.add('hidden'); | |
| document.getElementById('load-more').classList.add('hidden'); | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Filter sample leads based on search criteria (simplified for demo) | |
| let filteredLeads = sampleLeads.filter(lead => { | |
| let matches = true; | |
| if (keywords && !lead.bio.toLowerCase().includes(keywords.toLowerCase()) && | |
| !lead.name.toLowerCase().includes(keywords.toLowerCase()) && | |
| !lead.lastTweet.toLowerCase().includes(keywords.toLowerCase())) { | |
| matches = false; | |
| } | |
| if (hashtags && !lead.lastTweet.toLowerCase().includes(hashtags.toLowerCase())) { | |
| matches = false; | |
| } | |
| if (location && !lead.location.toLowerCase().includes(location.toLowerCase())) { | |
| matches = false; | |
| } | |
| if (minFollowers && lead.followers < parseInt(minFollowers)) { | |
| matches = false; | |
| } | |
| if (maxFollowers && lead.followers > parseInt(maxFollowers)) { | |
| matches = false; | |
| } | |
| return matches; | |
| }); | |
| // Hide loading | |
| document.getElementById('loading').classList.add('hidden'); | |
| if (filteredLeads.length > 0) { | |
| // Show results count | |
| document.getElementById('results-count').textContent = filteredLeads.length; | |
| // Display leads | |
| displayLeads(filteredLeads); | |
| // Show load more button if there are more leads (simulated) | |
| if (filteredLeads.length > 3) { | |
| document.getElementById('load-more').classList.remove('hidden'); | |
| } | |
| } else { | |
| // Show no results message | |
| document.getElementById('no-results').classList.remove('hidden'); | |
| } | |
| }, 1500); | |
| }); | |
| // Display leads in results container | |
| function displayLeads(leads) { | |
| const container = document.getElementById('results-container'); | |
| leads.forEach(lead => { | |
| const isSaved = savedLeads.some(savedLead => savedLead.id === lead.id); | |
| const leadCard = document.createElement('div'); | |
| leadCard.className = 'bg-white rounded-xl shadow-md overflow-hidden lead-card transition duration-200'; | |
| leadCard.innerHTML = ` | |
| <div class="p-6"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-3 overflow-hidden"> | |
| <i class="fas fa-user text-gray-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">${lead.name}</h3> | |
| <p class="text-sm text-gray-500">@${lead.username}</p> | |
| </div> | |
| </div> | |
| ${lead.verified ? '<span class="bg-blue-100 text-blue-500 text-xs px-2 py-1 rounded-full flex items-center"><i class="fas fa-check-circle mr-1"></i> Verified</span>' : ''} | |
| </div> | |
| <p class="text-gray-600 mb-4">${lead.bio}</p> | |
| <div class="flex items-center text-sm text-gray-500 mb-4"> | |
| <span class="mr-4"><i class="fas fa-map-marker-alt mr-1"></i> ${lead.location}</span> | |
| <span><i class="fas fa-users mr-1"></i> ${lead.followers.toLocaleString()} followers</span> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg mb-4"> | |
| <p class="text-gray-700 text-sm mb-1">"${lead.lastTweet}"</p> | |
| <p class="text-gray-400 text-xs">${lead.tweetDate}</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 rounded-full ${getEngagementClass(lead.engagement)}"> | |
| ${lead.engagement} Engagement | |
| </span> | |
| <button class="save-btn px-4 py-2 rounded-lg ${isSaved ? 'bg-gray-200 text-gray-600' : 'bg-blue-500 text-white hover:bg-blue-600'} transition duration-200" data-id="${lead.id}"> | |
| ${isSaved ? '<i class="fas fa-check mr-1"></i> Saved' : '<i class="fas fa-bookmark mr-1"></i> Save Lead'} | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(leadCard); | |
| }); | |
| // Add event listeners to save buttons | |
| document.querySelectorAll('.save-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const leadId = parseInt(this.getAttribute('data-id')); | |
| const lead = sampleLeads.find(l => l.id === leadId); | |
| if (this.classList.contains('bg-blue-500')) { | |
| // Save lead | |
| savedLeads.push(lead); | |
| localStorage.setItem('savedLeads', JSON.stringify(savedLeads)); | |
| // Update button | |
| this.classList.remove('bg-blue-500', 'hover:bg-blue-600', 'text-white'); | |
| this.classList.add('bg-gray-200', 'text-gray-600'); | |
| this.innerHTML = '<i class="fas fa-check mr-1"></i> Saved'; | |
| } | |
| }); | |
| }); | |
| } | |
| // Load saved leads | |
| function loadSavedLeads() { | |
| const container = document.getElementById('saved-container'); | |
| const noSaved = document.getElementById('no-saved'); | |
| container.innerHTML = ''; | |
| if (savedLeads.length > 0) { | |
| noSaved.classList.add('hidden'); | |
| savedLeads.forEach(lead => { | |
| const leadCard = document.createElement('div'); | |
| leadCard.className = 'bg-white rounded-xl shadow-md overflow-hidden lead-card transition duration-200'; | |
| leadCard.innerHTML = ` | |
| <div class="p-6"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-3 overflow-hidden"> | |
| <i class="fas fa-user text-gray-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">${lead.name}</h3> | |
| <p class="text-sm text-gray-500">@${lead.username}</p> | |
| </div> | |
| </div> | |
| ${lead.verified ? '<span class="bg-blue-100 text-blue-500 text-xs px-2 py-1 rounded-full flex items-center"><i class="fas fa-check-circle mr-1"></i> Verified</span>' : ''} | |
| </div> | |
| <p class="text-gray-600 mb-4">${lead.bio}</p> | |
| <div class="flex items-center text-sm text-gray-500 mb-4"> | |
| <span class="mr-4"><i class="fas fa-map-marker-alt mr-1"></i> ${lead.location}</span> | |
| <span><i class="fas fa-users mr-1"></i> ${lead.followers.toLocaleString()} followers</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 rounded-full ${getEngagementClass(lead.engagement)}"> | |
| ${lead.engagement} Engagement | |
| </span> | |
| <button class="remove-btn px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-200" data-id="${lead.id}"> | |
| <i class="fas fa-trash-alt mr-1"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(leadCard); | |
| }); | |
| // Add event listeners to remove buttons | |
| document.querySelectorAll('.remove-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const leadId = parseInt(this.getAttribute('data-id')); | |
| // Remove lead from saved | |
| savedLeads = savedLeads.filter(l => l.id !== leadId); | |
| localStorage.setItem('savedLeads', JSON.stringify(savedLeads)); | |
| // Reload saved leads | |
| loadSavedLeads(); | |
| // Update save buttons in search results | |
| if (!document.getElementById('search-content').classList.contains('hidden')) { | |
| document.querySelectorAll(`.save-btn[data-id="${leadId}"]`).forEach(saveBtn => { | |
| saveBtn.classList.remove('bg-gray-200', 'text-gray-600'); | |
| saveBtn.classList.add('bg-blue-500', 'hover:bg-blue-600', 'text-white'); | |
| saveBtn.innerHTML = '<i class="fas fa-bookmark mr-1"></i> Save Lead'; | |
| }); | |
| } | |
| }); | |
| }); | |
| } else { | |
| noSaved.classList.remove('hidden'); | |
| } | |
| } | |
| // Export buttons | |
| document.querySelectorAll('.export-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const format = this.getAttribute('data-format'); | |
| if (savedLeads.length === 0) { | |
| alert('No leads to export. Please save some leads first.'); | |
| return; | |
| } | |
| // Simulate export | |
| alert(`Exporting ${savedLeads.length} leads as ${format.toUpperCase()} file...`); | |
| // In a real app, this would generate and download the file | |
| // For demo purposes, we'll just show an alert | |
| }); | |
| }); | |
| // Load more button | |
| document.getElementById('load-more').addEventListener('click', function() { | |
| // In a real app, this would load more results from an API | |
| // For demo, we'll just show an alert | |
| alert('Loading more leads...'); | |
| }); | |
| // Helper function for engagement styling | |
| function getEngagementClass(engagement) { | |
| switch (engagement) { | |
| case 'Very High': return 'bg-green-100 text-green-600'; | |
| case 'High': return 'bg-blue-100 text-blue-600'; | |
| case 'Medium': return 'bg-yellow-100 text-yellow-600'; | |
| default: return 'bg-gray-100 text-gray-600'; | |
| } | |
| } | |
| </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=SyedomarAli/wordpress-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |