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

up

Browse Source
This commit is contained in:
Tieptk
2024-11-13 16:20:20 +07:00
parent 253958c7b8
commit 906627003d
2 changed files with 179 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
home.html
View File

@@ -28,10 +28,13 @@
<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">
<div class="header-left editable-element" data-type="image">
<a href="/" class="logo">
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
</a>
<button class="edit-button" onclick="startEditing(event, this)" style="right: -100%;top: 0;"><i
class="far fa-edit"></i>
Sửa</button>
</div>
<div class="header-right flex items-center">
<a href="" class="item flex items-center">
@@ -730,11 +733,12 @@
<div class="item">
<b class="mb-[3px] block">Màu nền:</b>
<div class="flex items-center">
<input type="color" id="changeInputBg"
<input type="color" id="changeInputBox"
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]">
<input type="text" value="#000000" id="InputCodeBox"
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 -->
@@ -749,7 +753,7 @@
<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]">
id="borderColorBox" class="h-[33px]">
</div>
<!-- Các tùy chọn chỉnh sửa kiểu border -->
@@ -875,10 +879,9 @@
<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]">
onchange="syncColorInputs(event,'box')">
<input type="text" id="BgcolorCode" value="#000000" onchange="updateColorPicker(event,'box')"
placeholder="Nhập mã màu" class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
</div>
</div>
@@ -1063,9 +1066,8 @@
<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]">
<input type="text" id="BgcolorCode" value="#000000" onchange="updateColorPicker(event,'box')"
placeholder="Nhập mã màu" class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
</div>
</div>
@@ -1168,20 +1170,90 @@
</div>
</div>
<div id="imageOptions" class="tab-item hidden">
<label>Image URL:</label>
<img src="" id="imageURL" alt="">
<label>Chỉnh sửa ảnh</label>
<img src="" id="imageURL" alt="" class="w-[100px] h-[70px] m-[10px_0] object-contain">
<div class="item flex mt-2 space-x-2">
<input type="file" id="imageUpload" accept="image/*">
</div>
<div class="item flex items-center">
<div class="item flex items-center m-[10px_0]">
<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>
<div id="bgOptions" 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>
<button class="apply-button" onclick="applyChanges()">Lưu lại</button>
<!-- 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>
</div>
<div>
<button class="apply-button" onclick="applyChanges()">Lưu lại</button>
<button class="cancel-button" onclick="cancelEdit()">Hủy</button>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>