Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dance Styles - ClothSwap AI</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">ClothSwap AI</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://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.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://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.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://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.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://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.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://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.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://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.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">ClothSwap AI</span> | |
| </div> | |
| <p class="text-gray-400 mt-2">The future of outfit transformation</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> |