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,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>
|
||||
Reference in New Issue
Block a user