generate a pirate dancing video - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Www Github Com Mansoorcodes9
-emoji: 🏆
-colorFrom: red
-colorTo: indigo
+title: www-github-com-mansoorcodes9
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,196 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!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>

prompts.txt

@@ -0,0 +1 @@
+generate a pirate dancing video