-
Notifications
You must be signed in to change notification settings - Fork 0
/
product_list_2.html
390 lines (338 loc) · 12.2 KB
/
product_list_2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="./styles/navbar.css">
<link rel="stylesheet" href="./styles/footer.css">
<style>
*{
/* margin: 0px;
padding: 0px; */
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
#p1{
/* border: 1px solid red; */
/* display: flex;
flex-direction: column; */
margin-top: 50px;
}
#box{
/* border: 1px solid green; */
display: flex;
justify-content: center;
gap: 20px;
/* align-items: center; */
}
.write{
margin-top: 20px;
display: flex;
gap: 15px;
flex-direction: column;
/* justify-self: flex-start */
}
h2{
margin-top: 10px;
}
h1{
margin-top: 10px;
}
#btn{
height: 50px;
width: 110%;
margin-top:25px;
background-color: black;
color: white;
font-size: 20px;
font-weight: 600;
cursor: pointer;
}
#home{
text-decoration: none;
}
#p_img{
height: 450px;
/* width:400px ; */
}
#des{
margin-top: 100px;
}
#social{
margin-top: 16px;
display: flex;
gap: 25px;
font-size: 25px;
}
#social a:hover{
color: #E5B95F;
}
.tabs{
/* border: 1px solid black; */
display: flex;
flex-wrap: wrap;
margin: auto;
max-width: 50%;
margin-top: 100px;
padding: 25;
column-gap: 20px;
margin-bottom: 30px;
/* max-height: 800px; */
}
.tabs input[type="radio"]{
display: none;
}
.tabs label{
padding: 20px;
/* background-color: #E5B95F; */
border-radius: 25px;
}
.tabs input[for="dis"]{
background-color: #E5B95F;
}
.tabs .tab{
width: 100%;
padding: 25px;
order: 1;
display: none;
}
.tab{
/* border: 1px solid red; */
/* width: 100%; */
margin: auto;
}
.tabs input[type='radio']:checked + label + .tab{
display: block;
}
.tabs input[type='radio']:checked + label {
background-color: #E5B95F;
}
.tabs label:hover{
background-color: #E5B95F;
}
#footer{
margin-top: 100px;
}
#review{
display: flex;
justify-content: space-between;
}
#customer{
font-size: 30px;
}
#moreProduct{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#rp{
font-family: sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<div id="navbar">
</div>
<div id="p2">
</div>
<div class="tabs">
<input type="radio" id="dis" name="discription" checked="checked">
<label for="dis">DESCRIPTION</label>
<div class="tab">
<p>Get ready to Pick'n'Roll. Put your beauty instincts to the test and choose between 3 carefully curated beauty bags featuring 6 glam goodies each inside The Beauty Bundle July Fab Bag.</p>
<br>
<br>
<h4>Makeup 1: Teen Teen 5D Pretty Eye Shadow (Choose any 1)</h4>
<p>1. Teen Teen 5D Pretty Eye Shadow - Flamingo Pink </p>
<p>2. Teen Teen 5D Pretty Eye Shadow - Gold Rush </p>
<p>3. Teen Teen 5D Pretty Eye Shadow - Rusty Copper</p>
<br>
<br>
<p>And choose the bundle of your choice:
</p>
<br>
<br>
<h4>Beauty Bundle Bag 1 includes:</h4>
<p>
St. D'vencé Tea Tree Face Wash
The Soap Company India Saffron Soothing Sorbet OR The Soap Company India Musk Body Wash
Baiser India Nourishing Lip Oil OR Coco Soul Hair & Scalp Cleanser
Keeva Naturals Scuba Dive Shower Gel OR Kronoklay Body Butter OR Mom's Therapy Coffee Body Scrub OR Organic Harvest Neem Face Wash OR Plum BodyLovin' Bestsellin' Duo Minis Kit OR Skinlicious Cucumber Beauty Gel for Skin and Hair
Tejas Blends Lavender Foot Mist
</p>
<br>
<h4>Beauty Bundle Bag 2 includes:</h4>
<p>St. D'vencé Tea Tree Face Wash</p>
<p>Coco soul nourishing body lotion</p>
<p>Plum E-Luminence Mega Hydration Mini Kit</p>
<p>Tejas Blends Enriching night cream </p>
<p>Tejas Blends Lavender Foot Mist </p>
<br>
<h4>Beauty Bundle Bag 3 includes:</h4>
<p>The Soap Company India Midnight Love Body Cologne</p>
<p>Sebamed Moisturizing Cream</p>
<p>Plum Fun in the Sun Duo (Scrub + SPF 50) (Minis)</p>
<p>Tejas Blends Enriching night cream </p>
<p>Tejas Blends Lavender Foot Mist </p>
<br>
<p style="font-style: italic;">*Two offers cannot be clubbed. Choice will be available on the order confirmation page, on first-come, first-served basis. Bags shown are indicative and color may differ.</p>
</div>
<input type="radio" id="vp" name="discription" >
<label for="vp">VIEW PLANS</label>
<div class="tab">
<div class="sub">
<h3>Rs. 599.00</h3>
<h5>/per month</h5>
</div>
<div id="sub3">
<h5>ONE TIME PAYMENT</h5>
<h3>Rs. 599.00</h3>
</div>
<div id="sub4">
<button id="cartBtn">ADD TO CART</button>
</div>
</div>
<input type="radio" id="rp" name="discription" >
<label for="rp">RETURNS POLICY</label>
<div class="tab">
<ul>
<li>Returns Policy for FAB BAG Monthly Subscriptions: 100% Happiness or Money-Back Guarantee</li>
<li>For more details, please see our Policy here.</li>
<li>Should you have any questions regarding this product, please feel free to get in touch with our friendly Customer Experience Team at crew@fabbag.com within 48 hours of receiving the shipment or call us at 022-4896-7878 Mon - Fri, 9am - 7pm.</li>
</ul>
</div>
<input type="radio" id="cr" name="discription" >
<label for="cr">CUSTOMER REVIEWS</label>
<div class="tab">
<p id="customer">Customer Reviews</p>
<div id="review">
<p>No reviews yet</p>
<a href="#">Write a review</a>
</div>
</div>
</div>
<div id="moreProduct">
<p id="rp">Related Product</p>
<div id="more">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
<script type = "module">
import navbar from "./components/navport.js"
document.querySelector("#navbar").innerHTML = navbar();
let cartcount=JSON.parse(localStorage.getItem("cart")) || []
console.log(cartcount.length)
let count=document.querySelector("#count")
count.innerText= cartcount.length
import footer from "./components/footer.js"
document.querySelector(".footer").innerHTML = footer();
let list = JSON.parse(localStorage.getItem("product_li_2")) ||[]
let t = [list]
let card = document.getElementById("p2")
let append3=()=>{
t.forEach((x)=>{
let {image,product_name,price}=x ;
let div1 = document.createElement("div");
div1.setAttribute("id","box")
let home = document.createElement("a")
home.innerText = "Home"
home.setAttribute("href", "./index.html");
home.setAttribute("id","home");
let img = document.createElement("img")
img.setAttribute("id","p_img");
img.src = image
let name = document.createElement("h1");
let desc = document.createElement("p");
desc.innerText = "Get ready to Pick'n'Roll. Put your beauty instincts to the test and choose between 3...";
desc.setAttribute("id", "des");
//social media
let social = document.createElement("div")
social.setAttribute("id", "social");
//twitter
let twitter = document.createElement("a");
twitter.setAttribute("href", ` https://twitter.com/share?url=https://www.fabbag.com/products/subscribe&text=The%20Beauty%20Bundle%20July%20Fab%20Bag`)
let icon1 = document.createElement("div");
icon1.innerHTML = `<i class="bi bi-twitter"></i>`
twitter.append(icon1);
//facebook
let facebook = document.createElement("a");
facebook.setAttribute("href", `https://www.facebook.com/sharer/sharer.php?u=https://www.fabbag.com/products/subscribe`);
let icon2 = document.createElement("div");
icon2.innerHTML = `<i class="bi bi-facebook"></i>`
facebook.append(icon2);
//Google
let google = document.createElement("a");
google.setAttribute("href", `https://plus.google.com/share?url=https://www.fabbag.com/products/subscribe`);
let icon3 = document.createElement("div");
icon3.innerHTML = `<i class="bi bi-google"></i>`
google.append(icon3);
social.append(twitter, facebook, google)
name.innerText = "The Beauty Bundle July Fab Bag"
let btn = document.createElement("button");
btn.innerText = "Add to cart"
btn.setAttribute("id", "btn")
let div2 = document.createElement("div");
div2.setAttribute("class", "write")
let s = document.createElement("h2");
s.innerText = `Rs. ${price}`
div2.append(home, name, s, desc, btn, social)
div1.append(img, div2)
card.append(div1);
})
};
append3(t)
let abcd = JSON.parse(localStorage.getItem("product_list"));
let cards = document.getElementById("more");
let append4=(data)=>{
abcd.forEach((m)=>{
let {image,product_name,price} = m;
let div = document.createElement("div")
div.style.cursor = "pointer"
let img = document.createElement("img")
img.src = image;
img.style.height = "165px"
let p = document.createElement("p")
p.innerText = product_name
let dam = document.createElement(`p`);
dam.innerText = `from Rs ${price}`;
dam.style.fontStyle = "italic";
dam.style.opacity = "0.4"
dam.style.fontFamily = "poppins"
div.append(img, p, dam)
cards.append(div)
img.addEventListener(`click`,()=>{
localStorage.setItem("product_li_2", JSON.stringify(m));
window.location.href = "./product_list_2.html"
})
})
}
append4(abcd)
let cartData=JSON.parse(localStorage.getItem("cart")) || []
// console.log(typeof cartData)
document.querySelector("#btn").addEventListener("click",()=>{
let flag=0
cartData.forEach(({id})=>{
if(id==list.id)
{
alert("product already in your cart")
flag=1
}
})
if(flag==0)
{
cartData.push(list)
localStorage.setItem("cart",JSON.stringify(cartData))
alert("product added successfuly")
window.location.href="cart.html"
}
})
</script>