commit 6c8d6d98c02444fd01d3a8db7ec7181acf117512 Author: Tieptk Date: Wed Dec 27 23:10:16 2023 +0700 23:10 27/12/2023 diff --git a/assets/css/hoadaoroi.css b/assets/css/hoadaoroi.css new file mode 100644 index 0000000..3810435 --- /dev/null +++ b/assets/css/hoadaoroi.css @@ -0,0 +1,22 @@ +#snowflakeContainer { + position: absolute; + left: 0px; + top: 0px; +} +.snowflake { + padding-left: 15px; + font-size: 14px; + line-height: 24px; + position: fixed; + color: #ebebeb; + user-select: none; + z-index: 1000; + -moz-user-select: none; + -ms-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -webkit-touch-callout: none; +} +.snowflake:hover { + cursor: default; +} diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..c4d1a6e --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,1337 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +:root { + --color-global: #f32a1d; +} + +::-webkit-scrollbar-track { + background-color: #c5c5c5; + border-radius: 10px; +} + +::-webkit-scrollbar { + width: 8px; + border-radius: 30px; + background-color: #c5c5c5; +} + +::-webkit-scrollbar-thumb { + background: #5d5d5d; + border-radius: 30px; + background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #5d5d5d), color-stop(0.5, transparent), to(transparent)); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Inter", sans-serif; +} + +body { + color: #000; + font-family: "Inter", sans-serif; + margin: 0 auto; + background: url(../images/background-body.png) no-repeat; + background-size: cover; + font-weight: normal; + font-size: 14px; +} +body.active { + overflow: hidden; +} + +html { + font-size: 100%; + font-family: "Inter", sans-serif; +} + +img { + max-width: 100%; + height: auto; +} + +a { + text-decoration: none !important; + color: var(--text-black); +} + +.clearfix { + content: ""; + clear: both; +} + +ul, +li { + list-style: none; +} + +table { + border-collapse: collapse; + width: 100%; +} + +.ul, +.ol { + margin: 0; + padding: 0; + list-style: none; +} + +.d-flex { + display: flex !important; +} + +.d-block { + display: block; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.text-center { + text-align: center !important; +} + +.align-items { + align-items: center !important; +} + +.space-between { + justify-content: space-between !important; +} + +.space-center { + justify-content: center !important; +} + +.d-block { + display: block !important; +} + +.flex-direction { + flex-direction: column; +} + +.line-clamp-1 { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-4 { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-5 { + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.container { + width: 1220px; + padding: 0 10px; + margin: 0 auto; +} + +.icon_2023 { + background: url(../images/icon_2023.png) no-repeat; + background-size: 280px 185px; + display: block; +} + +.header { + background: #fff; + padding: 5px 0; +} +.header .icon_2023 { + width: 15px; + height: 16px; +} +.header .icon_2023.thele { + background-position: 2px -2px; +} +.header .icon_2023.muahang { + background-position: -20px -2px; +} +.header .icon_2023.phone { + background-position: -42px -2px; +} +.header .icon_2023.user { + background-position: -66px -2px; +} +.header .header-right .item { + margin-left: 40px; +} +.header .header-right .item i { + margin-right: 5px; +} +.header .header-right .phone { + color: #cb1616; + font-weight: 700; +} +.header .header-right i.fa-caret-down { + color: #cacaca; +} + +.homepage .banner { + margin: 15px 0; + width: 100%; + display: block; +} +.homepage .box-quytrinh { + background: #fff; + padding: 20px 0; + border-radius: 12px; +} +.homepage .box-quytrinh .icon_2023 { + width: 50px; + height: 50px; +} +.homepage .box-quytrinh .icon_2023.group { + background-position: -1px -43px; +} +.homepage .box-quytrinh .icon_2023.share { + background-position: -77px -44px; +} +.homepage .box-quytrinh .icon_2023.cart { + background-position: -154px -43px; +} +.homepage .box-quytrinh .icon_2023.check { + background-position: -230px -43px; +} +.homepage .box-quytrinh .item { + margin-right: 100px; + text-align: center; + position: relative; +} +.homepage .box-quytrinh .item .icon_2023 { + margin: 0 auto; + position: relative; +} +.homepage .box-quytrinh .item .icon_2023::before { + position: absolute; + content: ""; + left: 55px; + top: 50%; + width: 145px; + height: 1px; + background: #cb1616; +} +.homepage .box-quytrinh .item .icon_2023.share::before { + width: 185px; +} +.homepage .box-quytrinh .item .txt { + text-align: center; + display: block; + margin-top: 7px; +} +.homepage .box-quytrinh .item:last-child { + margin-right: 0; +} +.homepage .box-quytrinh .item:last-child .icon_2023::before { + display: none; +} +.homepage .box-combo-sold-out { + margin: 24px 120px 30px 120px; +} +.homepage .box-group-user .title { + font-size: 24px; + color: #d60a00; + font-weight: 800; + text-transform: uppercase; + padding: 25px 0; + text-align: center; +} +.homepage .box-group-user .product-item { + border: 1px solid #f5f5f5; + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1); + padding: 15px; +} +.homepage .box-group-user .product-item .product-image { + width: 200px; + height: 200px; +} +.homepage .box-group-user .product-item .product-info { + width: calc(100% - 210px); +} +.homepage .group-list-product { + margin: 30px 0; +} +.homepage .box-list-product { + margin-bottom: 20px; +} +.homepage .box-list-product .title span { + font-size: 24px; + font-weight: 700; + color: #fff; + text-transform: uppercase; + margin: 35px 15px 13px 15px; +} +.homepage .box-list-product .title .icon_2023 { + width: 60px; + height: 65px; +} +.homepage .box-list-product .title .icon_2023.title_left { + background-position: 0 -116px; +} +.homepage .box-list-product .title .icon_2023.title_right { + background-position: -100px -116px; +} +.homepage .box-list-product .product-list { + margin-right: -15px; +} +.homepage .box-list-product .product-item { + width: calc(33.3333333333% - 15px); +} +.homepage .box-list-product .product-image { + width: 110px; + height: auto; +} +.homepage .box-list-product .product-info { + width: calc(100% - 120px); +} +.homepage .box-list-product .product-time-holder b { + font-size: 12px; +} +.homepage .box-list-product .add-group { + width: 110px; + height: 30px; + line-height: 30px; +} +.homepage .box-list-product .add-group span { + font-size: 10px; + margin: 0 2px; +} +.homepage .box-list-product .add-group i { + font-size: 20px; +} +.homepage .box-list-product .add-member { + font-size: 12px; + width: 110px; + height: 30px; + line-height: 30px; +} +.homepage .box-list-product .list-memeber .note { + font-size: 12px; +} +.homepage .box-list-product .product-name { + font-size: 13px; +} +.homepage .box-list-product .product-item .red { + font-size: 12px; +} +.homepage .list-category { + margin-bottom: 15px; +} +.homepage .list-category .item-cate { + padding: 0 10px; + border: 1px solid #fff; + border-radius: 5px; + color: #fff; + margin-right: 10px; + height: 35px; + line-height: 35px; + text-align: center; +} +.homepage .list-category .item-cate.active, .homepage .list-category .item-cate:hover { + background: linear-gradient(180deg, #03b49f 0%, #146863 100%); + border: none; +} +.homepage .box-list-product.coming .title { + margin-bottom: 20px; + font-weight: 700; + font-size: 24px; + text-transform: uppercase; + line-height: 46px; + height: 46px; + background: linear-gradient(180deg, #c7c7c7 0%, #eaeaea 100%); +} +.homepage .box-list-product.coming .price-banle { + margin: 0 0 5px 0; +} +.homepage .box-list-product.coming .box-time { + border: 1px solid #e11010; + border-radius: 4px; + width: 96px; + height: 21px; + justify-content: center; +} +.homepage .box-list-product.coming .box-time b { + color: #f32a1d; + font-weight: 700; +} +.homepage .box-list-product.coming .box-time b::before { + color: #f32a1d; +} +.homepage .box-list-product.coming .box-time .icon_2023.time { + background-position: -268px -10px; +} + +.product-item { + width: calc(50% - 15px); + margin-right: 15px; + margin-bottom: 15px; + border-radius: 10px; + background: #fff; + padding: 10px; +} +.product-item .product-image { + width: 150px; + height: 150px; + display: block; + border-radius: 8px; + position: relative; + overflow: hidden; +} +.product-item .product-image img { + display: block; + width: 100%; + height: 100%; + -o-object-fit: contain; + object-fit: contain; +} +.product-item .product-image.sold::before { + position: absolute; + content: ""; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 1; +} +.product-item .product-image .icon-sold { + position: absolute; + background: url(../images/icon_sold-out.png) no-repeat; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 96px; + height: 50px; + z-index: 9; +} +.product-item .product-image .soluongnhom { + position: absolute; + top: 5px; + left: 5px; + border-radius: 3px; + padding: 2px 5px; + text-align: center; + font-size: 11px; + color: #fff; + background: linear-gradient(90deg, #e11010 -5.98%, #f3501d 100%); +} +.product-item .product-info { + width: calc(100% - 160px); + margin-left: 10px; +} +.product-item .product-name { + font-weight: 400; + margin-bottom: 5px; +} +.product-item .product-name:hover { + color: var(--color-global); + font-weight: 500; +} +.product-item .retail_price { + font-size: 15px; + color: #f32a1d; + font-weight: 700; +} +.product-item .price-old { + color: #cacaca; + margin-left: 5px; + font-weight: 500; +} +.product-item .box-price { + margin: 5px 0; +} +.product-item .total-group { + display: flex; + align-items: center; +} +.product-item .total-group .icon_2023 { + width: 25px; + height: 23px; +} +.product-item .total-group .icon_2023.group { + background-position: -154px 0; + background-size: 310px 220px; +} +.product-item .total-group span { + font-size: 13px; + color: #f32a1d; + font-weight: 500; + margin-left: 2px; +} +.product-item .box-memeber .item { + width: 20px; + height: 20px; + text-align: center; + background: #8c8c8c; + line-height: 19px; + color: #fff; + border-radius: 50%; + font-size: 12px; + margin-left: 2px; + z-index: 2; +} +.product-item .box-memeber .item.add { + background: #fff; + border: 1.5px dashed #8c8c8c; + color: #8c8c8c; + line-height: 18px; + margin-left: -5px; + z-index: 1; +} +.product-item .list-memeber { + margin-top: 10px; + margin-bottom: 17px; +} +.product-item .list-memeber .note { + margin-left: 5px; +} +.product-item .box-sold { + margin: 10px 0; + width: 100%; + height: 16px; + position: relative; + border-radius: 7px; + background: linear-gradient(0deg, #ffeee3 0%, #ffeee3 100%), #ffeee3; +} +.product-item .box-sold .quantity-sold { + font-size: 11px; + color: #fff; + font-weight: 600; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + white-space: nowrap; +} +.product-item .box-sold .icon_2023 { + width: 20px; + height: 26px; + position: absolute; + left: 0; + bottom: 0; + z-index: 9; +} +.product-item .box-sold .icon_2023.hot { + background-position: -112px 4px; +} +.product-item .box-sold .line-deal { + position: absolute; + content: ""; + left: 0; + top: 0; + height: 100%; + border-radius: 7px 0px 0px 7px; + background: linear-gradient(90deg, #f32a1d -5.98%, #ff6d1b 100%); +} +.product-item .icon_2023 { + width: 15px; + height: 15px; +} +.product-item .icon_2023.time { + background-position: -240px -10px; + background-size: 395px 254px; +} +.product-item .product-time-holder { + display: flex; + align-items: center; + margin-left: 5px; + color: #6c6c6c; +} +.product-item .product-time-holder b { + position: relative; + margin-right: 7px; +} +.product-item .product-time-holder b::before { + position: absolute; + right: -5px; + top: -1px; + content: ":"; + color: #6c6c6c; +} +.product-item .product-time-holder b:last-child { + margin-right: 0; +} +.product-item .product-time-holder b:last-child::before { + display: none; +} +.product-item .add-member { + width: 170px; + height: 35px; + border-radius: 17px; + background: linear-gradient(90deg, #10d18c -5.98%, #a7e15e 100%); + text-align: center; + line-height: 35px; + color: #fff; + font-weight: 700; +} +.product-item .add-member .fa-plus { + font-size: 13px; + border-radius: 50%; + border: 2px solid #fff; + width: 20px; + height: 20px; + line-height: 19px; + font-weight: 400; + display: inline-block; +} +.product-item .note-leader { + margin-top: 5px; +} +.product-item .note-leader .icon_2023 { + width: 14px; + height: 14px; +} +.product-item .note-leader .icon_2023.bell { + background-position: -90px 0; + display: inline-block; +} +.product-item .note-leader span { + font-size: 11px; + color: #858585; + font-style: italic; +} +.product-item .red { + color: #f32a1d; + font-size: 13px; + margin-left: 5px; + font-weight: 500; +} +.product-item .price-banle { + margin: 10px 0 17px 0; + color: #6c6c6c; + font-weight: 500; +} +.product-item .add-group { + width: 150px; + height: 35px; + line-height: 35px; + border-radius: 17px; + background: linear-gradient(90deg, #e11010 -5.98%, #f3501d 100%); + text-align: center; + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; +} +.product-item .add-group i { + font-size: 25px; + background: linear-gradient(90deg, #fff -11.54%, rgba(255, 255, 255, 0.17) 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.product-item .add-group span { + margin: 0 3px; +} + +.background-white { + background: #fff; + border-radius: 15px; +} + +.box-successful-purchase { + background: url(../images/background-successful-purchase.png) no-repeat; + background-size: 100%; + height: 440px; + border-radius: 15px; +} +.box-successful-purchase .title { + font-size: 24px; + font-weight: 700; + color: #d60a00; + text-align: center; + text-transform: uppercase; + padding: 40px 0 16px 0; + display: block; +} +.box-successful-purchase .content { + padding: 0 10px 60px 50px; + overflow: auto; + height: 280px; + margin-right: 41px; +} +.box-successful-purchase td { + padding: 10px 14px; +} +.box-successful-purchase td:first-child { + border-radius: 8px 0 0 8px; +} +.box-successful-purchase td:last-child { + border-radius: 0 8px 8px 0; +} +.box-successful-purchase th { + background: #ffeee3; + padding: 10px 14px; +} +.box-successful-purchase th:first-child { + border-radius: 8px 0 0 8px; +} +.box-successful-purchase th:last-child { + border-radius: 0 8px 8px 0; +} +.box-successful-purchase thead th { + position: sticky; + top: 0; +} +.box-successful-purchase tr:nth-child(2n) { + background: #f9f4f1; +} +.box-successful-purchase .name { + width: 26px; + height: 26px; + margin-right: 8px; + background: #8c8c8c; + border-radius: 50%; + text-align: center; + line-height: 26px; + color: #fff; + font-weight: 700; +} +.box-successful-purchase .price b { + color: #f32a1d; + margin-right: 10px; +} +.box-successful-purchase .price del { + color: #a7a7a7; +} + +.box-thele { + background: url(../images/background-thele.png) no-repeat; + background-size: 100% 100%; + height: 410px; + border-radius: 15px; + padding: 15px; +} +.box-thele .title { + font-size: 24px; + font-weight: 700; + text-transform: uppercase; + color: #d60a00; + text-align: center; + padding: 10px 0 20px 0; +} +.box-thele .content { + background: #fff; + width: 100%; + height: 316px; + border-radius: 12px; + padding: 30px 40px; +} +.box-thele .item { + margin-bottom: 6px; +} +.box-thele .item .number { + font-size: 20px; + color: #d60a00; + font-weight: 700; + margin-right: 14px; +} +.box-thele .item ul { + margin-bottom: 0; +} +.box-thele .item .txt { + margin-top: 5px; +} +.box-thele .item .txt p { + margin-bottom: 0; +} +.box-thele .item .txt li { + list-style: inside; + margin-left: 5px; +} + +.box-questions { + padding: 15px; + margin: 15px 0; +} +.box-questions .title { + font-size: 24px; + color: #d60a00; + text-transform: uppercase; + text-align: center; + font-weight: 700; + margin: 10px 0 20px 0; +} +.box-questions .item { + width: calc(50% - 15px); + margin-right: 15px; + margin-bottom: 10px; +} +.box-questions .item .number { + color: #d60a00; + font-size: 16px; + font-weight: 700; + margin-right: 10px; +} +.box-questions .card { + border-radius: 10px; + background: #ffeee3; + border: 0; +} +.box-questions .card span { + color: #000; + font-size: 14px; +} +.box-questions .card-header { + border-radius: 10px; + border-bottom: 0; + background: #ffeee3; +} +.box-questions .card-body { + background: #fff; + padding: 7px 10px; +} +.box-questions [data-toggle=collapse].collapsed .fa:before { + content: "\f0da"; + font-size: 20px; +} +.box-questions [data-toggle=collapse] .fa:before { + content: "\f0d7"; + font-size: 20px; +} +.box-questions a:hover { + color: #000; +} + +.footer { + background: #fff; +} +.footer .footer-main-content { + padding: 25px 0; +} +.footer .item-footer { + width: calc(33.3333333333% - 50px); + margin-right: 50px; +} +.footer .item-footer:last-child { + width: 33.3333333333%; + margin-right: 0; +} +.footer .item-footer p { + margin-bottom: 5px; +} +.footer .icon_social { + background: url(../images/icon_social.png) no-repeat; + width: 32px; + height: 32px; + display: block; + margin-right: 5px; +} +.footer .icon_social.youtobe { + background-position: -4px -6px; +} +.footer .icon_social.tiktok { + background-position: -41px -6px; +} +.footer .icon_social.facebook { + background-position: -80px -6px; +} +.footer .icon_social.zalo { + background-position: -118px -6px; +} +.footer .icon_social.map { + background-position: -158px -6px; +} +.footer span { + margin-right: 5px; +} +.footer a { + font-weight: 700; +} +.footer .footer-bottom { + background: #fafafa; + padding: 20px 0; +} +.footer .footer-bottom .logo { + height: 60px; + width: 188px; +} +.footer .footer-bottom .content-right { + width: calc(100% - 200px); + margin-left: 15px; +} +.footer .footer-bottom .content-right p { + margin-bottom: 5px; + font-size: 13px; +} + +.background-group-form { + background: url(../images/background-popup.png) no-repeat; + background-size: 100% 100%; + position: relative; + padding: 10px; + border-radius: 12px; +} + +.box-login { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 490px; + z-index: 9999; + display: none; +} +.box-login .content { + background: #fff; + padding-bottom: 20px; + border-radius: 12px; +} +.box-login .content .title { + font-size: 16px; + font-weight: 700; + text-align: center; + margin: 0 50px; + padding: 15px 0; +} +.box-login .btn-login { + width: 242px; + height: 35px; + border-radius: 5px; + background: linear-gradient(90deg, #1270e1 -5.98%, #26a7f8 100%); + display: flex; + align-items: center; + margin: 0 auto 20px auto; +} +.box-login .btn-login .icon { + width: 35px; + height: 35px; + border-right: 1px solid rgba(255, 255, 255, 0.5019607843); + display: flex; + align-items: center; + text-align: center; + justify-content: center; +} +.box-login .btn-login .icon i { + font-size: 18px; + color: #fff; +} +.box-login .btn-login .txt { + width: calc(100% - 35px); + text-align: center; + color: #fff; + font-weight: 700; +} +.box-login .btn-login.google { + background: linear-gradient(90deg, #ea4335 -5.98%, #ff6a5e 100%); +} +.box-login .btn-close { + position: absolute; + right: 0; + top: 0; + width: 30px; + height: 30px; + background: #2f2f2f; + color: #fff; + line-height: 25px; + text-align: center; + border: 2px solid #fff; + box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); + border-radius: 50%; +} +.box-login .btn-close i { + font-size: 15px; +} + +.overlay { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 99; + display: none; +} + +.overlay.active { + display: block; +} + +.global-popup { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 490px; + z-index: 9999; + display: none; +} +.global-popup.active { + display: block; +} +.global-popup .btn-close { + position: absolute; + right: 0; + top: 0; + width: 30px; + height: 30px; + background: #2f2f2f; + color: #fff; + line-height: 25px; + text-align: center; + border: 2px solid #fff; + box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); + border-radius: 50%; +} +.global-popup .btn-close i { + font-size: 15px; +} +.global-popup .content { + background: #fff; + padding-bottom: 20px; + border-radius: 12px; + padding: 10px; +} +.global-popup .content .title { + font-size: 16px; + font-weight: 700; + text-align: center; + margin: 0 50px; + padding: 15px 0 5px 0; +} +.global-popup .content .note { + margin: 0 50px; + text-align: center; + font-size: 14px; +} +.global-popup .box-share-link { + margin: 15px 0; +} +.global-popup .info-link { + width: calc(100% - 91px); + margin-right: 10px; + height: 40px; + border-radius: 5px; + border: 1px solid #f4f4f4; + background: #edf4ff; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + text-align: center; +} +.global-popup .info-link span { + white-space: nowrap; + display: inline-block; +} +.global-popup .info-link .blue { + color: rgba(0, 133, 255, 0.8); + font-weight: 500; +} +.global-popup .btn-copy { + width: 81px; + height: 40px; + border-radius: 5px; + border: 1px solid #f4f4f4; + background: #edf4ff; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + text-align: center; + line-height: 40px; + color: #000; + font-weight: 500; +} +.global-popup .list-btn-share { + margin-bottom: 10px; +} +.global-popup .list-btn-share b { + text-transform: uppercase; + margin-right: 10px; +} +.global-popup .list-btn-share a { + margin-right: 10px; +} +.global-popup .list-btn-share img { + width: 26px; + height: 26px; + display: block; +} +.global-popup .form-add-email input { + width: 100%; + height: 40px; + padding: 0 10px; + border-radius: 5px; + border: 1px solid #f4f4f4; + background: #fff; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + outline: none; + margin-bottom: 15px; +} +.global-popup .form-add-email input::-moz-placeholder { + font-size: 13px; + color: rgba(172, 172, 172, 0.8); +} +.global-popup .form-add-email input::placeholder { + font-size: 13px; + color: rgba(172, 172, 172, 0.8); +} +.global-popup .form-add-email input:focus { + border: 1px solid rgba(0, 0, 0, 0.1); +} +.global-popup .content-email { + max-height: 210px; + overflow: auto; +} +.global-popup .add-email { + text-align: center; + color: rgba(0, 133, 255, 0.8); + font-weight: 500; + display: block; + margin: 10px 0; +} +.global-popup .btn-add-member { + display: flex; + align-items: center; + justify-content: space-evenly; + margin: 15px auto; + width: 180px; + height: 30px; + line-height: 30px; + text-align: center; + border-radius: 17px; + background: linear-gradient(90deg, #0090f9 -5.98%, #00b2ff 100%); + color: #fff; + font-weight: 700; +} +.global-popup .product-item { + width: 100%; + margin-right: 0; +} +.global-popup .product-item .product-image { + height: 115px; +} +.global-popup .product-item .note-member { + margin-left: 10px; + font-size: 13px; +} +.global-popup .product-item .box-qnt { + position: absolute; + bottom: 0; + left: 50%; + width: 100%; + transform: translate(-50%, 0); + color: #222; +} +.global-popup .product-item .box-qnt .sl { + width: 40px; + height: 20px; + line-height: 20px; + border-radius: 3px; + background: rgba(0, 0, 0, 0.5); + text-align: center; + color: #fff; + font-size: 10px; + margin-right: 5px; +} +.global-popup .product-item .box-qnt .conlai { + width: 53px; + height: 20px; + line-height: 20px; + border-radius: 3px; + background: linear-gradient(90deg, rgba(249, 60, 0, 0.85) -5.98%, rgba(255, 122, 0, 0.85) 100%); + text-align: center; + color: #fff; + font-size: 10px; +} +.global-popup .avatar-leader { + position: absolute; + left: 50%; + top: -30px; + transform: translate(-50%, 0); + width: 60px; + height: 60px; + border-radius: 50%; + z-index: 99; + background: #8c8c8c; + color: #fff; + text-align: center; + font-size: 36px; + font-weight: 700; + line-height: 55px; + border: 3px solid #fff; + box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1); +} +.global-popup .title-member { + display: block; + margin: 20px auto 10px auto; + font-size: 16px; + font-weight: 700; +} +.global-popup .btn-member-add-group { + width: 210px; + height: 46px; + border-radius: 17px; + background: linear-gradient(90deg, #10d18c -5.98%, #a7e15e 100%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 10px auto; + color: #fff; + text-align: center; +} +.global-popup .btn-member-add-group b { + font-weight: 700; +} +.global-popup .btn-member-add-group .product-time-holder b { + margin-right: 10px; + position: relative; +} +.global-popup .btn-member-add-group .product-time-holder b::before { + position: absolute; + content: ":"; + right: -8px; + top: -1px; +} +.global-popup .btn-member-add-group .product-time-holder b:last-child { + margin-right: 0; +} +.global-popup .btn-member-add-group .product-time-holder b:last-child::before { + display: none; +} +.global-popup .txt { + padding: 10px 0; +} +.global-popup .name-leader { + padding-bottom: 10px; + display: block; +} +.global-popup .btn-blue { + text-align: center; + margin: 0 auto; + padding: 7px 0; + display: block; + width: 100px; + font-size: 14px; + text-transform: uppercase; + color: #fff; + font-weight: 700; + border-radius: 17px; + background: linear-gradient(90deg, #0090f9 -5.98%, #00b2ff 100%); +} +.global-popup .info-pay { + border-radius: 12px; + border: 1px solid #dadada; + padding: 10px; + margin: 10px 0; +} +.global-popup .info-pay .title { + margin: 0 auto 5px auto; + padding: 0; + text-transform: uppercase; + font-size: 13px; +} +.global-popup .info-pay .left { + width: 86px; + height: 86px; +} +.global-popup .info-pay .right { + margin-left: 15px; + width: calc(100% - 96px); +} +.global-popup .info-pay .right span { + display: block; +} +.global-popup .box-timeout-pay { + margin-bottom: 5px; +} +.global-popup .box-timeout-pay .product-time-holder { + margin-left: 5px; +} +.global-popup .box-timeout-pay .product-time-holder b { + margin-right: 10px; + position: relative; +} +.global-popup .box-timeout-pay .product-time-holder b::before { + position: absolute; + content: ":"; + right: -8px; + top: -1px; +} +.global-popup .box-timeout-pay .product-time-holder b:last-child { + margin-right: 0; +} +.global-popup .box-timeout-pay .product-time-holder b:last-child::before { + display: none; +} +.global-popup .box-cskh { + border-radius: 5px; + border: 1px solid #f4f4f4; + background: #edf4ff; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + padding: 10px 40px; + text-align: center; + margin-bottom: 10px; +} +.global-popup .name-group { + width: 100%; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + border-radius: 5px; + border: 1px solid #f4f4f4; + height: 40px; + padding: 0 10px; + margin: 10px 0; + outline: none; +} +.global-popup .name-group::-moz-placeholder { + font-size: 13px; + color: rgba(172, 172, 172, 0.8); +} +.global-popup .name-group::placeholder { + font-size: 13px; + color: rgba(172, 172, 172, 0.8); +} +.global-popup .name-group:focus { + border: 1px solid rgba(0, 0, 0, 0.1); +} +.global-popup .vd { + font-size: 14px; + font-style: italic; + display: block; +} +.global-popup .btn-add-group { + display: flex; + align-items: center; + justify-content: space-evenly; + margin: 15px auto; + width: 120px; + height: 30px; + line-height: 30px; + text-align: center; + border-radius: 17px; + background: var(--gadien1, linear-gradient(90deg, #f93c00 -5.98%, #ff7a00 100%)); + color: #fff; + font-weight: 700; +} +.global-popup .btn-add-group i { + background: linear-gradient(90deg, #fff -11.54%, rgba(255, 255, 255, 0.17) 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 25px; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/assets/css/style.css.map b/assets/css/style.css.map new file mode 100644 index 0000000..42e469a --- /dev/null +++ b/assets/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..9b9d556 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,1341 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +:root { + --color-global: #f32a1d; +} +::-webkit-scrollbar-track { + background-color: #c5c5c5; + border-radius: 10px; +} +::-webkit-scrollbar { + width: 8px; + border-radius: 30px; + background-color: #c5c5c5; +} +::-webkit-scrollbar-thumb { + background: #5d5d5d; + border-radius: 30px; + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + color-stop(0.7, #5d5d5d), + color-stop(0.5, transparent), + to(transparent) + ); +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Inter", sans-serif; +} + +body { + color: #000; + font-family: "Inter", sans-serif; + margin: 0 auto; + background: url(../images/background-body.png) no-repeat; + background-size: cover; + font-weight: normal; + font-size: 14px; + &.active { + overflow: hidden; + } +} + +html { + font-size: 100%; + font-family: "Inter", sans-serif; +} + +img { + max-width: 100%; + height: auto; +} + +a { + text-decoration: none !important; + color: var(--text-black); +} + +.clearfix { + content: ""; + clear: both; +} + +ul, +li { + list-style: none; +} + +table { + border-collapse: collapse; + width: 100%; +} + +.ul, +.ol { + margin: 0; + padding: 0; + list-style: none; +} +.d-flex { + display: flex !important; +} + +.d-block { + display: block; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.text-center { + text-align: center !important; +} + +.align-items { + align-items: center !important; +} + +.space-between { + justify-content: space-between !important; +} + +.space-center { + justify-content: center !important; +} + +.d-block { + display: block !important; +} + +.flex-direction { + flex-direction: column; +} +.line-clamp-1 { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} +.line-clamp-4 { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} +.line-clamp-5 { + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.container { + width: 1220px; + padding: 0 10px; + margin: 0 auto; +} +.icon_2023 { + background: url(../images/icon_2023.png) no-repeat; + background-size: 280px 185px; + display: block; +} + +.header { + background: #fff; + padding: 5px 0; + .icon_2023 { + width: 15px; + height: 16px; + &.thele { + background-position: 2px -2px; + } + &.muahang { + background-position: -20px -2px; + } + &.phone { + background-position: -42px -2px; + } + &.user { + background-position: -66px -2px; + } + } + .header-right { + .item { + margin-left: 40px; + i { + margin-right: 5px; + } + } + .phone { + color: #cb1616; + font-weight: 700; + } + i.fa-caret-down { + color: #cacaca; + } + } +} + +.homepage { + .banner { + margin: 15px 0; + width: 100%; + display: block; + } + .box-quytrinh { + background: #fff; + padding: 20px 0; + border-radius: 12px; + .icon_2023 { + width: 50px; + height: 50px; + &.group { + background-position: -1px -43px; + } + &.share { + background-position: -77px -44px; + } + &.cart { + background-position: -154px -43px; + } + &.check { + background-position: -230px -43px; + } + } + .item { + margin-right: 100px; + text-align: center; + position: relative; + .icon_2023 { + margin: 0 auto; + position: relative; + &::before { + position: absolute; + content: ""; + left: 55px; + top: 50%; + width: 145px; + height: 1px; + background: #cb1616; + } + &.share { + &::before { + width: 185px; + } + } + } + .txt { + text-align: center; + display: block; + margin-top: 7px; + } + &:last-child { + margin-right: 0; + .icon_2023::before { + display: none; + } + } + } + } + .box-combo-sold-out { + margin: 24px 120px 30px 120px; + } + .box-group-user { + .title { + font-size: 24px; + color: #d60a00; + font-weight: 800; + text-transform: uppercase; + padding: 25px 0; + text-align: center; + } + .product-item { + border: 1px solid #f5f5f5; + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1); + padding: 15px; + .product-image { + width: 200px; + height: 200px; + } + .product-info { + width: calc(100% - 210px); + } + } + } + .group-list-product { + margin: 30px 0; + } + .box-list-product { + margin-bottom: 20px; + .title { + span { + font-size: 24px; + font-weight: 700; + color: #fff; + text-transform: uppercase; + margin: 35px 15px 13px 15px; + } + .icon_2023 { + width: 60px; + height: 65px; + &.title_left { + background-position: 0 -116px; + } + &.title_right { + background-position: -100px -116px; + } + } + } + .product-list { + margin-right: -15px; + } + .product-item { + width: calc(100% / 3 - 15px); + } + .product-image { + width: 110px; + height: auto; + } + .product-info { + width: calc(100% - 120px); + } + .product-time-holder b { + font-size: 12px; + } + .add-group { + width: 110px; + height: 30px; + line-height: 30px; + } + .add-group span { + font-size: 10px; + margin: 0 2px; + } + .add-group i { + font-size: 20px; + } + .add-member { + font-size: 12px; + width: 110px; + height: 30px; + line-height: 30px; + } + .list-memeber .note { + font-size: 12px; + } + .product-name { + font-size: 13px; + } + .product-item .red { + font-size: 12px; + } + } + .list-category { + margin-bottom: 15px; + .item-cate { + padding: 0 10px; + border: 1px solid #fff; + border-radius: 5px; + color: #fff; + margin-right: 10px; + height: 35px; + line-height: 35px; + text-align: center; + &.active, + &:hover { + background: linear-gradient(180deg, #03b49f 0%, #146863 100%); + border: none; + } + } + } + .box-list-product.coming { + .title { + margin-bottom: 20px; + font-weight: 700; + font-size: 24px; + text-transform: uppercase; + line-height: 46px; + height: 46px; + background: linear-gradient(180deg, #c7c7c7 0%, #eaeaea 100%); + } + .price-banle { + margin: 0 0 5px 0; + } + .box-time { + border: 1px solid #e11010; + border-radius: 4px; + width: 96px; + height: 21px; + justify-content: center; + b { + color: #f32a1d; + font-weight: 700; + &::before { + color: #f32a1d; + } + } + .icon_2023.time { + background-position: -268px -10px; + } + } + } +} + +.product-item { + width: calc(50% - 15px); + margin-right: 15px; + margin-bottom: 15px; + border-radius: 10px; + background: #fff; + padding: 10px; + .product-image { + width: 150px; + height: 150px; + display: block; + border-radius: 8px; + position: relative; + overflow: hidden; + img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + } + &.sold::before { + position: absolute; + content: ""; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 1; + } + .icon-sold { + position: absolute; + background: url(../images/icon_sold-out.png) no-repeat; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 96px; + height: 50px; + z-index: 9; + } + .soluongnhom { + position: absolute; + top: 5px; + left: 5px; + border-radius: 3px; + padding: 2px 5px; + text-align: center; + font-size: 11px; + color: #fff; + background: linear-gradient(90deg, #e11010 -5.98%, #f3501d 100%); + } + } + .product-info { + width: calc(100% - 160px); + margin-left: 10px; + } + .product-name { + font-weight: 400; + margin-bottom: 5px; + &:hover { + color: var(--color-global); + font-weight: 500; + } + } + .retail_price { + font-size: 15px; + color: #f32a1d; + font-weight: 700; + } + .price-old { + color: #cacaca; + margin-left: 5px; + font-weight: 500; + } + .box-price { + margin: 5px 0; + } + .total-group { + display: flex; + align-items: center; + .icon_2023 { + width: 25px; + height: 23px; + &.group { + background-position: -154px 0; + background-size: 310px 220px; + } + } + span { + font-size: 13px; + color: #f32a1d; + font-weight: 500; + margin-left: 2px; + } + } + .box-memeber { + .item { + width: 20px; + height: 20px; + text-align: center; + background: #8c8c8c; + line-height: 19px; + color: #fff; + border-radius: 50%; + font-size: 12px; + margin-left: 2px; + z-index: 2; + &.add { + background: #fff; + border: 1.5px dashed #8c8c8c; + color: #8c8c8c; + line-height: 18px; + margin-left: -5px; + z-index: 1; + } + } + } + .list-memeber { + margin-top: 10px; + margin-bottom: 17px; + .note { + margin-left: 5px; + } + } + .box-sold { + margin: 10px 0; + width: 100%; + height: 16px; + position: relative; + border-radius: 7px; + background: linear-gradient(0deg, #ffeee3 0%, #ffeee3 100%), #ffeee3; + .quantity-sold { + font-size: 11px; + color: #fff; + font-weight: 600; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + white-space: nowrap; + } + .icon_2023 { + width: 20px; + height: 26px; + position: absolute; + left: 0; + bottom: 0; + z-index: 9; + &.hot { + background-position: -112px 4px; + } + } + .line-deal { + position: absolute; + content: ""; + left: 0; + top: 0; + height: 100%; + border-radius: 7px 0px 0px 7px; + background: linear-gradient(90deg, #f32a1d -5.98%, #ff6d1b 100%); + } + } + .icon_2023 { + width: 15px; + height: 15px; + &.time { + background-position: -240px -10px; + background-size: 395px 254px; + } + } + .product-time-holder { + display: flex; + align-items: center; + margin-left: 5px; + color: #6c6c6c; + b { + position: relative; + margin-right: 7px; + &::before { + position: absolute; + right: -5px; + top: -1px; + content: ":"; + color: #6c6c6c; + } + &:last-child { + margin-right: 0; + &::before { + display: none; + } + } + } + } + .add-member { + width: 170px; + height: 35px; + border-radius: 17px; + background: linear-gradient(90deg, #10d18c -5.98%, #a7e15e 100%); + text-align: center; + line-height: 35px; + color: #fff; + font-weight: 700; + .fa-plus { + font-size: 13px; + border-radius: 50%; + border: 2px solid #fff; + width: 20px; + height: 20px; + line-height: 19px; + font-weight: 400; + display: inline-block; + } + } + .note-leader { + margin-top: 5px; + .icon_2023 { + width: 14px; + height: 14px; + &.bell { + background-position: -90px 0; + display: inline-block; + } + } + span { + font-size: 11px; + color: #858585; + font-style: italic; + } + } + .red { + color: #f32a1d; + font-size: 13px; + margin-left: 5px; + font-weight: 500; + } + .price-banle { + margin: 10px 0 17px 0; + color: #6c6c6c; + font-weight: 500; + } + .add-group { + width: 150px; + height: 35px; + line-height: 35px; + border-radius: 17px; + background: linear-gradient(90deg, #e11010 -5.98%, #f3501d 100%); + text-align: center; + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + i { + font-size: 25px; + background: linear-gradient(90deg, #fff -11.54%, rgba(255, 255, 255, 0.17) 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + span { + margin: 0 3px; + } + } +} + +.background-white { + background: #fff; + border-radius: 15px; +} +.box-successful-purchase { + background: url(../images/background-successful-purchase.png) no-repeat; + background-size: 100%; + height: 440px; + border-radius: 15px; + .title { + font-size: 24px; + font-weight: 700; + color: #d60a00; + text-align: center; + text-transform: uppercase; + padding: 40px 0 16px 0; + display: block; + } + .content { + padding: 0 10px 60px 50px; + overflow: auto; + height: 280px; + margin-right: 41px; + } + td { + padding: 10px 14px; + &:first-child { + border-radius: 8px 0 0 8px; + } + &:last-child { + border-radius: 0 8px 8px 0; + } + } + th { + background: #ffeee3; + padding: 10px 14px; + &:first-child { + border-radius: 8px 0 0 8px; + } + &:last-child { + border-radius: 0 8px 8px 0; + } + } + thead th { + position: sticky; + top: 0; + } + tr { + &:nth-child(2n) { + background: #f9f4f1; + } + } + .name { + width: 26px; + height: 26px; + margin-right: 8px; + background: #8c8c8c; + border-radius: 50%; + text-align: center; + line-height: 26px; + color: #fff; + font-weight: 700; + } + .price { + b { + color: #f32a1d; + margin-right: 10px; + } + del { + color: #a7a7a7; + } + } +} +.box-thele { + background: url(../images/background-thele.png) no-repeat; + background-size: 100% 100%; + height: 410px; + border-radius: 15px; + padding: 15px; + .title { + font-size: 24px; + font-weight: 700; + text-transform: uppercase; + color: #d60a00; + text-align: center; + padding: 10px 0 20px 0; + } + .content { + background: #fff; + width: 100%; + height: 316px; + border-radius: 12px; + padding: 30px 40px; + } + .item { + margin-bottom: 6px; + .number { + font-size: 20px; + color: #d60a00; + font-weight: 700; + margin-right: 14px; + } + ul { + margin-bottom: 0; + } + .txt { + margin-top: 5px; + p { + margin-bottom: 0; + } + li { + list-style: inside; + margin-left: 5px; + } + } + } +} +.box-questions { + padding: 15px; + margin: 15px 0; + .title { + font-size: 24px; + color: #d60a00; + text-transform: uppercase; + text-align: center; + font-weight: 700; + margin: 10px 0 20px 0; + } + .item { + width: calc(100% / 2 - 15px); + margin-right: 15px; + margin-bottom: 10px; + .number { + color: #d60a00; + font-size: 16px; + font-weight: 700; + margin-right: 10px; + } + } + .card { + border-radius: 10px; + background: #ffeee3; + border: 0; + span { + color: #000; + font-size: 14px; + } + } + .card-header { + border-radius: 10px; + border-bottom: 0; + background: #ffeee3; + } + .card-body { + background: #fff; + padding: 7px 10px; + } + [data-toggle="collapse"].collapsed .fa:before { + content: "\f0da"; + font-size: 20px; + } + [data-toggle="collapse"] .fa:before { + content: "\f0d7"; + font-size: 20px; + } + a:hover { + color: #000; + } +} + +.footer { + background: #fff; + .footer-main-content { + padding: 25px 0; + } + .item-footer { + width: calc(100% / 3 - 50px); + margin-right: 50px; + &:last-child { + width: calc(100% / 3); + margin-right: 0; + } + p { + margin-bottom: 5px; + } + } + .icon_social { + background: url(../images/icon_social.png) no-repeat; + width: 32px; + height: 32px; + display: block; + margin-right: 5px; + &.youtobe { + background-position: -4px -6px; + } + &.tiktok { + background-position: -41px -6px; + } + &.facebook { + background-position: -80px -6px; + } + &.zalo { + background-position: -118px -6px; + } + &.map { + background-position: -158px -6px; + } + } + span { + margin-right: 5px; + } + a { + font-weight: 700; + } + .footer-bottom { + background: #fafafa; + padding: 20px 0; + .logo { + height: 60px; + width: 188px; + } + .content-right { + width: calc(100% - 200px); + margin-left: 15px; + p { + margin-bottom: 5px; + font-size: 13px; + } + } + } +} +.background-group-form { + background: url(../images/background-popup.png) no-repeat; + background-size: 100% 100%; + position: relative; + padding: 10px; + border-radius: 12px; +} +.box-login { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 490px; + z-index: 9999; + display: none; + .content { + background: #fff; + padding-bottom: 20px; + border-radius: 12px; + .title { + font-size: 16px; + font-weight: 700; + text-align: center; + margin: 0 50px; + padding: 15px 0; + } + } + .btn-login { + width: 242px; + height: 35px; + border-radius: 5px; + background: linear-gradient(90deg, #1270e1 -5.98%, #26a7f8 100%); + display: flex; + align-items: center; + margin: 0 auto 20px auto; + .icon { + width: 35px; + height: 35px; + border-right: 1px solid #ffffff80; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + i { + font-size: 18px; + color: #fff; + } + } + .txt { + width: calc(100% - 35px); + text-align: center; + color: #fff; + font-weight: 700; + } + &.google { + background: linear-gradient(90deg, #ea4335 -5.98%, #ff6a5e 100%); + } + } + .btn-close { + position: absolute; + right: 0; + top: 0; + width: 30px; + height: 30px; + background: #2f2f2f; + color: #fff; + line-height: 25px; + text-align: center; + border: 2px solid #fff; + box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); + border-radius: 50%; + i { + font-size: 15px; + } + } +} +.overlay { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 99; + display: none; +} +.overlay.active { + display: block; +} +.global-popup { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 490px; + z-index: 9999; + display: none; + &.active { + display: block; + } + .btn-close { + position: absolute; + right: 0; + top: 0; + width: 30px; + height: 30px; + background: #2f2f2f; + color: #fff; + line-height: 25px; + text-align: center; + border: 2px solid #fff; + box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); + border-radius: 50%; + i { + font-size: 15px; + } + } + .content { + background: #fff; + padding-bottom: 20px; + border-radius: 12px; + padding: 10px; + .title { + font-size: 16px; + font-weight: 700; + text-align: center; + margin: 0 50px; + padding: 15px 0 5px 0; + } + .note { + margin: 0 50px; + text-align: center; + font-size: 14px; + } + } + .box-share-link { + margin: 15px 0; + } + .info-link { + width: calc(100% - 91px); + margin-right: 10px; + height: 40px; + border-radius: 5px; + border: 1px solid #f4f4f4; + background: #edf4ff; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + text-align: center; + span { + white-space: nowrap; + display: inline-block; + } + .blue { + color: rgba(0, 133, 255, 0.8); + font-weight: 500; + } + } + .btn-copy { + width: 81px; + height: 40px; + border-radius: 5px; + border: 1px solid #f4f4f4; + background: #edf4ff; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + text-align: center; + line-height: 40px; + color: #000; + font-weight: 500; + } + .list-btn-share { + margin-bottom: 10px; + b { + text-transform: uppercase; + margin-right: 10px; + } + a { + margin-right: 10px; + } + img { + width: 26px; + height: 26px; + display: block; + } + } + .form-add-email { + input { + width: 100%; + height: 40px; + padding: 0 10px; + border-radius: 5px; + border: 1px solid #f4f4f4; + background: #fff; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + outline: none; + margin-bottom: 15px; + &::placeholder { + font-size: 13px; + color: rgba(172, 172, 172, 0.8); + } + &:focus { + border: 1px solid rgba(0, 0, 0, 0.1); + } + } + } + .content-email { + max-height: 210px; + overflow: auto; + } + .add-email { + text-align: center; + color: rgba(0, 133, 255, 0.8); + font-weight: 500; + display: block; + margin: 10px 0; + } + .btn-add-member { + display: flex; + align-items: center; + justify-content: space-evenly; + margin: 15px auto; + width: 180px; + height: 30px; + line-height: 30px; + text-align: center; + border-radius: 17px; + background: linear-gradient(90deg, #0090f9 -5.98%, #00b2ff 100%); + color: #fff; + font-weight: 700; + } + .product-item { + width: 100%; + margin-right: 0; + .product-image { + height: 115px; + } + .note-member { + margin-left: 10px; + font-size: 13px; + } + .box-qnt { + position: absolute; + bottom: 0; + left: 50%; + width: 100%; + transform: translate(-50%, 0); + color: #222; + .sl { + width: 40px; + height: 20px; + line-height: 20px; + border-radius: 3px; + background: rgba(0, 0, 0, 0.5); + text-align: center; + color: #fff; + font-size: 10px; + margin-right: 5px; + } + .conlai { + width: 53px; + height: 20px; + line-height: 20px; + border-radius: 3px; + background: linear-gradient(90deg, rgba(249, 60, 0, 0.85) -5.98%, rgba(255, 122, 0, 0.85) 100%); + text-align: center; + color: #fff; + font-size: 10px; + } + } + } + .avatar-leader { + position: absolute; + left: 50%; + top: -30px; + transform: translate(-50%, 0); + width: 60px; + height: 60px; + border-radius: 50%; + z-index: 99; + background: #8c8c8c; + color: #fff; + text-align: center; + font-size: 36px; + font-weight: 700; + line-height: 55px; + border: 3px solid #fff; + box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1); + } + .title-member { + display: block; + margin: 20px auto 10px auto; + font-size: 16px; + font-weight: 700; + } + .btn-member-add-group { + width: 210px; + height: 46px; + border-radius: 17px; + background: linear-gradient(90deg, #10d18c -5.98%, #a7e15e 100%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 10px auto; + color: #fff; + text-align: center; + b { + font-weight: 700; + } + .product-time-holder { + b { + margin-right: 10px; + position: relative; + &::before { + position: absolute; + content: ":"; + right: -8px; + top: -1px; + } + &:last-child { + margin-right: 0; + &::before { + display: none; + } + } + } + } + } + .txt { + padding: 10px 0; + } + .name-leader { + padding-bottom: 10px; + display: block; + } + .btn-blue { + text-align: center; + margin: 0 auto; + padding: 7px 0; + display: block; + width: 100px; + font-size: 14px; + text-transform: uppercase; + color: #fff; + font-weight: 700; + border-radius: 17px; + background: linear-gradient(90deg, #0090f9 -5.98%, #00b2ff 100%); + } + .info-pay { + border-radius: 12px; + border: 1px solid #dadada; + padding: 10px; + margin: 10px 0; + .title { + margin: 0 auto 5px auto; + padding: 0; + text-transform: uppercase; + font-size: 13px; + } + .left { + width: 86px; + height: 86px; + } + .right { + margin-left: 15px; + width: calc(100% - 96px); + span { + display: block; + } + } + } + .box-timeout-pay { + margin-bottom: 5px; + .product-time-holder { + margin-left: 5px; + b { + margin-right: 10px; + position: relative; + &::before { + position: absolute; + content: ":"; + right: -8px; + top: -1px; + } + &:last-child { + margin-right: 0; + &::before { + display: none; + } + } + } + } + } + .box-cskh { + border-radius: 5px; + border: 1px solid #f4f4f4; + background: #edf4ff; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + padding: 10px 40px; + text-align: center; + margin-bottom: 10px; + } + .name-group { + width: 100%; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); + border-radius: 5px; + border: 1px solid #f4f4f4; + height: 40px; + padding: 0 10px; + margin: 10px 0; + outline: none; + &::placeholder { + font-size: 13px; + color: rgba(172, 172, 172, 0.8); + } + &:focus { + border: 1px solid rgba(0, 0, 0, 0.1); + } + } + .vd { + font-size: 14px; + font-style: italic; + display: block; + } + .btn-add-group { + display: flex; + align-items: center; + justify-content: space-evenly; + margin: 15px auto; + width: 120px; + height: 30px; + line-height: 30px; + text-align: center; + border-radius: 17px; + background: var(--gadien1, linear-gradient(90deg, #f93c00 -5.98%, #ff7a00 100%)); + color: #fff; + font-weight: 700; + i { + background: linear-gradient(90deg, #fff -11.54%, rgba(255, 255, 255, 0.17) 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 25px; + } + } +} diff --git a/assets/images/background-body.png b/assets/images/background-body.png new file mode 100644 index 0000000..ddd9c3a Binary files /dev/null and b/assets/images/background-body.png differ diff --git a/assets/images/background-login.png b/assets/images/background-login.png new file mode 100644 index 0000000..ea8fe57 Binary files /dev/null and b/assets/images/background-login.png differ diff --git a/assets/images/background-popup.png b/assets/images/background-popup.png new file mode 100644 index 0000000..3358362 Binary files /dev/null and b/assets/images/background-popup.png differ diff --git a/assets/images/background-successful-purchase.png b/assets/images/background-successful-purchase.png new file mode 100644 index 0000000..665a9b8 Binary files /dev/null and b/assets/images/background-successful-purchase.png differ diff --git a/assets/images/background-thele.png b/assets/images/background-thele.png new file mode 100644 index 0000000..f582e48 Binary files /dev/null and b/assets/images/background-thele.png differ diff --git a/assets/images/banner.png b/assets/images/banner.png new file mode 100644 index 0000000..edccfae Binary files /dev/null and b/assets/images/banner.png differ diff --git a/assets/images/btc.png b/assets/images/btc.png new file mode 100644 index 0000000..b61b80f Binary files /dev/null and b/assets/images/btc.png differ diff --git a/assets/images/dmca.png b/assets/images/dmca.png new file mode 100644 index 0000000..d75d210 Binary files /dev/null and b/assets/images/dmca.png differ diff --git a/assets/images/icon-email.png b/assets/images/icon-email.png new file mode 100644 index 0000000..f3398c2 Binary files /dev/null and b/assets/images/icon-email.png differ diff --git a/assets/images/icon-facebook.png b/assets/images/icon-facebook.png new file mode 100644 index 0000000..9652577 Binary files /dev/null and b/assets/images/icon-facebook.png differ diff --git a/assets/images/icon-pay.png b/assets/images/icon-pay.png new file mode 100644 index 0000000..1c4b8b3 Binary files /dev/null and b/assets/images/icon-pay.png differ diff --git a/assets/images/icon-zalo.png b/assets/images/icon-zalo.png new file mode 100644 index 0000000..5cdf4d0 Binary files /dev/null and b/assets/images/icon-zalo.png differ diff --git a/assets/images/icon_2023.png b/assets/images/icon_2023.png new file mode 100644 index 0000000..cf7e6e1 Binary files /dev/null and b/assets/images/icon_2023.png differ diff --git a/assets/images/icon_hoadao.png b/assets/images/icon_hoadao.png new file mode 100644 index 0000000..0448855 Binary files /dev/null and b/assets/images/icon_hoadao.png differ diff --git a/assets/images/icon_social.png b/assets/images/icon_social.png new file mode 100644 index 0000000..d6b4ee0 Binary files /dev/null and b/assets/images/icon_social.png differ diff --git a/assets/images/icon_sold-out.png b/assets/images/icon_sold-out.png new file mode 100644 index 0000000..0b1d47d Binary files /dev/null and b/assets/images/icon_sold-out.png differ diff --git a/assets/images/image-sp.png b/assets/images/image-sp.png new file mode 100644 index 0000000..5e390e6 Binary files /dev/null and b/assets/images/image-sp.png differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..7079c59 Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/qr-pay.png b/assets/images/qr-pay.png new file mode 100644 index 0000000..2ddc984 Binary files /dev/null and b/assets/images/qr-pay.png differ diff --git a/dist/data.js b/dist/data.js new file mode 100644 index 0000000..37fe0ae --- /dev/null +++ b/dist/data.js @@ -0,0 +1,431 @@ +"use strict"; +// +const List_product = [ + { + productId: 1, + product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea', + productUrl: '/', + image: 'https://mygear.vn/media/product/589-1.jpg', + price: 1250000, + retail_price: 500000, + quantity: 20, + sale_quantity: 10, + quantity_member: 5, + from_time: 1703213170286, + to_time: 1703955500000, + status: 'started', + category_info: [ + { + id: 1, + name_category: 'Chuột' + }, + { + id: 2, + name_category: 'Bàn phím' + }, + ], + list_group: [ + { + group_id: 1, + name_group: 'Hura săn sale', + product_id: 1, + productUrl: '/', + product_image: 'https://mygear.vn/media/product/589-1.jpg', + product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea', + price: 3190000, + quantity: 20, + sale_quantity: 10, + quantity_member: 5, + retail_price: 2190000, + to_time: 1703955600000, + list_member: [ + { + id_member: 1, + name_member: 'Hồng Vũ', + email_member: 'hongvt@hurasoft.com' + }, { + id_member: 2, + name_member: 'Ánh trần', + email_member: 'anhtt@hurasoft.com' + }, { + id_member: 3, + name_member: 'Đức Quân', + email_member: 'ducnq@hurasoft.com' + }, + ] + } + ] + }, { + productId: 2, + product_name: 'Chuột không dây logitech M590 Wireless Bluetooth', + productUrl: '/', + image: 'https://mygear.vn/media/product/1634-chu---t-kh--ng-d--y-logitech-m590-wireless-bluetooth.jpg', + price: 570000, + retail_price: 300000, + quantity: 30, + sale_quantity: 10, + quantity_member: 5, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + category_info: [ + { + id: 1, + name_category: 'Chuột' + }, + { + id: 2, + name_category: 'Bàn phím' + }, + ], + list_group: [] + }, { + productId: 3, + product_name: 'Bàn phím cơ VGN VXE75 Trans Purple RGB (Bluetooth, 2.4GHz Wireless, Type-A)', + productUrl: '/', + image: 'https://mygear.vn/media/product/4793-vgn-vxe75-trans-purple.jpg', + price: 3190000, + retail_price: 2190000, + quantity: 30, + sale_quantity: 10, + quantity_member: 5, + from_time: 1703696400000, + to_time: 1703955600000, + status: 'coming', + category_info: [ + { + id: 2, + name_category: 'Bàn phím' + }, + ], + list_group: [] + }, { + productId: 4, + product_name: 'Màn hình Gaming Samsung Odyssey G5 LS27CG510EEXXV 27" QHD VA 165Hz (HDMI,Displayport)', + productUrl: '/', + image: 'https://mygear.vn/media/product/3761-samsung-odyssey-g5-ls27cg510eexxv.jpg', + price: 4700000, + retail_price: 4500000, + quantity: 30, + sale_quantity: 30, + quantity_member: 5, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'out_stock', + category_info: [ + { + id: 5, + name_category: 'Màn hình' + }, + ], + list_group: [] + }, { + productId: 5, + product_name: 'Kit bàn phím cơ MonsGeek M1 QMK (Full Nhôm – Mạch xuôi – QMK / VIA – PCB Stab) - (Silver)', + productUrl: '/', + image: 'https://mygear.vn/media/product/3613-monsgeek-m1-qmk-6.jpg', + price: 2290000, + retail_price: 2000000, + quantity: 20, + sale_quantity: 20, + quantity_member: 5, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'out_stock', + category_info: [ + { + id: 2, + name_category: 'Bàn phím' + }, + ], + list_group: [], + } +]; +const User = [ + { + leaderId: 1, + leaderName: 'Hiếu Nguyễn', + leaderEmail: 'hieunguyen@hurasoft.com', + list_group: [ + { + group_id: 1, + name_group: 'Hura săn sale', + product_id: 1, + productUrl: '/', + product_image: 'https://mygear.vn/media/product/589-1.jpg', + product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea', + price: 3190000, + retail_price: 2190000, + quantity: 20, + sale_quantity: 10, + quantity_member: 5, + to_time: 1703955600000, + list_member: [ + { + id_member: 1, + name_member: 'Hồng Vũ', + email_member: 'hongvt@hurasoft.com' + }, { + id_member: 2, + name_member: 'Ánh trần', + email_member: 'anhtt@hurasoft.com' + }, { + id_member: 3, + name_member: 'Đức Quân', + email_member: 'ducnq@hurasoft.com' + } + ] + } + ] + } +]; +function formatPrice(price) { + var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + var len = b.length; + b = b.substring(0, len - 3); + return b; +} +function countDown(iid, endTime) { + const updateCountdown = () => { + const now = Date.now(); + const distance = endTime - now; + if (distance > 0) { + const [days, hours, minutes, seconds] = getTimeComponents(distance); + displayCountdown(iid, days, hours, minutes, seconds); + } + else { + clearInterval(timer); + } + }; + // Initial update to avoid delay + updateCountdown(); + const timer = setInterval(updateCountdown, 1000); +} +function getTimeComponents(distance) { + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + return [days, hours, minutes, seconds]; +} +function displayCountdown(iid, days, hours, minutes, seconds) { + const element = document.querySelector(`.${iid}`); + if (element) { + if (days > 0) { + element.innerHTML = ` + ${formatTimeComponent(days)} + ${formatTimeComponent(hours)} + ${formatTimeComponent(minutes)} + ${formatTimeComponent(seconds)}`; + } + else { + element.innerHTML = ` + ${formatTimeComponent(hours)} + ${formatTimeComponent(minutes)} + ${formatTimeComponent(seconds)}`; + } + } +} +function formatTimeComponent(component) { + return component <= 9 ? '0' + component : component.toString(); +} +function formatTime(timestamp) { + const date = new Date(timestamp); + const formattedTime = date.toLocaleString('en-US', { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }); + return formattedTime; +} +function formatName(name) { + // Extract the first letter and capitalize it + const formattedName = name.charAt(0).toUpperCase(); + return formattedName; +} +const AddGroupTemplate = ` + + + +
+

Đặt tên nhóm của bạn

+
+ Chào Bạn, Hiện tại còn 6 sản phẩm Chuột máy tính. Nhanh chóng tạo nhóm ngay để được mua sản phẩm với + giá hấp dẫn. +
+ + Vd: Hurasort săn sale Noel + + + Tạo nhóm + + +
+`; +const ShareGroupTemplate = ` + + + +
+

Chúc mừng bạn!

+
+ Nhóm được tạo thành công, vui lòng check mail để xem chi tiết thông tin nhóm của bạn! +
+
+
+ Link nhóm: + https://adman.vn/group-order?id=2431177 +
+ + + Copy + +
+
+ Share: +
+ + icon facebook + + + icon zalo + + + icon email + +
+
+
+

Hoặc bạn có thể mời bạn bè của bạn bằng cách nhập email

+
+ + +
+ + + Thêm email + +
+ + + Gửi email thông báo + +
+`; +const JoinProductTemplate = ` + + + +
+
v
+ Hồng vừa mời bạn tham gia nhóm Hura săn sale Noel +
+
+ + +
+ Sl: 30 + Còn lại: 10 +
+ +
+ Combo Bàn phím và Chuột không dây MOFII CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ Khi mua nhóm 5 người +
+ +
+
+ + v + + + + + +
+
+ Cần thêm 02 thành viên +
+
+
+
+
+
+ Bạn có 10 phút để tham gia nhóm, mau chóng ấn chọn + Tham gia nhóm để có cơ hội mua hàng với giá siêu ưu đãi nhé! +
+ + Tham gia nhóm +
+ 20 + 11 + 30 +
+ +
+`; +const SuccessMemberTemplate = ` + + + +
+

Chúc mừng bạn

+
+ Đã tham gia nhóm thành công +
+
+ Nhóm Hurasoft săn sale Noel đã đủ số lượng thành viên thành công mở khóa ưu đãi sản phẩm! +
+ + Người thanh toán: Hồng + +

Thông tin thanh toán sẽ được gửi qua email của bạn.

+ + ok + +
+`; +const InfoPayProductTemplate = ` + + + +
+

Chúc mừng nhóm Hurasoft săn sale

+
Nhóm đã đủ số lượng thành viên để tham gia mua sản phẩm với giá ưu đãi
+
+
Thông tin thanh toán
+
+
+ pay +
+
+ NGUYỄN THỊ DUYÊN: + Ngân hàng: ACB + Số tài khoản: 7960888888 + Nội dung thanh toán: Tên nhóm của bạn + SĐT +
+
+
+
+
+ Bạn vui lòng thanh toán trước +
+ 20 + 11 + 30 +
+
Để được hưởng ưu đãi nhóm
+
+
+
+ Thanh toán xong hãy chụp lại giao dịch. CSKH 19002223 sẽ liên hệ xác nhận lại với bạn +
+ + ok + +
+`; diff --git a/dist/hoadaoroi.js b/dist/hoadaoroi.js new file mode 100644 index 0000000..6c39990 --- /dev/null +++ b/dist/hoadaoroi.js @@ -0,0 +1,109 @@ + +var pictureSrc = "./assets/images/icon_hoadao.png"; //Link ảnh hoa muốn hiển thị trên web +var pictureWidth = 15; //Chiều rộng của hoa mai or đào +var pictureHeight = 15; //Chiều cao của hoa mai or đào +var numFlakes = 20; //Số bông hoa xuất hiện cùng một lúc trên trang web +var downSpeed = 0.01; //Tốc độ rơi của hoa +var lrFlakes = 15; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại + + +if (typeof (numFlakes) != 'number' || Math.round(numFlakes) != numFlakes || numFlakes < 1) { + numFlakes = 10; +} + +//draw the snowflakes +for (var x = 0; x < numFlakes; x++) { + if (document.layers) { //releave NS4 bug + document.write(''); + } else { + document.write('
*
'); + } +} + +//calculate initial positions (in portions of browser window size) +var xcoords = new Array(), + ycoords = new Array(), + snFlkTemp; +for (var x = 0; x < numFlakes; x++) { + xcoords[x] = (x + 1) / (numFlakes + 1); + do { + snFlkTemp = Math.round((numFlakes - 1) * Math.random()); + } while (typeof (ycoords[snFlkTemp]) == 'number'); + ycoords[snFlkTemp] = x / numFlakes; +} + +//now animate +function flakeFall() { + if (!getRefToDivNest('snFlkDiv0')) { + return; + } + var scrWidth = 0, + scrHeight = 0, + scrollHeight = 0, + scrollWidth = 0; + //find screen settings for all variations. doing this every time allows for resizing and scrolling + if (typeof (window.innerWidth) == 'number') { + scrWidth = window.innerWidth; + scrHeight = window.innerHeight; + } else { + if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { + scrWidth = document.documentElement.clientWidth; + scrHeight = document.documentElement.clientHeight; + } else { + if (document.body && (document.body.clientWidth || document.body.clientHeight)) { + scrWidth = document.body.clientWidth; + scrHeight = document.body.clientHeight; + } + } + } + if (typeof (window.pageYOffset) == 'number') { + scrollHeight = pageYOffset; + scrollWidth = pageXOffset; + } else { + if (document.body && (document.body.scrollLeft || document.body.scrollTop)) { + scrollHeight = document.body.scrollTop; + scrollWidth = document.body.scrollLeft; + } else { + if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { + scrollHeight = document.documentElement.scrollTop; + scrollWidth = document.documentElement.scrollLeft; + } + } + } + //move the snowflakes to their new position + for (var x = 0; x < numFlakes; x++) { + if (ycoords[x] * scrHeight > scrHeight - pictureHeight) { + ycoords[x] = 0; + } + var divRef = getRefToDivNest('snFlkDiv' + x); + if (!divRef) { + return; + } + if (divRef.style) { + divRef = divRef.style; + } + var oPix = document.childNodes ? 'px' : 0; + divRef.top = (Math.round(ycoords[x] * scrHeight) + scrollHeight) + oPix; + divRef.left = (Math.round(((xcoords[x] * scrWidth) - (pictureWidth / 2)) + ((scrWidth / ((numFlakes + 1) * 4)) * (Math.sin(lrFlakes * ycoords[x]) - Math.sin(3 * lrFlakes * ycoords[x])))) + scrollWidth) + oPix; + ycoords[x] += downSpeed; + } +} + +//DHTML handlers +function getRefToDivNest(divName) { + if (document.layers) { + return document.layers[divName]; + } //NS4 + if (document[divName]) { + return document[divName]; + } //NS4 also + if (document.getElementById) { + return document.getElementById(divName); + } //DOM (IE5+, NS6+, Mozilla0.9+, Opera) + if (document.all) { + return document.all[divName]; + } //Proprietary DOM - IE4 + return false; +} + +window.setInterval('flakeFall();', 100); diff --git a/dist/main.js b/dist/main.js new file mode 100644 index 0000000..83511f1 --- /dev/null +++ b/dist/main.js @@ -0,0 +1,378 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +function goi_sp_tu_api() { + return __awaiter(this, void 0, void 0, function* () { + return new Promise((resolve, reject) => { + return resolve(List_product); + }); + }); +} +function goi_sp_user_tu_api() { + return __awaiter(this, void 0, void 0, function* () { + return new Promise((resolve, reject) => { + return resolve(User); + }); + }); +} +function hienthi_nhomsp() { + return __awaiter(this, void 0, void 0, function* () { + const lay_sp_user_tu_api = yield goi_sp_user_tu_api(); + console.log(lay_sp_user_tu_api); + DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group'); + }); +} +function hienthi_sp() { + return __awaiter(this, void 0, void 0, function* () { + const lay_sp_tu_api = yield goi_sp_tu_api(); + // code hien thi danh sach dang dien ra + console.log(lay_sp_tu_api); + showListProductHome(lay_sp_tu_api, 'out_stock', 'js-holder-list-out-stock'); + showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started'); + showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming'); + }); +} +function showListProductHome(lay_sp_tu_api, status, holderId) { + const html = []; + const holder = document.getElementById(holderId); + lay_sp_tu_api + .filter((product) => product.status == status) + .forEach(function (product, keyIndex) { + html.push(xayhtml(product)); + if (status != 'out_stock' && product.to_time > product.from_time) { + const countdownTime = (status == 'started') ? product.to_time : product.from_time; + countDown(`js-deal-time-${product.productId}`, countdownTime); + } + }); + if (holder) { + holder.innerHTML = html.join(''); + } +} +function xayhtml(product) { + const quantity_sold = product.quantity - product.sale_quantity; + const line_sold = Math.ceil((quantity_sold / product.quantity) * 100); + const HtmlSl_nhom = product.quantity > product.quantity_member + ? `${product.quantity / product.quantity_member} nhóm duy nhất` + : ''; + let HtmlProductItem = ''; + if (product.status === 'started' && product.price > product.sale_quantity) { + let htmlCheckGroup = ''; + let HtmlListMember = ''; + let htmlBtnProduct = ''; + let addMember = ''; + let noteMember = ''; + if (product.list_group.length > 0) { + product.list_group.forEach((item) => { + item.list_member.forEach((user, index) => { + var more_qnt_member = product.quantity_member - index - 1; + const isLastMember = index > product.quantity_member; + console.log(isLastMember); + HtmlListMember += ` + + ${formatName(user.name_member)} + + `; + addMember = isLastMember ? `+` : ''; + noteMember = isLastMember ? `Cần thêm ${more_qnt_member} thành viên` : ''; + }); + }); + htmlCheckGroup = ` +
+
${formatPrice(product.retail_price)}đ
+ ${formatPrice(product.price)}đ +
+
+
${HtmlListMember} ${addMember}
+
${noteMember}
+
+ `; + htmlBtnProduct = ` + + + Mời thêm bạn + + `; + } + else { + htmlCheckGroup = ` +
+
${formatPrice(product.retail_price)}đ
+ Khi mua nhóm ${product.quantity_member} người +
+
Giá bán lẻ: ${formatPrice(product.price)}đ
+ `; + htmlBtnProduct = ` + + + Tạo nhóm ngay + + + `; + } + HtmlProductItem = ` +
+ + ${product.product_name} + ${HtmlSl_nhom} + +
+ ${product.product_name} + ${htmlCheckGroup} +
+ +
+ ${quantity_sold} đã bán hết +
+
+
+ +
+
+ ${htmlBtnProduct} +
+
+
+ `; + } + else if (product.status === 'coming') { + HtmlProductItem = ` +
+ + ${product.product_name} + ${HtmlSl_nhom} + +
+ ${product.product_name} +
+
${formatPrice(product.retail_price)}đ
+ Khi mua nhóm ${product.quantity_member} người +
+
Giá bán lẻ: ${formatPrice(product.price)}đ
+
+ +
+
+
+
+ `; + } + else if (product.status === 'out_stock') { + HtmlProductItem = ` +
+ + ${product.product_name} + ${HtmlSl_nhom} + + +
+ ${product.product_name} +
${formatPrice(product.retail_price)}
+
+ + 5 Nhóm mua hàng thành công +
+
+ +
+ ${product.quantity} đã bán hết +
+
+ +
+ 000000 +
+
+
+
+ `; + } + else { + HtmlProductItem = `
Sản phẩm đang được cập nhật..!
`; + } + return HtmlProductItem; +} +function DisplayListProductGroup(ProductUser, holderId) { + const html = []; + const holder = document.getElementById(holderId); + ProductUser.forEach(function (product, keyIndex) { + html.push(xayhtmlProductGroup(product)); + }); + if (holder) { + holder.innerHTML = html.join(''); + } +} +function xayhtmlProductGroup(product) { + var HtmlProductItem = ''; + var HtmlListMember = ''; + var addMember = ''; + var noteMember = ''; + if (product.list_group.length > 0) { + product.list_group.forEach((Item) => { + const quantity_sold = Item.quantity - Item.sale_quantity; + const line_sold = Math.ceil((Item.quantity - Item.sale_quantity) / Item.quantity * 100); + var HtmlSl_nhom = ''; + if (Item.quantity > Item.quantity_member) { + HtmlSl_nhom = `${Item.quantity / Item.quantity_member} nhóm duy nhất`; + } + Item.list_member.forEach((user, index) => { + if (index > Item.quantity_member) { + HtmlListMember += ` + + ${formatName(user.name_member)} + + `; + addMember = ``; + noteMember = ``; + } + else { + var more_qnt_member = Item.quantity_member - index - 1; + HtmlListMember += ` + + ${formatName(user.name_member)} + + `; + addMember = ` + + + + + `; + noteMember = ` + Cần thêm ${more_qnt_member} thành viên + `; + } + }); + HtmlProductItem += ` +
+ + ${Item.product_name} + ${HtmlSl_nhom} + +
+ ${Item.product_name} +
+
+ ${formatPrice(Item.retail_price)}đ +
+ ${formatPrice(Item.price)}đ +
+ +
+
+ ${HtmlListMember}${addMember} +
+
+ ${noteMember} +
+
+ +
+ +
+ ${quantity_sold} đã bán hết +
+
+
+ +
+
+
+ + + Mời thêm bạn + +
+
+ + ${product.leaderEmail} vừa tạo nhóm thành công +
+
+
+ `; + }); + } + return HtmlProductItem; +} +function closeBackground() { + var eleBackground = document.getElementById('overlay'); + eleBackground.classList.remove('active'); + var eleGlobalPopup = document.getElementById('js-global-popup'); + eleGlobalPopup.classList.remove('active'); + document.body.classList.remove('active'); +} +function copyLink() { + // Get the pre element + var preElement = document.getElementById("linkshare"); + // Check if the element exists + if (preElement) { + // Create a textarea element + var textarea = document.createElement("textarea"); + textarea.value = preElement.textContent || ""; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand("copy"); + document.body.removeChild(textarea); + alert("Copy link share thành công!"); + } +} +// them o nhap email +let emailCounter = 3; +function addEmail() { + const contentEmail = document.getElementById('list-email-share'); + const newEmailInput = document.createElement('input'); + newEmailInput.type = 'text'; + newEmailInput.id = 'email' + emailCounter; + newEmailInput.placeholder = 'Email ' + emailCounter; + contentEmail === null || contentEmail === void 0 ? void 0 : contentEmail.appendChild(newEmailInput); + emailCounter++; +} +function CountdownJoin() { + let countdown = 10 * 60; + const countdownElement = document.getElementById('js-time-join'); + function updateCountdown() { + const minutes = Math.floor(countdown / 60); + const seconds = countdown % 60; + const formattedMinutes = minutes.toString().padStart(2, '0'); + const formattedSeconds = seconds.toString().padStart(2, '0'); + const formattedTime = `${formattedMinutes}${formattedSeconds}`; + if (countdownElement) { + countdownElement.innerHTML = formattedTime; + } + } + function decrementCountdown() { + if (countdown > 0) { + countdown--; + updateCountdown(); + } + else { + clearInterval(intervalId); + closeBackground(); + } + } + updateCountdown(); + const intervalId = setInterval(decrementCountdown, 1000); +} +function ShowPopupGlobal(key) { + const globalPopup = document.getElementById('js-global-popup'); + globalPopup === null || globalPopup === void 0 ? void 0 : globalPopup.classList.add('active'); + const eleBackground = document.getElementById('overlay'); + eleBackground.classList.add('active'); + document.body.classList.add('active'); + const holderPupop = document.getElementById('js-content-popup'); + if (key == 'AddGroup') { + holderPupop.innerHTML = AddGroupTemplate; + } + else if (key == 'AddMember') { + holderPupop.innerHTML = ShareGroupTemplate; + } +} +// run function +hienthi_sp(); +hienthi_nhomsp(); +CountdownJoin(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..aa79395 --- /dev/null +++ b/index.html @@ -0,0 +1,1031 @@ + + + + + + + Mua hàng theo nhóm + + + + + + + +
+
+
+
+ +
+ + + Thể lệ chương trình + + + + Mua hàng thành công + + + + Hotline: 19002223 + + + + + Hi, Hồng! + + +
+
+
+
+
+
+ +
+
+ + Tạo nhóm +
+
+ + Chia sẻ, mời thành viên +
+
+ + Mua hàng theo nhóm +
+
+ + Hoàn thành +
+
+
+
+ + + 5 nhóm duy nhất + + +
+ Combo Bàn phím và Chuột không dây MOFII CANDY Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+ 199.000đ +
+
+ + 5 Nhóm mua hàng thành công +
+
+ +
+ 10 đã bán hết +
+
+ +
+ 20 + 11 + 30 +
+
+
+
+
+ + + 5 nhóm duy nhất + + +
+ Combo Bàn phím và Chuột không dây MOFII CANDY Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+ 199.000đ +
+
+ + 5 Nhóm mua hàng thành công +
+
+ +
+ 10 đã bán hết +
+
+ +
+ 20 + 11 + 30 +
+
+
+
+
+
+

Nhóm của bạn

+
+
+ + + 5 nhóm duy nhất + +
+ Combo Bàn phím và Chuột không dây MOFII CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ 320.000đ +
+ +
+
+ + v + + + + + +
+
+ Cần thêm 02 thành viên +
+
+ +
+ +
+ 10 đã bán hết +
+
+
+ +
+ 20 + 11 + 30 +
+
+ + + Mời thêm bạn + +
+
+ + Hongvtxx@gmail.com vừa tạo nhóm thành công +
+
+
+
+ + + 5 nhóm duy nhất + +
+ Combo Bàn phím và Chuột không dây MOFII CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ 320.000đ +
+ +
+
+ + v + + + + + +
+
+ Cần thêm 02 thành viên +
+
+ +
+ +
+ 10 đã bán hết +
+
+
+ +
+ 20 + 11 + 30 +
+
+ + + Mời thêm bạn + +
+
+ + Hongvtxx@gmail.com vừa tạo nhóm thành công +
+
+
+
+
+ +
+
+

+ + Đang diễn ra + +

+
+ + Tất cả + + + + Bàn phím + + + Phụ kiện + +
+
+
+ + + 5 nhóm duy nhất + +
+ Combo Bàn phím và Chuột không dây MOFII + CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ 320.000đ +
+ +
+
+ + v + + + + + +
+
+ Cần thêm 02 thành viên +
+
+ +
+ +
+ 10 đã bán hết +
+
+
+ +
+ 20 + 11 + 30 +
+
+ + + Mời thêm bạn + +
+
+
+
+ + + 5 nhóm duy nhất + +
+ Combo Bàn phím và Chuột không dây MOFII + CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ Khi mua nhóm 5 người +
+ +
Giá bán lẻ: 320.000đ
+ +
+ +
+ 10 đã bán hết +
+
+
+ +
+ 20 + 11 + 30 +
+
+ + + Tạo nhóm ngay + + +
+
+
+
+ + + 5 nhóm duy nhất + +
+ Combo Bàn phím và Chuột không dây MOFII + CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ Khi mua nhóm 5 người +
+ +
Giá bán lẻ: 320.000đ
+ +
+ +
+ 10 đã bán hết +
+
+
+ +
+ 20 + 11 + 30 +
+
+ + + Tạo nhóm ngay + + +
+
+
+
+
+
+

+ Sắp diễn ra +

+
+ + Tất cả + + + + Bàn phím + + + Phụ kiện + +
+
+
+ + + 5 nhóm duy nhất + +
+ Combo Bàn phím và Chuột không dây MOFII + CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ Khi mua nhóm 5 người +
+ +
Giá bán lẻ: 320.000đ
+
+ +
+ 20 + 11 + 30 +
+
+
+
+
+ + + 5 nhóm duy nhất + +
+ Combo Bàn phím và Chuột không dây MOFII + CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ Khi mua nhóm 5 người +
+ +
Giá bán lẻ: 320.000đ
+
+ +
+ 20 + 11 + 30 +
+
+
+
+
+
+
+ +
+
Mua hàng thành công
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tên nhómSản phẩmGiáThời gian
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
H
+ Huraxzzz +
+ 		+ Chuột gaming Logitech G102 Gen2 Lightsync + +
+ 199.000đ + 320.000đ +
+ 		+ Hôm nay, 01 : 20 : 41 +
+
+
+ +
+
Thể lệ chương trình
+
+
+
01.
+
Tạo nhóm với đủ số lượng thành viên yêu cầu để được mua hàng với giá ưu đãi, + giảm giá các sản phẩm lên đến 70%.
+
+
+
02.
+
Đăng nhập bằng gmail, facebook để tạo nhóm và tham gia nhóm.
+
+
+
03.
+
Chia sẻ với bạn bè, người thân để tham gia nhóm và mở khóa ưu đãi khi đủ số + lượng thành viên
+
+
+
04.
+
+

Điều kiện để nhóm được mua hàng với giá ưu đãi:

+
    +
  • Đủ thành viên tham gia theo yêu cầu
    • +
  • Thanh toán trong thời gian quy định
    • +
+
+
+
+
05.
+
+

Trường hợp nhóm bị hủy quyền mua hàng khi:

+
    +
  • Không đủ thành viên tham gia trong thời gian quy định
    • +
  • Không thanh toán trong thời gian quy định
    • +
  • Hết số lượng sản phẩm ưu đãi”
    • +
+
+
+
+
+ +
+

+ Câu hỏi thường gặp +

+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+
+
+ +
+
+
+
+

+ Showrrom Open: + 8:30 - 20:00 +

+

+ Tiếp nhận bảo hành: + Thứ 3 đến Thứ 7 +

+

+ Địa chỉ: + 266/32 Đường Tô Hiến Thành,Phường 15, Quận 10, TP. HCM( Có thể đậu ôtô) +

+
+
+ Kết nối với chúng tôi +
+
+ + + + + +
+ + + +
+ + + +
+
+

+ HOTLINE:0787955888 +

+

+ KỸ THUẬT:0932772240 +

+ + + +
+ +
+
+
+
+
+ +
+

Công ty TNHH MYGEAR - Địa chỉ kinh doanh: Địa chỉ 266/32 Đường Tô Hiến Thành,Phường 15, Quận + 10, TP. HCM

+

Giấy phép kinh doanh cấp ngày 26 tháng 10 2021

+

Mã số thuế doanh nghiệp: 0316992079 tại phòng đăng ký kinh doanh Sở Kế Hoạch và Đầu Tư thành + phố Hồ Chí Minh

+

Chịu trách nhiệm nội dung: Nguyễn Văn Hùng Copyrights © 2022 Mygear.vn. All Rights Reserved + Email: info@mygear.vn

+
+
+
+
+
+ + +
+
+ + + +
+

Vui lòng đăng nhập tài khoản của bạn để tham gia chương trình

+ + +
+
+
+ + +
+
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/src/data.ts b/src/data.ts new file mode 100644 index 0000000..ea42170 --- /dev/null +++ b/src/data.ts @@ -0,0 +1,512 @@ +//---- dinh nghia +type list_info = { + id: number, + name_category: string; +} + +type ProductInfo = { + productId: number, + product_name: string; + productUrl: string; + image: string; + price: number; + retail_price: number; + quantity: number; + sale_quantity: number; + quantity_member: number; + from_time: number, + to_time: number; + status: string; + category_info: list_info[], + list_group: infoGroup[] +}; + +type UserInfo = { + leaderId: number; + leaderName: string; + leaderEmail: string; + list_group: infoGroup[]; +} + +type infoGroup = { + name_group: string, + group_id: number, + product_id: number, + productUrl: string, + product_image: string, + product_name: string, + price: number, + retail_price: number; + quantity: number; + sale_quantity: number; + quantity_member: number; + to_time: number; + list_member: infoMember[] +} + +type infoMember = { + id_member: number, + name_member: string, + email_member: string +} + +// + + + +const List_product: ProductInfo[] = [ + { + productId: 1, + product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea', + productUrl: '/', + image: 'https://mygear.vn/media/product/589-1.jpg', + price: 1250000, + retail_price: 500000, + quantity: 20, + sale_quantity: 10, + quantity_member: 5, + from_time: 1703213170286, + to_time: 1703955500000, + status: 'started', + category_info: [ + { + id: 1, + name_category: 'Chuột' + }, + { + id: 2, + name_category: 'Bàn phím' + }, + ], + list_group: [ + { + group_id: 1, + name_group: 'Hura săn sale', + product_id: 1, + productUrl: '/', + product_image: 'https://mygear.vn/media/product/589-1.jpg', + product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea', + price: 3190000, + quantity: 20, + sale_quantity: 10, + quantity_member: 5, + retail_price: 2190000, + to_time: 1703955600000, + list_member: [ + { + id_member: 1, + name_member: 'Hồng Vũ', + email_member: 'hongvt@hurasoft.com' + }, { + id_member: 2, + name_member: 'Ánh trần', + email_member: 'anhtt@hurasoft.com' + }, { + id_member: 3, + name_member: 'Đức Quân', + email_member: 'ducnq@hurasoft.com' + }, + ] + } + ] + }, { + productId: 2, + product_name: 'Chuột không dây logitech M590 Wireless Bluetooth', + productUrl: '/', + image: 'https://mygear.vn/media/product/1634-chu---t-kh--ng-d--y-logitech-m590-wireless-bluetooth.jpg', + price: 570000, + retail_price: 300000, + quantity: 30, + sale_quantity: 10, + quantity_member: 5, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + category_info: [ + { + id: 1, + name_category: 'Chuột' + }, + { + id: 2, + name_category: 'Bàn phím' + }, + ], + list_group: [] + }, { + productId: 3, + product_name: 'Bàn phím cơ VGN VXE75 Trans Purple RGB (Bluetooth, 2.4GHz Wireless, Type-A)', + productUrl: '/', + image: 'https://mygear.vn/media/product/4793-vgn-vxe75-trans-purple.jpg', + price: 3190000, + retail_price: 2190000, + quantity: 30, + sale_quantity: 10, + quantity_member: 5, + from_time: 1703696400000, + to_time: 1703955600000, + status: 'coming', + category_info: [ + { + id: 2, + name_category: 'Bàn phím' + }, + ], + list_group: [] + }, { + productId: 4, + product_name: 'Màn hình Gaming Samsung Odyssey G5 LS27CG510EEXXV 27" QHD VA 165Hz (HDMI,Displayport)', + productUrl: '/', + image: 'https://mygear.vn/media/product/3761-samsung-odyssey-g5-ls27cg510eexxv.jpg', + price: 4700000, + retail_price: 4500000, + quantity: 30, + sale_quantity: 30, + quantity_member: 5, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'out_stock', + category_info: [ + { + id: 5, + name_category: 'Màn hình' + }, + ], + list_group: [] + }, { + productId: 5, + product_name: 'Kit bàn phím cơ MonsGeek M1 QMK (Full Nhôm – Mạch xuôi – QMK / VIA – PCB Stab) - (Silver)', + productUrl: '/', + image: 'https://mygear.vn/media/product/3613-monsgeek-m1-qmk-6.jpg', + price: 2290000, + retail_price: 2000000, + quantity: 20, + sale_quantity: 20, + quantity_member: 5, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'out_stock', + category_info: [ + { + id: 2, + name_category: 'Bàn phím' + }, + ], + list_group: [], + } +]; + +const User: UserInfo[] = [ + { + leaderId: 1, + leaderName: 'Hiếu Nguyễn', + leaderEmail: 'hieunguyen@hurasoft.com', + list_group: [ + { + group_id: 1, + name_group: 'Hura săn sale', + product_id: 1, + productUrl: '/', + product_image: 'https://mygear.vn/media/product/589-1.jpg', + product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea', + price: 3190000, + retail_price: 2190000, + quantity: 20, + sale_quantity: 10, + quantity_member: 5, + to_time: 1703955600000, + list_member: [ + { + id_member: 1, + name_member: 'Hồng Vũ', + email_member: 'hongvt@hurasoft.com' + }, { + id_member: 2, + name_member: 'Ánh trần', + email_member: 'anhtt@hurasoft.com' + }, { + id_member: 3, + name_member: 'Đức Quân', + email_member: 'ducnq@hurasoft.com' + } + ] + } + ] + } +] + + +function formatPrice(price: number) { + var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + var len = b.length; + b = b.substring(0, len - 3); + return b; +} + + +function countDown(iid: string, endTime: number): void { + + const updateCountdown = () => { + const now: number = Date.now(); + const distance: number = endTime - now; + if (distance > 0) { + const [days, hours, minutes, seconds] = getTimeComponents(distance); + displayCountdown(iid, days, hours, minutes, seconds); + } else { + clearInterval(timer); + } + }; + + // Initial update to avoid delay + updateCountdown(); + + const timer: NodeJS.Timeout = setInterval(updateCountdown, 1000); +} + +function getTimeComponents(distance: number): [number, number, number, number] { + + const days: number = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds: number = Math.floor((distance % (1000 * 60)) / 1000); + + return [days, hours, minutes, seconds]; +} + +function displayCountdown(iid: string, days: number, hours: number, minutes: number, seconds: number): void { + const element: HTMLElement | null = document.querySelector(`.${iid}`); + if (element) { + if (days > 0) { + element.innerHTML = ` + ${formatTimeComponent(days)} + ${formatTimeComponent(hours)} + ${formatTimeComponent(minutes)} + ${formatTimeComponent(seconds)}`; + } else { + element.innerHTML = ` + ${formatTimeComponent(hours)} + ${formatTimeComponent(minutes)} + ${formatTimeComponent(seconds)}`; + } + } +} + +function formatTimeComponent(component: number): string { + return component <= 9 ? '0' + component : component.toString(); +} + +function formatTime(timestamp: number) { + const date = new Date(timestamp); + const formattedTime = date.toLocaleString('en-US', { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }); + return formattedTime; +} + + +function formatName(name: string) { + // Extract the first letter and capitalize it + const formattedName = name.charAt(0).toUpperCase(); + + return formattedName; +} + + + + + +const AddGroupTemplate = ` + + + +
+

Đặt tên nhóm của bạn

+
+ Chào Bạn, Hiện tại còn 6 sản phẩm Chuột máy tính. Nhanh chóng tạo nhóm ngay để được mua sản phẩm với + giá hấp dẫn. +
+ + Vd: Hurasort săn sale Noel + + + Tạo nhóm + + +
+`; + +const ShareGroupTemplate = ` + + + +
+

Chúc mừng bạn!

+
+ Nhóm được tạo thành công, vui lòng check mail để xem chi tiết thông tin nhóm của bạn! +
+
+
+ Link nhóm: + https://adman.vn/group-order?id=2431177 +
+ + + Copy + +
+
+ Share: +
+ + icon facebook + + + icon zalo + + + icon email + +
+
+
+

Hoặc bạn có thể mời bạn bè của bạn bằng cách nhập email

+
+ + +
+ + + Thêm email + +
+ + + Gửi email thông báo + +
+`; + + +const JoinProductTemplate = ` + + + +
+
v
+ Hồng vừa mời bạn tham gia nhóm Hura săn sale Noel +
+
+ + +
+ Sl: 30 + Còn lại: 10 +
+ +
+ Combo Bàn phím và Chuột không dây MOFII CANDY + Milk + Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu +
+
+ 199.000đ +
+ Khi mua nhóm 5 người +
+ +
+
+ + v + + + + + +
+
+ Cần thêm 02 thành viên +
+
+
+
+
+
+ Bạn có 10 phút để tham gia nhóm, mau chóng ấn chọn + Tham gia nhóm để có cơ hội mua hàng với giá siêu ưu đãi nhé! +
+ + Tham gia nhóm +
+ 20 + 11 + 30 +
+ +
+`; + + +const SuccessMemberTemplate = ` + + + +
+

Chúc mừng bạn

+
+ Đã tham gia nhóm thành công +
+
+ Nhóm Hurasoft săn sale Noel đã đủ số lượng thành viên thành công mở khóa ưu đãi sản phẩm! +
+ + Người thanh toán: Hồng + +

Thông tin thanh toán sẽ được gửi qua email của bạn.

+ + ok + +
+`; + + +const InfoPayProductTemplate = ` + + + +
+

Chúc mừng nhóm Hurasoft săn sale

+
Nhóm đã đủ số lượng thành viên để tham gia mua sản phẩm với giá ưu đãi
+
+
Thông tin thanh toán
+
+
+ pay +
+
+ NGUYỄN THỊ DUYÊN: + Ngân hàng: ACB + Số tài khoản: 7960888888 + Nội dung thanh toán: Tên nhóm của bạn + SĐT +
+
+
+
+
+ Bạn vui lòng thanh toán trước +
+ 20 + 11 + 30 +
+
Để được hưởng ưu đãi nhóm
+
+
+
+ Thanh toán xong hãy chụp lại giao dịch. CSKH 19002223 sẽ liên hệ xác nhận lại với bạn +
+ + ok + +
+`; \ No newline at end of file diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..922fb96 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,422 @@ +async function goi_sp_tu_api(): Promise { + return new Promise((resolve, reject) => { + return resolve(List_product); + }) +} + +async function goi_sp_user_tu_api(): Promise { + return new Promise((resolve, reject) => { + return resolve(User); + }) +} + +async function hienthi_nhomsp() { + const lay_sp_user_tu_api: UserInfo[] = await goi_sp_user_tu_api(); + + console.log(lay_sp_user_tu_api); + DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group') +} + +async function hienthi_sp() { + const lay_sp_tu_api: ProductInfo[] = await goi_sp_tu_api(); + + // code hien thi danh sach dang dien ra + console.log(lay_sp_tu_api) + showListProductHome(lay_sp_tu_api, 'out_stock', 'js-holder-list-out-stock') + showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started') + showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming'); +} + +function showListProductHome(lay_sp_tu_api: ProductInfo[], status: string, holderId: string) { + const html: string[] = []; + const holder = document.getElementById(holderId); + + lay_sp_tu_api + .filter((product: ProductInfo) => product.status == status) + .forEach(function (product, keyIndex) { + html.push( + xayhtml(product) + ); + if (status != 'out_stock' && product.to_time > product.from_time) { + const countdownTime = (status == 'started') ? product.to_time : product.from_time; + countDown(`js-deal-time-${product.productId}`, countdownTime); + } + }); + if (holder) { + holder.innerHTML = html.join(''); + } + +} + +function xayhtml(product: ProductInfo): string { + const quantity_sold = product.quantity - product.sale_quantity; + const line_sold = Math.ceil((quantity_sold / product.quantity) * 100); + + const HtmlSl_nhom = product.quantity > product.quantity_member + ? `${product.quantity / product.quantity_member} nhóm duy nhất` + : ''; + + let HtmlProductItem = ''; + + if (product.status === 'started' && product.price > product.sale_quantity) { + let htmlCheckGroup = ''; + let HtmlListMember = ''; + let htmlBtnProduct = ''; + let addMember = ''; + let noteMember = ''; + + if (product.list_group.length > 0) { + product.list_group.forEach((item: infoGroup) => { + item.list_member.forEach((user: infoMember, index) => { + var more_qnt_member = product.quantity_member - index - 1; + const isLastMember = index > product.quantity_member; + console.log(isLastMember) + + HtmlListMember += ` + + ${formatName(user.name_member)} + + `; + + addMember = isLastMember ? `+` : ''; + + noteMember = isLastMember ? `Cần thêm ${more_qnt_member} thành viên` : ''; + }); + }); + + htmlCheckGroup = ` +
+
${formatPrice(product.retail_price)}đ
+ ${formatPrice(product.price)}đ +
+
+
${HtmlListMember} ${addMember}
+
${noteMember}
+
+ `; + + htmlBtnProduct = ` + + + Mời thêm bạn + + `; + } else { + htmlCheckGroup = ` +
+
${formatPrice(product.retail_price)}đ
+ Khi mua nhóm ${product.quantity_member} người +
+
Giá bán lẻ: ${formatPrice(product.price)}đ
+ `; + + htmlBtnProduct = ` + + + Tạo nhóm ngay + + + `; + } + + HtmlProductItem = ` +
+ + ${product.product_name} + ${HtmlSl_nhom} + +
+ ${product.product_name} + ${htmlCheckGroup} +
+ +
+ ${quantity_sold} đã bán hết +
+
+
+ +
+
+ ${htmlBtnProduct} +
+
+
+ `; + } else if (product.status === 'coming') { + HtmlProductItem = ` +
+ + ${product.product_name} + ${HtmlSl_nhom} + +
+ ${product.product_name} +
+
${formatPrice(product.retail_price)}đ
+ Khi mua nhóm ${product.quantity_member} người +
+
Giá bán lẻ: ${formatPrice(product.price)}đ
+
+ +
+
+
+
+ `; + } else if (product.status === 'out_stock') { + HtmlProductItem = ` +
+ + ${product.product_name} + ${HtmlSl_nhom} + + +
+ ${product.product_name} +
${formatPrice(product.retail_price)}
+
+ + 5 Nhóm mua hàng thành công +
+
+ +
+ ${product.quantity} đã bán hết +
+
+ +
+ 000000 +
+
+
+
+ `; + } else { + HtmlProductItem = `
Sản phẩm đang được cập nhật..!
`; + } + + return HtmlProductItem; +} + + + + +function DisplayListProductGroup(ProductUser: UserInfo[], holderId: string) { + const html: string[] = []; + const holder = document.getElementById(holderId); + + ProductUser.forEach(function (product, keyIndex) { + html.push( + xayhtmlProductGroup(product) + ); + }) + + if (holder) { + holder.innerHTML = html.join(''); + } +} + +function xayhtmlProductGroup(product: UserInfo) { + var HtmlProductItem: string = ''; + var HtmlListMember: string = ''; + var addMember: string = ''; + var noteMember: string = ''; + if (product.list_group.length > 0) { + product.list_group.forEach((Item: infoGroup) => { + const quantity_sold = Item.quantity - Item.sale_quantity; + const line_sold = Math.ceil((Item.quantity - Item.sale_quantity) / Item.quantity * 100); + + var HtmlSl_nhom: string = ''; + if (Item.quantity > Item.quantity_member) { + HtmlSl_nhom = `${Item.quantity / Item.quantity_member} nhóm duy nhất`; + } + + Item.list_member.forEach((user: infoMember, index) => { + if (index > Item.quantity_member) { + HtmlListMember += ` + + ${formatName(user.name_member)} + + `; + addMember = ``; + noteMember = ``; + } else { + var more_qnt_member = Item.quantity_member - index - 1; + HtmlListMember += ` + + ${formatName(user.name_member)} + + `; + addMember = ` + + + + + `; + noteMember = ` + Cần thêm ${more_qnt_member} thành viên + `; + } + }) + + HtmlProductItem += ` +
+ + ${Item.product_name} + ${HtmlSl_nhom} + +
+ ${Item.product_name} +
+
+ ${formatPrice(Item.retail_price)}đ +
+ ${formatPrice(Item.price)}đ +
+ +
+
+ ${HtmlListMember}${addMember} +
+
+ ${noteMember} +
+
+ +
+ +
+ ${quantity_sold} đã bán hết +
+
+
+ +
+
+
+ + + Mời thêm bạn + +
+
+ + ${product.leaderEmail} vừa tạo nhóm thành công +
+
+
+ `; + }) + } + return HtmlProductItem; + +} + + +function closeBackground() { + var eleBackground = document.getElementById('overlay'); + eleBackground!.classList.remove('active'); + + var eleGlobalPopup = document.getElementById('js-global-popup'); + eleGlobalPopup!.classList.remove('active'); + + document.body.classList.remove('active'); + +} + +function copyLink() { + // Get the pre element + var preElement = document.getElementById("linkshare") as HTMLPreElement | null; + + // Check if the element exists + if (preElement) { + // Create a textarea element + var textarea = document.createElement("textarea"); + + textarea.value = preElement.textContent || ""; + + document.body.appendChild(textarea); + + textarea.select(); + + document.execCommand("copy"); + document.body.removeChild(textarea); + + alert("Copy link share thành công!"); + } +} + +// them o nhap email +let emailCounter = 3; + +function addEmail() { + + const contentEmail = document.getElementById('list-email-share'); + + const newEmailInput = document.createElement('input'); + + newEmailInput.type = 'text'; + newEmailInput.id = 'email' + emailCounter; + newEmailInput.placeholder = 'Email ' + emailCounter; + + contentEmail?.appendChild(newEmailInput); + + emailCounter++; +} + +function CountdownJoin() { + let countdown = 10 * 60; + const countdownElement = document.getElementById('js-time-join'); + + function updateCountdown() { + const minutes = Math.floor(countdown / 60); + const seconds = countdown % 60; + const formattedMinutes = minutes.toString().padStart(2, '0'); + const formattedSeconds = seconds.toString().padStart(2, '0'); + const formattedTime = `${formattedMinutes}${formattedSeconds}`; + if (countdownElement) { + countdownElement.innerHTML = formattedTime; + } + } + + function decrementCountdown() { + if (countdown > 0) { + countdown--; + updateCountdown(); + } else { + clearInterval(intervalId); + closeBackground(); + } + } + + updateCountdown(); + const intervalId = setInterval(decrementCountdown, 1000); +} + +function ShowPopupGlobal(key: string) { + const globalPopup = document.getElementById('js-global-popup'); + globalPopup?.classList.add('active') + + const eleBackground = document.getElementById('overlay'); + eleBackground!.classList.add('active'); + + document.body.classList.add('active'); + + const holderPupop = document.getElementById('js-content-popup'); + + if (key == 'AddGroup') { + holderPupop!.innerHTML = AddGroupTemplate; + } else if (key == 'AddMember') { + holderPupop!.innerHTML = ShareGroupTemplate; + } +} + + +// run function +hienthi_sp(); +hienthi_nhomsp(); +CountdownJoin(); + + +