Hugging Face's logo

Spaces:
naklitechie
/
adengine-backend
Running

App Files Community
naklitechie commited on
Commit
2aeac7e
·
verified ·
1 Parent(s): cc60556

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +800 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Adengine Backend
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: red
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: adengine-backend
3
+ emoji: 🐳
4
+ colorFrom: pink
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,800 @@
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>Ad Engine Dashboard</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
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .page {
14
+ display: none;
15
+ }
16
+ .page.active {
17
+ display: block;
18
+ animation: fadeIn 0.5s ease;
19
+ }
20
+ @keyframes fadeIn {
21
+ from { opacity: 0; }
22
+ to { opacity: 1; }
23
+ }
24
+ .ad-preview-container {
25
+ background-color: #f0f0f0;
26
+ border-radius: 8px;
27
+ padding: 20px;
28
+ min-height: 300px;
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ }
33
+ .ad-preview {
34
+ background: white;
35
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
36
+ border-radius: 8px;
37
+ overflow: hidden;
38
+ transition: all 0.3s ease;
39
+ }
40
+ .ad-preview:hover {
41
+ transform: translateY(-5px);
42
+ box-shadow: 0 10px 15px rgba(0,0,0,0.1);
43
+ }
44
+ .status-badge {
45
+ padding: 4px 8px;
46
+ border-radius: 12px;
47
+ font-size: 12px;
48
+ font-weight: 600;
49
+ }
50
+ .status-active {
51
+ background-color: #d1fae5;
52
+ color: #065f46;
53
+ }
54
+ .status-paused {
55
+ background-color: #fee2e2;
56
+ color: #991b1b;
57
+ }
58
+ .status-pending {
59
+ background-color: #fef3c7;
60
+ color: #92400e;
61
+ }
62
+ .tab {
63
+ cursor: pointer;
64
+ transition: all 0.2s ease;
65
+ }
66
+ .tab.active {
67
+ border-bottom: 3px solid #3b82f6;
68
+ color: #3b82f6;
69
+ font-weight: 600;
70
+ }
71
+ .form-step {
72
+ display: none;
73
+ }
74
+ .form-step.active {
75
+ display: block;
76
+ }
77
+ .progress-bar {
78
+ height: 6px;
79
+ background-color: #e5e7eb;
80
+ border-radius: 3px;
81
+ overflow: hidden;
82
+ }
83
+ .progress-fill {
84
+ height: 100%;
85
+ background-color: #3b82f6;
86
+ transition: width 0.3s ease;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-gray-50">
91
+ <div class="flex h-screen overflow-hidden">
92
+ <!-- Sidebar -->
93
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
94
+ <div class="p-4 border-b border-gray-200">
95
+ <h1 class="text-xl font-bold text-blue-600 flex items-center">
96
+ <i class="fas fa-ad mr-2"></i>
97
+ AdEngine Pro
98
+ </h1>
99
+ </div>
100
+ <nav class="flex-1 overflow-y-auto p-4">
101
+ <div class="space-y-2">
102
+ <a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition" data-page="dashboard">
103
+ <i class="fas fa-tachometer-alt mr-3"></i>
104
+ Dashboard
105
+ </a>
106
+ <a href="#" class="nav-link flex items-center p-3 rounded-lg bg-blue-50 text-blue-600 font-medium" data-page="campaigns">
107
+ <i class="fas fa-bullhorn mr-3"></i>
108
+ Campaigns
109
+ </a>
110
+ <a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition" data-page="creatives">
111
+ <i class="fas fa-paint-brush mr-3"></i>
112
+ Creatives
113
+ </a>
114
+ <a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition" data-page="audiences">
115
+ <i class="fas fa-users mr-3"></i>
116
+ Audiences
117
+ </a>
118
+ <a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition" data-page="reports">
119
+ <i class="fas fa-chart-bar mr-3"></i>
120
+ Reports
121
+ </a>
122
+ <a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition" data-page="settings">
123
+ <i class="fas fa-cog mr-3"></i>
124
+ Settings
125
+ </a>
126
+ </div>
127
+ </nav>
128
+ <div class="p-4 border-t border-gray-200">
129
+ <div class="flex items-center">
130
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
131
+ <div>
132
+ <p class="font-medium">Sarah Johnson</p>
133
+ <p class="text-sm text-gray-500">Admin</p>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Main Content -->
140
+ <div class="flex-1 flex flex-col overflow-hidden">
141
+ <!-- Top Navigation -->
142
+ <header class="bg-white border-b border-gray-200 py-4 px-6 flex items-center justify-between">
143
+ <div class="flex items-center">
144
+ <button class="mr-4 text-gray-500 hover:text-gray-700">
145
+ <i class="fas fa-bars"></i>
146
+ </button>
147
+ <h2 class="text-xl font-semibold text-gray-800">Campaigns</h2>
148
+ </div>
149
+ <div class="flex items-center space-x-4">
150
+ <div class="relative">
151
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
152
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
153
+ </div>
154
+ <button class="text-gray-500 hover:text-gray-700">
155
+ <i class="fas fa-bell"></i>
156
+ </button>
157
+ </div>
158
+ </header>
159
+
160
+ <!-- Campaign Sub Navigation -->
161
+ <div class="bg-white border-b border-gray-200 px-6">
162
+ <div class="flex space-x-6">
163
+ <a href="#" class="tab py-4 active" data-subpage="listing">All Campaigns</a>
164
+ <a href="#" class="tab py-4" data-subpage="preview">Creative Preview</a>
165
+ <a href="#" class="tab py-4" data-subpage="setup">New Campaign</a>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Page Content -->
170
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
171
+ <!-- Listing Page -->
172
+ <div id="listing-page" class="page active">
173
+ <div class="flex justify-between items-center mb-6">
174
+ <h3 class="text-lg font-semibold text-gray-800">Active Campaigns</h3>
175
+ <div class="flex space-x-3">
176
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
177
+ <option>All Status</option>
178
+ <option>Active</option>
179
+ <option>Paused</option>
180
+ <option>Pending</option>
181
+ </select>
182
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center">
183
+ <i class="fas fa-plus mr-2"></i> New Campaign
184
+ </button>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="bg-white rounded-lg shadow overflow-hidden">
189
+ <div class="overflow-x-auto">
190
+ <table class="min-w-full divide-y divide-gray-200">
191
+ <thead class="bg-gray-50">
192
+ <tr>
193
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
194
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
195
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Impressions</th>
196
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicks</th>
197
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CTR</th>
198
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budget</th>
199
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
200
+ </tr>
201
+ </thead>
202
+ <tbody class="bg-white divide-y divide-gray-200">
203
+ <tr>
204
+ <td class="px-6 py-4 whitespace-nowrap">
205
+ <div class="flex items-center">
206
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
207
+ <i class="fas fa-ad text-blue-600"></i>
208
+ </div>
209
+ <div class="ml-4">
210
+ <div class="text-sm font-medium text-gray-900">Summer Sale 2023</div>
211
+ <div class="text-sm text-gray-500">Retargeting</div>
212
+ </div>
213
+ </div>
214
+ </td>
215
+ <td class="px-6 py-4 whitespace-nowrap">
216
+ <span class="status-badge status-active">Active</span>
217
+ </td>
218
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">245,678</td>
219
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,345</td>
220
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5.03%</td>
221
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$5,000</td>
222
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
223
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
224
+ <button class="text-red-600 hover:text-red-900">Pause</button>
225
+ </td>
226
+ </tr>
227
+ <tr>
228
+ <td class="px-6 py-4 whitespace-nowrap">
229
+ <div class="flex items-center">
230
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center">
231
+ <i class="fas fa-mobile-alt text-purple-600"></i>
232
+ </div>
233
+ <div class="ml-4">
234
+ <div class="text-sm font-medium text-gray-900">Mobile App Launch</div>
235
+ <div class="text-sm text-gray-500">Prospecting</div>
236
+ </div>
237
+ </div>
238
+ </td>
239
+ <td class="px-6 py-4 whitespace-nowrap">
240
+ <span class="status-badge status-paused">Paused</span>
241
+ </td>
242
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">189,234</td>
243
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,765</td>
244
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.63%</td>
245
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$3,500</td>
246
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
247
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
248
+ <button class="text-green-600 hover:text-green-900">Resume</button>
249
+ </td>
250
+ </tr>
251
+ <tr>
252
+ <td class="px-6 py-4 whitespace-nowrap">
253
+ <div class="flex items-center">
254
+ <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-lg flex items-center justify-center">
255
+ <i class="fas fa-gift text-yellow-600"></i>
256
+ </div>
257
+ <div class="ml-4">
258
+ <div class="text-sm font-medium text-gray-900">Holiday Special</div>
259
+ <div class="text-sm text-gray-500">Retargeting</div>
260
+ </div>
261
+ </div>
262
+ </td>
263
+ <td class="px-6 py-4 whitespace-nowrap">
264
+ <span class="status-badge status-pending">Pending</span>
265
+ </td>
266
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
267
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$7,500</td>
270
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
271
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
272
+ <button class="text-gray-600 hover:text-gray-900">Cancel</button>
273
+ </td>
274
+ </tr>
275
+ <tr>
276
+ <td class="px-6 py-4 whitespace-nowrap">
277
+ <div class="flex items-center">
278
+ <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center">
279
+ <i class="fas fa-newspaper text-green-600"></i>
280
+ </div>
281
+ <div class="ml-4">
282
+ <div class="text-sm font-medium text-gray-900">Content Marketing</div>
283
+ <div class="text-sm text-gray-500">Awareness</div>
284
+ </div>
285
+ </div>
286
+ </td>
287
+ <td class="px-6 py-4 whitespace-nowrap">
288
+ <span class="status-badge status-active">Active</span>
289
+ </td>
290
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">321,456</td>
291
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15,678</td>
292
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.88%</td>
293
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$6,000</td>
294
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
295
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
296
+ <button class="text-red-600 hover:text-red-900">Pause</button>
297
+ </td>
298
+ </tr>
299
+ </tbody>
300
+ </table>
301
+ </div>
302
+ <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
303
+ <div class="flex-1 flex justify-between sm:hidden">
304
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a>
305
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a>
306
+ </div>
307
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
308
+ <div>
309
+ <p class="text-sm text-gray-700">
310
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">12</span> results
311
+ </p>
312
+ </div>
313
+ <div>
314
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
315
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
316
+ <span class="sr-only">Previous</span>
317
+ <i class="fas fa-chevron-left"></i>
318
+ </a>
319
+ <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a>
320
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a>
321
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a>
322
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
323
+ <span class="sr-only">Next</span>
324
+ <i class="fas fa-chevron-right"></i>
325
+ </a>
326
+ </nav>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Preview Page -->
334
+ <div id="preview-page" class="page">
335
+ <div class="flex justify-between items-center mb-6">
336
+ <h3 class="text-lg font-semibold text-gray-800">Creative Preview</h3>
337
+ <div class="flex space-x-3">
338
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
339
+ <option>All Formats</option>
340
+ <option>Banner</option>
341
+ <option>Video</option>
342
+ <option>Native</option>
343
+ </select>
344
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center">
345
+ <i class="fas fa-filter mr-2"></i> Filter
346
+ </button>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
351
+ <!-- Ad Preview 1 -->
352
+ <div class="bg-white rounded-lg shadow overflow-hidden">
353
+ <div class="p-4 border-b border-gray-200">
354
+ <div class="flex justify-between items-center">
355
+ <h4 class="font-medium text-gray-800">Standard Banner (300x250)</h4>
356
+ <span class="status-badge status-active">Active</span>
357
+ </div>
358
+ <p class="text-sm text-gray-500 mt-1">Summer Sale Campaign</p>
359
+ </div>
360
+ <div class="p-4">
361
+ <div class="ad-preview-container">
362
+ <div class="ad-preview w-full max-w-xs">
363
+ <img src="https://via.placeholder.com/300x250" alt="Ad Preview" class="w-full">
364
+ <div class="p-3">
365
+ <h5 class="font-bold text-lg">Summer Sale!</h5>
366
+ <p class="text-sm text-gray-600">Up to 50% off on selected items</p>
367
+ <button class="mt-2 bg-blue-600 text-white px-3 py-1 rounded text-sm">Shop Now</button>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ <div class="px-4 py-3 bg-gray-50 flex justify-between items-center">
373
+ <div class="text-sm text-gray-500">
374
+ <span class="font-medium">CTR:</span> 4.8%
375
+ </div>
376
+ <div class="flex space-x-2">
377
+ <button class="text-blue-600 hover:text-blue-800">
378
+ <i class="fas fa-edit"></i>
379
+ </button>
380
+ <button class="text-green-600 hover:text-green-800">
381
+ <i class="fas fa-chart-line"></i>
382
+ </button>
383
+ <button class="text-red-600 hover:text-red-800">
384
+ <i class="fas fa-trash"></i>
385
+ </button>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Ad Preview 2 -->
391
+ <div class="bg-white rounded-lg shadow overflow-hidden">
392
+ <div class="p-4 border-b border-gray-200">
393
+ <div class="flex justify-between items-center">
394
+ <h4 class="font-medium text-gray-800">Video Ad (16:9)</h4>
395
+ <span class="status-badge status-paused">Paused</span>
396
+ </div>
397
+ <p class="text-sm text-gray-500 mt-1">Mobile App Campaign</p>
398
+ </div>
399
+ <div class="p-4">
400
+ <div class="ad-preview-container">
401
+ <div class="ad-preview w-full max-w-xs">
402
+ <div class="relative">
403
+ <img src="https://via.placeholder.com/320x180" alt="Video Thumbnail" class="w-full">
404
+ <div class="absolute inset-0 flex items-center justify-center">
405
+ <button class="bg-black bg-opacity-50 text-white rounded-full p-3">
406
+ <i class="fas fa-play"></i>
407
+ </button>
408
+ </div>
409
+ </div>
410
+ <div class="p-3">
411
+ <h5 class="font-bold text-lg">Try Our New App</h5>
412
+ <p class="text-sm text-gray-600">Download now and get 30 days free trial</p>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ <div class="px-4 py-3 bg-gray-50 flex justify-between items-center">
418
+ <div class="text-sm text-gray-500">
419
+ <span class="font-medium">CTR:</span> 3.2%
420
+ </div>
421
+ <div class="flex space-x-2">
422
+ <button class="text-blue-600 hover:text-blue-800">
423
+ <i class="fas fa-edit"></i>
424
+ </button>
425
+ <button class="text-green-600 hover:text-green-800">
426
+ <i class="fas fa-chart-line"></i>
427
+ </button>
428
+ <button class="text-red-600 hover:text-red-800">
429
+ <i class="fas fa-trash"></i>
430
+ </button>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <!-- Ad Preview 3 -->
436
+ <div class="bg-white rounded-lg shadow overflow-hidden">
437
+ <div class="p-4 border-b border-gray-200">
438
+ <div class="flex justify-between items-center">
439
+ <h4 class="font-medium text-gray-800">Native Ad</h4>
440
+ <span class="status-badge status-active">Active</span>
441
+ </div>
442
+ <p class="text-sm text-gray-500 mt-1">Content Marketing</p>
443
+ </div>
444
+ <div class="p-4">
445
+ <div class="ad-preview-container">
446
+ <div class="ad-preview w-full max-w-xs">
447
+ <div class="p-4">
448
+ <div class="flex items-start">
449
+ <img src="https://via.placeholder.com/60" alt="Logo" class="w-12 h-12 rounded mr-3">
450
+ <div>
451
+ <p class="text-xs text-gray-500">Sponsored</p>
452
+ <h5 class="font-bold text-sm">The Ultimate Guide to Marketing</h5>
453
+ </div>
454
+ </div>
455
+ <img src="https://via.placeholder.com/280x150" alt="Content Image" class="w-full mt-3">
456
+ <p class="text-sm text-gray-600 mt-2">Learn how to boost your marketing strategy with our comprehensive guide...</p>
457
+ <button class="mt-2 text-blue-600 text-sm font-medium">Read More</button>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ <div class="px-4 py-3 bg-gray-50 flex justify-between items-center">
463
+ <div class="text-sm text-gray-500">
464
+ <span class="font-medium">CTR:</span> 6.1%
465
+ </div>
466
+ <div class="flex space-x-2">
467
+ <button class="text-blue-600 hover:text-blue-800">
468
+ <i class="fas fa-edit"></i>
469
+ </button>
470
+ <button class="text-green-600 hover:text-green-800">
471
+ <i class="fas fa-chart-line"></i>
472
+ </button>
473
+ <button class="text-red-600 hover:text-red-800">
474
+ <i class="fas fa-trash"></i>
475
+ </button>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <!-- Campaign Setup Page -->
483
+ <div id="setup-page" class="page">
484
+ <div class="bg-white rounded-lg shadow overflow-hidden">
485
+ <div class="p-6 border-b border-gray-200">
486
+ <h3 class="text-lg font-semibold text-gray-800">New Campaign Setup</h3>
487
+ <p class="text-sm text-gray-500 mt-1">Fill in the details below to create a new advertising campaign</p>
488
+ </div>
489
+
490
+ <!-- Progress Bar -->
491
+ <div class="px-6 pt-4">
492
+ <div class="flex justify-between mb-1">
493
+ <span class="text-sm font-medium text-gray-700">Step <span id="current-step">1</span> of 4</span>
494
+ <span class="text-sm text-gray-500">30% complete</span>
495
+ </div>
496
+ <div class="progress-bar">
497
+ <div class="progress-fill" style="width: 30%"></div>
498
+ </div>
499
+ </div>
500
+
501
+ <!-- Form Steps -->
502
+ <div class="p-6">
503
+ <!-- Step 1: Campaign Details -->
504
+ <div id="step-1" class="form-step active">
505
+ <h4 class="font-medium text-gray-800 mb-4">Campaign Details</h4>
506
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
507
+ <div>
508
+ <label for="campaign-name" class="block text-sm font-medium text-gray-700 mb-1">Campaign Name</label>
509
+ <input type="text" id="campaign-name" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. Summer Sale 2023">
510
+ </div>
511
+ <div>
512
+ <label for="campaign-type" class="block text-sm font-medium text-gray-700 mb-1">Campaign Type</label>
513
+ <select id="campaign-type" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
514
+ <option>Select campaign type</option>
515
+ <option>Brand Awareness</option>
516
+ <option>Lead Generation</option>
517
+ <option>Product Sales</option>
518
+ <option>Traffic</option>
519
+ <option>App Installs</option>
520
+ </select>
521
+ </div>
522
+ <div>
523
+ <label for="start-date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
524
+ <input type="date" id="start-date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
525
+ </div>
526
+ <div>
527
+ <label for="end-date" class="block text-sm font-medium text-gray-700 mb-1">End Date (optional)</label>
528
+ <input type="date" id="end-date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
529
+ </div>
530
+ </div>
531
+ <div class="mt-6">
532
+ <label for="campaign-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
533
+ <textarea id="campaign-description" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Brief description of your campaign"></textarea>
534
+ </div>
535
+ </div>
536
+
537
+ <!-- Step 2: Budget & Bidding -->
538
+ <div id="step-2" class="form-step">
539
+ <h4 class="font-medium text-gray-800 mb-4">Budget & Bidding</h4>
540
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
541
+ <div>
542
+ <label for="budget-type" class="block text-sm font-medium text-gray-700 mb-1">Budget Type</label>
543
+ <select id="budget-type" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
544
+ <option>Daily Budget</option>
545
+ <option>Lifetime Budget</option>
546
+ </select>
547
+ </div>
548
+ <div>
549
+ <label for="budget-amount" class="block text-sm font-medium text-gray-700 mb-1">Budget Amount ($)</label>
550
+ <input type="number" id="budget-amount" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. 1000">
551
+ </div>
552
+ <div>
553
+ <label for="bid-strategy" class="block text-sm font-medium text-gray-700 mb-1">Bid Strategy</label>
554
+ <select id="bid-strategy" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
555
+ <option>Lowest Cost</option>
556
+ <option>Target Cost</option>
557
+ <option>Bid Cap</option>
558
+ </select>
559
+ </div>
560
+ <div>
561
+ <label for="bid-amount" class="block text-sm font-medium text-gray-700 mb-1">Bid Amount ($)</label>
562
+ <input type="number" id="bid-amount" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. 0.50">
563
+ </div>
564
+ </div>
565
+ <div class="mt-6">
566
+ <label class="block text-sm font-medium text-gray-700 mb-2">Optimization Goal</label>
567
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
568
+ <div class="flex items-center">
569
+ <input id="goal-impressions" name="optimization-goal" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
570
+ <label for="goal-impressions" class="ml-2 block text-sm text-gray-700">Impressions</label>
571
+ </div>
572
+ <div class="flex items-center">
573
+ <input id="goal-clicks" name="optimization-goal" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
574
+ <label for="goal-clicks" class="ml-2 block text-sm text-gray-700">Link Clicks</label>
575
+ </div>
576
+ <div class="flex items-center">
577
+ <input id="goal-conversions" name="optimization-goal" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
578
+ <label for="goal-conversions" class="ml-2 block text-sm text-gray-700">Conversions</label>
579
+ </div>
580
+ <div class="flex items-center">
581
+ <input id="goal-reach" name="optimization-goal" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
582
+ <label for="goal-reach" class="ml-2 block text-sm text-gray-700">Reach</label>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+
588
+ <!-- Step 3: Targeting -->
589
+ <div id="step-3" class="form-step">
590
+ <h4 class="font-medium text-gray-800 mb-4">Audience Targeting</h4>
591
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
592
+ <div>
593
+ <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label>
594
+ <select id="location" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
595
+ <option>United States</option>
596
+ <option>Canada</option>
597
+ <option>United Kingdom</option>
598
+ <option>Australia</option>
599
+ <option>Germany</option>
600
+ </select>
601
+ </div>
602
+ <div>
603
+ <label for="age-range" class="block text-sm font-medium text-gray-700 mb-1">Age Range</label>
604
+ <select id="age-range" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
605
+ <option>18-65+</option>
606
+ <option>18-24</option>
607
+ <option>25-34</option>
608
+ <option>35-44</option>
609
+ <option>45-54</option>
610
+ <option>55-65+</option>
611
+ </select>
612
+ </div>
613
+ <div>
614
+ <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
615
+ <select id="gender" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
616
+ <option>All</option>
617
+ <option>Male</option>
618
+ <option>Female</option>
619
+ </select>
620
+ </div>
621
+ <div>
622
+ <label for="language" class="block text-sm font-medium text-gray-700 mb-1">Language</label>
623
+ <select id="language" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
624
+ <option>English</option>
625
+ <option>Spanish</option>
626
+ <option>French</option>
627
+ <option>German</option>
628
+ </select>
629
+ </div>
630
+ </div>
631
+ <div class="mt-6">
632
+ <label for="interests" class="block text-sm font-medium text-gray-700 mb-1">Interests (optional)</label>
633
+ <div class="flex flex-wrap gap-2">
634
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Technology</span>
635
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Fashion</span>
636
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Sports</span>
637
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Travel</span>
638
+ <button class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 hover:bg-gray-200">
639
+ <i class="fas fa-plus mr-1"></i> Add
640
+ </button>
641
+ </div>
642
+ </div>
643
+ <div class="mt-6">
644
+ <label class="block text-sm font-medium text-gray-700 mb-2">Placements</label>
645
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
646
+ <div class="flex items-center">
647
+ <input id="placement-facebook" name="placement" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
648
+ <label for="placement-facebook" class="ml-2 block text-sm text-gray-700">Facebook</label>
649
+ </div>
650
+ <div class="flex items-center">
651
+ <input id="placement-instagram" name="placement" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
652
+ <label for="placement-instagram" class="ml-2 block text-sm text-gray-700">Instagram</label>
653
+ </div>
654
+ <div class="flex items-center">
655
+ <input id="placement-audience-network" name="placement" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
656
+ <label for="placement-audience-network" class="ml-2 block text-sm text-gray-700">Audience Network</label>
657
+ </div>
658
+ <div class="flex items-center">
659
+ <input id="placement-messenger" name="placement" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
660
+ <label for="placement-messenger" class="ml-2 block text-sm text-gray-700">Messenger</label>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <!-- Step 4: Creatives -->
667
+ <div id="step-4" class="form-step">
668
+ <h4 class="font-medium text-gray-800 mb-4">Ad Creatives</h4>
669
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
670
+ <div>
671
+ <label for="ad-format" class="block text-sm font-medium text-gray-700 mb-1">Ad Format</label>
672
+ <select id="ad-format" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
673
+ <option>Single Image</option>
674
+ <option>Carousel</option>
675
+ <option>Video</option>
676
+ <option>Slideshow</option>
677
+ <option>Collection</option>
678
+ </select>
679
+ </div>
680
+ <div>
681
+ <label for="ad-name" class="block text-sm font-medium text-gray-700 mb-1">Ad Name</label>
682
+ <input type="text" id="ad-name" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. Summer Sale Banner">
683
+ </div>
684
+ </div>
685
+ <div class="mt-6">
686
+ <label class="block text-sm font-medium text-gray-700 mb-2">Upload Creative</label>
687
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
688
+ <div class="space-y-1 text-center">
689
+ <div class="flex text-sm text-gray-600">
690
+ <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
691
+ <span>Upload a file</span>
692
+ <input id="file-upload" name="file-upload" type="file" class="sr-only">
693
+ </label>
694
+ <p class="pl-1">or drag and drop</p>
695
+ </div>
696
+ <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ <div class="mt-6">
701
+ <label for="primary-text" class="block text-sm font-medium text-gray-700 mb-1">Primary Text</label>
702
+ <textarea id="primary-text" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Main text that appears in your ad"></textarea>
703
+ </div>
704
+ <div class="mt-4">
705
+ <label for="headline" class="block text-sm font-medium text-gray-700 mb-1">Headline</label>
706
+ <input type="text" id="headline" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="A short headline for your ad">
707
+ </div>
708
+ <div class="mt-4">
709
+ <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
710
+ <textarea id="description" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Additional text that appears below the headline"></textarea>
711
+ </div>
712
+ <div class="mt-4">
713
+ <label for="call-to-action" class="block text-sm font-medium text-gray-700 mb-1">Call to Action</label>
714
+ <select id="call-to-action" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
715
+ <option>Shop Now</option>
716
+ <option>Learn More</option>
717
+ <option>Sign Up</option>
718
+ <option>Download</option>
719
+ <option>Book Now</option>
720
+ <option>Contact Us</option>
721
+ </select>
722
+ </div>
723
+ </div>
724
+ </div>
725
+
726
+ <!-- Form Navigation -->
727
+ <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-between">
728
+ <button id="prev-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" disabled>
729
+ Previous
730
+ </button>
731
+ <button id="next-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
732
+ Next
733
+ </button>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </main>
738
+ </div>
739
+ </div>
740
+
741
+ <script>
742
+ // Page navigation
743
+ document.querySelectorAll('.tab').forEach(tab => {
744
+ tab.addEventListener('click', function() {
745
+ // Remove active class from all tabs
746
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
747
+
748
+ // Add active class to clicked tab
749
+ this.classList.add('active');
750
+
751
+ // Hide all pages
752
+ document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
753
+
754
+ // Show the selected page
755
+ const pageId = this.getAttribute('data-subpage') + '-page';
756
+ document.getElementById(pageId).classList.add('active');
757
+ });
758
+ });
759
+
760
+ // Campaign setup form steps
761
+ const steps = ['step-1', 'step-2', 'step-3', 'step-4'];
762
+ let currentStep = 0;
763
+
764
+ document.getElementById('next-btn').addEventListener('click', function() {
765
+ if (currentStep < steps.length - 1) {
766
+ document.getElementById(steps[currentStep]).classList.remove('active');
767
+ currentStep++;
768
+ document.getElementById(steps[currentStep]).classList.add('active');
769
+ document.getElementById('current-step').textContent = currentStep + 1;
770
+ document.querySelector('.progress-fill').style.width = `${(currentStep + 1) * 25}%`;
771
+
772
+ // Update button states
773
+ document.getElementById('prev-btn').disabled = false;
774
+ if (currentStep === steps.length - 1) {
775
+ this.textContent = 'Submit';
776
+ }
777
+ } else {
778
+ // Form submission would go here
779
+ alert('Campaign created successfully!');
780
+ }
781
+ });
782
+
783
+ document.getElementById('prev-btn').addEventListener('click', function() {
784
+ if (currentStep > 0) {
785
+ document.getElementById(steps[currentStep]).classList.remove('active');
786
+ currentStep--;
787
+ document.getElementById(steps[currentStep]).classList.add('active');
788
+ document.getElementById('current-step').textContent = currentStep + 1;
789
+ document.querySelector('.progress-fill').style.width = `${(currentStep + 1) * 25}%`;
790
+
791
+ // Update button states
792
+ document.getElementById('next-btn').textContent = 'Next';
793
+ if (currentStep === 0) {
794
+ this.disabled = true;
795
+ }
796
+ }
797
+ });
798
+ </script>
799
+ <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=naklitechie/adengine-backend" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
800
+ </html>