市场夺宝奇兵
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

873 lines
36 KiB

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="cache-control" content="no-cache">
  9. <meta http-equiv="expires" content="0">
  10. <link rel="shortcut icon" href="dbqb_favicon.ico" />
  11. <link rel="bookmark" href="dbqb_favicon.ico" />
  12. <meta http-equiv="keywords" content="夺宝奇兵,homilychart,homilylink">
  13. <meta http-equiv="description" content="HomilyLink">
  14. <title>夺宝奇兵 - AI炒股时代,机构界的黑科技!</title>
  15. <script src="https://cdn.tailwindcss.com"></script>
  16. <script type="text/javascript" src="https://hc.homilychart.com/hc/210802/js/jquery-1.9.1.min.js"></script>
  17. <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  18. <script>
  19. tailwind.config = {
  20. theme: {
  21. extend: {
  22. colors: {
  23. primary: '#3B82F6',
  24. secondary: '#10B981',
  25. accent: '#8B5CF6',
  26. dark: '#1E293B',
  27. light: '#F8FAFC'
  28. },
  29. fontFamily: {
  30. sans: ['Inter', 'system-ui', 'sans-serif'],
  31. },
  32. },
  33. }
  34. }
  35. </script>
  36. <script type="module" crossorigin src="./main.js"></script>
  37. <link rel="modulepreload" crossorigin href="./member.js">
  38. </head>
  39. <body class="font-sans bg-light text-dark body-text">
  40. <!-- 页面加载状态 -->
  41. <div id="loadingOverlay" class="loading-overlay">
  42. <div class="loading-spinner"></div>
  43. </div>
  44. <!-- 头部导航区域 -->
  45. <header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
  46. <div class="container mx-auto px-4 py-3 flex justify-between items-center">
  47. <a href="#" class="flex items-center space-x-2">
  48. <div class="w-10 h-10 rounded-lg gradient-background flex items-center justify-center">
  49. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
  50. style="width: 40px;height: 40px;">
  51. </div>
  52. <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">
  53. 夺宝奇兵
  54. </span>
  55. </a>
  56. <!-- 桌面导航菜单 -->
  57. <nav class="hidden md:flex items-center space-x-8">
  58. <a href="#features" class="font-medium hover:text-primary transition-colors">特色功能</a>
  59. <a href="#kc" class="font-medium hover:text-primary transition-colors">最新课程</a>
  60. <!-- <a href="hcdbqb-guide.html" class="font-medium hover:text-primary transition-colors">操作指南</a> -->
  61. <a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
  62. class="px-5 py-2 rounded-full gradient-background text-white font-medium hover:shadow-lg transition-all">
  63. 联系我们
  64. </a>
  65. </nav>
  66. <!-- 移动端菜单按钮 -->
  67. <button id="menuBtn" class="md:hidden text-xl">
  68. <i class="fa fa-bars"></i>
  69. </button>
  70. </div>
  71. <!-- 移动端导航菜单 -->
  72. <div id="mobileMenu" class="md:hidden hidden bg-white border-t animate-fade-in">
  73. <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
  74. <a href="#features" class="font-medium py-2 hover:text-primary transition-colors">特色功能</a>
  75. <a href="#kc" class="font-medium py-2 hover:text-primary transition-colors">最新课程</a>
  76. <!-- <a href="hcdbqb-guide.html" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> -->
  77. <!-- <a href="#" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> -->
  78. <a href="https://wa.me/+6588792879?text=夺宝奇兵指南我需要帮助" target="_blank"
  79. class="py-2 rounded-full gradient-background text-white font-medium text-center hover:shadow-lg transition-all">
  80. 联系我们
  81. </a>
  82. </div>
  83. </div>
  84. </header>
  85. <!-- 英雄区域 -->
  86. <section class="pt-32 pb-20 md:pt-40 md:pb-32 px-4 bg-gradient-to-b from-blue-50 to-white">
  87. <div class="container mx-auto max-w-6xl">
  88. <div class="flex flex-col md:flex-row items-center">
  89. <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
  90. <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow-custom mb-6 heading-primary">
  91. 夺宝奇兵,<br>
  92. <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">现在免费体验!</span>
  93. </h1>
  94. <p class="text-lg text-gray-600 mb-8 max-w-lg paragraph-text">
  95. AI时代股票投资必备机构界的黑科技!<br />
  96. 现开放免费体验7天的活动,立刻注册报名吧!
  97. </p>
  98. <div class="flex flex-col sm:flex-row gap-4">
  99. <a href="#register"
  100. class="px-8 py-3 rounded-full gradient-background text-white font-medium text-center hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5">
  101. 立即注册
  102. </a>
  103. <a href="#promotions"
  104. class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all">
  105. 了解更多
  106. </a>
  107. <a href="hcdbqb-download.html"
  108. class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all">
  109. 立刻下载
  110. </a>
  111. </div>
  112. </div>
  113. <div class="md:w-1/2 animate-fade-in delay-200">
  114. <div class="relative">
  115. <div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-accent/20 rounded-3xl blur-xl opacity-70">
  116. </div>
  117. <img src="https://hc.homilychart.com/hc/250121/img/dbqbindex.jpg" alt="夺宝奇兵"
  118. class="relative z-10 rounded-2xl shadow-xl w-full object-cover">
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </section>
  124. <!-- 特色功能区域 -->
  125. <section id="features" class="py-16 px-4 bg-white">
  126. <div class="container mx-auto max-w-6xl">
  127. <div class="text-center mb-16 animate-fade-in">
  128. <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 heading-secondary">您可以免费体验什么?</h2>
  129. <p class="text-gray-600 max-w-2xl mx-auto paragraph-text">您可以免费体验 超级云脑 AI预测大模型 夺宝利剑三个模块 7天 </p>
  130. </div>
  131. <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  132. <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-100">
  133. <div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6">
  134. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png">
  135. </div>
  136. <h3 class="text-xl font-semibold mb-3 heading-tertiary">超级云脑</h3>
  137. <p class="text-gray-600 paragraph-text">您的股票该体检了!<br />从十大维度,为您的股票进行全面体检!</p>
  138. </div>
  139. <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-200">
  140. <div class="w-14 h-14 rounded-xl bg-purple-100 flex items-center justify-center mb-6">
  141. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
  142. </div>
  143. <h3 class="text-xl font-semibold mb-3 heading-tertiary">AI预测大模型</h3>
  144. <p class="text-gray-600 paragraph-text">采用最先进的安全技术,保护您的数据和隐私,让您高枕无忧地开展业务。</p>
  145. </div>
  146. <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-300">
  147. <div class="w-14 h-14 rounded-xl bg-green-100 flex items-center justify-center mb-6">
  148. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
  149. </div>
  150. <h3 class="text-xl font-semibold mb-3 heading-tertiary">夺宝利剑</h3>
  151. <p class="text-gray-600 paragraph-text">根据您的具体需求提供个性化解决方案,灵活适应不同业务场景和规模。</p>
  152. </div>
  153. </div>
  154. </div>
  155. </section>
  156. <!-- 产品宣传区域 -->
  157. <section id="promotions" class="py-20 px-4 bg-gray-50">
  158. <div class="container mx-auto max-w-6xl">
  159. <div class="text-center mb-16 animate-fade-in">
  160. <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 heading-secondary">我们的创新解决方案</h2>
  161. <p class="text-gray-600 max-w-2xl mx-auto paragraph-text">探索我们的核心产品和服务,了解如何为您的业务创造价值</p>
  162. </div>
  163. <!-- 宣传项 1 - 超级云脑 -->
  164. <div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in">
  165. <div class="md:w-1/2 promotion-image">
  166. <img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台" class="w-full h-full">
  167. </div>
  168. <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
  169. <span
  170. class="inline-block px-4 py-1 rounded-full bg-blue-100 text-primary text-base font-medium mb-4 breadcrumb-text">
  171. HomilyLink > 夺宝奇兵 > 超级云脑
  172. </span>
  173. <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">超级云脑:股票体检专家</h3>
  174. <p class="text-gray-600 mb-6 paragraph-text">
  175. 利用人工智能和机器学习技术,快速处理和分析海量数据,通过十大维度为您的股票进行专科体检,追踪机构行为。
  176. </p>
  177. <ul class="space-y-3 mb-8">
  178. <li class="flex items-start list-item">
  179. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  180. <span>云脑探秘</span>
  181. </li>
  182. <li class="flex items-start list-item">
  183. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  184. <span>机构动向</span>
  185. </li>
  186. <li class="flex items-start list-item">
  187. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  188. <span>体检专家</span>
  189. </li>
  190. </ul>
  191. <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
  192. 注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
  193. </a>
  194. </div>
  195. </div>
  196. <!-- 宣传项 2 - AI预测大模型 -->
  197. <div
  198. class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
  199. <div class="md:w-1/2 promotion-image">
  200. <img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型" class="w-full h-full">
  201. </div>
  202. <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
  203. <span
  204. class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-base font-medium mb-4 breadcrumb-text">
  205. HomilyLink > 夺宝奇兵 > AI预测大模型
  206. </span>
  207. <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">AI预测大模型</h3>
  208. <p class="text-gray-600 mb-6 paragraph-text">
  209. AI 预测大模型颠覆传统,以深度学习与算法挖股市数据抓趋势、预测高低点;AI时空共振结合前沿 AI与时空共振精准识别变盘点。
  210. </p>
  211. <ul class="space-y-3 mb-8">
  212. <li class="flex items-start list-item">
  213. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  214. <span>AI股价预测术</span>
  215. </li>
  216. <li class="flex items-start list-item">
  217. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  218. <span>AI时空共振</span>
  219. </li>
  220. <li class="flex items-start list-item">
  221. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  222. <span>未来预测</span>
  223. </li>
  224. </ul>
  225. <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
  226. 注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
  227. </a>
  228. </div>
  229. </div>
  230. <!-- 宣传项 3 - 夺宝利剑 -->
  231. <div
  232. class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in delay-100">
  233. <div class="md:w-1/2 promotion-image">
  234. <img src="https://hc.homilychart.com/hc/250121/img/duobaolijianindex.jpg" alt="夺宝利剑" class="w-full h-full">
  235. </div>
  236. <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
  237. <span
  238. class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-base font-medium mb-4 breadcrumb-text">
  239. HomilyLink > 夺宝奇兵 > Ai金牛 > 夺宝利剑
  240. </span>
  241. <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">夺宝利剑</h3>
  242. <p class="text-gray-600 mb-6 paragraph-text">
  243. 最聪明的AI智能均线结合三维波动量,让您在AI时代深度追踪机构的操盘行为!
  244. </p>
  245. <ul class="space-y-3 mb-8">
  246. <li class="flex items-start list-item">
  247. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  248. <span>最聪明的AI智能均线</span>
  249. </li>
  250. <li class="flex items-start list-item">
  251. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  252. <span>三维波动量</span>
  253. </li>
  254. <li class="flex items-start list-item">
  255. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  256. <span>AI大数据模型</span>
  257. </li>
  258. </ul>
  259. <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
  260. 注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
  261. </a>
  262. </div>
  263. </div>
  264. <!-- 宣传项 4 - 专题讲座 -->
  265. <div id="kc"
  266. class="bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row animate-fade-in delay-200">
  267. <div class="md:w-1/2 promotion-image">
  268. <img id="lectureImage" src="" alt="John Lu谈股专题讲座" class="w-full h-full">
  269. </div>
  270. <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
  271. <span
  272. class="inline-block px-4 py-1 rounded-full bg-green-100 text-secondary text-base font-medium mb-4 breadcrumb-text">
  273. HomilyLink > 消息 > John Lu谈股财富圈
  274. </span>
  275. <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">HomilyLink专题讲座</h3>
  276. <p class="text-gray-600 mb-6 paragraph-text">
  277. 我们推出 HomilyLink专题讲座;结合市场事实热点与机构领域黑科技 "夺宝奇兵",助力投资者提升股市获利能力。
  278. </p>
  279. <ul class="space-y-3 mb-8">
  280. <li class="flex items-start list-item">
  281. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  282. <span>新加坡时间</span>
  283. </li>
  284. <li class="flex items-start list-item">
  285. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  286. <span>注意换算当地时间</span>
  287. </li>
  288. <li class="flex items-start list-item">
  289. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  290. <span>HomilyLink班级群课程</span>
  291. </li>
  292. </ul>
  293. <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
  294. 注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
  295. </a>
  296. </div>
  297. </div>
  298. </div>
  299. </section>
  300. <!-- 注册表单区域 -->
  301. <section id="register" class="py-20 px-4 bg-white">
  302. <div class="container mx-auto max-w-6xl">
  303. <div class="bg-gradient-to-br from-dark to-gray-800 rounded-3xl shadow-2xl overflow-hidden">
  304. <div class="grid grid-cols-1 md:grid-cols-2">
  305. <div class="p-8 md:p-12 text-white flex flex-col justify-center">
  306. <h2 class="text-2xl md:text-3xl font-bold mb-6 heading-secondary">立即注册,开启智能体验之旅!</h2>
  307. <p class="text-gray-300 mb-10 leading-relaxed paragraph-text">
  308. 填写报名表,我们会尽快为您开启智能体验之旅!
  309. </p>
  310. <div class="space-y-6">
  311. <div class="flex items-start">
  312. <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
  313. <img alt="超级云脑" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png">
  314. </div>
  315. <div>
  316. <h3 class="font-semibold mb-1 heading-tertiary">超级云脑</h3>
  317. <p class="text-gray-400 text-sm paragraph-text">您的股票体检专家!</p>
  318. </div>
  319. </div>
  320. <div class="flex items-start">
  321. <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
  322. <img alt="AI预测大模型" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
  323. </div>
  324. <div>
  325. <h3 class="font-semibold mb-1 heading-tertiary">AI预测大模型</h3>
  326. <p class="text-gray-400 text-sm paragraph-text">时间空间价格AI精准预测!</p>
  327. </div>
  328. </div>
  329. <div class="flex items-start">
  330. <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
  331. <img alt="夺宝利剑" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
  332. </div>
  333. <div>
  334. <h3 class="font-semibold mb-1 heading-tertiary">夺宝利剑</h3>
  335. <p class="text-gray-400 text-sm paragraph-text">最聪明的AI智能均线+三维波动量</p>
  336. </div>
  337. </div>
  338. </div>
  339. </div>
  340. <div class="bg-white p-8 md:p-12">
  341. <form id="registrationForm" class="space-y-6">
  342. <input type="hidden" name="zbtype" id="zbType" value="6">
  343. <div>
  344. <label for="userNameInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">姓名</label>
  345. <input type="text" id="userNameInfo" name="userNameInfo"
  346. class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
  347. placeholder="请输入您的姓名" required>
  348. </div>
  349. <div>
  350. <label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码</label>
  351. <select id="countryInfo" name="countryInfo"
  352. class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
  353. required>
  354. <option value="+65">+65 新加坡</option>
  355. <option value="+60">+60 马来西亚</option>
  356. <option value="+852">+852 香港</option>
  357. <option value="+1" selected>+1 美国</option>
  358. <option value="+62">+62 印尼</option>
  359. <option value="+1">+1 加拿大</option>
  360. <option value="+61">+61 澳大利亚</option>
  361. <option value="+673">+673 文莱</option>
  362. <option value="+886">+886 台湾</option>
  363. <option value="+86">+86 中国</option>
  364. <option value="+0">+0 其他</option>
  365. <option value="+64">+64 新西兰</option>
  366. <option value="+44">+44 英国</option>
  367. <option value="+81">+81 日本</option>
  368. <option value="+49">+49 德国</option>
  369. <option value="+82">+82 韩国</option>
  370. <option value="+84">+84 越南</option>
  371. <option value="+971">+971 阿联酋</option>
  372. <option value="+45">+45 丹麦</option>
  373. <option value="+853">+853 澳门</option>
  374. <option value="+66">+66 泰国</option>
  375. <option value="+91">+91 印度</option>
  376. <option value="+41">+41 瑞士</option>
  377. <option value="+358">+358 芬兰</option>
  378. <option value="+33">+33 法国</option>
  379. <option value="+63">+63 菲律宾</option>
  380. <option value="+31">+31 荷兰</option>
  381. <option value="+46">+46 瑞典</option>
  382. <option value="+34">+34 西班牙</option>
  383. <option value="+54">+54 阿根廷</option>
  384. <option value="+39">+39 意大利</option>
  385. <option value="+7">+7 俄罗斯</option>
  386. <option value="+420">+420 捷克</option>
  387. </select>
  388. </div>
  389. <div>
  390. <label for="userMobile" class="block text-sm font-medium text-gray-700 mb-1 form-label">电话号码</label>
  391. <input type="tel" name="userMobile" id="userMobile" placeholder="纯手机号 ( 不含国家编号 )"
  392. onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0/g,'')"
  393. class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
  394. autocomplete="off" required>
  395. </div>
  396. <div>
  397. <label for="userWechat" class="block text-sm font-medium text-gray-700 mb-1 form-label">微信ID</label>
  398. <input type="text" name="userWechat" id="userWechat" placeholder="微信ID ( 如没有WhatsApp )"
  399. autocomplete="off"
  400. class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input">
  401. </div>
  402. <div>
  403. <label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱</label>
  404. <input type="email" placeholder="请输入您的邮箱" name="userEmail" id="userEmail" autocomplete="off"
  405. class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
  406. required>
  407. </div>
  408. <div class="flex items-start">
  409. <input type="checkbox" id="agreement" name="agreement" class="mt-1 mr-2" required>
  410. <label for="agreement" class="text-sm text-gray-600 form-label">
  411. 我同意接收相关产品和服务的资讯
  412. </label>
  413. </div>
  414. <button type="submit" id="submitBtn"
  415. class="w-full py-3 px-6 rounded-lg gradient-background text-white font-medium hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5 form-button">
  416. 提交注册
  417. </button>
  418. </form>
  419. </div>
  420. </div>
  421. </div>
  422. </div>
  423. </section>
  424. <!-- 页脚区域 -->
  425. <footer class="bg-dark text-white py-12 px-4">
  426. <div class="container mx-auto max-w-6xl">
  427. <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
  428. <div>
  429. <div class="flex items-center space-x-2 mb-6">
  430. <div class="w-10 h-10 rounded-lg gradient-background flex items-center justify-center">
  431. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
  432. style="width: 40px;height: 40px;">
  433. </div>
  434. <span class="text-xl font-bold">夺宝奇兵</span>
  435. </div>
  436. <p class="text-gray-400 mb-6 paragraph-text">
  437. AI炒股时代 机构界的黑科技!
  438. </p>
  439. <div class="flex space-x-4">
  440. <a href="#"
  441. class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
  442. <i class="fa fa-facebook"></i>
  443. </a>
  444. <a href="#"
  445. class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
  446. <i class="fa fa-twitter"></i>
  447. </a>
  448. <a href="#"
  449. class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
  450. <i class="fa fa-linkedin"></i>
  451. </a>
  452. <a href="#"
  453. class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
  454. <i class="fa fa-instagram"></i>
  455. </a>
  456. </div>
  457. </div>
  458. <div>
  459. <h4 class="text-lg font-semibold mb-6 heading-tertiary">产品</h4>
  460. <ul class="space-y-3">
  461. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  462. class="text-gray-400 hover:text-white transition-colors">弘历云版软件</a></li>
  463. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  464. class="text-gray-400 hover:text-white transition-colors">HomilyChart</a></li>
  465. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  466. class="text-gray-400 hover:text-white transition-colors">夺宝奇兵</a></li>
  467. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股"
  468. class="text-gray-400 hover:text-white transition-colors">博股会员</a></li>
  469. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股"
  470. class="text-gray-400 hover:text-white transition-colors">最新软件</a></li>
  471. </ul>
  472. </div>
  473. <div>
  474. <h4 class="text-lg font-semibold mb-6 heading-tertiary">公司</h4>
  475. <ul class="space-y-3">
  476. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  477. class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
  478. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  479. class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li>
  480. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  481. class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
  482. </ul>
  483. </div>
  484. <div>
  485. <h4 class="text-lg font-semibold mb-6 heading-tertiary">支持</h4>
  486. <ul class="space-y-3">
  487. <li class="list-item">
  488. <!-- <a href="hcdbqb-guide.html"
  489. class="text-gray-400 hover:text-white transition-colors">帮助中心</a> -->
  490. <a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" class="text-gray-400 hover:text-white transition-colors">帮助中心</a>
  491. </li>
  492. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  493. class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
  494. </ul>
  495. </div>
  496. </div>
  497. <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
  498. <p class="text-gray-500 text-sm mb-4 md:mb-0 paragraph-text">
  499. &copy; Copyright 2025.Capitalmaster Pte Ltd All Rights Reserved.
  500. </p>
  501. <div class="flex space-x-6">
  502. 如需帮助,请及时联系我们!
  503. </div>
  504. </div>
  505. </div>
  506. </footer>
  507. <!-- 表单提交成功提示模态框 -->
  508. <div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
  509. <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all relative">
  510. <!-- 关闭按钮 - 右上角叉号 -->
  511. <button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
  512. <i class="fa fa-times text-xl"></i>
  513. </button>
  514. <div class="text-center">
  515. <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-6">
  516. <i class="fa fa-check text-secondary text-2xl"></i>
  517. </div>
  518. <h3 class="text-xl font-bold mb-2 heading-tertiary">注册成功!</h3>
  519. <p class="text-gray-600 mb-6 paragraph-text">感谢您的注册,我们的顾问将尽快与您联系。</p>
  520. <a href="https://api.whatsapp.com/send?phone=85255110485&text=课程" target="_blank"
  521. class="inline-block px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
  522. 联系我们
  523. </a>
  524. </div>
  525. </div>
  526. </div>
  527. <style>
  528. /* 全局字体大小调整 - 整体调小 */
  529. html {
  530. font-size: 16px;
  531. scroll-behavior: smooth;
  532. }
  533. /* 文本样式类 */
  534. .page-body {
  535. font-size: 1rem;
  536. line-height: 1.6;
  537. }
  538. .text-heading-primary {
  539. font-size: clamp(2.2rem, 5vw, 3.5rem);
  540. line-height: 1.2;
  541. }
  542. .text-heading-secondary {
  543. font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  544. line-height: 1.3;
  545. }
  546. .text-heading-tertiary {
  547. font-size: clamp(1.3rem, 2.5vw, 2rem);
  548. line-height: 1.4;
  549. }
  550. .text-paragraph {
  551. font-size: 1rem;
  552. line-height: 1.6;
  553. }
  554. .text-list-item {
  555. font-size: 1rem;
  556. }
  557. .text-breadcrumb {
  558. font-size: 0.9rem;
  559. padding-top: 0.4rem;
  560. padding-bottom: 0.4rem;
  561. }
  562. .form-label-text {
  563. font-size: 1rem;
  564. margin-bottom: 0.5rem;
  565. }
  566. .form-input-field {
  567. font-size: 1rem;
  568. padding-top: 0.75rem;
  569. padding-bottom: 0.75rem;
  570. }
  571. .form-input-field::placeholder {
  572. font-size: 0.95rem;
  573. }
  574. /* 导航菜单字体调小 */
  575. .nav-link-text {
  576. font-size: 1rem;
  577. }
  578. /* 按钮文字调小 */
  579. .button-large-text {
  580. font-size: 1rem;
  581. padding-top: 0.75rem;
  582. padding-bottom: 0.75rem;
  583. }
  584. /* 特色功能卡片文字调小 */
  585. .feature-card-title {
  586. font-size: 1.3rem;
  587. margin-bottom: 0.75rem;
  588. }
  589. .feature-card-description {
  590. font-size: 0.95rem;
  591. line-height: 1.5;
  592. }
  593. /* 产品宣传区域文字调小 */
  594. .promo-section-paragraph {
  595. font-size: 1rem;
  596. line-height: 1.6;
  597. }
  598. .promo-section-list-item {
  599. font-size: 1rem;
  600. }
  601. .promo-section-breadcrumb {
  602. font-size: 0.9rem;
  603. }
  604. /* 页脚文字调小 */
  605. .footer-text {
  606. font-size: 0.95rem;
  607. }
  608. .footer-heading {
  609. font-size: 1.3rem;
  610. }
  611. /* 成功模态框文字调小 */
  612. .modal-heading {
  613. font-size: 1.5rem;
  614. }
  615. .modal-text {
  616. font-size: 1rem;
  617. }
  618. .modal-button {
  619. font-size: 1rem;
  620. }
  621. /* 宣传模块图片样式优化 - 确保图片完整显示 */
  622. .promotion-image {
  623. display: flex;
  624. min-height: 400px;
  625. overflow: hidden;
  626. align-items: center;
  627. justify-content: center;
  628. background-color: #f8fafc;
  629. }
  630. .promotion-image img {
  631. width: auto;
  632. max-width: 100%;
  633. height: auto;
  634. max-height: 100%;
  635. object-fit: contain;
  636. }
  637. /* 针对不同模块的图片进行特定调整 */
  638. /* 超级云脑图片 - 图表类图片,确保完整显示 */
  639. .bg-white.rounded-3xl.shadow-xl.overflow-hidden.mb-16.flex.flex-col.md\\:flex-row.animate-fade-in .promotion-image {
  640. background-color: #f0f9ff;
  641. }
  642. /* AI预测大模型图片 - 确保完整显示 */
  643. .bg-white.rounded-3xl.shadow-xl.overflow-hidden.mb-16.flex.flex-col.md\\:flex-row-reverse.animate-fade-in.delay-100 .promotion-image {
  644. background-color: #faf5ff;
  645. }
  646. /* 夺宝利剑图片 - 图表类图片,确保完整显示 */
  647. .bg-white.rounded-3xl.shadow-xl.overflow-hidden.mb-16.flex.flex-col.md\\:flex-row.animate-fade-in.delay-100 .promotion-image {
  648. background-color: #f0fdf4;
  649. }
  650. /* John Lu谈股专题讲座图片 - 确保完整显示 */
  651. .bg-white.rounded-3xl.shadow-xl.overflow-hidden.flex.flex-col.md\\:flex-row.animate-fade-in.delay-200 .promotion-image {
  652. background-color: #ecfdf5;
  653. }
  654. /* 特色功能卡片高度调整 */
  655. .feature-card {
  656. height: 100%;
  657. display: flex;
  658. flex-direction: column;
  659. }
  660. .feature-card-icon {
  661. margin-bottom: 1rem;
  662. }
  663. .feature-card-title {
  664. margin-bottom: 0.75rem;
  665. }
  666. /* 特色功能区域图标调整 */
  667. .feature-card img {
  668. max-width: 100%;
  669. height: auto;
  670. display: block;
  671. margin: 0 auto;
  672. }
  673. /* 注册表单区域调整 */
  674. .register-section-title {
  675. margin-bottom: 1rem;
  676. line-height: 1.3;
  677. }
  678. .register-section-description {
  679. margin-bottom: 1.5rem;
  680. }
  681. .register-section-features {
  682. gap: 1rem;
  683. }
  684. /* 页脚区域调整 */
  685. .footer-logo {
  686. margin-bottom: 1rem;
  687. }
  688. .footer-description {
  689. margin-bottom: 1rem;
  690. }
  691. .footer-heading {
  692. margin-bottom: 1rem;
  693. }
  694. .footer-list {
  695. gap: 0.5rem;
  696. }
  697. /* 移动端适配 */
  698. @media (max-width: 768px) {
  699. html {
  700. font-size: 14px;
  701. }
  702. .page-body {
  703. font-size: 0.95rem;
  704. }
  705. .mobile-nav-link {
  706. font-size: 0.95rem;
  707. padding-top: 0.6rem;
  708. padding-bottom: 0.6rem;
  709. }
  710. .promotion-image {
  711. min-height: 300px;
  712. }
  713. /* 移动端确保图片完整显示 */
  714. .promotion-image img {
  715. width: auto;
  716. max-width: 90%;
  717. height: auto;
  718. max-height: 90%;
  719. }
  720. }
  721. /* 动画定义 */
  722. @keyframes fadeIn {
  723. from {
  724. opacity: 0;
  725. transform: translateY(20px);
  726. }
  727. to {
  728. opacity: 1;
  729. transform: translateY(0);
  730. }
  731. }
  732. @keyframes spin {
  733. 0% {
  734. transform: rotate(0);
  735. }
  736. 100% {
  737. transform: rotate(360deg);
  738. }
  739. }
  740. /* 工具类 */
  741. .content-auto {
  742. content-visibility: auto;
  743. }
  744. .text-shadow-custom {
  745. text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  746. }
  747. .card-hover-effect {
  748. transition: all 0.3s ease;
  749. }
  750. .card-hover-effect:hover {
  751. box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  752. transform: translateY(-4px);
  753. }
  754. .gradient-background {
  755. background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  756. }
  757. .animate-fade-in {
  758. animation: fadeIn 0.6s ease-out forwards;
  759. }
  760. .loading-overlay {
  761. display: none;
  762. position: fixed;
  763. top: 0;
  764. left: 0;
  765. width: 100%;
  766. height: 100%;
  767. background: rgba(0, 0, 0, 0.5);
  768. z-index: 9999;
  769. justify-content: center;
  770. align-items: center;
  771. }
  772. .loading-spinner {
  773. width: 50px;
  774. height: 50px;
  775. border: 5px solid #f3f3f3;
  776. border-top: 5px solid #3B82F6;
  777. border-radius: 50%;
  778. animation: spin 1s linear infinite;
  779. }
  780. </style>
  781. </body>
  782. </html>