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>
This commit is contained in:
@@ -0,0 +1,798 @@
|
||||
<!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 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">
|
||||
|
||||
<div id="nav-container"></div>
|
||||
|
||||
|
||||
<main class="main" id="academy-main">
|
||||
<!-- banner start -->
|
||||
<div class="academy-block-1">
|
||||
<section id="acadey-section-1" class="funded-trading-hero spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" >
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 fade-in">
|
||||
<!-- Icons -->
|
||||
<h1 class="hero-title fade-in">
|
||||
<span class="line1 fade-in">Learn. Trade. </span>
|
||||
<span class="line2 fade-in"><span class="text-primary-orange">Get</span> <img src="../assets/images/backgrounds/icon/academy-icon-1.png" class="heading-icon floating-img"> <span class="text-primary-orange">Funded.</span> </span>
|
||||
</h1>
|
||||
<div class="banner-contain d-flex align-items-center justify-content-center flex-wrap mt-6">
|
||||
|
||||
<div class="text-center mx-4 fade-in">
|
||||
<div class="mb-3">
|
||||
<div class="banner-desc fade-in">
|
||||
Get the most out of your <span class="text-primary-orange">learning</span> with hands-on assessments and real-time progress tracking,
|
||||
so you can watch yourself grow into a confident, funded, and <span class="text-primary-orange">profitable trader</span>.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="hero-buttons center-buttons fade-in">
|
||||
<a href="#" class="btn btn-start-challenge fade-in">Start Learning</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- subtle grid overlay -->
|
||||
<div class="bg-grid" aria-hidden="true"></div>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="section hero">
|
||||
<div class="container container-narrow">
|
||||
<!-- Video preview: lazy-loaded thumbnail (YouTube) -->
|
||||
<div class="video-card fade-in" id="videoPreview" data-video-id="dQw4w9WgXcQ">
|
||||
<img class="lazy-img" data-src="../assets/images/backgrounds/academy/img-1.png" alt="AIFO preview thumbnail">
|
||||
<div class="video-play" id="playBtn" aria-label="Play video"><i class="pay-btn"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section bg_all_grid" id="academy-section-1">
|
||||
<div class="container container-narrow">
|
||||
<div class="row align-items-start">
|
||||
<div class="col-lg-5 fade-in" id="whyLeft">
|
||||
<h1 class="heading h1 fade-in">Why <span class="text-orange">AIFO</span></h1>
|
||||
<h1 class="heading h1 fade-in">Academy? </h1>
|
||||
<p class="small-muted fade-in">Simple-to-follow <span class="text-orange">trading guides</span> to support your trading knowledge and help you elevate your skills to successful trades.</p>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<!-- <div class="row"> -->
|
||||
<div class="row text-center card-style-2">
|
||||
<div class="col-md-6 fade-in">
|
||||
<div class="card h-100 custom-rounded">
|
||||
<div class="mb-3 ustify-content-center align-items-center"><i class="icon-box w-4"></i></div>
|
||||
<h5 class="fade-in">Tailored Curriculum</h5>
|
||||
<p class="fade-in">Learn at your own pace with courses designed for every stage of your trading journey, from beginner to advanced, so you can progress with confidence. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 fade-in">
|
||||
<div class="card h-100 custom-rounded">
|
||||
<div class="mb-3"><i class="icon-box w-5"></i></div>
|
||||
<h5 class="fade-in">Mindset & Psychology</h5>
|
||||
<p class="fade-in">Build resilience and focus alongside your technical skills, with expert guidance to help you remain calm during turbulent markets..</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 fade-in">
|
||||
<div class="card h-100 custom-rounded">
|
||||
<div class="mb-3"><i class="icon-box w-7"></i></div>
|
||||
<h5 class="fade-in">Community Support</h5>
|
||||
<p class="fade-in">Get inspired by live sessions, shared success stories, and conversations with fellow traders who are on the same journey..</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 fade-in">
|
||||
<div class="card h-100 custom-rounded">
|
||||
<div class="mb-3"><i class="icon-box w-8"></i></div>
|
||||
<h5 class="fade-in">Practice-Based Learning</h5>
|
||||
<p class="fade-in">Turn knowledge into action through quizzes, hands-on exercises, and realistic trading simulations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GROWTH STORIES -->
|
||||
<section class="section" id="stories">
|
||||
<div class="container container-narrow fade-in" id="storiesBlock">
|
||||
<h1 class="heading h1 fade-in"> <span class="text-orange">Growth</span> Stories</h1>
|
||||
<div class="growth-carousel mt-3">
|
||||
<div class="d-flex align-items-center justify-content-between mb-7">
|
||||
<p class="small-muted fade-in">See how members are building confidence, sharpening skills, and reaching <span class="text-orange">new milestones</span> with AIFO. </p>
|
||||
<div class="growth-controls" style="display:none;">
|
||||
<button class="btn growthPrev" id="growthPrev"></button>
|
||||
<button class="btn growthNext" id="growthNext"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel 1 -->
|
||||
<div class="carousel-wrapper" style="display:none;">
|
||||
|
||||
<div class="gradient-left"></div>
|
||||
<div class="gradient-right"></div>
|
||||
|
||||
<div class="carousel-container-1">
|
||||
<div class="carousel-track">
|
||||
<!-- Page 1 -->
|
||||
<div class="carousel-item">
|
||||
<img class="left-img" src="../assets/images/backgrounds/academy/academy_imge_1.png" alt="">
|
||||
<div class="content">
|
||||
<h2>Tim (USA)</h2>
|
||||
<p class="fade-in">“ I've been trading for years, and this is by far the best experience I've had with a prop firm.” .</p>
|
||||
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
||||
<a href="#" class="btn btn-default btn-watch d-flex align-items-center"><span class="icon iconfont icon-play-1"></span> Watch On YouTube</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page 2 -->
|
||||
<div class="carousel-item">
|
||||
<img class="left-img" src="../assets/images/backgrounds/academy/academy_imge_1.png" alt="">
|
||||
<div class="content">
|
||||
<h2>Tim (USA)</h2>
|
||||
<p class="fade-in">“ I've been trading for years, and this is by far the best experience I've had with a prop firm.” .</p>
|
||||
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
||||
<a href="#" class="btn btn-start-challenge btn-watch d-flex align-items-center"><span class="icon iconfont icon-play-1"></span> Watch On YouTube</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page 3 -->
|
||||
<div class="carousel-item">
|
||||
<img class="left-img" src="../assets/images/backgrounds/academy/academy_imge_1.png" alt="">
|
||||
<div class="content">
|
||||
<h2>Tim (USA)</h2>
|
||||
<p class="fade-in">“ I've been trading for years, and this is by far the best experience I've had with a prop firm.” .</p>
|
||||
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
||||
<a href="#" class="btn btn-start-challenge btn-watch"><span class="icon iconfont icon-play-1"></span> Watch On YouTube</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dots"></div>
|
||||
|
||||
</div>
|
||||
<style>
|
||||
@media (max-width: 768px) {
|
||||
.aifo-trader{
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="container fade-in aifo-trader" >
|
||||
<img src="../assets/images/demo/aifo_academy.PNG" alt="" class="fade-in" style="width:100%;">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- source-section -->
|
||||
<section class="source-section slice slice-lg" id="source">
|
||||
<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>
|
||||
<div class="fluid-paragraph text-center mt-4 fade-in">
|
||||
<p class="small-muted fade-in">
|
||||
Every successful trader begins with <span class="text-orange">a clear path</span>. Our thoughtfully designed course takes you from your very first steps to <span class="text-orange">funded success</span>, helping you grow with focus, purpose, and confidence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="main-wrapper d-flex justify-content-center">
|
||||
<div class="content-container">
|
||||
<!-- Tab Navigation -->
|
||||
|
||||
<!-- MAIN FLEX CONTAINER -->
|
||||
<div class="container-flex d-flex">
|
||||
|
||||
<!-- LEFT PROGRESS PANEL -->
|
||||
<div class="progress-panel mb-hidden">
|
||||
<div class="pp-item">
|
||||
<h5 class="fade-in">Part 1: Basics</h5>
|
||||
<div class="progress fade-in"><div class="progress-bar" style="width:90%"></div></div>
|
||||
<span class="fade-in">90%</span>
|
||||
</div>
|
||||
|
||||
<div class="pp-item">
|
||||
<h5 class="fade-in">Part 2: Trading Analysis</h5>
|
||||
<div class="progress fade-in"><div class="progress-bar" style="width:100%"></div></div>
|
||||
<span class="fade-in">100%</span>
|
||||
</div>
|
||||
|
||||
<div class="pp-item">
|
||||
<h5 class="fade-in">Part 3: Advanced</h5>
|
||||
<div class="progress fade-in"><div class="progress-bar" style="width:0%"></div></div>
|
||||
<span class="fade-in">0%</span>
|
||||
</div>
|
||||
|
||||
<div class="pp-item">
|
||||
<h5 class="fade-in">Part 4: Evaluation Process</h5>
|
||||
<div class="progress fade-in"><div class="progress-bar" style="width:0%"></div></div>
|
||||
<span class="fade-in">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CONTENT -->
|
||||
<div>
|
||||
|
||||
<!-- Filters -->
|
||||
<!-- <div class="d-flex mb-4">
|
||||
<select class="form-control mr-3 custom-select-style flex-grow-1" name="academy-catory-1">
|
||||
<option>The Basics of Trading</option>
|
||||
<option>Chart Analysis and Trading Strategies</option>
|
||||
<option>Risk Management and Capital Management</option>
|
||||
</select>
|
||||
|
||||
<select class="form-control custom-select-style flex-grow-1" name="academy-catory-2">
|
||||
<option>Forex (10)</option>
|
||||
<option>Stocks (4)</option>
|
||||
<option>Crypto (3)</option>
|
||||
</select>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.fake-select-wrapper {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fake-select {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.native-select {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fake-select-trigger {
|
||||
height: 44px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
background: #0c0c0c;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fake-select-trigger .icon {
|
||||
font-size: 14px;
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
.fake-select.open .icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.fake-options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
position: absolute;
|
||||
top: calc(100% + 2px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #0E0E0E;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.fake-options li {
|
||||
padding: 5px 14px;
|
||||
cursor: pointer;
|
||||
color: var(--aifo-white);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fake-options li:hover {
|
||||
background: #F9A215;
|
||||
color: var(--aifo-white);
|
||||
}
|
||||
|
||||
.fake-select.open .fake-options {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* .fake-select-trigger,
|
||||
.fake-options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.native-select {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="d-flex mb-4 gap-3">
|
||||
|
||||
<div class="fake-select-wrapper">
|
||||
|
||||
<!-- Select 1 -->
|
||||
<div class="fake-select">
|
||||
<select class="native-select">
|
||||
<option>The Basics of Trading</option>
|
||||
<option>Chart Analysis and Trading Strategies</option>
|
||||
<option>Risk Management and Capital Management</option>
|
||||
</select>
|
||||
|
||||
<div class="fake-select-trigger">
|
||||
<span class="value">The Basics of Trading</span>
|
||||
<span class="icon iconfont icon-a-arrow-down"></span>
|
||||
</div>
|
||||
|
||||
<ul class="fake-options">
|
||||
<li>The Basics of Trading</li>
|
||||
<li>Chart Analysis and Trading Strategies</li>
|
||||
<li>Risk Management and Capital Management</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Select 2 -->
|
||||
<div class="fake-select">
|
||||
<select class="native-select">
|
||||
<option>Forex (10)</option>
|
||||
<option>Stocks (4)</option>
|
||||
<option>Crypto (3)</option>
|
||||
</select>
|
||||
|
||||
<div class="fake-select-trigger">
|
||||
<span class="value">Forex (10)</span>
|
||||
<span class="icon iconfont icon-a-arrow-down"></span>
|
||||
</div>
|
||||
|
||||
<ul class="fake-options">
|
||||
<li>Forex (10)</li>
|
||||
<li>Stocks (4)</li>
|
||||
<li>Crypto (3)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- VIDEO GRID -->
|
||||
<div class="video-area">
|
||||
<div class="video-grid">
|
||||
|
||||
<!-- 10 VIDEO CARDS -->
|
||||
<div class="video-card">
|
||||
<div class="thumb">
|
||||
<img src="../assets/images/backgrounds/img_v3_02tm_6b269f64-0316-4955-8937-03d3a08466hu.png" alt="">
|
||||
<div class="video-play" id="playBtn" aria-label="Play video">
|
||||
<i class="pay-btn"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vc-body">
|
||||
<span class="vc-index">01. <button class="vc-index-btn">Forex</button></span>
|
||||
<h4 class="vc-title">Intro to Forex Markets Intro to Forex MarketsIntro to Forex MarketsIntro to Forex Markets</h4>
|
||||
<button class="btn btn-lesson mt-3">Check Lesson</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-card">
|
||||
<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 class="vc-body">
|
||||
<span class="vc-index">02.</span>
|
||||
<h4 class="vc-title">What is Forex and how</h4>
|
||||
<button class="btn btn-lesson mt-3">Check Lesson</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-card">
|
||||
<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 class="vc-body">
|
||||
<span class="vc-index">01. <button class="vc-index-btn">Forex</button></span>
|
||||
<h4 class="vc-title">Intro to Forex Markets Intro to Forex MarketsIntro to Forex MarketsIntro to Forex Markets</h4>
|
||||
<button class="btn btn-lesson mt-3">Check Lesson</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-card">
|
||||
<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 class="vc-body">
|
||||
<span class="vc-index">02.</span>
|
||||
<h4 class="vc-title">What is Forex and how</h4>
|
||||
<button class="btn btn-lesson mt-3">Check Lesson</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-card">
|
||||
<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 class="vc-body">
|
||||
<span class="vc-index">01. <button class="vc-index-btn">Forex</button></span>
|
||||
<h4 class="vc-title">Intro to Forex Markets Intro to Forex MarketsIntro to Forex MarketsIntro to Forex Markets</h4>
|
||||
<button class="btn btn-lesson mt-3">Check Lesson</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-card">
|
||||
<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 class="vc-body">
|
||||
<span class="vc-index">02.</span>
|
||||
<h4 class="vc-title">What is Forex and how</h4>
|
||||
<button class="btn btn-lesson mt-3">Check Lesson</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
document.querySelectorAll('.fake-select').forEach(select => {
|
||||
|
||||
const trigger = select.querySelector('.fake-select-trigger');
|
||||
const valueEl = select.querySelector('.value');
|
||||
const nativeSelect = select.querySelector('.native-select');
|
||||
const options = select.querySelectorAll('.fake-options li');
|
||||
|
||||
trigger.addEventListener('click', () => {
|
||||
// if (window.innerWidth <= 768) return;
|
||||
select.classList.toggle('open');
|
||||
});
|
||||
|
||||
options.forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
valueEl.textContent = option.textContent;
|
||||
nativeSelect.value = option.textContent;
|
||||
select.classList.remove('open');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
if (!select.contains(e.target)) {
|
||||
select.classList.remove('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<section class="slice" 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="small-muted fade-in">
|
||||
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>
|
||||
|
||||
<!-- spacing -->
|
||||
<div style="height:80px"></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>
|
||||
/* =========================
|
||||
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 fade-in">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);
|
||||
|
||||
|
||||
|
||||
(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>
|
||||
|
||||
|
||||
/* ===========================================================
|
||||
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
|
||||
=========================================================== */
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
|
||||
const carousel = new Carousel({
|
||||
container: ".carousel-container-1",
|
||||
prev: "growthPrev",
|
||||
next: "growthNext",
|
||||
dots: ".dots"
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
carousel.goTo(1);
|
||||
}, 50);
|
||||
|
||||
|
||||
|
||||
setupFadeInObserver(".carousel-item");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user