From 94dbf7420f3b2e442733f1509d8b39b784d181bc Mon Sep 17 00:00:00 2001 From: Tieptk Date: Fri, 29 Nov 2024 14:31:14 +0700 Subject: [PATCH] up --- account.html | 250 ++++-- assets/css/style-global.css | 77 ++ assets/js/edit.js | 461 +++------- assets/js/edit.ts | 240 ++++++ detail-auction-1.html | 383 +++++++++ detail-auction-2.html | 243 ++++++ detail-auction.html | 379 +++++++++ detail.html | 1603 ++++++++++++++++++++++++++++++----- 8 files changed, 2994 insertions(+), 642 deletions(-) create mode 100644 assets/js/edit.ts create mode 100644 detail-auction-1.html create mode 100644 detail-auction-2.html create mode 100644 detail-auction.html diff --git a/account.html b/account.html index 22c78fd..d2d352c 100644 --- a/account.html +++ b/account.html @@ -58,7 +58,7 @@
-
+
-
-
-
-

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

-
-
- - Đấu giá trực tuyến có phức tạp không? - - - -
-
- - Làm thế nào để xác thực tài khoản đấu giá thành công? - - - -
-
- - Tại sao nên chọn đấu giá trực tuyến tại Anphatpc? - - - -
-
- - Quy trình đấu giá sản phẩm của Anphatpc như thế nào? - - - -
-
- - Điều kiện để chiến thắng đấu giá là gì? - - - -
-
-
-
-
-
100); }); - -// Chuyển đổi chế độ chỉnh sửa +/** + * Bật/tắt chế độ chỉnh sửa. + * Khi bật, các phần tử sẽ có thể chỉnh sửa, và ngược lại. + */ $elements.toggleEditModeButton.on('click', function () { isEditMode = !isEditMode; $('.editable-element').toggleClass('editable', isEditMode); $elements.toggleEditModeButton.html(isEditMode ? ' Thoát chỉnh sửa' : ' Chỉnh sửa'); $elements.tabBar.hide(); }); - -// Cập nhật màu sắc và ảnh -$elements.textColorInput.on('input', function () { - updateElementColor('text', $(this).val()); -}); - -$elements.textBackgroundInput.on('input', function () { - updateElementColor('bg', $(this).val()); -}); - -$elements.logoSizeInput.on('input', function () { - updateLogoSize($(this).val()); -}); - -$elements.lineHeightInput.on('input', function () { - updateLineHeight($(this).val()); -}); - -$elements.imageUploadInput.on('change', function (event) { - handleImageUpload(event); -}); - -// Hàm bắt đầu chỉnh sửa +/** + * Cập nhật màu sắc của phần tử hiện tại. + * @param type - Loại màu sắc cần thay đổi ('text' hoặc 'bg'). + * @param color - Mã màu cần áp dụng cho phần tử. + */ +function updateElementColor(type, color) { + if (!currentElement) + return; + const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`; + currentElement.find('.title').attr('class', function (i, c) { + return c ? c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' ') : className; + }); +} +/** + * Xử lý tải ảnh lên và gán ảnh mới cho phần tử. + * @param event - Sự kiện thay đổi từ ô tải ảnh lên. + */ +function handleImageUpload(event) { + var _a; + const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0]; + if (!file) + return; + const reader = new FileReader(); + reader.onload = function () { + currentElement === null || currentElement === void 0 ? void 0 : currentElement.find('img').attr('src', reader.result); + }; + reader.readAsDataURL(file); +} +/** + * Bắt đầu chế độ chỉnh sửa cho phần tử được chọn. + * @param event - Sự kiện click để bắt đầu chỉnh sửa. + * @param button - Nút bấm để kích hoạt chỉnh sửa phần tử. + */ function startEditing(event, button) { - if (!isEditMode) return; + if (!isEditMode) + return; event.stopPropagation(); currentElement = $(button).closest('.editable-element'); $elements.tabBar.show(); setupOptions(); } - -// Thiết lập các tùy chọn cho các phần tử +/** + * Thiết lập các tùy chọn cho phần tử đang chỉnh sửa dựa trên loại của nó. + */ function setupOptions() { + if (!currentElement) + return; const elementType = currentElement.data('type'); - const $title = currentElement.find('.title'); - if (elementType === 'box') { showBoxOptions(); - } else if (elementType === 'title') { - showTextOptions($title); - } else if (elementType === 'background') { + } + else if (elementType === 'title') { + showTextOptions(currentElement.find('.title')); + } + else if (elementType === 'background') { showBgOptions(); - } else if (elementType === 'image') { + } + else if (elementType === 'image') { showImageOptions(); } } - -// Cập nhật màu sắc cho phần tử -function updateElementColor(type, color) { - if (!currentElement) return; - const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`; - currentElement.find('.title').attr('class', function (i, c) { - return c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' '); - }); -} - -// Cập nhật kích thước logo -function updateLogoSize(size) { - $elements.sizeValueSpan.text(`${size}px`); - currentElement.find('img').css('width', `${size}px`); -} - -// Cập nhật chiều cao dòng cho phần tử tiêu đề -function updateLineHeight(height) { - if (currentElement && currentElement.data('type') === 'title') { - currentElement.find('.title').css('line-height', `${height}px`); - } -} - -// Xử lý tải ảnh lên -function handleImageUpload(event) { - const file = event.target.files[0]; - if (!file) return; - const reader = new FileReader(); - reader.onload = function () { - currentElement.find('img').attr('src', reader.result); - }; - reader.readAsDataURL(file); -} - -// Áp dụng các thay đổi -function applyChanges() { - if (!currentElement) return; - const elementType = currentElement.data('type'); - - if (elementType === 'title') { - updateTextStyles(); - } else if (elementType === 'image') { - updateImage(); - } else if (elementType === 'background') { - updateBgStyles(); - } - - saveCurrentState(); - $elements.tabBar.hide(); -} - -// Cập nhật các thuộc tính kiểu chữ cho tiêu đề -function updateTextStyles() { - const $title = currentElement.find('.title'); - $title.text($elements.textContentInput.val()); - updateElementColor('text', $elements.textColorInput.val()); - updateElementColor('bg', $elements.textBackgroundInput.val()); -} - -// Cập nhật ảnh -function updateImage() { - const $img = currentElement.find('img'); - $img.attr('src', $elements.imageURLInput.val() || $img.attr('src')); -} - -// Cập nhật background -function updateBgStyles() { - updateElementColor('bg', $elements.textBackgroundInput.val()); -} - -// Lưu trạng thái hiện tại của trang -function saveCurrentState() { - const currentHTML = document.documentElement.innerHTML; - - if (currentStateIndex < historyStates.length - 1) { - historyStates = historyStates.slice(0, currentStateIndex + 1); - } - - historyStates.push(currentHTML); - currentStateIndex++; -} - -// Quay lại trạng thái trước đó -function goBack() { - if (currentStateIndex > 0) { - currentStateIndex--; - document.documentElement.innerHTML = historyStates[currentStateIndex]; - } -} - -// Tiến về trạng thái sau -function goForward() { - if (currentStateIndex < historyStates.length - 1) { - currentStateIndex++; - document.documentElement.innerHTML = historyStates[currentStateIndex]; - } -} - - +// Các hàm hiển thị và xử lý tùy chọn (showTextOptions, showBgOptions, showImageOptions, showBoxOptions) +// Thêm vào TypeScript, định nghĩa tham số và chú thích +/** + * Hiển thị các tùy chọn văn bản cho phần tử tiêu đề. + * @param $title - Phần tử tiêu đề hiện tại. + */ function showTextOptions($title) { - $elements.textOptions.show(); // Hiển thị các tùy chọn văn bản - $elements.boxOptions.hide(); // Ẩn các tùy chọn hộp - $elements.imageOptions.hide(); // Ẩn các tùy chọn hình ảnh - $elements.bgOptions.hide(); // Ẩn các tùy chọn nền - - // Điền các giá trị vào các ô input - $elements.textContentInput.val($title.text().trim()); // Điền nội dung văn bản - $elements.textColorInput.val(extractColor($title, 'text')); // Điền màu chữ - $elements.textBackgroundInput.val(extractColor($title, 'bg')); // Điền màu nền - $elements.lineHeightInput.val(parseFloat($title.css('line-height'))); // Điền chiều cao dòng - $('#fontSize').val(parseFloat($title.css('font-size'))); // Điền cỡ chữ - $('#fontFamily').val($title.css('font-family')); // Điền font chữ - $('#BgcolorCode').val(extractColor($title, 'bg')); // Điền màu nền vào ô input - $('#colorCodeTitle').val(extractColor($title, 'text')); // Điền mã màu chữ vào ô input -} - - -function showBgOptions() { - $elements.textOptions.hide(); // Ẩn các tùy chọn văn bản - $elements.boxOptions.hide(); // Ẩn các tùy chọn hộp - $elements.imageOptions.hide(); // Ẩn các tùy chọn hình ảnh - $elements.bgOptions.show(); // Hiển thị các tùy chọn nền - - const bgColor = extractColor(currentElement, 'bg'); // Trích xuất màu nền hiện tại - $('#changeInputBg').val(bgColor); // Điền vào ô input thay đổi màu nền - $('#InputCodeBg').val(bgColor); // Điền vào ô input màu nền - $('#borderColorBg').val(extractColor(currentElement, 'border')) -} - - -function showImageOptions() { - $elements.textOptions.hide(); // Ẩn các tùy chọn văn bản - $elements.boxOptions.hide(); // Ẩn các tùy chọn hộp - $elements.bgOptions.hide(); // Ẩn các tùy chọn nền - $elements.imageOptions.show(); // Hiển thị các tùy chọn hình ảnh - - const $img = currentElement.find('img'); // Lấy phần tử hình ảnh - $elements.imageURLInput.attr('src', $img.attr('src')); // Điền URL của hình ảnh vào ô input - $elements.imageUploadInput.val(''); // Xóa giá trị của ô input tải ảnh lên - $elements.logoSizeInput.val($img.width()); // Điền kích thước logo vào ô input - $elements.sizeValueSpan.text(`${$img.width()}px`); // Hiển thị kích thước logo -} - -function showBoxOptions() { - $elements.boxOptions.show(); - $elements.textOptions.hide(); + // Hiển thị các tùy chọn và thiết lập giá trị hiện tại cho ô input + $elements.textOptions.show(); + $elements.boxOptions.hide(); $elements.imageOptions.hide(); - const $title = currentElement.find('.title'); - $('#BackgroundColor').val(extractColor(currentElement, 'bg')); - $('#InputCodeBox').val(extractColor(currentElement, 'bg')); - $('#changeInputBox').val(extractColor(currentElement, 'bg')); + $elements.bgOptions.hide(); $elements.textContentInput.val($title.text().trim()); $elements.textColorInput.val(extractColor($title, 'text')); $elements.textBackgroundInput.val(extractColor($title, 'bg')); $elements.lineHeightInput.val(parseFloat($title.css('line-height'))); $('#fontSize').val(parseFloat($title.css('font-size'))); $('#fontFamily').val($title.css('font-family')); - var a = $('#BgcolorCode').val(extractColor($title, 'bg')); - console.log(a) + $('#BgcolorCode').val(extractColor($title, 'bg')); $('#colorCodeTitle').val(extractColor($title, 'text')); - $('#borderColorBox').val(extractColor(currentElement, 'border')) } - - +/** + * Trích xuất mã màu từ lớp CSS của phần tử. + * @param $element - Phần tử để lấy mã màu. + * @param type - Loại mã màu ('text' hoặc 'bg'). + * @returns Mã màu đã được trích xuất hoặc '#000000' nếu không có. + */ function extractColor($element, type) { - // Tạo regex để tìm các lớp màu (chẳng hạn như text-[#FF5733]) + var _a; const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`); - - // Tìm kiếm lớp màu trong các lớp của phần tử - const match = $element.attr('class').match(regex); - - // Nếu tìm thấy lớp phù hợp, trả về màu sắc, nếu không trả về màu mặc định là #000000 + const match = (_a = $element.attr('class')) === null || _a === void 0 ? void 0 : _a.match(regex); return match ? match[1] : '#000000'; } - -function updateColorPicker(event, type) { - const textColor = $("#textColor"); - const textCodeColor = $("#colorCodeTitle"); - const BgColor = $("#textBackground"); - let element = ''; - if (currentElement.data('type') === 'title') { - element = currentElement.find('.title'); - - } else { - element = currentElement; - } - - if (type === 'text') { - const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test(textCodeColor.val()); - if (isValidHex) { - textColor.val(textCodeColor.val()); - element.css('color', textCodeColor.val()); - } - } else if (type === 'background') { - const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val()); - if (isValidHex) { - BgColor.val($(event.target).val()); - element.css('background', $(event.target).val()); - } - } else if (type === 'box') { - const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val()); - if (isValidHex) { - BgColor.val($(event.target).val()); - element.find('.title').css('background', $(event.target).val()); - } +/** + * Lưu trạng thái hiện tại vào lịch sử trạng thái. + */ +function saveCurrentState() { + const currentHTML = document.documentElement.innerHTML; + if (currentStateIndex < historyStates.length - 1) { + historyStates = historyStates.slice(0, currentStateIndex + 1); } + historyStates.push(currentHTML); + currentStateIndex++; } - -function syncColorInputs(event, type) { - const inputColorText = $('#colorCodeTitle'); - let inputBg = ''; - let Bg = ''; - if (currentElement.data('type') === 'title' || currentElement.data('type') === 'box') { - inputBg = $('#BgcolorCode'); - bg = $(currentElement).find('.title'); - } else { - inputBg = $('#InputCodeBg'); - bg = $(currentElement); - } - - if (type == 'text' || currentElement.data('type') === 'box') { - inputColorText.val($(event.target).val()); - } else { - inputBg.val($(event.target).val()); - bg.css('background', $(event.target).val()); - } - -} - -function updateBorder(type, key, value) { - let element = ''; - if (key == 'background') { - element = currentElement; - } else if (key == 'text') { - element = currentElement.find('.title'); - } - - if (type == 'border-width') { - element.css('border-width', value + 'px'); - } else if (type == 'border-color') { - element.css('border-color', value); - } else if (type == 'border-style') { - element.css('border-style', value); - } -} - - -function updatePosition(event, action) { - $('.edit-position').removeClass('active') - $(event.target).addClass('active'); - console.log(action) - if (action == 'left') { - currentElement.find('.title').css({ 'margin': 'auto auto auto 0', 'justify-content': 'start' }); - } else if (action == 'center') { - currentElement.find('.title').css({ 'margin': '0 auto', 'justify-content': 'center' }); - } else if (action == 'right') { - console.log('aaa', currentElement) - currentElement.find('.title').css({ 'margin': 'auto 0 auto auto', 'justify-content': 'end' }); - } -} - - -function updateSizeBox(type, value) { - if (type == 'width') { - currentElement.find('.title').css('width', value + 'px') - } else if (type == 'height') { - currentElement.find('.title').css('height', value + 'px') - } -} - - -function updateBoderRadius(type, key, value) { - let element = ''; - if (key == 'background') { - element = currentElement; - } else if (key == 'text') { - element = currentElement.find('.title'); - } - - if (type == 'top-left') { - element.css('border-top-left-radius', value + 'px'); - } else if (type == 'top-right') { - element.css('border-top-right-radius', value + 'px'); - } else if (type == 'bottom-left') { - element.css('border-bottom-left-radius', value + 'px'); - } else if (type == 'bottom-right') { - element.css('border-bottom-right-radius', value + 'px'); - } -} - - -function formatText(command, value) { - let $title = ''; - if (currentElement.data('type') === 'title' || currentElement.data('type') == 'box') { - $title = currentElement.find('.title'); - } else { - $title = currentElement; - } - switch (command) { - case 'size': - $title.css('font-size', `${value}px`); - break; - case 'bold': - $title.toggleClass('font-bold'); - break; - case 'italic': - $title.toggleClass('italic'); - break; - case 'underline': - $title.toggleClass('underline'); - break; - case 'line-through': - $title.toggleClass('line-through'); - break; - case 'justifyLeft': - $title.removeClass('text-center text-right text-justify').addClass('text-left'); - break; - case 'justifyCenter': - $title.removeClass('text-left text-right text-justify').addClass('text-center'); - break; - case 'justifyRight': - $title.removeClass('text-left text-center text-justify').addClass('text-right'); - break; - case 'justifyFull': - $title.removeClass('text-left text-center text-right').addClass('text-justify'); - break; - } -} - -// hủy chỉnh sửa -function cancelEdit() { - $elements.tabBar.hide(); -} \ No newline at end of file +// (Các hàm khác tương tự như goBack, applyChanges, updateLineHeight, ...) +// Đảm bảo mỗi hàm có chú thích chi tiết về chức năng, tham số và kiểu trả về. diff --git a/assets/js/edit.ts b/assets/js/edit.ts new file mode 100644 index 0000000..d80ebf1 --- /dev/null +++ b/assets/js/edit.ts @@ -0,0 +1,240 @@ +import $ from 'jquery'; + + +// Khai báo các biến trạng thái chính để quản lý lịch sử các trạng thái giao diện +let historyStates: string[] = []; // Lưu trữ lịch sử HTML của trang +let currentStateIndex: number = -1; // Chỉ số trạng thái hiện tại trong lịch sử +let currentElement: JQuery | null = null; // Phần tử hiện đang chỉnh sửa +let isEditMode: boolean = false; // Xác định chế độ chỉnh sửa có được bật không + + +// Định nghĩa kiểu dữ liệu cho phần tử giao diện +interface Elements { + toggleEditModeButton: JQuery; + tabBar: JQuery; + textOptions: JQuery; + imageOptions: JQuery; + boxOptions: JQuery; + bgOptions: JQuery; + textColorInput: JQuery; + textBackgroundInput: JQuery; + textContentInput: JQuery; + imageURLInput: JQuery; + imageUploadInput: JQuery; + logoSizeInput: JQuery; + sizeValueSpan: JQuery; + lineHeightInput: JQuery; +} + +// Các phần tử giao diện được chọn từ DOM, chứa các thành phần tương tác trong giao diện chỉnh sửa +const $elements: Elements = { + // Nút để bật hoặc tắt chế độ chỉnh sửa + toggleEditModeButton: $('#toggleEditMode'), + + // Thanh công cụ hiển thị các tùy chọn khi chỉnh sửa phần tử + tabBar: $('#tabBar'), + + // Phần tùy chọn cho chỉnh sửa văn bản, bao gồm các thiết lập màu, nội dung và khoảng cách dòng + textOptions: $('#textOptions'), + + // Phần tùy chọn cho chỉnh sửa ảnh, bao gồm URL ảnh và kích thước + imageOptions: $('#imageOptions'), + + // Phần tùy chọn cho chỉnh sửa hộp (box), có thể dùng để thay đổi kích thước hoặc màu nền + boxOptions: $('#BoxOptions'), + + // Phần tùy chọn cho chỉnh sửa nền, cho phép thiết lập màu nền + bgOptions: $('#bgOptions'), + + // Trường nhập liệu cho màu chữ, cho phép người dùng chọn màu chữ của tiêu đề hoặc văn bản + textColorInput: $('#textColor'), + + // Trường nhập liệu cho màu nền của văn bản, cho phép người dùng thay đổi màu nền của tiêu đề + textBackgroundInput: $('#textBackground'), + + // Trường nhập liệu cho nội dung văn bản, dùng để chỉnh sửa nội dung của tiêu đề + textContentInput: $('#textContent'), + + // Trường nhập liệu URL của ảnh, cho phép người dùng nhập URL để thay đổi ảnh + imageURLInput: $('#imageURL'), + + // Trường tải lên ảnh, cho phép người dùng tải ảnh trực tiếp từ máy tính + imageUploadInput: $('#imageUpload'), + + // Trường nhập liệu cho kích thước logo, dùng để điều chỉnh kích thước ảnh hoặc logo + logoSizeInput: $('#logoSize'), + + // Hiển thị giá trị kích thước hiện tại của ảnh, được cập nhật khi thay đổi kích thước logo + sizeValueSpan: $('#sizeValue'), + + // Trường nhập liệu khoảng cách dòng, giúp người dùng điều chỉnh khoảng cách dòng của văn bản + lineHeightInput: $('#lineHeight') +}; + +// Lắng nghe sự kiện scroll để chuyển chế độ cố định cho thanh công cụ khi cuộn xuống +$(window).scroll((): void => { + const scrollTop: number = $(window).scrollTop() ?? 0; + $(".mode-edit").toggleClass('fixed', scrollTop > 100); +}); + +/** + * Bật/tắt chế độ chỉnh sửa. + * Khi bật, các phần tử sẽ có thể chỉnh sửa, và ngược lại. + */ +$elements.toggleEditModeButton.on('click', function () { + isEditMode = !isEditMode; + $('.editable-element').toggleClass('editable', isEditMode); + $elements.toggleEditModeButton.html(isEditMode ? ' Thoát chỉnh sửa' : ' Chỉnh sửa'); + $elements.tabBar.hide(); +}); + +/** + * Cập nhật màu sắc của phần tử hiện tại. + * @param type - Loại màu sắc cần thay đổi ('text' hoặc 'bg'). + * @param color - Mã màu cần áp dụng cho phần tử. + */ +function updateElementColor(type: 'text' | 'bg', color: string): void { + if (!currentElement) return; + const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`; + currentElement.find('.title').attr('class', function (i, c) { + return c ? c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' ') : className; + }); +} + +/** + * Xử lý tải ảnh lên và gán ảnh mới cho phần tử. + * @param event - Sự kiện thay đổi từ ô tải ảnh lên. + */ +function handleImageUpload(event: JQuery.ChangeEvent): void { + const file = (event.target as HTMLInputElement).files?.[0]; + if (!file) return; + const reader = new FileReader(); + reader.onload = function () { + currentElement?.find('img').attr('src', reader.result as string); + }; + reader.readAsDataURL(file); +} + +/** + * Bắt đầu chế độ chỉnh sửa cho phần tử được chọn. + * @param event - Sự kiện click để bắt đầu chỉnh sửa. + * @param button - Nút bấm để kích hoạt chỉnh sửa phần tử. + */ +function startEditing(event: JQuery.ClickEvent, button: HTMLElement): void { + if (!isEditMode) return; + event.stopPropagation(); + currentElement = $(button).closest('.editable-element'); + $elements.tabBar.show(); + setupOptions(); +} + +/** + * Thiết lập các tùy chọn cho phần tử đang chỉnh sửa dựa trên loại của nó. + */ +function setupOptions(): void { + if (!currentElement) return; + const elementType = currentElement.data('type') as string; + if (elementType === 'box') { + showBoxOptions(currentElement); + } else if (elementType === 'title') { + showTextOptions(currentElement.find('.title')); + } else if (elementType === 'background') { + showBgOptions(); + } else if (elementType === 'image') { + showImageOptions(); + } +} + +// Các hàm hiển thị và xử lý tùy chọn (showTextOptions, showBgOptions, showImageOptions, showBoxOptions) +// Thêm vào TypeScript, định nghĩa tham số và chú thích + +/** + * Hiển thị các tùy chọn văn bản cho phần tử tiêu đề. + * @param $title - Phần tử tiêu đề hiện tại. + */ +function showTextOptions($title: JQuery): void { + // Hiển thị các tùy chọn và thiết lập giá trị hiện tại cho ô input + $elements.textOptions.show(); + $elements.boxOptions.hide(); + $elements.imageOptions.hide(); + $elements.bgOptions.hide(); + $elements.textContentInput.val($title.text().trim()); + $elements.textColorInput.val(extractColor($title, 'text')); + $elements.textBackgroundInput.val(extractColor($title, 'bg')); + $elements.lineHeightInput.val(parseFloat($title.css('line-height'))); + $('#fontSize').val(parseFloat($title.css('font-size'))); + $('#fontFamily').val($title.css('font-family')); + $('#BgcolorCode').val(extractColor($title, 'bg')); + $('#colorCodeTitle').val(extractColor($title, 'text')); +} + +/** + * Trích xuất mã màu từ lớp CSS của phần tử. + * @param $element - Phần tử để lấy mã màu. + * @param type - Loại mã màu ('text' hoặc 'bg'). + * @returns Mã màu đã được trích xuất hoặc '#000000' nếu không có. + */ +function extractColor($element: JQuery, type: 'text' | 'bg'): string { + const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`); + const match = $element.attr('class')?.match(regex); + return match ? match[1] : '#000000'; +} + +/** + * Lưu trạng thái hiện tại vào lịch sử trạng thái. + */ +function saveCurrentState(): void { + const currentHTML = document.documentElement.innerHTML; + if (currentStateIndex < historyStates.length - 1) { + historyStates = historyStates.slice(0, currentStateIndex + 1); + } + historyStates.push(currentHTML); + currentStateIndex++; +} + + +// hàm xử lý chỉnh sửa box +function showBoxOptions(currentElement: JQuery): void { + // Đảm bảo $elements có kiểu chính xác + // .show() và .hide() trả về đối tượng jQuery, nên không cần lưu giá trị trả về + $elements.boxOptions.show(); + $elements.textOptions.hide(); + $elements.imageOptions.hide(); + + // Lấy phần tử có class 'title' từ currentElement, với kiểu JQuery + const $title: JQuery = currentElement.find('.title'); + + // Sử dụng phương thức extractColor để lấy màu nền, và gán giá trị vào các input + // Giả sử extractColor trả về kiểu string hoặc null + $('#BackgroundColor').val(extractColor(currentElement, 'bg') ?? ''); // Gán giá trị mặc định nếu null + $('#InputCodeBox').val(extractColor(currentElement, 'bg') ?? ''); + $('#changeInputBox').val(extractColor(currentElement, 'bg') ?? ''); + + // Lấy và gán giá trị text của title vào input textContentInput + // .text() trả về string + $elements.textContentInput.val($title.text().trim()); + + // Lấy màu sắc văn bản từ title và gán vào các input tương ứng + $elements.textColorInput.val(extractColor($title, 'text') ?? ''); + $elements.textBackgroundInput.val(extractColor($title, 'bg') ?? ''); + + // Lấy chiều cao dòng (line-height) của title, và ép kiểu sang float + $elements.lineHeightInput.val(parseFloat($title.css('line-height') ?? '0')); + + // Lấy kích thước font của title, ép kiểu sang float + $('#fontSize').val(parseFloat($title.css('font-size') ?? '0')); + + // Lấy font-family của title và gán vào input fontFamily + $('#fontFamily').val($title.css('font-family') ?? ''); + + // Gán màu nền của title vào input BgcolorCode + const a: string | undefined = $('#BgcolorCode').val(extractColor($title, 'bg') ?? '') as string; + console.log(a); // In ra giá trị lấy từ extractColor + + // Gán màu sắc của title vào input colorCodeTitle + $('#colorCodeTitle').val(extractColor($title, 'text') ?? ''); + + // Gán màu biên của currentElement vào input borderColorBox + $('#borderColorBox').val(extractColor(currentElement, 'border') ?? ''); +} + diff --git a/detail-auction-1.html b/detail-auction-1.html new file mode 100644 index 0000000..3a9552b --- /dev/null +++ b/detail-auction-1.html @@ -0,0 +1,383 @@ + + + + + + + Đấu giá + + + + + + + +
+
+
+
+ + +
+
+ + + Thể lệ đấu giá + + + + Tài khoản + + +
+
+ +
+
+ +
+
+
+
    +
  1. + + Trang + chủ + / + +
    2. +
  2. + + + Đấu giá + + + +
    3. +
  3. + + + Laptop Acer Aspire 7 A715-76-53PJ ... + + + +
    4. +
+
+
+ +
+
+
+ +
+
+
Laptop Acer Aspire 7 A715-76-53PJ + NH.QGESV.007 (Intel + Core + i5-12450H | Đen) +
+
+ +
+ 125.000.000
+
VNĐ
+
+
+
+ +
+
+
Diễn biến đấu giá
+ +
+
+
+
+ +
1
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+
+
+
+
+ +

Thời gian còn lại +

+
+
+
+ +
+
00
+
30
+
00
+
+
+
+ + 200 +
+
+
+
+

Chọn đấu ngay

+
+ 125.3 + TR + 125.3 + TR + 125.3 + TR + 125.3 + TR +
+
+
+ Hoặc +
+
+
Nhập giá đấu của + bạn
+
+ + +
+
+
+ +
+
+ + +
+
+ +
+
+
+
+

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

+
+
+ + Đấu giá trực tuyến có phức tạp không? + + + +
+
+ + Làm thế nào để xác thực tài khoản đấu giá thành công? + + + +
+
+ + Tại sao nên chọn đấu giá trực tuyến tại Anphatpc? + + + +
+
+ + Quy trình đấu giá sản phẩm của Anphatpc như thế nào? + + + +
+
+ + Điều kiện để chiến thắng đấu giá là gì? + + + +
+
+
+
+
+
+
+
+
+
+
+ ship +
+
+ Chính sách giao hàng +

Nhận hàng & thanh toán tại nhà

+
+
+
+
+ ship +
+
+ Đổi mới 15 ngày đầu +

Áp dụng với sản phẩm laptop

+
+
+
+
+ ship +
+
+ Thanh toán tiện lợi +

Trả tiền mặt, CK, trả góp 0%

+
+
+
+
+ ship +
+
+ Hỗ trợ nhiệt tình +

Tư vấn, giải pháp mọi thắc mắc

+
+
+
+
+
+ Công ty cổ phần thương mại máy tính an phát +

Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày + 11/10/2019

+

Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành + phố Hà nội, Việt + Nam

+

Điện thoại: 19000323 Email: Giang@anphat.com.vn

+
+ + + +
+
+
+
+ + \ No newline at end of file diff --git a/detail-auction-2.html b/detail-auction-2.html new file mode 100644 index 0000000..2444638 --- /dev/null +++ b/detail-auction-2.html @@ -0,0 +1,243 @@ + + + + + + + Đấu giá + + + + + + + +
+
+
+
+ + +
+
+ + + Thể lệ đấu giá + + + + Tài khoản + + +
+
+ +
+
+ +
+
+
+
    +
  1. + + Trang + chủ + / + +
    2. +
  2. + + + Đấu giá + + + +
    3. +
  3. + + + Laptop Acer Aspire 7 A715-76-53PJ ... + + + +
    4. +
+
+
+ +
+
+
+ +
+
+
Laptop Acer Aspire 7 A715-76-53PJ + NH.QGESV.007 (Intel + Core + i5-12450H | Đen) +
+
+ +
+ 125.000.000
+
VNĐ
+
+
+
+
+
+ +

Thời gian còn lại +

+
+
+
+ +
+
00
+
30
+
00
+
+
+
+ + 200 +
+
+
+
+
Nhập giá đấu của + bạn
+
+ + +
+
+
Diễn biến đấu giá
+
+

Chọn đấu ngay

+
+ 125.3 + TR + 125.3 + TR + 125.3 + TR + 125.3 + TR + 125.3 + TR +
+
+
+
+
+
+ +
1
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/detail-auction.html b/detail-auction.html new file mode 100644 index 0000000..3515f0b --- /dev/null +++ b/detail-auction.html @@ -0,0 +1,379 @@ + + + + + + + Đấu giá + + + + + + + +
+
+
+
+ + +
+
+ + + Thể lệ đấu giá + + + + Tài khoản + + +
+
+ +
+
+ +
+
+
+
    +
  1. + + Trang + chủ + / + +
    2. +
  2. + + + Đấu giá + + + +
    3. +
  3. + + + Laptop Acer Aspire 7 A715-76-53PJ ... + + + +
    4. +
+
+
+ +
+
+
+ +
+
+
Laptop Acer Aspire 7 A715-76-53PJ + NH.QGESV.007 (Intel + Core + i5-12450H | Đen) +
+
+ +
+ 125.000.000
+
VNĐ
+
+
+
+ +
+
+
Diễn biến đấu giá
+
+

Chọn đấu ngay

+
+ 125.3 + TR + 125.3 + TR + 125.3 + TR + 125.3 + TR +
+
+
+
+
+
+ +
1
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+ +
2
+
+ Phương + trả +
125.000.000 đ
+
+
+

00:30:11

+
+
+
+
+
+
+
+ +

Thời gian còn lại +

+
+
+
+ +
+
00
+
30
+
00
+
+
+
+ + 200 +
+
+
+
+
Nhập giá đấu của + bạn
+
+ + +
+
+
+ +
+
+ + +
+
+ +
+
+
+
+

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

+
+
+ + Đấu giá trực tuyến có phức tạp không? + + + +
+
+ + Làm thế nào để xác thực tài khoản đấu giá thành công? + + + +
+
+ + Tại sao nên chọn đấu giá trực tuyến tại Anphatpc? + + + +
+
+ + Quy trình đấu giá sản phẩm của Anphatpc như thế nào? + + + +
+
+ + Điều kiện để chiến thắng đấu giá là gì? + + + +
+
+
+
+
+
+
+
+
+
+
+ ship +
+
+ Chính sách giao hàng +

Nhận hàng & thanh toán tại nhà

+
+
+
+
+ ship +
+
+ Đổi mới 15 ngày đầu +

Áp dụng với sản phẩm laptop

+
+
+
+
+ ship +
+
+ Thanh toán tiện lợi +

Trả tiền mặt, CK, trả góp 0%

+
+
+
+
+ ship +
+
+ Hỗ trợ nhiệt tình +

Tư vấn, giải pháp mọi thắc mắc

+
+
+
+
+
+ Công ty cổ phần thương mại máy tính an phát +

Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày + 11/10/2019

+

Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành + phố Hà nội, Việt + Nam

+

Điện thoại: 19000323 Email: Giang@anphat.com.vn

+
+ + + +
+
+
+
+ + \ No newline at end of file diff --git a/detail.html b/detail.html index 8da0be9..3b0d3d6 100644 --- a/detail.html +++ b/detail.html @@ -178,170 +178,98 @@ ml-[32px]"> Tham gia đấu giá - -
-
- -
- 125.000.000
-
VNĐ
-
-
-
-
-
- -
1
-
- Phương - trả -
125.000.000 đ
-
-
-

00:30:11

-
-
-
- -
2
-
- Phương - trả -
125.000.000 đ
-
-
-

00:30:11

-
-
-
- -
2
-
- Phương - trả -
125.000.000 đ
-
-
-

00:30:11

-
-
-
- -
2
-
- Phương - trả -
125.000.000 đ
-
-
-

00:30:11

-
-
-
- -
2
-
- Phương - trả -
125.000.000 đ
-
-
-

00:30:11

-
-
-
- -
2
-
- Phương - trả -
125.000.000 đ
-
-
-

00:30:11

-
-
-
-
-
Nhập giá đấu của - bạn
-
-

Chọn nhanh gợi ý -

-
- - 125.3 tr - - - 125.6 tr - - - 125.9 tr - - - 126 tr - - - 126 tr - - - 126 tr - - - 126 tr - - - 126 tr - - - 126 tr - - - 126 tr - - - 126 tr - -
- - - -
-
- - -
-
-
+
+

+ Thông + tin sản + phẩm

+
+

Trọn vẹn hiệu năng + và thiết kế đẳng cấp + cùng
Laptop Acer Aspire 7 2023 A715-76G-59MW!

+

Nếu bạn đam mê chơi game và đang tìm kiếm một chiếc laptop + mạnh mẽ, thời thượng để + thỏa mãn niềm đam mê, thì đừng bỏ qua Acer Aspire 7 2023 + A715-76G-59MW - một sản phẩm thuộc + dòng gaming đẳng cấp từ nhà Acer, hứa hẹn mang đến cho bạn sự hài lòng tối đa trong + phân khúc này. Với gam màu + đen sang trọng, máy có trọng lượng nhẹ khoảng 2,1kg, thuận tiện di chuyển đến bất kỳ + nơi nào bạn muốn. +

+

Laptop Gaming Acer Aspire 7 A715 76G 59MW - NH.QMYSV.001 mạnh

+

Hãy cùng khám phá những đặc điểm nổi bật của Acer + Aspire 7 2023 A715-76G-59MW + (NH.QMYSV.001) để hiểu tại sao nó là lựa chọn hoàn hảo cho bạn: +

+

Thiết kế tinh + tế và kích thước vừa + vặn

+

Acer Aspire 7 2023 A715-76G-59MW được + thiết kế với phong cách trung + tính, tinh tế, thích hợp cho học tập và công việc, nhưng không hề giảm đi sức mạnh + của một laptop gaming. Với bộ + vi xử lý Intel® Core™ thế hệ 12 và card đồ họa rời GeForce RTX 2050, màn hình IPS + FHD 144Hz và hai quạt tản + nhiệt, laptop mang đến khả năng làm mát tốt nhất trong phân khúc phổ thông. +

+

Laptop Gaming Acer Aspire 7 A715 76G 59MW - NH.QMYSV.001 cấu hình

+

Màn hình chất lượng + cao

+

Chiếc laptop này trang bị màn hình lớn 15.6 inch với viền + siêu mỏng, mang lại trải + nghiệm hình ảnh tuyệt vời khi xem phim và chơi game. Độ phân giải Full HD + (1920x1080), tần số quét 144Hz cùng + màn hình IPS giúp hình ảnh sắc nét, sống động, và hạn chế ánh sáng xanh gây mỏi + mắt.

+

Hiệu năng mạnh + mẽ

+

Với bộ xử lý Intel Core i5-12450H, laptop mang đến hiệu + năng vượt trội và cảm giác + trải nghiệm mượt mà, không giật lag. RAM 8GB DDR4 3200MHz cho phép đa nhiệm mượt mà + và dễ dàng nâng cấp lên đến + 32GB. Ổ cứng SSD 512GB NVMe PCIe giúp khởi động và mở ứng dụng nhanh chóng. +

+

Laptop Gaming Acer Aspire 7 A715 76G 59MW - NH.QMYSV.001 bàn phím

+

Bàn phím và + Touchpad tiện ích

+

Bàn phím Full Size với cụm phím số giúp bạn dễ dàng làm + việc và gõ phím. Touchpad lướt + khá nhạy và êm, tạo cảm giác thoải mái khi sử dụng.

+

Chuẩn kết nối đa + dạng

+

Acer Aspire 7 2023 A715-76G-59MW được + trang bị đầy đủ các cổng kết + nối, đáp ứng mọi nhu cầu công việc, học tập và giải trí của bạn.

+

Chinh phục thế giới gaming và trải nghiệm công việc hiệu + quả cùng Laptop Acer + Aspire 7 2023 A715-76G-59MW! Hãy đến An Phát Computer ngay + hôm nay để sở hữu sản phẩm này + và khám phá thế giới ảo tuyệt vời với độ trơn mượt và hiệu năng đỉnh cao!

+
+ Xem + thêm mô tả + + +
@@ -557,49 +485,13 @@ ml-[32px]">
-
- Thông - tin sản - phẩm - Thông - tin đặt cọc đấu - giá -
- - -
-
-
+

Các phiên đấu giá trước

@@ -664,7 +554,7 @@ ml-[32px]"> class="item-tab w-[calc(100%_/_3_-5px)] mr-[5px] text-center text-[14px] text-white h-[34px] leading-[34px]">30 ngày
- +
@@ -787,6 +677,688 @@ ml-[32px]">
Tên người thắng Giác thắng cuộc
+
+
+
+

+ Thông số kỹ thuật

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hãng sản xuất + Laptop + Acer +
Tên sản phẩm  +   + Laptop Gaming Acer Aspire 7 A715 76G 59MW - + NH.QMYSV.001 +
Dòng + Laptop + Laptop  | Laptop + Gaming | Laptop + Acer Aspire | Laptop Đồ Họa +
+

Bộ vi xử lý 

+
+

Công + nghệ CPU

+ 		+

Intel + Core i5-12450H +

+
+

Số + nhân

+ 		+ 8 +
+

Số + luồng

+ 		+

12 +

+
+

Tốc + độ CPU

+ 		+ 3.3GHz +
+

Tốc + độ tối đa

+ 		+ 4.4GHz +
+

Bộ + nhớ + đệm

+ 		+
+
12MB +
+
+
+

Bộ nhớ trong + (RAM) +

+
+

RAM +

+ 		+

8GB + khe rời

+
+

Loại + RAM

+ 		+

DDR4 +

+
+

Tốc + độ Bus RAM

+ 		+ 3200Mhz  +
+

Số + khe cắm

+ 		+ 2 + khe +
+

Hỗ + trợ RAM tối đa

+ 		+ Nâng + cấp + tối đa 32GB +
+

Ổ cứng  +

+
+

Dung + lượng

+ 		+

512GB + PCIe NVMe SSD cắm + sẵn 

+
+

Tốc + độ vòng + quay

+ 		+

  +

+
+

Khe cắm SSD mở + rộng +

+ 		+

2 + slot, support M.2 2280 + PCIe 4.0x4

+
+

Ổ đĩa quang + (ODD) 

+ 		+

Không + có

+
+

Màn + hình

+
+

Kích + thước màn + hình

+ 		+

15.6 + inch

+
+

Độ + phân + giải

+ 		+

 FHD(1920 + x + 1080)

+
+

Tần + số + quét

+ 		+ 144Hz +
+

Công + nghệ màn + hình

+ 		+  IPS, + 144Hz, Slim Bezel, + Acer ComfyView™ +
+

Đồ Họa + (VGA)  +

+
+

Card + màn + hình

+ 		+

NVIDIA® + GeForce RTX™ 2050 + 4GB GDDR6 + Intel UHD Graphics

+
+

Kết nối + (Network) 

+
+

Wireless +

+ 		+

802.11 + a/b/g/n/ac/ax + wireless LAN

+
+

LAN +

+ 		+

1 + x + Ethernet (RJ-45) + port

+
+

Bluetooth +

+ 		+

Bluetooth® 5.2 +

+
+

Bàn phím , + Chuột 

+
+

Kiểu + bàn + phím

+ 		+

  +

+
+

Chuột +

+ 		+

Cảm + ứng đa + điểm

+
+

Giao tiếp mở + rộng 

+
+

Kết + nối + USB

+ 		+
+
+
+
+
+
+
1xUSB + Type-C™ + port: USB 3.2 Gen 2 (up to 10 + Gbps)
• DisplayPort over USB-C
• + Thunderbolt™ + 4
• USB charging 5 V; + 3 A
• DC-in port 20 V; 65 W
3xUSB + Standard-A + ports, supporting:
• + One port for USB 3.2 Gen 1 featuring power off + USB + charging
• Two ports + for USB 3.2 Gen 1
1xHDMI® 2.0 port with HDCP + support
1xDC-in jack for + AC adapter
1xEthernet (RJ-45) port
1x3.5 + mm + headphone/speaker jack, + supporting headsets with built-in
microphone +
+
+
+
+
+
+
+
+

Kết + nối + HDMI/VGA

+ 		+

1xHDMI® + 2.0 port with HDCP + support 

+
+

Tai + nghe

+ 		+

 1x3.5 + mm + headphone/speaker jack, supporting headsets with + built-in
microphone +

+
+

Camera +

+ 		+

Video + conferencing
+ UFC + with
+ • + T-Type HD + camera
+ • + Compatible with Windows only
+ • + 1280 x 720 + resolution
+ • 720p HD video at 30 fps with Temporal Noise + Reduction
+ • + Blue Glass + lens
+ • + Dual + Mic (33 mm + 33 mm)
+ • + 78 x 3.2 (5.2) x 3 + mm

+
+

Card + mở + rộng

+ 		+

- +

+
+

LOA

+ 		+

2 + Loa +

+
+

Kiểu Pin

+ 		+

3-cell, + 50Wh

+
+

Sạc pin

+ 		+

Đi + kèm +

+
+

Hệ điều hành (bản quyền) đi + kèm  +

+ 		+

Windows + 11 Home

+
+

Kích thước (Dài x Rộng x + Cao)

+ 		+
+
362.3 + (W) x 237.4 (D) x + 19.9 (H) mm
+
+
+

Trọng Lượng

+ 		+

2.1kg

+
+

Màu sắc

+ 		+

Đen +

+
+

Xuất Xứ

+ 		+

Trung + Quốc

+
+
+ + + Xem + thêm thông số kỹ thuật +

Đấu giá đang diễn ra

@@ -1109,6 +1681,591 @@ ml-[32px]"> href="javascript:void(0)" onclick="closePopop()">Thử lại
+ +
@@ -1240,12 +2397,44 @@ ml-[32px]">
+ + - + + + \ No newline at end of file