Hugging Face's logo

Spaces:
Sonata71
/
teeshop
Running

App Files Community
Sonata71 commited on
Commit
1fb3b02
·
verified ·
1 Parent(s): 94cd4fa

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +621 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Teeshop
3
- emoji: 🔥
4
- colorFrom: gray
5
- colorTo: pink
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: teeshop
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,621 @@
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>T-Shirt Store | AyoubShop</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:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
13
+ }
14
+
15
+ .cart-item-enter {
16
+ opacity: 0;
17
+ transform: translateX(20px);
18
+ }
19
+ .cart-item-enter-active {
20
+ opacity: 1;
21
+ transform: translateX(0);
22
+ transition: all 300ms ease-in;
23
+ }
24
+ .cart-item-exit {
25
+ opacity: 1;
26
+ }
27
+ .cart-item-exit-active {
28
+ opacity: 0;
29
+ transform: translateX(20px);
30
+ transition: all 300ms ease-in;
31
+ }
32
+
33
+ @keyframes pulse {
34
+ 0%, 100% { transform: scale(1); }
35
+ 50% { transform: scale(1.05); }
36
+ }
37
+
38
+ .cart-pulse {
39
+ animation: pulse 1.5s infinite;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50">
44
+ <!-- Header/Navigation -->
45
+ <header class="bg-white shadow-sm sticky top-0 z-50">
46
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
47
+ <div class="flex items-center">
48
+ <a href="#" class="text-2xl font-bold text-indigo-600">TeeShop</a>
49
+ </div>
50
+
51
+ <nav class="hidden md:flex space-x-8">
52
+ <a href="#" class="text-gray-800 hover:text-indigo-600">Home</a>
53
+ <a href="#shop" class="text-gray-800 hover:text-indigo-600">Shop</a>
54
+ <a href="#about" class="text-gray-800 hover:text-indigo-600">About</a>
55
+ <a href="#contact" class="text-gray-800 hover:text-indigo-600">Contact</a>
56
+ </nav>
57
+
58
+ <div class="flex items-center space-x-4">
59
+ <button id="cartBtn" class="relative">
60
+ <i class="fas fa-shopping-cart text-gray-700 text-xl"></i>
61
+ <span id="cartCount" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
62
+ </button>
63
+
64
+ <button class="md:hidden" id="mobileMenuBtn">
65
+ <i class="fas fa-bars text-gray-700 text-xl"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Mobile Menu -->
71
+ <div id="mobileMenu" class="hidden md:hidden bg-white py-2 px-4 shadow-md">
72
+ <a href="#" class="block py-2 text-gray-800 hover:text-indigo-600">Home</a>
73
+ <a href="#shop" class="block py-2 text-gray-800 hover:text-indigo-600">Shop</a>
74
+ <a href="#about" class="block py-2 text-gray-800 hover:text-indigo-600">About</a>
75
+ <a href="#contact" class="block py-2 text-gray-800 hover:text-indigo-600">Contact</a>
76
+ </div>
77
+ </header>
78
+
79
+ <!-- Hero Section -->
80
+ <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16 md:py-24">
81
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
82
+ <div class="md:w-1/2 mb-8 md:mb-0">
83
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Premium Quality T-Shirts</h1>
84
+ <p class="text-xl mb-6">Comfortable, stylish, and made to last. Find your perfect tee today.</p>
85
+ <a href="#shop" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300 inline-block">Shop Now</a>
86
+ </div>
87
+ <div class="md:w-1/2 flex justify-center">
88
+ <img src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="T-Shirt Display" class="rounded-lg shadow-xl max-w-full h-auto max-h-96">
89
+ </div>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Featured Products -->
94
+ <section id="shop" class="py-16 bg-white">
95
+ <div class="container mx-auto px-4">
96
+ <h2 class="text-3xl font-bold text-center mb-12">Our T-Shirt Collection</h2>
97
+
98
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
99
+ <!-- Product 1 -->
100
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
101
+ <div class="relative">
102
+ <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Graphic T-Shirt" class="w-full h-64 object-cover">
103
+ <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Bestseller</div>
104
+ </div>
105
+ <div class="p-4">
106
+ <h3 class="font-semibold text-lg mb-1">Urban Explorer</h3>
107
+ <p class="text-gray-600 text-sm mb-2">Graphic Print T-Shirt</p>
108
+ <div class="flex justify-between items-center">
109
+ <span class="font-bold text-indigo-600">$24.99</span>
110
+ <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded text-sm hover:bg-indigo-700 transition" data-id="1" data-name="Urban Explorer" data-price="24.99" data-image="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80">
111
+ Add to Cart
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Product 2 -->
118
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
119
+ <div class="relative">
120
+ <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Plain T-Shirt" class="w-full h-64 object-cover">
121
+ </div>
122
+ <div class="p-4">
123
+ <h3 class="font-semibold text-lg mb-1">Classic Comfort</h3>
124
+ <p class="text-gray-600 text-sm mb-2">Basic Cotton T-Shirt</p>
125
+ <div class="flex justify-between items-center">
126
+ <span class="font-bold text-indigo-600">$19.99</span>
127
+ <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded text-sm hover:bg-indigo-700 transition" data-id="2" data-name="Classic Comfort" data-price="19.99" data-image="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80">
128
+ Add to Cart
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Product 3 -->
135
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
136
+ <div class="relative">
137
+ <img src="https://images.unsplash.com/photo-1598033129183-c4f50c736ef7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="Vintage T-Shirt" class="w-full h-64 object-cover">
138
+ <div class="absolute top-2 right-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded">Sale</div>
139
+ </div>
140
+ <div class="p-4">
141
+ <h3 class="font-semibold text-lg mb-1">Retro Vibes</h3>
142
+ <p class="text-gray-600 text-sm mb-2">Vintage Washed T-Shirt</p>
143
+ <div class="flex justify-between items-center">
144
+ <div>
145
+ <span class="font-bold text-indigo-600">$22.99</span>
146
+ <span class="text-gray-400 text-sm line-through ml-2">$29.99</span>
147
+ </div>
148
+ <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded text-sm hover:bg-indigo-700 transition" data-id="3" data-name="Retro Vibes" data-price="22.99" data-image="https://images.unsplash.com/photo-1598033129183-c4f50c736ef7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80">
149
+ Add to Cart
150
+ </button>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Product 4 -->
156
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
157
+ <div class="relative">
158
+ <img src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1072&q=80" alt="Pocket T-Shirt" class="w-full h-64 object-cover">
159
+ </div>
160
+ <div class="p-4">
161
+ <h3 class="font-semibold text-lg mb-1">Essential Pocket</h3>
162
+ <p class="text-gray-600 text-sm mb-2">Pocket Detail T-Shirt</p>
163
+ <div class="flex justify-between items-center">
164
+ <span class="font-bold text-indigo-600">$26.99</span>
165
+ <button class="add-to-cart bg-indigo-600 text-white px-3 py-1 rounded text-sm hover:bg-indigo-700 transition" data-id="4" data-name="Essential Pocket" data-price="26.99" data-image="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1072&q=80">
166
+ Add to Cart
167
+ </button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- About Section -->
176
+ <section id="about" class="py-16 bg-gray-100">
177
+ <div class="container mx-auto px-4">
178
+ <div class="flex flex-col md:flex-row items-center">
179
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
180
+ <h2 class="text-3xl font-bold mb-6">About Our T-Shirts</h2>
181
+ <p class="text-gray-700 mb-4">
182
+ We believe in creating high-quality, comfortable t-shirts that you'll love to wear every day.
183
+ Our tees are made from premium 100% cotton fabric that gets softer with every wash.
184
+ </p>
185
+ <p class="text-gray-700 mb-4">
186
+ Each design is carefully crafted to ensure both style and durability. We use eco-friendly
187
+ printing methods that are gentle on the environment and produce vibrant, long-lasting prints.
188
+ </p>
189
+ <p class="text-gray-700">
190
+ From classic fits to modern styles, we have something for everyone. Shop our collection and
191
+ experience the difference quality makes.
192
+ </p>
193
+ </div>
194
+ <div class="md:w-1/2">
195
+ <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="About Our T-Shirts" class="rounded-lg shadow-lg w-full">
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+
201
+ <!-- Testimonials -->
202
+ <section class="py-16 bg-white">
203
+ <div class="container mx-auto px-4">
204
+ <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
205
+
206
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
207
+ <!-- Testimonial 1 -->
208
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
209
+ <div class="flex items-center mb-4">
210
+ <div class="text-yellow-400 mr-2">
211
+ <i class="fas fa-star"></i>
212
+ <i class="fas fa-star"></i>
213
+ <i class="fas fa-star"></i>
214
+ <i class="fas fa-star"></i>
215
+ <i class="fas fa-star"></i>
216
+ </div>
217
+ </div>
218
+ <p class="text-gray-700 mb-4">
219
+ "The quality of these t-shirts is amazing! They're so comfortable and the print hasn't faded
220
+ even after multiple washes. Will definitely be buying more."
221
+ </p>
222
+ <div class="flex items-center">
223
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
224
+ <div>
225
+ <h4 class="font-semibold">Sarah J.</h4>
226
+ <p class="text-gray-500 text-sm">Verified Customer</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Testimonial 2 -->
232
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
233
+ <div class="flex items-center mb-4">
234
+ <div class="text-yellow-400 mr-2">
235
+ <i class="fas fa-star"></i>
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ <i class="fas fa-star"></i>
239
+ <i class="fas fa-star"></i>
240
+ </div>
241
+ </div>
242
+ <p class="text-gray-700 mb-4">
243
+ "I love the fit of these shirts. They're not too tight but still have a nice shape. The fabric
244
+ is breathable and perfect for summer."
245
+ </p>
246
+ <div class="flex items-center">
247
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-10 h-10 rounded-full mr-3">
248
+ <div>
249
+ <h4 class="font-semibold">Michael T.</h4>
250
+ <p class="text-gray-500 text-sm">Verified Customer</p>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Testimonial 3 -->
256
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
257
+ <div class="flex items-center mb-4">
258
+ <div class="text-yellow-400 mr-2">
259
+ <i class="fas fa-star"></i>
260
+ <i class="fas fa-star"></i>
261
+ <i class="fas fa-star"></i>
262
+ <i class="fas fa-star"></i>
263
+ <i class="fas fa-star-half-alt"></i>
264
+ </div>
265
+ </div>
266
+ <p class="text-gray-700 mb-4">
267
+ "Great customer service and fast shipping. The t-shirt arrived exactly as pictured and fits
268
+ perfectly. Will be ordering more colors soon!"
269
+ </p>
270
+ <div class="flex items-center">
271
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jessica L." class="w-10 h-10 rounded-full mr-3">
272
+ <div>
273
+ <h4 class="font-semibold">Jessica L.</h4>
274
+ <p class="text-gray-500 text-sm">Verified Customer</p>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- Contact Section -->
283
+ <section id="contact" class="py-16 bg-indigo-50">
284
+ <div class="container mx-auto px-4">
285
+ <h2 class="text-3xl font-bold text-center mb-12">Contact Us</h2>
286
+
287
+ <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
288
+ <div class="md:flex">
289
+ <div class="md:w-1/2 bg-indigo-600 text-white p-8">
290
+ <h3 class="text-xl font-semibold mb-4">Get in Touch</h3>
291
+ <p class="mb-6">Have questions about our products or need assistance with your order? Reach out to us!</p>
292
+
293
+ <div class="mb-4 flex items-start">
294
+ <i class="fas fa-map-marker-alt mt-1 mr-3"></i>
295
+ <p>123 T-Shirt Street, Fashion District, CA 90210</p>
296
+ </div>
297
+ <div class="mb-4 flex items-center">
298
+ <i class="fas fa-phone-alt mr-3"></i>
299
+ <p>(555) 123-4567</p>
300
+ </div>
301
+ <div class="flex items-center">
302
+ <i class="fas fa-envelope mr-3"></i>
303
+ <p>info@teeshop.com</p>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="md:w-1/2 p-8">
308
+ <form id="contactForm">
309
+ <div class="mb-4">
310
+ <label for="name" class="block text-gray-700 mb-2">Name</label>
311
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
312
+ </div>
313
+ <div class="mb-4">
314
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
315
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
316
+ </div>
317
+ <div class="mb-4">
318
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
319
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
320
+ </div>
321
+ <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition w-full">
322
+ Send Message
323
+ </button>
324
+ </form>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- Footer -->
332
+ <footer class="bg-gray-900 text-white py-12">
333
+ <div class="container mx-auto px-4">
334
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
335
+ <div>
336
+ <h3 class="text-xl font-bold mb-4">TeeShop</h3>
337
+ <p class="text-gray-400">
338
+ Premium quality t-shirts for every occasion. Comfortable, stylish, and made to last.
339
+ </p>
340
+ </div>
341
+
342
+ <div>
343
+ <h4 class="font-semibold mb-4">Quick Links</h4>
344
+ <ul class="space-y-2">
345
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
346
+ <li><a href="#shop" class="text-gray-400 hover:text-white transition">Shop</a></li>
347
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li>
348
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
349
+ </ul>
350
+ </div>
351
+
352
+ <div>
353
+ <h4 class="font-semibold mb-4">Customer Service</h4>
354
+ <ul class="space-y-2">
355
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping Policy</a></li>
356
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Returns & Exchanges</a></li>
357
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Size Guide</a></li>
358
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li>
359
+ </ul>
360
+ </div>
361
+
362
+ <div>
363
+ <h4 class="font-semibold mb-4">Connect With Us</h4>
364
+ <div class="flex space-x-4">
365
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-facebook-f"></i></a>
366
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a>
367
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-instagram"></i></a>
368
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-pinterest-p"></i></a>
369
+ </div>
370
+
371
+ <h4 class="font-semibold mt-6 mb-2">Newsletter</h4>
372
+ <div class="flex">
373
+ <input type="email" placeholder="Your email" class="px-3 py-2 text-gray-900 rounded-l focus:outline-none w-full">
374
+ <button class="bg-indigo-600 px-3 py-2 rounded-r hover:bg-indigo-700 transition">
375
+ <i class="fas fa-paper-plane"></i>
376
+ </button>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
382
+ <p>&copy; 2023 TeeShop. All rights reserved.</p>
383
+ </div>
384
+ </div>
385
+ </footer>
386
+
387
+ <!-- Shopping Cart Sidebar -->
388
+ <div id="cartSidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto">
389
+ <div class="p-6">
390
+ <div class="flex justify-between items-center mb-6">
391
+ <h3 class="text-xl font-bold">Your Cart</h3>
392
+ <button id="closeCartBtn" class="text-gray-500 hover:text-gray-700">
393
+ <i class="fas fa-times"></i>
394
+ </button>
395
+ </div>
396
+
397
+ <div id="cartItems" class="mb-6">
398
+ <!-- Cart items will be added here dynamically -->
399
+ <div class="text-center py-8 text-gray-500" id="emptyCartMessage">
400
+ <i class="fas fa-shopping-cart text-4xl mb-3"></i>
401
+ <p>Your cart is empty</p>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="border-t border-gray-200 pt-4 mb-4">
406
+ <div class="flex justify-between mb-2">
407
+ <span class="font-semibold">Subtotal:</span>
408
+ <span id="cartSubtotal">$0.00</span>
409
+ </div>
410
+ <div class="flex justify-between mb-2">
411
+ <span class="font-semibold">Shipping:</span>
412
+ <span>Calculated at checkout</span>
413
+ </div>
414
+ <div class="flex justify-between text-lg font-bold">
415
+ <span>Total:</span>
416
+ <span id="cartTotal">$0.00</span>
417
+ </div>
418
+ </div>
419
+
420
+ <button id="checkoutBtn" class="bg-indigo-600 text-white w-full py-3 rounded-lg font-medium hover:bg-indigo-700 transition mb-3">
421
+ Checkout
422
+ </button>
423
+ <a href="#shop" class="block text-center text-indigo-600 hover:text-indigo-800 transition">
424
+ Continue Shopping
425
+ </a>
426
+ </div>
427
+ </div>
428
+ <div id="cartOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div>
429
+
430
+ <script>
431
+ document.addEventListener('DOMContentLoaded', function() {
432
+ // Mobile menu toggle
433
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
434
+ const mobileMenu = document.getElementById('mobileMenu');
435
+
436
+ mobileMenuBtn.addEventListener('click', function() {
437
+ mobileMenu.classList.toggle('hidden');
438
+ });
439
+
440
+ // Cart functionality
441
+ const cartBtn = document.getElementById('cartBtn');
442
+ const closeCartBtn = document.getElementById('closeCartBtn');
443
+ const cartSidebar = document.getElementById('cartSidebar');
444
+ const cartOverlay = document.getElementById('cartOverlay');
445
+ const cartCount = document.getElementById('cartCount');
446
+ const cartItems = document.getElementById('cartItems');
447
+ const emptyCartMessage = document.getElementById('emptyCartMessage');
448
+ const cartSubtotal = document.getElementById('cartSubtotal');
449
+ const cartTotal = document.getElementById('cartTotal');
450
+ const checkoutBtn = document.getElementById('checkoutBtn');
451
+
452
+ let cart = [];
453
+
454
+ // Toggle cart sidebar
455
+ function toggleCart() {
456
+ cartSidebar.classList.toggle('translate-x-full');
457
+ cartOverlay.classList.toggle('hidden');
458
+ document.body.classList.toggle('overflow-hidden');
459
+ }
460
+
461
+ cartBtn.addEventListener('click', toggleCart);
462
+ closeCartBtn.addEventListener('click', toggleCart);
463
+ cartOverlay.addEventListener('click', toggleCart);
464
+
465
+ // Add to cart functionality
466
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
467
+
468
+ addToCartButtons.forEach(button => {
469
+ button.addEventListener('click', function() {
470
+ const id = this.getAttribute('data-id');
471
+ const name = this.getAttribute('data-name');
472
+ const price = parseFloat(this.getAttribute('data-price'));
473
+ const image = this.getAttribute('data-image');
474
+
475
+ // Check if item already exists in cart
476
+ const existingItem = cart.find(item => item.id === id);
477
+
478
+ if (existingItem) {
479
+ existingItem.quantity += 1;
480
+ } else {
481
+ cart.push({
482
+ id,
483
+ name,
484
+ price,
485
+ image,
486
+ quantity: 1
487
+ });
488
+ }
489
+
490
+ updateCart();
491
+
492
+ // Add pulse animation to cart icon
493
+ cartBtn.classList.add('cart-pulse');
494
+ setTimeout(() => {
495
+ cartBtn.classList.remove('cart-pulse');
496
+ }, 1500);
497
+ });
498
+ });
499
+
500
+ // Update cart UI
501
+ function updateCart() {
502
+ // Update cart count
503
+ const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
504
+ cartCount.textContent = totalItems;
505
+
506
+ // Update cart items
507
+ if (cart.length === 0) {
508
+ emptyCartMessage.classList.remove('hidden');
509
+ cartItems.innerHTML = '';
510
+ } else {
511
+ emptyCartMessage.classList.add('hidden');
512
+
513
+ let itemsHTML = '';
514
+ let subtotal = 0;
515
+
516
+ cart.forEach(item => {
517
+ const itemTotal = item.price * item.quantity;
518
+ subtotal += itemTotal;
519
+
520
+ itemsHTML += `
521
+ <div class="cart-item flex items-center py-4 border-b border-gray-200">
522
+ <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-4">
523
+ <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
524
+ </div>
525
+ <div class="flex-1">
526
+ <h4 class="font-medium">${item.name}</h4>
527
+ <p class="text-gray-600 text-sm">$${item.price.toFixed(2)}</p>
528
+ </div>
529
+ <div class="flex items-center">
530
+ <button class="decrease-quantity text-gray-500 px-2 py-1" data-id="${item.id}">
531
+ <i class="fas fa-minus text-xs"></i>
532
+ </button>
533
+ <span class="mx-2">${item.quantity}</span>
534
+ <button class="increase-quantity text-gray-500 px-2 py-1" data-id="${item.id}">
535
+ <i class="fas fa-plus text-xs"></i>
536
+ </button>
537
+ </div>
538
+ <div class="ml-4 font-medium">
539
+ $${itemTotal.toFixed(2)}
540
+ </div>
541
+ <button class="remove-item ml-4 text-red-500" data-id="${item.id}">
542
+ <i class="fas fa-trash"></i>
543
+ </button>
544
+ </div>
545
+ `;
546
+ });
547
+
548
+ cartItems.innerHTML = itemsHTML;
549
+
550
+ // Update totals
551
+ cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
552
+ cartTotal.textContent = `$${subtotal.toFixed(2)}`;
553
+
554
+ // Add event listeners to new buttons
555
+ document.querySelectorAll('.decrease-quantity').forEach(button => {
556
+ button.addEventListener('click', function() {
557
+ const id = this.getAttribute('data-id');
558
+ const item = cart.find(item => item.id === id);
559
+
560
+ if (item.quantity > 1) {
561
+ item.quantity -= 1;
562
+ updateCart();
563
+ }
564
+ });
565
+ });
566
+
567
+ document.querySelectorAll('.increase-quantity').forEach(button => {
568
+ button.addEventListener('click', function() {
569
+ const id = this.getAttribute('data-id');
570
+ const item = cart.find(item => item.id === id);
571
+
572
+ item.quantity += 1;
573
+ updateCart();
574
+ });
575
+ });
576
+
577
+ document.querySelectorAll('.remove-item').forEach(button => {
578
+ button.addEventListener('click', function() {
579
+ const id = this.getAttribute('data-id');
580
+ cart = cart.filter(item => item.id !== id);
581
+ updateCart();
582
+ });
583
+ });
584
+ }
585
+ }
586
+
587
+ // Checkout button
588
+ checkoutBtn.addEventListener('click', function() {
589
+ if (cart.length === 0) {
590
+ alert('Your cart is empty!');
591
+ return;
592
+ }
593
+
594
+ alert('Checkout functionality would go here!');
595
+ // In a real application, you would redirect to a checkout page
596
+ });
597
+
598
+ // Contact form submission
599
+ const contactForm = document.getElementById('contactForm');
600
+
601
+ contactForm.addEventListener('submit', function(e) {
602
+ e.preventDefault();
603
+
604
+ const name = document.getElementById('name').value;
605
+ const email = document.getElementById('email').value;
606
+ const message = document.getElementById('message').value;
607
+
608
+ // Simple validation
609
+ if (!name || !email || !message) {
610
+ alert('Please fill in all fields');
611
+ return;
612
+ }
613
+
614
+ // In a real application, you would send this data to your server
615
+ alert(`Thank you for your message, ${name}! We'll get back to you soon.`);
616
+ contactForm.reset();
617
+ });
618
+ });
619
+ </script>
620
+ <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=Sonata71/teeshop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
621
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ create application where can i play chess
2
+ create me site web where i can sell my tshort