steven/aifo-portal-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: AIFO official portal web.

Browse Source 
Add static site, shared layout, and Node dev server with standard .gitignore.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Steven.yang
2026-06-30 15:29:50 +08:00
commit 4d30803b60
1154 changed files with 184340 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/academy_1.html
+591
View File
@@ -0,0 +1,591 @@
<!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>Academy_1 Page</title>
<!-- Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet"> -->
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
<link href="../assets/css/style.css" rel="stylesheet">
<!-- Theme CSS -->
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
<!-- Demo CSS - No need to use these in your project -->
<!-- <link type="text/css" href="../assets/css/demo.css" rel="stylesheet"> -->
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
<link type="text/css" href="../assets/css/academy.css" rel="stylesheet">
</head>
<body class="aifo-bg-primary">
<!-- Top code bar -->
<!-- <div class="top-code-bar bg-primary">
<div class="container d-flex align-items-center justify-content-center h-100">
<span class="top-code-label">35% OFF + 350% REFUND Limited Time</span>
<button type="button" class="btn btn-sm top-code-btn" data-code="AIFO2025">CODE:AIFO</button>
</div>
</div> -->
<div id="nav-container"></div>
<main class="main" id="academy-sub">
<!-- banner start -->
<div class="academy-block-1" id="academy-1">
<section id="acadey-section-1" class="funded-trading-hero spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" >
<div class="container">
<div class="row align-items-center ">
<div class="col-md-5 mb-4 academy-title-1">
<a class="btn btn-page-tab section-title">02</a>
<h1><span class="text-orange">Supply & Demand</span> <br> Trading</h1>
</div>
<div class="header_img_block col-md-7 academy-title-1">
<div class="thumb">
<img src="../assets/images/backgrounds/academy/img-1.png" alt="">
<div class="video-play" id="playBtn" aria-label="Play video">
<i class="pay-btn"></i>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- subtle grid overlay -->
<div class="bg-grid" aria-hidden="true"></div>
<!-- article detail section -->
<section class="slice slice-lg article-detail-section">
<div class="container">
<div class="mb-md text-center fade-in">
<h1 class="heading h1 fade-in">Course <span class="text-orange">Structure</span></h1>
<p class="lead lh-180 mt-4 fade-in">
Every successful trader begins with <span class="text-orange">a clear path</span>.
Our course guides you toward <span class="text-orange">funded success</span>.
</p>
</div>
<div class="main-wrapper">
<div class="toc-desktop">
<div class="toc-wraper">
<h4>Table of Contents</h4>
<ul id="generated-toc"></ul>
</div>
</div>
<div class="content-wrapper">
<div class="breadcrumb-box">
<ol class="breadcrumb custom-breadcrumb">
<li class="breadcrumb-item"><a href="#">Course Structure</a></li>
<li class="breadcrumb-item"><a href="#">Forex</a></li>
<li class="breadcrumb-item active">02</li>
</ol>
</div>
<div class="toc-mobile-toggle">☰ Table of Contents</div>
<div class="toc-mobile">
<ul id="generated-toc-mobile"></ul>
</div>
<div class="content-container">
<div class="article_content" id="article_content">
<h1> h1 Supply and Demand Zones Explained</h1>
<h2> h2 Supply and Demand Zones Explained</h2>
<h3> h3 Supply and Demand Zones Explained</h3>
<h4> h4 Supply and Demand Zones Explained</h4>
<h5> h5 Supply and Demand Zones Explained</h5>
<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>
<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 1</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>Supply and Demand 3</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="">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Great Job Section -->
<section class="greate-job-section">
<div class="container">
<div class="support-card">
<div class="support-content">
<div class="support-text">
<h2 class="support-title">Great Job! </h2>
<p class="support-subtitle">
Congratulations on <span class="text-orange">completing this lesson </span> — that’s another step toward becoming a successful trader.
</p>
<p class="support-subtitle">
Ready to keep the momentum going? Dive into the next lesson and keep building your skills.
</p>
<div class="support-buttons">
<button class="support-btn btn-default support-btn-primary" id="chatBtn">
<span id="chatBtnText">Take The Exam Now</span> </button>
<a href="#" class="support-btn support-btn-secondary" id="emailBtn">
<span id="emailBtnText">Previous Lesson</span>
<span class="icon iconfont icon-arrow"></span>
</a>
</div>
</div>
<div class="support-visual">
<div class="support-glow">
<div class="support-icon">
<img src="../assets/images/backgrounds/greate-job-icon.webp" alt="Funded Trading" class="fade-in">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="slice slice-lg" data-delimiter="1">
<div class="container">
<div class="mb-md text-center fade-in">
<h1 class="heading h1 fade-in">Ready to Begin?</h1>
<div class="fluid-paragraph text-center mt-4 fade-in">
<p class="lead lh-180">
Have you completed all the lessons and mindset training? If you're ready, join over<span class="text-orange">50,000</span> traders and take the free challenge today.
</p>
</div>
</div>
<div class="row text-center d-flex align-items-center justify-content-center">
<div class="mt-3"><a class="btn btn-default" href="#courses">Start Challenge</a></div>
</div>
</div>
</section>
<!-- Video Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content" style="background:transparent;border:none;">
<div class="modal-body p-0">
<div id="videoContainer" style="position:relative;padding-top:56.25%;"></div>
</div>
</div>
</div>
</div>
<section id="section-10" class="slice slice-lg d-flex align-items-center">
<div class="bg-orange-light"></div>
<div class="container">
<div class="mb-md text-center fade-in show">
<h1 class="heading h1">Join <img src="../assets/images/backgrounds/Frame 1000008381.png" alt="Funded Trading" class="tx-img floating-img"></h1>
<h1 class="heading h1"> <img src="../assets/images/backgrounds/Frame 1000008386.png" alt="Funded Trading" class="zfj-img floating-img"><span class="text-orange">Our Community</span></h1>
<div class="fluid-paragraph text-center mt-4">
<p class="lead lh-180">
Join a <span class="text-orange">supportive network</span> of traders where you can <br>share insights,
learn together, and celebrate <br>every step of your journey.
</p>
</div>
</div>
<div class="row justify-content-center ">
<div class="col-auto">
<div class="hero-buttons d-flex flex-wrap justify-content-center fade-in show">
<a href="#" class="btn btn-start-challenge align-items-center justify-content-center"><img src="../assets/images/backgrounds/btn-icon-1.png" alt="Funded Trading"> Join Discord</a>
<a href="#" class="btn btn-free-trial">
<span class="btn-join-telegram-icon"></span>
<!--<img src="../assets/images/backgrounds/btn-icon-2.png" alt="Funded Trading" class="floating-img"> -->
Join Telegram
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<div id="footer-container"></div>
<!-- Core -->
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
<script src="../assets/vendor/popper/popper.min.js"></script>
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
<!-- FontAwesome 5 -->
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
<!-- Page plugins -->
<script src="../assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="../assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="../assets/vendor/input-mask/input-mask.min.js"></script>
<script src="../assets/vendor/nouislider/js/nouislider.min.js"></script>
<script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
<!-- Theme JS -->
<script src="../assets/js/theme.js"></script>
<!-- Top code bar behavior -->
<script src="/js/layout.js"></script>
</body>
<script>
/* =========================
Intersection fade-in (pixel-precise)
and lazy loaders for floor loading
========================= */
(function($){
const io = new IntersectionObserver((entries, obs) => {
entries.forEach(e=>{
if(e.isIntersecting){
$(e.target).addClass('show');
obs.unobserve(e.target);
}
});
},{threshold:0.12});
$(function(){
$('.fade-in').each(function(){ io.observe(this); });
});
})(jQuery);
/* =========================
Lazy images and floor-load logic
========================= */
(function($){
const loaderIO = new IntersectionObserver((entries, obs) => {
entries.forEach(ent=>{
if(ent.isIntersecting){
const $el = $(ent.target);
// lazy images
if($el.hasClass('lazy-img')){
const src = $el.data('src');
if(src) $el.attr('src', src).removeAttr('data-src').removeClass('lazy-img');
obs.unobserve(ent.target);
}
// load growth stories and courses when their blocks appear
if($el.is('#storiesBlock')){ loadGrowth(); obs.unobserve(ent.target); }
if($el.is('#coursesBlock')){ loadCourses(); obs.unobserve(ent.target); }
}
});
},{root:null, threshold:0.15});
$(function(){
$('.lazy-img, #storiesBlock, #coursesBlock').each(function(){ loaderIO.observe(this); });
});
/* ========== Growth Stories ========== */
let growthLoaded=false;
function loadGrowth(){
if(growthLoaded) return;
growthLoaded = true;
// const stories = [
// {name:'Tim (USA)', text:"I've been trading for years and this is the best experience I've had.", img:'https://picsum.photos/id/1005/720/420'},
// {name:'Anna (FR)', text:'The curriculum is clear and practical — I improved fast.', img:'https://picsum.photos/id/1011/720/420'},
// {name:'Liu (CN)', text:'Hands-on tasks helped me build confidence.', img:'https://picsum.photos/id/1027/720/420'},
// {name:'Carlos (BR)', text:'Great community and feedback loops.', img:'https://picsum.photos/id/1025/720/420'}
// ];
// const $track = $('#growthTrack').empty();
// stories.forEach((s,i)=>{
// const $card = $(`
// <div class="growth-card" data-i="${i}">
// <img loading="lazy" src="${s.img}" alt="${s.name}">
// <strong style="display:block;margin-bottom:0.5rem">${s.name}</strong>
// <p style="font-size:0.875rem;color:rgba(255,255,255,0.9)">${s.text}</p>
// </div>
// `);
// $track.append($card);
// });
// dots
// const $dots = $('#growthDots').empty();
// stories.forEach((_,i)=> $dots.append(`<button class="btn btn-sm" data-i="${i}" style="margin:6px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff">${i+1}</button>`));
// initGrowthCarousel();
}
/* ========== Courses ========== */
let coursesLoaded=false;
function loadCourses(){
if(coursesLoaded) return;
coursesLoaded=true;
const courses = [
{title:'Basics', thumb:'https://picsum.photos/id/1018/640/360', lessons:12},
{title:'Forex 101', thumb:'https://picsum.photos/id/1016/640/360', lessons:8},
{title:'Risk Management', thumb:'https://picsum.photos/id/1019/640/360', lessons:6},
{title:'Advanced Tactics', thumb:'https://picsum.photos/id/1022/640/360', lessons:10},
{title:'Live Sessions', thumb:'https://picsum.photos/id/1021/640/360', lessons:5},
{title:'Performance Review', thumb:'https://picsum.photos/id/1032/640/360', lessons:7}
];
const $grid = $('#courseGrid').empty();
courses.forEach(c=>{
const $card = $(`
<div class="course-card">
<img class="course-thumb" loading="lazy" src="${c.thumb}" alt="${c.title}">
<h5 style="margin-top:0.5rem">${c.title}</h5>
<p class="small-muted">Lessons: ${c.lessons}</p>
<div style="margin-top:0.75rem"><a class="btn btn-outline-light btn-sm" href="#">View</a></div>
</div>
`);
$grid.append($card);
});
}
window.loadGrowth = loadGrowth;
window.loadCourses = loadCourses;
})(jQuery);
/* =========================
Video modal play: inject iframe
========================= */
(function($){
$('#playBtn').on('click', function(){
const vid = $('#videoPreview').data('video-id');
//const src = `https://www.youtube.com/embed/${vid}?autoplay=1&rel=0`;
const src = `http://192.168.1.175/Lark20251101-104552.mp4`;
$('#videoContainer').html(`<iframe src="${src}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%"></iframe>`);
$('#videoModal').modal('show');
});
$('#videoModal').on('hidden.bs.modal', function(){ $('#videoContainer').empty(); });
// fallback: ensure lazy imgs loaded if they still have data-src
$(function(){
$('.lazy-img').each(function(){
const $i = $(this);
if($i.attr('data-src')) $i.attr('src',$i.attr('data-src')).removeAttr('data-src');
});
});
})(jQuery);
/* =========================
initial reveal sequencing
========================= */
$(function(){
setTimeout(()=> $('#heroBlock').addClass('show'), 160);
setTimeout(()=> $('#videoPreview').addClass('show'), 420);
});
/* =========================
Smooth anchor scroll (if needed)
========================= */
// $(document).on('click','a[href^="#"]', function(e){
// const target = $($(this).attr('href'));
// if(target.length){ e.preventDefault(); $('html,body').animate({scrollTop: target.offset().top - 24}, 600); }
// });
</script>
<script>
/* ===========================================================
Reusable Carousel Class
=========================================================== */
class Carousel {
constructor(opts) {
this.container = document.querySelector(opts.container);
this.track = this.container.querySelector(".carousel-track");
this.items = [...this.track.children];
this.prevBtn = document.getElementById(opts.prev);
this.nextBtn = document.getElementById(opts.next);
this.dotsContainer = document.querySelector(opts.dots);
this.index = 0;
this.pageWidth = this.items[0].offsetWidth + 40; // including margin
this.setupDots();
this.update();
this.bindEvents();
}
setupDots() {
this.dotsContainer.innerHTML = "";
this.items.forEach((_, i) => {
const dot = document.createElement("div");
dot.className = "dot";
dot.addEventListener("click", () => this.goTo(i));
this.dotsContainer.appendChild(dot);
});
}
bindEvents() {
this.prevBtn.addEventListener("click", () => this.prev());
this.nextBtn.addEventListener("click", () => this.next());
window.addEventListener("resize", () => {
this.pageWidth = this.items[0].offsetWidth + 40;
this.update();
});
}
prev() {
this.index = Math.max(0, this.index - 1);
this.update();
}
next() {
this.index = Math.min(this.items.length - 1, this.index + 1);
this.update();
}
goTo(i) {
this.index = i;
this.update();
}
update() {
const centerOffset = (window.innerWidth / 2) - (this.pageWidth / 2);
let x = this.index * this.pageWidth * -1 + centerOffset;
if (this.index === 0) x = 0;
if (this.index === this.items.length - 1) {
x = (this.items.length - 1) * this.pageWidth * -1 + (window.innerWidth - this.pageWidth);
}
this.track.style.transform = `translateX(${x}px)`;
[...this.dotsContainer.children].forEach((dot, i) => {
dot.classList.toggle("active", i === this.index);
});
}
}
/* ===========================================================
Fade-in Observer (one-time trigger)
=========================================================== */
function setupFadeInObserver(selector = ".carousel-item") {
const items = document.querySelectorAll(selector);
const observer = new IntersectionObserver(
(entries, obs) => {
entries.forEach(entry => {
// if (entry.isIntersecting) {
entry.target.classList.add("fade-in");
entry.target.classList.add("show");
obs.unobserve(entry.target);
// }
});
},
{
root: document.querySelector(".carousel-container-1"),
threshold: 0.5
}
);
items.forEach(item => observer.observe(item));
}
/* ===========================================================
Initialization
=========================================================== */
</script>
<script>
$(function () {
const tocDesktop = $("#generated-toc");
const tocMobile = $("#generated-toc-mobile");
const articleBox = $(".article_content"); // scrollable content area
/* ===========================
Auto-generate table of contents
============================ */
$(".content-container h1, .content-container h2").each(function () {
const tag = $(this).prop("tagName").toLowerCase();
const text = $(this).text();
const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
$(this).attr("id", id);
const item = `
<li>
<a href="#${id}" class="toc-link" style="margin-left:${tag === 'h2' ? '15px' : '0'}">${text}</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);
});
});
</script>
</html>