738 lines
26 KiB
HTML
738 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chi tiết Yêu cầu Thiết kế - 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">
|
|
<style>
|
|
.detail-container {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #f8fafc;
|
|
min-height: calc(100vh - 120px);
|
|
}
|
|
|
|
.detail-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.request-header {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.request-id {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.request-date {
|
|
color: #6b7280;
|
|
font-size: 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-pending {
|
|
background: #fef3c7;
|
|
color: #d97706;
|
|
}
|
|
|
|
.status-designing {
|
|
background: #e0e7ff;
|
|
color: #3730a3;
|
|
}
|
|
|
|
.status-completed {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.info-item {
|
|
text-align: center;
|
|
padding: 16px 12px;
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.detail-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.section-content {
|
|
color: #4b5563;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 40px;
|
|
bottom: -20px;
|
|
width: 2px;
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
.timeline-item:last-child::before {
|
|
display: none;
|
|
}
|
|
|
|
.timeline-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
margin-right: 16px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-icon.pending {
|
|
background: #fef3c7;
|
|
color: #d97706;
|
|
}
|
|
|
|
.timeline-icon.designing {
|
|
background: #e0e7ff;
|
|
color: #3730a3;
|
|
}
|
|
|
|
.timeline-icon.completed {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.timeline-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.timeline-title {
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.timeline-description {
|
|
color: #6b7280;
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.timeline-date {
|
|
color: #9ca3af;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.completion-highlight {
|
|
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
border: 2px solid #10b981;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.completion-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #065f46;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.view-design-btn {
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin: 0 auto;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.view-design-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
|
|
}
|
|
|
|
.files-list {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
background: #f3f4f6;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.file-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #2563eb;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
margin-right: 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.file-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.file-name {
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: white;
|
|
color: #374151;
|
|
border: 2px solid #e5e7eb;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: #2563eb;
|
|
color: #2563eb;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: left;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="nha-mau.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Chi tiết Yêu cầu</h1>
|
|
<button class="icon-button" onclick="shareRequest()">
|
|
<i class="fas fa-share-alt"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="detail-container">
|
|
<!-- Request Header -->
|
|
<div class="detail-card">
|
|
<div class="request-header">
|
|
<h2 class="request-id" id="request-id">#YC001</h2>
|
|
<div class="request-date" id="request-date">Ngày gửi: 20/10/2024</div>
|
|
<span class="status-badge" id="status-badge">Hoàn thành</span>
|
|
</div>
|
|
|
|
<!-- Project Info Grid -->
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Diện tích</div>
|
|
<div class="info-value" id="project-area">120m²</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Phong cách</div>
|
|
<div class="info-value" id="project-style">Hiện đại</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Ngân sách</div>
|
|
<div class="info-value" id="project-budget">300-500 triệu</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Trạng thái</div>
|
|
<div class="info-value" id="project-status">Đã hoàn thành</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Completion Highlight (only show if completed) -->
|
|
<div class="completion-highlight" id="completion-highlight">
|
|
<h3 class="completion-title">🎉 Thiết kế đã hoàn thành!</h3>
|
|
<p style="color: #065f46; margin-bottom: 16px;">
|
|
Thiết kế 3D của bạn đã sẵn sàng để xem
|
|
</p>
|
|
<button class="view-design-btn" onclick="viewDesign3D()">
|
|
<i class="fas fa-cube"></i>
|
|
Xem Link Thiết kế 3D
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Project Details -->
|
|
<div class="detail-card">
|
|
<div class="detail-section">
|
|
<h3 class="section-title">
|
|
<i class="fas fa-info-circle" style="color: #2563eb;"></i>
|
|
Thông tin dự án
|
|
</h3>
|
|
<div class="section-content">
|
|
<p><strong>Tên dự án:</strong> <span id="project-name">Thiết kế nhà phố 3 tầng - Anh Minh (Quận 7)</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3 class="section-title">
|
|
<i class="fas fa-edit" style="color: #2563eb;"></i>
|
|
Mô tả yêu cầu
|
|
</h3>
|
|
<div class="section-content" id="project-description">
|
|
Thiết kế nhà phố 3 tầng phong cách hiện đại với 4 phòng ngủ, 3 phòng tắm, phòng khách rộng rãi và khu bếp mở.
|
|
Ưu tiên sử dụng gạch men màu sáng để tạo cảm giác thoáng đãng. Tầng 1: garage, phòng khách, bếp.
|
|
Tầng 2: 2 phòng ngủ, 2 phòng tắm. Tầng 3: phòng ngủ master, phòng làm việc, sân thượng.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3 class="section-title">
|
|
<i class="fas fa-phone" style="color: #2563eb;"></i>
|
|
Thông tin liên hệ
|
|
</h3>
|
|
<div class="section-content" id="contact-info">
|
|
SĐT: 0901234567 | Email: minh.nguyen@email.com
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3 class="section-title">
|
|
<i class="fas fa-paperclip" style="color: #2563eb;"></i>
|
|
Tài liệu đính kèm
|
|
</h3>
|
|
<div class="files-list" id="files-list">
|
|
<div class="file-item">
|
|
<div class="file-icon">
|
|
<i class="fas fa-image"></i>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">mat-bang-hien-tai.jpg</div>
|
|
</div>
|
|
</div>
|
|
<div class="file-item">
|
|
<div class="file-icon">
|
|
<i class="fas fa-drafting-compass"></i>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">ban-ve-kien-truc.dwg</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Timeline -->
|
|
<div class="detail-card">
|
|
<h3 class="section-title">
|
|
<i class="fas fa-history" style="color: #2563eb;"></i>
|
|
Lịch sử trạng thái
|
|
</h3>
|
|
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon completed">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Thiết kế hoàn thành</div>
|
|
<div class="timeline-description">File thiết kế 3D đã được gửi đến khách hàng</div>
|
|
<div class="timeline-date">25/10/2024 - 14:30</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon designing">
|
|
<i class="fas fa-drafting-compass"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Bắt đầu thiết kế</div>
|
|
<div class="timeline-description">KTS Nguyễn Văn An đã nhận và bắt đầu thiết kế</div>
|
|
<div class="timeline-date">22/10/2024 - 09:00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon pending">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Tiếp nhận yêu cầu</div>
|
|
<div class="timeline-description">Yêu cầu thiết kế đã được tiếp nhận và xem xét</div>
|
|
<div class="timeline-date">20/10/2024 - 16:45</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon pending">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Gửi yêu cầu</div>
|
|
<div class="timeline-description">Yêu cầu thiết kế đã được gửi thành công</div>
|
|
<div class="timeline-date">20/10/2024 - 16:30</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-buttons">
|
|
<button class="btn btn-secondary" onclick="editRequest()">
|
|
<i class="fas fa-edit"></i>
|
|
Chỉnh sửa
|
|
</button>
|
|
<button class="btn btn-primary" onclick="contactSupport()">
|
|
<i class="fas fa-comments"></i>
|
|
Liên hệ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<!--<div class="bottom-nav">
|
|
<a href="index.html" class="nav-item">
|
|
<i class="fas fa-home"></i>
|
|
<span>Trang chủ</span>
|
|
</a>
|
|
<a href="loyalty.html" class="nav-item">
|
|
<i class="fas fa-star"></i>
|
|
<span>Hội viên</span>
|
|
</a>
|
|
<a href="promotions.html" class="nav-item">
|
|
<i class="fas fa-tags"></i>
|
|
<span>Khuyến mãi</span>
|
|
</a>
|
|
<a href="notifications.html" class="nav-item">
|
|
<i class="fas fa-bell"></i>
|
|
<span>Thông báo</span>
|
|
</a>
|
|
<a href="account.html" class="nav-item active">
|
|
<i class="fas fa-user"></i>
|
|
<span>Cài đặt</span>
|
|
</a>
|
|
</div>-->
|
|
</div>
|
|
|
|
<script>
|
|
// Request data mapping
|
|
const requestDatabase = {
|
|
'YC001': {
|
|
id: 'YC001',
|
|
name: 'Thiết kế nhà phố 3 tầng - Anh Minh (Quận 7)',
|
|
area: '120m²',
|
|
style: 'Hiện đại',
|
|
budget: '300-500 triệu',
|
|
status: 'completed',
|
|
statusText: 'Đã hoàn thành',
|
|
description: 'Thiết kế nhà phố 3 tầng phong cách hiện đại với 4 phòng ngủ, 3 phòng tắm, phòng khách rộng rãi và khu bếp mở. Ưu tiên sử dụng gạch men màu sáng để tạo cảm giác thoáng đãng. Tầng 1: garage, phòng khách, bếp. Tầng 2: 2 phòng ngủ, 2 phòng tắm. Tầng 3: phòng ngủ master, phòng làm việc, sân thượng.',
|
|
contact: 'SĐT: 0901234567 | Email: minh.nguyen@email.com',
|
|
createdDate: '20/10/2024',
|
|
files: ['mat-bang-hien-tai.jpg', 'ban-ve-kien-truc.dwg'],
|
|
designLink: 'https://example.com/3d-design/YC001'
|
|
},
|
|
'YC002': {
|
|
id: 'YC002',
|
|
name: 'Cải tạo căn hộ chung cư - Chị Lan (Quận 2)',
|
|
area: '85m²',
|
|
style: 'Scandinavian',
|
|
budget: '100-300 triệu',
|
|
status: 'designing',
|
|
statusText: 'Đang thiết kế',
|
|
description: 'Cải tạo căn hộ chung cư 3PN theo phong cách Scandinavian. Tối ưu không gian lưu trữ, sử dụng gạch men màu sáng và gỗ tự nhiên.',
|
|
contact: 'SĐT: 0987654321',
|
|
createdDate: '25/10/2024',
|
|
files: ['hinh-anh-hien-trang.jpg'],
|
|
designLink: null
|
|
},
|
|
'YC003': {
|
|
id: 'YC003',
|
|
name: 'Thiết kế biệt thự 2 tầng - Anh Đức (Bình Dương)',
|
|
area: '200m²',
|
|
style: 'Luxury',
|
|
budget: 'Trên 1 tỷ',
|
|
status: 'pending',
|
|
statusText: 'Chờ tiếp nhận',
|
|
description: 'Thiết kế biệt thự 2 tầng phong cách luxury với hồ bơi và sân vườn. 5 phòng ngủ, 4 phòng tắm, phòng giải trí và garage 2 xe.',
|
|
contact: 'SĐT: 0923456789 | Email: duc.le@gmail.com',
|
|
createdDate: '28/10/2024',
|
|
files: ['mat-bang-dat.pdf', 'y-tuong-thiet-ke.jpg'],
|
|
designLink: null
|
|
}
|
|
};
|
|
|
|
// Initialize page
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const requestId = urlParams.get('id') || 'YC001';
|
|
|
|
loadRequestDetail(requestId);
|
|
});
|
|
|
|
function loadRequestDetail(requestId) {
|
|
const request = requestDatabase[requestId];
|
|
if (!request) {
|
|
// Try to load from localStorage (for newly created requests)
|
|
const newRequest = localStorage.getItem('newDesignRequest');
|
|
if (newRequest) {
|
|
const requestData = JSON.parse(newRequest);
|
|
if (requestData.id === requestId) {
|
|
loadRequestData(requestData);
|
|
localStorage.removeItem('newDesignRequest');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Fallback to default
|
|
loadRequestData(requestDatabase['YC001']);
|
|
return;
|
|
}
|
|
|
|
loadRequestData(request);
|
|
}
|
|
|
|
function loadRequestData(request) {
|
|
// Update basic info
|
|
document.getElementById('request-id').textContent = '#' + request.id;
|
|
document.getElementById('request-date').textContent = 'Ngày gửi: ' + request.createdDate;
|
|
document.getElementById('project-name').textContent = request.name;
|
|
document.getElementById('project-area').textContent = request.area;
|
|
document.getElementById('project-style').textContent = request.style;
|
|
document.getElementById('project-budget').textContent = request.budget;
|
|
document.getElementById('project-status').textContent = request.statusText;
|
|
document.getElementById('project-description').textContent = request.description;
|
|
document.getElementById('contact-info').textContent = request.contact;
|
|
|
|
// Update status badge
|
|
const statusBadge = document.getElementById('status-badge');
|
|
statusBadge.textContent = request.statusText;
|
|
statusBadge.className = `status-badge status-${request.status}`;
|
|
|
|
// Show completion highlight if completed
|
|
const completionHighlight = document.getElementById('completion-highlight');
|
|
if (request.status === 'completed') {
|
|
completionHighlight.style.display = 'block';
|
|
} else {
|
|
completionHighlight.style.display = 'none';
|
|
}
|
|
|
|
// Update files list
|
|
updateFilesList(request.files);
|
|
|
|
// Update page title
|
|
document.title = `${request.id} - Chi tiết Yêu cầu Thiết kế`;
|
|
|
|
// Store design link for later use
|
|
window.currentDesignLink = request.designLink;
|
|
}
|
|
|
|
function updateFilesList(files) {
|
|
const filesList = document.getElementById('files-list');
|
|
|
|
if (!files || files.length === 0) {
|
|
filesList.innerHTML = '<p style="color: #6b7280; font-style: italic;">Không có tài liệu đính kèm</p>';
|
|
return;
|
|
}
|
|
|
|
filesList.innerHTML = files.map(fileName => {
|
|
const fileIcon = getFileIcon(fileName);
|
|
return `
|
|
<div class="file-item">
|
|
<div class="file-icon">
|
|
<i class="${fileIcon}"></i>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">${fileName}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function getFileIcon(fileName) {
|
|
const extension = fileName.toLowerCase().split('.').pop();
|
|
|
|
if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) return 'fas fa-image';
|
|
if (extension === 'pdf') return 'fas fa-file-pdf';
|
|
if (extension === 'dwg') return 'fas fa-drafting-compass';
|
|
if (['doc', 'docx'].includes(extension)) return 'fas fa-file-word';
|
|
return 'fas fa-file';
|
|
}
|
|
|
|
function viewDesign3D() {
|
|
if (window.currentDesignLink) {
|
|
// In real app, open the 3D design viewer
|
|
window.open(window.currentDesignLink, '_blank');
|
|
} else {
|
|
// For demo, show alert
|
|
alert('Mở trình xem thiết kế 3D...\n\nTrong ứng dụng thực tế, đây sẽ mở link thiết kế 3D của bạn.');
|
|
}
|
|
}
|
|
|
|
function editRequest() {
|
|
const requestId = document.getElementById('request-id').textContent.replace('#', '');
|
|
// In real app, navigate to edit form with pre-filled data
|
|
alert(`Chỉnh sửa yêu cầu ${requestId}\n\nChức năng này sẽ mở form chỉnh sửa với dữ liệu đã điền sẵn.`);
|
|
}
|
|
|
|
function contactSupport() {
|
|
// In real app, open chat or contact form
|
|
if (confirm('Liên hệ hỗ trợ về yêu cầu thiết kế này?')) {
|
|
// Navigate to chat or contact form
|
|
window.location.href = 'chat-list.html';
|
|
}
|
|
}
|
|
|
|
function shareRequest() {
|
|
const requestId = document.getElementById('request-id').textContent;
|
|
const requestName = document.getElementById('project-name').textContent;
|
|
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: `Yêu cầu thiết kế ${requestId}`,
|
|
text: requestName,
|
|
url: window.location.href
|
|
}).catch(console.error);
|
|
} else {
|
|
// Fallback: copy URL to clipboard
|
|
navigator.clipboard.writeText(window.location.href).then(() => {
|
|
showToast('Đã sao chép link chia sẻ!');
|
|
});
|
|
}
|
|
}
|
|
|
|
function showToast(message) {
|
|
const toast = document.createElement('div');
|
|
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
setTimeout(() => {
|
|
if (document.body.contains(toast)) {
|
|
document.body.removeChild(toast);
|
|
}
|
|
}, 300);
|
|
}, 2000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |