<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色主题反馈弹窗</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
/* 反馈弹窗主容器 */
.feedback-popup {
display: block;
position: relative;
width: 100%;
max-width: 520px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(175, 0, 0, 0.15);
overflow: hidden;
border: 1px solid rgba(220, 0, 0, 0.1);
}
/* 弹窗头部 */
.popup-header {
background: linear-gradient(135deg, #d10000 0%, #a80000 100%);
color: white;
padding: clamp(20px, 3.5vw, 24px) clamp(24px, 5vw, 32px);
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.popup-title {
font-size: 22px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.popup-title i {
font-size: 20px;
}
/* 关闭按钮 */
.close-btn {
position: absolute;
top: 20px;
right: 24px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
color: white;
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: rotate(90deg);
}
/* 弹窗内容区域 */
.popup-content {
padding: clamp(20px, 3.5vw, 28px) clamp(24px, 5vw, 32px);
}
.popup-subtitle {
color: #666;
font-size: 15px;
line-height: 1.5;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
}
/* 评分选项区域 */
.rating-section {
margin-bottom: 28px;
}
.rating-question {
font-size: 17px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
}
/* 点赞/点踩按钮容器 */
.feedback-buttons {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 30px;
}
.feedback-btn {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
padding: 15px 20px;
border-radius: 12px;
border: 2px solid transparent;
}
.feedback-btn:hover {
background-color: #fff5f5;
transform: translateY(-3px);
}
.feedback-btn.active {
border-color: #d10000;
background-color: #fff5f5;
}
.feedback-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 28px;
transition: all 0.3s ease;
}
.good-btn .feedback-icon {
background-color: rgba(46, 204, 113, 0.1);
color: #2ecc71;
}
.bad-btn .feedback-icon {
background-color: rgba(231, 76, 60, 0.1);
color: #e74c3c;
}
.feedback-btn.active .feedback-icon {
transform: scale(1.1);
}
.good-btn.active .feedback-icon {
background-color: #2ecc71;
color: white;
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}
.bad-btn.active .feedback-icon {
background-color: #e74c3c;
color: white;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
.feedback-label {
color: #777;
font-size: 15px;
font-weight: 500;
margin-top: 5px;
}
/* 详细评分区域 */
.detailed-rating {
background-color: #f9f9f9;
border-radius: 12px;
padding: 20px;
margin-bottom: 28px;
}
.rating-item {
display: flex;
align-items: center;
margin-bottom: 18px;
}
.rating-item:last-child {
margin-bottom: 0;
}
.rating-label {
color: #555;
font-size: 15px;
min-width: 140px;
margin-right: 15px;
}
.stars-container {
display: flex;
gap: 6px;
}
.star {
font-size: 24px;
color: #ddd;
cursor: pointer;
transition: all 0.2s ease;
}
.star.active {
color: #ffcc00;
}
.star:hover {
color: #ffcc00;
transform: scale(1.2);
}
/* 建议区域 */
.suggestions-section {
margin-bottom: 30px;
}
.suggestions-title {
font-size: 17px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
}
.feedback-textarea {
width: 100%;
min-height: 120px;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 10px;
font-size: 15px;
resize: vertical;
transition: all 0.3s ease;
line-height: 1.5;
}
.feedback-textarea:focus {
outline: none;
border-color: #d10000;
box-shadow: 0 0 0 3px rgba(209, 0, 0, 0.1);
}
/* 提交按钮 */
.submit-section {
display: flex;
justify-content: center;
}
.submit-btn {
background: linear-gradient(135deg, #d10000 0%, #a80000 100%);
color: white;
border: none;
border-radius: 50px;
padding: 16px 40px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(209, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 10px;
}
.submit-btn:hover {
background: linear-gradient(135deg, #b80000 0%, #900000 100%);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(209, 0, 0, 0.3);
}
.submit-btn:active {
transform: translateY(-1px);
}
/* 响应式调整 */
@media (max-width: 576px) {
.feedback-buttons {
gap: 20px;
}
.feedback-icon {
width: 50px;
height: 50px;
font-size: 22px;
}
.rating-item {
flex-direction: column;
align-items: flex-start;
}
.rating-label {
margin-bottom: 8px;
min-width: auto;
}
.detailed-rating {
padding: 16px;
}
.popup-content {
padding: 20px;
}
}
/* 背景遮罩 */
.popup-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
padding: 20px;
}
</style>
</head>
<body>
<!-- 背景遮罩层 -->
<div class="popup-backdrop">
<!-- 反馈弹窗 -->
<div class="feedback-popup">
<!-- 弹窗头部 -->
<div class="popup-header">
<div class="popup-title">
<i class="fas fa-comment-dots"></i>
Feedback
</div>
<button class="close-btn" id="closeFeedbackPopup">
<i class="fas fa-times"></i>
</button>
</div>
<!-- 弹窗内容 -->
<div class="popup-content">
<div class="popup-subtitle">
Please provide feedback on our tracking page for improvements. Your input helps us enhance your experience.
</div>
<!-- 整体评分部分 -->
<div class="rating-section">
<div class="rating-question">
How would you rate our order tracking page overall?
</div>
<div class="feedback-buttons">
<div class="feedback-btn good-btn" id="goodFeedbackBtn">
<div class="feedback-icon">
<i class="fas fa-thumbs-up"></i>
</div>
<div class="feedback-label">Good</div>
</div>
<div class="feedback-btn bad-btn" id="badFeedbackBtn">
<div class="feedback-icon">
<i class="fas fa-thumbs-down"></i>
</div>
<div class="feedback-label">Bad</div>
</div>
</div>
</div>
<!-- 详细评分部分 -->
<div class="detailed-rating">
<div class="rating-item">
<div class="rating-label">Item as described:</div>
<div class="stars-container" id="descStars">
<i class="fas fa-star star" data-rating="1"></i>
<i class="fas fa-star star" data-rating="2"></i>
<i class="fas fa-star star" data-rating="3"></i>
<i class="fas fa-star star" data-rating="4"></i>
<i class="fas fa-star star" data-rating="5"></i>
</div>
</div>
<div class="rating-item">
<div class="rating-label">Seller Service:</div>
<div class="stars-container" id="serviceStars">
<i class="fas fa-star star" data-rating="1"></i>
<i class="fas fa-star star" data-rating="2"></i>
<i class="fas fa-star star" data-rating="3"></i>
<i class="fas fa-star star" data-rating="4"></i>
<i class="fas fa-star star" data-rating="5"></i>
</div>
</div>
<div class="rating-item">
<div class="rating-label">Logistics Service:</div>
<div class="stars-container" id="deliveryStars">
<i class="fas fa-star star" data-rating="1"></i>
<i class="fas fa-star star" data-rating="2"></i>
<i class="fas fa-star star" data-rating="3"></i>
<i class="fas fa-star star" data-rating="4"></i>
<i class="fas fa-star star" data-rating="5"></i>
</div>
</div>
</div>
<!-- 建议部分 -->
<div class="suggestions-section">
<div class="suggestions-title">
Do you have any suggestions or comments about the order tracking page?
</div>
<textarea class="feedback-textarea" placeholder="Please provide your valuable feedback or suggestions..."></textarea>
</div>
<!-- 提交按钮 -->
<div class="submit-section">
<button class="submit-btn" id="submitFeedback">
<i class="fas fa-paper-plane"></i>
Submit Feedback
</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 关闭弹窗功能
document.getElementById('closeFeedbackPopup').addEventListener('click', function() {
document.querySelector('.popup-backdrop').style.display = 'none';
});
// 点赞/点踩按钮交互
const goodBtn = document.getElementById('goodFeedbackBtn');
const badBtn = document.getElementById('badFeedbackBtn');
goodBtn.addEventListener('click', function() {
goodBtn.classList.add('active');
badBtn.classList.remove('active');
});
badBtn.addEventListener('click', function() {
badBtn.classList.add('active');
goodBtn.classList.remove('active');
});
// 星级评分交互
const starContainers = [
document.getElementById('descStars'),
document.getElementById('serviceStars'),
document.getElementById('deliveryStars')
];
// 初始化星级评分（设置默认值）
const defaultRatings = [5, 3, 5]; // 默认评分：描述5星，服务3星，物流5星
starContainers.forEach((container, index) => {
const stars = container.querySelectorAll('.star');
// 设置默认选中状态
stars.forEach((star, starIndex) => {
if (starIndex < defaultRatings[index]) {
star.classList.add('active');
}
});
// 添加点击事件
stars.forEach(star => {
star.addEventListener('click', function() {
const rating = parseInt(this.getAttribute('data-rating'));
const allStars = this.parentElement.querySelectorAll('.star');
// 更新选中状态
allStars.forEach((s, index) => {
if (index < rating) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
});
});
});
// 提交反馈功能
document.getElementById('submitFeedback').addEventListener('click', function() {
// 获取整体反馈
const overallFeedback = goodBtn.classList.contains('active') ? 'good' :
badBtn.classList.contains('active') ? 'bad' : 'none';
if (overallFeedback === 'none') {
alert('Please select your overall rating (Good or Bad)');
return;
}
// 获取详细评分
const descRating = document.querySelectorAll('#descStars .star.active').length;
const serviceRating = document.querySelectorAll('#serviceStars .star.active').length;
const deliveryRating = document.querySelectorAll('#deliveryStars .star.active').length;
// 获取文本反馈
const textFeedback = document.querySelector('.feedback-textarea').value.trim();
// 在实际应用中，这里应该发送数据到服务器
console.log({
overall: overallFeedback,
ratings: {
description: descRating,
service: serviceRating,
delivery: deliveryRating
},
suggestions: textFeedback
});
// 显示成功消息
alert('Thank you for your feedback! We appreciate your input.');
// 重置表单
goodBtn.classList.remove('active');
badBtn.classList.remove('active');
document.querySelector('.feedback-textarea').value = '';
// 重置星星评分到默认值
resetStarRatings();
// 关闭弹窗
document.querySelector('.popup-backdrop').style.display = 'none';
});
// 重置星级评分到默认值
function resetStarRatings() {
const defaultRatings = [5, 3, 5];
starContainers.forEach((container, index) => {
const stars = container.querySelectorAll('.star');
stars.forEach((star, starIndex) => {
if (starIndex < defaultRatings[index]) {
star.classList.add('active');
} else {
star.classList.remove('active');
}
});
});
}
// 点击遮罩层也可以关闭弹窗
document.querySelector('.popup-backdrop').addEventListener('click', function(e) {
if (e.target === this) {
this.style.display = 'none';
}
});
});
</script>
</body>
</html>
index.html
md
项目介绍.md
index.html