Hugging Face's logo

Spaces:
Cyrano2
/
amazon-detail
Running

App Files Community
Cyrano2 commited on
Commit
786cca8
·
verified ·
1 Parent(s): 708274c

Clone amazon detail product page - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +879 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Amazon Detail
3
- emoji: 🏢
4
- colorFrom: pink
5
  colorTo: green
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: amazon-detail
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: green
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,879 @@
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>Amazon Product Page</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .product-gallery {
11
+ display: grid;
12
+ grid-template-columns: 80px 1fr;
13
+ gap: 15px;
14
+ }
15
+ .thumbnail-container {
16
+ display: flex;
17
+ flex-direction: column;
18
+ gap: 10px;
19
+ }
20
+ .thumbnail {
21
+ border: 1px solid #ddd;
22
+ cursor: pointer;
23
+ transition: all 0.3s;
24
+ }
25
+ .thumbnail:hover, .thumbnail.active {
26
+ border-color: #e77600;
27
+ box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
28
+ }
29
+ .main-image {
30
+ position: relative;
31
+ }
32
+ .zoom-lens {
33
+ position: absolute;
34
+ border: 1px solid #d4d4d4;
35
+ background-color: rgba(255, 255, 255, 0.5);
36
+ display: none;
37
+ }
38
+ .zoom-result {
39
+ position: absolute;
40
+ left: 105%;
41
+ width: 400px;
42
+ height: 400px;
43
+ border: 1px solid #d4d4d4;
44
+ background-repeat: no-repeat;
45
+ display: none;
46
+ z-index: 100;
47
+ }
48
+ .delivery-option {
49
+ border-left: 3px solid #e77600;
50
+ padding-left: 10px;
51
+ }
52
+ .color-option {
53
+ border: 1px solid #ddd;
54
+ padding: 2px;
55
+ cursor: pointer;
56
+ }
57
+ .color-option.selected {
58
+ border-color: #e77600;
59
+ box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
60
+ }
61
+ .progress-bar {
62
+ height: 4px;
63
+ background: linear-gradient(to right, #ffa41c 80%, #ddd 80%);
64
+ }
65
+ .accordion-content {
66
+ max-height: 0;
67
+ overflow: hidden;
68
+ transition: max-height 0.3s ease-out;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-100">
73
+ <!-- Header -->
74
+ <header class="bg-gray-900 text-white">
75
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
76
+ <div class="flex items-center">
77
+ <div class="mr-4">
78
+ <a href="#" class="text-2xl font-bold text-white">Amazon</a>
79
+ </div>
80
+ <div class="hidden md:flex items-center">
81
+ <i class="fas fa-map-marker-alt mr-1"></i>
82
+ <div>
83
+ <div class="text-xs text-gray-300">Deliver to</div>
84
+ <div class="text-sm font-bold">United States</div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="flex-1 mx-4 hidden md:block">
90
+ <div class="relative">
91
+ <select class="h-10 rounded-l-md border-r border-gray-300 bg-gray-100 text-black px-2 text-sm">
92
+ <option>All</option>
93
+ <option>Electronics</option>
94
+ <option>Books</option>
95
+ <option>Home</option>
96
+ </select>
97
+ <input type="text" class="h-10 w-full px-4 text-black" placeholder="Search Amazon">
98
+ <button class="absolute right-0 top-0 h-10 px-4 bg-yellow-400 rounded-r-md hover:bg-yellow-500">
99
+ <i class="fas fa-search"></i>
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <div class="flex items-center">
105
+ <div class="hidden md:block mx-2">
106
+ <div class="text-xs">Hello, Sign in</div>
107
+ <div class="text-sm font-bold">Account & Lists</div>
108
+ </div>
109
+ <div class="hidden md:block mx-2">
110
+ <div class="text-xs">Returns</div>
111
+ <div class="text-sm font-bold">& Orders</div>
112
+ </div>
113
+ <div class="mx-2 flex items-center">
114
+ <i class="fas fa-shopping-cart text-2xl"></i>
115
+ <span class="ml-1 text-sm font-bold">Cart</span>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="bg-gray-800 py-2 px-4 flex items-center text-sm overflow-x-auto">
121
+ <a href="#" class="flex items-center mr-6 whitespace-nowrap">
122
+ <i class="fas fa-bars mr-1"></i>
123
+ <span>All</span>
124
+ </a>
125
+ <a href="#" class="mr-6 whitespace-nowrap">Today's Deals</a>
126
+ <a href="#" class="mr-6 whitespace-nowrap">Customer Service</a>
127
+ <a href="#" class="mr-6 whitespace-nowrap">Registry</a>
128
+ <a href="#" class="mr-6 whitespace-nowrap">Gift Cards</a>
129
+ <a href="#" class="whitespace-nowrap">Sell</a>
130
+ </div>
131
+ </header>
132
+
133
+ <!-- Breadcrumb -->
134
+ <div class="bg-gray-200 py-2 px-4 text-sm">
135
+ <div class="container mx-auto">
136
+ <a href="#" class="text-blue-600 hover:underline">Electronics</a>
137
+ <span class="mx-1">></span>
138
+ <a href="#" class="text-blue-600 hover:underline">Computers & Accessories</a>
139
+ <span class="mx-1">></span>
140
+ <a href="#" class="text-blue-600 hover:underline">Laptops</a>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Main Content -->
145
+ <main class="container mx-auto px-4 py-6">
146
+ <div class="bg-white p-6 rounded-lg shadow-sm">
147
+ <!-- Product Info Section -->
148
+ <div class="md:flex">
149
+ <!-- Product Gallery -->
150
+ <div class="md:w-2/5 product-gallery">
151
+ <div class="thumbnail-container">
152
+ <img src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX679_.jpg" class="thumbnail w-full h-20 object-contain active" alt="Thumbnail 1">
153
+ <img src="https://m.media-amazon.com/images/I/71WkD5--Q6L._AC_SX679_.jpg" class="thumbnail w-full h-20 object-contain" alt="Thumbnail 2">
154
+ <img src="https://m.media-amazon.com/images/I/71TPda7cwUL._AC_SX679_.jpg" class="thumbnail w-full h-20 object-contain" alt="Thumbnail 3">
155
+ <img src="https://m.media-amazon.com/images/I/71yZyrDyqVL._AC_SX679_.jpg" class="thumbnail w-full h-20 object-contain" alt="Thumbnail 4">
156
+ </div>
157
+ <div class="main-image relative">
158
+ <img id="mainImage" src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX679_.jpg" class="w-full h-auto max-h-96 object-contain" alt="Main Product Image">
159
+ <div class="zoom-lens"></div>
160
+ <div class="zoom-result"></div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Product Details -->
165
+ <div class="md:w-3/5 md:pl-8 mt-6 md:mt-0">
166
+ <h1 class="text-2xl font-medium">Apple MacBook Pro (16-inch, M1 Pro chip with 10‑core CPU and 16‑core GPU, 16GB RAM, 1TB SSD) - Space Gray</h1>
167
+ <div class="flex items-center mt-2">
168
+ <div class="flex text-yellow-400">
169
+ <i class="fas fa-star"></i>
170
+ <i class="fas fa-star"></i>
171
+ <i class="fas fa-star"></i>
172
+ <i class="fas fa-star"></i>
173
+ <i class="fas fa-star-half-alt"></i>
174
+ </div>
175
+ <a href="#reviews" class="text-blue-600 hover:underline ml-2">12,345 ratings</a>
176
+ <span class="mx-2">|</span>
177
+ <a href="#qa" class="text-blue-600 hover:underline">1,234 answered questions</a>
178
+ </div>
179
+
180
+ <div class="mt-4">
181
+ <div class="text-red-600 text-lg font-medium">$2,399.00</div>
182
+ <div class="text-sm text-gray-600">$2,499.00 (4% off)</div>
183
+ <div class="text-sm mt-1">No Import Fees Deposit & $18.98 Shipping to United States</div>
184
+ <div class="text-green-700 text-sm mt-1">In Stock</div>
185
+ </div>
186
+
187
+ <div class="mt-4">
188
+ <div class="font-medium">About this item</div>
189
+ <ul class="list-disc pl-5 mt-2 space-y-1">
190
+ <li>Apple M1 Pro or M1 Max chip for a massive leap in CPU, GPU, and machine learning performance</li>
191
+ <li>Up to 10-core CPU delivers up to 2x faster performance to fly through pro workflows quicker than ever</li>
192
+ <li>Up to 32-core GPU with up to 4x faster performance for graphics-intensive apps and games</li>
193
+ <li>16-core Neural Engine for up to 5x faster machine learning performance</li>
194
+ <li>Longer battery life, up to 21 hours</li>
195
+ </ul>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Purchase Options -->
201
+ <div class="mt-8 border-t pt-6">
202
+ <div class="md:flex">
203
+ <div class="md:w-2/5">
204
+ <div class="font-medium mb-2">Color: <span class="font-normal" id="selectedColor">Space Gray</span></div>
205
+ <div class="flex space-x-2">
206
+ <div class="color-option selected" data-color="Space Gray" data-image="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX679_.jpg">
207
+ <img src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX45_.jpg" alt="Space Gray" class="w-12 h-12 object-contain">
208
+ </div>
209
+ <div class="color-option" data-color="Silver" data-image="https://m.media-amazon.com/images/I/71TPda7cwUL._AC_SX679_.jpg">
210
+ <img src="https://m.media-amazon.com/images/I/71TPda7cwUL._AC_SX45_.jpg" alt="Silver" class="w-12 h-12 object-contain">
211
+ </div>
212
+ </div>
213
+
214
+ <div class="mt-4">
215
+ <div class="font-medium mb-2">Size: <span class="font-normal">16-inch</span></div>
216
+ <div class="font-medium mb-2">Configuration: <span class="font-normal">M1 Pro, 16GB RAM, 1TB SSD</span></div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="md:w-3/5 md:pl-8 mt-6 md:mt-0">
221
+ <div class="border rounded-md p-4">
222
+ <div class="text-xl font-medium">$2,399.00</div>
223
+ <div class="text-sm text-gray-600 mt-1">$2,499.00 (4% off)</div>
224
+
225
+ <div class="mt-3 delivery-option">
226
+ <div class="font-medium">FREE delivery <span class="font-normal">Monday, June 5</span></div>
227
+ <div class="text-sm">Order within 5 hrs 26 mins</div>
228
+ <div class="text-sm flex items-center mt-1">
229
+ <i class="fas fa-map-marker-alt mr-1"></i>
230
+ <span>Deliver to United States</span>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="mt-3">
235
+ <div class="text-green-700 font-medium">In Stock</div>
236
+ <div class="text-sm mt-1">Sold by Amazon.com and ships from Amazon Fulfillment</div>
237
+ </div>
238
+
239
+ <div class="mt-4">
240
+ <select class="w-full p-2 border rounded-md bg-gray-100">
241
+ <option>Qty: 1</option>
242
+ <option>2</option>
243
+ <option>3</option>
244
+ <option>4</option>
245
+ <option>5</option>
246
+ </select>
247
+ </div>
248
+
249
+ <div class="mt-4 space-y-2">
250
+ <button class="w-full bg-yellow-400 hover:bg-yellow-500 py-2 rounded-full font-medium">
251
+ Add to Cart
252
+ </button>
253
+ <button class="w-full bg-orange-400 hover:bg-orange-500 py-2 rounded-full font-medium">
254
+ Buy Now
255
+ </button>
256
+ </div>
257
+
258
+ <div class="mt-3 text-sm">
259
+ <div class="flex items-center">
260
+ <input type="checkbox" id="addGift" class="mr-2">
261
+ <label for="addGift">Add a gift receipt for easy returns</label>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="mt-3 text-sm flex items-center">
266
+ <i class="fas fa-lock mr-1"></i>
267
+ <span>Secure transaction</span>
268
+ </div>
269
+ </div>
270
+
271
+ <div class="mt-4 flex items-center text-sm">
272
+ <span>Add to List</span>
273
+ <button class="ml-4 text-blue-600 hover:underline">Add to Wish List</button>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Additional Info -->
280
+ <div class="mt-8 border-t pt-6">
281
+ <h2 class="text-xl font-medium mb-4">Product information</h2>
282
+
283
+ <div class="grid md:grid-cols-2 gap-4">
284
+ <div>
285
+ <table class="w-full">
286
+ <tr class="border-b">
287
+ <td class="py-2 font-medium bg-gray-100">Brand</td>
288
+ <td class="py-2">Apple</td>
289
+ </tr>
290
+ <tr class="border-b">
291
+ <td class="py-2 font-medium bg-gray-100">Model Name</td>
292
+ <td class="py-2">MacBook Pro</td>
293
+ </tr>
294
+ <tr class="border-b">
295
+ <td class="py-2 font-medium bg-gray-100">Screen Size</td>
296
+ <td class="py-2">16 Inches</td>
297
+ </tr>
298
+ <tr class="border-b">
299
+ <td class="py-2 font-medium bg-gray-100">Color</td>
300
+ <td class="py-2">Space Gray</td>
301
+ </tr>
302
+ </table>
303
+ </div>
304
+ <div>
305
+ <table class="w-full">
306
+ <tr class="border-b">
307
+ <td class="py-2 font-medium bg-gray-100">Hard Disk Size</td>
308
+ <td class="py-2">1 TB</td>
309
+ </tr>
310
+ <tr class="border-b">
311
+ <td class="py-2 font-medium bg-gray-100">CPU Model</td>
312
+ <td class="py-2">Apple M1 Pro</td>
313
+ </tr>
314
+ <tr class="border-b">
315
+ <td class="py-2 font-medium bg-gray-100">RAM Memory</td>
316
+ <td class="py-2">16 GB</td>
317
+ </tr>
318
+ <tr class="border-b">
319
+ <td class="py-2 font-medium bg-gray-100">Operating System</td>
320
+ <td class="py-2">Mac OS</td>
321
+ </tr>
322
+ </table>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Customer Reviews -->
328
+ <div id="reviews" class="mt-8 border-t pt-6">
329
+ <h2 class="text-xl font-medium mb-4">Customer reviews</h2>
330
+
331
+ <div class="md:flex">
332
+ <div class="md:w-1/3 text-center">
333
+ <div class="text-4xl font-light">4.7</div>
334
+ <div class="flex justify-center text-yellow-400 mt-1">
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star"></i>
339
+ <i class="fas fa-star-half-alt"></i>
340
+ </div>
341
+ <div class="text-sm text-gray-600 mt-1">12,345 global ratings</div>
342
+ </div>
343
+
344
+ <div class="md:w-2/3 mt-6 md:mt-0">
345
+ <div class="space-y-2">
346
+ <div class="flex items-center">
347
+ <span class="w-20 text-sm">5 star</span>
348
+ <div class="flex-1 mx-2">
349
+ <div class="progress-bar w-full"></div>
350
+ </div>
351
+ <span class="w-10 text-sm text-right">80%</span>
352
+ </div>
353
+ <div class="flex items-center">
354
+ <span class="w-20 text-sm">4 star</span>
355
+ <div class="flex-1 mx-2">
356
+ <div class="progress-bar w-full" style="background: linear-gradient(to right, #ffa41c 15%, #ddd 15%)"></div>
357
+ </div>
358
+ <span class="w-10 text-sm text-right">15%</span>
359
+ </div>
360
+ <div class="flex items-center">
361
+ <span class="w-20 text-sm">3 star</span>
362
+ <div class="flex-1 mx-2">
363
+ <div class="progress-bar w-full" style="background: linear-gradient(to right, #ffa41c 3%, #ddd 3%)"></div>
364
+ </div>
365
+ <span class="w-10 text-sm text-right">3%</span>
366
+ </div>
367
+ <div class="flex items-center">
368
+ <span class="w-20 text-sm">2 star</span>
369
+ <div class="flex-1 mx-2">
370
+ <div class="progress-bar w-full" style="background: linear-gradient(to right, #ffa41c 1%, #ddd 1%)"></div>
371
+ </div>
372
+ <span class="w-10 text-sm text-right">1%</span>
373
+ </div>
374
+ <div class="flex items-center">
375
+ <span class="w-20 text-sm">1 star</span>
376
+ <div class="flex-1 mx-2">
377
+ <div class="progress-bar w-full" style="background: linear-gradient(to right, #ffa41c 1%, #ddd 1%)"></div>
378
+ </div>
379
+ <span class="w-10 text-sm text-right">1%</span>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="mt-6">
386
+ <h3 class="font-medium">Review this product</h3>
387
+ <p class="text-sm mt-1">Share your thoughts with other customers</p>
388
+ <button class="mt-2 bg-gray-200 hover:bg-gray-300 px-4 py-1 rounded-full text-sm font-medium">
389
+ Write a customer review
390
+ </button>
391
+ </div>
392
+
393
+ <div class="mt-6">
394
+ <h3 class="font-medium">Top reviews from the United States</h3>
395
+
396
+ <div class="mt-4 space-y-6">
397
+ <!-- Review 1 -->
398
+ <div>
399
+ <div class="flex items-center">
400
+ <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center">
401
+ <span class="text-lg">J</span>
402
+ </div>
403
+ <div class="ml-3">
404
+ <div class="font-medium">John D.</div>
405
+ <div class="flex text-yellow-400 text-sm">
406
+ <i class="fas fa-star"></i>
407
+ <i class="fas fa-star"></i>
408
+ <i class="fas fa-star"></i>
409
+ <i class="fas fa-star"></i>
410
+ <i class="fas fa-star"></i>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ <div class="mt-2">
415
+ <div class="font-medium">Amazing performance!</div>
416
+ <p class="mt-1 text-sm">This MacBook Pro is a beast! The M1 Pro chip handles everything I throw at it with ease. The battery life is incredible, and the display is stunning. Worth every penny.</p>
417
+ <div class="text-xs text-gray-500 mt-2">Reviewed in the United States on May 15, 2023</div>
418
+ <div class="mt-2 text-sm">
419
+ <span class="font-medium">Verified Purchase</span>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <!-- Review 2 -->
425
+ <div>
426
+ <div class="flex items-center">
427
+ <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center">
428
+ <span class="text-lg">S</span>
429
+ </div>
430
+ <div class="ml-3">
431
+ <div class="font-medium">Sarah M.</div>
432
+ <div class="flex text-yellow-400 text-sm">
433
+ <i class="fas fa-star"></i>
434
+ <i class="fas fa-star"></i>
435
+ <i class="fas fa-star"></i>
436
+ <i class="fas fa-star"></i>
437
+ <i class="fas fa-star-half-alt"></i>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ <div class="mt-2">
442
+ <div class="font-medium">Great but expensive</div>
443
+ <p class="mt-1 text-sm">The performance is outstanding and the build quality is excellent as expected from Apple. My only complaint is the price - it's quite steep, but you get what you pay for.</p>
444
+ <div class="text-xs text-gray-500 mt-2">Reviewed in the United States on April 28, 2023</div>
445
+ <div class="mt-2 text-sm">
446
+ <span class="font-medium">Verified Purchase</span>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="mt-6 text-center">
453
+ <button class="text-blue-600 hover:underline">See all reviews</button>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Frequently Bought Together -->
459
+ <div class="mt-8 border-t pt-6">
460
+ <h2 class="text-xl font-medium mb-4">Frequently bought together</h2>
461
+
462
+ <div class="md:flex items-start">
463
+ <div class="flex">
464
+ <div class="w-24 h-24 bg-white border rounded flex items-center justify-center">
465
+ <img src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX45_.jpg" alt="MacBook Pro" class="w-20 h-20 object-contain">
466
+ </div>
467
+ <div class="mx-2 text-2xl flex items-center">+</div>
468
+ <div class="w-24 h-24 bg-white border rounded flex items-center justify-center">
469
+ <img src="https://m.media-amazon.com/images/I/71WkD5--Q6L._AC_SX45_.jpg" alt="USB-C Adapter" class="w-20 h-20 object-contain">
470
+ </div>
471
+ <div class="mx-2 text-2xl flex items-center">+</div>
472
+ <div class="w-24 h-24 bg-white border rounded flex items-center justify-center">
473
+ <img src="https://m.media-amazon.com/images/I/71TPda7cwUL._AC_SX45_.jpg" alt="Case" class="w-20 h-20 object-contain">
474
+ </div>
475
+ </div>
476
+
477
+ <div class="md:ml-6 mt-4 md:mt-0">
478
+ <div class="text-lg font-medium">Total price: <span class="text-red-600">$2,498.98</span></div>
479
+ <div class="mt-2">
480
+ <button class="bg-yellow-400 hover:bg-yellow-500 px-4 py-1 rounded-full text-sm font-medium">
481
+ Add all three to Cart
482
+ </button>
483
+ </div>
484
+ <div class="mt-2 text-sm">
485
+ <div class="flex items-center">
486
+ <input type="checkbox" id="addAll" class="mr-2" checked>
487
+ <label for="addAll">This item: Apple MacBook Pro (16-inch, M1 Pro) - $2,399.00</label>
488
+ </div>
489
+ <div class="flex items-center mt-1">
490
+ <input type="checkbox" id="addAdapter" class="mr-2" checked>
491
+ <label for="addAdapter">USB-C to USB Adapter - $19.99</label>
492
+ </div>
493
+ <div class="flex items-center mt-1">
494
+ <input type="checkbox" id="addCase" class="mr-2" checked>
495
+ <label for="addCase">MacBook Pro 16" Case - $79.99</label>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- Product Q&A -->
503
+ <div id="qa" class="mt-8 border-t pt-6">
504
+ <h2 class="text-xl font-medium mb-4">Customer questions & answers</h2>
505
+
506
+ <div class="mb-4">
507
+ <div class="relative">
508
+ <input type="text" placeholder="Search questions" class="w-full p-2 border rounded-md pl-10">
509
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="space-y-4">
514
+ <!-- Question 1 -->
515
+ <div>
516
+ <div class="font-medium">Does this model have the Touch Bar?</div>
517
+ <div class="text-sm mt-1">Yes, the 16-inch MacBook Pro features the Touch Bar with integrated Touch ID sensor.</div>
518
+ <div class="text-xs text-gray-500 mt-2">Answered by Amazon Customer · 3 months ago</div>
519
+ <div class="mt-2 text-sm">
520
+ <span class="text-blue-600 hover:underline cursor-pointer">5 people found this helpful</span>
521
+ <span class="mx-2">·</span>
522
+ <span class="text-blue-600 hover:underline cursor-pointer">Report</span>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- Question 2 -->
527
+ <div>
528
+ <div class="font-medium">Is the RAM upgradable?</div>
529
+ <div class="text-sm mt-1">No, the RAM is soldered to the logic board and cannot be upgraded after purchase. Make sure to choose the right configuration when ordering.</div>
530
+ <div class="text-xs text-gray-500 mt-2">Answered by Apple Support · 4 months ago</div>
531
+ <div class="mt-2 text-sm">
532
+ <span class="text-blue-600 hover:underline cursor-pointer">12 people found this helpful</span>
533
+ <span class="mx-2">·</span>
534
+ <span class="text-blue-600 hover:underline cursor-pointer">Report</span>
535
+ </div>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="mt-6">
540
+ <button class="text-blue-600 hover:underline">See all questions</button>
541
+ </div>
542
+
543
+ <div class="mt-6">
544
+ <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md text-sm font-medium">
545
+ Ask a question
546
+ </button>
547
+ </div>
548
+ </div>
549
+
550
+ <!-- Product Comparison -->
551
+ <div class="mt-8 border-t pt-6">
552
+ <h2 class="text-xl font-medium mb-4">Compare with similar items</h2>
553
+
554
+ <div class="overflow-x-auto">
555
+ <table class="w-full">
556
+ <thead>
557
+ <tr class="border-b">
558
+ <th class="text-left py-2">Product</th>
559
+ <th class="text-left py-2">Price</th>
560
+ <th class="text-left py-2">Processor</th>
561
+ <th class="text-left py-2">RAM</th>
562
+ <th class="text-left py-2">Storage</th>
563
+ <th class="text-left py-2">Rating</th>
564
+ </tr>
565
+ </thead>
566
+ <tbody>
567
+ <tr class="border-b hover:bg-gray-50">
568
+ <td class="py-3">
569
+ <div class="flex items-center">
570
+ <img src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX45_.jpg" alt="MacBook Pro" class="w-10 h-10 object-contain mr-2">
571
+ <span>MacBook Pro 16" M1 Pro</span>
572
+ </div>
573
+ </td>
574
+ <td class="py-3">$2,399.00</td>
575
+ <td class="py-3">M1 Pro 10-core</td>
576
+ <td class="py-3">16GB</td>
577
+ <td class="py-3">1TB SSD</td>
578
+ <td class="py-3">
579
+ <div class="flex text-yellow-400 text-sm">
580
+ <i class="fas fa-star"></i>
581
+ <i class="fas fa-star"></i>
582
+ <i class="fas fa-star"></i>
583
+ <i class="fas fa-star"></i>
584
+ <i class="fas fa-star-half-alt"></i>
585
+ </div>
586
+ </td>
587
+ </tr>
588
+ <tr class="border-b hover:bg-gray-50">
589
+ <td class="py-3">
590
+ <div class="flex items-center">
591
+ <img src="https://m.media-amazon.com/images/I/61lYIKPieDL._AC_SX45_.jpg" alt="MacBook Air" class="w-10 h-10 object-contain mr-2">
592
+ <span>MacBook Air M2</span>
593
+ </div>
594
+ </td>
595
+ <td class="py-3">$1,199.00</td>
596
+ <td class="py-3">M2 8-core</td>
597
+ <td class="py-3">8GB</td>
598
+ <td class="py-3">256GB SSD</td>
599
+ <td class="py-3">
600
+ <div class="flex text-yellow-400 text-sm">
601
+ <i class="fas fa-star"></i>
602
+ <i class="fas fa-star"></i>
603
+ <i class="fas fa-star"></i>
604
+ <i class="fas fa-star"></i>
605
+ <i class="fas fa-star"></i>
606
+ </div>
607
+ </td>
608
+ </tr>
609
+ </tbody>
610
+ </table>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- Product Description -->
615
+ <div class="mt-8 border-t pt-6">
616
+ <h2 class="text-xl font-medium mb-4">From the manufacturer</h2>
617
+
618
+ <div class="mt-4">
619
+ <img src="https://m.media-amazon.com/images/I/71yZyrDyqVL._AC_SX679_.jpg" alt="MacBook Pro Features" class="w-full">
620
+ </div>
621
+
622
+ <div class="mt-6">
623
+ <h3 class="font-medium">Supercharged for pros</h3>
624
+ <p class="mt-2">The most powerful MacBook Pro ever is here. With the blazing-fast M1 Pro or M1 Max chip — the first Apple silicon designed for pros — you get groundbreaking performance and amazing battery life. Add to that a stunning Liquid Retina XDR display, the best camera and audio ever in a Mac notebook, and all the ports you need. The first notebook of its kind, this MacBook Pro is a beast.</p>
625
+ </div>
626
+
627
+ <div class="mt-6 grid md:grid-cols-2 gap-6">
628
+ <div>
629
+ <h3 class="font-medium">M1 Pro or M1 Max chip</h3>
630
+ <p class="mt-2">The M1 Pro and M1 Max scale the amazing benefits of Apple silicon to new heights — and for the first time, they bring a system on a chip (SoC) architecture to a pro notebook. Both have more CPU cores, more GPU cores, and more unified memory than M1. Along with a powerful Neural Engine for supercharged machine learning and upgraded media engines with ProRes support, M1 Pro and M1 Max allow pros to push their creativity even further.</p>
631
+ </div>
632
+ <div>
633
+ <h3 class="font-medium">Liquid Retina XDR display</h3>
634
+ <p class="mt-2">The best display ever in a Mac notebook. The 16-inch Liquid Retina XDR display features extreme dynamic range, a million-to-one contrast ratio, and breathtaking brightness. It supports 1 billion colors, wide color gamut P3, and features pro reference modes for doing your best work on the go.</p>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <!-- Product Specifications -->
640
+ <div class="mt-8 border-t pt-6">
641
+ <h2 class="text-xl font-medium mb-4">Technical Details</h2>
642
+
643
+ <div class="accordion">
644
+ <div class="border-b py-3">
645
+ <div class="flex justify-between items-center cursor-pointer accordion-header">
646
+ <h3 class="font-medium">Display</h3>
647
+ <i class="fas fa-chevron-down transition-transform"></i>
648
+ </div>
649
+ <div class="accordion-content">
650
+ <table class="w-full mt-2">
651
+ <tr>
652
+ <td class="py-1 font-medium w-1/3">Screen Size</td>
653
+ <td class="py-1">16 Inches</td>
654
+ </tr>
655
+ <tr>
656
+ <td class="py-1 font-medium">Display Resolution Maximum</td>
657
+ <td class="py-1">3456 x 2234</td>
658
+ </tr>
659
+ <tr>
660
+ <td class="py-1 font-medium">Display Technology</td>
661
+ <td class="py-1">Liquid Retina XDR</td>
662
+ </tr>
663
+ </table>
664
+ </div>
665
+ </div>
666
+
667
+ <div class="border-b py-3">
668
+ <div class="flex justify-between items-center cursor-pointer accordion-header">
669
+ <h3 class="font-medium">Processor</h3>
670
+ <i class="fas fa-chevron-down transition-transform"></i>
671
+ </div>
672
+ <div class="accordion-content">
673
+ <table class="w-full mt-2">
674
+ <tr>
675
+ <td class="py-1 font-medium w-1/3">CPU Model</td>
676
+ <td class="py-1">Apple M1 Pro</td>
677
+ </tr>
678
+ <tr>
679
+ <td class="py-1 font-medium">CPU Speed</td>
680
+ <td class="py-1">3.2 GHz (10-core)</td>
681
+ </tr>
682
+ </table>
683
+ </div>
684
+ </div>
685
+
686
+ <div class="border-b py-3">
687
+ <div class="flex justify-between items-center cursor-pointer accordion-header">
688
+ <h3 class="font-medium">Memory</h3>
689
+ <i class="fas fa-chevron-down transition-transform"></i>
690
+ </div>
691
+ <div class="accordion-content">
692
+ <table class="w-full mt-2">
693
+ <tr>
694
+ <td class="py-1 font-medium w-1/3">RAM Memory</td>
695
+ <td class="py-1">16 GB</td>
696
+ </tr>
697
+ <tr>
698
+ <td class="py-1 font-medium">Memory Technology</td>
699
+ <td class="py-1">Unified Memory</td>
700
+ </tr>
701
+ </table>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </main>
708
+
709
+ <!-- Footer -->
710
+ <footer class="bg-gray-200 mt-10">
711
+ <div class="container mx-auto px-4 py-8">
712
+ <div class="text-center">
713
+ <button class="text-sm bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded">
714
+ Back to top
715
+ </button>
716
+ </div>
717
+
718
+ <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-8">
719
+ <div>
720
+ <h3 class="font-bold">Get to Know Us</h3>
721
+ <ul class="mt-4 space-y-2 text-sm">
722
+ <li><a href="#" class="hover:underline">Careers</a></li>
723
+ <li><a href="#" class="hover:underline">Blog</a></li>
724
+ <li><a href="#" class="hover:underline">About Amazon</a></li>
725
+ <li><a href="#" class="hover:underline">Investor Relations</a></li>
726
+ </ul>
727
+ </div>
728
+ <div>
729
+ <h3 class="font-bold">Make Money with Us</h3>
730
+ <ul class="mt-4 space-y-2 text-sm">
731
+ <li><a href="#" class="hover:underline">Sell products on Amazon</a></li>
732
+ <li><a href="#" class="hover:underline">Sell on Amazon Business</a></li>
733
+ <li><a href="#" class="hover:underline">Become an Affiliate</a></li>
734
+ <li><a href="#" class="hover:underline">Advertise Your Products</a></li>
735
+ </ul>
736
+ </div>
737
+ <div>
738
+ <h3 class="font-bold">Amazon Payment Products</h3>
739
+ <ul class="mt-4 space-y-2 text-sm">
740
+ <li><a href="#" class="hover:underline">Amazon Business Card</a></li>
741
+ <li><a href="#" class="hover:underline">Shop with Points</a></li>
742
+ <li><a href="#" class="hover:underline">Reload Your Balance</a></li>
743
+ <li><a href="#" class="hover:underline">Amazon Currency Converter</a></li>
744
+ </ul>
745
+ </div>
746
+ <div>
747
+ <h3 class="font-bold">Let Us Help You</h3>
748
+ <ul class="mt-4 space-y-2 text-sm">
749
+ <li><a href="#" class="hover:underline">Amazon and COVID-19</a></li>
750
+ <li><a href="#" class="hover:underline">Your Account</a></li>
751
+ <li><a href="#" class="hover:underline">Your Orders</a></li>
752
+ <li><a href="#" class="hover:underline">Shipping Rates & Policies</a></li>
753
+ </ul>
754
+ </div>
755
+ </div>
756
+
757
+ <div class="mt-8 border-t pt-6">
758
+ <div class="flex justify-center">
759
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png" alt="Amazon Logo" class="h-6">
760
+ </div>
761
+ <div class="mt-4 text-center text-sm">
762
+ <span>© 1996-2023, Amazon.com, Inc. or its affiliates</span>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </footer>
767
+
768
+ <script>
769
+ // Thumbnail click functionality
770
+ document.querySelectorAll('.thumbnail').forEach(thumb => {
771
+ thumb.addEventListener('click', function() {
772
+ // Remove active class from all thumbnails
773
+ document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
774
+
775
+ // Add active class to clicked thumbnail
776
+ this.classList.add('active');
777
+
778
+ // Update main image
779
+ const mainImage = document.getElementById('mainImage');
780
+ mainImage.src = this.src;
781
+ });
782
+ });
783
+
784
+ // Color selection functionality
785
+ document.querySelectorAll('.color-option').forEach(option => {
786
+ option.addEventListener('click', function() {
787
+ // Remove selected class from all color options
788
+ document.querySelectorAll('.color-option').forEach(o => o.classList.remove('selected'));
789
+
790
+ // Add selected class to clicked option
791
+ this.classList.add('selected');
792
+
793
+ // Update selected color text
794
+ document.getElementById('selectedColor').textContent = this.dataset.color;
795
+
796
+ // Update main image
797
+ const mainImage = document.getElementById('mainImage');
798
+ mainImage.src = this.dataset.image;
799
+
800
+ // Update thumbnails
801
+ document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
802
+ if (index === 0) {
803
+ thumb.src = this.dataset.image;
804
+ }
805
+ });
806
+ });
807
+ });
808
+
809
+ // Image zoom functionality
810
+ const mainImage = document.getElementById('mainImage');
811
+ const lens = document.querySelector('.zoom-lens');
812
+ const result = document.querySelector('.zoom-result');
813
+
814
+ if (mainImage && lens && result) {
815
+ mainImage.addEventListener('mousemove', function(e) {
816
+ if (!result.style.backgroundImage) {
817
+ result.style.backgroundImage = `url('${this.src}')`;
818
+ }
819
+
820
+ // Calculate the position of the zoom lens
821
+ const pos = getCursorPos(e);
822
+ let x = pos.x - (lens.offsetWidth / 2);
823
+ let y = pos.y - (lens.offsetHeight / 2);
824
+
825
+ // Prevent the lens from being positioned outside the image
826
+ if (x > this.width - lens.offsetWidth) x = this.width - lens.offsetWidth;
827
+ if (x < 0) x = 0;
828
+ if (y > this.height - lens.offsetHeight) y = this.height - lens.offsetHeight;
829
+ if (y < 0) y = 0;
830
+
831
+ // Set the position of the zoom lens
832
+ lens.style.left = x + 'px';
833
+ lens.style.top = y + 'px';
834
+
835
+ // Display the zoom lens and result
836
+ lens.style.display = 'block';
837
+ result.style.display = 'block';
838
+
839
+ // Calculate the zoom ratio
840
+ const cx = result.offsetWidth / lens.offsetWidth;
841
+ const cy = result.offsetHeight / lens.offsetHeight;
842
+
843
+ // Set the background position of the zoom result
844
+ result.style.backgroundPosition = `-${x * cx}px -${y * cy}px`;
845
+ result.style.backgroundSize = `${this.width * cx}px ${this.height * cy}px`;
846
+ });
847
+
848
+ mainImage.addEventListener('mouseout', function() {
849
+ lens.style.display = 'none';
850
+ result.style.display = 'none';
851
+ });
852
+
853
+ function getCursorPos(e) {
854
+ const a = mainImage.getBoundingClientRect();
855
+ return {
856
+ x: e.pageX - a.left - window.pageXOffset,
857
+ y: e.pageY - a.top - window.pageYOffset
858
+ };
859
+ }
860
+ }
861
+
862
+ // Accordion functionality
863
+ document.querySelectorAll('.accordion-header').forEach(header => {
864
+ header.addEventListener('click', function() {
865
+ const content = this.nextElementSibling;
866
+ const icon = this.querySelector('i');
867
+
868
+ if (content.style.maxHeight) {
869
+ content.style.maxHeight = null;
870
+ icon.style.transform = 'rotate(0deg)';
871
+ } else {
872
+ content.style.maxHeight = content.scrollHeight + 'px';
873
+ icon.style.transform = 'rotate(180deg)';
874
+ }
875
+ });
876
+ });
877
+ </script>
878
+ <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=Cyrano2/amazon-detail" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
879
+ </html>