462 lines
18 KiB
HTML
462 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chính sách giá - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="index.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Chính sách giá</h1>
|
|
<button class="back-button" onclick="openInfoModal()">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Tab Navigation -->
|
|
<div class="tab-nav mb-3">
|
|
<button class="tab-item active" data-tab="policy" onclick="switchTab('policy')">Chính sách giá</button>
|
|
<button class="tab-item" data-tab="pricelist" onclick="switchTab('pricelist')">Bảng giá</button>
|
|
</div>
|
|
|
|
<!-- Policy Tab Content -->
|
|
<div id="policyTab" class="tab-content active">
|
|
<div class="price-documents-list">
|
|
<!-- Document Card 1 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-pdf text-red-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Chính sách giá Eurotile T10/2025</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Công bố: 01/10/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Chính sách giá mới nhất cho sản phẩm gạch Eurotile, áp dụng từ tháng 10/2025
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('policy-eurotile-10-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Document Card 2 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-pdf text-red-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Chính sách giá Vasta Stone T10/2025</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Công bố: 01/10/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Chính sách giá đá tự nhiên Vasta Stone, hiệu lực từ tháng 10/2025
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('policy-vasta-10-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Document Card 3 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-pdf text-red-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Chính sách chiết khấu đại lý 2025</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Công bố: 15/09/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Chương trình chiết khấu và ưu đãi dành cho đại lý, thầu thợ
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('policy-dealer-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Document Card 4 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-pdf text-red-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Điều kiện thanh toán & giao hàng</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Công bố: 01/08/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Điều khoản thanh toán, chính sách giao hàng và bảo hành sản phẩm
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('policy-payment-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price List Tab Content -->
|
|
<div id="pricelistTab" class="tab-content" style="display: none;">
|
|
<div class="price-documents-list">
|
|
<!-- Document Card 1 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-excel text-green-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Bảng giá Gạch Granite Eurotile 2025</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Cập nhật: 01/10/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Bảng giá chi tiết toàn bộ sản phẩm gạch granite, kích thước 60x60, 80x80, 120x120
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('pricelist-granite-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Document Card 2 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-excel text-green-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Bảng giá Gạch Ceramic Eurotile 2025</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Cập nhật: 01/10/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Bảng giá gạch ceramic vân gỗ, vân đá, vân xi măng các loại
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('pricelist-ceramic-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Document Card 3 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-excel text-green-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Bảng giá Đá tự nhiên Vasta Stone 2025</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Cập nhật: 01/10/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Bảng giá đá marble, granite tự nhiên nhập khẩu, kích thước tấm lớn
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('pricelist-stone-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Document Card 4 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-excel text-green-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Bảng giá Phụ kiện & Vật liệu 2025</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Cập nhật: 15/09/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Giá keo dán, chà ron, nẹp nhựa, nẹp inox và các phụ kiện thi công
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('pricelist-accessories-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Document Card 5 -->
|
|
<div class="document-card">
|
|
<div class="document-icon">
|
|
<i class="fas fa-file-excel text-green-600"></i>
|
|
</div>
|
|
<div class="document-info">
|
|
<h3 class="document-title">Bảng giá Gạch Outdoor & Chống trơn 2025</h3>
|
|
<p class="document-meta">
|
|
<i class="fas fa-calendar-alt mr-1"></i>
|
|
Cập nhật: 01/09/2025
|
|
</p>
|
|
<p class="document-desc">
|
|
Bảng giá sản phẩm outdoor, gạch chống trơn dành cho ngoại thất
|
|
</p>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadPDF('pricelist-outdoor-2025')">
|
|
<i class="fas fa-download"></i>
|
|
Tải về
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Modal -->
|
|
<div id="infoModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-content info-modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" style="font-weight: bold;">Hướng dẫn sử dụng</h3>
|
|
<button class="modal-close" onclick="closeInfoModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Đây là nội dung hướng dẫn sử dụng cho tính năng Chính sách giá:</p>
|
|
<ul class="list-disc ml-6 mt-3">
|
|
<li>Chọn tab "Chính sách giá" để xem các chính sách giá hiện hành</li>
|
|
<li>Chọn tab "Bảng giá" để tải về bảng giá chi tiết sản phẩm</li>
|
|
<li>Nhấn nút "Tải về" để download file PDF/Excel</li>
|
|
<li>Các bảng giá được cập nhật định kỳ hàng tháng</li>
|
|
<li>Liên hệ sales để được tư vấn giá tốt nhất</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.price-documents-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.document-card {
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.document-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.document-icon {
|
|
font-size: 32px;
|
|
flex-shrink: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.document-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.document-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.document-meta {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.document-desc {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.download-btn {
|
|
background: #005B9A;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
background: #004a7c;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.download-btn i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 20px;
|
|
border-top: 1px solid #e5e7eb;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.document-card {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.download-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.tab-item.active {
|
|
background: var(--primary-blue);
|
|
color: var(--white);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function switchTab(tabName) {
|
|
// Update tab buttons
|
|
const tabButtons = document.querySelectorAll('.tab-item');
|
|
tabButtons.forEach(btn => {
|
|
if (btn.dataset.tab === tabName) {
|
|
btn.classList.add('active');
|
|
} else {
|
|
btn.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Update tab content
|
|
document.getElementById('policyTab').style.display = tabName === 'policy' ? 'block' : 'none';
|
|
document.getElementById('pricelistTab').style.display = tabName === 'pricelist' ? 'block' : 'none';
|
|
}
|
|
|
|
function downloadPDF(documentId) {
|
|
// Simulate PDF download
|
|
alert(`Đang tải file: ${documentId}.pdf\n\nFile sẽ được tải về máy của bạn trong giây lát.`);
|
|
|
|
// In a real application, this would trigger actual file download:
|
|
// window.location.href = `/api/documents/${documentId}/download`;
|
|
}
|
|
|
|
function openInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'none';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('modal-overlay')) {
|
|
e.target.style.display = 'none';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |