市场夺宝奇兵
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.

867 lines
35 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="/assets/main-1h2J5ZoF.js"></script>
  37. <link rel="modulepreload" crossorigin href="/assets/member-CDNIPHgK.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="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
  78. class="py-2 rounded-full gradient-background text-white font-medium text-center hover:shadow-lg transition-all">
  79. 联系我们
  80. </a>
  81. </div>
  82. </div>
  83. </header>
  84. <!-- 英雄区域 -->
  85. <section class="pt-32 pb-20 md:pt-40 md:pb-32 px-4 bg-gradient-to-b from-blue-50 to-white">
  86. <div class="container mx-auto max-w-6xl">
  87. <div class="flex flex-col md:flex-row items-center">
  88. <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
  89. <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow-custom mb-6 heading-primary">
  90. 夺宝奇兵,<br>
  91. <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">现在免费体验!</span>
  92. </h1>
  93. <p class="text-lg text-gray-600 mb-8 max-w-lg paragraph-text">
  94. AI时代股票投资必备机构界的黑科技!<br />
  95. 现开放免费体验7天的活动,立刻注册报名吧!
  96. </p>
  97. <div class="flex flex-col sm:flex-row gap-4">
  98. <a href="#register"
  99. 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">
  100. 立即注册
  101. </a>
  102. <a href="#promotions"
  103. class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all">
  104. 了解更多
  105. </a>
  106. <a href="hcdbqb-download.html"
  107. class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all">
  108. 立刻下载
  109. </a>
  110. </div>
  111. </div>
  112. <div class="md:w-1/2 animate-fade-in delay-200">
  113. <div class="relative">
  114. <div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-accent/20 rounded-3xl blur-xl opacity-70">
  115. </div>
  116. <img src="https://hc.homilychart.com/hc/250121/img/dbqbindex.jpg" alt="夺宝奇兵"
  117. class="relative z-10 rounded-2xl shadow-xl w-full object-cover">
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. </section>
  123. <!-- 特色功能区域 -->
  124. <section id="features" class="py-16 px-4 bg-white">
  125. <div class="container mx-auto max-w-6xl">
  126. <div class="text-center mb-16 animate-fade-in">
  127. <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 heading-secondary">您可以免费体验什么?</h2>
  128. <p class="text-gray-600 max-w-2xl mx-auto paragraph-text">您可以免费体验 超级云脑 AI预测大模型 夺宝利剑三个模块 7天 </p>
  129. </div>
  130. <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  131. <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-100">
  132. <div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6">
  133. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png">
  134. </div>
  135. <h3 class="text-xl font-semibold mb-3 heading-tertiary">超级云脑</h3>
  136. <p class="text-gray-600 paragraph-text">您的股票该体检了!<br />从十大维度,为您的股票进行全面体检!</p>
  137. </div>
  138. <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-200">
  139. <div class="w-14 h-14 rounded-xl bg-purple-100 flex items-center justify-center mb-6">
  140. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
  141. </div>
  142. <h3 class="text-xl font-semibold mb-3 heading-tertiary">AI预测大模型</h3>
  143. <p class="text-gray-600 paragraph-text">采用最先进的安全技术,保护您的数据和隐私,让您高枕无忧地开展业务。</p>
  144. </div>
  145. <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-300">
  146. <div class="w-14 h-14 rounded-xl bg-green-100 flex items-center justify-center mb-6">
  147. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
  148. </div>
  149. <h3 class="text-xl font-semibold mb-3 heading-tertiary">夺宝利剑</h3>
  150. <p class="text-gray-600 paragraph-text">根据您的具体需求提供个性化解决方案,灵活适应不同业务场景和规模。</p>
  151. </div>
  152. </div>
  153. </div>
  154. </section>
  155. <!-- 产品宣传区域 -->
  156. <section id="promotions" class="py-20 px-4 bg-gray-50">
  157. <div class="container mx-auto max-w-6xl">
  158. <div class="text-center mb-16 animate-fade-in">
  159. <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 heading-secondary">我们的创新解决方案</h2>
  160. <p class="text-gray-600 max-w-2xl mx-auto paragraph-text">探索我们的核心产品和服务,了解如何为您的业务创造价值</p>
  161. </div>
  162. <!-- 宣传项 1 - 超级云脑 -->
  163. <div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in">
  164. <div class="md:w-1/2">
  165. <img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台"
  166. class="w-full h-full object-cover">
  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">
  200. <img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型"
  201. class="w-full h-full object-cover">
  202. </div>
  203. <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
  204. <span
  205. class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-base font-medium mb-4 breadcrumb-text">
  206. HomilyLink > 夺宝奇兵 > AI预测大模型
  207. </span>
  208. <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">AI预测大模型</h3>
  209. <p class="text-gray-600 mb-6 paragraph-text">
  210. AI 预测大模型颠覆传统,以深度学习与算法挖股市数据抓趋势、预测高低点;AI时空共振结合前沿 AI与时空共振精准识别变盘点。
  211. </p>
  212. <ul class="space-y-3 mb-8">
  213. <li class="flex items-start list-item">
  214. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  215. <span>AI股价预测术</span>
  216. </li>
  217. <li class="flex items-start list-item">
  218. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  219. <span>AI时空共振</span>
  220. </li>
  221. <li class="flex items-start list-item">
  222. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  223. <span>未来预测</span>
  224. </li>
  225. </ul>
  226. <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
  227. 注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
  228. </a>
  229. </div>
  230. </div>
  231. <!-- 宣传项 3 - 夺宝利剑 -->
  232. <div
  233. class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
  234. <div class="md:w-1/2">
  235. <img src="https://hc.homilychart.com/hc/250121/img/duobaolijianindex.jpg" alt="夺宝利剑"
  236. class="w-full h-full object-cover">
  237. </div>
  238. <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
  239. <span
  240. class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-base font-medium mb-4 breadcrumb-text">
  241. HomilyLink > 夺宝奇兵 > Ai金牛 > 夺宝利剑
  242. </span>
  243. <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">夺宝利剑</h3>
  244. <p class="text-gray-600 mb-6 paragraph-text">
  245. 最聪明的AI智能均线结合三维波动量,让您在AI时代深度追踪机构的操盘行为!
  246. </p>
  247. <ul class="space-y-3 mb-8">
  248. <li class="flex items-start list-item">
  249. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  250. <span>最聪明的AI智能均线</span>
  251. </li>
  252. <li class="flex items-start list-item">
  253. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  254. <span>三维波动量</span>
  255. </li>
  256. <li class="flex items-start list-item">
  257. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  258. <span>AI大数据模型</span>
  259. </li>
  260. </ul>
  261. <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
  262. 注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
  263. </a>
  264. </div>
  265. </div>
  266. <!-- 宣传项 4 - 专题讲座 -->
  267. <div id="kc"
  268. class="bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row animate-fade-in delay-200">
  269. <div class="md:w-1/2">
  270. <img src="https://hc.homilychart.com/hc/250121/img/kecheng.jpg" alt="John Lu谈股专题讲座"
  271. class="w-full h-full object-cover">
  272. </div>
  273. <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
  274. <span
  275. class="inline-block px-4 py-1 rounded-full bg-green-100 text-secondary text-base font-medium mb-4 breadcrumb-text">
  276. HomilyLink > 消息 > 赢在美股班级群
  277. </span>
  278. <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">HomilyLink专题讲座</h3>
  279. <p class="text-gray-600 mb-6 paragraph-text">
  280. 我们推出 HomilyLink专题讲座;结合市场事实热点与机构领域黑科技 "夺宝奇兵",助力投资者提升股市获利能力。
  281. </p>
  282. <ul class="space-y-3 mb-8">
  283. <li class="flex items-start list-item">
  284. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  285. <span>新加坡时间</span>
  286. </li>
  287. <li class="flex items-start list-item">
  288. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  289. <span>注意换算当地时间</span>
  290. </li>
  291. <li class="flex items-start list-item">
  292. <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
  293. <span>HomilyLink班级群课程</span>
  294. </li>
  295. </ul>
  296. <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
  297. 注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
  298. </a>
  299. </div>
  300. </div>
  301. </div>
  302. </section>
  303. <!-- 注册表单区域 -->
  304. <section id="register" class="py-20 px-4 bg-white">
  305. <div class="container mx-auto max-w-6xl">
  306. <div class="bg-gradient-to-br from-dark to-gray-800 rounded-3xl shadow-2xl overflow-hidden">
  307. <div class="grid grid-cols-1 md:grid-cols-2">
  308. <div class="p-8 md:p-12 text-white flex flex-col justify-center">
  309. <h2 class="text-2xl md:text-3xl font-bold mb-6 heading-secondary">立即注册,开启智能体验之旅!</h2>
  310. <p class="text-gray-300 mb-10 leading-relaxed paragraph-text">
  311. 填写报名表,我们会尽快为您开启智能体验之旅!
  312. </p>
  313. <div class="space-y-6">
  314. <div class="flex items-start">
  315. <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
  316. <img alt="超级云脑" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png">
  317. </div>
  318. <div>
  319. <h3 class="font-semibold mb-1 heading-tertiary">超级云脑</h3>
  320. <p class="text-gray-400 text-sm paragraph-text">您的股票体检专家!</p>
  321. </div>
  322. </div>
  323. <div class="flex items-start">
  324. <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
  325. <img alt="AI预测大模型" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
  326. </div>
  327. <div>
  328. <h3 class="font-semibold mb-1 heading-tertiary">AI预测大模型</h3>
  329. <p class="text-gray-400 text-sm paragraph-text">时间空间价格AI精准预测!</p>
  330. </div>
  331. </div>
  332. <div class="flex items-start">
  333. <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
  334. <img alt="夺宝利剑" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
  335. </div>
  336. <div>
  337. <h3 class="font-semibold mb-1 heading-tertiary">夺宝利剑</h3>
  338. <p class="text-gray-400 text-sm paragraph-text">最聪明的AI智能均线+三维波动量</p>
  339. </div>
  340. </div>
  341. </div>
  342. </div>
  343. <div class="bg-white p-8 md:p-12">
  344. <form id="registrationForm" class="space-y-6">
  345. <input type="hidden" name="zbtype" id="zbType" value="6">
  346. <div>
  347. <label for="userNameInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">姓名</label>
  348. <input type="text" id="userNameInfo" name="userNameInfo"
  349. 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"
  350. placeholder="请输入您的姓名" required>
  351. </div>
  352. <div>
  353. <label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码</label>
  354. <select id="countryInfo" name="countryInfo"
  355. 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"
  356. required>
  357. <option value="+65">+65 新加坡</option>
  358. <option value="+60">+60 马来西亚</option>
  359. <option value="+852">+852 香港</option>
  360. <option value="+1" selected>+1 美国</option>
  361. <option value="+62">+62 印尼</option>
  362. <option value="+1">+1 加拿大</option>
  363. <option value="+61">+61 澳大利亚</option>
  364. <option value="+673">+673 文莱</option>
  365. <option value="+886">+886 台湾</option>
  366. <option value="+86">+86 中国</option>
  367. <option value="+0">+0 其他</option>
  368. <option value="+64">+64 新西兰</option>
  369. <option value="+44">+44 英国</option>
  370. <option value="+81">+81 日本</option>
  371. <option value="+49">+49 德国</option>
  372. <option value="+82">+82 韩国</option>
  373. <option value="+84">+84 越南</option>
  374. <option value="+971">+971 阿联酋</option>
  375. <option value="+45">+45 丹麦</option>
  376. <option value="+853">+853 澳门</option>
  377. <option value="+66">+66 泰国</option>
  378. <option value="+91">+91 印度</option>
  379. <option value="+41">+41 瑞士</option>
  380. <option value="+358">+358 芬兰</option>
  381. <option value="+33">+33 法国</option>
  382. <option value="+63">+63 菲律宾</option>
  383. <option value="+31">+31 荷兰</option>
  384. <option value="+46">+46 瑞典</option>
  385. <option value="+34">+34 西班牙</option>
  386. <option value="+54">+54 阿根廷</option>
  387. <option value="+39">+39 意大利</option>
  388. <option value="+7">+7 俄罗斯</option>
  389. <option value="+420">+420 捷克</option>
  390. </select>
  391. </div>
  392. <div>
  393. <label for="userMobile" class="block text-sm font-medium text-gray-700 mb-1 form-label">电话号码</label>
  394. <input type="tel" name="userMobile" id="userMobile" placeholder="纯手机号 ( 不含国家编号 )"
  395. onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0/g,'')"
  396. 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"
  397. autocomplete="off" required>
  398. </div>
  399. <div>
  400. <label for="userWechat" class="block text-sm font-medium text-gray-700 mb-1 form-label">微信ID</label>
  401. <input type="text" name="userWechat" id="userWechat" placeholder="微信ID ( 如没有WhatsApp )"
  402. autocomplete="off"
  403. 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">
  404. </div>
  405. <div>
  406. <label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱</label>
  407. <input type="email" placeholder="请输入您的邮箱" name="userEmail" id="userEmail" autocomplete="off"
  408. 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"
  409. required>
  410. </div>
  411. <div class="flex items-start">
  412. <input type="checkbox" id="agreement" name="agreement" class="mt-1 mr-2" required>
  413. <label for="agreement" class="text-sm text-gray-600 form-label">
  414. 我同意接收相关产品和服务的资讯
  415. </label>
  416. </div>
  417. <button type="submit" id="submitBtn"
  418. 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">
  419. 提交注册
  420. </button>
  421. </form>
  422. </div>
  423. </div>
  424. </div>
  425. </div>
  426. </section>
  427. <!-- 页脚区域 -->
  428. <footer class="bg-dark text-white py-12 px-4">
  429. <div class="container mx-auto max-w-6xl">
  430. <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
  431. <div>
  432. <div class="flex items-center space-x-2 mb-6">
  433. <div class="w-10 h-10 rounded-lg gradient-background flex items-center justify-center">
  434. <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
  435. style="width: 40px;height: 40px;">
  436. </div>
  437. <span class="text-xl font-bold">夺宝奇兵</span>
  438. </div>
  439. <p class="text-gray-400 mb-6 paragraph-text">
  440. AI炒股时代 机构界的黑科技!
  441. </p>
  442. <div class="flex space-x-4">
  443. <a href="#"
  444. class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
  445. <i class="fa fa-facebook"></i>
  446. </a>
  447. <a href="#"
  448. class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
  449. <i class="fa fa-twitter"></i>
  450. </a>
  451. <a href="#"
  452. class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
  453. <i class="fa fa-linkedin"></i>
  454. </a>
  455. <a href="#"
  456. class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
  457. <i class="fa fa-instagram"></i>
  458. </a>
  459. </div>
  460. </div>
  461. <div>
  462. <h4 class="text-lg font-semibold mb-6 heading-tertiary">产品</h4>
  463. <ul class="space-y-3">
  464. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  465. class="text-gray-400 hover:text-white transition-colors">弘历云版软件</a></li>
  466. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  467. class="text-gray-400 hover:text-white transition-colors">HomilyChart</a></li>
  468. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  469. class="text-gray-400 hover:text-white transition-colors">夺宝奇兵</a></li>
  470. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股"
  471. class="text-gray-400 hover:text-white transition-colors">博股会员</a></li>
  472. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股"
  473. class="text-gray-400 hover:text-white transition-colors">最新软件</a></li>
  474. </ul>
  475. </div>
  476. <div>
  477. <h4 class="text-lg font-semibold mb-6 heading-tertiary">公司</h4>
  478. <ul class="space-y-3">
  479. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  480. class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
  481. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  482. class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li>
  483. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股" target="_blank"
  484. class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
  485. </ul>
  486. </div>
  487. <div>
  488. <h4 class="text-lg font-semibold mb-6 heading-tertiary">支持</h4>
  489. <ul class="space-y-3">
  490. <li class="list-item"><a href="https://api.whatsapp.com/send?phone=85255110485&text=我想了解赢在美股"
  491. class="text-gray-400 hover:text-white transition-colors">帮助中心</a></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://wa.me/8615318705910?text=%E6%8A%A5%E5%90%8D%E8%AF%BE%E7%A8%8B" 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-module {
  623. display: flex;
  624. flex-direction: column;
  625. height: auto;
  626. }
  627. .promotion-module-image {
  628. display: flex;
  629. flex-direction: column;
  630. }
  631. .promotion-module-content {
  632. flex: 1;
  633. display: flex;
  634. flex-direction: column;
  635. justify-content: center;
  636. padding-bottom: 2rem;
  637. }
  638. .promotion-module-wrapper {
  639. flex: 1;
  640. display: flex;
  641. flex-direction: column;
  642. justify-content: space-between;
  643. gap: 1.5rem;
  644. }
  645. .promotion-module-breadcrumb {
  646. margin-bottom: 0.75rem;
  647. }
  648. .promotion-module-title {
  649. margin-bottom: 1rem;
  650. }
  651. .promotion-module-description {
  652. margin-bottom: 1rem;
  653. }
  654. .promotion-module-list {
  655. gap: 0.75rem;
  656. margin-bottom: 1.5rem;
  657. }
  658. .promotion-module-action {
  659. margin-top: auto;
  660. align-self: flex-start;
  661. }
  662. /* 特色功能卡片高度调整 */
  663. .feature-card {
  664. height: 100%;
  665. display: flex;
  666. flex-direction: column;
  667. }
  668. .feature-card-icon {
  669. margin-bottom: 1rem;
  670. }
  671. .feature-card-title {
  672. margin-bottom: 0.75rem;
  673. }
  674. /* 注册表单区域调整 */
  675. .register-section-title {
  676. margin-bottom: 1rem;
  677. line-height: 1.3;
  678. }
  679. .register-section-description {
  680. margin-bottom: 1.5rem;
  681. }
  682. .register-section-features {
  683. gap: 1rem;
  684. }
  685. /* 页脚区域调整 */
  686. .footer-logo {
  687. margin-bottom: 1rem;
  688. }
  689. .footer-description {
  690. margin-bottom: 1rem;
  691. }
  692. .footer-heading {
  693. margin-bottom: 1rem;
  694. }
  695. .footer-list {
  696. gap: 0.5rem;
  697. }
  698. /* 移动端适配 */
  699. @media (max-width: 768px) {
  700. html {
  701. font-size: 14px;
  702. }
  703. .page-body {
  704. font-size: 0.95rem;
  705. }
  706. .mobile-nav-link {
  707. font-size: 0.95rem;
  708. padding-top: 0.6rem;
  709. padding-bottom: 0.6rem;
  710. }
  711. .promotion-module-content {
  712. padding-bottom: 1.5rem;
  713. }
  714. }
  715. /* 动画定义 */
  716. @keyframes fadeIn {
  717. from {
  718. opacity: 0;
  719. transform: translateY(20px);
  720. }
  721. to {
  722. opacity: 1;
  723. transform: translateY(0);
  724. }
  725. }
  726. @keyframes spin {
  727. 0% {
  728. transform: rotate(0);
  729. }
  730. 100% {
  731. transform: rotate(360deg);
  732. }
  733. }
  734. /* 工具类 */
  735. .content-auto {
  736. content-visibility: auto;
  737. }
  738. .text-shadow-custom {
  739. text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  740. }
  741. .card-hover-effect {
  742. transition: all 0.3s ease;
  743. }
  744. .card-hover-effect:hover {
  745. box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  746. transform: translateY(-4px);
  747. }
  748. .gradient-background {
  749. background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  750. }
  751. .animate-fade-in {
  752. animation: fadeIn 0.6s ease-out forwards;
  753. }
  754. .loading-overlay {
  755. display: none;
  756. position: fixed;
  757. top: 0;
  758. left: 0;
  759. width: 100%;
  760. height: 100%;
  761. background: rgba(0, 0, 0, 0.5);
  762. z-index: 9999;
  763. justify-content: center;
  764. align-items: center;
  765. }
  766. .loading-spinner {
  767. width: 50px;
  768. height: 50px;
  769. border: 5px solid #f3f3f3;
  770. border-top: 5px solid #3B82F6;
  771. border-radius: 50%;
  772. animation: spin 1s linear infinite;
  773. }
  774. </style>
  775. </body>
  776. </html>