zhaoruhui
2 days ago
8 changed files with 3002 additions and 1 deletions
-
431hkRegister.html
-
270hkRegisterSuccess.html
-
136hkRegisterTip.html
-
456hkfeedback.html
-
644hkhcdbqb.html
-
388hkhcdbqbDownload.html
-
669hkhcdbqbGuide.html
-
9vite.config.js
@ -0,0 +1,431 @@ |
|||
<!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="夺宝奇兵,homilychart,homilylink,DeepChart"> |
|||
<meta http-equiv="description" content="HomilyLink"> |
|||
<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' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style type="text/tailwindcss"> |
|||
@layer utilities { |
|||
.card-hover { |
|||
@apply transition-all duration-300 hover:shadow-xl; |
|||
} |
|||
.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%]; |
|||
} |
|||
.input-focus { |
|||
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none; |
|||
} |
|||
/* 图标容器样式 - 确保绝对居中 */ |
|||
.form-icon-container { |
|||
@apply absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none z-10; |
|||
} |
|||
.form-icon { |
|||
@apply text-gray-500 text-base; |
|||
} |
|||
.form-group { |
|||
@apply mb-5 relative; |
|||
} |
|||
.form-label { |
|||
@apply block text-gray-700 font-medium mb-2; |
|||
} |
|||
/* 统一输入框高度和内边距 */ |
|||
.form-control { |
|||
@apply w-full pl-10 py-3 border border-gray-300 rounded-lg input-focus transition-colors; |
|||
height: 54px; /* 固定高度确保垂直对齐 */ |
|||
} |
|||
/* 选择框样式统一 */ |
|||
.form-select { |
|||
@apply form-control pr-8 appearance-none bg-white; |
|||
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" fill=\"%23333\"/></svg>'); |
|||
background-repeat: no-repeat; |
|||
background-position: right 0.5rem center; |
|||
background-size: 1em; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
/* 基础动画 */ |
|||
@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; |
|||
} |
|||
|
|||
/* 确保所有输入控件垂直对齐 */ |
|||
input.form-control, |
|||
select.form-select { |
|||
box-sizing: border-box; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/* 解决不同浏览器下select元素的高度差异 */ |
|||
select.form-select { |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body class="bg-gray-50 text-gray-800 font-sans"> |
|||
<!-- 导航栏 --> |
|||
<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="hcdbqb.asp" class="hover:text-primary transition-colors">首页</a> |
|||
<a href="hcdbqb-download.asp" class="hover:text-primary transition-colors">下载中心</a> |
|||
<a href="hcdbqb-guide.asp" class="text-primary font-medium">操作指南</a> |
|||
<a href="https://wa.me/+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="hcdbqb.asp" class="py-2 hover:text-primary transition-colors">首页</a> |
|||
<a href="hcdbqb-download.asp" class="py-2 hover:text-primary transition-colors">下载中心</a> |
|||
<a href="hcdbqb-guide.asp" class="py-2 text-primary">操作指南</a> |
|||
<a href="https://wa.me/+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-6xl"> |
|||
<!-- 页面标题 --> |
|||
<div class="text-center mb-12 fade-in"> |
|||
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">夺宝奇兵+内部班级课程<br />免费体验</h1> |
|||
<p class="text-gray-600 max-w-2xl mx-auto">财富粉报名即可获得体验的机会！<br />超级云脑 夺宝利剑 AI预测大模型</p> |
|||
</div> |
|||
|
|||
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8 max-w-5xl mx-auto"> |
|||
<!-- 注册表单 --> |
|||
<div class="lg:col-span-3 fade-in delay-100"> |
|||
<div class="bg-white rounded-xl shadow-md p-6 md:p-8 card-hover"> |
|||
<form id="registrationForm" action="./hkRegisterTip.html" method="post" |
|||
onsubmit="return validateForm()"> |
|||
<!-- 姓名 --> |
|||
<div class="form-group"> |
|||
<label for="fullname" class="form-label">姓名 <span class="text-red-500">*</span></label> |
|||
<div class="relative"> |
|||
<div class="form-icon-container"> |
|||
<i class="form-icon fa fa-user"></i> |
|||
</div> |
|||
<input type="text" id="unameinfo" name="unameinfo" class="form-control" |
|||
autocomplete="off" placeholder="请输入您的姓名"> |
|||
</div> |
|||
<div id="nameError" class="text-red-500" style="display: none;">请输入您的姓名 [ Please enter |
|||
your name ] </div> |
|||
</div> |
|||
|
|||
<!-- 手机号 - 图标垂直居中优化 --> |
|||
<div class="form-group"> |
|||
<label class="form-label">手机号码 <span class="text-red-500">*</span></label> |
|||
<input type="hidden" name="zbtype" id="zbtype" value="2"> |
|||
<div class="flex gap-3"> |
|||
<!-- 国家编号选择框 --> |
|||
<div class="w-30 relative"> |
|||
<div class="form-icon-container"> |
|||
<i class="form-icon fa fa-globe"></i> |
|||
</div> |
|||
<select name="countryinfo" id="countryinfo" class="form-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> |
|||
|
|||
<!-- 手机号输入框 --> |
|||
<div class="flex-1 relative"> |
|||
<div class="form-icon-container"> |
|||
<i class="form-icon fa fa-whatsapp"></i> |
|||
</div> |
|||
<input type="tel" id="umoblie" name="umoblie" class="form-control" |
|||
onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0/g,'')" |
|||
autocomplete="off" placeholder="不带国家编号的纯机号"> |
|||
</div> |
|||
</div> |
|||
<div id="phoneError" class="text-red-500" style="display: none;">请输入正确的手机号（纯手机号 不含国家编号 ） |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 微信ID --> |
|||
<div class="form-group"> |
|||
<label for="wechat" class="form-label">微信ID <span class="text-red-500"></span></label> |
|||
<div class="relative"> |
|||
<div class="form-icon-container"> |
|||
<i class="form-icon fa fa-weixin"></i> |
|||
</div> |
|||
<input type="text" id="uwechat" name="uwechat" class="form-control" |
|||
placeholder="微信ID ( 如没有WhatsApp )" autocomplete="off"> |
|||
</div> |
|||
<div id="wechatError" class="text-red-500" style="display: none;">请输入微信ID</div> |
|||
</div> |
|||
|
|||
<!-- 邮箱地址 --> |
|||
<div class="form-group mb-6"> |
|||
<label for="email" class="form-label">邮箱地址 <span class="text-red-500">*</span></label> |
|||
<div class="relative"> |
|||
<div class="form-icon-container"> |
|||
<i class="form-icon fa fa-envelope"></i> |
|||
</div> |
|||
<input type="email" id="uemail" name="uemail" class="form-control" |
|||
autocomplete="off" placeholder="请输入您的邮箱地址"> |
|||
</div> |
|||
<div id="emailError" class="text-red-500" style="display: none;">请输入您的有效邮箱地址</div> |
|||
</div> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<button type="submit" |
|||
class="btn-effect w-full py-3 rounded-lg bg-gradient-to-r from-primary to-secondary text-white font-medium text-lg"> |
|||
<i class="fa fa-check-circle mr-2"></i>提交注册 |
|||
</button> |
|||
|
|||
<p class="text-center text-gray-500 text-sm mt-4"> |
|||
如需帮助？<a href="https://wa.me/+6588792879?text=我要体验DEEPCHART" target="_blank" |
|||
class="text-primary hover:underline">点击发WhatsApp</a> |
|||
</p> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 注册说明 --> |
|||
<div class="lg:col-span-2 fade-in delay-200"> |
|||
<div class="bg-white rounded-xl shadow-md p-6 md:p-8 h-full card-hover"> |
|||
<h3 class="text-xl font-bold mb-5 flex items-center"> |
|||
<i class="fa fa-info-circle text-primary mr-2"></i>注册说明 |
|||
</h3> |
|||
|
|||
<div class="space-y-4 text-gray-600"> |
|||
<div class="flex"> |
|||
<div |
|||
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5"> |
|||
<i class="fa fa-user"></i> |
|||
</div> |
|||
<p>请填写方便称呼您的姓名信息。</p> |
|||
</div> |
|||
|
|||
<div class="flex"> |
|||
<div |
|||
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5"> |
|||
<i class="fa fa-whatsapp"></i> |
|||
</div> |
|||
<p>手机号码最好支持WhatsApp联系。</p> |
|||
</div> |
|||
|
|||
<div class="flex"> |
|||
<div |
|||
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5"> |
|||
<i class="fa fa-weixin"></i> |
|||
</div> |
|||
<p>微信的联系方式我们也支持。</p> |
|||
</div> |
|||
|
|||
<div class="flex"> |
|||
<div |
|||
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5"> |
|||
<i class="fa fa-envelope"></i> |
|||
</div> |
|||
<p>邮箱作为联系您的备用联系方式。</p> |
|||
</div> |
|||
<div class="mt-6 pt-5 border-t border-gray-100"> |
|||
<h4 class="font-semibold mb-3 text-gray-700">温馨提示</h4> |
|||
<p class="text-sm"> |
|||
财富粉可以进入HomilyLink内部班级群<br />免费学习。<br /> |
|||
免费体验包括：夺宝奇兵三大模板<br /> |
|||
铁粉可以体验部分DeepChart功能！ |
|||
</p> |
|||
</div> |
|||
<div class="mt-6 pt-5 border-t border-gray-100"> |
|||
<h4 class="font-semibold mb-3 text-gray-700">郑重声明</h4> |
|||
<p class="text-sm"> |
|||
我们将严格保护您的个人信息安全，绝对不会向第三方泄露。<br /> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</main> |
|||
|
|||
<!-- 页脚 --> |
|||
<footer class="bg-gray-900 text-white py-10 px-4 mt-16"> |
|||
<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> |
|||
// 移动端菜单切换 |
|||
document.getElementById('mobileMenuBtn').addEventListener('click', function () { |
|||
const menu = document.getElementById('mobileMenu'); |
|||
menu.classList.toggle('hidden'); |
|||
const icon = this.querySelector('i'); |
|||
if (icon.classList.contains('fa-bars')) { |
|||
icon.classList.replace('fa-bars', 'fa-times'); |
|||
} else { |
|||
icon.classList.replace('fa-times', 'fa-bars'); |
|||
} |
|||
}); |
|||
|
|||
// 页面加载动画 |
|||
document.addEventListener('DOMContentLoaded', function () { |
|||
document.querySelectorAll('.fade-in').forEach(el => { |
|||
el.style.opacity = '1'; |
|||
}); |
|||
}); |
|||
</script> |
|||
<script type="text/javascript" src="210802/js/202510jg.js"></script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,270 @@ |
|||
<!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="夺宝奇兵,homilychart,homilylink"> |
|||
<meta http-equiv="description" content="HomilyLink"> |
|||
<title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</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', |
|||
success: '#10B981' // 成功状态颜色 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style type="text/tailwindcss"> |
|||
@layer utilities { |
|||
.card-hover { |
|||
@apply transition-all duration-300 hover:shadow-xl; |
|||
} |
|||
.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%]; |
|||
} |
|||
.pulse-animation { |
|||
animation: pulse 2s infinite; |
|||
} |
|||
@keyframes pulse { |
|||
0% { transform: scale(1); } |
|||
50% { transform: scale(1.05); } |
|||
100% { transform: scale(1); } |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
/* 基础动画 */ |
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(20px); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.fade-in { |
|||
animation: fadeIn 0.6s ease-out forwards; |
|||
} |
|||
|
|||
.delay-100 { |
|||
animation-delay: 0.1s; |
|||
} |
|||
|
|||
.delay-200 { |
|||
animation-delay: 0.2s; |
|||
} |
|||
|
|||
.delay-300 { |
|||
animation-delay: 0.3s; |
|||
} |
|||
|
|||
.delay-400 { |
|||
animation-delay: 0.4s; |
|||
} |
|||
|
|||
.delay-500 { |
|||
animation-delay: 0.5s; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body class="bg-gray-50 text-gray-800 font-sans min-h-screen"> |
|||
<!-- 导航栏 --> |
|||
<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="hcdbqb.asp" class="hover:text-primary transition-colors">首页</a> |
|||
<a href="hcdbqb-download.asp" class="hover:text-primary transition-colors">下载中心</a> |
|||
<a href="./hkhcdbqbGuide.html" class="text-primary font-medium">操作指南</a> |
|||
<a href="https://wa.me/+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="hcdbqb.asp" class="py-2 hover:text-primary transition-colors">首页</a> |
|||
<a href="hcdbqb-download.asp" class="py-2 hover:text-primary transition-colors">下载中心</a> |
|||
<a href="./hkhcdbqbGuide.html" class="py-2 text-primary">操作指南</a> |
|||
<a href="https://wa.me/+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 flex-grow"> |
|||
<div class="container mx-auto max-w-4xl"> |
|||
<!-- 成功提示卡片 --> |
|||
<div class="bg-white rounded-2xl shadow-lg p-8 md:p-10 max-w-3xl mx-auto fade-in"> |
|||
<!-- 成功图标 --> |
|||
<div |
|||
class="w-20 h-20 mx-auto mb-6 rounded-full bg-success/10 flex items-center justify-center text-success pulse-animation delay-100"> |
|||
<i class="fa fa-check text-4xl"></i> |
|||
</div> |
|||
|
|||
<!-- 标题 --> |
|||
<div class="text-center mb-6 delay-200 fade-in"> |
|||
<h1 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-gray-800 mb-2">注册成功！</h1> |
|||
<p class="text-gray-600 text-lg">感谢您参加DeepChart VS 夺宝奇兵体验</p> |
|||
</div> |
|||
|
|||
<!-- 成功图片 --> |
|||
<div class="mb-8 rounded-xl overflow-hidden shadow-md delay-300 fade-in"> |
|||
<a href="hcdbqb-download.asp#downloading"><img src="250121/img/homilylink-down.jpeg" |
|||
alt="点我跳转多平台设备软件安装" class="w-full h-auto rounded-xl shadow-lg"></a> |
|||
</div> |
|||
|
|||
<!-- 成功信息 --> |
|||
<div class="space-y-4 mb-8 text-gray-600 delay-400 fade-in"> |
|||
<div class="flex items-start"> |
|||
<div |
|||
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
|||
<i class="fa fa-envelope-o text-sm"></i> |
|||
</div> |
|||
<p>我们很快将通过Whatsapp或者微信与您取得联系！</p> |
|||
</div> |
|||
|
|||
<div class="flex items-start"> |
|||
<div |
|||
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
|||
<i class="fa fa-mobile text-sm"></i> |
|||
</div> |
|||
<p>同时，点击面图片跳转到HomilyLink安装界面！</p> |
|||
</div> |
|||
|
|||
<div class="flex items-start"> |
|||
<div |
|||
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
|||
<i class="fa fa-mobile text-sm"></i> |
|||
</div> |
|||
<p>手机商店搜索"DeepChart"并下载安装！</p> |
|||
</div> |
|||
|
|||
<div class="flex items-start"> |
|||
<div |
|||
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
|||
<i class="fa fa-mobile text-sm"></i> |
|||
</div> |
|||
<p>DeepChart的体验账号和夺宝奇兵账号一致！</p> |
|||
</div> |
|||
|
|||
<div class="flex items-start"> |
|||
<div |
|||
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
|||
<i class="fa fa-clock-o text-sm"></i> |
|||
</div> |
|||
<p>您不需要自己注册，我们的老师会为您发送体验的iD和密码！</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<div class="flex flex-col sm:flex-row gap-4 delay-500 fade-in"> |
|||
<a href="./hkhcdbqbGuide.html" |
|||
class="btn-effect flex-1 py-3 rounded-lg bg-gradient-to-r from-primary to-secondary text-white font-medium text-center"> |
|||
<i class="fa fa-home mr-2"></i>查看操作指南 |
|||
</a> |
|||
<a href="https://wa.me/+6588792879?text=我要体验夺宝奇兵" |
|||
class="btn-effect flex-1 py-3 rounded-lg border border-primary text-primary font-medium text-center hover:bg-primary/5 transition-colors"> |
|||
<i class="fa fa-user mr-2"></i>需要联系帮助 |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 帮助信息 --> |
|||
<div class="text-center mt-8 text-gray-500 text-sm max-w-xl mx-auto delay-500 fade-in"> |
|||
<p>如果您没有收到我们老师的消息，请及时<a href="https://wa.me/+6588792879?text=我要体验夺宝奇兵" target="_blank" |
|||
class="text-primary hover:underline">联系我们</a></p> |
|||
</div> |
|||
</div> |
|||
</main> |
|||
|
|||
<!-- 页脚 --> |
|||
<footer class="bg-gray-900 text-white py-10 px-4 mt-16"> |
|||
<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> |
|||
// 移动端菜单切换 |
|||
document.getElementById('mobileMenuBtn').addEventListener('click', function () { |
|||
const menu = document.getElementById('mobileMenu'); |
|||
menu.classList.toggle('hidden'); |
|||
const icon = this.querySelector('i'); |
|||
if (icon.classList.contains('fa-bars')) { |
|||
icon.classList.replace('fa-bars', 'fa-times'); |
|||
} else { |
|||
icon.classList.replace('fa-times', 'fa-bars'); |
|||
} |
|||
}); |
|||
|
|||
// 页面加载动画 |
|||
document.addEventListener('DOMContentLoaded', function () { |
|||
document.querySelectorAll('.fade-in').forEach(el => { |
|||
el.style.opacity = '1'; |
|||
}); |
|||
}); |
|||
|
|||
// 可选：5秒后自动跳转到首页 |
|||
// setTimeout(() => { |
|||
// window.location.href = '#'; // 替换为实际首页URL |
|||
// }, 5000); |
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,136 @@ |
|||
<html> |
|||
|
|||
<head> |
|||
<title>HomilyChart-弘历软件</title> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<meta http-equiv="pragma" content="no-cache"> |
|||
<meta http-equiv="cache-control" content="no-cache"> |
|||
<meta http-equiv="expires" content="0"> |
|||
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> |
|||
<meta http-equiv="description" content="This is my page"> |
|||
<style> |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
font-family: Arial, sans-serif; |
|||
background-color: #f5f5f5; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100vh; |
|||
margin: 0; |
|||
} |
|||
|
|||
.container { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
padding: 20px; |
|||
background-color: #fff; |
|||
border-radius: 5px; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
h1 { |
|||
text-align: center; |
|||
color: #4caf50; |
|||
} |
|||
|
|||
p { |
|||
font-size: 18px; |
|||
line-height: 1.5; |
|||
margin: 20px 0; |
|||
} |
|||
|
|||
button { |
|||
display: block; |
|||
margin: 0 auto; |
|||
padding: 10px 20px; |
|||
background-color: #4caf50; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 5px; |
|||
font-size: 18px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
@media screen and (max-width: 600px) { |
|||
.container { |
|||
max-width: 100%; |
|||
border-radius: 0; |
|||
} |
|||
} |
|||
</style> |
|||
<!-- |
|||
<link rel="stylesheet" type="text/css" href="styles.css"> |
|||
--> |
|||
<script type="text/javascript"> |
|||
function closew() { |
|||
window.location.href = "about:blank"; |
|||
window.opener = null; |
|||
window.open('', '_self'); |
|||
window.close(); |
|||
} |
|||
function bakcj() { |
|||
window.location.href = "https://hc.homilychart.com/hc/homilyjg.asp"; |
|||
} |
|||
</script> |
|||
|
|||
<script type="text/javascript"> |
|||
function closew() { |
|||
window.location.href = "about:blank"; |
|||
window.opener = null; |
|||
window.open('', '_self'); |
|||
window.close(); |
|||
} |
|||
window.onload = function () { |
|||
// 设置倒计时时间（以毫秒为单位） |
|||
var countdownTime = 5000; // 10秒 |
|||
|
|||
// 显示倒计时 |
|||
var countdownElement = document.getElementById('countdown'); |
|||
countdownElement.textContent = Math.ceil(countdownTime / 1000); |
|||
|
|||
// 开始倒计时 |
|||
setTimeout(function () { |
|||
// 在倒计时结束后跳转到目标页面 |
|||
window.location.href = './hkRegisterSuccess.html'; |
|||
}, countdownTime); |
|||
|
|||
// 更新倒计时显示 |
|||
var countdownInterval = setInterval(function () { |
|||
countdownTime -= 1000; |
|||
countdownElement.textContent = Math.ceil(countdownTime / 1000); |
|||
if (countdownTime <= 0) { |
|||
clearInterval(countdownInterval); |
|||
} |
|||
}, 1000); |
|||
}; |
|||
</script> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<div class="container"> |
|||
|
|||
<h1>报名成功</h1> |
|||
<p>恭喜您，课程报名成功！</p> |
|||
<p>稍后我们的助教老师会与您取得联系！</p> |
|||
<p>在开课之前会发给您听课信息！</p> |
|||
<p>我们建议您安装弘历听课平台！</p> |
|||
<p>所以本页面将在</p> |
|||
<h3><span id="countdown" style="font-size: 23px;color: red"></span> |
|||
<font color="red"> 秒</font> 后自动跳转到弘历听课平台安装界面 |
|||
</h3> |
|||
|
|||
|
|||
|
|||
<!----> |
|||
</div> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,456 @@ |
|||
<!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">感谢您对John Lu谈股团队的支持！<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> |
|||
@ -0,0 +1,644 @@ |
|||
<!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="弘历夺宝奇兵,homilychart,homilylink,HomilyLink,夺宝奇兵HomilyLink,股票体检专家,AI预测大模型,AI炒股时代,AI情绪大模型,超级云脑,夺宝利剑,AI金牛,AI探牛,AI雷达,AI小财神,大牛有型,金牛送福,牛刀小试,HomilyChart,免费体验,机构界的黑科技,数据分析时代,John Lu谈股,John Lu谈股财富圈"> |
|||
<meta http-equiv="description" content="HomilyLink"> |
|||
<title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</title> |
|||
<!-- 引入Tailwind CSS --> |
|||
<script src="https://cdn.tailwindcss.com"></script> |
|||
<script type="text/javascript" src="210802/js/jquery-1.9.1.min.js"></script> |
|||
<!-- 引入Font Awesome --> |
|||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
|||
|
|||
<!-- 配置Tailwind自定义颜色和字体 --> |
|||
<script> |
|||
tailwind.config = { |
|||
theme: { |
|||
extend: { |
|||
colors: { |
|||
primary: '#3B82F6', |
|||
secondary: '#10B981', |
|||
accent: '#8B5CF6', |
|||
dark: '#1E293B', |
|||
light: '#F8FAFC' |
|||
}, |
|||
fontFamily: { |
|||
sans: ['Inter', 'system-ui', 'sans-serif'], |
|||
}, |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- 自定义工具类 --> |
|||
<style type="text/tailwindcss"> |
|||
@layer utilities { |
|||
.content-auto { |
|||
content-visibility: auto; |
|||
} |
|||
.text-shadow { |
|||
text-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|||
} |
|||
.card-hover { |
|||
@apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1; |
|||
} |
|||
.gradient-bg { |
|||
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
/* 加载字体 */ |
|||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|||
/* 全局动画定义 */ |
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(20px); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.animate-fade-in { |
|||
animation: fadeIn 0.6s ease-out forwards; |
|||
} |
|||
|
|||
.delay-100 { |
|||
animation-delay: 0.1s; |
|||
} |
|||
|
|||
.delay-200 { |
|||
animation-delay: 0.2s; |
|||
} |
|||
|
|||
.delay-300 { |
|||
animation-delay: 0.3s; |
|||
} |
|||
|
|||
/* 平滑滚动 */ |
|||
html { |
|||
scroll-behavior: smooth; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
</head> |
|||
|
|||
<body class="font-sans bg-light text-dark"> |
|||
<!-- 导航栏 --> |
|||
<header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300"> |
|||
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|||
<a href="#" class="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="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">夺宝奇兵</span> |
|||
</a> |
|||
|
|||
<!-- 桌面导航 --> |
|||
<nav class="hidden md:flex items-center space-x-8"> |
|||
<a href="#features" class="font-medium hover:text-primary transition-colors">特色功能</a> |
|||
<a href="#kc" class="font-medium hover:text-primary transition-colors">最新课程</a> |
|||
<a href="./hkfeedback.html" class="font-medium hover:text-primary transition-colors">意见反馈</a> |
|||
<a href="./hkhcdbqbGuide.html" class="font-medium hover:text-primary transition-colors">操作指南</a> |
|||
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵指南我需要帮助" target="_blank" |
|||
class="px-5 py-2 rounded-full gradient-bg text-white font-medium hover:shadow-lg transition-all">联系我们</a> |
|||
</nav> |
|||
|
|||
<!-- 移动端菜单按钮 --> |
|||
<button id="menuBtn" class="md:hidden text-xl"> |
|||
<i class="fa fa-bars"></i> |
|||
</button> |
|||
</div> |
|||
|
|||
<!-- 移动端导航菜单 --> |
|||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t animate-fade-in"> |
|||
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4"> |
|||
<a href="#features" class="font-medium py-2 hover:text-primary transition-colors">特色功能</a> |
|||
<a href="#kc" class="font-medium py-2 hover:text-primary transition-colors">最新课程</a> |
|||
<a href="./hkfeedback.html" class="font-medium py-2 hover:text-primary transition-colors">意见反馈</a> |
|||
<a href="./hkhcdbqbGuide.html" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> |
|||
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵指南我需要帮助" target="_blank" |
|||
class="py-2 rounded-full gradient-bg text-white font-medium text-center hover:shadow-lg transition-all">联系我们</a> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
|
|||
<!-- 英雄区域 --> |
|||
<section class="pt-32 pb-20 md:pt-40 md:pb-32 px-4 bg-gradient-to-b from-blue-50 to-white"> |
|||
<div class="container mx-auto max-w-6xl"> |
|||
<div class="flex flex-col md:flex-row items-center"> |
|||
<div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in"> |
|||
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-6"> |
|||
夺宝奇兵，<br> |
|||
<span |
|||
class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">现在免费体验！</span> |
|||
</h1> |
|||
<p class="text-lg text-gray-600 mb-8 max-w-lg"> |
|||
AI时代股票投资必备机构界的黑科技！<br /> |
|||
现开放免费体验7天的活动，立刻注册报名吧！ |
|||
</p> |
|||
<div class="flex flex-col sm:flex-row gap-4"> |
|||
<a href="#register" |
|||
class="px-8 py-3 rounded-full gradient-bg text-white font-medium text-center hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5"> |
|||
立即注册 |
|||
</a> |
|||
<a href="#promotions" |
|||
class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all"> |
|||
了解更多 |
|||
</a> |
|||
<a href="./hkhcdbqbDownload.html" |
|||
class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all"> |
|||
立刻下载 |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="md:w-1/2 animate-fade-in delay-200"> |
|||
<div class="relative"> |
|||
<div |
|||
class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-accent/20 rounded-3xl blur-xl opacity-70"> |
|||
</div> |
|||
<img src="https://hc.homilychart.com/hc/250121/img/dbqbindex.jpg" alt="夺宝奇兵" |
|||
class="relative z-10 rounded-2xl shadow-xl w-full object-cover"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- 特色亮点 --> |
|||
<section id="features" class="py-16 px-4 bg-white"> |
|||
<div class="container mx-auto max-w-6xl"> |
|||
<div class="text-center mb-16 animate-fade-in"> |
|||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">您可以免费体验什么？</h2> |
|||
<p class="text-gray-600 max-w-2xl mx-auto">您可以免费体验 超级云脑 AI预测大模型 夺宝利剑三个模块 7天 </p> |
|||
</div> |
|||
|
|||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|||
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover animate-fade-in delay-100"> |
|||
<div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6"> |
|||
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png"> |
|||
</div> |
|||
<h3 class="text-xl font-semibold mb-3">超级云脑</h3> |
|||
<p class="text-gray-600">您的股票该体检了！<br />从十大维度，为您的股票进行全面体检！</p> |
|||
</div> |
|||
|
|||
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover animate-fade-in delay-200"> |
|||
<div class="w-14 h-14 rounded-xl bg-purple-100 flex items-center justify-center mb-6"> |
|||
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png"> |
|||
</div> |
|||
<h3 class="text-xl font-semibold mb-3">AI预测大模型</h3> |
|||
<p class="text-gray-600">采用最先进的安全技术，保护您的数据和隐私，让您高枕无忧地开展业务。</p> |
|||
</div> |
|||
|
|||
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover animate-fade-in delay-300"> |
|||
<div class="w-14 h-14 rounded-xl bg-green-100 flex items-center justify-center mb-6"> |
|||
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png"> |
|||
</div> |
|||
<h3 class="text-xl font-semibold mb-3">夺宝利剑</h3> |
|||
<p class="text-gray-600">根据您的具体需求提供个性化解决方案，灵活适应不同业务场景和规模。</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- 图文宣传区 --> |
|||
<section id="promotions" class="py-20 px-4 bg-gray-50"> |
|||
<div class="container mx-auto max-w-6xl"> |
|||
<div class="text-center mb-16 animate-fade-in"> |
|||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">我们的创新解决方案</h2> |
|||
<p class="text-gray-600 max-w-2xl mx-auto">探索我们的核心产品和服务，了解如何为您的业务创造价值</p> |
|||
</div> |
|||
|
|||
<!-- 宣传项 1 --> |
|||
<div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in"> |
|||
<div class="md:w-1/2"> |
|||
<img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台" class="w-full h-full object-cover"> |
|||
</div> |
|||
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center"> |
|||
<span |
|||
class="inline-block px-4 py-1 rounded-full bg-blue-100 text-primary text-sm font-medium mb-4">HomilyLink |
|||
> 夺宝奇兵 > 超级云脑</span> |
|||
<h3 class="text-2xl md:text-3xl font-bold mb-4">超级云脑:股票体检专家</h3> |
|||
<p class="text-gray-600 mb-6"> |
|||
利用人工智能和机器学习技术，快速处理和分析海量数据，通过十大维度为您的股票进行专科体检，追踪机构行为。 |
|||
</p> |
|||
<ul class="space-y-3 mb-8"> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>云脑探秘</span> |
|||
</li> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>机构动向</span> |
|||
</li> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>体检专家</span> |
|||
</li> |
|||
</ul> |
|||
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline"> |
|||
注册了解更多 <i class="fa fa-arrow-right ml-2"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 宣传项 2 --> |
|||
<div |
|||
class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100"> |
|||
<div class="md:w-1/2"> |
|||
<img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型" class="w-full h-full object-cover"> |
|||
</div> |
|||
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center"> |
|||
<span |
|||
class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-sm font-medium mb-4">HomilyLink |
|||
> 夺宝奇兵 > AI预测大模型</span> |
|||
<h3 class="text-2xl md:text-3xl font-bold mb-4">AI预测大模型</h3> |
|||
<p class="text-gray-600 mb-6"> |
|||
AI 预测大模型颠覆传统，以深度学习与算法挖股市数据抓趋势、预测高低点；AI时空共振结合前沿 AI与时空共振精准识别变盘点。 |
|||
</p> |
|||
<ul class="space-y-3 mb-8"> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>AI股价预测术</span> |
|||
</li> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>AI时空共振</span> |
|||
</li> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>未来预测</span> |
|||
</li> |
|||
</ul> |
|||
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline"> |
|||
注册了解更多 <i class="fa fa-arrow-right ml-2"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- 宣传项 2 --> |
|||
<div |
|||
class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100"> |
|||
<div class="md:w-1/2"> |
|||
<img src="https://hc.homilychart.com/hc/250121/img/duobaolijianindex.jpg" alt="夺宝利剑" class="w-full h-full object-cover"> |
|||
</div> |
|||
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center"> |
|||
<span |
|||
class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-sm font-medium mb-4">HomilyLink |
|||
>夺宝奇兵 >Ai金牛 >夺宝利剑</span> |
|||
<h3 class="text-2xl md:text-3xl font-bold mb-4">夺宝利剑</h3> |
|||
<p class="text-gray-600 mb-6"> |
|||
最聪明的AI智能均线结合三维波动量，让您在AI时代深度追踪机构的操盘行为！ |
|||
</p> |
|||
<ul class="space-y-3 mb-8"> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>最聪明的AI智能均线</span> |
|||
</li> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>三维波动量</span> |
|||
</li> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>AI大数据模型</span> |
|||
</li> |
|||
</ul> |
|||
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline"> |
|||
注册了解更多 <i class="fa fa-arrow-right ml-2"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 宣传项 3 --> |
|||
<div id="kc" |
|||
class="bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row animate-fade-in delay-200"> |
|||
<div class="md:w-1/2"> |
|||
<img src="https://hc.homilychart.com/hc/250121/img/kecheng.jpg" alt="John Lu谈股专题讲座" class="w-full h-full object-cover"> |
|||
</div> |
|||
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center"> |
|||
<span |
|||
class="inline-block px-4 py-1 rounded-full bg-green-100 text-secondary text-sm font-medium mb-4">HomilyLink |
|||
> 消息 > John Lu谈股财富圈</span> |
|||
<h3 class="text-2xl md:text-3xl font-bold mb-4">HomilyLink专题讲座</h3> |
|||
<p class="text-gray-600 mb-6"> |
|||
我们推出 HomilyLink专题讲座；结合市场事实热点与机构领域黑科技 “夺宝奇兵”，助力投资者提升股市获利能力。 |
|||
</p> |
|||
<ul class="space-y-3 mb-8"> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>新加坡时间</span> |
|||
</li> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>注意换算当地时间</span> |
|||
</li> |
|||
<li class="flex items-start"> |
|||
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i> |
|||
<span>HomilyLink班级群课程</span> |
|||
</li> |
|||
</ul> |
|||
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline"> |
|||
注册了解更多 <i class="fa fa-arrow-right ml-2"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- 注册表单区域 --> |
|||
<section id="register" class="py-20 px-4 bg-white"> |
|||
<div class="container mx-auto max-w-6xl"> |
|||
<div class="bg-gradient-to-br from-dark to-gray-800 rounded-3xl shadow-2xl overflow-hidden"> |
|||
<div class="grid grid-cols-1 md:grid-cols-2"> |
|||
<div class="p-8 md:p-12 text-white flex flex-col justify-center"> |
|||
<h2 class="text-2xl md:text-3xl font-bold mb-4">立即注册，开启智能体验之旅！</h2> |
|||
<p class="text-gray-300 mb-8"> |
|||
填写报名表，我们会尽快为您开启智能体验之旅！ |
|||
</p> |
|||
<div class="space-y-6"> |
|||
<div class="flex items-start"> |
|||
<div |
|||
class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1"> |
|||
<img alt="超级云脑" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png"> |
|||
</div> |
|||
<div> |
|||
<h3 class="font-semibold mb-1">超级云脑</h3> |
|||
<p class="text-gray-400 text-sm">您的股票体检专家！</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="flex items-start"> |
|||
<div |
|||
class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1"> |
|||
<img alt="AI预测大模型" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png"> |
|||
</div> |
|||
<div> |
|||
<h3 class="font-semibold mb-1">AI预测大模型</h3> |
|||
<p class="text-gray-400 text-sm">时间空间价格AI精准预测！</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="flex items-start"> |
|||
<div |
|||
class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1"> |
|||
<img alt="夺宝利剑" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png |
|||
"> |
|||
</div> |
|||
<div> |
|||
<h3 class="font-semibold mb-1">夺宝利剑</h3> |
|||
<p class="text-gray-400 text-sm">最聪明的AI智能均线+三维波动量</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bg-white p-8 md:p-12"> |
|||
<form id="registrationForm" class="space-y-6"> |
|||
<input type="hidden" name="zbtype" id="zbtype" value="6"> |
|||
<div> |
|||
<label for="unameinfo" class="block text-sm font-medium text-gray-700 mb-1">姓名</label> |
|||
<input type="text" id="unameinfo" name="unameinfo" |
|||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all" |
|||
placeholder="请输入您的姓名" required> |
|||
</div> |
|||
|
|||
<div> |
|||
<label for="countryinfo" |
|||
class="block text-sm font-medium text-gray-700 mb-1">国家/地区代码</label> |
|||
<select id="countryinfo" name="countryinfo" |
|||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all" |
|||
required> |
|||
|
|||
<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> |
|||
<div> |
|||
<label for="umoblie" class="block text-sm font-medium text-gray-700 mb-1">电话号码</label> |
|||
<input type="tel" name="umoblie" id="umoblie" placeholder="纯手机号 ( 不含国家编号 )" |
|||
onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0/g,'')" |
|||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all" |
|||
autocomplete="off" required> |
|||
</div> |
|||
|
|||
<div> |
|||
<label for="uwechat" class="block text-sm font-medium text-gray-700 mb-1">微信ID</label> |
|||
<input type="text" name="uwechat" id="uwechat" placeholder="微信ID ( 如没有WhatsApp )" |
|||
autocomplete="off" |
|||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all"> |
|||
</div> |
|||
|
|||
<div> |
|||
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label> |
|||
<input type="email" placeholder="请输入您的邮箱" name="uemail" id="uemail" autocomplete="off" |
|||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all" |
|||
required> |
|||
</div> |
|||
|
|||
<div class="flex items-start"> |
|||
<input type="checkbox" id="agreement" name="agreement" class="mt-1 mr-2" required> |
|||
<label for="agreement" class="text-sm text-gray-600"> |
|||
我同意接收相关产品和服务的资讯 |
|||
</label> |
|||
</div> |
|||
|
|||
<button type="submit" |
|||
class="w-full py-3 px-6 rounded-lg gradient-bg text-white font-medium hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5"> |
|||
提交注册 |
|||
</button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- 页脚 --> |
|||
<footer class="bg-dark text-white py-12 px-4"> |
|||
<div class="container mx-auto max-w-6xl"> |
|||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|||
<div> |
|||
<div class="flex items-center space-x-2 mb-6"> |
|||
<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="text-xl font-bold">夺宝奇兵</span> |
|||
</div> |
|||
<p class="text-gray-400 mb-6"> |
|||
AI炒股时代 机构界的黑科技！ |
|||
</p> |
|||
<div class="flex space-x-4"> |
|||
<a href="#" |
|||
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors"> |
|||
<i class="fa fa-facebook"></i> |
|||
</a> |
|||
<a href="#" |
|||
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors"> |
|||
<i class="fa fa-twitter"></i> |
|||
</a> |
|||
<a href="#" |
|||
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors"> |
|||
<i class="fa fa-linkedin"></i> |
|||
</a> |
|||
<a href="#" |
|||
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors"> |
|||
<i class="fa fa-instagram"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<h4 class="text-lg font-semibold mb-6">产品</h4> |
|||
<ul class="space-y-3"> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解弘历云版软件" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">弘历云版软件</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解HomilyChart" |
|||
target="_blank" class="text-gray-400 hover:text-white transition-colors">HomilyChart</a> |
|||
</li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解夺宝奇兵" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">夺宝奇兵</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解博股会员" |
|||
class="text-gray-400 hover:text-white transition-colors">博股会员</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解最新软件" |
|||
class="text-gray-400 hover:text-white transition-colors">最新软件</a></li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<div> |
|||
<h4 class="text-lg font-semibold mb-6">公司</h4> |
|||
<ul class="space-y-3"> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">关于我们</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">联系我们</a></li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<div> |
|||
<h4 class="text-lg font-semibold mb-6">支持</h4> |
|||
<ul class="space-y-3"> |
|||
<li><a href="hcdbqb-guide.asp" class="text-gray-400 hover:text-white transition-colors">帮助中心</a> |
|||
</li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我有问题" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">常见问题</a></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|||
<p class="text-gray-500 text-sm mb-4 md:mb-0">© Copyright 2026.Capitalmaster Pte Ltd All Rights |
|||
Reserved.<br /></p> |
|||
<div class="flex space-x-6"> |
|||
如需帮助，请及时联系我们！ |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</footer> |
|||
|
|||
<!-- 表单提交成功提示 --> |
|||
<div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden"> |
|||
<div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all"> |
|||
<div class="text-center"> |
|||
<div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-6"> |
|||
<i class="fa fa-check text-secondary text-2xl"></i> |
|||
</div> |
|||
<h3 class="text-xl font-bold mb-2">注册成功！</h3> |
|||
<p class="text-gray-600 mb-6">感谢您的注册，我们的顾问将尽快与您联系。</p> |
|||
<button id="closeModal" |
|||
class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"> |
|||
确定 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- JavaScript --> |
|||
<script type="text/javascript" src="250121/js/251015001.js"></script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,388 @@ |
|||
<!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="弘历夺宝奇兵,homilychart,homilylink,HomilyLink,夺宝奇兵HomilyLink,股票体检专家,AI预测大模型,AI炒股时代,AI情绪大模型,超级云脑,夺宝利剑,AI金牛,AI探牛,AI雷达,AI小财神,大牛有型,金牛送福,牛刀小试,HomilyChart,免费体验,机构界的黑科技,数据分析时代,John Lu谈股,John Lu谈股财富圈"> |
|||
<meta http-equiv="description" content="HomilyLink"> |
|||
<title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</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', |
|||
windows: '#0078D7', |
|||
macos: '#555555', |
|||
android: '#3DDC84', |
|||
ios: '#000000' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style type="text/tailwindcss"> |
|||
@layer utilities { |
|||
.card-hover { |
|||
@apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1; |
|||
} |
|||
.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%]; |
|||
} |
|||
.guide-step { |
|||
@apply flex items-start mb-3; |
|||
} |
|||
.guide-step-number { |
|||
@apply w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center mr-3 flex-shrink-0 mt-0.5; |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
</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; |
|||
} |
|||
</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-purple-600 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-purple-600">夺宝奇兵-软件下载</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="./hkhcdbqbDownload.html" class="text-primary font-medium">下载中心</a> |
|||
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵下载我需要帮助" target="_blank" |
|||
class="hover:text-primary transition-colors">帮助</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-purple-600 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="./hkhcdbqb.html" class="py-2 hover:text-primary transition-colors">首页</a> |
|||
<a href="./hkhcdbqbDownload.html" class="py-2 text-primary">下载中心</a> |
|||
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵下载我需要帮助" target="_blank" |
|||
class="py-2 hover:text-primary transition-colors">帮助</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-purple-600 text-white text-center">联系我们</a> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
|
|||
<!-- 主要内容 --> |
|||
<main class="pt-28 pb-16 px-4"> |
|||
<div class="container mx-auto max-w-6xl"> |
|||
<!-- 页面标题 --> |
|||
<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">尊敬的 <font |
|||
style="font-weight: bold;color:purple;font-size: 17px;">夺宝奇兵</font> |
|||
体验者您好，<br />请选择适合您设备的客户端，体验夺宝奇兵，听直播和重播！</p> |
|||
</div> |
|||
|
|||
<!-- 优化后的下载说明区域 - 整体左对齐 --> |
|||
<div |
|||
class="bg-gradient-to-r from-primary/5 to-primary/10 border border-primary/20 rounded-xl p-6 md:p-8 mb-10 fade-in delay-100 shadow-sm"> |
|||
<div class="max-w-3xl mx-auto"> |
|||
<!-- 图标与标题行 - 左对齐 --> |
|||
<div class="flex items-center mb-4"> |
|||
<div |
|||
class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-primary flex-shrink-0 mr-3"> |
|||
<i class="fa fa-info"></i> |
|||
</div> |
|||
<h3 class="font-semibold text-lg md:text-xl text-gray-800">下载说明</h3> |
|||
</div> |
|||
|
|||
<!-- 说明文字 - 左对齐，无额外缩进 --> |
|||
<p class="text-gray-700 mb-6">我们的安装包经过安全认证，若浏览器提示拦截，请按照以下步骤操作：</p> |
|||
|
|||
<!-- 步骤说明 - 左对齐，与标题保持视觉一致 --> |
|||
<div> |
|||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6"> |
|||
<div class="guide-step group"> |
|||
<span class="guide-step-number group-hover:bg-primary/80 transition-colors">1</span> |
|||
<span class="text-gray-700 group-hover:text-primary transition-colors">点击浏览器拦截提示</span> |
|||
</div> |
|||
<div class="guide-step group"> |
|||
<span class="guide-step-number group-hover:bg-primary/80 transition-colors">2</span> |
|||
<span class="text-gray-700 group-hover:text-primary transition-colors">选择"允许下载"</span> |
|||
</div> |
|||
<div class="guide-step group"> |
|||
<span class="guide-step-number group-hover:bg-primary/80 transition-colors">3</span> |
|||
<span class="text-gray-700 group-hover:text-primary transition-colors">在下载中心确认保存</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 下载卡片区域 --> |
|||
<div id="downloading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16"> |
|||
<!-- Windows --> |
|||
<div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in"> |
|||
<div |
|||
class="w-20 h-20 mx-auto mb-5 rounded-full bg-windows/10 flex items-center justify-center text-windows text-4xl"> |
|||
<i class="fa fa-windows"></i> |
|||
</div> |
|||
<h3 class="text-lg font-bold mb-2">Windows</h3> |
|||
<p class="text-gray-500 text-sm mb-3">适用于Win 10及以上</p> |
|||
<p class="text-gray-500 text-xs mb-4">版本: v1.2.2 | 178 MB</p> |
|||
|
|||
<button onclick="handlePlatformDownload('windows')" |
|||
class="btn-effect w-full py-3 rounded-lg bg-windows text-white font-medium"> |
|||
<i class="fa fa-download mr-2"></i>立即下载 |
|||
</button> |
|||
</div> |
|||
|
|||
<!-- macOS --> |
|||
<div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-100"> |
|||
<div |
|||
class="w-20 h-20 mx-auto mb-5 rounded-full bg-gray-100 flex items-center justify-center text-macos text-4xl"> |
|||
<i class="fa fa-apple"></i> |
|||
</div> |
|||
<h3 class="text-lg font-bold mb-2">macOS</h3> |
|||
<p class="text-gray-500 text-sm mb-3">适用于macOS 10.15+</p> |
|||
<p class="text-gray-500 text-xs mb-4">版本: v1.2.1 | 80.6 MB</p> |
|||
|
|||
<button onclick="handlePlatformDownload('macos')" |
|||
class="btn-effect w-full py-3 rounded-lg bg-macos text-white font-medium"> |
|||
<i class="fa fa-download mr-2"></i>立即下载 |
|||
</button> |
|||
</div> |
|||
|
|||
<!-- Android --> |
|||
<div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-200"> |
|||
<div |
|||
class="w-20 h-20 mx-auto mb-5 rounded-full bg-android/10 flex items-center justify-center text-android text-4xl"> |
|||
<i class="fa fa-android"></i> |
|||
</div> |
|||
<h3 class="text-lg font-bold mb-2">Android</h3> |
|||
<p class="text-gray-500 text-sm mb-3">适用于Android 6.0+</p> |
|||
<p class="text-gray-500 text-xs mb-4">版本: v1.3.22 | 20.11 MB</p> |
|||
|
|||
<button onclick="handlePlatformDownload('android')" |
|||
class="btn-effect w-full py-3 rounded-lg bg-android text-white font-medium"> |
|||
<i class="fa fa-download mr-2"></i>立即下载 |
|||
</button> |
|||
</div> |
|||
|
|||
<!-- iOS --> |
|||
<div class="bg-white rounded-xl shadow-md p-6 text-center card-hover fade-in delay-300"> |
|||
<div |
|||
class="w-20 h-20 mx-auto mb-5 rounded-full bg-gray-100 flex items-center justify-center text-ios text-4xl"> |
|||
<i class="fa fa-mobile"></i> |
|||
</div> |
|||
<h3 class="text-lg font-bold mb-2">iOS</h3> |
|||
<p class="text-gray-500 text-sm mb-3">适用于iOS 13.0+</p> |
|||
<p class="text-gray-500 text-xs mb-4">版本: v3.1.8 | 45.2 MB</p> |
|||
|
|||
<button onclick="handlePlatformDownload('ios')" |
|||
class="btn-effect w-full py-3 rounded-lg bg-ios text-white font-medium"> |
|||
<i class="fa fa-download mr-2"></i>立即下载 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 设备展示图 --> |
|||
<div class="max-w-3xl mx-auto mb-16 fade-in delay-100"> |
|||
<a href="#"><img src="https://hc.homilychart.com/hc/250121/img/homilylink-down.jpeg" alt="多平台设备展示" |
|||
class="w-full h-auto rounded-xl shadow-lg"></a> |
|||
</div> |
|||
|
|||
<!-- 下载帮助指南 --> |
|||
<div class="mt-16 bg-white rounded-xl shadow-md p-6 max-w-3xl mx-auto fade-in delay-200"> |
|||
<h3 class="text-xl font-bold mb-4 text-center">常见下载问题</h3> |
|||
|
|||
<div class="space-y-4"> |
|||
<div> |
|||
<h4 class="font-semibold mb-1 flex items-center"> |
|||
<i class="fa fa-shield text-primary mr-2"></i> |
|||
为什么我的下载被拦截了？ |
|||
</h4> |
|||
<p class="text-gray-600 text-sm">浏览器会对未知的安装包进行安全检查，这是正常的安全机制。我们的软件经过数字签名，您可以放心下载。</p> |
|||
</div> |
|||
|
|||
<div> |
|||
<h4 class="font-semibold mb-1 flex items-center"> |
|||
<i class="fa fa-exclamation-triangle text-primary mr-2"></i> |
|||
下载的文件无法打开？ |
|||
</h4> |
|||
<p class="text-gray-600 text-sm">请检查您的设备是否满足系统要求，Windows和macOS可能需要在设置中允许来自开发者的应用。</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</main> |
|||
|
|||
<!-- 下载确认弹窗 --> |
|||
<div id="downloadModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modalTitle" |
|||
aria-describedby="modalDescription"> |
|||
<div class="modal-content p-6"> |
|||
<div class="text-center mb-4"> |
|||
<div |
|||
class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-green-500 mx-auto mb-4"> |
|||
<i class="fa fa-download text-2xl"></i> |
|||
</div> |
|||
<h3 class="text-xl font-bold" id="modalTitle">确认下载</h3> |
|||
<p class="text-gray-600 mt-2" id="modalDescription">您即将下载以下文件</p> |
|||
</div> |
|||
|
|||
<div class="bg-gray-50 rounded-lg p-4 mb-6"> |
|||
<div class="flex justify-between items-center mb-2"> |
|||
<span class="text-gray-500">设备:</span> |
|||
<span class="font-medium" id="modalDevice"></span> |
|||
</div> |
|||
<div class="flex justify-between items-center mb-2"> |
|||
<span class="text-gray-500">版本:</span> |
|||
<span id="modalVersion"></span> |
|||
</div> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-gray-500">文件名:</span> |
|||
<span class="font-medium" id="modalFileName"></span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="p-3 bg-blue-50 border border-blue-100 rounded-lg mb-6 text-sm text-blue-700"> |
|||
<i class="fa fa-info-circle mr-2"></i> |
|||
<span>如果浏览器阻止下载，请在下载栏中选择"保留"或"允许"以继续。</span> |
|||
</div> |
|||
|
|||
<div class="flex gap-3"> |
|||
<button id="cancelDownload" |
|||
class="flex-1 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors" |
|||
aria-label="取消下载"> |
|||
取消 |
|||
</button> |
|||
<button id="confirmDownload" |
|||
class="flex-1 py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-colors" |
|||
aria-label="确认下载"> |
|||
确认下载 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 移动端下载电脑端提示弹窗 --> |
|||
<div id="mobileWarningModal" class="modal-backdrop" role="dialog" aria-modal="true"> |
|||
<div class="modal-content p-6"> |
|||
<div class="text-center mb-6"> |
|||
<div |
|||
class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 mx-auto mb-4"> |
|||
<i class="fa fa-exclamation-triangle text-2xl"></i> |
|||
</div> |
|||
<h3 class="text-xl font-bold">设备不匹配提示</h3> |
|||
<p class="text-gray-600 mt-3">您正在使用移动设备访问，建议下载适合手机的版本以获得最佳体验。</p> |
|||
<p class="text-gray-600 mt-2">如果需要电脑版，请在电脑上访问本页面下载。</p> |
|||
</div> |
|||
|
|||
<div class="flex gap-3"> |
|||
<button id="cancelComputerDownload" |
|||
class="flex-1 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"> |
|||
下载手机版 |
|||
</button> |
|||
<button id="continueComputerDownload" |
|||
class="flex-1 py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-colors"> |
|||
仍要下载电脑版 |
|||
</button> |
|||
</div> |
|||
</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/20251015.js"></script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,669 @@ |
|||
<!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="弘历夺宝奇兵,homilychart,homilylink,HomilyLink,夺宝奇兵HomilyLink,股票体检专家,AI预测大模型,AI炒股时代,AI情绪大模型,超级云脑,夺宝利剑,AI金牛,AI探牛,AI雷达,AI小财神,大牛有型,金牛送福,牛刀小试,HomilyChart,免费体验,机构界的黑科技,数据分析时代,John Lu谈股,John Lu谈股财富圈"> |
|||
<meta http-equiv="description" content="HomilyLink"> |
|||
<title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</title> |
|||
<!-- 引入Tailwind CSS --> |
|||
<script src="https://cdn.tailwindcss.com"></script> |
|||
<!-- 引入Font Awesome --> |
|||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
|||
|
|||
<!-- 配置Tailwind自定义颜色和字体（与原页面保持一致） --> |
|||
<script> |
|||
tailwind.config = { |
|||
theme: { |
|||
extend: { |
|||
colors: { |
|||
primary: '#3B82F6', |
|||
secondary: '#10B981', |
|||
accent: '#8B5CF6', |
|||
dark: '#1E293B', |
|||
light: '#F8FAFC' |
|||
}, |
|||
fontFamily: { |
|||
sans: ['Inter', 'system-ui', 'sans-serif'], |
|||
}, |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- 自定义工具类 --> |
|||
<style type="text/tailwindcss"> |
|||
@layer utilities { |
|||
.content-auto { |
|||
content-visibility: auto; |
|||
} |
|||
.text-shadow { |
|||
text-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|||
} |
|||
.card-hover { |
|||
@apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1; |
|||
} |
|||
.gradient-bg { |
|||
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
/* 全局动画定义 */ |
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(20px); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.animate-fade-in { |
|||
opacity: 0; |
|||
animation: fadeIn 0.6s ease-out forwards; |
|||
} |
|||
|
|||
.delay-100 { |
|||
animation-delay: 0.1s; |
|||
} |
|||
|
|||
.delay-200 { |
|||
animation-delay: 0.2s; |
|||
} |
|||
|
|||
/* 平滑滚动 */ |
|||
html { |
|||
scroll-behavior: smooth; |
|||
} |
|||
|
|||
/* 视频容器比例控制 */ |
|||
.video-container { |
|||
position: relative; |
|||
padding-bottom: 56.25%; |
|||
/* 16:9 比例 */ |
|||
height: 0; |
|||
overflow: hidden; |
|||
border-radius: 1.5rem; |
|||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.video-container iframe, |
|||
.video-container video { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
border: 0; |
|||
} |
|||
|
|||
/* 图片展示样式 */ |
|||
.image-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
|||
gap: 1.5rem; |
|||
} |
|||
|
|||
.image-item { |
|||
border-radius: 1rem; |
|||
overflow: hidden; |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
|||
transition: all 0.3s ease; |
|||
cursor: pointer; |
|||
position: relative; |
|||
} |
|||
|
|||
.image-item img { |
|||
width: 100%; |
|||
height: 200px; |
|||
object-fit: cover; |
|||
transition: transform 0.5s ease; |
|||
} |
|||
|
|||
.image-item:hover { |
|||
transform: translateY(-5px); |
|||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12); |
|||
} |
|||
|
|||
.image-item:hover img { |
|||
transform: scale(1.05); |
|||
} |
|||
|
|||
.image-caption { |
|||
padding: 1rem; |
|||
background-color: white; |
|||
} |
|||
|
|||
/* 图片查看器 */ |
|||
.image-viewer { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.9); |
|||
display: none; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 100; |
|||
padding: 2rem; |
|||
} |
|||
|
|||
.image-viewer.active { |
|||
display: flex; |
|||
} |
|||
|
|||
.viewer-content { |
|||
max-width: 90%; |
|||
max-height: 90%; |
|||
position: relative; |
|||
} |
|||
|
|||
.viewer-image { |
|||
max-width: 100%; |
|||
max-height: 80vh; |
|||
border-radius: 0.5rem; |
|||
} |
|||
|
|||
.viewer-caption { |
|||
color: white; |
|||
text-align: center; |
|||
margin-top: 1rem; |
|||
font-size: 1.2rem; |
|||
} |
|||
|
|||
.close-viewer { |
|||
position: absolute; |
|||
top: -40px; |
|||
right: 0; |
|||
color: white; |
|||
font-size: 2rem; |
|||
cursor: pointer; |
|||
transition: color 0.3s ease; |
|||
} |
|||
|
|||
.viewer-nav { |
|||
position: absolute; |
|||
top: 50%; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
transform: translateY(-50%); |
|||
padding: 0 1rem; |
|||
} |
|||
|
|||
.viewer-nav button { |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
border: none; |
|||
color: white; |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
transition: background-color 0.3s ease; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body class="font-sans bg-light text-dark"> |
|||
<!-- 导航栏 --> |
|||
<header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300"> |
|||
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|||
<a href="#" class="flex items-center space-x-2"> |
|||
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center"> |
|||
<img alt="夺宝奇兵" src="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-accent">夺宝奇兵-操作指南</span> |
|||
</a> |
|||
|
|||
<!-- 桌面导航 --> |
|||
<nav class="hidden md:flex items-center space-x-6"> |
|||
<a href="#video-guide" class="font-medium hover:text-primary transition-colors">视频指南</a> |
|||
<a href="#image-guide" class="font-medium hover:text-primary transition-colors">图片说明</a> |
|||
<a href="./hkhcdbqbDownload.html" class="font-medium hover:text-primary transition-colors">软件下载</a> |
|||
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵指南我需要帮助" target="_blank" |
|||
class="px-5 py-2 rounded-full gradient-bg text-white font-medium hover:shadow-lg transition-all">联系支持</a> |
|||
</nav> |
|||
|
|||
<!-- 移动端菜单按钮 --> |
|||
<button id="menuBtn" class="md:hidden text-xl"> |
|||
<i class="fa fa-bars"></i> |
|||
</button> |
|||
</div> |
|||
|
|||
<!-- 移动端导航菜单 --> |
|||
<div id="mobileMenu" class="md:hidden hidden bg-white border-t animate-fade-in"> |
|||
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4"> |
|||
<a href="#video-guide" class="font-medium py-2 hover:text-primary transition-colors">视频指南</a> |
|||
<a href="#image-guide" class="font-medium py-2 hover:text-primary transition-colors">图片说明</a> |
|||
<a href="hcdbqb-download.asp" class="font-medium py-2 hover:text-primary transition-colors">图片说明</a> |
|||
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵指南我需要帮助" target="_blank" |
|||
class="py-2 rounded-full gradient-bg text-white font-medium text-center hover:shadow-lg transition-all">联系支持</a> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
|
|||
<!-- 英雄区域 --> |
|||
<section class="pt-32 pb-20 md:pt-40 md:pb-32 px-4 bg-gradient-to-b from-blue-50 to-white"> |
|||
<div class="container mx-auto max-w-6xl text-center"> |
|||
<div class="animate-fade-in"> |
|||
<h1 class="text-[clamp(2rem,5vw,3rem)] font-bold leading-tight text-shadow mb-6"> |
|||
操作指南中心 |
|||
</h1> |
|||
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto"> |
|||
通过视频以及图文说明，教你如何使用夺宝奇兵软件以及如何观看直播和观看重播！ |
|||
</p> |
|||
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|||
<a href="#video-guide" |
|||
class="px-8 py-3 rounded-full gradient-bg text-white font-medium text-center hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5"> |
|||
观看视频教程 |
|||
</a> |
|||
<a href="#image-guide" |
|||
class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all"> |
|||
查看图文说明 |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- 视频指南区域 --> |
|||
<section id="video-guide" class="py-20 px-4 bg-white"> |
|||
<div class="container mx-auto max-w-5xl"> |
|||
<div class="text-center mb-12 animate-fade-in"> |
|||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">HomilyLink指南视频</h2> |
|||
<p class="text-gray-600 max-w-2xl mx-auto">详细的视频教程，如何体验夺宝奇兵，如何听课，如何看重播！</p> |
|||
</div> |
|||
|
|||
<!-- 主视频播放窗口 --> |
|||
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 animate-fade-in delay-100"> |
|||
<h3 class="text-xl md:text-2xl font-semibold mb-4">HomilyLink操作指南 | 课程直播以及重播指南</h3> |
|||
<div class="video-container"> |
|||
<!-- 兼容性视频播放器 --> |
|||
<video id="guideVideo" controls poster="250121/img/106-1200x675.jpg" controlsList="nodownload" |
|||
class="w-full"></video> |
|||
</div> |
|||
<div class="mt-6 flex flex-wrap items-center justify-between gap-4"> |
|||
<div> |
|||
<p class="text-gray-600">时长: 02:14</p> |
|||
<p class="text-gray-500 text-sm mt-1">HomilyLink操作指南 </p> |
|||
</div> |
|||
<div class="flex space-x-3"> |
|||
<button |
|||
class="flex items-center space-x-1 px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors"> |
|||
<img alt="夺宝奇兵" src="250121/img/20230711171637.png" style="width: 30px;height: 30px;"> |
|||
<span><a href="https://api.whatsapp.com/send?phone=6588792879&text=进HomilyLink听课需要帮助" |
|||
target="_blank" class="text-gray-400 transition-colors" |
|||
style="color: black">点击寻求帮助</a></span> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- 图片说明区域 --> |
|||
<section id="image-guide" class="py-20 px-4 bg-gray-50"> |
|||
<div class="container mx-auto max-w-6xl" style="display: none;"> |
|||
<div class="text-center mb-16 animate-fade-in"> |
|||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">操作步骤图解</h2> |
|||
<p class="text-gray-600 max-w-2xl mx-auto">详细的图文说明，带您一步步完成各项操作设置</p> |
|||
</div> |
|||
|
|||
<!-- 图片过滤标签 --> |
|||
<div class="flex flex-wrap justify-center gap-3 mb-10 animate-fade-in delay-100"> |
|||
<button class="filter-btn active px-5 py-2 rounded-full bg-primary text-white font-medium" |
|||
data-filter="all">全部步骤</button> |
|||
<button |
|||
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors" |
|||
data-filter="setup">安装登录</button> |
|||
<button |
|||
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors" |
|||
data-filter="operation">观看直播</button> |
|||
<button |
|||
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors" |
|||
data-filter="advanced">观看重播</button> |
|||
</div> |
|||
|
|||
<!-- 图片网格 --> |
|||
<div class="image-grid animate-fade-in delay-200"> |
|||
<!-- 安装设置 --> |
|||
<div class="image-item" data-category="setup" data-caption="步骤1：开箱与配件检查"> |
|||
<img src="https://picsum.photos/seed/setup1/600/400" alt="开箱与配件检查"> |
|||
<div class="image-caption"> |
|||
<h4 class="font-medium">步骤1：开箱与配件检查</h4> |
|||
<p class="text-gray-600 text-sm mt-1">检查包装内物品是否完整，包含主机、电源线、数据线和说明书</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="image-item" data-category="setup" data-caption="步骤2：设备连接与安装"> |
|||
<img src="https://picsum.photos/seed/setup2/600/400" alt="设备连接与安装"> |
|||
<div class="image-caption"> |
|||
<h4 class="font-medium">步骤2：设备连接与安装</h4> |
|||
<p class="text-gray-600 text-sm mt-1">按照图示连接电源和数据线，固定设备到合适位置</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 基本操作 --> |
|||
<div class="image-item" data-category="operation" data-caption="步骤3：开机与初始设置"> |
|||
<img src="https://picsum.photos/seed/operate1/600/400" alt="开机与初始设置"> |
|||
<div class="image-caption"> |
|||
<h4 class="font-medium">步骤3：开机与初始设置</h4> |
|||
<p class="text-gray-600 text-sm mt-1">首次开机后按照向导完成语言、网络等基本设置</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="image-item" data-category="operation" data-caption="步骤4：主界面功能介绍"> |
|||
<img src="https://picsum.photos/seed/operate2/600/400" alt="主界面功能介绍"> |
|||
<div class="image-caption"> |
|||
<h4 class="font-medium">步骤4：主界面功能介绍</h4> |
|||
<p class="text-gray-600 text-sm mt-1">了解主界面布局和各功能模块的位置与作用</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 高级功能 --> |
|||
<div class="image-item" data-category="advanced" data-caption="步骤5：用户权限管理"> |
|||
<img src="https://picsum.photos/seed/advanced1/600/400" alt="用户权限管理"> |
|||
<div class="image-caption"> |
|||
<h4 class="font-medium">步骤5：用户权限管理</h4> |
|||
<p class="text-gray-600 text-sm mt-1">如何创建和管理不同权限的用户账户</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="image-item" data-category="advanced" data-caption="步骤6：数据备份与恢复"> |
|||
<img src="https://picsum.photos/seed/advanced2/600/400" alt="数据备份与恢复"> |
|||
<div class="image-caption"> |
|||
<h4 class="font-medium">步骤6：数据备份与恢复</h4> |
|||
<p class="text-gray-600 text-sm mt-1">设置自动备份和手动备份，以及数据恢复方法</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- 图片查看器 --> |
|||
<div class="image-viewer" id="imageViewer"> |
|||
<div class="viewer-content"> |
|||
<span class="close-viewer" id="closeViewer">×</span> |
|||
<div class="viewer-nav"> |
|||
<button id="prevImage"><i class="fa fa-chevron-left"></i></button> |
|||
<button id="nextImage"><i class="fa fa-chevron-right"></i></button> |
|||
</div> |
|||
<img src="" alt="" class="viewer-image" id="viewerImage"> |
|||
<div class="viewer-caption" id="viewerCaption"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 页脚 --> |
|||
<footer class="bg-dark text-white py-12 px-4"> |
|||
<div class="container mx-auto max-w-6xl"> |
|||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|||
<div> |
|||
<div class="flex items-center space-x-2 mb-6"> |
|||
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center"> |
|||
<img alt="夺宝奇兵" src="250121/img/20230711171637.png" style="width: 40px;height: 40px;"> |
|||
</div> |
|||
<span class="text-xl font-bold">夺宝奇兵</span> |
|||
</div> |
|||
<p class="text-gray-400 mb-6"> |
|||
AI炒股时代 机构界的黑科技！ |
|||
</p> |
|||
<div class="flex space-x-4"> |
|||
<a href="#" |
|||
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors"> |
|||
<i class="fa fa-facebook"></i> |
|||
</a> |
|||
<a href="#" |
|||
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors"> |
|||
<i class="fa fa-twitter"></i> |
|||
</a> |
|||
<a href="#" |
|||
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors"> |
|||
<i class="fa fa-linkedin"></i> |
|||
</a> |
|||
<a href="#" |
|||
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors"> |
|||
<i class="fa fa-instagram"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<h4 class="text-lg font-semibold mb-6">产品</h4> |
|||
<ul class="space-y-3"> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解弘历云版软件" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">弘历云版软件</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解HomilyChart" |
|||
target="_blank" class="text-gray-400 hover:text-white transition-colors">HomilyChart</a> |
|||
</li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解夺宝奇兵" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">夺宝奇兵</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解博股会员" |
|||
class="text-gray-400 hover:text-white transition-colors">博股会员</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解最新软件" |
|||
class="text-gray-400 hover:text-white transition-colors">最新软件</a></li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<div> |
|||
<h4 class="text-lg font-semibold mb-6">公司</h4> |
|||
<ul class="space-y-3"> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">关于我们</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">联系我们</a></li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<div> |
|||
<h4 class="text-lg font-semibold mb-6">支持</h4> |
|||
<ul class="space-y-3"> |
|||
<li><a href="hcdbqb-guide.asp" class="text-gray-400 hover:text-white transition-colors">帮助中心</a> |
|||
</li> |
|||
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我有问题" target="_blank" |
|||
class="text-gray-400 hover:text-white transition-colors">常见问题</a></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|||
<p class="text-gray-500 text-sm mb-4 md:mb-0">© Copyright 2026.Capitalmaster Pte Ltd All Rights |
|||
Reserved.<br /></p> |
|||
<div class="flex space-x-6"> |
|||
如需帮助，请及时联系我们！ |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</footer> |
|||
|
|||
<!-- JavaScript --> |
|||
<script> |
|||
// 移动端菜单切换 |
|||
const menuBtn = document.getElementById('menuBtn'); |
|||
const mobileMenu = document.getElementById('mobileMenu'); |
|||
|
|||
menuBtn.addEventListener('click', () => { |
|||
mobileMenu.classList.toggle('hidden'); |
|||
// 切换图标 |
|||
const icon = menuBtn.querySelector('i'); |
|||
if (icon.classList.contains('fa-bars')) { |
|||
icon.classList.replace('fa-bars', 'fa-times'); |
|||
} else { |
|||
icon.classList.replace('fa-times', 'fa-bars'); |
|||
} |
|||
}); |
|||
|
|||
// 导航栏滚动效果 |
|||
window.addEventListener('scroll', () => { |
|||
const header = document.querySelector('header'); |
|||
if (window.scrollY > 50) { |
|||
header.classList.add('py-2', 'shadow'); |
|||
header.classList.remove('py-3'); |
|||
} else { |
|||
header.classList.add('py-3'); |
|||
header.classList.remove('py-2', 'shadow'); |
|||
} |
|||
}); |
|||
|
|||
// 图片查看器功能 |
|||
const imageViewer = document.getElementById('imageViewer'); |
|||
const viewerImage = document.getElementById('viewerImage'); |
|||
const viewerCaption = document.getElementById('viewerCaption'); |
|||
const closeViewer = document.getElementById('closeViewer'); |
|||
const prevImage = document.getElementById('prevImage'); |
|||
const nextImage = document.getElementById('nextImage'); |
|||
const imageItems = document.querySelectorAll('.image-item'); |
|||
let currentImageIndex = 0; |
|||
let filteredImages = Array.from(imageItems); |
|||
|
|||
// 打开图片查看器 |
|||
imageItems.forEach((item) => { |
|||
item.addEventListener('click', () => { |
|||
currentImageIndex = filteredImages.indexOf(item); |
|||
updateViewer(); |
|||
imageViewer.classList.add('active'); |
|||
document.body.style.overflow = 'hidden'; |
|||
}); |
|||
}); |
|||
|
|||
// 关闭图片查看器 |
|||
closeViewer.addEventListener('click', () => { |
|||
imageViewer.classList.remove('active'); |
|||
document.body.style.overflow = ''; |
|||
}); |
|||
|
|||
// 点击查看器外部关闭 |
|||
imageViewer.addEventListener('click', (e) => { |
|||
if (e.target === imageViewer) { |
|||
imageViewer.classList.remove('active'); |
|||
document.body.style.overflow = ''; |
|||
} |
|||
}); |
|||
|
|||
// 上一张/下一张图片 |
|||
prevImage.addEventListener('click', (e) => { |
|||
e.stopPropagation(); |
|||
currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length; |
|||
updateViewer(); |
|||
}); |
|||
|
|||
nextImage.addEventListener('click', (e) => { |
|||
e.stopPropagation(); |
|||
currentImageIndex = (currentImageIndex + 1) % filteredImages.length; |
|||
updateViewer(); |
|||
}); |
|||
|
|||
// 更新查看器内容 |
|||
function updateViewer() { |
|||
const currentItem = filteredImages[currentImageIndex]; |
|||
const imgSrc = currentItem.querySelector('img').src; |
|||
const caption = currentItem.dataset.caption; |
|||
|
|||
viewerImage.src = imgSrc; |
|||
viewerImage.alt = caption; |
|||
viewerCaption.textContent = caption; |
|||
} |
|||
|
|||
// 图片过滤功能 |
|||
const filterBtns = document.querySelectorAll('.filter-btn'); |
|||
|
|||
filterBtns.forEach(btn => { |
|||
btn.addEventListener('click', () => { |
|||
// 更新按钮样式 |
|||
filterBtns.forEach(b => { |
|||
b.classList.remove('active', 'bg-primary', 'text-white'); |
|||
b.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-100'); |
|||
}); |
|||
btn.classList.add('active', 'bg-primary', 'text-white'); |
|||
btn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-100'); |
|||
|
|||
const filter = btn.dataset.filter; |
|||
|
|||
// 过滤图片 |
|||
filteredImages = []; |
|||
imageItems.forEach(item => { |
|||
if (filter === 'all' || item.dataset.category === filter) { |
|||
item.style.display = 'block'; |
|||
filteredImages.push(item); |
|||
} else { |
|||
item.style.display = 'none'; |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
// 滚动动画 |
|||
const animateOnScroll = () => { |
|||
const elements = document.querySelectorAll('.animate-fade-in'); |
|||
|
|||
elements.forEach(element => { |
|||
const elementPosition = element.getBoundingClientRect().top; |
|||
const windowHeight = window.innerHeight; |
|||
|
|||
if (elementPosition < windowHeight - 100) { |
|||
element.style.opacity = '1'; |
|||
element.style.transform = 'translateY(0)'; |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 初始加载和滚动时执行动画 |
|||
window.addEventListener('load', animateOnScroll); |
|||
window.addEventListener('scroll', animateOnScroll); |
|||
|
|||
// 键盘导航支持 |
|||
document.addEventListener('keydown', (e) => { |
|||
if (imageViewer.classList.contains('active')) { |
|||
if (e.key === 'Escape') { |
|||
imageViewer.classList.remove('active'); |
|||
document.body.style.overflow = ''; |
|||
} else if (e.key === 'ArrowLeft') { |
|||
currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length; |
|||
updateViewer(); |
|||
} else if (e.key === 'ArrowRight') { |
|||
currentImageIndex = (currentImageIndex + 1) % filteredImages.length; |
|||
updateViewer(); |
|||
} |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<script> |
|||
// 等页面完全加载后再执行（避免播放器还没渲染好） |
|||
window.onload = function () { |
|||
const video = document.getElementById('guideVideo'); |
|||
// 这里放你的真实视频地址（本地/网络都可以） |
|||
const realVideoSrc = "https://hc.homilychart.com/hc/250121/img/homilylink-guide.mp4"; |
|||
|
|||
// 动态添加视频源（支持多格式，兼容性更好） |
|||
const mp4Source = document.createElement('source'); |
|||
mp4Source.src = realVideoSrc; |
|||
mp4Source.type = 'video/mp4'; |
|||
|
|||
video.appendChild(mp4Source); |
|||
// 触发播放器加载（可选，确保视频能正常播放） |
|||
video.load(); |
|||
}; |
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue