update

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

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 ? '<i class="fas fa-sign-out-alt"></i> Thoát chỉnh sửa' : '<i class="far fa-edit"></i> 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];
+    }
+}

home.html

@@ -12,7 +12,20 @@
 </head>
 
 <body>
-    <div class="header bg-[var(--bg-header)] p-[6px_0]">
+    <div class="mode-edit bg-[#2578e7] p-[5px_0]">
+        <div class="flex items-center justify-end">
+            <div class="flex items-center mr-[10px]">
+                <a href="javascript:void(0)" class="p-[3px_5px] bg-[#fff] rounded-[5px]" onclick="goBack()"><i
+                        class="fa-solid fa-rotate-left text-black"></i></a>
+                <a href="javascript:void(0)" class="ml-[5px] p-[3px_5px] bg-[#fff] rounded-[5px]"
+                    onclick="goForward()"><i class="fa-solid fa-rotate-left text-black scale-x-[-1]"></i></a>
+            </div>
+            <div class="edit-mode-toggle pr-[10px]">
+                <button id="toggleEditMode"><i class="far fa-edit"></i> Chỉnh sửa</button>
+            </div>
+        </div>
+    </div>
+    <div class="header bg-[#166dd8] p-[6px_0]  editable-element" data-type="background">
         <div class="container">
             <div class="header-main flex items-center justify-between">
                 <div class="header-left">
@@ -32,6 +45,9 @@
                     </a>
                 </div>
             </div>
+            <button class="edit-button" onclick="startEditing(event, this)" style="right: 110px;top: 0;"><i
+                    class="far fa-edit"></i>
+                Sửa</button>
         </div>
     </div>
     <div class="homepage">
@@ -42,9 +58,14 @@
         </div>
         <div class="box-top-auction">
             <div class="container">
-                <h2
-                    class="title uppercase w-[390px] h-[55px] leading-[55px] rounded-[26px] font-[600] text-[32px] text-center text-white background-red bg-[var(--bg-top-auction)]">
-                    Top đấu giá sôi động</h2>
+                <div class="editable-element" data-type="title">
+                    <h2
+                        class="title uppercase w-[390px] h-[55px] leading-[55px] rounded-[26px] font-[600] text-[32px] text-center text-white background-red bg-[var(--bg-top-auction)]">
+                        Top đấu giá sôi động</h2>
+                    <button class="edit-button" onclick="startEditing(event, this)"><i class="far fa-edit"></i>
+                        Sửa</button>
+                </div>
+
                 <div class="list-auction flex mt-[20px] mr-[-15px]  ">
                     <div
                         class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px]  w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
@@ -132,7 +153,7 @@
         </div>
         <div class="box-list-auction mt-[65px]">
             <div class="container">
-                <div class="bg-[var(--bg-list-auction)] rounded-[15px] p-[15px]">
+                <div class="bg-[#166dd8] rounded-[15px] p-[15px] editable-element" data-type="box">
                     <h2
                         class="title bg-[var(--color-list-auction)] w-[430px] h-[70px] leading-[70px] text-center text-[32px] font-[600] uppercase m-[-45px_auto_auto_auto] text-white rounded-[35px]">
                         Đấu giá kịch tính từ 0Đ</h2>
@@ -334,6 +355,8 @@
                     <a href="/listdaugia.html" class="more-all">
                         Xem tất cả +
                     </a>
+                    <button class="edit-button" onclick="startEditing(event, this)"><i class="far fa-edit"></i>
+                        Sửa</button>
                 </div>
             </div>
         </div>
@@ -700,13 +723,473 @@
             </div>
         </div>
     </div>
+
+    <div id="tabBar" class="tab-bar">
+        <div id="BoxOptions" class="tab-item hidden">
+            <b class="block mb-[10px]">Tùy chỉnh màu nền Khối</b>
+            <div class="item">
+                <b class="mb-[3px] block">Màu nền:</b>
+                <div class="flex items-center">
+                    <input type="color" id="changeInputBg"
+                        class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
+                        onchange="syncColorInputs(event,'background')">
+                    <input type="text" value="#000000" id="InputCodeBg" onchange="updateColorPicker(event,'background')"
+                        placeholder="Nhập mã màu" class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
+                </div>
+                <div class="item mb-[15px]">
+                    <!-- Các tùy chọn chỉnh sửa border -->
+                    <div class="flex items-center mb-[10px]">
+                        <b class="mr-[10px]">Chiều rộng đường viền:</b>
+                        <input type="number" min="1" step="1"
+                            onchange="updateBorder('border-width','background', this.value)" placeholder="px"
+                            class="border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px] w-[70px] h-[33px]">
+                    </div>
+
+                    <!-- Chọn màu sắc của viền -->
+                    <div class="flex items-center mb-[10px]">
+                        <b class="mr-[10px]">Màu sắc đường viền:</b>
+                        <input type="color" onchange="updateBorder('border-color','background', this.value)"
+                            id="borderColorBg" class="h-[33px]">
+                    </div>
+
+                    <!-- Các tùy chọn chỉnh sửa kiểu border -->
+                    <div class="flex items-center mb-[10px]">
+                        <b class="mr-[10px]">Kiểu đường viền: </b>
+                        <select onchange="updateBorder('border-style','background', this.value)"
+                            class="border-[1px] border-[#dddddd] rounded-[5px] h-[33px]">
+                            <option value="solid">Solid</option>
+                            <option value="dashed">Dashed</option>
+                            <option value="dotted">Dotted</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="item mb-[15px]">
+                    <b class="block mb-[10px]">Tùy chỉnh Bo góc</b>
+                    <div class="flex flex-wrap">
+                        <div class="flex items-center w-[50%] mb-[10px]">
+                            <i class="fas fa-border-style mr-[10px] text-[20px]"></i>
+                            <input type="number" min="0" max="50" step="1"
+                                onkeyup="updateBoderRadius('top-left','background', this.value)" placeholder="px"
+                                class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                        </div>
+                        <div class="flex items-center w-[50%] mb-[10px]">
+                            <i class="fas fa-border-style rotate-[90deg] mr-[10px] text-[20px]"></i>
+                            <input type="number" min="0" max="50" step="1"
+                                onkeyup="updateBoderRadius('top-right','background', this.value)" placeholder="px"
+                                class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                        </div>
+                        <div class="flex items-center w-[50%] mb-[10px]">
+                            <i class="fas fa-border-style rotate-[-90deg] mr-[10px] text-[20px]"></i>
+                            <input type="number" min="0" max="50" step="1"
+                                onkeyup="updateBoderRadius('bottom-left','background', this.value)" placeholder="px"
+                                class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                        </div>
+                        <div class="flex items-center w-[50%] mb-[10px]">
+                            <i class="fas fa-border-style rotate-[-180deg] mr-[10px] text-[20px]"></i>
+                            <input type="number" min="0" max="50" step="1"
+                                onkeyup="updateBoderRadius('bottom-right','background', this.value)" placeholder="px"
+                                class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <label class="block font-bold mb-[5px]">Tiêu đề:</label>
+            <input type="text" id="textContent" placeholder="Nhập nội dung tiêu đề"
+                class="w-full mb-[20px] h-[40px] p-[0_10px] border-[1px] border-[#ededed] rounded-[5px]">
+
+            <div class="item mb-[20px]">
+                <b class="block mb-[5px]">Kích thước khối tiêu đề</b>
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center w-[40%]">
+                        <b class="mr-[5px]">Width:</b>
+                        <input type="text"
+                            class="w-full h-[35px] p-[0_10px] border-[1px] border-[#ededed] rounded-[5px]"
+                            placeholder="Width" onkeyup="updateSizeBox('width',this.value)">
+                    </div>
+                    <div class="flex items-center w-[40%]">
+                        <b class="mr-[5px]">Height:</b>
+                        <input type="text"
+                            class="w-full h-[35px] p-[0_10px] border-[1px] border-[#ededed] rounded-[5px]"
+                            placeholder="Height" onkeyup="updateSizeBox('height',this.value)">
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="item mb-[20px]">
+                <b class="block mb-[5px]">Vị trí khối tiêu đề</b>
+                <div class="flex items-center">
+                    <button onclick="updatePosition(event,'left')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2 edit-position">Trái</button>
+                    <button onclick="updatePosition(event,'center')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2 edit-position">Giữa</button>
+                    <button onclick="updatePosition(event,'right')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2 edit-position">Phải</button>
+                </div>
+            </div>
+
+            <div class="item flex items-center m-[20px_0]">
+                <b class="block mr-[5px]">Kính thước font chữ:</b>
+                <select id="fontSize" onchange="formatText('size', this.value)"
+                    class="border-[1px] h-[33px] p-[0_5px] border-[#dddddd] rounded-[5px]">
+                    <option value="12">12px</option>
+                    <option value="14">14px</option>
+                    <option value="16" selected>16px</option>
+                    <option value="18">18px</option>
+                    <option value="20">20px</option>
+                    <option value="24">24px</option>
+                    <option value="28">28px</option>
+                    <option value="32">32px</option>
+                    <option value="36">36px</option>
+                    <option value="40">40px</option>
+                    <!-- Thêm các kích thước khác nếu muốn -->
+                </select>
+            </div>
+            <div class="item flex items-center mb-[20px]">
+                <b class="block mr-[5px]">Chọn font chữ:</b>
+                <select id="fontFamily" onchange="updateTextStyle()"
+                    class="border-[1px] h-[33px] p-[0_5px] border-[#dddddd] rounded-[5px]">
+                    <option value="Arial">Arial</option>
+                    <option value="Verdana">Verdana</option>
+                    <option value="Times New Roman">Times New Roman</option>
+                    <option value="Georgia">Georgia</option>
+                    <option value="Courier New">Courier New</option>
+                    <option value="Kanit">Kanit</option>
+                </select>
+            </div>
+            <div class="flex mb-[20px]">
+                <div class="item w-[50%]">
+                    <b class="mb-[3px] block">Màu font chữ:</b>
+                    <div class="flex items-center">
+                        <input type="color" id="textColor"
+                            class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
+                            onchange="syncColorInputs(event,'text')">
+                        <input type="text" id="colorCodeTitle" value="#000000"
+                            onchange="updateColorPicker(event,'text')" placeholder="Nhập mã màu"
+                            class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
+                    </div>
+                </div>
+                <div class="item w-[50%]">
+                    <b class="mb-[3px] block">Màu nền:</b>
+                    <div class="flex items-center">
+                        <input type="color" id="textBackground"
+                            class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
+                            onchange="syncColorInputs(event,'background')">
+                        <input type="text" id="BgcolorCode" value="#000000"
+                            onchange="updateColorPicker(event,'background')" placeholder="Nhập mã màu"
+                            class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="item mb-[20px]">
+                <b class="mb-[5px] block">Kiểu phông chữ</b>
+                <div class="flex items-center">
+                    <button onclick="formatText('bold')" class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-bold"></i></button>
+                    <button onclick="formatText('italic')" class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-italic"></i></button>
+                    <button onclick="formatText('underline')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-underline"></i></button>
+                    <button onclick="formatText('line-through')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-strikethrough"></i></button>
+                </div>
+            </div>
+
+            <div class="item mb-[20px]">
+                <b class="block mb-[5px]">Căn chỉnh</b>
+                <div class="flex items-center">
+                    <button onclick="formatText('justifyLeft')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-align-left"></i></button>
+                    <button onclick="formatText('justifyCenter')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-align-center"></i></button>
+                    <button onclick="formatText('justifyRight')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-align-right"></i></button>
+                    <button onclick="formatText('justifyFull')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-align-justify"></i></button>
+                </div>
+            </div>
+            <div class="item mb-[20px]">
+                <label for="lineHeight" class="block mb-[5px] font-bold">Chiều cao dòng chữ:</label>
+                <input type="number" id="lineHeight" min="1" step="1" value="13"
+                    class="w-[70px] p-[0_10px] h-[33px] border-[1px] mr-[5px] border-[#ddddd] rounded-[5px]">
+                <span>px</span>
+            </div>
+
+            <div class="item mb-[20px]">
+                <!-- Các tùy chọn chỉnh sửa border -->
+                <div class="flex items-center mb-[10px]">
+                    <b class="mr-[10px]">Chiều rộng đường viền:</b>
+                    <input type="number" min="1" step="1" onkeyup="updateBorder('border-width','text', this.value)"
+                        placeholder="px"
+                        class="border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px] w-[70px] h-[33px]">
+                </div>
+
+                <!-- Chọn màu sắc của viền -->
+                <div class="flex items-center mb-[10px]">
+                    <b class="mr-[10px]">Màu sắc đường viền:</b>
+                    <input type="color" onchange="updateBorder('border-color','text', this.value)" class="h-[33px]">
+                </div>
+
+                <!-- Các tùy chọn chỉnh sửa kiểu border -->
+                <div class="flex items-center mb-[10px]">
+                    <b class="mr-[10px]">Kiểu đường viền: </b>
+                    <select onchange="updateBorder('border-style','text', this.value)"
+                        class="border-[1px] border-[#dddddd] rounded-[5px] h-[33px]">
+                        <option value="solid">Solid</option>
+                        <option value="dashed">Dashed</option>
+                        <option value="dotted">Dotted</option>
+                    </select>
+                </div>
+            </div>
+            <div class="item mb-[20px]">
+                <b class="block mb-[10px]">Tùy chỉnh Bo góc</b>
+                <div class="flex flex-wrap">
+                    <div class="flex items-center w-[50%] mb-[10px]">
+                        <i class="fas fa-border-style mr-[10px] text-[20px]"></i>
+                        <input type="number" min="0" max="50" step="1"
+                            onkeyup="updateBoderRadius('top-left','text', this.value)" placeholder="px"
+                            class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                    </div>
+                    <div class="flex items-center w-[50%] mb-[10px]">
+                        <i class="fas fa-border-style rotate-[90deg] mr-[10px] text-[20px]"></i>
+                        <input type="number" min="0" max="50" step="1"
+                            onkeyup="updateBoderRadius('top-right','text', this.value)" placeholder="px"
+                            class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                    </div>
+                    <div class="flex items-center w-[50%] mb-[10px]">
+                        <i class="fas fa-border-style rotate-[-90deg] mr-[10px] text-[20px]"></i>
+                        <input type="number" min="0" max="50" step="1"
+                            onkeyup="updateBoderRadius('bottom-left','text', this.value)" placeholder="px"
+                            class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                    </div>
+                    <div class="flex items-center w-[50%] mb-[10px]">
+                        <i class="fas fa-border-style rotate-[-180deg] mr-[10px] text-[20px]"></i>
+                        <input type="number" min="0" max="50" step="1"
+                            onkeyup="updateBoderRadius('bottom-right','text', this.value)" placeholder="px"
+                            class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="textOptions" class="tab-item hidden">
+            <label class="block font-bold mb-[5px]">Tiêu đề:</label>
+            <input type="text" id="textContent" placeholder="Nhập nội dung tiêu đề"
+                class="w-full mb-[20px] h-[40px] p-[0_10px] border-[1px] border-[#ededed] rounded-[5px]">
+
+            <div class="item mb-[20px]">
+                <b class="block mb-[5px]">Kích thước khối tiêu đề</b>
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center w-[40%]">
+                        <b class="mr-[5px]">Width:</b>
+                        <input type="text"
+                            class="w-full h-[35px] p-[0_10px] border-[1px] border-[#ededed] rounded-[5px]"
+                            placeholder="Width" onchange="formatText('width',this.value)">
+                    </div>
+                    <div class="flex items-center w-[40%]">
+                        <b class="mr-[5px]">Height:</b>
+                        <input type="text"
+                            class="w-full h-[35px] p-[0_10px] border-[1px] border-[#ededed] rounded-[5px]"
+                            placeholder="Height" onchange="formatText('height',this.value)">
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="item mb-[20px]">
+                <b class="block mb-[5px]">Vị trí khối tiêu đề</b>
+                <div class="flex items-center">
+                    <button onclick="updatePosition(event,'left')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2 edit-position">Trái</button>
+                    <button onclick="updatePosition(event,'center')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2 edit-position">Giữa</button>
+                    <button onclick="updatePosition(event,'right')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2 edit-position">Phải</button>
+                </div>
+            </div>
+
+            <div class="item flex items-center m-[20px_0]">
+                <b class="block mr-[5px]">Kính thước font chữ:</b>
+                <select id="fontSize" onchange="formatText('size', this.value)"
+                    class="border-[1px] h-[33px] p-[0_5px] border-[#dddddd] rounded-[5px]">
+                    <option value="12">12px</option>
+                    <option value="14">14px</option>
+                    <option value="16" selected>16px</option>
+                    <option value="18">18px</option>
+                    <option value="20">20px</option>
+                    <option value="24">24px</option>
+                    <option value="28">28px</option>
+                    <option value="32">32px</option>
+                    <option value="36">36px</option>
+                    <option value="40">40px</option>
+                    <!-- Thêm các kích thước khác nếu muốn -->
+                </select>
+            </div>
+            <div class="item flex items-center mb-[20px]">
+                <b class="block mr-[5px]">Chọn font chữ:</b>
+                <select id="fontFamily" onchange="updateTextStyle()"
+                    class="border-[1px] h-[33px] p-[0_5px] border-[#dddddd] rounded-[5px]">
+                    <option value="Arial">Arial</option>
+                    <option value="Verdana">Verdana</option>
+                    <option value="Times New Roman">Times New Roman</option>
+                    <option value="Georgia">Georgia</option>
+                    <option value="Courier New">Courier New</option>
+                    <option value="Kanit">Kanit</option>
+                </select>
+            </div>
+            <div class="flex mb-[20px]">
+                <div class="item w-[50%]">
+                    <b class="mb-[3px] block">Màu font chữ:</b>
+                    <div class="flex items-center">
+                        <input type="color" id="textColor"
+                            class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
+                            onchange="syncColorInputs(event,'text')">
+                        <input type="text" id="colorCodeTitle" value="#000000"
+                            onchange="updateColorPicker(event,'text')" placeholder="Nhập mã màu"
+                            class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
+                    </div>
+                </div>
+                <div class="item w-[50%]">
+                    <b class="mb-[3px] block">Màu nền:</b>
+                    <div class="flex items-center">
+                        <input type="color" id="textBackground"
+                            class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
+                            onchange="syncColorInputs(event,'background')">
+                        <input type="text" id="BgcolorCode" value="#000000"
+                            onchange="updateColorPicker(event,'background')" placeholder="Nhập mã màu"
+                            class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="item mb-[20px]">
+                <b class="mb-[5px] block">Kiểu phông chữ</b>
+                <div class="flex items-center">
+                    <button onclick="formatText('bold')" class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-bold"></i></button>
+                    <button onclick="formatText('italic')" class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-italic"></i></button>
+                    <button onclick="formatText('underline')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-underline"></i></button>
+                    <button onclick="formatText('line-through')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-strikethrough"></i></button>
+                </div>
+            </div>
+
+            <div class="item mb-[20px]">
+                <b class="block mb-[5px]">Căn chỉnh</b>
+                <div class="flex items-center">
+                    <button onclick="formatText('justifyLeft')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-align-left"></i></button>
+                    <button onclick="formatText('justifyCenter')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-align-center"></i></button>
+                    <button onclick="formatText('justifyRight')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-align-right"></i></button>
+                    <button onclick="formatText('justifyFull')"
+                        class="bg-gray-200 text-gray-800 px-3 py-1 rounded mr-2"><i
+                            class="fas fa-align-justify"></i></button>
+                </div>
+            </div>
+            <div class="item mb-[20px]">
+                <label for="lineHeight" class="block mb-[5px] font-bold">Chiều cao dòng chữ:</label>
+                <input type="number" id="lineHeight" min="1" step="1" value="13"
+                    class="w-[70px] p-[0_10px] h-[33px] border-[1px] mr-[5px] border-[#ddddd] rounded-[5px]">
+                <span>px</span>
+            </div>
+
+            <div class="item mb-[20px]">
+                <!-- Các tùy chọn chỉnh sửa border -->
+                <div class="flex items-center mb-[10px]">
+                    <b class="mr-[10px]">Chiều rộng đường viền:</b>
+                    <input type="number" min="1" step="1" onchange="formatText('border-width', this.value)"
+                        placeholder="px"
+                        class="border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px] w-[70px] h-[33px]">
+                </div>
+
+                <!-- Chọn màu sắc của viền -->
+                <div class="flex items-center mb-[10px]">
+                    <b class="mr-[10px]">Màu sắc đường viền:</b>
+                    <input type="color" onchange="formatText('border-color', this.value)" class="h-[33px]">
+                </div>
+
+                <!-- Các tùy chọn chỉnh sửa kiểu border -->
+                <div class="flex items-center mb-[10px]">
+                    <b class="mr-[10px]">Kiểu đường viền: </b>
+                    <select onchange="formatText('border-style', this.value)"
+                        class="border-[1px] border-[#dddddd] rounded-[5px] h-[33px]">
+                        <option value="solid">Solid</option>
+                        <option value="dashed">Dashed</option>
+                        <option value="dotted">Dotted</option>
+                    </select>
+                </div>
+            </div>
+            <div class="item mb-[20px]">
+                <b class="block mb-[10px]">Tùy chỉnh Bo góc</b>
+                <div class="flex flex-wrap">
+                    <div class="flex items-center w-[50%] mb-[10px]">
+                        <i class="fas fa-border-style mr-[10px] text-[20px]"></i>
+                        <input type="number" min="0" max="50" step="1"
+                            onchange="formatText('border-top-left-radius', this.value)" placeholder="px"
+                            class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                    </div>
+                    <div class="flex items-center w-[50%] mb-[10px]">
+                        <i class="fas fa-border-style rotate-[90deg] mr-[10px] text-[20px]"></i>
+                        <input type="number" min="0" max="50" step="1"
+                            onchange="formatText('border-top-right-radius', this.value)" placeholder="px"
+                            class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                    </div>
+                    <div class="flex items-center w-[50%] mb-[10px]">
+                        <i class="fas fa-border-style rotate-[-90deg] mr-[10px] text-[20px]"></i>
+                        <input type="number" min="0" max="50" step="1"
+                            onchange="formatText('border-bottom-left-radius', this.value)" placeholder="px"
+                            class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                    </div>
+                    <div class="flex items-center w-[50%] mb-[10px]">
+                        <i class="fas fa-border-style rotate-[-180deg] mr-[10px] text-[20px]"></i>
+                        <input type="number" min="0" max="50" step="1"
+                            onchange="formatText('border-bottom-right-radius', this.value)" placeholder="px"
+                            class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="imageOptions" class="tab-item hidden">
+            <label>Image URL:</label>
+            <img src="" id="imageURL" alt="">
+            <div class="item flex mt-2 space-x-2">
+                <input type="file" id="imageUpload" accept="image/*">
+            </div>
+            <div class="item flex items-center">
+                <label for="logoSize" class="block w-[30%]">Kích thước logo:</label>
+                <input type="range" id="logoSize" min="50" max="300" value="150" class="w-[60%]">
+                <span id="sizeValue" class="w-[10px] ml-[10px]">150px</span>
+            </div>
+        </div>
+
+
+        <button class="apply-button" onclick="applyChanges()">Lưu lại</button>
+    </div>
 </body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
-<script src="./assets/js/main.js"></script>
 
+<script src='./assets/js/edit.js'></script>
 
 
 </html>