Files
aifo-portal-web/pages/faq_subpage_blank.html
steven 4d30803b60 Initial commit: AIFO official portal web.
Add static site, shared layout, and Node dev server with standard .gitignore.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-30 15:29:50 +08:00

469 lines
29 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 blank</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">
</head>
<body class="aifo-bg-primary">
<div id="nav-container"></div>
<main class="main blank_page_theme" 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">
<div class="container">
<div class="row align-items-start d-flex justify-content-between">
<!-- left menu -->
<aside class="col-lg-3 col-md-4">
<div class="menu-card">
<ul class="menu-list" id="generated-toc">
<!-- h title content -->
</ul>
</div>
</aside><!-- right sild article content -->
<section class="col-lg-9 col-md-8">
<article class="article-content">
<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>
</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">&lt;</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">&gt;</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>
<svg viewbox="0 0 12 12"><path d="M2 3l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-90 6 6)" />
</svg></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>
$(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
});
</script>
<script>
$(function () {
const tocDesktop = $("#generated-toc");
// const tocMobile = $("#generated-toc-mobile");
const articleBox = $(".article_content");
/* ===========================
Auto-generate table of contents
============================ */
$(".article_content 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", 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").click(function () {
$(".toc-mobile").slideToggle(180);
});
$('.menu-item').on('click', function() {
$('.menu-item').removeClass('active');
$(this).addClass('active');
});
});
</script>
</html>