Hugging Face's logo

Spaces:
chohj06ms
/
oddhtml
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +29 -75
index.html CHANGED
@@ -1,91 +1,45 @@
 
1
  <html lang="en">
2
  <head>
3
  <meta charset="UTF-8">
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
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">
11
- <!-- Header with Shop title and coin balance -->
12
- <header class="flex items-center justify-between w-full px-4 py-2">
13
- <a href="#" class="text-white text-lg"><i class="fas fa-arrow-left"></i></a>
14
- <span class="text-white text-lg">Shop</span>
15
- <div class="flex items-center">
16
- <span class="text-white text-lg">144</span>
17
- <i class="fas fa-coins ml-2 text-yellow-300"></i>
18
- </div>
19
- </header>
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>
 
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>Shop</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
10
+ <style>
11
+ .gallery img {
12
+ filter: blur(4px);
13
+ }
14
+ </style>
15
  </head>
16
+ <body class="bg-gray-900 text-white font-sans">
17
+ <div class="max-w-sm mx-auto py-10">
18
+ <div class="flex justify-between items-center px-4">
19
+ <a href="#" class="text-gray-400"><i class="fas fa-arrow-left"></i></a>
20
+ <h1 class="text-lg font-bold">Shop</h1>
21
+ <span class="bg-gray-700 text-gray-400 rounded-full px-3 py-1">144</span>
22
+ </div>
 
 
 
 
23
 
24
+ <div class="bg-gray-800 p-5 mt-5 rounded-lg text-center">
25
+ <h2 class="text-red-500 text-3xl font-bold mb-3">Cream01 Double</h2>
26
+ <div class="flex justify-center gap-2 gallery mb-3">
27
+ <img src="https://placehold.co/50x50" alt="Placeholder image of a person wearing a cap" class="rounded">
28
+ <img src="https://placehold.co/50x50" alt="Placeholder image of a person with headphones" class="rounded">
29
+ <img src="https://placehold.co/50x50" alt="Placeholder image of a smiling person" class="rounded">
30
+ <!-- More placeholder images as needed -->
31
  </div>
32
+ <img src="https://placehold.co/150x200" alt="Placeholder image of a product pack" class="mx-auto mb-3">
33
+ <div class="text-gray-400 mb-5">321Z (1 type)</div>
34
+ <div class="text-xl font-bold mb-3">KRW 4,400</div>
35
+ <button class="bg-purple-600 py-3 px-6 rounded text-lg text-white">Objekt 구매하기</button>
36
  </div>
37
 
38
+ <div class="flex justify-center space-x-2 mt-10">
39
+ <span class="block w-2 h-2 bg-gray-600 rounded-full"></span>
40
+ <span class="block w-2 h-2 bg-gray-600 rounded-full"></span>
41
+ <span class="block w-2 h-2 bg-gray-600 rounded-full"></span>
42
  </div>
43
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  </body>
45
  </html>