renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add price policy

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-03 11:20:09 +07:00
parent c0527a086c
commit 21c1c3372c
53 changed files with 7160 additions and 2361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

462
html/chinh-sach-gia.html Normal file
View File

@@ -0,0 +1,462 @@
<!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>