Hugging Face's logo

Spaces:
ddambaabdunasser
/
damba-project
Running

App Files Community
damba-project / index.html
ddambaabdunasser's picture
ddambaabdunasser
Add 3 files
39aec2e verified
raw
history blame contribute delete
41.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Damba AI - Next-Gen Video Creation Studio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #0f172a;
color: white;
}
.gradient-bg {
background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #db2777 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.video-preview {
border-radius: 16px;
overflow: hidden;
position: relative;
}
.video-preview::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
}
.voice-wave {
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
width: 60px;
}
.voice-wave span {
height: 6px;
width: 4px;
border-radius: 3px;
background-color: #3b82f6;
animation: wave 1.5s ease-in-out infinite;
}
.voice-wave span:nth-child(1) { animation-delay: 0.1s; }
.voice-wave span:nth-child(2) { animation-delay: 0.3s; height: 10px; }
.voice-wave span:nth-child(3) { animation-delay: 0.5s; height: 16px; }
.voice-wave span:nth-child(4) { animation-delay: 0.7s; height: 10px; }
.voice-wave span:nth-child(5) { animation-delay: 0.9s; }
@keyframes wave {
0%, 100% { height: 6px; }
50% { height: 20px; }
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.neon-border {
position: relative;
}
.neon-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
padding: 2px;
background: linear-gradient(45deg, #00f, #0f0, #f00);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.holographic-effect {
background: linear-gradient(135deg,
rgba(0, 255, 255, 0.1) 0%,
rgba(255, 0, 255, 0.1) 50%,
rgba(255, 255, 0, 0.1) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.resolution-badge {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.7);
color: #0ff;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
display: flex;
align-items: center;
gap: 4px;
}
.ai-tooltip {
position: relative;
}
.ai-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
margin-bottom: 5px;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="bg-gray-900/50 backdrop-blur-md fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<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>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Templates</a>
<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">AI Tools</a>
<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Studio</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<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">
Launch Studio
</button>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<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">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 gradient-bg">
<div class="max-w-7xl mx-auto">
<div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
<div class="mb-12 lg:mb-0">
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
<span class="text-yellow-300">AI-Powered</span> Video Creation <span class="text-cyan-300">Reimagined</span>
</h1>
<p class="text-lg md:text-xl text-gray-200 mb-8">
Damba AI transforms your ideas into 8K videos, animations, and images with cutting-edge neural networks.
Create, edit, and share in seconds.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<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">
<i class="fas fa-bolt"></i> Generate Now
</button>
<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">
<i class="fas fa-link"></i> Shorten URL
</button>
</div>
<div class="mt-8 flex items-center gap-4">
<div class="flex -space-x-2">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</div>
<p class="text-sm text-white/80">
Trusted by <span class="font-bold">25,000+</span> creators & brands
</p>
</div>
</div>
<div class="relative">
<div class="video-preview w-full aspect-video bg-gray-800 rounded-2xl overflow-hidden shadow-2xl neon-border">
<div class="resolution-badge">
<i class="fas fa-expand"></i> 8K UHD
</div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center">
<div class="loading-spinner mx-auto mb-4"></div>
<p class="text-white font-medium">Rendering 8K video...</p>
</div>
</div>
</div>
<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">
<i class="fas fa-brain"></i> AI-Powered
</div>
</div>
</div>
</div>
</section>
<!-- Futuristic Features -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Next-Generation AI Tools</h2>
<p class="text-lg text-gray-400 max-w-2xl mx-auto">
Powered by quantum neural networks for unparalleled creative possibilities
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-gray-800 p-8 rounded-2xl card-hover holographic-effect">
<div class="w-14 h-14 rounded-full bg-blue-900/50 flex items-center justify-center mb-6 neon-border">
<i class="fas fa-vr-cardboard text-2xl text-blue-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">8K/16K Resolution</h3>
<p class="text-gray-400 mb-4">
Generate ultra-high-definition videos and images beyond standard resolutions with our quantum rendering engine.
</p>
<div class="mt-6">
<div class="flex gap-2 flex-wrap">
<span class="bg-blue-900/30 text-blue-400 px-3 py-1 rounded-full text-xs">8K</span>
<span class="bg-purple-900/30 text-purple-400 px-3 py-1 rounded-full text-xs">16K</span>
<span class="bg-green-900/30 text-green-400 px-3 py-1 rounded-full text-xs">HDR10+</span>
<span class="bg-red-900/30 text-red-400 px-3 py-1 rounded-full text-xs">120FPS</span>
</div>
</div>
</div>
<!-- Feature 2 -->
<div class="bg-gray-800 p-8 rounded-2xl card-hover holographic-effect">
<div class="w-14 h-14 rounded-full bg-purple-900/50 flex items-center justify-center mb-6 neon-border">
<i class="fas fa-atom text-2xl text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Neural Animation</h3>
<p class="text-gray-400 mb-4">
Create hyper-realistic 3D animations from text or simple sketches with our physics-based AI.
</p>
<div class="mt-6">
<div class="flex items-center gap-4">
<div class="voice-wave"></div>
<p class="text-sm text-gray-300">"Animate a cyberpunk city with flying cars"</p>
</div>
</div>
</div>
<!-- Feature 3 -->
<div class="bg-gray-800 p-8 rounded-2xl card-hover holographic-effect">
<div class="w-14 h-14 rounded-full bg-pink-900/50 flex items-center justify-center mb-6 neon-border">
<i class="fas fa-link text-2xl text-pink-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Smart URL Shortener</h3>
<p class="text-gray-400 mb-4">
Generate branded short links with AI-powered analytics and automatic A/B testing.
</p>
<div class="mt-6">
<div class="bg-gray-700 rounded-lg p-4">
<div class="flex items-center gap-3">
<div class="flex-1 overflow-hidden">
<p class="text-sm text-gray-400 truncate">https://example.com/very-long-url-that-needs-to-be-shortened</p>
<div class="flex items-center gap-2 mt-1">
<p class="font-medium text-blue-400">damba.ai/cyber23</p>
<button class="text-gray-400 hover:text-white">
<i class="fas fa-copy"></i>
</button>
</div>
</div>
<button class="bg-pink-600 text-white p-2 rounded-full">
<i class="fas fa-chart-line"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- AI Studio Demo -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-950">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Damba AI Studio</h2>
<p class="text-lg text-gray-400 max-w-3xl mx-auto">
Our futuristic editing interface with real-time AI assistance and holographic controls
</p>
</div>
<div class="bg-gray-900 rounded-3xl overflow-hidden neon-border">
<div class="grid grid-cols-1 lg:grid-cols-3">
<!-- Tools Panel -->
<div class="bg-gray-800 p-6 border-r border-gray-700">
<h3 class="font-bold mb-4 text-lg">AI Tools</h3>
<div class="space-y-3">
<button class="w-full flex items-center gap-3 p-3 rounded-lg bg-gray-700 hover:bg-gray-600">
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
<i class="fas fa-magic text-white text-sm"></i>
</div>
<span>Smart Enhance</span>
</button>
<button class="w-full flex items-center gap-3 p-3 rounded-lg bg-gray-700 hover:bg-gray-600">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
<i class="fas fa-robot text-white text-sm"></i>
</div>
<span>AI Animation</span>
</button>
<button class="w-full flex items-center gap-3 p-3 rounded-lg bg-gray-700 hover:bg-gray-600">
<div class="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center">
<i class="fas fa-link text-white text-sm"></i>
</div>
<span>URL Shortener</span>
</button>
<button class="w-full flex items-center gap-3 p-3 rounded-lg bg-gray-700 hover:bg-gray-600">
<div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center">
<i class="fas fa-microphone text-white text-sm"></i>
</div>
<span>Voice Cloning</span>
</button>
</div>
<h3 class="font-bold mb-4 mt-8 text-lg">Resolution</h3>
<div class="grid grid-cols-3 gap-2">
<button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">1080p</button>
<button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">4K</button>
<button class="p-2 rounded bg-blue-600 text-white text-xs">8K</button>
<button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">16K</button>
<button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">VR</button>
<button class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-xs">HDR</button>
</div>
</div>
<!-- Preview Area -->
<div class="lg:col-span-2 p-6">
<div class="video-preview w-full aspect-video bg-gray-700 rounded-xl mb-6 relative">
<div class="resolution-badge">
<i class="fas fa-expand"></i> 8K Preview
</div>
</div>
<!-- AI Prompt -->
<div class="bg-gray-800 rounded-xl p-4">
<div class="flex items-start gap-3">
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0">
<i class="fas fa-robot text-white"></i>
</div>
<div class="flex-1">
<div class="bg-gray-700 rounded-lg p-3 mb-2">
<textarea class="w-full bg-transparent outline-none resize-none" rows="2" placeholder="Describe what you want to create..."></textarea>
</div>
<div class="flex justify-between items-center">
<div class="flex gap-2">
<button class="text-gray-400 hover:text-white text-sm">
<i class="fas fa-image"></i> Add Media
</button>
<button class="text-gray-400 hover:text-white text-sm">
<i class="fas fa-link"></i> Shorten URL
</button>
</div>
<button class="bg-purple-600 text-white px-4 py-1 rounded-full text-sm font-medium">
Generate <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Short URL Generator -->
<div class="bg-gray-800 rounded-xl p-4 mt-6">
<h4 class="font-bold mb-3 flex items-center gap-2">
<i class="fas fa-link text-blue-400"></i> URL Shortener
</h4>
<div class="space-y-3">
<div>
<label class="block text-sm text-gray-400 mb-1">Original URL</label>
<input type="text" class="w-full bg-gray-700 rounded-lg p-2 text-sm" placeholder="https://example.com/very-long-url">
</div>
<div class="grid grid-cols-3 gap-3">
<div>
<label class="block text-sm text-gray-400 mb-1">Custom Path</label>
<input type="text" class="w-full bg-gray-700 rounded-lg p-2 text-sm" placeholder="my-link">
</div>
<div class="col-span-2">
<label class="block text-sm text-gray-400 mb-1">Domain</label>
<select class="w-full bg-gray-700 rounded-lg p-2 text-sm">
<option>damba.ai</option>
<option>dmba.link</option>
<option>yourbrand.com</option>
</select>
</div>
</div>
<div class="flex items-center justify-between pt-2">
<div class="flex items-center gap-2">
<i class="fas fa-lock text-green-400"></i>
<span class="text-sm">HTTPS Secure</span>
</div>
<button class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium">
Shorten URL
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Futuristic Templates -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center mb-12">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-2">Quantum Templates</h2>
<p class="text-gray-400">AI-generated templates with futuristic designs</p>
</div>
<div class="mt-4 md:mt-0">
<div class="flex gap-2">
<button class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-medium">8K Videos</button>
<button class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-medium">Holograms</button>
<button class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-medium">Neural Art</button>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium">See All</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Template 1 -->
<div class="bg-gray-900 rounded-xl overflow-hidden card-hover holographic-effect">
<div class="video-preview w-full aspect-[9/16] bg-gradient-to-br from-purple-900 to-blue-900 relative">
<div class="resolution-badge">
<i class="fas fa-expand"></i> 8K
</div>
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
<h3 class="font-bold text-lg">Holographic UI</h3>
<p class="text-sm text-gray-300">Sci-Fi • 15s</p>
</div>
<div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
<i class="fas fa-heart mr-1"></i> 42.5k
</div>
</div>
<div class="p-4">
<button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium flex items-center justify-center gap-2">
<i class="fas fa-bolt"></i> Use Template
</button>
</div>
</div>
<!-- Template 2 -->
<div class="bg-gray-900 rounded-xl overflow-hidden card-hover holographic-effect">
<div class="video-preview w-full aspect-[9/16] bg-gradient-to-br from-pink-900 to-red-900 relative">
<div class="resolution-badge">
<i class="fas fa-expand"></i> 16K
</div>
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
<h3 class="font-bold text-lg">Cyber City</h3>
<p class="text-sm text-gray-300">Animation • 30s</p>
</div>
<div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
<i class="fas fa-heart mr-1"></i> 38.2k
</div>
</div>
<div class="p-4">
<button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium flex items-center justify-center gap-2">
<i class="fas fa-bolt"></i> Use Template
</button>
</div>
</div>
<!-- Template 3 -->
<div class="bg-gray-900 rounded-xl overflow-hidden card-hover holographic-effect">
<div class="video-preview w-full aspect-[9/16] bg-gradient-to-br from-green-900 to-teal-900 relative">
<div class="resolution-badge">
<i class="fas fa-expand"></i> 8K HDR
</div>
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
<h3 class="font-bold text-lg">Quantum Realm</h3>
<p class="text-sm text-gray-300">Abstract • 45s</p>
</div>
<div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
<i class="fas fa-heart mr-1"></i> 29.7k
</div>
</div>
<div class="p-4">
<button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium flex items-center justify-center gap-2">
<i class="fas fa-bolt"></i> Use Template
</button>
</div>
</div>
<!-- Template 4 -->
<div class="bg-gray-900 rounded-xl overflow-hidden card-hover holographic-effect">
<div class="video-preview w-full aspect-[9/16] bg-gradient-to-br from-yellow-900 to-orange-900 relative">
<div class="resolution-badge">
<i class="fas fa-expand"></i> 8K 120FPS
</div>
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
<h3 class="font-bold text-lg">Neon Dreams</h3>
<p class="text-sm text-gray-300">Art • 60s</p>
</div>
<div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
<i class="fas fa-heart mr-1"></i> 52.1k
</div>
</div>
<div class="p-4">
<button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium flex items-center justify-center gap-2">
<i class="fas fa-bolt"></i> Use Template
</button>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">Ready for the Future of Creation?</h2>
<p class="text-xl text-white/90 mb-8">
Join the AI revolution with 8K resolution, neural animation, and smart URL shortening.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<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">
<i class="fas fa-rocket"></i> Start Free Trial
</button>
<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">
<i class="fas fa-link"></i> Shorten Demo URL
</button>
</div>
<div class="mt-8 bg-white/10 backdrop-blur-sm rounded-xl p-4 inline-block">
<div class="flex items-center justify-center gap-2">
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<p class="font-medium">Rated 4.9/5 by 5,200+ creators</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
<div class="col-span-2">
<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>
<p class="text-gray-400 mt-4 max-w-md">
The most advanced AI video creation platform with 8K resolution and neural rendering technology.
</p>
<div class="flex gap-4 mt-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-tiktok text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-youtube text-xl"></i>
</a>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4">AI Tools</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">8K Video Generator</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Neural Animation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">URL Shortener</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Voice Cloning</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">AI Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">API Docs</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Research</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">
© 2023 Damba AI Technologies. All rights reserved.
</p>
<div class="flex gap-6">
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">AI Ethics</a>
</div>
</div>
</div>
</footer>
<script>
// Enhanced animations
document.querySelectorAll('.card-hover').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.3)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = '';
this.style.boxShadow = '';
});
});
// Video generation with resolution options
document.querySelectorAll('.video-preview').forEach(video => {
video.addEventListener('click', function() {
const resolution = this.querySelector('.resolution-badge')?.textContent.trim() || '8K';
const loader = this.querySelector('.loading-spinner');
if (loader) {
this.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center">
<i class="fas fa-check-circle text-5xl text-green-400 mb-4"></i>
<p class="text-white font-medium">${resolution} video ready!</p>
<button class="mt-4 bg-blue-600 text-white px-4 py-1 rounded-full text-sm">
<i class="fas fa-link mr-1"></i> Get Shareable URL
</button>
</div>
</div>
<div class="resolution-badge">
<i class="fas fa-expand"></i> ${resolution}
</div>
`;
}
});
});
// URL Shortener Demo
const urlShortenerForm = document.querySelector('.bg-gray-800.rounded-xl.p-4.mt-6');
if (urlShortenerForm) {
const shortenBtn = urlShortenerForm.querySelector('button');
const urlInput = urlShortenerForm.querySelector('input[type="text"]');
const customPath = urlShortenerForm.querySelectorAll('input[type="text"]')[1];
const domainSelect = urlShortenerForm.querySelector('select');
shortenBtn.addEventListener('click', function() {
if (urlInput.value.trim() === '') return;
const shortUrl = `${domainSelect.value}/${customPath.value.trim() || 'damba' + Math.floor(Math.random() * 1000)}`;
urlShortenerForm.innerHTML = `
<h4 class="font-bold mb-3 flex items-center gap-2">
<i class="fas fa-check-circle text-green-400"></i> URL Shortened!
</h4>
<div class="bg-gray-700 rounded-lg p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-xs text-gray-400 mb-1">Original URL</p>
<p class="text-sm truncate">${urlInput.value}</p>
</div>
<i class="fas fa-arrow-right text-gray-400 mx-2"></i>
<div class="text-right">
<p class="text-xs text-gray-400 mb-1">Short URL</p>
<p class="text-blue-400 font-medium">${shortUrl}</p>
</div>
</div>
<div class="flex justify-between mt-4">
<button class="text-gray-400 hover:text-white text-sm flex items-center gap-1">
<i class="fas fa-copy"></i> Copy
</button>
<button class="text-gray-400 hover:text-white text-sm flex items-center gap-1">
<i class="fas fa-chart-line"></i> Analytics
</button>
<button class="text-gray-400 hover:text-white text-sm flex items-center gap-1">
<i class="fas fa-share"></i> Share
</button>
</div>
</div>
<button class="w-full mt-4 bg-blue-600 text-white py-2 rounded-lg font-medium">
Create Another
</button>
`;
// Add event to "Create Another" button
urlShortenerForm.querySelector('button').addEventListener('click', function() {
location.reload();
});
});
}
// Voice cloning demo
const voiceWave = document.querySelector('.voice-wave');
if (voiceWave) {
voiceWave.addEventListener('click', function() {
this.innerHTML = `
<div class="flex items-center gap-2 text-green-400">
<i class="fas fa-check-circle"></i>
<span class="font-medium">Voice cloned!</span>
</div>
`;
});
}
</script>
<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>
</html>