diff --git a/assets/css/style_mobile.css b/assets/css/style_mobile.css new file mode 100644 index 0000000..fa0ec91 --- /dev/null +++ b/assets/css/style_mobile.css @@ -0,0 +1,1334 @@ +@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: #d62323; + 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: 100%; + padding: 0 10px; + margin: 0 auto; + overflow: hidden; +} + +.container-mb { + max-width: 480px; + margin: 0 auto; + padding: 0; +} + +.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: 10px; +} +.header .header-right .item i { + margin-right: 5px; +} +.header .header-right i.fa-caret-down { + color: #cacaca; +} + +.homepage .banner { + margin: 10px 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: 40px; + 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: 45px; + height: 1px; + background: #cb1616; +} +.homepage .box-quytrinh .item .txt { + text-align: center; + display: block; + margin-top: 7px; + font-size: 12px; +} +.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: 10px 0; +} +.homepage .box-combo-sold-out .product-item { + width: 100%; + margin-right: 0; +} +.homepage .box-group-user .title { + font-size: 16px; + color: #d60a00; + font-weight: 800; + text-transform: uppercase; + padding: 15px 0; + text-align: center; +} +.homepage .box-group-user .product-item { + width: 100%; + margin-right: 0; + 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: 110px; + height: 110px; +} +.homepage .box-group-user .product-item .product-info { + width: calc(100% - 120px); +} +.homepage .box-group-user .product-item .add-member { + width: 130px; +} +.homepage .group-list-product { + margin: 10px 0; +} +.homepage .box-list-product { + margin-bottom: 10px; + display: none; +} +.homepage .box-list-product.active { + display: block; +} +.homepage .box-list-product .product-item { + width: 100%; + margin-right: 0; +} +.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; +} + +.background-white { + background: #fff; + border-radius: 15px; +} + +.product-item { + width: 100%; + margin-right: 0; + 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; +} + +.box-successful-purchase { + background: url(../images/background-successful-purchase-mb.png) no-repeat; + background-size: cover; + border-radius: 15px; + padding: 10px; + margin-bottom: 10px; +} +.box-successful-purchase .title { + font-size: 16px; + font-weight: 700; + color: #d60a00; + text-align: center; + text-transform: uppercase; + padding: 15px 0 15px 0; + display: block; +} +.box-successful-purchase .content { + padding: 0 10px 10px 10px; + overflow: auto; + height: 400px; + margin-right: 5px; +} +.box-successful-purchase .item-success { + width: 100%; + margin-bottom: 5px; + padding: 10px; +} +.box-successful-purchase .item-success .avatar { + width: 26px; + height: 26px; + display: block; + text-align: center; + line-height: 26px; + font-size: 16px; + font-weight: 700; + background: #8c8c8c; + margin-right: 10px; + border-radius: 50%; + color: #fff; + text-transform: uppercase; +} +.box-successful-purchase .item-success .info { + width: calc(100% - 36px); +} +.box-successful-purchase .item-success .name-pro { + margin-bottom: 3px; +} +.box-successful-purchase .item-success .time { + color: #848484; + font-size: 13px; +} +.box-successful-purchase .item-success:nth-child(2n-1) { + background: #f9f4f1; + border-radius: 8px; +} + +.box-thele { + background: url(../images/background-thele-mb.png) no-repeat; + background-size: cover; + border-radius: 15px; + padding: 10px; +} +.box-thele .title { + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + color: #d60a00; + text-align: center; + padding: 10px 0 10px 0; +} +.box-thele .content { + background: #fff; + width: 100%; + border-radius: 12px; + padding: 10px; +} +.box-thele .item { + margin-bottom: 6px; +} +.box-thele .item .number { + font-size: 20px; + color: #d60a00; + font-weight: 700; + margin-right: 10px; +} +.box-thele .item ul { + margin-bottom: 0; +} +.box-thele .item .txt { + margin-top: 5px; + font-size: 13px; +} +.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: 100%; + margin-right: 0; + 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; + padding: 10px; +} +.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: 100%; + margin-bottom: 20px; +} +.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: 55px; + width: 160px; + margin: 0 auto; + display: block; +} +.footer .footer-bottom .content-right { + width: 100%; + margin-top: 10px; +} +.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: 95%; + 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: 95%; + 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 auto; + padding: 15px 0 5px 0; +} +.global-popup .content .note { + margin: 0 auto; + 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; + display: flex; +} +.global-popup .info-link span { + white-space: nowrap; + display: inline-block; + margin-right: 5px; +} +.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 { + width: 115px; + height: 115px; +} +.global-popup .product-item .product-info { + width: calc(100% - 125px); +} +.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; +} + +.tab-list { + margin: 20px 30px 10px 30px; + display: flex; + align-items: center; +} +.tab-list .item { + width: 50%; + height: 40px; + font-size: 16px; + font-weight: 700; + color: #fff; + text-transform: uppercase; + line-height: 40px; + text-align: center; + border-radius: 20px 20px 0px 0px; + background: linear-gradient(180deg, #a8a8a8 0%, #dadada 100%); + margin-right: 10px; +} +.tab-list .item:last-child { + margin-right: 0; +} +.tab-list .item.active { + background: var(--Gadien-9, linear-gradient(90deg, #f98600 -5.98%, #ffe500 100%)); +} +.tab-list .item a:hover { + color: #fff; +} + +@media (max-width: 414px) { + .header .logo { + width: 100px; + } + .header .header-right .item .txt { + font-size: 11px; + } +}/*# sourceMappingURL=style_mobile.css.map */ \ No newline at end of file diff --git a/assets/css/style_mobile.css.map b/assets/css/style_mobile.css.map new file mode 100644 index 0000000..efe6c80 --- /dev/null +++ b/assets/css/style_mobile.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style_mobile.scss","style_mobile.css"],"names":[],"mappings":"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","file":"style_mobile.css"} \ No newline at end of file diff --git a/assets/css/style_mobile.scss b/assets/css/style_mobile.scss new file mode 100644 index 0000000..2300526 --- /dev/null +++ b/assets/css/style_mobile.scss @@ -0,0 +1,1323 @@ +@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: #d62323; + 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: 100%; + padding: 0 10px; + margin: 0 auto; + overflow: hidden; +} +.container-mb { + max-width: 480px; + margin: 0 auto; + padding: 0; +} +.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: 10px; + i { + margin-right: 5px; + } + } + i.fa-caret-down { + color: #cacaca; + } + } +} +.homepage { + .banner { + margin: 10px 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: 40px; + text-align: center; + position: relative; + .icon_2023 { + margin: 0 auto; + position: relative; + &::before { + position: absolute; + content: ""; + left: 55px; + top: 50%; + width: 45px; + height: 1px; + background: #cb1616; + } + } + .txt { + text-align: center; + display: block; + margin-top: 7px; + font-size: 12px; + } + &:last-child { + margin-right: 0; + .icon_2023::before { + display: none; + } + } + } + } + .box-combo-sold-out { + margin: 10px 0; + .product-item { + width: 100%; + margin-right: 0; + } + } + .box-group-user { + .title { + font-size: 16px; + color: #d60a00; + font-weight: 800; + text-transform: uppercase; + padding: 15px 0; + text-align: center; + } + .product-item { + width: 100%; + margin-right: 0; + border: 1px solid #f5f5f5; + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1); + padding: 15px; + .product-image { + width: 110px; + height: 110px; + } + .product-info { + width: calc(100% - 120px); + } + .add-member { + width: 130px; + } + } + } + .group-list-product { + margin: 10px 0; + } + .box-list-product { + margin-bottom: 10px; + display: none; + &.active { + display: block; + } + .product-item { + width: 100%; + margin-right: 0; + } + .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; + } + } + } +} +.background-white { + background: #fff; + border-radius: 15px; +} +.product-item { + width: 100%; + margin-right: 0; + 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; + } + } +} + +.box-successful-purchase { + background: url(../images/background-successful-purchase-mb.png) no-repeat; + background-size: cover; + border-radius: 15px; + padding: 10px; + margin-bottom: 10px; + .title { + font-size: 16px; + font-weight: 700; + color: #d60a00; + text-align: center; + text-transform: uppercase; + padding: 15px 0 15px 0; + display: block; + } + .content { + padding: 0 10px 10px 10px; + overflow: auto; + height: 400px; + margin-right: 5px; + } + .item-success { + width: 100%; + margin-bottom: 5px; + padding: 10px; + .avatar { + width: 26px; + height: 26px; + display: block; + text-align: center; + line-height: 26px; + font-size: 16px; + font-weight: 700; + background: #8c8c8c; + margin-right: 10px; + border-radius: 50%; + color: #fff; + text-transform: uppercase; + } + .info { + width: calc(100% - 36px); + } + .name-pro { + margin-bottom: 3px; + } + .time { + color: #848484; + font-size: 13px; + } + &:nth-child(2n - 1) { + background: #f9f4f1; + border-radius: 8px; + } + } +} +.box-thele { + background: url(../images/background-thele-mb.png) no-repeat; + background-size: cover; + border-radius: 15px; + padding: 10px; + .title { + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + color: #d60a00; + text-align: center; + padding: 10px 0 10px 0; + } + .content { + background: #fff; + width: 100%; + border-radius: 12px; + padding: 10px; + } + .item { + margin-bottom: 6px; + .number { + font-size: 20px; + color: #d60a00; + font-weight: 700; + margin-right: 10px; + } + ul { + margin-bottom: 0; + } + .txt { + margin-top: 5px; + font-size: 13px; + 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: 100%; + margin-right: 0; + 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; + padding: 10px; + } + .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: 100%; + margin-bottom: 20px; + 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: 55px; + width: 160px; + margin: 0 auto; + display: block; + } + .content-right { + width: 100%; + margin-top: 10px; + 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: 95%; + 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: 95%; + 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 auto; + padding: 15px 0 5px 0; + } + .note { + margin: 0 auto; + 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; + display: flex; + span { + white-space: nowrap; + display: inline-block; + margin-right: 5px; + } + .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 { + width: 115px; + height: 115px; + } + .product-info { + width: calc(100% - 125px); + } + .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; + } + } +} + +.tab-list { + margin: 20px 30px 10px 30px; + display: flex; + align-items: center; + .item { + width: calc(100% / 2); + height: 40px; + font-size: 16px; + font-weight: 700; + color: #fff; + text-transform: uppercase; + line-height: 40px; + text-align: center; + border-radius: 20px 20px 0px 0px; + background: linear-gradient(180deg, #a8a8a8 0%, #dadada 100%); + margin-right: 10px; + &:last-child { + margin-right: 0; + } + &.active { + background: var(--Gadien-9, linear-gradient(90deg, #f98600 -5.98%, #ffe500 100%)); + } + a:hover { + color: #fff; + } + } +} + +@media (max-width: 414px) { + .header .logo { + width: 100px; + } + .header .header-right .item .txt { + font-size: 11px; + } +} diff --git a/assets/images/background-successful-purchase-mb.png b/assets/images/background-successful-purchase-mb.png new file mode 100644 index 0000000..0077680 Binary files /dev/null and b/assets/images/background-successful-purchase-mb.png differ diff --git a/assets/images/background-thele-mb.png b/assets/images/background-thele-mb.png new file mode 100644 index 0000000..8e5080c Binary files /dev/null and b/assets/images/background-thele-mb.png differ diff --git a/dist/data.js b/dist/data.js index 37fe0ae..66cbe70 100644 --- a/dist/data.js +++ b/dist/data.js @@ -2,7 +2,7 @@ // const List_product = [ { - productId: 1, + productId: 22, 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', @@ -89,7 +89,7 @@ const List_product = [ quantity: 30, sale_quantity: 10, quantity_member: 5, - from_time: 1703696400000, + from_time: 1703782800000, to_time: 1703955600000, status: 'coming', category_info: [ @@ -150,7 +150,7 @@ const User = [ { group_id: 1, name_group: 'Hura săn sale', - product_id: 1, + product_id: 33, 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', @@ -159,7 +159,7 @@ const User = [ quantity: 20, sale_quantity: 10, quantity_member: 5, - to_time: 1703955600000, + to_time: 1703955500000, list_member: [ { id_member: 1, @@ -304,7 +304,7 @@ const ShareGroupTemplate = ` - + Gửi email thông báo @@ -429,3 +429,15 @@ const InfoPayProductTemplate = ` `; +const OutTimeJoinTpl = ` + + + +
+

Thời gian tham gia nhóm Hurasoft săn sale Noel đã hết hạn!

+
Bạn vui lòng tham gia nhóm khác hoặc tự tạo nhóm để mua sản phẩm chuột máy tính ABC với giá ưu đãi nha
+
+`; +function XayHtmlPopup() { +} diff --git a/dist/main.js b/dist/main.js index 83511f1..ba9b019 100644 --- a/dist/main.js +++ b/dist/main.js @@ -25,7 +25,6 @@ function goi_sp_user_tu_api() { 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'); }); } @@ -33,7 +32,6 @@ 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'); @@ -73,14 +71,13 @@ function xayhtml(product) { 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` : ''; + addMember = isLastMember ? '' : '+'; + noteMember = isLastMember ? '' : `Cần thêm ${more_qnt_member} thành viên`; }); }); htmlCheckGroup = ` @@ -203,6 +200,9 @@ function DisplayListProductGroup(ProductUser, holderId) { const holder = document.getElementById(holderId); ProductUser.forEach(function (product, keyIndex) { html.push(xayhtmlProductGroup(product)); + product.list_group.forEach((Item) => { + countDown(`js-deal-time-${Item.product_id}`, Item.to_time); + }); }); if (holder) { holder.innerHTML = html.join(''); @@ -222,31 +222,15 @@ function xayhtmlProductGroup(product) { 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 - `; - } + var more_qnt_member = Item.quantity_member - index - 1; + const isLastMember = index > Item.quantity_member; + HtmlListMember += ` + + ${formatName(user.name_member)} + + `; + addMember = isLastMember ? '' : '+'; + noteMember = isLastMember ? '' : `Cần thêm ${more_qnt_member} thành viên`; }); HtmlProductItem += `
@@ -283,7 +267,7 @@ function xayhtmlProductGroup(product) {
- + Mời thêm bạn @@ -371,8 +355,28 @@ function ShowPopupGlobal(key) { else if (key == 'AddMember') { holderPupop.innerHTML = ShareGroupTemplate; } + else if (key == 'waiting_join') { + holderPupop.innerHTML = JoinProductTemplate; + CountdownJoin(); + } +} +function changeTab(contentId) { + // Xóa lớp 'active' khỏi tất cả các tab + const tabItems = document.querySelectorAll('.tab-list .item'); + tabItems.forEach(item => item.classList.remove('active')); + // Thêm lớp 'active' vào tab được nhấp chuột + const selectedTabItem = event.currentTarget.parentElement; // Lấy phần tử cha của (li.item) + // Lấy phần tử cha của (li.item) + selectedTabItem.classList.add('active'); + // Xóa lớp 'active' khỏi tất cả nội dung của tab + const tabPanes = document.querySelectorAll('.box-list-product'); + tabPanes.forEach(pane => pane.classList.remove('active')); + // Thêm lớp 'active' vào nội dung của tab tương ứng + const selectedTabPane = document.querySelector(contentId); + if (selectedTabPane) { + selectedTabPane.classList.add('active'); + } } // run function hienthi_sp(); hienthi_nhomsp(); -CountdownJoin(); diff --git a/index-mobile.html b/index-mobile.html new file mode 100644 index 0000000..b14c757 --- /dev/null +++ b/index-mobile.html @@ -0,0 +1,811 @@ + + + + + + + Mua hàng theo nhóm + + + + + + +
+ +
+
+ +
+
+
+ +
+
+ + 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đ +
+ +
+ +
+ 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đ +
+ +
+ +
+ 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đ +
+ +
+ +
+ 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 + + +
+
+
+
+
+ +
+ +
+
+
Mua hàng thành công
+
+
+
H
+
+ Nhóm Huraxxx +
Chuột gaming Logitech G102 Gen2 Lightsync
+
+ 199.000đ + 320.000đ +
+
Hôm nay, 01 : 20 : 41
+
+
+
+
H
+
+ Nhóm Huraxxx +
Chuột gaming Logitech G102 Gen2 Lightsync
+
+ 199.000đ + 320.000đ +
+
Hôm nay, 01 : 20 : 41
+
+
+
+
H
+
+ Nhóm Huraxxx +
Chuột gaming Logitech G102 Gen2 Lightsync
+
+ 199.000đ + 320.000đ +
+
Hôm nay, 01 : 20 : 41
+
+
+
+
H
+
+ Nhóm Huraxxx +
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 +
+
+
+
+
+
+
+
+ +
+
+ + + +
+

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/index.html b/index.html index aa79395..c9e5cc1 100644 --- a/index.html +++ b/index.html @@ -1021,11 +1021,10 @@ - + + + + - - - - \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..d426e34 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,68 @@ +{ + "name": "muahangtheonhom", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "muahangtheonhom", + "version": "1.0.0", + "license": "ISC", + "devDependencies": { + "@types/node": "^20.10.5", + "typescript": "^5.3.3" + } + }, + "node_modules/@types/node": { + "version": "20.10.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.5.tgz", + "integrity": "sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "node_modules/typescript": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + } + }, + "dependencies": { + "@types/node": { + "version": "20.10.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.5.tgz", + "integrity": "sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==", + "dev": true, + "requires": { + "undici-types": "~5.26.4" + } + }, + "typescript": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", + "dev": true + }, + "undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..dd52b73 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "muahangtheonhom", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "@types/node": "^20.10.5", + "typescript": "^5.3.3" + } +} diff --git a/src/data.ts b/src/data.ts index ea42170..fcc4fd3 100644 --- a/src/data.ts +++ b/src/data.ts @@ -56,7 +56,7 @@ type infoMember = { const List_product: ProductInfo[] = [ { - productId: 1, + productId: 22, 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', @@ -143,7 +143,7 @@ const List_product: ProductInfo[] = [ quantity: 30, sale_quantity: 10, quantity_member: 5, - from_time: 1703696400000, + from_time: 1703782800000, to_time: 1703955600000, status: 'coming', category_info: [ @@ -205,7 +205,7 @@ const User: UserInfo[] = [ { group_id: 1, name_group: 'Hura săn sale', - product_id: 1, + product_id: 33, 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', @@ -214,7 +214,7 @@ const User: UserInfo[] = [ quantity: 20, sale_quantity: 10, quantity_member: 5, - to_time: 1703955600000, + to_time: 1703955500000, list_member: [ { id_member: 1, @@ -310,9 +310,6 @@ function formatName(name: string) { } - - - const AddGroupTemplate = ` @@ -379,13 +376,12 @@ const ShareGroupTemplate = ` - + Gửi email thông báo `; - const JoinProductTemplate = ` @@ -509,4 +505,20 @@ const InfoPayProductTemplate = ` ok -`; \ No newline at end of file +`; + + +const OutTimeJoinTpl = ` + + + +
+

Thời gian tham gia nhóm Hurasoft săn sale Noel đã hết hạn!

+
Bạn vui lòng tham gia nhóm khác hoặc tự tạo nhóm để mua sản phẩm chuột máy tính ABC với giá ưu đãi nha
+
+`; + +function XayHtmlPopup() { + +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 922fb96..0861fe5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,7 +13,6 @@ async function goi_sp_user_tu_api(): Promise { 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') } @@ -21,7 +20,6 @@ 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'); @@ -70,7 +68,6 @@ function xayhtml(product: ProductInfo): string { 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 += ` @@ -78,9 +75,9 @@ function xayhtml(product: ProductInfo): string { `; - addMember = isLastMember ? `+` : ''; + addMember = isLastMember ? '' : '+'; - noteMember = isLastMember ? `Cần thêm ${more_qnt_member} thành viên` : ''; + noteMember = isLastMember ? '' : `Cần thêm ${more_qnt_member} thành viên`; }); }); @@ -211,6 +208,10 @@ function DisplayListProductGroup(ProductUser: UserInfo[], holderId: string) { html.push( xayhtmlProductGroup(product) ); + product.list_group.forEach((Item: infoGroup) => { + countDown(`js-deal-time-${Item.product_id}`, Item.to_time); + }) + }) if (holder) { @@ -234,30 +235,18 @@ function xayhtmlProductGroup(product: UserInfo) { } 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 - `; - } + var more_qnt_member = Item.quantity_member - index - 1; + const isLastMember = index > Item.quantity_member; + + HtmlListMember += ` + + ${formatName(user.name_member)} + + `; + + addMember = isLastMember ? '' : '+'; + + noteMember = isLastMember ? '' : `Cần thêm ${more_qnt_member} thành viên`; }) HtmlProductItem += ` @@ -295,7 +284,7 @@ function xayhtmlProductGroup(product: UserInfo) {
- + Mời thêm bạn @@ -409,6 +398,32 @@ function ShowPopupGlobal(key: string) { holderPupop!.innerHTML = AddGroupTemplate; } else if (key == 'AddMember') { holderPupop!.innerHTML = ShareGroupTemplate; + } else if (key == 'waiting_join') { + holderPupop!.innerHTML = JoinProductTemplate; + CountdownJoin(); + } +} + + + +function changeTab(contentId: string): void { + // Xóa lớp 'active' khỏi tất cả các tab + const tabItems = document.querySelectorAll('.tab-list .item'); + tabItems.forEach(item => item.classList.remove('active')); + + // Thêm lớp 'active' vào tab được nhấp chuột + const selectedTabItem = (event!.currentTarget as HTMLElement).parentElement; // Lấy phần tử cha của (li.item) + // Lấy phần tử cha của (li.item) + selectedTabItem!.classList.add('active'); + + // Xóa lớp 'active' khỏi tất cả nội dung của tab + const tabPanes = document.querySelectorAll('.box-list-product'); + tabPanes.forEach(pane => pane.classList.remove('active')); + + // Thêm lớp 'active' vào nội dung của tab tương ứng + const selectedTabPane = document.querySelector(contentId); + if (selectedTabPane) { + selectedTabPane.classList.add('active'); } } @@ -416,7 +431,7 @@ function ShowPopupGlobal(key: string) { // run function hienthi_sp(); hienthi_nhomsp(); -CountdownJoin(); + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..59c6b10 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "target": "es6", + "module": "commonjs", + "outDir": "./dist", + "rootDir": "./src", + "strict": true + }, + "include": ["src/**/*.ts"], + "exclude": ["node_modules"] +} \ No newline at end of file