up
This commit is contained in:
250
account.html
250
account.html
@@ -58,7 +58,7 @@
|
|||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<div class="content-account mb-[20px]">
|
<div class="content-account mb-[500px]">
|
||||||
<div class="name-avatar flex items-center mb-[20px]">
|
<div class="name-avatar flex items-center mb-[20px]">
|
||||||
<div
|
<div
|
||||||
class="avatar w-[40px] h-[40px] mr-[10px] leading-[40px] text-[24px] font-[600] bg-[#d9d9d9] rounded-[50%] text-center">
|
class="avatar w-[40px] h-[40px] mr-[10px] leading-[40px] text-[24px] font-[600] bg-[#d9d9d9] rounded-[50%] text-center">
|
||||||
@@ -83,6 +83,21 @@
|
|||||||
<i class="fas fa-shopping-cart mr-[15px]"></i>
|
<i class="fas fa-shopping-cart mr-[15px]"></i>
|
||||||
<span class="text-[13px]">Lịch sửa mua hàng</span>
|
<span class="text-[13px]">Lịch sửa mua hàng</span>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="javascript:void(0)" data-id="#table-gift"
|
||||||
|
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
||||||
|
<i class="fas fa-gift mr-[15px]"></i>
|
||||||
|
<span class="text-[13px]">Danh sách trúng giải</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)" data-id="#table-group"
|
||||||
|
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
||||||
|
<i class="fa-solid fa-user-group mr-[15px]"></i>
|
||||||
|
<span class="text-[13px]">Nhóm của bạn</span>
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0)" data-id="#table-group-join"
|
||||||
|
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
||||||
|
<i class="fa-solid fa-user-group mr-[15px]"></i>
|
||||||
|
<span class="text-[13px]">Nhóm bạn tham gia</span>
|
||||||
|
</a>
|
||||||
<a href="/logout.php"
|
<a href="/logout.php"
|
||||||
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
|
||||||
<i class="fas fa-sign-in-alt mr-[15px]"></i>
|
<i class="fas fa-sign-in-alt mr-[15px]"></i>
|
||||||
@@ -91,7 +106,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right w-[calc(100%_-187px_-32px)]">
|
<div class="content-right w-[calc(100%_-187px_-32px)]">
|
||||||
<div class="content-tab hidden active" id="form-info">
|
<div class="content-tab hidden" id="form-info">
|
||||||
<div class="form-info w-[567px]" id="">
|
<div class="form-info w-[567px]" id="">
|
||||||
<input type="text"
|
<input type="text"
|
||||||
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
|
||||||
@@ -150,7 +165,8 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
<td><a href="" class="text-[#116dd8]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007</a></td>
|
||||||
<td><b>2.200.000 VNĐ</b></td>
|
<td><b>2.200.000 VNĐ</b></td>
|
||||||
<td>14:30:40 12/09/2024</td>
|
<td>14:30:40 12/09/2024</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
@@ -161,7 +177,9 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
<td><a href="" class="text-[#116dd8]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007</a>
|
||||||
|
</td>
|
||||||
<td><b>2.200.000 VNĐ</b></td>
|
<td><b>2.200.000 VNĐ</b></td>
|
||||||
<td>14:30:40 12/09/2024</td>
|
<td>14:30:40 12/09/2024</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
@@ -172,7 +190,8 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
<td><a href="" class="text-[#116dd8]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007</a></td>
|
||||||
<td><b>2.200.000 VNĐ</b></td>
|
<td><b>2.200.000 VNĐ</b></td>
|
||||||
<td>14:30:40 12/09/2024</td>
|
<td>14:30:40 12/09/2024</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
@@ -183,7 +202,8 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
<td><a href="" class="text-[#116dd8]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007</a></td>
|
||||||
<td><b>2.200.000 VNĐ</b></td>
|
<td><b>2.200.000 VNĐ</b></td>
|
||||||
<td>14:30:40 12/09/2024</td>
|
<td>14:30:40 12/09/2024</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
@@ -194,7 +214,8 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
<td><a href="" class="text-[#116dd8]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007</a></td>
|
||||||
<td><b>2.200.000 VNĐ</b></td>
|
<td><b>2.200.000 VNĐ</b></td>
|
||||||
<td>14:30:40 12/09/2024</td>
|
<td>14:30:40 12/09/2024</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
@@ -205,7 +226,8 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
<td><a href="" class="text-[#116dd8]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007</a></td>
|
||||||
<td><b>2.200.000 VNĐ</b></td>
|
<td><b>2.200.000 VNĐ</b></td>
|
||||||
<td>14:30:40 12/09/2024</td>
|
<td>14:30:40 12/09/2024</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
@@ -216,7 +238,8 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
<td><a href="" class="text-[#116dd8]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007</a></td>
|
||||||
<td><b>2.200.000 VNĐ</b></td>
|
<td><b>2.200.000 VNĐ</b></td>
|
||||||
<td>14:30:40 12/09/2024</td>
|
<td>14:30:40 12/09/2024</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
@@ -230,6 +253,147 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="content-tab hidden active" id="table-gift">
|
||||||
|
<div class="table-history w-full">
|
||||||
|
<h2 class="title text-[24px] font-[600] text-center uppercase mb-[20px] ">
|
||||||
|
Danh sách trúng
|
||||||
|
giải</h2>
|
||||||
|
<table class="table text-left">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">Tên giải thưởng</th>
|
||||||
|
<th width="300">Thời gian</th>
|
||||||
|
<th width="100">Số lượng</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">
|
||||||
|
<div class="flex items-center">Voucher 50k <a href=""
|
||||||
|
class="block w-[92px] h-[30px] ml-[10px] text-center bg-[#166DD8] leading-[30px] text-[#fff] rounded-[15px]">Đã
|
||||||
|
chọn</a></div>
|
||||||
|
</td>
|
||||||
|
<td>14:30:40 12/09/2024</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Voucher 50k</td>
|
||||||
|
<td>14:30:40 12/09/2024</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Voucher 50k</td>
|
||||||
|
<td>14:30:40 12/09/2024</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Voucher 50k</td>
|
||||||
|
<td>14:30:40 12/09/2024</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Voucher 50k</td>
|
||||||
|
<td>14:30:40 12/09/2024</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Voucher 50k</td>
|
||||||
|
<td>14:30:40 12/09/2024</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-tab hidden" id="table-group">
|
||||||
|
<div class="table-history w-full">
|
||||||
|
<h2 class="title text-[24px] font-[600] text-center uppercase mb-[20px]">Nhóm của bạn
|
||||||
|
</h2>
|
||||||
|
<table class="table text-left">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>STT/ID</th>
|
||||||
|
<th>Tên nhóm</th>
|
||||||
|
<th>Link nhóm</th>
|
||||||
|
<th>Thành viên</th>
|
||||||
|
<th>Thông tin sản phẩm</th>
|
||||||
|
<th>Trạng thái</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1 <a href="" class="text-[#0085FF]">#2431177</a></td>
|
||||||
|
<td>Hurasoft săn sale Noel</td>
|
||||||
|
<td><a href=""
|
||||||
|
class="text-[#0085FF]">https://adman.vn/group-order?id=2431177</a>
|
||||||
|
</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>Combo Bàn phím và Chuột không dây MO...</td>
|
||||||
|
<td width="204">
|
||||||
|
<div
|
||||||
|
class="w-[92px] h-[22px] leading-[22px] text-[11px] rounded-[11px] border-[1px] border-[#00D060] bg-[#ECFFE9] text-center text-[#00D060] m-[10px_0]">
|
||||||
|
<i class="fa fa-check"></i> Thành công
|
||||||
|
</div>
|
||||||
|
<p class="text-[11px]">Đã thanh toán đơn hàng nhóm</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1 <a href="" class="text-[#0085FF]">#2431177</a></td>
|
||||||
|
<td>Hurasoft săn sale Noel</td>
|
||||||
|
<td><a href=""
|
||||||
|
class="text-[#0085FF]">https://adman.vn/group-order?id=2431177</a>
|
||||||
|
</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>Combo Bàn phím và Chuột không dây MO...</td>
|
||||||
|
<td width="204">
|
||||||
|
<div
|
||||||
|
class="w-[92px] h-[22px] leading-[22px] text-[11px] rounded-[11px] border-[1px] border-[#FF7A00] bg-[#FFF6E9] text-center text-[#FF7A00] m-[10px_0]">
|
||||||
|
<i class="fa-solid fa-circle-exclamation"></i> Đang diễn ra
|
||||||
|
</div>
|
||||||
|
<p class="text-[11px]">Chưa đủ số lượng thành viên</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-tab hidden " id="table-group-join">
|
||||||
|
<div class="table-history w-full">
|
||||||
|
<h2 class="title text-[24px] font-[600] text-center uppercase mb-[20px]">Nhóm của bạn
|
||||||
|
tham gia
|
||||||
|
</h2>
|
||||||
|
<table class="table text-left">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>STT/ID</th>
|
||||||
|
<th>Tên nhóm</th>
|
||||||
|
<th>Link nhóm</th>
|
||||||
|
<th>Thành viên</th>
|
||||||
|
<th>Thông tin sản phẩm</th>
|
||||||
|
<th>Trạng thái</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1 <a href="" class="text-[#0085FF]">#2431177</a></td>
|
||||||
|
<td>Hurasoft săn sale Noel</td>
|
||||||
|
<td><a href=""
|
||||||
|
class="text-[#0085FF]">https://adman.vn/group-order?id=2431177</a>
|
||||||
|
</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>Combo Bàn phím và Chuột không dây MO...</td>
|
||||||
|
<td width="204">
|
||||||
|
<div
|
||||||
|
class="w-[50px] h-[22px] leading-[22px] text-[11px] rounded-[11px] border-[1px] border-[#E40000] bg-[#FFE9E9] text-center text-[#E40000] m-[10px_0]">
|
||||||
|
<i class="fa-solid fa-circle-xmark mr-[5px]"></i> Hủy
|
||||||
|
</div>
|
||||||
|
<p class="text-[11px]">Không thanh toán trong thời gian quy định</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -281,74 +445,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="box-faq mt-[25px]">
|
|
||||||
<div class="container">
|
|
||||||
<div class="background-faq border-[2px] border-[#166dd8] p-[10px] rounded-[15px]">
|
|
||||||
<h2 class="title text-center text-[32px] font-[600] uppercase text-[#110e83] 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-[#f8f8f8]">
|
|
||||||
<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-[#f8f8f8]">
|
|
||||||
<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-[#f8f8f8]">
|
|
||||||
<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-[#f8f8f8]">
|
|
||||||
<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-[#f8f8f8]">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="main-footer background-footer mt-[20px]">
|
<div class="main-footer background-footer mt-[20px]">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -730,3 +730,80 @@ table {
|
|||||||
.box-faq .editable-element.editable {
|
.box-faq .editable-element.editable {
|
||||||
border: 2px solid #110e83;
|
border: 2px solid #110e83;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.or {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.or::before,
|
||||||
|
.or::after {
|
||||||
|
content: "";
|
||||||
|
flex: 1;
|
||||||
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.or:not(:empty)::before {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.or:not(:empty)::after {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-spec td {
|
||||||
|
padding: 5px !important;
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-spec .content {
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 630px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-spec .content::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100px;
|
||||||
|
background: -webkit-gradient(
|
||||||
|
linear,
|
||||||
|
left top,
|
||||||
|
left bottom,
|
||||||
|
from(transparent),
|
||||||
|
to(#fff)
|
||||||
|
);
|
||||||
|
background: linear-gradient(transparent, #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-spec tr:nth-child(2n) {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content-desciption::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100px;
|
||||||
|
background: -webkit-gradient(
|
||||||
|
linear,
|
||||||
|
left top,
|
||||||
|
left bottom,
|
||||||
|
from(transparent),
|
||||||
|
to(#fff)
|
||||||
|
);
|
||||||
|
background: linear-gradient(transparent, #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content-desciption.active {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
#content-desciption.active::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,413 +1,158 @@
|
|||||||
let historyStates = [];
|
"use strict";
|
||||||
let currentStateIndex = -1;
|
// Khai báo các biến trạng thái chính để quản lý lịch sử các trạng thái giao diện
|
||||||
let currentElement = null;
|
let historyStates = []; // Lưu trữ lịch sử HTML của trang
|
||||||
let isEditMode = false;
|
let currentStateIndex = -1; // Chỉ số trạng thái hiện tại trong lịch sử
|
||||||
|
let currentElement = null; // Phần tử hiện đang chỉnh sửa
|
||||||
// Các phần tử DOM cần thiết
|
let isEditMode = false; // Xác định chế độ chỉnh sửa có được bật không
|
||||||
|
// Các phần tử giao diện được chọn từ DOM, chứa các thành phần tương tác trong giao diện chỉnh sửa
|
||||||
const $elements = {
|
const $elements = {
|
||||||
|
// Nút để bật hoặc tắt chế độ chỉnh sửa
|
||||||
toggleEditModeButton: $('#toggleEditMode'),
|
toggleEditModeButton: $('#toggleEditMode'),
|
||||||
|
// Thanh công cụ hiển thị các tùy chọn khi chỉnh sửa phần tử
|
||||||
tabBar: $('#tabBar'),
|
tabBar: $('#tabBar'),
|
||||||
|
// Phần tùy chọn cho chỉnh sửa văn bản, bao gồm các thiết lập màu, nội dung và khoảng cách dòng
|
||||||
textOptions: $('#textOptions'),
|
textOptions: $('#textOptions'),
|
||||||
|
// Phần tùy chọn cho chỉnh sửa ảnh, bao gồm URL ảnh và kích thước
|
||||||
imageOptions: $('#imageOptions'),
|
imageOptions: $('#imageOptions'),
|
||||||
|
// Phần tùy chọn cho chỉnh sửa hộp (box), có thể dùng để thay đổi kích thước hoặc màu nền
|
||||||
boxOptions: $('#BoxOptions'),
|
boxOptions: $('#BoxOptions'),
|
||||||
|
// Phần tùy chọn cho chỉnh sửa nền, cho phép thiết lập màu nền
|
||||||
bgOptions: $('#bgOptions'),
|
bgOptions: $('#bgOptions'),
|
||||||
|
// Trường nhập liệu cho màu chữ, cho phép người dùng chọn màu chữ của tiêu đề hoặc văn bản
|
||||||
textColorInput: $('#textColor'),
|
textColorInput: $('#textColor'),
|
||||||
|
// Trường nhập liệu cho màu nền của văn bản, cho phép người dùng thay đổi màu nền của tiêu đề
|
||||||
textBackgroundInput: $('#textBackground'),
|
textBackgroundInput: $('#textBackground'),
|
||||||
|
// Trường nhập liệu cho nội dung văn bản, dùng để chỉnh sửa nội dung của tiêu đề
|
||||||
textContentInput: $('#textContent'),
|
textContentInput: $('#textContent'),
|
||||||
|
// Trường nhập liệu URL của ảnh, cho phép người dùng nhập URL để thay đổi ảnh
|
||||||
imageURLInput: $('#imageURL'),
|
imageURLInput: $('#imageURL'),
|
||||||
|
// Trường tải lên ảnh, cho phép người dùng tải ảnh trực tiếp từ máy tính
|
||||||
imageUploadInput: $('#imageUpload'),
|
imageUploadInput: $('#imageUpload'),
|
||||||
|
// Trường nhập liệu cho kích thước logo, dùng để điều chỉnh kích thước ảnh hoặc logo
|
||||||
logoSizeInput: $('#logoSize'),
|
logoSizeInput: $('#logoSize'),
|
||||||
|
// Hiển thị giá trị kích thước hiện tại của ảnh, được cập nhật khi thay đổi kích thước logo
|
||||||
sizeValueSpan: $('#sizeValue'),
|
sizeValueSpan: $('#sizeValue'),
|
||||||
|
// Trường nhập liệu khoảng cách dòng, giúp người dùng điều chỉnh khoảng cách dòng của văn bản
|
||||||
lineHeightInput: $('#lineHeight')
|
lineHeightInput: $('#lineHeight')
|
||||||
};
|
};
|
||||||
|
// Lắng nghe sự kiện scroll để chuyển chế độ cố định cho thanh công cụ khi cuộn xuống
|
||||||
$(window).scroll(function () {
|
$(window).scroll(function () {
|
||||||
$(".mode-edit").toggleClass('fixed', $(window).scrollTop() > 100);
|
$(".mode-edit").toggleClass('fixed', $(window).scrollTop() > 100);
|
||||||
});
|
});
|
||||||
|
/**
|
||||||
// Chuyển đổi chế độ chỉnh sửa
|
* Bật/tắt chế độ chỉnh sửa.
|
||||||
|
* Khi bật, các phần tử sẽ có thể chỉnh sửa, và ngược lại.
|
||||||
|
*/
|
||||||
$elements.toggleEditModeButton.on('click', function () {
|
$elements.toggleEditModeButton.on('click', function () {
|
||||||
isEditMode = !isEditMode;
|
isEditMode = !isEditMode;
|
||||||
$('.editable-element').toggleClass('editable', isEditMode);
|
$('.editable-element').toggleClass('editable', isEditMode);
|
||||||
$elements.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');
|
$elements.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');
|
||||||
$elements.tabBar.hide();
|
$elements.tabBar.hide();
|
||||||
});
|
});
|
||||||
|
/**
|
||||||
// Cập nhật màu sắc và ảnh
|
* Cập nhật màu sắc của phần tử hiện tại.
|
||||||
$elements.textColorInput.on('input', function () {
|
* @param type - Loại màu sắc cần thay đổi ('text' hoặc 'bg').
|
||||||
updateElementColor('text', $(this).val());
|
* @param color - Mã màu cần áp dụng cho phần tử.
|
||||||
});
|
*/
|
||||||
|
function updateElementColor(type, color) {
|
||||||
$elements.textBackgroundInput.on('input', function () {
|
if (!currentElement)
|
||||||
updateElementColor('bg', $(this).val());
|
return;
|
||||||
});
|
const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
|
||||||
|
currentElement.find('.title').attr('class', function (i, c) {
|
||||||
$elements.logoSizeInput.on('input', function () {
|
return c ? c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' ') : className;
|
||||||
updateLogoSize($(this).val());
|
});
|
||||||
});
|
}
|
||||||
|
/**
|
||||||
$elements.lineHeightInput.on('input', function () {
|
* Xử lý tải ảnh lên và gán ảnh mới cho phần tử.
|
||||||
updateLineHeight($(this).val());
|
* @param event - Sự kiện thay đổi từ ô tải ảnh lên.
|
||||||
});
|
*/
|
||||||
|
function handleImageUpload(event) {
|
||||||
$elements.imageUploadInput.on('change', function (event) {
|
var _a;
|
||||||
handleImageUpload(event);
|
const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
|
||||||
});
|
if (!file)
|
||||||
|
return;
|
||||||
// Hàm bắt đầu chỉnh sửa
|
const reader = new FileReader();
|
||||||
|
reader.onload = function () {
|
||||||
|
currentElement === null || currentElement === void 0 ? void 0 : currentElement.find('img').attr('src', reader.result);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Bắt đầu chế độ chỉnh sửa cho phần tử được chọn.
|
||||||
|
* @param event - Sự kiện click để bắt đầu chỉnh sửa.
|
||||||
|
* @param button - Nút bấm để kích hoạt chỉnh sửa phần tử.
|
||||||
|
*/
|
||||||
function startEditing(event, button) {
|
function startEditing(event, button) {
|
||||||
if (!isEditMode) return;
|
if (!isEditMode)
|
||||||
|
return;
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
currentElement = $(button).closest('.editable-element');
|
currentElement = $(button).closest('.editable-element');
|
||||||
$elements.tabBar.show();
|
$elements.tabBar.show();
|
||||||
setupOptions();
|
setupOptions();
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
// Thiết lập các tùy chọn cho các phần tử
|
* Thiết lập các tùy chọn cho phần tử đang chỉnh sửa dựa trên loại của nó.
|
||||||
|
*/
|
||||||
function setupOptions() {
|
function setupOptions() {
|
||||||
|
if (!currentElement)
|
||||||
|
return;
|
||||||
const elementType = currentElement.data('type');
|
const elementType = currentElement.data('type');
|
||||||
const $title = currentElement.find('.title');
|
|
||||||
|
|
||||||
if (elementType === 'box') {
|
if (elementType === 'box') {
|
||||||
showBoxOptions();
|
showBoxOptions();
|
||||||
} else if (elementType === 'title') {
|
}
|
||||||
showTextOptions($title);
|
else if (elementType === 'title') {
|
||||||
} else if (elementType === 'background') {
|
showTextOptions(currentElement.find('.title'));
|
||||||
|
}
|
||||||
|
else if (elementType === 'background') {
|
||||||
showBgOptions();
|
showBgOptions();
|
||||||
} else if (elementType === 'image') {
|
}
|
||||||
|
else if (elementType === 'image') {
|
||||||
showImageOptions();
|
showImageOptions();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Các hàm hiển thị và xử lý tùy chọn (showTextOptions, showBgOptions, showImageOptions, showBoxOptions)
|
||||||
// Cập nhật màu sắc cho phần tử
|
// Thêm vào TypeScript, định nghĩa tham số và chú thích
|
||||||
function updateElementColor(type, color) {
|
/**
|
||||||
if (!currentElement) return;
|
* Hiển thị các tùy chọn văn bản cho phần tử tiêu đề.
|
||||||
const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
|
* @param $title - Phần tử tiêu đề hiện tại.
|
||||||
currentElement.find('.title').attr('class', function (i, c) {
|
*/
|
||||||
return c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' ');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cập nhật kích thước logo
|
|
||||||
function updateLogoSize(size) {
|
|
||||||
$elements.sizeValueSpan.text(`${size}px`);
|
|
||||||
currentElement.find('img').css('width', `${size}px`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cập nhật chiều cao dòng cho phần tử tiêu đề
|
|
||||||
function updateLineHeight(height) {
|
|
||||||
if (currentElement && currentElement.data('type') === 'title') {
|
|
||||||
currentElement.find('.title').css('line-height', `${height}px`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Xử lý tải ảnh lên
|
|
||||||
function handleImageUpload(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);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Áp dụng các thay đổi
|
|
||||||
function applyChanges() {
|
|
||||||
if (!currentElement) return;
|
|
||||||
const elementType = currentElement.data('type');
|
|
||||||
|
|
||||||
if (elementType === 'title') {
|
|
||||||
updateTextStyles();
|
|
||||||
} else if (elementType === 'image') {
|
|
||||||
updateImage();
|
|
||||||
} else if (elementType === 'background') {
|
|
||||||
updateBgStyles();
|
|
||||||
}
|
|
||||||
|
|
||||||
saveCurrentState();
|
|
||||||
$elements.tabBar.hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cập nhật các thuộc tính kiểu chữ cho tiêu đề
|
|
||||||
function updateTextStyles() {
|
|
||||||
const $title = currentElement.find('.title');
|
|
||||||
$title.text($elements.textContentInput.val());
|
|
||||||
updateElementColor('text', $elements.textColorInput.val());
|
|
||||||
updateElementColor('bg', $elements.textBackgroundInput.val());
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cập nhật ảnh
|
|
||||||
function updateImage() {
|
|
||||||
const $img = currentElement.find('img');
|
|
||||||
$img.attr('src', $elements.imageURLInput.val() || $img.attr('src'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cập nhật background
|
|
||||||
function updateBgStyles() {
|
|
||||||
updateElementColor('bg', $elements.textBackgroundInput.val());
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lưu trạng thái hiện tại của trang
|
|
||||||
function saveCurrentState() {
|
|
||||||
const currentHTML = document.documentElement.innerHTML;
|
|
||||||
|
|
||||||
if (currentStateIndex < historyStates.length - 1) {
|
|
||||||
historyStates = historyStates.slice(0, currentStateIndex + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
historyStates.push(currentHTML);
|
|
||||||
currentStateIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Quay lại trạng thái trước đó
|
|
||||||
function goBack() {
|
|
||||||
if (currentStateIndex > 0) {
|
|
||||||
currentStateIndex--;
|
|
||||||
document.documentElement.innerHTML = historyStates[currentStateIndex];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tiến về trạng thái sau
|
|
||||||
function goForward() {
|
|
||||||
if (currentStateIndex < historyStates.length - 1) {
|
|
||||||
currentStateIndex++;
|
|
||||||
document.documentElement.innerHTML = historyStates[currentStateIndex];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function showTextOptions($title) {
|
function showTextOptions($title) {
|
||||||
$elements.textOptions.show(); // Hiển thị các tùy chọn văn bản
|
// Hiển thị các tùy chọn và thiết lập giá trị hiện tại cho ô input
|
||||||
$elements.boxOptions.hide(); // Ẩn các tùy chọn hộp
|
$elements.textOptions.show();
|
||||||
$elements.imageOptions.hide(); // Ẩn các tùy chọn hình ảnh
|
$elements.boxOptions.hide();
|
||||||
$elements.bgOptions.hide(); // Ẩn các tùy chọn nền
|
|
||||||
|
|
||||||
// Điền các giá trị vào các ô input
|
|
||||||
$elements.textContentInput.val($title.text().trim()); // Điền nội dung văn bản
|
|
||||||
$elements.textColorInput.val(extractColor($title, 'text')); // Điền màu chữ
|
|
||||||
$elements.textBackgroundInput.val(extractColor($title, 'bg')); // Điền màu nền
|
|
||||||
$elements.lineHeightInput.val(parseFloat($title.css('line-height'))); // Điền chiều cao dòng
|
|
||||||
$('#fontSize').val(parseFloat($title.css('font-size'))); // Điền cỡ chữ
|
|
||||||
$('#fontFamily').val($title.css('font-family')); // Điền font chữ
|
|
||||||
$('#BgcolorCode').val(extractColor($title, 'bg')); // Điền màu nền vào ô input
|
|
||||||
$('#colorCodeTitle').val(extractColor($title, 'text')); // Điền mã màu chữ vào ô input
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function showBgOptions() {
|
|
||||||
$elements.textOptions.hide(); // Ẩn các tùy chọn văn bản
|
|
||||||
$elements.boxOptions.hide(); // Ẩn các tùy chọn hộp
|
|
||||||
$elements.imageOptions.hide(); // Ẩn các tùy chọn hình ảnh
|
|
||||||
$elements.bgOptions.show(); // Hiển thị các tùy chọn nền
|
|
||||||
|
|
||||||
const bgColor = extractColor(currentElement, 'bg'); // Trích xuất màu nền hiện tại
|
|
||||||
$('#changeInputBg').val(bgColor); // Điền vào ô input thay đổi màu nền
|
|
||||||
$('#InputCodeBg').val(bgColor); // Điền vào ô input màu nền
|
|
||||||
$('#borderColorBg').val(extractColor(currentElement, 'border'))
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function showImageOptions() {
|
|
||||||
$elements.textOptions.hide(); // Ẩn các tùy chọn văn bản
|
|
||||||
$elements.boxOptions.hide(); // Ẩn các tùy chọn hộp
|
|
||||||
$elements.bgOptions.hide(); // Ẩn các tùy chọn nền
|
|
||||||
$elements.imageOptions.show(); // Hiển thị các tùy chọn hình ảnh
|
|
||||||
|
|
||||||
const $img = currentElement.find('img'); // Lấy phần tử hình ảnh
|
|
||||||
$elements.imageURLInput.attr('src', $img.attr('src')); // Điền URL của hình ảnh vào ô input
|
|
||||||
$elements.imageUploadInput.val(''); // Xóa giá trị của ô input tải ảnh lên
|
|
||||||
$elements.logoSizeInput.val($img.width()); // Điền kích thước logo vào ô input
|
|
||||||
$elements.sizeValueSpan.text(`${$img.width()}px`); // Hiển thị kích thước logo
|
|
||||||
}
|
|
||||||
|
|
||||||
function showBoxOptions() {
|
|
||||||
$elements.boxOptions.show();
|
|
||||||
$elements.textOptions.hide();
|
|
||||||
$elements.imageOptions.hide();
|
$elements.imageOptions.hide();
|
||||||
const $title = currentElement.find('.title');
|
$elements.bgOptions.hide();
|
||||||
$('#BackgroundColor').val(extractColor(currentElement, 'bg'));
|
|
||||||
$('#InputCodeBox').val(extractColor(currentElement, 'bg'));
|
|
||||||
$('#changeInputBox').val(extractColor(currentElement, 'bg'));
|
|
||||||
$elements.textContentInput.val($title.text().trim());
|
$elements.textContentInput.val($title.text().trim());
|
||||||
$elements.textColorInput.val(extractColor($title, 'text'));
|
$elements.textColorInput.val(extractColor($title, 'text'));
|
||||||
$elements.textBackgroundInput.val(extractColor($title, 'bg'));
|
$elements.textBackgroundInput.val(extractColor($title, 'bg'));
|
||||||
$elements.lineHeightInput.val(parseFloat($title.css('line-height')));
|
$elements.lineHeightInput.val(parseFloat($title.css('line-height')));
|
||||||
$('#fontSize').val(parseFloat($title.css('font-size')));
|
$('#fontSize').val(parseFloat($title.css('font-size')));
|
||||||
$('#fontFamily').val($title.css('font-family'));
|
$('#fontFamily').val($title.css('font-family'));
|
||||||
var a = $('#BgcolorCode').val(extractColor($title, 'bg'));
|
$('#BgcolorCode').val(extractColor($title, 'bg'));
|
||||||
console.log(a)
|
|
||||||
$('#colorCodeTitle').val(extractColor($title, 'text'));
|
$('#colorCodeTitle').val(extractColor($title, 'text'));
|
||||||
$('#borderColorBox').val(extractColor(currentElement, 'border'))
|
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* Trích xuất mã màu từ lớp CSS của phần tử.
|
||||||
|
* @param $element - Phần tử để lấy mã màu.
|
||||||
|
* @param type - Loại mã màu ('text' hoặc 'bg').
|
||||||
|
* @returns Mã màu đã được trích xuất hoặc '#000000' nếu không có.
|
||||||
|
*/
|
||||||
function extractColor($element, type) {
|
function extractColor($element, type) {
|
||||||
// Tạo regex để tìm các lớp màu (chẳng hạn như text-[#FF5733])
|
var _a;
|
||||||
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
|
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
|
||||||
|
const match = (_a = $element.attr('class')) === null || _a === void 0 ? void 0 : _a.match(regex);
|
||||||
// Tìm kiếm lớp màu trong các lớp của phần tử
|
|
||||||
const match = $element.attr('class').match(regex);
|
|
||||||
|
|
||||||
// Nếu tìm thấy lớp phù hợp, trả về màu sắc, nếu không trả về màu mặc định là #000000
|
|
||||||
return match ? match[1] : '#000000';
|
return match ? match[1] : '#000000';
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
function updateColorPicker(event, type) {
|
* Lưu trạng thái hiện tại vào lịch sử trạng thái.
|
||||||
const textColor = $("#textColor");
|
*/
|
||||||
const textCodeColor = $("#colorCodeTitle");
|
function saveCurrentState() {
|
||||||
const BgColor = $("#textBackground");
|
const currentHTML = document.documentElement.innerHTML;
|
||||||
let element = '';
|
if (currentStateIndex < historyStates.length - 1) {
|
||||||
if (currentElement.data('type') === 'title') {
|
historyStates = historyStates.slice(0, currentStateIndex + 1);
|
||||||
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 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 if (type === 'box') {
|
|
||||||
const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val());
|
|
||||||
if (isValidHex) {
|
|
||||||
BgColor.val($(event.target).val());
|
|
||||||
element.find('.title').css('background', $(event.target).val());
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
historyStates.push(currentHTML);
|
||||||
|
currentStateIndex++;
|
||||||
}
|
}
|
||||||
|
// (Các hàm khác tương tự như goBack, applyChanges, updateLineHeight, ...)
|
||||||
function syncColorInputs(event, type) {
|
// Đảm bảo mỗi hàm có chú thích chi tiết về chức năng, tham số và kiểu trả về.
|
||||||
const inputColorText = $('#colorCodeTitle');
|
|
||||||
let inputBg = '';
|
|
||||||
let Bg = '';
|
|
||||||
if (currentElement.data('type') === 'title' || currentElement.data('type') === 'box') {
|
|
||||||
inputBg = $('#BgcolorCode');
|
|
||||||
bg = $(currentElement).find('.title');
|
|
||||||
} else {
|
|
||||||
inputBg = $('#InputCodeBg');
|
|
||||||
bg = $(currentElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type == 'text' || currentElement.data('type') === 'box') {
|
|
||||||
inputColorText.val($(event.target).val());
|
|
||||||
} else {
|
|
||||||
inputBg.val($(event.target).val());
|
|
||||||
bg.css('background', $(event.target).val());
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
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 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 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// hủy chỉnh sửa
|
|
||||||
function cancelEdit() {
|
|
||||||
$elements.tabBar.hide();
|
|
||||||
}
|
|
||||||
|
|||||||
240
assets/js/edit.ts
Normal file
240
assets/js/edit.ts
Normal file
@@ -0,0 +1,240 @@
|
|||||||
|
import $ from 'jquery';
|
||||||
|
|
||||||
|
|
||||||
|
// Khai báo các biến trạng thái chính để quản lý lịch sử các trạng thái giao diện
|
||||||
|
let historyStates: string[] = []; // Lưu trữ lịch sử HTML của trang
|
||||||
|
let currentStateIndex: number = -1; // Chỉ số trạng thái hiện tại trong lịch sử
|
||||||
|
let currentElement: JQuery<HTMLElement> | null = null; // Phần tử hiện đang chỉnh sửa
|
||||||
|
let isEditMode: boolean = false; // Xác định chế độ chỉnh sửa có được bật không
|
||||||
|
|
||||||
|
|
||||||
|
// Định nghĩa kiểu dữ liệu cho phần tử giao diện
|
||||||
|
interface Elements {
|
||||||
|
toggleEditModeButton: JQuery<HTMLElement>;
|
||||||
|
tabBar: JQuery<HTMLElement>;
|
||||||
|
textOptions: JQuery<HTMLElement>;
|
||||||
|
imageOptions: JQuery<HTMLElement>;
|
||||||
|
boxOptions: JQuery<HTMLElement>;
|
||||||
|
bgOptions: JQuery<HTMLElement>;
|
||||||
|
textColorInput: JQuery<HTMLInputElement>;
|
||||||
|
textBackgroundInput: JQuery<HTMLInputElement>;
|
||||||
|
textContentInput: JQuery<HTMLInputElement>;
|
||||||
|
imageURLInput: JQuery<HTMLInputElement>;
|
||||||
|
imageUploadInput: JQuery<HTMLInputElement>;
|
||||||
|
logoSizeInput: JQuery<HTMLInputElement>;
|
||||||
|
sizeValueSpan: JQuery<HTMLElement>;
|
||||||
|
lineHeightInput: JQuery<HTMLInputElement>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Các phần tử giao diện được chọn từ DOM, chứa các thành phần tương tác trong giao diện chỉnh sửa
|
||||||
|
const $elements: Elements = {
|
||||||
|
// Nút để bật hoặc tắt chế độ chỉnh sửa
|
||||||
|
toggleEditModeButton: $('#toggleEditMode'),
|
||||||
|
|
||||||
|
// Thanh công cụ hiển thị các tùy chọn khi chỉnh sửa phần tử
|
||||||
|
tabBar: $('#tabBar'),
|
||||||
|
|
||||||
|
// Phần tùy chọn cho chỉnh sửa văn bản, bao gồm các thiết lập màu, nội dung và khoảng cách dòng
|
||||||
|
textOptions: $('#textOptions'),
|
||||||
|
|
||||||
|
// Phần tùy chọn cho chỉnh sửa ảnh, bao gồm URL ảnh và kích thước
|
||||||
|
imageOptions: $('#imageOptions'),
|
||||||
|
|
||||||
|
// Phần tùy chọn cho chỉnh sửa hộp (box), có thể dùng để thay đổi kích thước hoặc màu nền
|
||||||
|
boxOptions: $('#BoxOptions'),
|
||||||
|
|
||||||
|
// Phần tùy chọn cho chỉnh sửa nền, cho phép thiết lập màu nền
|
||||||
|
bgOptions: $('#bgOptions'),
|
||||||
|
|
||||||
|
// Trường nhập liệu cho màu chữ, cho phép người dùng chọn màu chữ của tiêu đề hoặc văn bản
|
||||||
|
textColorInput: $('#textColor'),
|
||||||
|
|
||||||
|
// Trường nhập liệu cho màu nền của văn bản, cho phép người dùng thay đổi màu nền của tiêu đề
|
||||||
|
textBackgroundInput: $('#textBackground'),
|
||||||
|
|
||||||
|
// Trường nhập liệu cho nội dung văn bản, dùng để chỉnh sửa nội dung của tiêu đề
|
||||||
|
textContentInput: $('#textContent'),
|
||||||
|
|
||||||
|
// Trường nhập liệu URL của ảnh, cho phép người dùng nhập URL để thay đổi ảnh
|
||||||
|
imageURLInput: $('#imageURL'),
|
||||||
|
|
||||||
|
// Trường tải lên ảnh, cho phép người dùng tải ảnh trực tiếp từ máy tính
|
||||||
|
imageUploadInput: $('#imageUpload'),
|
||||||
|
|
||||||
|
// Trường nhập liệu cho kích thước logo, dùng để điều chỉnh kích thước ảnh hoặc logo
|
||||||
|
logoSizeInput: $('#logoSize'),
|
||||||
|
|
||||||
|
// Hiển thị giá trị kích thước hiện tại của ảnh, được cập nhật khi thay đổi kích thước logo
|
||||||
|
sizeValueSpan: $('#sizeValue'),
|
||||||
|
|
||||||
|
// Trường nhập liệu khoảng cách dòng, giúp người dùng điều chỉnh khoảng cách dòng của văn bản
|
||||||
|
lineHeightInput: $('#lineHeight')
|
||||||
|
};
|
||||||
|
|
||||||
|
// Lắng nghe sự kiện scroll để chuyển chế độ cố định cho thanh công cụ khi cuộn xuống
|
||||||
|
$(window).scroll((): void => {
|
||||||
|
const scrollTop: number = $(window).scrollTop() ?? 0;
|
||||||
|
$(".mode-edit").toggleClass('fixed', scrollTop > 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bật/tắt chế độ chỉnh sửa.
|
||||||
|
* Khi bật, các phần tử sẽ có thể chỉnh sửa, và ngược lại.
|
||||||
|
*/
|
||||||
|
$elements.toggleEditModeButton.on('click', function () {
|
||||||
|
isEditMode = !isEditMode;
|
||||||
|
$('.editable-element').toggleClass('editable', isEditMode);
|
||||||
|
$elements.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');
|
||||||
|
$elements.tabBar.hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cập nhật màu sắc của phần tử hiện tại.
|
||||||
|
* @param type - Loại màu sắc cần thay đổi ('text' hoặc 'bg').
|
||||||
|
* @param color - Mã màu cần áp dụng cho phần tử.
|
||||||
|
*/
|
||||||
|
function updateElementColor(type: 'text' | 'bg', color: string): void {
|
||||||
|
if (!currentElement) return;
|
||||||
|
const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
|
||||||
|
currentElement.find('.title').attr('class', function (i, c) {
|
||||||
|
return c ? c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' ') : className;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Xử lý tải ảnh lên và gán ảnh mới cho phần tử.
|
||||||
|
* @param event - Sự kiện thay đổi từ ô tải ảnh lên.
|
||||||
|
*/
|
||||||
|
function handleImageUpload(event: JQuery.ChangeEvent): void {
|
||||||
|
const file = (event.target as HTMLInputElement).files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = function () {
|
||||||
|
currentElement?.find('img').attr('src', reader.result as string);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bắt đầu chế độ chỉnh sửa cho phần tử được chọn.
|
||||||
|
* @param event - Sự kiện click để bắt đầu chỉnh sửa.
|
||||||
|
* @param button - Nút bấm để kích hoạt chỉnh sửa phần tử.
|
||||||
|
*/
|
||||||
|
function startEditing(event: JQuery.ClickEvent, button: HTMLElement): void {
|
||||||
|
if (!isEditMode) return;
|
||||||
|
event.stopPropagation();
|
||||||
|
currentElement = $(button).closest('.editable-element');
|
||||||
|
$elements.tabBar.show();
|
||||||
|
setupOptions();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Thiết lập các tùy chọn cho phần tử đang chỉnh sửa dựa trên loại của nó.
|
||||||
|
*/
|
||||||
|
function setupOptions(): void {
|
||||||
|
if (!currentElement) return;
|
||||||
|
const elementType = currentElement.data('type') as string;
|
||||||
|
if (elementType === 'box') {
|
||||||
|
showBoxOptions(currentElement);
|
||||||
|
} else if (elementType === 'title') {
|
||||||
|
showTextOptions(currentElement.find('.title'));
|
||||||
|
} else if (elementType === 'background') {
|
||||||
|
showBgOptions();
|
||||||
|
} else if (elementType === 'image') {
|
||||||
|
showImageOptions();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Các hàm hiển thị và xử lý tùy chọn (showTextOptions, showBgOptions, showImageOptions, showBoxOptions)
|
||||||
|
// Thêm vào TypeScript, định nghĩa tham số và chú thích
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hiển thị các tùy chọn văn bản cho phần tử tiêu đề.
|
||||||
|
* @param $title - Phần tử tiêu đề hiện tại.
|
||||||
|
*/
|
||||||
|
function showTextOptions($title: JQuery<HTMLElement>): void {
|
||||||
|
// Hiển thị các tùy chọn và thiết lập giá trị hiện tại cho ô input
|
||||||
|
$elements.textOptions.show();
|
||||||
|
$elements.boxOptions.hide();
|
||||||
|
$elements.imageOptions.hide();
|
||||||
|
$elements.bgOptions.hide();
|
||||||
|
$elements.textContentInput.val($title.text().trim());
|
||||||
|
$elements.textColorInput.val(extractColor($title, 'text'));
|
||||||
|
$elements.textBackgroundInput.val(extractColor($title, 'bg'));
|
||||||
|
$elements.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'));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Trích xuất mã màu từ lớp CSS của phần tử.
|
||||||
|
* @param $element - Phần tử để lấy mã màu.
|
||||||
|
* @param type - Loại mã màu ('text' hoặc 'bg').
|
||||||
|
* @returns Mã màu đã được trích xuất hoặc '#000000' nếu không có.
|
||||||
|
*/
|
||||||
|
function extractColor($element: JQuery<HTMLElement>, type: 'text' | 'bg'): string {
|
||||||
|
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
|
||||||
|
const match = $element.attr('class')?.match(regex);
|
||||||
|
return match ? match[1] : '#000000';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Lưu trạng thái hiện tại vào lịch sử trạng thái.
|
||||||
|
*/
|
||||||
|
function saveCurrentState(): void {
|
||||||
|
const currentHTML = document.documentElement.innerHTML;
|
||||||
|
if (currentStateIndex < historyStates.length - 1) {
|
||||||
|
historyStates = historyStates.slice(0, currentStateIndex + 1);
|
||||||
|
}
|
||||||
|
historyStates.push(currentHTML);
|
||||||
|
currentStateIndex++;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// hàm xử lý chỉnh sửa box
|
||||||
|
function showBoxOptions(currentElement: JQuery<HTMLElement>): void {
|
||||||
|
// Đảm bảo $elements có kiểu chính xác
|
||||||
|
// .show() và .hide() trả về đối tượng jQuery, nên không cần lưu giá trị trả về
|
||||||
|
$elements.boxOptions.show();
|
||||||
|
$elements.textOptions.hide();
|
||||||
|
$elements.imageOptions.hide();
|
||||||
|
|
||||||
|
// Lấy phần tử có class 'title' từ currentElement, với kiểu JQuery<HTMLElement>
|
||||||
|
const $title: JQuery<HTMLElement> = currentElement.find('.title');
|
||||||
|
|
||||||
|
// Sử dụng phương thức extractColor để lấy màu nền, và gán giá trị vào các input
|
||||||
|
// Giả sử extractColor trả về kiểu string hoặc null
|
||||||
|
$('#BackgroundColor').val(extractColor(currentElement, 'bg') ?? ''); // Gán giá trị mặc định nếu null
|
||||||
|
$('#InputCodeBox').val(extractColor(currentElement, 'bg') ?? '');
|
||||||
|
$('#changeInputBox').val(extractColor(currentElement, 'bg') ?? '');
|
||||||
|
|
||||||
|
// Lấy và gán giá trị text của title vào input textContentInput
|
||||||
|
// .text() trả về string
|
||||||
|
$elements.textContentInput.val($title.text().trim());
|
||||||
|
|
||||||
|
// Lấy màu sắc văn bản từ title và gán vào các input tương ứng
|
||||||
|
$elements.textColorInput.val(extractColor($title, 'text') ?? '');
|
||||||
|
$elements.textBackgroundInput.val(extractColor($title, 'bg') ?? '');
|
||||||
|
|
||||||
|
// Lấy chiều cao dòng (line-height) của title, và ép kiểu sang float
|
||||||
|
$elements.lineHeightInput.val(parseFloat($title.css('line-height') ?? '0'));
|
||||||
|
|
||||||
|
// Lấy kích thước font của title, ép kiểu sang float
|
||||||
|
$('#fontSize').val(parseFloat($title.css('font-size') ?? '0'));
|
||||||
|
|
||||||
|
// Lấy font-family của title và gán vào input fontFamily
|
||||||
|
$('#fontFamily').val($title.css('font-family') ?? '');
|
||||||
|
|
||||||
|
// Gán màu nền của title vào input BgcolorCode
|
||||||
|
const a: string | undefined = $('#BgcolorCode').val(extractColor($title, 'bg') ?? '') as string;
|
||||||
|
console.log(a); // In ra giá trị lấy từ extractColor
|
||||||
|
|
||||||
|
// Gán màu sắc của title vào input colorCodeTitle
|
||||||
|
$('#colorCodeTitle').val(extractColor($title, 'text') ?? '');
|
||||||
|
|
||||||
|
// Gán màu biên của currentElement vào input borderColorBox
|
||||||
|
$('#borderColorBox').val(extractColor(currentElement, 'border') ?? '');
|
||||||
|
}
|
||||||
|
|
||||||
383
detail-auction-1.html
Normal file
383
detail-auction-1.html
Normal file
@@ -0,0 +1,383 @@
|
|||||||
|
<!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="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 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">
|
||||||
|
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
||||||
|
<span class="text-white p-[0_5px] hover:text-yellow">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-white p-[0_5px] hover:text-yellow">Tài khoản</span>
|
||||||
|
<i class="fa-solid fa-caret-down text-white"></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="aution-details-page">
|
||||||
|
<div class="container">
|
||||||
|
<div class="breadcrumb w-full float-left p-0 m-0 bg-none">
|
||||||
|
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item" class="nopad-l text-[14px]">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
|
||||||
|
chủ</span></span>
|
||||||
|
</a> <i class="leading-[40px] m-[0_10px]">/</i>
|
||||||
|
<meta itemprop="position" content="1">
|
||||||
|
</li>
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||||
|
Đấu giá
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2">
|
||||||
|
</li>
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||||
|
Laptop Acer Aspire 7 A715-76-53PJ ...
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2">
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
|
||||||
|
<div class="w-[1000px] m-[0_auto_100px_auto]">
|
||||||
|
<div class="info-product flex m-[25px_auto_auto] w-[750px]">
|
||||||
|
<div class="image w-[150px] h-[150px] block mr-[52px]">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain" src="./assets/images/image-thumb-1.png"
|
||||||
|
width="100%" height="100%" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="info mt-[5px]">
|
||||||
|
<div class="name text-[20px] text-[#000] mb-[10px]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007 (Intel
|
||||||
|
Core
|
||||||
|
i5-12450H | Đen)
|
||||||
|
</div>
|
||||||
|
<div class="box-price-live flex">
|
||||||
|
<i class="fas fa-caret-up text-[#2ad363] text-[32px] mt-[8px] mr-[5px]"></i>
|
||||||
|
<div class="current-price text-[28px] font-[700] text-[#ef0000]" id="js-price-present">
|
||||||
|
125.000.000</div>
|
||||||
|
<div class="unit-price mt-[12px] ml-[5px]">VNĐ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-user flex">
|
||||||
|
<div class="left w-[490px] mr-[32px]">
|
||||||
|
<div class="text-[20px] mb-[12px] uppercase">Diễn biến đấu giá</div>
|
||||||
|
|
||||||
|
<div class="list-user-auction bg-[#fff5e5] p-[10px] rounded-[15px] overflow-hidden mt-[15px]">
|
||||||
|
<div class="content-user overflow-x-hidden overflow-y-scroll max-h-[210px] pr-[10px]">
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-up font-[16px] mt-[3px] mr-[5px] text-[#2ad363]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right w-[calc(100%_-522px)]">
|
||||||
|
<div
|
||||||
|
class="box-group-time flex items-center justify-between bg-[var(--bg-time-auction)] w-full p-[10px] rounded-[5px] mb-[15px]">
|
||||||
|
<div class="left flex items-center ">
|
||||||
|
<img src="./assets/images/icon-auction-2.png" alt="" class="w-[26px] block mr-[5px]">
|
||||||
|
<p class="title text-[14px] uppercase font-[700] text-white ml-[5px]">Thời gian còn lại
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="right flex items-center">
|
||||||
|
<div class="p-box-time flex items-center justify-center bg-[var(--bg-timeout-detail)] w-[115px] h-[28px] leading-[28px]
|
||||||
|
rounded-[14px] mr-[10px]">
|
||||||
|
<i class="icon time"></i>
|
||||||
|
<div class="box-time">
|
||||||
|
<div class="item-time"><b>00</b></div>
|
||||||
|
<div class="item-time"><b>30</b></div>
|
||||||
|
<div class="item-time"><b>00</b></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="total-auction w-[62px] h-[27px] leading-[27px] text-center text-white rounded-[14px] flex items-center justify-center background-yellow">
|
||||||
|
<i class="icon auction"></i>
|
||||||
|
<span>200</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list flex items-center">
|
||||||
|
<p class="uppercase mr-[10px] whitespace-nowrap">Chọn đấu ngay</p>
|
||||||
|
<div class="flex items-center mr-[-10px]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_15px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_15px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_15px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_15px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="or flex items-center text-center m-[20px_0]">
|
||||||
|
Hoặc
|
||||||
|
</div>
|
||||||
|
<div class="form-input-price mt-[20px]">
|
||||||
|
<div class="p-title text-[20px] font-[400] uppercase mb-[10px]">Nhập giá đấu của
|
||||||
|
bạn</div>
|
||||||
|
<div class="form-input mt-[10px] flex">
|
||||||
|
<input type="text" value="126.000.000" id="js-input-price" placeholder="Nhập giá"
|
||||||
|
class="input-price w-[calc(100%_-56px)] h-[56px] border-[1px] border-[#afafaf] rounded-[28px_0_0_28px] text-[32px] p-[0_20px]">
|
||||||
|
<button
|
||||||
|
class="btn-send w-[68px] h-[56px] flex items-center justify-center bg-[#166DD8] outline-none border-0 text-white text-[24px] rounded-[0_28px_28px_0]"
|
||||||
|
onclick="checkSendAuction()">
|
||||||
|
<i class="fas fa-paper-plane"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="box-faq mt-[25px]">
|
||||||
|
<div class="container">
|
||||||
|
<div class="background-faq border-[2px] border-[var(--border-faq)] p-[10px] rounded-[15px]">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-footer background-footer mt-[20px]">
|
||||||
|
<div class="container">
|
||||||
|
<div
|
||||||
|
class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#646386]">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</html>
|
||||||
243
detail-auction-2.html
Normal file
243
detail-auction-2.html
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<!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="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 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">
|
||||||
|
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
||||||
|
<span class="text-white p-[0_5px] hover:text-yellow">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-white p-[0_5px] hover:text-yellow">Tài khoản</span>
|
||||||
|
<i class="fa-solid fa-caret-down text-white"></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="aution-details-page">
|
||||||
|
<div class="container">
|
||||||
|
<div class="breadcrumb w-full float-left p-0 m-0 bg-none">
|
||||||
|
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item" class="nopad-l text-[14px]">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
|
||||||
|
chủ</span></span>
|
||||||
|
</a> <i class="leading-[40px] m-[0_10px]">/</i>
|
||||||
|
<meta itemprop="position" content="1">
|
||||||
|
</li>
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||||
|
Đấu giá
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2">
|
||||||
|
</li>
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||||
|
Laptop Acer Aspire 7 A715-76-53PJ ...
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2">
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
|
||||||
|
<div class="w-[592px] m-[0_auto_100px_auto]">
|
||||||
|
<div class="info-product flex m-[25px_auto_auto]">
|
||||||
|
<div class="image w-[150px] h-[150px] block mr-[52px]">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain" src="./assets/images/image-thumb-1.png"
|
||||||
|
width="100%" height="100%" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="info mt-[5px]">
|
||||||
|
<div class="name text-[20px] text-[#000] mb-[10px]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007 (Intel
|
||||||
|
Core
|
||||||
|
i5-12450H | Đen)
|
||||||
|
</div>
|
||||||
|
<div class="box-price-live flex">
|
||||||
|
<i class="fas fa-caret-up text-[#2ad363] text-[32px] mt-[8px] mr-[5px]"></i>
|
||||||
|
<div class="current-price text-[28px] font-[700] text-[#ef0000]" id="js-price-present">
|
||||||
|
125.000.000</div>
|
||||||
|
<div class="unit-price mt-[12px] ml-[5px]">VNĐ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="box-group-time flex items-center justify-between bg-[var(--bg-time-auction)] w-full p-[10px] rounded-[5px]">
|
||||||
|
<div class="left flex items-center ">
|
||||||
|
<img src="./assets/images/icon-auction-2.png" alt="" class="w-[26px] block mr-[5px]">
|
||||||
|
<p class="title text-[14px] uppercase font-[700] text-white ml-[5px]">Thời gian còn lại
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="right flex items-center">
|
||||||
|
<div class="p-box-time flex items-center justify-center bg-[var(--bg-timeout-detail)] w-[115px] h-[28px] leading-[28px]
|
||||||
|
rounded-[14px] mr-[10px]">
|
||||||
|
<i class="icon time"></i>
|
||||||
|
<div class="box-time">
|
||||||
|
<div class="item-time"><b>00</b></div>
|
||||||
|
<div class="item-time"><b>30</b></div>
|
||||||
|
<div class="item-time"><b>00</b></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="total-auction w-[62px] h-[27px] leading-[27px] text-center text-white rounded-[14px] flex items-center justify-center background-yellow">
|
||||||
|
<i class="icon auction"></i>
|
||||||
|
<span>200</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-input-price m-[20px_0]">
|
||||||
|
<div class="p-title text-[20px] font-[400] uppercase mb-[10px]">Nhập giá đấu của
|
||||||
|
bạn</div>
|
||||||
|
<div class="form-input mt-[10px] flex">
|
||||||
|
<input type="text" value="126.000.000" id="js-input-price" placeholder="Nhập giá"
|
||||||
|
class="input-price w-[calc(100%_-56px)] h-[56px] border-[1px] border-[#afafaf] rounded-[28px_0_0_28px] text-[32px] p-[0_20px]">
|
||||||
|
<button
|
||||||
|
class="btn-send w-[68px] h-[56px] flex items-center justify-center bg-[#166DD8] outline-none border-0 text-white text-[24px] rounded-[0_28px_28px_0]"
|
||||||
|
onclick="checkSendAuction()">
|
||||||
|
<i class="fas fa-paper-plane"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[20px] mb-[12px] uppercase">Diễn biến đấu giá</div>
|
||||||
|
<div class="list flex items-center">
|
||||||
|
<p class="uppercase mr-[10px] whitespace-nowrap">Chọn đấu ngay</p>
|
||||||
|
<div class="flex items-center mr-[-10px]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_16px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_16px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_16px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_16px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_16px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list-user-auction bg-[#fff5e5] p-[10px] rounded-[15px] overflow-hidden mt-[15px]">
|
||||||
|
<div class="content-user overflow-x-hidden overflow-y-scroll max-h-[210px] pr-[10px]">
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-up font-[16px] mt-[3px] mr-[5px] text-[#2ad363]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
379
detail-auction.html
Normal file
379
detail-auction.html
Normal file
@@ -0,0 +1,379 @@
|
|||||||
|
<!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="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 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">
|
||||||
|
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
|
||||||
|
<span class="text-white p-[0_5px] hover:text-yellow">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-white p-[0_5px] hover:text-yellow">Tài khoản</span>
|
||||||
|
<i class="fa-solid fa-caret-down text-white"></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="aution-details-page">
|
||||||
|
<div class="container">
|
||||||
|
<div class="breadcrumb w-full float-left p-0 m-0 bg-none">
|
||||||
|
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item" class="nopad-l text-[14px]">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
|
||||||
|
chủ</span></span>
|
||||||
|
</a> <i class="leading-[40px] m-[0_10px]">/</i>
|
||||||
|
<meta itemprop="position" content="1">
|
||||||
|
</li>
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||||
|
Đấu giá
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2">
|
||||||
|
</li>
|
||||||
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||||
|
class="float-left list-none">
|
||||||
|
<a href="/" itemprop="item">
|
||||||
|
<span itemprop="name" class="float-left flex items-center leading-[40px]">
|
||||||
|
Laptop Acer Aspire 7 A715-76-53PJ ...
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2">
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
|
||||||
|
<div class="w-[1000px] m-[0_auto_100px_auto]">
|
||||||
|
<div class="info-product flex m-[25px_auto_auto] w-[750px]">
|
||||||
|
<div class="image w-[150px] h-[150px] block mr-[52px]">
|
||||||
|
<img class="block w-[100%] h-[100%] object-contain" src="./assets/images/image-thumb-1.png"
|
||||||
|
width="100%" height="100%" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="info mt-[5px]">
|
||||||
|
<div class="name text-[20px] text-[#000] mb-[10px]">Laptop Acer Aspire 7 A715-76-53PJ
|
||||||
|
NH.QGESV.007 (Intel
|
||||||
|
Core
|
||||||
|
i5-12450H | Đen)
|
||||||
|
</div>
|
||||||
|
<div class="box-price-live flex">
|
||||||
|
<i class="fas fa-caret-up text-[#2ad363] text-[32px] mt-[8px] mr-[5px]"></i>
|
||||||
|
<div class="current-price text-[28px] font-[700] text-[#ef0000]" id="js-price-present">
|
||||||
|
125.000.000</div>
|
||||||
|
<div class="unit-price mt-[12px] ml-[5px]">VNĐ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-user flex">
|
||||||
|
<div class="left w-[592px] mr-[50px]">
|
||||||
|
<div class="text-[20px] mb-[12px] uppercase">Diễn biến đấu giá</div>
|
||||||
|
<div class="list flex items-center">
|
||||||
|
<p class="uppercase mr-[10px]">Chọn đấu ngay</p>
|
||||||
|
<div class="flex items-center mr-[-10px]">
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_26px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_26px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_26px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
<a href="javascript:void(0)"
|
||||||
|
class="p-[10px_26px] text-[14px] mr-[10px] uppercase text-[#fff] bg-[#166DD8] rounded-[20px]">125.3
|
||||||
|
TR</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list-user-auction bg-[#fff5e5] p-[10px] rounded-[15px] overflow-hidden mt-[15px]">
|
||||||
|
<div class="content-user overflow-x-hidden overflow-y-scroll max-h-[210px] pr-[10px]">
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-up font-[16px] mt-[3px] mr-[5px] text-[#2ad363]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
|
||||||
|
<div class="info-left flex items-center">
|
||||||
|
<i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
|
||||||
|
<div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
|
||||||
|
<div class="info-user flex items-center">
|
||||||
|
<a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
|
||||||
|
<span>trả</span>
|
||||||
|
<div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="time font-[700]">00:30:11</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right w-[calc(100%_-592px)]">
|
||||||
|
<div
|
||||||
|
class="box-group-time flex items-center justify-between bg-[var(--bg-time-auction)] w-full p-[10px] rounded-[5px]">
|
||||||
|
<div class="left flex items-center ">
|
||||||
|
<img src="./assets/images/icon-auction-2.png" alt="" class="w-[26px] block mr-[5px]">
|
||||||
|
<p class="title text-[14px] uppercase font-[700] text-white ml-[5px]">Thời gian còn lại
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="right flex items-center">
|
||||||
|
<div class="p-box-time flex items-center justify-center bg-[var(--bg-timeout-detail)] w-[115px] h-[28px] leading-[28px]
|
||||||
|
rounded-[14px] mr-[10px]">
|
||||||
|
<i class="icon time"></i>
|
||||||
|
<div class="box-time">
|
||||||
|
<div class="item-time"><b>00</b></div>
|
||||||
|
<div class="item-time"><b>30</b></div>
|
||||||
|
<div class="item-time"><b>00</b></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="total-auction w-[62px] h-[27px] leading-[27px] text-center text-white rounded-[14px] flex items-center justify-center background-yellow">
|
||||||
|
<i class="icon auction"></i>
|
||||||
|
<span>200</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-input-price mt-[20px]">
|
||||||
|
<div class="p-title text-[20px] font-[400] uppercase mb-[10px]">Nhập giá đấu của
|
||||||
|
bạn</div>
|
||||||
|
<div class="form-input mt-[10px] flex">
|
||||||
|
<input type="text" value="126.000.000" id="js-input-price" placeholder="Nhập giá"
|
||||||
|
class="input-price w-[calc(100%_-56px)] h-[56px] border-[1px] border-[#afafaf] rounded-[28px_0_0_28px] text-[32px] p-[0_20px]">
|
||||||
|
<button
|
||||||
|
class="btn-send w-[68px] h-[56px] flex items-center justify-center bg-[#166DD8] outline-none border-0 text-white text-[24px] rounded-[0_28px_28px_0]"
|
||||||
|
onclick="checkSendAuction()">
|
||||||
|
<i class="fas fa-paper-plane"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="box-faq mt-[25px]">
|
||||||
|
<div class="container">
|
||||||
|
<div class="background-faq border-[2px] border-[var(--border-faq)] p-[10px] rounded-[15px]">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-footer background-footer mt-[20px]">
|
||||||
|
<div class="container">
|
||||||
|
<div
|
||||||
|
class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#646386]">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</html>
|
||||||
1601
detail.html
1601
detail.html
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user