Hugging Face's logo

Spaces:
abeea
/
D3
Running

App Files Community
abeea commited on
Commit
5a57dbf
·
verified ·
1 Parent(s): 226fbc0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +233 -19
index.html CHANGED
@@ -1,19 +1,233 @@
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>Luxury Jewellery</title>
7
+
8
+ <style>
9
+ :root {
10
+ --c1: #FAE5D7;
11
+ --c2: #FAD9D1;
12
+ --c3: #FACDCC;
13
+ --c4: #FAC0C6;
14
+ --c5: #FAB4C0;
15
+ --dark: #2b2b2b;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: 'Segoe UI', sans-serif;
23
+ }
24
+
25
+ body {
26
+ background: var(--c1);
27
+ color: var(--dark);
28
+ }
29
+
30
+ /* NAVBAR */
31
+ nav {
32
+ display: flex;
33
+ justify-content: space-between;
34
+ padding: 20px 40px;
35
+ background: white;
36
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
37
+ }
38
+
39
+ nav h1 {
40
+ letter-spacing: 2px;
41
+ }
42
+
43
+ nav button {
44
+ background: var(--c5);
45
+ border: none;
46
+ padding: 10px 15px;
47
+ border-radius: 20px;
48
+ cursor: pointer;
49
+ }
50
+
51
+ /* HERO */
52
+ .hero {
53
+ height: 80vh;
54
+ background: linear-gradient(to right, var(--c2), var(--c4));
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ text-align: center;
59
+ }
60
+
61
+ .hero h2 {
62
+ font-size: 3rem;
63
+ margin-bottom: 10px;
64
+ }
65
+
66
+ .hero p {
67
+ opacity: 0.7;
68
+ }
69
+
70
+ /* FILTER */
71
+ .filter {
72
+ text-align: center;
73
+ margin: 30px;
74
+ }
75
+
76
+ .filter button {
77
+ margin: 5px;
78
+ padding: 10px 15px;
79
+ border: none;
80
+ background: var(--c3);
81
+ border-radius: 20px;
82
+ cursor: pointer;
83
+ }
84
+
85
+ /* PRODUCTS */
86
+ .products {
87
+ display: grid;
88
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
89
+ padding: 40px;
90
+ gap: 25px;
91
+ }
92
+
93
+ .card {
94
+ background: white;
95
+ border-radius: 20px;
96
+ overflow: hidden;
97
+ transition: 0.3s;
98
+ box-shadow: 0 10px 20px rgba(0,0,0,0.05);
99
+ }
100
+
101
+ .card:hover {
102
+ transform: translateY(-8px);
103
+ }
104
+
105
+ .card img {
106
+ width: 100%;
107
+ height: 220px;
108
+ object-fit: cover;
109
+ }
110
+
111
+ .card-content {
112
+ padding: 20px;
113
+ }
114
+
115
+ .price {
116
+ color: #b76e79;
117
+ font-weight: bold;
118
+ }
119
+
120
+ .card button {
121
+ margin-top: 10px;
122
+ padding: 10px;
123
+ width: 100%;
124
+ border: none;
125
+ background: var(--c5);
126
+ border-radius: 10px;
127
+ cursor: pointer;
128
+ }
129
+
130
+ /* FOOTER */
131
+ footer {
132
+ text-align: center;
133
+ padding: 20px;
134
+ background: var(--c2);
135
+ margin-top: 40px;
136
+ }
137
+
138
+ /* CART POPUP */
139
+ .cart {
140
+ position: fixed;
141
+ right: 20px;
142
+ top: 70px;
143
+ background: white;
144
+ padding: 15px;
145
+ border-radius: 10px;
146
+ display: none;
147
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
148
+ }
149
+ </style>
150
+ </head>
151
+
152
+ <body>
153
+
154
+ <nav>
155
+ <h1>💎 LUXE</h1>
156
+ <button onclick="toggleCart()">Cart (<span id="count">0</span>)</button>
157
+ </nav>
158
+
159
+ <div class="hero">
160
+ <div>
161
+ <h2>Elegant Jewellery</h2>
162
+ <p>Luxury crafted with love & perfection</p>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="filter">
167
+ <button onclick="filter('all')">All</button>
168
+ <button onclick="filter('ring')">Rings</button>
169
+ <button onclick="filter('necklace')">Necklace</button>
170
+ </div>
171
+
172
+ <div class="products" id="products"></div>
173
+
174
+ <div class="cart" id="cartBox">
175
+ <h3>Cart Items</h3>
176
+ <ul id="cartItems"></ul>
177
+ </div>
178
+
179
+ <footer>
180
+ © 2026 Luxury Jewellery Store
181
+ </footer>
182
+
183
+ <script>
184
+ const products = [
185
+ {name:"Diamond Ring", price:120, type:"ring", img:"https://images.unsplash.com/photo-1602751584552-8ba73aad10e1"},
186
+ {name:"Gold Necklace", price:200, type:"necklace", img:"https://images.unsplash.com/photo-1617038220319-276d3cfab638"},
187
+ {name:"Rose Ring", price:150, type:"ring", img:"https://images.unsplash.com/photo-1588444650700-6c3b8f3bb3b5"},
188
+ {name:"Pearl Necklace", price:180, type:"necklace", img:"https://images.unsplash.com/photo-1603974372033-6f73c4f93a33"}
189
+ ];
190
+
191
+ let cart = [];
192
+
193
+ function display(list){
194
+ const container = document.getElementById("products");
195
+ container.innerHTML = "";
196
+
197
+ list.forEach((p,i)=>{
198
+ container.innerHTML += `
199
+ <div class="card">
200
+ <img src="${p.img}">
201
+ <div class="card-content">
202
+ <h3>${p.name}</h3>
203
+ <p class="price">$${p.price}</p>
204
+ <button onclick="addToCart(${i})">Add to Cart</button>
205
+ </div>
206
+ </div>
207
+ `;
208
+ });
209
+ }
210
+
211
+ function filter(type){
212
+ if(type === 'all') display(products);
213
+ else display(products.filter(p => p.type === type));
214
+ }
215
+
216
+ function addToCart(i){
217
+ cart.push(products[i]);
218
+ document.getElementById("count").innerText = cart.length;
219
+
220
+ const list = document.getElementById("cartItems");
221
+ list.innerHTML += `<li>${products[i].name}</li>`;
222
+ }
223
+
224
+ function toggleCart(){
225
+ const cartBox = document.getElementById("cartBox");
226
+ cartBox.style.display = cartBox.style.display === "block" ? "none" : "block";
227
+ }
228
+
229
+ display(products);
230
+ </script>
231
+
232
+ </body>
233
+ </html>