Hugging Face's logo

Spaces:
javier55
/
test
Running

App Files Community
javier55 commited on
Commit
82386df
·
verified ·
1 Parent(s): 9c27419

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +419 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 📊
4
- colorFrom: red
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,419 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Social Growth AI Agent</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, #6e8efb, #a777e3);
12
+ }
13
+ .card-hover {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .pulse {
21
+ animation: pulse 2s infinite;
22
+ }
23
+ @keyframes pulse {
24
+ 0% {
25
+ box-shadow: 0 0 0 0 rgba(167, 119, 227, 0.7);
26
+ }
27
+ 70% {
28
+ box-shadow: 0 0 0 10px rgba(167, 119, 227, 0);
29
+ }
30
+ 100% {
31
+ box-shadow: 0 0 0 0 rgba(167, 119, 227, 0);
32
+ }
33
+ }
34
+ .thread-line {
35
+ position: relative;
36
+ padding-left: 2rem;
37
+ }
38
+ .thread-line:before {
39
+ content: "";
40
+ position: absolute;
41
+ left: 0.5rem;
42
+ top: 0;
43
+ bottom: 0;
44
+ width: 2px;
45
+ background-color: #a777e3;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <div class="gradient-bg text-white py-6 px-4 shadow-lg">
51
+ <div class="container mx-auto flex justify-between items-center">
52
+ <div class="flex items-center space-x-3">
53
+ <i class="fas fa-robot text-3xl"></i>
54
+ <h1 class="text-2xl font-bold">Social Growth AI Agent</h1>
55
+ </div>
56
+ <div class="flex items-center space-x-4">
57
+ <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-semibold hover:bg-gray-100 transition">
58
+ <i class="fas fa-cog mr-2"></i>Settings
59
+ </button>
60
+ <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-purple-600 font-bold">
61
+ AI
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="container mx-auto px-4 py-8">
68
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
69
+ <!-- Reddit Scraper Card -->
70
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
71
+ <div class="p-6">
72
+ <div class="flex items-center justify-between mb-4">
73
+ <h2 class="text-xl font-bold text-gray-800">
74
+ <i class="fab fa-reddit text-red-500 mr-2"></i> Reddit Scraper
75
+ </h2>
76
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
77
+ Active
78
+ </span>
79
+ </div>
80
+ <p class="text-gray-600 mb-4">
81
+ Scraping trending topics about "How to grow on Instagram" from r/Instagram, r/SocialMediaMarketing, and r/DigitalMarketing.
82
+ </p>
83
+ <div class="mb-4">
84
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
85
+ <span>Last Scraped</span>
86
+ <span>2 minutes ago</span>
87
+ </div>
88
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
89
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 85%"></div>
90
+ </div>
91
+ </div>
92
+ <div class="space-y-3">
93
+ <div class="flex items-start">
94
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center text-red-500">
95
+ <i class="fab fa-reddit"></i>
96
+ </div>
97
+ <div class="ml-3">
98
+ <p class="text-sm font-medium text-gray-900">From r/Instagram</p>
99
+ <p class="text-sm text-gray-500">"The algorithm favors engagement over everything else - focus on comments!"</p>
100
+ </div>
101
+ </div>
102
+ <div class="flex items-start">
103
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center text-red-500">
104
+ <i class="fab fa-reddit"></i>
105
+ </div>
106
+ <div class="ml-3">
107
+ <p class="text-sm font-medium text-gray-900">From r/SocialMediaMarketing</p>
108
+ <p class="text-sm text-gray-500">"Consistent posting at optimal times increased my reach by 300%"</p>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ <button class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition flex items-center justify-center">
113
+ <i class="fas fa-sync-alt mr-2"></i> Run Scraper Now
114
+ </button>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Content Generator Card -->
119
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
120
+ <div class="p-6">
121
+ <div class="flex items-center justify-between mb-4">
122
+ <h2 class="text-xl font-bold text-gray-800">
123
+ <i class="fas fa-magic text-purple-500 mr-2"></i> Content Generator
124
+ </h2>
125
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
126
+ Processing
127
+ </span>
128
+ </div>
129
+ <p class="text-gray-600 mb-4">
130
+ Generating Twitter threads from scraped Reddit data about Instagram growth strategies.
131
+ </p>
132
+ <div class="mb-4">
133
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
134
+ <span>Threads Generated</span>
135
+ <span>3 today</span>
136
+ </div>
137
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
138
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 60%"></div>
139
+ </div>
140
+ </div>
141
+ <div class="space-y-4">
142
+ <div class="bg-gray-50 p-4 rounded-lg">
143
+ <h3 class="font-medium text-gray-800 mb-2">Latest Generated Thread</h3>
144
+ <div class="space-y-3">
145
+ <div class="thread-line">
146
+ <p class="text-sm text-gray-700">1/5 Instagram growth isn't about luck - it's about strategy. Here are 5 proven tactics from top creators:</p>
147
+ </div>
148
+ <div class="thread-line">
149
+ <p class="text-sm text-gray-700">2/5 Engagement > Followers. The algorithm prioritizes accounts that spark conversations. Reply to every comment in the first hour.</p>
150
+ </div>
151
+ <div class="thread-line">
152
+ <p class="text-sm text-gray-700">3/5 Consistency beats perfection. Posting 3x/week at optimal times (check your insights) grows accounts faster than sporadic viral posts.</p>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition flex items-center justify-center">
158
+ <i class="fas fa-plus mr-2"></i> Generate New Thread
159
+ </button>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Twitter Poster Card -->
164
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
165
+ <div class="p-6">
166
+ <div class="flex items-center justify-between mb-4">
167
+ <h2 class="text-xl font-bold text-gray-800">
168
+ <i class="fab fa-twitter text-blue-400 mr-2"></i> Twitter Poster
169
+ </h2>
170
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
171
+ Connected
172
+ </span>
173
+ </div>
174
+ <p class="text-gray-600 mb-4">
175
+ Automatically posts generated threads to your Twitter account at optimal times.
176
+ </p>
177
+ <div class="mb-4">
178
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
179
+ <span>Next Scheduled Post</span>
180
+ <span>in 2 hours</span>
181
+ </div>
182
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
183
+ <div class="bg-blue-400 h-2.5 rounded-full" style="width: 30%"></div>
184
+ </div>
185
+ </div>
186
+ <div class="space-y-3">
187
+ <div class="flex items-center p-3 bg-gray-50 rounded-lg">
188
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
189
+ <i class="fab fa-twitter"></i>
190
+ </div>
191
+ <div class="ml-3">
192
+ <p class="text-sm font-medium text-gray-900">Last Posted</p>
193
+ <p class="text-sm text-gray-500">"5 Instagram growth hacks that actually work..." - 3 hours ago</p>
194
+ </div>
195
+ </div>
196
+ <div class="flex items-center p-3 bg-gray-50 rounded-lg">
197
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
198
+ <i class="fas fa-chart-line"></i>
199
+ </div>
200
+ <div class="ml-3">
201
+ <p class="text-sm font-medium text-gray-900">Performance</p>
202
+ <p class="text-sm text-gray-500">Average 142 retweets per thread</p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ <button class="mt-4 w-full bg-blue-400 hover:bg-blue-500 text-white py-2 px-4 rounded-lg transition flex items-center justify-center">
207
+ <i class="fas fa-paper-plane mr-2"></i> Post Now
208
+ </button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Analytics Section -->
214
+ <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
215
+ <div class="p-6">
216
+ <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
217
+ <i class="fas fa-chart-bar text-purple-500 mr-2"></i> Performance Analytics
218
+ </h2>
219
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
220
+ <div class="bg-purple-50 p-4 rounded-lg">
221
+ <div class="flex items-center justify-between">
222
+ <h3 class="text-gray-600 font-medium">Reddit Posts Analyzed</h3>
223
+ <i class="fas fa-reddit text-red-500"></i>
224
+ </div>
225
+ <p class="text-3xl font-bold text-purple-600 mt-2">1,248</p>
226
+ <p class="text-sm text-gray-500 mt-1">+12% this week</p>
227
+ </div>
228
+ <div class="bg-blue-50 p-4 rounded-lg">
229
+ <div class="flex items-center justify-between">
230
+ <h3 class="text-gray-600 font-medium">Twitter Threads Created</h3>
231
+ <i class="fas fa-magic text-blue-500"></i>
232
+ </div>
233
+ <p class="text-3xl font-bold text-blue-600 mt-2">87</p>
234
+ <p class="text-sm text-gray-500 mt-1">+5 this week</p>
235
+ </div>
236
+ <div class="bg-green-50 p-4 rounded-lg">
237
+ <div class="flex items-center justify-between">
238
+ <h3 class="text-gray-600 font-medium">Avg. Twitter Engagement</h3>
239
+ <i class="fab fa-twitter text-green-500"></i>
240
+ </div>
241
+ <p class="text-3xl font-bold text-green-600 mt-2">312</p>
242
+ <p class="text-sm text-gray-500 mt-1">likes per thread</p>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="border-t pt-6">
247
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Twitter Thread Performance</h3>
248
+ <div class="overflow-x-auto">
249
+ <table class="min-w-full divide-y divide-gray-200">
250
+ <thead class="bg-gray-50">
251
+ <tr>
252
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Thread Topic</th>
253
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Posted</th>
254
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Likes</th>
255
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Retweets</th>
256
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Replies</th>
257
+ </tr>
258
+ </thead>
259
+ <tbody class="bg-white divide-y divide-gray-200">
260
+ <tr>
261
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Instagram algorithm secrets</td>
262
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">287</td>
264
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">56</td>
265
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">34</td>
266
+ </tr>
267
+ <tr>
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Content calendar tips</td>
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 day ago</td>
270
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">412</td>
271
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78</td>
272
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">29</td>
273
+ </tr>
274
+ <tr>
275
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Hashtag strategy</td>
276
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
277
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">356</td>
278
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">92</td>
279
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">41</td>
280
+ </tr>
281
+ </tbody>
282
+ </table>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Settings Modal (hidden by default) -->
289
+ <div id="settingsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden">
290
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
291
+ <div class="flex justify-between items-center mb-4">
292
+ <h3 class="text-lg font-bold text-gray-800">Agent Settings</h3>
293
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
294
+ <i class="fas fa-times"></i>
295
+ </button>
296
+ </div>
297
+ <div class="space-y-4">
298
+ <div>
299
+ <label class="block text-sm font-medium text-gray-700 mb-1">Reddit Subreddits</label>
300
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" value="r/Instagram, r/SocialMediaMarketing, r/DigitalMarketing">
301
+ </div>
302
+ <div>
303
+ <label class="block text-sm font-medium text-gray-700 mb-1">Search Keywords</label>
304
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" value="grow on instagram, instagram growth, increase followers">
305
+ </div>
306
+ <div>
307
+ <label class="block text-sm font-medium text-gray-700 mb-1">Posting Schedule</label>
308
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
309
+ <option>Every 6 hours</option>
310
+ <option selected>Every 12 hours</option>
311
+ <option>Daily</option>
312
+ <option>Every 2 days</option>
313
+ </select>
314
+ </div>
315
+ <div class="pt-4 border-t">
316
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md transition">
317
+ Save Settings
318
+ </button>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <script>
326
+ // Simple interactivity for the dashboard
327
+ document.addEventListener('DOMContentLoaded', function() {
328
+ // Settings modal toggle
329
+ const settingsBtn = document.querySelector('button:has(.fa-cog)');
330
+ const closeModal = document.getElementById('closeModal');
331
+ const modal = document.getElementById('settingsModal');
332
+
333
+ settingsBtn.addEventListener('click', () => {
334
+ modal.classList.remove('hidden');
335
+ });
336
+
337
+ closeModal.addEventListener('click', () => {
338
+ modal.classList.add('hidden');
339
+ });
340
+
341
+ // Simulate scraping when clicking the scraper button
342
+ const scraperBtn = document.querySelector('button:has(.fa-sync-alt)');
343
+ scraperBtn.addEventListener('click', function() {
344
+ const originalText = this.innerHTML;
345
+ this.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Scraping...';
346
+ this.classList.add('opacity-75');
347
+
348
+ setTimeout(() => {
349
+ this.innerHTML = originalText;
350
+ this.classList.remove('opacity-75');
351
+
352
+ // Show a temporary success message
353
+ const success = document.createElement('div');
354
+ success.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg';
355
+ success.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Successfully scraped 15 new Reddit posts!';
356
+ document.body.appendChild(success);
357
+
358
+ setTimeout(() => {
359
+ success.remove();
360
+ }, 3000);
361
+ }, 2000);
362
+ });
363
+
364
+ // Simulate thread generation
365
+ const generateBtn = document.querySelector('button:has(.fa-plus)');
366
+ generateBtn.addEventListener('click', function() {
367
+ const originalText = this.innerHTML;
368
+ this.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Generating...';
369
+ this.classList.add('opacity-75');
370
+
371
+ setTimeout(() => {
372
+ this.innerHTML = originalText;
373
+ this.classList.remove('opacity-75');
374
+
375
+ // Update the latest thread preview
376
+ const threadContainer = document.querySelector('.bg-gray-50.p-4.rounded-lg');
377
+ threadContainer.innerHTML = `
378
+ <h3 class="font-medium text-gray-800 mb-2">New Generated Thread</h3>
379
+ <div class="space-y-3">
380
+ <div class="thread-line">
381
+ <p class="text-sm text-gray-700">1/6 Most people use Instagram hashtags wrong. Here's how to actually get discovered:</p>
382
+ </div>
383
+ <div class="thread-line">
384
+ <p class="text-sm text-gray-700">2/6 Stop using the same 30 hashtags on every post. Instagram sees this as spam. Instead, create 5-10 hashtag sets for different content types.</p>
385
+ </div>
386
+ <div class="thread-line">
387
+ <p class="text-sm text-gray-700">3/6 Mix hashtag sizes: 3-5 large (1M+ posts), 5-7 medium (100k-1M), 3-5 small (&lt;100k). This gives you visibility at multiple levels.</p>
388
+ </div>
389
+ </div>
390
+ `;
391
+ }, 1500);
392
+ });
393
+
394
+ // Simulate posting to Twitter
395
+ const postBtn = document.querySelector('button:has(.fa-paper-plane)');
396
+ postBtn.addEventListener('click', function() {
397
+ const originalText = this.innerHTML;
398
+ this.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Posting...';
399
+ this.classList.add('opacity-75');
400
+
401
+ setTimeout(() => {
402
+ this.innerHTML = originalText;
403
+ this.classList.remove('opacity-75');
404
+
405
+ // Show a temporary success message
406
+ const success = document.createElement('div');
407
+ success.className = 'fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg';
408
+ success.innerHTML = '<i class="fab fa-twitter mr-2"></i> Thread successfully posted to Twitter!';
409
+ document.body.appendChild(success);
410
+
411
+ setTimeout(() => {
412
+ success.remove();
413
+ }, 3000);
414
+ }, 2500);
415
+ });
416
+ });
417
+ </script>
418
+ <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=javier55/test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
419
+ </html>