Hugging Face's logo

Spaces:
greatisiw92
/
okppp
Running

App Files Community
greatisiw92 commited on
Commit
7785007
·
verified ·
1 Parent(s): d9c06f1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1005 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Okppp
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: okppp
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
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,1005 @@
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>Pawfect Accents | Premium Dog Accessories</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
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ scroll-behavior: smooth;
14
+ overflow-x: hidden;
15
+ }
16
+
17
+ .text-outline {
18
+ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
19
+ }
20
+
21
+ .animate-fade-in {
22
+ animation: fadeIn 1s ease-in-out forwards;
23
+ }
24
+
25
+ .animate-slide-up {
26
+ animation: slideUp 0.8s ease forwards;
27
+ }
28
+
29
+ .animate-slide-right {
30
+ animation: slideRight 0.8s ease forwards;
31
+ }
32
+
33
+ .animate-pop {
34
+ animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
35
+ }
36
+
37
+ .nav-link:hover::after {
38
+ width: 100%;
39
+ }
40
+
41
+ .nav-link::after {
42
+ content: '';
43
+ display: block;
44
+ width: 0;
45
+ height: 1px;
46
+ background: black;
47
+ transition: width .3s;
48
+ }
49
+
50
+ .product-card:hover {
51
+ transform: translateY(-10px);
52
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
53
+ }
54
+
55
+ .newsletter-input:focus {
56
+ outline: none;
57
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
58
+ }
59
+
60
+ .cart-count {
61
+ top: -8px;
62
+ right: -8px;
63
+ width: 20px;
64
+ height: 20px;
65
+ font-size: 12px;
66
+ }
67
+
68
+ .gradient-overlay {
69
+ background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
70
+ }
71
+
72
+ .hover\:scale-103:hover {
73
+ transform: scale(1.03);
74
+ }
75
+
76
+ .delay-100 {
77
+ animation-delay: 0.1s;
78
+ }
79
+
80
+ .delay-200 {
81
+ animation-delay: 0.2s;
82
+ }
83
+
84
+ .delay-300 {
85
+ animation-delay: 0.3s;
86
+ }
87
+
88
+ .delay-400 {
89
+ animation-delay: 0.4s;
90
+ }
91
+
92
+ @keyframes fadeIn {
93
+ from { opacity: 0; }
94
+ to { opacity: 1; }
95
+ }
96
+
97
+ @keyframes slideUp {
98
+ from { transform: translateY(50px); opacity: 0; }
99
+ to { transform: translateY(0); opacity: 1; }
100
+ }
101
+
102
+ @keyframes slideRight {
103
+ from { transform: translateX(50px); opacity: 0; }
104
+ to { transform: translateX(0); opacity: 1; }
105
+ }
106
+
107
+ @keyframes popIn {
108
+ 0% { transform: scale(0.5); opacity: 0; }
109
+ 80% { transform: scale(1.05); opacity: 0.8; }
110
+ 100% { transform: scale(1); opacity: 1; }
111
+ }
112
+
113
+ .blob {
114
+ position: absolute;
115
+ width: 300px;
116
+ height: 300px;
117
+ background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
118
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
119
+ filter: blur(30px);
120
+ z-index: -1;
121
+ }
122
+
123
+ .blob-1 {
124
+ top: -50px;
125
+ left: -50px;
126
+ }
127
+
128
+ .blob-2 {
129
+ bottom: -50px;
130
+ right: -50px;
131
+ }
132
+
133
+ /* Hide scrollbar but allow scrolling */
134
+ #cartItems::-webkit-scrollbar {
135
+ display: none;
136
+ }
137
+
138
+ #cartItems {
139
+ -ms-overflow-style: none;
140
+ scrollbar-width: none;
141
+ }
142
+
143
+ [data-scroll] {
144
+ opacity: 0;
145
+ will-change: transform, opacity;
146
+ }
147
+ </style>
148
+ </head>
149
+ <body class="bg-white text-black antialiased">
150
+ <!-- Navigation -->
151
+ <nav class="fixed w-full bg-white z-50 border-b border-gray-100 shadow-sm">
152
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
153
+ <a href="#" class="text-2xl font-black tracking-tight">PAWFECT<span class="font-light">ACCENTS</span></a>
154
+
155
+ <div class="hidden md:flex space-x-8">
156
+ <a href="#shop" class="nav-link text-sm font-medium uppercase tracking-wider">SHOP</a>
157
+ <a href="#collections" class="nav-link text-sm font-medium uppercase tracking-wider">COLLECTIONS</a>
158
+ <a href="#about" class="nav-link text-sm font-medium uppercase tracking-wider">ABOUT</a>
159
+ <a href="#contact" class="nav-link text-sm font-medium uppercase tracking-wider">CONTACT</a>
160
+ </div>
161
+
162
+ <div class="flex items-center space-x-4">
163
+ <button class="p-2 hover:text-gray-600 transition">
164
+ <i class="fas fa-search"></i>
165
+ </button>
166
+ <button class="p-2 relative" onclick="toggleCart()">
167
+ <i class="fas fa-shopping-bag"></i>
168
+ <span id="cartCounter" class="cart-count absolute bg-black text-white rounded-full flex items-center justify-center hidden">0</span>
169
+ </button>
170
+ <button class="md:hidden p-2" onclick="toggleMobileMenu()">
171
+ <i class="fas fa-bars"></i>
172
+ </button>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Mobile Menu -->
177
+ <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-100 px-6 py-4 space-y-4">
178
+ <a href="#shop" class="block text-sm font-medium uppercase tracking-wider" onclick="toggleMobileMenu()">SHOP</a>
179
+ <a href="#collections" class="block text-sm font-medium uppercase tracking-wider" onclick="toggleMobileMenu()">COLLECTIONS</a>
180
+ <a href="#about" class="block text-sm font-medium uppercase tracking-wider" onclick="toggleMobileMenu()">ABOUT</a>
181
+ <a href="#contact" class="block text-sm font-medium uppercase tracking-wider" onclick="toggleMobileMenu()">CONTACT</a>
182
+ </div>
183
+ </nav>
184
+
185
+ <!-- Hero Section -->
186
+ <section class="relative h-screen min-h-[600px] flex items-center overflow-hidden pt-16">
187
+ <div class="absolute inset-0 bg-black/30 z-0"></div>
188
+ <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2560&q=80"
189
+ alt="Dog with stylish accessory"
190
+ class="absolute inset-0 w-full h-full object-cover object-center z-0">
191
+
192
+ <div class="relative z-10 max-w-7xl mx-auto px-6 w-full">
193
+ <div class="lg:w-1/2 text-white space-y-8" data-scroll>
194
+ <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black leading-tight animate-slide-up delay-100">
195
+ ELEVATE YOUR <span class="italic">DOG'S</span> STYLE
196
+ </h1>
197
+ <p class="text-lg sm:text-xl lg:text-2xl text-gray-200 animate-slide-up delay-200">
198
+ Minimalist accessories for the modern pup. Handcrafted with premium materials and timeless design.
199
+ </p>
200
+ <div class="flex flex-wrap gap-4 animate-slide-up delay-300">
201
+ <a href="#shop" class="bg-white text-black px-8 py-3 font-bold hover:bg-gray-100 transition transform hover:scale-103 shadow-lg">
202
+ SHOP NOW
203
+ </a>
204
+ <a href="#collections" class="border-2 border-white px-8 py-3 font-bold hover:bg-white/10 transition transform hover:scale-103">
205
+ COLLECTIONS
206
+ </a>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Scroll indicator -->
212
+ <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 animate-fade-in delay-400">
213
+ <a href="#shop" class="block animate-bounce">
214
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white w-8 h-8">
215
+ <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
216
+ </svg>
217
+ </a>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Shop Section -->
222
+ <section id="shop" class="py-20 px-6 bg-gray-50">
223
+ <div class="max-w-7xl mx-auto">
224
+ <div class="text-center mb-16" data-scroll>
225
+ <h2 class="text-3xl sm:text-4xl font-black mb-4 animate-slide-up">CURATED SELECTIONS</h2>
226
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg animate-slide-up delay-100">
227
+ Discover our carefully crafted collections featuring the finest materials and minimalist design.
228
+ </p>
229
+ </div>
230
+
231
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8" data-scroll>
232
+ <!-- Product 1 -->
233
+ <div class="product-card bg-white rounded-lg overflow-hidden transition duration-500 hover:shadow-xl animate-pop delay-100">
234
+ <div class="relative overflow-hidden group">
235
+ <img src="https://images.unsplash.com/photo-1551238369-c86baf7c06aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80"
236
+ alt="Leather dog collar"
237
+ class="w-full h-72 sm:h-80 object-cover transition duration-500 group-hover:scale-110">
238
+ <div class="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition"></div>
239
+ <button class="absolute top-4 right-4 bg-white rounded-full p-2 hover:bg-gray-100 transition opacity-0 group-hover:opacity-100">
240
+ <i class="far fa-heart"></i>
241
+ </button>
242
+ <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white text-black px-4 py-2 rounded-full font-medium opacity-0 group-hover:opacity-100 transition hover:bg-gray-100"
243
+ onclick="addToCart('Minimal Leather Collar', 48)">
244
+ ADD TO CART
245
+ </button>
246
+ </div>
247
+ <div class="p-5">
248
+ <h3 class="font-bold text-lg mb-1">Minimal Leather Collar</h3>
249
+ <p class="text-gray-600 text-sm mb-3">Black / Small</p>
250
+ <div class="flex justify-between items-center">
251
+ <span class="font-bold text-lg">$48.00</span>
252
+ <button class="text-sm font-semibold underline hover:no-underline" onclick="addToCart('Minimal Leather Collar', 48)">
253
+ QUICK ADD
254
+ </button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Product 2 -->
260
+ <div class="product-card bg-white rounded-lg overflow-hidden transition duration-500 hover:shadow-xl animate-pop delay-200">
261
+ <div class="relative overflow-hidden group">
262
+ <img src="https://images.unsplash.com/photo-1612195583950-b8fd34c87093?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
263
+ alt="Dog leash"
264
+ class="w-full h-72 sm:h-80 object-cover transition duration-500 group-hover:scale-110">
265
+ <div class="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition"></div>
266
+ <button class="absolute top-4 right-4 bg-white rounded-full p-2 hover:bg-gray-100 transition opacity-0 group-hover:opacity-100">
267
+ <i class="far fa-heart"></i>
268
+ </button>
269
+ <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white text-black px-4 py-2 rounded-full font-medium opacity-0 group-hover:opacity-100 transition hover:bg-gray-100"
270
+ onclick="addToCart('Braided Rope Leash', 38)">
271
+ ADD TO CART
272
+ </button>
273
+ </div>
274
+ <div class="p-5">
275
+ <h3 class="font-bold text-lg mb-1">Braided Rope Leash</h3>
276
+ <p class="text-gray-600 text-sm mb-3">Natural / 6ft</p>
277
+ <div class="flex justify-between items-center">
278
+ <span class="font-bold text-lg">$38.00</span>
279
+ <button class="text-sm font-semibold underline hover:no-underline" onclick="addToCart('Braided Rope Leash', 38)">
280
+ QUICK ADD
281
+ </button>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Product 3 -->
287
+ <div class="product-card bg-white rounded-lg overflow-hidden transition duration-500 hover:shadow-xl animate-pop delay-300">
288
+ <div class="relative overflow-hidden group">
289
+ <img src="https://images.unsplash.com/photo-1594145077356-fbc364e71953?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80"
290
+ alt="Dog bed"
291
+ class="w-full h-72 sm:h-80 object-cover transition duration-500 group-hover:scale-110">
292
+ <div class="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition"></div>
293
+ <button class="absolute top-4 right-4 bg-white rounded-full p-2 hover:bg-gray-100 transition opacity-0 group-hover:opacity-100">
294
+ <i class="far fa-heart"></i>
295
+ </button>
296
+ <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white text-black px-4 py-2 rounded-full font-medium opacity-0 group-hover:opacity-100 transition hover:bg-gray-100"
297
+ onclick="addToCart('Organic Cotton Bed', 120)">
298
+ ADD TO CART
299
+ </button>
300
+ </div>
301
+ <div class="p-5">
302
+ <h3 class="font-bold text-lg mb-1">Organic Cotton Bed</h3>
303
+ <p class="text-gray-600 text-sm mb-3">Medium</p>
304
+ <div class="flex justify-between items-center">
305
+ <span class="font-bold text-lg">$120.00</span>
306
+ <button class="text-sm font-semibold underline hover:no-underline" onclick="addToCart('Organic Cotton Bed', 120)">
307
+ QUICK ADD
308
+ </button>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Product 4 -->
314
+ <div class="product-card bg-white rounded-lg overflow-hidden transition duration-500 hover:shadow-xl animate-pop delay-400">
315
+ <div class="relative overflow-hidden group">
316
+ <img src="https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
317
+ alt="Dog bowtie"
318
+ class="w-full h-72 sm:h-80 object-cover transition duration-500 group-hover:scale-110">
319
+ <div class="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition"></div>
320
+ <button class="absolute top-4 right-4 bg-white rounded-full p-2 hover:bg-gray-100 transition opacity-0 group-hover:opacity-100">
321
+ <i class="far fa-heart"></i>
322
+ </button>
323
+ <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white text-black px-4 py-2 rounded-full font-medium opacity-0 group-hover:opacity-100 transition hover:bg-gray-100"
324
+ onclick="addToCart('Classic Bow Tie', 22)">
325
+ ADD TO CART
326
+ </button>
327
+ </div>
328
+ <div class="p-5">
329
+ <h3 class="font-bold text-lg mb-1">Classic Bow Tie</h3>
330
+ <p class="text-gray-600 text-sm mb-3">Black</p>
331
+ <div class="flex justify-between items-center">
332
+ <span class="font-bold text-lg">$22.00</span>
333
+ <button class="text-sm font-semibold underline hover:no-underline" onclick="addToCart('Classic Bow Tie', 22)">
334
+ QUICK ADD
335
+ </button>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="text-center mt-16" data-scroll>
342
+ <a href="#" class="inline-block border-2 border-black px-8 py-3 font-bold hover:bg-gray-100 transition transform hover:scale-105">
343
+ VIEW ALL PRODUCTS
344
+ </a>
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- Collections Section -->
350
+ <section id="collections" class="py-20 px-6 bg-white">
351
+ <div class="max-w-7xl mx-auto">
352
+ <div class="text-center mb-16" data-scroll>
353
+ <h2 class="text-3xl sm:text-4xl font-black mb-4">SHOP BY COLLECTION</h2>
354
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">
355
+ Explore our signature collections designed for every occasion and lifestyle.
356
+ </p>
357
+ </div>
358
+
359
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" data-scroll>
360
+ <!-- Collection 1 -->
361
+ <div class="relative group overflow-hidden rounded-xl h-[400px] sm:h-[450px] hover:shadow-xl transition duration-500 animate-pop delay-100">
362
+ <img src="https://images.unsplash.com/photo-1561758033-d89a9ad46330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
363
+ alt="Everyday essentials collection"
364
+ class="w-full h-full object-cover transition duration-700 group-hover:scale-110">
365
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex flex-col justify-end p-8">
366
+ <div class="text-white transform translate-y-10 group-hover:translate-y-0 transition duration-500">
367
+ <h3 class="text-2xl font-bold mb-2">Everyday Essentials</h3>
368
+ <p class="mb-6 text-gray-300">Functional accessories for daily adventures</p>
369
+ <a href="#" class="inline-flex items-center space-x-2 border-b border-white pb-1 text-sm font-medium hover:opacity-80">
370
+ <span>SHOP COLLECTION</span>
371
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
372
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
373
+ </svg>
374
+ </a>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Collection 2 -->
380
+ <div class="relative group overflow-hidden rounded-xl h-[400px] sm:h-[450px] hover:shadow-xl transition duration-500 animate-pop delay-200">
381
+ <img src="https://images.unsplash.com/photo-1601871925712-2c2bb78a3e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
382
+ alt="Luxury line collection"
383
+ class="w-full h-full object-cover transition duration-700 group-hover:scale-110">
384
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex flex-col justify-end p-8">
385
+ <div class="text-white transform translate-y-10 group-hover:translate-y-0 transition duration-500">
386
+ <h3 class="text-2xl font-bold mb-2">Luxury Line</h3>
387
+ <p class="mb-6 text-gray-300">Premium materials for the discerning pup</p>
388
+ <a href="#" class="inline-flex items-center space-x-2 border-b border-white pb-1 text-sm font-medium hover:opacity-80">
389
+ <span>SHOP COLLECTION</span>
390
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
391
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
392
+ </svg>
393
+ </a>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Collection 3 -->
399
+ <div class="relative group overflow-hidden rounded-xl h-[400px] sm:h-[450px] hover:shadow-xl transition duration-500 animate-pop delay-300">
400
+ <img src="https://images.unsplash.com/photo-1579445710183-f9a816f5da17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80"
401
+ alt="Seasonal selection collection"
402
+ class="w-full h-full object-cover transition duration-700 group-hover:scale-110">
403
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex flex-col justify-end p-8">
404
+ <div class="text-white transform translate-y-10 group-hover:translate-y-0 transition duration-500">
405
+ <h3 class="text-2xl font-bold mb-2">Seasonal Selection</h3>
406
+ <p class="mb-6 text-gray-300">Limited edition pieces for every season</p>
407
+ <a href="#" class="inline-flex items-center space-x-2 border-b border-white pb-1 text-sm font-medium hover:opacity-80">
408
+ <span>SHOP COLLECTION</span>
409
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
410
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
411
+ </svg>
412
+ </a>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </section>
419
+
420
+ <!-- About Section -->
421
+ <section id="about" class="relative py-24 px-6 bg-gray-50 overflow-hidden">
422
+ <div class="blob blob-1"></div>
423
+ <div class="blob blob-2"></div>
424
+
425
+ <div class="max-w-7xl mx-auto relative">
426
+ <div class="grid md:grid-cols-2 gap-12 items-center" data-scroll>
427
+ <div class="animate-slide-right">
428
+ <h2 class="text-3xl sm:text-4xl font-black mb-8">OUR STORY</h2>
429
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">Founded in 2015, Pawfect Accents began with a simple vision: to create tasteful, high-quality accessories for dogs who deserve more than the ordinary.</p>
430
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">Every piece in our collection reflects our commitment to minimalism, sustainability, and thoughtful design. We work with artisans who share our values, using only premium materials that stand the test of time.</p>
431
+ <p class="text-gray-600 mb-8 text-lg leading-relaxed">Because your dog isn't just a pet—they're family.</p>
432
+ <a href="#" class="inline-flex items-center space-x-2 border-b border-black font-medium text-lg hover:opacity-80">
433
+ <span>LEARN MORE</span>
434
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
435
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
436
+ </svg>
437
+ </a>
438
+ </div>
439
+ <div class="grid grid-cols-2 gap-4 sm:gap-6">
440
+ <div class="rounded-xl overflow-hidden h-64 animate-pop delay-100">
441
+ <img src="https://images.unsplash.com/photo-1583511666445-775f1f2116f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
442
+ alt="Dog with accessory"
443
+ class="w-full h-full object-cover hover:scale-105 transition duration-700">
444
+ </div>
445
+ <div class="rounded-xl overflow-hidden h-64 animate-pop delay-200">
446
+ <img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=689&q=80"
447
+ alt="Dog accessories"
448
+ class="w-full h-full object-cover hover:scale-105 transition duration-700">
449
+ </div>
450
+ <div class="rounded-xl overflow-hidden col-span-2 h-80 animate-pop delay-300">
451
+ <img src="https://images.unsplash.com/photo-1516734212186-a967f81ad0d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80"
452
+ alt="Dog with owner"
453
+ class="w-full h-full object-cover hover:scale-105 transition duration-700">
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </section>
459
+
460
+ <!-- Testimonials -->
461
+ <section class="py-20 px-6 bg-white">
462
+ <div class="max-w-7xl mx-auto">
463
+ <div class="text-center mb-16" data-scroll>
464
+ <h2 class="text-3xl sm:text-4xl font-black mb-4">TRUSTED BY PUP PARENTS</h2>
465
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">
466
+ Don't just take our word for it. Here's what our furry friends and their humans have to say.
467
+ </p>
468
+ </div>
469
+
470
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8" data-scroll>
471
+ <!-- Testimonial 1 -->
472
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300 animate-pop delay-100">
473
+ <div class="flex items-center mb-4">
474
+ <div class="text-yellow-400 text-lg mr-2">
475
+ <i class="fas fa-star"></i>
476
+ <i class="fas fa-star"></i>
477
+ <i class="fas fa-star"></i>
478
+ <i class="fas fa-star"></i>
479
+ <i class="fas fa-star"></i>
480
+ </div>
481
+ </div>
482
+ <p class="text-gray-600 mb-6 italic">"The leather collar has held up beautifully after months of daily walks and lake swims. The quality is apparent in every stitch."</p>
483
+ <div class="flex items-center">
484
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
485
+ <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Sarah J." class="w-full h-full object-cover">
486
+ </div>
487
+ <div>
488
+ <h4 class="font-bold">Sarah J.</h4>
489
+ <p class="text-xs text-gray-500">Golden Retriever Mom</p>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- Testimonial 2 -->
495
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300 animate-pop delay-200">
496
+ <div class="flex items-center mb-4">
497
+ <div class="text-yellow-400 text-lg mr-2">
498
+ <i class="fas fa-star"></i>
499
+ <i class="fas fa-star"></i>
500
+ <i class="fas fa-star"></i>
501
+ <i class="fas fa-star"></i>
502
+ <i class="fas fa-star"></i>
503
+ </div>
504
+ </div>
505
+ <p class="text-gray-600 mb-6 italic">"Finally found accessories that match my minimalist aesthetic while being durable enough for my active shepherd."</p>
506
+ <div class="flex items-center">
507
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
508
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover">
509
+ </div>
510
+ <div>
511
+ <h4 class="font-bold">Michael T.</h4>
512
+ <p class="text-xs text-gray-500">German Shepherd Dad</p>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Testimonial 3 -->
518
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300 animate-pop delay-300">
519
+ <div class="flex items-center mb-4">
520
+ <div class="text-yellow-400 text-lg mr-2">
521
+ <i class="fas fa-star"></i>
522
+ <i class="fas fa-star"></i>
523
+ <i class="fas fa-star"></i>
524
+ <i class="fas fa-star"></i>
525
+ <i class="fas fa-star-half-alt"></i>
526
+ </div>
527
+ </div>
528
+ <p class="text-gray-600 mb-6 italic">"The organic cotton bed is the only place my rescue pup will sleep now. Worth every penny for the comfort and sustainability."</p>
529
+ <div class="flex items-center">
530
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
531
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa C." class="w-full h-full object-cover">
532
+ </div>
533
+ <div>
534
+ <h4 class="font-bold">Lisa C.</h4>
535
+ <p class="text-xs text-gray-500">Rescue Dog Advocate</p>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </section>
542
+
543
+ <!-- Newsletter -->
544
+ <section class="py-20 px-6 bg-black text-white">
545
+ <div class="max-w-4xl mx-auto text-center" data-scroll>
546
+ <h2 class="text-3xl sm:text-4xl font-black mb-4">JOIN THE PACK</h2>
547
+ <p class="text-gray-300 mb-8 max-w-2xl mx-auto text-lg">
548
+ Subscribe for exclusive updates, early access to new collections, and special offers just for our subscribers.
549
+ </p>
550
+
551
+ <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto animate-fade-in">
552
+ <input type="email"
553
+ placeholder="Enter your email"
554
+ class="newsletter-input flex-grow px-6 py-4 rounded-lg text-black focus:ring-2 focus:ring-white"
555
+ required>
556
+ <button type="submit" class="bg-white text-black px-8 py-4 font-bold rounded-lg hover:bg-gray-200 transition transform hover:scale-105">
557
+ SUBSCRIBE
558
+ </button>
559
+ </form>
560
+ </div>
561
+ </section>
562
+
563
+ <!-- Footer -->
564
+ <footer id="contact" class="py-16 px-6 bg-gray-100">
565
+ <div class="max-w-7xl mx-auto">
566
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
567
+ <div data-scroll>
568
+ <h3 class="text-xl font-black mb-6">PAWFECT ACCENTS</h3>
569
+ <p class="text-gray-600 mb-6">Minimalist accessories for the modern pup.</p>
570
+ <div class="flex space-x-4">
571
+ <a href="#" class="w-10 h-10 rounded-full bg-white flex items-center justify-center hover:bg-gray-200 transition">
572
+ <i class="fab fa-instagram"></i>
573
+ </a>
574
+ <a href="#" class="w-10 h-10 rounded-full bg-white flex items-center justify-center hover:bg-gray-200 transition">
575
+ <i class="fab fa-facebook-f"></i>
576
+ </a>
577
+ <a href="#" class="w-10 h-10 rounded-full bg-white flex items-center justify-center hover:bg-gray-200 transition">
578
+ <i class="fab fa-pinterest-p"></i>
579
+ </a>
580
+ <a href="#" class="w-10 h-10 rounded-full bg-white flex items-center justify-center hover:bg-gray-200 transition">
581
+ <i class="fab fa-twitter"></i>
582
+ </a>
583
+ </div>
584
+ </div>
585
+
586
+ <div data-scroll>
587
+ <h4 class="font-bold text-lg mb-6 uppercase tracking-wider">SHOP</h4>
588
+ <ul class="space-y-3">
589
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">Leashes & Collars</a></li>
590
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">Beds & Blankets</a></li>
591
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">Bow Ties & Bandanas</a></li>
592
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">New Arrivals</a></li>
593
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">Best Sellers</a></li>
594
+ </ul>
595
+ </div>
596
+
597
+ <div data-scroll>
598
+ <h4 class="font-bold text-lg mb-6 uppercase tracking-wider">ABOUT</h4>
599
+ <ul class="space-y-3">
600
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">Our Story</a></li>
601
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">Sustainability</a></li>
602
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">Materials</a></li>
603
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">Reviews</a></li>
604
+ <li><a href="#" class="text-gray-600 hover:underline hover:text-black">FAQ</a></li>
605
+ </ul>
606
+ </div>
607
+
608
+ <div data-scroll>
609
+ <h4 class="font-bold text-lg mb-6 uppercase tracking-wider">CONTACT</h4>
610
+ <ul class="space-y-3">
611
+ <li class="text-gray-600 flex items-start">
612
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i>
613
+ <span>123 Pup Street<br>New York, NY 10001</span>
614
+ </li>
615
+ <li class="text-gray-600 flex items-center">
616
+ <i class="fas fa-phone-alt mr-3 text-gray-400"></i>
617
+ <span>(123) 456-7890</span>
618
+ </li>
619
+ <li class="text-gray-600 flex items-center">
620
+ <i class="fas fa-envelope mr-3 text-gray-400"></i>
621
+ <span>[email protected]</span>
622
+ </li>
623
+ </ul>
624
+ </div>
625
+ </div>
626
+
627
+ <div class="border-t border-gray-300 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center" data-scroll>
628
+ <p class="text-gray-600 mb-4 md:mb-0">© 2023 Pawfect Accents. All rights reserved.</p>
629
+ <div class="flex space-x-6">
630
+ <a href="#" class="text-gray-600 hover:underline hover:text-black">Privacy Policy</a>
631
+ <a href="#" class="text-gray-600 hover:underline hover:text-black">Terms of Service</a>
632
+ <a href="#" class="text-gray-600 hover:underline hover:text-black">Shipping & Returns</a>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </footer>
637
+
638
+ <!-- Shopping Cart -->
639
+ <div id="cartOverlay" class="fixed inset-0 bg-black/50 z-50 hidden" onclick="toggleCart()"></div>
640
+ <div id="cartDrawer" class="fixed top-0 right-0 w-full sm:w-[420px] h-full bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50">
641
+ <div class="h-full flex flex-col">
642
+ <div class="p-6 border-b border-gray-200 flex justify-between items-center">
643
+ <h3 class="text-xl font-bold flex items-center">
644
+ <i class="fas fa-shopping-bag mr-2"></i>
645
+ YOUR CART (<span id="cartItemCount">0</span>)
646
+ </h3>
647
+ <button onclick="toggleCart()" class="p-2 hover:bg-gray-100 rounded-full">
648
+ <i class="fas fa-times"></i>
649
+ </button>
650
+ </div>
651
+
652
+ <div id="cartItems" class="flex-grow overflow-y-auto p-6">
653
+ <div id="emptyCart" class="text-center py-12">
654
+ <i class="fas fa-shopping-bag text-4xl text-gray-300 mb-4"></i>
655
+ <p class="text-gray-500 mb-6">Your cart is empty</p>
656
+ <a href="#shop" class="bg-black text-white px-6 py-3 rounded-lg font-medium inline-block hover:bg-gray-800" onclick="toggleCart()">
657
+ CONTINUE SHOPPING
658
+ </a>
659
+ </div>
660
+
661
+ <!-- Cart items will be added here -->
662
+ </div>
663
+
664
+ <div class="border-t border-gray-200 p-6">
665
+ <div class="flex justify-between items-center mb-4">
666
+ <span>Subtotal</span>
667
+ <span id="cartSubtotal" class="font-bold text-lg">$0.00</span>
668
+ </div>
669
+ <div class="flex justify-between items-center mb-4 text-sm text-gray-500">
670
+ <span>Shipping & taxes calculated at checkout</span>
671
+ </div>
672
+ <button id="checkoutBtn" class="w-full bg-black text-white py-4 font-bold rounded-lg hover:bg-gray-800 transition disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>
673
+ CHECKOUT - <span id="checkoutTotal">$0.00</span>
674
+ </button>
675
+ </div>
676
+ </div>
677
+ </div>
678
+
679
+ <!-- Loading spinner -->
680
+ <div id="loadingSpinner" class="fixed inset-0 bg-white/80 flex items-center justify-center z-100 hidden">
681
+ <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-black"></div>
682
+ </div>
683
+
684
+ <script>
685
+ // Initialize cart
686
+ let cart = JSON.parse(localStorage.getItem('cart')) || [];
687
+
688
+ // Mobile menu toggle
689
+ function toggleMobileMenu() {
690
+ const menu = document.getElementById('mobileMenu');
691
+ const overlay = document.getElementById('overlay');
692
+
693
+ menu.classList.toggle('hidden');
694
+ overlay.classList.toggle('hidden');
695
+ document.body.style.overflow = menu.classList.contains('hidden') ? '' : 'hidden';
696
+ }
697
+
698
+ // Cart toggle
699
+ function toggleCart() {
700
+ const cartDrawer = document.getElementById('cartDrawer');
701
+ const cartOverlay = document.getElementById('cartOverlay');
702
+
703
+ if (cartDrawer.style.transform === 'translateX(0px)' || !cartDrawer.style.transform) {
704
+ cartDrawer.style.transform = 'translateX(100%)';
705
+ cartOverlay.classList.add('hidden');
706
+ document.body.style.overflow = '';
707
+ } else {
708
+ cartDrawer.style.transform = 'translateX(0)';
709
+ cartOverlay.classList.remove('hidden');
710
+ document.body.style.overflow = 'hidden';
711
+ updateCartDrawer();
712
+ }
713
+ }
714
+
715
+ // Update cart counter
716
+ function updateCartCounter() {
717
+ const counter = document.getElementById('cartCounter');
718
+ const itemCount = document.getElementById('cartItemCount');
719
+
720
+ if (cart.length > 0) {
721
+ counter.textContent = cart.length;
722
+ counter.classList.remove('hidden');
723
+ itemCount.textContent = cart.length;
724
+ } else {
725
+ counter.classList.add('hidden');
726
+ itemCount.textContent = '0';
727
+ }
728
+ }
729
+
730
+ // Add to cart
731
+ function addToCart(name, price) {
732
+ // Show loading spinner
733
+ document.getElementById('loadingSpinner').classList.remove('hidden');
734
+
735
+ // Simulate API call delay
736
+ setTimeout(() => {
737
+ cart.push({ name, price });
738
+
739
+ // Save to localStorage
740
+ localStorage.setItem('cart', JSON.stringify(cart));
741
+
742
+ // Update UI
743
+ updateCartCounter();
744
+ updateCartDrawer();
745
+
746
+ // Show "added" feedback
747
+ const button = event.target;
748
+ const originalText = button.textContent;
749
+ button.innerHTML = '<i class="fas fa-check mr-2"></i> ADDED';
750
+ button.disabled = true;
751
+
752
+ setTimeout(() => {
753
+ button.textContent = originalText;
754
+ button.disabled = false;
755
+ }, 2000);
756
+
757
+ // Hide loading spinner
758
+ document.getElementById('loadingSpinner').classList.add('hidden');
759
+ }, 500);
760
+ }
761
+
762
+ // Update cart drawer
763
+ function updateCartDrawer() {
764
+ const cartItemsContainer = document.getElementById('cartItems');
765
+ const emptyCart = document.getElementById('emptyCart');
766
+ const cartSubtotal = document.getElementById('cartSubtotal');
767
+ const checkoutTotal = document.getElementById('checkoutTotal');
768
+ const checkoutBtn = document.getElementById('checkoutBtn');
769
+
770
+ // Calculate subtotal
771
+ const subtotal = cart.reduce((sum, item) => sum + item.price, 0);
772
+ cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
773
+ checkoutTotal.textContent = `$${subtotal.toFixed(2)}`;
774
+
775
+ if (cart.length === 0) {
776
+ emptyCart.classList.remove('hidden');
777
+ checkoutBtn.disabled = true;
778
+ return;
779
+ } else {
780
+ emptyCart.classList.add('hidden');
781
+ checkoutBtn.disabled = false;
782
+ }
783
+
784
+ // Group items by name with quantity
785
+ const itemCount = {};
786
+ cart.forEach(item => {
787
+ itemCount[item.name] = (itemCount[item.name] || 0) + 1;
788
+ });
789
+
790
+ // Create unique items array with quantity
791
+ const uniqueItems = Object.keys(itemCount).map(name => {
792
+ return {
793
+ name,
794
+ price: cart.find(item => item.name === name).price,
795
+ quantity: itemCount[name]
796
+ };
797
+ });
798
+
799
+ // Generate cart items HTML
800
+ let itemsHTML = '';
801
+ uniqueItems.forEach(item => {
802
+ itemsHTML += `
803
+ <div class="flex items-start py-4 border-b border-gray-200 cart-item">
804
+ <div class="w-20 h-20 rounded-lg bg-gray-100 overflow-hidden mr-4 flex-shrink-0">
805
+ <img src="${getProductImage(item.name)}"
806
+ alt="${item.name}"
807
+ class="w-full h-full object-cover">
808
+ </div>
809
+ <div class="flex-grow">
810
+ <h4 class="font-medium">${item.name}</h4>
811
+ <p class="text-gray-600 text-sm mb-1">$${item.price.toFixed(2)}</p>
812
+ <div class="flex items-center justify-between">
813
+ <div class="flex items-center border border-gray-300 rounded-lg">
814
+ <button class="w-8 h-8 flex items-center justify-center rounded-l hover:bg-gray-100"
815
+ onclick="adjustQuantity('${item.name}', -1)">
816
+ <i class="fas fa-minus text-xs"></i>
817
+ </button>
818
+ <span class="px-3 text-sm">${item.quantity}</span>
819
+ <button class="w-8 h-8 flex items-center justify-center rounded-r hover:bg-gray-100"
820
+ onclick="adjustQuantity('${item.name}', 1)">
821
+ <i class="fas fa-plus text-xs"></i>
822
+ </button>
823
+ </div>
824
+ <p class="font-medium">$${(item.price * item.quantity).toFixed(2)}</p>
825
+ </div>
826
+ </div>
827
+ <button class="ml-4 text-gray-400 hover:text-black hover:bg-gray-100 p-1 rounded-full"
828
+ onclick="removeFromCart('${item.name}')">
829
+ <i class="fas fa-times"></i>
830
+ </button>
831
+ </div>
832
+ `;
833
+ });
834
+
835
+ cartItemsContainer.innerHTML = itemsHTML + emptyCart.outerHTML;
836
+ }
837
+
838
+ // Get product image for cart
839
+ function getProductImage(name) {
840
+ const images = {
841
+ 'Minimal Leather Collar': 'https://images.unsplash.com/photo-1551238369-c86baf7c06aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80',
842
+ 'Braided Rope Leash': 'https://images.unsplash.com/photo-1612195583950-b8fd34c87093?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
843
+ 'Organic Cotton Bed': 'https://images.unsplash.com/photo-1594145077356-fbc364e71953?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80',
844
+ 'Classic Bow Tie': 'https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80'
845
+ };
846
+ return images[name] || 'https://via.placeholder.com/150';
847
+ }
848
+
849
+ // Adjust quantity
850
+ function adjustQuantity(name, change) {
851
+ if (change === -1) {
852
+ // Remove one item
853
+ const index = cart.findIndex(item => item.name === name);
854
+ if (index !== -1) {
855
+ cart.splice(index, 1);
856
+ }
857
+ } else if (change === 1) {
858
+ // Add one item
859
+ const item = cart.find(item => item.name === name);
860
+ if (item) {
861
+ cart.push({ name, price: item.price });
862
+ }
863
+ }
864
+
865
+ // Save to localStorage
866
+ localStorage.setItem('cart', JSON.stringify(cart));
867
+
868
+ // Update UI
869
+ updateCartCounter();
870
+ updateCartDrawer();
871
+ }
872
+
873
+ // Remove all of an item
874
+ function removeFromCart(name) {
875
+ cart = cart.filter(item => item.name !== name);
876
+
877
+ // Save to localStorage
878
+ localStorage.setItem('cart', JSON.stringify(cart));
879
+
880
+ // Update UI
881
+ updateCartCounter();
882
+ updateCartDrawer();
883
+ }
884
+
885
+ // Newsletter form
886
+ function handleNewsletter(e) {
887
+ e.preventDefault();
888
+ const email = e.target.querySelector('input').value;
889
+
890
+ // Show loading state
891
+ const form = e.target;
892
+ const submitBtn = form.querySelector('button[type="submit"]');
893
+ const originalBtnText = submitBtn.innerHTML;
894
+ submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> PROCESSING';
895
+ submitBtn.disabled = true;
896
+
897
+ // Simulate API call
898
+ setTimeout(() => {
899
+ form.innerHTML = `
900
+ <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
901
+ <p>Thank you for subscribing!</p>
902
+ </div>
903
+ `;
904
+
905
+ // Reset form after delay
906
+ setTimeout(() => {
907
+ form.innerHTML = `
908
+ <input type="email"
909
+ placeholder="Enter your email"
910
+ class="newsletter-input flex-grow px-6 py-4 rounded-lg text-black focus:ring-2 focus:ring-white"
911
+ required>
912
+ <button type="submit" class="bg-white text-black px-8 py-4 font-bold rounded-lg hover:bg-gray-200 transition">
913
+ SUBSCRIBE
914
+ </button>
915
+ `;
916
+ }, 3000);
917
+ }, 1500);
918
+ }
919
+
920
+ // Scroll animations
921
+ function setupScrollAnimations() {
922
+ const scrollElements = document.querySelectorAll('[data-scroll]');
923
+
924
+ const elementInView = (el) => {
925
+ const rect = el.getBoundingClientRect();
926
+ return (
927
+ rect.top >= 0 &&
928
+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) * 1.3
929
+ );
930
+ };
931
+
932
+ const handleScrollAnimation = () => {
933
+ scrollElements.forEach(el => {
934
+ if (elementInView(el)) {
935
+ el.style.opacity = '1';
936
+
937
+ if (el.classList.contains('animate-slide-up')) {
938
+ el.style.transform = 'translateY(0)';
939
+ } else if (el.classList.contains('animate-slide-right')) {
940
+ el.style.transform = 'translateX(0)';
941
+ } else if (el.classList.contains('animate-pop')) {
942
+ el.style.transform = 'scale(1)';
943
+ }
944
+ }
945
+ });
946
+ };
947
+
948
+ // Initialize hidden elements
949
+ scrollElements.forEach(el => {
950
+ el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
951
+
952
+ if (el.classList.contains('animate-slide-up')) {
953
+ el.style.transform = 'translateY(50px)';
954
+ } else if (el.classList.contains('animate-slide-right')) {
955
+ el.style.transform = 'translateX(50px)';
956
+ } else if (el.classList.contains('animate-pop')) {
957
+ el.style.transform = 'scale(0.8)';
958
+ }
959
+ });
960
+
961
+ // Initial check
962
+ handleScrollAnimation();
963
+
964
+ // Add scroll event
965
+ window.addEventListener('scroll', () => {
966
+ handleScrollAnimation();
967
+ });
968
+ }
969
+
970
+ // Smooth scroll for anchor links
971
+ function setupSmoothScrolling() {
972
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
973
+ anchor.addEventListener('click', function(e) {
974
+ e.preventDefault();
975
+
976
+ const targetId = this.getAttribute('href');
977
+ if (targetId === '#') return;
978
+
979
+ const targetElement = document.querySelector(targetId);
980
+ if (targetElement) {
981
+ // Close mobile menu if open
982
+ document.getElementById('mobileMenu').classList.add('hidden');
983
+ document.body.style.overflow = '';
984
+
985
+ window.scrollTo({
986
+ top: targetElement.offsetTop - 80,
987
+ behavior: 'smooth'
988
+ });
989
+ }
990
+ });
991
+ });
992
+ }
993
+
994
+ // Initialize everything when DOM loads
995
+ document.addEventListener('DOMContentLoaded', () => {
996
+ updateCartCounter();
997
+ setupScrollAnimations();
998
+ setupSmoothScrolling();
999
+
1000
+ // Setup form submissions
1001
+ document.querySelector('form').addEventListener('submit', handleNewsletter);
1002
+ });
1003
+ </script>
1004
+ <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=greatisiw92/okppp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1005
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Modern online store homepage, that sells dog acsessories, minimalistic, black white colors
2
+ R design hero section, improve cart menu, improve sizes and positioning for all devices, add animations, and appear on scroll anims