Hugging Face's logo

Spaces:
dueyrjw
/
the-space
Running

App Files Community
dueyrjw commited on
Commit
c669be3
·
verified ·
1 Parent(s): 29f6a72

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +703 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: The Space
3
- emoji: 📚
4
- colorFrom: pink
5
- colorTo: blue
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: the-space
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
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,703 @@
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>TechSlide - Premium Electronics</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
+ /* Custom styles */
11
+ .slide {
12
+ transition: transform 0.5s ease-in-out;
13
+ }
14
+ .btn-hover:hover {
15
+ transform: translateY(-3px);
16
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .nav-link {
19
+ position: relative;
20
+ }
21
+ .nav-link::after {
22
+ content: '';
23
+ position: absolute;
24
+ width: 0;
25
+ height: 2px;
26
+ background: #3b82f6;
27
+ bottom: -2px;
28
+ left: 0;
29
+ transition: width 0.3s ease;
30
+ }
31
+ .nav-link:hover::after {
32
+ width: 100%;
33
+ }
34
+ .product-card {
35
+ transition: all 0.3s ease;
36
+ }
37
+ .product-card:hover {
38
+ transform: translateY(-10px);
39
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
40
+ }
41
+ .hero-bg {
42
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
43
+ }
44
+ .scroll-hide::-webkit-scrollbar {
45
+ display: none;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="font-sans bg-gray-50 overflow-x-hidden">
50
+ <!-- Navigation -->
51
+ <nav class="fixed w-full bg-white shadow-md z-50">
52
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
53
+ <div class="flex justify-between h-16 items-center">
54
+ <div class="flex items-center">
55
+ <div class="flex-shrink-0 flex items-center">
56
+ <i class="fas fa-bolt text-blue-500 text-2xl mr-2"></i>
57
+ <span class="text-xl font-bold text-blue-600">TechSlide</span>
58
+ </div>
59
+ </div>
60
+ <div class="hidden md:block">
61
+ <div class="ml-10 flex items-baseline space-x-8">
62
+ <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Home</a>
63
+ <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Products</a>
64
+ <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Deals</a>
65
+ <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">About</a>
66
+ <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Contact</a>
67
+ </div>
68
+ </div>
69
+ <div class="flex items-center">
70
+ <button class="p-2 rounded-full text-gray-500 hover:text-blue-600 focus:outline-none">
71
+ <i class="fas fa-search"></i>
72
+ </button>
73
+ <button class="ml-2 p-2 rounded-full text-gray-500 hover:text-blue-600 focus:outline-none">
74
+ <i class="fas fa-shopping-cart"></i>
75
+ </button>
76
+ <button class="ml-2 p-2 rounded-full text-gray-500 hover:text-blue-600 focus:outline-none md:hidden" id="mobile-menu-button">
77
+ <i class="fas fa-bars"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Mobile menu -->
84
+ <div class="hidden md:hidden bg-white shadow-xl" id="mobile-menu">
85
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
86
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Home</a>
87
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Products</a>
88
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Deals</a>
89
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">About</a>
90
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a>
91
+ </div>
92
+ </div>
93
+ </nav>
94
+
95
+ <!-- Hero Slider -->
96
+ <div class="relative pt-16 overflow-hidden">
97
+ <div class="absolute inset-0 hero-bg opacity-90"></div>
98
+ <div class="relative h-screen flex items-center">
99
+ <div class="absolute inset-0 flex transition-transform duration-700 ease-in-out" id="slider">
100
+ <!-- Slide 1 -->
101
+ <div class="min-w-full slide flex items-center justify-center">
102
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
103
+ <div class="md:w-1/2 text-center md:text-left">
104
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Latest Smartphones</h1>
105
+ <p class="text-xl text-gray-100 mb-8">Experience cutting-edge technology with our newest collection of smartphones featuring advanced cameras and lightning-fast processors.</p>
106
+ <button class="btn-hover bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
107
+ Shop Now <i class="fas fa-arrow-right ml-2"></i>
108
+ </button>
109
+ </div>
110
+ <div class="md:w-1/2 mt-10 md:mt-0 flex justify-center">
111
+ <img src="https://placehold.co/600x500/3B82F6/FFFFFF?text=Smartphone" alt="Smartphone" class="h-96 object-contain transform transition-transform duration-500 hover:scale-105">
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Slide 2 -->
117
+ <div class="min-w-full slide flex items-center justify-center">
118
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
119
+ <div class="md:w-1/2 text-center md:text-left">
120
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">High-End Laptops</h1>
121
+ <p class="text-xl text-gray-100 mb-8">Powerful performance for work and play with our premium laptop selection featuring the latest processors and stunning displays.</p>
122
+ <button class="btn-hover bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
123
+ Explore Laptops <i class="fas fa-arrow-right ml-2"></i>
124
+ </button>
125
+ </div>
126
+ <div class="md:w-1/2 mt-10 md:mt-0 flex justify-center">
127
+ <img src="https://placehold.co/600x500/3B82F6/FFFFFF?text=Laptop" alt="Laptop" class="h-96 object-contain transform transition-transform duration-500 hover:scale-105">
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Slide 3 -->
133
+ <div class="min-w-full slide flex items-center justify-center">
134
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
135
+ <div class="md:w-1/2 text-center md:text-left">
136
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Smart Home Devices</h1>
137
+ <p class="text-xl text-gray-100 mb-8">Transform your living space with our range of smart home products that bring convenience and efficiency to your daily life.</p>
138
+ <button class="btn-hover bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
139
+ Smart Home <i class="fas fa-arrow-right ml-2"></i>
140
+ </button>
141
+ </div>
142
+ <div class="md:w-1/2 mt-10 md:mt-0 flex justify-center">
143
+ <img src="https://placehold.co/600x500/3B82F6/FFFFFF?text=Smart+Home" alt="Smart Home" class="h-96 object-contain transform transition-transform duration-500 hover:scale-105">
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Slider controls -->
150
+ <button id="prev" class="absolute left-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white p-3 rounded-full">
151
+ <i class="fas fa-chevron-left"></i>
152
+ </button>
153
+ <button id="next" class="absolute right-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white p-3 rounded-full">
154
+ <i class="fas fa-chevron-right"></i>
155
+ </button>
156
+
157
+ <!-- Slider indicators -->
158
+ <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex space-x-2">
159
+ <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="0"></button>
160
+ <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="1"></button>
161
+ <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="2"></button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Featured Products -->
167
+ <section class="py-16 bg-white">
168
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
169
+ <div class="text-center mb-12">
170
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
171
+ Featured Products
172
+ </h2>
173
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
174
+ Discover our curated selection of premium electronics
175
+ </p>
176
+ </div>
177
+
178
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mt-10">
179
+ <!-- Product 1 -->
180
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden">
181
+ <div class="relative h-64">
182
+ <img src="https://placehold.co/300x300/3B82F6/FFFFFF?text=Smartphone" alt="Product" class="w-full h-full object-cover">
183
+ <div class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">NEW</div>
184
+ </div>
185
+ <div class="p-6">
186
+ <div class="flex items-center mb-2">
187
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
188
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
189
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
190
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
191
+ <i class="fas fa-star-half-alt text-yellow-400 mr-2"></i>
192
+ <span class="text-gray-500 text-sm">4.7 (128)</span>
193
+ </div>
194
+ <h3 class="text-lg font-semibold text-gray-900">Ultra Pro Max Phone</h3>
195
+ <p class="text-gray-500 text-sm mt-1">6.7" AMOLED, 128GB Storage</p>
196
+ <div class="mt-4 flex justify-between items-center">
197
+ <span class="text-lg font-bold text-blue-600">$899.99</span>
198
+ <button class="btn-hover bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-4 rounded-full">
199
+ Add to Cart <i class="fas fa-shopping-cart ml-1"></i>
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Product 2 -->
206
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden">
207
+ <div class="relative h-64">
208
+ <img src="https://placehold.co/300x300/3B82F6/FFFFFF?text=Laptop" alt="Product" class="w-full h-full object-cover">
209
+ </div>
210
+ <div class="p-6">
211
+ <div class="flex items-center mb-2">
212
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
213
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
214
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
215
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
216
+ <i class="fas fa-star text-yellow-400 mr-2"></i>
217
+ <span class="text-gray-500 text-sm">4.9 (98)</span>
218
+ </div>
219
+ <h3 class="text-lg font-semibold text-gray-900">Pro Tech Laptop</h3>
220
+ <p class="text-gray-500 text-sm mt-1">15.6" 4K, 16GB RAM, 1TB SSD</p>
221
+ <div class="mt-4 flex justify-between items-center">
222
+ <span class="text-lg font-bold text-blue-600">$1,299.99</span>
223
+ <button class="btn-hover bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-4 rounded-full">
224
+ Add to Cart <i class="fas fa-shopping-cart ml-1"></i>
225
+ </button>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Product 3 -->
231
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden">
232
+ <div class="relative h-64">
233
+ <img src="https://placehold.co/300x300/3B82F6/FFFFFF?text=Smart+Watch" alt="Product" class="w-full h-full object-cover">
234
+ <div class="absolute top-2 left-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">BESTSELLER</div>
235
+ </div>
236
+ <div class="p-6">
237
+ <div class="flex items-center mb-2">
238
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
239
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
240
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
241
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
242
+ <i class="far fa-star text-yellow-400 mr-2"></i>
243
+ <span class="text-gray-500 text-sm">4.3 (256)</span>
244
+ </div>
245
+ <h3 class="text-lg font-semibold text-gray-900">Smart Watch Pro</h3>
246
+ <p class="text-gray-500 text-sm mt-1">AMOLED, Heart Rate, GPS</p>
247
+ <div class="mt-4 flex justify-between items-center">
248
+ <span class="text-lg font-bold text-blue-600">$249.99</span>
249
+ <button class="btn-hover bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-4 rounded-full">
250
+ Add to Cart <i class="fas fa-shopping-cart ml-1"></i>
251
+ </button>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Product 4 -->
257
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden">
258
+ <div class="relative h-64">
259
+ <img src="https://placehold.co/300x300/3B82F6/FFFFFF?text=Headphones" alt="Product" class="w-full h-full object-cover">
260
+ </div>
261
+ <div class="p-6">
262
+ <div class="flex items-center mb-2">
263
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
264
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
265
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
266
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
267
+ <i class="fas fa-star-half-alt text-yellow-400 mr-2"></i>
268
+ <span class="text-gray-500 text-sm">4.6 (183)</span>
269
+ </div>
270
+ <h3 class="text-lg font-semibold text-gray-900">Noise Canceling Headset</h3>
271
+ <p class="text-gray-500 text-sm mt-1">Over-ear, 30h Battery</p>
272
+ <div class="mt-4 flex justify-between items-center">
273
+ <span class="text-lg font-bold text-blue-600">$179.99</span>
274
+ <button class="btn-hover bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-4 rounded-full">
275
+ Add to Cart <i class="fas fa-shopping-cart ml-1"></i>
276
+ </button>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="mt-12 text-center">
283
+ <button class="btn-hover bg-white border-2 border-blue-600 text-blue-600 hover:bg-blue-50 font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
284
+ View All Products <i class="fas fa-arrow-right ml-2"></i>
285
+ </button>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <!-- Categories Section -->
291
+ <section class="py-16 bg-gray-100">
292
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
293
+ <div class="text-center mb-12">
294
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
295
+ Shop by Category
296
+ </h2>
297
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
298
+ Explore our wide range of electronics categories
299
+ </p>
300
+ </div>
301
+
302
+ <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 mt-10">
303
+ <!-- Category 1 -->
304
+ <a href="#" class="category-card bg-white rounded-xl shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105">
305
+ <div class="p-6 flex flex-col items-center">
306
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4">
307
+ <i class="fas fa-mobile-alt text-blue-600 text-2xl"></i>
308
+ </div>
309
+ <h3 class="text-lg font-medium text-gray-900">Smartphones</h3>
310
+ <p class="text-gray-500 text-sm mt-1">Latest models</p>
311
+ </div>
312
+ </a>
313
+
314
+ <!-- Category 2 -->
315
+ <a href="#" class="category-card bg-white rounded-xl shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105">
316
+ <div class="p-6 flex flex-col items-center">
317
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4">
318
+ <i class="fas fa-laptop text-blue-600 text-2xl"></i>
319
+ </div>
320
+ <h3 class="text-lg font-medium text-gray-900">Laptops</h3>
321
+ <p class="text-gray-500 text-sm mt-1">Ultra performance</p>
322
+ </div>
323
+ </a>
324
+
325
+ <!-- Category 3 -->
326
+ <a href="#" class="category-card bg-white rounded-xl shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105">
327
+ <div class="p-6 flex flex-col items-center">
328
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4">
329
+ <i class="fas fa-clock text-blue-600 text-2xl"></i>
330
+ </div>
331
+ <h3 class="text-lg font-medium text-gray-900">Smart Watches</h3>
332
+ <p class="text-gray-500 text-sm mt-1">Track your health</p>
333
+ </div>
334
+ </a>
335
+
336
+ <!-- Category 4 -->
337
+ <a href="#" class="category-card bg-white rounded-xl shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105">
338
+ <div class="p-6 flex flex-col items-center">
339
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4">
340
+ <i class="fas fa-headphones text-blue-600 text-2xl"></i>
341
+ </div>
342
+ <h3 class="text-lg font-medium text-gray-900">Audio</h3>
343
+ <p class="text-gray-500 text-sm mt-1">Premium sound</p>
344
+ </div>
345
+ </a>
346
+
347
+ <!-- Category 5 -->
348
+ <a href="#" class="category-card bg-white rounded-xl shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105">
349
+ <div class="p-6 flex flex-col items-center">
350
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4">
351
+ <i class="fas fa-home text-blue-600 text-2xl"></i>
352
+ </div>
353
+ <h3 class="text-lg font-medium text-gray-900">Smart Home</h3>
354
+ <p class="text-gray-500 text-sm mt-1">Modern living</p>
355
+ </div>
356
+ </a>
357
+ </div>
358
+ </div>
359
+ </section>
360
+
361
+ <!-- Deals Section -->
362
+ <section class="py-16 bg-white">
363
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
364
+ <div class="text-center mb-12">
365
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
366
+ Hot Deals
367
+ </h2>
368
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
369
+ Limited time offers you don't want to miss
370
+ </p>
371
+ </div>
372
+
373
+ <div class="relative overflow-hidden">
374
+ <div class="flex space-x-6 pb-6 scroll-hide overflow-x-auto" id="deals-slider">
375
+ <!-- Deal 1 -->
376
+ <div class="flex-shrink-0 w-80 bg-blue-50 rounded-xl p-6 flex flex-col">
377
+ <div class="flex justify-between items-start">
378
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">30% OFF</span>
379
+ <div class="text-xs bg-white rounded-full px-3 py-1 font-medium">Ends in 2d 5h</div>
380
+ </div>
381
+ <img src="https://placehold.co/200x200/3B82F6/FFFFFF?text=Smart+TV" alt="Deal" class="mt-4 h-40 object-contain mx-auto">
382
+ <div class="mt-6">
383
+ <h3 class="font-bold text-lg">4K Smart TV</h3>
384
+ <p class="text-gray-500 text-sm mt-1">55" QLED, Smart Features</p>
385
+ <div class="mt-3">
386
+ <span class="text-lg font-bold text-blue-600">$699.99</span>
387
+ <span class="ml-2 text-sm text-gray-500 line-through">$999.99</span>
388
+ </div>
389
+ <button class="btn-hover w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-full">
390
+ Grab Deal <i class="fas fa-bolt ml-1"></i>
391
+ </button>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Deal 2 -->
396
+ <div class="flex-shrink-0 w-80 bg-orange-50 rounded-xl p-6 flex flex-col">
397
+ <div class="flex justify-between items-start">
398
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">25% OFF</span>
399
+ <div class="text-xs bg-white rounded-full px-3 py-1 font-medium">Ends in 1d 8h</div>
400
+ </div>
401
+ <img src="https://placehold.co/200x200/3B82F6/FFFFFF?text=Tablet" alt="Deal" class="mt-4 h-40 object-contain mx-auto">
402
+ <div class="mt-6">
403
+ <h3 class="font-bold text-lg">Pro Tablet</h3>
404
+ <p class="text-gray-500 text-sm mt-1">10.5", 128GB, Stylus</p>
405
+ <div class="mt-3">
406
+ <span class="text-lg font-bold text-blue-600">$449.99</span>
407
+ <span class="ml-2 text-sm text-gray-500 line-through">$599.99</span>
408
+ </div>
409
+ <button class="btn-hover w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-full">
410
+ Grab Deal <i class="fas fa-bolt ml-1"></i>
411
+ </button>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Deal 3 -->
416
+ <div class="flex-shrink-0 w-80 bg-purple-50 rounded-xl p-6 flex flex-col">
417
+ <div class="flex justify-between items-start">
418
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">40% OFF</span>
419
+ <div class="text-xs bg-white rounded-full px-3 py-1 font-medium">Ends in 3d 2h</div>
420
+ </div>
421
+ <img src="https://placehold.co/200x200/3B82F6/FFFFFF?text=Gaming" alt="Deal" class="mt-4 h-40 object-contain mx-auto">
422
+ <div class="mt-6">
423
+ <h3 class="font-bold text-lg">Gaming Console</h3>
424
+ <p class="text-gray-500 text-sm mt-1">Next-gen, 1TB SSD</p>
425
+ <div class="mt-3">
426
+ <span class="text-lg font-bold text-blue-600">$359.99</span>
427
+ <span class="ml-2 text-sm text-gray-500 line-through">$599.99</span>
428
+ </div>
429
+ <button class="btn-hover w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-full">
430
+ Grab Deal <i class="fas fa-bolt ml-1"></i>
431
+ </button>
432
+ </div>
433
+ </div>
434
+
435
+ <!-- Deal 4 -->
436
+ <div class="flex-shrink-0 w-80 bg-green-50 rounded-xl p-6 flex flex-col">
437
+ <div class="flex justify-between items-start">
438
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">15% OFF</span>
439
+ <div class="text-xs bg-white rounded-full px-3 py-1 font-medium">Ends in 5h</div>
440
+ </div>
441
+ <img src="https://placehold.co/200x200/3B82F6/FFFFFF?text=Powerbank" alt="Deal" class="mt-4 h-40 object-contain mx-auto">
442
+ <div class="mt-6">
443
+ <h3 class="font-bold text-lg">20,000mAh Powerbank</h3>
444
+ <p class="text-gray-500 text-sm mt-1">Fast Charge, 3 USB Ports</p>
445
+ <div class="mt-3">
446
+ <span class="text-lg font-bold text-blue-600">$42.49</span>
447
+ <span class="ml-2 text-sm text-gray-500 line-through">$49.99</span>
448
+ </div>
449
+ <button class="btn-hover w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-full">
450
+ Grab Deal <i class="fas fa-bolt ml-1"></i>
451
+ </button>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </section>
458
+
459
+ <!-- Newsletter -->
460
+ <section class="py-16 bg-blue-600">
461
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
462
+ <div class="bg-white rounded-xl shadow-xl p-8 md:p-12">
463
+ <div class="md:flex items-center justify-between">
464
+ <div class="md:w-1/2 mb-6 md:mb-0">
465
+ <h3 class="text-2xl font-bold text-gray-900">Stay Updated</h3>
466
+ <p class="text-gray-600 mt-2">Subscribe to our newsletter for the latest tech news, product releases, and exclusive deals.</p>
467
+ </div>
468
+ <div class="md:w-1/2">
469
+ <form class="flex flex-col sm:flex-row gap-2">
470
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
471
+ <button type="submit" class="btn-hover bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg whitespace-nowrap">
472
+ Subscribe <i class="fas fa-paper-plane ml-2"></i>
473
+ </button>
474
+ </form>
475
+ <p class="text-xs text-gray-500 mt-2">We respect your privacy. Unsubscribe at any time.</p>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </section>
481
+
482
+ <!-- Footer -->
483
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
484
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
485
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
486
+ <div>
487
+ <div class="flex items-center mb-4">
488
+ <i class="fas fa-bolt text-blue-500 text-2xl mr-2"></i>
489
+ <span class="text-xl font-bold">TechSlide</span>
490
+ </div>
491
+ <p class="text-gray-400 mb-4">Your one-stop shop for all the latest electronics and tech gadgets at competitive prices.</p>
492
+ <div class="flex space-x-4">
493
+ <a href="#" class="text-gray-400 hover:text-white">
494
+ <i class="fab fa-facebook-f"></i>
495
+ </a>
496
+ <a href="#" class="text-gray-400 hover:text-white">
497
+ <i class="fab fa-twitter"></i>
498
+ </a>
499
+ <a href="#" class="text-gray-400 hover:text-white">
500
+ <i class="fab fa-instagram"></i>
501
+ </a>
502
+ <a href="#" class="text-gray-400 hover:text-white">
503
+ <i class="fab fa-youtube"></i>
504
+ </a>
505
+ </div>
506
+ </div>
507
+
508
+ <div>
509
+ <h3 class="text-lg font-semibold mb-4">Shop</h3>
510
+ <ul class="space-y-2">
511
+ <li><a href="#" class="text-gray-400 hover:text-white">Smartphones</a></li>
512
+ <li><a href="#" class="text-gray-400 hover:text-white">Laptops</a></li>
513
+ <li><a href="#" class="text-gray-400 hover:text-white">Tablets</a></li>
514
+ <li><a href="#" class="text-gray-400 hover:text-white">Audio</a></li>
515
+ <li><a href="#" class="text-gray-400 hover:text-white">Smart Home</a></li>
516
+ </ul>
517
+ </div>
518
+
519
+ <div>
520
+ <h3 class="text-lg font-semibold mb-4">Help</h3>
521
+ <ul class="space-y-2">
522
+ <li><a href="#" class="text-gray-400 hover:text-white">Customer Service</a></li>
523
+ <li><a href="#" class="text-gray-400 hover:text-white">Track Order</a></li>
524
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns & Exchanges</a></li>
525
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping Info</a></li>
526
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
527
+ </ul>
528
+ </div>
529
+
530
+ <div>
531
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
532
+ <ul class="space-y-2">
533
+ <li class="flex items-center text-gray-400">
534
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
535
+ 123 Tech Street, Digital City
536
+ </li>
537
+ <li class="flex items-center text-gray-400">
538
+ <i class="fas fa-phone-alt mr-2 text-blue-500"></i>
539
+ +1 (555) 123-4567
540
+ </li>
541
+ <li class="flex items-center text-gray-400">
542
+ <i class="fas fa-envelope mr-2 text-blue-500"></i>
543
+ info@techslide.com
544
+ </li>
545
+ </ul>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
550
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
551
+ © 2023 TechSlide. All rights reserved.
552
+ </p>
553
+ <div class="flex space-x-6">
554
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
555
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
556
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Cookies</a>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </footer>
561
+
562
+ <script>
563
+ // Mobile menu toggle
564
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
565
+ const mobileMenu = document.getElementById('mobile-menu');
566
+
567
+ mobileMenuButton.addEventListener('click', () => {
568
+ mobileMenu.classList.toggle('hidden');
569
+ });
570
+
571
+ // Hero slider
572
+ const slider = document.getElementById('slider');
573
+ const prevButton = document.getElementById('prev');
574
+ const nextButton = document.getElementById('next');
575
+ const indicators = document.querySelectorAll('.slider-indicator');
576
+
577
+ let currentSlide = 0;
578
+ const slideCount = document.querySelectorAll('.slide').length;
579
+
580
+ function updateSlider() {
581
+ slider.style.transform = `translateX(-${currentSlide * 100}%)`;
582
+
583
+ // Update indicators
584
+ indicators.forEach((indicator, index) => {
585
+ if (index === currentSlide) {
586
+ indicator.classList.remove('bg-opacity-50');
587
+ indicator.classList.add('bg-opacity-100');
588
+ } else {
589
+ indicator.classList.add('bg-opacity-50');
590
+ indicator.classList.remove('bg-opacity-100');
591
+ }
592
+ });
593
+ }
594
+
595
+ function nextSlide() {
596
+ currentSlide = (currentSlide + 1) % slideCount;
597
+ updateSlider();
598
+ }
599
+
600
+ function prevSlide() {
601
+ currentSlide = (currentSlide - 1 + slideCount) % slideCount;
602
+ updateSlider();
603
+ }
604
+
605
+ nextButton.addEventListener('click', nextSlide);
606
+ prevButton.addEventListener('click', prevSlide);
607
+
608
+ // Auto slide
609
+ let slideInterval = setInterval(nextSlide, 5000);
610
+
611
+ // Pause on hover
612
+ slider.addEventListener('mouseenter', () => {
613
+ clearInterval(slideInterval);
614
+ });
615
+
616
+ slider.addEventListener('mouseleave', () => {
617
+ slideInterval = setInterval(nextSlide, 5000);
618
+ });
619
+
620
+ // Indicators click
621
+ indicators.forEach(indicator => {
622
+ indicator.addEventListener('click', () => {
623
+ currentSlide = parseInt(indicator.getAttribute('data-index'));
624
+ updateSlider();
625
+ });
626
+ });
627
+
628
+ // Deals slider horizontal scroll
629
+ const dealsSlider = document.getElementById('deals-slider');
630
+ let isDown = false;
631
+ let startX;
632
+ let scrollLeft;
633
+
634
+ dealsSlider.addEventListener('mousedown', (e) => {
635
+ isDown = true;
636
+ startX = e.pageX - dealsSlider.offsetLeft;
637
+ scrollLeft = dealsSlider.scrollLeft;
638
+ dealsSlider.style.cursor = 'grabbing';
639
+ });
640
+
641
+ dealsSlider.addEventListener('mouseleave', () => {
642
+ isDown = false;
643
+ dealsSlider.style.cursor = 'grab';
644
+ });
645
+
646
+ dealsSlider.addEventListener('mouseup', () => {
647
+ isDown = false;
648
+ dealsSlider.style.cursor = 'grab';
649
+ });
650
+
651
+ dealsSlider.addEventListener('mousemove', (e) => {
652
+ if(!isDown) return;
653
+ e.preventDefault();
654
+ const x = e.pageX - dealsSlider.offsetLeft;
655
+ const walk = (x - startX) * 2;
656
+ dealsSlider.scrollLeft = scrollLeft - walk;
657
+ });
658
+
659
+ // Touch support for deals slider
660
+ dealsSlider.addEventListener('touchstart', (e) => {
661
+ isDown = true;
662
+ startX = e.touches[0].pageX - dealsSlider.offsetLeft;
663
+ scrollLeft = dealsSlider.scrollLeft;
664
+ }, {passive: true});
665
+
666
+ dealsSlider.addEventListener('touchend', () => {
667
+ isDown = false;
668
+ });
669
+
670
+ dealsSlider.addEventListener('touchmove', (e) => {
671
+ if(!isDown) return;
672
+ const x = e.touches[0].pageX - dealsSlider.offsetLeft;
673
+ const walk = (x - startX) * 2;
674
+ dealsSlider.scrollLeft = scrollLeft - walk;
675
+ }, {passive: true});
676
+
677
+ // Scroll reveal animation
678
+ function animateOnScroll() {
679
+ const elements = document.querySelectorAll('.product-card, .category-card');
680
+
681
+ elements.forEach(element => {
682
+ const elementPosition = element.getBoundingClientRect().top;
683
+ const screenPosition = window.innerHeight / 1.3;
684
+
685
+ if(elementPosition < screenPosition) {
686
+ element.style.opacity = '1';
687
+ element.style.transform = 'translateY(0)';
688
+ }
689
+ });
690
+ }
691
+
692
+ // Set initial styles for animation
693
+ document.querySelectorAll('.product-card, .category-card').forEach(element => {
694
+ element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
695
+ element.style.opacity = '0';
696
+ element.style.transform = 'translateY(20px)';
697
+ });
698
+
699
+ window.addEventListener('scroll', animateOnScroll);
700
+ window.addEventListener('load', animateOnScroll);
701
+ </script>
702
+ <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=dueyrjw/the-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
703
+ </html>
prompts.txt ADDED
File without changes