Hugging Face's logo

Spaces:
Falconbridge
/
undefined
Running

App Files Community
undefined
File size: 8,225 Bytes 
9334712
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
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 - 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>