写好操作指南样式

index.html

@@ -124,6 +124,7 @@
   </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 pt-32 bg-[url('https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg58gif4guu1200qbnj3a.png')]
@@ -185,52 +186,9 @@
           </div>
         </div>
       </section>
-  <!-- 英雄区域
-    <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">
-                立即注册
-              </a>
-              <a href="#promotions"
-                class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all">
-                了解更多
-              </a>
-              <a href="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>
-            </div>
-          </div>
-          <div class="md:w-1/2 animate-fade-in delay-200">
-            <div class="relative">
-              <div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-accent/20 rounded-3xl blur-xl opacity-70">
-              </div>
-              <img src="https://hc.homilychart.com/hc/250121/img/dbqbindex.jpg" alt="夺宝奇兵"
-                class="relative z-10 rounded-2xl shadow-xl w-full object-cover">
-            </div>
-          </div>
-        </div>
-      </div>
-    </section> -->
       <!-- 产品宣传区域 -->
       <section id="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> -->
           <div class="mb-6 text-center">
             <h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
               教育精英化 · 武器AI化
@@ -271,10 +229,6 @@
                     “深度探索”带您看透机构，深度理解市场资本本质!
                   </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="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 
@@ -338,42 +292,6 @@
 
             </div>
           </div>
-
-        <!-- 宣传项 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">
-          </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">夺宝利剑</h3>
-            <p class="text-gray-600 mb-6 paragraph-text">
-              最聪明的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>三维波动量</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>
-            </a>
-          </div>
-        </div> -->
-
           <!-- 宣传项 4 - 专题讲座 -->
           <div class="mb-6 text-center">
             <h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
@@ -630,6 +548,210 @@
           </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">
@@ -1378,7 +1500,12 @@
       background-position: center;
       background-repeat: no-repeat;
     }
-    
+    .dohidden {
+      display: none;
+    }
+    .page{
+      min-height: calc(100vh-160px);
+    }
     .arrow-box {
       display: inline-block;
       width: 8px;
@@ -1478,7 +1605,9 @@
       border-color: #FFA300 !important;
       box-shadow: 0 0 0 3px rgba(255, 172, 25, 0.1);
     }
-
+    #page-register,#page-guide {
+      background: #FFF9ED;
+    }
   </style>
 </body>