tieptk/auction_program
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tieptk
2024-11-09 11:14:57 +07:00
parent 888e9948ff
commit 472cb2535c
4 changed files with 950 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

495
home.html
View File

@@ -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>