steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
1767 lines
64 KiB
HTML
1767 lines
64 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>Payout 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="payout">
|
||
<!-- banner start -->
|
||
<div class="academy-block-1">
|
||
<div class="bn_bg_layer"></div>
|
||
<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">Fast Payouts. </span>
|
||
<span class="line2"><span class="text-primary-orange">Real</span> <img src="../assets/images/backgrounds/icon/payout-icon-1.png" class="heading-icon floating-img"> <span class="text-primary-orange">Rewards.</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 fade-in">
|
||
<div class="banner-desc">
|
||
Fast, Transparent, and <span class="text-primary-orange">Hassle-free.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Buttons -->
|
||
<div class="hero-buttons center-buttons fade-in">
|
||
<a href="#" class="btn btn-default">Start Earning NOW</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- 第二楼层 -->
|
||
<section class="key-states-section">
|
||
<div class="vignette"></div>
|
||
<div class="content-wrapper"><!-- 标题行 -->
|
||
<div class="header-row">
|
||
<div class="title-left">
|
||
<h2 class="fade-in"><span class="key-word">Key</span> <span class="states-word">States</span></h2>
|
||
</div>
|
||
<div class="description-right fade-in">
|
||
<p class="fade-in">See how fast and <span class="highlight">flexible payouts</span> can be, from average processing times to profit-share percentages, all at a single glance.</p>
|
||
</div>
|
||
</div><!-- 数据卡片 -->
|
||
<div class="stats-card">
|
||
<div class="stats-row"><!-- 第1列 -->
|
||
<div class="stat-item">
|
||
<div class="stat-value fade-in">
|
||
<span class="stat-value-large">$20 MILLION+</span>
|
||
<!-- <span class="stat-value-unit"></span> -->
|
||
</div>
|
||
<div class="stat-sub fade-in">
|
||
<!-- Paid to Traders<br> -->
|
||
Paid to Traders Worldwide.
|
||
</div>
|
||
</div><!-- 第2列 -->
|
||
<div class="stat-item">
|
||
<div class="stat-value fade-in">
|
||
50,000+
|
||
</div>
|
||
<div class="stat-sub fade-in">
|
||
Traders
|
||
</div>
|
||
</div><!-- 第3列 -->
|
||
<div class="stat-item">
|
||
<div class="stat-value fade-in">
|
||
24H
|
||
</div>
|
||
<div class="stat-sub fade-in">
|
||
Average Processing Time
|
||
</div>
|
||
</div><!-- 第4列 -->
|
||
<div class="stat-item">
|
||
<div class="stat-value fade-in">
|
||
6,964
|
||
</div>
|
||
<div class="stat-sub fade-in">
|
||
Successful Payouts.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 第二楼层 end-->
|
||
</div>
|
||
|
||
|
||
|
||
<!-- 第三楼层 start-->
|
||
<section id="section-3" class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="mb-md text-center">
|
||
<h1 class="heading h1 fade-in">What You'll</h1>
|
||
<h1 class="heading h1 fade-in"> <span class="text-orange">Experience</span></h1>
|
||
</div>
|
||
<div class="row text-center card-style-2">
|
||
<div class="col-md-3 mb-3">
|
||
<div class="card h-100 custom-rounded fade-in">
|
||
<div class="mb-3 ustify-content-center align-items-center fade-in"><i class="icon-box w-1"></i></div>
|
||
<p class="fade-in">Fast & reliable payouts, no hassle, no waiting around.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<div class="card h-100 custom-rounded fade-in">
|
||
<div class="mb-3 fade-in"><i class="icon-box w-2"></i></div>
|
||
<p class="fade-in">Multiple payout options, pick the one that works best for you.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<div class="card h-100 custom-rounded fade-in">
|
||
<div class="mb-3 fade-in"><i class="icon-box w-3"></i></div>
|
||
<p class="fade-in">Transparent policies, no hidden fees or surprises.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<div class="card h-100 custom-rounded fade-in">
|
||
<div class="mb-3 fade-in"><i class="icon-box w-4"></i></div>
|
||
<p class="fade-in">Support you can count on, we’re here every step of the way. </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 第三楼层 end-->
|
||
|
||
|
||
<!-- 第四楼层 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 d-flex flex-wrap align-items-center justify-content-center fade-in"><span class="text-orange mr-2">Payout</span>
|
||
<div class="title-icon-box">
|
||
<img src="../assets/images/backgrounds/icon/payout-icon.png" alt="Funded Trading" class="floating-img">
|
||
</div>
|
||
<span style="color: var(--white-primary);">Process</span></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">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">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">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">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 btn-contain"><button class="btn btn-default btn-lg rounded-lg px-5 py-3">Start Challenge</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 第四楼层 end -->
|
||
|
||
|
||
<!-- 第五楼层 Start -->
|
||
|
||
<style>
|
||
.aifo-profit-calculator{
|
||
position:relative;
|
||
overflow:hidden;
|
||
padding:72px 0;
|
||
color:#fff;
|
||
background:
|
||
radial-gradient(780px 520px at 25% 55%, rgba(249,135,21,.55), rgba(0,0,0,0) 62%),
|
||
radial-gradient(640px 420px at 78% 52%, rgba(249,135,21,.18), rgba(0,0,0,0) 68%),
|
||
linear-gradient(180deg, #060606 0%, #0a0a0a 55%, #060606 100%);
|
||
}
|
||
|
||
.aifo-wrap{
|
||
width:100%;
|
||
max-width:1400px;
|
||
margin:0 auto;
|
||
padding:0 52px;
|
||
box-sizing:border-box;
|
||
}
|
||
|
||
.aifo-grid{
|
||
display:flex;
|
||
flex-wrap:nowrap;
|
||
gap:56px;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
}
|
||
.aifo-left{flex:0 0 44%; min-width:360px;}
|
||
.aifo-right{
|
||
flex:0 0 56%;
|
||
min-width:560px;
|
||
padding-right:26px;
|
||
box-sizing:border-box;
|
||
}
|
||
|
||
.aifo-title{
|
||
margin:0 0 18px;
|
||
font-weight:900;
|
||
letter-spacing:-.02em;
|
||
line-height:1.04;
|
||
font-size:72px;
|
||
color:#fff;
|
||
}
|
||
.aifo-accent{color:#F98715;}
|
||
.aifo-desc{
|
||
margin:0 0 28px;
|
||
max-width:480px;
|
||
font-size:14px;
|
||
line-height:1.75;
|
||
color:rgba(255,255,255,.78);
|
||
}
|
||
.aifo-btn{
|
||
display:inline-flex; align-items:center; justify-content:center;
|
||
height:56px; padding:0 34px;
|
||
border-radius:6px;
|
||
background:#F98715;
|
||
color:#fff;
|
||
font-weight:800;
|
||
text-decoration:none;
|
||
box-shadow:0 16px 40px rgba(249,135,21,.28);
|
||
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
|
||
}
|
||
.aifo-btn:hover{
|
||
transform:translateY(-1px);
|
||
filter:brightness(1.03);
|
||
box-shadow:0 20px 46px rgba(249,135,21,.34);
|
||
color:#fff; text-decoration:none;
|
||
}
|
||
|
||
.aifo-card{
|
||
|
||
}
|
||
|
||
.aifo-block{margin:0 0 44px;}
|
||
.aifo-block:last-of-type{margin-bottom:26px;}
|
||
|
||
.aifo-h{
|
||
margin:0 0 18px;
|
||
font-size:22px;
|
||
font-weight:900;
|
||
letter-spacing:-.01em;
|
||
color:#fff;
|
||
}
|
||
.aifo-labels{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
gap:10px;
|
||
margin:0 0 14px;
|
||
font-size:14px;
|
||
font-weight:800;
|
||
color:rgba(255,255,255,.85);
|
||
user-select:none;
|
||
}
|
||
|
||
.aifo-track{
|
||
position:relative;
|
||
--tagH: 30px;
|
||
padding-top:10px;
|
||
height: calc(var(--tagH) + 22px);
|
||
}
|
||
|
||
.aifo-tag{
|
||
position:absolute;
|
||
top:0;
|
||
height:var(--tagH);
|
||
line-height:var(--tagH);
|
||
transform:translateX(-50%);
|
||
background:#F98715;
|
||
color:#fff;
|
||
font-weight:900;
|
||
font-size:14px;
|
||
padding:0 12px;
|
||
border-radius:8px;
|
||
white-space:nowrap;
|
||
box-shadow:0 14px 30px rgba(249,135,21,.30);
|
||
cursor:grab;
|
||
user-select:none;
|
||
z-index:5;
|
||
}
|
||
.aifo-tag:active{ cursor:grabbing; }
|
||
|
||
.aifo-line{
|
||
position:absolute;
|
||
left:0; right:0;
|
||
top: calc(var(--tagH) / 2);
|
||
transform: translateY(-50%);
|
||
height:3px;
|
||
border-radius:999px;
|
||
background:rgba(255,255,255,.70);
|
||
overflow:hidden;
|
||
z-index:1;
|
||
}
|
||
.aifo-fill{
|
||
position:absolute;
|
||
left:0; top:0;
|
||
height:100%;
|
||
width:0%;
|
||
background:#F98715;
|
||
border-radius:999px;
|
||
}
|
||
|
||
.aifo-range{
|
||
position:absolute;
|
||
left:0; right:0;
|
||
top:0;
|
||
height:100%;
|
||
margin:0;
|
||
background:transparent;
|
||
appearance:none;
|
||
-webkit-appearance:none;
|
||
opacity:0;
|
||
cursor:pointer;
|
||
z-index:4;
|
||
}
|
||
.aifo-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:1px; height:1px; }
|
||
.aifo-range::-moz-range-thumb{ width:1px; height:1px; border:0; background:transparent; }
|
||
|
||
.aifo-take-title{
|
||
margin:0 0 16px;
|
||
font-size:22px;
|
||
font-weight:900;
|
||
color:#fff;
|
||
}
|
||
.aifo-take{
|
||
width:100%;
|
||
height:54px;
|
||
border:0;
|
||
border-radius:10px;
|
||
background:#F98715;
|
||
color:#fff;
|
||
font-weight:900;
|
||
font-size:16px;
|
||
box-shadow:0 16px 36px rgba(249,135,21,.28);
|
||
cursor:default;
|
||
}
|
||
|
||
@media (max-width: 1200px){
|
||
.aifo-wrap{padding:0 26px;}
|
||
.aifo-title{font-size:56px;}
|
||
.aifo-right{padding-right:0;}
|
||
}
|
||
@media (max-width: 1024px){
|
||
.aifo-grid{flex-wrap:wrap;}
|
||
.aifo-left,.aifo-right{flex:1 1 100%; min-width:0;}
|
||
.aifo-card{padding:28px 18px;}
|
||
.aifo-labels{font-size:13px;}
|
||
.aifo-title{font-size:46px;}
|
||
}
|
||
</style>
|
||
<section id="get-funded" class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-5 mb-4">
|
||
<h1 >Keep <span class="text-orange">95% Profits</span> And Continue Scaling </h1>
|
||
<!-- <h1>A <span class="text-orange">Trader</span></h1> -->
|
||
<p class="section-desc text-white">
|
||
With AIFO, you keep up to 95% of your profits. As your account size increases and your consistency is proven, larger accounts become available.
|
||
</p>
|
||
<div class="mt-5 btn-contain"><button class="btn btn-default btn-lg rounded-lg px-5 py-3">Get Funded</button></div>
|
||
</div>
|
||
|
||
<div class="header_img_block col-md-7">
|
||
<div class="h-full w-full overflow-auto" >
|
||
<div class="account_size">
|
||
<div class="account_size_section">
|
||
<div class="account_seize_item">
|
||
|
||
<div class="aifo-right">
|
||
<div class="aifo-card" data-aifo="calc">
|
||
<!-- Account Size -->
|
||
<div class="aifo-block">
|
||
<div class="aifo-h">Account Size</div>
|
||
<div class="aifo-labels">
|
||
<span>$10K</span><span>$25K</span><span>$50K</span><span>$100K</span><span>$200K</span>
|
||
</div>
|
||
<div class="aifo-track">
|
||
<div class="aifo-tag" id="tagSize">$50,000</div>
|
||
<div class="aifo-line"><div class="aifo-fill" id="fillSize"></div></div>
|
||
<input class="aifo-range" id="rngSize" type="range" min="0" max="4" step="1" value="2" aria-label="Account size">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Profit (0-100) -->
|
||
<div class="aifo-block">
|
||
<div class="aifo-h">Profit</div>
|
||
<div class="aifo-labels">
|
||
<span>0%</span><span>50%</span><span>100%</span>
|
||
</div>
|
||
<div class="aifo-track">
|
||
<div class="aifo-tag" id="tagProfit">20%</div>
|
||
<div class="aifo-line"><div class="aifo-fill" id="fillProfit"></div></div>
|
||
<input class="aifo-range" id="rngProfit" type="range" min="0" max="100" step="1" value="20" aria-label="Profit percent">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Profit Split -->
|
||
<div class="aifo-block">
|
||
<div class="aifo-h">Profit Split</div>
|
||
<div class="aifo-labels">
|
||
<span>70%</span><span>80%</span><span>90%</span><span>95%</span>
|
||
</div>
|
||
<div class="aifo-track">
|
||
<div class="aifo-tag" id="tagSplit">70%</div>
|
||
<div class="aifo-line"><div class="aifo-fill" id="fillSplit"></div></div>
|
||
<input class="aifo-range" id="rngSplit" type="range" min="70" max="95" step="5" value="70" aria-label="Profit split">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Take Home -->
|
||
<div class="aifo-take-title">Take Home</div>
|
||
<button class="aifo-take" id="takeHome">$0</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
(function(){
|
||
const sizes = [10000, 25000, 50000, 100000, 200000];
|
||
|
||
const rngSize = document.getElementById('rngSize');
|
||
const rngProfit = document.getElementById('rngProfit');
|
||
const rngSplit = document.getElementById('rngSplit');
|
||
|
||
const fillSize = document.getElementById('fillSize');
|
||
const fillProfit= document.getElementById('fillProfit');
|
||
const fillSplit = document.getElementById('fillSplit');
|
||
|
||
const tagSize = document.getElementById('tagSize');
|
||
const tagProfit = document.getElementById('tagProfit');
|
||
const tagSplit = document.getElementById('tagSplit');
|
||
|
||
const takeHome = document.getElementById('takeHome');
|
||
|
||
function money(n){
|
||
return '$' + Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||
}
|
||
|
||
function setUI(rangeEl, fillEl, tagEl, text){
|
||
const min = parseFloat(rangeEl.min);
|
||
const max = parseFloat(rangeEl.max);
|
||
const val = parseFloat(rangeEl.value);
|
||
const pct = ((val - min) / (max - min)) * 100;
|
||
|
||
fillEl.style.width = pct + '%';
|
||
tagEl.style.left = pct + '%';
|
||
tagEl.textContent = text;
|
||
}
|
||
|
||
function calc(){
|
||
const sizeIndex = parseInt(rngSize.value, 10);
|
||
const size = sizes[sizeIndex];
|
||
|
||
const profitPct = parseInt(rngProfit.value, 10);
|
||
const splitPct = parseInt(rngSplit.value, 10);
|
||
|
||
const grossProfit = size * (profitPct / 100);
|
||
const net = grossProfit * (splitPct / 100);
|
||
|
||
setUI(rngSize, fillSize, tagSize, money(size));
|
||
setUI(rngProfit, fillProfit, tagProfit, profitPct + '%');
|
||
setUI(rngSplit, fillSplit, tagSplit, splitPct + '%');
|
||
|
||
takeHome.textContent = money(net);
|
||
}
|
||
|
||
function bindDrag(tagEl, rangeEl){
|
||
const trackEl = tagEl.parentElement;
|
||
let dragging = false;
|
||
|
||
function setByClientX(clientX){
|
||
const rect = trackEl.getBoundingClientRect();
|
||
const x = Math.max(0, Math.min(rect.width, clientX - rect.left));
|
||
const pct = x / rect.width;
|
||
|
||
const min = parseFloat(rangeEl.min);
|
||
const max = parseFloat(rangeEl.max);
|
||
const step = parseFloat(rangeEl.step || 1);
|
||
|
||
let raw = min + pct * (max - min);
|
||
raw = Math.round(raw / step) * step;
|
||
raw = Math.max(min, Math.min(max, raw));
|
||
|
||
rangeEl.value = String(raw);
|
||
calc();
|
||
}
|
||
|
||
tagEl.addEventListener('pointerdown', (e)=>{
|
||
dragging = true;
|
||
tagEl.setPointerCapture?.(e.pointerId);
|
||
setByClientX(e.clientX);
|
||
});
|
||
|
||
window.addEventListener('pointermove', (e)=>{
|
||
if(!dragging) return;
|
||
setByClientX(e.clientX);
|
||
});
|
||
|
||
window.addEventListener('pointerup', ()=> dragging=false);
|
||
|
||
tagEl.addEventListener('touchstart', (e)=>{
|
||
dragging = true;
|
||
setByClientX(e.touches[0].clientX);
|
||
}, {passive:true});
|
||
|
||
window.addEventListener('touchmove', (e)=>{
|
||
if(!dragging) return;
|
||
setByClientX(e.touches[0].clientX);
|
||
}, {passive:true});
|
||
|
||
window.addEventListener('touchend', ()=> dragging=false);
|
||
}
|
||
|
||
bindDrag(tagSize, rngSize);
|
||
bindDrag(tagProfit, rngProfit);
|
||
bindDrag(tagSplit, rngSplit);
|
||
|
||
[rngSize, rngProfit, rngSplit].forEach(el=>{
|
||
el.addEventListener('input', calc);
|
||
el.addEventListener('change', calc);
|
||
});
|
||
|
||
calc();
|
||
})();
|
||
</script>
|
||
|
||
<!-- 第五楼层 End -->
|
||
|
||
<!-- Payment Methods Section (module: pages/modules/payment-methods.html) -->
|
||
<div id="payment-methods-container"></div>
|
||
<script src="/js/load-payment-methods.js"></script>
|
||
|
||
<!-- 第六楼层 Start -->
|
||
|
||
|
||
<!-- 第六楼层 End -->
|
||
|
||
<!-- 第七楼层 Start -->
|
||
<style>
|
||
:root{
|
||
--card-w: 320px; /* desktop card width */
|
||
--card-h: 420px; /* desktop card height */
|
||
--card-gap: 20px;
|
||
--visible-desktop: 5;
|
||
--indicator-color: #F98715;
|
||
}
|
||
|
||
/* reset */
|
||
/* *{box-sizing:border-box}
|
||
body{margin:0;background:#111;color:#fff;font-family:Inter,system-ui,Arial,sans-serif} */
|
||
|
||
/* wrapper centered limited to 5 cards */
|
||
.carousel-container {
|
||
width:100%;
|
||
display:flex;
|
||
justify-content:center;
|
||
padding:48px 20px 80px;
|
||
position:relative;
|
||
}
|
||
|
||
/* viewport shows exactly 5 cards width on desktop */
|
||
.carousel-viewport {
|
||
overflow:hidden;
|
||
width: calc((var(--card-w) * var(--visible-desktop)) + (var(--card-gap) * (var(--visible-desktop)-1)));
|
||
max-width:100%;
|
||
position:relative;
|
||
}
|
||
|
||
/* left/right gradient mask (visible edges) */
|
||
.carousel-viewport::before,
|
||
.carousel-viewport::after{
|
||
content:"";
|
||
position:absolute;
|
||
top:0;
|
||
height:100%;
|
||
width:140px;
|
||
z-index:30;
|
||
pointer-events:none;
|
||
}
|
||
.carousel-viewport::before{ left:0; background:linear-gradient(to right,#111,transparent); }
|
||
.carousel-viewport::after{ right:0; background:linear-gradient(to left,#111,transparent); }
|
||
|
||
/* track */
|
||
.carousel-track{
|
||
display:flex;
|
||
gap:var(--card-gap);
|
||
transition:transform .45s ease;
|
||
will-change:transform;
|
||
align-items:center;
|
||
}
|
||
|
||
/* card */
|
||
.carousel-card{
|
||
width:var(--card-w);
|
||
height:var(--card-h);
|
||
border-radius:20px;
|
||
overflow:hidden;
|
||
position:relative;
|
||
flex:0 0 auto;
|
||
background:#111;
|
||
cursor:grab;
|
||
user-select:none;
|
||
-webkit-user-drag:none;
|
||
transition:transform .28s ease, box-shadow .28s ease;
|
||
}
|
||
|
||
/* grabbed cursor */
|
||
.carousel-card.grabbing{ cursor:grabbing; }
|
||
|
||
/* main image */
|
||
.carousel-card .card-img{
|
||
width:100%;
|
||
height:100%;
|
||
object-fit:cover;
|
||
display:block;
|
||
transition:filter .28s ease;
|
||
}
|
||
|
||
/* hover multiply overlay and glow (use ::after for multiply) */
|
||
.carousel-card::after{
|
||
content:"";
|
||
position:absolute;
|
||
inset:0;
|
||
background:#FF9C3A;
|
||
mix-blend-mode:multiply;
|
||
opacity:0;
|
||
transition:opacity .28s ease;
|
||
pointer-events:none;
|
||
}
|
||
.carousel-card:hover::after{ opacity:1; }
|
||
|
||
/* glow box-shadow on hover */
|
||
.carousel-card:hover{
|
||
box-shadow: inset 0 5px 10px rgba(249,135,21,0.6), 0 8px 15px rgba(249,135,21,0.7);
|
||
transform: translateY(-6px);
|
||
}
|
||
|
||
/* card bottom area (approx bottom 30%) */
|
||
.card-bottom{
|
||
position:absolute;
|
||
left:16px;
|
||
right:16px;
|
||
top:75%;
|
||
display:flex;
|
||
align-items:flex-end;
|
||
justify-content:space-between;
|
||
pointer-events:none;
|
||
opacity:0;
|
||
transform:translateY(8px);
|
||
transition:opacity .28s ease, transform .28s ease;
|
||
z-index:10;
|
||
}
|
||
.carousel-card:hover .card-bottom{
|
||
opacity:1; transform:translateY(0);
|
||
}
|
||
|
||
/* left text */
|
||
.card-info{ display:flex; flex-direction:column; gap:6px; max-width:68% }
|
||
.card-info .title{ font-size:22px; font-weight:800; color:#fff; line-height:1; }
|
||
.card-info .desc{ font-size:14px; color:rgba(255,255,255,0.92) }
|
||
|
||
/* flag */
|
||
.flag-icon{
|
||
width:52px; height:52px; border-radius:50%; border:3px solid #fff; object-fit:cover;
|
||
position: absolute;
|
||
top: 5px;
|
||
}
|
||
|
||
/* arrows */
|
||
.arrow{
|
||
position:absolute; top:50%; transform:translateY(-50%); z-index:40;
|
||
width:56px; height:56px; border-radius:12px;
|
||
background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center;
|
||
color:#fff; font-size:28px; cursor:pointer; user-select:none;
|
||
}
|
||
.arrow:hover{ background:rgba(0,0,0,0.75); }
|
||
.arrow.left{ left:12px; }
|
||
.arrow.right{ right:12px; }
|
||
|
||
/* indicators */
|
||
.indicators{ display:flex; gap:12px; justify-content:center; margin-top: 60px;}
|
||
.ind{ width:48px; height:6px; border-radius:4px; background:#333; cursor:pointer; transition:background .18s; }
|
||
.ind:hover,.ind.active{ background:var(--indicator-color); }
|
||
|
||
/* responsive: mobile layout: single card centered, snap-like */
|
||
@media (max-width: 768px){
|
||
|
||
:root{ --visible-desktop: 1; } /* not used by CSS calc below, but keeps semantics */
|
||
|
||
.carousel-viewport{
|
||
width: min(320px, 92vw); /* ensure centered and at most 320 */
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.carousel-track{
|
||
gap:16px;
|
||
transition:none; /* we'll use immediate moves when dragging; jQuery animate handles centering */
|
||
}
|
||
|
||
.carousel-card{
|
||
width: min(320px, 92vw);
|
||
height: 400px; /* requested */
|
||
scroll-snap-align:center;
|
||
flex:0 0 auto;
|
||
}
|
||
|
||
/* mobile: hide big masks or make smaller */
|
||
.carousel-viewport::before, .carousel-viewport::after{
|
||
width:70px;
|
||
}
|
||
|
||
/* hide arrow buttons on mobile */
|
||
.arrow{ display:none; }
|
||
|
||
/* hide desc on very small */
|
||
.card-info .desc{ display:none; }
|
||
.flag-icon{ display:none; }
|
||
}
|
||
</style>
|
||
|
||
<section id="section-9" class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="mb-md text-center">
|
||
<h1 class="heading h1 fade-in">Our <img src="../assets/images/backgrounds/Component 63-2.png" alt="Funded Trading" ></h3>
|
||
<h1 class="heading h1 fade-in"> <span class="text-orange">Our Global Traders<span></h3>
|
||
</div>
|
||
<div class="row">
|
||
<div class="carousel-container"></div>
|
||
|
||
<div class="arrow left" style="display:none" id="btnPrev">❮</div>
|
||
|
||
<div class="carousel-viewport">
|
||
<div class="carousel-track" id="track">
|
||
<!-- Cards: you can replace images/labels here -->
|
||
<div class="carousel-card" data-country="jp">
|
||
<img class="card-img" src="../assets/images/backgrounds/Component 47.png" alt="">
|
||
<div class="card-bottom">
|
||
<div class="card-info">
|
||
<div class="title">Japan</div>
|
||
<div class="desc">INNOVATING THE FUTURE</div>
|
||
</div>
|
||
<img class="flag-icon" src="../assets/images/backgrounds/flag-lr.png" alt="">
|
||
</div>
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
|
||
<div class="carousel-card" data-country="us">
|
||
<img class="card-img" src="../assets/images/backgrounds/Component 48.png" alt="">
|
||
<div class="card-bottom">
|
||
<div class="card-info">
|
||
<div class="title">USA</div>
|
||
<div class="desc">LEADING THE FUTURE</div>
|
||
</div>
|
||
<img class="flag-icon" src="../assets/images/backgrounds/flag-hm.png" alt="">
|
||
</div>
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
|
||
<div class="carousel-card" data-country="fr">
|
||
<img class="card-img" src="../assets/images/backgrounds/Component 49.png" alt="">
|
||
<div class="card-bottom">
|
||
<div class="card-info">
|
||
<div class="title">France</div>
|
||
<div class="desc">ART & TECH</div>
|
||
</div>
|
||
<img class="flag-icon" src="../assets/images/backgrounds/flag-lr.png" alt="">
|
||
</div>
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
|
||
<div class="carousel-card" data-country="kr">
|
||
<img class="card-img" src="../assets/images/backgrounds/Component 47.png" alt="">
|
||
<div class="card-bottom">
|
||
<div class="card-info">
|
||
<div class="title">Korea</div>
|
||
<div class="desc">SMART TECH</div>
|
||
</div>
|
||
<img class="flag-icon" src="../assets/images/backgrounds/flag-lr.png" alt="">
|
||
</div>
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
|
||
<div class="carousel-card" data-country="gb">
|
||
<img class="card-img" src="../assets/images/backgrounds/Component 49.png" alt="">
|
||
<div class="card-bottom">
|
||
<div class="card-info">
|
||
<div class="title">UK</div>
|
||
<div class="desc">CREATIVE POWER</div>
|
||
</div>
|
||
<img class="flag-icon" src="../assets/images/backgrounds/flag-lr.png" alt="">
|
||
</div>
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
<div class="carousel-card" data-country="gb">
|
||
<img class="card-img" src="../assets/images/backgrounds/Component 49.png" alt="">
|
||
<div class="card-bottom">
|
||
<div class="card-info">
|
||
<div class="title">UK</div>
|
||
<div class="desc">CREATIVE POWER</div>
|
||
</div>
|
||
<img class="flag-icon" src="../assets/images/backgrounds/flag-lr.png" alt="">
|
||
</div>
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
<div class="carousel-card" data-country="gb">
|
||
<img class="card-img" src="../assets/images/backgrounds/Component 49.png" alt="">
|
||
<div class="card-bottom">
|
||
<div class="card-info">
|
||
<div class="title">UK</div>
|
||
<div class="desc">CREATIVE POWER</div>
|
||
</div>
|
||
<img class="flag-icon" src="../assets/images/backgrounds/flag-lr.png" alt="">
|
||
</div>
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="arrow right" style="display:none" id="btnNext">❯</div>
|
||
|
||
</div>
|
||
|
||
<!-- indicators -->
|
||
<div class="indicators mb-hidden" id="indicators" aria-hidden="true" style="display:flex; justify-content:center; margin-bottom:40px;width: 100%;"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 第七楼层 End -->
|
||
|
||
|
||
<!-- 第八楼层 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" style="color: var(--white-primary);">Frequently Asked</h2>
|
||
<h2 class="display-4 font-weight-bold text-orange">Questions</h2>
|
||
</div>
|
||
<div style="max-width: 820px; margin: 0 auto;">
|
||
<div class="faq-item">
|
||
<button class="faq-header"> <span class="faq-question">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">
|
||
<p class="fade-in">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">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question">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">
|
||
<p class="fade-in">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">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question">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">
|
||
<p class="fade-in">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">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question">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">
|
||
<p class="fade-in">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">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item"><button class="faq-header"> <span class="faq-question">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">
|
||
<p class="fade-in">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">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">
|
||
<p class="fade-in">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">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-5"><button class="btn btn-default btn-lg rounded-lg px-5 py-3">More Answers</button>
|
||
</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;
|
||
|
||
// const stories = [
|
||
// {name:'Tim (USA)', text:"I've been trading for years and this is the best experience I've had.", img:'https://picsum.photos/id/1005/720/420'},
|
||
// {name:'Anna (FR)', text:'The curriculum is clear and practical — I improved fast.', img:'https://picsum.photos/id/1011/720/420'},
|
||
// {name:'Liu (CN)', text:'Hands-on tasks helped me build confidence.', img:'https://picsum.photos/id/1027/720/420'},
|
||
// {name:'Carlos (BR)', text:'Great community and feedback loops.', img:'https://picsum.photos/id/1025/720/420'}
|
||
// ];
|
||
|
||
// const $track = $('#growthTrack').empty();
|
||
// stories.forEach((s,i)=>{
|
||
// const $card = $(`
|
||
// <div class="growth-card" data-i="${i}">
|
||
// <img loading="lazy" src="${s.img}" alt="${s.name}">
|
||
// <strong style="display:block;margin-bottom:0.5rem">${s.name}</strong>
|
||
// <p style="font-size:0.875rem;color:rgba(255,255,255,0.9)">${s.text}</p>
|
||
// </div>
|
||
// `);
|
||
// $track.append($card);
|
||
// });
|
||
|
||
// dots
|
||
// const $dots = $('#growthDots').empty();
|
||
// stories.forEach((_,i)=> $dots.append(`<button class="btn btn-sm" data-i="${i}" style="margin:6px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff">${i+1}</button>`));
|
||
|
||
// initGrowthCarousel();
|
||
}
|
||
|
||
/* ========== 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>
|
||
|
||
// 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');
|
||
}
|
||
});
|
||
|
||
</script>
|
||
</html>
|