Hugging Face's logo

Spaces:
1111111malik
/
my-old
Running

App Files Community
1111111malik commited on
Commit
c68c53d
·
verified ·
1 Parent(s): 25f5a33

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +444 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Old
3
- emoji: 🐨
4
- colorFrom: pink
5
- colorTo: indigo
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: my-old
3
+ emoji: 🐳
4
+ colorFrom: red
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,444 @@
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>3D E-Commerce Store</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
+ <style>
10
+ .product-card {
11
+ transform-style: preserve-3d;
12
+ transition: transform 0.5s ease;
13
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
14
+ }
15
+
16
+ .product-image {
17
+ transform: translateZ(30px);
18
+ }
19
+
20
+ .product-info {
21
+ transform: translateZ(20px);
22
+ }
23
+
24
+ .hero-section {
25
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
26
+ }
27
+
28
+ .nav-link {
29
+ position: relative;
30
+ }
31
+
32
+ .nav-link::after {
33
+ content: '';
34
+ position: absolute;
35
+ width: 0;
36
+ height: 2px;
37
+ bottom: -2px;
38
+ left: 0;
39
+ background-color: white;
40
+ transition: width 0.3s ease;
41
+ }
42
+
43
+ .nav-link:hover::after {
44
+ width: 100%;
45
+ }
46
+
47
+ @keyframes float {
48
+ 0% { transform: translateY(0px); }
49
+ 50% { transform: translateY(-10px); }
50
+ 100% { transform: translateY(0px); }
51
+ }
52
+
53
+ .floating {
54
+ animation: float 3s ease-in-out infinite;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-100 font-sans">
59
+ <!-- Navigation -->
60
+ <nav class="bg-gray-900 text-white shadow-lg fixed w-full z-50">
61
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
62
+ <div class="flex items-center space-x-4">
63
+ <div class="text-2xl font-bold">
64
+ <span class="text-blue-400">3D</span>Shop
65
+ </div>
66
+ </div>
67
+ <div class="hidden md:flex items-center space-x-8">
68
+ <a href="#" class="nav-link">Home</a>
69
+ <a href="#" class="nav-link">Products</a>
70
+ <a href="#" class="nav-link">Categories</a>
71
+ <a href="#" class="nav-link">About</a>
72
+ <a href="#" class="nav-link">Contact</a>
73
+ </div>
74
+ <div class="flex items-center space-x-4">
75
+ <a href="#" class="text-white hover:text-blue-400">
76
+ <i class="fas fa-search"></i>
77
+ </a>
78
+ <a href="#" class="text-white hover:text-blue-400">
79
+ <i class="fas fa-shopping-cart"></i>
80
+ <span class="bg-blue-500 text-xs rounded-full h-5 w-5 flex items-center justify-center -mt-2 -mr-2 relative">3</span>
81
+ </a>
82
+ <a href="#" class="text-white hover:text-blue-400">
83
+ <i class="fas fa-user"></i>
84
+ </a>
85
+ <button class="md:hidden focus:outline-none">
86
+ <i class="fas fa-bars"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </nav>
91
+
92
+ <!-- Hero Section -->
93
+ <section class="hero-section text-white pt-32 pb-20">
94
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
95
+ <div class="md:w-1/2 mb-10 md:mb-0">
96
+ <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">Explore Our <span class="text-blue-200">3D</span> Products</h1>
97
+ <p class="text-xl mb-8">Discover the future of shopping with our immersive 3D product experience.</p>
98
+ <button class="bg-white text-gray-800 px-8 py-3 rounded-full font-bold hover:bg-gray-200 transition duration-300 transform hover:scale-105">
99
+ Shop Now
100
+ </button>
101
+ </div>
102
+ <div class="md:w-1/2 flex justify-center">
103
+ <div class="relative floating">
104
+ <div class="w-64 h-64 bg-blue-400 rounded-2xl shadow-2xl transform rotate-12"></div>
105
+ <div class="w-64 h-64 bg-purple-500 rounded-2xl shadow-2xl absolute top-0 left-0 transform -rotate-6"></div>
106
+ <div class="w-64 h-64 bg-white rounded-2xl shadow-2xl absolute top-0 left-0 opacity-20"></div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Featured Products -->
113
+ <section class="py-16 bg-white">
114
+ <div class="container mx-auto px-6">
115
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Featured Products</h2>
116
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
117
+ <!-- Product 1 -->
118
+ <div class="product-card bg-white rounded-xl p-6 cursor-pointer"
119
+ onmousemove="tiltCard(this, event)"
120
+ onmouseleave="resetCard(this)">
121
+ <div class="product-image mb-6 flex justify-center">
122
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c21hcnR3YXRjaHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
123
+ alt="Smart Watch"
124
+ class="w-64 h-64 object-contain">
125
+ </div>
126
+ <div class="product-info">
127
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Pro Smart Watch</h3>
128
+ <div class="flex items-center mb-4">
129
+ <div class="flex text-yellow-400">
130
+ <i class="fas fa-star"></i>
131
+ <i class="fas fa-star"></i>
132
+ <i class="fas fa-star"></i>
133
+ <i class="fas fa-star"></i>
134
+ <i class="fas fa-star-half-alt"></i>
135
+ </div>
136
+ <span class="text-gray-600 ml-2">(48 reviews)</span>
137
+ </div>
138
+ <p class="text-gray-600 mb-4">The ultimate smartwatch with health tracking and premium design.</p>
139
+ <div class="flex justify-between items-center">
140
+ <span class="text-2xl font-bold text-gray-800">$249.99</span>
141
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition">
142
+ <i class="fas fa-cart-plus"></i> Add to Cart
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Product 2 -->
149
+ <div class="product-card bg-white rounded-xl p-6 cursor-pointer"
150
+ onmousemove="tiltCard(this, event)"
151
+ onmouseleave="resetCard(this)">
152
+ <div class="product-image mb-6 flex justify-center">
153
+ <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
154
+ alt="Headphones"
155
+ class="w-64 h-64 object-contain">
156
+ </div>
157
+ <div class="product-info">
158
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Noise Cancelling Headphones</h3>
159
+ <div class="flex items-center mb-4">
160
+ <div class="flex text-yellow-400">
161
+ <i class="fas fa-star"></i>
162
+ <i class="fas fa-star"></i>
163
+ <i class="fas fa-star"></i>
164
+ <i class="fas fa-star"></i>
165
+ <i class="fas fa-star"></i>
166
+ </div>
167
+ <span class="text-gray-600 ml-2">(112 reviews)</span>
168
+ </div>
169
+ <p class="text-gray-600 mb-4">Premium sound quality with active noise cancellation technology.</p>
170
+ <div class="flex justify-between items-center">
171
+ <span class="text-2xl font-bold text-gray-800">$179.99</span>
172
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition">
173
+ <i class="fas fa-cart-plus"></i> Add to Cart
174
+ </button>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Product 3 -->
180
+ <div class="product-card bg-white rounded-xl p-6 cursor-pointer"
181
+ onmousemove="tiltCard(this, event)"
182
+ onmouseleave="resetCard(this)">
183
+ <div class="product-image mb-6 flex justify-center">
184
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWFjYm9va3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
185
+ alt="Laptop"
186
+ class="w-64 h-64 object-contain">
187
+ </div>
188
+ <div class="product-info">
189
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Ultra Slim Laptop</h3>
190
+ <div class="flex items-center mb-4">
191
+ <div class="flex text-yellow-400">
192
+ <i class="fas fa-star"></i>
193
+ <i class="fas fa-star"></i>
194
+ <i class="fas fa-star"></i>
195
+ <i class="fas fa-star"></i>
196
+ <i class="far fa-star"></i>
197
+ </div>
198
+ <span class="text-gray-600 ml-2">(76 reviews)</span>
199
+ </div>
200
+ <p class="text-gray-600 mb-4">Powerful performance in an incredibly thin and light design.</p>
201
+ <div class="flex justify-between items-center">
202
+ <span class="text-2xl font-bold text-gray-800">$1,299.99</span>
203
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition">
204
+ <i class="fas fa-cart-plus"></i> Add to Cart
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </section>
212
+
213
+ <!-- 3D Experience Section -->
214
+ <section class="py-20 bg-gray-100">
215
+ <div class="container mx-auto px-6">
216
+ <div class="flex flex-col md:flex-row items-center">
217
+ <div class="md:w-1/2 mb-10 md:mb-0">
218
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Immersive <span class="text-blue-500">3D</span> Shopping Experience</h2>
219
+ <p class="text-gray-600 mb-6">Our 3D product visualization allows you to explore products from every angle, just like in real life. Rotate, zoom, and interact with products before making a purchase.</p>
220
+ <ul class="space-y-3 mb-8">
221
+ <li class="flex items-center">
222
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
223
+ <span>360° product views</span>
224
+ </li>
225
+ <li class="flex items-center">
226
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
227
+ <span>Realistic materials and textures</span>
228
+ </li>
229
+ <li class="flex items-center">
230
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
231
+ <span>Interactive product demos</span>
232
+ </li>
233
+ <li class="flex items-center">
234
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
235
+ <span>AR preview for compatible devices</span>
236
+ </li>
237
+ </ul>
238
+ <button class="bg-gray-800 text-white px-6 py-3 rounded-full font-bold hover:bg-gray-700 transition">
239
+ Try 3D Demo
240
+ </button>
241
+ </div>
242
+ <div class="md:w-1/2 flex justify-center">
243
+ <div class="relative w-full max-w-md">
244
+ <div class="w-full h-80 bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl shadow-xl transform rotate-3 product-card"
245
+ onmousemove="tiltCard(this, event)"
246
+ onmouseleave="resetCard(this)">
247
+ <div class="absolute inset-0 flex items-center justify-center">
248
+ <i class="fas fa-cube text-white text-6xl opacity-30"></i>
249
+ <div class="absolute bottom-6 left-6 right-6 bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4">
250
+ <h3 class="text-white font-bold">3D Product Viewer</h3>
251
+ <p class="text-white text-sm">Drag to rotate • Scroll to zoom</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Categories -->
262
+ <section class="py-16 bg-white">
263
+ <div class="container mx-auto px-6">
264
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Shop by Category</h2>
265
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
266
+ <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-blue-50 transition cursor-pointer transform hover:scale-105">
267
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
268
+ <i class="fas fa-mobile-alt text-blue-500 text-2xl"></i>
269
+ </div>
270
+ <h3 class="font-bold text-gray-800">Phones</h3>
271
+ </div>
272
+ <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-purple-50 transition cursor-pointer transform hover:scale-105">
273
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
274
+ <i class="fas fa-laptop text-purple-500 text-2xl"></i>
275
+ </div>
276
+ <h3 class="font-bold text-gray-800">Laptops</h3>
277
+ </div>
278
+ <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-green-50 transition cursor-pointer transform hover:scale-105">
279
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
280
+ <i class="fas fa-headphones text-green-500 text-2xl"></i>
281
+ </div>
282
+ <h3 class="font-bold text-gray-800">Audio</h3>
283
+ </div>
284
+ <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-yellow-50 transition cursor-pointer transform hover:scale-105">
285
+ <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
286
+ <i class="fas fa-clock text-yellow-500 text-2xl"></i>
287
+ </div>
288
+ <h3 class="font-bold text-gray-800">Wearables</h3>
289
+ </div>
290
+ <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-red-50 transition cursor-pointer transform hover:scale-105">
291
+ <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
292
+ <i class="fas fa-gamepad text-red-500 text-2xl"></i>
293
+ </div>
294
+ <h3 class="font-bold text-gray-800">Gaming</h3>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </section>
299
+
300
+ <!-- Newsletter -->
301
+ <section class="py-16 bg-gray-900 text-white">
302
+ <div class="container mx-auto px-6 text-center">
303
+ <h2 class="text-3xl font-bold mb-6">Stay Updated</h2>
304
+ <p class="text-gray-300 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for the latest products, deals, and 3D shopping experiences.</p>
305
+ <div class="flex flex-col md:flex-row justify-center max-w-md mx-auto">
306
+ <input type="email" placeholder="Your email address" class="px-4 py-3 rounded-l-full md:rounded-r-none rounded-r-full mb-2 md:mb-0 w-full text-gray-800 focus:outline-none">
307
+ <button class="bg-blue-500 px-6 py-3 rounded-r-full md:rounded-l-none rounded-l-full font-bold hover:bg-blue-600 transition">
308
+ Subscribe
309
+ </button>
310
+ </div>
311
+ </div>
312
+ </section>
313
+
314
+ <!-- Footer -->
315
+ <footer class="bg-gray-800 text-white py-12">
316
+ <div class="container mx-auto px-6">
317
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
318
+ <div>
319
+ <h3 class="text-xl font-bold mb-4"><span class="text-blue-400">3D</span>Shop</h3>
320
+ <p class="text-gray-400">The future of e-commerce with immersive 3D product experiences.</p>
321
+ <div class="flex space-x-4 mt-4">
322
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
323
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
324
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
325
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
326
+ </div>
327
+ </div>
328
+ <div>
329
+ <h4 class="font-bold mb-4">Shop</h4>
330
+ <ul class="space-y-2">
331
+ <li><a href="#" class="text-gray-400 hover:text-white">All Products</a></li>
332
+ <li><a href="#" class="text-gray-400 hover:text-white">Featured</a></li>
333
+ <li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li>
334
+ <li><a href="#" class="text-gray-400 hover:text-white">Sale Items</a></li>
335
+ </ul>
336
+ </div>
337
+ <div>
338
+ <h4 class="font-bold mb-4">About</h4>
339
+ <ul class="space-y-2">
340
+ <li><a href="#" class="text-gray-400 hover:text-white">Our Story</a></li>
341
+ <li><a href="#" class="text-gray-400 hover:text-white">3D Technology</a></li>
342
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
343
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
344
+ </ul>
345
+ </div>
346
+ <div>
347
+ <h4 class="font-bold mb-4">Help</h4>
348
+ <ul class="space-y-2">
349
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
350
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li>
351
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li>
352
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
353
+ </ul>
354
+ </div>
355
+ </div>
356
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
357
+ <p>&copy; 2023 3DShop. All rights reserved.</p>
358
+ </div>
359
+ </div>
360
+ </footer>
361
+
362
+ <script>
363
+ // 3D tilt effect for product cards
364
+ function tiltCard(element, event) {
365
+ const card = element;
366
+ const cardWidth = card.offsetWidth;
367
+ const cardHeight = card.offsetHeight;
368
+ const centerX = card.offsetLeft + cardWidth/2;
369
+ const centerY = card.offsetTop + cardHeight/2;
370
+ const mouseX = event.clientX - centerX;
371
+ const mouseY = event.clientY - centerY;
372
+ const rotateX = (mouseY / cardHeight) * 10; // Reduced rotation for subtle effect
373
+ const rotateY = -(mouseX / cardWidth) * 10;
374
+
375
+ card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`;
376
+
377
+ // Add shadow effect based on mouse position
378
+ const shadowX = (mouseX / cardWidth) * 20;
379
+ const shadowY = (mouseY / cardHeight) * 20;
380
+ const shadowBlur = 30;
381
+ card.style.boxShadow = `${-shadowX}px ${-shadowY}px ${shadowBlur}px rgba(0, 0, 0, 0.2)`;
382
+ }
383
+
384
+ function resetCard(element) {
385
+ element.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
386
+ element.style.boxShadow = '0 20px 30px rgba(0, 0, 0, 0.1)';
387
+ }
388
+
389
+ // Add event listeners to all product cards
390
+ document.addEventListener('DOMContentLoaded', function() {
391
+ const productCards = document.querySelectorAll('.product-card');
392
+ productCards.forEach(card => {
393
+ card.addEventListener('mousemove', (e) => tiltCard(card, e));
394
+ card.addEventListener('mouseleave', () => resetCard(card));
395
+ });
396
+
397
+ // Simple cart animation
398
+ const cartButtons = document.querySelectorAll('button:has(.fa-cart-plus)');
399
+ cartButtons.forEach(button => {
400
+ button.addEventListener('click', function(e) {
401
+ e.preventDefault();
402
+ const cartIcon = document.querySelector('.fa-shopping-cart');
403
+
404
+ // Create flying product animation
405
+ const productImg = this.closest('.product-card').querySelector('img').cloneNode(true);
406
+ productImg.style.position = 'fixed';
407
+ productImg.style.width = '50px';
408
+ productImg.style.height = '50px';
409
+ productImg.style.borderRadius = '50%';
410
+ productImg.style.objectFit = 'cover';
411
+ productImg.style.zIndex = '1000';
412
+ productImg.style.top = this.getBoundingClientRect().top + 'px';
413
+ productImg.style.left = this.getBoundingClientRect().left + 'px';
414
+ productImg.style.transition = 'all 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5)';
415
+ document.body.appendChild(productImg);
416
+
417
+ // Animate to cart
418
+ setTimeout(() => {
419
+ const cartRect = cartIcon.getBoundingClientRect();
420
+ productImg.style.top = (cartRect.top + 10) + 'px';
421
+ productImg.style.left = (cartRect.left + 10) + 'px';
422
+ productImg.style.width = '20px';
423
+ productImg.style.height = '20px';
424
+ productImg.style.opacity = '0.5';
425
+ }, 0);
426
+
427
+ // Remove after animation
428
+ setTimeout(() => {
429
+ productImg.remove();
430
+
431
+ // Update cart count with animation
432
+ const cartCount = document.querySelector('.fa-shopping-cart + span');
433
+ if (cartCount) {
434
+ cartCount.textContent = parseInt(cartCount.textContent) + 1;
435
+ cartCount.classList.add('animate-bounce');
436
+ setTimeout(() => cartCount.classList.remove('animate-bounce'), 1000);
437
+ }
438
+ }, 500);
439
+ });
440
+ });
441
+ });
442
+ </script>
443
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=1111111malik/my-old" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
444
+ </html>
prompts.txt ADDED
File without changes