qimaohong
/
hcdbqbVue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

3 Commits
0bd8fb4e07 ... 2b77619f2f

Author SHA1 Message Date
zxz 2b77619f2f 写好操作指南样式
2 months ago
zxz ab6cf983ee 写好主页面
2 months ago
zxz 6b6f72d081 写完首页一部分样式
2 months ago
1 changed files with 836 additions and 448 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 808
      index.html

808
index.html
View File

@ -64,251 +64,258 @@
<!-- 头部导航区域 -->
<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-background flex items-center justify-center">
<img alt="赢在美股" src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.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">
<div class="container mx-auto px-10 py-6 flex justify-between items-center max-w-[1600px]">
<a href="#" class="flex items-center gap-3">
<img
src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.png"
alt="Logo"
class="w-10 h-10"
/>
<span
class="font-bold text-[22px]"
style="
background: linear-gradient(270deg, #F9BF59 28.37%, #FFDBA1 50%, #F9BF59 70.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
"
>
赢在美股
</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="hcdbqb-guide.html" class="font-medium hover:text-primary transition-colors">操作指南</a> -->
<a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
class="px-5 py-2 rounded-full gradient-background 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>
<nav class="hidden lg:flex items-center space-x-14">
<!-- 首页（带下拉） -->
<div class="relative group ">
<!-- 移动端导航菜单 -->
<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="hcdbqb-guide.html" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> -->
<!-- <a href="#" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> -->
<a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
class="py-2 rounded-full gradient-background text-white font-medium text-center hover:shadow-lg transition-all">
加入我们
<!-- 首页文字 -->
<div>
<a class="relative font-medium text-[#333333] hover:text-[#FFA300] cursor-pointer pb-4">
首页
</a>
<span class="arrow-box"></span>
</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-custom mb-6 heading-primary">
夺宝奇兵，<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 paragraph-text">
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-background text-white font-medium text-center hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5">
立即注册
<!-- 下拉菜单 -->
<div class="home-dropdown">
<a class="dropdown-item">
特色功能
</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 class="dropdown-item">
DeepChart下载
</a>
<a href="hcdbqb-download.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 class="dropdown-item">
夺宝岛下载
</a>
<a class="dropdown-item">
赢在美股专题课
</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>
<span class="text-gray-300">|</span>
<a class="text-gray-700 hover:text-orange-500 font-medium">立即注册</a>
<span class="text-gray-300">|</span>
<a class="text-gray-700 hover:text-orange-500 font-medium">操作指南</a>
<span class="text-gray-300">|</span>
<a class=" text-white px-6 py-2 rounded-full font-bold hover:shadow-lg transition-all" style="background: #FFA300;">
联系我们
</a>
</nav>
</div>
</section>
</header>
<main class="" id="app">
<section id="page-home" class="page dohidden">
<div style="height: 24px; align-self: stretch; background: #FFF3DD;" class="pt-28"></div>
<!-- 特色功能区域 -->
<section id="features" class="py-16 px-4 bg-white">
<section id="features" class="py-16 px-4 bg-white pt-32 bg-[url('https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg58gif4guu1200qbnj3a.png')]
bg-cover bg-center bg-no-repeat">
<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 heading-secondary">加入赢在美股，您可以免费体验什么？</h2>
<p class="text-gray-600 max-w-2xl mx-auto paragraph-text">您可以免费体验超级云脑 AI预测大模型 夺宝利剑三个模块 7 天，助力您赢在美股！</p>
<h2 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-6 text-white heading-secondary">加入赢在美股，您可以免费体验什么？</h2>
<p class="text-white max-w-2xl mx-auto paragraph-text">您可以免费体验最前沿的AI工具,全球最懂机构行为的Deepchart,机构的黑科技夺宝奇兵,最前沿的分析课程和操作策略!</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-effect 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 class="animate-fade-in delay-100">
<div
class="p-8 rounded-2xl shadow-lg
bg-[#FBEFEF]
border-t-4 border-[#ED1818]
transition-all duration-300 ease-out
hover:-translate-y-2 hover:shadow-xl"
>
<div class="w-14 h-14 rounded-xl bg-red-100 flex items-center justify-center mb-6">
<img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bad6avznn400jwiqwu.png" />
</div>
<h3 class="text-xl font-semibold mb-3">DeepChart</h3>
<p class="text-gray-600">您的股市随身顾问<br />深度解读机构行为，祝您股海乘风破浪</p>
</div>
<h3 class="text-xl font-semibold mb-3 heading-tertiary">超级云脑</h3>
<p class="text-gray-600 paragraph-text">您的股票该体检了！<br />从十大维度，为您的股票进行全面体检！</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect 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 class="animate-fade-in delay-200">
<div
class="p-8 rounded-2xl shadow-lg
bg-[#F1F6FF]
border-t-4 border-[#3B93FF]
transition-all duration-300 ease-out
hover:-translate-y-2 hover:shadow-xl"
>
<div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6">
<img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bapwystqy500k1h6xw.png" />
</div>
<h3 class="text-xl font-semibold mb-3">夺宝奇兵</h3>
<p class="text-gray-600">采用最先进的安全技术，保护您的数据和隐私，让您高枕无忧的开展业务</p>
</div>
<h3 class="text-xl font-semibold mb-3 heading-tertiary">AI预测大模型</h3>
<p class="text-gray-600 paragraph-text">采用最先进的安全技术，保护您的数据和隐私，让您高枕无忧地开展业务。</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect 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 class="animate-fade-in delay-300">
<div
class="p-8 rounded-2xl shadow-lg
bg-[#FBF6EF]
border-t-4 border-[#EC8D0E]
transition-all duration-300 ease-out
hover:-translate-y-2 hover:shadow-xl"
>
<div class="w-14 h-14 rounded-xl bg-orange-100 flex items-center justify-center mb-6">
<img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bb0rllyv0600wgiveo.png" />
</div>
<h3 class="text-xl font-semibold mb-3">赢在美股专题课</h3>
<p class="text-gray-600">根据您的具体需求提供个性化解决方案，灵活适应不同业务场景和规模</p>
</div>
<h3 class="text-xl font-semibold mb-3 heading-tertiary">夺宝利剑</h3>
<p class="text-gray-600 paragraph-text">根据您的具体需求提供个性化解决方案，灵活适应不同业务场景和规模。</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 heading-secondary">我们的创新解决方案</h2>
<p class="text-gray-600 max-w-2xl mx-auto paragraph-text">探索我们的核心产品和服务，了解如何为您的业务创造价值</p>
<div class="mb-6 text-center">
<h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
教育精英化 · 武器AI化
</h4>
</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 promotion-image">
<img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台" class="w-full h-full">
<div class="md:w-1/2 promotion-image overflow-hidden">
<img
src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg"
alt="DeepChart"
class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
>
</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-base font-medium mb-4 breadcrumb-text">
HomilyLink > 夺宝奇兵 > 超级云脑
class="inline-block px-4 py-1 rounded-full bg-red-100 text-red-600 text-base font-medium mb-4 breadcrumb-text">
路径：DeepChart
</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">超级云脑:股票体检专家</h3>
<h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">DeepChart: 全球最懂机构行为的AI</h3>
<p class="text-gray-600 mb-6 paragraph-text">
利用人工智能和机器学习技术，快速处理和分析海量数据，通过十大维度为您的股票进行专科体检，追踪机构行为。
AI时代就用AI投资!<br>立即下载，免费体验1个月。全球首发500个名额，抢完即止!
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>云脑探秘：深度解析股市底层数据</span>
</li>
<li class="flex items-start list-item">
<li class="flex items-start text-sm">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>机构动向：实时追踪机构资金动向</span>
<span class="flex-shrink-0 mr-1 text-gray-500">Deepmate：Al通用大模型(弘历特色)</span>
</li>
<li class="flex items-start list-item">
<li class="flex items-start text-sm">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>体检专家：股票标的全方位健康检测</span>
<!-- 2. 修改标题：添加灰色 (text-gray-500)，保持不换行 -->
<span class="flex-shrink-0 text-gray-500">深度探索：</span>
<!-- 3. 右侧文本：通过独立容器确保换行后文字左对齐，而不是跑去图标下面 -->
<span class="text-gray-500 leading-snug">
股市正在从"判断方向"，进入"识别资金"的时代。<br>
“深度探索”带您看透机构，深度理解市场资本本质!
</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 href="#register"
class="self-center inline-block text-white text-lg font-bold px-12 py-3 rounded-full transition-all duration-300 hover:-translate-y-[3px] hover:shadow-md
bg-[linear-gradient(90deg,#FFAC19_0%,#FFA300_100%)]">
立即注册
</a>
</div>
</div>
<!-- 宣传项 2 - AI预测大模型 -->
<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 promotion-image">
<img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型" class="w-full h-full">
</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-base font-medium mb-4 breadcrumb-text">
HomilyLink > 夺宝奇兵 > AI预测大模型
</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">AI预测大模型</h3>
<p class="text-gray-600 mb-6 paragraph-text">
AI 预测大模型颠覆传统，以深度学习与算法挖股市数据抓趋势、预测高低点；AI时空共振结合前沿 AI与时空共振精准识别变盘点。
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>AI股价预测术</span>
</li>
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>AI时空共振</span>
</li>
<li class="flex items-start list-item">
<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 class="mb-6 text-center">
<h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
夺宝奇兵下载体验
</h4>
</div>
<!-- 卡片容器 -->
<div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
<!-- 宣传项 3 - 夺宝利剑 -->
<div
class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in delay-100">
<div class="md:w-1/2 promotion-image">
<img src="https://hc.homilychart.com/hc/250121/img/duobaolijianindex.jpg" alt="夺宝利剑" class="w-full h-full">
<!-- 右侧图片 (HTML中排第一，但 flex-row-reverse 会让它显示在右边) -->
<div class="md:w-1/2 promotion-image overflow-hidden">
<!-- 注意：请确保这里 src 引用的是截图中的夺宝奇兵界面图片 -->
<img
src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5ealun9na5700vk67lj.png"
alt="夺宝奇兵界面"
class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
>
</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-base font-medium mb-4 breadcrumb-text">
HomilyLink > 夺宝奇兵 > Ai金牛 > 夺宝利剑
<!-- 左侧内容区域 (HTML中排第二，显示在左边) -->
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center text-left">
<!-- 大标题 -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight mb-6 text-gray-900">
夺宝奇兵，<br>
<!-- 添加了 inline-block 和 mt-3 来增加与上一行的间距 -->
<span class="inline-block mt-3 bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">
现在免费体验！
</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">夺宝利剑</h3>
<p class="text-gray-600 mb-6 paragraph-text">
最聪明的AI智能均线结合三维波动量，让您在AI时代深度追踪机构的操盘行为！
</h1>
<!-- 描述文本 -->
<p class="text-gray-600 mb-8 text-base md:text-lg leading-relaxed">
AI 时代股票投资必备机构界的黑科技！<br>
加入「赢在美股」，即可参与夺宝奇兵免费体验 7 天的活动，立刻注册报名吧！
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>最聪明的AI智能均线</span>
</li>
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>三维波动量</span>
</li>
<li class="flex items-start list-item">
<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>
<!-- 按钮组 -->
<div class="flex flex-row gap-4">
<!-- 按钮1：立即注册 (实心蓝) -->
<a href="#register"
class="px-8 py-3 rounded-full bg-[#2563EB] text-white font-medium text-center shadow-md transition-all hover:bg-[#1d4ed8] hover:shadow-lg hover:-translate-y-0.5">
立即注册
</a>
<!-- 按钮2：立刻下载 (空心蓝边框) -->
<a href="hcdbqb-download.html"
class="px-8 py-3 rounded-full border border-[#2563EB] text-[#2563EB] font-medium text-center transition-all hover:-translate-y-0.5">
立刻下载
</a>
</div>
</div>
</div>
</div>
<!-- 宣传项 4 - 专题讲座 -->
<div class="mb-6 text-center">
<h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
赢家粉内部专题讲座
</h4>
</div>
<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 promotion-image">
<img id="lectureImage" src="" alt="John Lu谈股专题讲座" class="w-full h-full">
<div class="md:w-1/2 promotion-image overflow-hidden">
<img
id="lectureImage"
src=""
alt="专题讲座"
class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
>
</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-base font-medium mb-4 breadcrumb-text">
class="inline-block px-4 py-1 rounded-full bg-amber-100 text-amber-600 text-base font-medium mb-4 breadcrumb-text">
HomilyLink > 消息 > 赢在美股班级群
</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">HomilyLink专题讲座</h3>
<p class="text-gray-600 mb-6 paragraph-text">
我们推出 HomilyLink专题讲座；结合市场事实热点与机构领域黑科技 "夺宝奇兵"，助力投资者提升股市获利能力。
我们推出 HomilyLink专题讲座;结合市场事实热点与机构领域黑科技"夺宝奇兵”，助力投资者提升股市获利能力。
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start list-item">
@ -324,7 +331,7 @@
<span>HomilyLink赢在美股班级群专属课程（实时答疑+干货分享）</span>
</li>
</ul>
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
<a href="#register" class="inline-flex items-center text-[#EF8800] font-medium hover:text-[#FF5900] transition-colors">
加入赢在美股，解锁更多资讯 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
@ -332,47 +339,55 @@
</div>
</section>
<!-- 注册表单区域 -->
<section id="register" class="py-20 px-4 bg-white">
<div class="container mx-auto max-w-6xl">
<section id="register" class="py-20 bg-gray-50">
<div class="container mx-auto max-w-6xl relative">
<!-- 原有的注册表单部分 - 完全不变 -->
<div class="bg-gradient-to-br 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 bg-image-overlay">
<h2 class="text-2xl md:text-3xl font-bold mb-6 heading-secondary">加入赢在美股，开启赢家人生！</h2>
<h2 class="text-2xl md:text-3xl font-bold mb-6 heading-secondary text-center ">教育精英化 · 武器AI化!</h2>
<p class="text-gray-300 mb-10 leading-relaxed paragraph-text">
填写报名表，即可快速解锁专业投资AI工具，助力您把握投资机会！
</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">
<img alt="超级云脑" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bad6avznn400jwiqwu.png">
</div>
<div>
<h3 class="font-semibold mb-1 heading-tertiary">超级云脑</h3>
<p class="text-gray-400 text-sm paragraph-text">您的股票体检专家！</p>
<h3 class="font-semibold mb-1 heading-tertiary">DeepChart</h3>
<p class="text-gray-400 text-sm paragraph-text">全球最懂机构行为的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="AI预测大模型" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
<img alt="AI预测大模型" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bapwystqy500k1h6xw.png">
</div>
<div>
<h3 class="font-semibold mb-1 heading-tertiary">AI预测大模型</h3>
<p class="text-gray-400 text-sm paragraph-text">时间空间价格AI精准预测！</p>
<h3 class="font-semibold mb-1 heading-tertiary">夺宝奇兵</h3>
<p class="text-gray-400 text-sm paragraph-text">机构界的黑科技</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">
<img alt="夺宝利剑" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bb0rllyv0600wgiveo.png">
</div>
<div>
<h3 class="font-semibold mb-1 heading-tertiary">夺宝利剑</h3>
<p class="text-gray-400 text-sm paragraph-text">最聪明的AI智能均线+三维波动量</p>
<h3 class="font-semibold mb-1 heading-tertiary">赢在美股·体系化实战课程</h3>
<p class="text-gray-400 text-sm paragraph-text">[学 · 练 · 战 · 享 ]用体系化思维，掌握最前沿美股分析方法与实战策略</p>
</div>
</div>
</div>
<!-- 在左侧区域底部添加标语 -->
<div class="mt-10 border-t border-white/20 pt-6">
<h3 class="text-3xl font-bold text-center tracking-wider">
加入赢在美股，开启赢家人生!
</h3>
</div>
</div>
<!-- 右侧表单区域 - 保持不变 -->
@ -380,16 +395,16 @@
<form id="registrationForm" class="space-y-6">
<input type="hidden" name="zbtype" id="zbType" value="6">
<div>
<label for="userNameInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">姓名</label>
<label for="userNameInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">姓名 <span class="text-red-500">*</span></label>
<input type="text" id="userNameInfo" name="userNameInfo"
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"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
placeholder="请输入您的姓名" required>
</div>
<div>
<label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码</label>
<label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码 <span class="text-red-500">*</span></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 form-input"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
required>
<option value="+65">+65 新加坡</option>
<option value="+60">+60 马来西亚</option>
@ -427,10 +442,10 @@
</select>
</div>
<div>
<label for="userMobile" class="block text-sm font-medium text-gray-700 mb-1 form-label">电话号码</label>
<label for="userMobile" class="block text-sm font-medium text-gray-700 mb-1 form-label">电话号码 <span class="text-red-500">*</span></label>
<input type="tel" name="userMobile" id="userMobile" 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 form-input"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
autocomplete="off" required>
</div>
@ -438,43 +453,317 @@
<label for="userWechat" class="block text-sm font-medium text-gray-700 mb-1 form-label">微信ID</label>
<input type="text" name="userWechat" id="userWechat" 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 form-input">
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input">
</div>
<div>
<label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱</label>
<label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱 <span class="text-red-500">*</span></label>
<input type="email" placeholder="请输入您的邮箱" name="userEmail" id="userEmail" 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 form-input"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
required>
</div>
<!-- 多选区域 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">请选择您希望优先获取的权益 (可多选) <span class="text-red-500">*</span></label>
<div class="space-y-3">
<label class="flex items-center space-x-3 cursor-pointer group">
<input type="checkbox" name="benefits[]" value="DeepChart"
class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
<span class="text-sm text-gray-600 group-hover:text-gray-800">获取DeepChart体验权限</span>
</label>
<label class="flex items-center space-x-3 cursor-pointer group">
<input type="checkbox" name="benefits[]" value="夺宝奇兵"
class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
<span class="text-sm text-gray-600 group-hover:text-gray-800">获取"夺宝奇兵"体验权限</span>
</label>
<label class="flex items-center space-x-3 cursor-pointer group">
<input type="checkbox" name="benefits[]" value="独家课程"
class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
<span class="text-sm text-gray-600 group-hover:text-gray-800">参加"赢在美股"独家课程 - 学习前沿分析方法与操作策略</span>
</label>
</div>
</div>
<!-- 同意接收咨询 -->
<div class="flex items-start">
<input type="checkbox" id="agreement" name="agreement" class="mt-1 mr-2" required>
<input type="checkbox" id="agreement" name="agreement"
class="mt-1 mr-2 w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox" required>
<label for="agreement" class="text-sm text-gray-600 form-label">
我同意接收相关产品和服务的资讯
我同意接收相关产品和服务的咨询
</label>
</div>
<!-- 提交按钮 -->
<button type="submit" id="submitBtn"
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">
class="w-full py-3 px-6 rounded-lg text-white font-medium hover:shadow-lg transition-all transform hover:-translate-y-0.5 custom-orange-button">
提交注册
</button>
</form>
</div>
</div>
</div>
<!-- === 声明卡片 === -->
<!-- 在大屏幕上显示，定位在注册表单的右侧外部，紧贴下沿 -->
<!-- 小屏幕隐藏 -->
<div class="hidden lg:block absolute left-full bottom-0 ml-4 w-64">
<div class="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
<div class="mb-4 border-b border-gray-100 pb-3">
<h4 class="font-bold text-gray-900 mb-2 text-sm">注册说明</h4>
<div class="space-y-2 text-xs">
<div class="flex items-start">
<div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
<i class="fa fa-user"></i>
</div>
<p class="text-gray-600">请填写方便称呼您的姓名信息。</p>
</div>
<div class="flex items-start">
<div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
<i class="fa fa-whatsapp"></i>
</div>
<p class="text-gray-600">手机号码最好支持WhatsApp联系。</p>
</div>
<div class="flex items-start">
<div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
<i class="fa fa-comments"></i>
</div>
<p class="text-gray-600">微信的联系方式我们也支持。</p>
</div>
<div class="flex items-start">
<div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
<i class="fa fa-envelope"></i>
</div>
<p class="text-gray-600">邮箱作为联系您的备用联系方式。</p>
</div>
</div>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-1 text-sm">郑重声明</h4>
<p class="text-xs text-gray-500 leading-relaxed">
我们将严格保护您的个人信息安全，绝对不会向第三方泄露。
</p>
</div>
</div>
</div>
</div>
</section>
</section>
<section id="page-register" class="page dohidden">
<!-- DeepChart2月份免费体验页面 -->
<div class="pt-32 pb-20">
<div class="container mx-auto max-w-6xl">
<!-- 标题区域 -->
<div class="text-center mb-8">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
DeepChart2月份免费体验
</h1>
<p class="text-xl text-gray-600 mb-3">
赢家粉有一次在2月份体验的机会！
</p>
<h2 class="text-xl text-gray-600 mb-3">
全球最懂机构行为的AI伙伴
</h2>
</div>
<!-- 主容器：使用flex布局 -->
<div class="flex flex-col lg:flex-row gap-8">
<!-- 左侧表单区域 -->
<div class="lg:w-2/3">
<div class="bg-white rounded-3xl shadow-xl overflow-hidden">
<div class="p-8 md:p-12">
<form class="space-y-6">
<!-- 姓名 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">姓名 <span class="text-red-500">*</span></label>
<input type="text"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
placeholder="请输入您的姓名" required>
</div>
<!-- 手机号码 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">手机号码 <span class="text-red-500">*</span></label>
<div class="flex gap-3 flex-col md:flex-row">
<select class="w-full md:w-1/3 px-3 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all">
<option value="+1" selected>+1 美国</option>
<option value="+86">+86 中国</option>
<option value="+852">+852 香港</option>
</select>
<input type="tel"
class="w-full md:flex-1 px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all"
placeholder="不带国家编号的纯机号" required>
</div>
</div>
<!-- 微信ID -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">微信ID</label>
<input type="text"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all"
placeholder="微信ID（如没有WhatsApp）">
</div>
<!-- 邮箱地址 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">邮箱地址 <span class="text-red-500">*</span></label>
<input type="email"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all"
placeholder="请输入您的邮箱地址" required>
</div>
<!-- 提交按钮 -->
<button type="submit"
class="w-full py-4 px-6 rounded-lg text-white font-bold text-lg hover:shadow-lg transition-all transform hover:-translate-y-0.5 mt-8 custom-orange-button">
提交注册
</button>
<!-- WhatsApp帮助链接 -->
<div class="text-center mt-6">
<a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助"
target="_blank"
class="inline-flex items-center text-blue-600 hover:text-blue-800 text-sm">
<i class="fa fa-whatsapp text-green-500 mr-2"></i>
如需帮助？点击发WhatsApp
</a>
</div>
</form>
</div>
</div>
</div>
<!-- 右侧声明区域 - 在小屏幕上显示在表单下面 -->
<div class="lg:w-1/3">
<div class="bg-white rounded-2xl shadow-xl p-6 h-full">
<div class="mb-2 border-b border-gray-100 pb-6">
<h4 class="font-bold text-gray-900 mb-4 text-lg">注册说明</h4>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-orange-50 flex items-center justify-center mr-3 flex-shrink-0 text-orange-500">
<i class="fa fa-user"></i>
</div>
<p class="text-gray-600">请填写方便称呼您的姓名信息。</p>
</div>
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-orange-50 flex items-center justify-center mr-3 flex-shrink-0 text-orange-500">
<i class="fa fa-whatsapp"></i>
</div>
<p class="text-gray-600">手机号码最好支持WhatsApp联系。</p>
</div>
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-orange-50 flex items-center justify-center mr-3 flex-shrink-0 text-orange-500">
<i class="fa fa-comments"></i>
</div>
<p class="text-gray-600">微信的联系方式我们也支持。</p>
</div>
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-orange-50 flex items-center justify-center mr-3 flex-shrink-0 text-orange-500">
<i class="fa fa-envelope"></i>
</div>
<p class="text-gray-600">邮箱作为联系您的备用联系方式。</p>
</div>
</div>
</div>
<!-- 温馨提示 -->
<div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mt-2 mb-2">
<h4 class="font-bold text-amber-800 mb-2">温馨提示</h4>
<p class="text-amber-700 text-sm">
赢家粉可以在2月份免费体验。<br>
包括：DEEPCHART所有功能<br>
<span class="font-semibold">注意是2026年2月份哦！</span>
</p>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-3 text-lg">郑重声明</h4>
<p class="text-gray-500 leading-relaxed">
我们将严格保护您的个人信息安全，绝对不会向第三方泄露。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="page-register-success" class="page">
</section>
<section id="page-guide" class="page dohidden">
<div class="container mx-auto max-w-5xl pt-24">
<div
class="text-center mb-4 animate-fade-in"
style="opacity: 1; transform: translateY(0px)"
>
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2">
操作指南中心
</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"
style="opacity: 1; transform: translateY(0px)"
>
<h3 class="text-xl md:text-2xl font-semibold mb-4 text-center text-gray-500">
HomilyLink操作指南 &nbsp;|&nbsp;课程直播&nbsp;|&nbsp;重播指南
</h3>
<div class="video-container">
<!-- 兼容性视频播放器 -->
<video
id="guideVideo"
controls=""
poster="https://hc.homilychart.com/hc/250121/img/106-1200x675.jpg"
controlslist="nodownload"
class="w-full"
>
<source
src="https://hc.homilychart.com/hc/250121/img/homilylink-guide.mp4"
type="video/mp4"
/>
</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="https://hc.homilychart.com/hc/250121/img/20230711171637.png"
style="width: 30px; height: 30px"
/>
<span
><a
href="https://wa.me/+6588792879?text=进HomilyLink听课需要帮助"
target="_blank"
class="text-gray-400 transition-colors"
style="color: black"
>点击寻求帮助</a
></span
>
</button>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 页脚区域 -->
<footer class="footer-bg 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-background flex items-center justify-center">
<img alt="赢在美股" src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.png"
style="width: 40px;height: 40px;">
<div class="w-10 h-10 rounded-lg flex items-center justify-center">
<img
src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5udhzj898b800yp02ol.png"
alt="Logo"
/>
</div>
<span class="text-xl font-bold">赢在美股</span>
</div>
@ -554,7 +843,6 @@
</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 relative">
@ -1158,14 +1446,6 @@
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-hover-effect {
transition: all 0.3s ease;
}
.card-hover-effect:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transform: translateY(-4px);
}
.gradient-background {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
@ -1220,6 +1500,114 @@
background-position: center;
background-repeat: no-repeat;
}
.dohidden {
display: none;
}
.page{
min-height: calc(100vh-160px);
}
.arrow-box {
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(45deg) translateY(-4px);
margin-left: 6px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.group:hover .arrow-box {
border-color: #FFA300;
transform: rotate(225deg);
}
/* 下拉菜单 */
.home-dropdown {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
background: #fff;
min-width: 150px;
padding: 0px 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
display: none;
z-index: 50;
}
.group:hover .home-dropdown {
display: block;
}
.group:hover .dropdown-item:first-child {
border-top: 2px solid #FFA300;
}
/* 下拉项 */
.dropdown-item {
display: block;
padding: 14px 20px;
font-size: 16px; /* 字体变大 */
font-weight: 400;
color: #333;
text-align: center; /* 文本居中 */
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease;
}
.dropdown-item:hover {
color: #FFA300;
}
/* 自定义橙色渐变背景 */
.custom-orange-button {
background: linear-gradient(90deg, #FFAC19 0%, #FFA300 100%);
border: none;
}
.custom-orange-button:hover {
background: linear-gradient(90deg, #FFB433 0%, #FFB020 100%);
box-shadow: 0 4px 12px rgba(255, 172, 25, 0.3);
}
/* 自定义复选框样式 - 使用橙色 */
.custom-orange-checkbox {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
position: relative;
transition: all 0.2s;
}
.custom-orange-checkbox:checked {
background-color: #FFA300;
border-color: #FFA300 !important;
}
.custom-orange-checkbox:checked::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
}
/* 输入框和下拉框样式 */
.form-input {
border-width: 2px;
}
/* 移除所有蓝色边框和聚焦阴影 */
.form-input:focus {
outline: none;
border-color: #FFA300 !important;
box-shadow: 0 0 0 3px rgba(255, 172, 25, 0.1);
}
#page-register,#page-guide {
background: #FFF9ED;
}
</style>
</body>
Write Preview
Loading…
Cancel
Save