Hugging Face's logo

Spaces:
SyedomarAli
/
wordpress-site
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +575 -407
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,479 +3,647 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Background Remover | Powered by DeepSeek</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, #00c6ff 0%, #0072ff 100%);
12
  }
13
- .dropzone {
14
- border: 2px dashed #0072ff;
15
- border-radius: 8px;
16
  transition: all 0.3s ease;
17
  }
18
- .dropzone.active {
19
- border-color: #00c6ff;
20
- background-color: rgba(0, 198, 255, 0.05);
21
- }
22
- .result-box {
23
- transition: all 0.3s ease;
24
- }
25
- .result-box:hover {
26
  transform: translateY(-5px);
27
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
- }
29
- .progress-bar {
30
- height: 8px;
31
- border-radius: 4px;
32
- background: linear-gradient(90deg, #00c6ff, #0072ff);
33
- transition: width 0.5s ease;
34
- }
35
- .image-container {
36
- position: relative;
37
- overflow: hidden;
38
- border-radius: 8px;
39
- }
40
- .download-btn {
41
- position: absolute;
42
- bottom: 15px;
43
- right: 15px;
44
- opacity: 0;
45
- transition: opacity 0.3s ease;
46
  }
47
- .image-container:hover .download-btn {
48
- opacity: 1;
49
  }
50
- .tooltip {
51
- position: relative;
52
- display: inline-block;
53
- }
54
- .tooltip .tooltip-text {
55
- visibility: hidden;
56
- width: 200px;
57
- background-color: #555;
58
- color: #fff;
59
- text-align: center;
60
- border-radius: 6px;
61
- padding: 8px;
62
- position: absolute;
63
- z-index: 1;
64
- bottom: 125%;
65
- left: 50%;
66
- margin-left: -100px;
67
- opacity: 0;
68
- transition: opacity 0.3s;
69
- }
70
- .tooltip:hover .tooltip-text {
71
- visibility: visible;
72
- opacity: 1;
73
  }
74
  </style>
75
  </head>
76
- <body class="bg-gray-50 min-h-screen">
77
- <div class="gradient-bg py-4 px-6 shadow-lg">
78
- <div class="container mx-auto flex justify-between items-center">
79
- <div class="flex items-center">
80
- <i class="fas fa-image text-white text-2xl mr-3"></i>
81
- <h1 class="text-white text-2xl font-bold">Background Remover</h1>
82
- </div>
83
- <div class="text-white text-sm">
84
- <span class="font-semibold">Powered by</span> <span class="font-bold">DeepSeek AI</span>
 
 
 
 
 
 
 
85
  </div>
86
- </div>
87
- </div>
88
 
89
- <div class="container mx-auto px-4 py-8">
90
- <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
91
- <div class="p-6">
92
- <h2 class="text-2xl font-bold text-gray-800 mb-4">Remove backgrounds from images instantly</h2>
93
- <p class="text-gray-600 mb-6">Upload your image to automatically remove the background with AI precision.</p>
94
-
95
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
96
- <div id="dropzone" class="dropzone p-8 text-center cursor-pointer">
97
- <div id="upload-container">
98
- <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
99
- <h3 class="text-lg font-medium text-gray-800 mb-2">Drag & drop your image here</h3>
100
- <p class="text-gray-500 mb-4">or click to browse files</p>
101
- <input type="file" id="file-input" class="hidden" accept="image/*">
102
- <button id="select-file-btn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium">
103
- Select Image
104
- </button>
105
- <p class="text-xs text-gray-400 mt-4">Supports JPG, PNG, WEBP up to 10MB</p>
106
- </div>
107
- <div id="preview-container" class="hidden">
108
- <div class="image-container relative">
109
- <img id="preview-image" src="" alt="Preview" class="w-full h-auto rounded-lg">
110
- <button id="change-image-btn" class="absolute top-3 left-3 bg-white text-blue-600 px-3 py-1 rounded-full text-sm font-medium shadow-md hover:bg-gray-100">
111
- <i class="fas fa-sync-alt mr-1"></i> Change
112
- </button>
113
- </div>
114
- </div>
 
 
 
 
 
 
 
 
115
  </div>
116
-
117
  <div>
118
- <div id="result-box" class="result-box bg-gray-50 border border-gray-200 rounded-lg p-6 h-full">
119
- <div class="flex justify-between items-center mb-4">
120
- <h3 class="text-lg font-semibold text-gray-800">Result</h3>
121
- <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">Powered by DeepSeek</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  </div>
123
-
124
- <div id="results-placeholder" class="text-center py-10">
125
- <i class="fas fa-image text-gray-300 text-4xl mb-3"></i>
126
- <p class="text-gray-400">Your background-free image will appear here</p>
 
 
 
 
127
  </div>
128
-
129
- <div id="results-container" class="hidden">
130
- <div class="image-container relative mb-4">
131
- <img id="result-image" src="" alt="Result" class="w-full h-auto rounded-lg">
132
- <button id="download-btn" class="download-btn px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium flex items-center">
133
- <i class="fas fa-download mr-2"></i> Download
134
- </button>
135
- </div>
136
-
137
- <div class="flex flex-wrap gap-3">
138
- <button id="download-png-btn" class="px-4 py-2 bg-white border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition font-medium flex items-center">
139
- <i class="fas fa-file-image mr-2"></i> PNG
140
- </button>
141
- <button id="download-jpg-btn" class="px-4 py-2 bg-white border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition font-medium flex items-center">
142
- <i class="fas fa-file-image mr-2"></i> JPG
143
- </button>
144
- <button id="download-webp-btn" class="px-4 py-2 bg-white border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition font-medium flex items-center">
145
- <i class="fas fa-file-image mr-2"></i> WEBP
 
 
 
 
 
 
 
 
 
146
  </button>
147
  </div>
148
-
149
- <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mt-4">
150
- <div class="flex">
151
- <div class="flex-shrink-0">
152
- <i class="fas fa-lightbulb text-blue-400"></i>
153
- </div>
154
- <div class="ml-3">
155
- <p class="text-sm text-blue-700">
156
- <span class="font-semibold">Tip:</span> For best results, use high-quality images with clear contrast between subject and background.
157
- </p>
158
- </div>
159
- </div>
160
- </div>
161
  </div>
 
 
 
162
  </div>
163
- </div>
 
 
 
 
 
164
  </div>
165
-
166
- <div class="mt-6 flex flex-wrap gap-3">
167
- <button id="process-btn" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium flex items-center">
168
- <i class="fas fa-magic mr-2"></i> Remove Background
169
- </button>
170
- <button id="clear-btn" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium flex items-center">
171
- <i class="fas fa-trash-alt mr-2"></i> Clear All
172
- </button>
173
-
174
- <div class="tooltip ml-auto">
175
- <button class="px-4 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition">
176
- <i class="fas fa-question-circle"></i>
177
  </button>
178
- <span class="tooltip-text">Our AI uses advanced computer vision to detect and remove backgrounds with pixel-perfect precision, preserving fine details like hair and transparent objects.</span>
179
  </div>
180
  </div>
181
- </div>
182
- </div>
183
-
184
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
185
- <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
186
- <div class="text-blue-500 mb-3">
187
- <i class="fas fa-bolt text-2xl"></i>
 
 
 
 
 
 
 
 
 
188
  </div>
189
- <h3 class="text-lg font-semibold text-gray-800 mb-2">Instant Processing</h3>
190
- <p class="text-gray-600">Get results in seconds with our high-performance DeepSeek AI engine.</p>
191
- </div>
192
-
193
- <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
194
- <div class="text-green-500 mb-3">
195
- <i class="fas fa-cut text-2xl"></i>
 
 
 
 
196
  </div>
197
- <h3 class="text-lg font-semibold text-gray-800 mb-2">Precision Edges</h3>
198
- <p class="text-gray-600">Perfectly clean cuts around hair, fur, and complex shapes.</p>
199
  </div>
200
-
201
- <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
202
- <div class="text-purple-500 mb-3">
203
- <i class="fas fa-lock text-2xl"></i>
 
 
 
 
 
 
204
  </div>
205
- <h3 class="text-lg font-semibold text-gray-800 mb-2">Secure Processing</h3>
206
- <p class="text-gray-600">Your images are processed securely and never stored permanently.</p>
207
- </div>
208
- </div>
209
-
210
- <div class="bg-white rounded-xl shadow-lg overflow-hidden">
211
- <div class="p-6">
212
- <h2 class="text-xl font-bold text-gray-800 mb-4">How To Remove Backgrounds</h2>
213
-
214
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
215
- <div class="flex flex-col items-center text-center p-4">
216
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-3">
217
- <i class="fas fa-upload text-blue-600"></i>
218
  </div>
219
- <h3 class="font-medium text-gray-800 mb-1">Upload Image</h3>
220
- <p class="text-sm text-gray-600">Drag & drop or select your image file</p>
221
  </div>
222
-
223
- <div class="flex flex-col items-center text-center p-4">
224
- <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-3">
225
- <i class="fas fa-magic text-purple-600"></i>
 
 
226
  </div>
227
- <h3 class="font-medium text-gray-800 mb-1">Process</h3>
228
- <p class="text-sm text-gray-600">Click "Remove Background" button</p>
229
  </div>
230
-
231
- <div class="flex flex-col items-center text-center p-4">
232
- <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-3">
233
- <i class="fas fa-check-circle text-green-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
234
  </div>
235
- <h3 class="font-medium text-gray-800 mb-1">Review</h3>
236
- <p class="text-sm text-gray-600">Check the transparent background result</p>
237
  </div>
238
-
239
- <div class="flex flex-col items-center text-center p-4">
240
- <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-3">
241
- <i class="fas fa-download text-yellow-600"></i>
 
 
242
  </div>
243
- <h3 class="font-medium text-gray-800 mb-1">Download</h3>
244
- <p class="text-sm text-gray-600">Save in PNG, JPG or WEBP format</p>
245
  </div>
246
- </div>
247
- </div>
248
- </div>
249
- </div>
250
-
251
- <footer class="bg-gray-800 text-white py-8">
252
- <div class="container mx-auto px-4">
253
- <div class="flex flex-col md:flex-row justify-between items-center">
254
- <div class="mb-4 md:mb-0">
255
- <div class="flex items-center">
256
- <i class="fas fa-image text-blue-400 text-xl mr-2"></i>
257
- <span class="text-xl font-bold">Background Remover</span>
258
  </div>
259
- <p class="text-gray-400 text-sm mt-1">Powered by DeepSeek AI Technology</p>
260
- </div>
261
-
262
- <div class="flex space-x-6">
263
- <a href="#" class="text-gray-300 hover:text-white transition">
264
- <i class="fab fa-wordpress"></i>
265
- </a>
266
- <a href="#" class="text-gray-300 hover:text-white transition">
267
- <i class="fas fa-question-circle"></i>
268
- </a>
269
- <a href="#" class="text-gray-300 hover:text-white transition">
270
- <i class="fas fa-envelope"></i>
271
- </a>
272
  </div>
273
  </div>
274
-
275
- <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
276
- <p>© 2023 Background Remover Tool. All rights reserved.</p>
277
- </div>
278
  </div>
279
- </footer>
280
 
281
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
282
  document.addEventListener('DOMContentLoaded', function() {
283
- const dropzone = document.getElementById('dropzone');
284
- const fileInput = document.getElementById('file-input');
285
- const selectFileBtn = document.getElementById('select-file-btn');
286
- const changeImageBtn = document.getElementById('change-image-btn');
287
- const previewImage = document.getElementById('preview-image');
288
- const uploadContainer = document.getElementById('upload-container');
289
- const previewContainer = document.getElementById('preview-container');
290
- const processBtn = document.getElementById('process-btn');
291
- const clearBtn = document.getElementById('clear-btn');
292
- const resultsPlaceholder = document.getElementById('results-placeholder');
293
- const resultsContainer = document.getElementById('results-container');
294
- const resultImage = document.getElementById('result-image');
295
- const downloadBtn = document.getElementById('download-btn');
296
- const downloadPngBtn = document.getElementById('download-png-btn');
297
- const downloadJpgBtn = document.getElementById('download-jpg-btn');
298
- const downloadWebpBtn = document.getElementById('download-webp-btn');
299
-
300
- let selectedFile = null;
301
 
302
- // Handle drag and drop events
303
- ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
304
- dropzone.addEventListener(eventName, preventDefaults, false);
305
- });
306
-
307
- function preventDefaults(e) {
308
  e.preventDefault();
309
- e.stopPropagation();
310
- }
311
-
312
- ['dragenter', 'dragover'].forEach(eventName => {
313
- dropzone.addEventListener(eventName, highlight, false);
314
- });
315
-
316
- ['dragleave', 'drop'].forEach(eventName => {
317
- dropzone.addEventListener(eventName, unhighlight, false);
318
- });
319
-
320
- function highlight() {
321
- dropzone.classList.add('active');
322
- }
323
-
324
- function unhighlight() {
325
- dropzone.classList.remove('active');
326
- }
327
-
328
- // Handle dropped files
329
- dropzone.addEventListener('drop', handleDrop, false);
330
-
331
- function handleDrop(e) {
332
- const dt = e.dataTransfer;
333
- const files = dt.files;
334
- handleFiles(files);
335
- }
336
-
337
- // Handle file selection via button
338
- selectFileBtn.addEventListener('click', function() {
339
- fileInput.click();
340
  });
341
 
342
- changeImageBtn.addEventListener('click', function() {
343
- fileInput.click();
344
- });
345
-
346
- fileInput.addEventListener('change', function() {
347
- handleFiles(this.files);
348
- });
 
349
 
350
- function handleFiles(files) {
351
- if (files.length === 0) return;
352
-
353
- const file = files[0];
354
- if (!file.type.match('image.*')) {
355
- alert('Please select an image file');
356
- return;
357
- }
358
 
359
- if (file.size > 10 * 1024 * 1024) {
360
- alert('File size should be less than 10MB');
361
- return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
362
  }
363
 
364
- selectedFile = file;
365
-
366
- const reader = new FileReader();
367
- reader.onload = function(e) {
368
- previewImage.src = e.target.result;
369
- uploadContainer.classList.add('hidden');
370
- previewContainer.classList.remove('hidden');
371
- };
372
- reader.readAsDataURL(file);
373
- }
374
-
375
- // Process button click
376
- processBtn.addEventListener('click', function() {
377
- if (!selectedFile) {
378
- alert('Please select an image first');
379
- return;
380
- }
381
-
382
- // Show loading state
383
- processBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
384
- processBtn.disabled = true;
 
 
 
 
 
 
 
 
 
 
 
 
385
 
386
- // In a real implementation, you would call the DeepSeek API here
387
- // For demo purposes, we'll simulate the API call with a timeout
388
- setTimeout(function() {
389
- // Simulate successful processing
390
- resultImage.src = previewImage.src; // In real use, this would be the processed image from API
391
-
392
- // Show results
393
- resultsPlaceholder.classList.add('hidden');
394
- resultsContainer.classList.remove('hidden');
395
-
396
- // Reset button
397
- processBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Remove Background';
398
- processBtn.disabled = false;
399
- }, 2000);
400
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
401
 
402
- // Clear button click
403
- clearBtn.addEventListener('click', function() {
404
- selectedFile = null;
405
- fileInput.value = '';
406
- previewImage.src = '';
407
- resultImage.src = '';
408
- uploadContainer.classList.remove('hidden');
409
- previewContainer.classList.add('hidden');
410
- resultsPlaceholder.classList.remove('hidden');
411
- resultsContainer.classList.add('hidden');
412
- });
 
 
 
 
413
 
414
- // Download buttons
415
- downloadBtn.addEventListener('click', function() {
416
- downloadImage('png');
417
  });
418
 
419
- downloadPngBtn.addEventListener('click', function() {
420
- downloadImage('png');
421
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
422
 
423
- downloadJpgBtn.addEventListener('click', function() {
424
- downloadImage('jpg');
425
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
426
 
427
- downloadWebpBtn.addEventListener('click', function() {
428
- downloadImage('webp');
429
- });
430
 
431
- function downloadImage(format) {
432
- if (!resultImage.src) return;
433
-
434
- // Create a temporary link
435
- const link = document.createElement('a');
436
- link.href = resultImage.src;
437
- link.download = `background-removed.${format}`;
438
-
439
- // Trigger download
440
- document.body.appendChild(link);
441
- link.click();
442
- document.body.removeChild(link);
443
  }
444
 
445
- // In a real implementation, you would have a function to call the DeepSeek API
446
- function callDeepSeekAPI(file) {
447
- // This is where you would implement the actual API call
448
- // The implementation would depend on the specific API requirements
449
- // Here's a conceptual example:
450
-
451
- /*
452
- const formData = new FormData();
453
- formData.append('image', file);
454
-
455
- return fetch('https://api.deepseek.com/v1/background-removal', {
456
- method: 'POST',
457
- headers: {
458
- 'Authorization': 'Bearer YOUR_DEEPSEEK_API_KEY'
459
- },
460
- body: formData
461
- })
462
- .then(response => response.json())
463
- .then(data => {
464
- if (data.success) {
465
- return data.processed_image_url;
466
- } else {
467
- throw new Error(data.message || 'Failed to process image');
468
- }
469
- });
470
- */
471
-
472
- // For demo purposes, we'll return a promise that resolves after a delay
473
- return new Promise((resolve) => {
474
- setTimeout(() => {
475
- resolve(previewImage.src); // In real use, this would be the processed image URL
476
- }, 1500);
477
- });
478
- }
 
 
479
  });
480
  </script>
481
  <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>
 
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>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
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
 
 
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