You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
456 lines
21 KiB
456 lines
21 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|
<meta http-equiv="expires" content="0">
|
|
<link rel="shortcut icon" href="dbqb_favicon.ico" />
|
|
<link rel="Bookmark" href="dbqb_favicon.ico" />
|
|
<meta http-equiv="keywords" content="夺宝奇兵,意见反馈,用户反馈">
|
|
<meta http-equiv="description" content="夺宝奇兵用户意见反馈页面">
|
|
<title>夺宝奇兵 - 意见反馈</title>
|
|
<!-- 引入外部资源 -->
|
|
<script src="https://cdn.tailwindcss.com?v=3.3.5"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<!-- 基础样式配置 -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3B82F6',
|
|
secondary: '#8B5CF6',
|
|
danger: '#EF4444',
|
|
success: '#10B981'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.input-focus {
|
|
@apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
|
|
}
|
|
.input-error {
|
|
@apply border-danger focus:ring-danger/20 focus:border-danger;
|
|
}
|
|
.btn-effect {
|
|
@apply relative overflow-hidden transition-all duration-300;
|
|
}
|
|
.btn-effect::after {
|
|
content: '';
|
|
@apply absolute top-0 left-[-100%] w-full h-full bg-white/20 transform skew-x-12 transition-all duration-500;
|
|
}
|
|
.btn-effect:hover::after {
|
|
@apply left-[100%];
|
|
}
|
|
.card-shadow {
|
|
@apply shadow-md hover:shadow-lg transition-shadow duration-300;
|
|
}
|
|
.modal-backdrop {
|
|
@apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300;
|
|
}
|
|
.modal-backdrop.active {
|
|
@apply opacity-100 pointer-events-auto;
|
|
}
|
|
.modal-content {
|
|
@apply bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 transform translate-y-8 transition-transform duration-300;
|
|
}
|
|
.modal-backdrop.active .modal-content {
|
|
@apply translate-y-0;
|
|
}
|
|
.error-message {
|
|
@apply text-danger text-sm mt-1 hidden;
|
|
}
|
|
.country-select-container {
|
|
@apply relative;
|
|
}
|
|
.country-select {
|
|
@apply appearance-none bg-white border border-gray-300 rounded-lg py-3 pl-10 pr-10 input-focus transition-colors w-full;
|
|
}
|
|
.loading-spinner {
|
|
@apply inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
/* 确保基础样式生效 */
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
/* 简单动画 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
|
|
.delay-100 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.delay-200 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.delay-300 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
/* 国家选择框箭头样式 */
|
|
.country-select-arrow {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 国家选择下拉列表样式 */
|
|
.country-select option {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
/* 确保3:7比例在所有中等及以上屏幕生效 */
|
|
@media (min-width: 640px) {
|
|
.whatsapp-container {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.country-code-wrapper {
|
|
width: 30%;
|
|
}
|
|
|
|
.phone-number-wrapper {
|
|
width: 70%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-50 text-gray-800">
|
|
<!-- 导航栏 -->
|
|
<header class="fixed top-0 left-0 right-0 bg-white/95 shadow-sm z-50">
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
|
|
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
|
|
</div>
|
|
<span
|
|
class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">意见反馈</span>
|
|
</div>
|
|
|
|
<!-- 桌面导航 -->
|
|
<nav class="hidden md:flex items-center space-x-8">
|
|
<a href="./hkhcdbqb.html" class="hover:text-primary transition-colors">首页</a>
|
|
<a href="#" class="text-primary font-medium">意见反馈</a>
|
|
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵我需要帮助" target="_blank"
|
|
class="px-5 py-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg transition-all">联系我们</a>
|
|
</nav>
|
|
|
|
<!-- 移动端菜单 -->
|
|
<button id="mobileMenuBtn" class="md:hidden text-xl">
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 移动端菜单内容 -->
|
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t">
|
|
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
|
|
<a href="#" class="py-2 hover:text-primary transition-colors">首页</a>
|
|
<a href="#" class="py-2 text-primary">意见反馈</a>
|
|
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵我需要帮助" target="_blank"
|
|
class="py-2 mt-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white text-center">联系我们</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容 -->
|
|
<main class="pt-28 pb-16 px-4">
|
|
<div class="container mx-auto max-w-4xl">
|
|
<!-- 页面标题 -->
|
|
<div class="text-center mb-12 fade-in">
|
|
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">意见反馈</h1>
|
|
<p class="text-gray-600 max-w-2xl mx-auto">感谢您对Adam说港股团队的支持!<br>请留下您的宝贵意见和建议,我们将不断的提升服务质量！</p>
|
|
</div>
|
|
|
|
<!-- 反馈表单卡片 -->
|
|
<div class="bg-white rounded-xl p-6 md:p-8 mb-10 fade-in delay-100 card-shadow">
|
|
<form id="feedbackForm" action="feedbackinfo.asp" method="post" class="space-y-6">
|
|
<!-- 姓名输入 -->
|
|
<div class="form-group">
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">姓名 <span
|
|
class="text-danger">*</span></label>
|
|
<div class="relative">
|
|
<div
|
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<input type="text" id="fusername" name="fusername" required
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors"
|
|
placeholder="请输入您的姓名">
|
|
<div class="error-message" id="nameError">请输入您的姓名</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- WhatsApp号码 - 精确3:7比例布局 -->
|
|
<div class="form-group">
|
|
<label class="block text-gray-700 font-medium mb-2">Whatsapp <span
|
|
class="text-danger">*</span></label>
|
|
<div class="whatsapp-container flex flex-col sm:flex-row gap-3">
|
|
<!-- 国家选择（30%宽度） -->
|
|
<div class="country-code-wrapper country-select-container">
|
|
<div
|
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
|
<i class="fa fa-whatsapp"></i>
|
|
</div>
|
|
<select id="countryinfo" name="countryinfo" required class="country-select">
|
|
|
|
<option value="+65">+65 新加坡</option>
|
|
|
|
<option value="+60">+60 马来西亚</option>
|
|
|
|
<option value="+852">+852 香港</option>
|
|
|
|
<option value="+1" selected='selected'>+1 美国</option>
|
|
|
|
<option value="+62">+62 印尼</option>
|
|
|
|
<option value="+1">+1 加拿大</option>
|
|
|
|
<option value="+61">+61 澳大利亚</option>
|
|
|
|
<option value="+673">+673 文莱</option>
|
|
|
|
<option value="+886">+886 台湾</option>
|
|
|
|
<option value="+86">+86 中国</option>
|
|
|
|
<option value="+0">+0 其他</option>
|
|
|
|
<option value="+64">+64 新西兰</option>
|
|
|
|
<option value="+44">+44 英国</option>
|
|
|
|
<option value="+81">+81 日本</option>
|
|
|
|
<option value="+49">+49 德国</option>
|
|
|
|
<option value="+82">+82 韩国</option>
|
|
|
|
<option value="+84 ">+84 越南</option>
|
|
|
|
<option value="+971">+971 阿联酋</option>
|
|
|
|
<option value="+45">+45 丹麦</option>
|
|
|
|
<option value="+853">+853 澳门</option>
|
|
|
|
<option value="+66">+66 泰国</option>
|
|
|
|
<option value="+91">+91 印度</option>
|
|
|
|
<option value="+41">+41 瑞士</option>
|
|
|
|
<option value="+358">+358 芬兰</option>
|
|
|
|
<option value="+33">+33 法国</option>
|
|
|
|
<option value="+63">+63 菲律宾</option>
|
|
|
|
<option value="+31">+31 荷兰</option>
|
|
|
|
<option value="+46">+46 瑞典</option>
|
|
|
|
<option value="+34">+34 西班牙</option>
|
|
|
|
<option value="+54">+54 阿根廷</option>
|
|
|
|
<option value="+39">+39 意大利</option>
|
|
|
|
<option value="+7">+7 俄罗斯</option>
|
|
|
|
<option value="+420">+420 捷克</option>
|
|
|
|
</select>
|
|
<div
|
|
class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400 country-select-arrow">
|
|
<i class="fa fa-chevron-down"></i>
|
|
</div>
|
|
<div class="error-message" id="countryCodeError">请选择国家/地区</div>
|
|
</div>
|
|
|
|
<!-- 手机号（70%宽度） -->
|
|
<div class="phone-number-wrapper relative">
|
|
<div
|
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
|
<i class="fa fa-mobile text-lg"></i>
|
|
</div>
|
|
<input type="tel" id="umoblie" name="umoblie" required
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors"
|
|
placeholder="请输入手机号码">
|
|
<div class="error-message" id="phoneError">请输入有效的手机号码</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 微信ID输入 -->
|
|
<div class="form-group">
|
|
<label for="wechatId" class="block text-gray-700 font-medium mb-2">微信ID</label>
|
|
<div class="relative">
|
|
<div
|
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
|
<i class="fa fa-weixin"></i>
|
|
</div>
|
|
<input type="text" id="fwechat" name="fwechat"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors"
|
|
placeholder="请输入您的微信ID（选填）">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 邮箱输入 -->
|
|
<div class="form-group">
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">邮箱 <span
|
|
class="text-danger">*</span></label>
|
|
<div class="relative">
|
|
<div
|
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
|
<i class="fa fa-envelope"></i>
|
|
</div>
|
|
<input type="email" id="femail" name="femail" required
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors"
|
|
placeholder="请输入您的邮箱地址">
|
|
<div class="error-message" id="emailError">请输入有效的邮箱地址</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 反馈类型 -->
|
|
<div class="form-group">
|
|
<label for="feedbackType" class="block text-gray-700 font-medium mb-2">反馈类型</label>
|
|
<div class="relative">
|
|
<div
|
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
|
|
<i class="fa fa-tag"></i>
|
|
</div>
|
|
<select id="ftype" name="ftype"
|
|
class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-colors appearance-none bg-white">
|
|
<option value="功能建议">功能建议</option>
|
|
<option value="问题反馈">问题反馈</option>
|
|
<option value="体验优化">体验优化</option>
|
|
<option value="其他建议">其他建议</option>
|
|
</select>
|
|
<div
|
|
class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
|
|
<i class="fa fa-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 反馈内容 -->
|
|
<div class="form-group">
|
|
<label for="feedbackContent" class="block text-gray-700 font-medium mb-2">反馈内容 <span
|
|
class="text-danger">*</span></label>
|
|
<div class="relative">
|
|
<textarea id="fcontent" name="fcontent" rows="5" required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors resize-none"
|
|
placeholder="请详细描述您的意见或建议..."></textarea>
|
|
<div class="absolute right-3 bottom-3 text-gray-400 text-sm">
|
|
<span id="charCount">0</span> / 500
|
|
</div>
|
|
<div class="error-message" id="feedbackContentError">请输入反馈内容（至少10个字符）</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提交按钮 -->
|
|
<div class="pt-4">
|
|
<button type="submit" id="submitBtn"
|
|
class="btn-effect w-full py-3 px-6 rounded-lg bg-gradient-to-r from-primary to-secondary text-white font-medium text-lg flex items-center justify-center">
|
|
<i class="fa fa-paper-plane mr-2"></i>
|
|
<span>提交反馈</span>
|
|
<span id="loadingIndicator" class="ml-2 hidden">
|
|
<span class="loading-spinner"></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 反馈须知 -->
|
|
<div
|
|
class="bg-gradient-to-r from-primary/5 to-secondary/5 border border-primary/20 rounded-xl p-6 mb-16 fade-in delay-200">
|
|
<h3 class="font-semibold text-lg text-gray-800 mb-4 flex items-center">
|
|
<i class="fa fa-info-circle text-primary mr-2"></i>反馈须知
|
|
</h3>
|
|
<ul class="space-y-2 text-gray-700">
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i>
|
|
<span>我们会在1-3个工作日内处理您的反馈并给予回复</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i>
|
|
<span>带 <span class="text-danger">*</span> 的为必填项，请确保信息准确无误</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i>
|
|
<span>您的个人信息仅用于反馈跟进，我们将严格保密</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 通用弹窗 -->
|
|
<div id="statusModal" class="modal-backdrop" role="dialog" aria-modal="true">
|
|
<div class="modal-content p-6">
|
|
<div class="text-center mb-6">
|
|
<div id="modalIconContainer"
|
|
class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i id="modalIcon" class="text-2xl"></i>
|
|
</div>
|
|
<h3 id="modalTitle" class="text-xl font-bold"></h3>
|
|
<p id="modalMessage" class="text-gray-600 mt-3"></p>
|
|
</div>
|
|
|
|
<button id="closeModal"
|
|
class="w-full py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-colors">
|
|
确定
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-gray-900 text-white py-10 px-4">
|
|
<div class="container mx-auto max-w-6xl text-center">
|
|
<div class="mb-6">
|
|
<div class="inline-flex items-center space-x-2">
|
|
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
|
|
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png
|
|
" style="width: 40px;height: 40px;">
|
|
</div>
|
|
<span class="font-bold">夺宝奇兵</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-400 text-sm mb-4">Copyright 2026.Capitalmaster Pte Ltd All Rights Reserved.</p>
|
|
</div>
|
|
</footer>
|
|
<script type="text/javascript" src="250121/js/20251016.js"></script>
|
|
</body>
|
|
|
|
</html>
|