Hugging Face's logo

Spaces:
Mansoorcodes9
/
www-github-com-mansoorcodes9
Running

App Files Community
www-github-com-mansoorcodes9 / index.html
Mansoorcodes9's picture
Mansoorcodes9
generate a pirate dancing video - Initial Deployment
01ccc06 verified
Raw History Blame Contribute Delete
10.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pirate Dance Party</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<style>
.ship-wheel {
animation: spin 8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.pirate-dance {
animation: dance 2s ease-in-out infinite alternate;
}
@keyframes dance {
0% { transform: translateY(0) rotate(-5deg); }
100% { transform: translateY(-20px) rotate(5deg); }
}
.wave {
animation: wave 3s ease-in-out infinite;
}
@keyframes wave {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
75% { transform: rotate(-5deg); }
}
</style>
</head>
<body class="bg-amber-50 font-serif">
<!-- Ocean Background -->
<div class="fixed inset-0 bg-blue-900 opacity-10 -z-10"></div>
<!-- Main Content -->
<div class="container mx-auto px-4 py-12">
<!-- Header -->
<header class="text-center mb-16" data-aos="fade-down">
<div class="flex justify-center mb-6">
<div class="ship-wheel">
<i data-feather="compass" class="w-16 h-16 text-amber-800"></i>
</div>
</div>
<h1 class="text-5xl md:text-7xl font-bold text-amber-800 mb-4">Pirate Dance Party</h1>
<p class="text-xl text-amber-600">The most swashbuckling dance moves on the seven seas!</p>
</header>
<!-- Video Section -->
<section class="mb-20" data-aos="fade-up">
<div class="bg-amber-100 rounded-xl p-8 shadow-xl border-2 border-amber-300 max-w-4xl mx-auto">
<div class="aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden relative">
<!-- Video Placeholder -->
<div class="absolute inset-0 flex items-center justify-center pirate-dance">
<img src="http://static.photos/vintage/1024x576/42" alt="Pirate dancing" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<button class="play-button bg-red-600 hover:bg-red-700 text-white rounded-full p-4 shadow-lg transform transition hover:scale-110">
<i data-feather="play" class="w-8 h-8"></i>
</button>
</div>
</div>
</div>
<div class="mt-6 text-center">
<h2 class="text-3xl font-bold text-amber-800 mb-2">"The Jolly Roger Jig"</h2>
<p class="text-amber-700 mb-4">Watch Captain Blackbeard's legendary dance moves that sank a thousand ships!</p>
<div class="flex justify-center space-x-4">
<button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-bold flex items-center">
<i data-feather="download" class="mr-2"></i> Download
</button>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-bold flex items-center">
<i data-feather="share-2" class="mr-2"></i> Share
</button>
</div>
</div>
</div>
</section>
<!-- Dance Moves -->
<section class="mb-20">
<h2 class="text-4xl font-bold text-center text-amber-800 mb-12" data-aos="fade-up">Signature Moves</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Move 1 -->
<div class="bg-white p-6 rounded-xl shadow-lg border border-amber-200 transform transition hover:scale-105" data-aos="fade-up" data-aos-delay="100">
<div class="text-amber-600 mb-4">
<i data-feather="anchor" class="w-10 h-10"></i>
</div>
<h3 class="text-2xl font-bold text-amber-800 mb-2">The Anchor Drop</h3>
<p class="text-amber-700">A sudden drop to the deck that'll make your crew cheer "Yo ho ho!"</p>
</div>
<!-- Move 2 -->
<div class="bg-white p-6 rounded-xl shadow-lg border border-amber-200 transform transition hover:scale-105" data-aos="fade-up" data-aos-delay="200">
<div class="text-amber-600 mb-4">
<i data-feather="trending-up" class="w-10 h-10"></i>
</div>
<h3 class="text-2xl font-bold text-amber-800 mb-2">The Plank Walk</h3>
<p class="text-amber-700">A precarious side-to-side that'll have you walking the line between disaster and delight.</p>
</div>
<!-- Move 3 -->
<div class="bg-white p-6 rounded-xl shadow-lg border border-amber-200 transform transition hover:scale-105" data-aos="fade-up" data-aos-delay="300">
<div class="text-amber-600 mb-4">
<i data-feather="wind" class="w-10 h-10"></i>
</div>
<h3 class="text-2xl font-bold text-amber-800 mb-2">The Cannonball</h3>
<p class="text-amber-700">Explosive energy that launches you across the dance floor like a shot from a cannon.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="mb-20" data-aos="fade-up">
<div class="bg-amber-800 text-amber-50 rounded-xl p-8 md:p-12 max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center">What the Crew Says</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="flex items-start">
<img src="http://static.photos/people/200x200/5" alt="First Mate" class="w-16 h-16 rounded-full border-2 border-amber-300 mr-4 wave">
<div>
<p class="italic mb-2">"I've seen many dances in me time, but none as mighty as the Captain's!"</p>
<p class="font-bold">- One-Eyed Jack</p>
</div>
</div>
<div class="flex items-start">
<img src="http://static.photos/people/200x200/7" alt="Quartermaster" class="w-16 h-16 rounded-full border-2 border-amber-300 mr-4 wave">
<div>
<p class="italic mb-2">"Even the mermaids come up to watch when he starts his jig!"</p>
<p class="font-bold">- Salty Sally</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="text-center" data-aos="fade-up">
<h2 class="text-4xl font-bold text-amber-800 mb-6">Ready to Dance Like a Pirate?</h2>
<p class="text-xl text-amber-600 mb-8 max-w-2xl mx-auto">Join our newsletter for exclusive pirate dance tutorials, sea shanties, and treasure maps to the best dance floors!</p>
<div class="max-w-md mx-auto flex">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border-2 border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
<button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-r-lg font-bold">
Aye Aye!
</button>
</div>
</section>
</div>
<!-- Footer -->
<footer class="bg-amber-900 text-amber-100 py-8">
<div class="container mx-auto px-4 text-center">
<div class="flex justify-center space-x-6 mb-6">
<a href="#" class="hover:text-amber-300"><i data-feather="facebook"></i></a>
<a href="#" class="hover:text-amber-300"><i data-feather="twitter"></i></a>
<a href="#" class="hover:text-amber-300"><i data-feather="instagram"></i></a>
<a href="#" class="hover:text-amber-300"><i data-feather="youtube"></i></a>
</div>
<p class="text-sm">© 2023 Pirate Dance Party. All rights reserved. | <a href="#" class="hover:underline">Terms</a> | <a href="#" class="hover:underline">Privacy</a></p>
</div>
</footer>
<script>
AOS.init({
duration: 800,
once: true
});
feather.replace();
// Simple animation for the play button
document.querySelector('.play-button').addEventListener('click', function() {
this.innerHTML = '<i data-feather="loader" class="w-8 h-8 animate-spin"></i>';
feather.replace();
// Simulate loading
setTimeout(() => {
alert("Ahoy matey! The pirate dance video would play here in a real implementation!");
this.innerHTML = '<i data-feather="play" class="w-8 h-8"></i>';
feather.replace();
}, 1500);
});
// Make the pirate dance on scroll
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
const pirate = document.querySelector('.pirate-dance');
if (pirate) {
pirate.style.transform = `translateY(${-20 + scrollPosition * 0.1}px) rotate(${5 + scrollPosition * 0.05}deg)`;
}
});
</script>
</body>
</html>