Hugging Face's logo

Spaces:
chohj06ms
/
oddhtml
Running

App Files Community
chohj06ms commited on
Commit
31d1f3d
•
1 Parent(s): 433b831

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +35 -36
index.html CHANGED
@@ -3,53 +3,52 @@
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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9
  <style>
10
- /* Additional styles if needed */
 
 
 
 
 
 
 
 
11
  </style>
12
  </head>
13
  <body class="bg-black text-white">
14
- <div class="h-screen flex flex-col items-center justify-center">
15
- <div class="mb-4">
16
- <i class="fas fa-chevron-left"></i>
17
- <span class="text-gray-400">Shop</span>
18
- <span class="float-right text-blue-400">144</span>
19
- </div>
20
 
21
- <div id="card" class="transform transition-transform">
22
- <!-- The card content goes here -->
23
- <div class="text-red-600">B Ver.</div>
24
- <div class="text-white text-3xl font-bold">Cream01 Double</div>
25
- <div class="text-gray-400">Double 321Z (1 type)</div>
26
- <div class="grid grid-cols-2 gap-4">
27
- <!-- Placeholder images with detailed descriptions -->
28
- <img src="https://placehold.co/100x100" alt="Placeholder image description">
29
- <!-- Repeat for each image -->
30
- </div>
31
- <div class="text-yellow-500">KRW 4,400</div>
32
- <button class="bg-purple-700 text-white px-4 py-2 rounded">Objekt 구매하기</button>
33
  </div>
34
-
35
- <div class="dots">
36
- <!-- Dots for carousel indication -->
 
 
37
  </div>
38
  </div>
39
 
40
- <script>
41
- // JavaScript for handling scroll event and resizing card
42
- const card = document.getElementById('card');
43
- window.addEventListener('scroll', () => {
44
- let scrollValue = window.scrollY;
45
- let scale = 1;
 
 
 
 
 
 
46
 
47
- if (scrollValue > 50) {
48
- scale -= scrollValue / 1000;
49
- }
50
 
51
- card.style.transform = `scale(${scale})`;
52
- });
53
- </script>
54
  </body>
55
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Shop Carousel</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9
  <style>
10
+ .carousel-card {
11
+ transition: transform 0.5s ease;
12
+ }
13
+ .carousel-card.active {
14
+ transform: scale(1);
15
+ }
16
+ .carousel-card.inactive {
17
+ transform: scale(0.75);
18
+ }
19
  </style>
20
  </head>
21
  <body class="bg-black text-white">
 
 
 
 
 
 
22
 
23
+ <div class="flex flex-col items-center justify-center h-screen">
24
+ <div id="carousel" class="flex justify-center gap-4">
25
+ <!-- Placeholder for carousel cards -->
26
+ <div class="carousel-card inactive">
27
+ <img src="https://placehold.co/200x300" alt="Placeholder image representing a smaller inactive card in the carousel">
 
 
 
 
 
 
 
28
  </div>
29
+ <div class="carousel-card active">
30
+ <img src="https://placehold.co/200x300" alt="Placeholder image representing the active card in the carousel">
31
+ </div>
32
+ <div class="carousel-card inactive">
33
+ <img src="https://placehold.co/200x300" alt="Placeholder image representing a smaller inactive card in the carousel">
34
  </div>
35
  </div>
36
 
37
+ <button class="mt-8 py-2 px-4 bg-purple-600 rounded">Objekt 구매하기</button>
38
+ </div>
39
+
40
+ <script>
41
+ const cards = document.querySelectorAll('.carousel-card');
42
+ let currentIndex = 1; // Start from the second card (index 1)
43
+
44
+ function rotateCarousel() {
45
+ cards.forEach(card => card.classList.replace('active', 'inactive'));
46
+ cards[currentIndex].classList.replace('inactive', 'active');
47
+ currentIndex = (currentIndex + 1) % cards.length;
48
+ }
49
 
50
+ setInterval(rotateCarousel, 2000); // Rotate every 2 seconds
51
+ </script>
 
52
 
 
 
 
53
  </body>
54
+ </html>