<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customs Clearance Issue - Minimalist Design</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #2c3e50;
--primary-light: #34495e;
--accent-color: #e74c3c;
--accent-light: #ff6b6b;
--neutral-light: #f8f9fa;
--neutral-medium: #e9ecef;
--neutral-dark: #6c757d;
--text-dark: #343a40;
--text-medium: #495057;
--text-light: #868e96;
--white: #ffffff;
--shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
--shadow-light: 0 3px 15px rgba(0, 0, 0, 0.05);
--radius: 12px;
--radius-sm: 8px;
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 32px;
--spacing-xl: 40px;
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f7fa;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: var(--font-primary);
color: var(--text-dark);
line-height: 1.6;
}
/* 弹窗容器 */
.dt-modal-template {
width: 100%;
max-width: 680px;
background-color: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
/* 弹窗头部 */
.dt-modal-header {
display: flex;
align-items: center;
padding: var(--spacing-lg) var(--spacing-xl);
background-color: var(--white);
color: var(--primary-color);
position: relative;
border-bottom: 1px solid var(--neutral-medium);
}
.dt-modal-header-title {
font-size: 22px;
font-weight: 600;
margin-left: var(--spacing-sm);
letter-spacing: -0.3px;
}
.hearder_svg_img {
width: 28px;
height: 28px;
filter: invert(24%) sepia(9%) saturate(2941%) hue-rotate(173deg) brightness(90%) contrast(88%);
}
.dt-modal-close {
margin-left: auto;
cursor: pointer;
background: none;
border: none;
color: var(--neutral-dark);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
transition: var(--transition);
}
.dt-modal-close:hover {
background-color: var(--neutral-medium);
color: var(--text-dark);
}
/* 弹窗内容区域 */
.dt-modal-wrapper-scroll {
max-height: 70vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 var(--spacing-xl);
}
.dt-modal-wrapper-box {
padding: var(--spacing-xl) 0;
}
.dt-modal-wrapper-box-two {
padding: var(--spacing-xl) 0;
border-top: 1px solid var(--neutral-medium);
}
.inithide {
display: none;
}
/* 内容样式 - 简约高级排版 */
.dtmc-describe-text {
margin-bottom: var(--spacing-lg);
color: var(--text-medium);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.15px;
}
.dtmc-describe-text p {
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
/* 分隔线样式 */
.divider {
height: 1px;
background-color: var(--neutral-medium);
margin: var(--spacing-lg) 0;
border: none;
}
/* 信息卡片样式 - 简约设计 */
.info-section {
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background-color: var(--neutral-light);
border-radius: var(--radius-sm);
border-left: 4px solid var(--primary-light);
}
.info-title {
display: flex;
align-items: center;
margin-bottom: var(--spacing-sm);
color: var(--primary-color);
font-weight: 600;
font-size: 17px;
}
.info-title i {
margin-right: var(--spacing-sm);
color: var(--primary-light);
font-size: 18px;
}
.info-content {
color: var(--text-medium);
line-height: 1.7;
}
.info-content p {
margin-bottom: var(--spacing-sm);
}
/* 弹窗底部 */
.dt-modal-footer {
padding-top: var(--spacing-lg);
border-top: 1px solid var(--neutral-medium);
margin-top: var(--spacing-lg);
}
.dt-h4 {
font-size: 18px;
font-weight: 600;
color: var(--primary-color);
margin-bottom: var(--spacing-md);
letter-spacing: -0.2px;
}
.dtmf-groove-row {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
/* 按钮样式 - 简约高级 */
button {
padding: 14px 28px;
border-radius: var(--radius-sm);
font-weight: 500;
font-size: 15px;
cursor: pointer;
transition: var(--transition);
border: none;
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
letter-spacing: 0.3px;
}
button i {
margin-right: 8px;
}
.dtmf-serve-y {
background-color: var(--primary-color);
color: var(--white);
}
.dtmf-serve-y:hover {
background-color: var(--primary-light);
transform: translateY(-2px);
box-shadow: var(--shadow-light);
}
.dtmf-serve-n {
background-color: var(--white);
color: var(--text-medium);
border: 1px solid var(--neutral-dark);
}
.dtmf-serve-n:hover {
background-color: var(--neutral-light);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* 状态页面样式 */
.dtmf-state-y, .dtmf-state-n, .dtmf-state-n-y {
margin-bottom: var(--spacing-xl);
}
.dtmf-state-n-title {
font-size: 18px;
margin-bottom: var(--spacing-lg);
color: var(--primary-color);
}
.mb-style-ny, .mb-style-nn {
flex: 1;
}
/* 表单样式 */
.dtmf-form {
animation: slideUp 0.4s ease;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.up-pop {
margin-bottom: var(--spacing-xl);
}
.up-pop-main {
margin-top: var(--spacing-sm);
}
.related_instructions_textarea {
width: 100%;
min-height: 140px;
padding: var(--spacing-md);
border-radius: var(--radius-sm);
border: 1px solid var(--neutral-medium);
font-size: 15px;
resize: vertical;
transition: var(--transition);
line-height: 1.6;
font-family: var(--font-primary);
color: var(--text-medium);
}
.related_instructions_textarea:focus {
outline: none;
border-color: var(--primary-light);
box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}
.up-pop-content {
margin-top: var(--spacing-lg);
}
.up-pop-storke {
display: inline-flex;
align-items: center;
padding: 14px 24px;
background-color: var(--white);
border: 1px solid var(--neutral-medium);
border-radius: var(--radius-sm);
color: var(--primary-color);
cursor: pointer;
transition: var(--transition);
font-weight: 500;
}
.up-pop-storke:hover {
background-color: var(--neutral-light);
border-color: var(--primary-light);
}
.up-pop-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: var(--primary-color);
color: var(--white);
border-radius: 50%;
margin-right: 12px;
font-weight: 500;
font-size: 16px;
}
.imageContainer {
margin-top: var(--spacing-lg);
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.dtmf-email-main {
margin-bottom: var(--spacing-xl);
}
.dtmf-input-validate-email {
width: 100%;
padding: 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--neutral-medium);
font-size: 15px;
transition: var(--transition);
font-family: var(--font-primary);
color: var(--text-medium);
}
.dtmf-input-validate-email:focus {
outline: none;
border-color: var(--primary-light);
box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}
.dtmf-confirm-btn {
background-color: var(--primary-color);
color: var(--white);
padding: 16px;
width: 100%;
font-size: 16px;
font-weight: 500;
}
.dtmf-confirm-btn:hover {
background-color: var(--primary-light);
transform: translateY(-2px);
box-shadow: var(--shadow-light);
}
/* 移动端优化 */
@media (max-width: 768px) {
body {
padding: 12px;
}
.dt-modal-template {
max-width: 100%;
border-radius: 10px;
}
.dt-modal-wrapper-scroll {
padding: 0 var(--spacing-md);
}
.dt-modal-header {
padding: var(--spacing-md);
}
.dt-modal-header-title {
font-size: 19px;
}
.dt-modal-wrapper-box,
.dt-modal-wrapper-box-two {
padding: var(--spacing-md) 0;
}
.dtmf-groove-row {
flex-direction: column;
}
button {
width: 100%;
padding: 16px;
}
.dtmc-describe-text {
font-size: 15px;
}
.dt-h4 {
font-size: 17px;
}
.info-section {
padding: var(--spacing-md);
}
}
@media (max-width: 480px) {
.dt-modal-header-title {
font-size: 17px;
}
.dtmc-describe-text {
font-size: 14px;
}
.dt-h4 {
font-size: 16px;
}
}
/* 图片预览 */
.image-preview {
position: relative;
width: 100px;
height: 100px;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--neutral-medium);
box-shadow: var(--shadow-light);
}
.image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.remove-image {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
transition: var(--transition);
}
.remove-image:hover {
background-color: var(--accent-color);
}
/* 通知消息 */
.notification {
position: fixed;
top: 20px;
right: 20px;
background-color: var(--primary-color);
color: white;
padding: 14px 22px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
z-index: 1000;
display: flex;
align-items: center;
gap: 10px;
animation: slideInRight 0.3s ease;
max-width: 320px;
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* 步骤指示器 - 简约设计 */
.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-xl);
position: relative;
}
.step-indicator::before {
content: '';
position: absolute;
top: 14px;
left: 0;
right: 0;
height: 1px;
background-color: var(--neutral-medium);
z-index: 1;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.step-circle {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--white);
border: 1px solid var(--neutral-medium);
color: var(--neutral-dark);
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 13px;
margin-bottom: 8px;
transition: var(--transition);
}
.step.active .step-circle {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.step.completed .step-circle {
background-color: var(--primary-light);
color: white;
border-color: var(--primary-light);
}
.step-label {
font-size: 12px;
color: var(--neutral-dark);
text-align: center;
font-weight: 500;
max-width: 80px;
}
.step.active .step-label {
color: var(--primary-color);
font-weight: 600;
}
/* 返回按钮样式 */
.back-button {
background: none;
border: none;
color: var(--primary-light);
padding: 12px 0;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: auto;
width: auto;
}
.back-button:hover {
color: var(--primary-color);
background: none;
transform: none;
box-shadow: none;
}
.back-button i {
margin-right: 6px;
}
/* 强调文本 */
.text-emphasis {
color: var(--primary-color);
font-weight: 600;
}
/* 辅助文本 */
.text-helper {
font-size: 14px;
color: var(--text-light);
margin-top: var(--spacing-xs);
line-height: 1.5;
}
</style>
</head>
<body>
<!-- 海关清关问题弹窗 -->
<div id="customs-clearance-issue-template" class="dt-modal-template">
<div class="customs-clearance-issue dt-modal-wrapper">
<!-- 弹窗头部 -->
<div class="dt-modal-header">
<span><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMTkgM0g1QzMuOSAzIDMgMy45IDMgNXYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMTZINVY1aDE0djE0em0tNS03bC0zIDMuNzJMMTAgMTNsLTMgNGgxMmwtNC01eiIvPjwvc3ZnPg==" class="hearder_svg_img" alt="Customs Icon"></span>
<span class="dt-modal-header-title">Customs Clearance Issue</span>
<span class="dt-modal-close dt-modal-close-btn">
<i class="fas fa-times"></i>
</span>
</div>
<!-- 弹窗内容区域 -->
<div class="dt-modal-wrapper-scroll">
<!-- 第一部分：清关说明 -->
<div class="dt-modal-wrapper-box" id="mainSection">
<div class="dt-modal-content">
<div class="dtmc-describe">
<div class="info-section">
<div class="info-title">
<i class="fas fa-info-circle"></i>
Understanding Customs Clearance
</div>
<div class="info-content">
When goods move from one country to another, they go through a step called "customs clearance" during the international shipment process. This involves documentation, inspection, and payment of applicable duties and taxes.
</div>
</div>
<div class="info-section">
<div class="info-title">
<i class="fas fa-file-invoice-dollar"></i>
Customs Fees & Taxes
</div>
<div class="info-content">
<p><span class="text-emphasis">Standard Shipping:</span> If you select our flat mail rate (standard shipping), you won't incur any additional charges beyond the shipping cost.</p>
<p><span class="text-emphasis">Express Shipping:</span> With express shipping, there might be customs fees or taxes depending on the destination country's regulations. These fees vary by country and are determined by local customs authorities.</p>
<div class="text-helper">
Example: In Canada, tax rates may differ across provinces, ranging from 5% to 15%.
</div>
</div>
</div>
<div class="info-section">
<div class="info-title">
<i class="fas fa-map-marker-alt"></i>
Remote Area Surcharge
</div>
<div class="info-content">
<p>For express shipping to certain remote areas in countries like Australia, New Zealand, and Canada, a surcharge on the shipping fee may be applied by the courier.</p>
<p>These areas are identified by specific postcodes, suburbs, or town names and are considered challenging for regular courier service due to distance, accessibility, or low population density.</p>
</div>
</div>
<div class="dtmc-describe-text">
<span class="text-emphasis">Need Immediate Assistance?</span> If you need help obtaining the invoice for customs clearance or have any other urgent issues, please use the Live Chat feature on our website.
</div>
</div>
</div>
<!-- 弹窗底部按钮 -->
<div class="dt-modal-footer">
<div class="dt-h4">Have you received the order?</div>
<div class="dtmf-groove-row">
<button class="dtmf-serve-y mb-style-y" id="CustomsClearanceIssueY">
<i class="fas fa-check"></i> Yes, I've received it
</button>
<button class="dtmf-serve-n mb-style-n" id="CustomsClearanceIssueN">
<i class="fas fa-times"></i> No, I haven't
</button>
</div>
</div>
</div>
<!-- 第二部分：状态选择区域 -->
<div class="dt-modal-wrapper-box-two inithide" id="formSection">
<!-- 步骤指示器 -->
<div class="step-indicator">
<div class="step active" id="step1">
<div class="step-circle">1</div>
<div class="step-label">Status</div>
</div>
<div class="step" id="step2">
<div class="step-circle">2</div>
<div class="step-label">Details</div>
</div>
<div class="step" id="step3">
<div class="step-circle">3</div>
<div class="step-label">Submit</div>
</div>
</div>
<!-- 状态：已收到订单 -->
<div class="dtmf-state-y inithide" id="stateYes">
<div class="info-section">
<div class="info-title">
<i class="fas fa-receipt"></i>
Proof of Payment
</div>
<div class="info-content">
If you have paid the customs clearance fee, please upload relevant proof such as a receipt, invoice, or payment confirmation. This helps us verify the payment and assist you further if needed.
</div>
</div>
<div class="dtmf-groove-row" style="margin-top: var(--spacing-md);">
<button class="dtmf-serve-y" id="proceedWithUpload">
<i class="fas fa-arrow-right"></i> Continue to Upload
</button>
<button class="back-button" id="backToMain">
<i class="fas fa-arrow-left"></i> Back
</button>
</div>
</div>
<!-- 状态：未收到订单 -->
<div class="dtmf-state-n inithide" id="stateNo">
<div class="dtmf-state-n-title dt-h4">
<i class="fas fa-envelope"></i>
Have you received a customs clearance notification?
</div>
<div class="dtmf-groove-row">
<button class="dtmf-serve-y mb-style-ny" id="CustomsClearanceIssueNY">
<i class="fas fa-check"></i> Yes
</button>
<button class="dtmf-serve-n mb-style-nn" id="CustomsClearanceIssueNN">
<i class="fas fa-times"></i> No
</button>
</div>
<div class="text-helper" style="margin-top: var(--spacing-sm);">
A customs clearance notification is typically sent by the logistics provider when your package requires additional documentation or payment to clear customs.
</div>
<button class="back-button" id="backToMain2" style="margin-top: var(--spacing-md);">
<i class="fas fa-arrow-left"></i> Back
</button>
</div>
<!-- 状态：收到清关通知 -->
<div class="dtmf-state-n-y inithide" id="stateNotificationYes">
<div class="info-section">
<div class="info-title">
<i class="fas fa-exclamation-triangle"></i>
Important Notice
</div>
<div class="info-content">
<p>Please contact the local logistics company promptly to complete the customs clearance process.</p>
<p>If customs duties are required, please pay them as instructed and keep the payment proof for your records.</p>
<p><span class="text-emphasis">Important:</span> If the order is destroyed due to failure to pay customs duties in time, we cannot be held responsible for compensation.</p>
</div>
</div>
<div class="dtmc-describe-text">
<span class="text-emphasis">Have questions about customs duties?</span> Fill out the form below and click "Confirm" to send us your questions. We'll investigate and respond as soon as possible.
</div>
<div class="dtmf-groove-row" style="margin-top: var(--spacing-md);">
<button class="dtmf-serve-y" id="proceedToForm">
<i class="fas fa-pen-alt"></i> Fill Out Form
</button>
<button class="back-button" id="backToNoState">
<i class="fas fa-arrow-left"></i> Back
</button>
</div>
</div>
<!-- 表单区域 -->
<div class="dtmf-form inithide" id="formArea">
<div class="up-pop">
<div class="up-pop-title dt-h4">
<i class="fas fa-comment-alt"></i>
Describe Your Issue
</div>
<div class="up-pop-main">
<textarea type="textarea" class="related_instructions_textarea" placeholder="Please describe your customs clearance issue in detail. Include any relevant information such as tracking numbers, communication with customs, or specific problems encountered..."></textarea>
<div class="text-helper">
Provide as much detail as possible to help us understand and resolve your issue quickly.
</div>
<div class="up-pop-content">
<div class="up-pop-storke" id="uploadArea">
<span class="up-pop-icon">+</span>
<span class="up-pop-text">Upload Supporting Documents</span>
<input type="file" id="fileUpload" accept="image/*,.pdf,.doc,.docx" multiple style="display: none;">
</div>
<div class="imageContainer" id="imageContainer"></div>
</div>
</div>
</div>
<div class="dtmf-email-title dt-h4">
<i class="fas fa-envelope"></i>
Contact Email
</div>
<div class="dtmf-email-main">
<input type="email" class="dtmf-input-validate-email" value="[email protected]" placeholder="Enter your email address">
<div class="text-helper">
We'll send updates about your issue to this email address.
</div>
</div>
<div class="dtmf-confirm-main">
<button class="dtmf-confirm-btn" id="submitForm">
<i class="fas fa-paper-plane"></i> Submit Request
</button>
</div>
<button class="back-button" id="backToPrevious" style="margin-top: var(--spacing-md);">
<i class="fas fa-arrow-left"></i> Back
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 通知消息 -->
<div id="notification" class="notification inithide">
<i class="fas fa-check-circle"></i>
<span id="notificationText">Notification message</span>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取元素
const mainSection = document.getElementById('mainSection');
const formSection = document.getElementById('formSection');
const stateYes = document.getElementById('stateYes');
const stateNo = document.getElementById('stateNo');
const stateNotificationYes = document.getElementById('stateNotificationYes');
const formArea = document.getElementById('formArea');
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notificationText');
// 步骤指示器
const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');
const step3 = document.getElementById('step3');
// 更新步骤指示器
function updateStepIndicator(currentStep) {
// 重置所有步骤
step1.classList.remove('active', 'completed');
step2.classList.remove('active', 'completed');
step3.classList.remove('active', 'completed');
// 根据当前步骤设置状态
if (currentStep === 1) {
step1.classList.add('active');
} else if (currentStep === 2) {
step1.classList.add('completed');
step2.classList.add('active');
} else if (currentStep === 3) {
step1.classList.add('completed');
step2.classList.add('completed');
step3.classList.add('active');
}
}
// 显示通知
function showNotification(message, isError = false) {
notificationText.textContent = message;
notification.style.backgroundColor = isError ? '#e74c3c' : '#2c3e50';
notification.classList.remove('inithide');
setTimeout(() => {
notification.classList.add('inithide');
}, 4000);
}
// 关闭按钮
document.querySelector('.dt-modal-close').addEventListener('click', function() {
showNotification('Customs clearance inquiry closed');
// 在实际应用中，这里会关闭弹窗
});
// YES按钮 - 已收到订单
document.getElementById('CustomsClearanceIssueY').addEventListener('click', function() {
mainSection.style.display = 'none';
formSection.classList.remove('inithide');
stateYes.classList.remove('inithide');
updateStepIndicator(1);
});
// NO按钮 - 未收到订单
document.getElementById('CustomsClearanceIssueN').addEventListener('click', function() {
mainSection.style.display = 'none';
formSection.classList.remove('inithide');
stateNo.classList.remove('inithide');
updateStepIndicator(1);
});
// 返回主页面
document.getElementById('backToMain').addEventListener('click', function() {
formSection.classList.add('inithide');
stateYes.classList.add('inithide');
mainSection.style.display = 'block';
});
document.getElementById('backToMain2').addEventListener('click', function() {
formSection.classList.add('inithide');
stateNo.classList.add('inithide');
mainSection.style.display = 'block';
});
// 继续上传按钮
document.getElementById('proceedWithUpload').addEventListener('click', function() {
stateYes.classList.add('inithide');
formArea.classList.remove('inithide');
updateStepIndicator(3);
});
// 收到清关通知 YES
document.getElementById('CustomsClearanceIssueNY').addEventListener('click', function() {
stateNo.classList.add('inithide');
stateNotificationYes.classList.remove('inithide');
updateStepIndicator(2);
});
// 收到清关通知 NO
document.getElementById('CustomsClearanceIssueNN').addEventListener('click', function() {
showNotification("If you haven't received a customs notification, your package might not have reached customs yet. Please check your tracking information for updates.");
});
// 返回未收到订单状态
document.getElementById('backToNoState').addEventListener('click', function() {
stateNotificationYes.classList.add('inithide');
stateNo.classList.remove('inithide');
updateStepIndicator(1);
});
// 继续填写表单
document.getElementById('proceedToForm').addEventListener('click', function() {
stateNotificationYes.classList.add('inithide');
formArea.classList.remove('inithide');
updateStepIndicator(3);
});
// 返回上一步
document.getElementById('backToPrevious').addEventListener('click', function() {
// 根据当前状态返回到适当页面
if (!stateYes.classList.contains('inithide')) {
formArea.classList.add('inithide');
stateYes.classList.remove('inithide');
updateStepIndicator(1);
} else if (!stateNotificationYes.classList.contains('inithide')) {
formArea.classList.add('inithide');
stateNotificationYes.classList.remove('inithide');
updateStepIndicator(2);
}
});
// 文件上传功能
const uploadArea = document.getElementById('uploadArea');
const fileUpload = document.getElementById('fileUpload');
const imageContainer = document.getElementById('imageContainer');
uploadArea.addEventListener('click', function() {
fileUpload.click();
});
fileUpload.addEventListener('change', function(e) {
const files = e.target.files;
const maxFiles = 5;
if (files.length > maxFiles) {
showNotification(`Please upload a maximum of ${maxFiles} files`, true);
return;
}
for (let i = 0; i < Math.min(files.length, maxFiles); i++) {
const file = files[i];
// 检查文件类型
if (file.type.startsWith('image/') ||
file.type === 'application/pdf' ||
file.type === 'application/msword' ||
file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
const reader = new FileReader();
reader.onload = function(e) {
const fileSrc = e.target.result;
addFilePreview(fileSrc, file.type, file.name);
};
reader.readAsDataURL(file);
} else {
showNotification('Unsupported file type: ' + file.type, true);
}
}
// 重置文件输入
fileUpload.value = '';
});
function addFilePreview(fileSrc, fileType, fileName) {
const previewDiv = document.createElement('div');
previewDiv.className = 'image-preview';
// 根据文件类型显示不同图标
let iconClass = 'fas fa-file';
let bgColor = '#f8f9fa';
if (fileType.startsWith('image/')) {
iconClass = 'fas fa-image';
bgColor = '#e9ecef';
} else if (fileType === 'application/pdf') {
iconClass = 'fas fa-file-pdf';
bgColor = '#ffebee';
} else if (fileType.includes('word')) {
iconClass = 'fas fa-file-word';
bgColor = '#e8f4fd';
}
const fileIcon = document.createElement('div');
fileIcon.style.width = '100%';
fileIcon.style.height = '100%';
fileIcon.style.display = 'flex';
fileIcon.style.flexDirection = 'column';
fileIcon.style.alignItems = 'center';
fileIcon.style.justifyContent = 'center';
fileIcon.style.backgroundColor = bgColor;
fileIcon.innerHTML = `
<i class="${iconClass}" style="font-size: 32px; color: #6c757d; margin-bottom: 8px;"></i>
<span style="font-size: 10px; color: #495057; text-align: center; padding: 0 4px; word-break: break-all;">${fileName.substring(0, 15)}${fileName.length > 15 ? '...' : ''}</span>
`;
// 如果是图片，显示图片预览
if (fileType.startsWith('image/')) {
const img = document.createElement('img');
img.src = fileSrc;
fileIcon.innerHTML = '';
fileIcon.appendChild(img);
}
const removeBtn = document.createElement('div');
removeBtn.className = 'remove-image';
removeBtn.innerHTML = '×';
removeBtn.addEventListener('click', function() {
previewDiv.remove();
});
previewDiv.appendChild(fileIcon);
previewDiv.appendChild(removeBtn);
imageContainer.appendChild(previewDiv);
}
// 表单提交
document.getElementById('submitForm').addEventListener('click', function() {
const textarea = document.querySelector('.related_instructions_textarea');
const emailInput = document.querySelector('.dtmf-input-validate-email');
if (!textarea.value.trim()) {
showNotification('Please provide a description of your issue before submitting.', true);
textarea.focus();
return;
}
if (!emailInput.value.trim() || !isValidEmail(emailInput.value)) {
showNotification('Please enter a valid email address.', true);
emailInput.focus();
return;
}
// 模拟提交
const submitBtn = document.getElementById('submitForm');
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting...';
submitBtn.disabled = true;
setTimeout(() => {
showNotification('Your customs clearance inquiry has been submitted. We will contact you at ' + emailInput.value + ' within 24 hours.');
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
// 重置表单
textarea.value = '';
emailInput.value = '[email protected]';
imageContainer.innerHTML = '';
// 返回主页面
formSection.classList.add('inithide');
formArea.classList.add('inithide');
mainSection.style.display = 'block';
}, 2000);
});
// 验证邮箱格式
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html