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,140 @@
|
||||
<!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>404 Page</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" id="page_404">
|
||||
<!-- 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">404</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">
|
||||
Looks like this page didn't pass the challenge.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="hero-buttons center-buttons fade-in">
|
||||
<a href="#" class="btn btn-start-challenge fade-in">Return Home</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Search Section -->
|
||||
<section class="search-section">
|
||||
|
||||
<div class="search-wrapper">
|
||||
<form id="searchForm">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-12 mb-3 mb-md-0 search-contain">
|
||||
<div class="search-input-group">
|
||||
<svg class="svg-inline--fa fa-search fa-w-16 search-icon" style="opacity:0;"
|
||||
onload="this.style.opacity='1'" aria-hidden="true" data-prefix="fas" data-icon="search" role="img"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
|
||||
<path fill="currentColor"
|
||||
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">
|
||||
</path>
|
||||
</svg>
|
||||
<!-- <i class="fas fa-search search-icon"></i> -->
|
||||
<input type="text" class="search-input" id="searchInput" placeholder="Search for articles..."
|
||||
aria-label="Search">
|
||||
</div>
|
||||
<div class="search-btn">
|
||||
<button type="submit" class="btn btn-default btn-search" id="searchButton">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="search-scope"><span class="search-scope-label">Search in:</span>
|
||||
<div class="filter-bar d-flex align-items-center">
|
||||
<div class="custom-control custom-checkbox mr-4">
|
||||
<input type="checkbox" class="custom-control-input" id="allContent">
|
||||
<label class="custom-control-label" for="allContent">
|
||||
<span class="svg-check">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="5 13 10 18 19 7" />
|
||||
</svg>
|
||||
</span>
|
||||
All Site Content
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="faqOnly" checked>
|
||||
<label class="custom-control-label" for="faqOnly">
|
||||
<span class="svg-check">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="5 13 10 18 19 7" />
|
||||
</svg>
|
||||
</span>
|
||||
FAQ Only
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,419 @@
|
||||
<!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>about us Page</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" id="about_us">
|
||||
<!-- banner start -->
|
||||
<div class="academy-block-1">
|
||||
<div class="container">
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<h1 class="hero-title" id="hero-title">Meet The<span class="text-orange">AIFO Team</span></h1>
|
||||
<div class="hero-image-container">
|
||||
|
||||
<img src="../assets/images/demo/about_us.png" class="">
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- Empowering Section -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empowering Section -->
|
||||
|
||||
<section class="empowering-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title" id="empowering-title">Empowering Your<br>
|
||||
<span class="text-orange">Trading Journey</span>
|
||||
</h2>
|
||||
<p class="section-subtitle" id="empowering-subtitle">With Expertise And Innovation</p>
|
||||
<p class="section-description" id="empowering-description">Here at AIFO, our team consists of experienced
|
||||
traders and financial professionals who truly understand the markets. We're committed to supporting your
|
||||
growth with clear rules, practical tools, and quality educational resources. Our goal is simple: to help you
|
||||
become a more confident and consistent trader.</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<div class="info-card">
|
||||
<div class="info-card-icon">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/icon-em-1.svg"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="info-card-title" id="mission-title">Our <span class="text-orange">Mission</span></h3>
|
||||
<p class="info-card-text" id="mission-text">
|
||||
At our core, we are dedicated to empowering traders with transparent funding opportunities, intuitive
|
||||
tools, and continuous learning support. We strive to make professional trading accessible to all by
|
||||
removing traditional barriers and nurturing a community built on trust, growth, and shared success.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="info-card">
|
||||
<div class="info-card-icon">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/icon-em-2.svg"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="info-card-title" id="vision-title">Our <span class="text-orange">Vision</span></h3>
|
||||
<p class="info-card-text" id="vision-text">
|
||||
We envision a future where every trader, regardless of background or experience, can achieve financial
|
||||
independence and trading mastery. Through innovation, education, and unwavering support, we aim to
|
||||
become the most trusted and trader-centric platform in the industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section class="team-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">
|
||||
Meet The <span class="text-orange">Team</span><br>
|
||||
Behind AIFO
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="team-carousel-wrapper js-marquee">
|
||||
<div class="team-carousel">
|
||||
<div class="team-image-container"><img src="../assets/images/demo/team-1.png"></div>
|
||||
<div class="team-image-container"><img src="../assets/images/demo/team-2.png"></div>
|
||||
<div class="team-image-container"><img src="../assets/images/demo/team-3.png"></div>
|
||||
<!-- <div class="team-image-container"><img src="../assets/images/demo/team-3.png"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="section" id="stories">
|
||||
<div class="container container-narrow fade-in show" id="storiesBlock">
|
||||
<h1 class="heading h1 fade-in show">Company <span class="text-orange">News</span> </h1>
|
||||
<div class="growth-carousel mt-3">
|
||||
<div class="d-flex align-items-center justify-content-between mb-7">
|
||||
|
||||
<div class="growth-controls">
|
||||
<button class="btn growthPrev" id="growthPrev"></button>
|
||||
<button class="btn growthNext" id="growthNext"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrapper">
|
||||
|
||||
|
||||
<div class="gradient-left"></div>
|
||||
<div class="gradient-right"></div>
|
||||
|
||||
|
||||
<div class="carousel-container-1">
|
||||
<div class="carousel-track" style="transform: translateX(-642px);">
|
||||
<!-- Page 1 -->
|
||||
<div class="carousel-item fade-in show">
|
||||
<img class="left-img" src="../assets/images/demo/new_1.png" alt="">
|
||||
<div class="content">
|
||||
<h2>Torem ipsum</h2>
|
||||
<p class="fade-in show">“ 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> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page 2 -->
|
||||
<div class="carousel-item fade-in show">
|
||||
<img class="left-img" src="../assets/images/demo/new_1.png" alt="">
|
||||
<div class="content">
|
||||
<h2>Torem ipsum</h2>
|
||||
<p class="fade-in show">“ 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> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page 3 -->
|
||||
<div class="carousel-item fade-in show">
|
||||
<img class="left-img" src="../assets/images/demo/new_1.png" alt="">
|
||||
<div class="content">
|
||||
<h2>Torem ipsum</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> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="dots">
|
||||
<div class="dot"></div>
|
||||
<div class="dot active"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<a href="#" class="btn btn-start-challenge d-flex 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>
|
||||
|
||||
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(0);
|
||||
}, 50);
|
||||
|
||||
|
||||
|
||||
setupFadeInObserver(".carousel-item");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
(function ($) {
|
||||
|
||||
$.fn.aifoMarquee = function () {
|
||||
|
||||
return this.each(function () {
|
||||
|
||||
const $wrapper = $(this);
|
||||
const $track = $wrapper.find('.team-carousel');
|
||||
const originalHTML = $track.html();
|
||||
const originalCount = $track.children().length;
|
||||
|
||||
/* ===== autoplay rule by count ===== */
|
||||
const isMobile = !matchMedia('(hover: hover)').matches;
|
||||
let autoPlayEnabled = false;
|
||||
|
||||
if (isMobile) {
|
||||
autoPlayEnabled = originalCount > 2;
|
||||
} else {
|
||||
autoPlayEnabled = originalCount >= 3;
|
||||
}
|
||||
|
||||
if (!autoPlayEnabled && originalCount <= 1) return;
|
||||
|
||||
/* ===== clone until enough ===== */
|
||||
while ($track[0].scrollWidth < window.innerWidth * 2) {
|
||||
$track.append(originalHTML);
|
||||
}
|
||||
|
||||
/* one full logical loop width */
|
||||
const loopWidth = $track[0].scrollWidth / ($track.children().length / originalCount);
|
||||
|
||||
/* ===== state ===== */
|
||||
let position = 0;
|
||||
let speed = 0.6;
|
||||
let baseSpeed = 0.6;
|
||||
let targetSpeed = baseSpeed;
|
||||
|
||||
let isDragging = false;
|
||||
let isInView = false;
|
||||
|
||||
let lastX = 0, lastTime = 0, velocity = 0;
|
||||
|
||||
/* Disable native img drag */
|
||||
$wrapper.find('img').on('dragstart', e => {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
/* Hover ease (PC only) */
|
||||
if (!isMobile) {
|
||||
$wrapper.on('mouseenter',()=>targetSpeed=0)
|
||||
.on('mouseleave',()=>targetSpeed=baseSpeed);
|
||||
}
|
||||
|
||||
/* Drag start */
|
||||
$wrapper.on('mousedown touchstart', e => {
|
||||
if (e.type === 'mousedown' && e.which !== 1) return;
|
||||
e.preventDefault();
|
||||
|
||||
isDragging = true;
|
||||
targetSpeed = 0;
|
||||
|
||||
lastX = e.pageX || e.originalEvent.touches[0].pageX;
|
||||
lastTime = Date.now();
|
||||
velocity = 0;
|
||||
|
||||
$wrapper.addClass('dragging');
|
||||
});
|
||||
|
||||
/* Drag move */
|
||||
$(document).on('mousemove touchmove', e => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const x = e.pageX || e.originalEvent.touches[0].pageX;
|
||||
const dx = x - lastX;
|
||||
const dt = Date.now() - lastTime || 16;
|
||||
|
||||
velocity = dx / dt * 16;
|
||||
position += dx;
|
||||
|
||||
lastX = x;
|
||||
lastTime = Date.now();
|
||||
});
|
||||
|
||||
/* Drag end */
|
||||
$(document).on('mouseup touchend touchcancel', () => {
|
||||
if (!isDragging) return;
|
||||
|
||||
isDragging = false;
|
||||
speed = Math.min(8, Math.max(Math.abs(velocity), baseSpeed));
|
||||
speed *= velocity < 0 ? -1 : 1;
|
||||
targetSpeed = baseSpeed;
|
||||
|
||||
$wrapper.removeClass('dragging');
|
||||
});
|
||||
|
||||
/* viewport observer */
|
||||
const observer = new IntersectionObserver(entries=>{
|
||||
entries.forEach(e=>{
|
||||
if (e.isIntersecting) {
|
||||
isInView = true;
|
||||
requestAnimationFrame(loop);
|
||||
} else {
|
||||
isInView = false;
|
||||
}
|
||||
});
|
||||
},{threshold:.3});
|
||||
observer.observe(this);
|
||||
|
||||
/* loop */
|
||||
function loop() {
|
||||
if (isInView && !isDragging && autoPlayEnabled) {
|
||||
position -= speed;
|
||||
speed += (targetSpeed - speed) * 0.08;
|
||||
}
|
||||
|
||||
position = ((position % loopWidth) + loopWidth) % loopWidth;
|
||||
position -= loopWidth;
|
||||
|
||||
$track.css('transform',`translateX(${position}px)`);
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
||||
$(function(){
|
||||
$('.js-marquee').aifoMarquee();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,173 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Choose Your Challenge</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||||
<link href="../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/challenge.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="challenge-floor" id="section-challenge">
|
||||
<div class="container">
|
||||
<div class="challenge-hero">
|
||||
<div class="hero-title-wrapper">
|
||||
<div class="text-center">
|
||||
<h2 class="heading h1 fade-in show">Choose <img src="../assets/images/backgrounds/icon/section-icon-1.png" alt="Funded Trading" class="why-img floating-img"></h2>
|
||||
<h2 class="heading h1 fade-in show">Your <span class="text-orange">Challenge</span></h2>
|
||||
<div class="fluid-paragraph text-center">
|
||||
<p class="lead lh-180 fade-in show">
|
||||
Whether you’re taking your first step or working toward larger accounts, AIFO has <span class="text-orange">flexible challenges</span> designed to match your style and support your growth. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-4">
|
||||
<div class="tab-wrap">
|
||||
<button type="button" class="tab-btn" data-tab="1step">1 STEP</button>
|
||||
<div class="tab-btn-with-badge">
|
||||
<span class="challenge-tab-popular-badge" role="img" aria-label="Popular">
|
||||
<span class="icon iconfont icon-challenge_start" aria-hidden="true"></span>
|
||||
<span class="challenge-tab-popular-badge-label">Popular</span>
|
||||
</span>
|
||||
<button type="button" class="tab-btn active" data-tab="2step">2 STEP</button>
|
||||
</div>
|
||||
<button type="button" class="tab-btn" data-tab="3step">3 STEP</button>
|
||||
<div class="tab-btn-with-badge">
|
||||
<span class="challenge-tab-popular-badge" role="img" aria-label="Popular">
|
||||
<span class="icon iconfont icon-challenge_start" aria-hidden="true"></span>
|
||||
<span class="challenge-tab-popular-badge-label">Popular</span>
|
||||
</span>
|
||||
<button type="button" class="tab-btn" data-tab="instant">INSTANT</button>
|
||||
</div>
|
||||
<div class="tab-btn-with-24h-decor">
|
||||
<img
|
||||
class="challenge-tab-24h-new-img"
|
||||
src="../assets/images/challenge/challenge_icon_new.png"
|
||||
width="96"
|
||||
height="33"
|
||||
alt="NEW"
|
||||
decoding="async"
|
||||
/>
|
||||
<button type="button" class="tab-btn tab-btn--24h" data-tab="24h">
|
||||
<img
|
||||
class="challenge-tab-24h-frame-img"
|
||||
src="../assets/images/challenge/challenge_tab_24h_frame.svg"
|
||||
width="24"
|
||||
height="24"
|
||||
alt=""
|
||||
decoding="async"
|
||||
/>
|
||||
<span class="tab-btn-24h-text">24H</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="challengeInstantSubtabs" class="challenge-instant-subtabs d-none text-center">
|
||||
<div class="tab-wrap">
|
||||
<button type="button" class="challenge-instant-subtab" data-instant-mode="pro">AIFO Standard</button>
|
||||
<button type="button" class="challenge-instant-subtab" data-instant-mode="aifo">AIFO Elite</button>
|
||||
<button type="button" class="challenge-instant-subtab active" data-instant-mode="NoCommission">No Commission</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="challengeAifoliteSubtabs" class="challenge-instant-subtabs d-none text-center">
|
||||
<div class="tab-wrap">
|
||||
<button type="button" class="challenge-instant-subtab active" data-aifolite-mode="lite">AIFO Lite</button>
|
||||
<!-- <button type="button" class="challenge-instant-subtab" data-aifolite-mode="aifo" style="display: none;">AIFO Elite11</button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="challengeCurrencyTabs" class="challenge-currency-tabs d-flex flex-wrap justify-content-center" style="display: none !important;"></div>
|
||||
|
||||
<div id="challenge-floor-mount" class="challenge-floor-mount"></div>
|
||||
|
||||
<div class="row mt-2 challenge-floor-addons">
|
||||
<div class="col-12">
|
||||
<div class="text-center addons-title">Add-ons</div>
|
||||
<div class="addons-box">
|
||||
<div class="addon-item">
|
||||
<span class="addon-badge">+20%</span>
|
||||
<span>Profit split increase up to 95%</span>
|
||||
</div>
|
||||
<div class="addon-item">
|
||||
<span class="addon-badge">+10%</span>
|
||||
<span>Fast payout (payout on demand)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div
|
||||
id="challengeCouponModal"
|
||||
class="challenge-coupon-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="challengeCouponModalTitle"
|
||||
aria-hidden="true"
|
||||
hidden
|
||||
>
|
||||
<div class="challenge-coupon-modal__backdrop" data-coupon-modal-dismiss="true"></div>
|
||||
<div class="challenge-coupon-modal__panel">
|
||||
<div class="challenge-coupon-modal__panel-bg" aria-hidden="true"></div>
|
||||
<div class="challenge-coupon-modal__inner">
|
||||
<img
|
||||
class="challenge-coupon-modal__logo"
|
||||
src="../assets/images/challenge/challenge_coupon_modal_logo.png"
|
||||
width="68"
|
||||
height="26"
|
||||
alt="AIFO"
|
||||
decoding="async"
|
||||
onerror="this.onerror=null;this.src='../assets/images/challenge/challenge_coupon_modal_logo.svg';"
|
||||
/>
|
||||
<h2 id="challengeCouponModalTitle" class="challenge-coupon-modal__title">Coupon copied</h2>
|
||||
<p class="challenge-coupon-modal__text">Coupon has been applied to the clipboard.</p>
|
||||
<div class="challenge-coupon-modal__hero">
|
||||
<img
|
||||
class="challenge-coupon-modal__hero-img"
|
||||
src="../assets/images/challenge/challenge_coupon_modal_hero.png"
|
||||
alt=""
|
||||
width="280"
|
||||
height="168"
|
||||
decoding="async"
|
||||
onerror="this.onerror=null;this.style.visibility='hidden';"
|
||||
/>
|
||||
</div>
|
||||
<div class="challenge-coupon-modal__code" id="challengeCouponModalCode">AIFO50</div>
|
||||
<div class="challenge-coupon-modal__actions">
|
||||
<button type="button" class="challenge-coupon-modal__cta" id="challengeCouponModalOk">
|
||||
<span class="challenge-coupon-modal__cta-label">Get Started</span>
|
||||
<img
|
||||
class="challenge-coupon-modal__cta-arrow"
|
||||
src="../assets/images/challenge/challenge_coupon_modal_arrow.svg"
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
decoding="async"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<!-- Optional: assign window.CHALLENGE_FLOOR_APP_STATE before challenge-floor-render.js (e.g. programType 2step, currency USD). -->
|
||||
<script src="../assets/js/challenge-floor-program-data.js"></script>
|
||||
<script>
|
||||
window.CHALLENGE_FLOOR_BOOT = window.CHALLENGE_FLOOR_BOOT || {};
|
||||
window.CHALLENGE_FLOOR_BOOT.assetBase = "../assets/images/challenge/";
|
||||
</script>
|
||||
|
||||
<script src="../assets/js/challenge-floor-render.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,957 @@
|
||||
<!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">
|
||||
<style id="toc-progress-style">
|
||||
.toc-list::after {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
</style>
|
||||
<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;
|
||||
}
|
||||
|
||||
#academy-sub .breadcrumb-wrapper {
|
||||
padding: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#academy-sub .breadcrumb{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.article-detail-section .text-center {
|
||||
margin-top: 0rem;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</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 mb-hidden">
|
||||
<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 class="col-md-5 academy-title-1 mb-show">
|
||||
<a class="btn btn-page-tab section-title">02</a>
|
||||
<h1><span class="text-orange">Supply & Demand</span> <br> Trading</h1>
|
||||
</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="section-sub-title 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="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 CCI3444444444434535434</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? versatile momentum-based oscillator developed</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 ers employ when using the CCI indicator</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 Calculation</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 class="right-sidebar">
|
||||
<div class="sticky-sidebar"><!-- Lessons List -->
|
||||
<div class="lessons-card">
|
||||
<div class="lessons-title">
|
||||
Technical Analysis Lessons
|
||||
</div>
|
||||
<div class="lesson-item">
|
||||
<div class="lesson-thumbnail">
|
||||
<img src="../assets/images/backgrounds/article-demo-1.png" alt="">
|
||||
</div>
|
||||
<div class="lesson-text">
|
||||
2.2.4 MACD indicator
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-item active">
|
||||
<div class="lesson-thumbnail">
|
||||
<img src="../assets/images/backgrounds/article-demo-1.png" alt="">
|
||||
</div>
|
||||
<div class="lesson-text">
|
||||
2.2.5 CCI indicator
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-item">
|
||||
<div class="lesson-thumbnail">
|
||||
<img src="../assets/images/backgrounds/article-demo-1.png" alt="">
|
||||
</div>
|
||||
<div class="lesson-text">
|
||||
2.2.6 RSI indicator
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Challenge Banner -->
|
||||
<div class="challenge-banner">
|
||||
<div class="challenge-logo">
|
||||
<a class="navbar-brand" href="../index.html">
|
||||
<img src="../assets/images/brand/logo_1.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<h3 class="challenge-title">Ready to take the challenge?</h3>
|
||||
<p class="challenge-text">Join a community of thousands of prop traders today</p>
|
||||
<a href="#" class="challenge-btn">
|
||||
Start your journey
|
||||
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="challenge-decoration">
|
||||
<div class="bar" style="height: 20px;"></div>
|
||||
<div class="bar" style="height: 35px;"></div>
|
||||
<div class="bar" style="height: 28px;"></div>
|
||||
<div class="bar" style="height: 45px;"></div>
|
||||
<div class="bar" style="height: 32px;"></div>
|
||||
<div class="bar" style="height: 38px;"></div>
|
||||
<div class="bar" style="height: 25px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</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">Excellent work!</h2>
|
||||
<p class="support-subtitle">
|
||||
Congratulations on completing this lesson, that's another step toward becoming a successful trader.
|
||||
</p>
|
||||
<br>
|
||||
<p class="support-subtitle">
|
||||
Dive into the next lesson and continue building your skills.
|
||||
</p>
|
||||
<div class="support-buttons">
|
||||
|
||||
<button class="support-btn btn-default support-btn-primary" id="chatBtn">
|
||||
<span id="chatBtnText">Previous lesson</span> </button>
|
||||
|
||||
<button class="support-btn support-btn-secondary" id="chatBtn">
|
||||
<span id="chatBtnText">Take exam</span> </button>
|
||||
|
||||
<a href="#" class="support-btn btn-default support-btn-primary" id="emailBtn">
|
||||
<span id="emailBtnText">Next 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>
|
||||
|
||||
/* ===========================================================
|
||||
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
|
||||
============================ */
|
||||
$(".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>
|
||||
@@ -0,0 +1,724 @@
|
||||
<!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>affiliate sigup 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">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
|
||||
onerror="this.onerror=null;this.href='/assets/flag-icons.min.css';">
|
||||
<!-- <link rel="stylesheet"
|
||||
href="../assets/flagicon/css/flag-icons.min.css"> -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
|
||||
<link rel="stylesheet" href="../assets/css/question.css" rel="">
|
||||
</head>
|
||||
|
||||
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<main class="login-page d-flex align-items-center" id="affliate-register-question">
|
||||
|
||||
|
||||
<!-- Questionnaire Modal - Step 1 -->
|
||||
<div class="modal-overlay questionnaireModalStep" id="questionnaireModalStep1" >
|
||||
<!-- style="display: flex;" -->
|
||||
<div class="questionnaire-modal">
|
||||
|
||||
<div class="main-container">
|
||||
<div class="questionnaire-card">
|
||||
<div class="card-content">
|
||||
<!-- <button class="back-button" aria-label="Back"> <span
|
||||
class="back-icon">←</span> <span class="back-text" id="backText">Back</span>
|
||||
</button> -->
|
||||
<div class="question_content">
|
||||
<form id="questionnaireForm"><!-- Question 1 -->
|
||||
<div class="question-section" data-question="1">
|
||||
<h2 class="question-title" id="question1Title">How many years of experience do you have in CFD trading?</h2>
|
||||
<div class="options-container">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" id="q1_option1" name="q1" value="A">
|
||||
<label for="q1_option1">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Less than 1 year</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" id="q1_option2" name="q1" value="B">
|
||||
<label for="q1_option2">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>1–3 years</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" id="q1_option3" name="q1" value="C">
|
||||
<label for="q1_option3">
|
||||
<span class="checkbox-custom"></span> <span>3–5 years</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" id="q1_option4" name="q1" value="D">
|
||||
<label for="q1_option4">
|
||||
<span
|
||||
class="checkbox-custom"></span> <span>More than 5 years</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Question 2 -->
|
||||
|
||||
<div class="question-section question-block question-section" data-question="2">
|
||||
<div class="question-title" id="question-2-title">
|
||||
Which prop trading platforms have you previously partnered with?
|
||||
</div>
|
||||
<div class="mixed-input-row">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" id="q2_option1" name="q2" value="A">
|
||||
<label for="q2_option1">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span class="checkbox-label">Never</span>
|
||||
</label>
|
||||
</div>
|
||||
<input type="text" class="form-input" name="q2_other_input" id="platform-input" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3 -->
|
||||
<div class="question-section question-block" data-question="3">
|
||||
<div class="question-title" id="question-3-title">
|
||||
Do you have a registered company, or are you an independent IB?
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="custom-checkbox"><input type="checkbox" name="q3" id="q3_option1"
|
||||
value="A">
|
||||
|
||||
<label for="q3_option1"> <span class="checkbox-custom"></span> <span
|
||||
class="checkbox-label">Registered company</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" name="q3"
|
||||
value="B" id="q3_option2">
|
||||
<label for="q3_option2">
|
||||
<span class="checkbox-custom"></span> <span
|
||||
class="checkbox-label">Independent IB</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Question 4 with Links Section -->
|
||||
<div class="question-section question-block" data-question="4">
|
||||
<div class="question-title" id="question-4-title">
|
||||
What marketing channels do you primarily use to attract new clients?
|
||||
</div>
|
||||
<div class="links-section">
|
||||
|
||||
<div class="platform-box">
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<strong>Links & ownership files</strong>
|
||||
<span class="add-platform">+ Add platform</span>
|
||||
</div>
|
||||
|
||||
<div id="platformList">
|
||||
|
||||
<div class="platform-row">
|
||||
<div class="platform-input-wrap">
|
||||
<i class="fab fa-youtube platform-icon"></i>
|
||||
<!-- testtest -->
|
||||
<input class="form-control platform-input" name="platform-url" placeholder="Platform URL">
|
||||
|
||||
<div class="platform-dropdown">
|
||||
<div class="platform-search">
|
||||
<input class="platform-search-input" placeholder="Search platform">
|
||||
</div>
|
||||
|
||||
<div class="platform-list">
|
||||
<div class="platform-item" data-name="YouTube" data-icon="fab fa-youtube">
|
||||
<i class="fab fa-youtube"></i> YouTube
|
||||
</div>
|
||||
<div class="platform-item" data-name="Instagram" data-icon="fab fa-instagram">
|
||||
<i class="fab fa-instagram"></i> Instagram
|
||||
</div>
|
||||
<div class="platform-item" data-name="Facebook" data-icon="fab fa-facebook">
|
||||
<i class="fab fa-facebook"></i> Facebook
|
||||
</div>
|
||||
<div class="platform-item" data-name="LinkedIn" data-icon="fab fa-linkedin">
|
||||
<i class="fab fa-linkedin"></i> LinkedIn
|
||||
</div>
|
||||
<div class="platform-item" data-name="TikTok" data-icon="fab fa-tiktok">
|
||||
<i class="fab fa-tiktok"></i> TikTok
|
||||
</div>
|
||||
<div class="platform-item" data-name="Other" data-icon="fas fa-globe">
|
||||
<i class="fas fa-globe"></i> Other
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="platform-empty">No results</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="file" class="file-input">
|
||||
<button class="btn btn-attach">Attach File</button>
|
||||
<div class="upload-progress"><div class="upload-bar"></div></div>
|
||||
<button class="btn-delete"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- question 5 -->
|
||||
<div class="question-section" data-question="5">
|
||||
<h2 class="question-title" id="question2Title">How many customers do you estimate you can bring in each month?</h2>
|
||||
<div class="options-container">
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q5_option1"
|
||||
name="q5" value="A"> <label for="q5_option1"> <span
|
||||
class="checkbox-custom"></span> <span>>10</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q5_option2"
|
||||
name="q5" value="B"> <label for="q5_option2"> <span
|
||||
class="checkbox-custom"></span> <span>50-100</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q5_option3"
|
||||
name="q5" value="C"> <label for="q5_option3"> <span
|
||||
class="checkbox-custom"></span> <span>100-500</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q5_option4"
|
||||
name="q5" value="D"> <label for="q5_option4"> <span
|
||||
class="checkbox-custom"></span> <span>More than 500</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 6 -->
|
||||
<div class="question-section question-block" data-question="6">
|
||||
<div class="question-title" id="question-6-title">
|
||||
What types of clients do you usually work with?
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="custom-checkbox"><input type="checkbox" name="q6" id="q6_option1"
|
||||
value="Retail traders">
|
||||
<label for="q6_option1">
|
||||
<span class="checkbox-custom"></span> <span
|
||||
class="checkbox-label">Retail traders</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"> <input type="checkbox" name="q6" id="q6_option2"
|
||||
value="professional"> <label for="q6_option2"> <span class="checkbox-custom"></span> <span
|
||||
class="checkbox-label">Institutional clients</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="custom-checkbox"> <input type="checkbox" name="q6" id="q6_option3"
|
||||
value="institutional"><label for="q6_option3"> <span class="checkbox-custom"></span> <span
|
||||
class="checkbox-label">Professional traders </span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"> <input type="checkbox" name="q6" id="q6_option4"
|
||||
value="mixed"><label for="q6_option4"> <span class="checkbox-custom"></span> <span
|
||||
class="checkbox-label">Mixed client base</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Question 7 -->
|
||||
|
||||
<div class="question-section question-block" data-question="7">
|
||||
<div class="question-title" id="question-7-title">
|
||||
Which prop trading platforms have you previously partnered with?
|
||||
</div><input type="text" name="q7" class="form-input" placeholder="">
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-section"><button type="submit" class="cta-button" id="submitButton" >
|
||||
<span id="ctaButtonText">Start Earning</span> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Questionnaire Modal - Step 2 -->
|
||||
<div class="modal-overlay questionnaireModalStep" id="questionnaireModalStep2">
|
||||
<!-- style="display: flex;" -->
|
||||
<div class="questionnaire-modal">
|
||||
<div class="page-wrapper">
|
||||
<div class="form-card questionnaire-card"><!-- Back Button -->
|
||||
<div class="back-button" >
|
||||
<div class="back-icon" id="backButton" >
|
||||
<svg width="14" height="14" viewbox="0 0 14 14" fill="none">
|
||||
<path d="M8.75 11.375L4.375 7L8.75 2.625" stroke="white" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div><span class="back-text" id="back-text">Back</span>
|
||||
</div>
|
||||
<!-- Question 8 -->
|
||||
<div class="question-section" data-question="8">
|
||||
<h2 class="question-title" id="question3Title">Are you aware that trading CFDs and leveraged products involve a high risk of losing money?</h2>
|
||||
<div class="options-container">
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q8_option1"
|
||||
name="q8" value="A"> <label for="q8_option1"> <span
|
||||
class="checkbox-custom"></span> <span>Yes, I fully understand the risks.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q8_option2"
|
||||
name="q8" value="B"> <label for="q8_option2"> <span
|
||||
class="checkbox-custom"></span> <span>I have some knowledge but would like more details.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q8_option3"
|
||||
name="q8" value="C"> <label for="q8_option3"> <span
|
||||
class="checkbox-custom"></span> <span>No, I am not fully aware of the risks.</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Question 9 -->
|
||||
<div class="question-section" data-question="9">
|
||||
<h2 class="question-title" id="question3Title">How do you educate your clients about trading risks?</h2>
|
||||
<div class="options-container">
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q9_option1"
|
||||
name="q9" value="A"> <label for="q9_option1"> <span
|
||||
class="checkbox-custom"></span> <span>I provide risk management education.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q9_option2"
|
||||
name="q9" value="B"> <label for="q9_option2"> <span
|
||||
class="checkbox-custom"></span> <span>I encourage clients to use demo accounts first.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q9_option3"
|
||||
name="q9" value="C"> <label for="q9_option3"> <span
|
||||
class="checkbox-custom"></span> <span>I inform them but leave risk decisions to them.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q9_option4"
|
||||
name="q9" value="D"> <label for="q9_option4"> <span
|
||||
class="checkbox-custom"></span> <span>I do not provide risk education.</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Question 10 -->
|
||||
<div class="question-section" data-question="10">
|
||||
<h2 class="question-title" id="question3Title">What steps do you take to ensure responsible trading among your clients?</h2>
|
||||
<div class="options-container">
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q10_option1"
|
||||
name="q10" value="A"> <label for="q10_option1"> <span
|
||||
class="checkbox-custom"></span> <span>I educate them on proper risk management.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q10_option2"
|
||||
name="q10" value="B"> <label for="q10_option2"> <span
|
||||
class="checkbox-custom"></span> <span>I recommend stop-loss and risk limits.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q10_option3"
|
||||
name="q10" value="C"> <label for="q10_option3"> <span
|
||||
class="checkbox-custom"></span> <span>I encourage them to trade more without considering risks.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q10_option4"
|
||||
name="q10" value="D"> <label for="q10_option4"> <span
|
||||
class="checkbox-custom"></span> <span>I do not provide any specific guidance.</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Question 11 -->
|
||||
<div class="question-section" data-question="11">
|
||||
<h2 class="question-title" id="question3Title">If a client experiences losses and complains, how would you handle the situation?</h2>
|
||||
<div class="options-container">
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q11_option1"
|
||||
name="q11" value="A"> <label for="q11_option1"> <span
|
||||
class="checkbox-custom"></span> <span>Explain that trading carries risks and provide guidance on improving strategies.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q11_option2"
|
||||
name="q11" value="B"> <label for="q11_option2"> <span
|
||||
class="checkbox-custom"></span> <span>Offer them compensation from my own commission.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q11_option3"
|
||||
name="q11" value="C"> <label for="q11_option3"> <span
|
||||
class="checkbox-custom"></span> <span>Encourage them to deposit more to recover losses quickly.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q11_option4"
|
||||
name="q11" value="D"> <label for="q11_option4"> <span
|
||||
class="checkbox-custom"></span> <span>Ignore the complaint, as losses are the client’s responsibility.</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Question 12 -->
|
||||
<div class="question-section" data-question="12">
|
||||
<h2 class="question-title" id="question3Title">How do you ensure a long-term and mutually beneficial relationship as an IB?</h2>
|
||||
<div class="options-container">
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q12_option1"
|
||||
name="q12" value="A"> <label for="q12_option1"> <span
|
||||
class="checkbox-custom"></span> <span>By maintaining transparency and ethical client management.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q12_option2"
|
||||
name="q12" value="B"> <label for="q12_option2"> <span
|
||||
class="checkbox-custom"></span> <span>By focusing only on commissions without client education.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q12_option3"
|
||||
name="q12" value="C"> <label for="q12_option3"> <span
|
||||
class="checkbox-custom"></span> <span>By frequently switching brokers to find better payouts.</span> </label>
|
||||
</div>
|
||||
<div class="custom-checkbox"><input type="checkbox" id="q12_option4"
|
||||
name="q12" value="D"> <label for="q12_option4"> <span
|
||||
class="checkbox-custom"></span> <span>By pushing clients to trade more, regardless of risk.</span> </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn-submit" id="submit-button" onclick="handleSubmit()">Add Platform</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* ===============================
|
||||
* Step 1 Validation
|
||||
* ===============================
|
||||
*/
|
||||
function validateStep1() {
|
||||
let isValid = true;
|
||||
const $step = $('#questionnaireModalStep1');
|
||||
|
||||
$step.find('.question-section').removeClass('has-error');
|
||||
|
||||
$step.find('.question-section').each(function () {
|
||||
const $section = $(this);
|
||||
const q = $section.data('question');
|
||||
|
||||
// q2 特殊处理
|
||||
if (q == 2) return;
|
||||
|
||||
const $checkboxes = $section.find('input[type="checkbox"]');
|
||||
if ($checkboxes.length && $checkboxes.filter(':checked').length !== 1) {
|
||||
$section.addClass('has-error');
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
// q2：checkbox OR text（二选一）
|
||||
const $q2 = $step.find('.question-section[data-question="2"]');
|
||||
if ($q2.length) {
|
||||
const checked = $q2.find('input[type="checkbox"]:checked').length;
|
||||
const inputVal = $.trim($q2.find('input[type="text"]').val());
|
||||
|
||||
if (checked === 0 && inputVal === '') {
|
||||
$q2.addClass('has-error');
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
/**
|
||||
* ===============================
|
||||
* Step 2 Validation
|
||||
* ===============================
|
||||
*/
|
||||
function validateStep2() {
|
||||
let isValid = true;
|
||||
const $step = $('#questionnaireModalStep2');
|
||||
|
||||
$step.find('.question-section').removeClass('has-error');
|
||||
|
||||
$step.find('.question-section').each(function () {
|
||||
const $section = $(this);
|
||||
const $checkboxes = $section.find('input[type="checkbox"]');
|
||||
|
||||
if ($checkboxes.length && $checkboxes.filter(':checked').length !== 1) {
|
||||
$section.addClass('has-error');
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
/**
|
||||
* ===============================
|
||||
* Scroll To Error (Scoped)
|
||||
* ===============================
|
||||
*/
|
||||
function scrollToFirstError(stepId) {
|
||||
const $step = $(stepId);
|
||||
const $error = $step.find('.has-error').first();
|
||||
if (!$error.length) return;
|
||||
|
||||
const $modal = $error.closest('.questionnaire-modal');
|
||||
|
||||
$modal.animate({
|
||||
scrollTop: $error.position().top - 40
|
||||
}, 400);
|
||||
|
||||
$error.addClass('error-focus');
|
||||
setTimeout(() => $error.removeClass('error-focus'), 1200);
|
||||
}
|
||||
|
||||
/**
|
||||
* ===============================
|
||||
* SINGLE CHOICE BEHAVIOR
|
||||
* ===============================
|
||||
*/
|
||||
$(document).on('change', '.question-section input[type="checkbox"]', function () {
|
||||
const $current = $(this);
|
||||
const $section = $current.closest('.question-section');
|
||||
const q = $section.data('question');
|
||||
|
||||
// q2 例外
|
||||
if (q == 2) {
|
||||
validateQ2Live();
|
||||
return;
|
||||
}
|
||||
|
||||
// 强制单选
|
||||
$section.find('input[type="checkbox"]').not(this).prop('checked', false);
|
||||
$section.removeClass('has-error');
|
||||
});
|
||||
|
||||
/**
|
||||
* ===============================
|
||||
* q2 Live Validation
|
||||
* ===============================
|
||||
*/
|
||||
function validateQ2Live() {
|
||||
const $q2 = $('#questionnaireModalStep1')
|
||||
.find('.question-section[data-question="2"]');
|
||||
|
||||
const checked = $q2.find('input[type="checkbox"]:checked').length;
|
||||
const inputVal = $.trim($q2.find('input[type="text"]').val());
|
||||
|
||||
// checkbox 单选
|
||||
if (checked > 1) {
|
||||
const $last = $q2.find('input[type="checkbox"]:checked').last();
|
||||
$q2.find('input[type="checkbox"]').not($last).prop('checked', false);
|
||||
}
|
||||
|
||||
if (checked > 0 || inputVal !== '') {
|
||||
$q2.removeClass('has-error');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on(
|
||||
'keyup change',
|
||||
'#questionnaireModalStep1 .question-section[data-question="2"] input',
|
||||
validateQ2Live
|
||||
);
|
||||
|
||||
/**
|
||||
* ===============================
|
||||
* Submit Buttons
|
||||
* ===============================
|
||||
*/
|
||||
$('#submitButton').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateStep1()) {
|
||||
scrollToFirstError('#questionnaireModalStep1');
|
||||
return;
|
||||
}
|
||||
|
||||
// 切换到 Step2
|
||||
$('#questionnaireModalStep1').hide();
|
||||
$('#questionnaireModalStep2').show();
|
||||
});
|
||||
|
||||
$('#submit-button').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateStep2()) {
|
||||
scrollToFirstError('#questionnaireModalStep2');
|
||||
return;
|
||||
}
|
||||
|
||||
alert('✅ All questionnaire validation passed');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* ===============================
|
||||
* Step2 → Step1 Back
|
||||
* ===============================
|
||||
*/
|
||||
$('#backButton').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
$('#questionnaireModalStep2').hide();
|
||||
$('#questionnaireModalStep1').show();
|
||||
|
||||
// 可选：回到 Step1 顶部
|
||||
const $modal = $('#questionnaireModalStep1 .questionnaire-modal');
|
||||
if ($modal.length) {
|
||||
$modal.scrollTop(0);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const PLATFORM_MAP=[
|
||||
{name:'YouTube',icon:'fab fa-youtube',placeholder:'YouTube URL',match:/youtube\.com|youtu\.be/i},
|
||||
{name:'Instagram',icon:'fab fa-instagram',placeholder:'Instagram URL',match:/instagram\.com/i},
|
||||
{name:'Facebook',icon:'fab fa-facebook',placeholder:'Facebook URL',match:/facebook\.com|fb\.com/i},
|
||||
{name:'LinkedIn',icon:'fab fa-linkedin',placeholder:'LinkedIn URL',match:/linkedin\.com/i},
|
||||
{name:'TikTok',icon:'fab fa-tiktok',placeholder:'TikTok URL',match:/tiktok\.com/i},
|
||||
|
||||
];
|
||||
|
||||
function detectPlatformByUrl(url){
|
||||
return PLATFORM_MAP.find(p=>p.match.test(url))||null;
|
||||
}
|
||||
|
||||
function getSelectedPlatforms(){
|
||||
const set=new Set();
|
||||
$('.platform-input').each(function(){
|
||||
const ph=$(this).attr('placeholder');
|
||||
PLATFORM_MAP.forEach(p=>{
|
||||
if(ph===p.placeholder) set.add(p.name);
|
||||
});
|
||||
});
|
||||
return set;
|
||||
}
|
||||
|
||||
function updateAvailability(row){
|
||||
const used=getSelectedPlatforms();
|
||||
const current=row.find('.platform-input').attr('placeholder');
|
||||
row.find('.platform-item').each(function(){
|
||||
const name=$(this).data('name');
|
||||
if(current && current.startsWith(name)){
|
||||
$(this).removeClass('disabled');
|
||||
}else if(used.has(name)){
|
||||
$(this).addClass('disabled');
|
||||
}else{
|
||||
$(this).removeClass('disabled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function simulateUpload(btn,prog,bar){
|
||||
let p=0;
|
||||
prog.show();bar.width(0);
|
||||
btn.text('Uploading...').prop('disabled',true);
|
||||
const t=setInterval(()=>{
|
||||
p+=10;bar.width(p+'%');
|
||||
if(p>=100){
|
||||
clearInterval(t);
|
||||
btn.text('Uploaded').addClass('attached').prop('disabled',false);
|
||||
}
|
||||
},200);
|
||||
}
|
||||
|
||||
function bindRow(row){
|
||||
const input=row.find('.platform-input');
|
||||
const icon=row.find('.platform-icon');
|
||||
const dropdown=row.find('.platform-dropdown');
|
||||
const search=row.find('.platform-search-input');
|
||||
const items=row.find('.platform-item');
|
||||
const empty=row.find('.platform-empty');
|
||||
const file=row.find('.file-input');
|
||||
const btn=row.find('.btn-attach');
|
||||
const prog=row.find('.upload-progress');
|
||||
const bar=row.find('.upload-bar');
|
||||
|
||||
icon.on('click',function(e){
|
||||
e.stopPropagation();
|
||||
const open=dropdown.is(':visible');
|
||||
$('.platform-dropdown').hide();
|
||||
if(!open){
|
||||
dropdown.show();
|
||||
updateAvailability(row);
|
||||
search.val('').trigger('input').focus();
|
||||
}
|
||||
});
|
||||
|
||||
items.on('click',function(){
|
||||
if($(this).hasClass('disabled')) return;
|
||||
icon.attr('class',$(this).data('icon')+' platform-icon');
|
||||
input.attr('placeholder',$(this).data('name')+' URL');
|
||||
dropdown.hide();
|
||||
$('.platform-row').each(function(){updateAvailability($(this));});
|
||||
});
|
||||
|
||||
search.on('input',function(){
|
||||
let v=$(this).val().toLowerCase(),c=0;
|
||||
items.each(function(){
|
||||
const s=$(this).text().toLowerCase().includes(v);
|
||||
$(this).toggle(s); if(s) c++;
|
||||
});
|
||||
empty.toggle(!c);
|
||||
});
|
||||
|
||||
input.on('input paste',function(){
|
||||
const p=detectPlatformByUrl($(this).val());
|
||||
if(p){
|
||||
icon.attr('class',p.icon+' platform-icon');
|
||||
input.attr('placeholder',p.placeholder);
|
||||
$('.platform-row').each(function(){updateAvailability($(this));});
|
||||
}
|
||||
});
|
||||
|
||||
btn.on('click',()=>file.click());
|
||||
file.on('change',()=>file[0].files.length&&simulateUpload(btn,prog,bar));
|
||||
|
||||
row.find('.btn-delete').on('click',()=>{
|
||||
if($('.platform-row').length>1) row.remove();
|
||||
else{
|
||||
input.val('').attr('placeholder','Platform URL');
|
||||
icon.attr('class','fab fa-youtube platform-icon');
|
||||
btn.text('Attach File').removeClass('attached').prop('disabled',false);
|
||||
prog.hide();bar.width(0);file.val('');
|
||||
}
|
||||
$('.platform-row').each(function(){updateAvailability($(this));});
|
||||
});
|
||||
}
|
||||
|
||||
bindRow($('.platform-row'));
|
||||
|
||||
$('.add-platform').on('click',()=>{
|
||||
const n=$('.platform-row:first').clone();
|
||||
n.find('input').val('');
|
||||
n.find('.btn-attach').text('Attach File').removeClass('attached').prop('disabled',false);
|
||||
n.find('.upload-progress').hide();
|
||||
n.find('.upload-bar').width(0);
|
||||
$('#platformList').append(n);
|
||||
bindRow(n);
|
||||
$('.platform-row').each(function(){updateAvailability($(this));});
|
||||
});
|
||||
|
||||
$(document).on('click',e=>{
|
||||
if(!$(e.target).closest('.platform-row').length){
|
||||
$('.platform-dropdown').hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,352 @@
|
||||
<!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>affiliate sigup 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">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
|
||||
onerror="this.onerror=null;this.href='/assets/flag-icons.min.css';">
|
||||
<!-- <link rel="stylesheet"
|
||||
href="../assets/flagicon/css/flag-icons.min.css"> -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
|
||||
<link rel="stylesheet" href="../assets/css/login.css" rel="">
|
||||
</head>
|
||||
<style>
|
||||
.login-page::before {
|
||||
content:unset;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<main class="main login-page d-flex align-items-center" id="affliate-register">
|
||||
|
||||
|
||||
<!-- emial-varify style="display: flex;"-->
|
||||
<div class="modal-overlay" id="emial-varify" style="display: flex;" >
|
||||
<!-- style="display: flex;" -->
|
||||
<div class="questionnaire-modal">
|
||||
<div class="app-wrapper">
|
||||
<div class="container-fluid h-full">
|
||||
<div class="row justify-content-center align-items-center h-full">
|
||||
<div class="col-11 col-sm-10 col-md-6 col-lg-5 col-xl-4">
|
||||
<div class="verification-card">
|
||||
<div class="email-icon">
|
||||
<img src="../assets/images/backgrounds/icon/email-icon.png">
|
||||
</div>
|
||||
|
||||
<h1 class="main-title" id="mainTitle">Verify your code</h1><!-- 提示信息条 -->
|
||||
<div class="info-toast" id="infoToast">
|
||||
<div class="info-icon-container">
|
||||
!
|
||||
</div>
|
||||
<div class="info-text">
|
||||
<div id="infoLine1">
|
||||
Enter the passcode you just received on your email address ending with
|
||||
******in@gmail.com
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="error-toast" id="errorToast">
|
||||
<div class="error-icon-container">
|
||||
✕
|
||||
</div>
|
||||
<div class="error-text" id="errorText">
|
||||
Invalid code. Please try again.
|
||||
</div>
|
||||
</div>
|
||||
<div class="success-toast" id="successToast">
|
||||
<div class="success-icon-container">
|
||||
✓
|
||||
</div>
|
||||
<div class="success-text" id="successText">
|
||||
A new code has been sent.
|
||||
</div>
|
||||
</div> <input type="text" class="code-input" id="codeInput"
|
||||
placeholder="Enter your code" inputmode="numeric" autocomplete="one-time-code"
|
||||
maxlength="6">
|
||||
<button class="verify-btn" id="verifyBtn" disabled>
|
||||
|
||||
<span class="btn-text">Verify</span>
|
||||
<div class="spinner"></div>
|
||||
</button>
|
||||
<div class="resend-section">
|
||||
<span class="resend-text" id="resendPrefix">Email didn't
|
||||
arrive?</span> <a href="#" class="resend-link" id="resendLink">Resend
|
||||
again</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<!-- email verify -->
|
||||
<script>
|
||||
const defaultConfig = {
|
||||
main_title: "Verify your code",
|
||||
info_message_line1: "Enter the passcode you just received on your email address ending",
|
||||
info_message_line2: "with ******in@gmail.com",
|
||||
input_placeholder: "Enter your code",
|
||||
verify_button_text: "Verify",
|
||||
resend_prefix: "Email didn't arrive?",
|
||||
resend_link_text: "Resend again",
|
||||
primary_orange: "#F98715",
|
||||
official_white: "#F9F9F9"
|
||||
};
|
||||
|
||||
let resendCountdown = 0;
|
||||
let resendTimer = null;
|
||||
|
||||
async function onConfigChange(config) {
|
||||
$('#mainTitle').text(config.main_title || defaultConfig.main_title);
|
||||
$('#infoLine1').text(config.info_message_line1 || defaultConfig.info_message_line1);
|
||||
$('#infoLine2').text(config.info_message_line2 || defaultConfig.info_message_line2);
|
||||
$('#codeInput').attr('placeholder', config.input_placeholder || defaultConfig.input_placeholder);
|
||||
$('#verifyBtn .btn-text').text(config.verify_button_text || defaultConfig.verify_button_text);
|
||||
$('#resendPrefix').text(config.resend_prefix || defaultConfig.resend_prefix);
|
||||
|
||||
if (resendCountdown === 0) {
|
||||
$('#resendLink').text(config.resend_link_text || defaultConfig.resend_link_text);
|
||||
}
|
||||
|
||||
const primaryOrange = config.primary_orange || defaultConfig.primary_orange;
|
||||
const officialWhite = config.official_white || defaultConfig.official_white;
|
||||
|
||||
$('.main-title').css('color', officialWhite);
|
||||
$('.code-input').css('color', officialWhite);
|
||||
$('.verify-btn').css({
|
||||
'background': primaryOrange,
|
||||
'color': officialWhite
|
||||
});
|
||||
$('.resend-link').css('color', primaryOrange);
|
||||
$('.info-icon-container').css('color', primaryOrange);
|
||||
}
|
||||
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.init({
|
||||
defaultConfig: defaultConfig,
|
||||
onConfigChange: onConfigChange,
|
||||
mapToCapabilities: (config) => ({
|
||||
recolorables: [
|
||||
{
|
||||
get: () => config.primary_orange || defaultConfig.primary_orange,
|
||||
set: (value) => {
|
||||
config.primary_orange = value;
|
||||
window.elementSdk.setConfig({ primary_orange: value });
|
||||
}
|
||||
},
|
||||
{
|
||||
get: () => config.official_white || defaultConfig.official_white,
|
||||
set: (value) => {
|
||||
config.official_white = value;
|
||||
window.elementSdk.setConfig({ official_white: value });
|
||||
}
|
||||
}
|
||||
],
|
||||
borderables: [],
|
||||
fontEditable: undefined,
|
||||
fontSizeable: undefined
|
||||
}),
|
||||
mapToEditPanelValues: (config) => new Map([
|
||||
["main_title", config.main_title || defaultConfig.main_title],
|
||||
["info_message_line1", config.info_message_line1 || defaultConfig.info_message_line1],
|
||||
["info_message_line2", config.info_message_line2 || defaultConfig.info_message_line2],
|
||||
["input_placeholder", config.input_placeholder || defaultConfig.input_placeholder],
|
||||
["verify_button_text", config.verify_button_text || defaultConfig.verify_button_text],
|
||||
["resend_prefix", config.resend_prefix || defaultConfig.resend_prefix],
|
||||
["resend_link_text", config.resend_link_text || defaultConfig.resend_link_text]
|
||||
])
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
const $codeInput = $('#codeInput');
|
||||
const $verifyBtn = $('#verifyBtn');
|
||||
const $resendLink = $('#resendLink');
|
||||
const $errorToast = $('#errorToast');
|
||||
const $successToast = $('#successToast');
|
||||
const $infoToast = $('#infoToast');
|
||||
|
||||
// Input field handling
|
||||
$codeInput.on('input', function () {
|
||||
let value = $(this).val();
|
||||
value = value.replace(/[^0-9]/g, '');
|
||||
|
||||
if (value.length > 6) {
|
||||
value = value.substring(0, 6);
|
||||
}
|
||||
|
||||
$(this).val(value);
|
||||
|
||||
if (value.length === 6) {
|
||||
$verifyBtn.prop('disabled', false);
|
||||
} else {
|
||||
$verifyBtn.prop('disabled', true);
|
||||
}
|
||||
|
||||
$errorToast.hide();
|
||||
});
|
||||
|
||||
// Verify button
|
||||
$verifyBtn.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const code = $codeInput.val();
|
||||
if (code.length !== 6) return;
|
||||
|
||||
$(this).addClass('loading').prop('disabled', true);
|
||||
$errorToast.hide();
|
||||
$successToast.hide();
|
||||
|
||||
codeInput = $('#codeInput').val();
|
||||
email = $('#email').val();
|
||||
emailNonce = $('#verify-email-nonce').val();
|
||||
token = $('#token').val();
|
||||
uid = $('#uid').val();
|
||||
console.log(codeInput);
|
||||
console.log(email);
|
||||
console.log(emailNonce);
|
||||
console.log(uid);
|
||||
|
||||
$.post('<?php echo admin_url("admin-ajax.php"); ?>', {
|
||||
action:'affwp_email_verify',
|
||||
uid:uid,
|
||||
token:token,
|
||||
input_code: codeInput,
|
||||
nonce: emailNonce
|
||||
}, function (res) {
|
||||
console.log(res);
|
||||
$('#login-button').prop('disabled', false).text('Log in');
|
||||
|
||||
$verifyBtn.removeClass('loading');
|
||||
if (res.success) {
|
||||
$infoToast.hide();
|
||||
$successToast.find('#successText').text('Verification successful!');
|
||||
$successToast.show();
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('Verification successful, redirecting...');
|
||||
window.location.href = '<?php echo home_url('/affiliate-question'); ?>';
|
||||
}, 1000);
|
||||
|
||||
} else {
|
||||
$infoToast.hide();
|
||||
$errorToast.find('#errorText').text(res.data.message+', Please try again.');
|
||||
$errorToast.show();
|
||||
$codeInput.val('').focus();
|
||||
$verifyBtn.prop('disabled', true);
|
||||
}
|
||||
});
|
||||
|
||||
// setTimeout(() => {
|
||||
// const isValid = Math.random() > 0.5;
|
||||
|
||||
// $verifyBtn.removeClass('loading');
|
||||
|
||||
// if (isValid) {
|
||||
// $infoToast.hide();
|
||||
// $successToast.find('#successText').text('Verification successful!');
|
||||
// $successToast.show();
|
||||
|
||||
// setTimeout(() => {
|
||||
// console.log('Verification successful, redirecting...');
|
||||
// }, 1000);
|
||||
// } else {
|
||||
// $infoToast.hide();
|
||||
// $errorToast.find('#errorText').text('Invalid code. Please try again.');
|
||||
// $errorToast.show();
|
||||
// $codeInput.val('').focus();
|
||||
// $verifyBtn.prop('disabled', true);
|
||||
// }
|
||||
// }, 1500);
|
||||
});
|
||||
|
||||
// Resend link
|
||||
$resendLink.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if ($(this).hasClass('disabled')) return;
|
||||
|
||||
$errorToast.hide();
|
||||
$infoToast.hide();
|
||||
$successToast.find('#successText').text('A new code has been sent.');
|
||||
$successToast.show();
|
||||
|
||||
setTimeout(() => {
|
||||
$successToast.hide();
|
||||
$infoToast.show();
|
||||
}, 3000);
|
||||
|
||||
startResendCountdown();
|
||||
});
|
||||
|
||||
function startResendCountdown() {
|
||||
resendCountdown = 30;
|
||||
$resendLink.addClass('disabled');
|
||||
|
||||
updateResendText();
|
||||
|
||||
resendTimer = setInterval(() => {
|
||||
resendCountdown--;
|
||||
if (resendCountdown <= 0) {
|
||||
clearInterval(resendTimer);
|
||||
$resendLink.removeClass('disabled');
|
||||
const config = window.elementSdk ? window.elementSdk.config : defaultConfig;
|
||||
$resendLink.text(config.resend_link_text || defaultConfig.resend_link_text);
|
||||
} else {
|
||||
updateResendText();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function updateResendText() {
|
||||
$resendLink.text(`Resend in ${resendCountdown}s`);
|
||||
}
|
||||
|
||||
$codeInput.focus();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,378 @@
|
||||
<!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>affiliate login Page</title>
|
||||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||||
<link href="../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../assets/css/affiliate_login.css" rel="">
|
||||
</head>
|
||||
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<main class="login-page d-flex align-items-center" id="affliate-login">
|
||||
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
<div class="row main-row align-items-start justify-content-between">
|
||||
<!-- Left Column: Login Card -->
|
||||
<div class="col-lg-5 col-xl-4 left-block">
|
||||
<div class="login-card card-base">
|
||||
<div class="logo-container">
|
||||
<a class="navbar-brand" href="../index.html">
|
||||
<img src="../assets/images/brand/logo_1.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="login-title" id="login-title">Log in to AIFO</h1>
|
||||
<form id="login-form" class="needs-validation" novalidate>
|
||||
<div class="form-group">
|
||||
<label class="form-label" id="username-label">User name</label>
|
||||
<input type="email" class="form-control" autocomplete="username" id="username"
|
||||
placeholder="Username / email address" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter an username or email address.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" id="password-label">Password</label>
|
||||
<div class="password-wrapper">
|
||||
<input type="password" class="form-control" id="password"
|
||||
placeholder="Enter your password" required>
|
||||
<button type="button" class="password-toggle" id="password-toggle"
|
||||
aria-label="Toggle password visibility">
|
||||
<svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewbox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="invalid-feedback">
|
||||
Please enter password.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="remember-forgot custom-control">
|
||||
|
||||
<input type="checkbox" class="custom-control-input" id="remember">
|
||||
<label class="custom-control-label" for="remember">
|
||||
<span class="svg-check">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="5 13 10 18 19 7"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
Remember Me
|
||||
</label>
|
||||
<a href="#" class="forgot-link" id="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<button type="submit" class="btn-aifo-primary" id="login-button">Log in</button>
|
||||
</form>
|
||||
<div class="divider">
|
||||
<div class="divider-line"></div><span class="divider-text" id="divider-text">or continue
|
||||
with</span>
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
<div class="social-buttons"><button class="social-btn" aria-label="Continue with Google">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
fill="#4285F4" />
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853" />
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
fill="#FBBC05" />
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335" />
|
||||
</svg></button> <button class="social-btn" aria-label="Continue with Facebook">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
|
||||
fill="#1877F2" />
|
||||
</svg></button> <button class="social-btn" aria-label="Continue with Apple">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
|
||||
fill="#000000" />
|
||||
</svg></button>
|
||||
</div>
|
||||
<div class="signup-prompt"><span id="signup-prompt-text">Do not have an account yet?</span>
|
||||
<a href="#" class="signup-link text-orange" id="signup-link">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Feature Cards -->
|
||||
<div class="col-12 col-lg-7 steps-card-col mb-hidden">
|
||||
<div class="glass-card steps-card">
|
||||
<h2 class="steps-title text-orange" id="stepsTitle">What happens after you apply?</h2>
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-line"></div><!-- Step 1 -->
|
||||
<div class="step-item">
|
||||
<div class="step-number">
|
||||
1
|
||||
</div>
|
||||
<div class="step-label">
|
||||
Step 1
|
||||
</div>
|
||||
<h3 class="step-title" id="step1Title">Submit your application</h3>
|
||||
<p class="step-desc" id="step1Desc">Tell us about your traffic sources, regions and
|
||||
promotion methods.</p>
|
||||
</div><!-- Step 2 -->
|
||||
<div class="step-item">
|
||||
<div class="step-number">
|
||||
2
|
||||
</div>
|
||||
<div class="step-label">
|
||||
Step 2
|
||||
</div>
|
||||
<h3 class="step-title" id="step2Title">Manual review (within 48 hours)</h3>
|
||||
<p class="step-desc" id="step2Desc">Our team reviews your details to ensure compliance with our marketing and risk policies.</p>
|
||||
</div><!-- Step 3 -->
|
||||
<div class="step-item">
|
||||
<div class="step-number">
|
||||
3
|
||||
</div>
|
||||
<div class="step-label">
|
||||
Step 3
|
||||
</div>
|
||||
<h3 class="step-title" id="step3Title">Get approved and start earning</h3>
|
||||
<p class="step-desc" id="step3Desc">If approved, you’ll receive a welcome email within 48 hours with your tracking links, commission planand login details.</p>
|
||||
</div><!-- Step 4 -->
|
||||
<div class="step-item">
|
||||
<div class="step-number">
|
||||
4
|
||||
</div>
|
||||
<div class="step-label">
|
||||
Step 4
|
||||
</div>
|
||||
<h3 class="step-title" id="step4Title">Receive timely payments</h3>
|
||||
<p class="step-desc" id="step4Desc">Start promoting AIFO using our ready-made creatives, landing pages and tracking tools. Our team can review your first campaigns and provide optimisation tips.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const defaultConfig = {
|
||||
login_title: 'Log in to AIFO',
|
||||
username_label: 'User name',
|
||||
username_placeholder: 'Username / email address',
|
||||
password_label: 'Password',
|
||||
password_placeholder: 'Enter your password',
|
||||
remember_text: 'Remember Me',
|
||||
forgot_text: 'Forgot password?',
|
||||
login_button: 'Log in',
|
||||
divider_text: 'or continue with',
|
||||
signup_prompt_text: 'Do not have an account yet?',
|
||||
signup_link: 'Sign Up',
|
||||
academy_title: 'AIFO Academy',
|
||||
academy_subtitle: 'Learn, then earn',
|
||||
academy_description: 'Access step-by-step courses on strategy, risk management and trading psychology, designed to help you pass challenges more consistently.',
|
||||
trial_title: 'Free Trial',
|
||||
trial_subtitle: 'Try before you commit',
|
||||
trial_description: 'Open a free practice account to experience our rules, platform flow and risk limits before purchasing any',
|
||||
refer_title: 'Refer Friends',
|
||||
refer_subtitle: 'Grow together, earn rewards',
|
||||
refer_description: 'Invite friends who love trading. When they join and start challenges, you get exclusive rewards and benefits.',
|
||||
help_title: 'Help when you need it',
|
||||
help_description: 'Our team is here to assist you with registration, challenge selection and account setup.'
|
||||
};
|
||||
|
||||
async function onConfigChange(config) {
|
||||
document.getElementById('login-title').textContent = config.login_title || defaultConfig.login_title;
|
||||
document.getElementById('username-label').textContent = config.username_label || defaultConfig.username_label;
|
||||
document.getElementById('username').placeholder = config.username_placeholder || defaultConfig.username_placeholder;
|
||||
document.getElementById('password-label').textContent = config.password_label || defaultConfig.password_label;
|
||||
document.getElementById('password').placeholder = config.password_placeholder || defaultConfig.password_placeholder;
|
||||
document.getElementById('remember-text').textContent = config.remember_text || defaultConfig.remember_text;
|
||||
document.getElementById('forgot-link').textContent = config.forgot_text || defaultConfig.forgot_text;
|
||||
document.getElementById('login-button').textContent = config.login_button || defaultConfig.login_button;
|
||||
document.getElementById('divider-text').textContent = config.divider_text || defaultConfig.divider_text;
|
||||
document.getElementById('signup-prompt-text').textContent = config.signup_prompt_text || defaultConfig.signup_prompt_text;
|
||||
document.getElementById('signup-link').textContent = config.signup_link || defaultConfig.signup_link;
|
||||
|
||||
document.getElementById('academy-title').textContent = config.academy_title || defaultConfig.academy_title;
|
||||
document.getElementById('academy-subtitle').textContent = config.academy_subtitle || defaultConfig.academy_subtitle;
|
||||
document.getElementById('academy-description').textContent = config.academy_description || defaultConfig.academy_description;
|
||||
document.getElementById('trial-title').textContent = config.trial_title || defaultConfig.trial_title;
|
||||
document.getElementById('trial-subtitle').textContent = config.trial_subtitle || defaultConfig.trial_subtitle;
|
||||
document.getElementById('trial-description').textContent = config.trial_description || defaultConfig.trial_description;
|
||||
document.getElementById('refer-title').textContent = config.refer_title || defaultConfig.refer_title;
|
||||
document.getElementById('refer-subtitle').textContent = config.refer_subtitle || defaultConfig.refer_subtitle;
|
||||
document.getElementById('refer-description').textContent = config.refer_description || defaultConfig.refer_description;
|
||||
document.getElementById('help-title').textContent = config.help_title || defaultConfig.help_title;
|
||||
document.getElementById('help-description').textContent = config.help_description || defaultConfig.help_description;
|
||||
}
|
||||
|
||||
function mapToCapabilities(config) {
|
||||
return {
|
||||
recolorables: [],
|
||||
borderables: [],
|
||||
fontEditable: undefined,
|
||||
fontSizeable: undefined
|
||||
};
|
||||
}
|
||||
|
||||
function mapToEditPanelValues(config) {
|
||||
return new Map([
|
||||
['login_title', config.login_title || defaultConfig.login_title],
|
||||
['username_label', config.username_label || defaultConfig.username_label],
|
||||
['username_placeholder', config.username_placeholder || defaultConfig.username_placeholder],
|
||||
['password_label', config.password_label || defaultConfig.password_label],
|
||||
['password_placeholder', config.password_placeholder || defaultConfig.password_placeholder],
|
||||
['remember_text', config.remember_text || defaultConfig.remember_text],
|
||||
['forgot_text', config.forgot_text || defaultConfig.forgot_text],
|
||||
['login_button', config.login_button || defaultConfig.login_button],
|
||||
['divider_text', config.divider_text || defaultConfig.divider_text],
|
||||
['signup_prompt_text', config.signup_prompt_text || defaultConfig.signup_prompt_text],
|
||||
['signup_link', config.signup_link || defaultConfig.signup_link],
|
||||
['academy_title', config.academy_title || defaultConfig.academy_title],
|
||||
['academy_subtitle', config.academy_subtitle || defaultConfig.academy_subtitle],
|
||||
['academy_description', config.academy_description || defaultConfig.academy_description],
|
||||
['trial_title', config.trial_title || defaultConfig.trial_title],
|
||||
['trial_subtitle', config.trial_subtitle || defaultConfig.trial_subtitle],
|
||||
['trial_description', config.trial_description || defaultConfig.trial_description],
|
||||
['refer_title', config.refer_title || defaultConfig.refer_title],
|
||||
['refer_subtitle', config.refer_subtitle || defaultConfig.refer_subtitle],
|
||||
['refer_description', config.refer_description || defaultConfig.refer_description],
|
||||
['help_title', config.help_title || defaultConfig.help_title],
|
||||
['help_description', config.help_description || defaultConfig.help_description]
|
||||
]);
|
||||
}
|
||||
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.init({
|
||||
defaultConfig,
|
||||
onConfigChange,
|
||||
mapToCapabilities,
|
||||
mapToEditPanelValues
|
||||
});
|
||||
}
|
||||
|
||||
// Password toggle functionality
|
||||
const passwordToggle = document.getElementById('password-toggle');
|
||||
const passwordInput = document.getElementById('password');
|
||||
const eyeIcon = document.getElementById('eye-icon');
|
||||
|
||||
passwordToggle.addEventListener('click', function () {
|
||||
const isPassword = passwordInput.type === 'password';
|
||||
passwordInput.type = isPassword ? 'text' : 'password';
|
||||
|
||||
if (isPassword) {
|
||||
eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
|
||||
} else {
|
||||
eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />';
|
||||
}
|
||||
});
|
||||
|
||||
// Form validation
|
||||
const loginForm = document.getElementById('login-form');
|
||||
const usernameInput = document.getElementById('username');
|
||||
const usernameError = document.getElementById('username-error');
|
||||
const passwordError = document.getElementById('password-error');
|
||||
|
||||
loginForm.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
let hasError = false;
|
||||
|
||||
if (usernameInput.value.trim() === '') {
|
||||
usernameError.classList.add('show');
|
||||
hasError = true;
|
||||
} else {
|
||||
usernameError.classList.remove('show');
|
||||
}
|
||||
|
||||
if (passwordInput.value.trim() === '') {
|
||||
passwordError.classList.add('show');
|
||||
hasError = true;
|
||||
} else {
|
||||
passwordError.classList.remove('show');
|
||||
}
|
||||
|
||||
if (!hasError) {
|
||||
// Create success message container
|
||||
const successMsg = document.createElement('div');
|
||||
successMsg.style.cssText = 'position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(249, 135, 21, 0.95); color: white; padding: 16px 32px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 9999; font-size: 15px; font-weight: 600;';
|
||||
successMsg.textContent = 'Login successful!';
|
||||
document.body.appendChild(successMsg);
|
||||
|
||||
setTimeout(() => {
|
||||
successMsg.remove();
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
|
||||
usernameInput.addEventListener('input', function () {
|
||||
if (this.value.trim() !== '') {
|
||||
usernameError.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
passwordInput.addEventListener('input', function () {
|
||||
if (this.value.trim() !== '') {
|
||||
passwordError.classList.remove('show');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Prevent form submission if validation fails
|
||||
(function () {
|
||||
'use strict';
|
||||
window.addEventListener('load', function () {
|
||||
// Get form validation styles
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop and prevent submission
|
||||
var validation = Array.prototype.filter.call(forms, function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,80 @@
|
||||
<!--
|
||||
Backup: payout.html Payment Methods section (lines ~684-760)
|
||||
Source: pages/payout.html
|
||||
Date: 2026-06-10
|
||||
Related CSS: assets/css/index.css (.payment-methods-section, .pm-*)
|
||||
Related SCSS: assets/scss/index.scss (Payment Methods Section)
|
||||
-->
|
||||
<!-- Payment Methods Section -->
|
||||
<section class="payment-methods-section py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-4 font-weight-bold"><span style="color: var(--white-primary);">Payment </span> <span class="text-orange">Methods</span></h2>
|
||||
</div>
|
||||
<div class="pm-marquee position-relative">
|
||||
<div class="pm-fade pm-fade-left"></div>
|
||||
<div class="pm-fade pm-fade-right"></div>
|
||||
<div class="pm-track">
|
||||
|
||||
<div class="pm-group">
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Apple_Pay_logo.svg" alt="Apple_Pay_logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Confirmo.png" alt="Confirmo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Google_Pay_Logo.svg" alt="Google_Pay_Logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/MasterCard_Logo.svg" alt="MasterCard_Logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Nuvei_Organization_logo.png" alt="Nuvei_Organization_logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/pay-checkout.png" alt="checkout" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/PayPal_Logo2014.png" alt="" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Skrill_logo.svg" alt="Skrill_logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Visa_Inc._logo.svg" alt="Visa_Inc" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="pm-group" aria-hidden="true">
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Apple_Pay_logo.svg" alt="Apple_Pay_logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Confirmo.png" alt="Confirmo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Google_Pay_Logo.svg" alt="Google_Pay_Logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/MasterCard_Logo.svg" alt="MasterCard_Logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Nuvei_Organization_logo.png" alt="Nuvei_Organization_logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/pay-checkout.png" alt="checkout" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/PayPal_Logo2014.png" alt="" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Skrill_logo.svg" alt="Skrill_logo" >
|
||||
</div>
|
||||
<div class="pm-item">
|
||||
<img src="../assets/images/backgrounds/icon/payment-logo/Visa_Inc._logo.svg" alt="Visa_Inc" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,189 @@
|
||||
<!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>company_news 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="company-news">
|
||||
<!-- 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">Company <img src="../assets/images/backgrounds/icon/aflidate-1.png" class="heading-icon floating-img"> <span class="">News </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">
|
||||
Discover how AIFO is making headlines. Browse our latest media mentions and stories from around the trading world.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="hero-buttons center-buttons fade-in">
|
||||
<a href="#" class="btn btn-start-challenge">Company News Detail Page</a>
|
||||
<a href="#" class="btn btn-free-trial">
|
||||
Outside News
|
||||
<span class="btn-arrow">›</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ List -->
|
||||
<section class="faq-section" id="faq">
|
||||
<div class="container">
|
||||
<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"><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 long does withdrawal take?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>We process all withdrawal requests within 24 hours. In most cases, funds arrive in your account within a few hours after submission.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">What is the profit split ratio?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>We offer the industry's highest profit split, up to 90%. The vast majority of your trading profits belong to you.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">Can I use Expert Advisors (EAs)?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>Yes, we allow the use of Expert Advisors for automated trading. You can unlock EA trading features by purchasing add-ons.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">Can I retry after failing a challenge?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>Absolutely! We understand that trading requires learning and adaptation. You can purchase a new challenge anytime to continue your journey. We also offer discounts for repeat challengers.</p><a href="#" class="see-more-link">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">What are the trading restrictions?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>Our rules are very flexible. We allow holding overnight, weekend trading, and news trading. The main restrictions are maximum drawdown and daily drawdown limits, which protect both your capital and ours.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</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>
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,842 @@
|
||||
<!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>company_news_sub 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="company-news-sub">
|
||||
<div class="main-wrapper"><!-- Navbar -->
|
||||
|
||||
<div class="container content-area ">
|
||||
<div class="row"><!-- Left Column: Article -->
|
||||
<div class="col-lg-8"><!-- Breadcrumb -->
|
||||
<div class="breadcrumb-nav">
|
||||
<div class="back-button"><span class="icon iconfont icon-arrowleft"></span></div>
|
||||
<span class="breadcrumb-text">All Posts</span>
|
||||
</div><!-- Hero Image -->
|
||||
<div class="article-hero">
|
||||
<img src="../assets/images/demo/article_pic.png">
|
||||
</div><!-- Article Card -->
|
||||
<div class="article-card">
|
||||
<div class="article_content" id="article_content">
|
||||
<h1 class="article-title" id="article-title">Building Global Trading Powerhouse – Completes Acquisition of OANDA from CVC</h1>
|
||||
<div class="article-meta">
|
||||
<span id="publish-date">Published on Dec 16th</span>
|
||||
<span id="update-date">Updated on Dec 18th</span>
|
||||
</div>
|
||||
<div class="article-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
|
||||
<p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
|
||||
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- Tags -->
|
||||
<div class="article-tags">
|
||||
<div class="tag-pill">
|
||||
Key word
|
||||
</div>
|
||||
<div class="tag-pill">
|
||||
Key word
|
||||
</div>
|
||||
<div class="tag-pill">
|
||||
Key word
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Right Column: Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<div class="sidebar-card"><!-- Newsletter -->
|
||||
<div class="newsletter-module">
|
||||
<div class="newsletter-header">
|
||||
<div class="newsletter-icon">
|
||||
|
||||
<img src="../assets/images/backgrounds/icon/newsletter.png">
|
||||
</div>
|
||||
<div class="newsletter-title" id="newsletter-title">
|
||||
Stay Up-To-Date With Our Newsletter
|
||||
</div>
|
||||
</div><input type="email" class="newsletter-input" id="email-input" placeholder="Email"> <button class="btn-subscribe" id="subscribe-btn">Subscribe</button>
|
||||
<div class="subscribe-message" id="subscribe-message"></div>
|
||||
</div><!-- Recommended Articles -->
|
||||
<div class="recommended-item">
|
||||
<div class="article_thumbnail">
|
||||
<img src="../assets/images/demo/article_demo.png">
|
||||
</div>
|
||||
<div class="recommended-title">
|
||||
Torem ipsum
|
||||
</div>
|
||||
<div class="recommended-excerpt">
|
||||
Torem ipsum dolor sit amet, consectetur adipiscing elit. Eti…
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommended-item">
|
||||
<div class="article_thumbnail">
|
||||
<img src="../assets/images/demo/article_demo.png">
|
||||
</div>
|
||||
<div class="recommended-title">
|
||||
Torem ipsum
|
||||
</div>
|
||||
<div class="recommended-excerpt">
|
||||
Torem ipsum dolor sit amet, consectetur adipiscing elit. Eti…
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommended-item">
|
||||
<div class="article_thumbnail">
|
||||
<img src="../assets/images/demo/article_demo.png">
|
||||
</div>
|
||||
<div class="recommended-title">
|
||||
Torem ipsum
|
||||
</div>
|
||||
<div class="recommended-excerpt">
|
||||
Torem ipsum dolor sit amet, consectetur adipiscing elit. Eti…
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<a href="#" class="btn btn-start-challenge d-flex 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;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* ========== 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);
|
||||
|
||||
/* =========================
|
||||
Growth carousel: basic translateX carousel
|
||||
autoplay + controls + pause on hover
|
||||
========================= */
|
||||
// function initGrowthCarousel(){
|
||||
// const $wrap = $('#growthTrack');
|
||||
// let idx = 0;
|
||||
// let autoplay = true;
|
||||
// let timer = null;
|
||||
|
||||
// function update(){
|
||||
// const $items = $wrap.children();
|
||||
// if(!$items.length) return;
|
||||
// const w = $items.first().outerWidth(true);
|
||||
// $wrap.css('transform', `translateX(${-idx * w}px)`);
|
||||
// // update dots styling (if using growthDots)
|
||||
// $('#growthDots button').removeClass('active');
|
||||
// $('#growthDots button[data-i="'+idx+'"]').addClass('active');
|
||||
// }
|
||||
|
||||
// function next(){
|
||||
// idx = (idx + 1) % $wrap.children().length;
|
||||
// update();
|
||||
// }
|
||||
// function prev(){
|
||||
// idx = (idx - 1 + $wrap.children().length) % $wrap.children().length;
|
||||
// update();
|
||||
// }
|
||||
|
||||
// $('#growthNext').off('click').on('click', ()=>{ autoplay=false; next(); });
|
||||
// $('#growthPrev').off('click').on('click', ()=>{ autoplay=false; prev(); });
|
||||
// $('#growthDots').on('click','button', function(){ autoplay=false; idx = Number($(this).data('i')); update(); });
|
||||
|
||||
// function startLoop(){
|
||||
// if(timer) clearInterval(timer);
|
||||
// timer = setInterval(()=>{ if(autoplay) next(); }, 3500);
|
||||
// }
|
||||
// startLoop();
|
||||
|
||||
// $wrap.on('mouseenter touchstart', ()=> autoplay=false);
|
||||
// $wrap.on('mouseleave touchend', ()=> autoplay=true);
|
||||
// }
|
||||
|
||||
/* =========================
|
||||
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
|
||||
=========================================================== */
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
// new Carousel({
|
||||
// container: ".carousel-container-1",
|
||||
// prev: "growthPrev",
|
||||
// next: "growthNext",
|
||||
// dots: ".dots"
|
||||
// });
|
||||
|
||||
const carousel = new Carousel({
|
||||
container: ".carousel-container-1",
|
||||
prev: "growthPrev",
|
||||
next: "growthNext",
|
||||
dots: ".dots"
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
carousel.goTo(1);
|
||||
}, 50);
|
||||
|
||||
|
||||
|
||||
setupFadeInObserver(".carousel-item");
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
$(function(){
|
||||
|
||||
const $track = $("#track");
|
||||
const $viewport = $(".carousel-viewport");
|
||||
const $indicators = $("#indicators");
|
||||
const $btnPrev = $("#btnPrev");
|
||||
const $btnNext = $("#btnNext");
|
||||
|
||||
// store original cards data (from DOM at load)
|
||||
let $originalCards = $track.children(".carousel-card").toArray().map(el => $(el).clone(true));
|
||||
let originalCount = $originalCards.length;
|
||||
|
||||
|
||||
let visibleCount = getVisibleCount();
|
||||
let index = 0; // Start from 0, no need to clone cards
|
||||
let animating = false;
|
||||
let cardW = null;
|
||||
let gap = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--card-gap')) || 20;
|
||||
|
||||
// Swipe related variables
|
||||
let isMobile = window.innerWidth <= 768;
|
||||
let swipeStartTime = 0;
|
||||
let swipeMinDistance = 50; // Minimum swipe distance threshold
|
||||
let swipeMinVelocity = 0.3; // Minimum swipe velocity (pixels/millisecond)
|
||||
|
||||
function getVisibleCount(){
|
||||
return window.innerWidth <= 768 ? 1 : 4;
|
||||
}
|
||||
|
||||
function updateDeviceSettings() {
|
||||
isMobile = window.innerWidth <= 768;
|
||||
// Update swipe parameters
|
||||
if (isMobile) {
|
||||
swipeMinDistance = cardW * 0.2; // Mobile: 20% of card width
|
||||
swipeMinVelocity = 0.3;
|
||||
} else {
|
||||
// PC doesn't use touch swipe, set threshold to maximum
|
||||
swipeMinDistance = 9999; // Maximum value to ensure it won't be triggered
|
||||
swipeMinVelocity = 9999;
|
||||
}
|
||||
}
|
||||
|
||||
function buildTrack(){
|
||||
// empty track and indicators
|
||||
$track.empty();
|
||||
$indicators.empty();
|
||||
|
||||
visibleCount = getVisibleCount();
|
||||
|
||||
// No longer add cloned cards, only show original cards
|
||||
$originalCards.forEach($el => $track.append($el.clone(true)));
|
||||
|
||||
// build indicators — one per original card
|
||||
|
||||
console.log(originalCount);
|
||||
for(let i=0;i<originalCount-visibleCount;i++){
|
||||
console.log(i);
|
||||
$indicators.append(`<div class="ind" data-i="${i}"></div>`);
|
||||
}
|
||||
|
||||
// set starting index to 0
|
||||
index = 0;
|
||||
|
||||
// compute cardW (outerWidth including gap)
|
||||
cardW = $(".carousel-card").outerWidth(true);
|
||||
|
||||
// Update device settings
|
||||
updateDeviceSettings();
|
||||
|
||||
// position track at initial
|
||||
$track.css({ transform: `translateX(${-index * cardW}px)` , transition: 'none' });
|
||||
|
||||
// small delay to ensure no animation on first paint
|
||||
setTimeout(()=> $track.css('transition','transform .45s ease'), 20);
|
||||
|
||||
updateDots();
|
||||
updateButtonState(); // Update button state
|
||||
}
|
||||
|
||||
function updateDots(){
|
||||
$indicators.find(".ind").removeClass("active");
|
||||
$indicators.find(`.ind[data-i="${index}"]`).addClass("active");
|
||||
}
|
||||
|
||||
function updateButtonState() {
|
||||
// Update button state: disable prev button on first card, disable next button on last card
|
||||
if (index <= 0) {
|
||||
$btnPrev.addClass("disabled").prop("disabled", true);
|
||||
} else {
|
||||
$btnPrev.removeClass("disabled").prop("disabled", false);
|
||||
}
|
||||
|
||||
if (index >= originalCount - visibleCount) {
|
||||
$btnNext.addClass("disabled").prop("disabled", true);
|
||||
} else {
|
||||
$btnNext.removeClass("disabled").prop("disabled", false);
|
||||
}
|
||||
}
|
||||
|
||||
function slideTo(idx, animate=true){
|
||||
if(animating) return;
|
||||
|
||||
// 检查边界
|
||||
const maxIndex = originalCount - visibleCount;
|
||||
const minIndex = 0;
|
||||
|
||||
// Limit index range
|
||||
let targetIndex = Math.max(minIndex, Math.min(idx, maxIndex));
|
||||
|
||||
// If already at boundary, don't execute animation
|
||||
if (targetIndex === index && animate) return;
|
||||
|
||||
animating = true;
|
||||
$track.css('transition', animate ? 'transform .45s ease' : 'none');
|
||||
$track.css('transform', `translateX(${-targetIndex * cardW}px)`);
|
||||
index = targetIndex;
|
||||
|
||||
// Update state
|
||||
setTimeout(()=>{
|
||||
updateDots();
|
||||
updateButtonState();
|
||||
animating = false;
|
||||
}, animate ? 500 : 20);
|
||||
}
|
||||
|
||||
function next(){
|
||||
// Check if reached last
|
||||
if (index >= originalCount - visibleCount) return;
|
||||
slideTo(index + 1, true);
|
||||
}
|
||||
|
||||
function prev(){
|
||||
// Check if reached first
|
||||
if (index <= 0) return;
|
||||
slideTo(index - 1, true);
|
||||
}
|
||||
|
||||
// dots click
|
||||
$indicators.on('click', '.ind', function(){
|
||||
const target = Number($(this).attr('data-i')); // 0..originalCount-1
|
||||
slideTo(target, true);
|
||||
});
|
||||
|
||||
// arrows - add check
|
||||
$btnNext.on('click', function(){
|
||||
if ($(this).hasClass("disabled")) return;
|
||||
next();
|
||||
});
|
||||
|
||||
$btnPrev.on('click', function(){
|
||||
if ($(this).hasClass("disabled")) return;
|
||||
prev();
|
||||
});
|
||||
|
||||
/* ========= 移动端触摸滑动效果 ========= */
|
||||
// 只在移动端绑定触摸事件
|
||||
if (window.innerWidth <= 768) {
|
||||
initMobileTouchEvents();
|
||||
}
|
||||
|
||||
function initMobileTouchEvents() {
|
||||
let pointerDown = false;
|
||||
let startX = 0;
|
||||
let startTranslate = 0;
|
||||
let moved = 0;
|
||||
let swipeEndTime = 0;
|
||||
let velocity = 0;
|
||||
let currentExactPosition = 0;
|
||||
let maxTranslate = 0;
|
||||
let minTranslate = 0;
|
||||
|
||||
// helper get current translateX (number)
|
||||
function currentTranslate(){
|
||||
const m = $track.css('transform');
|
||||
if(!m || m === 'none') return 0;
|
||||
const arr = m.split(',');
|
||||
return parseFloat(arr[arr.length-1]);
|
||||
}
|
||||
|
||||
// pointer start (仅触摸)
|
||||
$track.on('touchstart', function(e){
|
||||
if(animating) return;
|
||||
pointerDown = true;
|
||||
startX = e.originalEvent.touches[0].clientX;
|
||||
startTranslate = currentTranslate();
|
||||
currentExactPosition = startTranslate;
|
||||
moved = 0;
|
||||
velocity = 0;
|
||||
swipeStartTime = Date.now();
|
||||
|
||||
// 计算边界
|
||||
maxTranslate = 0; // 最左边，对应第一张
|
||||
minTranslate = -(originalCount - visibleCount) * cardW; // 最右边，对应最后一张
|
||||
|
||||
// disable transition while dragging
|
||||
$track.css('transition','none');
|
||||
$('.carousel-card').addClass('grabbing');
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 移动事件
|
||||
$(window).on('touchmove', function(e){
|
||||
if(!pointerDown) return;
|
||||
const clientX = e.originalEvent.touches[0].clientX;
|
||||
const dx = clientX - startX;
|
||||
moved = dx;
|
||||
|
||||
// 计算精确位置，并限制在边界内
|
||||
let targetPosition = startTranslate + dx;
|
||||
|
||||
// 添加边界阻尼效果
|
||||
if (targetPosition > maxTranslate) {
|
||||
// 超出左边边界，添加阻尼效果
|
||||
const overshoot = targetPosition - maxTranslate;
|
||||
targetPosition = maxTranslate + overshoot * 0.3;
|
||||
} else if (targetPosition < minTranslate) {
|
||||
// 超出右边边界，添加阻尼效果
|
||||
const overshoot = targetPosition - minTranslate;
|
||||
targetPosition = minTranslate + overshoot * 0.3;
|
||||
}
|
||||
|
||||
currentExactPosition = targetPosition;
|
||||
|
||||
// 应用移动效果
|
||||
$track.css('transform', `translateX(${currentExactPosition}px)`);
|
||||
});
|
||||
|
||||
// 结束事件
|
||||
$(window).on('touchend touchcancel', function(e){
|
||||
if(!pointerDown) return;
|
||||
|
||||
swipeEndTime = Date.now();
|
||||
const swipeDuration = swipeEndTime - swipeStartTime;
|
||||
|
||||
// 计算滑动速度
|
||||
if (swipeDuration > 0) {
|
||||
velocity = Math.abs(moved) / swipeDuration;
|
||||
}
|
||||
|
||||
pointerDown = false;
|
||||
$('.carousel-card').removeClass('grabbing');
|
||||
|
||||
// 检查边界
|
||||
const atLeftBoundary = currentExactPosition >= maxTranslate - 10;
|
||||
const atRightBoundary = currentExactPosition <= minTranslate + 10;
|
||||
|
||||
if (atLeftBoundary || atRightBoundary) {
|
||||
// 如果在边界附近，直接回到边界
|
||||
if (atLeftBoundary) {
|
||||
slideTo(0, true);
|
||||
} else {
|
||||
slideTo(originalCount - visibleCount, true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 移动端滑动结束处理
|
||||
handleMobileSwipeEnd();
|
||||
});
|
||||
}
|
||||
|
||||
// 移动端滑动结束处理
|
||||
function handleMobileSwipeEnd() {
|
||||
const absMoved = Math.abs(moved);
|
||||
const swipeDirection = moved < 0 ? 1 : -1; // 1: 向左滑动, -1: 向右滑动
|
||||
|
||||
let shouldSwitch = false;
|
||||
|
||||
// 判断是否应该切换（基于距离或速度）
|
||||
// 移动端：每次只滑动1张，需要明显的滑动距离
|
||||
if (absMoved > swipeMinDistance) {
|
||||
shouldSwitch = true;
|
||||
} else if (velocity > swipeMinVelocity && absMoved > swipeMinDistance * 0.5) {
|
||||
shouldSwitch = true;
|
||||
}
|
||||
|
||||
if (shouldSwitch) {
|
||||
// 移动端：每次只滑动1张图片
|
||||
if (swipeDirection === 1) {
|
||||
// 向左滑动，显示下一张（只滑动1张）
|
||||
next();
|
||||
} else if (swipeDirection === -1) {
|
||||
// 向右滑动，显示上一张（只滑动1张）
|
||||
prev();
|
||||
}
|
||||
} else {
|
||||
// 滑动距离不足，停留在当前位置
|
||||
slideTo(index, true);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========= PC端鼠标拖动效果 ========= */
|
||||
// PC端只保留鼠标点击按钮功能，不绑定拖动事件
|
||||
|
||||
/* ========== resize handling: rebuild if visibleCount changes ========== */
|
||||
let resizeTimer = null;
|
||||
$(window).on('resize', function(){
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function(){
|
||||
const newVisible = getVisibleCount();
|
||||
|
||||
// 移除旧的触摸事件
|
||||
$track.off('touchstart');
|
||||
$(window).off('touchmove touchend touchcancel');
|
||||
|
||||
if(newVisible !== visibleCount){
|
||||
// rebuild track
|
||||
// restore original cards array from clones
|
||||
$track.empty();
|
||||
$originalCards.forEach($el => $track.append($el.clone(true)));
|
||||
// reassign originalCards (fresh clones)
|
||||
$originalCards = $track.children(".carousel-card").toArray().map(el => $(el).clone(true));
|
||||
originalCount = $originalCards.length;
|
||||
buildTrack();
|
||||
} else {
|
||||
// just recompute cardW and set immediate position
|
||||
cardW = $(".carousel-card").outerWidth(true);
|
||||
updateDeviceSettings(); // 更新设备设置
|
||||
$track.css('transition','none');
|
||||
$track.css('transform', `translateX(${-index * cardW}px)`);
|
||||
setTimeout(()=> $track.css('transition','transform .45s ease'), 20);
|
||||
}
|
||||
|
||||
// 根据新的屏幕大小重新绑定触摸事件
|
||||
if (window.innerWidth <= 768) {
|
||||
initMobileTouchEvents();
|
||||
}
|
||||
}, 120);
|
||||
});
|
||||
|
||||
/**************** INIT ****************/
|
||||
let $initial = $track.children(".carousel-card").toArray().map(el=>$(el).clone(true));
|
||||
$originalCards = $initial.slice(); // store original clones
|
||||
originalCount = $originalCards.length;
|
||||
buildTrack();
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,283 @@
|
||||
<!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>contact page</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>
|
||||
.info-block .media-nav-link {
|
||||
padding: 0 .3rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="aifo-bg-primary">
|
||||
<div id="nav-container"></div>
|
||||
|
||||
<main class="main" id="contact">
|
||||
|
||||
<div class="academy-block-1">
|
||||
<div class="contact-page">
|
||||
<div class="container contact-wrap">
|
||||
<div class="row align-items-start d-flex justify-content-between">
|
||||
<div class="col-lg-5 col-md-6 info-column">
|
||||
<div class="title-wrapper">
|
||||
<h1 class="main-title">
|
||||
<span class="line1" id="contact-line1">Contact</span>
|
||||
<span class="line2" id="contact-line2">Us <img src="../assets/images/backgrounds/icon/contact-icon.svg" class="heading-icon floating-img"></span>
|
||||
|
||||
</h1>
|
||||
<!-- <div class="title-icon">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="contact-details">
|
||||
<p><strong>Email:</strong> <a href="mailto:support@AIFO.com" id="email-link">support@AIFO.com</a></p>
|
||||
<p><strong>Landline Number:</strong> <a href="tel:+35725255160" id="phone-link">+35725255160</a></p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h3>Business Hours</h3>
|
||||
<p id="business-hours-text">We're just one click away You may contact us 24/7 via Email or Live Chat.</p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h3>Address</h3>
|
||||
<p id="address-text">Flat/RM A, 12/F ZJ 300,300 Lockhart Road, Wan Chai Hong Kong</p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h3>Follow Us</h3>
|
||||
<div class="social-icons">
|
||||
<ul class="nav social">
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box discord"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box telegram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box x"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank"><i class="icon-media-box youtu"></i></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank"> <i class="icon-media-box linkedin"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <a href="#" class="social-icon" aria-label="Facebook">
|
||||
<i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-x-twitter"></i>
|
||||
</a> <a href="#" class="social-icon" aria-label="Instagram">
|
||||
<i class="fab fa-instagram"></i></a>
|
||||
<a href="#" class="social-icon" aria-label="YouTube">
|
||||
<i class="fab fa-youtube"></i></a>
|
||||
<a href="#" class="social-icon" aria-label="LinkedIn">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-6 contact-form-ringht">
|
||||
<div class="form-card">
|
||||
<h2 id="form-title">Send Us a Message!</h2>
|
||||
<p class="form-description" id="form-description">If you have any questions and need our assistance, kindly submit a message via the form. One of our support agents will get back to you as soon as possible!</p>
|
||||
<div class="success-hint" id="success-message"><span class="success-icon">!</span> <span class="success-text">Your message has sent successfully!</span>
|
||||
</div>
|
||||
<form id="contact-form" novalidate>
|
||||
<div class="form-group"><label for="name">Your fullname</label> <input type="text" class="form-control" id="name" placeholder="Enter your name" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your name.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group"><label for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Enter your email" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email address.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group"><label for="subject">Subject</label> <input type="text" class="form-control" id="subject" placeholder="Enter your email" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a subject.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group"><label for="message">Message</label> <textarea class="form-control" id="message" placeholder="Message" required></textarea>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your message.
|
||||
</div>
|
||||
</div><button type="submit" class="btn btn-submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="section-10" class="slice slice-lg" data-delimiter="1">
|
||||
<div class="bg_light">
|
||||
<div class="container">
|
||||
<div class="mb-md text-center fade-in">
|
||||
<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">
|
||||
<a href="#" class="btn btn-start-challenge"><img src="../assets/images/backgrounds/btn-icon-1.png" alt="Funded Trading" class="floating-img"> Join Discord</a>
|
||||
<a href="#" class="btn btn-free-trial"><img src="../assets/images/backgrounds/btn-icon-2.png" alt="Funded Trading" class="floating-img">
|
||||
Join Telegram
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
$(document).ready(function() {
|
||||
const defaultConfig = {
|
||||
contact_title: "Contact",
|
||||
contact_title_2: "Us",
|
||||
email_address: "support@AIFO.com",
|
||||
phone_number: "+35725255160",
|
||||
business_hours_text: "We're just one click away You may contact us 24/7 via Email or Live Chat.",
|
||||
address_text: "Flat/RM A, 12/F ZJ 300,300 Lockhart Road, Wan Chai Hong Kong",
|
||||
form_title: "Send Us a Message!",
|
||||
form_description: "If you have any questions and need our assistance, kindly submit a message via the form. One of our support agents will get back to you as soon as possible!"
|
||||
};
|
||||
|
||||
async function onConfigChange(config) {
|
||||
$('#contact-line1').text(config.contact_title || defaultConfig.contact_title);
|
||||
$('#contact-line2').text(config.contact_title_2 || defaultConfig.contact_title_2);
|
||||
|
||||
const emailAddr = config.email_address || defaultConfig.email_address;
|
||||
$('#email-link').text(emailAddr).attr('href', 'mailto:' + emailAddr);
|
||||
|
||||
const phoneNum = config.phone_number || defaultConfig.phone_number;
|
||||
$('#phone-link').text(phoneNum).attr('href', 'tel:' + phoneNum);
|
||||
|
||||
$('#business-hours-text').text(config.business_hours_text || defaultConfig.business_hours_text);
|
||||
$('#address-text').text(config.address_text || defaultConfig.address_text);
|
||||
$('#form-title').text(config.form_title || defaultConfig.form_title);
|
||||
$('#form-description').text(config.form_description || defaultConfig.form_description);
|
||||
}
|
||||
|
||||
function mapToCapabilities() {
|
||||
return {
|
||||
recolorables: [],
|
||||
borderables: [],
|
||||
fontEditable: undefined,
|
||||
fontSizeable: undefined
|
||||
};
|
||||
}
|
||||
|
||||
function mapToEditPanelValues(config) {
|
||||
return new Map([
|
||||
["contact_title", config.contact_title || defaultConfig.contact_title],
|
||||
["contact_title_2", config.contact_title_2 || defaultConfig.contact_title_2],
|
||||
["email_address", config.email_address || defaultConfig.email_address],
|
||||
["phone_number", config.phone_number || defaultConfig.phone_number],
|
||||
["business_hours_text", config.business_hours_text || defaultConfig.business_hours_text],
|
||||
["address_text", config.address_text || defaultConfig.address_text],
|
||||
["form_title", config.form_title || defaultConfig.form_title],
|
||||
["form_description", config.form_description || defaultConfig.form_description]
|
||||
]);
|
||||
}
|
||||
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.init({
|
||||
defaultConfig: defaultConfig,
|
||||
onConfigChange: onConfigChange,
|
||||
mapToCapabilities: mapToCapabilities,
|
||||
mapToEditPanelValues: mapToEditPanelValues
|
||||
});
|
||||
}
|
||||
|
||||
$('#contact-form').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const form = this;
|
||||
|
||||
if (!form.checkValidity()) {
|
||||
$(form).addClass('was-validated');
|
||||
return;
|
||||
}
|
||||
|
||||
const $submitBtn = $(form).find('.btn-submit');
|
||||
$submitBtn.prop('disabled', true).text('Sending...');
|
||||
|
||||
setTimeout(function() {
|
||||
$(form).removeClass('was-validated');
|
||||
form.reset();
|
||||
|
||||
$('#success-message').addClass('show');
|
||||
|
||||
$submitBtn.prop('disabled', false).text('Submit');
|
||||
|
||||
setTimeout(function() {
|
||||
$('#success-message').removeClass('show');
|
||||
}, 5000);
|
||||
}, 800);
|
||||
});
|
||||
|
||||
$('.form-control').on('input', function() {
|
||||
if ($(this).closest('form').hasClass('was-validated')) {
|
||||
this.checkValidity();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
||||
+229
@@ -0,0 +1,229 @@
|
||||
<!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 Page</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" id="faq">
|
||||
<!-- banner start -->
|
||||
<div class="academy-block-1">
|
||||
|
||||
<div class="main-wrapper h-full">
|
||||
<!-- <div class="dot-pattern"></div>
|
||||
<div class="vignette"></div> -->
|
||||
<div class="title-section fade-in">
|
||||
<h1 class="page-title text-orange fade-in">Hi there！</h1>
|
||||
<h1 class="page-title title-desc d-flex justify-content-center">
|
||||
<span class="text-white fade-in">what do you need help with today?</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- search-section start -->
|
||||
<section class="search-section">
|
||||
<div class="search-wrapper">
|
||||
<form id="searchForm">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-12 mb-3 mb-md-0 search-contain">
|
||||
<div class="search-input-group">
|
||||
<svg class="svg-inline--fa fa-search fa-w-16 search-icon" style="opacity:0;"
|
||||
onload="this.style.opacity='1'" aria-hidden="true" data-prefix="fas" data-icon="search" role="img"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
|
||||
<path fill="currentColor"
|
||||
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">
|
||||
</path>
|
||||
</svg>
|
||||
<!-- <i class="fas fa-search search-icon"></i> -->
|
||||
<input type="text" class="search-input" id="searchInput" placeholder="Search for articles..."
|
||||
aria-label="Search">
|
||||
</div>
|
||||
<div class="search-btn">
|
||||
<button type="submit" class="btn btn-default btn-search" id="searchButton">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- search-section end -->
|
||||
</div>
|
||||
|
||||
<!-- Popular Searches -->
|
||||
<section class="popular-searches-section">
|
||||
<div class="container">
|
||||
|
||||
<div class="popular-searches fade-in">
|
||||
|
||||
<h2 class="fade-in">Most popular searches</h2>
|
||||
|
||||
<div class="search-list">
|
||||
|
||||
<a class="search-item fade-in" href="/faq/how-does-the-aifo-challenge-work">
|
||||
How does the AIFO challenge work?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in" href="/faq/profit-split-payout">
|
||||
How do I request a profit split (payout)?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in" href="/faq/withdrawal-processing-time">
|
||||
How long does it take to process a withdrawal?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in" href="/faq/disconnected-during-trade">
|
||||
I disconnected during a trade. What should I do?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in" href="/faq/contact-customer-support">
|
||||
How can I contact customer support?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in" href="/faq/profit-split-percentage">
|
||||
What is the profit split percentage?
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Categories Section -->
|
||||
<section class="categories-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-icon-wrapper fade-in">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/faq-icon-1.png"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="category-title fade-in">Why AIFO</h3>
|
||||
<p class="category-count fade-in">6 <span id="articlesSuffix1">Articles</span></p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-icon-wrapper fade-in">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/faq-icon-2.png"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="category-title fade-in">General</h3>
|
||||
<p class="category-count fade-in">6 <span id="articlesSuffix2">Articles</span></p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-icon-wrapper fade-in">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/faq-icon-3.png"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="category-title fade-in">Trading basics</h3>
|
||||
<p class="category-count fade-in">6 <span id="articlesSuffix3">Articles</span></p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-icon-wrapper fade-in">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/faq-icon-4.png"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="category-title fade-in">Trade rules</h3>
|
||||
<p class="category-count fade-in">6 <span id="articlesSuffix4">Articles</span></p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-icon-wrapper fade-in">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/faq-icon-5.png"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="category-title fade-in">Dashboard</h3>
|
||||
<p class="category-count fade-in">6 <span id="articlesSuffix5">Articles</span></p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-icon-wrapper fade-in">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/faq-icon-6.png"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="category-title fade-in">Log in</h3>
|
||||
<p class="category-count fade-in">6 <span id="articlesSuffix6">Articles</span></p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-icon-wrapper fade-in">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/faq-icon-7.png"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="category-title fade-in">Tech support</h3>
|
||||
<p class="category-count fade-in">6 <span id="articlesSuffix7">Articles</span></p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-icon-wrapper fade-in">
|
||||
<img class="lazy-img" src="../assets/images/backgrounds/icon/faq-icon-8.png"
|
||||
alt="AIFO preview thumbnail">
|
||||
</div>
|
||||
<h3 class="category-title fade-in">Refer and earn</h3>
|
||||
<p class="category-count fade-in">6 <span id="articlesSuffix8">Articles</span></p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,261 @@
|
||||
<!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 subdirectory Page</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" id="faq_subdirect">
|
||||
<!-- 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>
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<div class="breadcrumb-wrapper">
|
||||
<nav class="breadcrumb-custom"><a href="#" class="breadcrumb-link" id="allFaqLink">All FAQ</a> <span class="breadcrumb-separator">›</span> <span class="breadcrumb-current">FAQ Subdirectory</span>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- FAQ List -->
|
||||
<section class="faq-section ">
|
||||
<div class="container">
|
||||
<!-- Page Title -->
|
||||
<div class="page-title-wrapper">
|
||||
<h1 class="page-title" id="pageTitle">About AIFO</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">
|
||||
<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 long does withdrawal take?</span>
|
||||
|
||||
<div class="faq-icon-box">
|
||||
<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">
|
||||
<p>We process all withdrawal requests within 24 hours. In most cases, funds arrive in your account within a few hours after submission.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">What is the profit split ratio?</span>
|
||||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||||
</div></button>
|
||||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||||
<div class="faq-answer fade-in">
|
||||
<p>We offer the industry's highest profit split, up to 90%. The vast majority of your trading profits belong to you.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">Can I use Expert Advisors (EAs)?</span>
|
||||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||||
</div></button>
|
||||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||||
<div class="faq-answer fade-in">
|
||||
<p>Yes, we allow the use of Expert Advisors for automated trading. You can unlock EA trading features by purchasing add-ons.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">Can I retry after failing a challenge?</span>
|
||||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||||
</div></button>
|
||||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||||
<div class="faq-answer fade-in">
|
||||
<p>Absolutely! We understand that trading requires learning and adaptation. You can purchase a new challenge anytime to continue your journey. We also offer discounts for repeat challengers.</p><a href="#" class="see-more-link">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">What are the trading restrictions?</span>
|
||||
<div class="faq-icon-box"><span class="faq-icon">+</span>
|
||||
</div></button>
|
||||
<div class="faq-body" style="max-height: 0px; opacity: 0;">
|
||||
<div class="faq-answer fade-in">
|
||||
<p>Our rules are very flexible. We allow holding overnight, weekend trading, and news trading. The main restrictions are maximum drawdown and daily drawdown limits, which protect both your capital and ours.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Support Card -->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Search 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>
|
||||
(function ($) {
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
/* ===============================
|
||||
* FAQ Accordion
|
||||
* =============================== */
|
||||
$(document).on('click', '.faq-header', 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,
|
||||
'opacity': 0
|
||||
});
|
||||
|
||||
// Open clicked item if not active
|
||||
if (!isActive) {
|
||||
$item.addClass('active');
|
||||
$body.css({
|
||||
'max-height': '500px',
|
||||
'opacity': 1
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* ===============================
|
||||
* Feedback Carousel Controls
|
||||
* =============================== */
|
||||
$('#feedbackPrev').on('click', function () {
|
||||
if ($('#feedbackCarousel').length) {
|
||||
$('#feedbackCarousel').carousel('prev');
|
||||
updateCarouselButtons();
|
||||
}
|
||||
});
|
||||
|
||||
$('#feedbackNext').on('click', function () {
|
||||
if ($('#feedbackCarousel').length) {
|
||||
$('#feedbackCarousel').carousel('next');
|
||||
updateCarouselButtons();
|
||||
}
|
||||
});
|
||||
|
||||
$('#feedbackCarousel').on('slid.bs.carousel', function () {
|
||||
updateCarouselButtons();
|
||||
});
|
||||
|
||||
function updateCarouselButtons() {
|
||||
|
||||
var $carousel = $('#feedbackCarousel');
|
||||
if (!$carousel.length) return;
|
||||
|
||||
var $items = $carousel.find('.carousel-item');
|
||||
var activeIndex = $items.filter('.active').index();
|
||||
var totalItems = $items.length;
|
||||
|
||||
$('#feedbackPrev').prop('disabled', activeIndex <= 0);
|
||||
$('#feedbackNext').prop('disabled', activeIndex >= totalItems - 1);
|
||||
}
|
||||
|
||||
// Initialize carousel button states
|
||||
updateCarouselButtons();
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,468 @@
|
||||
<!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"><</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>
|
||||
<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>
|
||||
@@ -0,0 +1,414 @@
|
||||
<!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>Forgot password Page</title>
|
||||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/password.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
|
||||
|
||||
|
||||
<main class="auth-page " id="forgot-password">
|
||||
<!-- banner start -->
|
||||
|
||||
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<div class="logo-container">
|
||||
<a href="../index.html">
|
||||
<img src="../assets/images/brand/logo_1.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="auth-title" id="pageTitle">Forgot your password?</h1>
|
||||
<p class="auth-description" id="pageDescription">Enter your email address below, and we'll send you instructions to reset it.</p>
|
||||
<form id="forgotPasswordForm" novalidate>
|
||||
<div class="form-group"><label class="form-label" id="emailLabel">Email Address</label> <input type="email" class="form-control" id="emailInput" placeholder="Enter your email" required>
|
||||
<div class="invalid-feedback" id="emailError">
|
||||
Please enter a valid email address
|
||||
</div>
|
||||
</div><button type="submit" class="btn btn-primary" id="submitBtn"> <span id="submitText">Send reset instructions</span> </button>
|
||||
</form>
|
||||
<p class="signup-prompt"><span id="signupText">Not a member?</span>
|
||||
<a href="#" class="signup-link" id="signupLink" target="_blank" rel="noopener noreferrer">Create an account</a>
|
||||
</p>
|
||||
<a href="#" class="back-link" id="backLink" target="_blank" rel="noopener noreferrer">
|
||||
<span class="back-icon">
|
||||
<svg width="10" height="10" viewbox="0 0 10 10" fill="none"><path d="M6 1L2 5L6 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
<span id="backText">Back to Login</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
<script>
|
||||
// ====================== 配置管理 ======================
|
||||
const defaultConfig = {
|
||||
page_title: "Forgot your password?",
|
||||
page_description: "Enter your email address below, and we'll send you instructions to reset it.",
|
||||
email_label: "Email Address",
|
||||
email_placeholder: "Enter your email",
|
||||
submit_button_text: "Send reset instructions",
|
||||
signup_text: "Not a member?",
|
||||
signup_link_text: "Create an account",
|
||||
back_link_text: "Back to Login",
|
||||
primary_color: "#F98715",
|
||||
text_color: "#F9F9F9",
|
||||
background_color: "#0a0a0a",
|
||||
card_background: "rgba(20,20,20,0.92)",
|
||||
secondary_text_color: "rgba(249,249,249,0.72)"
|
||||
};
|
||||
|
||||
// ====================== AJAX函数 ======================
|
||||
function processPasswordReset(email, nonce) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 这里是测试用的模拟数据，实际使用时需要替换为真实的AJAX调用
|
||||
// 实际URL应该是：url: '<?php echo admin_url('admin-ajax.php'); ?>',
|
||||
|
||||
console.log('发送AJAX请求:', { email, nonce });
|
||||
|
||||
// 模拟AJAX延迟
|
||||
setTimeout(() => {
|
||||
// 测试数据 - 模拟不同类型的用户响应
|
||||
const testUsers = {
|
||||
'admin@aifo.com': {
|
||||
success: true,
|
||||
data: {
|
||||
message: 'Administrator password reset instructions sent. Security notifications have been logged.',
|
||||
user_data: {
|
||||
user_id: 1,
|
||||
email: 'admin@aifo.com',
|
||||
display_name: 'Admin User',
|
||||
user_type: 'admin',
|
||||
account_since: 'Jan 2023',
|
||||
is_affiliate: false,
|
||||
is_admin: true,
|
||||
is_premium: false
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
},
|
||||
'affiliate@aifo.com': {
|
||||
success: true,
|
||||
data: {
|
||||
message: 'Password reset instructions have been sent to your affiliate email. Check your inbox for special affiliate support.',
|
||||
user_data: {
|
||||
user_id: 2,
|
||||
email: 'affiliate@aifo.com',
|
||||
display_name: 'Affiliate Partner',
|
||||
user_type: 'affiliate',
|
||||
account_since: 'Mar 2023',
|
||||
is_affiliate: true,
|
||||
is_admin: false,
|
||||
is_premium: false,
|
||||
affiliate_code: 'AFF12345',
|
||||
affiliate_tier: 'Gold',
|
||||
affiliate_commission: '15%'
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
},
|
||||
'premium@aifo.com': {
|
||||
success: true,
|
||||
data: {
|
||||
message: 'Premium member reset instructions sent. Priority support is available if needed.',
|
||||
user_data: {
|
||||
user_id: 3,
|
||||
email: 'premium@aifo.com',
|
||||
display_name: 'Premium Member',
|
||||
user_type: 'premium',
|
||||
account_since: 'Jun 2023',
|
||||
is_affiliate: false,
|
||||
is_admin: false,
|
||||
is_premium: true,
|
||||
premium_expiry: 'Dec 2024'
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
},
|
||||
'user@example.com': {
|
||||
success: true,
|
||||
data: {
|
||||
message: 'Password reset instructions have been sent to your email. Please check your inbox.',
|
||||
user_data: {
|
||||
user_id: 4,
|
||||
email: 'user@example.com',
|
||||
display_name: 'Regular User',
|
||||
user_type: 'regular',
|
||||
account_since: 'Aug 2023',
|
||||
is_affiliate: false,
|
||||
is_admin: false,
|
||||
is_premium: false
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
},
|
||||
'notfound@example.com': {
|
||||
success: false,
|
||||
data: 'No account found with this email address'
|
||||
},
|
||||
'error@example.com': {
|
||||
success: false,
|
||||
data: 'Server error. Please try again later.'
|
||||
}
|
||||
};
|
||||
|
||||
const response = testUsers[email] || testUsers['user@example.com'];
|
||||
|
||||
if (response.success) {
|
||||
resolve(response.data);
|
||||
} else {
|
||||
reject(response.data);
|
||||
}
|
||||
}, 1500); // 模拟1.5秒网络延迟
|
||||
});
|
||||
}
|
||||
|
||||
// ====================== 工具函数 ======================
|
||||
function showMessage(type, message, duration = 4000) {
|
||||
const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
|
||||
const bgColor = type === 'success' ? 'rgba(76, 175, 80, 0.15)' : 'rgba(220, 53, 69, 0.15)';
|
||||
const borderColor = type === 'success' ? 'rgba(76, 175, 80, 0.3)' : 'rgba(220, 53, 69, 0.3)';
|
||||
const textColor = type === 'success' ? '#81c784' : '#e57373';
|
||||
|
||||
const $message = $('<div class="alert ' + alertClass + ' mt-3" role="alert" style="background: ' + bgColor + '; border: 1px solid ' + borderColor + '; color: ' + textColor + '; border-radius: 8px;">' + message + '</div>');
|
||||
|
||||
$('#forgotPasswordForm').after($message);
|
||||
|
||||
setTimeout(function() {
|
||||
$message.fadeOut(400, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, duration);
|
||||
}
|
||||
|
||||
function showUserTypeInfo(userData) {
|
||||
let typeText = '';
|
||||
let typeColor = '';
|
||||
let iconHtml = '';
|
||||
let detailsHtml = '';
|
||||
|
||||
// 根据用户类型设置不同的样式和内容
|
||||
switch(userData.user_type) {
|
||||
case 'affiliate':
|
||||
typeText = 'Affiliate User';
|
||||
typeColor = '#28a745';
|
||||
iconHtml = '<span style="background:' + typeColor + '; width:100%; height:100%; border-radius:50%; display:block;"></span>';
|
||||
|
||||
detailsHtml = '<div class="mt-1">';
|
||||
if (userData.affiliate_code) {
|
||||
detailsHtml += '<div>Code: ' + userData.affiliate_code + '</div>';
|
||||
}
|
||||
if (userData.affiliate_tier) {
|
||||
detailsHtml += '<div>Tier: ' + userData.affiliate_tier + '</div>';
|
||||
}
|
||||
if (userData.affiliate_commission) {
|
||||
detailsHtml += '<div>Commission: ' + userData.affiliate_commission + '</div>';
|
||||
}
|
||||
detailsHtml += '<div class="text-success">✓ Special affiliate instructions sent</div>';
|
||||
detailsHtml += '</div>';
|
||||
break;
|
||||
|
||||
case 'admin':
|
||||
typeText = 'Administrator';
|
||||
typeColor = '#dc3545';
|
||||
iconHtml = '<span style="background:' + typeColor + '; width:100%; height:100%; border-radius:50%; display:block;"></span>';
|
||||
detailsHtml = '<div class="mt-1 text-danger">Administrative security protocols applied</div>';
|
||||
break;
|
||||
|
||||
case 'premium':
|
||||
typeText = 'Premium User';
|
||||
typeColor = '#ffc107';
|
||||
iconHtml = '<span style="background:' + typeColor + '; width:100%; height:100%; border-radius:50%; display:block;"></span>';
|
||||
detailsHtml = '<div class="mt-1 text-warning">Premium member support activated</div>';
|
||||
if (userData.premium_expiry) {
|
||||
detailsHtml += '<div>Expires: ' + userData.premium_expiry + '</div>';
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
typeText = 'Regular User';
|
||||
typeColor = '#6c757d';
|
||||
iconHtml = '<span style="background:' + typeColor + '; width:100%; height:100%; border-radius:50%; display:block;"></span>';
|
||||
detailsHtml = '<div class="mt-1">Standard reset instructions sent</div>';
|
||||
}
|
||||
|
||||
// 添加注册时间
|
||||
if (userData.account_since) {
|
||||
detailsHtml += '<div class="mt-1">Member since ' + userData.account_since + '</div>';
|
||||
}
|
||||
|
||||
// 更新显示
|
||||
$('#userTypeIcon').html(iconHtml);
|
||||
$('#userTypeDisplay').html('<span style="color:' + typeColor + '">' + typeText + '</span>');
|
||||
$('#userDetails').html(detailsHtml);
|
||||
$('#userInfo').fadeIn();
|
||||
}
|
||||
|
||||
// ====================== 主逻辑 ======================
|
||||
$(document).ready(function() {
|
||||
// 初始化配置
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.init({
|
||||
defaultConfig: defaultConfig,
|
||||
onConfigChange: onConfigChange,
|
||||
mapToCapabilities: (config) => ({
|
||||
recolorables: [
|
||||
{
|
||||
get: () => config.primary_color || defaultConfig.primary_color,
|
||||
set: (value) => {
|
||||
config.primary_color = value;
|
||||
window.elementSdk.setConfig({ primary_color: value });
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 配置更新函数
|
||||
function onConfigChange(config) {
|
||||
const title = config.page_title || defaultConfig.page_title;
|
||||
const description = config.page_description || defaultConfig.page_description;
|
||||
const emailLabel = config.email_label || defaultConfig.email_label;
|
||||
const emailPlaceholder = config.email_placeholder || defaultConfig.email_placeholder;
|
||||
const submitText = config.submit_button_text || defaultConfig.submit_button_text;
|
||||
const signupText = config.signup_text || defaultConfig.signup_text;
|
||||
const signupLinkText = config.signup_link_text || defaultConfig.signup_link_text;
|
||||
const backText = config.back_link_text || defaultConfig.back_link_text;
|
||||
|
||||
document.getElementById('pageTitle').textContent = title;
|
||||
document.getElementById('pageDescription').textContent = description;
|
||||
document.getElementById('emailLabel').textContent = emailLabel;
|
||||
document.getElementById('emailInput').placeholder = emailPlaceholder;
|
||||
document.getElementById('submitText').textContent = submitText;
|
||||
document.getElementById('signupText').textContent = signupText;
|
||||
document.getElementById('signupLink').textContent = signupLinkText;
|
||||
document.getElementById('backText').textContent = backText;
|
||||
|
||||
const primaryColor = config.primary_color || defaultConfig.primary_color;
|
||||
document.querySelector('.btn-primary').style.background = primaryColor;
|
||||
document.querySelector('.signup-link').style.color = primaryColor;
|
||||
document.querySelector('.back-icon').style.background = primaryColor;
|
||||
}
|
||||
|
||||
// 初始化配置
|
||||
onConfigChange(defaultConfig);
|
||||
|
||||
// 表单提交处理
|
||||
$('#forgotPasswordForm').on('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const email = $('#emailInput').val().trim();
|
||||
const nonce = $('#nonce').val();
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
// 清除之前的错误状态
|
||||
$('#emailError').removeClass('show');
|
||||
$('#emailInput').removeClass('is-invalid');
|
||||
$('#userInfo').hide();
|
||||
|
||||
// 验证邮箱格式
|
||||
if (!email || !emailRegex.test(email)) {
|
||||
$('#emailInput').addClass('is-invalid');
|
||||
$('#emailError').addClass('show');
|
||||
return;
|
||||
}
|
||||
|
||||
// 禁用提交按钮并显示加载状态
|
||||
const $submitBtn = $('#submitBtn');
|
||||
const $submitText = $('#submitText');
|
||||
const originalText = $submitText.text();
|
||||
|
||||
$submitBtn.prop('disabled', true);
|
||||
$submitText.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...');
|
||||
|
||||
try {
|
||||
// 单次AJAX请求：检查用户并发送重置邮件
|
||||
const result = await processPasswordReset(email, nonce);
|
||||
|
||||
// 显示用户类型信息
|
||||
if (result.user_data) {
|
||||
showUserTypeInfo(result.user_data);
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
showMessage('success', result.message || 'Reset instructions sent! Please check your email.');
|
||||
|
||||
// 清空表单
|
||||
$('#emailInput').val('');
|
||||
|
||||
} catch (error) {
|
||||
// 显示错误消息
|
||||
showMessage('error', error || 'An error occurred. Please try again.');
|
||||
} finally {
|
||||
// 恢复按钮状态
|
||||
$submitBtn.prop('disabled', false);
|
||||
$submitText.text(originalText);
|
||||
}
|
||||
});
|
||||
|
||||
// 邮箱输入时清除错误状态
|
||||
$('#emailInput').on('input', function() {
|
||||
if ($(this).hasClass('is-invalid')) {
|
||||
$(this).removeClass('is-invalid');
|
||||
$('#emailError').removeClass('show');
|
||||
}
|
||||
$('#userInfo').hide();
|
||||
});
|
||||
|
||||
// 测试链接点击事件
|
||||
$('#signupLink').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
alert('Create account link clicked');
|
||||
});
|
||||
|
||||
$('#backLink').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
alert('Back to login link clicked');
|
||||
});
|
||||
|
||||
// 添加测试提示
|
||||
console.log('🔍 测试提示：尝试使用以下测试邮箱：');
|
||||
console.log('• admin@aifo.com - 管理员用户');
|
||||
console.log('• affiliate@aifo.com - Affiliate用户');
|
||||
console.log('• premium@aifo.com - Premium用户');
|
||||
console.log('• user@example.com - 普通用户');
|
||||
console.log('• notfound@example.com - 用户不存在');
|
||||
console.log('• error@example.com - 服务器错误');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+1338
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Payment Methods Module</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<style>
|
||||
/* Static layout — matches temp/底部栏 Frame1000008818 (no marquee scroll) */
|
||||
:root {
|
||||
--pm2-bg: #070400;
|
||||
--pm2-accent: #f98715;
|
||||
--pm2-text: #f9f9f9;
|
||||
--pm2-card-bg: rgba(255, 255, 255, 0.06);
|
||||
--pm2-card-border: rgba(255, 255, 255, 0.06);
|
||||
--pm2-card-empty-border: rgba(255, 255, 255, 0.08);
|
||||
--pm2-card-w: 126px;
|
||||
--pm2-card-h: 72px;
|
||||
--pm2-card-radius: 15px;
|
||||
--pm2-card-border-w: 1.286px;
|
||||
--pm2-gap: 16px;
|
||||
--pm2-scale: 1;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background: var(--pm2-bg);
|
||||
color: var(--pm2-text);
|
||||
}
|
||||
|
||||
.pm2-section {
|
||||
background: var(--pm2-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
padding: 60px 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.pm2-section {
|
||||
gap: 50px;
|
||||
padding: 80px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.pm2-section {
|
||||
padding: 80px 156px;
|
||||
}
|
||||
}
|
||||
|
||||
.pm2-title {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.75px;
|
||||
text-align: center;
|
||||
color: var(--pm2-text);
|
||||
}
|
||||
|
||||
.pm2-title-accent {
|
||||
color: var(--pm2-accent);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.pm2-title {
|
||||
font-size: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.pm2-title {
|
||||
font-size: 75px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.pm2-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--pm2-gap);
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pm2-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--pm2-gap);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pm2-card {
|
||||
width: var(--pm2-card-w);
|
||||
height: var(--pm2-card-h);
|
||||
border-radius: var(--pm2-card-radius);
|
||||
background: var(--pm2-card-bg);
|
||||
border: var(--pm2-card-border-w) solid var(--pm2-card-border);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pm2-card img,
|
||||
.pm2-card svg {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.pm2-card img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pm2-card__visa img {
|
||||
width: calc(86px * var(--pm2-scale));
|
||||
max-height: calc(28px * var(--pm2-scale));
|
||||
}
|
||||
|
||||
.pm2-card__mastercard img,
|
||||
.pm2-card__amex img {
|
||||
width: calc(66px * var(--pm2-scale));
|
||||
max-height: calc(66px * var(--pm2-scale));
|
||||
}
|
||||
|
||||
.pm2-card__amex img {
|
||||
width: calc(73px * var(--pm2-scale));
|
||||
}
|
||||
|
||||
.pm2-card__brand img {
|
||||
width: calc(42px * var(--pm2-scale));
|
||||
height: calc(42px * var(--pm2-scale));
|
||||
border-radius: calc(8px * var(--pm2-scale));
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.pm2-card__wallet img {
|
||||
max-width: 78%;
|
||||
max-height: 55%;
|
||||
}
|
||||
|
||||
.pm2-card__crypto img {
|
||||
width: calc(44px * var(--pm2-scale));
|
||||
height: calc(44px * var(--pm2-scale));
|
||||
image-rendering: auto;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Empty slots: border only, no fill — matches Frame8/Frame21 in Figma */
|
||||
.pm2-card--empty {
|
||||
background: transparent;
|
||||
border-color: var(--pm2-card-empty-border);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Tablet: hide decorative empty slots so logo rows fit */
|
||||
@media (max-width: 1023px) {
|
||||
.pm2-card--empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Mobile title & section spacing — match payout floors
|
||||
* (display-4 @2rem, py-5, mb-5 from theme.css ≤768px)
|
||||
*/
|
||||
@media (max-width: 768px) {
|
||||
.pm2-section {
|
||||
gap: 0;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.pm2-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: normal;
|
||||
margin: 0 0 3rem;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Mobile grid: single 2-column layout (rows use display:contents)
|
||||
*/
|
||||
@media (max-width: 639px) {
|
||||
:root {
|
||||
--pm2-gap: 12px;
|
||||
--pm2-card-radius: 12px;
|
||||
--pm2-card-border-w: 1px;
|
||||
--pm2-scale: 1;
|
||||
}
|
||||
|
||||
.pm2-rows {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 148px));
|
||||
justify-content: center;
|
||||
gap: var(--pm2-gap);
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.pm2-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.pm2-card {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 126 / 72;
|
||||
}
|
||||
|
||||
.pm2-card__visa img,
|
||||
.pm2-card__mastercard img,
|
||||
.pm2-card__amex img,
|
||||
.pm2-card__wallet img,
|
||||
.pm2-card__crypto img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 74%;
|
||||
max-height: 74%;
|
||||
}
|
||||
|
||||
.pm2-card__wallet img {
|
||||
max-width: 78%;
|
||||
max-height: 56%;
|
||||
}
|
||||
|
||||
.pm2-card__brand img {
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
max-width: 40%;
|
||||
max-height: 40%;
|
||||
border-radius: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 359px) {
|
||||
.pm2-rows {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="pm2-section" data-payment-methods-module id="payment-methods-module">
|
||||
<h2 class="pm2-title">
|
||||
<span>Payment </span><span class="pm2-title-accent">Methods</span>
|
||||
</h2>
|
||||
|
||||
<div class="pm2-rows">
|
||||
<!-- Row 1: blank, blank, Visa, MasterCard, AmEx, image-13, blank -->
|
||||
<div class="pm2-row">
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card__visa"><img src="/assets/images/payment-methods/visa.svg" alt="Visa" /></div>
|
||||
<div class="pm2-card pm2-card__mastercard"><img src="/assets/images/payment-methods/mastercard.svg" alt="MasterCard" /></div>
|
||||
<div class="pm2-card pm2-card__amex"><img src="/assets/images/payment-methods/amex.svg" alt="American Express" /></div>
|
||||
<div class="pm2-card pm2-card__brand"><img src="/assets/images/payment-methods/image-13.png" alt="" /></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: blank, blank, blank, Apple Pay, Google Pay, blank, blank, blank -->
|
||||
<div class="pm2-row">
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card__wallet"><img src="/assets/images/payment-methods/apple-pay.svg" alt="Apple Pay" /></div>
|
||||
<div class="pm2-card pm2-card__wallet"><img src="/assets/images/payment-methods/google-pay.svg" alt="Google Pay" /></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: blank, Bitcoin, Ethereum, Tether, USDC, blank, blank -->
|
||||
<div class="pm2-row">
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card__crypto"><img src="/assets/images/payment-methods/bitcoin.svg" alt="Bitcoin" /></div>
|
||||
<div class="pm2-card pm2-card__crypto"><img src="/assets/images/payment-methods/ethereum.svg" alt="Ethereum" /></div>
|
||||
<div class="pm2-card pm2-card__crypto"><img src="/assets/images/payment-methods/tether.svg" alt="Tether" /></div>
|
||||
<div class="pm2-card pm2-card__crypto"><img src="/assets/images/payment-methods/usdc.svg" alt="USDC" /></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
<div class="pm2-card pm2-card--empty" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,716 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>New User Promotion</title>
|
||||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||||
<link href="../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<style>
|
||||
#new-user-promo {
|
||||
--primary: #f08d1b;
|
||||
--text-main: #f8f8f8;
|
||||
--text-muted: rgba(255, 255, 255, 0.7);
|
||||
--line: rgba(255, 255, 255, 0.12);
|
||||
color: var(--text-main);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#new-user-promo::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 106px;
|
||||
left: -2vw;
|
||||
width: min(60vw, 555px);
|
||||
height: min(60vw, 555px);
|
||||
max-height: min(52vh, 485px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background: url("../assets/images/backgrounds/new-user-promo-corner-glow.png") no-repeat
|
||||
left top / cover;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding: 106px 18px 70px;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-hero {
|
||||
position: relative;
|
||||
/* min-height: calc(100vh - 130px); */
|
||||
/* max-height: 900px; */
|
||||
background: transparent;
|
||||
/* overflow: hidden; */
|
||||
padding: 80px 0px 100px;
|
||||
margin-bottom: 46px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-title {
|
||||
margin: 0;
|
||||
font-size: 48px;
|
||||
line-height: 1.5;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 移动端：标题下方居中金币图（桌面隐藏） */
|
||||
#new-user-promo .hero-coin-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-markets {
|
||||
margin: 0 0 10px;
|
||||
color: rgba(240, 141, 27, 0.9);
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-sub {
|
||||
margin: 14px 0 20px;
|
||||
color: #f2f2f2;
|
||||
font-size: 22px;
|
||||
line-height: 1.55;
|
||||
max-width: 476px;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-sub .hero-highlight {
|
||||
color: #f98715;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-visual {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -110px;
|
||||
width: 71%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-coin {
|
||||
position: absolute;
|
||||
right: -2%;
|
||||
top: -24%;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: url("../assets/images/backgrounds/new-user-hero-badge.png") no-repeat center / contain;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-note {
|
||||
margin: 18px 0 0;
|
||||
width: 100%;
|
||||
max-width: 636px;
|
||||
font-size: 12px;
|
||||
line-height: 1.9;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
#new-user-promo .hero-badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#new-user-promo .btn-promo {
|
||||
border: none;
|
||||
border-radius: 17px;
|
||||
padding: 10px 30px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: #f98715;
|
||||
|
||||
}
|
||||
|
||||
#new-user-promo .btn-promo:hover {
|
||||
background-color: #F9A215;
|
||||
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@keyframes promoFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
#new-user-promo .promo-section {
|
||||
margin-bottom: 48px;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-section--welcome {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 右侧竖条：约一屏高、垂直居中；左侧易与 PNG 黑底叠盖住 hero，用 mask + 混合模式透出下层 */
|
||||
#new-user-promo .promo-welcome-side-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc((100% - 100vw) / 2);
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
transform: translateY(-50%);
|
||||
width: min(82vw, 720px);
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
max-height: 100svh;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
background-image: url("../assets/images/backgrounds/new-user-promo-welcome-side-glow.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
background-size: auto 100%;
|
||||
mix-blend-mode: screen;
|
||||
|
||||
}
|
||||
|
||||
#new-user-promo .promo-section--welcome > h2,
|
||||
#new-user-promo .promo-section--welcome > p,
|
||||
#new-user-promo .promo-section--welcome > .offer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-title {
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
line-height: 1.08;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-title span {
|
||||
color: #f98715;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-desc {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
line-height: 1.55;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-note {
|
||||
margin: 70px auto 0;
|
||||
max-width: 813px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 1.9;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
#new-user-promo .offer {
|
||||
margin: 70px auto 0;
|
||||
max-width: 780px;
|
||||
border-radius: 14px;
|
||||
background-image: url("../assets/images/backgrounds/new-user-offer-bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 50px 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#new-user-promo .offer h3 {
|
||||
margin: 0;
|
||||
font-size: 45px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
#new-user-promo .offer p {
|
||||
margin: 0;
|
||||
color: #ffe1bc;
|
||||
}
|
||||
|
||||
#new-user-promo .claim-grid {
|
||||
margin: 20px auto 0;
|
||||
max-width: 800px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
#new-user-promo .claim-item {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(240, 141, 27, 0.3);
|
||||
min-height: 190px;
|
||||
padding: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#new-user-promo .claim-item:nth-child(1) {
|
||||
background-image: url("../assets/images/backgrounds/new-user-claim-01.png");
|
||||
}
|
||||
|
||||
#new-user-promo .claim-item:nth-child(2) {
|
||||
background-image: url("../assets/images/backgrounds/new-user-claim-02.png");
|
||||
}
|
||||
|
||||
#new-user-promo .claim-item:nth-child(3) {
|
||||
background-image: url("../assets/images/backgrounds/new-user-claim-03.png");
|
||||
}
|
||||
|
||||
#new-user-promo .claim-item:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: url("../assets/images/backgrounds/new-user-claim-arrow.png") no-repeat center / contain;
|
||||
}
|
||||
|
||||
#new-user-promo .claim-text {
|
||||
margin: 0;
|
||||
padding-top: 70px;
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
color: #bc9467;
|
||||
}
|
||||
|
||||
/* 步骤序号图：仅移动端在 clain-section 中展示，桌面用背景图内嵌数字 */
|
||||
#new-user-promo .claim-step-mark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#new-user-promo .btn-center {
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
#new-user-promo .tier-tabs {
|
||||
max-width: 420px;
|
||||
margin: 20px auto 18px;
|
||||
padding: 4px;
|
||||
border-radius: 999px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid var(--line);
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#new-user-promo .tier-btn {
|
||||
border: none;
|
||||
flex: 1;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
padding: 8px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#new-user-promo .tier-btn.is-active {
|
||||
background: var(--primary);
|
||||
color: #111;
|
||||
}
|
||||
|
||||
#new-user-promo .table-wrap {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#new-user-promo table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#new-user-promo th,
|
||||
#new-user-promo td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
padding: 11px 10px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#new-user-promo th:first-child,
|
||||
#new-user-promo td:first-child {
|
||||
text-align: left;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
#new-user-promo thead th {
|
||||
background: #1d1d1d;
|
||||
color: #ffc67f;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#new-user-promo .faq-grid {
|
||||
max-width: 880px;
|
||||
margin: 18px auto 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#new-user-promo .faq-question {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: #131313;
|
||||
padding: 11px 14px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#new-user-promo .clain-section{
|
||||
margin-top:130px;
|
||||
}
|
||||
|
||||
#new-user-promo .clain-section .promo-title{
|
||||
margin-bottom: 82px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#new-user-promo .hero-content {
|
||||
max-width: 90%;
|
||||
}
|
||||
#new-user-promo .hero-title {
|
||||
font-size: 46px;
|
||||
max-width: 100%;
|
||||
}
|
||||
#new-user-promo .hero-sub {
|
||||
font-size: 31px;
|
||||
}
|
||||
#new-user-promo .hero-visual {
|
||||
width: 52%;
|
||||
}
|
||||
#new-user-promo .hero-coin {
|
||||
width: 100%;
|
||||
right: 20%;
|
||||
top: 0;
|
||||
}
|
||||
#new-user-promo .hero-reflection {
|
||||
width: 74%;
|
||||
right: 0;
|
||||
}
|
||||
#new-user-promo::before {
|
||||
top: 94px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#new-user-promo::before {
|
||||
left: -3vw;
|
||||
width: min(71vw, 415px);
|
||||
height: min(71vw, 415px);
|
||||
max-height: min(48vh, 345px);
|
||||
}
|
||||
|
||||
#new-user-promo::before {
|
||||
/* top: 72px; */
|
||||
display: none;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-main {
|
||||
padding-top: 72px;
|
||||
}
|
||||
#new-user-promo .promo-hero {
|
||||
padding: 26px 18px 32px;
|
||||
min-height: 0;
|
||||
display: block;
|
||||
}
|
||||
#new-user-promo .hero-content {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#new-user-promo .hero-title {
|
||||
max-width: 100%;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
#new-user-promo .hero-coin-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: min(78vw, 300px);
|
||||
margin: 14px auto 4px;
|
||||
line-height: 0;
|
||||
}
|
||||
#new-user-promo .hero-coin-mobile img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: min(36vh, 240px);
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
#new-user-promo .hero-markets {
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#new-user-promo .hero-sub {
|
||||
font-size: 18px;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
#new-user-promo .hero-note {
|
||||
margin-top: 10px;
|
||||
max-width: 100%;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
/* 移动端用标题下居中图，隐藏侧/底绝对定位金币，避免重复与遮挡 */
|
||||
#new-user-promo .hero-visual {
|
||||
display: none;
|
||||
}
|
||||
#new-user-promo .promo-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
#new-user-promo .promo-welcome-side-glow {
|
||||
width: min(88vw, 540px);
|
||||
opacity: 0.95;
|
||||
}
|
||||
#new-user-promo .offer {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
#new-user-promo .offer h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
#new-user-promo .claim-grid,
|
||||
#new-user-promo .faq-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
/* 单列时默认去掉步骤间横向箭头；How to claim 在下方单独还原为向下箭头 */
|
||||
#new-user-promo .claim-item:not(:last-child)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#new-user-promo .clain-section {
|
||||
margin-top: 56px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
#new-user-promo .clain-section .promo-title {
|
||||
margin-bottom: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
#new-user-promo .clain-section .claim-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
max-width: min(360px, 92vw);
|
||||
margin: 8px auto 0;
|
||||
}
|
||||
#new-user-promo .clain-section .claim-item:nth-child(1),
|
||||
#new-user-promo .clain-section .claim-item:nth-child(2),
|
||||
#new-user-promo .clain-section .claim-item:nth-child(3) {
|
||||
background-image: url("../assets/images/backgrounds/new-user-claim-card-bg-mobile.png");
|
||||
}
|
||||
#new-user-promo .clain-section .claim-item {
|
||||
width: 100%;
|
||||
min-height: 152px;
|
||||
padding: 20px 18px 22px 22px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(180, 110, 45, 0.28);
|
||||
box-shadow:
|
||||
inset 0 2px 0 rgba(249, 135, 21, 0.55),
|
||||
inset 2px 0 0 rgba(249, 135, 21, 0.42),
|
||||
0 10px 28px rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
#new-user-promo .clain-section .claim-step-mark {
|
||||
display: block;
|
||||
width: clamp(76px, 22vw, 112px);
|
||||
height: auto;
|
||||
margin: 0 0 10px;
|
||||
align-self: flex-start;
|
||||
object-fit: contain;
|
||||
}
|
||||
#new-user-promo .clain-section .claim-text {
|
||||
padding-top: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #d4a574;
|
||||
text-align: left;
|
||||
}
|
||||
#new-user-promo .clain-section .claim-item:not(:last-child)::after {
|
||||
display: block;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: -28px;
|
||||
transform: translateX(-50%);
|
||||
width: 28px;
|
||||
height: 22px;
|
||||
background: url("../assets/images/backgrounds/new-user-claim-arrow-down.png") no-repeat center / contain;
|
||||
}
|
||||
#new-user-promo .clain-section .btn-center {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#new-user-promo .table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#new-user-promo .offer {
|
||||
margin: 40px auto 0;
|
||||
}
|
||||
#new-user-promo .promo-desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#new-user-promo .promo-note {
|
||||
margin: 60px auto 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="aifo-bg-primary" id="new-user-promo">
|
||||
<div id="nav-container"></div>
|
||||
|
||||
<main class="promo-main">
|
||||
<section class="promo-hero">
|
||||
<div class="hero-content">
|
||||
<p class="hero-markets">Prop trading · Forex · Crypto · XAU</p>
|
||||
<h1 class="hero-title">The AIFO New User<br>Promotion</h1>
|
||||
<div class="hero-coin-mobile" aria-hidden="true">
|
||||
<img src="../assets/images/backgrounds/new-user-hero-coin-mobile.png" alt="" width="720" height="720" decoding="async">
|
||||
</div>
|
||||
<p class="hero-sub">
|
||||
Join AIFO today and receive an exclusive, one-time <span class="hero-highlight">$50 USDT</span> bonus*
|
||||
</p>
|
||||
<a type="button" class="btn-promo">Claim Now</a>
|
||||
<p class="hero-note">
|
||||
*$50 USDT may be rewarded to eligible new users only after completing the tasks listed by AIFO via its website.
|
||||
This is a one-time offer and is not available to existing, returning, or duplicate users. All rewards are subject to review,
|
||||
verification, and approval by AIFO, and no payment is guaranteed.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero-visual" aria-hidden="true">
|
||||
<div class="hero-coin"></div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="promo-section promo-section--welcome">
|
||||
<div class="promo-welcome-side-glow" aria-hidden="true"></div>
|
||||
<h2 class="promo-title">Welcome <span>rewards</span></h2>
|
||||
<p class="promo-desc">By becoming an AIFO trader, you will receive a one-time exclusive
|
||||
payment of $50 USDT* paid directly to your account**</p>
|
||||
<div class="offer">
|
||||
<div>
|
||||
<h3>Limited-time offer</h3>
|
||||
<p>This offer is only available to the first <span class="hero-highlight">$50 USDT</span></p>
|
||||
</div>
|
||||
<a type="button" class="btn-promo">Claim now</a>
|
||||
</div>
|
||||
<p class="promo-note">
|
||||
*$50 USDT may be rewarded to eligible newupleting the tasks listed by AIFO via itsoffer and is
|
||||
not available to existing, returning, or **All rewards are subject to review, veriproval by AIFO, and no payment is
|
||||
guaranteed. Selected users may also receipriority features, and additional incentito develop.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="promo-section clain-section">
|
||||
<h2 class="promo-title">How to <span>claim</span></h2>
|
||||
<div class="claim-grid">
|
||||
<article class="claim-item">
|
||||
<img class="claim-step-mark" src="../assets/images/backgrounds/new-user-claim-step-01.png" width="120" height="120" alt="" decoding="async">
|
||||
<p class="claim-text">Register an account with AIFO</p>
|
||||
</article>
|
||||
<article class="claim-item">
|
||||
<img class="claim-step-mark" src="../assets/images/backgrounds/new-user-claim-step-02.png" width="120" height="120" alt="" decoding="async">
|
||||
<p class="claim-text">Purchase any challenge</p>
|
||||
</article>
|
||||
<article class="claim-item">
|
||||
<img class="claim-step-mark" src="../assets/images/backgrounds/new-user-claim-step-03.png" width="120" height="120" alt="" decoding="async">
|
||||
<p class="claim-text">Claim the $50 USDT
|
||||
reward within the
|
||||
AIFO rewards panel</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="btn-center"><button type="button" class="btn-promo">Join now</button></div>
|
||||
</section>
|
||||
|
||||
<section class="promo-section">
|
||||
<h2 class="promo-title">Choose your <span>challenge</span></h2>
|
||||
<p class="promo-desc">Compare account sizes and core requirements before purchasing your evaluation.</p>
|
||||
<div class="tier-tabs">
|
||||
<button type="button" class="tier-btn is-active">1-step</button>
|
||||
<button type="button" class="tier-btn">2-step</button>
|
||||
<button type="button" class="tier-btn">Instant</button>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account</th>
|
||||
<th>$10K</th>
|
||||
<th>$25K</th>
|
||||
<th>$50K</th>
|
||||
<th>$100K</th>
|
||||
<th>$200K</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Entry Fee</td><td>$79</td><td>$149</td><td>$239</td><td>$429</td><td>$849</td></tr>
|
||||
<tr><td>Profit Target</td><td>8%</td><td>8%</td><td>8%</td><td>8%</td><td>8%</td></tr>
|
||||
<tr><td>Daily Loss</td><td>5%</td><td>5%</td><td>5%</td><td>5%</td><td>5%</td></tr>
|
||||
<tr><td>Max Loss</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td></tr>
|
||||
<tr><td>Leverage</td><td>1:50</td><td>1:50</td><td>1:50</td><td>1:50</td><td>1:50</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="promo-section">
|
||||
<h2 class="promo-title">Frequently asked <span>questions</span></h2>
|
||||
<div class="faq-grid">
|
||||
<div class="faq-question">How long does this event remain active?</div>
|
||||
<div class="faq-question">Can existing users join new-user promotion?</div>
|
||||
<div class="faq-question">When are rewards activated after purchase?</div>
|
||||
<div class="faq-question">Can I upgrade challenge size during campaign?</div>
|
||||
<div class="faq-question">Is payout split changed in this period?</div>
|
||||
<div class="faq-question">Where can I check reward progress?</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="footer-container"></div>
|
||||
|
||||
<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>
|
||||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||||
<script src="../assets/js/theme.js"></script>
|
||||
<script src="/js/layout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+1766
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,280 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Scaling Plan</title>
|
||||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||||
<link href="../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/aifo-page-bg.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/promotion-activity-1.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="aifo-bg-primary" id="promotion-activity-1">
|
||||
<div id="nav-container"></div>
|
||||
|
||||
<main class="aifo-page-bg">
|
||||
<div class="promo-page">
|
||||
<section class="scaling-hero">
|
||||
<div class="scaling-hero__content">
|
||||
<div class="scaling-hero__intro">
|
||||
<h1 class="scaling-hero__title">Scale Up to Higher Rewards</h1>
|
||||
<p class="scaling-hero__desc">
|
||||
Grow your AIFO Account by 100% every 4 months and scale up to a maximum allocation of
|
||||
$2,000,000 across all your AIFO Accounts.
|
||||
</p>
|
||||
<div class="scaling-hero__actions">
|
||||
<a href="#" class="btn-promo">Start AIFO Challenge</a>
|
||||
<button type="button" class="btn-promo btn-promo--outline" id="growthPathOpen" aria-haspopup="dialog">
|
||||
Explore Growth Path
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<path d="M5 15L15 5M15 5H7M15 5V13" stroke="currentColor" stroke-width="1.67" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scaling-requirements">
|
||||
<h2 class="scaling-requirements__title">Requirements</h2>
|
||||
<ul class="scaling-requirements__list">
|
||||
<li class="scaling-requirements__item">
|
||||
<span class="scaling-requirements__check" aria-hidden="true">
|
||||
<svg viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2.5 6.2 5 8.7 9.5 3.3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
Reach Level 1 after 4 months without any breach or failure.
|
||||
</li>
|
||||
<li class="scaling-requirements__item">
|
||||
<span class="scaling-requirements__check" aria-hidden="true">
|
||||
<svg viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2.5 6.2 5 8.7 9.5 3.3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
At least 4 processed rewards
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scaling-hero__visual">
|
||||
<img
|
||||
src="../assets/images/promotion-activity-1/hero-scaling.png"
|
||||
alt="AIFO scaling plan illustration"
|
||||
width="510"
|
||||
height="560"
|
||||
decoding="async"
|
||||
>
|
||||
<div class="scaling-hero__badge">
|
||||
<span class="scaling-hero__badge-icon" aria-hidden="true">
|
||||
<img
|
||||
src="../assets/images/promotion-activity-1/logo-icon.png"
|
||||
alt=""
|
||||
width="22"
|
||||
height="22"
|
||||
decoding="async"
|
||||
>
|
||||
</span>
|
||||
<div>
|
||||
<p class="scaling-hero__badge-label">Scale your AIFO Account</p>
|
||||
<p class="scaling-hero__badge-value">$2,000,000 with 95% Reward</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="scaling-benefits">
|
||||
<div class="scaling-benefits__head">
|
||||
<h2 class="scaling-benefits__title">Benefits</h2>
|
||||
</div>
|
||||
<div class="scaling-benefits__grid">
|
||||
<article class="scaling-benefit-card">
|
||||
<span class="scaling-benefit-card__icon" aria-hidden="true">
|
||||
<img
|
||||
src="../assets/images/promotion-activity-1/bene-1.svg"
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
decoding="async"
|
||||
>
|
||||
</span>
|
||||
<h3 class="scaling-benefit-card__title">100% Boost</h3>
|
||||
<p class="scaling-benefit-card__desc">Increase your AIFO Account size by 100% every 4 months</p>
|
||||
</article>
|
||||
|
||||
<article class="scaling-benefit-card">
|
||||
<span class="scaling-benefit-card__icon" aria-hidden="true">
|
||||
<img
|
||||
src="../assets/images/promotion-activity-1/bene-2.svg"
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
decoding="async"
|
||||
>
|
||||
</span>
|
||||
<h3 class="scaling-benefit-card__title">Keep 95%</h3>
|
||||
<p class="scaling-benefit-card__desc">Get a 95% share of your simulated profits</p>
|
||||
</article>
|
||||
|
||||
<article class="scaling-benefit-card">
|
||||
<span class="scaling-benefit-card__icon" aria-hidden="true">
|
||||
<img
|
||||
src="../assets/images/promotion-activity-1/bene-3.svg"
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
decoding="async"
|
||||
>
|
||||
</span>
|
||||
<h3 class="scaling-benefit-card__title">$2,000,000 Account Growth</h3>
|
||||
<p class="scaling-benefit-card__desc">AIFO Account scales up to <br class="scaling-benefit-card__desc-br"> $2,000,000</p>
|
||||
</article>
|
||||
|
||||
<article class="scaling-benefit-card">
|
||||
<span class="scaling-benefit-card__icon" aria-hidden="true">
|
||||
<img
|
||||
src="../assets/images/promotion-activity-1/bene-4.svg"
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
decoding="async"
|
||||
>
|
||||
</span>
|
||||
<h3 class="scaling-benefit-card__title">Build Your Track Record</h3>
|
||||
<p class="scaling-benefit-card__desc">Showcase consistent performance on the AIFO Account</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div
|
||||
class="growth-modal"
|
||||
id="growthPathModal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="growthPathModalTitle"
|
||||
hidden
|
||||
>
|
||||
<div class="growth-modal__panel">
|
||||
<div class="growth-modal__header">
|
||||
<h2 class="growth-modal__header-title" id="growthPathModalTitle">
|
||||
Example of a Growth Path with the Scaling Plan
|
||||
</h2>
|
||||
<button type="button" class="growth-modal__close" id="growthPathClose" aria-label="Close">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||||
<path d="M4.5 4.5 13.5 13.5M13.5 4.5 4.5 13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="growth-modal__divider" aria-hidden="true"></div>
|
||||
<div class="growth-modal__body">
|
||||
<p class="growth-modal__intro">
|
||||
Explore a sample scenario showing how an AIFO Account's balance and risk parameters may grow
|
||||
when a $100K 1-Step customer meets the Scaling Plan requirements:
|
||||
</p>
|
||||
<div class="growth-table-wrap">
|
||||
<table class="growth-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Elapsed time</th>
|
||||
<th scope="col">Initial balance</th>
|
||||
<th scope="col">Profit Split</th>
|
||||
<th scope="col">Maximum Loss</th>
|
||||
<th scope="col">Maximum Daily Loss</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>0 months</td>
|
||||
<td>$200,000</td>
|
||||
<td>80%</td>
|
||||
<td>$6,000</td>
|
||||
<td>$10,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4 months</td>
|
||||
<td>$400,000</td>
|
||||
<td>90%</td>
|
||||
<td>$16,000</td>
|
||||
<td>$24,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8 months</td>
|
||||
<td>$800,000</td>
|
||||
<td>90%</td>
|
||||
<td>$40,000</td>
|
||||
<td>$56,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12 months</td>
|
||||
<td>$1,600,000</td>
|
||||
<td>95%</td>
|
||||
<td>$96,000</td>
|
||||
<td>$128,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 months</td>
|
||||
<td>$2,000,000</td>
|
||||
<td>95%</td>
|
||||
<td>$200,000</td>
|
||||
<td>$240,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="growth-modal__footer">
|
||||
<button type="button" class="btn-promo btn-promo--outline" id="growthPathCloseFooter">Close</button>
|
||||
<a href="#" class="btn-promo">Start AIFO Challenge</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-container"></div>
|
||||
|
||||
<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>
|
||||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||||
<script src="../assets/js/theme.js"></script>
|
||||
<script src="/js/layout.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
var modal = document.getElementById("growthPathModal");
|
||||
var openBtn = document.getElementById("growthPathOpen");
|
||||
var closeBtn = document.getElementById("growthPathClose");
|
||||
var closeFooterBtn = document.getElementById("growthPathCloseFooter");
|
||||
|
||||
function openModal() {
|
||||
modal.hidden = false;
|
||||
modal.classList.add("is-open");
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modal.hidden = true;
|
||||
modal.classList.remove("is-open");
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
openBtn.addEventListener("click", openModal);
|
||||
closeBtn.addEventListener("click", closeModal);
|
||||
closeFooterBtn.addEventListener("click", closeModal);
|
||||
|
||||
modal.addEventListener("click", function (event) {
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Escape" && modal.classList.contains("is-open")) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,233 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>推广活动</title>
|
||||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||||
<link href="../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/aifo-page-bg.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../assets/flagicon/css/flag-icons.min.css">
|
||||
<link type="text/css" href="../assets/css/promotion-activity.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="aifo-bg-primary" id="promotion-activity">
|
||||
<div id="nav-container"></div>
|
||||
|
||||
<main class="aifo-page-bg">
|
||||
<div class="promo-page">
|
||||
<section class="promo-hero">
|
||||
<div class="promo-hero__content">
|
||||
<h1 class="promo-hero__title">
|
||||
Pass More Challenges<br>
|
||||
<span class="text-orange">With AI</span>
|
||||
</h1>
|
||||
<p class="promo-hero__desc">
|
||||
Get funded up to $200,000 with AI-powered trading guidance built for serious traders.
|
||||
</p>
|
||||
<a href="#" class="btn-promo">Start Challenge</a>
|
||||
</div>
|
||||
<div class="promo-hero__visual" aria-hidden="true">
|
||||
<img src="../assets/images/promotion-activity/hero-visual.webp" alt="" width="986" height="532" decoding="async">
|
||||
</div>
|
||||
|
||||
<div class="promo-offer-bar">
|
||||
<div class="promo-offer-bar__tags">
|
||||
<div class="promo-tag">
|
||||
<p class="promo-tag__value">50% OFF</p>
|
||||
<p class="promo-tag__label">First Challenge</p>
|
||||
</div>
|
||||
<div class="promo-tag">
|
||||
<p class="promo-tag__value">AI Coach</p>
|
||||
<p class="promo-tag__label">Included</p>
|
||||
</div>
|
||||
<div class="promo-tag">
|
||||
<p class="promo-tag__value">Fast Payout</p>
|
||||
<p class="promo-tag__label">No waiting around</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="promo-offer-bar__action">
|
||||
<a href="#" class="btn-promo btn-promo--sm">Claim Offer</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="promo-section">
|
||||
<h2 class="promo-section__title promo-section__title--left">
|
||||
Hear From <span class="text-orange">Our Traders</span>
|
||||
</h2>
|
||||
<div class="testimonial-grid">
|
||||
<article class="testimonial-card">
|
||||
<div class="testimonial-card__head">
|
||||
<div class="testimonial-card__user">
|
||||
<div class="testimonial-card__identity">
|
||||
<div class="testimonial-card__identity-top">
|
||||
<span class="fi fi-gb testimonial-card__flag" aria-hidden="true"></span>
|
||||
<p class="testimonial-card__name">Alex M.</p>
|
||||
</div>
|
||||
<p class="testimonial-card__account">$50,000 Account</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-card__payout-wrap">
|
||||
<p class="testimonial-card__payout-label">PAYOUT</p>
|
||||
<p class="testimonial-card__payout">$ 4,280</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="testimonial-card__quote">"AI Coach helped me control risk and stay within the rules."</p>
|
||||
</article>
|
||||
|
||||
<article class="testimonial-card">
|
||||
<div class="testimonial-card__head">
|
||||
<div class="testimonial-card__user">
|
||||
<div class="testimonial-card__identity">
|
||||
<div class="testimonial-card__identity-top">
|
||||
<span class="fi fi-au testimonial-card__flag" aria-hidden="true"></span>
|
||||
<p class="testimonial-card__name">Daniel R.</p>
|
||||
</div>
|
||||
<p class="testimonial-card__account">$100,000 Account</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-card__payout-wrap">
|
||||
<p class="testimonial-card__payout-label">PAYOUT</p>
|
||||
<p class="testimonial-card__payout">$ 8,750</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="testimonial-card__quote">"The trade review made it clear where I was overexposing."</p>
|
||||
</article>
|
||||
|
||||
<article class="testimonial-card">
|
||||
<div class="testimonial-card__head">
|
||||
<div class="testimonial-card__user">
|
||||
<div class="testimonial-card__identity">
|
||||
<div class="testimonial-card__identity-top">
|
||||
<span class="fi fi-ca testimonial-card__flag" aria-hidden="true"></span>
|
||||
<p class="testimonial-card__name">Sarah K.</p>
|
||||
</div>
|
||||
<p class="testimonial-card__account">$200,000 Account</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-card__payout-wrap">
|
||||
<p class="testimonial-card__payout-label">PAYOUT</p>
|
||||
<p class="testimonial-card__payout">$ 12,450</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="testimonial-card__quote">"I finally had a system to improve instead of guessing."</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="promo-section promo-section--compare">
|
||||
<h2 class="promo-section__title promo-section__title--center">
|
||||
Why Traders Pass More <span class="text-orange">With AIFO</span>
|
||||
</h2>
|
||||
<div class="compare-table" role="table" aria-label="Comparison between other prop firms and AIFO">
|
||||
<div class="compare-table__header" role="row">
|
||||
<div class="compare-table__cell compare-table__cell--head compare-table__cell--other" role="columnheader">
|
||||
Other Prop Firms
|
||||
</div>
|
||||
<div class="compare-table__cell compare-table__cell--head compare-table__cell--aifo" role="columnheader">
|
||||
AIFO
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-table__body">
|
||||
<div class="compare-table__row" role="row">
|
||||
<div class="compare-table__cell compare-table__cell--other" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--no" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span>Trade alone</span>
|
||||
</div>
|
||||
<div class="compare-table__cell compare-table__cell--aifo" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--yes" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.2 5.8 10.5 11.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<span>AI Coach included</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-table__row" role="row">
|
||||
<div class="compare-table__cell compare-table__cell--other" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--no" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span>No trade feedback</span>
|
||||
</div>
|
||||
<div class="compare-table__cell compare-table__cell--aifo" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--yes" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.2 5.8 10.5 11.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<span>AI trade review</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-table__row" role="row">
|
||||
<div class="compare-table__cell compare-table__cell--other" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--no" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span>No risk analysis</span>
|
||||
</div>
|
||||
<div class="compare-table__cell compare-table__cell--aifo" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--yes" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.2 5.8 10.5 11.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<span>AI risk analysis</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-table__row" role="row">
|
||||
<div class="compare-table__cell compare-table__cell--other" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--no" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span>No consistency score</span>
|
||||
</div>
|
||||
<div class="compare-table__cell compare-table__cell--aifo" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--yes" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.2 5.8 10.5 11.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<span>Performance tracking</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-table__row" role="row">
|
||||
<div class="compare-table__cell compare-table__cell--other" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--no" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span>Pass or fail only</span>
|
||||
</div>
|
||||
<div class="compare-table__cell compare-table__cell--aifo" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--yes" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.2 5.8 10.5 11.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<span>Learn & improve</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-table__row" role="row">
|
||||
<div class="compare-table__cell compare-table__cell--other" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--no" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span>Static dashboard</span>
|
||||
</div>
|
||||
<div class="compare-table__cell compare-table__cell--aifo" role="cell">
|
||||
<span class="compare-table__icon compare-table__icon--yes" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.2 5.8 10.5 11.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<span>Personalized guidance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer-container"></div>
|
||||
|
||||
<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>
|
||||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||||
<script src="../assets/js/theme.js"></script>
|
||||
<script src="/js/layout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,237 @@
|
||||
<!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>Reset password 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/password.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<!-- fixed-header glass-panel -->
|
||||
<main class="auth-page d-flex justify-content-center align-items-center" id="reset-password">
|
||||
<!-- banner start -->
|
||||
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<div class="logo-container">
|
||||
<a href="../index.html">
|
||||
<img src="../assets/images/brand/logo_1.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="auth-title" id="pageTitle">Set password at AIFO</h1>
|
||||
<p class="auth-description" id="pageDescription">Reset your password and choose a new one to log in to
|
||||
your AIFO profile.</p>
|
||||
<form id="passwordForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="newPassword" class="form-label" id="passwordLabel">Create new password</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="password" class="form-control" id="newPassword"
|
||||
placeholder="Enter your password" required>
|
||||
<button type="button"
|
||||
class="toggle-password" data-target="newPassword"
|
||||
aria-label="Toggle password visibility"> <i class="fas fa-eye"></i> </button>
|
||||
</div>
|
||||
<p class="password-hint" id="hintText">Uppercase and lowercase letters and numeric symbols</p>
|
||||
<div class="invalid-feedback" id="newPasswordError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmPassword" class="form-label" id="confirmLabel">Confirm Password</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="password" class="form-control" id="confirmPassword"
|
||||
placeholder="Confirm your password" required>
|
||||
<button type="button"
|
||||
class="toggle-password" data-target="confirmPassword"
|
||||
aria-label="Toggle password visibility"> <i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="invalid-feedback" id="confirmPasswordError"></div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" id="submitBtn">
|
||||
<span id="buttonText">Create new password</span> </button>
|
||||
|
||||
<p class="security-note" id="securityNote">Please note that we recommend creating a strong password
|
||||
for your account due to protective security measures.</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const defaultConfig = {
|
||||
page_title: "Set password at AIFO",
|
||||
description_text: "Reset your password and choose a new one to log in to your AIFO profile.",
|
||||
password_label: "Create new password",
|
||||
confirm_label: "Confirm Password",
|
||||
button_text: "Create new password",
|
||||
hint_text: "Uppercase and lowercase letters and numeric symbols",
|
||||
security_note: "Please note that we recommend creating a strong password for your account due to protective security measures."
|
||||
};
|
||||
|
||||
async function onConfigChange(config) {
|
||||
document.getElementById('pageTitle').textContent = config.page_title || defaultConfig.page_title;
|
||||
document.getElementById('descriptionText').textContent = config.description_text || defaultConfig.description_text;
|
||||
document.getElementById('passwordLabel').textContent = config.password_label || defaultConfig.password_label;
|
||||
document.getElementById('confirmLabel').textContent = config.confirm_label || defaultConfig.confirm_label;
|
||||
document.getElementById('buttonText').textContent = config.button_text || defaultConfig.button_text;
|
||||
document.getElementById('hintText').textContent = config.hint_text || defaultConfig.hint_text;
|
||||
document.getElementById('securityNote').textContent = config.security_note || defaultConfig.security_note;
|
||||
}
|
||||
|
||||
function mapToCapabilities(config) {
|
||||
return {
|
||||
recolorables: [],
|
||||
borderables: [],
|
||||
fontEditable: undefined,
|
||||
fontSizeable: undefined
|
||||
};
|
||||
}
|
||||
|
||||
function mapToEditPanelValues(config) {
|
||||
return new Map([
|
||||
["page_title", config.page_title || defaultConfig.page_title],
|
||||
["description_text", config.description_text || defaultConfig.description_text],
|
||||
["password_label", config.password_label || defaultConfig.password_label],
|
||||
["confirm_label", config.confirm_label || defaultConfig.confirm_label],
|
||||
["button_text", config.button_text || defaultConfig.button_text],
|
||||
["hint_text", config.hint_text || defaultConfig.hint_text],
|
||||
["security_note", config.security_note || defaultConfig.security_note]
|
||||
]);
|
||||
}
|
||||
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.init({
|
||||
defaultConfig,
|
||||
onConfigChange,
|
||||
mapToCapabilities,
|
||||
mapToEditPanelValues
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
// Toggle password visibility
|
||||
$('.toggle-password').on('click', function() {
|
||||
const targetId = $(this).data('target');
|
||||
const input = $('#' + targetId);
|
||||
const icon = $(this).find('i');
|
||||
|
||||
if (input.attr('type') === 'password') {
|
||||
input.attr('type', 'text');
|
||||
icon.removeClass('fa-eye').addClass('fa-eye-slash');
|
||||
} else {
|
||||
input.attr('type', 'password');
|
||||
icon.removeClass('fa-eye-slash').addClass('fa-eye');
|
||||
}
|
||||
});
|
||||
|
||||
// Form validation
|
||||
$('#passwordForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const newPassword = $('#newPassword').val();
|
||||
const confirmPassword = $('#confirmPassword').val();
|
||||
let isValid = true;
|
||||
|
||||
// Clear previous errors
|
||||
$('.form-control').removeClass('is-invalid');
|
||||
$('.invalid-feedback').text('').hide();
|
||||
|
||||
// Validate new password
|
||||
if (newPassword.length < 8) {
|
||||
$('#newPassword').addClass('is-invalid');
|
||||
$('#newPasswordError').text('Password must be at least 8 characters').show();
|
||||
isValid = false;
|
||||
} else if (!/[A-Z]/.test(newPassword)) {
|
||||
$('#newPassword').addClass('is-invalid');
|
||||
$('#newPasswordError').text('Password must contain uppercase letter').show();
|
||||
isValid = false;
|
||||
} else if (!/[a-z]/.test(newPassword)) {
|
||||
$('#newPassword').addClass('is-invalid');
|
||||
$('#newPasswordError').text('Password must contain lowercase letter').show();
|
||||
isValid = false;
|
||||
} else if (!/[0-9]/.test(newPassword)) {
|
||||
$('#newPassword').addClass('is-invalid');
|
||||
$('#newPasswordError').text('Password must contain number').show();
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate confirm password
|
||||
if (confirmPassword !== newPassword) {
|
||||
$('#confirmPassword').addClass('is-invalid');
|
||||
$('#confirmPasswordError').text('Passwords do not match').show();
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (isValid) {
|
||||
const $btn = $('#submitBtn');
|
||||
const originalText = $('#buttonText').text();
|
||||
|
||||
$btn.prop('disabled', true);
|
||||
$('#buttonText').html('<i class="fas fa-spinner fa-spin mr-2"></i>Creating...');
|
||||
|
||||
// Simulate submission
|
||||
setTimeout(function() {
|
||||
$btn.prop('disabled', false);
|
||||
$('#buttonText').text(originalText);
|
||||
|
||||
// Show success message
|
||||
const successMsg = $('<div class="alert alert-success mt-3" role="alert">Password created successfully!</div>');
|
||||
$('#passwordForm').append(successMsg);
|
||||
|
||||
setTimeout(function() {
|
||||
successMsg.fadeOut(function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, 3000);
|
||||
|
||||
// Reset form
|
||||
$('#passwordForm')[0].reset();
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
|
||||
// Clear error state on input
|
||||
$('.form-control').on('input', function() {
|
||||
$(this).removeClass('is-invalid');
|
||||
$(this).siblings('.invalid-feedback').text('').hide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!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>password success 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/password.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<!-- fixed-header glass-panel -->
|
||||
<main class="auth-page d-flex justify-content-center align-items-center" id="ch_pwd_message">
|
||||
<!-- banner start -->
|
||||
|
||||
<div class="success-page">
|
||||
<div class="container-fluid h-100">
|
||||
<div class="row no-gutters h-100 ">
|
||||
<div class="col-12 d-flex ">
|
||||
<div class="success-card fade-in">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="success-icon ">
|
||||
<img src="../assets/images/backgrounds/icon/sussess.png" class="fade-in" alt="" />
|
||||
</div>
|
||||
<h1 class="success-title fade-in">Password changed<br>
|
||||
successfully!</h1>
|
||||
<div class="success-countdown fade-in" id="countdown">
|
||||
3
|
||||
</div><a href="#" class="success-back-link fade-in" id="backLink"> Manually redirect to the login page </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,365 @@
|
||||
<!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>search results Page</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" id="search_results">
|
||||
<!-- banner start -->
|
||||
<div class="academy-block-1">
|
||||
|
||||
<div class="main-wrapper h-full">
|
||||
<!-- <div class="dot-pattern"></div>
|
||||
<div class="vignette"></div> -->
|
||||
<div class="title-section">
|
||||
<h1 class="page-title">
|
||||
<span class="text-white">Search</span>
|
||||
<span class="title-icon">
|
||||
<!-- <i class="fas fa-search"></i>search_icon.svg -->
|
||||
<img src="../assets/images/backgrounds/icon/search-icon.svg" alt="Funded Trading" class="floating-img">
|
||||
</span>
|
||||
<span class="text-orange">Results</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- search-section start -->
|
||||
<section class="search-section">
|
||||
<div class="search-wrapper">
|
||||
<form id="searchForm">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-12 mb-3 mb-md-0 search-contain">
|
||||
<div class="search-input-group">
|
||||
<svg class="svg-inline--fa fa-search fa-w-16 search-icon" style="opacity:0;" onload="this.style.opacity='1'" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
|
||||
<!-- <i class="fas fa-search search-icon"></i> -->
|
||||
<input type="text" class="search-input" id="searchInput" placeholder="Search for articles..." aria-label="Search">
|
||||
</div>
|
||||
<div class="search-btn">
|
||||
<button type="submit" class="btn btn-default btn-search" id="searchButton">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-scope">
|
||||
<span class="search-scope-label">Search in:</span>
|
||||
<div class="filter-bar d-flex align-items-center">
|
||||
<div class="custom-control custom-checkbox mr-4">
|
||||
<input type="checkbox" class="custom-control-input" id="allContent">
|
||||
<label class="custom-control-label" for="allContent">
|
||||
<span class="svg-check">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="5 13 10 18 19 7"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
All Site Content
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="faqOnly" checked="">
|
||||
<label class="custom-control-label" for="faqOnly">
|
||||
<span class="svg-check">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="5 13 10 18 19 7"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
FAQ Only
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- search-section end -->
|
||||
|
||||
<div class="content-container"><!-- Search Bar -->
|
||||
|
||||
<div class="results-summary" id="resultsSummary">
|
||||
We found <span class="text-orange">461</span> results for <span class="text-orange">"about"</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- result-list section -->
|
||||
|
||||
<section class="result-list-section">
|
||||
<div class="container">
|
||||
|
||||
<div style="max-width: 850px; margin: 0 auto;">
|
||||
<div class="result-item">
|
||||
<a class="search-result-header">
|
||||
<div class="result-content">
|
||||
<div class="result-title heading-3">Why AIFO Why AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFOWhy AIFO</div>
|
||||
<p class="result-description">Find the path that fits you bestChoose your suitable challenge plan and complete the payment to get started. You'll receive a demo trading account, and once you reach the profit tar
|
||||
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 tar
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-icon-box">
|
||||
<span class="icon iconfont icon-arrow"></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="result-item"><button class="search-result-header"> <span class="faq-question fade-in show">How long does withdrawal take?</span>
|
||||
<div class="faq-icon-box">
|
||||
<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">
|
||||
<p>We process all withdrawal requests within 24 hours. In most cases, funds arrive in your account within a few hours after submission.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">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>
|
||||
|
||||
|
||||
<section class="popular-searches-section">
|
||||
<div class="container">
|
||||
|
||||
<div class="popular-searches fade-in show mx-auto">
|
||||
|
||||
<h2 class="fade-in show">Most popular searches</h2>
|
||||
|
||||
<div class="search-list">
|
||||
|
||||
<a class="search-item fade-in show" href="/faq/how-does-the-aifo-challenge-work">
|
||||
How does the AIFO challenge work?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in show" href="/faq/profit-split-payout">
|
||||
How do I request a profit split (payout)?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in show" href="/faq/withdrawal-processing-time">
|
||||
How long does it take to process a withdrawal?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in show" href="/faq/disconnected-during-trade">
|
||||
I disconnected during a trade. What should I do?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in show" href="/faq/contact-customer-support">
|
||||
How can I contact customer support?
|
||||
</a>
|
||||
|
||||
<a class="search-item fade-in show" href="/faq/profit-split-percentage">
|
||||
What is the profit split percentage?
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ List -->
|
||||
<section class="faq-section" id="faq" style="display:none">
|
||||
<div class="container">
|
||||
<div class="page-title-wrapper">
|
||||
<h1 class="page-title text-center" id="pageTitle">Most Viewed 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">
|
||||
<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 long does withdrawal take?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>We process all withdrawal requests within 24 hours. In most cases, funds arrive in your account within a few hours after submission.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">What is the profit split ratio?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>We offer the industry's highest profit split, up to 90%. The vast majority of your trading profits belong to you.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">Can I use Expert Advisors (EAs)?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>Yes, we allow the use of Expert Advisors for automated trading. You can unlock EA trading features by purchasing add-ons.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">Can I retry after failing a challenge?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>Absolutely! We understand that trading requires learning and adaptation. You can purchase a new challenge anytime to continue your journey. We also offer discounts for repeat challengers.</p><a href="#" class="see-more-link">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item"><button class="faq-header"> <span class="faq-question fade-in show">What are the trading restrictions?</span>
|
||||
<div class="faq-icon-box"><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">
|
||||
<p>Our rules are very flexible. We allow holding overnight, weekend trading, and news trading. The main restrictions are maximum drawdown and daily drawdown limits, which protect both your capital and ours.</p>
|
||||
<a href="#" class="see-more-link text-orange fade-in">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Search 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>
|
||||
$(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>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Save 50% off across all AIFO challenges. Limited-time special offer with code AIF050.">
|
||||
<title>Special Offer 50% | AIFO</title>
|
||||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||||
<link href="../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/special-offer-50.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="aifo-bg-primary">
|
||||
<div id="nav-container"></div>
|
||||
|
||||
<main id="special-offer-50">
|
||||
<!-- Hero -->
|
||||
<section class="so-hero" aria-labelledby="so-hero-title">
|
||||
<div class="so-container so-hero__inner">
|
||||
<div class="so-hero__content">
|
||||
<h1 class="so-hero__title" id="so-hero-title">
|
||||
SPECIAL <span class="so-accent">OFFER</span>
|
||||
</h1>
|
||||
<p class="so-hero__lead">
|
||||
Save <span class="so-accent" style="font-weight:700;">50% off</span> across all AIFO challenges*
|
||||
</p>
|
||||
<a href="#" class="so-btn">Claim Now</a>
|
||||
<p class="so-note so-hero__note">
|
||||
|
||||
*50% OFF applies to eligible challenge puonly. This offer cannot be combined with
|
||||
other promotions or discounts. AIFO reserwithdraw this promotion at any time. All
|
||||
purchases remain subject to AIFO's Terms ules
|
||||
</p>
|
||||
</div>
|
||||
<div class="so-hero__visual">
|
||||
<img
|
||||
class="so-hero__image"
|
||||
src="../assets/images/promotion/20260615-145855.png"
|
||||
alt="50% off special offer"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Welcome rewards -->
|
||||
<section class="so-welcome" aria-labelledby="so-welcome-title">
|
||||
<div class="so-welcome__glow" aria-hidden="true"></div>
|
||||
<div class="so-container so-welcome__inner">
|
||||
<h2 class="so-section-title" id="so-welcome-title">
|
||||
Welcome <span class="so-accent">rewards</span>
|
||||
</h2>
|
||||
<p class="so-section-desc">
|
||||
As an AIFO trader, you'll receive an exclusive 50% off. This means<br class="d-none d-md-inline">
|
||||
you're halfway toward your next challenge.
|
||||
</p>
|
||||
|
||||
<div class="so-promo-card">
|
||||
<div>
|
||||
<p class="so-promo-card__eyebrow">Limited-time offer</p>
|
||||
<p class="so-promo-card__value">50% OFF</p>
|
||||
<p class="so-promo-card__sub">ALL CHALLENGES*</p>
|
||||
</div>
|
||||
|
||||
<div class="so-promo-card__code-wrap">
|
||||
<div>
|
||||
<p class="so-promo-card__code-label">Use code</p>
|
||||
<span class="so-promo-card__code" id="so-promo-code">AIF050</span>
|
||||
</div>
|
||||
<a href="#" class="so-btn">Claim Now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="so-note so-welcome__note">
|
||||
*Offer applies to eligible challenges and expires during the promotional period only. The discount is applied at checkout and cannot be combined with other promotions. AIFO reserves the right to modify, suspend, or terminate this promotion at any time without prior notice. All purchases remain subject to AIFO's Terms of Service including rules, verification requirements, and eligibility requirements.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How to claim (module) -->
|
||||
<div id="how-to-claim-container"></div>
|
||||
</main>
|
||||
|
||||
<div id="footer-container"></div>
|
||||
|
||||
<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>
|
||||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||||
<script src="../assets/js/theme.js"></script>
|
||||
<script src="/js/load-how-to-claim.js"></script>
|
||||
<script src="/js/layout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
<!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>Tags Page</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" id="tags_type">
|
||||
<!-- 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">Tags type</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">
|
||||
Torem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- tags Section -->
|
||||
<section class="tags-section">
|
||||
<div class="content-container">
|
||||
|
||||
<div class="container">
|
||||
<div class="row cards-grid" id="cardsGrid"><!-- Cards will be generated here -->
|
||||
</div>
|
||||
|
||||
<!-- <div class="pagination-wrapper">
|
||||
<a href="#" class="pagination-item active">1</a>
|
||||
<a href="#" class="pagination-item">2</a>
|
||||
<a href="#" class="pagination-item">3</a>
|
||||
<span class="pagination-item dots">…</span>
|
||||
<a href="#" class="pagination-item">10</a>
|
||||
<a href="#" class="pagination-arrow">›</a>
|
||||
</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>
|
||||
|
||||
</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>
|
||||
const defaultConfig = {
|
||||
main_title: "Tags type",
|
||||
subtitle_line1: "Torem ipsum dolor sit amet, consectetur",
|
||||
subtitle_line2: "adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus.",
|
||||
card_title: "Torem ipsum dolor sit amet",
|
||||
card_description: "Torem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie",
|
||||
primary_color: "#F98715",
|
||||
background_color: "#0F0F10",
|
||||
card_bg_color: "#2A2A2A",
|
||||
text_color: "#F9F9F9",
|
||||
text_secondary: "rgba(255, 255, 255, 0.75)"
|
||||
};
|
||||
|
||||
function generateCards(title, description) {
|
||||
const grid = document.getElementById('cardsGrid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < 9; i++) {
|
||||
const col = document.createElement('div');
|
||||
col.className = 'col-12 col-md-6 col-lg-4';
|
||||
|
||||
col.innerHTML = `
|
||||
<div class="card-item">
|
||||
<div class="card-placeholder"><img src="../assets/images/demo/tags-1.png" alt="AIFO UI Kit" /></div>
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">${title}</h3>
|
||||
<p class="card-description">${description}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
grid.appendChild(col);
|
||||
}
|
||||
}
|
||||
|
||||
async function onConfigChange(config) {
|
||||
document.getElementById('mainTitle').textContent = config.main_title || defaultConfig.main_title;
|
||||
document.getElementById('subtitleLine1').textContent = config.subtitle_line1 || defaultConfig.subtitle_line1;
|
||||
document.getElementById('subtitleLine2').textContent = config.subtitle_line2 || defaultConfig.subtitle_line2;
|
||||
|
||||
generateCards(
|
||||
config.card_title || defaultConfig.card_title,
|
||||
config.card_description || defaultConfig.card_description
|
||||
);
|
||||
|
||||
document.documentElement.style.setProperty('--primary-color', config.primary_color || defaultConfig.primary_color);
|
||||
document.documentElement.style.setProperty('--background-color', config.background_color || defaultConfig.background_color);
|
||||
document.documentElement.style.setProperty('--card-bg', config.card_bg_color || defaultConfig.card_bg_color);
|
||||
document.documentElement.style.setProperty('--text-color', config.text_color || defaultConfig.text_color);
|
||||
}
|
||||
|
||||
function mapToCapabilities(config) {
|
||||
return {
|
||||
recolorables: [
|
||||
{
|
||||
get: () => config.primary_color || defaultConfig.primary_color,
|
||||
set: (value) => {
|
||||
config.primary_color = value;
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.setConfig({ primary_color: value });
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
get: () => config.background_color || defaultConfig.background_color,
|
||||
set: (value) => {
|
||||
config.background_color = value;
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.setConfig({ background_color: value });
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
get: () => config.card_bg_color || defaultConfig.card_bg_color,
|
||||
set: (value) => {
|
||||
config.card_bg_color = value;
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.setConfig({ card_bg_color: value });
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
get: () => config.text_color || defaultConfig.text_color,
|
||||
set: (value) => {
|
||||
config.text_color = value;
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.setConfig({ text_color: value });
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
get: () => config.text_secondary || defaultConfig.text_secondary,
|
||||
set: (value) => {
|
||||
config.text_secondary = value;
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.setConfig({ text_secondary: value });
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
borderables: [],
|
||||
fontEditable: undefined,
|
||||
fontSizeable: undefined
|
||||
};
|
||||
}
|
||||
|
||||
function mapToEditPanelValues(config) {
|
||||
return new Map([
|
||||
["main_title", config.main_title || defaultConfig.main_title],
|
||||
["subtitle_line1", config.subtitle_line1 || defaultConfig.subtitle_line1],
|
||||
["subtitle_line2", config.subtitle_line2 || defaultConfig.subtitle_line2],
|
||||
["card_title", config.card_title || defaultConfig.card_title],
|
||||
["card_description", config.card_description || defaultConfig.card_description]
|
||||
]);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.init({
|
||||
defaultConfig,
|
||||
onConfigChange,
|
||||
mapToCapabilities,
|
||||
mapToEditPanelValues
|
||||
});
|
||||
}
|
||||
|
||||
// Generate initial cards
|
||||
generateCards(defaultConfig.card_title, defaultConfig.card_description);
|
||||
|
||||
// Pagination click handlers
|
||||
document.querySelectorAll('.pagination-item:not(.dots), .pagination-arrow').forEach(item => {
|
||||
item.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.classList.contains('pagination-arrow')) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.pagination-item').forEach(p => p.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<section id="section-10" class="slice slice-lg" data-delimiter="1">
|
||||
<div class="bg_light">
|
||||
<div class="container">
|
||||
<div class="mb-md text-center">
|
||||
<h1 class="heading h1 fade-in">Join <img src="./assets/images/backgrounds/Frame 1000008381.png" alt="Funded Trading" class="tx-img floating-img"></h3>
|
||||
<h1 class="heading h1 fade-in"> <img src="./assets/images/backgrounds/Frame 1000008386.png" alt="Funded Trading" class="zfj-img floating-img"><span class="text-orange">Our Community</span></h3>
|
||||
<div class="fluid-paragraph text-center mt-4">
|
||||
<p class="lead lh-180 fade-in">
|
||||
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">
|
||||
<a href="#" class="btn btn-start-challenge fade-in"><img src="./assets/images/backgrounds/btn-icon-1.png" alt="Funded Trading" class="floating-img"> Join Discord</a>
|
||||
<a href="#" class="btn btn-free-trial fade-in">
|
||||
<!-- <img src="./assets/images/backgrounds/btn-icon-2.png" alt="Funded Trading" class="floating-img"> -->
|
||||
<span class="btn-join-telegram-icon"></span>
|
||||
Join Telegram
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,230 @@
|
||||
<!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>user login 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 rel="stylesheet" href="../assets/css/login.css" rel="">
|
||||
</head>
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<main class="main login-page d-flex align-items-center" id="login">
|
||||
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
<div class="row main-row align-items-start justify-content-between">
|
||||
<!-- Left Column: Login Card -->
|
||||
<div class="col-lg-5 col-xl-4 left-block">
|
||||
<div class="login-card card-base">
|
||||
<div class="logo-container">
|
||||
<a class="navbar-brand" href="../index.html">
|
||||
<img src="../assets/images/brand/logo_1.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="login-title" id="login-title">Log in to AIFO</h1>
|
||||
<form id="login-form" class="needs-validation" novalidate>
|
||||
<div class="form-group">
|
||||
<label class="form-label" id="username-label">User name</label>
|
||||
<input type="text" class="form-control" id="username" placeholder="Username / email address" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter an username or email address.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" id="password-label">Password</label>
|
||||
<div class="password-wrapper">
|
||||
<input type="password" class="form-control" id="password" placeholder="Enter your password" required>
|
||||
<button type="button" class="password-toggle" id="password-toggle" aria-label="Toggle password visibility">
|
||||
<svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="invalid-feedback">
|
||||
Please enter password.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="error-message" id="password-error"><span class="error-icon">!</span> <span>Please enter your password.</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="remember-forgot custom-control">
|
||||
<!-- <label class="remember-check">
|
||||
<input type="checkbox" id="remember">
|
||||
<span id="remember-text">Remember Me</span>
|
||||
</label> -->
|
||||
<input type="checkbox" class="custom-control-input" id="remember">
|
||||
<label class="custom-control-label" for="remember">
|
||||
<span class="svg-check">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="5 13 10 18 19 7"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
Remember Me
|
||||
</label>
|
||||
<a href="#" class="forgot-link" id="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
<button type="submit" class="btn-aifo-primary" id="login-button">Log in</button>
|
||||
</form>
|
||||
<div class="divider">
|
||||
<div class="divider-line"></div><span class="divider-text" id="divider-text">or continue with</span>
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
<div class="social-buttons"><button class="social-btn" aria-label="Continue with Google">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" /> <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" /> <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" /> <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
|
||||
</svg></button> <button class="social-btn" aria-label="Continue with Facebook">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="#1877F2" />
|
||||
</svg></button> <button class="social-btn" aria-label="Continue with Apple">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" fill="#000000" />
|
||||
</svg></button>
|
||||
</div>
|
||||
<div class="signup-prompt"><span id="signup-prompt-text">Do not have an account yet?</span> <a href="#" class="signup-link text-orange" id="signup-link">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Feature Cards -->
|
||||
<div class="col-lg-7 col-xl-8 right-block mb-hidden">
|
||||
<div class="features-column"><!-- Large Card 1: Academy -->
|
||||
<div class="feature-card feature-card-large school">
|
||||
<div class="feature-icon-container">
|
||||
<div class="feature-icon">
|
||||
<img src="../assets/images/backgrounds/icon/school.svg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<div class="feature-title text-orange" id="academy-title">
|
||||
AIFO Academy
|
||||
</div>
|
||||
<div class="feature-subtitle" id="academy-subtitle">
|
||||
Learn, then earn
|
||||
</div>
|
||||
<div class="feature-description" id="academy-description">
|
||||
Access step-by-step courses on strategy, risk management and trading psychology, designed to help you pass challenges more consistently.
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Large Card 2: Free Trial -->
|
||||
<div class="feature-card feature-card-large feature-card-trial">
|
||||
<div class="feature-content">
|
||||
<div class="feature-title" id="trial-title">
|
||||
Free Trial
|
||||
</div>
|
||||
<div class="feature-subtitle" id="trial-subtitle">
|
||||
Try before you commit
|
||||
</div>
|
||||
<div class="feature-description" id="trial-description">
|
||||
Open a free practice account to experience our rules, platform flow and risk limits before purchasing any
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- Small Cards Row -->
|
||||
<div class="small-cards-row"><!-- Small Card 1: Refer Friends -->
|
||||
<div class="feature-card feature-card-small">
|
||||
<div class="feature-card-small-header">
|
||||
<div class="feature-icon">
|
||||
<img src="../assets/images/backgrounds/icon/icon-arrows_left_right.svg">
|
||||
</div>
|
||||
<div class="feature-title" id="refer-title">
|
||||
Refer Friends
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-subtitle-small" id="refer-subtitle">
|
||||
Grow together, earn rewards
|
||||
</div>
|
||||
<div class="feature-description" id="refer-description">
|
||||
Invite friends who love trading. When they join and start challenges, you get exclusive rewards and benefits.
|
||||
</div>
|
||||
</div><!-- Small Card 2: Help -->
|
||||
<div class="feature-card feature-card-small">
|
||||
<div class="feature-card-small-header align-items-start">
|
||||
<div class="feature-icon">
|
||||
<img src="../assets/images/backgrounds/icon/icon-help.svg">
|
||||
</div>
|
||||
<div class="feature-title" id="help-title">
|
||||
Help when you need it
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-description" id="help-description">
|
||||
Our team is here to assist you with registration, challenge selection and account setup.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
// Prevent form submission if validation fails
|
||||
(function() {
|
||||
'use strict';
|
||||
window.addEventListener('load', function() {
|
||||
// Get form validation styles
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop and prevent submission
|
||||
var validation = Array.prototype.filter.call(forms, function(form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
|
||||
|
||||
// Password toggle functionality
|
||||
const passwordToggle = document.getElementById('password-toggle');
|
||||
const passwordInput = document.getElementById('password');
|
||||
const eyeIcon = document.getElementById('eye-icon');
|
||||
|
||||
passwordToggle.addEventListener('click', function () {
|
||||
const isPassword = passwordInput.type === 'password';
|
||||
passwordInput.type = isPassword ? 'text' : 'password';
|
||||
|
||||
if (isPassword) {
|
||||
eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
|
||||
} else {
|
||||
eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />';
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,581 @@
|
||||
<!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>user signup 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 rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
|
||||
onerror="this.onerror=null;this.href='/assets/flag-icons.min.css';">
|
||||
<!-- <link rel="stylesheet"
|
||||
href="../assets/flagicon/css/flag-icons.min.css"> -->
|
||||
<link rel="stylesheet" href="../assets/css/login.css" rel="">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<main class="main register-page d-flex align-items-center" id="login">
|
||||
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
<div class="row main-row align-items-start justify-content-between">
|
||||
<!-- Left Column: Login Card -->
|
||||
<div class="col-lg-5 col-xl-4 left-block signup-form">
|
||||
<div class="login-card card-base">
|
||||
<div class="signup-header">
|
||||
<h1 class="signup-title" id="page-title">Create Your New Profile</h1>
|
||||
</div>
|
||||
<form id="login-form" class="needs-validation" novalidate>
|
||||
<div class="form-group">
|
||||
<label class="form-label" id="username-label" for="username">User name</label>
|
||||
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your name" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your name.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" id="useremial-label" for="email">Email Address</label>
|
||||
<input type="email" class="form-control" name="email" id="email" placeholder="Enter your email" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your email.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone" class="form-label" id="phone-label">Phone Number</label>
|
||||
<div class="phone-wrapper ">
|
||||
|
||||
<!-- Country Selector -->
|
||||
<div
|
||||
class="country-select dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true">
|
||||
<span class="fi fi-au"></span>
|
||||
<span class="country-code">+61</span>
|
||||
<span class="arrow icon iconfont icon-downarrow"></span>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown list -->
|
||||
<div class="dropdown-menu w-100">
|
||||
<!-- Search -->
|
||||
<div class="country-search-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
class="country-search-input"
|
||||
placeholder="Search country..."
|
||||
id="country-search"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Country list -->
|
||||
<div class="country-list" id="country-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- Phone input -->
|
||||
<input
|
||||
type="tel"
|
||||
class="phone-input"
|
||||
placeholder="Enter your phone number"
|
||||
required
|
||||
pattern="^[0-9]{6,15}$">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" id="password-label" for="password">Password</label>
|
||||
<div class="password-wrapper">
|
||||
<input type="password" class="form-control" id="password" placeholder="Enter your password" required>
|
||||
<button type="button" class="password-toggle" id="password-toggle" aria-label="Toggle password visibility">
|
||||
<svg id="eye-icon" class="eye-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="invalid-feedback">
|
||||
Please enter password.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="confirm_password">Confirm Password</label>
|
||||
<div class="password-wrapper">
|
||||
<input type="password" class="form-control" id="confirm_password" placeholder="Enter your password" required>
|
||||
<button type="button" class="password-toggle" id="confirm-password-toggle" aria-label="Toggle password visibility">
|
||||
<svg id="eye-icon" class="eye-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="invalid-feedback">
|
||||
Please enter confirm Password.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="remember-forgot custom-control">
|
||||
|
||||
<input type="checkbox" class="custom-control-input" id="remember">
|
||||
<label class="custom-control-label" for="remember">
|
||||
<span class="svg-check">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="5 13 10 18 19 7"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
Remember Me
|
||||
</label>
|
||||
<a href="#" class="forgot-link" id="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
<button type="submit" class="btn-aifo-primary" id="login-button">Sign up</button>
|
||||
</form>
|
||||
<div class="divider">
|
||||
<div class="divider-line"></div><span class="divider-text" id="divider-text">or continue with</span>
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
<div class="social-buttons"><button class="social-btn" aria-label="Continue with Google">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" /> <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" /> <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" /> <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
|
||||
</svg></button> <button class="social-btn" aria-label="Continue with Facebook">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="#1877F2" />
|
||||
</svg></button> <button class="social-btn" aria-label="Continue with Apple">
|
||||
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" fill="#000000" />
|
||||
</svg></button>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox-wrapper">
|
||||
<div class="custom-checkbox"><input type="checkbox" id="terms-checkbox" required> <span class="checkbox-box"></span>
|
||||
</div><label for="terms-checkbox" class="checkbox-label"> I confirm that I am not located in a country where AIFO's services are unavailable, and that the information I've provided is accurate and matches my government-issued ID. </label>
|
||||
</div>
|
||||
<div class="checkbox-wrapper">
|
||||
<div class="custom-checkbox"><input type="checkbox" id="newsletter-checkbox"> <span class="checkbox-box"></span>
|
||||
</div><label for="newsletter-checkbox" class="checkbox-label"> Would you like to receive updates about our project? Join our newsletter and receive the latest news delivered to your inbox. </label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="signup-prompt">
|
||||
<span id="signup-prompt-text">Already have an account?</span>
|
||||
<a href="#" class="signup-link text-orange" id="signup-link">Log in</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Feature Cards -->
|
||||
<div class="col-lg-7 col-xl-8 right-block mb-hidden">
|
||||
<div class="features-column"><!-- Large Card 1: Academy -->
|
||||
<div class="feature-card feature-card-large school">
|
||||
<div class="feature-icon-container">
|
||||
<div class="feature-icon">
|
||||
<img src="../assets/images/backgrounds/icon/school.svg">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<div class="feature-title text-orange" id="academy-title">
|
||||
AIFO Academy
|
||||
</div>
|
||||
<div class="feature-subtitle" id="academy-subtitle">
|
||||
Learn, then earn
|
||||
</div>
|
||||
<div class="feature-description" id="academy-description">
|
||||
Access step-by-step courses on strategy, risk management and trading psychology, designed to help you pass challenges more consistently.
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Large Card 2: Free Trial -->
|
||||
<div class="feature-card feature-card-large feature-card-trial">
|
||||
<div class="feature-content">
|
||||
<div class="feature-title" id="trial-title">
|
||||
Free Trial
|
||||
</div>
|
||||
<div class="feature-subtitle" id="trial-subtitle">
|
||||
Try before you commit
|
||||
</div>
|
||||
<div class="feature-description" id="trial-description">
|
||||
Open a free practice account to experience our rules, platform flow and risk limits before purchasing any
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- Small Cards Row -->
|
||||
<div class="small-cards-row"><!-- Small Card 1: Refer Friends -->
|
||||
<div class="feature-card feature-card-small">
|
||||
<div class="feature-card-small-header">
|
||||
<div class="feature-icon">
|
||||
<img src="../assets/images/backgrounds/icon/icon-arrows_left_right.svg">
|
||||
</div>
|
||||
<div class="feature-title" id="refer-title">
|
||||
Refer Friends
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-subtitle-small" id="refer-subtitle">
|
||||
Grow together, earn rewards
|
||||
</div>
|
||||
<div class="feature-description" id="refer-description">
|
||||
Invite friends who love trading. When they join and start challenges, you get exclusive rewards and benefits.
|
||||
</div>
|
||||
</div><!-- Small Card 2: Help -->
|
||||
<div class="feature-card feature-card-small">
|
||||
<div class="feature-card-small-header align-items-start">
|
||||
<div class="feature-icon">
|
||||
<img src="../assets/images/backgrounds/icon/icon-help.svg">
|
||||
</div>
|
||||
<div class="feature-title" id="help-title">
|
||||
Help when you need it
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-description" id="help-description">
|
||||
Our team is here to assist you with registration, challenge selection and account setup.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
// Prevent form submission if validation fails
|
||||
(function() {
|
||||
'use strict';
|
||||
window.addEventListener('load', function() {
|
||||
// Get form validation styles
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop and prevent submission
|
||||
var validation = Array.prototype.filter.call(forms, function(form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
/* ===============================
|
||||
Country JSON (can be auto-generated/extended)
|
||||
================================ */
|
||||
const countries = [
|
||||
{"name": "Afghanistan", "iso": "af", "dial": "+93"},
|
||||
{"name": "Albania", "iso": "al", "dial": "+355"},
|
||||
{"name": "Algeria", "iso": "dz", "dial": "+213"},
|
||||
{"name": "Andorra", "iso": "ad", "dial": "+376"},
|
||||
{"name": "Angola", "iso": "ao", "dial": "+244"},
|
||||
{"name": "Argentina", "iso": "ar", "dial": "+54"},
|
||||
{"name": "Armenia", "iso": "am", "dial": "+374"},
|
||||
{"name": "Australia", "iso": "au", "dial": "+61"},
|
||||
{"name": "Austria", "iso": "at", "dial": "+43"},
|
||||
{"name": "Azerbaijan", "iso": "az", "dial": "+994"},
|
||||
{"name": "Bahamas", "iso": "bs", "dial": "+1242"},
|
||||
{"name": "Bahrain", "iso": "bh", "dial": "+973"},
|
||||
{"name": "Barbados", "iso": "bb", "dial": "+1246"},
|
||||
{"name": "Belgium", "iso": "be", "dial": "+32"},
|
||||
{"name": "Benin", "iso": "bj", "dial": "+229"},
|
||||
{"name": "Bhutan", "iso": "bt", "dial": "+975"},
|
||||
{"name": "Bolivia", "iso": "bo", "dial": "+591"},
|
||||
{"name": "Bosnia and Herzegovina", "iso": "ba", "dial": "+387"},
|
||||
{"name": "Botswana", "iso": "bw", "dial": "+267"},
|
||||
{"name": "Brazil", "iso": "br", "dial": "+55"},
|
||||
{"name": "Brunei", "iso": "bn", "dial": "+673"},
|
||||
{"name": "Bulgaria", "iso": "bg", "dial": "+359"},
|
||||
{"name": "Burkina Faso", "iso": "bf", "dial": "+226"},
|
||||
{"name": "Cambodia", "iso": "kh", "dial": "+855"},
|
||||
{"name": "Cameroon", "iso": "cm", "dial": "+237"},
|
||||
{"name": "Canada", "iso": "ca", "dial": "+1"},
|
||||
{"name": "Central African Republic", "iso": "cf", "dial": "+236"},
|
||||
{"name": "Chile", "iso": "cl", "dial": "+56"},
|
||||
{"name": "China", "iso": "cn", "dial": "+86"},
|
||||
{"name": "Colombia", "iso": "co", "dial": "+57"},
|
||||
{"name": "Congo", "iso": "cg", "dial": "+242"},
|
||||
{"name": "Costa Rica", "iso": "cr", "dial": "+506"},
|
||||
{"name": "Croatia", "iso": "hr", "dial": "+385"},
|
||||
{"name": "Cuba", "iso": "cu", "dial": "+53"},
|
||||
{"name": "Cyprus", "iso": "cy", "dial": "+357"},
|
||||
{"name": "Czech Republic", "iso": "cz", "dial": "+420"},
|
||||
{"name": "Denmark", "iso": "dk", "dial": "+45"},
|
||||
{"name": "Djibouti", "iso": "dj", "dial": "+253"},
|
||||
{"name": "Dominica", "iso": "dm", "dial": "+1767"},
|
||||
{"name": "Dominican Republic", "iso": "do", "dial": "+1809"},
|
||||
{"name": "Ecuador", "iso": "ec", "dial": "+593"},
|
||||
{"name": "Egypt", "iso": "eg", "dial": "+20"},
|
||||
{"name": "El Salvador", "iso": "sv", "dial": "+503"},
|
||||
{"name": "Equatorial Guinea", "iso": "gq", "dial": "+240"},
|
||||
{"name": "Estonia", "iso": "ee", "dial": "+372"},
|
||||
{"name": "Eswatini", "iso": "sz", "dial": "+268"},
|
||||
{"name": "Ethiopia", "iso": "et", "dial": "+251"},
|
||||
{"name": "Finland", "iso": "fi", "dial": "+358"},
|
||||
{"name": "France", "iso": "fr", "dial": "+33"},
|
||||
{"name": "Gabon", "iso": "ga", "dial": "+241"},
|
||||
{"name": "Gambia", "iso": "gm", "dial": "+220"},
|
||||
{"name": "Georgia", "iso": "ge", "dial": "+995"},
|
||||
{"name": "Germany", "iso": "de", "dial": "+49"},
|
||||
{"name": "Ghana", "iso": "gh", "dial": "+233"},
|
||||
{"name": "Greece", "iso": "gr", "dial": "+30"},
|
||||
{"name": "Guatemala", "iso": "gt", "dial": "+502"},
|
||||
{"name": "Guinea", "iso": "gn", "dial": "+224"},
|
||||
{"name": "Guinea-Bissau", "iso": "gw", "dial": "+245"},
|
||||
{"name": "Guyana", "iso": "gy", "dial": "+592"},
|
||||
{"name": "Haiti", "iso": "ht", "dial": "+509"},
|
||||
{"name": "Honduras", "iso": "hn", "dial": "+504"},
|
||||
{"name": "Hong Kong", "iso": "hk", "dial": "+852"},
|
||||
{"name": "Hungary", "iso": "hu", "dial": "+36"},
|
||||
{"name": "Iceland", "iso": "is", "dial": "+354"},
|
||||
{"name": "India", "iso": "in", "dial": "+91"},
|
||||
{"name": "Indonesia", "iso": "id", "dial": "+62"},
|
||||
{"name": "Iran", "iso": "ir", "dial": "+98"},
|
||||
{"name": "Iraq", "iso": "iq", "dial": "+964"},
|
||||
{"name": "Ireland", "iso": "ie", "dial": "+353"},
|
||||
{"name": "Israel", "iso": "il", "dial": "+972"},
|
||||
{"name": "Italy", "iso": "it", "dial": "+39"},
|
||||
{"name": "Ivory Coast", "iso": "ci", "dial": "+225"},
|
||||
{"name": "Jamaica", "iso": "jm", "dial": "+1876"},
|
||||
{"name": "Japan", "iso": "jp", "dial": "+81"},
|
||||
{"name": "Jordan", "iso": "jo", "dial": "+962"},
|
||||
{"name": "Kazakhstan", "iso": "kz", "dial": "+7"},
|
||||
{"name": "Kenya", "iso": "ke", "dial": "+254"},
|
||||
{"name": "Kiribati", "iso": "ki", "dial": "+686"},
|
||||
{"name": "Kosovo", "iso": "xk", "dial": "+383"},
|
||||
{"name": "Kuwait", "iso": "kw", "dial": "+965"},
|
||||
{"name": "Kyrgyzstan", "iso": "kg", "dial": "+996"},
|
||||
{"name": "Laos", "iso": "la", "dial": "+856"},
|
||||
{"name": "Latvia", "iso": "lv", "dial": "+371"},
|
||||
{"name": "Lebanon", "iso": "lb", "dial": "+961"},
|
||||
{"name": "Lesotho", "iso": "ls", "dial": "+266"},
|
||||
{"name": "Liberia", "iso": "lr", "dial": "+231"},
|
||||
{"name": "Libya", "iso": "ly", "dial": "+218"},
|
||||
{"name": "Liechtenstein", "iso": "li", "dial": "+423"},
|
||||
{"name": "Lithuania", "iso": "lt", "dial": "+370"},
|
||||
{"name": "Luxembourg", "iso": "lu", "dial": "+352"},
|
||||
{"name": "Macao", "iso": "mo", "dial": "+853"},
|
||||
{"name": "Madagascar", "iso": "mg", "dial": "+261"},
|
||||
{"name": "Malawi", "iso": "mw", "dial": "+265"},
|
||||
{"name": "Malaysia", "iso": "my", "dial": "+60"},
|
||||
{"name": "Maldives", "iso": "mv", "dial": "+960"},
|
||||
{"name": "Mali", "iso": "ml", "dial": "+223"},
|
||||
{"name": "Malta", "iso": "mt", "dial": "+356"},
|
||||
{"name": "Marshall Islands", "iso": "mh", "dial": "+692"},
|
||||
{"name": "Mauritania", "iso": "mr", "dial": "+222"},
|
||||
{"name": "Mauritius", "iso": "mu", "dial": "+230"},
|
||||
{"name": "Mexico", "iso": "mx", "dial": "+52"},
|
||||
{"name": "Micronesia", "iso": "fm", "dial": "+691"},
|
||||
{"name": "Moldova", "iso": "md", "dial": "+373"},
|
||||
{"name": "Monaco", "iso": "mc", "dial": "+377"},
|
||||
{"name": "Mongolia", "iso": "mn", "dial": "+976"},
|
||||
{"name": "Montenegro", "iso": "me", "dial": "+382"},
|
||||
{"name": "Morocco", "iso": "ma", "dial": "+212"},
|
||||
{"name": "Mozambique", "iso": "mz", "dial": "+258"},
|
||||
{"name": "Myanmar", "iso": "mm", "dial": "+95"},
|
||||
{"name": "Namibia", "iso": "na", "dial": "+264"},
|
||||
{"name": "Nauru", "iso": "nr", "dial": "+674"},
|
||||
{"name": "Nepal", "iso": "np", "dial": "+977"},
|
||||
{"name": "Netherlands", "iso": "nl", "dial": "+31"},
|
||||
{"name": "New Zealand", "iso": "nz", "dial": "+64"},
|
||||
{"name": "Nicaragua", "iso": "ni", "dial": "+505"},
|
||||
{"name": "Niger", "iso": "ne", "dial": "+227"},
|
||||
{"name": "Nigeria", "iso": "ng", "dial": "+234"},
|
||||
{"name": "North Macedonia", "iso": "mk", "dial": "+389"},
|
||||
{"name": "Norway", "iso": "no", "dial": "+47"},
|
||||
{"name": "Oman", "iso": "om", "dial": "+968"},
|
||||
{"name": "Pakistan", "iso": "pk", "dial": "+92"},
|
||||
{"name": "Palau", "iso": "pw", "dial": "+680"},
|
||||
{"name": "Palestine", "iso": "ps", "dial": "+970"},
|
||||
{"name": "Panama", "iso": "pa", "dial": "+507"},
|
||||
{"name": "Papua New Guinea", "iso": "pg", "dial": "+675"},
|
||||
{"name": "Paraguay", "iso": "py", "dial": "+595"},
|
||||
{"name": "Peru", "iso": "pe", "dial": "+51"},
|
||||
{"name": "Philippines", "iso": "ph", "dial": "+63"},
|
||||
{"name": "Poland", "iso": "pl", "dial": "+48"},
|
||||
{"name": "Portugal", "iso": "pt", "dial": "+351"},
|
||||
{"name": "Qatar", "iso": "qa", "dial": "+974"},
|
||||
{"name": "Romania", "iso": "ro", "dial": "+40"},
|
||||
{"name": "Russia", "iso": "ru", "dial": "+7"},
|
||||
{"name": "Rwanda", "iso": "rw", "dial": "+250"},
|
||||
{"name": "Saint Kitts and Nevis", "iso": "kn", "dial": "+1869"},
|
||||
{"name": "Saint Lucia", "iso": "lc", "dial": "+1758"},
|
||||
{"name": "Saint Vincent and the Grenadines", "iso": "vc", "dial": "+1784"},
|
||||
{"name": "Samoa", "iso": "ws", "dial": "+685"},
|
||||
{"name": "San Marino", "iso": "sm", "dial": "+378"},
|
||||
{"name": "Sao Tome and Principe", "iso": "st", "dial": "+239"},
|
||||
{"name": "Saudi Arabia", "iso": "sa", "dial": "+966"},
|
||||
{"name": "Senegal", "iso": "sn", "dial": "+221"},
|
||||
{"name": "Serbia", "iso": "rs", "dial": "+381"},
|
||||
{"name": "Seychelles", "iso": "sc", "dial": "+248"},
|
||||
{"name": "Sierra Leone", "iso": "sl", "dial": "+232"},
|
||||
{"name": "Singapore", "iso": "sg", "dial": "+65"},
|
||||
{"name": "Slovakia", "iso": "sk", "dial": "+421"},
|
||||
{"name": "Slovenia", "iso": "si", "dial": "+386"},
|
||||
{"name": "Solomon Islands", "iso": "sb", "dial": "+677"},
|
||||
{"name": "Somalia", "iso": "so", "dial": "+252"},
|
||||
{"name": "South Africa", "iso": "za", "dial": "+27"},
|
||||
{"name": "South Korea", "iso": "kr", "dial": "+82"},
|
||||
{"name": "South Sudan", "iso": "ss", "dial": "+211"},
|
||||
{"name": "Spain", "iso": "es", "dial": "+34"},
|
||||
{"name": "Sudan", "iso": "sd", "dial": "+249"},
|
||||
{"name": "Suriname", "iso": "sr", "dial": "+597"},
|
||||
{"name": "Sweden", "iso": "se", "dial": "+46"},
|
||||
{"name": "Switzerland", "iso": "ch", "dial": "+41"},
|
||||
{"name": "Taiwan", "iso": "tw", "dial": "+886"},
|
||||
{"name": "Tajikistan", "iso": "tj", "dial": "+992"},
|
||||
{"name": "Tanzania", "iso": "tz", "dial": "+255"},
|
||||
{"name": "Thailand", "iso": "th", "dial": "+66"},
|
||||
{"name": "Timor-Leste", "iso": "tl", "dial": "+670"},
|
||||
{"name": "Togo", "iso": "tg", "dial": "+228"},
|
||||
{"name": "Tonga", "iso": "to", "dial": "+676"},
|
||||
{"name": "Trinidad and Tobago", "iso": "tt", "dial": "+1868"},
|
||||
{"name": "Tunisia", "iso": "tn", "dial": "+216"},
|
||||
{"name": "Turkey", "iso": "tr", "dial": "+90"},
|
||||
{"name": "Turkmenistan", "iso": "tm", "dial": "+993"},
|
||||
{"name": "Uganda", "iso": "ug", "dial": "+256"},
|
||||
{"name": "Ukraine", "iso": "ua", "dial": "+380"},
|
||||
{"name": "United Arab Emirates", "iso": "ae", "dial": "+971"},
|
||||
{"name": "United Kingdom", "iso": "gb", "dial": "+44"},
|
||||
{"name": "United States", "iso": "us", "dial": "+1"},
|
||||
{"name": "Uruguay", "iso": "uy", "dial": "+598"},
|
||||
{"name": "Uzbekistan", "iso": "uz", "dial": "+998"},
|
||||
{"name": "Vanuatu", "iso": "vu", "dial": "+678"},
|
||||
{"name": "Vatican City", "iso": "va", "dial": "+379"},
|
||||
{"name": "Venezuela", "iso": "ve", "dial": "+58"},
|
||||
{"name": "Vietnam", "iso": "vn", "dial": "+84"},
|
||||
{"name": "Yemen", "iso": "ye", "dial": "+967"},
|
||||
{"name": "Zambia", "iso": "zm", "dial": "+260"},
|
||||
{"name": "Zimbabwe", "iso": "zw", "dial": "+263"}
|
||||
];
|
||||
|
||||
/* ===============================
|
||||
Build dropdown list
|
||||
================================ */
|
||||
const $countryList = $('#country-list');
|
||||
|
||||
// countries.forEach(c => {
|
||||
// $menu.append(`
|
||||
// <a class="dropdown-item" href="#" data-iso="${c.iso}" data-dial="${c.dial}">
|
||||
// <span class="fi fi-${c.iso}"></span>
|
||||
// <span>${c.name} (${c.dial})</span>
|
||||
// </a>
|
||||
// `);
|
||||
// });
|
||||
|
||||
|
||||
function renderCountries(list) {
|
||||
$countryList.empty();
|
||||
|
||||
list.forEach(c => {
|
||||
$countryList.append(`
|
||||
<a class="dropdown-item" href="#" data-iso="${c.iso}" data-dial="${c.dial}">
|
||||
<span class="fi fi-${c.iso}"></span>
|
||||
<span>${c.name} (${c.dial})</span>
|
||||
</a>
|
||||
`);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
renderCountries(countries);
|
||||
|
||||
|
||||
/* ===============================
|
||||
Select country
|
||||
================================ */
|
||||
$countryList.on('click', '.dropdown-item', function (e) {
|
||||
e.preventDefault();
|
||||
$('.country-select .fi')
|
||||
.attr('class', 'fi fi-' + $(this).data('iso'));
|
||||
$('.country-code').text($(this).data('dial'));
|
||||
});
|
||||
|
||||
/* ===============================
|
||||
Search country
|
||||
================================
|
||||
|
||||
*/
|
||||
|
||||
$("#country-search").on("input",function(){
|
||||
|
||||
const keyword = $(this).val().toLowerCase();
|
||||
|
||||
filtered = countries.filter(function(c){
|
||||
return c.name.toLowerCase().includes(keyword) ||
|
||||
c.dial.includes(keyword)
|
||||
});
|
||||
|
||||
renderCountries(self.filtered);
|
||||
|
||||
});
|
||||
|
||||
$(document).on('click', '.password-toggle', function () {
|
||||
const $toggle = $(this);
|
||||
const $wrapper = $toggle.closest('.password-wrapper');
|
||||
const $input = $wrapper.find('input[type="password"], input[type="text"]').first();
|
||||
const $eyeIcon = $toggle.find('.eye-icon');
|
||||
const isPassword = $input.attr('type') === 'password';
|
||||
|
||||
|
||||
$input.attr('type', isPassword ? 'text' : 'password');
|
||||
|
||||
if (isPassword) {
|
||||
$eyeIcon.html(`
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7
|
||||
-1.274 4.057-5.064 7-9.542 7
|
||||
-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
`);
|
||||
} else {
|
||||
$eyeIcon.html(`
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13.875 18.825A10.05 10.05 0 0112 19
|
||||
c-4.478 0-8.268-2.943-9.543-7
|
||||
a9.97 9.97 0 011.563-3.029
|
||||
m5.858.908a3 3 0 114.243 4.243
|
||||
M9.878 9.878l4.242 4.242
|
||||
M9.88 9.88l-3.29-3.29
|
||||
m7.532 7.532l3.29 3.29
|
||||
M3 3l3.59 3.59
|
||||
m0 0A9.953 9.953 0 0112 5
|
||||
c4.478 0 8.268 2.943 9.543 7
|
||||
a10.025 10.025 0 01-4.132 5.411
|
||||
m0 0L21 21"/>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!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>register 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 rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
|
||||
onerror="this.onerror=null;this.href='/assets/flag-icons.min.css';"> -->
|
||||
<link rel="stylesheet"
|
||||
href="../assets/flagicon/css/flag-icons.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/login.css" rel="">
|
||||
</head>
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<main class="main register-page-success d-flex align-items-center" id="login">
|
||||
|
||||
<div class="container">
|
||||
<div class="page-wrap">
|
||||
<div class="verify-card"><!-- Icon -->
|
||||
<div class="verify-icon">
|
||||
<img src="../assets/images/backgrounds/icon/email-icon.png">
|
||||
</div><!-- Title -->
|
||||
<h1 class="verify-title" id="mainTitle">Check Your Inbox</h1><!-- Alert box -->
|
||||
<div class="verify-alert">
|
||||
<div class="verify-alert__icon">
|
||||
!
|
||||
</div>
|
||||
<div class="verify-alert__text">
|
||||
<div id="alertLine1">
|
||||
You need to verify your email address to activate your account.We have sent you a secure login link. Please click the link to authenticate.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- Button --> <button class="btn-verify" id="loginButton"> <span id="buttonText">Back to login</span> </button> <!-- Footer -->
|
||||
<div class="verify-footer"><span class="verify-footer__text" id="footerText">Email didn't arrive?</span> <a href="javascript:void(0)" class="verify-footer__link" id="resendLink">Resend again</a>
|
||||
</div>
|
||||
<div class="bg-orange-bottom"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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>user signup success 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 rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
|
||||
onerror="this.onerror=null;this.href='/assets/flag-icons.min.css';"> -->
|
||||
<link rel="stylesheet"
|
||||
href="../assets/flagicon/css/flag-icons.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/login.css" rel="">
|
||||
</head>
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
<main class="main register-page-success d-flex align-items-center" id="login">
|
||||
|
||||
<div class="container">
|
||||
<div class="page-wrap">
|
||||
<div class="verify-card"><!-- Icon -->
|
||||
<div class="verify-icon">
|
||||
<img src="../assets/images/backgrounds/icon/email-icon.png">
|
||||
</div><!-- Title -->
|
||||
<h1 class="verify-title" id="mainTitle">Check Your Inbox</h1><!-- Alert box -->
|
||||
<div class="verify-alert">
|
||||
<div class="verify-alert__icon">
|
||||
!
|
||||
</div>
|
||||
<div class="verify-alert__text">
|
||||
<div id="alertLine1">
|
||||
You need to verify your email address to activate your account.We have sent you a secure login link. Please click the link to authenticate.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- Button -->
|
||||
|
||||
<button class="btn-verify" id="loginButton"> <span id="buttonText">Back to login</span> </button>
|
||||
<!-- Footer -->
|
||||
<div class="verify-footer">
|
||||
<span class="verify-footer__text" id="footerText">Email didn't arrive?</span>
|
||||
<a href="javascript:void(0)" class="verify-footer__link" id="resendLink">Resend again</a>
|
||||
</div>
|
||||
<div class="bg-orange-bottom"></div>
|
||||
<div id="resend-msg" class="text-orange">already send email</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Video Player</title>
|
||||
|
||||
<style>
|
||||
.yt-player {
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.yt-player .container {
|
||||
/* max-width: 1100px; */
|
||||
margin: 0 auto;
|
||||
padding: 12px;
|
||||
padding-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 2.5fr 0.9fr;
|
||||
gap: 16px;
|
||||
background: #19191a;
|
||||
}
|
||||
|
||||
|
||||
.yt-player .player {
|
||||
width: 100%;
|
||||
/* border-radius: 12px; */
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.yt-player .player iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.yt-player .list {
|
||||
overflow-y: auto;
|
||||
padding-right: 6px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
.yt-player .list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.yt-player .list::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.25);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
|
||||
.yt-player .item {
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.yt-player .item:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
|
||||
.yt-player .item.active {
|
||||
border-right: 5px solid #a19e9b5c;
|
||||
/* padding-right: 3px; */
|
||||
}
|
||||
|
||||
|
||||
.yt-player .thumb {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
height: 130px;
|
||||
/* border-radius: 10px; */
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.yt-player .thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.yt-player .play-mini {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.yt-player .play-mini div {
|
||||
width: 36px;
|
||||
height: 30px;
|
||||
/* background: rgba(0, 0, 0, 0.6); */
|
||||
border-radius: 25%;
|
||||
position: relative;
|
||||
background: #F98715;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.yt-player .play-mini div::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-35%, -50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12px solid white;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.yt-player .container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.yt-player .player {
|
||||
height: 260px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 768px) {
|
||||
.yt-player .thumb {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="yt-player">
|
||||
<div class="container">
|
||||
<div class="player" id="playerWrap">
|
||||
<iframe id="player"
|
||||
src="https://www.youtube.com/embed/48fvMsfZbXA?rel=0"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="list" id="list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const videos = [
|
||||
{ id: "48fvMsfZbXA" },
|
||||
{ id: "-zOBe7aB5ps" },
|
||||
{ id: "2krWtQ9v4i4" },
|
||||
|
||||
];
|
||||
|
||||
const list = document.getElementById('list');
|
||||
const player = document.getElementById('player');
|
||||
const playerWrap = document.getElementById('playerWrap');
|
||||
|
||||
let currentId = videos[0].id;
|
||||
|
||||
|
||||
function render() {
|
||||
list.innerHTML = '';
|
||||
|
||||
videos.forEach(v => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'item' + (v.id === currentId ? ' active' : '');
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="thumb">
|
||||
<img src="https://img.youtube.com/vi/${v.id}/hqdefault.jpg">
|
||||
<div class="play-mini"><div></div></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
item.onclick = () => {
|
||||
currentId = v.id;
|
||||
player.src = `https://www.youtube.com/embed/${v.id}?autoplay=1`;
|
||||
render();
|
||||
syncHeight();
|
||||
scrollToActive();
|
||||
};
|
||||
|
||||
list.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function syncHeight() {
|
||||
const items = document.querySelectorAll('.yt-player .item');
|
||||
if (items.length < 3) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
height += items[i].offsetHeight;
|
||||
}
|
||||
|
||||
height += 17;
|
||||
height *= 1.05;
|
||||
|
||||
playerWrap.style.height = height-10 + 'px';
|
||||
list.style.height = height + 'px';
|
||||
}
|
||||
|
||||
|
||||
function scrollToActive() {
|
||||
const active = document.querySelector('.yt-player .item.active');
|
||||
if (!active) return;
|
||||
|
||||
const listRect = list.getBoundingClientRect();
|
||||
const itemRect = active.getBoundingClientRect();
|
||||
|
||||
const offset = itemRect.top - listRect.top - list.clientHeight / 2 + itemRect.height / 2;
|
||||
|
||||
list.scrollBy({
|
||||
top: offset,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
window.onload = () => {
|
||||
render();
|
||||
setTimeout(syncHeight, 100);
|
||||
};
|
||||
|
||||
window.onresize = syncHeight;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user