Hugging Face's logo

Spaces:
ddambaabdunasser
/
damba-project
Running

App Files Community
ddambaabdunasser commited on
Commit
39aec2e
·
verified ·
1 Parent(s): da79887

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +753 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Damba Project
3
- emoji: 🐠
4
- colorFrom: purple
5
- colorTo: gray
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: damba-project
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,753 @@
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>Damba AI - Next-Gen Video Creation Studio</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #0f172a;
15
+ color: white;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #db2777 100%);
20
+ }
21
+
22
+ .card-hover {
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .card-hover:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
29
+ }
30
+
31
+ .video-preview {
32
+ border-radius: 16px;
33
+ overflow: hidden;
34
+ position: relative;
35
+ }
36
+
37
+ .video-preview::after {
38
+ content: '';
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ right: 0;
43
+ bottom: 0;
44
+ background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
45
+ }
46
+
47
+ .voice-wave {
48
+ height: 40px;
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: space-between;
52
+ width: 60px;
53
+ }
54
+
55
+ .voice-wave span {
56
+ height: 6px;
57
+ width: 4px;
58
+ border-radius: 3px;
59
+ background-color: #3b82f6;
60
+ animation: wave 1.5s ease-in-out infinite;
61
+ }
62
+
63
+ .voice-wave span:nth-child(1) { animation-delay: 0.1s; }
64
+ .voice-wave span:nth-child(2) { animation-delay: 0.3s; height: 10px; }
65
+ .voice-wave span:nth-child(3) { animation-delay: 0.5s; height: 16px; }
66
+ .voice-wave span:nth-child(4) { animation-delay: 0.7s; height: 10px; }
67
+ .voice-wave span:nth-child(5) { animation-delay: 0.9s; }
68
+
69
+ @keyframes wave {
70
+ 0%, 100% { height: 6px; }
71
+ 50% { height: 20px; }
72
+ }
73
+
74
+ .loading-spinner {
75
+ width: 40px;
76
+ height: 40px;
77
+ border: 4px solid rgba(255,255,255,0.3);
78
+ border-radius: 50%;
79
+ border-top-color: white;
80
+ animation: spin 1s ease-in-out infinite;
81
+ }
82
+
83
+ @keyframes spin {
84
+ to { transform: rotate(360deg); }
85
+ }
86
+
87
+ .neon-border {
88
+ position: relative;
89
+ }
90
+
91
+ .neon-border::before {
92
+ content: '';
93
+ position: absolute;
94
+ inset: 0;
95
+ border-radius: 16px;
96
+ padding: 2px;
97
+ background: linear-gradient(45deg, #00f, #0f0, #f00);
98
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
99
+ -webkit-mask-composite: xor;
100
+ mask-composite: exclude;
101
+ pointer-events: none;
102
+ }
103
+
104
+ .holographic-effect {
105
+ background: linear-gradient(135deg,
106
+ rgba(0, 255, 255, 0.1) 0%,
107
+ rgba(255, 0, 255, 0.1) 50%,
108
+ rgba(255, 255, 0, 0.1) 100%);
109
+ backdrop-filter: blur(10px);
110
+ border: 1px solid rgba(255, 255, 255, 0.2);
111
+ }
112
+
113
+ .resolution-badge {
114
+ position: absolute;
115
+ top: 10px;
116
+ left: 10px;
117
+ background: rgba(0, 0, 0, 0.7);
118
+ color: #0ff;
119
+ padding: 2px 8px;
120
+ border-radius: 12px;
121
+ font-size: 12px;
122
+ font-weight: bold;
123
+ display: flex;
124
+ align-items: center;
125
+ gap: 4px;
126
+ }
127
+
128
+ .ai-tooltip {
129
+ position: relative;
130
+ }
131
+
132
+ .ai-tooltip:hover::after {
133
+ content: attr(data-tooltip);
134
+ position: absolute;
135
+ bottom: 100%;
136
+ left: 50%;
137
+ transform: translateX(-50%);
138
+ background: rgba(0, 0, 0, 0.8);
139
+ color: white;
140
+ padding: 5px 10px;
141
+ border-radius: 5px;
142
+ font-size: 12px;
143
+ white-space: nowrap;
144
+ margin-bottom: 5px;
145
+ }
146
+ </style>
147
+ </head>
148
+ <body>
149
+ <!-- Navigation -->
150
+ <nav class="bg-gray-900/50 backdrop-blur-md fixed w-full z-50">
151
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
152
+ <div class="flex items-center justify-between h-16">
153
+ <div class="flex items-center">
154
+ <div class="flex-shrink-0">
155
+ <span class="text-2xl font-bold gradient-text bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">DAMBA AI</span>
156
+ </div>
157
+ <div class="hidden md:block">
158
+ <div class="ml-10 flex items-baseline space-x-4">
159
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
160
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Templates</a>
161
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">AI Tools</a>
162
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
163
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Studio</a>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="hidden md:block">
168
+ <div class="ml-4 flex items-center md:ml-6">
169
+ <button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-2 rounded-full text-sm font-medium hover:opacity-90 transition">
170
+ Launch Studio
171
+ </button>
172
+ </div>
173
+ </div>
174
+ <div class="-mr-2 flex md:hidden">
175
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
176
+ <span class="sr-only">Open main menu</span>
177
+ <i class="fas fa-bars"></i>
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </nav>
183
+
184
+ <!-- Hero Section -->
185
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 gradient-bg">
186
+ <div class="max-w-7xl mx-auto">
187
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
188
+ <div class="mb-12 lg:mb-0">
189
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
190
+ <span class="text-yellow-300">AI-Powered</span> Video Creation <span class="text-cyan-300">Reimagined</span>
191
+ </h1>
192
+ <p class="text-lg md:text-xl text-gray-200 mb-8">
193
+ Damba AI transforms your ideas into 8K videos, animations, and images with cutting-edge neural networks.
194
+ Create, edit, and share in seconds.
195
+ </p>
196
+ <div class="flex flex-col sm:flex-row gap-4">
197
+ <button class="bg-white text-gray-900 px-8 py-4 rounded-full text-lg font-bold hover:bg-gray-100 transition flex items-center justify-center gap-2">
198
+ <i class="fas fa-bolt"></i> Generate Now
199
+ </button>
200
+ <button class="border-2 border-white text-white px-8 py-4 rounded-full text-lg font-medium hover:bg-white/10 transition flex items-center justify-center gap-2">
201
+ <i class="fas fa-link"></i> Shorten URL
202
+ </button>
203
+ </div>
204
+ <div class="mt-8 flex items-center gap-4">
205
+ <div class="flex -space-x-2">
206
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
207
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
208
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
209
+ </div>
210
+ <p class="text-sm text-white/80">
211
+ Trusted by <span class="font-bold">25,000+</span> creators & brands
212
+ </p>
213
+ </div>
214
+ </div>
215
+ <div class="relative">
216
+ <div class="video-preview w-full aspect-video bg-gray-800 rounded-2xl overflow-hidden shadow-2xl neon-border">
217
+ <div class="resolution-badge">
218
+ <i class="fas fa-expand"></i> 8K UHD
219
+ </div>
220
+ <div class="absolute inset-0 flex items-center justify-center">
221
+ <div class="text-center">
222
+ <div class="loading-spinner mx-auto mb-4"></div>
223
+ <p class="text-white font-medium">Rendering 8K video...</p>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ <div class="absolute -bottom-6 -right-6 bg-white text-gray-900 px-6 py-3 rounded-full shadow-lg font-bold flex items-center gap-2">
228
+ <i class="fas fa-brain"></i> AI-Powered
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- Futuristic Features -->
236
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
237
+ <div class="max-w-7xl mx-auto">
238
+ <div class="text-center mb-16">
239
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Next-Generation AI Tools</h2>
240
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
241
+ Powered by quantum neural networks for unparalleled creative possibilities
242
+ </p>
243
+ </div>
244
+
245
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
246
+ <!-- Feature 1 -->
247
+ <div class="bg-gray-800 p-8 rounded-2xl card-hover holographic-effect">
248
+ <div class="w-14 h-14 rounded-full bg-blue-900/50 flex items-center justify-center mb-6 neon-border">
249
+ <i class="fas fa-vr-cardboard text-2xl text-blue-400"></i>
250
+ </div>
251
+ <h3 class="text-xl font-bold mb-3">8K/16K Resolution</h3>
252
+ <p class="text-gray-400 mb-4">
253
+ Generate ultra-high-definition videos and images beyond standard resolutions with our quantum rendering engine.
254
+ </p>
255
+ <div class="mt-6">
256
+ <div class="flex gap-2 flex-wrap">
257
+ <span class="bg-blue-900/30 text-blue-400 px-3 py-1 rounded-full text-xs">8K</span>
258
+ <span class="bg-purple-900/30 text-purple-400 px-3 py-1 rounded-full text-xs">16K</span>
259
+ <span class="bg-green-900/30 text-green-400 px-3 py-1 rounded-full text-xs">HDR10+</span>
260
+ <span class="bg-red-900/30 text-red-400 px-3 py-1 rounded-full text-xs">120FPS</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Feature 2 -->
266
+ <div class="bg-gray-800 p-8 rounded-2xl card-hover holographic-effect">
267
+ <div class="w-14 h-14 rounded-full bg-purple-900/50 flex items-center justify-center mb-6 neon-border">
268
+ <i class="fas fa-atom text-2xl text-purple-400"></i>
269
+ </div>
270
+ <h3 class="text-xl font-bold mb-3">Neural Animation</h3>
271
+ <p class="text-gray-400 mb-4">
272
+ Create hyper-realistic 3D animations from text or simple sketches with our physics-based AI.
273
+ </p>
274
+ <div class="mt-6">
275
+ <div class="flex items-center gap-4">
276
+ <div class="voice-wave"></div>
277
+ <p class="text-sm text-gray-300">"Animate a cyberpunk city with flying cars"</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Feature 3 -->
283
+ <div class="bg-gray-800 p-8 rounded-2xl card-hover holographic-effect">
284
+ <div class="w-14 h-14 rounded-full bg-pink-900/50 flex items-center justify-center mb-6 neon-border">
285
+ <i class="fas fa-link text-2xl text-pink-400"></i>
286
+ </div>
287
+ <h3 class="text-xl font-bold mb-3">Smart URL Shortener</h3>
288
+ <p class="text-gray-400 mb-4">
289
+ Generate branded short links with AI-powered analytics and automatic A/B testing.
290
+ </p>
291
+ <div class="mt-6">
292
+ <div class="bg-gray-700 rounded-lg p-4">
293
+ <div class="flex items-center gap-3">
294
+ <div class="flex-1 overflow-hidden">
295
+ <p class="text-sm text-gray-400 truncate">https://example.com/very-long-url-that-needs-to-be-shortened</p>
296
+ <div class="flex items-center gap-2 mt-1">
297
+ <p class="font-medium text-blue-400">damba.ai/cyber23</p>
298
+ <button class="text-gray-400 hover:text-white">
299
+ <i class="fas fa-copy"></i>
300
+ </button>
301
+ </div>
302
+ </div>
303
+ <button class="bg-pink-600 text-white p-2 rounded-full">
304
+ <i class="fas fa-chart-line"></i>
305
+ </button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </section>
313
+
314
+ <!-- AI Studio Demo -->
315
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-950">
316
+ <div class="max-w-7xl mx-auto">
317
+ <div class="text-center mb-16">
318
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Damba AI Studio</h2>
319
+ <p class="text-lg text-gray-400 max-w-3xl mx-auto">
320
+ Our futuristic editing interface with real-time AI assistance and holographic controls
321
+ </p>
322
+ </div>
323
+
324
+ <div class="bg-gray-900 rounded-3xl overflow-hidden neon-border">
325
+ <div class="grid grid-cols-1 lg:grid-cols-3">
326
+ <!-- Tools Panel -->
327
+ <div class="bg-gray-800 p-6 border-r border-gray-700">
328
+ <h3 class="font-bold mb-4 text-lg">AI Tools</h3>
329
+ <div class="space-y-3">
330
+ <button class="w-full flex items-center gap-3 p-3 rounded-lg bg-gray-700 hover:bg-gray-600">
331
+ <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
332
+ <i class="fas fa-magic text-white text-sm"></i>
333
+ </div>
334
+ <span>Smart Enhance</span>
335
+ </button>
336
+ <button class="w-full flex items-center gap-3 p-3 rounded-lg bg-gray-700 hover:bg-gray-600">
337
+ <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
338
+ <i class="fas fa-robot text-white text-sm"></i>
339
+ </div>
340
+ <span>AI Animation</span>
341
+ </button>
342
+ <button class="w-full flex items-center gap-3 p-3 rounded-lg bg-gray-700 hover:bg-gray-600">
343
+ <div class="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center">
344
+ <i class="fas fa-link text-white text-sm"></i>
345
+ </div>
346
+ <span>URL Shortener</span>
347
+ </button>
348
+ <button class="w-full flex items-center gap-3 p-3 rounded-lg bg-gray-700 hover:bg-gray-600">
349
+ <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center">
350
+ <i class="fas fa-microphone text-white text-sm"></i>
351
+ </div>
352
+ <span>Voice Cloning</span>
353
+ </button>
354
+ </div>
355
+
356
+ <h3 class="font-bold mb-4 mt-8 text-lg">Resolution</h3>
357
+ <div class="grid grid-cols-3 gap-2">
358
+ <button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">1080p</button>
359
+ <button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">4K</button>
360
+ <button class="p-2 rounded bg-blue-600 text-white text-xs">8K</button>
361
+ <button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">16K</button>
362
+ <button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">VR</button>
363
+ <button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">HDR</button>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Preview Area -->
368
+ <div class="lg:col-span-2 p-6">
369
+ <div class="video-preview w-full aspect-video bg-gray-700 rounded-xl mb-6 relative">
370
+ <div class="resolution-badge">
371
+ <i class="fas fa-expand"></i> 8K Preview
372
+ </div>
373
+ </div>
374
+
375
+ <!-- AI Prompt -->
376
+ <div class="bg-gray-800 rounded-xl p-4">
377
+ <div class="flex items-start gap-3">
378
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0">
379
+ <i class="fas fa-robot text-white"></i>
380
+ </div>
381
+ <div class="flex-1">
382
+ <div class="bg-gray-700 rounded-lg p-3 mb-2">
383
+ <textarea class="w-full bg-transparent outline-none resize-none" rows="2" placeholder="Describe what you want to create..."></textarea>
384
+ </div>
385
+ <div class="flex justify-between items-center">
386
+ <div class="flex gap-2">
387
+ <button class="text-gray-400 hover:text-white text-sm">
388
+ <i class="fas fa-image"></i> Add Media
389
+ </button>
390
+ <button class="text-gray-400 hover:text-white text-sm">
391
+ <i class="fas fa-link"></i> Shorten URL
392
+ </button>
393
+ </div>
394
+ <button class="bg-purple-600 text-white px-4 py-1 rounded-full text-sm font-medium">
395
+ Generate <i class="fas fa-arrow-right ml-1"></i>
396
+ </button>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Short URL Generator -->
403
+ <div class="bg-gray-800 rounded-xl p-4 mt-6">
404
+ <h4 class="font-bold mb-3 flex items-center gap-2">
405
+ <i class="fas fa-link text-blue-400"></i> URL Shortener
406
+ </h4>
407
+ <div class="space-y-3">
408
+ <div>
409
+ <label class="block text-sm text-gray-400 mb-1">Original URL</label>
410
+ <input type="text" class="w-full bg-gray-700 rounded-lg p-2 text-sm" placeholder="https://example.com/very-long-url">
411
+ </div>
412
+ <div class="grid grid-cols-3 gap-3">
413
+ <div>
414
+ <label class="block text-sm text-gray-400 mb-1">Custom Path</label>
415
+ <input type="text" class="w-full bg-gray-700 rounded-lg p-2 text-sm" placeholder="my-link">
416
+ </div>
417
+ <div class="col-span-2">
418
+ <label class="block text-sm text-gray-400 mb-1">Domain</label>
419
+ <select class="w-full bg-gray-700 rounded-lg p-2 text-sm">
420
+ <option>damba.ai</option>
421
+ <option>dmba.link</option>
422
+ <option>yourbrand.com</option>
423
+ </select>
424
+ </div>
425
+ </div>
426
+ <div class="flex items-center justify-between pt-2">
427
+ <div class="flex items-center gap-2">
428
+ <i class="fas fa-lock text-green-400"></i>
429
+ <span class="text-sm">HTTPS Secure</span>
430
+ </div>
431
+ <button class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium">
432
+ Shorten URL
433
+ </button>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <!-- Futuristic Templates -->
444
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
445
+ <div class="max-w-7xl mx-auto">
446
+ <div class="flex flex-col md:flex-row justify-between items-center mb-12">
447
+ <div>
448
+ <h2 class="text-3xl md:text-4xl font-bold mb-2">Quantum Templates</h2>
449
+ <p class="text-gray-400">AI-generated templates with futuristic designs</p>
450
+ </div>
451
+ <div class="mt-4 md:mt-0">
452
+ <div class="flex gap-2">
453
+ <button class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-medium">8K Videos</button>
454
+ <button class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-medium">Holograms</button>
455
+ <button class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-medium">Neural Art</button>
456
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium">See All</button>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
462
+ <!-- Template 1 -->
463
+ <div class="bg-gray-900 rounded-xl overflow-hidden card-hover holographic-effect">
464
+ <div class="video-preview w-full aspect-[9/16] bg-gradient-to-br from-purple-900 to-blue-900 relative">
465
+ <div class="resolution-badge">
466
+ <i class="fas fa-expand"></i> 8K
467
+ </div>
468
+ <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
469
+ <h3 class="font-bold text-lg">Holographic UI</h3>
470
+ <p class="text-sm text-gray-300">Sci-Fi • 15s</p>
471
+ </div>
472
+ <div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
473
+ <i class="fas fa-heart mr-1"></i> 42.5k
474
+ </div>
475
+ </div>
476
+ <div class="p-4">
477
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium flex items-center justify-center gap-2">
478
+ <i class="fas fa-bolt"></i> Use Template
479
+ </button>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Template 2 -->
484
+ <div class="bg-gray-900 rounded-xl overflow-hidden card-hover holographic-effect">
485
+ <div class="video-preview w-full aspect-[9/16] bg-gradient-to-br from-pink-900 to-red-900 relative">
486
+ <div class="resolution-badge">
487
+ <i class="fas fa-expand"></i> 16K
488
+ </div>
489
+ <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
490
+ <h3 class="font-bold text-lg">Cyber City</h3>
491
+ <p class="text-sm text-gray-300">Animation • 30s</p>
492
+ </div>
493
+ <div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
494
+ <i class="fas fa-heart mr-1"></i> 38.2k
495
+ </div>
496
+ </div>
497
+ <div class="p-4">
498
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium flex items-center justify-center gap-2">
499
+ <i class="fas fa-bolt"></i> Use Template
500
+ </button>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Template 3 -->
505
+ <div class="bg-gray-900 rounded-xl overflow-hidden card-hover holographic-effect">
506
+ <div class="video-preview w-full aspect-[9/16] bg-gradient-to-br from-green-900 to-teal-900 relative">
507
+ <div class="resolution-badge">
508
+ <i class="fas fa-expand"></i> 8K HDR
509
+ </div>
510
+ <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
511
+ <h3 class="font-bold text-lg">Quantum Realm</h3>
512
+ <p class="text-sm text-gray-300">Abstract • 45s</p>
513
+ </div>
514
+ <div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
515
+ <i class="fas fa-heart mr-1"></i> 29.7k
516
+ </div>
517
+ </div>
518
+ <div class="p-4">
519
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium flex items-center justify-center gap-2">
520
+ <i class="fas fa-bolt"></i> Use Template
521
+ </button>
522
+ </div>
523
+ </div>
524
+
525
+ <!-- Template 4 -->
526
+ <div class="bg-gray-900 rounded-xl overflow-hidden card-hover holographic-effect">
527
+ <div class="video-preview w-full aspect-[9/16] bg-gradient-to-br from-yellow-900 to-orange-900 relative">
528
+ <div class="resolution-badge">
529
+ <i class="fas fa-expand"></i> 8K 120FPS
530
+ </div>
531
+ <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
532
+ <h3 class="font-bold text-lg">Neon Dreams</h3>
533
+ <p class="text-sm text-gray-300">Art • 60s</p>
534
+ </div>
535
+ <div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
536
+ <i class="fas fa-heart mr-1"></i> 52.1k
537
+ </div>
538
+ </div>
539
+ <div class="p-4">
540
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium flex items-center justify-center gap-2">
541
+ <i class="fas fa-bolt"></i> Use Template
542
+ </button>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </section>
548
+
549
+ <!-- CTA Section -->
550
+ <section class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg">
551
+ <div class="max-w-4xl mx-auto text-center">
552
+ <h2 class="text-3xl md:text-5xl font-bold mb-6">Ready for the Future of Creation?</h2>
553
+ <p class="text-xl text-white/90 mb-8">
554
+ Join the AI revolution with 8K resolution, neural animation, and smart URL shortening.
555
+ </p>
556
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
557
+ <button class="bg-white text-gray-900 px-8 py-4 rounded-full text-lg font-bold hover:bg-gray-100 transition flex items-center justify-center gap-2">
558
+ <i class="fas fa-rocket"></i> Start Free Trial
559
+ </button>
560
+ <button class="border-2 border-white text-white px-8 py-4 rounded-full text-lg font-medium hover:bg-white/10 transition flex items-center justify-center gap-2">
561
+ <i class="fas fa-link"></i> Shorten Demo URL
562
+ </button>
563
+ </div>
564
+ <div class="mt-8 bg-white/10 backdrop-blur-sm rounded-xl p-4 inline-block">
565
+ <div class="flex items-center justify-center gap-2">
566
+ <div class="flex">
567
+ <i class="fas fa-star text-yellow-400"></i>
568
+ <i class="fas fa-star text-yellow-400"></i>
569
+ <i class="fas fa-star text-yellow-400"></i>
570
+ <i class="fas fa-star text-yellow-400"></i>
571
+ <i class="fas fa-star text-yellow-400"></i>
572
+ </div>
573
+ <p class="font-medium">Rated 4.9/5 by 5,200+ creators</p>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </section>
578
+
579
+ <!-- Footer -->
580
+ <footer class="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
581
+ <div class="max-w-7xl mx-auto">
582
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
583
+ <div class="col-span-2">
584
+ <span class="text-2xl font-bold gradient-text bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">DAMBA AI</span>
585
+ <p class="text-gray-400 mt-4 max-w-md">
586
+ The most advanced AI video creation platform with 8K resolution and neural rendering technology.
587
+ </p>
588
+ <div class="flex gap-4 mt-6">
589
+ <a href="#" class="text-gray-400 hover:text-white">
590
+ <i class="fab fa-twitter text-xl"></i>
591
+ </a>
592
+ <a href="#" class="text-gray-400 hover:text-white">
593
+ <i class="fab fa-instagram text-xl"></i>
594
+ </a>
595
+ <a href="#" class="text-gray-400 hover:text-white">
596
+ <i class="fab fa-tiktok text-xl"></i>
597
+ </a>
598
+ <a href="#" class="text-gray-400 hover:text-white">
599
+ <i class="fab fa-youtube text-xl"></i>
600
+ </a>
601
+ </div>
602
+ </div>
603
+
604
+ <div>
605
+ <h4 class="text-white font-bold mb-4">AI Tools</h4>
606
+ <ul class="space-y-2">
607
+ <li><a href="#" class="text-gray-400 hover:text-white">8K Video Generator</a></li>
608
+ <li><a href="#" class="text-gray-400 hover:text-white">Neural Animation</a></li>
609
+ <li><a href="#" class="text-gray-400 hover:text-white">URL Shortener</a></li>
610
+ <li><a href="#" class="text-gray-400 hover:text-white">Voice Cloning</a></li>
611
+ </ul>
612
+ </div>
613
+
614
+ <div>
615
+ <h4 class="text-white font-bold mb-4">Resources</h4>
616
+ <ul class="space-y-2">
617
+ <li><a href="#" class="text-gray-400 hover:text-white">AI Blog</a></li>
618
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
619
+ <li><a href="#" class="text-gray-400 hover:text-white">API Docs</a></li>
620
+ <li><a href="#" class="text-gray-400 hover:text-white">Research</a></li>
621
+ </ul>
622
+ </div>
623
+
624
+ <div>
625
+ <h4 class="text-white font-bold mb-4">Company</h4>
626
+ <ul class="space-y-2">
627
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
628
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
629
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
630
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
631
+ </ul>
632
+ </div>
633
+ </div>
634
+
635
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
636
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
637
+ © 2023 Damba AI Technologies. All rights reserved.
638
+ </p>
639
+ <div class="flex gap-6">
640
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
641
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
642
+ <a href="#" class="text-gray-400 hover:text-white text-sm">AI Ethics</a>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </footer>
647
+
648
+ <script>
649
+ // Enhanced animations
650
+ document.querySelectorAll('.card-hover').forEach(card => {
651
+ card.addEventListener('mouseenter', function() {
652
+ this.style.transform = 'translateY(-5px)';
653
+ this.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.3)';
654
+ });
655
+
656
+ card.addEventListener('mouseleave', function() {
657
+ this.style.transform = '';
658
+ this.style.boxShadow = '';
659
+ });
660
+ });
661
+
662
+ // Video generation with resolution options
663
+ document.querySelectorAll('.video-preview').forEach(video => {
664
+ video.addEventListener('click', function() {
665
+ const resolution = this.querySelector('.resolution-badge')?.textContent.trim() || '8K';
666
+ const loader = this.querySelector('.loading-spinner');
667
+ if (loader) {
668
+ this.innerHTML = `
669
+ <div class="absolute inset-0 flex items-center justify-center">
670
+ <div class="text-center">
671
+ <i class="fas fa-check-circle text-5xl text-green-400 mb-4"></i>
672
+ <p class="text-white font-medium">${resolution} video ready!</p>
673
+ <button class="mt-4 bg-blue-600 text-white px-4 py-1 rounded-full text-sm">
674
+ <i class="fas fa-link mr-1"></i> Get Shareable URL
675
+ </button>
676
+ </div>
677
+ </div>
678
+ <div class="resolution-badge">
679
+ <i class="fas fa-expand"></i> ${resolution}
680
+ </div>
681
+ `;
682
+ }
683
+ });
684
+ });
685
+
686
+ // URL Shortener Demo
687
+ const urlShortenerForm = document.querySelector('.bg-gray-800.rounded-xl.p-4.mt-6');
688
+ if (urlShortenerForm) {
689
+ const shortenBtn = urlShortenerForm.querySelector('button');
690
+ const urlInput = urlShortenerForm.querySelector('input[type="text"]');
691
+ const customPath = urlShortenerForm.querySelectorAll('input[type="text"]')[1];
692
+ const domainSelect = urlShortenerForm.querySelector('select');
693
+
694
+ shortenBtn.addEventListener('click', function() {
695
+ if (urlInput.value.trim() === '') return;
696
+
697
+ const shortUrl = `${domainSelect.value}/${customPath.value.trim() || 'damba' + Math.floor(Math.random() * 1000)}`;
698
+
699
+ urlShortenerForm.innerHTML = `
700
+ <h4 class="font-bold mb-3 flex items-center gap-2">
701
+ <i class="fas fa-check-circle text-green-400"></i> URL Shortened!
702
+ </h4>
703
+ <div class="bg-gray-700 rounded-lg p-4">
704
+ <div class="flex items-center justify-between">
705
+ <div>
706
+ <p class="text-xs text-gray-400 mb-1">Original URL</p>
707
+ <p class="text-sm truncate">${urlInput.value}</p>
708
+ </div>
709
+ <i class="fas fa-arrow-right text-gray-400 mx-2"></i>
710
+ <div class="text-right">
711
+ <p class="text-xs text-gray-400 mb-1">Short URL</p>
712
+ <p class="text-blue-400 font-medium">${shortUrl}</p>
713
+ </div>
714
+ </div>
715
+ <div class="flex justify-between mt-4">
716
+ <button class="text-gray-400 hover:text-white text-sm flex items-center gap-1">
717
+ <i class="fas fa-copy"></i> Copy
718
+ </button>
719
+ <button class="text-gray-400 hover:text-white text-sm flex items-center gap-1">
720
+ <i class="fas fa-chart-line"></i> Analytics
721
+ </button>
722
+ <button class="text-gray-400 hover:text-white text-sm flex items-center gap-1">
723
+ <i class="fas fa-share"></i> Share
724
+ </button>
725
+ </div>
726
+ </div>
727
+ <button class="w-full mt-4 bg-blue-600 text-white py-2 rounded-lg font-medium">
728
+ Create Another
729
+ </button>
730
+ `;
731
+
732
+ // Add event to "Create Another" button
733
+ urlShortenerForm.querySelector('button').addEventListener('click', function() {
734
+ location.reload();
735
+ });
736
+ });
737
+ }
738
+
739
+ // Voice cloning demo
740
+ const voiceWave = document.querySelector('.voice-wave');
741
+ if (voiceWave) {
742
+ voiceWave.addEventListener('click', function() {
743
+ this.innerHTML = `
744
+ <div class="flex items-center gap-2 text-green-400">
745
+ <i class="fas fa-check-circle"></i>
746
+ <span class="font-medium">Voice cloned!</span>
747
+ </div>
748
+ `;
749
+ });
750
+ }
751
+ </script>
752
+ <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=ddambaabdunasser/damba-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
753
+ </html>
prompts.txt ADDED
File without changes