11:40 29/12/2023

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 = `
             </a>
         </div>
 
-        <a href="javascript:void(0)" class="btn-add-member" onclick="showContentPopup('waiting_join')">
+        <a href="javascript:void(0)" class="btn-add-member" onclick="ShowPopupGlobal('waiting_join')">
             Gửi email thông báo
         </a>
     </div>
@@ -429,3 +429,15 @@ const InfoPayProductTemplate = `
         </a>
     </div>
 `;
+const OutTimeJoinTpl = `
+    <a href="javascript:void(0)" class="btn-close"
+        onclick="$('.global-popup').removeClass('active');closeBackground()">
+        <i class="fa fa-times"></i>
+    </a>
+    <div class="content">
+       <h2 class="title">Thời gian tham gia nhóm Hurasoft săn sale Noel đã hết hạn!</h2>
+       <div class="note">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</div>
+    </div>
+`;
+function XayHtmlPopup() {
+}

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 += `
                         <a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
                             ${formatName(user.name_member)}
                         </a>
                     `;
-                    addMember = isLastMember ? `<a href="javascript:void(0)" class="item add">+</a>` : '';
+                    addMember = isLastMember ? '' : '<a href="javascript:void(0)" class="item add">+</a>';
-                    noteMember = isLastMember ? `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên` : '';
+                    noteMember = isLastMember ? '' : `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> 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 = `<span class="soluongnhom">${Item.quantity / Item.quantity_member} nhóm duy nhất</span>`;
             }
             Item.list_member.forEach((user, index) => {
-                if (index > Item.quantity_member) {
+                var more_qnt_member = Item.quantity_member - index - 1;
-                    HtmlListMember += `
+                const isLastMember = index > Item.quantity_member;
-                            <a href="javascript:void(0)" class="item">
+                HtmlListMember += `
-                                ${formatName(user.name_member)}
+                        <a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
-                            </a>
+                            ${formatName(user.name_member)}
-                        `;
+                        </a>
-                    addMember = ``;
+                    `;
-                    noteMember = ``;
+                addMember = isLastMember ? '' : '<a href="javascript:void(0)" class="item add">+</a>';
-                }
+                noteMember = isLastMember ? '' : `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên`;
-                else {
-                    var more_qnt_member = Item.quantity_member - index - 1;
-                    HtmlListMember += `
-                            <a href="javascript:void(0)" class="item">
-                                ${formatName(user.name_member)}
-                            </a>
-                        `;
-                    addMember = `
-                            <a href="javascript:void(0)" class="item add">
-                                +
-                            </a>
-                        `;
-                    noteMember = `
-                            Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên
-                        `;
-                }
             });
             HtmlProductItem += `
                 <div class="product-item d-flex">
@@ -283,7 +267,7 @@ function xayhtmlProductGroup(product) {
                                 <div class="product-time-holder js-deal-time-${Item.product_id}" data-time="${Item.to_time}">
                                 </div>
                             </div>
-                            <a href="javascript:void(0)" class="add-member">
+                            <a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
                                 <i class="fa fa-plus"></i>
                                 Mời thêm bạn
                             </a>
@@ -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 <a> (li.item)
+    // Lấy phần tử cha của <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();

index-mobile.html

@@ -0,0 +1,811 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mua hàng theo nhóm</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/style_mobile.css">
+</head>
+
+<body>
+    <div class="container-mb">
+        <script src="./dist/hoadaoroi.js"></script>
+        <div class="overlay" id="overlay" onclick="closeBackground();"></div>
+        <div class="header">
+            <div class="container">
+                <div class="header-main-content d-flex align-items space-between">
+                    <a href="/" class="logo">
+                        <img src="./assets/images/logo.png" width="126" height="50" alt="logo">
+                    </a>
+                    <div class="header-right d-flex align-items">
+                        <a href="javascript:void(0)" class="item d-flex align-items">
+                            <i class="icon_2023 thele"></i>
+                            <span class="txt">Thể lệ</span>
+                        </a>
+                        <a href="javascript:void(0)" class="item d-flex align-items">
+                            <i class="icon_2023 muahang" aria-hidden="true"></i>
+                            <span class="txt">Mua thành công</span>
+                        </a>
+                        <a href="/taikhoan" class="item d-flex align-items">
+                            <i class="icon_2023 user"></i>
+                            <span class="txt">
+                                Hi, Hồng! <i class="fa fa-caret-down"></i>
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="homepage">
+            <div class="container">
+                <div class="banner">
+                    <a href="" class="item">
+                        <img src="./assets/images/banner.png" alt="">
+                    </a>
+                </div>
+                <div class="box-quytrinh d-flex space-center">
+                    <div class="item">
+                        <i class="icon_2023 group"></i>
+                        <span class="txt">Tạo nhóm</span>
+                    </div>
+                    <div class="item">
+                        <i class="icon_2023 share"></i>
+                        <span class="txt">Chia sẻ, <br> mời thành viên</span>
+                    </div>
+                    <div class="item">
+                        <i class="icon_2023 cart"></i>
+                        <span class="txt">Mua hàng <br> theo nhóm</span>
+                    </div>
+                    <div class="item">
+                        <i class="icon_2023 check"></i>
+                        <span class="txt">Hoàn thành</span>
+                    </div>
+                </div>
+                <div class="box-combo-sold-out d-flex flex-wrap space-center" id="js-holder-list-out-stock">
+                    <div class="product-item d-flex">
+                        <a href="" class="product-image sold">
+                            <img src="./assets/images/image-sp.png" alt="">
+                            <span class="soluongnhom">5 nhóm duy nhất</span>
+                            <span class="icon-sold"></span>
+                        </a>
+                        <div class="product-info">
+                            <a href="" class="product-name line-clamp-2">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</a>
+                            <div class="retail_price">
+                                199.000đ
+                            </div>
+                            <div class="total-group">
+                                <i class="icon_2023 group"></i>
+                                <span>5 Nhóm mua hàng thành công</span>
+                            </div>
+                            <div class="box-sold">
+                                <i class="icon_2023 hot"></i>
+                                <div class="line-deal" style="width: 90%;"></div>
+                                <span class="quantity-sold">10 đã bán hết</span>
+                            </div>
+                            <div class="box-time d-flex align-items">
+                                <i class="icon_2023 time"></i>
+                                <div class="product-time-holder js-deal-time" data-time="">
+                                    <b>20</b>
+                                    <b>11</b>
+                                    <b>30</b>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="product-item d-flex">
+                        <a href="" class="product-image sold">
+                            <img src="./assets/images/image-sp.png" alt="">
+                            <span class="soluongnhom">5 nhóm duy nhất</span>
+                            <span class="icon-sold"></span>
+                        </a>
+                        <div class="product-info">
+                            <a href="" class="product-name line-clamp-2">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</a>
+                            <div class="retail_price">
+                                199.000đ
+                            </div>
+                            <div class="total-group">
+                                <i class="icon_2023 group"></i>
+                                <span>5 Nhóm mua hàng thành công</span>
+                            </div>
+                            <div class="box-sold">
+                                <i class="icon_2023 hot"></i>
+                                <div class="line-deal" style="width: 90%;"></div>
+                                <span class="quantity-sold">10 đã bán hết</span>
+                            </div>
+                            <div class="box-time d-flex align-items">
+                                <i class="icon_2023 time"></i>
+                                <div class="product-time-holder js-deal-time" data-time="">
+                                    <b>20</b>
+                                    <b>11</b>
+                                    <b>30</b>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="box-group-user background-white">
+                    <h2 class="title">Nhóm của bạn</h2>
+                    <div class="list-product d-flex flex-wrap" id="js-holder-product-group">
+                        <div class="product-item d-flex">
+                            <a href="" class="product-image">
+                                <img src="./assets/images/image-sp.png" alt="">
+                                <span class="soluongnhom">5 nhóm duy nhất</span>
+                            </a>
+                            <div class="product-info">
+                                <a href="" class="product-name line-clamp-2">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</a>
+                                <div class="box-price d-flex align-items">
+                                    <div class="retail_price">
+                                        199.000đ
+                                    </div>
+                                    <del class="price-old">320.000đ</del>
+                                </div>
+
+                                <div class="list-memeber d-flex align-items">
+                                    <div class="box-memeber d-flex">
+                                        <a href="javascript:void(0)" class="item">
+                                            v
+                                        </a>
+                                        <a href="javascript:void(0)" class="item add">
+                                            +
+                                        </a>
+                                    </div>
+                                    <div class="note">
+                                        Cần thêm <b style="color: var(--color-global);">02</b> thành viên
+                                    </div>
+                                </div>
+
+                                <div class="box-sold">
+                                    <i class="icon_2023 hot"></i>
+                                    <div class="line-deal" style="width: 90%;"></div>
+                                    <span class="quantity-sold">10 đã bán hết</span>
+                                </div>
+                                <div class="box-button d-flex align-items space-between">
+                                    <div class="box-time d-flex align-items">
+                                        <i class="icon_2023 time"></i>
+                                        <div class="product-time-holder js-deal-time" data-time="">
+                                            <b>20</b>
+                                            <b>11</b>
+                                            <b>30</b>
+                                        </div>
+                                    </div>
+                                    <a href="javascript:void(0)" class="add-member">
+                                        <i class="fa fa-plus"></i>
+                                        Mời thêm bạn
+                                    </a>
+                                </div>
+                                <div class="note-leader">
+                                    <i class="icon_2023 bell"></i>
+                                    <span>Hongvtxx@gmail.com vừa tạo nhóm thành công</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="product-item d-flex">
+                            <a href="" class="product-image">
+                                <img src="./assets/images/image-sp.png" alt="">
+                                <span class="soluongnhom">5 nhóm duy nhất</span>
+                            </a>
+                            <div class="product-info">
+                                <a href="" class="product-name line-clamp-2">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</a>
+                                <div class="box-price d-flex align-items">
+                                    <div class="retail_price">
+                                        199.000đ
+                                    </div>
+                                    <del class="price-old">320.000đ</del>
+                                </div>
+
+                                <div class="list-memeber d-flex align-items">
+                                    <div class="box-memeber d-flex">
+                                        <a href="javascript:void(0)" class="item">
+                                            v
+                                        </a>
+                                        <a href="javascript:void(0)" class="item add">
+                                            +
+                                        </a>
+                                    </div>
+                                    <div class="note">
+                                        Cần thêm <b style="color: var(--color-global);">02</b> thành viên
+                                    </div>
+                                </div>
+
+                                <div class="box-sold">
+                                    <i class="icon_2023 hot"></i>
+                                    <div class="line-deal" style="width: 90%;"></div>
+                                    <span class="quantity-sold">10 đã bán hết</span>
+                                </div>
+                                <div class="box-button d-flex align-items space-between">
+                                    <div class="box-time d-flex align-items">
+                                        <i class="icon_2023 time"></i>
+                                        <div class="product-time-holder js-deal-time" data-time="">
+                                            <b>20</b>
+                                            <b>11</b>
+                                            <b>30</b>
+                                        </div>
+                                    </div>
+                                    <a href="javascript:void(0)" class="add-member">
+                                        <i class="fa fa-plus"></i>
+                                        Mời thêm bạn
+                                    </a>
+                                </div>
+                                <div class="note-leader">
+                                    <i class="icon_2023 bell"></i>
+                                    <span>Hongvtxx@gmail.com vừa tạo nhóm thành công</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="group-list-product">
+                    <ul class="tab-list">
+                        <li class="item active">
+                            <a href="javascript:void(0)" onclick="changeTab('#box-pro-status')">Đang diễn ra</a>
+
+                        </li>
+                        <li class="item">
+                            <a href="javascript:void(0)" onclick="changeTab('#box-pro-coming')">Sắp diễn ra</a>
+                        </li>
+                    </ul>
+                    <div class="box-list-product active" id="box-pro-status">
+                        <div class="list-category d-flex align-items">
+                            <a href="javascript:void(0)" class="item-cate active">
+                                Tất cả +
+                            </a>
+                            <a href="javascript:void(0)" class="item-cate" data-id="1">
+                                Bàn phím
+                            </a>
+                            <a href="javascript:void(0)" class="item-cate" data-id="2">
+                                Phụ kiện
+                            </a>
+                        </div>
+                        <div class="product-list d-flex flex-wrap" id="js-holder-list-started">
+                            <div class="product-item d-flex">
+                                <a href="" class="product-image">
+                                    <img src="./assets/images/image-sp.png" alt="">
+                                    <span class="soluongnhom">5 nhóm duy nhất</span>
+                                </a>
+                                <div class="product-info">
+                                    <a href="" class="product-name line-clamp-2">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</a>
+                                    <div class="box-price d-flex align-items">
+                                        <div class="retail_price">
+                                            199.000đ
+                                        </div>
+                                        <del class="price-old">320.000đ</del>
+                                    </div>
+
+                                    <div class="list-memeber d-flex align-items">
+                                        <div class="box-memeber d-flex">
+                                            <a href="javascript:void(0)" class="item">
+                                                v
+                                            </a>
+                                            <a href="javascript:void(0)" class="item add">
+                                                +
+                                            </a>
+                                        </div>
+                                        <div class="note">
+                                            Cần thêm <b style="color: var(--color-global);">02</b> thành viên
+                                        </div>
+                                    </div>
+
+                                    <div class="box-sold">
+                                        <i class="icon_2023 hot"></i>
+                                        <div class="line-deal" style="width: 90%;"></div>
+                                        <span class="quantity-sold">10 đã bán hết</span>
+                                    </div>
+                                    <div class="box-button d-flex align-items space-between">
+                                        <div class="time d-flex align-items">
+                                            <i class="icon_2023 time"></i>
+                                            <div class="product-time-holder js-deal-time" data-time="">
+                                                <b>20</b>
+                                                <b>11</b>
+                                                <b>30</b>
+                                            </div>
+                                        </div>
+                                        <a href="javascript:void(0)" class="add-member">
+                                            <i class="fa fa-plus"></i>
+                                            Mời thêm bạn
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="product-item d-flex">
+                                <a href="" class="product-image">
+                                    <img src="./assets/images/image-sp.png" alt="">
+                                    <span class="soluongnhom">5 nhóm duy nhất</span>
+                                </a>
+                                <div class="product-info">
+                                    <a href="" class="product-name line-clamp-2">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</a>
+                                    <div class="box-price d-flex align-items">
+                                        <div class="retail_price">
+                                            199.000đ
+                                        </div>
+                                        <span class="red">Khi mua nhóm 5 người</span>
+                                    </div>
+
+                                    <div class="price-banle">Giá bán lẻ: 320.000đ</div>
+
+                                    <div class="box-sold">
+                                        <i class="icon_2023 hot"></i>
+                                        <div class="line-deal" style="width: 90%;"></div>
+                                        <span class="quantity-sold">10 đã bán hết</span>
+                                    </div>
+                                    <div class="box-button d-flex align-items space-between">
+                                        <div class="time d-flex align-items">
+                                            <i class="icon_2023 time"></i>
+                                            <div class="product-time-holder js-deal-time" data-time="">
+                                                <b>20</b>
+                                                <b>11</b>
+                                                <b>30</b>
+                                            </div>
+                                        </div>
+                                        <a href="javascript:void(0)" class="add-group">
+                                            <i class="fa fa-angle-double-right"></i>
+                                            <span>Tạo nhóm ngay</span>
+                                            <i class="fa fa-angle-double-left"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="product-item d-flex">
+                                <a href="" class="product-image">
+                                    <img src="./assets/images/image-sp.png" alt="">
+                                    <span class="soluongnhom">5 nhóm duy nhất</span>
+                                </a>
+                                <div class="product-info">
+                                    <a href="" class="product-name line-clamp-2">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</a>
+                                    <div class="box-price d-flex align-items">
+                                        <div class="retail_price">
+                                            199.000đ
+                                        </div>
+                                        <span class="red">Khi mua nhóm 5 người</span>
+                                    </div>
+
+                                    <div class="price-banle">Giá bán lẻ: 320.000đ</div>
+
+                                    <div class="box-sold">
+                                        <i class="icon_2023 hot"></i>
+                                        <div class="line-deal" style="width: 90%;"></div>
+                                        <span class="quantity-sold">10 đã bán hết</span>
+                                    </div>
+                                    <div class="box-button d-flex align-items space-between">
+                                        <div class="time d-flex align-items">
+                                            <i class="icon_2023 time"></i>
+                                            <div class="product-time-holder js-deal-time" data-time="">
+                                                <b>20</b>
+                                                <b>11</b>
+                                                <b>30</b>
+                                            </div>
+                                        </div>
+                                        <a href="javascript:void(0)" class="add-group">
+                                            <i class="fa fa-angle-double-right"></i>
+                                            <span>Tạo nhóm ngay</span>
+                                            <i class="fa fa-angle-double-left"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box-list-product" id="box-pro-coming">
+                        <div class="list-category d-flex align-items">
+                            <a href="javascript:void(0)" class="item-cate active">
+                                Tất cả +
+                            </a>
+                            <a href="javascript:void(0)" class="item-cate" data-id="1">
+                                Bàn phím
+                            </a>
+                            <a href="javascript:void(0)" class="item-cate" data-id="2">
+                                Phụ kiện
+                            </a>
+                        </div>
+                        <div class="product-list d-flex flex-wrap" id="js-holder-list-coming">
+                            <div class="product-item d-flex">
+                                <a href="" class="product-image">
+                                    <img src="./assets/images/image-sp.png" alt="">
+                                    <span class="soluongnhom">5 nhóm duy nhất</span>
+                                </a>
+                                <div class="product-info">
+                                    <a href="" class="product-name line-clamp-2">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</a>
+                                    <div class="box-price d-flex align-items">
+                                        <div class="retail_price">
+                                            199.000đ
+                                        </div>
+                                        <span class="red">Khi mua nhóm 5 người</span>
+                                    </div>
+
+                                    <div class="price-banle">Giá bán lẻ: 320.000đ</div>
+                                    <div class="box-time d-flex align-items">
+                                        <i class="icon_2023 time"></i>
+                                        <div class="product-time-holder js-deal-time" data-time="">
+                                            <b>20</b>
+                                            <b>11</b>
+                                            <b>30</b>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="product-item d-flex">
+                                <a href="" class="product-image">
+                                    <img src="./assets/images/image-sp.png" alt="">
+                                    <span class="soluongnhom">5 nhóm duy nhất</span>
+                                </a>
+                                <div class="product-info">
+                                    <a href="" class="product-name line-clamp-2">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</a>
+                                    <div class="box-price d-flex align-items">
+                                        <div class="retail_price">
+                                            199.000đ
+                                        </div>
+                                        <span class="red">Khi mua nhóm 5 người</span>
+                                    </div>
+
+                                    <div class="price-banle">Giá bán lẻ: 320.000đ</div>
+                                    <div class="box-time d-flex align-items">
+                                        <i class="icon_2023 time"></i>
+                                        <div class="product-time-holder js-deal-time" data-time="">
+                                            <b>20</b>
+                                            <b>11</b>
+                                            <b>30</b>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="box-successful-purchase">
+                    <div class="background-white">
+                        <div class="title">Mua hàng thành công</div>
+                        <div class="content">
+                            <div class="item-success d-flex">
+                                <div class="avatar">H</div>
+                                <div class="info">
+                                    <b>Nhóm Huraxxx</b>
+                                    <div class="name-pro">Chuột gaming Logitech G102 Gen2 Lightsync</div>
+                                    <div class="d-flex align-items">
+                                        <b style="color: #F32A1D;font-weight: 700;">199.000đ</b>
+                                        <del style="color: #A7A7A7;margin-left: 7px;">320.000đ</del>
+                                    </div>
+                                    <div class="time">Hôm nay, 01 : 20 : 41</div>
+                                </div>
+                            </div>
+                            <div class="item-success d-flex">
+                                <div class="avatar">H</div>
+                                <div class="info">
+                                    <b>Nhóm Huraxxx</b>
+                                    <div class="name-pro">Chuột gaming Logitech G102 Gen2 Lightsync</div>
+                                    <div class="d-flex align-items">
+                                        <b style="color: #F32A1D;font-weight: 700;">199.000đ</b>
+                                        <del style="color: #A7A7A7;margin-left: 7px;">320.000đ</del>
+                                    </div>
+                                    <div class="time">Hôm nay, 01 : 20 : 41</div>
+                                </div>
+                            </div>
+                            <div class="item-success d-flex">
+                                <div class="avatar">H</div>
+                                <div class="info">
+                                    <b>Nhóm Huraxxx</b>
+                                    <div class="name-pro">Chuột gaming Logitech G102 Gen2 Lightsync</div>
+                                    <div class="d-flex align-items">
+                                        <b style="color: #F32A1D;font-weight: 700;">199.000đ</b>
+                                        <del style="color: #A7A7A7;margin-left: 7px;">320.000đ</del>
+                                    </div>
+                                    <div class="time">Hôm nay, 01 : 20 : 41</div>
+                                </div>
+                            </div>
+                            <div class="item-success d-flex">
+                                <div class="avatar">H</div>
+                                <div class="info">
+                                    <b>Nhóm Huraxxx</b>
+                                    <div class="name-pro">Chuột gaming Logitech G102 Gen2 Lightsync</div>
+                                    <div class="d-flex align-items">
+                                        <b style="color: #F32A1D;font-weight: 700;">199.000đ</b>
+                                        <del style="color: #A7A7A7;margin-left: 7px;">320.000đ</del>
+                                    </div>
+                                    <div class="time">Hôm nay, 01 : 20 : 41</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="box-thele">
+                    <div class="title">Thể lệ chương trình</div>
+                    <div class="content">
+                        <div class="item d-flex">
+                            <div class="number">01.</div>
+                            <div class="txt">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%.</div>
+                        </div>
+                        <div class="item d-flex">
+                            <div class="number">02.</div>
+                            <div class="txt">Đăng nhập bằng gmail, facebook để tạo nhóm và tham gia nhóm.</div>
+                        </div>
+                        <div class="item d-flex">
+                            <div class="number">03.</div>
+                            <div class="txt">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</div>
+                        </div>
+                        <div class="item d-flex">
+                            <div class="number">04.</div>
+                            <div class="txt">
+                                <p>Điều kiện để nhóm được mua hàng với giá ưu đãi:</p>
+                                <ul>
+                                    <li>Đủ thành viên tham gia theo yêu cầu</li>
+                                    <li>Thanh toán trong thời gian quy định</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="item d-flex">
+                            <div class="number">05.</div>
+                            <div class="txt">
+                                <p>Trường hợp nhóm bị hủy quyền mua hàng khi:</p>
+                                <ul>
+                                    <li>Không đủ thành viên tham gia trong thời gian quy định</li>
+                                    <li>Không thanh toán trong thời gian quy định</li>
+                                    <li>Hết số lượng sản phẩm ưu đãi”</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="box-questions background-white">
+                    <h2 class="title">
+                        Câu hỏi thường gặp
+                    </h2>
+                    <div class="content d-flex flex-wrap" id="accordion">
+                        <div class="item">
+                            <div class="card">
+                                <a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-1"
+                                    aria-expanded="false">
+                                    <div class="card-header d-flex align-items space-between">
+                                        <div class="card-left d-flex align-items">
+                                            <span class="number">01.</span>
+                                            <span>Đấu giá trực tuyến có phức tạp không ?</span>
+                                        </div>
+                                        <i class="fa"></i>
+                                    </div>
+                                </a>
+                                <div id="question-1" class="collapse" data-parent="#accordion">
+                                    <div class="card-body">
+                                        Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="card">
+                                <a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-2"
+                                    aria-expanded="false">
+                                    <div class="card-header d-flex align-items space-between">
+                                        <div class="card-left d-flex align-items">
+                                            <span class="number">01.</span>
+                                            <span>Đấu giá trực tuyến có phức tạp không ?</span>
+                                        </div>
+                                        <i class="fa"></i>
+                                    </div>
+                                </a>
+                                <div id="question-2" class="collapse" data-parent="#accordion">
+                                    <div class="card-body">
+                                        Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="card">
+                                <a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-3"
+                                    aria-expanded="false">
+                                    <div class="card-header d-flex align-items space-between">
+                                        <div class="card-left d-flex align-items">
+                                            <span class="number">01.</span>
+                                            <span>Đấu giá trực tuyến có phức tạp không ?</span>
+                                        </div>
+                                        <i class="fa"></i>
+                                    </div>
+                                </a>
+                                <div id="question-3" class="collapse" data-parent="#accordion">
+                                    <div class="card-body">
+                                        Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="card">
+                                <a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-4"
+                                    aria-expanded="false">
+                                    <div class="card-header d-flex align-items space-between">
+                                        <div class="card-left d-flex align-items">
+                                            <span class="number">01.</span>
+                                            <span>Đấu giá trực tuyến có phức tạp không ?</span>
+                                        </div>
+                                        <i class="fa"></i>
+                                    </div>
+                                </a>
+                                <div id="question-4" class="collapse" data-parent="#accordion">
+                                    <div class="card-body">
+                                        Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="card">
+                                <a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-5"
+                                    aria-expanded="false">
+                                    <div class="card-header d-flex align-items space-between">
+                                        <div class="card-left d-flex align-items">
+                                            <span class="number">01.</span>
+                                            <span>Đấu giá trực tuyến có phức tạp không ?</span>
+                                        </div>
+                                        <i class="fa"></i>
+                                    </div>
+                                </a>
+                                <div id="question-5" class="collapse" data-parent="#accordion">
+                                    <div class="card-body">
+                                        Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="card">
+                                <a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-6"
+                                    aria-expanded="false">
+                                    <div class="card-header d-flex align-items space-between">
+                                        <div class="card-left d-flex align-items">
+                                            <span class="number">01.</span>
+                                            <span>Đấu giá trực tuyến có phức tạp không ?</span>
+                                        </div>
+                                        <i class="fa"></i>
+                                    </div>
+                                </a>
+                                <div id="question-6" class="collapse" data-parent="#accordion">
+                                    <div class="card-body">
+                                        Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <div class="container">
+                <div class="footer-main-content">
+                    <div class="item-footer">
+                        <p>
+                            <b>Showrrom Open:</b>
+                            <span>8:30 - 20:00</span>
+                        </p>
+                        <p>
+                            <b>Tiếp nhận bảo hành:</b>
+                            <span>Thứ 3 đến Thứ 7</span>
+                        </p>
+                        <p>
+                            <b>Địa chỉ:</b>
+                            <span>266/32 Đường Tô Hiến Thành,Phường 15, Quận 10, TP. HCM( Có thể đậu ôtô)</span>
+
+                        </p>
+                    </div>
+                    <div class="item-footer">
+                        <b>Kết nối với chúng tôi</b>
+                        <div class="d-flex align-items">
+                            <div class="box-social d-flex align-items">
+                                <a href="" class="icon_social youtobe"></a>
+                                <a href="" class="icon_social tiktok"></a>
+                                <a href="" class="icon_social facebook"></a>
+                                <a href="" class="icon_social zalo"></a>
+                                <a href="" class="icon_social map"></a>
+                            </div>
+                            <a href="" target="_blank">
+                                <img src="./assets/images/btc.png" alt="">
+                            </a>
+                        </div>
+                        <a href="" target="_blank">
+                            <img src="./assets/images/dmca.png" alt="">
+                        </a>
+                    </div>
+                    <div class="item-footer">
+                        <p>
+                            <span>HOTLINE:</span><a href="tel:0787955888 ">0787955888</a>
+                        </p>
+                        <p>
+                            <span>KỸ THUẬT:</span><a href="tel:0932772240 ">0932772240</a>
+                        </p>
+                        <a href="">
+                            <img src="./assets/images/icon-pay.png" alt="">
+                        </a>
+                    </div>
+
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <div class="container">
+                    <div class="footer-content-bottom">
+                        <a href="/" class="logo">
+                            <img src="./assets/images/logo.png" alt="">
+                        </a>
+                        <div class="content-right">
+                            <p>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</p>
+                            <p>Giấy phép kinh doanh cấp ngày 26 tháng 10 2021</p>
+                            <p>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</p>
+                            <p>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</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box-login">
+            <div class="background-group-form">
+                <a href="javascript:void(0)" class="btn-close">
+                    <i class="fa fa-times"></i>
+                </a>
+                <div class="content">
+                    <h2 class="title">Vui lòng đăng nhập tài khoản của bạn để tham gia chương trình</h2>
+                    <a href="javascript:void(0)" class="btn-login facebook">
+                        <span class="icon">
+                            <i class="fa fa-facebook-f"></i>
+                        </span>
+                        <span class="txt">Đăng nhập bằng Facebook</span>
+                    </a>
+                    <a href="javascript:void(0)" class="btn-login google">
+                        <span class="icon">
+                            <i class="fa fa-google"></i>
+                        </span>
+                        <span class="txt">Đăng nhập bằng Google</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="global-popup" id="js-global-popup">
+            <div class="background-group-form" id="js-content-popup">
+
+            </div>
+        </div>
+    </div>
+
+    <script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <script src="./dist/data.js"></script>
+    <script src="./dist/main.js"></script>
+</body>
+
+</html>

index.html

@@ -1021,11 +1021,10 @@
         </div>
     </div>
 
-
+    <script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <script src="./dist/data.js"></script>
+    <script src="./dist/main.js"></script>
 </body>
-<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-<script src="./dist/data.js"></script>
-<script src="./dist/main.js"></script>
 
 </html>

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
+    }
+  }
+}

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"
+  }
+}

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 = `
     <a href="javascript:void(0)" class="btn-close"
         onclick="$('.global-popup').removeClass('active');closeBackground()">
@@ -379,13 +376,12 @@ const ShareGroupTemplate = `
             </a>
         </div>
 
-        <a href="javascript:void(0)" class="btn-add-member" onclick="showContentPopup('waiting_join')">
+        <a href="javascript:void(0)" class="btn-add-member" onclick="ShowPopupGlobal('waiting_join')">
             Gửi email thông báo
         </a>
     </div>
 `;
 
-
 const JoinProductTemplate = `
 <a href="javascript:void(0)" class="btn-close" onclick="closeBackground()">
             <i class="fa fa-times"></i>
@@ -509,4 +505,20 @@ const InfoPayProductTemplate = `
             ok
         </a>
     </div>
-`;
+`;
+
+
+const OutTimeJoinTpl = `
+    <a href="javascript:void(0)" class="btn-close"
+        onclick="$('.global-popup').removeClass('active');closeBackground()">
+        <i class="fa fa-times"></i>
+    </a>
+    <div class="content">
+       <h2 class="title">Thời gian tham gia nhóm Hurasoft săn sale Noel đã hết hạn!</h2>
+       <div class="note">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</div>
+    </div>
+`;
+
+function XayHtmlPopup() {
+
+}

src/main.ts

@@ -13,7 +13,6 @@ async function goi_sp_user_tu_api(): Promise<UserInfo[]> {
 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 += `
                         <a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
@@ -78,9 +75,9 @@ function xayhtml(product: ProductInfo): string {
                         </a>
                     `;
 
-                    addMember = isLastMember ? `<a href="javascript:void(0)" class="item add">+</a>` : '';
+                    addMember = isLastMember ? '' : '<a href="javascript:void(0)" class="item add">+</a>';
 
-                    noteMember = isLastMember ? `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên` : '';
+                    noteMember = isLastMember ? '' : `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> 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) {
+                var more_qnt_member = Item.quantity_member - index - 1;
-                    HtmlListMember += `
+                const isLastMember = index > Item.quantity_member;
-                            <a href="javascript:void(0)" class="item">
+
-                                ${formatName(user.name_member)}
+                HtmlListMember += `
-                            </a>
+                        <a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
-                        `;
+                            ${formatName(user.name_member)}
-                    addMember = ``;
+                        </a>
-                    noteMember = ``;
+                    `;
-                } else {
+
-                    var more_qnt_member = Item.quantity_member - index - 1;
+                addMember = isLastMember ? '' : '<a href="javascript:void(0)" class="item add">+</a>';
-                    HtmlListMember += `
+
-                            <a href="javascript:void(0)" class="item">
+                noteMember = isLastMember ? '' : `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên`;
-                                ${formatName(user.name_member)}
-                            </a>
-                        `;
-                    addMember = `
-                            <a href="javascript:void(0)" class="item add">
-                                +
-                            </a>
-                        `;
-                    noteMember = `
-                            Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên
-                        `;
-                }
             })
 
             HtmlProductItem += `
@@ -295,7 +284,7 @@ function xayhtmlProductGroup(product: UserInfo) {
                                 <div class="product-time-holder js-deal-time-${Item.product_id}" data-time="${Item.to_time}">
                                 </div>
                             </div>
-                            <a href="javascript:void(0)" class="add-member">
+                            <a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
                                 <i class="fa fa-plus"></i>
                                 Mời thêm bạn
                             </a>
@@ -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 <a> (li.item)
+    // Lấy phần tử cha của <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();
+
 
 
 

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}