23:10 27/12/2023

assets/css/hoadaoroi.css

@@ -0,0 +1,22 @@
+#snowflakeContainer {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+.snowflake {
+  padding-left: 15px;
+  font-size: 14px;
+  line-height: 24px;
+  position: fixed;
+  color: #ebebeb;
+  user-select: none;
+  z-index: 1000;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+.snowflake:hover {
+  cursor: default;
+}

dist/data.js

@@ -0,0 +1,431 @@
+"use strict";
+// 
+const List_product = [
+    {
+        productId: 1,
+        product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/589-1.jpg',
+        price: 1250000,
+        retail_price: 500000,
+        quantity: 20,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955500000,
+        status: 'started',
+        category_info: [
+            {
+                id: 1,
+                name_category: 'Chuột'
+            },
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: [
+            {
+                group_id: 1,
+                name_group: 'Hura săn sale',
+                product_id: 1,
+                productUrl: '/',
+                product_image: 'https://mygear.vn/media/product/589-1.jpg',
+                product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+                price: 3190000,
+                quantity: 20,
+                sale_quantity: 10,
+                quantity_member: 5,
+                retail_price: 2190000,
+                to_time: 1703955600000,
+                list_member: [
+                    {
+                        id_member: 1,
+                        name_member: 'Hồng Vũ',
+                        email_member: 'hongvt@hurasoft.com'
+                    }, {
+                        id_member: 2,
+                        name_member: 'Ánh trần',
+                        email_member: 'anhtt@hurasoft.com'
+                    }, {
+                        id_member: 3,
+                        name_member: 'Đức Quân',
+                        email_member: 'ducnq@hurasoft.com'
+                    },
+                ]
+            }
+        ]
+    }, {
+        productId: 2,
+        product_name: 'Chuột không dây logitech M590 Wireless Bluetooth',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/1634-chu---t-kh--ng-d--y-logitech-m590-wireless-bluetooth.jpg',
+        price: 570000,
+        retail_price: 300000,
+        quantity: 30,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'started',
+        category_info: [
+            {
+                id: 1,
+                name_category: 'Chuột'
+            },
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 3,
+        product_name: 'Bàn phím cơ VGN VXE75 Trans Purple RGB (Bluetooth, 2.4GHz Wireless, Type-A)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/4793-vgn-vxe75-trans-purple.jpg',
+        price: 3190000,
+        retail_price: 2190000,
+        quantity: 30,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703696400000,
+        to_time: 1703955600000,
+        status: 'coming',
+        category_info: [
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 4,
+        product_name: 'Màn hình Gaming Samsung Odyssey G5 LS27CG510EEXXV 27" QHD VA 165Hz (HDMI,Displayport)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/3761-samsung-odyssey-g5-ls27cg510eexxv.jpg',
+        price: 4700000,
+        retail_price: 4500000,
+        quantity: 30,
+        sale_quantity: 30,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'out_stock',
+        category_info: [
+            {
+                id: 5,
+                name_category: 'Màn hình'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 5,
+        product_name: 'Kit bàn phím cơ MonsGeek M1 QMK (Full Nhôm – Mạch xuôi – QMK / VIA – PCB Stab) - (Silver)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/3613-monsgeek-m1-qmk-6.jpg',
+        price: 2290000,
+        retail_price: 2000000,
+        quantity: 20,
+        sale_quantity: 20,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'out_stock',
+        category_info: [
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: [],
+    }
+];
+const User = [
+    {
+        leaderId: 1,
+        leaderName: 'Hiếu Nguyễn',
+        leaderEmail: 'hieunguyen@hurasoft.com',
+        list_group: [
+            {
+                group_id: 1,
+                name_group: 'Hura săn sale',
+                product_id: 1,
+                productUrl: '/',
+                product_image: 'https://mygear.vn/media/product/589-1.jpg',
+                product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+                price: 3190000,
+                retail_price: 2190000,
+                quantity: 20,
+                sale_quantity: 10,
+                quantity_member: 5,
+                to_time: 1703955600000,
+                list_member: [
+                    {
+                        id_member: 1,
+                        name_member: 'Hồng Vũ',
+                        email_member: 'hongvt@hurasoft.com'
+                    }, {
+                        id_member: 2,
+                        name_member: 'Ánh trần',
+                        email_member: 'anhtt@hurasoft.com'
+                    }, {
+                        id_member: 3,
+                        name_member: 'Đức Quân',
+                        email_member: 'ducnq@hurasoft.com'
+                    }
+                ]
+            }
+        ]
+    }
+];
+function formatPrice(price) {
+    var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    var len = b.length;
+    b = b.substring(0, len - 3);
+    return b;
+}
+function countDown(iid, endTime) {
+    const updateCountdown = () => {
+        const now = Date.now();
+        const distance = endTime - now;
+        if (distance > 0) {
+            const [days, hours, minutes, seconds] = getTimeComponents(distance);
+            displayCountdown(iid, days, hours, minutes, seconds);
+        }
+        else {
+            clearInterval(timer);
+        }
+    };
+    // Initial update to avoid delay
+    updateCountdown();
+    const timer = setInterval(updateCountdown, 1000);
+}
+function getTimeComponents(distance) {
+    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+    return [days, hours, minutes, seconds];
+}
+function displayCountdown(iid, days, hours, minutes, seconds) {
+    const element = document.querySelector(`.${iid}`);
+    if (element) {
+        if (days > 0) {
+            element.innerHTML = `
+            <b>${formatTimeComponent(days)}</b>
+            <b>${formatTimeComponent(hours)}</b>
+            <b>${formatTimeComponent(minutes)}</b>
+            <b>${formatTimeComponent(seconds)}</b>`;
+        }
+        else {
+            element.innerHTML = `
+                <b>${formatTimeComponent(hours)}</b>
+                <b>${formatTimeComponent(minutes)}</b>
+                <b>${formatTimeComponent(seconds)}</b>`;
+        }
+    }
+}
+function formatTimeComponent(component) {
+    return component <= 9 ? '0' + component : component.toString();
+}
+function formatTime(timestamp) {
+    const date = new Date(timestamp);
+    const formattedTime = date.toLocaleString('en-US', { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' });
+    return formattedTime;
+}
+function formatName(name) {
+    // Extract the first letter and capitalize it
+    const formattedName = name.charAt(0).toUpperCase();
+    return formattedName;
+}
+const AddGroupTemplate = `
+    <a href="javascript:void(0)" class="btn-close"
+        onclick="$('.global-popup').removeClass('active');closeBackground()">
+        <i class="fa fa-times"></i>
+    </a>
+    <div class="content" id="js-load-add-group">
+        <h2 class="title">Đặt tên nhóm của bạn</h2>
+        <div class="note">
+            Chào Bạn, Hiện tại còn 6 sản phẩm Chuột máy tính. Nhanh chóng tạo nhóm ngay để được mua sản phẩm với
+            giá hấp dẫn.
+        </div>
+        <input type="text" class="name-group" placeholder="Nhập tên nhóm" />
+        <i class="vd">Vd: Hurasort săn sale Noel</i>
+        <a href="javascript:void(0)" class="btn-add-group" onclick="showContentPopup('share_group')">
+            <i class="fa fa-angle-double-right"></i>
+            <span>Tạo nhóm</span>
+            <i class="fa fa-angle-double-left"></i>
+        </a>
+    </div>
+`;
+const ShareGroupTemplate = `
+    <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">Chúc mừng bạn!</h2>
+        <div class="note">
+            Nhóm được tạo thành công, vui lòng check mail để xem chi tiết thông tin nhóm của bạn!
+        </div>
+        <div class="box-share-link d-flex align-items">
+            <div class="info-link">
+                <span>Link nhóm:</span>
+                <a href="" class="blue" id="linkshare">https://adman.vn/group-order?id=2431177</a>
+            </div>
+            <a href="javascript:void(0)" onclick="copyLink()" class="btn-copy">
+                <i class="fa fa-copy"></i>
+                Copy
+            </a>
+        </div>
+        <div class="list-btn-share d-flex align-items">
+            <b>Share:</b>
+            <div class="d-flex align-items">
+                <a href="">
+                    <img src="./assets/images/icon-facebook.png" alt="icon facebook">
+                </a>
+                <a href="">
+                    <img src="./assets/images/icon-zalo.png" alt="icon zalo">
+                </a>
+                <a href="">
+                    <img src="./assets/images/icon-email.png" alt="icon email">
+                </a>
+            </div>
+        </div>
+        <div class="form-add-email">
+            <p>Hoặc bạn có thể mời bạn bè của bạn bằng cách nhập email</p>
+            <div class="content-email" id="list-email-share">
+                <input type="text" id="email1" placeholder="Email 1">
+                <input type="text" id="email2" placeholder="Email 2">
+            </div>
+            <a href="javascript:void(0)" class="add-email" onclick="addEmail()">
+                + Thêm email
+            </a>
+        </div>
+
+        <a href="javascript:void(0)" class="btn-add-member" onclick="showContentPopup('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>
+        </a>
+        <div class="content">
+            <div class="avatar-leader">v</div>
+            <b class="title-member text-center">Hồng vừa mời bạn tham gia nhóm Hura săn sale Noel</b>
+            <div class="box-info-product">
+                <div class="product-item d-flex">
+                    <a href="" class="product-image">
+                        <img src="./assets/images/image-sp.png" alt="">
+                        <div class="box-qnt d-flex align-items space-center">
+                            <span class="sl">Sl: 30</span>
+                            <span class="conlai">Còn lại: 10</span>
+                        </div>
+                    </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="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-member">
+                                Cần thêm <b style="color: var(--color-global);">02</b> thành viên
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="note-member text-center">
+                Bạn có 10 phút để tham gia nhóm, mau chóng ấn chọn
+                Tham gia nhóm để có cơ hội mua hàng với giá siêu ưu đãi nhé!
+            </div>
+            <a href="javascript:void(0)" class="btn-member-add-group">
+                <b>Tham gia nhóm</b>
+                <div class="product-time-holder d-flex" id="js-time-join">
+                    <b>20</b>
+                    <b>11</b>
+                    <b>30</b>
+                </div>
+            </a>
+    </div>
+`;
+const SuccessMemberTemplate = `
+    <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">Chúc mừng bạn</h2>
+        <div class="note">
+            Đã tham gia nhóm thành công
+        </div>
+        <div class="txt">
+            Nhóm Hurasoft săn sale Noel đã đủ số lượng thành viên thành công mở khóa ưu đãi sản phẩm!
+        </div>
+        <b class="name-leader">
+            Người thanh toán: Hồng
+        </b>
+        <p>Thông tin thanh toán sẽ được gửi qua email của bạn.</p>
+        <a href="javascript:void(0)" class="btn-blue">
+            ok
+        </a>
+    </div>
+`;
+const InfoPayProductTemplate = `
+    <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">Chúc mừng nhóm Hurasoft săn sale</h2>
+        <div class="note">Nhóm đã đủ số lượng thành viên để tham gia mua sản phẩm với giá ưu đãi</div>
+        <div class="info-pay">
+            <div class="title">Thông tin thanh toán</div>
+            <div class="cnt d-flex align-items">
+                <div class="left">
+                    <img src="./assets/images/qr-pay.png" alt="pay">
+                </div>
+                <div class="right">
+                    <span>NGUYỄN THỊ DUYÊN:</span>
+                    <span>Ngân hàng: ACB</span>
+                    <span>Số tài khoản: 7960888888</span>
+                    <span>Nội dung thanh toán: Tên nhóm của bạn + SĐT</span>
+                </div>
+            </div>
+        </div>
+        <div class="box-timeout-pay">
+            <div class="d-flex flex-wrap space-center">
+                <span>Bạn vui lòng thanh toán trước</span>
+                <div class="product-time-holder d-flex" id="js-time-join">
+                    <b>20</b>
+                    <b>11</b>
+                    <b>30</b>
+                </div>
+                <div style="width: 100%;text-align: center;">Để được hưởng ưu đãi nhóm</div>
+            </div>
+        </div>
+        <div class="box-cskh">
+            Thanh toán xong hãy chụp lại giao dịch. CSKH <b>19002223</b> sẽ liên hệ xác nhận lại với bạn
+        </div>
+        <a href="javascript:void(0)" class="btn-blue">
+            ok
+        </a>
+    </div>
+`;

dist/hoadaoroi.js

@@ -0,0 +1,109 @@
+
+var pictureSrc = "./assets/images/icon_hoadao.png"; //Link ảnh hoa muốn hiển thị trên web
+var pictureWidth = 15; //Chiều rộng của hoa mai or đào
+var pictureHeight = 15; //Chiều cao của hoa mai or đào
+var numFlakes = 20; //Số bông hoa xuất hiện cùng một lúc trên trang web
+var downSpeed = 0.01; //Tốc độ rơi của hoa
+var lrFlakes = 15; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại
+
+
+if (typeof (numFlakes) != 'number' || Math.round(numFlakes) != numFlakes || numFlakes < 1) {
+    numFlakes = 10;
+}
+
+//draw the snowflakes
+for (var x = 0; x < numFlakes; x++) {
+    if (document.layers) { //releave NS4 bug
+        document.write('<layer id="snFlkDiv' + x + '"><imgsrc="' + pictureSrc + '" height="' + pictureHeight + '"width="' + pictureWidth + '" alt="*" border="0"></layer>');
+    } else {
+        document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv' + x + '"><img src="' + pictureSrc + '"height="' + pictureHeight + '" width="' + pictureWidth + '" alt="*"border="0"></div>');
+    }
+}
+
+//calculate initial positions (in portions of browser window size)
+var xcoords = new Array(),
+    ycoords = new Array(),
+    snFlkTemp;
+for (var x = 0; x < numFlakes; x++) {
+    xcoords[x] = (x + 1) / (numFlakes + 1);
+    do {
+        snFlkTemp = Math.round((numFlakes - 1) * Math.random());
+    } while (typeof (ycoords[snFlkTemp]) == 'number');
+    ycoords[snFlkTemp] = x / numFlakes;
+}
+
+//now animate
+function flakeFall() {
+    if (!getRefToDivNest('snFlkDiv0')) {
+        return;
+    }
+    var scrWidth = 0,
+        scrHeight = 0,
+        scrollHeight = 0,
+        scrollWidth = 0;
+    //find screen settings for all variations. doing this every time allows for resizing and scrolling
+    if (typeof (window.innerWidth) == 'number') {
+        scrWidth = window.innerWidth;
+        scrHeight = window.innerHeight;
+    } else {
+        if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
+            scrWidth = document.documentElement.clientWidth;
+            scrHeight = document.documentElement.clientHeight;
+        } else {
+            if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
+                scrWidth = document.body.clientWidth;
+                scrHeight = document.body.clientHeight;
+            }
+        }
+    }
+    if (typeof (window.pageYOffset) == 'number') {
+        scrollHeight = pageYOffset;
+        scrollWidth = pageXOffset;
+    } else {
+        if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
+            scrollHeight = document.body.scrollTop;
+            scrollWidth = document.body.scrollLeft;
+        } else {
+            if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
+                scrollHeight = document.documentElement.scrollTop;
+                scrollWidth = document.documentElement.scrollLeft;
+            }
+        }
+    }
+    //move the snowflakes to their new position
+    for (var x = 0; x < numFlakes; x++) {
+        if (ycoords[x] * scrHeight > scrHeight - pictureHeight) {
+            ycoords[x] = 0;
+        }
+        var divRef = getRefToDivNest('snFlkDiv' + x);
+        if (!divRef) {
+            return;
+        }
+        if (divRef.style) {
+            divRef = divRef.style;
+        }
+        var oPix = document.childNodes ? 'px' : 0;
+        divRef.top = (Math.round(ycoords[x] * scrHeight) + scrollHeight) + oPix;
+        divRef.left = (Math.round(((xcoords[x] * scrWidth) - (pictureWidth / 2)) + ((scrWidth / ((numFlakes + 1) * 4)) * (Math.sin(lrFlakes * ycoords[x]) - Math.sin(3 * lrFlakes * ycoords[x])))) + scrollWidth) + oPix;
+        ycoords[x] += downSpeed;
+    }
+}
+
+//DHTML handlers
+function getRefToDivNest(divName) {
+    if (document.layers) {
+        return document.layers[divName];
+    } //NS4
+    if (document[divName]) {
+        return document[divName];
+    } //NS4 also
+    if (document.getElementById) {
+        return document.getElementById(divName);
+    } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
+    if (document.all) {
+        return document.all[divName];
+    } //Proprietary DOM - IE4
+    return false;
+}
+
+window.setInterval('flakeFall();', 100);

dist/main.js

@@ -0,0 +1,378 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+function goi_sp_tu_api() {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            return resolve(List_product);
+        });
+    });
+}
+function goi_sp_user_tu_api() {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            return resolve(User);
+        });
+    });
+}
+function hienthi_nhomsp() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const lay_sp_user_tu_api = yield goi_sp_user_tu_api();
+        console.log(lay_sp_user_tu_api);
+        DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group');
+    });
+}
+function hienthi_sp() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const lay_sp_tu_api = yield goi_sp_tu_api();
+        // code hien thi danh sach dang dien ra
+        console.log(lay_sp_tu_api);
+        showListProductHome(lay_sp_tu_api, 'out_stock', 'js-holder-list-out-stock');
+        showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started');
+        showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming');
+    });
+}
+function showListProductHome(lay_sp_tu_api, status, holderId) {
+    const html = [];
+    const holder = document.getElementById(holderId);
+    lay_sp_tu_api
+        .filter((product) => product.status == status)
+        .forEach(function (product, keyIndex) {
+        html.push(xayhtml(product));
+        if (status != 'out_stock' && product.to_time > product.from_time) {
+            const countdownTime = (status == 'started') ? product.to_time : product.from_time;
+            countDown(`js-deal-time-${product.productId}`, countdownTime);
+        }
+    });
+    if (holder) {
+        holder.innerHTML = html.join('');
+    }
+}
+function xayhtml(product) {
+    const quantity_sold = product.quantity - product.sale_quantity;
+    const line_sold = Math.ceil((quantity_sold / product.quantity) * 100);
+    const HtmlSl_nhom = product.quantity > product.quantity_member
+        ? `<span class="soluongnhom">${product.quantity / product.quantity_member} nhóm duy nhất</span>`
+        : '';
+    let HtmlProductItem = '';
+    if (product.status === 'started' && product.price > product.sale_quantity) {
+        let htmlCheckGroup = '';
+        let HtmlListMember = '';
+        let htmlBtnProduct = '';
+        let addMember = '';
+        let noteMember = '';
+        if (product.list_group.length > 0) {
+            product.list_group.forEach((item) => {
+                item.list_member.forEach((user, index) => {
+                    var more_qnt_member = product.quantity_member - index - 1;
+                    const isLastMember = index > product.quantity_member;
+                    console.log(isLastMember);
+                    HtmlListMember += `
+                        <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>` : '';
+                    noteMember = isLastMember ? `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên` : '';
+                });
+            });
+            htmlCheckGroup = `
+                <div class="box-price d-flex align-items">
+                    <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                    <del class="price-old">${formatPrice(product.price)}đ</del>
+                </div>
+                <div class="list-memeber d-flex align-items">
+                    <div class="box-memeber d-flex">${HtmlListMember} ${addMember}</div>
+                    <div class="note">${noteMember}</div>
+                </div>
+            `;
+            htmlBtnProduct = `
+                <a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
+                    <i class="fa fa-plus"></i>
+                    Mời thêm bạn
+                </a>
+            `;
+        }
+        else {
+            htmlCheckGroup = `
+                <div class="box-price d-flex align-items">
+                    <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                    <span class="red">Khi mua nhóm ${product.quantity_member} người</span>
+                </div>
+                <div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
+            `;
+            htmlBtnProduct = `
+                <a href="javascript:void(0)" class="add-group" onclick="ShowPopupGlobal('AddGroup')">
+                    <i class="fa fa-angle-double-right"></i>
+                    <span>Tạo nhóm ngay</span>
+                    <i class="fa fa-angle-double-left"></i>
+                </a>
+            `;
+        }
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    ${htmlCheckGroup}
+                    <div class="box-sold">
+                        <i class="icon_2023 hot"></i>
+                        <div class="line-deal" style="width: ${line_sold}%;"></div>
+                        <span class="quantity-sold">${quantity_sold} đã 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-${product.productId}" data-time="${product.to_time}"></div>
+                        </div>
+                        ${htmlBtnProduct}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    else if (product.status === 'coming') {
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    <div class="box-price d-flex align-items">
+                        <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                        <span class="red">Khi mua nhóm ${product.quantity_member} người</span>
+                    </div>
+                    <div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
+                    <div class="box-time d-flex align-items">
+                        <i class="icon_2023 time"></i>
+                        <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    else if (product.status === 'out_stock') {
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image sold">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                    <span class="icon-sold"></span>
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    <div class="retail_price">${formatPrice(product.retail_price)}</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: 100%;"></div>
+                        <span class="quantity-sold">${product.quantity} đã 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">
+                            <b>00</b><b>00</b><b>00</b>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    else {
+        HtmlProductItem = `<div class="d-flex align-items space-center notproduct">Sản phẩm đang được cập nhật..!</div>`;
+    }
+    return HtmlProductItem;
+}
+function DisplayListProductGroup(ProductUser, holderId) {
+    const html = [];
+    const holder = document.getElementById(holderId);
+    ProductUser.forEach(function (product, keyIndex) {
+        html.push(xayhtmlProductGroup(product));
+    });
+    if (holder) {
+        holder.innerHTML = html.join('');
+    }
+}
+function xayhtmlProductGroup(product) {
+    var HtmlProductItem = '';
+    var HtmlListMember = '';
+    var addMember = '';
+    var noteMember = '';
+    if (product.list_group.length > 0) {
+        product.list_group.forEach((Item) => {
+            const quantity_sold = Item.quantity - Item.sale_quantity;
+            const line_sold = Math.ceil((Item.quantity - Item.sale_quantity) / Item.quantity * 100);
+            var HtmlSl_nhom = '';
+            if (Item.quantity > Item.quantity_member) {
+                HtmlSl_nhom = `<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) {
+                    HtmlListMember += `
+                            <a href="javascript:void(0)" class="item">
+                                ${formatName(user.name_member)}
+                            </a>
+                        `;
+                    addMember = ``;
+                    noteMember = ``;
+                }
+                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">
+                    <a href="${Item.productUrl}" class="product-image">
+                        <img src="${Item.product_image}" alt="${Item.product_name}">
+                        ${HtmlSl_nhom}
+                    </a>
+                    <div class="product-info">
+                        <a href="${Item.productUrl}" class="product-name line-clamp-2">${Item.product_name}</a>
+                        <div class="box-price d-flex align-items">
+                            <div class="retail_price">
+                                ${formatPrice(Item.retail_price)}đ
+                            </div>
+                            <del class="price-old">${formatPrice(Item.price)}đ</del>
+                        </div>
+
+                        <div class="list-memeber d-flex align-items">
+                            <div class="box-memeber d-flex">
+                                ${HtmlListMember}${addMember}
+                            </div>
+                            <div class="note">
+                                ${noteMember}
+                            </div>
+                        </div>
+
+                        <div class="box-sold">
+                            <i class="icon_2023 hot"></i>
+                            <div class="line-deal" style="width: ${line_sold}%;"></div>
+                            <span class="quantity-sold">${quantity_sold} đã 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-${Item.product_id}" data-time="${Item.to_time}">
+                                </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>${product.leaderEmail} vừa tạo nhóm thành công</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+    }
+    return HtmlProductItem;
+}
+function closeBackground() {
+    var eleBackground = document.getElementById('overlay');
+    eleBackground.classList.remove('active');
+    var eleGlobalPopup = document.getElementById('js-global-popup');
+    eleGlobalPopup.classList.remove('active');
+    document.body.classList.remove('active');
+}
+function copyLink() {
+    // Get the pre element
+    var preElement = document.getElementById("linkshare");
+    // Check if the element exists
+    if (preElement) {
+        // Create a textarea element
+        var textarea = document.createElement("textarea");
+        textarea.value = preElement.textContent || "";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+        alert("Copy link share thành công!");
+    }
+}
+// them o nhap email
+let emailCounter = 3;
+function addEmail() {
+    const contentEmail = document.getElementById('list-email-share');
+    const newEmailInput = document.createElement('input');
+    newEmailInput.type = 'text';
+    newEmailInput.id = 'email' + emailCounter;
+    newEmailInput.placeholder = 'Email ' + emailCounter;
+    contentEmail === null || contentEmail === void 0 ? void 0 : contentEmail.appendChild(newEmailInput);
+    emailCounter++;
+}
+function CountdownJoin() {
+    let countdown = 10 * 60;
+    const countdownElement = document.getElementById('js-time-join');
+    function updateCountdown() {
+        const minutes = Math.floor(countdown / 60);
+        const seconds = countdown % 60;
+        const formattedMinutes = minutes.toString().padStart(2, '0');
+        const formattedSeconds = seconds.toString().padStart(2, '0');
+        const formattedTime = `<b>${formattedMinutes}</b><b>${formattedSeconds}</b>`;
+        if (countdownElement) {
+            countdownElement.innerHTML = formattedTime;
+        }
+    }
+    function decrementCountdown() {
+        if (countdown > 0) {
+            countdown--;
+            updateCountdown();
+        }
+        else {
+            clearInterval(intervalId);
+            closeBackground();
+        }
+    }
+    updateCountdown();
+    const intervalId = setInterval(decrementCountdown, 1000);
+}
+function ShowPopupGlobal(key) {
+    const globalPopup = document.getElementById('js-global-popup');
+    globalPopup === null || globalPopup === void 0 ? void 0 : globalPopup.classList.add('active');
+    const eleBackground = document.getElementById('overlay');
+    eleBackground.classList.add('active');
+    document.body.classList.add('active');
+    const holderPupop = document.getElementById('js-content-popup');
+    if (key == 'AddGroup') {
+        holderPupop.innerHTML = AddGroupTemplate;
+    }
+    else if (key == 'AddMember') {
+        holderPupop.innerHTML = ShareGroupTemplate;
+    }
+}
+//  run function
+hienthi_sp();
+hienthi_nhomsp();
+CountdownJoin();

src/data.ts

@@ -0,0 +1,512 @@
+//---- dinh nghia
+type list_info = {
+    id: number,
+    name_category: string;
+}
+
+type ProductInfo = {
+    productId: number,
+    product_name: string;
+    productUrl: string;
+    image: string;
+    price: number;
+    retail_price: number;
+    quantity: number;
+    sale_quantity: number;
+    quantity_member: number;
+    from_time: number,
+    to_time: number;
+    status: string;
+    category_info: list_info[],
+    list_group: infoGroup[]
+};
+
+type UserInfo = {
+    leaderId: number;
+    leaderName: string;
+    leaderEmail: string;
+    list_group: infoGroup[];
+}
+
+type infoGroup = {
+    name_group: string,
+    group_id: number,
+    product_id: number,
+    productUrl: string,
+    product_image: string,
+    product_name: string,
+    price: number,
+    retail_price: number;
+    quantity: number;
+    sale_quantity: number;
+    quantity_member: number;
+    to_time: number;
+    list_member: infoMember[]
+}
+
+type infoMember = {
+    id_member: number,
+    name_member: string,
+    email_member: string
+}
+
+// 
+
+
+
+const List_product: ProductInfo[] = [
+    {
+        productId: 1,
+        product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/589-1.jpg',
+        price: 1250000,
+        retail_price: 500000,
+        quantity: 20,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955500000,
+        status: 'started',
+        category_info: [
+            {
+                id: 1,
+                name_category: 'Chuột'
+            },
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: [
+            {
+                group_id: 1,
+                name_group: 'Hura săn sale',
+                product_id: 1,
+                productUrl: '/',
+                product_image: 'https://mygear.vn/media/product/589-1.jpg',
+                product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+                price: 3190000,
+                quantity: 20,
+                sale_quantity: 10,
+                quantity_member: 5,
+                retail_price: 2190000,
+                to_time: 1703955600000,
+                list_member: [
+                    {
+                        id_member: 1,
+                        name_member: 'Hồng Vũ',
+                        email_member: 'hongvt@hurasoft.com'
+                    }, {
+                        id_member: 2,
+                        name_member: 'Ánh trần',
+                        email_member: 'anhtt@hurasoft.com'
+                    }, {
+                        id_member: 3,
+                        name_member: 'Đức Quân',
+                        email_member: 'ducnq@hurasoft.com'
+                    },
+                ]
+            }
+        ]
+    }, {
+        productId: 2,
+        product_name: 'Chuột không dây logitech M590 Wireless Bluetooth',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/1634-chu---t-kh--ng-d--y-logitech-m590-wireless-bluetooth.jpg',
+        price: 570000,
+        retail_price: 300000,
+        quantity: 30,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'started',
+        category_info: [
+            {
+                id: 1,
+                name_category: 'Chuột'
+            },
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 3,
+        product_name: 'Bàn phím cơ VGN VXE75 Trans Purple RGB (Bluetooth, 2.4GHz Wireless, Type-A)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/4793-vgn-vxe75-trans-purple.jpg',
+        price: 3190000,
+        retail_price: 2190000,
+        quantity: 30,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703696400000,
+        to_time: 1703955600000,
+        status: 'coming',
+        category_info: [
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 4,
+        product_name: 'Màn hình Gaming Samsung Odyssey G5 LS27CG510EEXXV 27" QHD VA 165Hz (HDMI,Displayport)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/3761-samsung-odyssey-g5-ls27cg510eexxv.jpg',
+        price: 4700000,
+        retail_price: 4500000,
+        quantity: 30,
+        sale_quantity: 30,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'out_stock',
+        category_info: [
+            {
+                id: 5,
+                name_category: 'Màn hình'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 5,
+        product_name: 'Kit bàn phím cơ MonsGeek M1 QMK (Full Nhôm – Mạch xuôi – QMK / VIA – PCB Stab) - (Silver)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/3613-monsgeek-m1-qmk-6.jpg',
+        price: 2290000,
+        retail_price: 2000000,
+        quantity: 20,
+        sale_quantity: 20,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'out_stock',
+        category_info: [
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: [],
+    }
+];
+
+const User: UserInfo[] = [
+    {
+        leaderId: 1,
+        leaderName: 'Hiếu Nguyễn',
+        leaderEmail: 'hieunguyen@hurasoft.com',
+        list_group: [
+            {
+                group_id: 1,
+                name_group: 'Hura săn sale',
+                product_id: 1,
+                productUrl: '/',
+                product_image: 'https://mygear.vn/media/product/589-1.jpg',
+                product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+                price: 3190000,
+                retail_price: 2190000,
+                quantity: 20,
+                sale_quantity: 10,
+                quantity_member: 5,
+                to_time: 1703955600000,
+                list_member: [
+                    {
+                        id_member: 1,
+                        name_member: 'Hồng Vũ',
+                        email_member: 'hongvt@hurasoft.com'
+                    }, {
+                        id_member: 2,
+                        name_member: 'Ánh trần',
+                        email_member: 'anhtt@hurasoft.com'
+                    }, {
+                        id_member: 3,
+                        name_member: 'Đức Quân',
+                        email_member: 'ducnq@hurasoft.com'
+                    }
+                ]
+            }
+        ]
+    }
+]
+
+
+function formatPrice(price: number) {
+    var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    var len = b.length;
+    b = b.substring(0, len - 3);
+    return b;
+}
+
+
+function countDown(iid: string, endTime: number): void {
+
+    const updateCountdown = () => {
+        const now: number = Date.now();
+        const distance: number = endTime - now;
+        if (distance > 0) {
+            const [days, hours, minutes, seconds] = getTimeComponents(distance);
+            displayCountdown(iid, days, hours, minutes, seconds);
+        } else {
+            clearInterval(timer);
+        }
+    };
+
+    // Initial update to avoid delay
+    updateCountdown();
+
+    const timer: NodeJS.Timeout = setInterval(updateCountdown, 1000);
+}
+
+function getTimeComponents(distance: number): [number, number, number, number] {
+
+    const days: number = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds: number = Math.floor((distance % (1000 * 60)) / 1000);
+
+    return [days, hours, minutes, seconds];
+}
+
+function displayCountdown(iid: string, days: number, hours: number, minutes: number, seconds: number): void {
+    const element: HTMLElement | null = document.querySelector(`.${iid}`);
+    if (element) {
+        if (days > 0) {
+            element.innerHTML = `
+            <b>${formatTimeComponent(days)}</b>
+            <b>${formatTimeComponent(hours)}</b>
+            <b>${formatTimeComponent(minutes)}</b>
+            <b>${formatTimeComponent(seconds)}</b>`;
+        } else {
+            element.innerHTML = `
+                <b>${formatTimeComponent(hours)}</b>
+                <b>${formatTimeComponent(minutes)}</b>
+                <b>${formatTimeComponent(seconds)}</b>`;
+        }
+    }
+}
+
+function formatTimeComponent(component: number): string {
+    return component <= 9 ? '0' + component : component.toString();
+}
+
+function formatTime(timestamp: number) {
+    const date = new Date(timestamp);
+    const formattedTime = date.toLocaleString('en-US', { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' });
+    return formattedTime;
+}
+
+
+function formatName(name: string) {
+    // Extract the first letter and capitalize it
+    const formattedName = name.charAt(0).toUpperCase();
+
+    return formattedName;
+}
+
+
+
+
+
+const AddGroupTemplate = `
+    <a href="javascript:void(0)" class="btn-close"
+        onclick="$('.global-popup').removeClass('active');closeBackground()">
+        <i class="fa fa-times"></i>
+    </a>
+    <div class="content" id="js-load-add-group">
+        <h2 class="title">Đặt tên nhóm của bạn</h2>
+        <div class="note">
+            Chào Bạn, Hiện tại còn 6 sản phẩm Chuột máy tính. Nhanh chóng tạo nhóm ngay để được mua sản phẩm với
+            giá hấp dẫn.
+        </div>
+        <input type="text" class="name-group" placeholder="Nhập tên nhóm" />
+        <i class="vd">Vd: Hurasort săn sale Noel</i>
+        <a href="javascript:void(0)" class="btn-add-group" onclick="showContentPopup('share_group')">
+            <i class="fa fa-angle-double-right"></i>
+            <span>Tạo nhóm</span>
+            <i class="fa fa-angle-double-left"></i>
+        </a>
+    </div>
+`;
+
+const ShareGroupTemplate = `
+    <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">Chúc mừng bạn!</h2>
+        <div class="note">
+            Nhóm được tạo thành công, vui lòng check mail để xem chi tiết thông tin nhóm của bạn!
+        </div>
+        <div class="box-share-link d-flex align-items">
+            <div class="info-link">
+                <span>Link nhóm:</span>
+                <a href="" class="blue" id="linkshare">https://adman.vn/group-order?id=2431177</a>
+            </div>
+            <a href="javascript:void(0)" onclick="copyLink()" class="btn-copy">
+                <i class="fa fa-copy"></i>
+                Copy
+            </a>
+        </div>
+        <div class="list-btn-share d-flex align-items">
+            <b>Share:</b>
+            <div class="d-flex align-items">
+                <a href="">
+                    <img src="./assets/images/icon-facebook.png" alt="icon facebook">
+                </a>
+                <a href="">
+                    <img src="./assets/images/icon-zalo.png" alt="icon zalo">
+                </a>
+                <a href="">
+                    <img src="./assets/images/icon-email.png" alt="icon email">
+                </a>
+            </div>
+        </div>
+        <div class="form-add-email">
+            <p>Hoặc bạn có thể mời bạn bè của bạn bằng cách nhập email</p>
+            <div class="content-email" id="list-email-share">
+                <input type="text" id="email1" placeholder="Email 1">
+                <input type="text" id="email2" placeholder="Email 2">
+            </div>
+            <a href="javascript:void(0)" class="add-email" onclick="addEmail()">
+                + Thêm email
+            </a>
+        </div>
+
+        <a href="javascript:void(0)" class="btn-add-member" onclick="showContentPopup('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>
+        </a>
+        <div class="content">
+            <div class="avatar-leader">v</div>
+            <b class="title-member text-center">Hồng vừa mời bạn tham gia nhóm Hura săn sale Noel</b>
+            <div class="box-info-product">
+                <div class="product-item d-flex">
+                    <a href="" class="product-image">
+                        <img src="./assets/images/image-sp.png" alt="">
+                        <div class="box-qnt d-flex align-items space-center">
+                            <span class="sl">Sl: 30</span>
+                            <span class="conlai">Còn lại: 10</span>
+                        </div>
+                    </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="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-member">
+                                Cần thêm <b style="color: var(--color-global);">02</b> thành viên
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="note-member text-center">
+                Bạn có 10 phút để tham gia nhóm, mau chóng ấn chọn
+                Tham gia nhóm để có cơ hội mua hàng với giá siêu ưu đãi nhé!
+            </div>
+            <a href="javascript:void(0)" class="btn-member-add-group">
+                <b>Tham gia nhóm</b>
+                <div class="product-time-holder d-flex" id="js-time-join">
+                    <b>20</b>
+                    <b>11</b>
+                    <b>30</b>
+                </div>
+            </a>
+    </div>
+`;
+
+
+const SuccessMemberTemplate = `
+    <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">Chúc mừng bạn</h2>
+        <div class="note">
+            Đã tham gia nhóm thành công
+        </div>
+        <div class="txt">
+            Nhóm Hurasoft săn sale Noel đã đủ số lượng thành viên thành công mở khóa ưu đãi sản phẩm!
+        </div>
+        <b class="name-leader">
+            Người thanh toán: Hồng
+        </b>
+        <p>Thông tin thanh toán sẽ được gửi qua email của bạn.</p>
+        <a href="javascript:void(0)" class="btn-blue">
+            ok
+        </a>
+    </div>
+`;
+
+
+const InfoPayProductTemplate = `
+    <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">Chúc mừng nhóm Hurasoft săn sale</h2>
+        <div class="note">Nhóm đã đủ số lượng thành viên để tham gia mua sản phẩm với giá ưu đãi</div>
+        <div class="info-pay">
+            <div class="title">Thông tin thanh toán</div>
+            <div class="cnt d-flex align-items">
+                <div class="left">
+                    <img src="./assets/images/qr-pay.png" alt="pay">
+                </div>
+                <div class="right">
+                    <span>NGUYỄN THỊ DUYÊN:</span>
+                    <span>Ngân hàng: ACB</span>
+                    <span>Số tài khoản: 7960888888</span>
+                    <span>Nội dung thanh toán: Tên nhóm của bạn + SĐT</span>
+                </div>
+            </div>
+        </div>
+        <div class="box-timeout-pay">
+            <div class="d-flex flex-wrap space-center">
+                <span>Bạn vui lòng thanh toán trước</span>
+                <div class="product-time-holder d-flex" id="js-time-join">
+                    <b>20</b>
+                    <b>11</b>
+                    <b>30</b>
+                </div>
+                <div style="width: 100%;text-align: center;">Để được hưởng ưu đãi nhóm</div>
+            </div>
+        </div>
+        <div class="box-cskh">
+            Thanh toán xong hãy chụp lại giao dịch. CSKH <b>19002223</b> sẽ liên hệ xác nhận lại với bạn
+        </div>
+        <a href="javascript:void(0)" class="btn-blue">
+            ok
+        </a>
+    </div>
+`;

src/main.ts

@@ -0,0 +1,422 @@
+async function goi_sp_tu_api(): Promise<ProductInfo[]> {
+    return new Promise((resolve, reject) => {
+        return resolve(List_product);
+    })
+}
+
+async function goi_sp_user_tu_api(): Promise<UserInfo[]> {
+    return new Promise((resolve, reject) => {
+        return resolve(User);
+    })
+}
+
+async function hienthi_nhomsp() {
+    const lay_sp_user_tu_api: UserInfo[] = await goi_sp_user_tu_api();
+
+    console.log(lay_sp_user_tu_api);
+    DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group')
+}
+
+async function hienthi_sp() {
+    const lay_sp_tu_api: ProductInfo[] = await goi_sp_tu_api();
+
+    // code hien thi danh sach dang dien ra
+    console.log(lay_sp_tu_api)
+    showListProductHome(lay_sp_tu_api, 'out_stock', 'js-holder-list-out-stock')
+    showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started')
+    showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming');
+}
+
+function showListProductHome(lay_sp_tu_api: ProductInfo[], status: string, holderId: string) {
+    const html: string[] = [];
+    const holder = document.getElementById(holderId);
+
+    lay_sp_tu_api
+        .filter((product: ProductInfo) => product.status == status)
+        .forEach(function (product, keyIndex) {
+            html.push(
+                xayhtml(product)
+            );
+            if (status != 'out_stock' && product.to_time > product.from_time) {
+                const countdownTime = (status == 'started') ? product.to_time : product.from_time;
+                countDown(`js-deal-time-${product.productId}`, countdownTime);
+            }
+        });
+    if (holder) {
+        holder.innerHTML = html.join('');
+    }
+
+}
+
+function xayhtml(product: ProductInfo): string {
+    const quantity_sold = product.quantity - product.sale_quantity;
+    const line_sold = Math.ceil((quantity_sold / product.quantity) * 100);
+
+    const HtmlSl_nhom = product.quantity > product.quantity_member
+        ? `<span class="soluongnhom">${product.quantity / product.quantity_member} nhóm duy nhất</span>`
+        : '';
+
+    let HtmlProductItem = '';
+
+    if (product.status === 'started' && product.price > product.sale_quantity) {
+        let htmlCheckGroup = '';
+        let HtmlListMember = '';
+        let htmlBtnProduct = '';
+        let addMember = '';
+        let noteMember = '';
+
+        if (product.list_group.length > 0) {
+            product.list_group.forEach((item: infoGroup) => {
+                item.list_member.forEach((user: infoMember, index) => {
+                    var more_qnt_member = product.quantity_member - index - 1;
+                    const isLastMember = index > product.quantity_member;
+                    console.log(isLastMember)
+
+                    HtmlListMember += `
+                        <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>` : '';
+
+                    noteMember = isLastMember ? `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên` : '';
+                });
+            });
+
+            htmlCheckGroup = `
+                <div class="box-price d-flex align-items">
+                    <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                    <del class="price-old">${formatPrice(product.price)}đ</del>
+                </div>
+                <div class="list-memeber d-flex align-items">
+                    <div class="box-memeber d-flex">${HtmlListMember} ${addMember}</div>
+                    <div class="note">${noteMember}</div>
+                </div>
+            `;
+
+            htmlBtnProduct = `
+                <a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
+                    <i class="fa fa-plus"></i>
+                    Mời thêm bạn
+                </a>
+            `;
+        } else {
+            htmlCheckGroup = `
+                <div class="box-price d-flex align-items">
+                    <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                    <span class="red">Khi mua nhóm ${product.quantity_member} người</span>
+                </div>
+                <div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
+            `;
+
+            htmlBtnProduct = `
+                <a href="javascript:void(0)" class="add-group" onclick="ShowPopupGlobal('AddGroup')">
+                    <i class="fa fa-angle-double-right"></i>
+                    <span>Tạo nhóm ngay</span>
+                    <i class="fa fa-angle-double-left"></i>
+                </a>
+            `;
+        }
+
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    ${htmlCheckGroup}
+                    <div class="box-sold">
+                        <i class="icon_2023 hot"></i>
+                        <div class="line-deal" style="width: ${line_sold}%;"></div>
+                        <span class="quantity-sold">${quantity_sold} đã 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-${product.productId}" data-time="${product.to_time}"></div>
+                        </div>
+                        ${htmlBtnProduct}
+                    </div>
+                </div>
+            </div>
+        `;
+    } else if (product.status === 'coming') {
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    <div class="box-price d-flex align-items">
+                        <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                        <span class="red">Khi mua nhóm ${product.quantity_member} người</span>
+                    </div>
+                    <div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
+                    <div class="box-time d-flex align-items">
+                        <i class="icon_2023 time"></i>
+                        <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+    } else if (product.status === 'out_stock') {
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image sold">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                    <span class="icon-sold"></span>
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    <div class="retail_price">${formatPrice(product.retail_price)}</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: 100%;"></div>
+                        <span class="quantity-sold">${product.quantity} đã 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">
+                            <b>00</b><b>00</b><b>00</b>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    } else {
+        HtmlProductItem = `<div class="d-flex align-items space-center notproduct">Sản phẩm đang được cập nhật..!</div>`;
+    }
+
+    return HtmlProductItem;
+}
+
+
+
+
+function DisplayListProductGroup(ProductUser: UserInfo[], holderId: string) {
+    const html: string[] = [];
+    const holder = document.getElementById(holderId);
+
+    ProductUser.forEach(function (product, keyIndex) {
+        html.push(
+            xayhtmlProductGroup(product)
+        );
+    })
+
+    if (holder) {
+        holder.innerHTML = html.join('');
+    }
+}
+
+function xayhtmlProductGroup(product: UserInfo) {
+    var HtmlProductItem: string = '';
+    var HtmlListMember: string = '';
+    var addMember: string = '';
+    var noteMember: string = '';
+    if (product.list_group.length > 0) {
+        product.list_group.forEach((Item: infoGroup) => {
+            const quantity_sold = Item.quantity - Item.sale_quantity;
+            const line_sold = Math.ceil((Item.quantity - Item.sale_quantity) / Item.quantity * 100);
+
+            var HtmlSl_nhom: string = '';
+            if (Item.quantity > Item.quantity_member) {
+                HtmlSl_nhom = `<span class="soluongnhom">${Item.quantity / Item.quantity_member} nhóm duy nhất</span>`;
+            }
+
+            Item.list_member.forEach((user: infoMember, index) => {
+                if (index > Item.quantity_member) {
+                    HtmlListMember += `
+                            <a href="javascript:void(0)" class="item">
+                                ${formatName(user.name_member)}
+                            </a>
+                        `;
+                    addMember = ``;
+                    noteMember = ``;
+                } 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">
+                    <a href="${Item.productUrl}" class="product-image">
+                        <img src="${Item.product_image}" alt="${Item.product_name}">
+                        ${HtmlSl_nhom}
+                    </a>
+                    <div class="product-info">
+                        <a href="${Item.productUrl}" class="product-name line-clamp-2">${Item.product_name}</a>
+                        <div class="box-price d-flex align-items">
+                            <div class="retail_price">
+                                ${formatPrice(Item.retail_price)}đ
+                            </div>
+                            <del class="price-old">${formatPrice(Item.price)}đ</del>
+                        </div>
+
+                        <div class="list-memeber d-flex align-items">
+                            <div class="box-memeber d-flex">
+                                ${HtmlListMember}${addMember}
+                            </div>
+                            <div class="note">
+                                ${noteMember}
+                            </div>
+                        </div>
+
+                        <div class="box-sold">
+                            <i class="icon_2023 hot"></i>
+                            <div class="line-deal" style="width: ${line_sold}%;"></div>
+                            <span class="quantity-sold">${quantity_sold} đã 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-${Item.product_id}" data-time="${Item.to_time}">
+                                </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>${product.leaderEmail} vừa tạo nhóm thành công</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+        })
+    }
+    return HtmlProductItem;
+
+}
+
+
+function closeBackground() {
+    var eleBackground = document.getElementById('overlay');
+    eleBackground!.classList.remove('active');
+
+    var eleGlobalPopup = document.getElementById('js-global-popup');
+    eleGlobalPopup!.classList.remove('active');
+
+    document.body.classList.remove('active');
+
+}
+
+function copyLink() {
+    // Get the pre element
+    var preElement = document.getElementById("linkshare") as HTMLPreElement | null;
+
+    // Check if the element exists
+    if (preElement) {
+        // Create a textarea element
+        var textarea = document.createElement("textarea");
+
+        textarea.value = preElement.textContent || "";
+
+        document.body.appendChild(textarea);
+
+        textarea.select();
+
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+
+        alert("Copy link share thành công!");
+    }
+}
+
+// them o nhap email
+let emailCounter = 3;
+
+function addEmail() {
+
+    const contentEmail = document.getElementById('list-email-share');
+
+    const newEmailInput = document.createElement('input');
+
+    newEmailInput.type = 'text';
+    newEmailInput.id = 'email' + emailCounter;
+    newEmailInput.placeholder = 'Email ' + emailCounter;
+
+    contentEmail?.appendChild(newEmailInput);
+
+    emailCounter++;
+}
+
+function CountdownJoin() {
+    let countdown = 10 * 60;
+    const countdownElement = document.getElementById('js-time-join');
+
+    function updateCountdown() {
+        const minutes = Math.floor(countdown / 60);
+        const seconds = countdown % 60;
+        const formattedMinutes = minutes.toString().padStart(2, '0');
+        const formattedSeconds = seconds.toString().padStart(2, '0');
+        const formattedTime = `<b>${formattedMinutes}</b><b>${formattedSeconds}</b>`;
+        if (countdownElement) {
+            countdownElement.innerHTML = formattedTime;
+        }
+    }
+
+    function decrementCountdown() {
+        if (countdown > 0) {
+            countdown--;
+            updateCountdown();
+        } else {
+            clearInterval(intervalId);
+            closeBackground();
+        }
+    }
+
+    updateCountdown();
+    const intervalId = setInterval(decrementCountdown, 1000);
+}
+
+function ShowPopupGlobal(key: string) {
+    const globalPopup = document.getElementById('js-global-popup');
+    globalPopup?.classList.add('active')
+
+    const eleBackground = document.getElementById('overlay');
+    eleBackground!.classList.add('active');
+
+    document.body.classList.add('active');
+
+    const holderPupop = document.getElementById('js-content-popup');
+
+    if (key == 'AddGroup') {
+        holderPupop!.innerHTML = AddGroupTemplate;
+    } else if (key == 'AddMember') {
+        holderPupop!.innerHTML = ShareGroupTemplate;
+    }
+}
+
+
+//  run function
+hienthi_sp();
+hienthi_nhomsp();
+CountdownJoin();
+
+
+