MainSource365 commited on
Commit
11fe8c1
·
verified ·
1 Parent(s): e5b08e9

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +510 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Content Creation
3
- emoji: 🌍
4
- colorFrom: purple
5
- colorTo: green
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: content-creation
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,510 @@
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>AI Social Media Super 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
+ .platform-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .gradient-bg {
15
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ }
17
+ .content-preview {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .content-preview:hover {
21
+ transform: scale(1.03);
22
+ }
23
+ @keyframes pulse {
24
+ 0%, 100% {
25
+ opacity: 1;
26
+ }
27
+ 50% {
28
+ opacity: 0.5;
29
+ }
30
+ }
31
+ .animate-pulse {
32
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50 min-h-screen">
37
+ <div class="gradient-bg text-white">
38
+ <div class="container mx-auto px-4 py-12">
39
+ <div class="flex flex-col md:flex-row justify-between items-center">
40
+ <div class="mb-8 md:mb-0">
41
+ <h1 class="text-4xl font-bold mb-2">AI Social Media Super Agent</h1>
42
+ <p class="text-xl opacity-90">Automate your social media presence across 6 major platforms</p>
43
+ </div>
44
+ <div class="flex items-center space-x-4">
45
+ <div class="relative">
46
+ <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-75 animate-pulse"></div>
47
+ <button class="relative bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-all">
48
+ <i class="fas fa-rocket mr-2"></i> Launch Agent
49
+ </button>
50
+ </div>
51
+ <button class="bg-white bg-opacity-20 px-4 py-3 rounded-lg hover:bg-opacity-30 transition-all">
52
+ <i class="fas fa-cog"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="container mx-auto px-4 py-12">
60
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
61
+ <!-- Platform Cards -->
62
+ <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
63
+ <div class="p-6">
64
+ <div class="flex items-center mb-4">
65
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
66
+ <i class="fab fa-facebook-f text-blue-600 text-xl"></i>
67
+ </div>
68
+ <h3 class="text-xl font-semibold">Facebook</h3>
69
+ </div>
70
+ <p class="text-gray-600 mb-4">Schedule posts, analyze engagement, and automate responses.</p>
71
+ <div class="flex justify-between items-center">
72
+ <div class="flex space-x-2">
73
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Posts</span>
74
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Analytics</span>
75
+ </div>
76
+ <label class="relative inline-flex items-center cursor-pointer">
77
+ <input type="checkbox" value="" class="sr-only peer" checked>
78
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
79
+ </label>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
85
+ <div class="p-6">
86
+ <div class="flex items-center mb-4">
87
+ <div class="bg-pink-100 p-3 rounded-full mr-4">
88
+ <i class="fab fa-instagram text-pink-600 text-xl"></i>
89
+ </div>
90
+ <h3 class="text-xl font-semibold">Instagram</h3>
91
+ </div>
92
+ <p class="text-gray-600 mb-4">Auto-post images, stories, and reels with AI-generated captions.</p>
93
+ <div class="flex justify-between items-center">
94
+ <div class="flex space-x-2">
95
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Stories</span>
96
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Reels</span>
97
+ </div>
98
+ <label class="relative inline-flex items-center cursor-pointer">
99
+ <input type="checkbox" value="" class="sr-only peer" checked>
100
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-pink-600"></div>
101
+ </label>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
107
+ <div class="p-6">
108
+ <div class="flex items-center mb-4">
109
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
110
+ <i class="fab fa-twitter text-blue-400 text-xl"></i>
111
+ </div>
112
+ <h3 class="text-xl font-semibold">Twitter</h3>
113
+ </div>
114
+ <p class="text-gray-600 mb-4">Tweet automatically, engage with trends, and grow your audience.</p>
115
+ <div class="flex justify-between items-center">
116
+ <div class="flex space-x-2">
117
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Threads</span>
118
+ <span class="bg-cyan-100 text-cyan-800 text-xs px-2 py-1 rounded">Trends</span>
119
+ </div>
120
+ <label class="relative inline-flex items-center cursor-pointer">
121
+ <input type="checkbox" value="" class="sr-only peer" checked>
122
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-400"></div>
123
+ </label>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
129
+ <div class="p-6">
130
+ <div class="flex items-center mb-4">
131
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
132
+ <i class="fab fa-linkedin-in text-blue-700 text-xl"></i>
133
+ </div>
134
+ <h3 class="text-xl font-semibold">LinkedIn</h3>
135
+ </div>
136
+ <p class="text-gray-600 mb-4">Professional content automation for networking and lead generation.</p>
137
+ <div class="flex justify-between items-center">
138
+ <div class="flex space-x-2">
139
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Articles</span>
140
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Networking</span>
141
+ </div>
142
+ <label class="relative inline-flex items-center cursor-pointer">
143
+ <input type="checkbox" value="" class="sr-only peer" checked>
144
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-700"></div>
145
+ </label>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
151
+ <div class="p-6">
152
+ <div class="flex items-center mb-4">
153
+ <div class="bg-black p-3 rounded-full mr-4">
154
+ <i class="fab fa-tiktok text-white text-xl"></i>
155
+ </div>
156
+ <h3 class="text-xl font-semibold">TikTok</h3>
157
+ </div>
158
+ <p class="text-gray-600 mb-4">Create and schedule viral short-form videos with AI assistance.</p>
159
+ <div class="flex justify-between items-center">
160
+ <div class="flex space-x-2">
161
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Videos</span>
162
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Sounds</span>
163
+ </div>
164
+ <label class="relative inline-flex items-center cursor-pointer">
165
+ <input type="checkbox" value="" class="sr-only peer" checked>
166
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black"></div>
167
+ </label>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
173
+ <div class="p-6">
174
+ <div class="flex items-center mb-4">
175
+ <div class="bg-red-100 p-3 rounded-full mr-4">
176
+ <i class="fab fa-youtube text-red-600 text-xl"></i>
177
+ </div>
178
+ <h3 class="text-xl font-semibold">YouTube</h3>
179
+ </div>
180
+ <p class="text-gray-600 mb-4">Upload videos, optimize thumbnails, and manage your channel.</p>
181
+ <div class="flex justify-between items-center">
182
+ <div class="flex space-x-2">
183
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Videos</span>
184
+ <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">Shorts</span>
185
+ </div>
186
+ <label class="relative inline-flex items-center cursor-pointer">
187
+ <input type="checkbox" value="" class="sr-only peer" checked>
188
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
189
+ </label>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Content Creation Section -->
196
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
197
+ <div class="p-6">
198
+ <h2 class="text-2xl font-bold mb-6">AI Content Generator</h2>
199
+
200
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
201
+ <div class="lg:col-span-2">
202
+ <div class="mb-6">
203
+ <label class="block text-gray-700 font-medium mb-2">Content Type</label>
204
+ <div class="grid grid-cols-3 gap-4">
205
+ <button class="bg-blue-100 text-blue-700 py-2 px-4 rounded-lg font-medium flex items-center justify-center">
206
+ <i class="fas fa-align-left mr-2"></i> Text
207
+ </button>
208
+ <button class="bg-green-100 text-green-700 py-2 px-4 rounded-lg font-medium flex items-center justify-center">
209
+ <i class="fas fa-image mr-2"></i> Image
210
+ </button>
211
+ <button class="bg-purple-100 text-purple-700 py-2 px-4 rounded-lg font-medium flex items-center justify-center">
212
+ <i class="fas fa-video mr-2"></i> Video
213
+ </button>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="mb-6">
218
+ <label class="block text-gray-700 font-medium mb-2">Content Theme</label>
219
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
220
+ <option>Business & Marketing</option>
221
+ <option>Technology & AI</option>
222
+ <option>Lifestyle & Wellness</option>
223
+ <option>Entertainment</option>
224
+ <option>Education</option>
225
+ </select>
226
+ </div>
227
+
228
+ <div class="mb-6">
229
+ <label class="block text-gray-700 font-medium mb-2">Content Details</label>
230
+ <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 h-32" placeholder="Describe what you want to post about..."></textarea>
231
+ </div>
232
+
233
+ <div class="flex space-x-4">
234
+ <button class="bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center">
235
+ <i class="fas fa-magic mr-2"></i> Generate Content
236
+ </button>
237
+ <button class="bg-gray-100 text-gray-700 py-3 px-6 rounded-lg font-medium hover:bg-gray-200 transition-colors flex items-center">
238
+ <i class="fas fa-eraser mr-2"></i> Clear
239
+ </button>
240
+ </div>
241
+ </div>
242
+
243
+ <div>
244
+ <label class="block text-gray-700 font-medium mb-2">Preview</label>
245
+ <div class="content-preview bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-6 flex flex-col items-center justify-center h-full">
246
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
247
+ <p class="text-gray-500 text-center">Your generated content will appear here. Describe what you want to post and click "Generate Content".</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Scheduling Section -->
255
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
256
+ <div class="p-6">
257
+ <h2 class="text-2xl font-bold mb-6">Post Scheduling</h2>
258
+
259
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
260
+ <div>
261
+ <div class="mb-6">
262
+ <label class="block text-gray-700 font-medium mb-2">Schedule Time</label>
263
+ <div class="flex space-x-4">
264
+ <input type="date" class="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-1">
265
+ <input type="time" class="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-1">
266
+ </div>
267
+ </div>
268
+
269
+ <div class="mb-6">
270
+ <label class="block text-gray-700 font-medium mb-2">Post Frequency</label>
271
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
272
+ <option>One-time post</option>
273
+ <option>Daily</option>
274
+ <option>Weekly</option>
275
+ <option>Monthly</option>
276
+ <option>Custom</option>
277
+ </select>
278
+ </div>
279
+ </div>
280
+
281
+ <div>
282
+ <label class="block text-gray-700 font-medium mb-2">Platform Selection</label>
283
+ <div class="grid grid-cols-2 gap-3">
284
+ <div class="flex items-center">
285
+ <input type="checkbox" id="facebook-schedule" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
286
+ <label for="facebook-schedule" class="ml-2 block text-gray-700">Facebook</label>
287
+ </div>
288
+ <div class="flex items-center">
289
+ <input type="checkbox" id="instagram-schedule" class="h-4 w-4 text-pink-600 focus:ring-pink-500 border-gray-300 rounded" checked>
290
+ <label for="instagram-schedule" class="ml-2 block text-gray-700">Instagram</label>
291
+ </div>
292
+ <div class="flex items-center">
293
+ <input type="checkbox" id="twitter-schedule" class="h-4 w-4 text-blue-400 focus:ring-blue-400 border-gray-300 rounded" checked>
294
+ <label for="twitter-schedule" class="ml-2 block text-gray-700">Twitter</label>
295
+ </div>
296
+ <div class="flex items-center">
297
+ <input type="checkbox" id="linkedin-schedule" class="h-4 w-4 text-blue-700 focus:ring-blue-700 border-gray-300 rounded" checked>
298
+ <label for="linkedin-schedule" class="ml-2 block text-gray-700">LinkedIn</label>
299
+ </div>
300
+ <div class="flex items-center">
301
+ <input type="checkbox" id="tiktok-schedule" class="h-4 w-4 text-black focus:ring-black border-gray-300 rounded" checked>
302
+ <label for="tiktok-schedule" class="ml-2 block text-gray-700">TikTok</label>
303
+ </div>
304
+ <div class="flex items-center">
305
+ <input type="checkbox" id="youtube-schedule" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded" checked>
306
+ <label for="youtube-schedule" class="ml-2 block text-gray-700">YouTube</label>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="mt-6 flex justify-end">
313
+ <button class="bg-green-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center">
314
+ <i class="fas fa-calendar-plus mr-2"></i> Schedule Post
315
+ </button>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Analytics Dashboard -->
321
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
322
+ <div class="p-6">
323
+ <h2 class="text-2xl font-bold mb-6">Performance Analytics</h2>
324
+
325
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
326
+ <div class="bg-blue-50 p-4 rounded-lg">
327
+ <div class="flex justify-between items-start">
328
+ <div>
329
+ <p class="text-sm text-blue-600 font-medium">Total Posts</p>
330
+ <h3 class="text-2xl font-bold mt-1">1,248</h3>
331
+ </div>
332
+ <div class="bg-blue-100 p-2 rounded-full">
333
+ <i class="fas fa-paper-plane text-blue-600"></i>
334
+ </div>
335
+ </div>
336
+ <p class="text-xs text-blue-600 mt-2"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p>
337
+ </div>
338
+
339
+ <div class="bg-green-50 p-4 rounded-lg">
340
+ <div class="flex justify-between items-start">
341
+ <div>
342
+ <p class="text-sm text-green-600 font-medium">Engagement Rate</p>
343
+ <h3 class="text-2xl font-bold mt-1">8.2%</h3>
344
+ </div>
345
+ <div class="bg-green-100 p-2 rounded-full">
346
+ <i class="fas fa-heart text-green-600"></i>
347
+ </div>
348
+ </div>
349
+ <p class="text-xs text-green-600 mt-2"><i class="fas fa-arrow-up mr-1"></i> 3.5% from last month</p>
350
+ </div>
351
+
352
+ <div class="bg-purple-50 p-4 rounded-lg">
353
+ <div class="flex justify-between items-start">
354
+ <div>
355
+ <p class="text-sm text-purple-600 font-medium">New Followers</p>
356
+ <h3 class="text-2xl font-bold mt-1">4,721</h3>
357
+ </div>
358
+ <div class="bg-purple-100 p-2 rounded-full">
359
+ <i class="fas fa-users text-purple-600"></i>
360
+ </div>
361
+ </div>
362
+ <p class="text-xs text-purple-600 mt-2"><i class="fas fa-arrow-up mr-1"></i> 18% from last month</p>
363
+ </div>
364
+
365
+ <div class="bg-orange-50 p-4 rounded-lg">
366
+ <div class="flex justify-between items-start">
367
+ <div>
368
+ <p class="text-sm text-orange-600 font-medium">Click Rate</p>
369
+ <h3 class="text-2xl font-bold mt-1">3.1%</h3>
370
+ </div>
371
+ <div class="bg-orange-100 p-2 rounded-full">
372
+ <i class="fas fa-mouse-pointer text-orange-600"></i>
373
+ </div>
374
+ </div>
375
+ <p class="text-xs text-orange-600 mt-2"><i class="fas fa-arrow-down mr-1"></i> 0.8% from last month</p>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="bg-gray-50 p-4 rounded-lg">
380
+ <div class="flex justify-between items-center mb-4">
381
+ <h3 class="text-lg font-semibold">Platform Performance</h3>
382
+ <select class="p-2 border border-gray-300 rounded-lg text-sm">
383
+ <option>Last 7 days</option>
384
+ <option>Last 30 days</option>
385
+ <option>Last 90 days</option>
386
+ </select>
387
+ </div>
388
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
389
+ <div class="text-center">
390
+ <div class="h-32 w-full bg-blue-100 rounded-lg flex items-center justify-center mb-2">
391
+ <i class="fab fa-facebook-f text-blue-600 text-2xl"></i>
392
+ </div>
393
+ <p class="font-medium">Facebook</p>
394
+ <p class="text-sm text-green-600">+12%</p>
395
+ </div>
396
+ <div class="text-center">
397
+ <div class="h-32 w-full bg-pink-100 rounded-lg flex items-center justify-center mb-2">
398
+ <i class="fab fa-instagram text-pink-600 text-2xl"></i>
399
+ </div>
400
+ <p class="font-medium">Instagram</p>
401
+ <p class="text-sm text-green-600">+18%</p>
402
+ </div>
403
+ <div class="text-center">
404
+ <div class="h-32 w-full bg-blue-100 rounded-lg flex items-center justify-center mb-2">
405
+ <i class="fab fa-twitter text-blue-400 text-2xl"></i>
406
+ </div>
407
+ <p class="font-medium">Twitter</p>
408
+ <p class="text-sm text-green-600">+7%</p>
409
+ </div>
410
+ <div class="text-center">
411
+ <div class="h-32 w-full bg-blue-100 rounded-lg flex items-center justify-center mb-2">
412
+ <i class="fab fa-linkedin-in text-blue-700 text-2xl"></i>
413
+ </div>
414
+ <p class="font-medium">LinkedIn</p>
415
+ <p class="text-sm text-green-600">+22%</p>
416
+ </div>
417
+ <div class="text-center">
418
+ <div class="h-32 w-full bg-black rounded-lg flex items-center justify-center mb-2">
419
+ <i class="fab fa-tiktok text-white text-2xl"></i>
420
+ </div>
421
+ <p class="font-medium">TikTok</p>
422
+ <p class="text-sm text-green-600">+35%</p>
423
+ </div>
424
+ <div class="text-center">
425
+ <div class="h-32 w-full bg-red-100 rounded-lg flex items-center justify-center mb-2">
426
+ <i class="fab fa-youtube text-red-600 text-2xl"></i>
427
+ </div>
428
+ <p class="font-medium">YouTube</p>
429
+ <p class="text-sm text-green-600">+9%</p>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <footer class="bg-gray-800 text-white py-8">
438
+ <div class="container mx-auto px-4">
439
+ <div class="flex flex-col md:flex-row justify-between items-center">
440
+ <div class="mb-6 md:mb-0">
441
+ <h2 class="text-xl font-bold mb-2">AI Social Media Super Agent</h2>
442
+ <p class="text-gray-400">Automate and optimize your social media presence</p>
443
+ </div>
444
+ <div class="flex space-x-6">
445
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
446
+ <i class="fab fa-facebook-f"></i>
447
+ </a>
448
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
449
+ <i class="fab fa-instagram"></i>
450
+ </a>
451
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
452
+ <i class="fab fa-twitter"></i>
453
+ </a>
454
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
455
+ <i class="fab fa-linkedin-in"></i>
456
+ </a>
457
+ </div>
458
+ </div>
459
+ <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
460
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 AI Social Media Super Agent. All rights reserved.</p>
461
+ <div class="flex space-x-6">
462
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Privacy Policy</a>
463
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Terms of Service</a>
464
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Contact Us</a>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </footer>
469
+
470
+ <script>
471
+ // Simple animation for the generate content button
472
+ document.querySelectorAll('button').forEach(button => {
473
+ button.addEventListener('click', function() {
474
+ this.classList.add('transform', 'scale-95');
475
+ setTimeout(() => {
476
+ this.classList.remove('transform', 'scale-95');
477
+ }, 150);
478
+ });
479
+ });
480
+
481
+ // Simulate content generation
482
+ document.querySelector('.bg-blue-600').addEventListener('click', function() {
483
+ const preview = document.querySelector('.content-preview');
484
+ preview.innerHTML = `
485
+ <div class="w-full">
486
+ <div class="bg-white p-4 rounded-lg shadow mb-4">
487
+ <h4 class="font-bold mb-2">AI-Generated Post Content</h4>
488
+ <p class="text-gray-700 mb-3">"The future of social media is automated! With AI-powered tools, you can create engaging content, schedule posts, and analyze performance across all platforms from one dashboard. #SocialMedia #AI #Marketing"</p>
489
+ <div class="flex justify-between text-sm text-gray-500">
490
+ <span><i class="far fa-clock mr-1"></i> Just now</span>
491
+ <span><i class="fas fa-robot mr-1"></i> AI Generated</span>
492
+ </div>
493
+ </div>
494
+ <div class="grid grid-cols-2 gap-2 mb-4">
495
+ <div class="bg-blue-100 rounded-lg h-24 flex items-center justify-center">
496
+ <i class="fas fa-image text-blue-400 text-xl"></i>
497
+ </div>
498
+ <div class="bg-green-100 rounded-lg h-24 flex items-center justify-center">
499
+ <i class="fas fa-chart-line text-green-400 text-xl"></i>
500
+ </div>
501
+ </div>
502
+ <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors">
503
+ <i class="fas fa-share-alt mr-2"></i> Post to Selected Platforms
504
+ </button>
505
+ </div>
506
+ `;
507
+ });
508
+ </script>
509
+ <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=MainSource365/content-creation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
510
+ </html>