steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
1473 lines
56 KiB
HTML
1473 lines
56 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>Affiliate 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="affiliate">
|
||
<!-- 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">Affiliate <img src="../assets/images/backgrounds/icon/aflidate-1.png" class="heading-icon floating-img"> <span class="text-orange">Program </span></span>
|
||
|
||
</h1>
|
||
<div class="banner-contain d-flex align-items-center justify-content-center flex-wrap mt-6">
|
||
|
||
<!-- 中间内容 -->
|
||
<div class="text-center mx-4 fade-in">
|
||
<div class="mb-3">
|
||
<div class="banner-desc">
|
||
Expand our global network by introducing skilled traders. <span class="text-orange">Get rewarded</span> for every referral you bring and enjoy the advantages of partnering with us on our journey.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Buttons -->
|
||
<div class="hero-buttons center-buttons fade-in">
|
||
<a href="#" class="btn btn-start-challenge">Become Affiliate</a>
|
||
<!-- <a href="#" class="btn btn-default">Become Affiliate</a> -->
|
||
<a href="#" class="btn btn-free-trial">
|
||
Affiliate Login
|
||
<span class="btn-arrow">›</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<!-- 第二楼层 -->
|
||
<section class="slice slice-lg" data-delimiter="1">
|
||
<div class="container">
|
||
<div class="mb-md text-center fade-in">
|
||
<h1 class="heading h1">Why should you</h1>
|
||
<h1 class="heading h1"> partner with<span class="text-orange">AIFO</span>? </h1>
|
||
</div>
|
||
<div class="row text-center card-style-2 d-flex justify-content-center">
|
||
<div class="col-md-4 mb-4 fade-in">
|
||
<div class="card h-100 custom-rounded">
|
||
<div class="mb-3 ustify-content-center align-items-center"><i class="icon-box w-9"></i></div>
|
||
<p>Unbeatable Affiliate Commissions!</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-7"></i></div>
|
||
<p>Super Fast Payouts!</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>
|
||
<p>No Need to Start from Scratch</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-11"></i></div>
|
||
<p>Figma community. </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-10"></i></div>
|
||
<p>Dedicated Affiliate Managers. </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 第四楼层 start-->
|
||
<section class="section start-earning">
|
||
<div class="container">
|
||
<div class="mb-md text-center fade-in">
|
||
<h1 class="heading h1">Start <span class="text-orange">Earning!</span></h1>
|
||
</div>
|
||
|
||
<div class="row justify-content-center">
|
||
<div class="col-12 col-md-6 col-lg-4 fade-in">
|
||
<div class="tier-card card-v1" data-tier="v1">
|
||
<div class="tier-badge badge-v1">
|
||
|
||
</div>
|
||
<div class="role-pill role-v1">
|
||
Market Maker
|
||
</div>
|
||
<div class="tier-range">
|
||
30≤A≤50
|
||
</div>
|
||
<div class="commission-label">
|
||
Commission
|
||
</div>
|
||
<div class="commission-value"><span class="percentage-v1">5%</span> <span class="commission-text"> on every purchased</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- V2 Card -->
|
||
<div class="col-12 col-md-6 col-lg-4 fade-in">
|
||
<div class="tier-card card-v2" data-tier="v2">
|
||
<div class="tier-badge badge-v2">
|
||
|
||
</div>
|
||
<div class="role-pill role-v2">
|
||
Trade Master
|
||
</div>
|
||
<div class="tier-range">
|
||
50≤A≤100
|
||
</div>
|
||
<div class="commission-label">
|
||
Commission
|
||
</div>
|
||
<div class="commission-value"><span class="percentage-v2">10%</span> <span class="commission-text"> on every purchased</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- V3 Card -->
|
||
<div class="col-12 col-md-6 col-lg-4 fade-in">
|
||
<div class="tier-card card-v3" data-tier="v3">
|
||
<div class="tier-badge badge-v3">
|
||
|
||
</div>
|
||
<div class="role-pill role-v3">
|
||
Market Leader
|
||
</div>
|
||
<div class="tier-range">
|
||
100+
|
||
</div>
|
||
<div class="commission-label">
|
||
Commission
|
||
</div>
|
||
<div class="commission-value"><span class="percentage-v3">15%</span> <span class="commission-text"> on every purchased</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 text-center mt-4"><button class="cta-button" id="affiliateBtn"> Affiliate Registration </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- 第四楼层 end-->
|
||
|
||
|
||
|
||
<section class="section start-earning">
|
||
<div class="container">
|
||
|
||
<section class="affiliate-banner aifo-affiliate-banner">
|
||
<style>
|
||
.aifo-affiliate-banner{
|
||
--brand-orange:#F98715;
|
||
--site-white:#F9F9F9;
|
||
--bg-dark:#0B0B0B;
|
||
position:relative;
|
||
min-height:520px;
|
||
/* background: linear-gradient(135deg, #0B0B0B 0%, #0F0F0F 50%, #1a1008 100%);
|
||
padding:60px 20px 40px;
|
||
overflow:hidden;
|
||
font-family: Inter, system-ui, -apple-system, sans-serif; */
|
||
}
|
||
|
||
.aifo-affiliate-banner::before{
|
||
content:'';
|
||
/* position:absolute; inset:0;
|
||
background:
|
||
repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.06) 39px, rgba(255,255,255,0.06) 40px),
|
||
repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.06) 39px, rgba(255,255,255,0.06) 40px);
|
||
pointer-events:none; */
|
||
}
|
||
.aifo-affiliate-banner::after{
|
||
content:'';
|
||
position:absolute;
|
||
top:-50%; right:-20%;
|
||
width:80%; height:200%;
|
||
background: radial-gradient(ellipse at center, rgba(249,135,21,0.15) 0%, rgba(249,135,21,0.05) 40%, transparent 70%);
|
||
pointer-events:none;
|
||
}
|
||
|
||
.aifo-affiliate-banner .banner-content{
|
||
position:relative; z-index:10;
|
||
/* max-width:900px; margin:0 auto; */
|
||
}
|
||
.aifo-affiliate-banner .main-title{ text-align:center; margin-bottom:40px; }
|
||
.aifo-affiliate-banner .main-title h1{ font-size:56px; font-weight:800; line-height:1.1; margin:0; }
|
||
.aifo-affiliate-banner .title-white{ color:var(--site-white); }
|
||
.aifo-affiliate-banner .title-orange{ color:var(--brand-orange); }
|
||
|
||
.aifo-affiliate-banner .cards-wrapper{
|
||
position:relative;
|
||
display:flex;
|
||
justify-content:center;
|
||
align-items:flex-end;
|
||
gap:16px;
|
||
padding:20px 0;
|
||
flex-wrap:nowrap;
|
||
}
|
||
|
||
.aifo-affiliate-banner .connection-lines{
|
||
position:absolute;
|
||
top:0; left:50%;
|
||
transform:translateX(-50%);
|
||
width:100%; height:100%;
|
||
pointer-events:none;
|
||
z-index:1;
|
||
}
|
||
.aifo-affiliate-banner .connection-line-top{
|
||
position:absolute;
|
||
top:15%; left:50%;
|
||
transform:translateX(-30%);
|
||
width:180px; height:60px;
|
||
border:1px dashed rgba(255,255,255,0.35);
|
||
border-bottom:none; border-left:none;
|
||
border-radius:0 10px 0 0;
|
||
}
|
||
.aifo-affiliate-banner .connection-line-bottom{
|
||
position:absolute;
|
||
bottom:25%; left:50%;
|
||
transform:translateX(-70%);
|
||
width:180px; height:60px;
|
||
border:1px dashed rgba(255,255,255,0.35);
|
||
border-top:none; border-right:none;
|
||
border-radius:0 0 0 10px;
|
||
}
|
||
|
||
.aifo-affiliate-banner .tier-card{
|
||
position:relative;
|
||
width:250px;
|
||
min-height:310px;
|
||
background: linear-gradient(180deg, #1A1A1A 0%, #0B0B0B 100%);
|
||
border-radius:16px;
|
||
padding:24px;
|
||
border:1px solid rgba(255,255,255,0.16);
|
||
box-shadow:
|
||
0 18px 40px rgba(0,0,0,0.55),
|
||
0 0 30px rgba(249,135,21,0.08),
|
||
inset 0 0 0 1px rgba(255,255,255,0.07),
|
||
inset 0 1px 0 rgba(255,255,255,0.12);
|
||
z-index:5;
|
||
overflow:hidden;
|
||
flex-shrink:0;
|
||
}
|
||
.aifo-affiliate-banner .tier-card.tier-1{ transform:translateY(35px); z-index:4; }
|
||
.aifo-affiliate-banner .tier-card.tier-2{
|
||
transform:translateY(12px); z-index:6;
|
||
box-shadow:
|
||
0 18px 40px rgba(0,0,0,0.55),
|
||
0 0 30px rgba(249,135,21,0.08),
|
||
inset 0 0 0 1px rgba(255,255,255,0.07),
|
||
inset 0 1px 0 rgba(255,255,255,0.12),
|
||
inset 0 0 18px rgba(249,135,21,0.08);
|
||
}
|
||
|
||
.aifo-affiliate-banner .tier-card:hover{
|
||
-webkit-box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
|
||
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
|
||
}
|
||
|
||
.aifo-affiliate-banner .tier-card.tier-3{
|
||
transform:translateY(-5px); z-index:5;
|
||
box-shadow:
|
||
0 18px 40px rgba(0,0,0,0.55),
|
||
0 0 30px rgba(249,135,21,0.08),
|
||
inset 0 0 0 1px rgba(255,255,255,0.07),
|
||
inset 0 1px 0 rgba(255,255,255,0.10),
|
||
inset 0 -18px 30px rgba(0,0,0,0.35);
|
||
}
|
||
|
||
.aifo-affiliate-banner .tier-card::before{
|
||
content:'';
|
||
position:absolute; inset:0;
|
||
background: rgba(255,255,255,0.06);
|
||
border-radius:16px;
|
||
pointer-events:none;
|
||
z-index:1;
|
||
}
|
||
|
||
.aifo-affiliate-banner .card-glow{
|
||
position:absolute;
|
||
top:-15%; left:-15%;
|
||
width:70%; height:70%;
|
||
border-radius:50%;
|
||
filter:blur(50px);
|
||
pointer-events:none;
|
||
z-index:2;
|
||
}
|
||
.aifo-affiliate-banner .tier-1 .card-glow{
|
||
background: radial-gradient(ellipse at top left,
|
||
rgba(242,179,106,0.35) 0%,
|
||
rgba(249,135,21,0.28) 30%,
|
||
transparent 65%);
|
||
}
|
||
.aifo-affiliate-banner .tier-2 .card-glow{
|
||
background: radial-gradient(ellipse at top left,
|
||
rgba(249,135,21,0.42) 0%,
|
||
rgba(249,135,21,0.32) 30%,
|
||
transparent 65%);
|
||
}
|
||
.aifo-affiliate-banner .tier-3 .card-glow{
|
||
background: radial-gradient(ellipse at top left,
|
||
rgba(214,90,47,0.34) 0%,
|
||
rgba(201,75,42,0.26) 30%,
|
||
transparent 65%);
|
||
}
|
||
|
||
.aifo-affiliate-banner .watermark-logo{
|
||
position:absolute;
|
||
top:15px; right:10px;
|
||
width:120px; height:120px;
|
||
opacity:0.11;
|
||
pointer-events:none;
|
||
z-index:3;
|
||
}
|
||
|
||
.aifo-affiliate-banner .card-content{ position:relative; z-index:4; }
|
||
.aifo-affiliate-banner .tier-header{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
|
||
.aifo-affiliate-banner .tier-icon{
|
||
width:32px; height:32px; border-radius:50%;
|
||
display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.aifo-affiliate-banner .tier-1 .tier-icon{
|
||
background: linear-gradient(135deg, rgba(255,200,150,0.3) 0%, rgba(255,180,120,0.2) 100%);
|
||
border:1px solid rgba(255,200,150,0.4);
|
||
}
|
||
.aifo-affiliate-banner .tier-2 .tier-icon{
|
||
background: linear-gradient(135deg, rgba(249,135,21,0.3) 0%, rgba(249,135,21,0.2) 100%);
|
||
border:1px solid rgba(249,135,21,0.4);
|
||
}
|
||
.aifo-affiliate-banner .tier-3 .tier-icon{
|
||
background: linear-gradient(135deg, rgba(230,90,30,0.3) 0%, rgba(230,90,30,0.2) 100%);
|
||
border:1px solid rgba(230,90,30,0.4);
|
||
}
|
||
.aifo-affiliate-banner .tier-icon svg{ width:16px; height:16px; }
|
||
.aifo-affiliate-banner .tier-1 .tier-icon svg{ fill:#FFD4A8; }
|
||
.aifo-affiliate-banner .tier-2 .tier-icon svg{ fill:#F98715; }
|
||
.aifo-affiliate-banner .tier-3 .tier-icon svg{ fill:#E65A1E; }
|
||
|
||
.aifo-affiliate-banner .tier-title{ font-size:23px; font-weight:700; color:var(--site-white); }
|
||
|
||
.aifo-affiliate-banner .referrals-label{
|
||
display:flex; align-items:center; gap:6px;
|
||
font-size:13px; color:rgba(249,249,249,0.75);
|
||
margin-bottom:4px;
|
||
}
|
||
.aifo-affiliate-banner .referrals-label svg{ width:14px; height:14px; fill:var(--brand-orange); }
|
||
.aifo-affiliate-banner .referrals-value{ display:flex; align-items:baseline; gap:6px; }
|
||
.aifo-affiliate-banner .referrals-number{ font-size:36px; font-weight:700; color:var(--site-white); line-height:1; }
|
||
.aifo-affiliate-banner .referrals-unit{ font-size:13px; font-weight:600; color:var(--brand-orange); }
|
||
|
||
.aifo-affiliate-banner .commission-section{ margin-top:16px; }
|
||
.aifo-affiliate-banner .commission-label{ font-size:12px; color:rgba(249,249,249,0.4); margin-bottom:6px; }
|
||
.aifo-affiliate-banner .commission-value{ display:flex; align-items:baseline; gap:8px; }
|
||
.aifo-affiliate-banner .commission-number,
|
||
.aifo-affiliate-banner .commission-percent{
|
||
font-size:40px; font-weight:700; line-height:1;
|
||
}
|
||
.aifo-affiliate-banner .commission-number{ color:var(--site-white); }
|
||
.aifo-affiliate-banner .commission-percent{ color:var(--brand-orange); }
|
||
.aifo-affiliate-banner .commission-text{
|
||
display:flex; flex-direction:column;
|
||
font-size:12px; color:rgba(249,249,249,0.65);
|
||
line-height:1.3;
|
||
}
|
||
|
||
.aifo-affiliate-banner .dots-pattern{
|
||
position:absolute; bottom:0; left:0; right:0;
|
||
height:90px;
|
||
background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1.2px, transparent 1.2px);
|
||
background-size: 14px 14px;
|
||
mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
|
||
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
|
||
pointer-events:none;
|
||
z-index:2;
|
||
}
|
||
|
||
.aifo-affiliate-banner .cta-wrapper{ text-align:center; margin-top:30px; }
|
||
.aifo-affiliate-banner .cta-button{
|
||
display:inline-block;
|
||
background:var(--brand-orange);
|
||
color:var(--site-white);
|
||
font-size:15px; font-weight:600;
|
||
padding:11px 20px;
|
||
border-radius:9px;
|
||
border:none;
|
||
cursor:pointer;
|
||
box-shadow:0 4px 12px rgba(249,135,21,0.25);
|
||
transition:all .3s ease;
|
||
text-decoration:none;
|
||
}
|
||
.aifo-affiliate-banner .cta-button:hover{
|
||
background:#e07a12;
|
||
transform:translateY(-2px);
|
||
box-shadow:0 6px 20px rgba(249,135,21,0.4), 0 0 25px rgba(249,135,21,0.15);
|
||
color:var(--site-white);
|
||
text-decoration:none;
|
||
}
|
||
.aifo-affiliate-banner .cta-button:focus{
|
||
outline:3px solid rgba(249,135,21,0.5);
|
||
outline-offset:3px;
|
||
}
|
||
.aifo-affiliate-banner .cta-button:active{
|
||
transform:translateY(0);
|
||
box-shadow:0 2px 8px rgba(249,135,21,0.3);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 991px) and (min-width: 768px){
|
||
.aifo-affiliate-banner{ min-height:auto; padding:50px 20px 35px; }
|
||
.aifo-affiliate-banner .main-title h1{ font-size:46px; }
|
||
.aifo-affiliate-banner .cards-wrapper{ gap:12px; flex-wrap:wrap; }
|
||
.aifo-affiliate-banner .tier-card{ width:230px; min-height:290px; padding:22px; }
|
||
.aifo-affiliate-banner .tier-card.tier-1{ transform:translateY(20px); }
|
||
.aifo-affiliate-banner .tier-card.tier-2{ transform:translateY(10px); }
|
||
.aifo-affiliate-banner .tier-card.tier-3{ transform:translateY(0); margin-top:15px; }
|
||
.aifo-affiliate-banner .connection-lines{ display:none; }
|
||
.aifo-affiliate-banner .referrals-number{ font-size:32px; }
|
||
.aifo-affiliate-banner .commission-number,
|
||
.aifo-affiliate-banner .commission-percent{ font-size:36px; }
|
||
.aifo-affiliate-banner .cta-wrapper{ margin-top:28px; }
|
||
}
|
||
@media (max-width: 767px){
|
||
.aifo-affiliate-banner{ padding:40px 16px 30px; }
|
||
.aifo-affiliate-banner .main-title h1{ font-size:36px; }
|
||
.aifo-affiliate-banner .main-title{ margin-bottom:32px; }
|
||
.aifo-affiliate-banner .cards-wrapper{ flex-direction:column; align-items:center; gap:18px; padding:10px 0; }
|
||
.aifo-affiliate-banner .tier-card{ width:100%; max-width:380px; min-height:auto; transform:none !important; }
|
||
.aifo-affiliate-banner .connection-lines{ display:none; }
|
||
.aifo-affiliate-banner .watermark-logo{ width:100px; height:100px; }
|
||
.aifo-affiliate-banner .tier-header{ margin-bottom:18px; }
|
||
.aifo-affiliate-banner .referrals-number{ font-size:34px; }
|
||
.aifo-affiliate-banner .commission-number,
|
||
.aifo-affiliate-banner .commission-percent{ font-size:38px; }
|
||
.aifo-affiliate-banner .cta-button{ width:70%; max-width:320px; padding:13px 24px; font-size:15px; }
|
||
.aifo-affiliate-banner .cta-wrapper{ margin-top:26px; }
|
||
}
|
||
</style>
|
||
|
||
<div class="banner-content">
|
||
<div class="main-title">
|
||
<h1>
|
||
<span class="title-white" id="titleWhite">Start </span>
|
||
<span class="title-orange" id="titleOrange">Earning!</span>
|
||
</h1>
|
||
</div>
|
||
|
||
<div class="cards-wrapper">
|
||
<div class="connection-lines d-none d-md-block">
|
||
<div class="connection-line-top"></div>
|
||
<div class="connection-line-bottom"></div>
|
||
</div>
|
||
|
||
<!-- Tier 1 -->
|
||
<div class="tier-card tier-1">
|
||
<div class="card-glow"></div>
|
||
<svg class="watermark-logo" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M50 5L61 39H97L68 61L79 95L50 73L21 95L32 61L3 39H39L50 5Z" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none"/>
|
||
<circle cx="50" cy="50" r="25" stroke="rgba(255,255,255,0.2)" stroke-width="2" fill="none"/>
|
||
</svg>
|
||
|
||
<div class="card-content">
|
||
<div class="tier-header">
|
||
<div class="tier-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
|
||
</div>
|
||
<span class="tier-title" id="tier1Label">Tier 1</span>
|
||
</div>
|
||
|
||
<div class="referrals-section">
|
||
<div class="referrals-label">
|
||
<svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
|
||
<span>Referrals</span>
|
||
</div>
|
||
<div class="referrals-value">
|
||
<span class="referrals-number">30-50</span>
|
||
<span class="referrals-unit">users</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="commission-section">
|
||
<div class="commission-label">Commission</div>
|
||
<div class="commission-value">
|
||
<span class="commission-number">5</span><span class="commission-percent">%</span>
|
||
<div class="commission-text"><span>on every</span><span>purchased</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dots-pattern"></div>
|
||
</div>
|
||
|
||
<!-- Tier 2 -->
|
||
<div class="tier-card tier-2">
|
||
<div class="card-glow"></div>
|
||
<svg class="watermark-logo" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M50 5L61 39H97L68 61L79 95L50 73L21 95L32 61L3 39H39L50 5Z" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none"/>
|
||
<circle cx="50" cy="50" r="25" stroke="rgba(255,255,255,0.2)" stroke-width="2" fill="none"/>
|
||
</svg>
|
||
|
||
<div class="card-content">
|
||
<div class="tier-header">
|
||
<div class="tier-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
|
||
</div>
|
||
<span class="tier-title" id="tier2Label">Tier 2</span>
|
||
</div>
|
||
|
||
<div class="referrals-section">
|
||
<div class="referrals-label">
|
||
<svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
|
||
<span>Referrals</span>
|
||
</div>
|
||
<div class="referrals-value">
|
||
<span class="referrals-number">50-100</span>
|
||
<span class="referrals-unit">users</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="commission-section">
|
||
<div class="commission-label">Commission</div>
|
||
<div class="commission-value">
|
||
<span class="commission-number">10</span><span class="commission-percent">%</span>
|
||
<div class="commission-text"><span>on every</span><span>purchased</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dots-pattern"></div>
|
||
</div>
|
||
|
||
<!-- Tier 3 -->
|
||
<div class="tier-card tier-3">
|
||
<div class="card-glow"></div>
|
||
<svg class="watermark-logo" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M50 5L61 39H97L68 61L79 95L50 73L21 95L32 61L3 39H39L50 5Z" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none"/>
|
||
<circle cx="50" cy="50" r="25" stroke="rgba(255,255,255,0.2)" stroke-width="2" fill="none"/>
|
||
</svg>
|
||
|
||
<div class="card-content">
|
||
<div class="tier-header">
|
||
<div class="tier-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
|
||
</div>
|
||
<span class="tier-title" id="tier3Label">Tier 3</span>
|
||
</div>
|
||
|
||
<div class="referrals-section">
|
||
<div class="referrals-label">
|
||
<svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
|
||
<span>Referrals</span>
|
||
</div>
|
||
<div class="referrals-value">
|
||
<span class="referrals-number">100+</span>
|
||
<span class="referrals-unit">users</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="commission-section">
|
||
<div class="commission-label">Commission</div>
|
||
<div class="commission-value">
|
||
<span class="commission-number">15</span><span class="commission-percent">%</span>
|
||
<div class="commission-text"><span>on every</span><span>purchased</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dots-pattern"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-wrapper">
|
||
<a href="/affiliate-registration/" class="cta-button" id="ctaButton">Affiliate Registration</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 可选：你如果想在 WP 里“快速改字/改色”，只改这里就行
|
||
(function(){
|
||
var root = document.querySelector('.aifo-affiliate-banner');
|
||
if(!root) return;
|
||
|
||
// 示例：改标题/按钮文本（也可以删掉这段）
|
||
// document.getElementById('titleWhite').textContent = 'Start ';
|
||
// document.getElementById('titleOrange').textContent = 'Earning!';
|
||
// document.getElementById('ctaButton').textContent = 'Affiliate Registration';
|
||
|
||
// 示例：改主题色（也可以删掉这段）
|
||
// root.style.setProperty('--brand-orange', '#F98715');
|
||
// root.style.setProperty('--site-white', '#F9F9F9');
|
||
// root.style.setProperty('--bg-dark', '#0B0B0B');
|
||
})();
|
||
</script>
|
||
</section>
|
||
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- 第三楼层 start-->
|
||
<section class="section hero main-course">
|
||
<div class="container container-narrow">
|
||
<!-- Video preview: lazy-loaded thumbnail (YouTube) -->
|
||
<div class="video-card fade-in" id="videoPreview" data-video-id="dQw4w9WgXcQ">
|
||
<img class="lazy-img" data-src="../assets/images/backgrounds/academy/img-1.png" alt="AIFO preview thumbnail">
|
||
<div class="video-play" id="playBtn" aria-label="Play video"><i class="pay-btn"></i></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 第三楼层 end-->
|
||
<!-- 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 -->
|
||
|
||
|
||
|
||
|
||
|
||
<!-- 第八楼层 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>
|
||
/* ===========================================================
|
||
可复用 Carousel 类
|
||
=========================================================== */
|
||
class Carousel {
|
||
constructor(opts) {
|
||
this.container = document.querySelector(opts.container);
|
||
this.track = this.container.querySelector(".carousel-track");
|
||
this.items = [...this.track.children];
|
||
this.prevBtn = document.getElementById(opts.prev);
|
||
this.nextBtn = document.getElementById(opts.next);
|
||
this.dotsContainer = document.querySelector(opts.dots);
|
||
|
||
this.index = 0;
|
||
this.pageWidth = this.items[0].offsetWidth + 40; // 含 margin
|
||
|
||
this.setupDots();
|
||
this.update();
|
||
this.bindEvents();
|
||
}
|
||
|
||
setupDots() {
|
||
this.dotsContainer.innerHTML = "";
|
||
this.items.forEach((_, i) => {
|
||
const dot = document.createElement("div");
|
||
dot.className = "dot";
|
||
dot.addEventListener("click", () => this.goTo(i));
|
||
this.dotsContainer.appendChild(dot);
|
||
});
|
||
}
|
||
|
||
bindEvents() {
|
||
this.prevBtn.addEventListener("click", () => this.prev());
|
||
this.nextBtn.addEventListener("click", () => this.next());
|
||
window.addEventListener("resize", () => {
|
||
this.pageWidth = this.items[0].offsetWidth + 40;
|
||
this.update();
|
||
});
|
||
}
|
||
|
||
prev() {
|
||
this.index = Math.max(0, this.index - 1);
|
||
this.update();
|
||
}
|
||
|
||
next() {
|
||
this.index = Math.min(this.items.length - 1, this.index + 1);
|
||
this.update();
|
||
}
|
||
|
||
goTo(i) {
|
||
this.index = i;
|
||
this.update();
|
||
}
|
||
|
||
update() {
|
||
const centerOffset = (window.innerWidth / 2) - (this.pageWidth / 2);
|
||
let x = this.index * this.pageWidth * -1 + centerOffset;
|
||
|
||
if (this.index === 0) x = 0;
|
||
if (this.index === this.items.length - 1) {
|
||
x = (this.items.length - 1) * this.pageWidth * -1 + (window.innerWidth - this.pageWidth);
|
||
}
|
||
|
||
this.track.style.transform = `translateX(${x}px)`;
|
||
|
||
[...this.dotsContainer.children].forEach((dot, i) => {
|
||
dot.classList.toggle("active", i === this.index);
|
||
});
|
||
}
|
||
}
|
||
|
||
/* ===========================================================
|
||
Fade-in Observer（一次性触发）
|
||
=========================================================== */
|
||
function setupFadeInObserver(selector = ".carousel-item") {
|
||
const items = document.querySelectorAll(selector);
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries, obs) => {
|
||
entries.forEach(entry => {
|
||
// if (entry.isIntersecting) {
|
||
entry.target.classList.add("fade-in");
|
||
entry.target.classList.add("show");
|
||
obs.unobserve(entry.target);
|
||
// }
|
||
});
|
||
},
|
||
{
|
||
root: document.querySelector(".carousel-container-1"),
|
||
threshold: 0.5
|
||
}
|
||
);
|
||
|
||
items.forEach(item => observer.observe(item));
|
||
}
|
||
|
||
/* ===========================================================
|
||
初始化
|
||
=========================================================== */
|
||
window.addEventListener("DOMContentLoaded", () => {
|
||
// new Carousel({
|
||
// container: ".carousel-container-1",
|
||
// prev: "growthPrev",
|
||
// next: "growthNext",
|
||
// dots: ".dots"
|
||
// });
|
||
|
||
const carousel = new Carousel({
|
||
container: ".carousel-container-1",
|
||
prev: "growthPrev",
|
||
next: "growthNext",
|
||
dots: ".dots"
|
||
});
|
||
|
||
setTimeout(() => {
|
||
carousel.goTo(1);
|
||
}, 50);
|
||
|
||
|
||
|
||
setupFadeInObserver(".carousel-item");
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
|
||
$(function(){
|
||
|
||
const $track = $("#track");
|
||
const $viewport = $(".carousel-viewport");
|
||
const $indicators = $("#indicators");
|
||
const $btnPrev = $("#btnPrev");
|
||
const $btnNext = $("#btnNext");
|
||
|
||
// store original cards data (from DOM at load)
|
||
let $originalCards = $track.children(".carousel-card").toArray().map(el => $(el).clone(true));
|
||
let originalCount = $originalCards.length;
|
||
|
||
|
||
let visibleCount = getVisibleCount();
|
||
let index = 0; // 从0开始，不需要克隆卡片了
|
||
let animating = false;
|
||
let cardW = null;
|
||
let gap = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--card-gap')) || 20;
|
||
|
||
// 滑动相关变量
|
||
let isMobile = window.innerWidth <= 768;
|
||
let swipeStartTime = 0;
|
||
let swipeMinDistance = 50; // 最小滑动距离阈值
|
||
let swipeMinVelocity = 0.3; // 最小滑动速度（像素/毫秒）
|
||
|
||
function getVisibleCount(){
|
||
return window.innerWidth <= 768 ? 1 : 4;
|
||
}
|
||
|
||
function updateDeviceSettings() {
|
||
isMobile = window.innerWidth <= 768;
|
||
// 更新滑动参数
|
||
if (isMobile) {
|
||
swipeMinDistance = cardW * 0.2; // 移动端：滑动卡片宽度的20%
|
||
swipeMinVelocity = 0.3;
|
||
} else {
|
||
// PC端不使用触摸滑动，阈值设为极大值
|
||
swipeMinDistance = 9999; // 极大值，确保不会被触发
|
||
swipeMinVelocity = 9999;
|
||
}
|
||
}
|
||
|
||
function buildTrack(){
|
||
// empty track and indicators
|
||
$track.empty();
|
||
$indicators.empty();
|
||
|
||
visibleCount = getVisibleCount();
|
||
|
||
// 不再添加克隆卡片，只显示原始卡片
|
||
$originalCards.forEach($el => $track.append($el.clone(true)));
|
||
|
||
// build indicators — one per original card
|
||
|
||
console.log(originalCount);
|
||
for(let i=0;i<originalCount-visibleCount;i++){
|
||
console.log(i);
|
||
$indicators.append(`<div class="ind" data-i="${i}"></div>`);
|
||
}
|
||
|
||
// set starting index to 0
|
||
index = 0;
|
||
|
||
// compute cardW (outerWidth including gap)
|
||
cardW = $(".carousel-card").outerWidth(true);
|
||
|
||
// 更新设备设置
|
||
updateDeviceSettings();
|
||
|
||
// position track at initial
|
||
$track.css({ transform: `translateX(${-index * cardW}px)` , transition: 'none' });
|
||
|
||
// small delay to ensure no animation on first paint
|
||
setTimeout(()=> $track.css('transition','transform .45s ease'), 20);
|
||
|
||
updateDots();
|
||
updateButtonState(); // 更新按钮状态
|
||
}
|
||
|
||
function updateDots(){
|
||
$indicators.find(".ind").removeClass("active");
|
||
$indicators.find(`.ind[data-i="${index}"]`).addClass("active");
|
||
}
|
||
|
||
function updateButtonState() {
|
||
// 更新按钮状态：第一张时禁用prev按钮，最后一张时禁用next按钮
|
||
if (index <= 0) {
|
||
$btnPrev.addClass("disabled").prop("disabled", true);
|
||
} else {
|
||
$btnPrev.removeClass("disabled").prop("disabled", false);
|
||
}
|
||
|
||
if (index >= originalCount - visibleCount) {
|
||
$btnNext.addClass("disabled").prop("disabled", true);
|
||
} else {
|
||
$btnNext.removeClass("disabled").prop("disabled", false);
|
||
}
|
||
}
|
||
|
||
function slideTo(idx, animate=true){
|
||
if(animating) return;
|
||
|
||
// 检查边界
|
||
const maxIndex = originalCount - visibleCount;
|
||
const minIndex = 0;
|
||
|
||
// 限制索引范围
|
||
let targetIndex = Math.max(minIndex, Math.min(idx, maxIndex));
|
||
|
||
// 如果已经是边界，不执行动画
|
||
if (targetIndex === index && animate) return;
|
||
|
||
animating = true;
|
||
$track.css('transition', animate ? 'transform .45s ease' : 'none');
|
||
$track.css('transform', `translateX(${-targetIndex * cardW}px)`);
|
||
index = targetIndex;
|
||
|
||
// 更新状态
|
||
setTimeout(()=>{
|
||
updateDots();
|
||
updateButtonState();
|
||
animating = false;
|
||
}, animate ? 500 : 20);
|
||
}
|
||
|
||
function next(){
|
||
// 检查是否到达最后
|
||
if (index >= originalCount - visibleCount) return;
|
||
slideTo(index + 1, true);
|
||
}
|
||
|
||
function prev(){
|
||
// 检查是否到达最前
|
||
if (index <= 0) return;
|
||
slideTo(index - 1, true);
|
||
}
|
||
|
||
// dots click
|
||
$indicators.on('click', '.ind', function(){
|
||
const target = Number($(this).attr('data-i')); // 0..originalCount-1
|
||
slideTo(target, true);
|
||
});
|
||
|
||
// arrows - 添加检查
|
||
$btnNext.on('click', function(){
|
||
if ($(this).hasClass("disabled")) return;
|
||
next();
|
||
});
|
||
|
||
$btnPrev.on('click', function(){
|
||
if ($(this).hasClass("disabled")) return;
|
||
prev();
|
||
});
|
||
|
||
/* ========= 移动端触摸滑动效果 ========= */
|
||
// 只在移动端绑定触摸事件
|
||
if (window.innerWidth <= 768) {
|
||
initMobileTouchEvents();
|
||
}
|
||
|
||
function initMobileTouchEvents() {
|
||
let pointerDown = false;
|
||
let startX = 0;
|
||
let startTranslate = 0;
|
||
let moved = 0;
|
||
let swipeEndTime = 0;
|
||
let velocity = 0;
|
||
let currentExactPosition = 0;
|
||
let maxTranslate = 0;
|
||
let minTranslate = 0;
|
||
|
||
// helper get current translateX (number)
|
||
function currentTranslate(){
|
||
const m = $track.css('transform');
|
||
if(!m || m === 'none') return 0;
|
||
const arr = m.split(',');
|
||
return parseFloat(arr[arr.length-1]);
|
||
}
|
||
|
||
// pointer start (仅触摸)
|
||
$track.on('touchstart', function(e){
|
||
if(animating) return;
|
||
pointerDown = true;
|
||
startX = e.originalEvent.touches[0].clientX;
|
||
startTranslate = currentTranslate();
|
||
currentExactPosition = startTranslate;
|
||
moved = 0;
|
||
velocity = 0;
|
||
swipeStartTime = Date.now();
|
||
|
||
// 计算边界
|
||
maxTranslate = 0; // 最左边，对应第一张
|
||
minTranslate = -(originalCount - visibleCount) * cardW; // 最右边，对应最后一张
|
||
|
||
// disable transition while dragging
|
||
$track.css('transition','none');
|
||
$('.carousel-card').addClass('grabbing');
|
||
e.preventDefault();
|
||
});
|
||
|
||
// 移动事件
|
||
$(window).on('touchmove', function(e){
|
||
if(!pointerDown) return;
|
||
const clientX = e.originalEvent.touches[0].clientX;
|
||
const dx = clientX - startX;
|
||
moved = dx;
|
||
|
||
// 计算精确位置，并限制在边界内
|
||
let targetPosition = startTranslate + dx;
|
||
|
||
// 添加边界阻尼效果
|
||
if (targetPosition > maxTranslate) {
|
||
// 超出左边边界，添加阻尼效果
|
||
const overshoot = targetPosition - maxTranslate;
|
||
targetPosition = maxTranslate + overshoot * 0.3;
|
||
} else if (targetPosition < minTranslate) {
|
||
// 超出右边边界，添加阻尼效果
|
||
const overshoot = targetPosition - minTranslate;
|
||
targetPosition = minTranslate + overshoot * 0.3;
|
||
}
|
||
|
||
currentExactPosition = targetPosition;
|
||
|
||
// 应用移动效果
|
||
$track.css('transform', `translateX(${currentExactPosition}px)`);
|
||
});
|
||
|
||
// 结束事件
|
||
$(window).on('touchend touchcancel', function(e){
|
||
if(!pointerDown) return;
|
||
|
||
swipeEndTime = Date.now();
|
||
const swipeDuration = swipeEndTime - swipeStartTime;
|
||
|
||
// 计算滑动速度
|
||
if (swipeDuration > 0) {
|
||
velocity = Math.abs(moved) / swipeDuration;
|
||
}
|
||
|
||
pointerDown = false;
|
||
$('.carousel-card').removeClass('grabbing');
|
||
|
||
// 检查边界
|
||
const atLeftBoundary = currentExactPosition >= maxTranslate - 10;
|
||
const atRightBoundary = currentExactPosition <= minTranslate + 10;
|
||
|
||
if (atLeftBoundary || atRightBoundary) {
|
||
// 如果在边界附近，直接回到边界
|
||
if (atLeftBoundary) {
|
||
slideTo(0, true);
|
||
} else {
|
||
slideTo(originalCount - visibleCount, true);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 移动端滑动结束处理
|
||
handleMobileSwipeEnd();
|
||
});
|
||
}
|
||
|
||
// 移动端滑动结束处理
|
||
function handleMobileSwipeEnd() {
|
||
const absMoved = Math.abs(moved);
|
||
const swipeDirection = moved < 0 ? 1 : -1; // 1: 向左滑动, -1: 向右滑动
|
||
|
||
let shouldSwitch = false;
|
||
|
||
// 判断是否应该切换（基于距离或速度）
|
||
// 移动端：每次只滑动1张，需要明显的滑动距离
|
||
if (absMoved > swipeMinDistance) {
|
||
shouldSwitch = true;
|
||
} else if (velocity > swipeMinVelocity && absMoved > swipeMinDistance * 0.5) {
|
||
shouldSwitch = true;
|
||
}
|
||
|
||
if (shouldSwitch) {
|
||
// 移动端：每次只滑动1张图片
|
||
if (swipeDirection === 1) {
|
||
// 向左滑动，显示下一张（只滑动1张）
|
||
next();
|
||
} else if (swipeDirection === -1) {
|
||
// 向右滑动，显示上一张（只滑动1张）
|
||
prev();
|
||
}
|
||
} else {
|
||
// 滑动距离不足，停留在当前位置
|
||
slideTo(index, true);
|
||
}
|
||
}
|
||
|
||
/* ========= PC端鼠标拖动效果 ========= */
|
||
// PC端只保留鼠标点击按钮功能，不绑定拖动事件
|
||
|
||
/* ========== resize handling: rebuild if visibleCount changes ========== */
|
||
let resizeTimer = null;
|
||
$(window).on('resize', function(){
|
||
clearTimeout(resizeTimer);
|
||
resizeTimer = setTimeout(function(){
|
||
const newVisible = getVisibleCount();
|
||
|
||
// 移除旧的触摸事件
|
||
$track.off('touchstart');
|
||
$(window).off('touchmove touchend touchcancel');
|
||
|
||
if(newVisible !== visibleCount){
|
||
// rebuild track
|
||
// restore original cards array from clones
|
||
$track.empty();
|
||
$originalCards.forEach($el => $track.append($el.clone(true)));
|
||
// reassign originalCards (fresh clones)
|
||
$originalCards = $track.children(".carousel-card").toArray().map(el => $(el).clone(true));
|
||
originalCount = $originalCards.length;
|
||
buildTrack();
|
||
} else {
|
||
// just recompute cardW and set immediate position
|
||
cardW = $(".carousel-card").outerWidth(true);
|
||
updateDeviceSettings(); // 更新设备设置
|
||
$track.css('transition','none');
|
||
$track.css('transform', `translateX(${-index * cardW}px)`);
|
||
setTimeout(()=> $track.css('transition','transform .45s ease'), 20);
|
||
}
|
||
|
||
// 根据新的屏幕大小重新绑定触摸事件
|
||
if (window.innerWidth <= 768) {
|
||
initMobileTouchEvents();
|
||
}
|
||
}, 120);
|
||
});
|
||
|
||
/**************** INIT ****************/
|
||
let $initial = $track.children(".carousel-card").toArray().map(el=>$(el).clone(true));
|
||
$originalCards = $initial.slice(); // store original clones
|
||
originalCount = $originalCards.length;
|
||
buildTrack();
|
||
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
<script>
|
||
|
||
// FAQ Accordion
|
||
$('.faq-header').on('click', function() {
|
||
var $item = $(this).closest('.faq-item');
|
||
var $body = $item.find('.faq-body');
|
||
var isActive = $item.hasClass('active');
|
||
|
||
// Close all items
|
||
$('.faq-item').removeClass('active');
|
||
$('.faq-body').css('max-height', '0').css('opacity', '0');
|
||
|
||
// Open clicked item if it wasn't active
|
||
if (!isActive) {
|
||
$item.addClass('active');
|
||
$body.css('max-height', '500px').css('opacity', '1');
|
||
}
|
||
});
|
||
|
||
</script>
|
||
</html>
|