Hugging Face's logo

Spaces:
chohj06ms
/
oddhtml
Running

App Files Community
chohj06ms commited on
Commit
abb262b
•
1 Parent(s): c5ba53f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +60 -25
index.html CHANGED
@@ -5,9 +5,6 @@
5
  <title>Shop</title>
6
  <script src="https://cdn.tailwindcss.com"></script>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
8
- <style>
9
- /* Additional styles if needed */
10
- </style>
11
  </head>
12
  <body class="bg-black text-white font-sans">
13
  <div class="h-screen flex flex-col items-center justify-center">
@@ -23,34 +20,72 @@
23
 
24
  <!-- Product Slider -->
25
  <div class="flex flex-col items-center">
26
- <div class="my-6">
27
- <!-- Slider will go here -->
28
- <!-- Placeholder for slider functionality, replace with your slider implementation -->
29
- </div>
30
-
31
  <!-- Product Details -->
32
- <div class="text-center mb-6">
33
- <h2 class="text-2xl font-bold mb-2">EMBLE A Ver.</h2>
34
- <p class="text-red-600 text-xl mb-1">Cream01 Double</p>
35
- <div class="flex items-center justify-center space-x-2">
36
- <span class="bg-gray-700 text-white py-1 px-3 rounded-full text-sm">Double</span>
37
- <span class="text-gray-400 text-sm">32OZ (1 type)</span>
38
- </div>
39
- <div class="flex mt-4">
40
- <!-- Image placeholders -->
41
- <!-- Replace with your image slider/carousel -->
42
- </div>
43
- <p class="text-gray-400 text-lg my-4">KRW 4,400</p>
44
- <button class="bg-purple-700 px-6 py-2 rounded-full text-white font-bold">Objekt 구매하기</button>
45
  </div>
46
  </div>
47
 
48
  <!-- Navigation dots for the slider -->
49
- <div class="flex items-center justify-center space-x-2">
50
- <span class="h-2 w-2 bg-gray-600 rounded-full"></span>
51
- <span class="h-2 w-2 bg-gray-600 rounded-full"></span>
52
- <span class="h-2 w-2 bg-white rounded-full"></span>
53
  </div>
54
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  </body>
56
  </html>
 
5
  <title>Shop</title>
6
  <script src="https://cdn.tailwindcss.com"></script>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 
 
 
8
  </head>
9
  <body class="bg-black text-white font-sans">
10
  <div class="h-screen flex flex-col items-center justify-center">
 
20
 
21
  <!-- Product Slider -->
22
  <div class="flex flex-col items-center">
 
 
 
 
 
23
  <!-- Product Details -->
24
+ <div class="text-center mb-6" id="product-details">
25
+ <!-- Product details will be injected by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
26
  </div>
27
  </div>
28
 
29
  <!-- Navigation dots for the slider -->
30
+ <div class="flex items-center justify-center space-x-2" id="navigation-dots">
31
+ <!-- Navigation dots will be injected by JavaScript -->
 
 
32
  </div>
33
  </div>
34
+
35
+ <script>
36
+ const products = [
37
+ {
38
+ name: 'EMBLE A Ver.',
39
+ description: 'Cream01 Double',
40
+ price: 'KRW 4,400',
41
+ images: ['path/to/your/image1.jpg', 'path/to/your/image2.jpg', 'path/to/your/image3.jpg'] // Replace with actual image paths
42
+ },
43
+ {
44
+ name: 'EMBLE A Ver.',
45
+ description: 'Cream01 ASS',
46
+ price: 'KRW 4,400',
47
+ images: ['path/to/your/image4.jpg', 'path/to/your/image5.jpg', 'path/to/your/image6.jpg']
48
+ },
49
+ {
50
+ name: 'tripleS',
51
+ description: 'Cream01 First',
52
+ price: 'KRW 4,400',
53
+ images: ['path/to/your/image7.jpg', 'path/to/your/image8.jpg', 'path/to/your/image9.jpg']
54
+ }
55
+ ];
56
+
57
+ const productDetailsElement = document.getElementById('product-details');
58
+ const navigationDotsElement = document.getElementById('navigation-dots');
59
+
60
+ let currentProductIndex = 0;
61
+
62
+ function updateProductDetails(index) {
63
+ const product = products[index];
64
+ productDetailsElement.innerHTML = `
65
+ <h2 class="text-2xl font-bold mb-2">${product.name}</h2>
66
+ <p class="text-red-600 text-xl mb-1">${product.description}</p>
67
+ <div class="flex mt-4">
68
+ ${product.images.map(image => `<img src="${image}" alt="${product.description}" class="h-20 w-20 object-cover">`).join('')}
69
+ </div>
70
+ <p class="text-gray-400 text-lg my-4">${product.price}</p>
71
+ <button class="bg-purple-700 px-6 py-2 rounded-full text-white font-bold">Objekt 구매하기</button>
72
+ `;
73
+ }
74
+
75
+ function updateNavigationDots() {
76
+ navigationDotsElement.innerHTML = products.map((_, index) => `
77
+ <span class="h-2 w-2 bg-gray-600 rounded-full cursor-pointer ${index === currentProductIndex ? 'bg-white' : ''}" onclick="changeProduct(${index})"></span>
78
+ `).join('');
79
+ }
80
+
81
+ function changeProduct(index) {
82
+ currentProductIndex = index;
83
+ updateProductDetails(index);
84
+ updateNavigationDots();
85
+ }
86
+
87
+ // Initialize the slider with the first product
88
+ changeProduct(0);
89
+ </script>
90
  </body>
91
  </html>