1172 lines
77 KiB
HTML
1172 lines
77 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Đấu giá</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="./assets/css/style-global.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<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-[#ffffff] p-[6px_0] shadow-[0_1px_6px_#00000040] editable-element" data-type="background">
|
|
<div class="container">
|
|
<div class="header-main flex items-center justify-between">
|
|
<div class="header-left w-[20%] 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="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">
|
|
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
|
<span class="text-black p-[0_5px] hover:text-[var(--main-color)]">Thể lệ đấu giá</span>
|
|
</a>
|
|
<a href="./account.html" class="item flex items-center ml-[20px]">
|
|
<img src="./assets/images/icon-user.png" class="w-[15px]" alt="">
|
|
<span class="text-black p-[0_5px] hover:text-[var(--main-color)]">Tài khoản</span>
|
|
<i class="fa-solid fa-caret-down text-black"></i>
|
|
</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">
|
|
<div class="banner mb-[30px]">
|
|
<a href="">
|
|
<img src="./assets/images/banner_giadung.png" class="w-[100%] block" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="box-top-auction">
|
|
<div class="container">
|
|
<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-[#ffffff] bg-[#ea3e00]">
|
|
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">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Smart
|
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-list-auction mt-[65px]">
|
|
<div class="container">
|
|
<div class="bg-[#2578e7] rounded-[15px] p-[15px] editable-element" data-type="box">
|
|
<h2
|
|
class="title bg-[#2a8810] w-[430px] h-[70px] leading-[70px] text-center text-[32px] font-[600] uppercase m-[-45px_auto_auto_auto] text-[#ffffff] rounded-[35px]">
|
|
Đấu giá kịch tính từ 0Đ</h2>
|
|
<div class="tab-list auction flex items-center justify-center m-[25px_0_30px_0]">
|
|
<a href="javascript:void(0)"
|
|
class="item flex items-center justify-center text-white p-[10px] rounded-[15px_15px_0_0] mr-[15px] active">
|
|
<p class="text-[16px] font-[700] pr-[5px] uppercase">Đang diễn ra 20:00</p>
|
|
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
|
<div class="box-time">
|
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
|
|
</div>
|
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
|
|
</div>
|
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="javascript:void(0)"
|
|
class="item flex items-center justify-center bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-yellow">
|
|
<p class="text-[16px] font-[700] pr-[5px] uppercase">Sắp diễn ra 20:00</p>
|
|
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
|
<div class="box-time">
|
|
<div class="item-time"><b>02</b></div>
|
|
<div class="item-time"><b>16</b></div>
|
|
<div class="item-time"><b>42</b></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="list-auction flex flex-wrap">
|
|
<div
|
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Màn
|
|
Smart Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Màn
|
|
Smart Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Màn
|
|
Smart Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Màn
|
|
Smart Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Màn
|
|
Smart Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
|
|
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
|
|
<a href="./detail.html">
|
|
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
src="./assets/images/icon-pro-top.png" alt=""></a>
|
|
<div
|
|
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[var(--color-icon-action)] flex items-center justify-center rounded-[10px]">
|
|
<i class="icon_auction"></i>
|
|
<span class="ml-[3px]">220</span>
|
|
</div>
|
|
</div>
|
|
<div class="info w-[calc(100%_-_130px)]">
|
|
<a href="./detail.html"
|
|
class="name line-clamp-2 font-[500] leading-[16px] hover:text-[var(--color-hover-text)]">Màn
|
|
Smart Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="price-auction flex items-center">
|
|
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
|
|
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
|
|
</div>
|
|
<a href="./detail.html" class="btn-add ">Đấu giá</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="box-deal-hot mt-[30px]">
|
|
<div class="container">
|
|
<div class="background-deal bg-[#ea3e00] rounded-[15px] p-[15px] editable-element" data-type="box">
|
|
<h2 class="title flex items-center justify-center text-[#ffffff]">
|
|
<i class="icon-deal"></i>
|
|
<p class="uppercase text-[32px] font-[700] ">Deal hot</p>
|
|
</h2>
|
|
<div class="tab-list flex items-center justify-center m-[25px_0_30px_0]">
|
|
<a href="javascript:void(0)"
|
|
class="item flex items-center justify-center text-white p-[10px] rounded-[15px_15px_0_0] mr-[15px] background-blue hover:background-blue">
|
|
<p class="text-[16px] font-[700] pr-[5px] uppercase">Đang diễn ra 20:00</p>
|
|
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
|
<div class="box-time">
|
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
|
|
</div>
|
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
|
|
</div>
|
|
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="javascript:void(0)"
|
|
class="item flex items-center justify-center bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-blue">
|
|
<p class="text-[16px] font-[700] pr-[5px] uppercase">Sắp diễn ra 20:00</p>
|
|
<span class="text-[13px] mr-[5px]">Còn lại</span>
|
|
<div class="box-time">
|
|
<div class="item-time"><b>02</b></div>
|
|
<div class="item-time"><b>16</b></div>
|
|
<div class="item-time"><b>42</b></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="product-list flex mr-[-15px]">
|
|
<div
|
|
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
|
<div class="images w-[100%] h-[150px] block m-[auto_auto_10px_auto] overflow-hidden">
|
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
alt=""></a>
|
|
</div>
|
|
<div class="info ">
|
|
<div
|
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
|
style="width: 90%;"></div>
|
|
<div
|
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px] text-white text-white text-white text-white text-white text-white text-white text-white text-white">
|
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
|
phẩm</div>
|
|
</div>
|
|
<a href="/deal-detail.html"
|
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
|
|
<div class="group-price mb-[10px]">
|
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
|
<u>đ</u></del>
|
|
<div class="saleoff">-30%</div>
|
|
</div>
|
|
</div>
|
|
<a href="./deal-detail.html" class="btn-add m-[auto] uppercase">Mua
|
|
ngay</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
|
<div class="images w-[100%] h-[150px] block m-[auto_auto_10px_auto] overflow-hidden">
|
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
alt=""></a>
|
|
</div>
|
|
<div class="info ">
|
|
<div
|
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
|
style="width: 90%;">
|
|
</div>
|
|
<div
|
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px] text-white text-white text-white text-white text-white text-white text-white text-white text-white">
|
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
|
phẩm</div>
|
|
</div>
|
|
<a href="/deal-detail.html"
|
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
|
|
<div class="group-price mb-[10px]">
|
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
|
<u>đ</u></del>
|
|
<div class="saleoff">-30%</div>
|
|
</div>
|
|
</div>
|
|
<a href="./deal-detail.html" class="btn-add m-[auto] uppercase">Mua
|
|
ngay</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
|
<div class="images w-[100%] h-[150px] block m-[auto_auto_10px_auto] overflow-hidden">
|
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
alt=""></a>
|
|
</div>
|
|
<div class="info ">
|
|
<div
|
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
|
style="width: 90%;">
|
|
</div>
|
|
<div
|
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px] text-white text-white text-white text-white text-white text-white text-white text-white text-white">
|
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
|
phẩm</div>
|
|
</div>
|
|
<a href="/deal-detail.html"
|
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
|
|
<div class="group-price mb-[10px]">
|
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
|
<u>đ</u></del>
|
|
<div class="saleoff">-30%</div>
|
|
</div>
|
|
</div>
|
|
<a href="./deal-detail.html" class="btn-add m-[auto] uppercase">Mua
|
|
ngay</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
|
<div class="images w-[100%] h-[150px] block m-[auto_auto_10px_auto] overflow-hidden">
|
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
alt=""></a>
|
|
</div>
|
|
<div class="info ">
|
|
<div
|
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
|
style="width: 90%;">
|
|
</div>
|
|
<div
|
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px] text-white text-white text-white text-white text-white text-white text-white text-white text-white">
|
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
|
phẩm</div>
|
|
</div>
|
|
<a href="/deal-detail.html"
|
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
|
|
<div class="group-price mb-[10px]">
|
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
|
<u>đ</u></del>
|
|
<div class="saleoff">-30%</div>
|
|
</div>
|
|
</div>
|
|
<a href="./deal-detail.html" class="btn-add m-[auto] uppercase">Mua
|
|
ngay</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
|
|
<div class="images w-[100%] h-[150px] block m-[auto_auto_10px_auto] overflow-hidden">
|
|
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
|
|
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
|
|
alt=""></a>
|
|
</div>
|
|
<div class="info ">
|
|
<div
|
|
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
|
|
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
|
|
style="width: 90%;"></div>
|
|
<div
|
|
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px] text-white text-white text-white text-white text-white text-white text-white text-white text-white">
|
|
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
|
|
phẩm</div>
|
|
</div>
|
|
<a href="/deal-detail.html"
|
|
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Smart
|
|
Tivi Samsung Neo QLED 8K 85 inch QA85QN900C</a>
|
|
|
|
<div class="group-price mb-[10px]">
|
|
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
|
|
<u>đ</u>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
|
|
<u>đ</u></del>
|
|
<div class="saleoff">-30%</div>
|
|
</div>
|
|
</div>
|
|
<a href="./deal-detail.html" class="btn-add m-[auto] uppercase">Mua
|
|
ngay</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="/listdeal.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>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="box-faq mt-[25px]">
|
|
<div class="container">
|
|
<div class="background-faq bg-[#ffffff] border-[2px] border-[#110e83] p-[10px] rounded-[15px] editable-element"
|
|
data-type="box">
|
|
<h2 class="title text-center text-[32px] font-[600] uppercase text-[var(--color-faq)] mb-[20px]">Câu
|
|
hỏi
|
|
thường gặp
|
|
</h2>
|
|
<div class="content-faq">
|
|
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
|
<a href="javascript:void(0)"
|
|
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
|
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
|
mọi lúc mọi nơi chỉ cần có smartphone và
|
|
internet
|
|
</div>
|
|
</div>
|
|
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
|
<a href="javascript:void(0)"
|
|
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
|
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
|
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
|
</div>
|
|
</div>
|
|
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
|
<a href="javascript:void(0)"
|
|
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
|
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
|
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
|
</div>
|
|
</div>
|
|
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
|
<a href="javascript:void(0)"
|
|
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
|
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
|
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
|
</div>
|
|
</div>
|
|
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
|
|
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
|
|
<a href="javascript:void(0)"
|
|
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
|
|
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
|
|
mọi lúc mọi nơi chỉ cần có smartphone và internet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
<button class="edit-button" onclick="startEditing(event, this)"><i class="far fa-edit"></i>
|
|
Sửa</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main-footer bg-[#2a8810] mt-[20px] editable-element" data-type="box">
|
|
<div class="container">
|
|
<div class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#fff] ">
|
|
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
|
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
|
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
|
|
</div>
|
|
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
|
<b class="uppercase">Chính sách giao hàng</b>
|
|
<p>Nhận hàng & thanh toán tại nhà</p>
|
|
</div>
|
|
</div>
|
|
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
|
<div class="icons w-[26px] h-[30px] block mr-[13px]">
|
|
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
|
|
</div>
|
|
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
|
<b class="uppercase">Đổi mới 15 ngày đầu</b>
|
|
<p>Áp dụng với sản phẩm laptop</p>
|
|
</div>
|
|
</div>
|
|
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
|
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
|
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
|
|
</div>
|
|
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
|
<b class="uppercase">Thanh toán tiện lợi</b>
|
|
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
|
</div>
|
|
</div>
|
|
<div class="item-policies flex items-center w-[calc(100%_/4)]">
|
|
<div class="icons w-[35px] h-[30px] block mr-[13px]">
|
|
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
|
|
</div>
|
|
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
|
|
<b class="uppercase">Hỗ trợ nhiệt tình</b>
|
|
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contact-footer relative">
|
|
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
|
|
<b class="uppercase text-[15px] mb-[2px]">Công ty cổ phần thương mại máy tính an phát</b>
|
|
<p>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</p>
|
|
<p class="font-[300]">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</p>
|
|
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
|
</div>
|
|
<a href="tel:19000323"
|
|
class="btn-phone w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
|
|
<img src="./assets/images/btn-phone.png" alt="">
|
|
</a>
|
|
</div>
|
|
<button class="edit-button" onclick="startEditing(event, this)"><i class="far fa-edit"></i>
|
|
Sửa</button>
|
|
</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/edit.js'></script>
|
|
|
|
|
|
</html> |