steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
1262 lines
37 KiB
HTML
1262 lines
37 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>Choose Your Challenge</title>
|
||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||
<link href="../assets/css/style.css" rel="stylesheet">
|
||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
background: #000000;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(180deg, #000000 0%, #1a0a00 50%, #000000 100%);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
|
||
|
||
.main-wrapper {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.content-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 60px 20px 80px;
|
||
}
|
||
|
||
|
||
|
||
.challenge-hero {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.hero-title-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.hero-title-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-title-choose {
|
||
font-size: 4.6875rem;
|
||
font-weight: 700;
|
||
color: #F9F9F9;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.hero-title-your-challenge {
|
||
font-size: 4.6875rem;
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.hero-title-your {
|
||
color: #F9F9F9;
|
||
}
|
||
|
||
.hero-title-challenge {
|
||
color: #F98715;
|
||
}
|
||
|
||
.hero-trophy-badge {
|
||
width: 4.375rem;
|
||
height: 4.375rem;
|
||
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
|
||
img{
|
||
width: 100%;
|
||
}
|
||
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.5rem;
|
||
color: rgba(249, 249, 249, 0.7);
|
||
line-height: 1.6;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.hero-subtitle-highlight {
|
||
color: #F98715;
|
||
}
|
||
|
||
/* 2) Program Tabs */
|
||
.challenge-tabs {
|
||
max-width: 780px;
|
||
margin: 0 auto 32px;
|
||
background: #0B0B0B;
|
||
border-radius: 999px;
|
||
display: flex;
|
||
gap: 5px;
|
||
padding: 15px 12px;
|
||
}
|
||
|
||
.is-hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.challenge-tab {
|
||
flex: 1;
|
||
height: 52px;
|
||
border: none;
|
||
background: transparent;
|
||
color: rgba(249, 249, 249, 0.8);
|
||
border-radius: 999px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.challenge-tab:hover {
|
||
color: #F9F9F9;
|
||
}
|
||
|
||
.challenge-tab.active {
|
||
background: #F9F9F9;
|
||
color: #000000;
|
||
}
|
||
|
||
/* .btn:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
|
||
} */
|
||
|
||
button.challenge-tab:focus,button.instant-tab:focus,button.start-challenge-btn:focus,button.mobile-size-btn:focus {
|
||
outline: none;
|
||
}
|
||
|
||
/* 3) Instant Sub Tabs */
|
||
.instant-subtabs {
|
||
max-width: 280px;
|
||
margin: 0 auto 32px;
|
||
background: #0B0B0B;
|
||
border-radius: 999px;
|
||
padding: 5px 8px;
|
||
display: none;
|
||
gap: 6px;
|
||
}
|
||
|
||
.instant-subtabs.show {
|
||
display: flex;
|
||
}
|
||
|
||
.instant-tab {
|
||
flex: 1;
|
||
height: 44px;
|
||
border: none;
|
||
background: transparent;
|
||
color: rgba(249, 249, 249, 0.8);
|
||
border-radius: 999px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.instant-tab:hover {
|
||
color: #F9F9F9;
|
||
}
|
||
|
||
.instant-tab.active {
|
||
background: #F9F9F9;
|
||
color: #000000;
|
||
}
|
||
|
||
/* 4) 桌面版表格卡片 */
|
||
.challenge-table-card {
|
||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
|
||
border-radius: 24px;
|
||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
|
||
overflow: hidden;
|
||
padding: 18px 22px;
|
||
}
|
||
|
||
.challenge-table {
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
/* 表头行 */
|
||
.challenge-table thead th {
|
||
padding: 20px 12px;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
border-bottom: 1px solid rgba(249, 249, 249, 0.1);
|
||
}
|
||
|
||
.challenge-table thead th:first-child {
|
||
text-align: left;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #F9F9F9;
|
||
}
|
||
|
||
.account-size-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.account-size-amount {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #F9F9F9;
|
||
}
|
||
|
||
.start-challenge-btn {
|
||
background: #f98715;
|
||
color: var(--aifo-white);
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 6px 18px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.start-challenge-btn:hover {
|
||
background: #e07810;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(249, 135, 21, 0.4);
|
||
}
|
||
|
||
/* 参数行 */
|
||
.challenge-table tbody tr {
|
||
border-bottom: 1px solid rgba(249, 249, 249, 0.05);
|
||
}
|
||
|
||
.challenge-table tbody tr:nth-child(even) {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.challenge-table tbody td {
|
||
padding: 18px 12px;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
border-right: 1px solid rgba(249, 249, 249, 0.06);
|
||
font-size: 14px;
|
||
color: rgba(249, 249, 249, 0.9);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.challenge-table tbody td:first-child {
|
||
text-align: left;
|
||
border-right: 1px solid rgba(249, 249, 249, 0.1);
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.challenge-table tbody td:first-child:hover {
|
||
background: rgba(249, 135, 21, 0.05);
|
||
}
|
||
|
||
.challenge-table tbody td:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.param-name-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.param-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.param-name {
|
||
flex: 1;
|
||
font-size: 15px;
|
||
color: #F9F9F9;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.expand-btn {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.2s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.expand-btn.expanded {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 展开说明行 */
|
||
.challenge-row-expand {
|
||
display: none;
|
||
}
|
||
|
||
.challenge-row-expand.show {
|
||
display: table-row;
|
||
}
|
||
|
||
.challenge-row-expand td {
|
||
padding: 16px 24px 20px 56px;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
font-size: 13px;
|
||
color: rgba(249, 249, 249, 0.6);
|
||
line-height: 1.6;
|
||
border-bottom: 1px solid rgba(249, 249, 249, 0.05);
|
||
}
|
||
|
||
/* Add-ons 区域 */
|
||
.challenge-addons {
|
||
margin-top: 24px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid rgba(249, 249, 249, 0.1);
|
||
}
|
||
|
||
.addons-title {
|
||
text-align: center;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: rgba(249, 249, 249, 0.5);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.addons-content {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 18px;
|
||
padding: 18px 22px;
|
||
}
|
||
|
||
.addon-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.addon-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.addon-percentage {
|
||
background: rgba(249, 135, 21, 0.15);
|
||
color: #F98715;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
min-width: 60px;
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
text-align: center;
|
||
}
|
||
|
||
.addon-description {
|
||
color: rgba(249, 249, 249, 0.7);
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
|
||
|
||
@media (max-width: 991px) {
|
||
.content-container {
|
||
padding: 40px 16px 60px;
|
||
}
|
||
|
||
/* 标题缩小 */
|
||
.hero-title-choose,
|
||
.hero-title-your-challenge {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.hero-trophy-badge {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* Tabs 缩小 */
|
||
.challenge-tabs {
|
||
max-width: 100%;
|
||
padding: 6px 8px;
|
||
}
|
||
|
||
.challenge-tab {
|
||
height: 40px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.instant-subtabs {
|
||
max-width: 100%;
|
||
padding: 5px 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.instant-tab {
|
||
height: 34px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 隐藏桌面表格 */
|
||
.challenge-table-card {
|
||
display: none;
|
||
}
|
||
|
||
/* 显示移动端卡片 */
|
||
.mobile-layout {
|
||
display: block !important;
|
||
}
|
||
}
|
||
|
||
/* 移动端专用组件 */
|
||
.mobile-layout {
|
||
display: none;
|
||
}
|
||
|
||
.mobile-account-sizes {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
overflow-x: auto;
|
||
padding: 4px 0 20px;
|
||
-webkit-overflow-scrolling: touch;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.mobile-account-sizes::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.mobile-size-btn {
|
||
min-width: 50px;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(249, 249, 249, 0.4);
|
||
background: transparent;
|
||
color: #F9F9F9;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mobile-size-btn.active {
|
||
background: #F9F9F9;
|
||
color: #000000;
|
||
border-color: #F9F9F9;
|
||
}
|
||
|
||
.mobile-challenge-card {
|
||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
|
||
border-radius: 24px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.mobile-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24px 20px;
|
||
border-bottom: 1px solid rgba(249, 249, 249, 0.1);
|
||
}
|
||
|
||
.mobile-account-label {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #F9F9F9;
|
||
}
|
||
|
||
.mobile-amount-cta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
}
|
||
|
||
.mobile-amount {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #F9F9F9;
|
||
}
|
||
|
||
.mobile-start-btn {
|
||
background: #F98715;
|
||
color: var(--aifo-white);
|
||
border: none;
|
||
border-radius: 10px;
|
||
padding: 8px 20px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.mobile-start-btn:hover {
|
||
background: #e07810;
|
||
}
|
||
|
||
.mobile-params-list {
|
||
padding: 0;
|
||
}
|
||
|
||
.mobile-param-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid rgba(249, 249, 249, 0.05);
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.mobile-param-row:hover {
|
||
background: rgba(249, 135, 21, 0.05);
|
||
}
|
||
|
||
.mobile-param-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.mobile-param-value {
|
||
font-size: 14px;
|
||
color: rgba(249, 249, 249, 0.9);
|
||
font-weight: 600;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.mobile-param-description {
|
||
display: none;
|
||
padding: 12px 20px 16px 52px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
font-size: 12px;
|
||
color: rgba(249, 249, 249, 0.6);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.mobile-param-description.show {
|
||
display: block;
|
||
}
|
||
|
||
.mobile-addons {
|
||
padding: 20px;
|
||
}
|
||
|
||
.mobile-addons-title {
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: rgba(249, 249, 249, 0.5);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.mobile-addons-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 18px;
|
||
padding: 14px;
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
.mobile-layout {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
|
||
.section-challenge {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-image: url(../assets/images/backgrounds/Backgroun40.png);
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
|
||
.section-challenge > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
</style>
|
||
<style>@view-transition { navigation: auto; }</style>
|
||
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
|
||
<script src="https://cdn.tailwindcss.com" type="text/javascript"></script>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<section class="section-challenge" id="section-challenge">
|
||
|
||
<div class="content-container">
|
||
<!-- 1 title -->
|
||
|
||
<div class="challenge-hero">
|
||
<div class="hero-title-wrapper">
|
||
<div class="hero-title-text">
|
||
<div class="hero-title-choose">
|
||
Choose
|
||
</div>
|
||
<div class="hero-title-your-challenge"><span class="hero-title-your">Your </span><span class="hero-title-challenge">Challenge</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-trophy-badge">
|
||
<img src="../assets/images/backgrounds/icon/section-icon-1.png" alt="Funded Trading" class="why-img floating-img">
|
||
</div>
|
||
</div>
|
||
<div class="hero-subtitle">
|
||
Whether you're taking your first step or working toward larger accounts, AIFO has <span class="hero-subtitle-highlight">flexible programs</span> designed to match your style and support your growth.
|
||
</div>
|
||
</div>
|
||
<!-- 2 Program Tabs -->
|
||
<div class="challenge-tabs">
|
||
<button class="challenge-tab active" data-program="1step">1 STEP</button>
|
||
<button class="challenge-tab" data-program="2step">2 STEP</button>
|
||
<button class="challenge-tab" data-program="3step">3 STEP</button>
|
||
<button class="challenge-tab" data-program="instant">INSTANT</button>
|
||
</div>
|
||
<!-- 3 Instant Sub Tabs -->
|
||
<div class="instant-subtabs" id="instantSubTabs">
|
||
<button class="instant-tab active" data-instant-type="aifo">AIFO</button>
|
||
<button class="instant-tab" data-instant-type="pro">PRO</button>
|
||
</div><!-- 4 (≥992px) -->
|
||
<div class="challenge-table-card">
|
||
<table class="challenge-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Account Size</th>
|
||
<th>
|
||
<div class="account-size-header">
|
||
<div class="account-size-amount">
|
||
$10K
|
||
</div><button class="start-challenge-btn" data-size="10k">Start Challenge</button>
|
||
</div>
|
||
</th>
|
||
<th>
|
||
<div class="account-size-header">
|
||
<div class="account-size-amount">
|
||
$25K
|
||
</div><button class="start-challenge-btn" data-size="25k">Start Challenge</button>
|
||
</div></th>
|
||
<th>
|
||
<div class="account-size-header">
|
||
<div class="account-size-amount">
|
||
$50K
|
||
</div><button class="start-challenge-btn" data-size="50k">Start Challenge</button>
|
||
</div></th>
|
||
<th>
|
||
<div class="account-size-header">
|
||
<div class="account-size-amount">
|
||
$100K
|
||
</div><button class="start-challenge-btn" data-size="100k">Start Challenge</button>
|
||
</div></th>
|
||
<th>
|
||
<div class="account-size-header">
|
||
<div class="account-size-amount">
|
||
$200K
|
||
</div><button class="start-challenge-btn" data-size="200k">Start Challenge</button>
|
||
</div></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="desktopTableBody">
|
||
</tbody>
|
||
|
||
</table>
|
||
|
||
<!-- Add-ons -->
|
||
<div class="challenge-addons">
|
||
<div class="addons-title">
|
||
Add-ons for Challenger
|
||
</div>
|
||
<div class="addons-content">
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+20%
|
||
</div>
|
||
<div class="addon-description">
|
||
Profit split increase up to 85%
|
||
</div>
|
||
</div>
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+10%
|
||
</div>
|
||
<div class="addon-description">
|
||
Fast payout (payout on demand)
|
||
</div>
|
||
</div>
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+20%
|
||
</div>
|
||
<div class="addon-description">
|
||
Challenge fee refundable on first payout (not include addon)
|
||
</div>
|
||
</div>
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+15%
|
||
</div>
|
||
<div class="addon-description">
|
||
Trading commission free
|
||
</div>
|
||
</div>
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+50%
|
||
</div>
|
||
<div class="addon-description">
|
||
All
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- 5 (<992px) -->
|
||
|
||
<div class="mobile-layout">
|
||
<div class="mobile-account-sizes" id="mobileAccountSizes">
|
||
<button class="mobile-size-btn active" data-size="10k">$10K</button>
|
||
<button class="mobile-size-btn" data-size="25k">$25K</button>
|
||
<button class="mobile-size-btn" data-size="50k">$50K</button>
|
||
<button class="mobile-size-btn" data-size="100k">$100K</button>
|
||
<button class="mobile-size-btn" data-size="200k">$200K</button>
|
||
</div><!-- -->
|
||
|
||
<div class="mobile-challenge-card">
|
||
<div class="mobile-card-header">
|
||
<div class="mobile-account-label">
|
||
Account Size
|
||
</div>
|
||
<div class="mobile-amount-cta">
|
||
<div class="mobile-amount" id="mobileAmount">
|
||
$10K
|
||
</div><button class="mobile-start-btn">Start Challenge</button>
|
||
</div>
|
||
</div>
|
||
<div class="mobile-params-list" id="mobileParamsList">
|
||
</div><!-- Add-ons -->
|
||
<div class="mobile-addons">
|
||
<div class="mobile-addons-title">
|
||
Add-ons for Challenger
|
||
</div>
|
||
<div class="mobile-addons-card">
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+20%
|
||
</div>
|
||
<div class="addon-description">
|
||
Profit split increase up to 8%
|
||
</div>
|
||
</div>
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+10%
|
||
</div>
|
||
<div class="addon-description">
|
||
Fast payout (payout on demand)
|
||
</div>
|
||
</div>
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+20%
|
||
</div>
|
||
<div class="addon-description">
|
||
Challenge fee refundable on first payout (not include addon)
|
||
</div>
|
||
</div>
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+15%
|
||
</div>
|
||
<div class="addon-description">
|
||
Trading commission free
|
||
</div>
|
||
</div>
|
||
<div class="addon-row">
|
||
<div class="addon-percentage">
|
||
+50%
|
||
</div>
|
||
<div class="addon-description">
|
||
All
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||
<script src="/_sdk/element_sdk.js"></script>
|
||
<script>
|
||
// ============================================
|
||
// 数据与状态
|
||
// ============================================
|
||
|
||
const appState = {
|
||
programType: '1step',
|
||
instantMode: 'aifo',
|
||
accountSize: '10k',
|
||
expandedParam: null
|
||
};
|
||
|
||
const programData = {
|
||
'1step': {
|
||
defaultSize: '10k',
|
||
availableSizes: ['10k', '25k', '50k', '100k', '200k'],
|
||
data: {
|
||
'10k': { fee: '$89', daily: '3%', max: '5%', target: '8%', split: '70%~95%', payout: '14 days', news: 'Allowed' },
|
||
'25k': { fee: '$179', daily: '3%', max: '5%', target: '8%', split: '70%~95%', payout: '14 days', news: 'Allowed' },
|
||
'50k': { fee: '$359', daily: '3%', max: '5%', target: '8%', split: '70%~95%', payout: '14 days', news: 'Allowed' },
|
||
'100k': { fee: '$579', daily: '3%', max: '5%', target: '8%', split: '70%~95%', payout: '14 days', news: 'Allowed' },
|
||
'200k': { fee: '$1,239', daily: '3%', max: '5%', target: '8%', split: '70%~95%', payout: '14 days', news: 'Allowed' }
|
||
}
|
||
},
|
||
'2step': {
|
||
defaultSize: '10k',
|
||
availableSizes: ['10k', '25k', '50k', '100k', '200k'],
|
||
data: {
|
||
'10k': { fee: '$109', daily: '3%', max: '8%', target: "1 phase 5%<br> 2 phase 8%", split: '70%~95%', payout: '14 days', news: 'Allowed' },
|
||
'25k': { fee: '$219', daily: '3%', max: '8%', target: '1 phase 5%<br> 2 phase 8%', split: '70%~95%', payout: '14 days', news: 'Allowed' },
|
||
'50k': { fee: '$359', daily: '3%', max: '8%', target: '1 phase 5%<br> 2 phase 8%', split: '70%~95%', payout: '14 days', news: 'Allowed' },
|
||
'100k': { fee: '$589', daily: '3%', max: '8%', target: '1 phase 5%<br> 2 phase 8%', split: '70%~95%', payout: '14 days', news: 'Allowed' },
|
||
'200k': { fee: '$1,249', daily: '3%', max: '8%', target: '1 phase 5%<br> 2 phase 8%', split: '70%~95%', payout: '14 days', news: 'Allowed' }
|
||
}
|
||
},
|
||
'3step': {
|
||
defaultSize: '10k',
|
||
availableSizes: ['10k', '25k', '50k', '100k', '200k'],
|
||
data: {
|
||
'10k': { fee: '$69', daily: '3%', max: '5%', target: '1 phase 3%<br>2 phase 3%<br>3 phase 5%', split: '70%~95%', payout: '14 days', news: 'Allow' },
|
||
'25k': { fee: '$149', daily: '3%', max: '5%', target: '1 phase 3%<br>2 phase 3%<br>3 phase 5%', split: '70%~95%', payout: '14 days', news: 'Allow' },
|
||
'50k': { fee: '$299', daily: '3%', max: '5%', target: '1 phase 3%<br>2 phase 3%<br>3 phase 5%', split: '70%~95%', payout: '14 days', news: 'Allow' },
|
||
'100k': { fee: '$459', daily: '3%', max: '5%', target: '1 phase 3%<br>2 phase 3%<br>3 phase 5%', split: '70%~95%', payout: '14 days', news: 'Allow' },
|
||
'200k': { fee: '$909', daily: '3%', max: '5%', target: '1 phase 3%<br>2 phase 3%<br>3 phase 5%', split: '70%~95%', payout: '14 days', news: 'Allow' }
|
||
}
|
||
},
|
||
'instant': {
|
||
aifo: {
|
||
defaultSize: '10k',
|
||
availableSizes: ['10k', '25k', '50k', '100k', '200k'],
|
||
data: {
|
||
'10k': { fee: '--', daily: '--', max: '--', target: '--', split: '--', payout: '--', news: '--' },
|
||
'25k': { fee: '--', daily: '--', max: '--', target: '--', split: '--', payout: '--', news: '--' },
|
||
'50k': { fee: '--', daily: '--', max: '--', target: '--', split: '--', payout: '--', news: '--' },
|
||
'100k': { fee: '$749', daily: '2%', max: '4%', target: '4%', split: '70%~95%', payout: 'payout on demand', news: 'Allow' },
|
||
'200k': { fee: '$1,199', daily: '2%', max: '4%', target: '4%', split: '70%~95%', payout: 'payout on demand', news: 'Allow' }
|
||
}
|
||
},
|
||
pro: {
|
||
defaultSize: '10k',
|
||
availableSizes: ['10k', '25k', '50k', '100k', '200k'],
|
||
data: {
|
||
'10k': { fee: '$109', daily: '2%', max: '5%', target: '4%', split: '70%~95%', payout: 'payout on demand', news: 'Allow' },
|
||
'25k': { fee: '$219', daily: '2%', max: '5%', target: '4%', split: '70%~95%', payout: 'payout on demand', news: 'Allow' },
|
||
'50k': { fee: '$399', daily: '2%', max: '5%', target: '4%', split: '70%~95%', payout: 'payout on demand', news: 'Allow' },
|
||
'100k': { fee: '--', daily: '--', max: '--', target: '--', split: '--', payout: '--', news: '--' },
|
||
'200k': { fee: '--', daily: '--', max: '--', target: '--', split: '--', payout: '--', news: '--' },
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const parameterDescriptions = {
|
||
'Challenge Fee': 'One-time fee to participate in the challenge program',
|
||
'Daily Drawdown': 'Maximum percentage loss allowed in a single trading day based on the previous day’s closing balance or equity.',
|
||
'Max Drawdown': 'The Maximum Loss Limit is the maximum allowable loss calculated based on the highest equity value your account reaches during the evaluation or trading phase.',
|
||
'Profit Target': 'The percentage gain required to successfully complete each phase of the challenge.',
|
||
'withdrawable profit': 'The Profit Target refers to the required percentage of withdrawable profit that the account must achieve before a payout can be requested.',
|
||
'Profit split': 'Percentage of profits you keep. The firm keeps the remainder.',
|
||
'Payout period': 'Minimum time required before you can request a withdrawal of profits.',
|
||
'News Trading': ''
|
||
};
|
||
|
||
const parameterNames = ['Challenge Fee', 'Daily Drawdown', 'Max Drawdown', 'Profit Target', 'Profit split', 'Payout period', 'News Trading'];
|
||
|
||
const parameterNames_instant = ['Challenge Fee', 'Daily Drawdown', 'Max Drawdown', 'withdrawable profit', 'Profit split', 'Payout period', 'News Trading'];
|
||
|
||
// ============================================
|
||
// 工具函数
|
||
// ============================================
|
||
|
||
function getIconSVG(paramName) {
|
||
const icons = {
|
||
'Challenge Fee': '<img src="../assets/images/backgrounds/svg/Component 26.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Daily Drawdown': '<img src="../assets/images/backgrounds/svg/Component 27.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Max Drawdown': '<img src="../assets/images/backgrounds/svg/Component 28.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Profit Target': '<img src="../assets/images/backgrounds/svg/Component 29.svg" alt="Funded Trading" class="chall-icon">',
|
||
'withdrawable profit': '<img src="../assets/images/backgrounds/svg/Component 29.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Profit split': '<img src="../assets/images/backgrounds/svg/Component 30.svg" alt="Funded Trading" class="chall-icon">',
|
||
'Payout period': '<img src="../assets/images/backgrounds/svg/Component 31.svg" alt="Funded Trading" class="chall-icon">',
|
||
'News Trading': '<img src="../assets/images/backgrounds/svg/Component 32.svg" alt="Funded Trading" class="chall-icon">'
|
||
};
|
||
return icons[paramName] || '';
|
||
}
|
||
|
||
function getCurrentProgramConfig() {
|
||
if (appState.programType === 'instant') {
|
||
return programData.instant[appState.instantMode];
|
||
}
|
||
return programData[appState.programType];
|
||
}
|
||
|
||
function getDataForSize(size) {
|
||
const config = getCurrentProgramConfig();
|
||
return config.data[size];
|
||
}
|
||
|
||
function formatAccountSize(size) {
|
||
const formats = {
|
||
'10k': '$10K',
|
||
'25k': '$25K',
|
||
'50k': '$50K',
|
||
'100k': '$100K',
|
||
'200k': '$200K'
|
||
};
|
||
return formats[size] || size;
|
||
}
|
||
|
||
function getParamKey(paramName) {
|
||
const keyMap = {
|
||
'Challenge Fee': 'fee',
|
||
'Daily Drawdown': 'daily',
|
||
'Max Drawdown': 'max',
|
||
'Profit Target': 'target',
|
||
'withdrawable profit':'target',
|
||
'Profit split': 'split',
|
||
'Payout period': 'payout',
|
||
'News Trading': 'news'
|
||
};
|
||
return keyMap[paramName];
|
||
}
|
||
|
||
// ============================================
|
||
// 桌面版渲染
|
||
// ============================================
|
||
|
||
function renderDesktopTable(type) {
|
||
const config = getCurrentProgramConfig();
|
||
const sizes = config.availableSizes;
|
||
|
||
let html = '';
|
||
|
||
var param = parameterNames;
|
||
if(type=="aifo" || type=="pro" || type=="instant"){
|
||
param = parameterNames_instant;
|
||
}
|
||
|
||
param.forEach(paramName => {
|
||
const paramKey = getParamKey(paramName);
|
||
const rowId = paramName.replace(/\s+/g, '-').toLowerCase();
|
||
|
||
// 参数行
|
||
html += `<tr class="param-data-row" data-param="${paramName}">`;
|
||
html += `<td>
|
||
<div class="param-name-cell">
|
||
<div class="param-icon">${getIconSVG(paramName)}</div>
|
||
<div class="param-name">${paramName}</div>
|
||
<div class="expand-btn ${appState.expandedParam === paramName ? 'expanded' : ''}">
|
||
<img src="../assets/images/backgrounds/arraw-icon.png" alt="Funded Trading" class="arraw-icon-table">
|
||
</div>
|
||
</div>
|
||
</td>`;
|
||
|
||
// 各账户大小的数值
|
||
sizes.forEach(size => {
|
||
const data = getDataForSize(size);
|
||
html += `<td>${data[paramKey]}</td>`;
|
||
});
|
||
|
||
html += `</tr>`;
|
||
|
||
// 展开说明行
|
||
html += `<tr class="challenge-row-expand ${appState.expandedParam === paramName ? 'show' : ''}" data-expand="${paramName}">`;
|
||
html += `<td colspan="6">${parameterDescriptions[paramName]}</td>`;
|
||
html += `</tr>`;
|
||
});
|
||
|
||
$('#desktopTableBody').html(html);
|
||
}
|
||
|
||
// ============================================
|
||
// 移动版渲染
|
||
// ============================================
|
||
|
||
function renderMobileAccountSizes() {
|
||
const config = getCurrentProgramConfig();
|
||
const sizes = config.availableSizes;
|
||
|
||
const buttons = sizes.map(size => {
|
||
const label = formatAccountSize(size);
|
||
const activeClass = size === appState.accountSize ? 'active' : '';
|
||
return `<button class="mobile-size-btn ${activeClass}" data-size="${size}">${label}</button>`;
|
||
}).join('');
|
||
|
||
$('#mobileAccountSizes').html(buttons);
|
||
|
||
if (!sizes.includes(appState.accountSize)) {
|
||
appState.accountSize = config.defaultSize;
|
||
}
|
||
}
|
||
|
||
function renderMobileParams(type) {
|
||
const data = getDataForSize(appState.accountSize);
|
||
|
||
let html = '';
|
||
|
||
var param = parameterNames;
|
||
if(type=="aifo" || type=="pro" || type=="instant"){
|
||
param = parameterNames_instant;
|
||
}
|
||
|
||
param.forEach(paramName => {
|
||
const paramKey = getParamKey(paramName);
|
||
|
||
html += `<div>
|
||
<div class="mobile-param-row" data-param="${paramName}">
|
||
<div class="mobile-param-left">
|
||
<div class="param-icon">${getIconSVG(paramName)}</div>
|
||
<div class="param-name">${paramName}</div>
|
||
<div class="expand-btn ${appState.expandedParam === paramName ? 'expanded' : ''}">
|
||
<img src="../assets/images/backgrounds/arraw-icon.png" alt="Funded Trading" class="arraw-icon-table">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="mobile-param-value">${data[paramKey]}</div>
|
||
</div>
|
||
<div class="mobile-param-description ${appState.expandedParam === paramName ? 'show' : ''}" data-desc="${paramName}">
|
||
${parameterDescriptions[paramName]}
|
||
</div>
|
||
</div>`;
|
||
});
|
||
|
||
$('#mobileParamsList').html(html);
|
||
}
|
||
|
||
function updateMobileAmount() {
|
||
$('#mobileAmount').text(formatAccountSize(appState.accountSize));
|
||
}
|
||
|
||
// ============================================
|
||
// 状态切换
|
||
// ============================================
|
||
|
||
function changeProgramType(newType) {
|
||
appState.programType = newType;
|
||
const config = getCurrentProgramConfig();
|
||
appState.accountSize = config.defaultSize;
|
||
appState.expandedParam = null;
|
||
|
||
renderDesktopTable(newType);
|
||
renderMobileAccountSizes();
|
||
renderMobileParams(newType);
|
||
updateMobileAmount();
|
||
}
|
||
|
||
function changeInstantMode(newMode) {
|
||
appState.instantMode = newMode;
|
||
const config = getCurrentProgramConfig();
|
||
|
||
if (!config.availableSizes.includes(appState.accountSize)) {
|
||
appState.accountSize = config.defaultSize;
|
||
}
|
||
|
||
appState.expandedParam = null;
|
||
|
||
renderDesktopTable(newMode);
|
||
renderMobileAccountSizes();
|
||
renderMobileParams(newMode);
|
||
updateMobileAmount();
|
||
}
|
||
|
||
function changeMobileAccountSize(newSize) {
|
||
appState.accountSize = newSize;
|
||
appState.expandedParam = null;
|
||
|
||
updateMobileAmount();
|
||
$('#mobileParamsList').fadeOut(150, function() {
|
||
|
||
const tabs = document.querySelectorAll('.challenge-tab');
|
||
var type = "step";
|
||
tabs.forEach(tab => {
|
||
if (tab.classList.contains('active')) {
|
||
const program = tab.dataset.program;
|
||
if(program == "instant"){
|
||
type = "instant";
|
||
}
|
||
}
|
||
});
|
||
renderMobileParams(type);
|
||
|
||
|
||
$(this).fadeIn(150);
|
||
});
|
||
}
|
||
|
||
// ============================================
|
||
// 事件监听
|
||
// ============================================
|
||
|
||
$(document).on('click', '.challenge-tab', function() {
|
||
$('.challenge-tab').removeClass('active');
|
||
$(this).addClass('active');
|
||
|
||
const newProgram = $(this).data('program');
|
||
const addons = document.querySelector('.challenge-addons');
|
||
|
||
if (newProgram === 'instant') {
|
||
$('#instantSubTabs').addClass('show');
|
||
|
||
if (addons) {
|
||
addons.classList.add('is-hidden');
|
||
}
|
||
|
||
} else {
|
||
$('#instantSubTabs').removeClass('show');
|
||
if (addons) {
|
||
addons.classList.remove('is-hidden');
|
||
}
|
||
}
|
||
|
||
changeProgramType(newProgram);
|
||
});
|
||
|
||
$(document).on('click', '.instant-tab', function() {
|
||
$('.instant-tab').removeClass('active');
|
||
$(this).addClass('active');
|
||
|
||
const newMode = $(this).data('instant-type');
|
||
|
||
changeInstantMode(newMode);
|
||
});
|
||
|
||
$(document).on('click', '.mobile-size-btn', function() {
|
||
$('.mobile-size-btn').removeClass('active');
|
||
$(this).addClass('active');
|
||
|
||
const newSize = $(this).data('size');
|
||
changeMobileAccountSize(newSize);
|
||
});
|
||
|
||
$(document).on('click', '.param-data-row', function() {
|
||
const paramName = $(this).data('param');
|
||
if(paramName=="News Trading"){
|
||
return;
|
||
}
|
||
if (appState.expandedParam === paramName) {
|
||
appState.expandedParam = null;
|
||
} else {
|
||
appState.expandedParam = paramName;
|
||
}
|
||
|
||
$('.challenge-row-expand').removeClass('show');
|
||
$('.param-data-row .expand-btn').removeClass('expanded');
|
||
|
||
if (appState.expandedParam) {
|
||
$(`.challenge-row-expand[data-expand="${appState.expandedParam}"]`).addClass('show');
|
||
$(this).find('.expand-btn').addClass('expanded');
|
||
}
|
||
});
|
||
|
||
$(document).on('click', '.mobile-param-row', function() {
|
||
const paramName = $(this).data('param');
|
||
|
||
if (appState.expandedParam === paramName) {
|
||
appState.expandedParam = null;
|
||
} else {
|
||
appState.expandedParam = paramName;
|
||
}
|
||
|
||
$('.mobile-param-description').removeClass('show');
|
||
$('.mobile-param-row .expand-btn').removeClass('expanded');
|
||
|
||
if (appState.expandedParam) {
|
||
$(`.mobile-param-description[data-desc="${appState.expandedParam}"]`).addClass('show');
|
||
$(this).find('.expand-btn').addClass('expanded');
|
||
}
|
||
});
|
||
|
||
$(document).on('click', '.start-challenge-btn', function() {
|
||
const size = $(this).data('size');
|
||
console.log('Start Challenge:', {
|
||
programType: appState.programType,
|
||
instantMode: appState.instantMode,
|
||
accountSize: size
|
||
});
|
||
});
|
||
|
||
$(document).on('click', '.mobile-start-btn', function() {
|
||
console.log('Start Challenge:', {
|
||
programType: appState.programType,
|
||
instantMode: appState.instantMode,
|
||
accountSize: appState.accountSize
|
||
});
|
||
});
|
||
|
||
// ============================================
|
||
// 初始化
|
||
// ============================================
|
||
|
||
$(document).ready(function() {
|
||
renderDesktopTable();
|
||
renderMobileAccountSizes();
|
||
renderMobileParams();
|
||
updateMobileAmount();
|
||
});
|
||
</script>
|
||
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9be41807921bab07',t:'MTc2ODQ2NjY5NC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
|
||
</html> |