xong chi tiet cho toan bo

DarqPL · Apr 17, 2024 · 6fd3f6c · 6fd3f6c
1 parent 62836e5
commit 6fd3f6c
Show file tree

Hide file tree

Showing 7 changed files with 556 additions and 5 deletions.
diff --git a/CSS/trangchitiet.css b/CSS/trangchitiet.css
@@ -0,0 +1,363 @@
+*{
+    padding: 0;
+    margin: 0;
+    font-family: 'Times New Roman', Times, serif;
+}
+:root{
+    --main-background-color: rgb(26, 148, 255);
+}
+header {
+    background-color: rgb(26, 148, 255);
+}
+#tensp{
+    font-size: 30px;
+    font-weight: bold;
+}
+#gia{
+    font-size: 20px;
+    font-weight: bold;
+    color: red;
+}
+#mota{
+    font-size: 16px;;
+
+}
+
+footer{
+    text-align: center;
+    padding: 1%;
+    border: 1px solid black;
+    margin-top: 3%;
+    background-color: var(--main-background-color);
+}
+.footer .lh{
+    margin-top: 20px;
+}
+.footer .lh li{
+    list-style-type: none;
+    display: inline;
+    margin-right: 50px; 
+}
+.footer .lh li a{
+    text-decoration: none;
+    color: white;
+}
+
+.footer .lh li a:hover{
+    color: black;
+}
+.footer .ht li{
+    list-style-type: none;
+    text-align: center;
+}
+.footer .ht li a{
+    text-decoration: none;
+    color: white;
+}
+.footer .ht li a:hover{
+    color: black;
+
+}
+
+.tK{
+    width:100%;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
+    display:flex;
+    position:relative;
+    border:1px solid #DDDDE3;
+    border-radius:8px;
+    -webkit-align-items:center;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
+}
+
+.tK .icon-search{
+    width:20px;
+    height:20px;
+    margin:0 0 0 18px;
+}
+
+data-styled.g763[id="timKiem"]{
+        content:"tK,"
+}
+
+.sB{
+    border:0px;
+    padding:0 8px;
+    font-weight:400;
+    font-size:18px;
+    line-height:150%;
+    border-top-left-radius:8px;
+    border-bottom-left-radius:8px;
+    -webkit-flex:1;
+    -ms-flex:1;
+    flex:1;
+    outline:none;
+}
+
+.sB::-webkit-input-placeholder{
+    color:#808089;
+    font-size:16px;
+}
+
+.sB::-moz-placeholder{
+    color:#808089;
+    font-size:16px;
+}
+
+.sB:-ms-input-placeholder{
+    color:#808089;
+    font-size:16px;
+}
+
+.sB::placeholder{
+    color:#808089;
+    font-size:16px;
+}
+
+data-styled.g764[id="searchBar"]{
+    content:"sB,"
+}
+
+.sBtn{
+    cursor:pointer;
+    border:0px;
+    width:92px;
+    height:38px;
+    padding:4px;
+    border-radius:0 8px 8px 0;
+    background:transparent;
+    color:#0A68FF;
+    font-weight:400;
+    font-size:14px;
+    line-height:150%;
+    outline:none;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-align-items:center;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
+    -webkit-box-pack:center;
+    -webkit-justify-content:center;
+    -ms-flex-pack:center;
+    justify-content:center;
+    position:relative;
+}
+
+.sBtn:before{
+    content:'';
+    display:block;
+    position:absolute;
+    border-left:1px solid #DDDDE3;
+    height:24px;
+    left:0;
+    top:8px;
+}
+
+.sBtn:hover{
+    background-color:rgba(10,104,255,0.2);
+}
+
+.sBtn:active{
+    background-color:rgba(10,104,255,0.4);
+}
+
+data-styled.g765[id="searchButton"]{
+    content:"sBtn,"
+}
+
+.option{
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-align-items:center;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
+    -webkit-box-pack:end;
+    -webkit-justify-content:flex-end;
+    -ms-flex-pack:end;
+    justify-content:flex-end;
+    margin-left: -35px;
+}
+
+.option .cart-wrapper{
+    position:relative;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
+    display:flex;
+    width:40px;
+    height:40px;
+    -webkit-align-items:center;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
+    -webkit-box-pack:center;
+    -webkit-justify-content:center;
+    -ms-flex-pack:center;
+    justify-content:center;
+}
+
+.option .cart-wrapper .cart-icon{
+    margin-right:0;
+    border-radius:unset;
+}
+
+data-styled.g782[id="option"]{content:"option,"}/*!sc*/
+
+.trangChu{
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-align-items:center;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
+    -webkit-box-pack:center;
+    -webkit-justify-content:center;
+    -ms-flex-pack:center;
+    justify-content:center;
+    padding:8px 16px;
+    cursor:pointer;
+    position:relative;
+    border-radius:8px;
+}
+
+.trangChu:hover{
+    background-color:rgba(0,96,255,0.12);
+}
+
+.trangChu:active{
+    background-color:rgba(0,96,255,0.24);
+}
+
+.trangChu img{
+    width:24px;
+    height:24px;
+    margin-right:4px;
+    border-radius:50%;
+}
+
+.trangChu a,.trangChu > span{
+    font-weight:500;
+    font-size:14px;
+    line-height:150%;
+    color:#0A68FF;
+}
+
+.trangChu:hover .toggler{
+    display:block;
+}
+
+.taiKhoan{
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-align-items:center;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
+    -webkit-box-pack:center;
+    -webkit-justify-content:center;
+    -ms-flex-pack:center;
+    justify-content:center;
+    padding:8px 16px;
+    cursor:pointer;
+    position:relative;
+    border-radius:8px;
+}
+
+.taiKhoan:hover{
+    background-color:rgba(39,39,42,0.12);
+}
+.taiKhoan:active{
+    background-color:rgba(39,39,42,0.24);
+}
+.taiKhoan img{
+    width:24px;
+    height:24px;
+    margin-right:4px;
+    border-radius:50%;
+}
+
+.taiKhoan a,.taiKhoan > span{
+    font-weight:400;
+    font-size:14px;
+    line-height:150%;
+    color:#808089;
+}
+
+.taiKhoan:hover .toggler{
+    display:block;
+}
+
+data-styled.g786[id="trangChu,taiKhoan"]{content:"trangChu,taiKhoan,"}
+
+.cart{
+    position:relative;
+    display:block;
+}
+
+.cart:hover{
+    opacity:1;
+}
+
+data-styled.g781[id="cart"]{content:"cart,"}
+
+.xeDay{
+    padding:0 !important;
+    margin-left:24px;
+    position:relative;
+}
+
+.xeDay:before{
+    content:'';
+    display:block;
+    height:20px;
+    position:absolute;
+    left:-12px;
+    border:1px solid #EBEBF0;
+}
+
+data-styled.g787[id="xeDay"]{
+    content:"xeDay,"
+}
+
+.hfiWvr{position:relative;display:block;}/*!sc*/
+.hfiWvr:hover{opacity:1;}/*!sc*/
+data-styled.g781[id="Userstyle__CartItem-sc-6e6am-14"]{content:"hfiWvr,"}/*!sc*/
+.hkQlMw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-left:-35px;}/*!sc*/
+.hkQlMw .profile-icon{width:32px;height:32px;margin-right:8px;border-radius:2px;}/*!sc*/
+.hkQlMw .arrowIcon{width:16px;height:16px;}/*!sc*/
+.hkQlMw .cart-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:40px;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/
+.hkQlMw .cart-wrapper .cart-icon{margin-right:0;border-radius:unset;}/*!sc*/    
+.hkQlMw .cart-wrapper .cart-text{color:#ffffff;font-weight:500;white-space:nowrap;font-size:13px;line-height:20px;}/*!sc*/
+data-styled.g782[id="Userstyle__RootRevamp-sc-6e6am-15"]{content:"hkQlMw,"}/*!sc*/
+.jbrHBQ{color:#ffffff;background:#FF424F;height:16px;right:0;top:-4px;border-radius:8px;display:inline-block;text-align:center;font-weight:700;font-size:10px;line-height:150%;position:absolute;padding:0.5px 4px;}/*!sc*/
+data-styled.g783[id="Userstyle__ItemCartQtyRevamp-sc-6e6am-16"]{content:"jbrHBQ,"}/*!sc*/
+.fUChpf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:8px 16px;cursor:pointer;position:relative;border-radius:8px;}/*!sc*/
+.fUChpf:hover{background-color:rgba(39,39,42,0.12);}/*!sc*/
+.fUChpf:active{background-color:rgba(39,39,42,0.24);}/*!sc*/
+.fUChpf img{width:24px;height:24px;margin-right:4px;border-radius:50%;}/*!sc*/
+.fUChpf a,.fUChpf > span{font-weight:400;font-size:14px;line-height:150%;color:#808089;}/*!sc*/
+.fUChpf:hover .toggler{display:block;}/*!sc*/
+.bhXqXQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:8px 16px;cursor:pointer;position:relative;border-radius:8px;}/*!sc*/
+.bhXqXQ:hover{background-color:rgba(0,96,255,0.12);}/*!sc*/
+.bhXqXQ:active{background-color:rgba(0,96,255,0.24);}/*!sc*/
+.bhXqXQ img{width:24px;height:24px;margin-right:4px;border-radius:50%;}/*!sc*/
+.bhXqXQ a,.bhXqXQ > span{font-weight:500;font-size:14px;line-height:150%;color:#0A68FF;}/*!sc*/
+.bhXqXQ:hover .toggler{display:block;}/*!sc*/
+data-styled.g786[id="Userstyle__MenuItemRevamp-sc-6e6am-19"]{content:"fUChpf,bhXqXQ,"}/*!sc*/
+.iZYkSb{padding:0 !important;margin-left:24px;position:relative;}/*!sc*/
+.iZYkSb:before{content:'';display:block;height:20px;position:absolute;left:-12px;border:1px solid #EBEBF0;}/*!sc*/
+data-styled.g787[id="Userstyle__CartItemInnerRevamp-sc-6e6am-20"]{content:"iZYkSb,"}/*!sc*/
diff --git a/JS/sachgiaokhoa.js b/JS/sachgiaokhoa.js
@@ -27,7 +27,7 @@ $(document).ready(function(){
             let item = data[i];
             $("#products").append(`<div class="col-md-3 mt-3" id="${item.id}">
         <div class="card" style="width:100%; height: 100%;">
-                <img src="../${item.img}" height="415px" alt="" class="card-img-top">
+                <img src="../${item.img}" height="415px" alt="" class="card-img-top" onclick=\'xemchitiet(\`${obj}\`)\'>
                 <div class="card-body">
                     <h5>${item.name}</h5>
                     <h4>${item.gia.toLocaleString('vi-VN', { style: 'currency', currency: 'VND' })}</h4>

diff --git a/JS/sachvanhoc.js b/JS/sachvanhoc.js
@@ -7,7 +7,7 @@ $(document).ready(function(){
             if(i==4) break;
             $("#sachvanhoc").append(`<div class="col-md-3" id="${item.id}")'>
         <div class="card" style="width:100%; height: 100%;">
-                <img src="${item.img}" height="415px" alt="" class="card-img-top">
+        <img src="${item.img}" height="415px" alt="" class="card-img-top" onclick=\'xemchitiet(\`${obj}\`)\'>
                 <div class="card-body">
                     <h5>${item.name}</h5>
                     <h4>${item.gia.toLocaleString('vi-VN', { style: 'currency', currency: 'VND' })}</h4>
@@ -25,9 +25,9 @@ $(document).ready(function(){
         for(let i=0;i<data.length;i++){
             var obj = JSON.stringify(data[i]);
             let item = data[i];
-            $("#dsproduct").append(`<div class="col-md-3 mt-3" id="${item.id}" onclick='hienthi("${item.id}")'>
+            $("#dsproduct").append(`<div class="col-md-3 mt-3" id="${item.id}">
         <div class="card" style="width:100%; height: 100%;">
-                <img src="../${item.img}" height="415px" alt="" class="card-img-top">
+                <img src="../${item.img}" height="415px" alt="" class="card-img-top" onclick=\'xemchitiet(\`${obj}\`)\'>
                 <div class="card-body">
                     <h5>${item.name}</h5>
                     <h4>${item.gia.toLocaleString('vi-VN', { style: 'currency', currency: 'VND' })}</h4>