steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
1970 lines
80 KiB
HTML
1970 lines
80 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added, extended color palette and beautiful typography, designed as its own extended version of Bootstrap at the highest level of quality. ">
|
||
<meta name="author" content="Webpixels">
|
||
<title>funding Program Page</title>
|
||
<!-- Fonts -->
|
||
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet"> -->
|
||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||
<link href="../assets/css/style.css" rel="stylesheet">
|
||
<!-- Theme CSS -->
|
||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||
<!-- Demo CSS - No need to use these in your project -->
|
||
<!-- <link type="text/css" href="../assets/css/demo.css" rel="stylesheet"> -->
|
||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||
<link type="text/css" href="../assets/css/academy.css" rel="stylesheet">
|
||
|
||
</head>
|
||
<body class="aifo-bg-primary">
|
||
|
||
<!-- Top code bar -->
|
||
<!-- <div class="top-code-bar bg-primary">
|
||
<div class="container d-flex align-items-center justify-content-center h-100">
|
||
<span class="top-code-label">35% OFF + 350% REFUND Limited Time</span>
|
||
<button type="button" class="btn btn-sm top-code-btn" data-code="AIFO2025">CODE:AIFO</button>
|
||
</div>
|
||
</div> -->
|
||
|
||
<div id="nav-container"></div>
|
||
|
||
<main class="main" id="funding_program">
|
||
<!-- banner start -->
|
||
<div class="academy-block-1">
|
||
<!-- 1 start -->
|
||
<section id="acadey-section-1" class="funded-trading-hero spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" >
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6 fade-in">
|
||
<!-- Icons -->
|
||
<h1 class="hero-title fade-in">
|
||
<span class="line1">
|
||
Get Funded And Trade
|
||
</span>
|
||
<span class="line2"> With Up To <span class="text-orange">$500K</span></span>
|
||
</h1>
|
||
<div class="banner-contain d-flex align-items-center justify-content-center flex-wrap mt-6">
|
||
|
||
<!-- 中间内容 -->
|
||
<div class="text-center mx-4 fade-in">
|
||
<div class="mb-3">
|
||
<div class="banner-desc">
|
||
Start with a challenge. Trade real capital. Keep up to<span class="text-orange">90% profits.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Buttons -->
|
||
<div class="hero-buttons center-buttons fade-in">
|
||
<a href="#" class="btn btn-start-challenge">Start Challenge</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 1 end -->
|
||
</div>
|
||
|
||
<!-- 2 start -->
|
||
<section class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="mb-md text-center fade-in">
|
||
<h1 class="heading h1 fade-in">Your Journey </h1>
|
||
<h1 class="heading h1 fade-in"> <span class="text-orange">Starts Here</span> </h1>
|
||
<div class="fluid-paragraph text-center mt-4">
|
||
<p class="lead lh-180 fade-in">
|
||
At AIFO, we support our traders by providing <span class="text-orange">educational support</span>,
|
||
flexible challenges, and hassle-free quick payouts. Everything a trader needs to go pro.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="row text-center card-style-2 d-flex justify-content-center">
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded fade-in">
|
||
<div class="mb-3 ustify-content-center align-items-center"><i class="icon-box w-9"></i></div>
|
||
<h5>Figma community</h5>
|
||
<p>Follow objective rules to showcase your discipline and consistency.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded fade-in">
|
||
<div class="mb-3"><i class="icon-box w-7"></i></div>
|
||
<h5>Fast Payouts</h5>
|
||
<p>Keep up to 90% of your profits as you grow your account.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded fade-in">
|
||
<div class="mb-3"><i class="icon-box w-3"></i></div>
|
||
<h5>Community Support</h5>
|
||
<p>Connect with a network of traders sharing tips, insights, and wins.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 2 end -->
|
||
|
||
<!-- 3 start-->
|
||
<section id="section-4" class="top-earners slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-7">
|
||
<h1 class="heading h1">Some of Our</h1>
|
||
<h1 class="heading h1"><span class="text-orange">Top Earners</span> </h1>
|
||
</div>
|
||
<div class="sub_title col-md-5 mb-4 d-grid align-self-end" style="grid-template-rows: 1fr auto;">
|
||
<!-- 按钮自动对齐到底部 -->
|
||
<div class="text-right">
|
||
<a class="btn btn-sm bg-primary d-none d-lg-inline-flex" href="#">Get Funded</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- content strat -->
|
||
<div class="row">
|
||
<div class="col-md-6 mb-4">
|
||
<div class="earner-card d-flex align-items-center">
|
||
|
||
<div class="avatar-circle bg-gradient fade-in">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/avator1.png" alt="AIFO preview thumbnail">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<div class="payouts_total fade-in">
|
||
2 payouts totaling
|
||
</div>
|
||
<div class="font-weight-bold fade-in">
|
||
$48,244.50
|
||
</div>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<span class="name-pill mr-2 fade-in">John Smith</span>
|
||
<span class="national_flag fade-in">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/flag-lr.png" alt="AIFO preview thumbnail">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-4">
|
||
<div class="earner-card d-flex align-items-center">
|
||
|
||
<div class="avatar-circle bg-gradient fade-in">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/avator1.png" alt="AIFO preview thumbnail">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<div class="payouts_total">
|
||
2 payouts totaling
|
||
</div>
|
||
<div class="font-weight-bold">
|
||
$48,244.50
|
||
</div>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<span class="name-pill mr-2 fade-in">John Smith</span>
|
||
<span class="national_flag">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/flag-lr.png" alt="AIFO preview thumbnail">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mb-4">
|
||
<div class="earner-card d-flex align-items-center">
|
||
|
||
<div class="avatar-circle bg-gradient fade-in">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/avator1.png" alt="AIFO preview thumbnail">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<div class="payouts_total">
|
||
2 payouts totaling
|
||
</div>
|
||
<div class="font-weight-bold">
|
||
$48,244.50
|
||
</div>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<span class="name-pill mr-2 fade-in">John Smith</span>
|
||
<span class="national_flag">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/flag-lr.png" alt="AIFO preview thumbnail">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mb-4">
|
||
<div class="earner-card d-flex align-items-center">
|
||
<div class="avatar-circle bg-gradient fade-in">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/avator1.png" alt="AIFO preview thumbnail">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<div class="payouts_total">
|
||
2 payouts totaling
|
||
</div>
|
||
<div class="font-weight-bold">
|
||
$48,244.50
|
||
</div>
|
||
<div class="d-flex align-items-center mt-2">
|
||
<span class="name-pill mr-2 fade-in">John Smith</span>
|
||
<span class="national_flag">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/flag-lr.png" alt="AIFO preview thumbnail">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- content end -->
|
||
</div>
|
||
</section>
|
||
<!-- 3 end-->
|
||
|
||
<!-- 4 start-->
|
||
<section id="section-5" class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="mb-md text-center">
|
||
<h1 class="heading h1 fade-in">Choose <img src="../assets/images/backgrounds/Component 63-2.png" alt="Funded Trading" class="why-img floating-img"></h3>
|
||
<h1 class="heading h1 fade-in">Your <span class="text-orange">Challenge<span></h3>
|
||
<div class="fluid-paragraph text-center mt-4">
|
||
<p class="lead lh-180 fade-in">
|
||
Whether you’re taking your first step or working toward larger accounts, AIFO has <span class="text-orange">flexible programs</span> designed to match your style and support your growth.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="row text-center mb-hidden">
|
||
<div class="main-wrapper">
|
||
<div class="content-container">
|
||
<!-- Tab Navigation -->
|
||
<div class="col-12 d-flex justify-content-center">
|
||
<nav class="tab-navigation">
|
||
<button class="tab-button active" data-tab="1step" id="tab1">1 STEP</button>
|
||
<button class="tab-button" data-tab="2step" id="tab2">2 STEP</button>
|
||
<button class="tab-button" data-tab="3step" id="tab3">3 STEP</button>
|
||
<button class="tab-button" data-tab="instant" id="tab4">INSTANT</button>
|
||
</nav><!-- Table -->
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table id="accordion">
|
||
<tbody id="tableBody"><!-- Rows will be populated by JavaScript -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="others-desc">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3 mb-lg-0 d-flex align-items-center">
|
||
<h3 class="font-weight-semibold add-ones mb-1">Add-ons <br>for Challenger </h3>
|
||
</div>
|
||
<div class="col-lg-9">
|
||
<div class="row">
|
||
<div class="col-md-12 mb-12">
|
||
<div class="d-flex align-items-center add-ons-item">
|
||
<span class="badge text-orange font-weight-bold mr-2">+20%</span>
|
||
<span>Profit split increase up to 95%</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 mb-12">
|
||
<div class="d-flex align-items-center add-ons-item">
|
||
<span class="badge text-orange font-weight-bold mr-2">+10%</span>
|
||
<span>Fast payout (payout on demand)</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 mb-12">
|
||
<div class="d-flex align-items-center add-ons-item">
|
||
<span class="badge text-orange font-weight-bold mr-2">+20%</span>
|
||
<span>Challenge fee refundable on first payout</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 mb-12">
|
||
<div class="d-flex align-items-center add-ons-item">
|
||
<span class="badge text-orange font-weight-bold mr-2">+15%</span>
|
||
<span>Trading commission free</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 mb-12">
|
||
<div class="d-flex align-items-center add-ons-item">
|
||
<span class="badge text-orange font-weight-bold mr-2">+50%</span>
|
||
<span class="font-weight-semibold">All Add-ons Bundle</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 4 end-->
|
||
|
||
<!-- 5 start-->
|
||
<section class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="mb-md text-center fade-in">
|
||
<h1 class="heading h1"> A Global <span class="text-orange"> Prop Firm</span></h1>
|
||
<h1 class="heading h1"> That Offers </h1>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="award-card">
|
||
<div class="award-icon-box">
|
||
<img src="../assets/images/backgrounds/icon/award-icon.png" alt="Funded Trading" class="tx-img">
|
||
</div>
|
||
<h3 class="font-weight-semibold mb-2" style="font-size: 17px;">Award</h3>
|
||
<p class="mb-0 award-desc">
|
||
Get inspired by live sessions, shared success stories
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="award-card">
|
||
<div class="award-icon-box">
|
||
<img src="../assets/images/backgrounds/icon/award-icon.png" alt="Funded Trading" class="tx-img">
|
||
</div>
|
||
<h3 class="font-weight-semibold mb-2" style="font-size: 17px;">Award</h3>
|
||
<p class="mb-0 award-desc">
|
||
Get inspired by live sessions, shared success stories
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="award-card">
|
||
<div class="award-icon-box">
|
||
<img src="../assets/images/backgrounds/icon/award-icon.png" alt="Funded Trading" class="tx-img">
|
||
</div>
|
||
<h3 class="font-weight-semibold mb-2" style="font-size: 17px;">Award</h3>
|
||
<p class="mb-0 award-desc">
|
||
Get inspired by live sessions, shared success stories
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 5 End-->
|
||
|
||
<!-- 6 start-->
|
||
<section class="payout-section py-5" id="payout-section">
|
||
<div class="container">
|
||
<div class="text-center title-contaion">
|
||
<h2 class="display-4 font-weight-bold align-items-center justify-content-center">
|
||
Become A Funded Trader
|
||
</h2>
|
||
<h2 class="display-4 font-weight-bold align-items-center justify-content-center text-orange">
|
||
In 5 Simple Steps
|
||
</h2>
|
||
</div>
|
||
<div class="position-relative" style="max-width: 920px; margin: 0 auto;">
|
||
<div class="timeline-line d-none d-lg-block"></div>
|
||
<div class="timeline-line-mobile d-lg-none"></div><!-- Timeline Item 1 -->
|
||
<div class="timeline-item">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-5 order-lg-1 mb-3 mb-lg-0 text-right">
|
||
<div class="step-card ml-lg-auto">
|
||
<div class="node-dot mb-2 mb-show"></div>
|
||
<div class="step-label fade-in">
|
||
Step 1
|
||
</div>
|
||
<h3 class="font-weight-bold mb-2 font-heading-1 fade-in">Pass A Challenge</h3>
|
||
<p class="mb-0">Complete your chosen challenge plan and reach the profit target</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-lg-2 order-lg-2 d-none d-lg-flex justify-content-center">
|
||
<div class="d-flex flex-column align-items-center">
|
||
<div class="node-dot mb-2"></div>
|
||
<div class="node-icon to_right">
|
||
<img src="../assets/images/backgrounds/icon/Component 69.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5 order-lg-3"></div>
|
||
</div>
|
||
</div><!-- Timeline Item 2 -->
|
||
<div class="timeline-item">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-5 order-lg-1"></div>
|
||
<div class="col-lg-2 order-lg-2 d-none d-lg-flex justify-content-center">
|
||
<div class="d-flex flex-column align-items-center">
|
||
<div class="node-dot mb-2" style="animation-delay: 0.2s;"></div>
|
||
<div class="node-icon to_left">
|
||
<img src="../assets/images/backgrounds/icon/Component 70.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5 order-lg-3 mb-3 mb-lg-0">
|
||
<div class="step-card mr-lg-auto">
|
||
<div class="node-dot mb-2 mb-show"></div>
|
||
<div class="step-label fade-in">
|
||
Step 2
|
||
</div>
|
||
<h3 class="font-weight-bold mb-2 font-heading-1" style="font-size: 19px;">Generate A Profit</h3>
|
||
<p class="mb-0 fade-in">Become an AIFO trader and start trading with real capital</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- Timeline Item 3 -->
|
||
<div class="timeline-item">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-5 order-lg-1 mb-3 mb-lg-0 text-right">
|
||
<div class="step-card ml-lg-auto">
|
||
<div class="node-dot mb-2 mb-show"></div>
|
||
<div class="step-label fade-in">
|
||
Step 3
|
||
</div>
|
||
<h3 class="font-weight-bold mb-2 font-heading-1" style="font-size: 19px;">Consolidate Your Earnings</h3>
|
||
<p class="mb-0 fade-in">Accumulate profits through trading with up to 90% profit split</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 order-lg-2 d-none d-lg-flex justify-content-center">
|
||
<div class="d-flex flex-column align-items-center">
|
||
<div class="node-dot mb-2" style="animation-delay: 0.4s;"></div>
|
||
<div class="node-icon to_right">
|
||
<img src="../assets/images/backgrounds/icon/Component 71.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5 order-lg-3"></div>
|
||
</div>
|
||
</div><!-- Timeline Item 4 -->
|
||
<div class="timeline-item">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-5 order-lg-1"></div>
|
||
<div class="col-lg-2 order-lg-2 d-none d-lg-flex justify-content-center">
|
||
<div class="d-flex flex-column align-items-center">
|
||
<div class="node-dot mb-2" style="animation-delay: 0.6s;"></div>
|
||
<div class="node-icon to_left">
|
||
<img src="../assets/images/backgrounds/icon/Component 72.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5 order-lg-3 mb-3 mb-lg-0">
|
||
<div class="step-card mr-lg-auto">
|
||
<div class="node-dot mb-2 mb-show"></div>
|
||
<div class="step-label fade-in">
|
||
Step 4
|
||
</div>
|
||
<h3 class="font-weight-bold mb-2 font-heading-1" style="font-size: 19px;">Request A Payout</h3>
|
||
<p class="mb-0 fade-in">Submit withdrawal request anytime to access your profits</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- Timeline Item 5 -->
|
||
<div class="timeline-item">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-5 order-lg-1 text-right">
|
||
<div class="step-card ml-lg-auto">
|
||
<div class="node-dot mb-2 mb-show"></div>
|
||
<div class="step-label fade-in">
|
||
Step 5
|
||
</div>
|
||
<h3 class="font-weight-bold mb-2 font-heading-1" style="font-size: 19px;">Fast Withdrawal Times</h3>
|
||
<p class="mb-0 fade-in">Processed within 24 hours, funds arrive safely to your account</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 order-lg-2 d-none d-lg-flex justify-content-center">
|
||
<div class="d-flex flex-column align-items-center">
|
||
<div class="node-dot mb-2" style="animation-delay: 0.8s;"></div>
|
||
<div class="node-icon to_right">
|
||
<img src="../assets/images/backgrounds/icon/Component 73.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5 order-lg-3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-5"><button class="btn btn-default btn-lg rounded-lg px-5 py-3">Start Challenge</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6 end -->
|
||
<section class="feedback-section section" id="feedback-section">
|
||
<div class="container container-narrow fade-in show">
|
||
<div class="header-info d-flex justify-content-between align-items-center">
|
||
<h1 class="heading h1 mb-0"> Traders' <span class="text-orange">Feedback</span> </h1>
|
||
<div class="growth-controls">
|
||
<button class="btn growthPrev" id="feedbackPrev" disabled=""></button>
|
||
<button class="btn growthNext" id="feedbackNext"></button>
|
||
</div>
|
||
</div>
|
||
<div id="feedbackCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
|
||
<div class="carousel-inner"><!-- Slide 1 -->
|
||
<div class="carousel-item active">
|
||
<div class="row mt-1">
|
||
<div class="col-md-6 col-lg-4 mb-4 ">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);">
|
||
<img class="lazy-img" alt="AIFO preview thumbnail" src="../assets/images/backgrounds/avator1.png">
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
<span class="text-orange">★★★★</span>★
|
||
</div>
|
||
<div class="d-flex align-items-center">
|
||
<span class="name-pill mr-2">John Smith</span>
|
||
<span class="national_flag">
|
||
<img class="lazy-img" alt="AIFO preview thumbnail" src="../assets/images/backgrounds/flag-lr.png">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 content-desc">
|
||
I've been trading for years, and this is by far the best experience I've had with a prop firm. The platform is stable, the support team is always available, and the profit split is one of the best in the industry.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);"></div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
★★★★★
|
||
</div>
|
||
<div class="d-flex align-items-center"><span class="name-pill mr-2">Sarah Johnson</span> <span style="font-size: 20px;">🇬🇧</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 fade-in" >Made over $60k in profits within three months. The platform is stable and withdrawals are lightning fast.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);"></div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
★★★★★
|
||
</div>
|
||
<div class="d-flex align-items-center"><span class="name-pill mr-2">Michael Chen</span> <span style="font-size: 20px;">🇨🇦</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 fade-in" >As a beginner trader, AIFO gave me the confidence and capital to grow. Best decision I made!</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);"></div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
★★★★★
|
||
</div>
|
||
<div class="d-flex align-items-center"><span class="name-pill mr-2">John Smith</span> <span style="font-size: 20px;">🇺🇸</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 fade-in" >AIFO is the best prop firm I've worked with. Clear rules, fast payouts, and professional support.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);"></div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
★★★★★
|
||
</div>
|
||
<div class="d-flex align-items-center"><span class="name-pill mr-2">Sarah Johnson</span> <span style="font-size: 20px;">🇬🇧</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 fade-in" >Made over $60k in profits within three months. The platform is stable and withdrawals are lightning fast.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);"></div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
★★★★★
|
||
</div>
|
||
<div class="d-flex align-items-center"><span class="name-pill mr-2">Michael Chen</span> <span style="font-size: 20px;">🇨🇦</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 fade-in" >As a beginner trader, AIFO gave me the confidence and capital to grow. Best decision I made!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- Slide 2 -->
|
||
<div class="carousel-item">
|
||
<div class="row mt-1">
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);"></div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
<span class="text-orange>★★★★</span>★
|
||
</div>
|
||
<div class="d-flex align-items-center"><span class="name-pill mr-2">Emma Wilson</span> <span style="font-size: 20px;">🇦🇺</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 fade-in" >Withdrawal speed is impressive - funds arrived within 24 hours. Trading with AIFO has been a game changer.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);"></div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
★★★★★
|
||
</div>
|
||
<div class="d-flex align-items-center"><span class="name-pill mr-2">David Brown</span> <span style="font-size: 20px;">🇩🇪</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 fade-in" >I've tried multiple prop firms and AIFO is the most professional. They truly care about trader success.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4 mb-4">
|
||
<div class="review-card">
|
||
<div class="d-flex mb-3">
|
||
<div class="review-avatar mr-3" style="background: linear-gradient(135deg, #ec4899 0%, #ef4444 100%);"></div>
|
||
<div class="flex-grow-1">
|
||
<div class="star-rating mb-2">
|
||
★★★★★
|
||
</div>
|
||
<div class="d-flex align-items-center"><span class="name-pill mr-2">Lisa Martinez</span> <span style="font-size: 20px;">🇪🇸</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mb-0 fade-in" >The challenge rules are fair and achievable. This is a platform that genuinely helps traders grow.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-5"><button class="btn btn-default rounded-lg px-5">View More</button>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- payment-methods -->
|
||
<section class="payment-methods-section py-7">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-4 font-weight-bold faq-answer">
|
||
<span style="color: var(--white-primary);">Payment </span>
|
||
<span class="text-orange">Methods</span>
|
||
</h2>
|
||
</div>
|
||
<div class="pm-marquee position-relative">
|
||
<div class="pm-fade pm-fade-left"></div>
|
||
<div class="pm-fade pm-fade-right"></div>
|
||
<div class="pm-track">
|
||
<div class="pm-group">
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none">
|
||
<text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#003087">
|
||
PayPal
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#9FE870">
|
||
Wise
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#862165">
|
||
Skrill
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#0075EB">
|
||
Revolut
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#1F1F1F">
|
||
Bank Transfer
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#F7931A">
|
||
Crypto
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
</div><!-- Duplicate for seamless loop -->
|
||
<div class="pm-group" aria-hidden="true">
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#003087">
|
||
PayPal
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#9FE870">
|
||
Wise
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#862165">
|
||
Skrill
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#0075EB">
|
||
Revolut
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#1F1F1F">
|
||
Bank Transfer
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div class="pm-item">
|
||
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#F7931A">
|
||
Crypto
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- payment-methods End -->
|
||
|
||
|
||
|
||
|
||
<!-- 8 start -->
|
||
<section class="faq-section py-5" id="faq">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-4 font-weight-bold fade-in" >Frequently Asked</h2>
|
||
<h2 class="display-4 font-weight-bold text-orange fade-in"><span class="text-orange">Questions</span> </h2>
|
||
</div>
|
||
<div style="max-width: 820px; margin: 0 auto;">
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in">How do I start a challenge?</span>
|
||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||
</div></button>
|
||
<div class="faq-body">
|
||
<div class="faq-answer fade-in">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in">How long does withdrawal take?</span>
|
||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||
</div></button>
|
||
<div class="faq-body">
|
||
<div class="faq-answer fade-in">
|
||
<p>We process all withdrawal requests within 24 hours. In most cases, funds arrive in your account within a few hours after submission.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in">What is the profit split ratio?</span>
|
||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||
</div></button>
|
||
<div class="faq-body">
|
||
<div class="faq-answer fade-in">
|
||
<p>We offer the industry's highest profit split, up to 90%. The vast majority of your trading profits belong to you.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in">Can I use Expert Advisors (EAs)?</span>
|
||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||
</div></button>
|
||
<div class="faq-body">
|
||
<div class="faq-answer fade-in">
|
||
<p>Yes, we allow the use of Expert Advisors for automated trading. You can unlock EA trading features by purchasing add-ons.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in">Can I retry after failing a challenge?</span>
|
||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||
</div></button>
|
||
<div class="faq-body">
|
||
<div class="faq-answer fade-in">
|
||
<p>Absolutely! We understand that trading requires learning and adaptation. You can purchase a new challenge anytime to continue your journey. We also offer discounts for repeat challengers.</p><a href="#" class="see-more-link">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in">What are the trading restrictions?</span>
|
||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||
</div></button>
|
||
<div class="faq-body">
|
||
<div class="faq-answer fade-in">
|
||
<p>Our rules are very flexible. We allow holding overnight, weekend trading, and news trading. The main restrictions are maximum drawdown and daily drawdown limits, which protect both your capital and ours.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-5"><button class="btn btn-default rounded-lg px-5">More Answers</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8 end -->
|
||
|
||
<!-- 第八楼层 start -->
|
||
<section id="section-10" class="slice slice-lg d-flex align-items-center">
|
||
<div class="bg-orange-light"></div>
|
||
<div class="container">
|
||
<div class="mb-md text-center fade-in">
|
||
<h1 class="heading h1">Join <img src="../assets/images/backgrounds/Frame 1000008381.png" alt="Funded Trading"
|
||
class="tx-img floating-img"></h1>
|
||
<h1 class="heading h1"> <img src="../assets/images/backgrounds/Frame 1000008386.png" alt="Funded Trading"
|
||
class="zfj-img floating-img"><span class="text-orange">Our Community</span></h1>
|
||
<div class="fluid-paragraph text-center mt-4">
|
||
<p class="lead lh-180">
|
||
Join a <span class="text-orange">supportive network</span> of traders where you can <br>share insights,
|
||
learn together, and celebrate <br>every step of your journey.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center ">
|
||
<div class="col-auto">
|
||
<div class="hero-buttons d-flex flex-wrap justify-content-center fade-in">
|
||
<a href="#" class="btn btn-start-challenge d-flex align-items-center justify-content-center"><img
|
||
src="../assets/images/backgrounds/btn-icon-1.png" alt="Funded Trading"> Join Discord</a>
|
||
<a href="#" class="btn btn-free-trial">
|
||
<span class="btn-join-telegram-icon"></span>
|
||
|
||
Join Telegram
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
<!-- 第八楼层 End -->
|
||
|
||
</main>
|
||
|
||
<div id="footer-container"></div>
|
||
|
||
<!-- Core -->
|
||
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
|
||
<script src="../assets/vendor/popper/popper.min.js"></script>
|
||
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
|
||
<!-- FontAwesome 5 -->
|
||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||
<!-- Page plugins -->
|
||
<script src="../assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
|
||
<script src="../assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
|
||
<script src="../assets/vendor/input-mask/input-mask.min.js"></script>
|
||
<script src="../assets/vendor/nouislider/js/nouislider.min.js"></script>
|
||
<script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
|
||
<!-- Theme JS -->
|
||
<script src="../assets/js/theme.js"></script>
|
||
<!-- Top code bar behavior -->
|
||
|
||
<script src="/js/layout.js"></script>
|
||
</body>
|
||
|
||
|
||
<script>
|
||
/* =========================
|
||
Intersection fade-in (pixel-precise)
|
||
and lazy loaders for floor loading
|
||
========================= */
|
||
(function($){
|
||
const io = new IntersectionObserver((entries, obs) => {
|
||
entries.forEach(e=>{
|
||
if(e.isIntersecting){
|
||
$(e.target).addClass('show');
|
||
obs.unobserve(e.target);
|
||
}
|
||
});
|
||
},{threshold:0.12});
|
||
|
||
$(function(){
|
||
$('.fade-in').each(function(){ io.observe(this); });
|
||
});
|
||
})(jQuery);
|
||
|
||
/* =========================
|
||
Lazy images and floor-load logic
|
||
========================= */
|
||
(function($){
|
||
const loaderIO = new IntersectionObserver((entries, obs) => {
|
||
entries.forEach(ent=>{
|
||
if(ent.isIntersecting){
|
||
const $el = $(ent.target);
|
||
|
||
// lazy images
|
||
if($el.hasClass('lazy-img')){
|
||
const src = $el.data('src');
|
||
if(src) $el.attr('src', src).removeAttr('data-src').removeClass('lazy-img');
|
||
obs.unobserve(ent.target);
|
||
}
|
||
|
||
// load growth stories and courses when their blocks appear
|
||
if($el.is('#storiesBlock')){ loadGrowth(); obs.unobserve(ent.target); }
|
||
if($el.is('#coursesBlock')){ loadCourses(); obs.unobserve(ent.target); }
|
||
}
|
||
});
|
||
},{root:null, threshold:0.15});
|
||
|
||
$(function(){
|
||
$('.lazy-img, #storiesBlock, #coursesBlock').each(function(){ loaderIO.observe(this); });
|
||
});
|
||
|
||
/* ========== Growth Stories ========== */
|
||
let growthLoaded=false;
|
||
function loadGrowth(){
|
||
if(growthLoaded) return;
|
||
growthLoaded = true;
|
||
|
||
|
||
}
|
||
|
||
/* ========== Courses ========== */
|
||
let coursesLoaded=false;
|
||
function loadCourses(){
|
||
if(coursesLoaded) return;
|
||
coursesLoaded=true;
|
||
|
||
const courses = [
|
||
{title:'Basics', thumb:'https://picsum.photos/id/1018/640/360', lessons:12},
|
||
{title:'Forex 101', thumb:'https://picsum.photos/id/1016/640/360', lessons:8},
|
||
{title:'Risk Management', thumb:'https://picsum.photos/id/1019/640/360', lessons:6},
|
||
{title:'Advanced Tactics', thumb:'https://picsum.photos/id/1022/640/360', lessons:10},
|
||
{title:'Live Sessions', thumb:'https://picsum.photos/id/1021/640/360', lessons:5},
|
||
{title:'Performance Review', thumb:'https://picsum.photos/id/1032/640/360', lessons:7}
|
||
];
|
||
|
||
const $grid = $('#courseGrid').empty();
|
||
courses.forEach(c=>{
|
||
const $card = $(`
|
||
<div class="course-card">
|
||
<img class="course-thumb" loading="lazy" src="${c.thumb}" alt="${c.title}">
|
||
<h5 style="margin-top:0.5rem">${c.title}</h5>
|
||
<p class="small-muted">Lessons: ${c.lessons}</p>
|
||
<div style="margin-top:0.75rem"><a class="btn btn-outline-light btn-sm" href="#">View</a></div>
|
||
</div>
|
||
`);
|
||
$grid.append($card);
|
||
});
|
||
}
|
||
|
||
window.loadGrowth = loadGrowth;
|
||
window.loadCourses = loadCourses;
|
||
|
||
})(jQuery);
|
||
|
||
/* =========================
|
||
Growth carousel: basic translateX carousel
|
||
autoplay + controls + pause on hover
|
||
========================= */
|
||
// function initGrowthCarousel(){
|
||
// const $wrap = $('#growthTrack');
|
||
// let idx = 0;
|
||
// let autoplay = true;
|
||
// let timer = null;
|
||
|
||
// function update(){
|
||
// const $items = $wrap.children();
|
||
// if(!$items.length) return;
|
||
// const w = $items.first().outerWidth(true);
|
||
// $wrap.css('transform', `translateX(${-idx * w}px)`);
|
||
// // update dots styling (if using growthDots)
|
||
// $('#growthDots button').removeClass('active');
|
||
// $('#growthDots button[data-i="'+idx+'"]').addClass('active');
|
||
// }
|
||
|
||
// function next(){
|
||
// idx = (idx + 1) % $wrap.children().length;
|
||
// update();
|
||
// }
|
||
// function prev(){
|
||
// idx = (idx - 1 + $wrap.children().length) % $wrap.children().length;
|
||
// update();
|
||
// }
|
||
|
||
// $('#growthNext').off('click').on('click', ()=>{ autoplay=false; next(); });
|
||
// $('#growthPrev').off('click').on('click', ()=>{ autoplay=false; prev(); });
|
||
// $('#growthDots').on('click','button', function(){ autoplay=false; idx = Number($(this).data('i')); update(); });
|
||
|
||
// function startLoop(){
|
||
// if(timer) clearInterval(timer);
|
||
// timer = setInterval(()=>{ if(autoplay) next(); }, 3500);
|
||
// }
|
||
// startLoop();
|
||
|
||
// $wrap.on('mouseenter touchstart', ()=> autoplay=false);
|
||
// $wrap.on('mouseleave touchend', ()=> autoplay=true);
|
||
// }
|
||
|
||
/* =========================
|
||
Video modal play: inject iframe
|
||
========================= */
|
||
(function($){
|
||
$('#playBtn').on('click', function(){
|
||
const vid = $('#videoPreview').data('video-id');
|
||
//const src = `https://www.youtube.com/embed/${vid}?autoplay=1&rel=0`;
|
||
const src = `http://192.168.1.175/Lark20251101-104552.mp4`;
|
||
$('#videoContainer').html(`<iframe src="${src}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%"></iframe>`);
|
||
$('#videoModal').modal('show');
|
||
});
|
||
|
||
$('#videoModal').on('hidden.bs.modal', function(){ $('#videoContainer').empty(); });
|
||
|
||
// fallback: ensure lazy imgs loaded if they still have data-src
|
||
$(function(){
|
||
$('.lazy-img').each(function(){
|
||
const $i = $(this);
|
||
if($i.attr('data-src')) $i.attr('src',$i.attr('data-src')).removeAttr('data-src');
|
||
});
|
||
});
|
||
})(jQuery);
|
||
|
||
/* =========================
|
||
initial reveal sequencing
|
||
========================= */
|
||
$(function(){
|
||
setTimeout(()=> $('#heroBlock').addClass('show'), 160);
|
||
setTimeout(()=> $('#videoPreview').addClass('show'), 420);
|
||
});
|
||
|
||
/* =========================
|
||
Smooth anchor scroll (if needed)
|
||
========================= */
|
||
$(document).on('click','a[href^="#"]', function(e){
|
||
const target = $($(this).attr('href'));
|
||
if(target.length){ e.preventDefault(); $('html,body').animate({scrollTop: target.offset().top - 24}, 600); }
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
/* ===========================================================
|
||
可复用 Carousel 类
|
||
=========================================================== */
|
||
class Carousel {
|
||
constructor(opts) {
|
||
this.container = document.querySelector(opts.container);
|
||
this.track = this.container.querySelector(".carousel-track");
|
||
this.items = [...this.track.children];
|
||
this.prevBtn = document.getElementById(opts.prev);
|
||
this.nextBtn = document.getElementById(opts.next);
|
||
this.dotsContainer = document.querySelector(opts.dots);
|
||
|
||
this.index = 0;
|
||
this.pageWidth = this.items[0].offsetWidth + 40; // 含 margin
|
||
|
||
this.setupDots();
|
||
this.update();
|
||
this.bindEvents();
|
||
}
|
||
|
||
setupDots() {
|
||
this.dotsContainer.innerHTML = "";
|
||
this.items.forEach((_, i) => {
|
||
const dot = document.createElement("div");
|
||
dot.className = "dot";
|
||
dot.addEventListener("click", () => this.goTo(i));
|
||
this.dotsContainer.appendChild(dot);
|
||
});
|
||
}
|
||
|
||
bindEvents() {
|
||
this.prevBtn.addEventListener("click", () => this.prev());
|
||
this.nextBtn.addEventListener("click", () => this.next());
|
||
window.addEventListener("resize", () => {
|
||
this.pageWidth = this.items[0].offsetWidth + 40;
|
||
this.update();
|
||
});
|
||
}
|
||
|
||
prev() {
|
||
this.index = Math.max(0, this.index - 1);
|
||
this.update();
|
||
}
|
||
|
||
next() {
|
||
this.index = Math.min(this.items.length - 1, this.index + 1);
|
||
this.update();
|
||
}
|
||
|
||
goTo(i) {
|
||
this.index = i;
|
||
this.update();
|
||
}
|
||
|
||
update() {
|
||
const centerOffset = (window.innerWidth / 2) - (this.pageWidth / 2);
|
||
let x = this.index * this.pageWidth * -1 + centerOffset;
|
||
|
||
if (this.index === 0) x = 0;
|
||
if (this.index === this.items.length - 1) {
|
||
x = (this.items.length - 1) * this.pageWidth * -1 + (window.innerWidth - this.pageWidth);
|
||
}
|
||
|
||
this.track.style.transform = `translateX(${x}px)`;
|
||
|
||
[...this.dotsContainer.children].forEach((dot, i) => {
|
||
dot.classList.toggle("active", i === this.index);
|
||
});
|
||
}
|
||
}
|
||
|
||
/* ===========================================================
|
||
Fade-in Observer（一次性触发）
|
||
=========================================================== */
|
||
function setupFadeInObserver(selector = ".carousel-item") {
|
||
const items = document.querySelectorAll(selector);
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries, obs) => {
|
||
entries.forEach(entry => {
|
||
// if (entry.isIntersecting) {
|
||
entry.target.classList.add("fade-in");
|
||
entry.target.classList.add("show");
|
||
obs.unobserve(entry.target);
|
||
// }
|
||
});
|
||
},
|
||
{
|
||
root: document.querySelector(".carousel-container-1"),
|
||
threshold: 0.5
|
||
}
|
||
);
|
||
|
||
items.forEach(item => observer.observe(item));
|
||
}
|
||
|
||
/* ===========================================================
|
||
初始化
|
||
=========================================================== */
|
||
window.addEventListener("DOMContentLoaded", () => {
|
||
// new Carousel({
|
||
// container: ".carousel-container-1",
|
||
// prev: "growthPrev",
|
||
// next: "growthNext",
|
||
// dots: ".dots"
|
||
// });
|
||
|
||
const carousel = new Carousel({
|
||
container: ".carousel-container-1",
|
||
prev: "growthPrev",
|
||
next: "growthNext",
|
||
dots: ".dots"
|
||
});
|
||
|
||
setTimeout(() => {
|
||
carousel.goTo(1);
|
||
}, 50);
|
||
|
||
|
||
|
||
setupFadeInObserver(".carousel-item");
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
|
||
$(function(){
|
||
|
||
const $track = $("#track");
|
||
const $viewport = $(".carousel-viewport");
|
||
const $indicators = $("#indicators");
|
||
const $btnPrev = $("#btnPrev");
|
||
const $btnNext = $("#btnNext");
|
||
|
||
// store original cards data (from DOM at load)
|
||
let $originalCards = $track.children(".carousel-card").toArray().map(el => $(el).clone(true));
|
||
let originalCount = $originalCards.length;
|
||
|
||
|
||
let visibleCount = getVisibleCount();
|
||
let index = 0; // 从0开始，不需要克隆卡片了
|
||
let animating = false;
|
||
let cardW = null;
|
||
let gap = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--card-gap')) || 20;
|
||
|
||
// 滑动相关变量
|
||
let isMobile = window.innerWidth <= 768;
|
||
let swipeStartTime = 0;
|
||
let swipeMinDistance = 50; // 最小滑动距离阈值
|
||
let swipeMinVelocity = 0.3; // 最小滑动速度（像素/毫秒）
|
||
|
||
function getVisibleCount(){
|
||
return window.innerWidth <= 768 ? 1 : 4;
|
||
}
|
||
|
||
function updateDeviceSettings() {
|
||
isMobile = window.innerWidth <= 768;
|
||
// 更新滑动参数
|
||
if (isMobile) {
|
||
swipeMinDistance = cardW * 0.2; // 移动端：滑动卡片宽度的20%
|
||
swipeMinVelocity = 0.3;
|
||
} else {
|
||
// PC端不使用触摸滑动，阈值设为极大值
|
||
swipeMinDistance = 9999; // 极大值，确保不会被触发
|
||
swipeMinVelocity = 9999;
|
||
}
|
||
}
|
||
|
||
function buildTrack(){
|
||
// empty track and indicators
|
||
$track.empty();
|
||
$indicators.empty();
|
||
|
||
visibleCount = getVisibleCount();
|
||
|
||
// 不再添加克隆卡片，只显示原始卡片
|
||
$originalCards.forEach($el => $track.append($el.clone(true)));
|
||
|
||
// build indicators — one per original card
|
||
|
||
console.log(originalCount);
|
||
for(let i=0;i<originalCount-visibleCount;i++){
|
||
console.log(i);
|
||
$indicators.append(`<div class="ind" data-i="${i}"></div>`);
|
||
}
|
||
|
||
// set starting index to 0
|
||
index = 0;
|
||
|
||
// compute cardW (outerWidth including gap)
|
||
cardW = $(".carousel-card").outerWidth(true);
|
||
|
||
// 更新设备设置
|
||
updateDeviceSettings();
|
||
|
||
// position track at initial
|
||
$track.css({ transform: `translateX(${-index * cardW}px)` , transition: 'none' });
|
||
|
||
// small delay to ensure no animation on first paint
|
||
setTimeout(()=> $track.css('transition','transform .45s ease'), 20);
|
||
|
||
updateDots();
|
||
updateButtonState(); // 更新按钮状态
|
||
}
|
||
|
||
function updateDots(){
|
||
$indicators.find(".ind").removeClass("active");
|
||
$indicators.find(`.ind[data-i="${index}"]`).addClass("active");
|
||
}
|
||
|
||
function updateButtonState() {
|
||
// 更新按钮状态：第一张时禁用prev按钮，最后一张时禁用next按钮
|
||
if (index <= 0) {
|
||
$btnPrev.addClass("disabled").prop("disabled", true);
|
||
} else {
|
||
$btnPrev.removeClass("disabled").prop("disabled", false);
|
||
}
|
||
|
||
if (index >= originalCount - visibleCount) {
|
||
$btnNext.addClass("disabled").prop("disabled", true);
|
||
} else {
|
||
$btnNext.removeClass("disabled").prop("disabled", false);
|
||
}
|
||
}
|
||
|
||
function slideTo(idx, animate=true){
|
||
if(animating) return;
|
||
|
||
// 检查边界
|
||
const maxIndex = originalCount - visibleCount;
|
||
const minIndex = 0;
|
||
|
||
// 限制索引范围
|
||
let targetIndex = Math.max(minIndex, Math.min(idx, maxIndex));
|
||
|
||
// 如果已经是边界，不执行动画
|
||
if (targetIndex === index && animate) return;
|
||
|
||
animating = true;
|
||
$track.css('transition', animate ? 'transform .45s ease' : 'none');
|
||
$track.css('transform', `translateX(${-targetIndex * cardW}px)`);
|
||
index = targetIndex;
|
||
|
||
// 更新状态
|
||
setTimeout(()=>{
|
||
updateDots();
|
||
updateButtonState();
|
||
animating = false;
|
||
}, animate ? 500 : 20);
|
||
}
|
||
|
||
function next(){
|
||
// 检查是否到达最后
|
||
if (index >= originalCount - visibleCount) return;
|
||
slideTo(index + 1, true);
|
||
}
|
||
|
||
function prev(){
|
||
// 检查是否到达最前
|
||
if (index <= 0) return;
|
||
slideTo(index - 1, true);
|
||
}
|
||
|
||
// dots click
|
||
$indicators.on('click', '.ind', function(){
|
||
const target = Number($(this).attr('data-i')); // 0..originalCount-1
|
||
slideTo(target, true);
|
||
});
|
||
|
||
// arrows - 添加检查
|
||
$btnNext.on('click', function(){
|
||
if ($(this).hasClass("disabled")) return;
|
||
next();
|
||
});
|
||
|
||
$btnPrev.on('click', function(){
|
||
if ($(this).hasClass("disabled")) return;
|
||
prev();
|
||
});
|
||
|
||
/* ========= 移动端触摸滑动效果 ========= */
|
||
// 只在移动端绑定触摸事件
|
||
if (window.innerWidth <= 768) {
|
||
initMobileTouchEvents();
|
||
}
|
||
|
||
function initMobileTouchEvents() {
|
||
let pointerDown = false;
|
||
let startX = 0;
|
||
let startTranslate = 0;
|
||
let moved = 0;
|
||
let swipeEndTime = 0;
|
||
let velocity = 0;
|
||
let currentExactPosition = 0;
|
||
let maxTranslate = 0;
|
||
let minTranslate = 0;
|
||
|
||
// helper get current translateX (number)
|
||
function currentTranslate(){
|
||
const m = $track.css('transform');
|
||
if(!m || m === 'none') return 0;
|
||
const arr = m.split(',');
|
||
return parseFloat(arr[arr.length-1]);
|
||
}
|
||
|
||
// pointer start (仅触摸)
|
||
$track.on('touchstart', function(e){
|
||
if(animating) return;
|
||
pointerDown = true;
|
||
startX = e.originalEvent.touches[0].clientX;
|
||
startTranslate = currentTranslate();
|
||
currentExactPosition = startTranslate;
|
||
moved = 0;
|
||
velocity = 0;
|
||
swipeStartTime = Date.now();
|
||
|
||
// 计算边界
|
||
maxTranslate = 0; // 最左边，对应第一张
|
||
minTranslate = -(originalCount - visibleCount) * cardW; // 最右边，对应最后一张
|
||
|
||
// disable transition while dragging
|
||
$track.css('transition','none');
|
||
$('.carousel-card').addClass('grabbing');
|
||
e.preventDefault();
|
||
});
|
||
|
||
// 移动事件
|
||
$(window).on('touchmove', function(e){
|
||
if(!pointerDown) return;
|
||
const clientX = e.originalEvent.touches[0].clientX;
|
||
const dx = clientX - startX;
|
||
moved = dx;
|
||
|
||
// 计算精确位置，并限制在边界内
|
||
let targetPosition = startTranslate + dx;
|
||
|
||
// 添加边界阻尼效果
|
||
if (targetPosition > maxTranslate) {
|
||
// 超出左边边界，添加阻尼效果
|
||
const overshoot = targetPosition - maxTranslate;
|
||
targetPosition = maxTranslate + overshoot * 0.3;
|
||
} else if (targetPosition < minTranslate) {
|
||
// 超出右边边界，添加阻尼效果
|
||
const overshoot = targetPosition - minTranslate;
|
||
targetPosition = minTranslate + overshoot * 0.3;
|
||
}
|
||
|
||
currentExactPosition = targetPosition;
|
||
|
||
// 应用移动效果
|
||
$track.css('transform', `translateX(${currentExactPosition}px)`);
|
||
});
|
||
|
||
// 结束事件
|
||
$(window).on('touchend touchcancel', function(e){
|
||
if(!pointerDown) return;
|
||
|
||
swipeEndTime = Date.now();
|
||
const swipeDuration = swipeEndTime - swipeStartTime;
|
||
|
||
// 计算滑动速度
|
||
if (swipeDuration > 0) {
|
||
velocity = Math.abs(moved) / swipeDuration;
|
||
}
|
||
|
||
pointerDown = false;
|
||
$('.carousel-card').removeClass('grabbing');
|
||
|
||
// 检查边界
|
||
const atLeftBoundary = currentExactPosition >= maxTranslate - 10;
|
||
const atRightBoundary = currentExactPosition <= minTranslate + 10;
|
||
|
||
if (atLeftBoundary || atRightBoundary) {
|
||
// 如果在边界附近，直接回到边界
|
||
if (atLeftBoundary) {
|
||
slideTo(0, true);
|
||
} else {
|
||
slideTo(originalCount - visibleCount, true);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 移动端滑动结束处理
|
||
handleMobileSwipeEnd();
|
||
});
|
||
}
|
||
|
||
// 移动端滑动结束处理
|
||
function handleMobileSwipeEnd() {
|
||
const absMoved = Math.abs(moved);
|
||
const swipeDirection = moved < 0 ? 1 : -1; // 1: 向左滑动, -1: 向右滑动
|
||
|
||
let shouldSwitch = false;
|
||
|
||
// 判断是否应该切换（基于距离或速度）
|
||
// 移动端：每次只滑动1张，需要明显的滑动距离
|
||
if (absMoved > swipeMinDistance) {
|
||
shouldSwitch = true;
|
||
} else if (velocity > swipeMinVelocity && absMoved > swipeMinDistance * 0.5) {
|
||
shouldSwitch = true;
|
||
}
|
||
|
||
if (shouldSwitch) {
|
||
// 移动端：每次只滑动1张图片
|
||
if (swipeDirection === 1) {
|
||
// 向左滑动，显示下一张（只滑动1张）
|
||
next();
|
||
} else if (swipeDirection === -1) {
|
||
// 向右滑动，显示上一张（只滑动1张）
|
||
prev();
|
||
}
|
||
} else {
|
||
// 滑动距离不足，停留在当前位置
|
||
slideTo(index, true);
|
||
}
|
||
}
|
||
|
||
/* ========= PC端鼠标拖动效果 ========= */
|
||
// PC端只保留鼠标点击按钮功能，不绑定拖动事件
|
||
|
||
/* ========== resize handling: rebuild if visibleCount changes ========== */
|
||
let resizeTimer = null;
|
||
$(window).on('resize', function(){
|
||
clearTimeout(resizeTimer);
|
||
resizeTimer = setTimeout(function(){
|
||
const newVisible = getVisibleCount();
|
||
|
||
// 移除旧的触摸事件
|
||
$track.off('touchstart');
|
||
$(window).off('touchmove touchend touchcancel');
|
||
|
||
if(newVisible !== visibleCount){
|
||
// rebuild track
|
||
// restore original cards array from clones
|
||
$track.empty();
|
||
$originalCards.forEach($el => $track.append($el.clone(true)));
|
||
// reassign originalCards (fresh clones)
|
||
$originalCards = $track.children(".carousel-card").toArray().map(el => $(el).clone(true));
|
||
originalCount = $originalCards.length;
|
||
buildTrack();
|
||
} else {
|
||
// just recompute cardW and set immediate position
|
||
cardW = $(".carousel-card").outerWidth(true);
|
||
updateDeviceSettings(); // 更新设备设置
|
||
$track.css('transition','none');
|
||
$track.css('transform', `translateX(${-index * cardW}px)`);
|
||
setTimeout(()=> $track.css('transition','transform .45s ease'), 20);
|
||
}
|
||
|
||
// 根据新的屏幕大小重新绑定触摸事件
|
||
if (window.innerWidth <= 768) {
|
||
initMobileTouchEvents();
|
||
}
|
||
}, 120);
|
||
});
|
||
|
||
/**************** INIT ****************/
|
||
let $initial = $track.children(".carousel-card").toArray().map(el=>$(el).clone(true));
|
||
$originalCards = $initial.slice(); // store original clones
|
||
originalCount = $originalCards.length;
|
||
buildTrack();
|
||
|
||
});
|
||
|
||
</script>
|
||
|
||
<script>
|
||
|
||
const defaultConfigProgram = {
|
||
tab_background: "#1a1a1a",
|
||
tab_hover_bg: "#ffffff",
|
||
table_header_bg: "#2c3e50",
|
||
table_row_hover: "#f8f9fa",
|
||
text_color: "#495057",
|
||
font_family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
|
||
font_size: 14,
|
||
tab_1: "1 STEP",
|
||
tab_2: "2 STEP",
|
||
tab_3: "3 STEP",
|
||
tab_4: "INSTANT",
|
||
header_1: "$10K",
|
||
header_2: "$25K",
|
||
header_3: "$50K",
|
||
header_4: "$100K",
|
||
header_5: "$200K"
|
||
};
|
||
|
||
// Account sizes for each tab
|
||
const accountSizes = {
|
||
'1step': ['$10K', '$25K', '$50K', '$100K', '$200K'],
|
||
'2step': ['$6K', '$12k', '$30k', '$60k', '$120k'],
|
||
'3step': ['$7.5K', '$1.5K', '$3.5K', '$7.5K', '$150K'],
|
||
'instant': ['$10K', '$20K', '$50K', '$100K', '$200K']
|
||
};
|
||
|
||
// Data for different tabs
|
||
const tableData = {
|
||
'1step': {
|
||
'Challenge Fee': ['$49', '$99', '$249', '$499', '$999'],
|
||
'Daily Drawdown': ['5%', '5%', '5%', '5%', '5%'],
|
||
'Max Drawdown': ['10%', '10%', '10%', '10%', '10%'],
|
||
'Profit Target': ['8%', '8%', '8%', '8%', '8%'],
|
||
'Profit Split': ['80%', '80%', '80%', '80%', '80%'],
|
||
'Payout Period': ['14 days', '14 days', '14 days', '14 days', '14 days'],
|
||
'News Trading': ['Allowed', 'Allowed', 'Allowed', 'Allowed', 'Allowed'],
|
||
'Add-ons': ['Available', 'Available', 'Available', 'Available', 'Available']
|
||
},
|
||
'2step': {
|
||
'Challenge Fee': ['$59', '$119', '$299', '$599', '$1,199'],
|
||
'Daily Drawdown': ['5%', '5%', '5%', '5%', '5%'],
|
||
'Max Drawdown': ['10%', '10%', '10%', '10%', '10%'],
|
||
'Profit Target': ['8% + 5%', '8% + 5%', '8% + 5%', '8% + 5%', '8% + 5%'],
|
||
'Profit Split': ['80%', '80%', '80%', '80%', '80%'],
|
||
'Payout Period': ['14 days', '14 days', '14 days', '14 days', '14 days'],
|
||
'News Trading': ['Allowed', 'Allowed', 'Allowed', 'Allowed', 'Allowed'],
|
||
'Add-ons': ['Available', 'Available', 'Available', 'Available', 'Available']
|
||
},
|
||
'3step': {
|
||
'Challenge Fee': ['$69', '$139', '$349', '$699', '$1,399'],
|
||
'Daily Drawdown': ['5%', '5%', '5%', '5%', '5%'],
|
||
'Max Drawdown': ['10%', '10%', '10%', '10%', '10%'],
|
||
'Profit Target': ['6% + 5% + 4%', '6% + 5% + 4%', '6% + 5% + 4%', '6% + 5% + 4%', '6% + 5% + 4%'],
|
||
'Profit Split': ['80%', '80%', '80%', '80%', '80%'],
|
||
'Payout Period': ['14 days', '14 days', '14 days', '14 days', '14 days'],
|
||
'News Trading': ['Allowed', 'Allowed', 'Allowed', 'Allowed', 'Allowed'],
|
||
'Add-ons': ['Available', 'Available', 'Available', 'Available', 'Available']
|
||
},
|
||
'instant': {
|
||
'Challenge Fee': ['$149', '$299', '$749', '$1,499', '$2,999'],
|
||
'Daily Drawdown': ['5%', '5%', '5%', '5%', '5%'],
|
||
'Max Drawdown': ['10%', '10%', '10%', '10%', '10%'],
|
||
'Profit Target': ['None', 'None', 'None', 'None', 'None'],
|
||
'Profit Split': ['80%', '80%', '80%', '80%', '80%'],
|
||
'Payout Period': ['Instant', 'Instant', 'Instant', 'Instant', 'Instant'],
|
||
'News Trading': ['Allowed', 'Allowed', 'Allowed', 'Allowed', 'Allowed'],
|
||
'Add-ons': ['Available', 'Available', 'Available', 'Available', 'Available']
|
||
}
|
||
};
|
||
|
||
const rowDetails = {
|
||
'Challenge Fee': 'One-time fee to participate in the trading challenge program.',
|
||
'Daily Drawdown': 'Maximum percentage loss allowed in a single trading day based on starting balance.',
|
||
'Max Drawdown': 'Maximum total loss allowed from the initial account balance before account is violated.',
|
||
'Profit Target': 'The percentage gain required to successfully complete each phase of the challenge.',
|
||
'Profit Split': 'Percentage of profits you keep. The firm keeps the remainder.',
|
||
'Payout Period': 'Minimum time required before you can request a withdrawal of profits.',
|
||
'News Trading': 'Whether trading during major economic news releases is permitted.',
|
||
'Add-ons': 'Optional features available for purchase to enhance your challenge experience.'
|
||
};
|
||
|
||
const rowIcons = {
|
||
'Challenge Fee': '<img src="../assets/images/backgrounds/svg/Component 26.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Daily Drawdown': '<img src="../assets/images/backgrounds/svg/Component 27.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Max Drawdown': '<img src="../assets/images/backgrounds/svg/Component 28.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Profit Target': '<img src="../assets/images/backgrounds/svg/Component 29.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Profit Split': '<img src="../assets/images/backgrounds/svg/Component 30.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Payout Period': '<img src="../assets/images/backgrounds/svg/Component 31.svg" alt="Funded Trading" class="chall-icon">',
|
||
'News Trading': '<img src="../assets/images/backgrounds/svg/Component 32.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Add-ons': '',
|
||
};
|
||
|
||
let currentTab = '1step';
|
||
let expandedRows = new Set();
|
||
|
||
$(document).ready(function() {
|
||
// 初始化表格
|
||
renderTable();
|
||
|
||
// 绑定标签页切换事件
|
||
$('.tab-button').on('click', function() {
|
||
$('.tab-button').removeClass('active');
|
||
$(this).addClass('active');
|
||
currentTab = $(this).data('tab');
|
||
expandedRows.clear();
|
||
renderTable();
|
||
});
|
||
|
||
// 初始化SDK
|
||
if (window.elementSdk) {
|
||
window.elementSdk.init({
|
||
defaultConfigProgram,
|
||
onConfigChange,
|
||
mapToCapabilities,
|
||
mapToEditPanelValues
|
||
});
|
||
}
|
||
});
|
||
|
||
|
||
function renderTable() {
|
||
const $tbody = $('#tableBody');
|
||
$tbody.empty();
|
||
|
||
const data = tableData[currentTab];
|
||
const sizes = accountSizes[currentTab];
|
||
|
||
// 渲染账户大小行
|
||
const $accountRow = $('<tr data-row="account"></tr>');
|
||
const $accountHeaderCell = $('<td></td>');
|
||
|
||
$accountHeaderCell.html(`
|
||
<div class="row-header">
|
||
<span style="margin-left:15px;display: flex; align-items: center;">
|
||
<span class="count-size">Account Size</span>
|
||
</span>
|
||
</div>
|
||
`);
|
||
|
||
$accountRow.append($accountHeaderCell);
|
||
|
||
sizes.forEach((size) => {
|
||
const $cell = $('<td></td>');
|
||
$cell.html(`
|
||
<div style="text-align: center;">
|
||
<div style="font-weight: 600; margin-bottom: 0.5375rem;font-size:1.875rem;">${size}</div>
|
||
<button class="challenge-button">Start Challenge</button>
|
||
</div>
|
||
`);
|
||
$accountRow.append($cell);
|
||
});
|
||
|
||
$tbody.append($accountRow);
|
||
|
||
// 渲染其他数据行
|
||
Object.keys(data).forEach((rowKey, index) => {
|
||
// 主行
|
||
const $mainRow = $('<tr class="show-tr" data-toggle="collapse" data-target="#row'+index+'"></tr>');
|
||
$mainRow.data('row', index);
|
||
|
||
const $headerCell = $('<td></td>');
|
||
$headerCell.html(`
|
||
<div class="row-header">
|
||
<span style="display: flex; align-items: center;">
|
||
<span class="row-icon">${rowIcons[rowKey] || '📋'}</span>
|
||
<span>${rowKey}</span>
|
||
</span>
|
||
<span class="expand-arrow">
|
||
<img src="../assets/images/backgrounds/arraw-icon.png" alt="Funded Trading" class="arraw-icon-table">
|
||
</span>
|
||
</div>
|
||
`);
|
||
|
||
$mainRow.append($headerCell);
|
||
|
||
data[rowKey].forEach((value) => {
|
||
const $cell = $('<td></td>');
|
||
$cell.text(value);
|
||
$cell.css('text-align', 'center');
|
||
$mainRow.append($cell);
|
||
});
|
||
|
||
$tbody.append($mainRow);
|
||
|
||
// 详情行
|
||
const $detailRow = $('<tr class="detail-row collapse" id="row'+index+'" data-parent="#accordion"></tr>');
|
||
$detailRow.data('detail', index);
|
||
|
||
|
||
const $detailCell = $('<td class="detail-cell"></td>');
|
||
$detailCell.attr('colspan', 6);
|
||
$detailCell.text(rowDetails[rowKey] || 'Additional information about this feature.');
|
||
|
||
$detailRow.append($detailCell);
|
||
$tbody.append($detailRow);
|
||
});
|
||
|
||
// 绑定行点击事件
|
||
bindRowEvents();
|
||
|
||
// 绑定开始挑战按钮事件
|
||
$('.challenge-button').on('click', function(e) {
|
||
e.stopPropagation();
|
||
const $accountDiv = $(this).closest('td').find('div[style*="font-size:1.875rem"]');
|
||
const accountSize = $accountDiv.text();
|
||
startChallenge(accountSize);
|
||
});
|
||
|
||
// 恢复已展开的行状态
|
||
restoreExpandedRows();
|
||
}
|
||
|
||
function bindRowEvents() {
|
||
$('tr.show-tr').off('click').on('click', function(e) {
|
||
// 防止点击按钮时触发行展开
|
||
if ($(e.target).closest('.challenge-button').length > 0) {
|
||
return;
|
||
}
|
||
|
||
const index = $(this).data('row');
|
||
const $detailRow = $(`tr.detail-row[data-detail="${index}"]`);
|
||
const $expandArrow = $(this).find('.expand-arrow');
|
||
|
||
let nextRow = $(this).next('.detail-row');
|
||
if(nextRow.hasClass('show')){
|
||
$expandArrow.find('.arraw-icon-table').css('transform', 'rotate(0deg)');
|
||
}else{
|
||
$expandArrow.find('.arraw-icon-table').css('transform', 'rotate(180deg)');
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
|
||
|
||
function restoreExpandedRows() {
|
||
expandedRows.forEach(index => {
|
||
const $detailRow = $(`tr.detail-row[data-detail="${index}"]`);
|
||
const $expandArrow = $(`tr[data-row="${index}"] .expand-arrow`);
|
||
|
||
if ($detailRow.length && $expandArrow.length) {
|
||
$detailRow.show();
|
||
$expandArrow.find('.arraw-icon-table').css('transform', 'rotate(180deg)');
|
||
}
|
||
});
|
||
}
|
||
|
||
function startChallenge(accountSize) {
|
||
// 创建模态框
|
||
const $overlay = $('<div class="challenge-modal-overlay"></div>');
|
||
const $modal = $('<div class="challenge-modal"></div>');
|
||
|
||
$modal.html(`
|
||
<h3>Challenge Selected</h3>
|
||
<p>You selected the ${accountSize} ${currentTab.toUpperCase()} challenge!</p>
|
||
<button class="modal-ok-btn">OK</button>
|
||
`);
|
||
|
||
$overlay.append($modal);
|
||
$('body').append($overlay);
|
||
|
||
// 淡入动画
|
||
$overlay.hide().fadeIn(300);
|
||
|
||
// 绑定关闭事件
|
||
$overlay.on('click', function(e) {
|
||
if ($(e.target).hasClass('challenge-modal-overlay') || $(e.target).hasClass('modal-ok-btn')) {
|
||
$overlay.fadeOut(300, function() {
|
||
$(this).remove();
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// SDK相关函数保持不变
|
||
async function onConfigChange(config) {
|
||
const fontFamily = config.font_family || defaultConfigProgram.font_family;
|
||
const fontSize = config.font_size || defaultConfigProgram.font_size;
|
||
const tabBg = config.tab_background || defaultConfigProgram.tab_background;
|
||
const tabHoverBg = config.tab_hover_bg || defaultConfigProgram.tab_hover_bg;
|
||
const headerBg = config.table_header_bg || defaultConfigProgram.table_header_bg;
|
||
const textColor = config.text_color || defaultConfigProgram.text_color;
|
||
|
||
$('body').css('font-family', `${fontFamily}, 'Segoe UI', Tahoma, sans-serif`);
|
||
|
||
// 更新标签页文本
|
||
$('#tab1').text(config.tab_1 || defaultConfigProgram.tab_1);
|
||
$('#tab2').text(config.tab_2 || defaultConfigProgram.tab_2);
|
||
$('#tab3').text(config.tab_3 || defaultConfigProgram.tab_3);
|
||
$('#tab4').text(config.tab_4 || defaultConfigProgram.tab_4);
|
||
|
||
// 应用颜色
|
||
$('.tab-button').not('.active').css('background', tabBg);
|
||
|
||
$('thead').css('background', headerBg);
|
||
|
||
// 更新字体大小
|
||
$('th, td').css({
|
||
'font-size': `${fontSize}px`,
|
||
'font-family': `${fontFamily}, 'Segoe UI', Tahoma, sans-serif`
|
||
});
|
||
|
||
$('td').css('color', textColor);
|
||
}
|
||
|
||
function mapToCapabilities(config) {
|
||
return {
|
||
recolorables: [
|
||
{
|
||
get: () => config.tab_background || defaultConfigProgram.tab_background,
|
||
set: (value) => {
|
||
config.tab_background = value;
|
||
window.elementSdk.setConfig({ tab_background: value });
|
||
}
|
||
},
|
||
{
|
||
get: () => config.tab_hover_bg || defaultConfigProgram.tab_hover_bg,
|
||
set: (value) => {
|
||
config.tab_hover_bg = value;
|
||
window.elementSdk.setConfig({ tab_hover_bg: value });
|
||
}
|
||
},
|
||
{
|
||
get: () => config.table_header_bg || defaultConfigProgram.table_header_bg,
|
||
set: (value) => {
|
||
config.table_header_bg = value;
|
||
window.elementSdk.setConfig({ table_header_bg: value });
|
||
}
|
||
},
|
||
{
|
||
get: () => config.table_row_hover || defaultConfigProgram.table_row_hover,
|
||
set: (value) => {
|
||
config.table_row_hover = value;
|
||
window.elementSdk.setConfig({ table_row_hover: value });
|
||
}
|
||
},
|
||
{
|
||
get: () => config.text_color || defaultConfigProgram.text_color,
|
||
set: (value) => {
|
||
config.text_color = value;
|
||
window.elementSdk.setConfig({ text_color: value });
|
||
}
|
||
}
|
||
],
|
||
borderables: [],
|
||
fontEditable: {
|
||
get: () => config.font_family || defaultConfigProgram.font_family,
|
||
set: (value) => {
|
||
config.font_family = value;
|
||
window.elementSdk.setConfig({ font_family: value });
|
||
}
|
||
},
|
||
fontSizeable: {
|
||
get: () => config.font_size || defaultConfigProgram.font_size,
|
||
set: (value) => {
|
||
config.font_size = value;
|
||
window.elementSdk.setConfig({ font_size: value });
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
function mapToEditPanelValues(config) {
|
||
return new Map([
|
||
["tab_1", config.tab_1 || defaultConfigProgram.tab_1],
|
||
["tab_2", config.tab_2 || defaultConfigProgram.tab_2],
|
||
["tab_3", config.tab_3 || defaultConfigProgram.tab_3],
|
||
["tab_4", config.tab_4 || defaultConfigProgram.tab_4],
|
||
["header_1", config.header_1 || defaultConfigProgram.header_1],
|
||
["header_2", config.header_2 || defaultConfigProgram.header_2],
|
||
["header_3", config.header_3 || defaultConfigProgram.header_3],
|
||
["header_4", config.header_4 || defaultConfigProgram.header_4],
|
||
["header_5", config.header_5 || defaultConfigProgram.header_5]
|
||
]);
|
||
}
|
||
|
||
</script>
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
// FAQ Accordion
|
||
$('.faq-header').on('click', function() {
|
||
var $item = $(this).closest('.faq-item');
|
||
var $body = $item.find('.faq-body');
|
||
var isActive = $item.hasClass('active');
|
||
|
||
// Close all items
|
||
$('.faq-item').removeClass('active');
|
||
$('.faq-body').css('max-height', '0').css('opacity', '0');
|
||
|
||
// Open clicked item if it wasn't active
|
||
if (!isActive) {
|
||
$item.addClass('active');
|
||
$body.css('max-height', '500px').css('opacity', '1');
|
||
}
|
||
});
|
||
|
||
// Feedback Carousel Controls
|
||
$('#feedbackPrev').on('click', function() {
|
||
$('#feedbackCarousel').carousel('prev');
|
||
updateCarouselButtons();
|
||
});
|
||
|
||
$('#feedbackNext').on('click', function() {
|
||
$('#feedbackCarousel').carousel('next');
|
||
updateCarouselButtons();
|
||
});
|
||
|
||
$('#feedbackCarousel').on('slid.bs.carousel', function() {
|
||
updateCarouselButtons();
|
||
});
|
||
|
||
function updateCarouselButtons() {
|
||
var $carousel = $('#feedbackCarousel');
|
||
var activeIndex = $carousel.find('.carousel-item.active').index();
|
||
var totalItems = $carousel.find('.carousel-item').length;
|
||
|
||
$('#feedbackPrev').prop('disabled', activeIndex === 0);
|
||
$('#feedbackNext').prop('disabled', activeIndex === totalItems - 1);
|
||
}
|
||
|
||
// Initialize carousel button states
|
||
updateCarouselButtons();
|
||
|
||
// Smooth scroll for anchor links
|
||
|
||
});
|
||
</script>
|
||
|
||
</html>
|