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

up

Browse Source
This commit is contained in:
Tieptk
2024-11-29 14:31:14 +07:00
parent 906627003d
commit 94dbf7420f
8 changed files with 2994 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
detail-auction-2.html Normal file
View 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>