Hugging Face's logo

Spaces:
Shahid72
/
guts
Running

App Files Community
Shahid72 commited on
Commit
0f67d48
·
verified ·
1 Parent(s): 023ac11

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1323 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Guts
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: guts
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: pink
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,1323 @@
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
+ <meta name="theme-color" content="#000000">
7
+ <meta name="description" content="Premium clothing brand - Fashion that speaks to your soul">
8
+ <title>ELEVATE | Premium Clothing</title>
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <link rel="manifest" href="/manifest.json">
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
14
+
15
+ body {
16
+ font-family: 'Montserrat', sans-serif;
17
+ scroll-behavior: smooth;
18
+ }
19
+
20
+ .hero-gradient {
21
+ background: linear-gradient(135deg, #000000 0%, #2d3436 100%);
22
+ }
23
+
24
+ .product-card:hover .product-overlay {
25
+ opacity: 1;
26
+ transform: translateY(0);
27
+ }
28
+
29
+ .product-overlay {
30
+ transition: all 0.3s ease;
31
+ opacity: 0;
32
+ transform: translateY(20px);
33
+ }
34
+
35
+ .install-btn {
36
+ animation: pulse 2s infinite;
37
+ }
38
+
39
+ @keyframes pulse {
40
+ 0% { transform: scale(1); }
41
+ 50% { transform: scale(1.05); }
42
+ 100% { transform: scale(1); }
43
+ }
44
+
45
+ .nav-link::after {
46
+ content: '';
47
+ display: block;
48
+ width: 0;
49
+ height: 2px;
50
+ background: white;
51
+ transition: width .3s;
52
+ }
53
+
54
+ .nav-link:hover::after {
55
+ width: 100%;
56
+ }
57
+
58
+ /* Admin panel styles */
59
+ .admin-panel {
60
+ position: fixed;
61
+ bottom: 20px;
62
+ right: 20px;
63
+ z-index: 999;
64
+ }
65
+
66
+ .admin-btn {
67
+ background: #4f46e5;
68
+ color: white;
69
+ width: 60px;
70
+ height: 60px;
71
+ border-radius: 50%;
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: center;
75
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
76
+ cursor: pointer;
77
+ transition: all 0.3s ease;
78
+ }
79
+
80
+ .admin-btn:hover {
81
+ transform: scale(1.1);
82
+ }
83
+
84
+ .admin-menu {
85
+ position: absolute;
86
+ bottom: 70px;
87
+ right: 0;
88
+ background: white;
89
+ border-radius: 8px;
90
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
91
+ width: 250px;
92
+ overflow: hidden;
93
+ display: none;
94
+ }
95
+
96
+ .admin-menu-item {
97
+ padding: 12px 16px;
98
+ cursor: pointer;
99
+ transition: background 0.2s;
100
+ }
101
+
102
+ .admin-menu-item:hover {
103
+ background: #f3f4f6;
104
+ }
105
+
106
+ /* Modal styles */
107
+ .modal {
108
+ display: none;
109
+ position: fixed;
110
+ top: 0;
111
+ left: 0;
112
+ width: 100%;
113
+ height: 100%;
114
+ background: rgba(0, 0, 0, 0.5);
115
+ z-index: 1000;
116
+ justify-content: center;
117
+ align-items: center;
118
+ }
119
+
120
+ .modal-content {
121
+ background: white;
122
+ border-radius: 8px;
123
+ width: 90%;
124
+ max-width: 600px;
125
+ max-height: 90vh;
126
+ overflow-y: auto;
127
+ }
128
+
129
+ /* Dashboard styles */
130
+ .dashboard-nav {
131
+ background: #1f2937;
132
+ color: white;
133
+ }
134
+
135
+ .dashboard-nav-item {
136
+ padding: 12px 16px;
137
+ border-radius: 4px;
138
+ transition: background 0.2s;
139
+ }
140
+
141
+ .dashboard-nav-item:hover {
142
+ background: #374151;
143
+ }
144
+
145
+ .dashboard-nav-item.active {
146
+ background: #4f46e5;
147
+ }
148
+
149
+ /* Payment method styles */
150
+ .payment-method {
151
+ border: 1px solid #e5e7eb;
152
+ border-radius: 8px;
153
+ padding: 16px;
154
+ margin-bottom: 12px;
155
+ cursor: pointer;
156
+ transition: all 0.2s;
157
+ }
158
+
159
+ .payment-method:hover {
160
+ border-color: #4f46e5;
161
+ }
162
+
163
+ .payment-method.selected {
164
+ border-color: #4f46e5;
165
+ background: #f5f3ff;
166
+ }
167
+ </style>
168
+ </head>
169
+ <body class="bg-gray-50">
170
+ <!-- Admin Panel Floating Button -->
171
+ <div class="admin-panel">
172
+ <div class="admin-btn" id="adminBtn">
173
+ <i class="fas fa-cog text-2xl"></i>
174
+ </div>
175
+ <div class="admin-menu" id="adminMenu">
176
+ <div class="admin-menu-item" onclick="openModal('dashboardModal')">
177
+ <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
178
+ </div>
179
+ <div class="admin-menu-item" onclick="openModal('editWebsiteModal')">
180
+ <i class="fas fa-edit mr-2"></i> Edit Website
181
+ </div>
182
+ <div class="admin-menu-item" onclick="openModal('manageProductsModal')">
183
+ <i class="fas fa-tshirt mr-2"></i> Manage Products
184
+ </div>
185
+ <div class="admin-menu-item" onclick="openModal('manageOrdersModal')">
186
+ <i class="fas fa-shopping-bag mr-2"></i> Manage Orders
187
+ </div>
188
+ <div class="admin-menu-item" onclick="openModal('paymentSettingsModal')">
189
+ <i class="fas fa-credit-card mr-2"></i> Payment Settings
190
+ </div>
191
+ <div class="admin-menu-item" onclick="openModal('userManagementModal')">
192
+ <i class="fas fa-users mr-2"></i> User Management
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Install App Banner -->
198
+ <div id="installBanner" class="hidden fixed bottom-0 left-0 right-0 bg-black text-white p-4 flex justify-between items-center z-50">
199
+ <div class="flex items-center">
200
+ <i class="fas fa-mobile-alt text-2xl mr-3"></i>
201
+ <span>Install ELEVATE App for better experience</span>
202
+ </div>
203
+ <div>
204
+ <button id="installBtn" class="install-btn bg-white text-black px-4 py-2 rounded-full font-semibold mr-2">Install</button>
205
+ <button id="dismissBtn" class="text-gray-400">Not now</button>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Navigation -->
210
+ <nav class="bg-black text-white fixed w-full z-40">
211
+ <div class="container mx-auto px-6 py-4">
212
+ <div class="flex justify-between items-center">
213
+ <div class="text-2xl font-bold tracking-wider">
214
+ <a href="#" class="flex items-center">
215
+ <img id="brandLogo" src="https://via.placeholder.com/40" alt="Logo" class="h-10 mr-2">
216
+ <span id="brandName" class="text-white">ELEVATE</span>
217
+ </a>
218
+ </div>
219
+
220
+ <div class="hidden md:flex space-x-8">
221
+ <a href="#home" class="nav-link">Home</a>
222
+ <a href="#shop" class="nav-link">Shop</a>
223
+ <a href="#collections" class="nav-link">Collections</a>
224
+ <a href="#about" class="nav-link">About</a>
225
+ <a href="#contact" class="nav-link">Contact</a>
226
+ </div>
227
+
228
+ <div class="flex items-center space-x-4">
229
+ <a href="#" class="text-white"><i class="fas fa-search"></i></a>
230
+ <a href="#" class="text-white"><i class="fas fa-user"></i></a>
231
+ <a href="#" class="text-white relative">
232
+ <i class="fas fa-shopping-bag"></i>
233
+ <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
234
+ </a>
235
+ <button id="mobileMenuBtn" class="md:hidden text-white focus:outline-none">
236
+ <i class="fas fa-bars text-2xl"></i>
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Mobile Menu -->
243
+ <div id="mobileMenu" class="hidden md:hidden bg-black absolute w-full left-0 px-6 pb-4">
244
+ <div class="flex flex-col space-y-3">
245
+ <a href="#home" class="block py-2">Home</a>
246
+ <a href="#shop" class="block py-2">Shop</a>
247
+ <a href="#collections" class="block py-2">Collections</a>
248
+ <a href="#about" class="block py-2">About</a>
249
+ <a href="#contact" class="block py-2">Contact</a>
250
+ </div>
251
+ </div>
252
+ </nav>
253
+
254
+ <!-- Hero Section -->
255
+ <section id="home" class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-24 text-white">
256
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
257
+ <div class="md:w-1/2 mb-10 md:mb-0">
258
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Elevate Your Style</h1>
259
+ <p class="text-lg md:text-xl mb-8 text-gray-300">Premium clothing designed for those who dare to stand out. Crafted with precision, worn with confidence.</p>
260
+ <div class="flex space-x-4">
261
+ <a href="#shop" class="bg-white text-black px-8 py-3 rounded-full font-semibold hover:bg-gray-200 transition">Shop Now</a>
262
+ <a href="#collections" class="border border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-black transition">Collections</a>
263
+ </div>
264
+ </div>
265
+ <div class="md:w-1/2 flex justify-center">
266
+ <img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="ELEVATE Clothing" class="rounded-lg shadow-2xl max-w-full h-auto">
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- Featured Products -->
272
+ <section id="shop" class="py-16 bg-white">
273
+ <div class="container mx-auto px-6">
274
+ <h2 class="text-3xl font-bold text-center mb-12">Featured Collection</h2>
275
+
276
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="productsContainer">
277
+ <!-- Products will be loaded here dynamically -->
278
+ </div>
279
+
280
+ <div class="text-center mt-12">
281
+ <a href="#" class="inline-block border-2 border-black text-black px-8 py-3 rounded-full font-semibold hover:bg-black hover:text-white transition">View All Products</a>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- Collections Section -->
287
+ <section id="collections" class="py-16 bg-gray-100">
288
+ <div class="container mx-auto px-6">
289
+ <h2 class="text-3xl font-bold text-center mb-12">Our Collections</h2>
290
+
291
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
292
+ <!-- Collection 1 -->
293
+ <div class="relative rounded-lg overflow-hidden h-96">
294
+ <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Summer Collection" class="w-full h-full object-cover">
295
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
296
+ <div class="text-center text-white p-6">
297
+ <h3 class="text-2xl md:text-3xl font-bold mb-4">Summer '23</h3>
298
+ <p class="mb-6">Lightweight fabrics and vibrant colors for the sunny days</p>
299
+ <a href="#" class="inline-block border-2 border-white text-white px-6 py-2 rounded-full font-semibold hover:bg-white hover:text-black transition">Explore</a>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Collection 2 -->
305
+ <div class="relative rounded-lg overflow-hidden h-96">
306
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Winter Collection" class="w-full h-full object-cover">
307
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
308
+ <div class="text-center text-white p-6">
309
+ <h3 class="text-2xl md:text-3xl font-bold mb-4">Winter '23</h3>
310
+ <p class="mb-6">Warm layers and rich textures for the cold season</p>
311
+ <a href="#" class="inline-block border-2 border-white text-white px-6 py-2 rounded-full font-semibold hover:bg-white hover:text-black transition">Explore</a>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- About Section -->
320
+ <section id="about" class="py-16 bg-white">
321
+ <div class="container mx-auto px-6">
322
+ <div class="flex flex-col md:flex-row items-center">
323
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
324
+ <h2 class="text-3xl font-bold mb-6">Our Story</h2>
325
+ <p class="text-gray-700 mb-6">Founded in 2015, ELEVATE began as a small boutique in downtown Los Angeles with a simple mission: to create clothing that combines exceptional quality with timeless design.</p>
326
+ <p class="text-gray-700 mb-6">Every piece in our collection is thoughtfully designed and meticulously crafted to elevate your everyday wardrobe. We believe in sustainable practices, ethical sourcing, and creating garments that last.</p>
327
+ <p class="text-gray-700 mb-8">Today, we're proud to serve customers worldwide who share our passion for elevated essentials and statement pieces.</p>
328
+ <a href="#" class="inline-block border-2 border-black text-black px-8 py-3 rounded-full font-semibold hover:bg-black hover:text-white transition">Learn More</a>
329
+ </div>
330
+ <div class="md:w-1/2">
331
+ <div class="grid grid-cols-2 gap-4">
332
+ <div class="h-64 overflow-hidden rounded-lg">
333
+ <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b3da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Workshop" class="w-full h-full object-cover">
334
+ </div>
335
+ <div class="h-64 overflow-hidden rounded-lg">
336
+ <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Materials" class="w-full h-full object-cover">
337
+ </div>
338
+ <div class="h-64 overflow-hidden rounded-lg">
339
+ <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Design" class="w-full h-full object-cover">
340
+ </div>
341
+ <div class="h-64 overflow-hidden rounded-lg">
342
+ <img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Showroom" class="w-full h-full object-cover">
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </section>
349
+
350
+ <!-- Testimonials -->
351
+ <section class="py-16 bg-gray-100">
352
+ <div class="container mx-auto px-6">
353
+ <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
354
+
355
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
356
+ <!-- Testimonial 1 -->
357
+ <div class="bg-white p-8 rounded-lg shadow-md">
358
+ <div class="flex items-center mb-4">
359
+ <div class="text-yellow-400 text-xl">
360
+ <i class="fas fa-star"></i>
361
+ <i class="fas fa-star"></i>
362
+ <i class="fas fa-star"></i>
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ </div>
366
+ </div>
367
+ <p class="text-gray-700 mb-6">"The quality of ELEVATE's clothing is unmatched. I've had my Signature Tee for over a year and it still looks brand new."</p>
368
+ <div class="flex items-center">
369
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
370
+ <div>
371
+ <h4 class="font-semibold">Sarah J.</h4>
372
+ <p class="text-gray-600 text-sm">Verified Customer</p>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Testimonial 2 -->
378
+ <div class="bg-white p-8 rounded-lg shadow-md">
379
+ <div class="flex items-center mb-4">
380
+ <div class="text-yellow-400 text-xl">
381
+ <i class="fas fa-star"></i>
382
+ <i class="fas fa-star"></i>
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ </div>
387
+ </div>
388
+ <p class="text-gray-700 mb-6">"The fit and comfort of these clothes are perfect. I've completely refreshed my wardrobe with ELEVATE pieces."</p>
389
+ <div class="flex items-center">
390
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
391
+ <div>
392
+ <h4 class="font-semibold">Michael T.</h4>
393
+ <p class="text-gray-600 text-sm">Verified Customer</p>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Testimonial 3 -->
399
+ <div class="bg-white p-8 rounded-lg shadow-md">
400
+ <div class="flex items-center mb-4">
401
+ <div class="text-yellow-400 text-xl">
402
+ <i class="fas fa-star"></i>
403
+ <i class="fas fa-star"></i>
404
+ <i class="fas fa-star"></i>
405
+ <i class="fas fa-star"></i>
406
+ <i class="fas fa-star-half-alt"></i>
407
+ </div>
408
+ </div>
409
+ <p class="text-gray-700 mb-6">"I love the minimalist yet sophisticated designs. The attention to detail really sets ELEVATE apart from other brands."</p>
410
+ <div class="flex items-center">
411
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jessica L." class="w-12 h-12 rounded-full mr-4">
412
+ <div>
413
+ <h4 class="font-semibold">Jessica L.</h4>
414
+ <p class="text-gray-600 text-sm">Verified Customer</p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </section>
421
+
422
+ <!-- Newsletter -->
423
+ <section class="py-16 bg-black text-white">
424
+ <div class="container mx-auto px-6 text-center">
425
+ <h2 class="text-3xl font-bold mb-6">Join Our Community</h2>
426
+ <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300">Subscribe to our newsletter and get 15% off your first order, plus exclusive access to new collections and special events.</p>
427
+
428
+ <form class="max-w-md mx-auto flex">
429
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-full focus:outline-none text-black">
430
+ <button type="submit" class="bg-white text-black px-6 py-3 rounded-r-full font-semibold hover:bg-gray-200 transition">Subscribe</button>
431
+ </form>
432
+
433
+ <p class="text-sm text-gray-500 mt-4">We respect your privacy. Unsubscribe at any time.</p>
434
+ </div>
435
+ </section>
436
+
437
+ <!-- Contact Section -->
438
+ <section id="contact" class="py-16 bg-white">
439
+ <div class="container mx-auto px-6">
440
+ <h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2>
441
+
442
+ <div class="flex flex-col md:flex-row">
443
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
444
+ <h3 class="text-xl font-semibold mb-4">Contact Information</h3>
445
+ <p class="text-gray-700 mb-6">Have questions or need assistance? We're here to help.</p>
446
+
447
+ <div class="space-y-4">
448
+ <div class="flex items-start">
449
+ <i class="fas fa-map-marker-alt text-gray-700 mt-1 mr-4"></i>
450
+ <div>
451
+ <h4 class="font-semibold">Our Store</h4>
452
+ <p class="text-gray-600">123 Fashion Avenue, Los Angeles, CA 90015</p>
453
+ </div>
454
+ </div>
455
+
456
+ <div class="flex items-start">
457
+ <i class="fas fa-envelope text-gray-700 mt-1 mr-4"></i>
458
+ <div>
459
+ <h4 class="font-semibold">Email Us</h4>
460
+ <p class="text-gray-600">hello@elevateclothing.com</p>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="flex items-start">
465
+ <i class="fas fa-phone-alt text-gray-700 mt-1 mr-4"></i>
466
+ <div>
467
+ <h4 class="font-semibold">Call Us</h4>
468
+ <p class="text-gray-600">+1 (555) 123-4567</p>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="mt-8">
474
+ <h4 class="font-semibold mb-4">Follow Us</h4>
475
+ <div class="flex space-x-4">
476
+ <a href="#" class="text-black hover:text-gray-600"><i class="fab fa-instagram text-2xl"></i></a>
477
+ <a href="#" class="text-black hover:text-gray-600"><i class="fab fa-facebook text-2xl"></i></a>
478
+ <a href="#" class="text-black hover:text-gray-600"><i class="fab fa-twitter text-2xl"></i></a>
479
+ <a href="#" class="text-black hover:text-gray-600"><i class="fab fa-pinterest text-2xl"></i></a>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <div class="md:w-1/2">
485
+ <form class="bg-gray-100 p-8 rounded-lg">
486
+ <div class="mb-6">
487
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
488
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black">
489
+ </div>
490
+
491
+ <div class="mb-6">
492
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
493
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black">
494
+ </div>
495
+
496
+ <div class="mb-6">
497
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
498
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black">
499
+ </div>
500
+
501
+ <div class="mb-6">
502
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
503
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-black"></textarea>
504
+ </div>
505
+
506
+ <button type="submit" class="bg-black text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-800 transition w-full">Send Message</button>
507
+ </form>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </section>
512
+
513
+ <!-- Footer -->
514
+ <footer class="bg-black text-white py-12">
515
+ <div class="container mx-auto px-6">
516
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
517
+ <div>
518
+ <h3 class="text-xl font-bold mb-4">ELEVATE</h3>
519
+ <p class="text-gray-400">Premium clothing designed for those who dare to stand out.</p>
520
+ </div>
521
+
522
+ <div>
523
+ <h4 class="font-semibold mb-4">Shop</h4>
524
+ <ul class="space-y-2">
525
+ <li><a href="#" class="text-gray-400 hover:text-white transition">All Products</a></li>
526
+ <li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li>
527
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Best Sellers</a></li>
528
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Sale</a></li>
529
+ </ul>
530
+ </div>
531
+
532
+ <div>
533
+ <h4 class="font-semibold mb-4">Company</h4>
534
+ <ul class="space-y-2">
535
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
536
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Sustainability</a></li>
537
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
538
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li>
539
+ </ul>
540
+ </div>
541
+
542
+ <div>
543
+ <h4 class="font-semibold mb-4">Customer Service</h4>
544
+ <ul class="space-y-2">
545
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
546
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li>
547
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping & Returns</a></li>
548
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Size Guide</a></li>
549
+ </ul>
550
+ </div>
551
+ </div>
552
+
553
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
554
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 ELEVATE Clothing. All rights reserved.</p>
555
+ <div class="flex space-x-6">
556
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
557
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
558
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </footer>
563
+
564
+ <!-- Checkout Modal -->
565
+ <div class="modal" id="checkoutModal">
566
+ <div class="modal-content">
567
+ <div class="p-6">
568
+ <div class="flex justify-between items-center mb-6">
569
+ <h3 class="text-2xl font-bold">Checkout</h3>
570
+ <button onclick="closeModal('checkoutModal')" class="text-gray-500 hover:text-gray-700">
571
+ <i class="fas fa-times"></i>
572
+ </button>
573
+ </div>
574
+
575
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
576
+ <div>
577
+ <h4 class="text-lg font-semibold mb-4">Shipping Information</h4>
578
+ <form>
579
+ <div class="mb-4">
580
+ <label class="block text-gray-700 mb-2">Full Name</label>
581
+ <input type="text" class="w-full px-4 py-2 border rounded-lg">
582
+ </div>
583
+ <div class="mb-4">
584
+ <label class="block text-gray-700 mb-2">Address</label>
585
+ <input type="text" class="w-full px-4 py-2 border rounded-lg">
586
+ </div>
587
+ <div class="grid grid-cols-2 gap-4 mb-4">
588
+ <div>
589
+ <label class="block text-gray-700 mb-2">City</label>
590
+ <input type="text" class="w-full px-4 py-2 border rounded-lg">
591
+ </div>
592
+ <div>
593
+ <label class="block text-gray-700 mb-2">ZIP Code</label>
594
+ <input type="text" class="w-full px-4 py-2 border rounded-lg">
595
+ </div>
596
+ </div>
597
+ <div class="mb-4">
598
+ <label class="block text-gray-700 mb-2">Country</label>
599
+ <select class="w-full px-4 py-2 border rounded-lg">
600
+ <option>United States</option>
601
+ <option>Canada</option>
602
+ <option>United Kingdom</option>
603
+ <option>Australia</option>
604
+ </select>
605
+ </div>
606
+ </form>
607
+
608
+ <h4 class="text-lg font-semibold mt-8 mb-4">Payment Method</h4>
609
+ <div id="paymentMethods">
610
+ <div class="payment-method selected" onclick="selectPaymentMethod(this)">
611
+ <div class="flex items-center">
612
+ <i class="fab fa-cc-stripe text-2xl mr-3 text-blue-500"></i>
613
+ <div>
614
+ <h5 class="font-semibold">Credit/Debit Card</h5>
615
+ <p class="text-sm text-gray-600">Pay with Visa, Mastercard, etc.</p>
616
+ </div>
617
+ </div>
618
+ <div id="cardPaymentForm" class="mt-4">
619
+ <div class="mb-3">
620
+ <label class="block text-gray-700 mb-1">Card Number</label>
621
+ <input type="text" placeholder="1234 5678 9012 3456" class="w-full px-4 py-2 border rounded-lg">
622
+ </div>
623
+ <div class="grid grid-cols-2 gap-4 mb-3">
624
+ <div>
625
+ <label class="block text-gray-700 mb-1">Expiry Date</label>
626
+ <input type="text" placeholder="MM/YY" class="w-full px-4 py-2 border rounded-lg">
627
+ </div>
628
+ <div>
629
+ <label class="block text-gray-700 mb-1">CVV</label>
630
+ <input type="text" placeholder="123" class="w-full px-4 py-2 border rounded-lg">
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <div class="payment-method" onclick="selectPaymentMethod(this)">
637
+ <div class="flex items-center">
638
+ <i class="fab fa-paypal text-2xl mr-3 text-blue-500"></i>
639
+ <div>
640
+ <h5 class="font-semibold">PayPal</h5>
641
+ <p class="text-sm text-gray-600">Pay with your PayPal account</p>
642
+ </div>
643
+ </div>
644
+ </div>
645
+
646
+ <div class="payment-method" onclick="selectPaymentMethod(this)">
647
+ <div class="flex items-center">
648
+ <i class="fas fa-money-bill-wave text-2xl mr-3 text-green-500"></i>
649
+ <div>
650
+ <h5 class="font-semibold">Cash on Delivery</h5>
651
+ <p class="text-sm text-gray-600">Pay when you receive your order</p>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+
658
+ <div>
659
+ <h4 class="text-lg font-semibold mb-4">Order Summary</h4>
660
+ <div class="bg-gray-100 p-4 rounded-lg">
661
+ <div class="flex justify-between mb-4 pb-2 border-b">
662
+ <span>Subtotal</span>
663
+ <span>$149.97</span>
664
+ </div>
665
+ <div class="flex justify-between mb-4 pb-2 border-b">
666
+ <span>Shipping</span>
667
+ <span>$5.99</span>
668
+ </div>
669
+ <div class="flex justify-between mb-4 pb-2 border-b">
670
+ <span>Tax</span>
671
+ <span>$12.45</span>
672
+ </div>
673
+ <div class="flex justify-between font-bold text-lg">
674
+ <span>Total</span>
675
+ <span>$168.41</span>
676
+ </div>
677
+ </div>
678
+
679
+ <button class="w-full bg-black text-white py-3 rounded-lg font-semibold mt-6 hover:bg-gray-800 transition">
680
+ Complete Order
681
+ </button>
682
+
683
+ <div class="mt-4 text-center text-sm text-gray-500">
684
+ <p>By placing your order, you agree to our <a href="#" class="text-blue-500">Terms of Service</a> and <a href="#" class="text-blue-500">Privacy Policy</a>.</p>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </div>
691
+
692
+ <!-- Admin Dashboard Modal -->
693
+ <div class="modal" id="dashboardModal">
694
+ <div class="modal-content">
695
+ <div class="p-6">
696
+ <div class="flex justify-between items-center mb-6">
697
+ <h3 class="text-2xl font-bold">Admin Dashboard</h3>
698
+ <button onclick="closeModal('dashboardModal')" class="text-gray-500 hover:text-gray-700">
699
+ <i class="fas fa-times"></i>
700
+ </button>
701
+ </div>
702
+
703
+ <div class="flex flex-col md:flex-row">
704
+ <!-- Dashboard Navigation -->
705
+ <div class="dashboard-nav md:w-1/4 p-4 rounded-lg mr-0 md:mr-6 mb-6 md:mb-0">
706
+ <div class="dashboard-nav-item active" onclick="showDashboardTab('dashboardOverview')">
707
+ <i class="fas fa-tachometer-alt mr-2"></i> Overview
708
+ </div>
709
+ <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardProducts')">
710
+ <i class="fas fa-tshirt mr-2"></i> Products
711
+ </div>
712
+ <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardOrders')">
713
+ <i class="fas fa-shopping-bag mr-2"></i> Orders
714
+ </div>
715
+ <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardCustomers')">
716
+ <i class="fas fa-users mr-2"></i> Customers
717
+ </div>
718
+ <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardAnalytics')">
719
+ <i class="fas fa-chart-line mr-2"></i> Analytics
720
+ </div>
721
+ <div class="dashboard-nav-item" onclick="showDashboardTab('dashboardSettings')">
722
+ <i class="fas fa-cog mr-2"></i> Settings
723
+ </div>
724
+ </div>
725
+
726
+ <!-- Dashboard Content -->
727
+ <div class="md:w-3/4">
728
+ <div id="dashboardOverview" class="dashboard-tab">
729
+ <h4 class="text-xl font-semibold mb-4">Overview</h4>
730
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
731
+ <div class="bg-blue-50 p-4 rounded-lg">
732
+ <h5 class="font-semibold text-blue-800">Total Revenue</h5>
733
+ <p class="text-2xl font-bold">$24,567</p>
734
+ <p class="text-sm text-green-600">+12% from last month</p>
735
+ </div>
736
+ <div class="bg-green-50 p-4 rounded-lg">
737
+ <h5 class="font-semibold text-green-800">New Orders</h5>
738
+ <p class="text-2xl font-bold">156</p>
739
+ <p class="text-sm text-green-600">+8% from last month</p>
740
+ </div>
741
+ <div class="bg-purple-50 p-4 rounded-lg">
742
+ <h5 class="font-semibold text-purple-800">Products</h5>
743
+ <p class="text-2xl font-bold">87</p>
744
+ <p class="text-sm text-green-600">+5 new this month</p>
745
+ </div>
746
+ </div>
747
+
748
+ <div class="bg-white p-4 rounded-lg shadow mb-6">
749
+ <h5 class="font-semibold mb-3">Recent Orders</h5>
750
+ <div class="overflow-x-auto">
751
+ <table class="min-w-full">
752
+ <thead>
753
+ <tr class="border-b">
754
+ <th class="text-left py-2">Order ID</th>
755
+ <th class="text-left py-2">Customer</th>
756
+ <th class="text-left py-2">Date</th>
757
+ <th class="text-left py-2">Amount</th>
758
+ <th class="text-left py-2">Status</th>
759
+ </tr>
760
+ </thead>
761
+ <tbody>
762
+ <tr class="border-b">
763
+ <td class="py-2">#ORD-1001</td>
764
+ <td class="py-2">Sarah Johnson</td>
765
+ <td class="py-2">Today</td>
766
+ <td class="py-2">$168.41</td>
767
+ <td class="py-2"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Shipped</span></td>
768
+ </tr>
769
+ <tr class="border-b">
770
+ <td class="py-2">#ORD-1000</td>
771
+ <td class="py-2">Michael Brown</td>
772
+ <td class="py-2">Yesterday</td>
773
+ <td class="py-2">$245.50</td>
774
+ <td class="py-2"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Processing</span></td>
775
+ </tr>
776
+ <tr class="border-b">
777
+ <td class="py-2">#ORD-999</td>
778
+ <td class="py-2">Jessica Lee</td>
779
+ <td class="py-2">2 days ago</td>
780
+ <td class="py-2">$89.99</td>
781
+ <td class="py-2"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">Pending</span></td>
782
+ </tr>
783
+ </tbody>
784
+ </table>
785
+ </div>
786
+ </div>
787
+ </div>
788
+
789
+ <div id="dashboardProducts" class="dashboard-tab hidden">
790
+ <div class="flex justify-between items-center mb-4">
791
+ <h4 class="text-xl font-semibold">Products</h4>
792
+ <button onclick="openModal('addProductModal')" class="bg-black text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-800">
793
+ <i class="fas fa-plus mr-1"></i> Add Product
794
+ </button>
795
+ </div>
796
+
797
+ <div class="bg-white p-4 rounded-lg shadow">
798
+ <div class="overflow-x-auto">
799
+ <table class="min-w-full">
800
+ <thead>
801
+ <tr class="border-b">
802
+ <th class="text-left py-2">Image</th>
803
+ <th class="text-left py-2">Name</th>
804
+ <th class="text-left py-2">Price</th>
805
+ <th class="text-left py-2">Stock</th>
806
+ <th class="text-left py-2">Actions</th>
807
+ </tr>
808
+ </thead>
809
+ <tbody id="productListTable">
810
+ <!-- Products will be loaded here -->
811
+ </tbody>
812
+ </table>
813
+ </div>
814
+ </div>
815
+ </div>
816
+
817
+ <div id="dashboardOrders" class="dashboard-tab hidden">
818
+ <h4 class="text-xl font-semibold mb-4">Orders</h4>
819
+ <div class="bg-white p-4 rounded-lg shadow">
820
+ <div class="overflow-x-auto">
821
+ <table class="min-w-full">
822
+ <thead>
823
+ <tr class="border-b">
824
+ <th class="text-left py-2">Order ID</th>
825
+ <th class="text-left py-2">Customer</th>
826
+ <th class="text-left py-2">Date</th>
827
+ <th class="text-left py-2">Amount</th>
828
+ <th class="text-left py-2">Status</th>
829
+ <th class="text-left py-2">Actions</th>
830
+ </tr>
831
+ </thead>
832
+ <tbody>
833
+ <tr class="border-b">
834
+ <td class="py-2">#ORD-1001</td>
835
+ <td class="py-2">Sarah Johnson</td>
836
+ <td class="py-2">Today</td>
837
+ <td class="py-2">$168.41</td>
838
+ <td class="py-2">
839
+ <select class="border rounded px-2 py-1 text-xs">
840
+ <option>Pending</option>
841
+ <option selected>Processing</option>
842
+ <option>Shipped</option>
843
+ <option>Delivered</option>
844
+ <option>Cancelled</option>
845
+ </select>
846
+ </td>
847
+ <td class="py-2">
848
+ <button class="text-blue-500 hover:text-blue-700 mr-2">
849
+ <i class="fas fa-eye"></i>
850
+ </button>
851
+ <button class="text-red-500 hover:text-red-700">
852
+ <i class="fas fa-trash"></i>
853
+ </button>
854
+ </td>
855
+ </tr>
856
+ <tr class="border-b">
857
+ <td class="py-2">#ORD-1000</td>
858
+ <td class="py-2">Michael Brown</td>
859
+ <td class="py-2">Yesterday</td>
860
+ <td class="py-2">$245.50</td>
861
+ <td class="py-2">
862
+ <select class="border rounded px-2 py-1 text-xs">
863
+ <option selected>Pending</option>
864
+ <option>Processing</option>
865
+ <option>Shipped</option>
866
+ <option>Delivered</option>
867
+ <option>Cancelled</option>
868
+ </select>
869
+ </td>
870
+ <td class="py-2">
871
+ <button class="text-blue-500 hover:text-blue-700 mr-2">
872
+ <i class="fas fa-eye"></i>
873
+ </button>
874
+ <button class="text-red-500 hover:text-red-700">
875
+ <i class="fas fa-trash"></i>
876
+ </button>
877
+ </td>
878
+ </tr>
879
+ </tbody>
880
+ </table>
881
+ </div>
882
+ </div>
883
+ </div>
884
+
885
+ <div id="dashboardCustomers" class="dashboard-tab hidden">
886
+ <h4 class="text-xl font-semibold mb-4">Customers</h4>
887
+ <div class="bg-white p-4 rounded-lg shadow">
888
+ <div class="overflow-x-auto">
889
+ <table class="min-w-full">
890
+ <thead>
891
+ <tr class="border-b">
892
+ <th class="text-left py-2">Name</th>
893
+ <th class="text-left py-2">Email</th>
894
+ <th class="text-left py-2">Orders</th>
895
+ <th class="text-left py-2">Joined</th>
896
+ <th class="text-left py-2">Actions</th>
897
+ </tr>
898
+ </thead>
899
+ <tbody>
900
+ <tr class="border-b">
901
+ <td class="py-2">Sarah Johnson</td>
902
+ <td class="py-2">sarah@example.com</td>
903
+ <td class="py-2">5</td>
904
+ <td class="py-2">2 months ago</td>
905
+ <td class="py-2">
906
+ <button class="text-blue-500 hover:text-blue-700">
907
+ <i class="fas fa-eye"></i>
908
+ </button>
909
+ </td>
910
+ </tr>
911
+ <tr class="border-b">
912
+ <td class="py-2">Michael Brown</td>
913
+ <td class="py-2">michael@example.com</td>
914
+ <td class="py-2">3</td>
915
+ <td class="py-2">1 month ago</td>
916
+ <td class="py-2">
917
+ <button class="text-blue-500 hover:text-blue-700">
918
+ <i class="fas fa-eye"></i>
919
+ </button>
920
+ </td>
921
+ </tr>
922
+ </tbody>
923
+ </table>
924
+ </div>
925
+ </div>
926
+ </div>
927
+
928
+ <div id="dashboardAnalytics" class="dashboard-tab hidden">
929
+ <h4 class="text-xl font-semibold mb-4">Analytics</h4>
930
+ <div class="bg-white p-4 rounded-lg shadow mb-6">
931
+ <h5 class="font-semibold mb-3">Sales Overview</h5>
932
+ <div class="h-64 bg-gray-100 rounded flex items-center justify-center">
933
+ <p class="text-gray-500">Sales chart will be displayed here</p>
934
+ </div>
935
+ </div>
936
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
937
+ <div class="bg-white p-4 rounded-lg shadow">
938
+ <h5 class="font-semibold mb-3">Top Products</h5>
939
+ <div class="space-y-3">
940
+ <div>
941
+ <div class="flex justify-between mb-1">
942
+ <span>Signature Tee</span>
943
+ <span>45 sales</span>
944
+ </div>
945
+ <div class="w-full bg-gray-200 rounded-full h-2">
946
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div>
947
+ </div>
948
+ </div>
949
+ <div>
950
+ <div class="flex justify-between mb-1">
951
+ <span>Urban Hoodie</span>
952
+ <span>32 sales</span>
953
+ </div>
954
+ <div class="w-full bg-gray-200 rounded-full h-2">
955
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 55%"></div>
956
+ </div>
957
+ </div>
958
+ <div>
959
+ <div class="flex justify-between mb-1">
960
+ <span>Tailored Chinos</span>
961
+ <span>28 sales</span>
962
+ </div>
963
+ <div class="w-full bg-gray-200 rounded-full h-2">
964
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div>
965
+ </div>
966
+ </div>
967
+ </div>
968
+ </div>
969
+ <div class="bg-white p-4 rounded-lg shadow">
970
+ <h5 class="font-semibold mb-3">Traffic Sources</h5>
971
+ <div class="h-48 bg-gray-100 rounded flex items-center justify-center">
972
+ <p class="text-gray-500">Pie chart will be displayed here</p>
973
+ </div>
974
+ </div>
975
+ </div>
976
+ </div>
977
+
978
+ <div id="dashboardSettings" class="dashboard-tab hidden">
979
+ <h4 class="text-xl font-semibold mb-4">Settings</h4>
980
+ <div class="bg-white p-4 rounded-lg shadow">
981
+ <div class="mb-6">
982
+ <h5 class="font-semibold mb-3">General Settings</h5>
983
+ <div class="space-y-4">
984
+ <div>
985
+ <label class="block text-gray-700 mb-1">Store Name</label>
986
+ <input type="text" value="ELEVATE" class="w-full px-4 py-2 border rounded-lg">
987
+ </div>
988
+ <div>
989
+ <label class="block text-gray-700 mb-1">Store Logo</label>
990
+ <div class="flex items-center">
991
+ <img id="storeLogoPreview" src="https://via.placeholder.com/100" alt="Store Logo" class="h-16 w-16 rounded mr-4">
992
+ <input type="file" id="storeLogoUpload" class="hidden" accept="image/*">
993
+ <button onclick="document.getElementById('storeLogoUpload').click()" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg">
994
+ Change Logo
995
+ </button>
996
+ </div>
997
+ </div>
998
+ <div>
999
+ <label class="block text-gray-700 mb-1">Store Description</label>
1000
+ <textarea class="w-full px-4 py-2 border rounded-lg" rows="3">Premium clothing designed for those who dare to stand out.</textarea>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <div class="mb-6">
1006
+ <h5 class="font-semibold mb-3">Payment Settings</h5>
1007
+ <div class="space-y-4">
1008
+ <div class="flex items-center">
1009
+ <input type="checkbox" id="enableStripe" class="mr-2" checked>
1010
+ <label for="enableStripe">Enable Stripe Payments</label>
1011
+ </div>
1012
+ <div class="flex items-center">
1013
+ <input type="checkbox" id="enablePaypal" class="mr-2" checked>
1014
+ <label for="enablePaypal">Enable PayPal</label>
1015
+ </div>
1016
+ <div class="flex items-center">
1017
+ <input type="checkbox" id="enableCOD" class="mr-2" checked>
1018
+ <label for="enableCOD">Enable Cash on Delivery</label>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+
1023
+ <div>
1024
+ <h5 class="font-semibold mb-3">Shipping Settings</h5>
1025
+ <div class="space-y-4">
1026
+ <div>
1027
+ <label class="block text-gray-700 mb-1">Default Shipping Fee</label>
1028
+ <input type="number" value="5.99" class="w-full px-4 py-2 border rounded-lg">
1029
+ </div>
1030
+ <div>
1031
+ <label class="block text-gray-700 mb-1">Shipping Countries</label>
1032
+ <select multiple class="w-full px-4 py-2 border rounded-lg">
1033
+ <option selected>United States</option>
1034
+ <option selected>Canada</option>
1035
+ <option selected>United Kingdom</option>
1036
+ <option>Australia</option>
1037
+ <option>Germany</option>
1038
+ </select>
1039
+ </div>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <button class="bg-black text-white px-6 py-2 rounded-lg mt-6 hover:bg-gray-800">
1044
+ Save Settings
1045
+ </button>
1046
+ </div>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+ </div>
1053
+
1054
+ <!-- Edit Website Modal -->
1055
+ <div class="modal" id="editWebsiteModal">
1056
+ <div class="modal-content">
1057
+ <div class="p-6">
1058
+ <div class="flex justify-between items-center mb-6">
1059
+ <h3 class="text-2xl font-bold">Edit Website</h3>
1060
+ <button onclick="closeModal('editWebsiteModal')" class="text-gray-500 hover:text-gray-700">
1061
+ <i class="fas fa-times"></i>
1062
+ </button>
1063
+ </div>
1064
+
1065
+ <div class="space-y-6">
1066
+ <div>
1067
+ <h4 class="text-lg font-semibold mb-3">Brand Identity</h4>
1068
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1069
+ <div>
1070
+ <label class="block text-gray-700 mb-1">Brand Name</label>
1071
+ <input type="text" id="brandNameInput" value="ELEVATE" class="w-full px-4 py-2 border rounded-lg">
1072
+ </div>
1073
+ <div>
1074
+ <label class="block text-gray-700 mb-1">Brand Logo</label>
1075
+ <div class="flex items-center">
1076
+ <img id="brandLogoPreview" src="https://via.placeholder.com/100" alt="Brand Logo" class="h-16 w-16 rounded mr-4">
1077
+ <input type="file" id="brandLogoUpload" class="hidden" accept="image/*">
1078
+ <button onclick="document.getElementById('brandLogoUpload').click()" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg">
1079
+ Upload Logo
1080
+ </button>
1081
+ </div>
1082
+ </div>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <div>
1087
+ <h4 class="text-lg font-semibold mb-3">Hero Section</h4>
1088
+ <div class="mb-4">
1089
+ <label class="block text-gray-700 mb-1">Hero Title</label>
1090
+ <input type="text" id="heroTitleInput" value="Elevate Your Style" class="w-full px-4 py-2 border rounded-lg">
1091
+ </div>
1092
+ <div class="mb-4">
1093
+ <label class="block text-gray-700 mb-1">Hero Description</label>
1094
+ <textarea id="heroDescriptionInput" class="w-full px-4 py-2 border rounded-lg" rows="3">Premium clothing designed for those who dare to stand out. Crafted with precision, worn with confidence.</textarea>
1095
+ </div>
1096
+ <div>
1097
+ <label class="block text-gray-700 mb-1">Hero Image</label>
1098
+ <div class="flex items-center">
1099
+ <img id="heroImagePreview" src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Hero Image" class="h-24 w-24 rounded mr-4 object-cover">
1100
+ <input type="file" id="heroImageUpload" class="hidden" accept="image/*">
1101
+ <button onclick="document.getElementById('heroImageUpload').click()" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg">
1102
+ Upload Image
1103
+ </button>
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+
1108
+ <div>
1109
+ <h4 class="text-lg font-semibold mb-3">About Section</h4>
1110
+ <div class="mb-4">
1111
+ <label class="block text-gray-700 mb-1">About Title</label>
1112
+ <input type="text" id="aboutTitleInput" value="Our Story" class="w-full px-4 py-2 border rounded-lg">
1113
+ </div>
1114
+ <div class="mb-4">
1115
+ <label class="block text-gray-700 mb-1">About Content</label>
1116
+ <textarea id="aboutContentInput" class="w-full px-4 py-2 border rounded-lg" rows="5">Founded in 2015, ELEVATE began as a small boutique in downtown Los Angeles with a simple mission: to create clothing that combines exceptional quality with timeless design.
1117
+
1118
+ Every piece in our collection is thoughtfully designed and meticulously crafted to elevate your everyday wardrobe. We believe in sustainable practices, ethical sourcing, and creating garments that last.
1119
+
1120
+ Today, we're proud to serve customers worldwide who share our passion for elevated essentials and statement pieces.</textarea>
1121
+ </div>
1122
+ <div>
1123
+ <label class="block text-gray-700 mb-1">About Images</label>
1124
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
1125
+ <div class="relative">
1126
+ <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b3da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Image" class="h-24 w-full rounded object-cover">
1127
+ <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center">
1128
+ <i class="fas fa-times text-xs"></i>
1129
+ </button>
1130
+ </div>
1131
+ <div class="relative">
1132
+ <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Image" class="h-24 w-full rounded object-cover">
1133
+ <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center">
1134
+ <i class="fas fa-times text-xs"></i>
1135
+ </button>
1136
+ </div>
1137
+ <div class="relative">
1138
+ <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="About Image" class="h-24 w-full rounded object-cover">
1139
+ <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center">
1140
+ <i class="fas fa-times text-xs"></i>
1141
+ </button>
1142
+ </div>
1143
+ <div class="flex items-center justify-center border-2 border-dashed rounded h-24">
1144
+ <input type="file" id="aboutImageUpload" class="hidden" accept="image/*">
1145
+ <button onclick="document.getElementById('aboutImageUpload').click()" class="text-gray-500">
1146
+ <i class="fas fa-plus mr-1"></i> Add Image
1147
+ </button>
1148
+ </div>
1149
+ </div>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div>
1154
+ <h4 class="text-lg font-semibold mb-3">Contact Information</h4>
1155
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1156
+ <div>
1157
+ <label class="block text-gray-700 mb-1">Store Address</label>
1158
+ <input type="text" id="storeAddressInput" value="123 Fashion Avenue, Los Angeles, CA 90015" class="w-full px-4 py-2 border rounded-lg">
1159
+ </div>
1160
+ <div>
1161
+ <label class="block text-gray-700 mb-1">Email</label>
1162
+ <input type="email" id="storeEmailInput" value="hello@elevateclothing.com" class="w-full px-4 py-2 border rounded-lg">
1163
+ </div>
1164
+ <div>
1165
+ <label class="block text-gray-700 mb-1">Phone</label>
1166
+ <input type="tel" id="storePhoneInput" value="+1 (555) 123-4567" class="w-full px-4 py-2 border rounded-lg">
1167
+ </div>
1168
+ <div>
1169
+ <label class="block text-gray-700 mb-1">Social Media Links</label>
1170
+ <div class="flex space-x-2">
1171
+ <input type="text" placeholder="Instagram" class="flex-1 px-4 py-2 border rounded-lg">
1172
+ <input type="text" placeholder="Facebook" class="flex-1 px-4 py-2 border rounded-lg">
1173
+ </div>
1174
+ </div>
1175
+ </div>
1176
+ </div>
1177
+
1178
+ <div class="flex justify-end space-x-4 pt-4">
1179
+ <button onclick="closeModal('editWebsiteModal')" class="border border-gray-300 px-6 py-2 rounded-lg hover:bg-gray-100">
1180
+ Cancel
1181
+ </button>
1182
+ <button onclick="saveWebsiteChanges()" class="bg-black text-white px-6 py-2 rounded-lg hover:bg-gray-800">
1183
+ Save Changes
1184
+ </button>
1185
+ </div>
1186
+ </div>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+
1191
+ <!-- Manage Products Modal -->
1192
+ <div class="modal" id="manageProductsModal">
1193
+ <div class="modal-content">
1194
+ <div class="p-6">
1195
+ <div class="flex justify-between items-center mb-6">
1196
+ <h3 class="text-2xl font-bold">Manage Products</h3>
1197
+ <button onclick="closeModal('manageProductsModal')" class="text-gray-500 hover:text-gray-700">
1198
+ <i class="fas fa-times"></i>
1199
+ </button>
1200
+ </div>
1201
+
1202
+ <div class="mb-6">
1203
+ <button onclick="openModal('addProductModal')" class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800">
1204
+ <i class="fas fa-plus mr-1"></i> Add New Product
1205
+ </button>
1206
+ </div>
1207
+
1208
+ <div class="bg-white rounded-lg shadow overflow-hidden">
1209
+ <div class="overflow-x-auto">
1210
+ <table class="min-w-full">
1211
+ <thead>
1212
+ <tr class="border-b bg-gray-50">
1213
+ <th class="text-left py-3 px-4">Image</th>
1214
+ <th class="text-left py-3 px-4">Name</th>
1215
+ <th class="text-left py-3 px-4">Price</th>
1216
+ <th class="text-left py-3 px-4">Stock</th>
1217
+ <th class="text-left py-3 px-4">Actions</th>
1218
+ </tr>
1219
+ </thead>
1220
+ <tbody id="productManagementTable">
1221
+ <!-- Products will be loaded here -->
1222
+ </tbody>
1223
+ </table>
1224
+ </div>
1225
+ </div>
1226
+ </div>
1227
+ </div>
1228
+ </div>
1229
+
1230
+ <!-- Add/Edit Product Modal -->
1231
+ <div class="modal" id="addProductModal">
1232
+ <div class="modal-content">
1233
+ <div class="p-6">
1234
+ <div class="flex justify-between items-center mb-6">
1235
+ <h3 class="text-2xl font-bold" id="productModalTitle">Add New Product</h3>
1236
+ <button onclick="closeModal('addProductModal')" class="text-gray-500 hover:text-gray-700">
1237
+ <i class="fas fa-times"></i>
1238
+ </button>
1239
+ </div>
1240
+
1241
+ <div class="space-y-6">
1242
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1243
+ <div>
1244
+ <label class="block text-gray-700 mb-1">Product Name</label>
1245
+ <input type="text" id="productNameInput" class="w-full px-4 py-2 border rounded-lg" placeholder="e.g. Signature Tee">
1246
+ </div>
1247
+ <div>
1248
+ <label class="block text-gray-700 mb-1">Category</label>
1249
+ <select id="productCategoryInput" class="w-full px-4 py-2 border rounded-lg">
1250
+ <option value="">Select Category</option>
1251
+ <option value="T-Shirts">T-Shirts</option>
1252
+ <option value="Hoodies">Hoodies</option>
1253
+ <option value="Pants">Pants</option>
1254
+ <option value="Jackets">Jackets</option>
1255
+ <option value="Accessories">Accessories</option>
1256
+ </select>
1257
+ </div>
1258
+ </div>
1259
+
1260
+ <div>
1261
+ <label class="block text-gray-700 mb-1">Description</label>
1262
+ <textarea id="productDescriptionInput" class="w-full px-4 py-2 border rounded-lg" rows="3" placeholder="Enter product description"></textarea>
1263
+ </div>
1264
+
1265
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
1266
+ <div>
1267
+ <label class="block text-gray-700 mb-1">Price ($)</label>
1268
+ <input type="number" id="productPriceInput" class="w-full px-4 py-2 border rounded-lg" placeholder="49.99">
1269
+ </div>
1270
+ <div>
1271
+ <label class="block text-gray-700 mb-1">Stock Quantity</label>
1272
+ <input type="number" id="productStockInput" class="w-full px-4 py-2 border rounded-lg" placeholder="100">
1273
+ </div>
1274
+ <div>
1275
+ <label class="block text-gray-700 mb-1">SKU</label>
1276
+ <input type="text" id="productSkuInput" class="w-full px-4 py-2 border rounded-lg" placeholder="ELV-TEE-001">
1277
+ </div>
1278
+ </div>
1279
+
1280
+ <div>
1281
+ <label class="block text-gray-700 mb-1">Product Images</label>
1282
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
1283
+ <div class="flex items-center justify-center border-2 border-dashed rounded h-32">
1284
+ <input type="file" id="productImageUpload" class="hidden" accept="image/*" multiple>
1285
+ <button onclick="document.getElementById('productImageUpload').click()" class="text-gray-500">
1286
+ <i class="fas fa-plus mr-1"></i> Add Images
1287
+ </button>
1288
+ </div>
1289
+ </div>
1290
+ <div id="productImagesPreview" class="grid grid-cols-2 md:grid-cols-4 gap-4">
1291
+ <!-- Product images will be previewed here -->
1292
+ </div>
1293
+ </div>
1294
+
1295
+ <div>
1296
+ <label class="block text-gray-700 mb-1">Product Variants</label>
1297
+ <div class="bg-gray-50 p-4 rounded-lg">
1298
+ <div class="mb-4">
1299
+ <div class="flex items-center mb-2">
1300
+ <input type="checkbox" id="hasSizes" class="mr-2">
1301
+ <label for="hasSizes">This product has sizes</label>
1302
+ </div>
1303
+ <div id="sizeOptions" class="hidden space-y-2 ml-6">
1304
+ <div class="flex flex-wrap gap-2">
1305
+ <label class="inline-flex items-center">
1306
+ <input type="checkbox" class="mr-1"> XS
1307
+ </label>
1308
+ <label class="inline-flex items-center">
1309
+ <input type="checkbox" class="mr-1"> S
1310
+ </label>
1311
+ <label class="inline-flex items-center">
1312
+ <input type="checkbox" class="mr-1" checked> M
1313
+ </label>
1314
+ <label class="inline-flex items-center">
1315
+ <input type="checkbox" class="mr-1" checked> L
1316
+ </label>
1317
+ <label class="inline-flex items-center">
1318
+ <input type="checkbox" class="mr-1"> XL
1319
+ </label>
1320
+ <label class="inline-flex items-center">
1321
+ <input type="checkbox" class="mr-1"> XXL
1322
+ </
1323
+ </html>
prompts.txt ADDED
File without changes