diff --git a/assets/css/style-global.css b/assets/css/style-global.css index d26c4cb..4cfb0c1 100644 --- a/assets/css/style-global.css +++ b/assets/css/style-global.css @@ -620,3 +620,99 @@ table { background: var(--color-bg-title-2); display: flex !important; } + +.box-deal-hot .item.active, +.box-deal-hot .item:hover { + background: var(--main-color); + display: flex !important; +} + +.mode-edit { + top: -50px; + left: 0; + z-index: 1000; + width: 100%; + display: block; + transition: 0.3s; +} + +.mode-edit.fixed { + position: fixed; + top: 0; +} + +#toggleEditMode { + background: #2578e7; + height: 30px; + color: #fff; + border-radius: 5px; + display: block; + white-space: nowrap; +} + +.editable-element { + position: relative; +} + +.edit-button { + display: none; + position: absolute; + top: -25px; + right: 0; + background-color: #2578e7; + color: white; + padding: 5px; + border-radius: 4px; + cursor: pointer; + font-size: 12px; +} + +.editable-element.editable { + border: 1px solid #ddd; +} + +.editable-element.editable .edit-button { + display: block; +} + +.tab-bar { + display: none; + margin-top: 10px; + padding: 15px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + position: fixed; + right: 10px; + top: 50px; + width: 400px; + height: 520px; + overflow: auto; + background: #fff; +} + +.editable-container { + position: relative; +} + +.apply-button { + background-color: #28a745; + color: white; + padding: 5px 10px; + border-radius: 3px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.apply-button:hover { + background-color: #218838; +} + +.edit-position.active { + border: 1px solid #2578e7; + background: #2578e7; + color: #fff; +} + +.box-faq .editable-element.editable { + border: 2px solid #110e83; +} diff --git a/assets/images/product-detail-big.png b/assets/images/product-detail-big.png index b7278a7..cb9deff 100644 Binary files a/assets/images/product-detail-big.png and b/assets/images/product-detail-big.png differ diff --git a/assets/js/edit.js b/assets/js/edit.js new file mode 100644 index 0000000..664e916 --- /dev/null +++ b/assets/js/edit.js @@ -0,0 +1,365 @@ +let historyStates = []; +let currentStateIndex = -1; + + +const $toggleEditModeButton = $('#toggleEditMode'); +const $tabBar = $('#tabBar'); +const $textOptions = $('#textOptions'); +const $imageOptions = $('#imageOptions'); +const $BoxOptions = $('#BoxOptions'); +const $textColorInput = $('#textColor'); +const $textBackgroundInput = $('#textBackground'); +const $textContentInput = $('#textContent'); +const $imageURLInput = $('#imageURL'); +const $imageUploadInput = $('#imageUpload'); +const $logoSizeInput = $('#logoSize'); +const $sizeValueSpan = $('#sizeValue'); +const $lineHeightInput = $('#lineHeight'); +let currentElement = null; +let isEditMode = false; + + +$(window).scroll(function () { + + if ($(window).scrollTop() > 100) { + $(".mode-edit").addClass('fixed'); + } + else { + $(".mode-edit").removeClass('fixed'); + } + +}) + + +$toggleEditModeButton.on('click', function () { + isEditMode = !isEditMode; + $('.editable-element').toggleClass('editable', isEditMode); + $toggleEditModeButton.html(isEditMode ? ' Thoát chỉnh sửa' : ' Chỉnh sửa'); + $tabBar.hide(); +}); + +$imageUploadInput.on('change', function (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); +}); + +$textColorInput.on('input', function (e) { + updateTextColor($(this).val()); +}); + +$textBackgroundInput.on('input', function (e) { + updateBackgroundColor($(this).val()); +}); + +$logoSizeInput.on('input', function () { + $sizeValueSpan.text(`${$logoSizeInput.val()}px`); + currentElement.find('img').css('width', `${$logoSizeInput.val()}px`); +}); + +$lineHeightInput.on('input', function () { + if (currentElement && currentElement.data('type') === 'title') { + currentElement.find('.title').css('line-height', `${$lineHeightInput.val()}px`); + } +}); + + +function startEditing(event, button) { + if (!isEditMode) return; + event.stopPropagation(); + currentElement = $(button).closest('.editable-element'); + $tabBar.show(); + setupOptions(); +} + +function setupOptions() { + if (currentElement.data('type') === 'box') { + $BoxOptions.show(); + $textOptions.hide(); + $imageOptions.hide(); + const $title = currentElement.find('.title'); + $('#BackgroundColor').val(extractColor(currentElement, 'bg')); + $('#InputCodeBg').val(extractColor(currentElement, 'bg')); + $('#changeInputBg').val(extractColor(currentElement, 'bg')); + $textContentInput.val($title.text().trim()); + $textColorInput.val(extractColor($title, 'text')); + $textBackgroundInput.val(extractColor($title, 'bg')); + $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')); + $('#borderColorBg').val(extractColor(currentElement, 'border')) + } else if (currentElement.data('type') === 'title') { + $textOptions.show(); + $BoxOptions.hide(); + $imageOptions.hide(); + + const $title = currentElement.find('.title'); + $textContentInput.val($title.text().trim()); + $textColorInput.val(extractColor($title, 'text')); + $textBackgroundInput.val(extractColor($title, 'bg')); + $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')); + $('#borderColorBg').val(extractColor($title, 'bg')) + } else if (currentElement.data('type') === 'background') { + + } else { + $imageOptions.show(); + $textOptions.hide(); + $BoxOptions.hide(); + + const $img = currentElement.find('img'); + + $imageURLInput.attr('src', $img.attr('src')); + $imageUploadInput.val(''); + + const $logoImage = currentElement.find('img'); + $logoSizeInput.val($logoImage.width()); + $sizeValueSpan.text(`${$logoImage.width()}px`); + } +} + +function applyChanges() { + if (!currentElement) return; + if (currentElement.data('type') === 'title') { + updateTextStyles(); + } else if (currentElement.data('type') === 'image') { + updateImage(); + } else if (currentElement.data('type') === 'background') { + updateBgStyles() + } + saveCurrentState() + $tabBar.hide(); +} + +function updateTextStyles() { + const $title = currentElement.find('h2'); + $title.text($textContentInput.val()); + updateClass($title, 'text', $textColorInput.val()); + updateClass($title, 'bg', $textBackgroundInput.val()); +} + +function updateImage() { + const $img = currentElement.find('img'); + $img.attr('src', $imageURLInput.val() || $img.attr('src')); +} + +function updateBgStyles() { + updateClass(currentElement, 'bg', $('#changeInputBg').val()); + updateClass(currentElement, 'bg', $('#InputCodeBg').val()); +} + + +function updateTextColor(color) { + if (!currentElement) return; + updateClass(currentElement.find('h2'), 'text', color); +} + +function updateBackgroundColor(color) { + if (!currentElement) return; + updateClass(currentElement.find('h2'), 'bg', color); +} + +function updateClass($element, type, color) { + const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`; + const regex = new RegExp(`^${type}-\\[#[0-9A-Fa-f]{3,6}\\]$`); + $element.attr('class', function (i, c) { + return c.split(' ').filter(cls => !regex.test(cls)).concat(className).join(' '); + }); +} + +function extractColor($element, type) { + const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`); + const match = $element.attr('class').match(regex); + return match ? match[1] : '#000000'; +} + +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; + } +} + +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 { + alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733)."); + } + } 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 { + alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733)."); + } + } +} + +function syncColorInputs(event, type) { + const inputColorText = $('#colorCodeTitle'); + let inputBg = ''; + let Bg = ''; + if (currentElement.data('type') === 'title') { + inputBg = $('#BgcolorCode'); + bg = $(currentElement).find('.title'); + } else { + inputBg = $('#InputCodeBg'); + bg = $(currentElement); + } + + if (type == 'text') { + inputColorText.val($(event.target).val()); + } else { + inputBg.val($(event.target).val()); + bg.css('background', $(event.target).val()); + } + +} + + +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 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 saveCurrentState() { + // Lưu HTML hiện tại của giao diện + const currentHTML = document.documentElement.innerHTML; + + // Nếu không ở cuối mảng (khi đã dùng nút back hoặc forward), loại bỏ các trạng thái phía sau + if (currentStateIndex < historyStates.length - 1) { + historyStates = historyStates.slice(0, currentStateIndex + 1); + } + + // Lưu trạng thái mới và cập nhật chỉ số trạng thái hiện tại + historyStates.push(currentHTML); + currentStateIndex++; +} + + +function goBack() { + if (currentStateIndex > 0) { + currentStateIndex--; + document.documentElement.innerHTML = historyStates[currentStateIndex]; + } +} + +function goForward() { + if (currentStateIndex < historyStates.length - 1) { + currentStateIndex++; + document.documentElement.innerHTML = historyStates[currentStateIndex]; + } +} diff --git a/home.html b/home.html index 613aa82..3abce7e 100644 --- a/home.html +++ b/home.html @@ -12,7 +12,20 @@ -
+
+
+
+ + +
+
+ +
+
+
+
@@ -32,6 +45,9 @@
+
@@ -42,9 +58,14 @@
-

- Top đấu giá sôi động

+
+

+ Top đấu giá sôi động

+ +
+
@@ -132,7 +153,7 @@
-
+

Đấu giá kịch tính từ 0Đ

@@ -334,6 +355,8 @@ Xem tất cả + +
@@ -700,13 +723,473 @@
+ +
+ + + + + + +
- + \ No newline at end of file