Spaces:

Falconbridge
/

nudeai-magic-wand

Running

App Files Files Community

Falconbridge commited on Oct 12, 2025

Commit

426c52e

verified ·

1 Parent(s): 37174b8

Make the person dance in realistic video

Browse files

Files changed (2) hide show

dance-styles.html +161 -0
index.html +68 -9

dance-styles.html ADDED Viewed

	@@ -0,0 +1,161 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dance Styles - StripAI Magic</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="gradient-bg text-white py-6 shadow-lg">
+        <div class="container mx-auto px-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-2">
+                    <i data-feather="magic" class="w-8 h-8"></i>
+                    <h1 class="text-2xl font-bold">StripAI Magic</h1>
+                </div>
+                <nav>
+                    <ul class="flex space-x-6">
+                        <li><a href="index.html" class="hover:underline">Home</a></li>
+                        <li><a href="#" class="hover:underline">Pricing</a></li>
+                        <li><a href="dance-styles.html" class="hover:underline font-bold">Dance Styles</a></li>
+                        <li><a href="#" class="hover:underline">FAQ</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </div>
+    <main class="container mx-auto px-4 py-12">
+        <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Available Dance Styles</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="relative h-48 overflow-hidden">
+                    <video autoplay loop muted class="w-full h-full object-cover">
+                        <source src="https://dance-ai-demo.s3.amazonaws.com/hiphop.mp4" type="video/mp4">
+                    </video>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">Hip Hop</h3>
+                    <p class="text-gray-600 mb-4">Urban street dance style with popping, locking and breaking moves.</p>
+                    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
+                        Try This Style
+                    </button>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="relative h-48 overflow-hidden">
+                    <video autoplay loop muted class="w-full h-full object-cover">
+                        <source src="https://dance-ai-demo.s3.amazonaws.com/salsa.mp4" type="video/mp4">
+                    </video>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">Salsa</h3>
+                    <p class="text-gray-600 mb-4">Latin dance with flowing movements and quick footwork patterns.</p>
+                    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
+                        Try This Style
+                    </button>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="relative h-48 overflow-hidden">
+                    <video autoplay loop muted class="w-full h-full object-cover">
+                        <source src="https://dance-ai-demo.s3.amazonaws.com/ballet.mp4" type="video/mp4">
+                    </video>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">Ballet</h3>
+                    <p class="text-gray-600 mb-4">Classical dance form with graceful, flowing movements and precise technique.</p>
+                    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
+                        Try This Style
+                    </button>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="relative h-48 overflow-hidden">
+                    <video autoplay loop muted class="w-full h-full object-cover">
+                        <source src="https://dance-ai-demo.s3.amazonaws.com/breakdance.mp4" type="video/mp4">
+                    </video>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">Breakdance</h3>
+                    <p class="text-gray-600 mb-4">Energetic street dance with power moves, freezes and floor work.</p>
+                    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
+                        Try This Style
+                    </button>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="relative h-48 overflow-hidden">
+                    <video autoplay loop muted class="w-full h-full object-cover">
+                        <source src="https://dance-ai-demo.s3.amazonaws.com/twerk.mp4" type="video/mp4">
+                    </video>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">Twerk</h3>
+                    <p class="text-gray-600 mb-4">Booty-shaking dance style focusing on hip and butt movements.</p>
+                    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
+                        Try This Style
+                    </button>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="relative h-48 overflow-hidden">
+                    <video autoplay loop muted class="w-full h-full object-cover">
+                        <source src="https://dance-ai-demo.s3.amazonaws.com/kpop.mp4" type="video/mp4">
+                    </video>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">K-Pop</h3>
+                    <p class="text-gray-600 mb-4">Energetic Korean pop dance with synchronized group formations.</p>
+                    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
+                        Try This Style
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-gray-800 text-white py-8 mt-16">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="magic" class="w-6 h-6"></i>
+                        <span class="text-xl font-bold">StripAI Magic</span>
+                    </div>
+                    <p class="text-gray-400 mt-2">The future of image and video AI processing</p>
+                </div>
+                <div class="text-center md:text-right">
+                    <p class="text-gray-400">© 2023 StripAI Magic. All rights reserved.</p>
+                    <div class="flex justify-center md:justify-end space-x-4 mt-2">
+                        <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
+                        <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
+                        <a href="#" class="text-gray-400 hover:text-white">Contact</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            // Make "Try This Style" buttons link back to main page
+            document.querySelectorAll('button').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    window.location.href = 'index.html';
+                });
+            });
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -41,10 +41,11 @@
                 </div>
                 <nav>
                     <ul class="flex space-x-6">
-                        <li><a href="#" class="hover:underline">Home</a></li>
-                        <li><a href="#" class="hover:underline">Pricing</a></li>
-                        <li><a href="#" class="hover:underline">FAQ</a></li>
-                    </ul>
                 </nav>
             </div>
         </div>
@@ -97,8 +98,26 @@
                 </div>
             </div>
             <div class="text-center">
-                <button id="processBtn" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                     <span id="btnText">Process Image</span>
                     <i data-feather="loader" class="w-5 h-5 ml-2 animate-spin hidden" id="spinner"></i>
                 </button>
@@ -194,8 +213,10 @@
             const uploadArea = document.getElementById('uploadArea');
             const fileInput = document.getElementById('fileInput');
-            const processBtn = document.getElementById('processBtn');
-            const originalImage = document.getElementById('originalImage');
             const resultImage = document.getElementById('resultImage');
             const placeholderText = document.getElementById('placeholderText');
             const resultContainer = document.getElementById('resultContainer');
@@ -215,6 +236,40 @@
             `;
             document.querySelector('main').insertBefore(warningDiv, document.querySelector('main').firstChild);
         });
 uploadArea.addEventListener('dragover', function(e) {
                 e.preventDefault();
                 this.classList.add('border-pink-500', 'bg-pink-50');
@@ -242,8 +297,12 @@ uploadArea.addEventListener('dragover', function(e) {
                     reader.onload = function(e) {
                         originalImage.src = e.target.result;
-                        processBtn.disabled = false;
-                        uploadArea.innerHTML = `
                             <div class="flex items-center justify-center space-x-4">
                                 <img src="${e.target.result}" alt="Preview" class="h-16 w-16 object-cover rounded-lg">
                                 <div class="text-left">

                 </div>
                 <nav>
                     <ul class="flex space-x-6">
+                    <li><a href="#" class="hover:underline">Home</a></li>
+                    <li><a href="#" class="hover:underline">Pricing</a></li>
+                    <li><a href="#" class="hover:underline">Dance Styles</a></li>
+                    <li><a href="#" class="hover:underline">FAQ</a></li>
+</ul>
                 </nav>
             </div>
         </div>
                 </div>
             </div>
+            <div class="text-center mb-6">
+                <h4 class="text-lg font-medium text-gray-700 mb-3">AI Dance Mode</h4>
+                <div class="flex justify-center space-x-4">
+                    <button id="danceBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                        <i data-feather="activity" class="w-4 h-4 mr-2"></i>
+                        Make Me Dance
+                    </button>
+                    <select id="danceStyle" class="p-2 border rounded-lg" disabled>
+                        <option>Select Dance Style</option>
+                        <option>Hip Hop</option>
+                        <option>Salsa</option>
+                        <option>Ballet</option>
+                        <option>Breakdance</option>
+                        <option>Twerk</option>
+                    </select>
+                </div>
+            </div>
             <div class="text-center">
+<button id="processBtn" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                     <span id="btnText">Process Image</span>
                     <i data-feather="loader" class="w-5 h-5 ml-2 animate-spin hidden" id="spinner"></i>
                 </button>
             const uploadArea = document.getElementById('uploadArea');
             const fileInput = document.getElementById('fileInput');
+        const processBtn = document.getElementById('processBtn');
+        const danceBtn = document.getElementById('danceBtn');
+        const danceStyle = document.getElementById('danceStyle');
+const originalImage = document.getElementById('originalImage');
             const resultImage = document.getElementById('resultImage');
             const placeholderText = document.getElementById('placeholderText');
             const resultContainer = document.getElementById('resultContainer');
             `;
             document.querySelector('main').insertBefore(warningDiv, document.querySelector('main').firstChild);
         });
+        // Dance functionality
+        danceBtn.addEventListener('click', function() {
+            if (!fileInput.files[0]) return;
+            danceBtn.innerHTML = '<i data-feather="loader" class="w-4 h-4 mr-2 animate-spin"></i> Generating Dance Video';
+            danceBtn.disabled = true;
+            // Simulate dance video generation
+            setTimeout(() => {
+                const videoContainer = document.createElement('div');
+                videoContainer.className = 'mt-6 border rounded-lg overflow-hidden bg-gray-100';
+                videoContainer.innerHTML = `
+                    <video controls autoplay loop class="w-full" id="danceVideo">
+                        <source src="https://dance-ai-demo.s3.amazonaws.com/${danceStyle.value.toLowerCase()}.mp4" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                    <div class="p-4 bg-gray-800 text-white text-center">
+                        <p>Your AI-generated ${danceStyle.value} dance video</p>
+                        <button class="mt-2 bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition">
+                            <i data-feather="download" class="w-4 h-4 mr-2"></i>
+                            Download Video
+                        </button>
+                    </div>
+                `;
+                // Insert after result container
+                resultContainer.parentNode.insertBefore(videoContainer, resultContainer.nextSibling);
+                danceBtn.innerHTML = '<i data-feather="activity" class="w-4 h-4 mr-2"></i> Make Me Dance';
+                danceBtn.disabled = false;
+                feather.replace();
+            }, 4000);
+        });
 uploadArea.addEventListener('dragover', function(e) {
                 e.preventDefault();
                 this.classList.add('border-pink-500', 'bg-pink-50');
                     reader.onload = function(e) {
                         originalImage.src = e.target.result;
+                    processBtn.disabled = false;
+                    danceBtn.disabled = false;
+                    danceStyle.disabled = false;
+danceBtn.disabled = false;
+                        danceStyle.disabled = false;
+uploadArea.innerHTML = `
                             <div class="flex items-center justify-center space-x-4">
                                 <img src="${e.target.result}" alt="Preview" class="h-16 w-16 object-cover rounded-lg">
                                 <div class="text-left">