steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
1844 lines
68 KiB
HTML
1844 lines
68 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>FAQ subpage</title>
|
||
|
||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||
<link type="text/css" href="../assets/css/style.css" rel="stylesheet">
|
||
<!-- Theme CSS -->
|
||
<link type="text/css" href="../assets/css/theme.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">
|
||
<style>
|
||
.content-columns{
|
||
display: flex;
|
||
}
|
||
|
||
.left-sidebar {
|
||
position: sticky;
|
||
top: 97px;
|
||
align-self: flex-start;
|
||
overflow-y: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #ccc transparent;
|
||
}
|
||
.right-sidebar{
|
||
position: sticky;
|
||
top: 97px;
|
||
|
||
}
|
||
.section-sub-title{
|
||
max-width: 843px;
|
||
margin: 0 auto;
|
||
margin-top: 2.5rem !important;
|
||
}
|
||
.article-detail-section .text-center{
|
||
margin-bottom: 5rem !important;
|
||
margin-top: 5rem;
|
||
}
|
||
|
||
|
||
@media (min-width: 1200px) {
|
||
#academy-1 .academy-title-1 {
|
||
margin-top: 9.5rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.right-sidebar .navbar-brand {
|
||
display: inline-block;
|
||
padding-top: .325rem;
|
||
padding-bottom: .325rem;
|
||
margin-right: 1rem;
|
||
font-size: 1.09375rem;
|
||
line-height: inherit;
|
||
white-space: nowrap;
|
||
position: unset;
|
||
-webkit-transform: translate(-50%, -50%);
|
||
transform: unset;
|
||
}
|
||
|
||
.breadcrumb-wrapper {
|
||
padding: 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
.breadcrumb{
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
|
||
/* Fixed State - 当Course Structure锁定时（仅桌面端） */
|
||
@media (min-width: 992px) {
|
||
.course-structure.cs-fixed {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
background: var(--aifo-dark-gary);
|
||
padding: 20px 0 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
.section-subtitle {
|
||
font-size: 15px;
|
||
color: var(--text-muted);
|
||
margin: 0;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Breadcrumb Navigation */
|
||
.breadcrumb-wrapper {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
|
||
overflow-x: auto;
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.breadcrumb-wrapper::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.breadcrumb {
|
||
display: flex;
|
||
align-items: start;
|
||
justify-content: start;
|
||
gap: 8px;
|
||
flex-wrap: nowrap;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.breadcrumb-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
height: 30px;
|
||
padding: 0 14px;
|
||
background: #231F20;
|
||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||
border-radius: 999px;
|
||
color: rgba(249, 249, 249, 0.78);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.breadcrumb-item:hover {
|
||
background: rgba(255, 255, 255, 0.10);
|
||
border-color: rgba(255, 255, 255, 0.20);
|
||
color: rgba(249, 249, 249, 0.95);
|
||
}
|
||
|
||
.breadcrumb-item.active {
|
||
|
||
color: #F98715;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
box-shadow: 0 0 0 2px rgba(249, 135, 21, 0.12);
|
||
cursor: default;
|
||
}
|
||
|
||
.breadcrumb-item.active:hover {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border-color: #F98715;
|
||
color: #F98715;
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
color: #F98715;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Breadcrumb Divider - 只在桌面端显示 */
|
||
.breadcrumb-divider {
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.breadcrumb-divider-line {
|
||
width: 100%;
|
||
height: 1px;
|
||
background: var(--aifo-orange);
|
||
// margin: 16px 0 0;
|
||
}
|
||
|
||
/* Sticky Tab Navigation */
|
||
.sticky-tabs-wrapper {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: var(--aifo-dark-gary);
|
||
padding: 20px 0;
|
||
margin-bottom: 32px;
|
||
border-bottom: 1px solid var(--border-faint);
|
||
}
|
||
|
||
.tab-nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.tab-item {
|
||
height: 46px;
|
||
padding: 0 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||
border-radius: 999px;
|
||
color: rgba(249, 249, 249, 0.75);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tab-item:hover {
|
||
border-color: rgba(255, 255, 255, 0.20);
|
||
color: var(--aifo-white);
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.tab-item.active {
|
||
background: var(--aifo-orange);
|
||
border-color: var(--aifo-orange);
|
||
color: #0B0B0B;
|
||
font-weight: 600;
|
||
box-shadow: 0 10px 24px rgba(249, 135, 21, 0.25);
|
||
}
|
||
|
||
|
||
|
||
.content-columns {
|
||
display: flex;
|
||
gap: 24px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.left-sidebar {
|
||
flex: 0 0 290px;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1 1 auto;
|
||
min-width: 560px;
|
||
}
|
||
|
||
|
||
|
||
.sticky-sidebar {
|
||
position: sticky;
|
||
top: 120px;
|
||
|
||
}
|
||
|
||
.sticky-sidebar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* Table of Contents */
|
||
.toc-card {
|
||
background: var(--aifo-dark-gary);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.toc-card::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.toc-title {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--aifo-white);
|
||
margin-bottom: 20px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.toc-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.toc-list::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.toc-item {
|
||
position: relative;
|
||
padding: 0px 10px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-height: 44px;
|
||
height: auto;
|
||
}
|
||
|
||
.toc-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 2px;
|
||
height: 100%;
|
||
background: var(--aifo-orange);
|
||
border-radius: 2px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.toc-item:hover .toc-name {
|
||
color: rgba(249, 135, 21, 0.85);
|
||
}
|
||
|
||
|
||
.toc-number {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: rgba(249, 249, 249, 0.45);
|
||
flex-shrink: 0;
|
||
width: 20px;
|
||
text-align: left;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.toc-item.active .toc-number {
|
||
color: rgba(249, 249, 249, 0.60);
|
||
}
|
||
|
||
.toc-name {
|
||
font-size: 14px;
|
||
color: rgba(249, 249, 249, 0.60);
|
||
font-weight: 500;
|
||
flex: 1;
|
||
transition: color 0.2s ease;
|
||
line-height: 1.4;
|
||
|
||
display: -webkit-box;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
box-orient: vertical;
|
||
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.toc-item.active .toc-name {
|
||
color: var(--aifo-orange);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Main Article */
|
||
.main-article {
|
||
background: var(--aifo-dark-gary);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
}
|
||
|
||
.article-header {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 32px;
|
||
font-weight: 400;
|
||
color: var(--aifo-white);
|
||
margin: 0;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.article-content {
|
||
font-size: 16px;
|
||
line-height: 1.7;
|
||
color: rgba(249, 249, 249, 0.82);
|
||
}
|
||
|
||
|
||
|
||
|
||
.chart-card {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-radius: 16px;
|
||
padding: 14px;
|
||
margin: 32px 0;
|
||
border: 1px solid var(--border-faint);
|
||
}
|
||
|
||
.chart-placeholder {
|
||
width: 100%;
|
||
height: 300px;
|
||
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text-dimmed);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Right Sidebar */
|
||
.lessons-card {
|
||
background: var(--aifo-dark-gary);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.lessons-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--aifo-white);
|
||
margin-bottom: 20px;
|
||
letter-spacing: 0.08em;
|
||
|
||
}
|
||
|
||
.lesson-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
margin-bottom: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
border: 1px solid rgba(249, 135, 21, 0.25);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.lesson-item:hover .lesson-text {
|
||
color: var(--aifo-orange);
|
||
}
|
||
|
||
.lesson-item.active .lesson-text {
|
||
color: var(--aifo-orange);
|
||
}
|
||
|
||
.lesson-thumbnail {
|
||
width: 120px;
|
||
height: 68px;
|
||
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
img{
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
}
|
||
|
||
.lesson-thumbnail::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 32px;
|
||
height: 32px;
|
||
background: rgba(249, 135, 21, 0.9);
|
||
border-radius: 50%;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.lesson-thumbnail::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-45%, -50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-style: solid;
|
||
border-width: 6px 0 6px 10px;
|
||
border-color: transparent transparent transparent white;
|
||
z-index: 1;
|
||
}
|
||
|
||
.lesson-text {
|
||
flex: 1;
|
||
font-size: 13px;
|
||
color: var(--text-dimmed);
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Challenge Banner */
|
||
.challenge-banner {
|
||
background: linear-gradient(135deg, rgba(249, 135, 21, 0.15) 0%, rgba(255,255,255,0.04) 60%);
|
||
border-radius: 16px;
|
||
padding: 32px 24px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.challenge-logo {
|
||
width: 48px;
|
||
height: 48px;
|
||
margin: 0 auto 16px;
|
||
}
|
||
|
||
.challenge-logo svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.challenge-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: var(--aifo-white);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.challenge-text {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.challenge-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--aifo-orange);
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 999px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
cursor: pointer;
|
||
|
||
svg{
|
||
width: 20px;
|
||
}
|
||
}
|
||
|
||
.challenge-btn:hover {
|
||
background: #e67a0d;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(249, 135, 21, 0.3);
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.challenge-decoration {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60px;
|
||
opacity: 0.1;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
}
|
||
.breadcrumb {
|
||
background: transparent;
|
||
margin: 0;
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
color: #F98715 !important;
|
||
font-size: 13px !important;
|
||
font-weight: 600;
|
||
-ms-flex-negative: 0;
|
||
flex-shrink: 0;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
.bar {
|
||
width: 8px;
|
||
background: var(--aifo-orange);
|
||
border-radius: 4px 4px 0 0;
|
||
}
|
||
|
||
|
||
/* Tablet & Mobile Adjustments */
|
||
@media (max-width: 991px) {
|
||
.content-columns {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.left-sidebar,
|
||
.main-content,
|
||
.right-sidebar {
|
||
flex: 1 1 auto;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sticky-sidebar {
|
||
position: static;
|
||
max-height: none;
|
||
}
|
||
|
||
/* 左侧目录隐藏 */
|
||
.left-sidebar {
|
||
display: none;
|
||
}
|
||
|
||
/* 使用order调整顺序：正文在上，右侧栏在下 */
|
||
.main-content {
|
||
order: 1;
|
||
}
|
||
|
||
.right-sidebar {
|
||
order: 2;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 移除橘色分割线在移动端的大间距 */
|
||
.breadcrumb-divider {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Mobile Specific (≤767px) */
|
||
@media (max-width: 767px) {
|
||
|
||
.article-detail-section {
|
||
padding-bottom: 2.375rem;
|
||
overflow: hidden;
|
||
}
|
||
table {
|
||
min-width: 100%;
|
||
}
|
||
|
||
#faq_subpage .content-container {
|
||
padding: 30px 16px 0px;
|
||
}
|
||
/* 禁用固定工作台逻辑 */
|
||
body.mobile-mode {
|
||
overflow: auto !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero-section {
|
||
padding: 32px 0 40px;
|
||
min-height: auto;
|
||
}
|
||
|
||
.hero-container > div {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 24px !important;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.hero-tag {
|
||
font-size: 12px;
|
||
padding: 5px 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* Course Structure Section - 减少顶部间距 */
|
||
.course-structure {
|
||
padding: 24px 0 0;
|
||
}
|
||
|
||
.section-title {
|
||
margin-bottom: 20px;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: 22px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 面包屑 - 横向滑动 */
|
||
.breadcrumb-wrapper {
|
||
padding: 12px 16px 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.breadcrumb {
|
||
justify-content: flex-start;
|
||
gap: 6px;
|
||
}
|
||
|
||
.breadcrumb-item {
|
||
height: 32px;
|
||
padding: 0 12px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* Tabs - 横向滑动 */
|
||
.sticky-tabs-wrapper {
|
||
padding: 12px 0;
|
||
margin-bottom: 16px;
|
||
position: static;
|
||
}
|
||
|
||
.tab-nav {
|
||
justify-content: flex-start;
|
||
flex-wrap: nowrap;
|
||
gap: 10px;
|
||
padding: 0 16px;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.tab-nav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 0 18px;
|
||
height: 40px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 内容区域 */
|
||
|
||
|
||
.content-columns {
|
||
gap: 16px;
|
||
}
|
||
|
||
/* 正文卡片 */
|
||
.main-article {
|
||
padding: 22px 20px;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 26px;
|
||
}
|
||
|
||
.article-content {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.article-content h2 {
|
||
font-size: 20px;
|
||
margin: 28px 0 16px;
|
||
}
|
||
|
||
.article-content p {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.chart-card {
|
||
margin: 24px 0;
|
||
padding: 12px;
|
||
}
|
||
|
||
.chart-placeholder {
|
||
height: 220px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 右侧卡片 */
|
||
.lessons-card,
|
||
.challenge-banner {
|
||
padding: 20px 18px;
|
||
}
|
||
|
||
.lessons-title {
|
||
font-size: 11px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.lesson-item {
|
||
padding: 10px;
|
||
margin-bottom: 12px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.lesson-thumbnail {
|
||
width: 100px;
|
||
height: 56px;
|
||
}
|
||
|
||
.lesson-text {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Challenge Banner */
|
||
.challenge-logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.challenge-title {
|
||
font-size: 16px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.challenge-text {
|
||
font-size: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.challenge-btn {
|
||
padding: 10px 20px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* Completion Card */
|
||
.completion-section {
|
||
padding: 32px 16px 60px;
|
||
}
|
||
|
||
.completion-card {
|
||
flex-direction: column;
|
||
padding: 28px 20px;
|
||
gap: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.completion-title {
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.completion-text {
|
||
font-size: 14px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.completion-buttons {
|
||
justify-content: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.lesson-nav-btn {
|
||
padding: 10px 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.completion-icons {
|
||
gap: 16px;
|
||
}
|
||
|
||
.glow-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.glow-icon::before {
|
||
width: 76px;
|
||
height: 76px;
|
||
}
|
||
|
||
.glow-icon svg {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
/* Back to top */
|
||
.back-section {
|
||
padding: 28px 16px 16px;
|
||
}
|
||
|
||
.back-to-top-btn {
|
||
padding: 10px 24px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.suport-cart-section {
|
||
padding-top: 0px;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body class="aifo-bg-primary">
|
||
<div id="nav-container"></div>
|
||
|
||
|
||
<main class="main" id="faq_subpage">
|
||
<!-- banner start -->
|
||
<div class="academy-block-1">
|
||
|
||
<div class="main-wrapper h-full">
|
||
<!-- <div class="dot-pattern"></div>
|
||
<div class="vignette"></div> -->
|
||
<div class="content-container"><!-- Search Bar -->
|
||
<div class="search-container">
|
||
<div class="search-wrapper">
|
||
<div class="search-input-wrapper">
|
||
<svg class="search-icon" width="20" height="20" viewbox="0 0 20 20" fill="none">
|
||
<path d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM19 19l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||
</svg>
|
||
<input type="text" class="search-input" id="searchInput" placeholder="Search for articles...">
|
||
</div>
|
||
<button class="search-btn btn-default" id="searchBtn">Search</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- article content section -->
|
||
<section class="article-content-section" style="display:none;">
|
||
<div class="container">
|
||
<div class="row align-items-start d-flex justify-content-between">
|
||
<!-- left menu -->
|
||
<div class="col-lg-3 col-md-4">
|
||
<div class="sticky-wrapper">
|
||
<aside class="sticky-element ">
|
||
<div class="menu-card">
|
||
<ul class="menu-list" id="generated-toc-old">
|
||
<!-- h title content -->
|
||
</ul>
|
||
</div>
|
||
|
||
</aside>
|
||
</div>
|
||
</div><!-- right sild article content -->
|
||
<section class="col-lg-9 col-md-8">
|
||
<article class="article-content-old">
|
||
<nav class="breadcrumb-nav" id="breadcrumb">
|
||
<a href="#" class="breadcrumb-link">All FAQ</a>
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
<a href="#" class="breadcrumb-link">Why AIFO</a>
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
<span>How to start?</span>
|
||
</nav>
|
||
|
||
<h1 class="article-title" id="article-title">How to start?</h1>
|
||
<div class="article-meta">
|
||
<span>Published on Dec 14th</span>
|
||
<span>Updated on Dec 18th</span>
|
||
</div>
|
||
<div class="article_content" id="article_content">
|
||
<div class="article-body">
|
||
|
||
<h1> h1 title1 </h1>
|
||
<p>Price fluctuations result from supply-demand imbalance…</p>
|
||
<p>greater focus on the underlying market mechanics that drive price movement.
|
||
In financial markets, price fluctuations are fundamentally the result of an imbalance between supply and demand, in the same way that product prices in the real economy are shaped by the interaction of buyers and sellers.
|
||
This strategy aims to identify key price zones where supply or demand is particularly strong. These zones often serve as turning points where institutional participants enter or exit large positions, creating significant price reactions. Traders who apply this methodology typically seek to enter positions from these zones, taking advantage of the expected reversal or continuation that follows.</p>
|
||
<p>Price fluctuations result from supply-demand imbalance…</p>
|
||
<p>greater focus on the underlying market mechanics that drive price movement.
|
||
In financial markets, price fluctuations are fundamentally the result of an imbalance between supply and demand, in the same way that product prices in the real economy are shaped by the interaction of buyers and sellers.
|
||
This strategy aims to identify key price zones where supply or demand is particularly strong. These zones often serve as turning points where institutional participants enter or exit large positions, creating significant price reactions. Traders who apply this methodology typically seek to enter positions from these zones, taking advantage of the expected reversal or continuation that follows.</p>
|
||
<p>Price fluctuations result from supply-demand imbalance…</p>
|
||
<p>greater focus on the underlying market mechanics that drive price movement.
|
||
In financial markets, price fluctuations are fundamentally the result of an imbalance between supply and demand, in the same way that product prices in the real economy are shaped by the interaction of buyers and sellers.
|
||
This strategy aims to identify key price zones where supply or demand is particularly strong. These zones often serve as turning points where institutional participants enter or exit large positions, creating significant price reactions. Traders who apply this methodology typically seek to enter positions from these zones, taking advantage of the expected reversal or continuation that follows.</p>
|
||
|
||
|
||
<p>Price fluctuations result from supply-demand imbalance…</p>
|
||
<p>greater focus on the underlying market mechanics that drive price movement.
|
||
In financial markets, price fluctuations are fundamentally the result of an imbalance between supply and demand, in the same way that product prices in the real economy are shaped by the interaction of buyers and sellers.
|
||
This strategy aims to identify key price zones where supply or demand is particularly strong. These zones often serve as turning points where institutional participants enter or exit large positions, creating significant price reactions. Traders who apply this methodology typically seek to enter positions from these zones, taking advantage of the expected reversal or continuation that follows.</p>
|
||
<img src="../assets/images/backgrounds/article-demo-1.png" alt="">
|
||
|
||
<h1> h1 title2 </h1>
|
||
<p>Price fluctuations result from supply-demand imbalance…</p>
|
||
<p>greater focus on the underlying market mechanics that drive price movement.
|
||
In financial markets, price fluctuations are fundamentally the result of an imbalance between supply and demand, in the same way that product prices in the real economy are shaped by the interaction of buyers and sellers.
|
||
This strategy aims to identify key price zones where supply or demand is particularly strong. These zones often serve as turning points where institutional participants enter or exit large positions, creating significant price reactions. Traders who apply this methodology typically seek to enter positions from these zones, taking advantage of the expected reversal or continuation that follows.</p>
|
||
<img src="../assets/images/backgrounds/article-demo-1.png" alt="">
|
||
<h1>Supply and Demand Zones 2</h1>
|
||
<p>Price fluctuations result from supply-demand imbalance…</p>
|
||
<p>greater focus on the underlying market mechanics that drive price movement.
|
||
In financial markets, price fluctuations are fundamentally the result of an imbalance between supply and demand, in the same way that product prices in the real economy are shaped by the interaction of buyers and sellers.
|
||
This strategy aims to identify key price zones where supply or demand is particularly strong. These zones often serve as turning points where institutional participants enter or exit large positions, creating significant price reactions. Traders who apply this methodology typically seek to enter positions from these zones, taking advantage of the expected reversal or continuation that follows.</p>
|
||
<img src="../assets/images/backgrounds/article-demo-1.png" alt="">
|
||
<h1> h1 title3 </h1>
|
||
<p>Price fluctuations result from supply-demand imbalance…</p>
|
||
<p>greater focus on the underlying market mechanics that drive price movement.
|
||
In financial markets, price fluctuations are fundamentally the result of an imbalance between supply and demand, in the same way that product prices in the real economy are shaped by the interaction of buyers and sellers.
|
||
This strategy aims to identify key price zones where supply or demand is particularly strong. These zones often serve as turning points where institutional participants enter or exit large positions, creating significant price reactions. Traders who apply this methodology typically seek to enter positions from these zones, taking advantage of the expected reversal or continuation that follows.</p>
|
||
<img src="../assets/images/backgrounds/article-demo-1.png" alt="">
|
||
<h1>Supply and Demand 4</h1>
|
||
<p>Price fluctuations result from supply-demand imbalance…</p>
|
||
<p>greater focus on the underlying market mechanics that drive price movement.
|
||
In financial markets, price fluctuations are fundamentally the result of an imbalance between supply and demand, in the same way that product prices in the real economy are shaped by the interaction of buyers and sellers.
|
||
This strategy aims to identify key price zones where supply or demand is particularly strong. These zones often serve as turning points where institutional participants enter or exit large positions, creating significant price reactions. Traders who apply this methodology typically seek to enter positions from these zones, taking advantage of the expected reversal or continuation that follows.</p>
|
||
<img src="../assets/images/backgrounds/article-demo-1.png" alt="">
|
||
|
||
<h1> h1 title4 </h1>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-button-wrapper"><button class="cta-button" id="cta-button">Start Challenge</button></div>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- article detail section -->
|
||
<section class="article-detail-section">
|
||
<div class="container">
|
||
<div class="content-columns-wrapper">
|
||
<div class="content-columns"><!-- Left Sidebar - Table of Contents (桌面端显示) -->
|
||
<div class="left-sidebar">
|
||
<div class="sticky-sidebar">
|
||
<div class="toc-card">
|
||
<div class="toc-title">
|
||
Table of Contents
|
||
</div>
|
||
<ul class="toc-list" id="generated-toc">
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div><!-- Main Article (Center) - order: 1 on mobile -->
|
||
<div class="main-content">
|
||
<div class="breadcrumb-wrapper">
|
||
<nav class="breadcrumb">
|
||
<a href="#" class="breadcrumb-item">Course Structure</a>
|
||
<span class="breadcrumb-separator">›</span>
|
||
<a href="#" class="breadcrumb-item">2.2 Technical Analysis Explained</a>
|
||
<span class="breadcrumb-separator">›</span>
|
||
<span class="breadcrumb-item">2.2.5 What is the CCI</span>
|
||
<!-- <span class="breadcrumb-item active">2.2.5 What is the CCI</span> -->
|
||
</nav>
|
||
</div><!-- Breadcrumb Divider (桌面端显示) -->
|
||
|
||
<div class="breadcrumb-divider">
|
||
|
||
<div class="breadcrumb-divider-line"></div>
|
||
</div>
|
||
|
||
<div class="main-article">
|
||
<div class="article-header">
|
||
<h1 class="article-title">Understanding the CCI Indicator</h1>
|
||
</div>
|
||
<div class="article-content">
|
||
<h2>What is the CCI?</h2>
|
||
<p>The Commodity Channel Index (CCI) is a versatile momentum-based oscillator developed by Donald Lambert in 1980. Originally designed for commodity trading, the CCI has proven equally effective across various financial markets including stocks, forex, and cryptocurrencies.</p>
|
||
<p>The CCI measures the current price level relative to an average price level over a specified period. When the CCI is high, it indicates that prices are well above their average, suggesting potential overbought conditions. Conversely, when the CCI is low, prices are well below their average, potentially indicating oversold conditions.</p>
|
||
<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Type</strong></td><td><strong>Size</strong></td></tr><tr><td>Standard Lot</td><td>100,000 units of base currency</td></tr><tr><td>Mini Lot</td><td>10,000 units</td></tr><tr><td>Micro Lot</td><td>1,000 units</td></tr></tbody></table></figure>
|
||
<h2>Applying the CCI in Trading</h2>
|
||
<p>There are several popular strategies traders employ when using the CCI indicator. The CCI typically oscillates between +100 and -100. Readings above +100 may signal overbought conditions, while readings below -100 may indicate oversold conditions.</p>
|
||
<p>Divergence trading involves looking for situations where price makes new highs or lows while the CCI fails to confirm, potentially signaling a reversal. Zero-line crossovers offer another approach—when CCI crosses above zero, it may suggest bullish momentum, while crossing below zero may indicate bearish momentum.</p>
|
||
|
||
<h2>CCI Formula and CalculationFormula and CalculatioFormula and CalculatioFormula and CalculatioFormula and Calculatio</h2>
|
||
<p>The CCI is calculated using the following steps: First, compute the Typical Price (TP) as the average of high, low, and close prices. Then, calculate the Simple Moving Average of the Typical Price over your chosen period. Finally, derive the Mean Deviation and apply the CCI formula.</p>
|
||
<p>The formula divides the difference between the Typical Price and its moving average by a constant multiplied by the Mean Deviation. This normalization ensures that approximately 70-80% of CCI values fall between -100 and +100.</p>
|
||
<h2 >Trading Strategies</h2>
|
||
<p>Many traders use the +100/-100 levels as entry and exit signals. When CCI moves above +100, it signals strong upward momentum, and traders might consider long positions. When it falls below -100, it indicates strong downward momentum, potentially signaling short opportunities.</p>
|
||
<p>Another effective strategy combines CCI with support and resistance levels. When price approaches a support level and CCI shows oversold readings below -100, it may present a buying opportunity. Similarly, resistance levels combined with overbought CCI readings above +100 might signal selling opportunities.</p>
|
||
<h2>Common Mistakes</h2>
|
||
<p>One of the most common mistakes traders make is relying solely on the CCI without considering other factors. The CCI, like all technical indicators, should not be used in isolation. Market context, price action, and volume should all be considered alongside CCI readings.</p>
|
||
<p>Another mistake is assuming that overbought always means "sell" and oversold always means "buy." In strong trending markets, the CCI can remain in overbought or oversold territory for extended periods. This is why confirmation from other indicators is crucial.</p>
|
||
<h2>Best Practices</h2>
|
||
<p>For optimal results, consider combining CCI with other technical indicators such as moving averages or support/resistance levels. This multi-indicator approach helps filter out false signals and provides stronger confirmation for trading decisions.</p>
|
||
<p>Always use proper risk management techniques. Set stop-loss orders to protect your capital, and never risk more than a small percentage of your trading account on a single trade. The CCI is a powerful tool, but it works best when integrated into a comprehensive trading strategy.</p>
|
||
<p>Finally, practice using the CCI on historical data before applying it to live trading. This allows you to understand its behavior in different market conditions and develop confidence in interpreting its signals.</p>
|
||
</div>
|
||
</div>
|
||
</div><!-- Right Sidebar - order: 2 on mobile (正文之后) -->
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- FAQ List -->
|
||
<section class="faq-section" id="faq">
|
||
<div class="bg-orange-light"></div>
|
||
<div class="container">
|
||
<!-- Page Title -->
|
||
<div class="page-title-wrapper">
|
||
<h1 class="page-title text-center" id="pageTitle">Related Articles</h1>
|
||
</div>
|
||
<div style="max-width: 850px; margin: 0 auto;">
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-header">
|
||
<span class="faq-question fade-in show">How do I start a challenge?</span>
|
||
<div class="faq-icon-box rotate90">
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</div>
|
||
</button>
|
||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||
<div class="faq-answer fade-in show">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in show">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-header">
|
||
<span class="faq-question fade-in show">How do I start a challenge?</span>
|
||
<div class="faq-icon-box rotate90">
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</div>
|
||
</button>
|
||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||
<div class="faq-answer fade-in show">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in show">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-header">
|
||
<span class="faq-question fade-in show">How do I start a challenge?</span>
|
||
<div class="faq-icon-box rotate90">
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</div>
|
||
</button>
|
||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||
<div class="faq-answer fade-in show">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in show">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-header">
|
||
<span class="faq-question fade-in show">How do I start a challenge?</span>
|
||
<div class="faq-icon-box rotate90">
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</div>
|
||
</button>
|
||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||
<div class="faq-answer fade-in show">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in show">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-header">
|
||
<span class="faq-question fade-in show">How do I start a challenge?</span>
|
||
<div class="faq-icon-box rotate90">
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</div>
|
||
</button>
|
||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||
<div class="faq-answer fade-in show">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in show">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-header">
|
||
<span class="faq-question fade-in show">How do I start a challenge?</span>
|
||
<div class="faq-icon-box rotate90">
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</div>
|
||
</button>
|
||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||
<div class="faq-answer fade-in show">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in show">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-header">
|
||
<span class="faq-question fade-in show">How do I start a challenge?</span>
|
||
<div class="faq-icon-box rotate90">
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</div>
|
||
</button>
|
||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||
<div class="faq-answer fade-in show">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in show">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-header">
|
||
<span class="faq-question fade-in show">How do I start a challenge?</span>
|
||
<div class="faq-icon-box rotate90">
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</div>
|
||
</button>
|
||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||
<div class="faq-answer fade-in show">
|
||
<p>Choose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit target, you'll be granted a real funded account.</p>
|
||
<a href="#" class="see-more-link text-orange fade-in show">See more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="custom-pagination d-flex justify-content-center" aria-label="Pagination">
|
||
<ul class="pagination mb-0">
|
||
<li class="page-item disabled">
|
||
<a class="page-link" href="#" aria-label="Previous Page">
|
||
<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="next Page">
|
||
<span aria-hidden="true">></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</section>
|
||
|
||
|
||
<!-- Support Card -->
|
||
<div class="suport-cart-section">
|
||
<div class="support-card-wrapper">
|
||
<div class="support-card">
|
||
<div class="support-content">
|
||
<div class="support-text">
|
||
<h2 class="support-title" id="supportTitle">Not finding what you're <br> looking for?</h2>
|
||
<p class="support-subtitle" id="supportSubtitle">Chat with us or send us an email</p>
|
||
<div class="support-buttons"><button class="support-btn btn-default support-btn-primary" id="chatBtn"> <span id="chatBtnText">Chat with us</span> </button>
|
||
<a href="#" class="support-btn support-btn-secondary" id="emailBtn">
|
||
<span id="emailBtnText">Send us an email</span>
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="support-visual">
|
||
<div class="support-glow">
|
||
<div class="support-icon">
|
||
<!-- <svg viewbox="0 0 40 40"><path d="M20 2L4 12v16l16 10 16-10V12L20 2zm0 3.5L32.5 13v14L20 34.5 7.5 27V13L20 5.5zM20 10a6 6 0 100 12 6 6 0 000-12zm0 2a4 4 0 110 8 4 4 0 010-8z" fill="currentColor" />
|
||
</svg> -->
|
||
<img src="../assets/images/backgrounds/img-h-07.png" alt="Funded Trading" class="hero-img floating-img">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</main>
|
||
|
||
<div id="footer-container"></div>
|
||
|
||
<!-- Core -->
|
||
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
|
||
<script src="../assets/vendor/popper/popper.min.js"></script>
|
||
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
|
||
<!-- FontAwesome 5 -->
|
||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||
<!-- Page plugins -->
|
||
<script src="../assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
|
||
<script src="../assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
|
||
<script src="../assets/vendor/input-mask/input-mask.min.js"></script>
|
||
<script src="../assets/vendor/nouislider/js/nouislider.min.js"></script>
|
||
<script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
|
||
<!-- Theme JS -->
|
||
<script src="../assets/js/theme.js"></script>
|
||
<!-- Top code bar behavior -->
|
||
|
||
<script src="/js/layout.js"></script>
|
||
</body>
|
||
|
||
<script>
|
||
|
||
|
||
</script>
|
||
|
||
|
||
<script>
|
||
(function ($) {
|
||
|
||
|
||
|
||
$(document).ready(function() {
|
||
// 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');
|
||
}
|
||
});
|
||
|
||
// Feedback Carousel Controls
|
||
$('#feedbackPrev').on('click', function() {
|
||
$('#feedbackCarousel').carousel('prev');
|
||
updateCarouselButtons();
|
||
});
|
||
|
||
$('#feedbackNext').on('click', function() {
|
||
$('#feedbackCarousel').carousel('next');
|
||
updateCarouselButtons();
|
||
});
|
||
|
||
$('#feedbackCarousel').on('slid.bs.carousel', function() {
|
||
updateCarouselButtons();
|
||
});
|
||
|
||
function updateCarouselButtons() {
|
||
var $carousel = $('#feedbackCarousel');
|
||
var activeIndex = $carousel.find('.carousel-item.active').index();
|
||
var totalItems = $carousel.find('.carousel-item').length;
|
||
|
||
$('#feedbackPrev').prop('disabled', activeIndex === 0);
|
||
$('#feedbackNext').prop('disabled', activeIndex === totalItems - 1);
|
||
}
|
||
|
||
// Initialize carousel button states
|
||
updateCarouselButtons();
|
||
|
||
// Smooth scroll for anchor links
|
||
|
||
});
|
||
|
||
|
||
const tocDesktop = $("#generated-toc-old");
|
||
const articleBox = $(".article_content-old");
|
||
|
||
/* ===========================
|
||
Auto-generate table of contents
|
||
============================ */
|
||
$(".article_content-old h1").each(function () {
|
||
const tag = $(this).prop("tagName").toLowerCase();
|
||
const text = $(this).text();
|
||
const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
|
||
// <li class="menu-item">
|
||
// <span>Dashboard</span>
|
||
// <svg class="menu-item-chevron" fill="none" stroke="currentColor" viewbox="0 0 24 24" stroke-width="2">
|
||
// <path d="M9 5l7 7-7 7" />
|
||
// </svg>
|
||
// </li>
|
||
$(this).attr("id", id);
|
||
|
||
const item = `
|
||
<li class="menu-item">
|
||
<a href="#${id}" class="toc-link" style="margin-left:${tag === 'h2' ? '15px' : '0'}">
|
||
<span class="h-title">${text}</span>
|
||
<span class="icon iconfont icon-arrow"></span>
|
||
</a>
|
||
|
||
</li>
|
||
`;
|
||
|
||
tocDesktop.append(item);
|
||
// tocMobile.append(item);
|
||
});
|
||
|
||
/* ===========================
|
||
TOC click => scroll article_content only
|
||
Completely disable browser default jump
|
||
============================ */
|
||
|
||
$(document).on("click", ".toc-link-old", function (e) {
|
||
// Completely prevent browser default behavior (including page jump)
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const targetId = $(this).attr("href");
|
||
const target = $(targetId);
|
||
|
||
if (target.length > 0) {
|
||
// Use position().top to get relative offset of title in article_content
|
||
const offset = target.position().top;
|
||
|
||
articleBox.stop(true).animate({
|
||
scrollTop: offset + articleBox.scrollTop() - 20
|
||
}, 350);
|
||
}
|
||
|
||
return false; // Block default behavior again
|
||
});
|
||
|
||
/* ===========================
|
||
Mobile TOC expand
|
||
============================ */
|
||
$(".toc-mobile-toggle-old").click(function () {
|
||
$(".toc-mobile").slideToggle(180);
|
||
});
|
||
|
||
|
||
$('.menu-item-old').on('click', function() {
|
||
$('.menu-item').removeClass('active');
|
||
$(this).addClass('active');
|
||
});
|
||
|
||
})(jQuery);
|
||
</script>
|
||
|
||
<script>
|
||
$(function () {
|
||
|
||
const tocDesktop = $("#generated-toc");
|
||
const tocMobile = $("#generated-toc-mobile");
|
||
const articleBox = $(".article-content"); // scrollable content area
|
||
|
||
/* ===========================
|
||
Auto-generate table of contents
|
||
============================ */
|
||
$(".article-content h1, .article-content h2").each(function (index, item) {
|
||
const tag = $(this).prop("tagName").toLowerCase();
|
||
const text = $(this).text();
|
||
const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
|
||
|
||
$(this).attr("id", id);
|
||
|
||
$is_active = "";
|
||
|
||
if (index === 0) {
|
||
$is_active = "active";
|
||
}
|
||
|
||
const tocitem = `
|
||
<li class="toc-item ${$is_active}">
|
||
<a href="#${id}" class="toc-link toc-name" style="margin-left:${tag === 'h2' ? '15px' : '0'}">${text}</a>
|
||
</li>
|
||
`;
|
||
|
||
tocDesktop.append(tocitem);
|
||
tocMobile.append(tocitem);
|
||
initTableOfContents();
|
||
updateProgressIndicator(0);
|
||
});
|
||
|
||
/* ===========================
|
||
TOC click => scroll article_content only
|
||
Completely disable browser default jump
|
||
============================ */
|
||
|
||
$(document).on("click", ".toc-link", function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const targetId = $(this).attr("href");
|
||
const targetElement = document.querySelector(targetId);
|
||
|
||
if (targetElement) {
|
||
// 计算滚动位置，考虑97px的导航栏
|
||
const targetPosition = targetElement.getBoundingClientRect().top;
|
||
const offsetPosition = targetPosition + window.pageYOffset - 97;
|
||
|
||
// 平滑滚动到计算后的位置
|
||
window.scrollTo({
|
||
top: offsetPosition,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
|
||
return false;
|
||
});
|
||
|
||
/* ===========================
|
||
Mobile TOC expand
|
||
============================ */
|
||
$(".toc-mobile-toggle").click(function () {
|
||
$(".toc-mobile").slideToggle(180);
|
||
});
|
||
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
// Default configuration
|
||
const defaultConfigContent = {
|
||
hero_tag: '2.2.5',
|
||
hero_title_line1: 'Strength',
|
||
hero_title_line2: 'indicators – CCI',
|
||
section_subtitle: 'Every successful trader begins with a clear path. Our course guides you toward funded success.',
|
||
primary_color: '#F98715',
|
||
background_color: '#0B0B0B',
|
||
text_color: '#F9F9F9',
|
||
surface_color: '#141414',
|
||
font_family: 'Inter'
|
||
};
|
||
|
||
// 检测移动端并禁用固定工作台
|
||
function detectMobileAndDisableLock() {
|
||
const isMobile = window.innerWidth < 992;
|
||
if (isMobile) {
|
||
document.body.classList.add('mobile-mode');
|
||
// 确保body可以正常滚动
|
||
document.body.style.overflow = '';
|
||
document.body.style.height = '';
|
||
} else {
|
||
document.body.classList.remove('mobile-mode');
|
||
}
|
||
return isMobile;
|
||
}
|
||
|
||
// Generate watermark pattern
|
||
// function generateWatermark() {
|
||
// const watermark = document.getElementById('watermark');
|
||
// const text = 'CREATED BY AIFO ACADEMY';
|
||
// let html = '';
|
||
|
||
// for (let i = 0; i < 20; i++) {
|
||
// for (let j = 0; j < 10; j++) {
|
||
// const top = i * 120 - 200;
|
||
// const left = j * 350 - 200;
|
||
// html += `<span class="watermark-text" style="top: ${top}px; left: ${left}px;">${text}</span>`;
|
||
// }
|
||
// }
|
||
|
||
// watermark.innerHTML = html;
|
||
// }
|
||
|
||
// Smooth scroll to sections - 在锁定状态下滚动中间正文
|
||
function initTableOfContents() {
|
||
const tocItems = document.querySelectorAll('.toc-item');
|
||
const mainContent = document.querySelector('.main-content');
|
||
const tocList = document.getElementById('#generated-toc');
|
||
|
||
tocItems.forEach((item, index) => {
|
||
item.addEventListener('click', function() {
|
||
tocItems.forEach(i => i.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
|
||
|
||
// 更新橘色高亮段位置
|
||
// updateProgressIndicator(index);
|
||
|
||
// const targetId = `section-${index + 1}`;
|
||
// const target = document.getElementById(targetId);
|
||
|
||
// if (target && mainContent) {
|
||
// // 如果在锁定状态，滚动中间正文容器
|
||
// const courseStructure = document.querySelector('.course-structure');
|
||
// if (courseStructure && courseStructure.classList.contains('cs-fixed')) {
|
||
// const targetPosition = target.offsetTop - 20;
|
||
// mainContent.scrollTo({
|
||
// top: targetPosition,
|
||
// behavior: 'smooth'
|
||
// });
|
||
// } else {
|
||
// // 否则正常页面滚动
|
||
// const offset = 160;
|
||
// const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
||
// window.scrollTo({
|
||
// top: targetPosition,
|
||
// behavior: 'smooth'
|
||
// });
|
||
// }
|
||
// }
|
||
});
|
||
});
|
||
|
||
// 监听中间正文滚动，更新左侧目录高亮
|
||
if (mainContent) {
|
||
mainContent.addEventListener('scroll', function() {
|
||
updateTocHighlight();
|
||
});
|
||
}
|
||
}
|
||
|
||
// 更新橘色进度指示器位置
|
||
function updateProgressIndicator(activeIndex) {
|
||
const tocList = document.getElementById('generated-toc');
|
||
if (!tocList) return;
|
||
|
||
const itemHeight = 44;
|
||
const translateY = activeIndex * itemHeight;
|
||
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.toc-list::after {
|
||
transform: translateY(${translateY}px);
|
||
}
|
||
`;
|
||
|
||
const oldStyle = document.getElementById('toc-progress-style');
|
||
if (oldStyle) oldStyle.remove();
|
||
|
||
style.id = 'toc-progress-style';
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
// 更新目录高亮
|
||
function updateTocHighlight() {
|
||
const courseStructure = document.querySelector('.course-structure');
|
||
if (!courseStructure || !courseStructure.classList.contains('cs-fixed')) {
|
||
return;
|
||
}
|
||
|
||
const mainContent = document.querySelector('.main-content');
|
||
const tocItems = document.querySelectorAll('.toc-item');
|
||
const sections = document.querySelectorAll('.article-content h2[id]');
|
||
|
||
let currentSectionIndex = 0;
|
||
sections.forEach((section, index) => {
|
||
const rect = section.getBoundingClientRect();
|
||
const mainRect = mainContent.getBoundingClientRect();
|
||
|
||
if (rect.top >= mainRect.top && rect.top <= mainRect.top + 200) {
|
||
currentSectionIndex = index;
|
||
}
|
||
});
|
||
|
||
tocItems.forEach((item, index) => {
|
||
if (index === currentSectionIndex) {
|
||
item.classList.add('active');
|
||
} else {
|
||
item.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
updateProgressIndicator(currentSectionIndex);
|
||
}
|
||
|
||
// Tab functionality
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
|
||
const lessonItems = document.querySelectorAll('.lesson-item');
|
||
lessonItems.forEach(lesson => {
|
||
lesson.addEventListener('click', function() {
|
||
lessonItems.forEach(l => l.classList.remove('active'));
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// generateWatermark();
|
||
|
||
|
||
// 检测是否为移动端
|
||
const isMobile = detectMobileAndDisableLock();
|
||
|
||
// 只在桌面端初始化固定工作台
|
||
// if (!isMobile) {
|
||
// initCourseStructureLock();
|
||
// }
|
||
|
||
// 监听窗口大小变化
|
||
// window.addEventListener('resize', function() {
|
||
// detectMobileAndDisableLock();
|
||
// });
|
||
|
||
// updateProgressIndicator(0);
|
||
});
|
||
|
||
// Course Structure 区域滚动锁定（仅桌面端）
|
||
let isLocked = false;
|
||
|
||
function initCourseStructureLock() {
|
||
const courseStructure = document.querySelector('.course-structure');
|
||
const mainContent = document.querySelector('.main-content');
|
||
const body = document.body;
|
||
let triggerPoint = 0;
|
||
|
||
function updateTriggerPoint() {
|
||
if (courseStructure) {
|
||
triggerPoint = courseStructure.offsetTop;
|
||
}
|
||
}
|
||
|
||
updateTriggerPoint();
|
||
|
||
window.addEventListener('scroll', function() {
|
||
// 只在桌面端执行锁定逻辑
|
||
if (window.innerWidth < 992) return;
|
||
|
||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
|
||
if (scrollTop >= triggerPoint && !isLocked) {
|
||
lockCourseStructure();
|
||
}
|
||
});
|
||
|
||
if (mainContent) {
|
||
mainContent.addEventListener('scroll', function() {
|
||
checkUnlock();
|
||
});
|
||
}
|
||
|
||
function lockCourseStructure() {
|
||
isLocked = true;
|
||
courseStructure.classList.add('cs-fixed');
|
||
body.style.overflow = 'hidden';
|
||
body.style.height = '100vh';
|
||
mainContent.scrollTop = 0;
|
||
}
|
||
|
||
function checkUnlock() {
|
||
if (!isLocked) return;
|
||
|
||
const scrollTop = mainContent.scrollTop;
|
||
const scrollHeight = mainContent.scrollHeight;
|
||
const clientHeight = mainContent.clientHeight;
|
||
|
||
if (scrollTop + clientHeight >= scrollHeight - 10) {
|
||
unlockCourseStructure();
|
||
}
|
||
}
|
||
|
||
window.unlockCourseStructure = function() {
|
||
isLocked = false;
|
||
courseStructure.classList.remove('cs-fixed');
|
||
body.style.overflow = '';
|
||
body.style.height = '';
|
||
};
|
||
}
|
||
|
||
// Element SDK Integration
|
||
async function onConfigChange(config) {
|
||
const heroTag = document.getElementById('heroTag');
|
||
const heroTitleLine1 = document.getElementById('heroTitleLine1');
|
||
const heroTitleLine2 = document.getElementById('heroTitleLine2');
|
||
const sectionSubtitle = document.getElementById('sectionSubtitle');
|
||
|
||
if (heroTag) heroTag.textContent = config.hero_tag || defaultConfigContent.hero_tag;
|
||
if (heroTitleLine1) heroTitleLine1.textContent = config.hero_title_line1 || defaultConfigContent.hero_title_line1;
|
||
if (heroTitleLine2) heroTitleLine2.textContent = config.hero_title_line2 || defaultConfigContent.hero_title_line2;
|
||
if (sectionSubtitle) sectionSubtitle.textContent = config.section_subtitle || defaultConfigContent.section_subtitle;
|
||
|
||
const primaryColor = config.primary_color || defaultConfigContent.primary_color;
|
||
document.documentElement.style.setProperty('--primary-orange', primaryColor);
|
||
|
||
const fontFamily = config.font_family || defaultConfigContent.font_family;
|
||
document.body.style.fontFamily = `${fontFamily}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif`;
|
||
}
|
||
|
||
function mapToCapabilities(config) {
|
||
return {
|
||
recolorables: [
|
||
{
|
||
get: () => config.primary_color || defaultConfigContent.primary_color,
|
||
set: (value) => {
|
||
config.primary_color = value;
|
||
window.elementSdk.setConfig({ primary_color: value });
|
||
}
|
||
}
|
||
],
|
||
borderables: [],
|
||
fontEditable: {
|
||
get: () => config.font_family || defaultConfigContent.font_family,
|
||
set: (value) => {
|
||
config.font_family = value;
|
||
window.elementSdk.setConfig({ font_family: value });
|
||
}
|
||
},
|
||
fontSizeable: undefined
|
||
};
|
||
}
|
||
|
||
function mapToEditPanelValues(config) {
|
||
return new Map([
|
||
['hero_tag', config.hero_tag || defaultConfigContent.hero_tag],
|
||
['hero_title_line1', config.hero_title_line1 || defaultConfigContent.hero_title_line1],
|
||
['hero_title_line2', config.hero_title_line2 || defaultConfigContent.hero_title_line2],
|
||
['section_subtitle', config.section_subtitle || defaultConfigContent.section_subtitle]
|
||
]);
|
||
}
|
||
|
||
if (window.elementSdk) {
|
||
window.elementSdk.init({
|
||
defaultConfigContent,
|
||
onConfigChange,
|
||
mapToCapabilities,
|
||
mapToEditPanelValues
|
||
});
|
||
}
|
||
</script>
|
||
</html>
|