Hugging Face's logo

Spaces:
stubbornmohit
/
ai-app
Running

App Files Community
stubbornmohit commited on
Commit
61b164b
·
verified ·
1 Parent(s): 975d3a0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +257 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai App
3
- emoji: 🐢
4
  colorFrom: blue
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ai-app
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,257 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LUXE KICKS | Premium Sneakers</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
13
+
14
+ body {
15
+ font-family: 'Montserrat', sans-serif;
16
+ background-color: #000;
17
+ color: #fff;
18
+ overflow-x: hidden;
19
+ }
20
+
21
+ .sneaker-card:hover .sneaker-3d {
22
+ transform: rotateY(15deg) rotateX(10deg) translateY(-10px);
23
+ box-shadow: 0 25px 50px rgba(255, 0, 0, 0.3);
24
+ }
25
+
26
+ .sneaker-3d {
27
+ transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
28
+ transform-style: preserve-3d;
29
+ }
30
+
31
+ .red-glow {
32
+ box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
33
+ }
34
+
35
+ .red-glow:hover {
36
+ box-shadow: 0 0 25px rgba(255, 0, 0, 0.8);
37
+ }
38
+
39
+ .gradient-text {
40
+ background: linear-gradient(90deg, #ff0000, #ff4d4d);
41
+ -webkit-background-clip: text;
42
+ background-clip: text;
43
+ color: transparent;
44
+ }
45
+
46
+ .marquee {
47
+ animation: marquee 20s linear infinite;
48
+ }
49
+
50
+ @keyframes marquee {
51
+ 0% { transform: translateX(0); }
52
+ 100% { transform: translateX(-50%); }
53
+ }
54
+
55
+ .pulse {
56
+ animation: pulse 2s infinite;
57
+ }
58
+
59
+ @keyframes pulse {
60
+ 0% { transform: scale(1); }
61
+ 50% { transform: scale(1.05); }
62
+ 100% { transform: scale(1); }
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="min-h-screen">
67
+ <!-- Navigation -->
68
+ <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-blur-sm border-b border-red-900">
69
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
70
+ <div class="flex justify-between h-16 items-center">
71
+ <div class="flex items-center">
72
+ <a href="#" class="text-2xl font-bold gradient-text">LUXE KICKS</a>
73
+ </div>
74
+ <div class="hidden md:flex items-center space-x-8">
75
+ <a href="#featured" class="text-white hover:text-red-500 transition">Featured</a>
76
+ <a href="#collections" class="text-white hover:text-red-500 transition">Collections</a>
77
+ <a href="#about" class="text-white hover:text-red-500 transition">About</a>
78
+ <a href="#contact" class="text-white hover:text-red-500 transition">Contact</a>
79
+ </div>
80
+ <div class="flex items-center space-x-4">
81
+ <button id="cart-btn" class="relative text-white hover:text-red-500 transition">
82
+ <i class="fas fa-shopping-bag text-xl"></i>
83
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-red-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
84
+ </button>
85
+ <button id="auth-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full transition">Login</button>
86
+ <button class="md:hidden text-white" id="mobile-menu-btn">
87
+ <i class="fas fa-bars text-xl"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Mobile Menu -->
94
+ <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95 border-t border-red-900">
95
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
96
+ <a href="#featured" class="block px-3 py-2 text-white hover:text-red-500">Featured</a>
97
+ <a href="#collections" class="block px-3 py-2 text-white hover:text-red-500">Collections</a>
98
+ <a href="#about" class="block px-3 py-2 text-white hover:text-red-500">About</a>
99
+ <a href="#contact" class="block px-3 py-2 text-white hover:text-red-500">Contact</a>
100
+ </div>
101
+ </div>
102
+ </nav>
103
+
104
+ <!-- Hero Section -->
105
+ <section class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
106
+ <div class="max-w-7xl mx-auto">
107
+ <div class="relative z-10">
108
+ <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6">
109
+ <span class="gradient-text">ELEVATE</span> YOUR STYLE
110
+ </h1>
111
+ <p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl">
112
+ Discover the most exclusive sneakers from limited editions to collector's items. Handpicked for the discerning enthusiast.
113
+ </p>
114
+ <div class="flex flex-wrap gap-4">
115
+ <a href="#collections" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-full font-medium transition transform hover:scale-105">
116
+ SHOP NOW
117
+ </a>
118
+ <a href="#featured" class="border border-red-600 text-red-500 hover:bg-red-900 hover:bg-opacity-30 px-8 py-3 rounded-full font-medium transition transform hover:scale-105">
119
+ EXPLORE
120
+ </a>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- 3D Sneaker Animation -->
126
+ <div class="absolute right-0 top-1/2 transform -translate-y-1/2 w-1/2 md:w-1/3 lg:w-1/4 opacity-70 md:opacity-100">
127
+ <div class="sneaker-3d">
128
+ <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80"
129
+ alt="Premium Sneaker"
130
+ class="w-full h-auto rotate-12 transform scale-110">
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Marquee -->
135
+ <div class="absolute bottom-0 left-0 w-full bg-red-900 bg-opacity-20 py-3 overflow-hidden">
136
+ <div class="marquee whitespace-nowrap">
137
+ <span class="text-white text-sm md:text-base mx-8">FREE SHIPPING ON ALL ORDERS • LIMITED STOCK AVAILABLE • EXCLUSIVE DROPS EVERY WEEK • FREE SHIPPING ON ALL ORDERS • LIMITED STOCK AVAILABLE • EXCLUSIVE DROPS EVERY WEEK</span>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- Featured Section -->
143
+ <section id="featured" class="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900">
144
+ <div class="max-w-7xl mx-auto">
145
+ <div class="text-center mb-12">
146
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
147
+ <span class="gradient-text">FEATURED</span> DROPS
148
+ </h2>
149
+ <p class="text-gray-400 max-w-2xl mx-auto">
150
+ Our most exclusive releases. Limited quantities available.
151
+ </p>
152
+ </div>
153
+
154
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
155
+ <!-- Featured Item 1 -->
156
+ <div class="sneaker-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-900 transition group">
157
+ <div class="relative h-64 overflow-hidden">
158
+ <div class="sneaker-3d absolute inset-0 flex items-center justify-center p-8">
159
+ <img src="https://images.unsplash.com/photo-1605348532760-6753d2c43329?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
160
+ alt="Air Jordan 1 Retro High"
161
+ class="w-full h-full object-contain transform group-hover:scale-110 transition duration-500">
162
+ </div>
163
+ <div class="absolute top-4 right-4">
164
+ <span class="bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">LIMITED</span>
165
+ </div>
166
+ </div>
167
+ <div class="p-6">
168
+ <h3 class="text-xl font-bold mb-1">Air Jordan 1 Retro High</h3>
169
+ <p class="text-gray-400 text-sm mb-3">OG Chicago Colorway</p>
170
+ <div class="flex justify-between items-center">
171
+ <span class="text-red-500 font-bold text-lg">$1,299</span>
172
+ <button class="add-to-cart bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm transition"
173
+ data-id="1"
174
+ data-name="Air Jordan 1 Retro High"
175
+ data-price="1299"
176
+ data-image="https://images.unsplash.com/photo-1605348532760-6753d2c43329?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80">
177
+ ADD TO CART
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Featured Item 2 -->
184
+ <div class="sneaker-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-900 transition group">
185
+ <div class="relative h-64 overflow-hidden">
186
+ <div class="sneaker-3d absolute inset-0 flex items-center justify-center p-8">
187
+ <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80"
188
+ alt="Nike Dunk Low SP"
189
+ class="w-full h-full object-contain transform group-hover:scale-110 transition duration-500">
190
+ </div>
191
+ <div class="absolute top-4 right-4">
192
+ <span class="bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</span>
193
+ </div>
194
+ </div>
195
+ <div class="p-6">
196
+ <h3 class="text-xl font-bold mb-1">Nike Dunk Low SP</h3>
197
+ <p class="text-gray-400 text-sm mb-3">Syracuse University</p>
198
+ <div class="flex justify-between items-center">
199
+ <span class="text-red-500 font-bold text-lg">$899</span>
200
+ <button class="add-to-cart bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm transition"
201
+ data-id="2"
202
+ data-name="Nike Dunk Low SP"
203
+ data-price="899"
204
+ data-image="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80">
205
+ ADD TO CART
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Featured Item 3 -->
212
+ <div class="sneaker-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-900 transition group">
213
+ <div class="relative h-64 overflow-hidden">
214
+ <div class="sneaker-3d absolute inset-0 flex items-center justify-center p-8">
215
+ <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
216
+ alt="Adidas Yeezy Boost 350"
217
+ class="w-full h-full object-contain transform group-hover:scale-110 transition duration-500">
218
+ </div>
219
+ <div class="absolute top-4 right-4">
220
+ <span class="bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">RARE</span>
221
+ </div>
222
+ </div>
223
+ <div class="p-6">
224
+ <h3 class="text-xl font-bold mb-1">Adidas Yeezy Boost 350</h3>
225
+ <p class="text-gray-400 text-sm mb-3">V2 Zebra</p>
226
+ <div class="flex justify-between items-center">
227
+ <span class="text-red-500 font-bold text-lg">$1,499</span>
228
+ <button class="add-to-cart bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm transition"
229
+ data-id="3"
230
+ data-name="Adidas Yeezy Boost 350"
231
+ data-price="1499"
232
+ data-image="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
233
+ ADD TO CART
234
+ </button>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </section>
241
+
242
+ <!-- Collections Section -->
243
+ <section id="collections" class="py-16 px-4 sm:px-6 lg:px-8 bg-black">
244
+ <div class="max-w-7xl mx-auto">
245
+ <div class="text-center mb-12">
246
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
247
+ <span class="gradient-text">EXCLUSIVE</span> COLLECTIONS
248
+ </h2>
249
+ <p class="text-gray-400 max-w-2xl mx-auto">
250
+ Browse our curated collections of the most sought-after sneakers.
251
+ </p>
252
+ </div>
253
+
254
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
255
+ <!-- Collection 1 -->
256
+ <a href="#" class="collection-card
257
+ </html>
prompts.txt ADDED
File without changes