-
Notifications
You must be signed in to change notification settings - Fork 0
/
product.html
83 lines (78 loc) · 3.61 KB
/
product.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
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./assets/css/base.css">
<link rel="stylesheet" href="./assets/css/grid.css">
<link rel="stylesheet" href="./assets/css/header.css">
<link rel="stylesheet" href="./assets/css/footer.css">
<link rel="stylesheet" href="./assets/css/product.css">
<title>Product</title>
<script src="./assets/js/base.js"></script>
</head>
<body>
<div class="app">
<script>render('header','.app')</script>
<div class="product-container">
<div class="tab">
<div class="link">
<h3>Menu</h3>
<p> / </p>
<h3>Cà phê</h3>
<p> / </p>
<p>Macchiato</p>
</div>
</div>
<div class="content">
<div class="image">
<img src="./assets/img/machiato.jpg" alr="product">
</div>
<div class="info">
<div class="name">
<h2>Macchiato</h2>
</div>
<div class="price">
<h2>49.000 đ</h2>
</div>
<div class="size">
<h4>Chọn size( bắt buộc )</h4>
<div class="pick-size" id="sizeContainer">
<p onclick="clickSize(this,0)">Nhỏ + 0 đ </p>
<p onclick="clickSize(this,1)">Vừa + 6.000 đ</p>
<p onclick="clickSize(this,2)">Lớn + 10.000 đ </p>
</div>
</div>
<div class="topping">
<div><h4>Topping</h4></div>
<div class="pick-topping">
<p onclick="clickTopping(this,0)">Kem phô mai Macchiato + 10.000 đ</p>
<p onclick="clickTopping(this,1)">Shot Expresso + 10.000 đ</p>
<p onclick="clickTopping(this,2)">Trân châu trắng + 10.000 đ</p>
<p onclick="clickTopping(this,3)">Sốt Caramel + 10.000 đ</p>
<p onclick="clickTopping(this,4)">Thạch cà phê + 10.000 đ</p>
</div>
</div>
<div class="buyNow" onclick="toast({title:'Thành công',message:'Thêm vào giỏ hàng thành công!'})">
<h3>Thêm vào giỏ hàng</h3>
</div>
</div>
</div>
<div class="describe">
<h3>Mô tả sản phẩm</h3>
<br>
<p>
Sự kết hợp hoàn hảo bởi hồng trà dịu nhẹ và sữa tươi, nhấn nhá thêm lớp macchiato trứ danh của DAT Coffee mang đến cho bạn hương vị trà sữa đúng gu tinh tế và healthy.
</p>
</div>
</div>
<div id="toast"></div>
<script> render('footer','.app'); </script>
<script src="./assets/js/product.js"></script>
</div>
</body>
</html>