steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
378 lines
23 KiB
HTML
378 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="description"
|
||
content="Probably the most complete UI kit out there. Multiple functionalities and controls added, extended color palette and beautiful typography, designed as its own extended version of Bootstrap at the highest level of quality. ">
|
||
<meta name="author" content="Webpixels">
|
||
<title>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> |