steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
1859 lines
74 KiB
HTML
1859 lines
74 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>AIFO login user</title>
|
||
<link type="text/css" href="./assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||
<link href="./assets/css/style.css" rel="stylesheet">
|
||
<link type="text/css" href="./assets/css/theme.css" rel="stylesheet">
|
||
<link type="text/css" href="./assets/css/index.css" rel="stylesheet">
|
||
</head>
|
||
<style>
|
||
.user-avatar img {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.user-menu .nav-link {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.user-menu .dropdown-menu {
|
||
min-width: 120px;
|
||
}
|
||
</style>
|
||
<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>
|
||
<!-- Can modify data-code and text content as needed -->
|
||
<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="homepage">
|
||
<!-- banner start -->
|
||
<div class="block-1" id="block-1">
|
||
|
||
<section id="section-1" class="funded-trading-hero spotlight parallax bg-cover bg-size--cover" >
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6">
|
||
<!-- Icons -->
|
||
|
||
<h1 class="hero-title fade-in">
|
||
<span class="line1 fade-in"><img src="./assets/images/backgrounds/img-02.png" alt="Funded Trading" class="hero-img floating-img"> Your First Step</span>
|
||
<span class="line2 fade-in">Toward <span class="text-primary-orange">Funded Trading</span></span>
|
||
</h1>
|
||
|
||
<div class="banner-contain d-flex align-items-center justify-content-center flex-wrap mt-6">
|
||
<img src="./assets/images/backgrounds/img-03.png" alt="" class="img-fluid img-fluid-l me-5 floating-img fade-in" >
|
||
|
||
<div class="text-center mx-4 fade-in">
|
||
<div class="mb-3">
|
||
<div class="banner-desc fade-in">
|
||
Join thousands of traders who started with AIFO and discover the
|
||
<span class="text-primary-orange">capital</span>,
|
||
<span class="text-primary-orange">tools</span>, and
|
||
<span class="text-primary-orange">expert </span><br><span class="text-primary-orange">guidance</span> you need to grow and thrive.
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="trustpilot text-primary d-flex align-items-center justify-content-center gap-2 flex-wrap fade-in">
|
||
<span>Rated Excellent </span>
|
||
<span class="pd-lr-1"><img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon"></span>
|
||
<span class="pd-lr-1 underline-text"> 43,636 reviews on</span>
|
||
<span><a href="https://www.trustpilot.com/" target="_blank"><img src="./assets/images/backgrounds/Frame 427320868.svg" alt="Star" class="star-icon" ></a></span>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<img src="./assets/images/backgrounds/img-h-04.png" alt="" class="img-fluid img-fluid-r ms-5 floating-img fade-in">
|
||
</div>
|
||
|
||
<!-- Buttons -->
|
||
<div class="hero-buttons center-buttons fade-in">
|
||
<a href="#" class="btn btn-start-challenge">Start Challenge</a>
|
||
<a href="#" class="btn btn-free-trial">
|
||
Free Trial
|
||
<span class="btn-arrow">›</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Number Statistics Section -->
|
||
<section id="section-2" class="fade-in">
|
||
<div class="container">
|
||
<div class="row justify-content-center text-center">
|
||
<div class="col-4 col-md-3">
|
||
<h2 class="display-6 font-weight-bold text-primary counter">1,0000+</h2>
|
||
<p class="text-light-gary">Traders</p>
|
||
</div>
|
||
<div class="col-4 col-md-3">
|
||
<h2 class="display-6 font-weight-bold text-primary counter">1M+</h2>
|
||
<p class="text-light-gary">Paid Out</p>
|
||
</div>
|
||
<div class="col-4 col-md-3">
|
||
<h2 class="display-6 font-weight-bold text-primary counter">1,0000+</h2>
|
||
<p class="text-light-gary">Funded Accounts</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<div class="block-2">
|
||
<!-- section #3 -->
|
||
<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">Why <img src="./assets/images/backgrounds/Component 63-2.png" alt="Funded Trading" class="why-img floating-img"></h3>
|
||
<h1 class="heading h1 fade-in">Choose <span class="text-orange">AIFO<span></h3>
|
||
<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</span> <span class="text-orange">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">
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3 ustify-content-center align-items-center"><i class="icon-box w-1"></i></div>
|
||
<h5 class="fade-in">Earn More with High Profit Splits</h5>
|
||
<p class="fade-in">Keep up to 80% of the profits you generate. The better you perform, the more you take home. </p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3"><i class="icon-box w-2"></i></div>
|
||
<h5 class="fade-in">Get Access to Real Funding</h5>
|
||
<p class="fade-in">Prove your skills in our challenges and unlock trading accounts with real capital. No personal risk – trade with company-funded accounts</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3"><i class="icon-box w-3"></i></div>
|
||
<h5 class="fade-in">Boost Your Trading Career</h5>
|
||
<p class="fade-in">Join a global community of traders, gain credibility, and build your path as a professional funded trader. </p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3"><i class="icon-box w-4"></i></div>
|
||
<h5 class="fade-in">Earn More with High Profit Splits</h5>
|
||
<p class="fade-in">Keep up to 80% of the profits you generate. The better you perform, the more you take home. </p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3"><i class="icon-box w-5"></i></div>
|
||
<h5 class="fade-in">Get Access to Real Funding</h5>
|
||
<p class="fade-in">Prove your skills in our challenges and unlock trading accounts with real capital. No personal risk – trade with company-funded accounts</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3"><i class="icon-box w-6"></i></div>
|
||
<h5 class="fade-in">Boost Your Trading Career</h5>
|
||
<p class="fade-in">Join a global community of traders, gain credibility, and build your path as a professional funded trader. </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- challage section #4 -->
|
||
<section id="section-4" class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-7">
|
||
<h1 class="heading h1 fade-in">Your Path <img src="./assets/images/backgrounds/img-h-05.png" alt="Funded Trading" class="why-img floating-img"></h1>
|
||
<h1 class="heading h1 fade-in">To Becoming</h1>
|
||
<h1 class="heading h1 fade-in">A <span class="text-orange">Funded Trader</span> </h1>
|
||
</div>
|
||
<div class="sub_title col-md-5 mb-4 d-grid" style="grid-template-rows: 1fr auto;">
|
||
<p class="text-primary lead text-right">
|
||
<span class="d-block mb-1 fade-in">Follow AIFO's simple supportive</span>
|
||
<span class="d-block ms-3 mb-1 fade-in"><span class="text-orange">3-step journey</span> and start your </span>
|
||
<span class="d-block ms-5 fade-in">funded trading account.</span>
|
||
</p>
|
||
|
||
<div class="text-right align-self-end fade-in">
|
||
<a class="btn btn-sm bg-primary d-none d-lg-inline-flex fade-in" href="#">Start Challenge</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- content strat -->
|
||
<div class="row align-items-stretch">
|
||
<div class="card-container card-style-1 fade-in">
|
||
<div class="step-card fade-in-up" style="animation-delay: 0.4s;">
|
||
<div class="card-icon fade-in" >
|
||
<i class="icon-box-1 s-c-1"></i>
|
||
</div>
|
||
<h2 class="fade-in">Choose</h2>
|
||
<h2 class="card-title fade-in">Your <span class="text-orange">Challenge</span></h2>
|
||
<p class="card-text text-primary fade-in">
|
||
Pick the evaluation style that fits you best — from an easy one-step test to a more in-depth two-step program. With flexible options, you stay in charge of your growth.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-arrow d-none d-lg-flex arrow-connector align-items-center justify-content-center">
|
||
<div class="arrow-icon">
|
||
<i class="icon-right right-arrow"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-container card-style-1 fade-in">
|
||
<div class="step-card fade-in-up" style="animation-delay: 0.6s;">
|
||
<div class="card-icon fade-in" >
|
||
<i class="icon-box-1 s-c-1"></i>
|
||
</div>
|
||
<h3 class="card-title fade-in">Trade in the Simulated Phase</h3>
|
||
<p class="card-text fade-in">
|
||
Practice in a safe, risk-free environment that mirrors real market conditions. It's your chance to prove your discipline, consistency, and strategy — without putting your own capital on the line.
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-arrow d-none d-lg-flex arrow-connector align-items-center justify-content-center">
|
||
<div class="arrow-icon">
|
||
<i class="icon-right right-arrow"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片3 -->
|
||
<div class="card-container card-style-1 fade-in">
|
||
<div class="step-card fade-in-up" style="animation-delay: 0.8s;">
|
||
<div class="card-icon fade-in" >
|
||
<i class="icon-box-1 s-c-1"></i>
|
||
</div>
|
||
<h3 class="card-title fade-in">Get Funded & Grow with Us</h3>
|
||
<p class="card-text fade-in">
|
||
When you're ready, we'll back you with a funded account. Keep up to 90% of your profits and scale your account as your skills and confidence grow — we'll be cheering you on every step of the way.
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- content end -->
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- <div class="container">
|
||
<h2>简单的折叠</h2>
|
||
<a href="#demo" class="btn btn-primary" data-toggle="collapse">简单的折叠</a>
|
||
<div id="demo" class="collapse">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
||
|
||
</div>
|
||
</div> -->
|
||
|
||
<div class="block-3">
|
||
<!-- section #5 -->
|
||
<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>
|
||
</div>
|
||
|
||
<div class="block-4">
|
||
<!-- section #6 -->
|
||
<section id="section-6" class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-7 mb-4">
|
||
<h1 class="section-title fade-in">Grow <img src="./assets/images/backgrounds/Component 63-2.png" alt="Funded Trading" class="why-img floating-img">As </h1>
|
||
<h1 class="fade-in">A <span class="text-orange">Trader</span></h1>
|
||
<p class="section-desc text-muted fade-in">At AIFO, we believe trading is about more than passing a challenge, it’s about growing into the trader you’ve always wanted to be. We support all our traders with <span class="text-orange">educational content</span> and the <span class="text-orange">right tools</span> to help you build confidence, consistency, and long-term success.</p>
|
||
|
||
</div>
|
||
<div class="header_img_block col-md-5 fade-in">
|
||
<img class="img-fluid rounded" src="assets/images/backgrounds/image-11.png" alt="platform preview">
|
||
</div>
|
||
</div>
|
||
<div class="row text-center card-style-2">
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<!-- <div class="mb-3"><i class="fas fa-chart-line fa-3x text-primary"></i></div> -->
|
||
<div class="mb-3 ustify-content-center align-items-center fade-in"><i class="icon-box w-1"></i></div>
|
||
<h5 class="fade-in">Earn More with High Profit Splits</h5>
|
||
<p class="fade-in">Keep up to 80% of the profits you generate. The better you perform, the more you take home. </p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3 fade-in"><i class="icon-box w-2"></i></div>
|
||
<h5 class="fade-in">Get Access to Real Funding</h5>
|
||
<p class="fade-in">Prove your skills in our challenges and unlock trading accounts with real capital. No personal risk – trade with company-funded accounts</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3 fade-in"><i class="icon-box w-3"></i></div>
|
||
<h5 class="fade-in">Boost Your Trading Career</h5>
|
||
<p class="fade-in">Join a global community of traders, gain credibility, and build your path as a professional funded trader. </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<div class="block-5">
|
||
|
||
<!-- section #7 -->
|
||
<section id="section-7" class="py-5">
|
||
<div class="container promotion">
|
||
<div class="panel d-flex flex-column flex-md-row align-items-stretch justify-content-between h-100">
|
||
<!-- 左侧内容 -->
|
||
<div class="d-flex flex-column justify-content-center py-3 py-md-0">
|
||
<h4 class="heading-1 fade-in">New To AIFO?</h4>
|
||
<p class="text-primary mb-0 p-content-1 fade-in">
|
||
Receive <span class="text-orange">50% OFF</span> the code
|
||
<span class="text-orange">FIRSTAIFO</span> for new users only.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 右侧内容 -->
|
||
<div class="content-right d-flex flex-column justify-content-center align-items-center align-items-md-end text-center text-md-end py-3 py-md-0">
|
||
<h4 class="heading-2 mb-1 w-100 fade-in">FIRSTAIFO <p class="text-primary heading-3 mb-2 w-100 mb-show">50% off</p></h4>
|
||
<p class="text-primary heading-3 mb-2 w-100 mb-hidden fade-in">50% off</p>
|
||
<a id="copyCode" class="btn btn-sm bg-primary fade-in">Copy Code</a>
|
||
<input type="hidden" id="couponCode" value="undeveloped">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<!-- section #8 -->
|
||
<section id="section-8" class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-7 mobile-center-left">
|
||
<h1 class="heading h1 fade-in">What Thousands </h1>
|
||
<h1 class="heading h1 fade-in">Of<img src="./assets/images/backgrounds/img-h-05.png" alt="Funded Trading" class="why-img floating-img">Traders</h1>
|
||
<h1 class="heading h1 fade-in">Say About <span class="text-primary-orange">AIFO<span></span></span></h1>
|
||
|
||
<div class="trustpilot text-primary d-flex align-items-center justify-content-md-start gap-2 flex-wrap" style="margin-top:1.5625rem;">
|
||
<span>Rated Excellent </span>
|
||
<span class="pd-lr-1"><img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon"></span>
|
||
<span class="pd-lr-1 underline-text">43,636 reviews on</span>
|
||
<span><a href="https://www.trustpilot.com/" target="_blank"><img src="./assets/images/backgrounds/Frame 427320868.svg" alt="Star" class="star-icon"></a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub_title col-md-5 mb-4 d-grid" style="grid-template-rows: 1fr auto;">
|
||
<!-- 头像容器 -->
|
||
<div class="avatar-container d-flex justify-content-end gap-3 mb-4">
|
||
<!-- 头像1 -->
|
||
<div class="avatar-item">
|
||
<img src="./assets/images/backgrounds/avator1.jpg" alt="Trader Avatar 1" class="avatar-img rounded-circle"
|
||
style="width: 5rem; height: 5rem; object-fit: cover;">
|
||
</div>
|
||
<!-- 头像2 -->
|
||
<div class="avatar-item">
|
||
<img src="./assets/images/backgrounds/avator2.jpg" alt="Trader Avatar 2" class="avatar-img rounded-circle"
|
||
style="width: 5rem; height: 5rem; object-fit: cover;">
|
||
</div>
|
||
<!-- 头像3 -->
|
||
<div class="avatar-item">
|
||
<img src="./assets/images/backgrounds/avator3.jpg" alt="Trader Avatar 3" class="avatar-img rounded-circle"
|
||
style="width: 5rem; height: 5rem; object-fit: cover;">
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-primary lead text-right mb-0">
|
||
Across the globe, traders trust AIFO not just for funding but for the <span class="text-orange">support learning</span>, and <span class="text-orange">shared success</span> that make this community feel like family.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="cart-list-contain row text-center card-style-2">
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded aifo-bg-dark-gray">
|
||
<div class="verification-row d-flex align-items-center mb-3">
|
||
<img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon me-4">
|
||
<i class="icon-box v-1"></i>
|
||
<span class="verified-text ms-6">Verified</span>
|
||
</div>
|
||
<h4 class="customer-info mt-12 text-left">
|
||
<span class="text-primary">Customer</span>
|
||
<span class="text-light-gray ms-2">2 hours ago</span>
|
||
</h4>
|
||
<h4 class="text-primary mt-12 text-left">Title</h4>
|
||
<p class="mb-0 text-left">Worem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est.</p>
|
||
<a href="" class="text-orange read-more-link mt-20 text-left">Read More</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded aifo-bg-dark-gray">
|
||
<div class="verification-row d-flex align-items-center mb-3">
|
||
<img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon me-4">
|
||
<i class="icon-box v-1"></i>
|
||
<span class="verified-text ms-6">Verified</span>
|
||
</div>
|
||
<h4 class="customer-info mt-12 text-left">
|
||
<span class="text-primary">Customer</span>
|
||
<span class="text-light-gray ms-2">2 hours ago</span>
|
||
</h4>
|
||
<h4 class="text-primary mt-12 text-left">Title</h4>
|
||
<p class="mb-0 text-left">Worem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est.</p>
|
||
<a href="" class="text-orange read-more-link mt-20 text-left">Read More</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded aifo-bg-dark-gray">
|
||
<div class="verification-row d-flex align-items-center mb-3">
|
||
<img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon me-4">
|
||
<i class="icon-box v-1"></i>
|
||
<span class="verified-text ms-6">Verified</span>
|
||
</div>
|
||
<h4 class="customer-info mt-12 text-left">
|
||
<span class="text-primary">Customer</span>
|
||
<span class="text-light-gray ms-2">2 hours ago</span>
|
||
</h4>
|
||
<h4 class="text-primary mt-12 text-left">Title</h4>
|
||
<p class="mb-0 text-left">Worem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est.</p>
|
||
<a href="" class="text-orange read-more-link mt-20 text-left">Read More</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card h-100 custom-rounded aifo-bg-dark-gray">
|
||
<div class="verification-row d-flex align-items-center mb-3">
|
||
<img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon me-4">
|
||
<i class="icon-box v-1"></i>
|
||
<span class="verified-text ms-6">Verified</span>
|
||
</div>
|
||
<h4 class="customer-info mt-12 text-left">
|
||
<span class="text-primary">Customer</span>
|
||
<span class="text-light-gray ms-2">2 hours ago</span>
|
||
</h4>
|
||
<h4 class="text-primary mt-12 text-left">Title</h4>
|
||
<p class="mb-0 text-left">Worem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est.</p>
|
||
<a href="" class="text-orange read-more-link mt-20 text-left">Read More</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card h-100 custom-rounded aifo-bg-dark-gray">
|
||
<div class="verification-row d-flex align-items-center mb-3">
|
||
<img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon me-4">
|
||
<i class="icon-box v-1"></i>
|
||
<span class="verified-text ms-6">Verified</span>
|
||
</div>
|
||
<h4 class="customer-info mt-12 text-left">
|
||
<span class="text-primary">Customer</span>
|
||
<span class="text-light-gray ms-2">2 hours ago</span>
|
||
</h4>
|
||
<h4 class="text-primary mt-12 text-left">Title</h4>
|
||
<p class="mb-0 text-left">Worem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est.</p>
|
||
<a href="" class="text-orange read-more-link mt-20 text-left">Read More</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card h-100 custom-rounded aifo-bg-dark-gray">
|
||
<div class="verification-row d-flex align-items-center mb-3">
|
||
<img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon me-4">
|
||
<i class="icon-box v-1"></i>
|
||
<span class="verified-text ms-6">Verified</span>
|
||
</div>
|
||
<h4 class="customer-info mt-12 text-left">
|
||
<span class="text-primary">Customer</span>
|
||
<span class="text-light-gray ms-2">2 hours ago</span>
|
||
</h4>
|
||
<h4 class="text-primary mt-12 text-left">Title</h4>
|
||
<p class="mb-0 text-left">Worem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est.</p>
|
||
<a href="" class="text-orange read-more-link mt-20 text-left">Read More</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-contain row justify-content-center align-items-center">
|
||
<div class="col-auto">
|
||
<a class="btn btn-sm bg-primary d-lg-inline-flex" href="#">All Reviews</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- section #9 轮播图楼层 -->
|
||
<!-- <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" class="why-img floating-img"></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 class="carousel-track" id="track"></div>
|
||
</div>
|
||
|
||
|
||
<div class="carousel-indicators" id="indicators"></div>
|
||
</div>
|
||
</div>
|
||
</section> -->
|
||
|
||
|
||
<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" class="why-img floating-img"></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" 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" 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>
|
||
|
||
|
||
<div class="block-6">
|
||
<!-- section #10 -->
|
||
<section id="section-10" class="slice slice-lg" data-delimiter="1">
|
||
<div class="bg_light">
|
||
<div class="container">
|
||
<div class="mb-md text-center">
|
||
<h1 class="heading h1 fade-in">Join <img src="./assets/images/backgrounds/Frame 1000008381.png" alt="Funded Trading" class="tx-img floating-img"></h3>
|
||
<h1 class="heading h1 fade-in"> <img src="./assets/images/backgrounds/Frame 1000008386.png" alt="Funded Trading" class="zfj-img floating-img"><span class="text-orange">Our Community</span></h3>
|
||
<div class="fluid-paragraph text-center mt-4">
|
||
<p class="lead lh-180 fade-in">
|
||
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">
|
||
<a href="#" class="btn btn-start-challenge fade-in"><img src="./assets/images/backgrounds/btn-icon-1.png" alt="Funded Trading" class="floating-img"> Join Discord</a>
|
||
<a href="#" class="btn btn-free-trial fade-in"><img src="./assets/images/backgrounds/btn-icon-2.png" alt="Funded Trading" class="floating-img">
|
||
Join Telegram
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<section id="section-11" class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="mb-md text-center">
|
||
<h1 class="heading h1 fade-in">Start Your <span class="text-orange">Trading</span></h3>
|
||
<h1 class="heading h1 fade-in"> <span class="text-orange">Journey</span> with <img src="./assets/images/backgrounds/Component 63-2.png" alt="Funded Trading" class="why-img floating-img">AIFO </h3>
|
||
<div class="fluid-paragraph text-center mt-4">
|
||
<p class="lead lh-180 fade-in">
|
||
Build your knowledge, connect with a <span class="text-orange">supportive community</span>, and <span class="text-orange">sharpen your skills</span> — then step into live trading with confidence. AIFO is where learning turns into opportunity, and your profits become reality.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-auto">
|
||
<div class="hero-buttons">
|
||
<a href="#" class="btn btn-start-challenge">Start Challenge</a>
|
||
<a href="#" class="btn btn-free-trial">
|
||
Free Trial
|
||
<span class="btn-arrow">›</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 添加提示消息容器 -->
|
||
<div id="copyMessage" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-3"
|
||
style="display: none; z-index: 1050; min-width: 250px;">
|
||
<i class="fas fa-check-circle me-2"></i>
|
||
<span>The discount code has been copied to the clipboard！</span>
|
||
<!-- <button type="button" class="btn-close" data-bs-dismiss="alert"></button> -->
|
||
</div>
|
||
|
||
</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>
|
||
|
||
<script src="/js/layout.js"></script>
|
||
</body>
|
||
|
||
<!-- Top code bar behavior -->
|
||
<script>
|
||
// 复制code
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var btn = document.querySelector('.top-code-btn');
|
||
if (!btn) return;
|
||
|
||
var originalText = btn.textContent.trim();
|
||
var codeValue = btn.getAttribute('data-code') || originalText;
|
||
|
||
function setOriginal() {
|
||
btn.textContent = originalText;
|
||
}
|
||
|
||
function copyToClipboard(text) {
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(text).catch(function () {});
|
||
} else {
|
||
var textarea = document.createElement('textarea');
|
||
textarea.value = text;
|
||
textarea.style.position = 'fixed';
|
||
textarea.style.opacity = '0';
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
try {
|
||
document.execCommand('copy');
|
||
} catch (e) {}
|
||
document.body.removeChild(textarea);
|
||
}
|
||
}
|
||
|
||
btn.addEventListener('click', function () {
|
||
if (btn.textContent === 'CODED') {
|
||
setOriginal();
|
||
return;
|
||
}
|
||
|
||
copyToClipboard(codeValue);
|
||
btn.textContent = 'CODED';
|
||
});
|
||
|
||
btn.addEventListener('mouseleave', function () {
|
||
setOriginal();
|
||
});
|
||
|
||
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
|
||
const defaultConfig = {
|
||
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({
|
||
defaultConfig,
|
||
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="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 || defaultConfig.font_family;
|
||
const fontSize = config.font_size || defaultConfig.font_size;
|
||
const tabBg = config.tab_background || defaultConfig.tab_background;
|
||
const tabHoverBg = config.tab_hover_bg || defaultConfig.tab_hover_bg;
|
||
const headerBg = config.table_header_bg || defaultConfig.table_header_bg;
|
||
const textColor = config.text_color || defaultConfig.text_color;
|
||
|
||
$('body').css('font-family', `${fontFamily}, 'Segoe UI', Tahoma, sans-serif`);
|
||
|
||
// 更新标签页文本
|
||
$('#tab1').text(config.tab_1 || defaultConfig.tab_1);
|
||
$('#tab2').text(config.tab_2 || defaultConfig.tab_2);
|
||
$('#tab3').text(config.tab_3 || defaultConfig.tab_3);
|
||
$('#tab4').text(config.tab_4 || defaultConfig.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 || defaultConfig.tab_background,
|
||
set: (value) => {
|
||
config.tab_background = value;
|
||
window.elementSdk.setConfig({ tab_background: value });
|
||
}
|
||
},
|
||
{
|
||
get: () => config.tab_hover_bg || defaultConfig.tab_hover_bg,
|
||
set: (value) => {
|
||
config.tab_hover_bg = value;
|
||
window.elementSdk.setConfig({ tab_hover_bg: value });
|
||
}
|
||
},
|
||
{
|
||
get: () => config.table_header_bg || defaultConfig.table_header_bg,
|
||
set: (value) => {
|
||
config.table_header_bg = value;
|
||
window.elementSdk.setConfig({ table_header_bg: value });
|
||
}
|
||
},
|
||
{
|
||
get: () => config.table_row_hover || defaultConfig.table_row_hover,
|
||
set: (value) => {
|
||
config.table_row_hover = value;
|
||
window.elementSdk.setConfig({ table_row_hover: value });
|
||
}
|
||
},
|
||
{
|
||
get: () => config.text_color || defaultConfig.text_color,
|
||
set: (value) => {
|
||
config.text_color = value;
|
||
window.elementSdk.setConfig({ text_color: value });
|
||
}
|
||
}
|
||
],
|
||
borderables: [],
|
||
fontEditable: {
|
||
get: () => config.font_family || defaultConfig.font_family,
|
||
set: (value) => {
|
||
config.font_family = value;
|
||
window.elementSdk.setConfig({ font_family: value });
|
||
}
|
||
},
|
||
fontSizeable: {
|
||
get: () => config.font_size || defaultConfig.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 || defaultConfig.tab_1],
|
||
["tab_2", config.tab_2 || defaultConfig.tab_2],
|
||
["tab_3", config.tab_3 || defaultConfig.tab_3],
|
||
["tab_4", config.tab_4 || defaultConfig.tab_4],
|
||
["header_1", config.header_1 || defaultConfig.header_1],
|
||
["header_2", config.header_2 || defaultConfig.header_2],
|
||
["header_3", config.header_3 || defaultConfig.header_3],
|
||
["header_4", config.header_4 || defaultConfig.header_4],
|
||
["header_5", config.header_5 || defaultConfig.header_5]
|
||
]);
|
||
}
|
||
|
||
</script>
|
||
|
||
<script>
|
||
|
||
// JavaScript/jQuery 部分
|
||
$(document).ready(function() {
|
||
// 复制优惠码功能
|
||
$('#copyCode').click(function() {
|
||
const couponCode = $('#couponCode').val();
|
||
|
||
// 方法1: 使用现代 Clipboard API
|
||
if (navigator.clipboard && window.isSecureContext) {
|
||
navigator.clipboard.writeText(couponCode)
|
||
.then(function() {
|
||
showCopySuccess();
|
||
})
|
||
.catch(function(err) {
|
||
// 如果 Clipboard API 失败，使用备用方法
|
||
copyUsingFallback(couponCode);
|
||
});
|
||
}
|
||
// 方法2: 备用方法
|
||
else {
|
||
copyUsingFallback(couponCode);
|
||
}
|
||
});
|
||
|
||
// 备用复制方法
|
||
function copyUsingFallback(text) {
|
||
// 创建临时 textarea 元素
|
||
const $temp = $('<textarea>');
|
||
$('body').append($temp);
|
||
$temp.val(text).select();
|
||
|
||
try {
|
||
const successful = document.execCommand('copy');
|
||
if (successful) {
|
||
showCopySuccess();
|
||
} else {
|
||
showCopyError();
|
||
}
|
||
} catch (err) {
|
||
showCopyError();
|
||
console.error('复制失败:', err);
|
||
}
|
||
|
||
$temp.remove();
|
||
}
|
||
|
||
// 显示成功提示
|
||
function showCopySuccess() {
|
||
const $message = $('#copyMessage');
|
||
|
||
// 更新消息内容
|
||
$message.find('span').text('The discount code has been copied to the clipboard！');
|
||
$message.removeClass('alert-danger').addClass('alert-success');
|
||
$message.find('i').removeClass('fa-times-circle').addClass('fa-check-circle');
|
||
|
||
// 显示提示
|
||
$message.fadeIn(300);
|
||
|
||
// 3秒后自动隐藏
|
||
setTimeout(function() {
|
||
$message.fadeOut(300);
|
||
}, 3000);
|
||
|
||
// 添加按钮动画效果
|
||
$('#copyCode').html('<i class="fas fa-check"></i> Copied');
|
||
// $('#copyCode').addClass('btn-success').removeClass('btn-outline-secondary');
|
||
|
||
// 2秒后恢复原状
|
||
setTimeout(function() {
|
||
// $('#copyCode').html('<i class="fas fa-copy"></i>');
|
||
$('#copyCode').html('Copy code');
|
||
$('#copyCode').removeClass('btn-success').addClass('btn-outline-secondary');
|
||
}, 2000);
|
||
}
|
||
|
||
// 显示错误提示
|
||
function showCopyError() {
|
||
const $message = $('#copyMessage');
|
||
|
||
$message.find('span').text('Copy failed, please manually select copy');
|
||
$message.removeClass('alert-success').addClass('alert-danger');
|
||
$message.find('i').removeClass('fa-check-circle').addClass('fa-times-circle');
|
||
|
||
$message.fadeIn(300);
|
||
|
||
setTimeout(function() {
|
||
$message.fadeOut(300);
|
||
}, 3000);
|
||
}
|
||
|
||
// 关闭提示的按钮事件
|
||
$('#copyMessage .btn-close').click(function() {
|
||
$('#copyMessage').fadeOut(300);
|
||
});
|
||
});
|
||
</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>
|
||
(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);
|
||
|
||
</script>
|
||
|
||
</html>
|