<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Danh sách đơn hàng</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f8f8f8;
margin: 30px;
}
table {
width: 100%;
border-collapse: collapse;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
border-radius: 12px;
overflow: hidden;
}
th, td {
padding: 16px;
border-bottom: 1px solid #eee;
text-align: center;
}
th {
background-color: #f0f0f0;
color: #444;
}
/* Hover Box */
.hover-box-2 {
position: relative;
overflow: hidden;
width: 240px;
height: 50px;
background: linear-gradient(135deg, #ffe4ec, #fff0f5);
border-radius: 12px;
text-align: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin: 0 auto;
transition: transform 0.3s ease;
}
.hover-box-2:hover {
transform: scale(1.03);
}
.hover-box-2 .default-text,
.hover-box-2 .hover-text {
position: absolute;
width: 100%;
left: 0;
transition: all 0.4s ease-in-out;
line-height: 50px;
font-size: 18px;
font-weight: 600;
}
.hover-box-2 .default-text {
top: 0;
color: #444;
opacity: 1;
}
.hover-box-2 .hover-text {
top: 100%;
color: #e91e63;
opacity: 0;
}
.hover-box-2:hover .default-text {
top: -100%;
opacity: 0;
}
.hover-box-2:hover .hover-text {
top: 0;
opacity: 1;
}
/* Popup overlay */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
}
/* Nội dung popup */
.popup-content {
background: white;
padding: 25px 30px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
position: relative;
animation: popupScale 0.3s ease forwards;
font-family: Arial;
max-height: 80vh;
overflow-y: auto;
}
.popup-content h3 {
margin-top: 0;
margin-bottom: 15px;
color: #e91e63;
font-size: 20px;
}
.popup-content ul {
padding-left: 20px;
font-size: 15px;
color: #333;
margin: 0;
}
.popup-close {
position: absolute;
top: 8px;
right: 12px;
font-size: 22px;
color: #888;
cursor: pointer;
}
@keyframes popupScale {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
</style>
</head>
<body>
<h2>Danh sách đơn hàng</h2>
<table>
<thead>
<tr>
<th>STT</th>
<th>Thông tin đơn hàng</th>
</tr>
</thead>
<tbody>
<!-- Đơn hàng 1 -->
<tr>
<td>1</td>
<td>
<div class="hover-box-2" onclick="openPopup(this)" data-detail='
<ul>
<li>Dielac Grow Plus S2 1400g - số lượng: 2 x 574.000VNĐ</li>
<li>Sữa Primavita 3 800g - số lượng: 1 x 748.000VNĐ</li>
<li>Phí vận chuyển: 21.001 VNĐ</li>
</ul>'>
<span class="default-text">Tổng tiền</span>
<span class="hover-text">1.917.001 VNĐ</span>
</div>
</td>
</tr>
<!-- Đơn hàng 2 -->
<tr>
<td>2</td>
<td>
<div class="hover-box-2" onclick="openPopup(this)" data-detail='
<ul>
<li>Ensure Gold 850g - số lượng: 1 x 899.000VNĐ</li>
<li>Phí vận chuyển: 15.000 VNĐ</li>
</ul>'>
<span class="default-text">Tổng tiền</span>
<span class="hover-text">914.000 VNĐ</span>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Popup -->
<div id="popup" class="popup-overlay" onclick="closePopup(event)">
<div class="popup-content">
<span class="popup-close" onclick="closePopup(event)">×</span>
<h3>Chi tiết đơn hàng</h3>
<div id="popup-detail"></div>
</div>
</div>
<script>
function openPopup(element) {
const popup = document.getElementById('popup');
const detail = element.getAttribute('data-detail');
document.getElementById('popup-detail').innerHTML = detail;
popup.style.display = 'flex';
}
function closePopup(e) {
if (e.target.id === 'popup' || e.target.className === 'popup-close') {
document.getElementById('popup').style.display = 'none';
}
}
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét