steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
2001 lines
86 KiB
HTML
2001 lines
86 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>leaderboard 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="leaderboard">
|
|
<!-- banner start -->
|
|
<div class="academy-block-1">
|
|
|
|
<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">Leaderboard</span>
|
|
</h1>
|
|
<div class="banner-contain d-flex align-items-center justify-content-center flex-wrap mt-6">
|
|
<!-- 中间内容 -->
|
|
<div class="text-center mx-4 fade-in">
|
|
<div class="mb-3">
|
|
<div class="banner-desc">
|
|
AIFO's most <span class="text-orange">profitable</span> active traders on display.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="divider-line"></div>
|
|
<div class="countdown-icon">
|
|
<img src="../assets/images/backgrounds/icon/alarm-clock.png" alt="">
|
|
</div>
|
|
<div class="countdown-label" id="countdownLabel">
|
|
Ends in
|
|
</div>
|
|
<div class="countdown-date" id="countdownDate">
|
|
December 7th, 2025
|
|
</div>
|
|
<p class="earnings-text" id="earningsText">You earned <strong>$500</strong> today and rank <strong>45th</strong> among <strong>23,141</strong> users</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<!-- Ranking section start -->
|
|
<section class="ranking-section" id="ranking-section">
|
|
<div class="container mt-5">
|
|
<div class="custom-tab-container">
|
|
<!-- 自定义橙色选项卡 -->
|
|
<ul class="nav custom-nav-tabs" id="customTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="home-tab" data-toggle="tab" href="javascript:void(0)" data-target="#home" role="tab">
|
|
Monthly Rankings
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-tab" data-toggle="tab" href="javascript:void(0)" data-target="#profile" role="tab">
|
|
Event Rankings
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-tab" data-toggle="tab" href="javascript:void(0)" data-target="#contact" role="tab">
|
|
Affiliate Rankings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 选项卡内容 -->
|
|
<div class="tab-content custom-tab-content" id="customTabContent">
|
|
<!-- 选项卡1 -->
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel">
|
|
<section class="podium-section">
|
|
<div class="podium-container"><!-- Second Place -->
|
|
<div class="podium-card second">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Michael Johnson
|
|
</div>
|
|
<div class="podium-handle">
|
|
@mikej
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>UK</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$156K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$523K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
42%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$367K</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- First Place -->
|
|
|
|
<div class="podium-card first">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Henrietta O'Connell
|
|
</div>
|
|
<div class="podium-handle">
|
|
@henrietta
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>USA</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$189K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$619K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
44%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$430K</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- Third Place -->
|
|
<div class="podium-card third">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
<!-- 3rd -->
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Sarah Lee
|
|
</div>
|
|
<div class="podium-handle">
|
|
@sarahlee
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>Canada</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$142K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$498K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
40%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$356K</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- table start -->
|
|
<div class="table-container">
|
|
<table class="leaderboard-table">
|
|
<thead>
|
|
<tr class="table-header">
|
|
<th>#</th>
|
|
<th>User name</th>
|
|
<th>Profit</th>
|
|
<th>Equity</th>
|
|
<th>Gain %</th>
|
|
<th>Account size</th>
|
|
<th>Country</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody><tr class="table-row">
|
|
<td class="rank-cell">4</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="user-name">David Chen</div>
|
|
<div class="user-handle">@dchen</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$128K</td>
|
|
<td class="value-cell">$456K</td>
|
|
<td class="gain-cell">38%</td>
|
|
<td class="value-cell">$328K</td>
|
|
<td class="value-cell">
|
|
|
|
|
|
<div class="ranklist-country-flag">
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>UK</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">5</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">EW</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Emma Wilson</div>
|
|
<div class="user-handle">@emmaw</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$115K</td>
|
|
<td class="value-cell">$432K</td>
|
|
<td class="gain-cell">36%</td>
|
|
<td class="value-cell">$317K</td>
|
|
<td class="value-cell">🇦🇺 Australia</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">6</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">JB</div>
|
|
<div class="user-info">
|
|
<div class="user-name">James Brown</div>
|
|
<div class="user-handle">@jamesbr</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$108K</td>
|
|
<td class="value-cell">$411K</td>
|
|
<td class="gain-cell">35%</td>
|
|
<td class="value-cell">$303K</td>
|
|
<td class="value-cell">🇺🇸 USA</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">7</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">SM</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Sofia Martinez</div>
|
|
<div class="user-handle">@sofiam</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$98K</td>
|
|
<td class="value-cell">$389K</td>
|
|
<td class="gain-cell">33%</td>
|
|
<td class="value-cell">$291K</td>
|
|
<td class="value-cell">🇪🇸 Spain</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">8</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">OT</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Oliver Taylor</div>
|
|
<div class="user-handle">@olivert</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$92K</td>
|
|
<td class="value-cell">$367K</td>
|
|
<td class="gain-cell">32%</td>
|
|
<td class="value-cell">$275K</td>
|
|
<td class="value-cell">🇬🇧 UK</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">9</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">IG</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Isabella Garcia</div>
|
|
<div class="user-handle">@isabellag</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$87K</td>
|
|
<td class="value-cell">$345K</td>
|
|
<td class="gain-cell">31%</td>
|
|
<td class="value-cell">$258K</td>
|
|
<td class="value-cell">🇲🇽 Mexico</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">10</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">LA</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Lucas Anderson</div>
|
|
<div class="user-handle">@lucasa</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$81K</td>
|
|
<td class="value-cell">$328K</td>
|
|
<td class="gain-cell">30%</td>
|
|
<td class="value-cell">$247K</td>
|
|
<td class="value-cell">🇨🇦 Canada</td>
|
|
</tr></tbody>
|
|
</table>
|
|
</div>
|
|
<!-- table end -->
|
|
<!-- 分页显示1-10 -->
|
|
<nav class="custom-pagination d-flex justify-content-center" aria-label="分页导航">
|
|
<ul class="pagination mb-0">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="上一页">
|
|
<span aria-hidden="true"><</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item"><span class="page-link">...</span></li>
|
|
<li class="page-item"><a class="page-link" href="#">10</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="下一页">
|
|
<span aria-hidden="true">></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- 选项卡2 -->
|
|
<div class="tab-pane fade" id="profile" role="tabpanel">
|
|
|
|
<section class="podium-section">
|
|
<div class="podium-container"><!-- Second Place -->
|
|
<div class="podium-card second">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Michael Johnson
|
|
</div>
|
|
<div class="podium-handle">
|
|
@mikej
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>UK</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$156K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$523K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
42%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$367K</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- First Place -->
|
|
|
|
<div class="podium-card first">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Henrietta O'Connell
|
|
</div>
|
|
<div class="podium-handle">
|
|
@henrietta
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>USA</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$189K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$619K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
44%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$430K</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- Third Place -->
|
|
<div class="podium-card third">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
<!-- 3rd -->
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Sarah Lee
|
|
</div>
|
|
<div class="podium-handle">
|
|
@sarahlee
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>Canada</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$142K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$498K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
40%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$356K</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- table start -->
|
|
<div class="table-container">
|
|
<table class="leaderboard-table">
|
|
<thead>
|
|
<tr class="table-header">
|
|
<th>#</th>
|
|
<th>User name</th>
|
|
<th>Profit</th>
|
|
<th>Equity</th>
|
|
<th>Gain %</th>
|
|
<th>Account size</th>
|
|
<th>Country</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody"><tr class="table-row">
|
|
<td class="rank-cell">4</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="user-name">David Chen</div>
|
|
<div class="user-handle">@dchen</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$128K</td>
|
|
<td class="value-cell">$456K</td>
|
|
<td class="gain-cell">38%</td>
|
|
<td class="value-cell">$328K</td>
|
|
<td class="value-cell">
|
|
|
|
|
|
<div class="ranklist-country-flag">
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>UK</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">5</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">EW</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Emma Wilson</div>
|
|
<div class="user-handle">@emmaw</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$115K</td>
|
|
<td class="value-cell">$432K</td>
|
|
<td class="gain-cell">36%</td>
|
|
<td class="value-cell">$317K</td>
|
|
<td class="value-cell">🇦🇺 Australia</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">6</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">JB</div>
|
|
<div class="user-info">
|
|
<div class="user-name">James Brown</div>
|
|
<div class="user-handle">@jamesbr</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$108K</td>
|
|
<td class="value-cell">$411K</td>
|
|
<td class="gain-cell">35%</td>
|
|
<td class="value-cell">$303K</td>
|
|
<td class="value-cell">🇺🇸 USA</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">7</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">SM</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Sofia Martinez</div>
|
|
<div class="user-handle">@sofiam</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$98K</td>
|
|
<td class="value-cell">$389K</td>
|
|
<td class="gain-cell">33%</td>
|
|
<td class="value-cell">$291K</td>
|
|
<td class="value-cell">🇪🇸 Spain</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">8</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">OT</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Oliver Taylor</div>
|
|
<div class="user-handle">@olivert</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$92K</td>
|
|
<td class="value-cell">$367K</td>
|
|
<td class="gain-cell">32%</td>
|
|
<td class="value-cell">$275K</td>
|
|
<td class="value-cell">🇬🇧 UK</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">9</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">IG</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Isabella Garcia</div>
|
|
<div class="user-handle">@isabellag</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$87K</td>
|
|
<td class="value-cell">$345K</td>
|
|
<td class="gain-cell">31%</td>
|
|
<td class="value-cell">$258K</td>
|
|
<td class="value-cell">🇲🇽 Mexico</td>
|
|
</tr><tr class="table-row">
|
|
<td class="rank-cell">10</td>
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">LA</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Lucas Anderson</div>
|
|
<div class="user-handle">@lucasa</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="value-cell">$81K</td>
|
|
<td class="value-cell">$328K</td>
|
|
<td class="gain-cell">30%</td>
|
|
<td class="value-cell">$247K</td>
|
|
<td class="value-cell">🇨🇦 Canada</td>
|
|
</tr></tbody>
|
|
</table>
|
|
</div>
|
|
<!-- table end -->
|
|
<!-- page show 1-10 -->
|
|
<nav class="custom-pagination d-flex justify-content-center" aria-label="分页导航">
|
|
<ul class="pagination mb-0">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="上一页">
|
|
<span aria-hidden="true"><</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item"><span class="page-link">...</span></li>
|
|
<li class="page-item"><a class="page-link" href="#">10</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="下一页">
|
|
<span aria-hidden="true">></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- 选项卡3 -->
|
|
<div class="tab-pane fade" id="contact" role="tabpanel">
|
|
<section class="podium-section">
|
|
<div class="podium-container"><!-- Second Place -->
|
|
<div class="podium-card second">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Michael Johnson
|
|
</div>
|
|
<div class="podium-handle">
|
|
@mikej
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>UK</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$156K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$523K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
42%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$367K</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- First Place -->
|
|
|
|
<div class="podium-card first">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Henrietta O'Connell
|
|
</div>
|
|
<div class="podium-handle">
|
|
@henrietta
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>USA</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$189K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$619K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
44%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$430K</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- Third Place -->
|
|
<div class="podium-card third">
|
|
<div class="podium-card-dots"></div>
|
|
<div class="rank-badge">
|
|
<!-- 3rd -->
|
|
</div>
|
|
<div class="podium-content">
|
|
<div class="podium-top">
|
|
<div class="podium-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
</div>
|
|
</div>
|
|
<div class="podium-user-info">
|
|
<div class="podium-name">
|
|
Sarah Lee
|
|
</div>
|
|
<div class="podium-handle">
|
|
@sarahlee
|
|
</div>
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>Canada</span>
|
|
</div>
|
|
</div>
|
|
<div class="podium-stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Profit
|
|
</div>
|
|
<div class="stat-value">
|
|
$142K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Equity
|
|
</div>
|
|
<div class="stat-value">
|
|
$498K
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">
|
|
Gain %
|
|
</div>
|
|
<div class="stat-value gain">
|
|
40%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="account-size"><span class="account-size-label">Account size</span> <span class="account-size-value">$356K</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- table start -->
|
|
<div class="table-container">
|
|
<table class="leaderboard-table">
|
|
<thead>
|
|
<tr class="table-header">
|
|
|
|
<th>User name</th>
|
|
<th>Rank</th>
|
|
<th>Funded Traders</th>
|
|
<th>Total Earnings</th>
|
|
<th>Country</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody">
|
|
<tr class="table-row">
|
|
|
|
<td>
|
|
<div class="user-cell">
|
|
<div class="user-avatar">
|
|
<img class="lazy-img" alt="AIFO 预览缩略图" src="../assets/images/backgrounds/avator1.png" _mstalt="446914" _msthash="46">
|
|
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="user-name">David Chen</div>
|
|
<div class="user-handle">@dchen</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="rank-cell">4</td>
|
|
<td class="value-cell">$128K</td>
|
|
|
|
<td class="value-cell">$328K</td>
|
|
<td class="value-cell">
|
|
|
|
|
|
<div class="ranklist-country-flag">
|
|
<div class="podium-country">
|
|
<span class="podium-country-flag">
|
|
<img src="../assets/images/backgrounds/flag-lr.png" alt="">
|
|
</span>
|
|
<span>UK</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- table end -->
|
|
<!-- 分页显示1-10 -->
|
|
<nav class="custom-pagination d-flex justify-content-center" aria-label="分页导航">
|
|
<ul class="pagination mb-0">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="上一页">
|
|
<span aria-hidden="true"><</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item"><span class="page-link">...</span></li>
|
|
<li class="page-item"><a class="page-link" href="#">10</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="下一页">
|
|
<span aria-hidden="true">></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Ranking section end -->
|
|
|
|
|
|
<!-- 6 start-->
|
|
<section class="payout-section py-5" id="payout-section">
|
|
<div class="container">
|
|
<div class="text-center title-contaion">
|
|
<h1 class="display-4 font-weight-bold d-flex flex-wrap align-items-center justify-content-center"><span class="text-orange mr-2 fade-in">Payout</span>
|
|
<div class="title-icon-box mx-2">
|
|
<img src="../assets/images/backgrounds/icon/payout-icon.png" alt="Funded Trading" class="floating-img">
|
|
</div><span class="fade-in" style="color: var(--white-primary);">Process</span></h1>
|
|
</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"></div>
|
|
<div class="node-icon to_left">
|
|
<img src="../assets/images/backgrounds/icon/Component 70.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 order-lg-3 mb-3 mb-lg-0">
|
|
<div class="step-card mr-lg-auto">
|
|
<div class="node-dot mb-2 mb-show"></div>
|
|
<div class="step-label fade-in">
|
|
Step 2
|
|
</div>
|
|
<h3 class="font-weight-bold mb-2 font-heading-1" style="font-size: 19px;">Generate A Profit</h3>
|
|
<p class="mb-0 fade-in">Become an AIFO trader and start trading with real capital</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- Timeline Item 3 -->
|
|
<div class="timeline-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-5 order-lg-1 mb-3 mb-lg-0 text-right">
|
|
<div class="step-card ml-lg-auto">
|
|
<div class="node-dot mb-2 mb-show"></div>
|
|
<div class="step-label fade-in">
|
|
Step 3
|
|
</div>
|
|
<h3 class="font-weight-bold mb-2 font-heading-1" style="font-size: 19px;">Consolidate Your Earnings</h3>
|
|
<p class="mb-0 fade-in">Accumulate profits through trading with up to 90% profit split</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 order-lg-2 d-none d-lg-flex justify-content-center">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<div class="node-dot mb-2" style="animation-delay: 0.4s;"></div>
|
|
<div class="node-icon to_right">
|
|
<img src="../assets/images/backgrounds/icon/Component 71.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 order-lg-3"></div>
|
|
</div>
|
|
</div><!-- Timeline Item 4 -->
|
|
<div class="timeline-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-5 order-lg-1"></div>
|
|
<div class="col-lg-2 order-lg-2 d-none d-lg-flex justify-content-center">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<div class="node-dot mb-2" style="animation-delay: 0.6s;"></div>
|
|
<div class="node-icon to_left">
|
|
<img src="../assets/images/backgrounds/icon/Component 72.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 order-lg-3 mb-3 mb-lg-0">
|
|
<div class="step-card mr-lg-auto">
|
|
<div class="node-dot mb-2 mb-show"></div>
|
|
<div class="step-label fade-in">
|
|
Step 4
|
|
</div>
|
|
<h3 class="font-weight-bold mb-2 font-heading-1" style="font-size: 19px;">Request A Payout</h3>
|
|
<p class="mb-0 fade-in">Submit withdrawal request anytime to access your profits</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- Timeline Item 5 -->
|
|
<div class="timeline-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-5 order-lg-1 text-right">
|
|
<div class="step-card ml-lg-auto">
|
|
<div class="node-dot mb-2 mb-show"></div>
|
|
<div class="step-label fade-in">
|
|
Step 5
|
|
</div>
|
|
<h3 class="font-weight-bold mb-2 font-heading-1" style="font-size: 19px;">Fast Withdrawal Times</h3>
|
|
<p class="mb-0 fade-in">Processed within 24 hours, funds arrive safely to your account</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 order-lg-2 d-none d-lg-flex justify-content-center">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<div class="node-dot mb-2" style="animation-delay: 0.8s;"></div>
|
|
<div class="node-icon to_right">
|
|
<img src="../assets/images/backgrounds/icon/Component 73.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 order-lg-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-5"><button class="btn btn-default btn-lg rounded-lg px-5 py-3">Start Challenge</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- payment-methods -->
|
|
<section class="payment-methods-section py-7">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2 class="display-4 font-weight-bold"><span style="color: var(--white-primary);">Payment </span> <span class="text-orange">Methods</span></h2>
|
|
</div>
|
|
<div class="pm-marquee position-relative">
|
|
<div class="pm-fade pm-fade-left"></div>
|
|
<div class="pm-fade pm-fade-right"></div>
|
|
<div class="pm-track">
|
|
<div class="pm-group">
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#003087">
|
|
PayPal
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#9FE870">
|
|
Wise
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#862165">
|
|
Skrill
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#0075EB">
|
|
Revolut
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#1F1F1F">
|
|
Bank Transfer
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#F7931A">
|
|
Crypto
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
</div><!-- Duplicate for seamless loop -->
|
|
<div class="pm-group" aria-hidden="true">
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#003087">
|
|
PayPal
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#9FE870">
|
|
Wise
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#862165">
|
|
Skrill
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#0075EB">
|
|
Revolut
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#1F1F1F">
|
|
Bank Transfer
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="pm-item">
|
|
<svg class="pm-logo" viewBox="0 0 124 33" fill="none"><text x="62" y="22" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#F7931A">
|
|
Crypto
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- payment-methods End -->
|
|
|
|
<!-- GROWTH STORIES -->
|
|
<section class="section" id="stories">
|
|
<div class="container container-narrow fade-in" id="storiesBlock">
|
|
<h1 class="heading h1 fade-in"> <span class="text-orange">Growth</span> Stories</h1>
|
|
<div class="growth-carousel mt-3">
|
|
<div class="d-flex align-items-center justify-content-between mb-7">
|
|
<p class="small-muted fade-in">See how members are building confidence, sharpening skills, and reaching <span class="text-orange">new milestones</span> with AIFO. </p>
|
|
<div class="growth-controls">
|
|
<button class="btn growthPrev" id="growthPrev"></button>
|
|
<button class="btn growthNext" id="growthNext"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 轮播图1 -->
|
|
<div class="carousel-wrapper">
|
|
|
|
<!-- 渐变遮罩 -->
|
|
<div class="gradient-left"></div>
|
|
<div class="gradient-right"></div>
|
|
|
|
<!-- 轮播主体 -->
|
|
<div class="carousel-container-1">
|
|
<div class="carousel-track">
|
|
<!-- Page 1 -->
|
|
<div class="carousel-item">
|
|
<img class="left-img" src="../assets/images/backgrounds/academy/academy_imge_1.png" alt="">
|
|
<div class="content">
|
|
<h2>Tim (USA)</h2>
|
|
<p class="fade-in">“ I've been trading for years, and this is by far the best experience I've had with a prop firm.” .</p>
|
|
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
|
<a href="#" class="btn btn-default btn-watch d-flex align-items-center"><span class="icon iconfont icon-play-1"></span> Watch On YouTube</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page 2 -->
|
|
<div class="carousel-item">
|
|
<img class="left-img" src="../assets/images/backgrounds/academy/academy_imge_1.png" alt="">
|
|
<div class="content">
|
|
<h2>Tim (USA)</h2>
|
|
<p class="fade-in">“ I've been trading for years, and this is by far the best experience I've had with a prop firm.” .</p>
|
|
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
|
<a href="#" class="btn btn-start-challenge btn-watch d-flex align-items-center"><span class="icon iconfont icon-play-1"></span> Watch On YouTube</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page 3 -->
|
|
<div class="carousel-item">
|
|
<img class="left-img" src="../assets/images/backgrounds/academy/academy_imge_1.png" alt="">
|
|
<div class="content">
|
|
<h2>Tim (USA)</h2>
|
|
<p class="fade-in">“ I've been trading for years, and this is by far the best experience I've had with a prop firm.” .</p>
|
|
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
|
<a href="#" class="btn btn-start-challenge btn-watch"><span class="icon iconfont icon-play-1"></span> Watch On YouTube</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 指示点 -->
|
|
<div class="dots"></div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 第八楼层 start -->
|
|
<section id="section-10" class="slice slice-lg" data-delimiter="1">
|
|
<div class="bg_light">
|
|
<div class="container">
|
|
<div class="mb-md text-center fade-in">
|
|
<h1 class="heading h1">Join <img src="../assets/images/backgrounds/Frame 1000008381.png" alt="Funded Trading" class="tx-img floating-img"></h1>
|
|
<h1 class="heading h1"> <img src="../assets/images/backgrounds/Frame 1000008386.png" alt="Funded Trading" class="zfj-img floating-img"><span class="text-orange">Our Community</span></h1>
|
|
<div class="fluid-paragraph text-center mt-4">
|
|
<p class="lead lh-180">
|
|
Join a <span class="text-orange">supportive network</span> of traders where you can <br>share insights, learn together, and celebrate <br>every step of your journey.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center ">
|
|
<div class="col-auto">
|
|
<div class="hero-buttons d-flex flex-wrap justify-content-center fade-in">
|
|
<a href="#" class="btn btn-start-challenge"><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"><img src="../assets/images/backgrounds/btn-icon-2.png" alt="Funded Trading" class="floating-img">
|
|
Join Telegram
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 第八楼层 End -->
|
|
|
|
|
|
</main>
|
|
|
|
<div id="footer-container"></div>
|
|
|
|
<!-- Core -->
|
|
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
|
|
<script src="../assets/vendor/popper/popper.min.js"></script>
|
|
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
|
|
<!-- FontAwesome 5 -->
|
|
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
|
<!-- Page plugins -->
|
|
<script src="../assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
|
|
<script src="../assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
|
|
<script src="../assets/vendor/input-mask/input-mask.min.js"></script>
|
|
<script src="../assets/vendor/nouislider/js/nouislider.min.js"></script>
|
|
<script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
|
|
<!-- Theme JS -->
|
|
<script src="../assets/js/theme.js"></script>
|
|
<!-- Top code bar behavior -->
|
|
|
|
<script src="/js/layout.js"></script>
|
|
</body>
|
|
|
|
|
|
<script>
|
|
/* =========================
|
|
Intersection fade-in (pixel-precise)
|
|
and lazy loaders for floor loading
|
|
========================= */
|
|
(function($){
|
|
const io = new IntersectionObserver((entries, obs) => {
|
|
entries.forEach(e=>{
|
|
if(e.isIntersecting){
|
|
$(e.target).addClass('show');
|
|
obs.unobserve(e.target);
|
|
}
|
|
});
|
|
},{threshold:0.12});
|
|
|
|
$(function(){
|
|
$('.fade-in').each(function(){ io.observe(this); });
|
|
});
|
|
})(jQuery);
|
|
|
|
/* =========================
|
|
Lazy images and floor-load logic
|
|
========================= */
|
|
(function($){
|
|
const loaderIO = new IntersectionObserver((entries, obs) => {
|
|
entries.forEach(ent=>{
|
|
if(ent.isIntersecting){
|
|
const $el = $(ent.target);
|
|
|
|
// lazy images
|
|
if($el.hasClass('lazy-img')){
|
|
const src = $el.data('src');
|
|
if(src) $el.attr('src', src).removeAttr('data-src').removeClass('lazy-img');
|
|
obs.unobserve(ent.target);
|
|
}
|
|
|
|
// load growth stories and courses when their blocks appear
|
|
if($el.is('#storiesBlock')){ loadGrowth(); obs.unobserve(ent.target); }
|
|
if($el.is('#coursesBlock')){ loadCourses(); obs.unobserve(ent.target); }
|
|
}
|
|
});
|
|
},{root:null, threshold:0.15});
|
|
|
|
$(function(){
|
|
$('.lazy-img, #storiesBlock, #coursesBlock').each(function(){ loaderIO.observe(this); });
|
|
});
|
|
|
|
/* ========== Growth Stories ========== */
|
|
let growthLoaded=false;
|
|
function loadGrowth(){
|
|
if(growthLoaded) return;
|
|
growthLoaded = true;
|
|
|
|
|
|
}
|
|
|
|
/* ========== Courses ========== */
|
|
let coursesLoaded=false;
|
|
function loadCourses(){
|
|
if(coursesLoaded) return;
|
|
coursesLoaded=true;
|
|
|
|
const courses = [
|
|
{title:'Basics', thumb:'https://picsum.photos/id/1018/640/360', lessons:12},
|
|
{title:'Forex 101', thumb:'https://picsum.photos/id/1016/640/360', lessons:8},
|
|
{title:'Risk Management', thumb:'https://picsum.photos/id/1019/640/360', lessons:6},
|
|
{title:'Advanced Tactics', thumb:'https://picsum.photos/id/1022/640/360', lessons:10},
|
|
{title:'Live Sessions', thumb:'https://picsum.photos/id/1021/640/360', lessons:5},
|
|
{title:'Performance Review', thumb:'https://picsum.photos/id/1032/640/360', lessons:7}
|
|
];
|
|
|
|
const $grid = $('#courseGrid').empty();
|
|
courses.forEach(c=>{
|
|
const $card = $(`
|
|
<div class="course-card">
|
|
<img class="course-thumb" loading="lazy" src="${c.thumb}" alt="${c.title}">
|
|
<h5 style="margin-top:0.5rem">${c.title}</h5>
|
|
<p class="small-muted">Lessons: ${c.lessons}</p>
|
|
<div style="margin-top:0.75rem"><a class="btn btn-outline-light btn-sm" href="#">View</a></div>
|
|
</div>
|
|
`);
|
|
$grid.append($card);
|
|
});
|
|
}
|
|
|
|
window.loadGrowth = loadGrowth;
|
|
window.loadCourses = loadCourses;
|
|
|
|
})(jQuery);
|
|
|
|
/* =========================
|
|
Growth carousel: basic translateX carousel
|
|
autoplay + controls + pause on hover
|
|
========================= */
|
|
// function initGrowthCarousel(){
|
|
// const $wrap = $('#growthTrack');
|
|
// let idx = 0;
|
|
// let autoplay = true;
|
|
// let timer = null;
|
|
|
|
// function update(){
|
|
// const $items = $wrap.children();
|
|
// if(!$items.length) return;
|
|
// const w = $items.first().outerWidth(true);
|
|
// $wrap.css('transform', `translateX(${-idx * w}px)`);
|
|
// // update dots styling (if using growthDots)
|
|
// $('#growthDots button').removeClass('active');
|
|
// $('#growthDots button[data-i="'+idx+'"]').addClass('active');
|
|
// }
|
|
|
|
// function next(){
|
|
// idx = (idx + 1) % $wrap.children().length;
|
|
// update();
|
|
// }
|
|
// function prev(){
|
|
// idx = (idx - 1 + $wrap.children().length) % $wrap.children().length;
|
|
// update();
|
|
// }
|
|
|
|
// $('#growthNext').off('click').on('click', ()=>{ autoplay=false; next(); });
|
|
// $('#growthPrev').off('click').on('click', ()=>{ autoplay=false; prev(); });
|
|
// $('#growthDots').on('click','button', function(){ autoplay=false; idx = Number($(this).data('i')); update(); });
|
|
|
|
// function startLoop(){
|
|
// if(timer) clearInterval(timer);
|
|
// timer = setInterval(()=>{ if(autoplay) next(); }, 3500);
|
|
// }
|
|
// startLoop();
|
|
|
|
// $wrap.on('mouseenter touchstart', ()=> autoplay=false);
|
|
// $wrap.on('mouseleave touchend', ()=> autoplay=true);
|
|
// }
|
|
|
|
/* =========================
|
|
Video modal play: inject iframe
|
|
========================= */
|
|
(function($){
|
|
$('#playBtn').on('click', function(){
|
|
const vid = $('#videoPreview').data('video-id');
|
|
//const src = `https://www.youtube.com/embed/${vid}?autoplay=1&rel=0`;
|
|
const src = `http://192.168.1.175/Lark20251101-104552.mp4`;
|
|
$('#videoContainer').html(`<iframe src="${src}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%"></iframe>`);
|
|
$('#videoModal').modal('show');
|
|
});
|
|
|
|
$('#videoModal').on('hidden.bs.modal', function(){ $('#videoContainer').empty(); });
|
|
|
|
// fallback: ensure lazy imgs loaded if they still have data-src
|
|
$(function(){
|
|
$('.lazy-img').each(function(){
|
|
const $i = $(this);
|
|
if($i.attr('data-src')) $i.attr('src',$i.attr('data-src')).removeAttr('data-src');
|
|
});
|
|
});
|
|
})(jQuery);
|
|
|
|
/* =========================
|
|
initial reveal sequencing
|
|
========================= */
|
|
$(function(){
|
|
setTimeout(()=> $('#heroBlock').addClass('show'), 160);
|
|
setTimeout(()=> $('#videoPreview').addClass('show'), 420);
|
|
});
|
|
|
|
/* =========================
|
|
Smooth anchor scroll (if needed)
|
|
========================= */
|
|
$(document).on('click','a[href^="#"]', function(e){
|
|
const target = $($(this).attr('href'));
|
|
if(target.length){ e.preventDefault(); $('html,body').animate({scrollTop: target.offset().top - 24}, 600); }
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
/* ===========================================================
|
|
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>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// 分页点击效果
|
|
$('.custom-pagination .page-link').on('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 移除所有活跃状态
|
|
$(this).closest('.pagination').find('.page-item').removeClass('active');
|
|
|
|
// 给当前点击的页码添加活跃状态
|
|
$(this).parent().addClass('active');
|
|
|
|
// 这里可以添加实际的分页数据加载逻辑
|
|
console.log('点击页码：', $(this).text());
|
|
});
|
|
|
|
// 选项卡切换时的事件
|
|
$('.custom-nav-tabs .nav-link').on('shown.bs.tab', function(e) {
|
|
console.log('切换到选项卡：', $(e.target).text());
|
|
});
|
|
});
|
|
</script>
|
|
</html>
|