Hugging Face's logo

Spaces:
SyedomarAli
/
wordpress-site
Running

App Files Community
SyedomarAli commited on
Commit
e03b7f1
·
verified ·
1 Parent(s): 1c61814

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +612 -537
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,648 +3,723 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Facebook Leads Generator | Your WordPress Site</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .gradient-bg {
11
- background: linear-gradient(135deg, #1877f2 0%, #0d47a1 100%);
12
- }
13
- .lead-card {
14
- transition: all 0.3s ease;
15
- }
16
  .lead-card:hover {
17
  transform: translateY(-5px);
18
- box-shadow: 0 10px 20px rgba(0,0,0,0.1);
19
  }
20
- .pulse {
21
- animation: pulse 2s infinite;
 
 
 
 
 
22
  }
23
- @keyframes pulse {
24
- 0% {
25
- box-shadow: 0 0 0 0 rgba(24, 119, 242, 0.4);
26
- }
27
- 70% {
28
- box-shadow: 0 0 0 10px rgba(24, 119, 242, 0);
29
- }
30
- 100% {
31
- box-shadow: 0 0 0 0 rgba(24, 119, 242, 0);
32
- }
33
  }
34
  </style>
35
  </head>
36
  <body class="bg-gray-50">
37
- <div class="min-h-screen">
38
  <!-- Header -->
39
- <header class="gradient-bg text-white shadow-lg">
40
- <div class="container mx-auto px-4 py-6">
41
- <div class="flex justify-between items-center">
42
- <div class="flex items-center space-x-2">
43
- <i class="fab fa-facebook text-3xl"></i>
44
- <h1 class="text-2xl font-bold">Facebook Leads Generator</h1>
45
- </div>
46
- <div>
47
- <button id="connectBtn" class="bg-white text-blue-600 px-6 py-2 rounded-full font-semibold hover:bg-gray-100 transition">
48
- <i class="fab fa-facebook mr-2"></i> Connect Facebook
49
- </button>
50
- </div>
51
- </div>
52
- </div>
53
  </header>
54
 
55
  <!-- Main Content -->
56
- <main class="container mx-auto px-4 py-8">
57
- <!-- Stats Section -->
58
- <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
59
- <div class="bg-white rounded-lg shadow p-6 flex items-center">
60
- <div class="bg-blue-100 p-3 rounded-full mr-4">
61
- <i class="fas fa-users text-blue-600 text-xl"></i>
62
- </div>
63
- <div>
64
- <p class="text-gray-500">Total Leads</p>
65
- <h3 class="text-2xl font-bold" id="totalLeads">1,248</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
- </div>
68
- <div class="bg-white rounded-lg shadow p-6 flex items-center">
69
- <div class="bg-green-100 p-3 rounded-full mr-4">
70
- <i class="fas fa-chart-line text-green-600 text-xl"></i>
 
 
 
 
 
71
  </div>
72
- <div>
73
- <p class="text-gray-500">This Month</p>
74
- <h3 class="text-2xl font-bold" id="monthlyLeads">248</h3>
 
75
  </div>
76
  </div>
77
- <div class="bg-white rounded-lg shadow p-6 flex items-center">
78
- <div class="bg-yellow-100 p-3 rounded-full mr-4">
79
- <i class="fas fa-percentage text-yellow-600 text-xl"></i>
 
 
 
 
 
80
  </div>
81
- <div>
82
- <p class="text-gray-500">Conversion Rate</p>
83
- <h3 class="text-2xl font-bold" id="conversionRate">32%</h3>
84
  </div>
85
- </div>
86
- <div class="bg-white rounded-lg shadow p-6 flex items-center">
87
- <div class="bg-purple-100 p-3 rounded-full mr-4">
88
- <i class="fas fa-bolt text-purple-600 text-xl"></i>
 
 
 
 
 
89
  </div>
90
- <div>
91
- <p class="text-gray-500">Active Campaigns</p>
92
- <h3 class="text-2xl font-bold" id="activeCampaigns">5</h3>
 
 
93
  </div>
94
  </div>
95
  </div>
96
 
97
- <!-- Campaign Setup -->
98
- <div class="bg-white rounded-lg shadow mb-8 overflow-hidden">
99
- <div class="border-b border-gray-200 px-6 py-4">
100
- <h2 class="text-xl font-semibold">Create New Lead Campaign</h2>
 
101
  </div>
102
- <div class="p-6">
103
- <form id="campaignForm">
104
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
105
- <div>
106
- <label class="block text-gray-700 mb-2">Campaign Name</label>
107
- <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. Summer Promotion 2023" required>
108
- </div>
109
- <div>
110
- <label class="block text-gray-700 mb-2">Target Audience</label>
111
- <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
112
- <option value="">Select Audience</option>
113
- <option value="all">All Users</option>
114
- <option value="custom">Custom Audience</option>
115
- <option value="lookalike">Lookalike Audience</option>
116
- </select>
117
- </div>
118
- <div>
119
- <label class="block text-gray-700 mb-2">Lead Form Type</label>
120
- <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
121
- <option value="">Select Form Type</option>
122
- <option value="instant">Instant Form</option>
123
- <option value="messenger">Messenger Form</option>
124
- <option value="canvas">Canvas Form</option>
125
- </select>
126
- </div>
127
- <div>
128
- <label class="block text-gray-700 mb-2">Budget (USD)</label>
129
- <input type="number" min="5" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Minimum $5" required>
130
  </div>
 
 
 
 
131
  </div>
132
- <div class="mt-6">
133
- <label class="block text-gray-700 mb-2">Lead Questions</label>
134
- <div id="questionsContainer" class="space-y-4">
135
- <div class="flex items-center space-x-4">
136
- <select class="flex-1 px-4 py-2 border rounded-lg">
137
- <option value="name">Full Name</option>
138
- <option value="email">Email</option>
139
- <option value="phone">Phone Number</option>
140
- <option value="custom">Custom Question</option>
141
- </select>
142
- <input type="text" class="flex-1 px-4 py-2 border rounded-lg" placeholder="Custom question (if selected)">
143
- <button type="button" class="text-red-500 hover:text-red-700" onclick="removeQuestion(this)">
144
- <i class="fas fa-times"></i>
145
- </button>
146
  </div>
 
147
  </div>
148
- <button type="button" onclick="addQuestion()" class="mt-4 text-blue-600 hover:text-blue-800 flex items-center">
149
- <i class="fas fa-plus-circle mr-2"></i> Add Question
 
150
  </button>
151
  </div>
152
- <div class="mt-8 flex justify-end">
153
- <button type="submit" class="gradient-bg text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition flex items-center">
154
- <i class="fas fa-rocket mr-2"></i> Launch Campaign
 
 
 
 
 
 
 
 
155
  </button>
156
  </div>
157
- </form>
158
- </div>
159
- </div>
160
-
161
- <!-- Leads Table -->
162
- <div class="bg-white rounded-lg shadow overflow-hidden">
163
- <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
164
- <h2 class="text-xl font-semibold">Recent Leads</h2>
165
- <div class="flex space-x-2">
166
- <button class="px-4 py-2 border rounded-lg hover:bg-gray-50 flex items-center">
167
- <i class="fas fa-download mr-2"></i> Export
168
- </button>
169
- <button class="px-4 py-2 border rounded-lg hover:bg-gray-50 flex items-center">
170
- <i class="fas fa-filter mr-2"></i> Filter
171
- </button>
172
- </div>
173
- </div>
174
- <div class="overflow-x-auto">
175
- <table class="min-w-full divide-y divide-gray-200">
176
- <thead class="bg-gray-50">
177
- <tr>
178
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
179
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
180
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
181
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
182
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
183
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
184
- </tr>
185
- </thead>
186
- <tbody class="bg-white divide-y divide-gray-200" id="leadsTableBody">
187
- <!-- Leads will be populated here by JavaScript -->
188
- </tbody>
189
- </table>
190
- </div>
191
- <div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
192
- <div class="text-sm text-gray-500">
193
- Showing <span id="showingFrom">1</span> to <span id="showingTo">10</span> of <span id="totalRecords">1248</span> entries
194
  </div>
195
- <div class="flex space-x-2">
196
- <button class="px-3 py-1 border rounded hover:bg-gray-50" id="prevPage">Previous</button>
197
- <div class="flex space-x-1" id="paginationNumbers">
198
- <!-- Pagination numbers will be added here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  </div>
200
- <button class="px-3 py-1 border rounded hover:bg-gray-50" id="nextPage">Next</button>
201
  </div>
202
  </div>
203
  </div>
204
- </main>
205
 
206
- <!-- Connect Facebook Modal -->
207
- <div id="connectModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
208
- <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
209
- <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
210
- <h3 class="text-lg font-semibold">Connect Facebook Account</h3>
211
- <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
212
- <i class="fas fa-times"></i>
213
- </button>
 
 
214
  </div>
215
- <div class="p-6">
216
- <div class="text-center mb-6">
217
- <div class="mx-auto w-24 h-24 rounded-full bg-blue-100 flex items-center justify-center mb-4">
218
- <i class="fab fa-facebook text-blue-600 text-4xl"></i>
219
- </div>
220
- <h4 class="text-xl font-semibold mb-2">Connect Your Facebook Account</h4>
221
- <p class="text-gray-600">To generate leads, you need to connect your Facebook Business account.</p>
222
  </div>
223
- <div class="space-y-4">
224
- <button class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90 transition flex items-center justify-center">
225
- <i class="fab fa-facebook mr-2 text-xl"></i> Continue with Facebook
226
- </button>
227
- <div class="text-center text-sm text-gray-500">
228
- We'll only access your Facebook Pages and Ads accounts
229
- </div>
230
  </div>
 
 
231
  </div>
232
  </div>
233
  </div>
234
 
235
- <!-- Lead Details Modal -->
236
- <div id="leadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
237
- <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
238
- <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
239
- <h3 class="text-lg font-semibold">Lead Details</h3>
240
- <button onclick="closeLeadModal()" class="text-gray-500 hover:text-gray-700">
241
- <i class="fas fa-times"></i>
242
- </button>
243
- </div>
244
- <div class="p-6">
245
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
246
- <div>
247
- <h4 class="font-semibold text-gray-700 mb-2">Basic Information</h4>
248
- <div class="space-y-3">
249
- <div>
250
- <p class="text-sm text-gray-500">Full Name</p>
251
- <p class="font-medium" id="leadName">John Doe</p>
252
- </div>
253
- <div>
254
- <p class="text-sm text-gray-500">Email</p>
255
- <p class="font-medium" id="leadEmail">john.doe@example.com</p>
256
- </div>
257
- <div>
258
- <p class="text-sm text-gray-500">Phone</p>
259
- <p class="font-medium" id="leadPhone">+1 (555) 123-4567</p>
260
- </div>
261
- </div>
262
  </div>
263
  <div>
264
- <h4 class="font-semibold text-gray-700 mb-2">Campaign Details</h4>
265
- <div class="space-y-3">
266
- <div>
267
- <p class="text-sm text-gray-500">Campaign Name</p>
268
- <p class="font-medium" id="leadCampaign">Summer Sale 2023</p>
269
- </div>
270
- <div>
271
- <p class="text-sm text-gray-500">Date Submitted</p>
272
- <p class="font-medium" id="leadDate">June 15, 2023 14:30</p>
273
- </div>
274
- <div>
275
- <p class="text-sm text-gray-500">Status</p>
276
- <p class="font-medium">
277
- <span id="leadStatus" class="px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">New</span>
278
- </p>
279
- </div>
280
- </div>
281
  </div>
282
  </div>
283
- <div class="mb-6">
284
- <h4 class="font-semibold text-gray-700 mb-2">Additional Information</h4>
285
- <div class="bg-gray-50 p-4 rounded-lg">
286
- <div id="leadAdditionalInfo">
287
- <!-- Additional info will be added here -->
288
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
289
  </div>
290
  </div>
291
- <div class="flex justify-end space-x-3">
292
- <button class="px-4 py-2 border rounded-lg hover:bg-gray-50">Mark as Contacted</button>
293
- <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Send Email</button>
 
 
 
 
294
  </div>
295
  </div>
296
  </div>
297
  </div>
 
 
 
 
 
 
 
 
 
298
  </div>
299
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
300
  <script>
301
- // Sample lead data
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
302
  const sampleLeads = [
303
  {
304
  id: 1,
305
- name: "John Smith",
306
- email: "john.smith@example.com",
307
- phone: "+1 (555) 123-4567",
308
- campaign: "Summer Sale 2023",
309
- date: "2023-06-15 14:30",
310
- status: "new",
311
- additional: {
312
- "Interested In": "Premium Package",
313
- "Budget": "$500-$1000"
314
- }
315
  },
316
  {
317
  id: 2,
318
- name: "Sarah Johnson",
319
- email: "sarah.j@example.com",
320
- phone: "+1 (555) 987-6543",
321
- campaign: "Webinar Signup",
322
- date: "2023-06-14 10:15",
323
- status: "contacted",
324
- additional: {
325
- "Webinar Topic": "Digital Marketing",
326
- "Experience Level": "Intermediate"
327
- }
328
  },
329
  {
330
  id: 3,
331
- name: "Michael Brown",
332
- email: "michael.b@example.com",
333
- phone: "+1 (555) 456-7890",
334
- campaign: "Free Consultation",
335
- date: "2023-06-13 16:45",
336
- status: "qualified",
337
- additional: {
338
- "Business Type": "E-commerce",
339
- "Employees": "10-50"
340
- }
341
  },
342
  {
343
  id: 4,
344
- name: "Emily Davis",
345
- email: "emily.d@example.com",
346
- phone: "+1 (555) 789-0123",
347
- campaign: "Product Demo",
348
- date: "2023-06-12 11:20",
349
- status: "new",
350
- additional: {
351
- "Product Interest": "CRM Software",
352
- "Current Solution": "Spreadsheets"
353
- }
354
  },
355
  {
356
  id: 5,
357
- name: "Robert Wilson",
358
- email: "robert.w@example.com",
359
- phone: "+1 (555) 234-5678",
360
- campaign: "Summer Sale 2023",
361
- date: "2023-06-11 09:30",
362
- status: "contacted",
363
- additional: {
364
- "Interested In": "Basic Package",
365
- "Budget": "$100-$500"
366
- }
367
  },
368
  {
369
  id: 6,
370
- name: "Jennifer Lee",
371
- email: "jennifer.l@example.com",
372
- phone: "+1 (555) 345-6789",
373
- campaign: "Webinar Signup",
374
- date: "2023-06-10 13:15",
375
- status: "new",
376
- additional: {
377
- "Webinar Topic": "Social Media",
378
- "Experience Level": "Beginner"
379
- }
380
- },
381
- {
382
- id: 7,
383
- name: "David Miller",
384
- email: "david.m@example.com",
385
- phone: "+1 (555) 678-9012",
386
- campaign: "Free Consultation",
387
- date: "2023-06-09 15:30",
388
- status: "qualified",
389
- additional: {
390
- "Business Type": "Consulting",
391
- "Employees": "1-10"
392
- }
393
- },
394
- {
395
- id: 8,
396
- name: "Lisa Taylor",
397
- email: "lisa.t@example.com",
398
- phone: "+1 (555) 901-2345",
399
- campaign: "Product Demo",
400
- date: "2023-06-08 12:45",
401
- status: "contacted",
402
- additional: {
403
- "Product Interest": "Marketing Automation",
404
- "Current Solution": "None"
405
- }
406
- },
407
- {
408
- id: 9,
409
- name: "James Anderson",
410
- email: "james.a@example.com",
411
- phone: "+1 (555) 123-7890",
412
- campaign: "Summer Sale 2023",
413
- date: "2023-06-07 10:00",
414
- status: "new",
415
- additional: {
416
- "Interested In": "Enterprise Package",
417
- "Budget": "$1000+"
418
- }
419
- },
420
- {
421
- id: 10,
422
- name: "Patricia White",
423
- email: "patricia.w@example.com",
424
- phone: "+1 (555) 456-0123",
425
- campaign: "Webinar Signup",
426
- date: "2023-06-06 14:20",
427
- status: "qualified",
428
- additional: {
429
- "Webinar Topic": "Content Marketing",
430
- "Experience Level": "Advanced"
431
- }
432
  }
433
  ];
434
 
435
- // Initialize the page
436
- document.addEventListener('DOMContentLoaded', function() {
437
- // Populate leads table
438
- populateLeadsTable();
 
 
 
 
 
 
439
 
440
- // Set up event listeners
441
- document.getElementById('connectBtn').addEventListener('click', openModal);
442
- document.getElementById('campaignForm').addEventListener('submit', function(e) {
443
- e.preventDefault();
444
- alert('Campaign created successfully!');
445
- this.reset();
446
- });
447
 
448
- // Set up pagination
449
- setupPagination();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
450
  });
451
 
452
- // Populate leads table
453
- function populateLeadsTable() {
454
- const tableBody = document.getElementById('leadsTableBody');
455
- tableBody.innerHTML = '';
456
 
457
- sampleLeads.forEach(lead => {
458
- const row = document.createElement('tr');
459
- row.className = 'hover:bg-gray-50 cursor-pointer';
460
- row.onclick = () => openLeadModal(lead);
461
-
462
- // Status badge
463
- let statusClass, statusText;
464
- switch(lead.status) {
465
- case 'new':
466
- statusClass = 'bg-blue-100 text-blue-800';
467
- statusText = 'New';
468
- break;
469
- case 'contacted':
470
- statusClass = 'bg-purple-100 text-purple-800';
471
- statusText = 'Contacted';
472
- break;
473
- case 'qualified':
474
- statusClass = 'bg-green-100 text-green-800';
475
- statusText = 'Qualified';
476
- break;
477
- default:
478
- statusClass = 'bg-gray-100 text-gray-800';
479
- statusText = 'Unknown';
480
- }
481
 
482
- row.innerHTML = `
483
- <td class="px-6 py-4 whitespace-nowrap">
484
- <div class="flex items-center">
485
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
486
- <span class="text-blue-600 font-medium">${lead.name.split(' ').map(n => n[0]).join('')}</span>
487
- </div>
488
- <div class="ml-4">
489
- <div class="text-sm font-medium text-gray-900">${lead.name}</div>
 
 
 
 
 
490
  </div>
 
491
  </div>
492
- </td>
493
- <td class="px-6 py-4 whitespace-nowrap">
494
- <div class="text-sm text-gray-900">${lead.email}</div>
495
- <div class="text-sm text-gray-500">${lead.phone}</div>
496
- </td>
497
- <td class="px-6 py-4 whitespace-nowrap">
498
- <div class="text-sm text-gray-900">${lead.campaign}</div>
499
- </td>
500
- <td class="px-6 py-4 whitespace-nowrap">
501
- <div class="text-sm text-gray-900">${formatDate(lead.date)}</div>
502
- </td>
503
- <td class="px-6 py-4 whitespace-nowrap">
504
- <span class="px-2 py-1 text-xs rounded-full font-semibold ${statusClass}">${statusText}</span>
505
- </td>
506
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
507
- <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="event.stopPropagation(); openLeadModal(${JSON.stringify(lead).replace(/"/g, '&quot;')})">
508
- <i class="fas fa-eye"></i>
509
- </button>
510
- <button class="text-green-600 hover:text-green-900" onclick="event.stopPropagation(); alert('Email sent to ${lead.name}')">
511
- <i class="fas fa-paper-plane"></i>
512
- </button>
513
- </td>
514
  `;
515
 
516
- tableBody.appendChild(row);
517
- });
518
- }
519
-
520
- // Format date
521
- function formatDate(dateString) {
522
- const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
523
- return new Date(dateString).toLocaleDateString('en-US', options);
524
- }
525
-
526
- // Setup pagination
527
- function setupPagination() {
528
- document.getElementById('showingFrom').textContent = '1';
529
- document.getElementById('showingTo').textContent = '10';
530
- document.getElementById('totalRecords').textContent = '1248';
531
-
532
- // Simple pagination numbers
533
- const paginationDiv = document.getElementById('paginationNumbers');
534
- for (let i = 1; i <= 5; i++) {
535
- const btn = document.createElement('button');
536
- btn.className = `px-3 py-1 border rounded ${i === 1 ? 'bg-blue-600 text-white' : 'hover:bg-gray-50'}`;
537
- btn.textContent = i;
538
- btn.onclick = function() {
539
- // In a real app, this would load the appropriate page
540
- document.querySelectorAll('#paginationNumbers button').forEach(b => {
541
- b.classList.remove('bg-blue-600', 'text-white');
542
- });
543
- this.classList.add('bg-blue-600', 'text-white');
544
- };
545
- paginationDiv.appendChild(btn);
546
- }
547
-
548
- // Previous/next buttons
549
- document.getElementById('prevPage').addEventListener('click', function() {
550
- alert('Loading previous page');
551
  });
552
 
553
- document.getElementById('nextPage').addEventListener('click', function() {
554
- alert('Loading next page');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
555
  });
556
  }
557
 
558
- // Modal functions
559
- function openModal() {
560
- document.getElementById('connectModal').classList.remove('hidden');
561
- }
562
-
563
- function closeModal() {
564
- document.getElementById('connectModal').classList.add('hidden');
565
- }
566
-
567
- // Lead modal functions
568
- function openLeadModal(lead) {
569
- document.getElementById('leadName').textContent = lead.name;
570
- document.getElementById('leadEmail').textContent = lead.email;
571
- document.getElementById('leadPhone').textContent = lead.phone;
572
- document.getElementById('leadCampaign').textContent = lead.campaign;
573
- document.getElementById('leadDate').textContent = formatDate(lead.date);
574
-
575
- // Set status
576
- let statusClass, statusText;
577
- switch(lead.status) {
578
- case 'new':
579
- statusClass = 'bg-blue-100 text-blue-800';
580
- statusText = 'New';
581
- break;
582
- case 'contacted':
583
- statusClass = 'bg-purple-100 text-purple-800';
584
- statusText = 'Contacted';
585
- break;
586
- case 'qualified':
587
- statusClass = 'bg-green-100 text-green-800';
588
- statusText = 'Qualified';
589
- break;
590
- default:
591
- statusClass = 'bg-gray-100 text-gray-800';
592
- statusText = 'Unknown';
593
- }
594
- document.getElementById('leadStatus').className = `px-2 py-1 rounded-full text-xs font-semibold ${statusClass}`;
595
- document.getElementById('leadStatus').textContent = statusText;
596
 
597
- // Add additional info
598
- const additionalInfoDiv = document.getElementById('leadAdditionalInfo');
599
- additionalInfoDiv.innerHTML = '';
600
 
601
- for (const [key, value] of Object.entries(lead.additional)) {
602
- const div = document.createElement('div');
603
- div.className = 'mb-2 last:mb-0';
604
- div.innerHTML = `
605
- <p class="text-sm text-gray-500">${key}</p>
606
- <p class="font-medium">${value}</p>
607
- `;
608
- additionalInfoDiv.appendChild(div);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
609
  }
610
-
611
- document.getElementById('leadModal').classList.remove('hidden');
612
  }
613
 
614
- function closeLeadModal() {
615
- document.getElementById('leadModal').classList.add('hidden');
616
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
617
 
618
- // Form question functions
619
- function addQuestion() {
620
- const container = document.getElementById('questionsContainer');
621
- const div = document.createElement('div');
622
- div.className = 'flex items-center space-x-4';
623
- div.innerHTML = `
624
- <select class="flex-1 px-4 py-2 border rounded-lg">
625
- <option value="name">Full Name</option>
626
- <option value="email">Email</option>
627
- <option value="phone">Phone Number</option>
628
- <option value="custom">Custom Question</option>
629
- </select>
630
- <input type="text" class="flex-1 px-4 py-2 border rounded-lg" placeholder="Custom question (if selected)">
631
- <button type="button" class="text-red-500 hover:text-red-700" onclick="removeQuestion(this)">
632
- <i class="fas fa-times"></i>
633
- </button>
634
- `;
635
- container.appendChild(div);
636
- }
637
 
638
- function removeQuestion(button) {
639
- button.parentElement.remove();
 
 
 
 
 
 
640
  }
641
-
642
- // Prevent modal close when clicking inside
643
- document.querySelectorAll('#connectModal > div, #leadModal > div').forEach(modal => {
644
- modal.addEventListener('click', function(e) {
645
- e.stopPropagation();
646
- });
647
- });
648
  </script>
649
  <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>
650
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Twitter Leads Generator | Your Tools Website</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
 
 
 
 
 
10
  .lead-card:hover {
11
  transform: translateY(-5px);
12
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
13
  }
14
+ .loading-spinner {
15
+ border: 4px solid rgba(0, 0, 0, 0.1);
16
+ border-radius: 50%;
17
+ border-top: 4px solid #1da1f2;
18
+ width: 40px;
19
+ height: 40px;
20
+ animation: spin 1s linear infinite;
21
  }
22
+ @keyframes spin {
23
+ 0% { transform: rotate(0deg); }
24
+ 100% { transform: rotate(360deg); }
25
+ }
26
+ .tab-active {
27
+ border-bottom: 3px solid #1da1f2;
28
+ color: #1da1f2;
29
+ font-weight: 600;
 
 
30
  }
31
  </style>
32
  </head>
33
  <body class="bg-gray-50">
34
+ <div class="container mx-auto px-4 py-8 max-w-7xl">
35
  <!-- Header -->
36
+ <header class="mb-10 text-center">
37
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Twitter Leads Generator</h1>
38
+ <p class="text-lg text-gray-600">Find high-quality sales leads from Twitter to grow your business</p>
 
 
 
 
 
 
 
 
 
 
 
39
  </header>
40
 
41
  <!-- Main Content -->
42
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
43
+ <!-- Tabs -->
44
+ <div class="flex border-b">
45
+ <button id="search-tab" class="px-6 py-4 text-gray-600 tab-active">Search Leads</button>
46
+ <button id="saved-tab" class="px-6 py-4 text-gray-600">Saved Leads</button>
47
+ <button id="export-tab" class="px-6 py-4 text-gray-600">Export Leads</button>
48
+ </div>
49
+
50
+ <!-- Search Leads Tab Content -->
51
+ <div id="search-content" class="p-6">
52
+ <div class="mb-8">
53
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Find Twitter Leads</h2>
54
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
55
+ <div>
56
+ <label for="keywords" class="block text-sm font-medium text-gray-700 mb-1">Keywords</label>
57
+ <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">
58
+ </div>
59
+ <div>
60
+ <label for="hashtags" class="block text-sm font-medium text-gray-700 mb-1">Hashtags</label>
61
+ <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">
62
+ </div>
63
+ <div>
64
+ <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label>
65
+ <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">
66
+ </div>
67
  </div>
68
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
69
+ <div>
70
+ <label for="min-followers" class="block text-sm font-medium text-gray-700 mb-1">Min Followers</label>
71
+ <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">
72
+ </div>
73
+ <div>
74
+ <label for="max-followers" class="block text-sm font-medium text-gray-700 mb-1">Max Followers</label>
75
+ <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">
76
+ </div>
77
  </div>
78
+ <div class="flex justify-center">
79
+ <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">
80
+ <i class="fas fa-search mr-2"></i> Find Leads
81
+ </button>
82
  </div>
83
  </div>
84
+
85
+ <!-- Results Section -->
86
+ <div id="results-section" class="hidden">
87
+ <div class="flex justify-between items-center mb-4">
88
+ <h3 class="text-xl font-semibold text-gray-800">Potential Leads</h3>
89
+ <div class="text-sm text-gray-600">
90
+ <span id="results-count">0</span> results found
91
+ </div>
92
  </div>
93
+
94
+ <div id="loading" class="flex justify-center items-center py-10 hidden">
95
+ <div class="loading-spinner"></div>
96
  </div>
97
+
98
+ <div id="results-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
99
+ <!-- Leads will be inserted here by JavaScript -->
100
+ </div>
101
+
102
+ <div id="no-results" class="text-center py-10 hidden">
103
+ <i class="fas fa-exclamation-circle text-4xl text-gray-400 mb-3"></i>
104
+ <h4 class="text-xl font-medium text-gray-600">No leads found</h4>
105
+ <p class="text-gray-500">Try adjusting your search criteria</p>
106
  </div>
107
+
108
+ <div class="flex justify-center mt-8">
109
+ <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">
110
+ Load More Leads
111
+ </button>
112
  </div>
113
  </div>
114
  </div>
115
 
116
+ <!-- Saved Leads Tab Content -->
117
+ <div id="saved-content" class="p-6 hidden">
118
+ <div class="mb-6">
119
+ <h2 class="text-2xl font-semibold text-gray-800 mb-2">Your Saved Leads</h2>
120
+ <p class="text-gray-600">Manage your collected leads here</p>
121
  </div>
122
+
123
+ <div id="saved-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
124
+ <!-- Saved leads will be inserted here by JavaScript -->
125
+ </div>
126
+
127
+ <div id="no-saved" class="text-center py-10">
128
+ <i class="fas fa-bookmark text-4xl text-gray-400 mb-3"></i>
129
+ <h4 class="text-xl font-medium text-gray-600">No saved leads yet</h4>
130
+ <p class="text-gray-500">Search for leads and save them for later</p>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Export Leads Tab Content -->
135
+ <div id="export-content" class="p-6 hidden">
136
+ <div class="mb-6">
137
+ <h2 class="text-2xl font-semibold text-gray-800 mb-2">Export Leads</h2>
138
+ <p class="text-gray-600">Download your leads in various formats</p>
139
+ </div>
140
+
141
+ <div class="bg-gray-50 p-6 rounded-lg">
142
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
143
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-white transition duration-200">
144
+ <div class="flex items-center mb-3">
145
+ <div class="bg-blue-100 p-3 rounded-full mr-3">
146
+ <i class="fas fa-file-csv text-blue-500 text-xl"></i>
147
+ </div>
148
+ <h4 class="font-medium text-gray-800">CSV Format</h4>
 
149
  </div>
150
+ <p class="text-gray-600 text-sm mb-3">Compatible with Excel, Google Sheets, and most CRM systems</p>
151
+ <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">
152
+ Export as CSV
153
+ </button>
154
  </div>
155
+
156
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-white transition duration-200">
157
+ <div class="flex items-center mb-3">
158
+ <div class="bg-green-100 p-3 rounded-full mr-3">
159
+ <i class="fas fa-file-excel text-green-500 text-xl"></i>
 
 
 
 
 
 
 
 
 
160
  </div>
161
+ <h4 class="font-medium text-gray-800">Excel Format</h4>
162
  </div>
163
+ <p class="text-gray-600 text-sm mb-3">Direct Excel file with formatted columns for easy analysis</p>
164
+ <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">
165
+ Export as Excel
166
  </button>
167
  </div>
168
+
169
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-white transition duration-200">
170
+ <div class="flex items-center mb-3">
171
+ <div class="bg-purple-100 p-3 rounded-full mr-3">
172
+ <i class="fas fa-file-alt text-purple-500 text-xl"></i>
173
+ </div>
174
+ <h4 class="font-medium text-gray-800">JSON Format</h4>
175
+ </div>
176
+ <p class="text-gray-600 text-sm mb-3">Structured data format for developers and API integrations</p>
177
+ <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">
178
+ Export as JSON
179
  </button>
180
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  </div>
182
+
183
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
184
+ <h4 class="font-medium text-gray-800 mb-3">Advanced Export Options</h4>
185
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
186
+ <div>
187
+ <label class="block text-sm font-medium text-gray-700 mb-1">Include Fields</label>
188
+ <div class="space-y-2">
189
+ <label class="flex items-center">
190
+ <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked>
191
+ <span class="ml-2 text-sm text-gray-700">Username</span>
192
+ </label>
193
+ <label class="flex items-center">
194
+ <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked>
195
+ <span class="ml-2 text-sm text-gray-700">Name</span>
196
+ </label>
197
+ <label class="flex items-center">
198
+ <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked>
199
+ <span class="ml-2 text-sm text-gray-700">Bio</span>
200
+ </label>
201
+ <label class="flex items-center">
202
+ <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked>
203
+ <span class="ml-2 text-sm text-gray-700">Location</span>
204
+ </label>
205
+ <label class="flex items-center">
206
+ <input type="checkbox" class="h-4 w-4 text-blue-500 border-gray-300 rounded" checked>
207
+ <span class="ml-2 text-sm text-gray-700">Followers Count</span>
208
+ </label>
209
+ </div>
210
+ </div>
211
+ <div>
212
+ <label class="block text-sm font-medium text-gray-700 mb-1">Filter Saved Leads</label>
213
+ <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">
214
+ <option>All Leads</option>
215
+ <option>Saved in last 7 days</option>
216
+ <option>Saved in last 30 days</option>
217
+ <option>High Engagement</option>
218
+ <option>Verified Accounts</option>
219
+ </select>
220
+ </div>
221
  </div>
 
222
  </div>
223
  </div>
224
  </div>
225
+ </div>
226
 
227
+ <!-- Features Section -->
228
+ <div class="mt-16">
229
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Powerful Features for Lead Generation</h2>
230
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
231
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200">
232
+ <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
233
+ <i class="fas fa-filter text-blue-500 text-2xl"></i>
234
+ </div>
235
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Advanced Filters</h3>
236
+ <p class="text-gray-600">Narrow down leads by keywords, hashtags, location, follower count, and engagement metrics to find your ideal prospects.</p>
237
  </div>
238
+
239
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200">
240
+ <div class="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
241
+ <i class="fas fa-database text-green-500 text-2xl"></i>
 
 
 
242
  </div>
243
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Lead Database</h3>
244
+ <p class="text-gray-600">Save and organize your leads for future reference. Access your lead database anytime from any device.</p>
245
+ </div>
246
+
247
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200">
248
+ <div class="bg-purple-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
249
+ <i class="fas fa-file-export text-purple-500 text-2xl"></i>
250
  </div>
251
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Multiple Export Options</h3>
252
+ <p class="text-gray-600">Export leads in CSV, Excel, or JSON format for easy integration with your CRM or marketing tools.</p>
253
  </div>
254
  </div>
255
  </div>
256
 
257
+ <!-- Testimonials -->
258
+ <div class="mt-20 bg-blue-50 rounded-xl p-8 md:p-12">
259
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Users Say</h2>
260
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
261
+ <div class="bg-white p-6 rounded-xl shadow-sm">
262
+ <div class="flex items-center mb-4">
263
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
264
+ <i class="fas fa-user text-blue-500"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
265
  </div>
266
  <div>
267
+ <h4 class="font-semibold text-gray-800">Sarah Johnson</h4>
268
+ <p class="text-sm text-gray-500">Marketing Director</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
269
  </div>
270
  </div>
271
+ <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>
272
+ <div class="flex mt-3">
273
+ <i class="fas fa-star text-yellow-400"></i>
274
+ <i class="fas fa-star text-yellow-400"></i>
275
+ <i class="fas fa-star text-yellow-400"></i>
276
+ <i class="fas fa-star text-yellow-400"></i>
277
+ <i class="fas fa-star text-yellow-400"></i>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="bg-white p-6 rounded-xl shadow-sm">
282
+ <div class="flex items-center mb-4">
283
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
284
+ <i class="fas fa-user text-blue-500"></i>
285
+ </div>
286
+ <div>
287
+ <h4 class="font-semibold text-gray-800">Michael Chen</h4>
288
+ <p class="text-sm text-gray-500">Sales Manager</p>
289
  </div>
290
  </div>
291
+ <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>
292
+ <div class="flex mt-3">
293
+ <i class="fas fa-star text-yellow-400"></i>
294
+ <i class="fas fa-star text-yellow-400"></i>
295
+ <i class="fas fa-star text-yellow-400"></i>
296
+ <i class="fas fa-star text-yellow-400"></i>
297
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
298
  </div>
299
  </div>
300
  </div>
301
  </div>
302
+
303
+ <!-- CTA Section -->
304
+ <div class="mt-20 text-center">
305
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Ready to Find Your Next Customers?</h2>
306
+ <p class="text-xl text-gray-600 mb-8">Start generating high-quality Twitter leads today</p>
307
+ <button class="px-8 py-4 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition duration-200">
308
+ Get Started Now
309
+ </button>
310
+ </div>
311
  </div>
312
 
313
+ <!-- Footer -->
314
+ <footer class="bg-gray-800 text-white mt-20">
315
+ <div class="container mx-auto px-4 py-12">
316
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
317
+ <div>
318
+ <h3 class="text-xl font-semibold mb-4">Twitter Leads Generator</h3>
319
+ <p class="text-gray-400">The most powerful tool for finding and connecting with potential customers on Twitter.</p>
320
+ </div>
321
+ <div>
322
+ <h4 class="font-semibold mb-4">Quick Links</h4>
323
+ <ul class="space-y-2">
324
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Home</a></li>
325
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Features</a></li>
326
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Pricing</a></li>
327
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Blog</a></li>
328
+ </ul>
329
+ </div>
330
+ <div>
331
+ <h4 class="font-semibold mb-4">Resources</h4>
332
+ <ul class="space-y-2">
333
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Documentation</a></li>
334
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">API</a></li>
335
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Support</a></li>
336
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-200">FAQ</a></li>
337
+ </ul>
338
+ </div>
339
+ <div>
340
+ <h4 class="font-semibold mb-4">Connect With Us</h4>
341
+ <div class="flex space-x-4 mb-4">
342
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-500 transition duration-200">
343
+ <i class="fab fa-twitter"></i>
344
+ </a>
345
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-700 transition duration-200">
346
+ <i class="fab fa-linkedin-in"></i>
347
+ </a>
348
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600 transition duration-200">
349
+ <i class="fab fa-instagram"></i>
350
+ </a>
351
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-200">
352
+ <i class="fab fa-youtube"></i>
353
+ </a>
354
+ </div>
355
+ <p class="text-gray-400">Subscribe to our newsletter</p>
356
+ <div class="flex mt-2">
357
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg bg-gray-700 text-white w-full focus:outline-none">
358
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-r-lg hover:bg-blue-600 transition duration-200">
359
+ <i class="fas fa-paper-plane"></i>
360
+ </button>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
365
+ <p>&copy; 2023 Twitter Leads Generator. All rights reserved.</p>
366
+ </div>
367
+ </div>
368
+ </footer>
369
+
370
  <script>
371
+ // Tab Switching
372
+ const tabs = {
373
+ 'search-tab': 'search-content',
374
+ 'saved-tab': 'saved-content',
375
+ 'export-tab': 'export-content'
376
+ };
377
+
378
+ Object.entries(tabs).forEach(([tabId, contentId]) => {
379
+ document.getElementById(tabId).addEventListener('click', () => {
380
+ // Hide all content
381
+ Object.values(tabs).forEach(id => {
382
+ document.getElementById(id).classList.add('hidden');
383
+ document.getElementById(id.replace('-content', '-tab')).classList.remove('tab-active');
384
+ });
385
+
386
+ // Show selected content
387
+ document.getElementById(contentId).classList.remove('hidden');
388
+ document.getElementById(tabId).classList.add('tab-active');
389
+
390
+ // If saved tab is clicked, load saved leads
391
+ if (tabId === 'saved-tab') {
392
+ loadSavedLeads();
393
+ }
394
+ });
395
+ });
396
+
397
+ // Sample lead data (in a real app, this would come from an API)
398
  const sampleLeads = [
399
  {
400
  id: 1,
401
+ username: 'marketingpro',
402
+ name: 'Sarah Johnson',
403
+ bio: 'Digital Marketing Expert | Helping brands grow online | Speaker & Consultant',
404
+ location: 'New York, USA',
405
+ followers: 12500,
406
+ engagement: 'High',
407
+ verified: true,
408
+ lastTweet: 'Just published my latest article on social media trends for 2023! #marketing #socialmedia',
409
+ tweetDate: '2 days ago'
 
410
  },
411
  {
412
  id: 2,
413
+ username: 'techguru',
414
+ name: 'Michael Chen',
415
+ bio: 'CTO at TechSolutions | AI & Machine Learning Enthusiast | Startup Advisor',
416
+ location: 'San Francisco, CA',
417
+ followers: 32000,
418
+ engagement: 'Very High',
419
+ verified: true,
420
+ lastTweet: 'Excited to announce our new AI-powered analytics platform launching next month! #AI #tech',
421
+ tweetDate: '1 day ago'
 
422
  },
423
  {
424
  id: 3,
425
+ username: 'startupfounder',
426
+ name: 'Alex Rodriguez',
427
+ bio: 'Founder & CEO @StartupVentures | Angel Investor | Business Growth Strategist',
428
+ location: 'Austin, TX',
429
+ followers: 8500,
430
+ engagement: 'Medium',
431
+ verified: false,
432
+ lastTweet: 'Looking for SaaS startups with unique value propositions to invest in. DM me your pitch! #startups #investing',
433
+ tweetDate: '5 hours ago'
 
434
  },
435
  {
436
  id: 4,
437
+ username: 'salesexpert',
438
+ name: 'Emily Wilson',
439
+ bio: 'B2B Sales Consultant | Helping companies scale revenue | Author of "Modern Selling"',
440
+ location: 'Chicago, IL',
441
+ followers: 18000,
442
+ engagement: 'High',
443
+ verified: true,
444
+ lastTweet: 'Just wrapped up an amazing sales training workshop with an incredible team! #sales #training',
445
+ tweetDate: '3 days ago'
 
446
  },
447
  {
448
  id: 5,
449
+ username: 'digitalnomad',
450
+ name: 'David Miller',
451
+ bio: 'Freelance Developer | Traveling the world while building apps | Remote work advocate',
452
+ location: 'Bali, Indonesia',
453
+ followers: 4200,
454
+ engagement: 'Medium',
455
+ verified: false,
456
+ lastTweet: 'Just launched my new portfolio website - check it out and let me know what you think! #webdev #freelance',
457
+ tweetDate: '1 day ago'
 
458
  },
459
  {
460
  id: 6,
461
+ username: 'growthhacker',
462
+ name: 'Lisa Thompson',
463
+ bio: 'Growth Marketing at ScaleUp | Data-driven strategies for explosive growth | Speaker',
464
+ location: 'Boston, MA',
465
+ followers: 24500,
466
+ engagement: 'Very High',
467
+ verified: true,
468
+ lastTweet: 'Our latest case study shows how we grew a SaaS from 0 to 10k users in 6 months. Breakdown coming soon! #growthhacking',
469
+ tweetDate: '8 hours ago'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
470
  }
471
  ];
472
 
473
+ // Saved leads in localStorage
474
+ let savedLeads = JSON.parse(localStorage.getItem('savedLeads')) || [];
475
+
476
+ // Search button click handler
477
+ document.getElementById('search-btn').addEventListener('click', function() {
478
+ const keywords = document.getElementById('keywords').value;
479
+ const hashtags = document.getElementById('hashtags').value;
480
+ const location = document.getElementById('location').value;
481
+ const minFollowers = document.getElementById('min-followers').value;
482
+ const maxFollowers = document.getElementById('max-followers').value;
483
 
484
+ // Show loading
485
+ document.getElementById('results-section').classList.remove('hidden');
486
+ document.getElementById('loading').classList.remove('hidden');
487
+ document.getElementById('results-container').innerHTML = '';
488
+ document.getElementById('no-results').classList.add('hidden');
489
+ document.getElementById('load-more').classList.add('hidden');
 
490
 
491
+ // Simulate API call with timeout
492
+ setTimeout(() => {
493
+ // Filter sample leads based on search criteria (simplified for demo)
494
+ let filteredLeads = sampleLeads.filter(lead => {
495
+ let matches = true;
496
+
497
+ if (keywords && !lead.bio.toLowerCase().includes(keywords.toLowerCase()) &&
498
+ !lead.name.toLowerCase().includes(keywords.toLowerCase()) &&
499
+ !lead.lastTweet.toLowerCase().includes(keywords.toLowerCase())) {
500
+ matches = false;
501
+ }
502
+
503
+ if (hashtags && !lead.lastTweet.toLowerCase().includes(hashtags.toLowerCase())) {
504
+ matches = false;
505
+ }
506
+
507
+ if (location && !lead.location.toLowerCase().includes(location.toLowerCase())) {
508
+ matches = false;
509
+ }
510
+
511
+ if (minFollowers && lead.followers < parseInt(minFollowers)) {
512
+ matches = false;
513
+ }
514
+
515
+ if (maxFollowers && lead.followers > parseInt(maxFollowers)) {
516
+ matches = false;
517
+ }
518
+
519
+ return matches;
520
+ });
521
+
522
+ // Hide loading
523
+ document.getElementById('loading').classList.add('hidden');
524
+
525
+ if (filteredLeads.length > 0) {
526
+ // Show results count
527
+ document.getElementById('results-count').textContent = filteredLeads.length;
528
+
529
+ // Display leads
530
+ displayLeads(filteredLeads);
531
+
532
+ // Show load more button if there are more leads (simulated)
533
+ if (filteredLeads.length > 3) {
534
+ document.getElementById('load-more').classList.remove('hidden');
535
+ }
536
+ } else {
537
+ // Show no results message
538
+ document.getElementById('no-results').classList.remove('hidden');
539
+ }
540
+ }, 1500);
541
  });
542
 
543
+ // Display leads in results container
544
+ function displayLeads(leads) {
545
+ const container = document.getElementById('results-container');
 
546
 
547
+ leads.forEach(lead => {
548
+ const isSaved = savedLeads.some(savedLead => savedLead.id === lead.id);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
549
 
550
+ const leadCard = document.createElement('div');
551
+ leadCard.className = 'bg-white rounded-xl shadow-md overflow-hidden lead-card transition duration-200';
552
+ leadCard.innerHTML = `
553
+ <div class="p-6">
554
+ <div class="flex items-start justify-between mb-4">
555
+ <div class="flex items-center">
556
+ <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-3 overflow-hidden">
557
+ <i class="fas fa-user text-gray-500 text-xl"></i>
558
+ </div>
559
+ <div>
560
+ <h3 class="font-semibold text-gray-800">${lead.name}</h3>
561
+ <p class="text-sm text-gray-500">@${lead.username}</p>
562
+ </div>
563
  </div>
564
+ ${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>' : ''}
565
  </div>
566
+
567
+ <p class="text-gray-600 mb-4">${lead.bio}</p>
568
+
569
+ <div class="flex items-center text-sm text-gray-500 mb-4">
570
+ <span class="mr-4"><i class="fas fa-map-marker-alt mr-1"></i> ${lead.location}</span>
571
+ <span><i class="fas fa-users mr-1"></i> ${lead.followers.toLocaleString()} followers</span>
572
+ </div>
573
+
574
+ <div class="bg-gray-50 p-3 rounded-lg mb-4">
575
+ <p class="text-gray-700 text-sm mb-1">"${lead.lastTweet}"</p>
576
+ <p class="text-gray-400 text-xs">${lead.tweetDate}</p>
577
+ </div>
578
+
579
+ <div class="flex justify-between items-center">
580
+ <span class="text-xs px-2 py-1 rounded-full ${getEngagementClass(lead.engagement)}">
581
+ ${lead.engagement} Engagement
582
+ </span>
583
+ <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}">
584
+ ${isSaved ? '<i class="fas fa-check mr-1"></i> Saved' : '<i class="fas fa-bookmark mr-1"></i> Save Lead'}
585
+ </button>
586
+ </div>
587
+ </div>
588
  `;
589
 
590
+ container.appendChild(leadCard);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
591
  });
592
 
593
+ // Add event listeners to save buttons
594
+ document.querySelectorAll('.save-btn').forEach(btn => {
595
+ btn.addEventListener('click', function() {
596
+ const leadId = parseInt(this.getAttribute('data-id'));
597
+ const lead = sampleLeads.find(l => l.id === leadId);
598
+
599
+ if (this.classList.contains('bg-blue-500')) {
600
+ // Save lead
601
+ savedLeads.push(lead);
602
+ localStorage.setItem('savedLeads', JSON.stringify(savedLeads));
603
+
604
+ // Update button
605
+ this.classList.remove('bg-blue-500', 'hover:bg-blue-600', 'text-white');
606
+ this.classList.add('bg-gray-200', 'text-gray-600');
607
+ this.innerHTML = '<i class="fas fa-check mr-1"></i> Saved';
608
+ }
609
+ });
610
  });
611
  }
612
 
613
+ // Load saved leads
614
+ function loadSavedLeads() {
615
+ const container = document.getElementById('saved-container');
616
+ const noSaved = document.getElementById('no-saved');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
617
 
618
+ container.innerHTML = '';
 
 
619
 
620
+ if (savedLeads.length > 0) {
621
+ noSaved.classList.add('hidden');
622
+
623
+ savedLeads.forEach(lead => {
624
+ const leadCard = document.createElement('div');
625
+ leadCard.className = 'bg-white rounded-xl shadow-md overflow-hidden lead-card transition duration-200';
626
+ leadCard.innerHTML = `
627
+ <div class="p-6">
628
+ <div class="flex items-start justify-between mb-4">
629
+ <div class="flex items-center">
630
+ <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-3 overflow-hidden">
631
+ <i class="fas fa-user text-gray-500 text-xl"></i>
632
+ </div>
633
+ <div>
634
+ <h3 class="font-semibold text-gray-800">${lead.name}</h3>
635
+ <p class="text-sm text-gray-500">@${lead.username}</p>
636
+ </div>
637
+ </div>
638
+ ${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>' : ''}
639
+ </div>
640
+
641
+ <p class="text-gray-600 mb-4">${lead.bio}</p>
642
+
643
+ <div class="flex items-center text-sm text-gray-500 mb-4">
644
+ <span class="mr-4"><i class="fas fa-map-marker-alt mr-1"></i> ${lead.location}</span>
645
+ <span><i class="fas fa-users mr-1"></i> ${lead.followers.toLocaleString()} followers</span>
646
+ </div>
647
+
648
+ <div class="flex justify-between items-center">
649
+ <span class="text-xs px-2 py-1 rounded-full ${getEngagementClass(lead.engagement)}">
650
+ ${lead.engagement} Engagement
651
+ </span>
652
+ <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}">
653
+ <i class="fas fa-trash-alt mr-1"></i> Remove
654
+ </button>
655
+ </div>
656
+ </div>
657
+ `;
658
+
659
+ container.appendChild(leadCard);
660
+ });
661
+
662
+ // Add event listeners to remove buttons
663
+ document.querySelectorAll('.remove-btn').forEach(btn => {
664
+ btn.addEventListener('click', function() {
665
+ const leadId = parseInt(this.getAttribute('data-id'));
666
+
667
+ // Remove lead from saved
668
+ savedLeads = savedLeads.filter(l => l.id !== leadId);
669
+ localStorage.setItem('savedLeads', JSON.stringify(savedLeads));
670
+
671
+ // Reload saved leads
672
+ loadSavedLeads();
673
+
674
+ // Update save buttons in search results
675
+ if (!document.getElementById('search-content').classList.contains('hidden')) {
676
+ document.querySelectorAll(`.save-btn[data-id="${leadId}"]`).forEach(saveBtn => {
677
+ saveBtn.classList.remove('bg-gray-200', 'text-gray-600');
678
+ saveBtn.classList.add('bg-blue-500', 'hover:bg-blue-600', 'text-white');
679
+ saveBtn.innerHTML = '<i class="fas fa-bookmark mr-1"></i> Save Lead';
680
+ });
681
+ }
682
+ });
683
+ });
684
+ } else {
685
+ noSaved.classList.remove('hidden');
686
  }
 
 
687
  }
688
 
689
+ // Export buttons
690
+ document.querySelectorAll('.export-btn').forEach(btn => {
691
+ btn.addEventListener('click', function() {
692
+ const format = this.getAttribute('data-format');
693
+
694
+ if (savedLeads.length === 0) {
695
+ alert('No leads to export. Please save some leads first.');
696
+ return;
697
+ }
698
+
699
+ // Simulate export
700
+ alert(`Exporting ${savedLeads.length} leads as ${format.toUpperCase()} file...`);
701
+
702
+ // In a real app, this would generate and download the file
703
+ // For demo purposes, we'll just show an alert
704
+ });
705
+ });
706
 
707
+ // Load more button
708
+ document.getElementById('load-more').addEventListener('click', function() {
709
+ // In a real app, this would load more results from an API
710
+ // For demo, we'll just show an alert
711
+ alert('Loading more leads...');
712
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
713
 
714
+ // Helper function for engagement styling
715
+ function getEngagementClass(engagement) {
716
+ switch (engagement) {
717
+ case 'Very High': return 'bg-green-100 text-green-600';
718
+ case 'High': return 'bg-blue-100 text-blue-600';
719
+ case 'Medium': return 'bg-yellow-100 text-yellow-600';
720
+ default: return 'bg-gray-100 text-gray-600';
721
+ }
722
  }
 
 
 
 
 
 
 
723
  </script>
724
  <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>
725
  </html>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  create a wordpress tool AI Content Detector + Humanizer Detect AI-generated content and transform it into natural human-like text POWERED BY DEEPSEEK
2
  background removal tool for my wordpress website its deepseek api using in this tool
3
- i need a facebook leads generator tool for my wordpress website
 
 
1
  create a wordpress tool AI Content Detector + Humanizer Detect AI-generated content and transform it into natural human-like text POWERED BY DEEPSEEK
2
  background removal tool for my wordpress website its deepseek api using in this tool
3
+ i need a facebook leads generator tool for my wordpress website
4
+ make a twitter leads generator tool for my tools website fully functional and and generate pure sales leads for my consumers