738 lines
25 KiB
HTML
738 lines
25 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;
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.status-pending {
|
|
background: #fef3c7;
|
|
color: #d97706;
|
|
}
|
|
|
|
.status-designing {
|
|
background: #e0e7ff;
|
|
color: #3730a3;
|
|
}
|
|
|
|
.status-completed {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
/* Description List Styles */
|
|
.description-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.description-item {
|
|
display: flex;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.description-item:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.description-label {
|
|
flex-shrink: 0;
|
|
width: 120px;
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.description-value {
|
|
flex: 1;
|
|
font-size: 15px;
|
|
color: #1f2937;
|
|
font-weight: 500;
|
|
line-height: 2;
|
|
}
|
|
|
|
/* Floor Plan Styles */
|
|
.floor-plan-container {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.floor-plan-thumbnail {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.floor-plan-thumbnail:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.floor-plan-image {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.floor-plan-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 91, 154, 0.85);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
color: white;
|
|
}
|
|
|
|
.floor-plan-thumbnail:hover .floor-plan-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.floor-plan-overlay i {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.floor-plan-overlay span {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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) {
|
|
.description-item {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.description-label {
|
|
width: auto;
|
|
}
|
|
|
|
.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 - Simple Description List -->
|
|
<div class="detail-section" style="margin-bottom: 0;">
|
|
<dl class="description-list">
|
|
|
|
<div class="detail-section">
|
|
<h3 class="section-title">
|
|
<i class="fas fa-info-circle" style="color: #2563eb;"></i>
|
|
Thông tin thiết kế
|
|
</h3>
|
|
|
|
<dl class="description-list">
|
|
<div class="description-item">
|
|
<dt class="description-label">Tên công trình:</dt>
|
|
<dd class="description-value" id="project-name">Thiết kế nhà phố 3 tầng - Anh Minh (Quận 7)</dd>
|
|
</div>
|
|
<div class="description-item">
|
|
<dt class="description-label">Mô tả chi tiết:</dt>
|
|
<dd class="description-value" id="project-notes">
|
|
Diện tích: 85 m² <br>
|
|
Khu vực: Hồ Chí Minh <br>
|
|
Phong cách mong muốn: Hiện đại <br>
|
|
Ngân sách dự kiến: Trao đổi trực tiếp <br>
|
|
Yêu cầu chi tiết: Thiết kế 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.
|
|
</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>
|
|
|
|
<!-- Floor Plan Image -->
|
|
<div class="detail-card">
|
|
<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',
|
|
status: 'completed',
|
|
statusText: 'Đã hoàn thành',
|
|
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',
|
|
notes: 'Ưu tiên sử dụng gạch men màu sáng để tạo cảm giác thoáng đãng.',
|
|
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',
|
|
status: 'designing',
|
|
statusText: 'Đang thiết kế',
|
|
name: 'Cải tạo căn hộ chung cư - Chị Lan (Quận 2)',
|
|
area: '85m²',
|
|
style: 'Scandinavian',
|
|
budget: '100-300 triệu',
|
|
notes: 'Tối ưu không gian lưu trữ, sử dụng gạch men màu sáng và gỗ tự nhiên.',
|
|
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)',
|
|
status: 'pending',
|
|
statusText: 'Chờ tiếp nhận',
|
|
area: '200m²',
|
|
style: 'Luxury',
|
|
budget: 'Trên 1 tỷ',
|
|
notes: 'Thiết kế biệt thự có hồ bơi và sân vườn, 5 phòng ngủ, garage 2 xe.',
|
|
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 + ' VNĐ';
|
|
document.getElementById('project-notes').textContent = request.notes || 'Không có ghi chú đặc biệt';
|
|
|
|
// 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';
|
|
}
|
|
|
|
// Floor plan image - removed files list
|
|
|
|
// 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 viewFloorPlan() {
|
|
// In real app, open lightbox or full-screen image viewer
|
|
const img = document.querySelector('.floor-plan-image');
|
|
if (img && img.src) {
|
|
window.open(img.src, '_blank');
|
|
}
|
|
}
|
|
|
|
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> |