steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
1473 lines
72 KiB
HTML
1473 lines
72 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 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/affiliate_register.css" rel="">
|
||
</head>
|
||
|
||
<body class="aifo-bg-primary">
|
||
|
||
<main class="login-page d-flex align-items-center" id="affliate-register">
|
||
|
||
<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 class="needs-validation" id="registrationForm" novalidate>
|
||
<div class="form-group">
|
||
<label class="form-label" id="username-label">User name</label>
|
||
<input type="text" class="form-control" name="username" id="username" value="test"
|
||
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">Email Address</label>
|
||
<input type="text" class="form-control" name="email" id="useremial-label"
|
||
value="test@qq.com" 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">
|
||
|
||
</div>
|
||
|
||
<!-- Phone input -->
|
||
<input type="tel" class="phone-input" placeholder="Enter your phone number"
|
||
value="18018703554" required pattern="^[0-9]{6,15}$">
|
||
</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" value="123456"
|
||
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" id="password-label">Confirm Password</label>
|
||
<div class="password-wrapper">
|
||
<input type="password" class="form-control" id="confirm_password" value="123456"
|
||
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="error-message text-orange d-none" id="signup-server-error">33333333</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-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>
|
||
// 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 $menu = $('.dropdown-menu');
|
||
|
||
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>
|
||
`);
|
||
});
|
||
|
||
/* ===============================
|
||
Select country
|
||
================================ */
|
||
$menu.on('click', '.dropdown-item', function (e) {
|
||
e.preventDefault();
|
||
$('.country-select .fi')
|
||
.attr('class', 'fi fi-' + $(this).data('iso'));
|
||
$('.country-code').text($(this).data('dial'));
|
||
});
|
||
|
||
</script>
|
||
|
||
<script>
|
||
|
||
$(function () {
|
||
|
||
const $registrationForm = $('#registrationForm');
|
||
const $questionnaireModalStep1 = $('#questionnaireModalStep1');
|
||
const $questionnaireModalStep2 = $('#questionnaireModalStep2');
|
||
const $successModal = $('#successModal');
|
||
const $dynamicQuestionContainer = $('#dynamicQuestionContainer');
|
||
// const $nextBtn = $('nextBtn');
|
||
|
||
let dynamicQuestionsMetadata = [];
|
||
|
||
const hideErrors = () => $('.error-message').hide();
|
||
|
||
const validatePrimaryFields = () => {
|
||
hideErrors();
|
||
let isValid = true;
|
||
return true;
|
||
|
||
const firstName = $('#firstName').val().trim();
|
||
if (!firstName) {
|
||
$('#firstNameError').show();
|
||
isValid = false;
|
||
}
|
||
|
||
const lastName = $('#lastName').val().trim();
|
||
if (!lastName) {
|
||
$('#lastNameError').show();
|
||
isValid = false;
|
||
}
|
||
|
||
const email = $('#email').val().trim();
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
if (!email || !emailRegex.test(email)) {
|
||
$('#emailError').show();
|
||
isValid = false;
|
||
}
|
||
|
||
const phone = $('#phone').val().trim();
|
||
if (!phone) {
|
||
$('#phoneError').show();
|
||
isValid = false;
|
||
}
|
||
|
||
const country = $('#country').val();
|
||
if (!country) {
|
||
$('#countryError').show();
|
||
isValid = false;
|
||
}
|
||
|
||
const password = $('#password').val();
|
||
if (password.length < 8) {
|
||
$('#passwordError').show();
|
||
isValid = false;
|
||
}
|
||
|
||
const confirmPassword = $('#confirmPassword').val();
|
||
if (password !== confirmPassword) {
|
||
$('#confirmPasswordError').show();
|
||
isValid = false;
|
||
}
|
||
|
||
return isValid;
|
||
};
|
||
|
||
const validateStep1Questions = () => {
|
||
|
||
const q1 = $('input[name="q1"]:checked').length > 0;
|
||
const q2 = $('#q2').val().trim();
|
||
const q3 = $('input[name="q3"]:checked').length > 0;
|
||
const q4 = $('#q4').val().trim();
|
||
const q5 = $('input[name="q5"]:checked').length > 0;
|
||
const q6 = $('input[name="q6"]:checked').length > 0;
|
||
const q7 = $('#q7').val().trim();
|
||
|
||
|
||
if (q1 && q2 && q3 && q4 && q5 && q6 && q7) {
|
||
return true;
|
||
}
|
||
|
||
alert('Please complete all Step 1 questions before continuing.');
|
||
return false;
|
||
};
|
||
|
||
const validateStep2Questions = () => {
|
||
const requiredRadioGroups = ['q8', 'q9', 'q10', 'q11', 'q12'];
|
||
const radioQuestionsAnswered = requiredRadioGroups.every(name => $(`input[name="${name}"]:checked`).length > 0);
|
||
|
||
const dynamicQuestionsAnswered = dynamicQuestionsMetadata.every(meta => $(`input[name="${meta.name}"]:checked`).length > 0);
|
||
|
||
if (radioQuestionsAnswered && dynamicQuestionsAnswered) {
|
||
return true;
|
||
}
|
||
|
||
alert('Please complete all Step 2 questions before submitting.');
|
||
return false;
|
||
};
|
||
|
||
const collectFormData = () => ({
|
||
firstName: $('#firstName').val().trim(),
|
||
lastName: $('#lastName').val().trim(),
|
||
email: $('#email').val().trim(),
|
||
phone: $('#phone').val().trim(),
|
||
country: $('#country').val(),
|
||
password: $('#password').val().trim(),
|
||
confirmPassword: $('#confirmPassword').val().trim(),
|
||
questionnaire: {
|
||
q1: $('input[name="q1"]:checked').val() || '',
|
||
q2: $('#q2').val().trim(),
|
||
q3: $('input[name="q3"]:checked').val() || '',
|
||
q4: $('#q4').val().trim(),
|
||
q5: $('input[name="q5"]:checked').val() || '',
|
||
q6: $('input[name="q6"]:checked').val() || '',
|
||
q7: $('#q7').val().trim(),
|
||
q8: $('input[name="q8"]:checked').val() || '',
|
||
q9: $('input[name="q9"]:checked').val() || '',
|
||
q10: $('input[name="q10"]:checked').val() || '',
|
||
q11: $('input[name="q11"]:checked').val() || '',
|
||
q12: $('input[name="q12"]:checked').val() || '',
|
||
}
|
||
});
|
||
|
||
$registrationForm.on('submit', function (e) {
|
||
const action = $(e.originalEvent?.submitter).data('action') || 'open-questionnaire';
|
||
|
||
e.preventDefault();
|
||
|
||
if (action === 'open-questionnaire') {
|
||
if (validatePrimaryFields()) {
|
||
$questionnaireModalStep1.css('display', 'flex');
|
||
$questionnaireModalStep2.hide();
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (action === 'open-step2') {
|
||
if (!validateStep1Questions()) {
|
||
return;
|
||
}
|
||
|
||
$questionnaireModalStep1.hide();
|
||
$questionnaireModalStep2.css('display', 'flex');
|
||
return;
|
||
}
|
||
|
||
if (action === 'submit-questionnaire') {
|
||
const primaryValid = validatePrimaryFields();
|
||
const step1Valid = validateStep1Questions(); // validate step 1
|
||
const step2Valid = validateStep2Questions(); // validate step 2
|
||
|
||
if (!(primaryValid && step1Valid && step2Valid)) {
|
||
return;
|
||
}
|
||
|
||
console.log('Registration Data:', collectFormData());
|
||
|
||
$questionnaireModalStep1.hide();
|
||
$questionnaireModalStep2.hide();
|
||
$successModal.css('display', 'flex');
|
||
|
||
$registrationForm[0].reset();
|
||
$dynamicQuestionContainer.empty();
|
||
dynamicQuestionsMetadata = [];
|
||
}
|
||
});
|
||
|
||
const closeQuestionModals = () => {
|
||
// $questionnaireModalStep1.hide();
|
||
$questionnaireModalStep2.hide();
|
||
};
|
||
|
||
$('#closeModalStep1').on('click', () => {
|
||
$questionnaireModalStep1.hide();
|
||
});
|
||
|
||
$('#closeModalStep2').on('click', closeQuestionModals);
|
||
|
||
// Back to previous step button
|
||
$('#backToStep1Btn').on('click', () => {
|
||
$questionnaireModalStep2.hide();
|
||
$questionnaireModalStep1.css('display', 'flex');
|
||
});
|
||
|
||
// Next step button
|
||
// $questionnaireModalStep1.on('click', function (e) {
|
||
// if ($(e.target).is(this)) {
|
||
// closeQuestionModals();
|
||
// }
|
||
// });
|
||
// Next step button
|
||
$('#nextBtn').on('click', () => {
|
||
|
||
if (!validateStep1Questions()) {
|
||
return;
|
||
}
|
||
$questionnaireModalStep1.hide();
|
||
|
||
$questionnaireModalStep2.css('display', 'flex');
|
||
});
|
||
|
||
|
||
$questionnaireModalStep2.on('click', function (e) {
|
||
if ($(e.target).is(this)) {
|
||
closeQuestionModals();
|
||
}
|
||
});
|
||
|
||
$('#confirmPassword').on('input', function () {
|
||
const password = $('#password').val();
|
||
const confirmPassword = $(this).val();
|
||
const $errorElement = $('#confirmPasswordError');
|
||
|
||
if (password !== confirmPassword && confirmPassword.length > 0) {
|
||
$errorElement.show();
|
||
} else {
|
||
$errorElement.hide();
|
||
}
|
||
});
|
||
|
||
$('#password').on('input', function () {
|
||
const $errorElement = $('#passwordError');
|
||
const value = $(this).val();
|
||
|
||
if (value.length < 8 && value.length > 0) {
|
||
$errorElement.show();
|
||
} else {
|
||
$errorElement.hide();
|
||
}
|
||
});
|
||
|
||
$('#closeSuccessBtn, #closeSuccessModal').on('click', () => {
|
||
$successModal.hide();
|
||
});
|
||
|
||
$successModal.on('click', function (e) {
|
||
if ($(e.target).is(this)) {
|
||
$(this).hide();
|
||
}
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
<!-- 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();
|
||
|
||
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>
|
||
|
||
|
||
<!-- step3 q1 -->
|
||
|
||
<script>
|
||
const question_step1_defaultConfig = {
|
||
back_text: "Back",
|
||
cta_button_text: "Start Earning",
|
||
question_1_title: "Are you aware that trading CFDs and leveraged products involve a high risk of losing money?",
|
||
question_2_title: "How do you educate your clients about trading risks?",
|
||
question_3_title: "What steps do you take to ensure responsible trading among your clients?",
|
||
question_4_title: "If a client experiences losses and complains, how would you handle the situation?",
|
||
question_5_title: "How do you ensure a long-term and mutually beneficial relationship as an IB?"
|
||
};
|
||
|
||
async function onConfigChange(config) {
|
||
document.getElementById('backText').textContent = config.back_text || question_step1_defaultConfig.back_text;
|
||
document.getElementById('ctaButtonText').textContent = config.cta_button_text || question_step1_defaultConfig.cta_button_text;
|
||
document.getElementById('question1Title').textContent = config.question_1_title || question_step1_defaultConfig.question_1_title;
|
||
document.getElementById('question2Title').textContent = config.question_2_title || question_step1_defaultConfig.question_2_title;
|
||
document.getElementById('question3Title').textContent = config.question_3_title || question_step1_defaultConfig.question_3_title;
|
||
document.getElementById('question4Title').textContent = config.question_4_title || question_step1_defaultConfig.question_4_title;
|
||
document.getElementById('question5Title').textContent = config.question_5_title || question_step1_defaultConfig.question_5_title;
|
||
}
|
||
|
||
if (window.elementSdk) {
|
||
window.elementSdk.init({
|
||
question_step1_defaultConfig: question_step1_defaultConfig,
|
||
onConfigChange: onConfigChange,
|
||
mapToCapabilities: (config) => ({
|
||
recolorables: [],
|
||
borderables: [],
|
||
fontEditable: undefined,
|
||
fontSizeable: undefined
|
||
}),
|
||
mapToEditPanelValues: (config) => new Map([
|
||
["back_text", config.back_text || question_step1_defaultConfig.back_text],
|
||
["cta_button_text", config.cta_button_text || question_step1_defaultConfig.cta_button_text],
|
||
["question_1_title", config.question_1_title || question_step1_defaultConfig.question_1_title],
|
||
["question_2_title", config.question_2_title || question_step1_defaultConfig.question_2_title],
|
||
["question_3_title", config.question_3_title || question_step1_defaultConfig.question_3_title],
|
||
["question_4_title", config.question_4_title || question_step1_defaultConfig.question_4_title],
|
||
["question_5_title", config.question_5_title || question_step1_defaultConfig.question_5_title]
|
||
])
|
||
});
|
||
}
|
||
|
||
$(document).ready(function() {
|
||
// Validation function
|
||
function validateForm() {
|
||
let isValid = true;
|
||
$('.question-section').each(function() {
|
||
const questionNum = $(this).data('question');
|
||
const checked = $(this).find('input[type="checkbox"]:checked').length;
|
||
|
||
if (checked === 0) {
|
||
$(this).addClass('has-error');
|
||
isValid = false;
|
||
} else {
|
||
$(this).removeClass('has-error');
|
||
}
|
||
});
|
||
|
||
return isValid;
|
||
}
|
||
|
||
// Update button state
|
||
function updateButtonState() {
|
||
const isValid = validateForm();
|
||
$('#submitButton').prop('disabled', !isValid);
|
||
}
|
||
|
||
// Listen to all checkbox changes
|
||
$('input[type="checkbox"]').on('change', function() {
|
||
updateButtonState();
|
||
});
|
||
|
||
// Back button
|
||
$('#backButton').on('click', function(e) {
|
||
e.preventDefault();
|
||
// window.history.back();
|
||
|
||
});
|
||
|
||
// Form submission
|
||
$('#submitButton').on('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
if (!validateForm()) {
|
||
|
||
const firstError = $('.question-section.has-error').first();
|
||
if (firstError.length) {
|
||
firstError[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Collect all selected answers
|
||
const answers = {};
|
||
$('.question-section').each(function() {
|
||
const questionNum = $(this).data('question');
|
||
const selected = [];
|
||
$(this).find('input[type="checkbox"]:checked').each(function() {
|
||
selected.push($(this).val());
|
||
});
|
||
answers['question_' + questionNum] = selected;
|
||
});
|
||
|
||
// Show success message
|
||
const $button = $(this);
|
||
const originalText = $button.text();
|
||
$button.text('Success!').css('background', '#10b981');
|
||
|
||
setTimeout(function() {
|
||
$button.text(originalText).css('background', '');
|
||
}, 2000);
|
||
|
||
console.log('Questionnaire answers:', answers);
|
||
});
|
||
|
||
// Initialize button state
|
||
updateButtonState();
|
||
});
|
||
</script>
|
||
|
||
|
||
<!-- step 2 -->
|
||
|
||
<script>
|
||
let platformCounter = 1;
|
||
|
||
const question_step2_defaultConfig = {
|
||
back_button_text: "Back",
|
||
question_1_title: "How many years of experience do you have in prop trading?",
|
||
question_2_title: "Which prop trading platforms have you previously partnered with?",
|
||
question_3_title: "Do you have a registered company, or are you an independent IB?",
|
||
question_4_title: "What marketing channels do you primarily use to attract new clients?",
|
||
links_section_title: "Links & ownership files",
|
||
add_platform_link_text: "Add platform",
|
||
youtube_placeholder: "Youtube URL",
|
||
attach_file_button_text: "Attach File",
|
||
question_5_title: "How many customers do you estimate you can bring in each month?",
|
||
question_6_title: "What types of clients do you usually work with?",
|
||
question_7_title: "Which prop trading platforms have you previously partnered with?",
|
||
submit_button_text: "Add Platform"
|
||
};
|
||
|
||
async function onConfigChange(config) {
|
||
document.getElementById('back-text').textContent = config.back_button_text || question_step2_defaultConfig.back_button_text;
|
||
document.getElementById('question-1-title').textContent = config.question_1_title || question_step2_defaultConfig.question_1_title;
|
||
document.getElementById('question-2-title').textContent = config.question_2_title || question_step2_defaultConfig.question_2_title;
|
||
document.getElementById('question-3-title').textContent = config.question_3_title || question_step2_defaultConfig.question_3_title;
|
||
document.getElementById('question-4-title').textContent = config.question_4_title || question_step2_defaultConfig.question_4_title;
|
||
document.getElementById('links-title').textContent = config.links_section_title || question_step2_defaultConfig.links_section_title;
|
||
document.getElementById('add-platform-text').textContent = config.add_platform_link_text || question_step2_defaultConfig.add_platform_link_text;
|
||
document.getElementById('question-5-title').textContent = config.question_5_title || question_step2_defaultConfig.question_5_title;
|
||
document.getElementById('question-6-title').textContent = config.question_6_title || question_step2_defaultConfig.question_6_title;
|
||
document.getElementById('question-7-title').textContent = config.question_7_title || question_step2_defaultConfig.question_7_title;
|
||
document.getElementById('submit-button').textContent = config.submit_button_text || question_step2_defaultConfig.submit_button_text;
|
||
document.getElementById('attach-text').textContent = config.attach_file_button_text || question_step2_defaultConfig.attach_file_button_text;
|
||
}
|
||
|
||
function mapToEditPanelValues(config) {
|
||
return new Map([
|
||
["back_button_text", config.back_button_text || question_step2_defaultConfig.back_button_text],
|
||
["question_1_title", config.question_1_title || question_step2_defaultConfig.question_1_title],
|
||
["question_2_title", config.question_2_title || question_step2_defaultConfig.question_2_title],
|
||
["question_3_title", config.question_3_title || question_step2_defaultConfig.question_3_title],
|
||
["question_4_title", config.question_4_title || question_step2_defaultConfig.question_4_title],
|
||
["links_section_title", config.links_section_title || question_step2_defaultConfig.links_section_title],
|
||
["add_platform_link_text", config.add_platform_link_text || question_step2_defaultConfig.add_platform_link_text],
|
||
["youtube_placeholder", config.youtube_placeholder || question_step2_defaultConfig.youtube_placeholder],
|
||
["attach_file_button_text", config.attach_file_button_text || question_step2_defaultConfig.attach_file_button_text],
|
||
["question_5_title", config.question_5_title || question_step2_defaultConfig.question_5_title],
|
||
["question_6_title", config.question_6_title || question_step2_defaultConfig.question_6_title],
|
||
["question_7_title", config.question_7_title || question_step2_defaultConfig.question_7_title],
|
||
["submit_button_text", config.submit_button_text || question_step2_defaultConfig.submit_button_text]
|
||
]);
|
||
}
|
||
|
||
function mapToCapabilities(config) {
|
||
return {
|
||
recolorables: [],
|
||
borderables: [],
|
||
fontEditable: undefined,
|
||
fontSizeable: undefined
|
||
};
|
||
}
|
||
|
||
if (window.elementSdk) {
|
||
window.elementSdk.init({
|
||
question_step2_defaultConfig,
|
||
onConfigChange,
|
||
mapToCapabilities,
|
||
mapToEditPanelValues
|
||
});
|
||
}
|
||
|
||
// Radio-like behavior for checkboxes
|
||
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
||
checkbox.addEventListener('change', function() {
|
||
if (this.checked && this.name) {
|
||
document.querySelectorAll(`input[name="${this.name}"]`).forEach(other => {
|
||
if (other !== this) {
|
||
other.checked = false;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Never checkbox behavior
|
||
// document.getElementById('never-partnered').addEventListener('change', function() {
|
||
// const platformInput = document.getElementById('platform-input');
|
||
// if (this.checked) {
|
||
// platformInput.disabled = true;
|
||
// platformInput.value = '';
|
||
// platformInput.style.opacity = '0.5';
|
||
// } else {
|
||
// platformInput.disabled = false;
|
||
// platformInput.style.opacity = '1';
|
||
// }
|
||
// });
|
||
|
||
function updatePlatformPlaceholder(selectElement) {
|
||
const platformRow = selectElement.closest('.links-row');
|
||
const urlInput = platformRow.querySelector('.platform-url-input');
|
||
const iconContainer = platformRow.querySelector('.input-icon');
|
||
const selectedPlatform = selectElement.value;
|
||
|
||
urlInput.placeholder = `${selectedPlatform} URL`;
|
||
|
||
// Platform icons mapping
|
||
const platformIcons = {
|
||
'YouTube': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M19.582 5.186a2.5 2.5 0 0 0-1.768-1.768C16.254 3 10 3 10 3s-6.254 0-7.814.418A2.5 2.5 0 0 0 .418 5.186 26.24 26.24 0 0 0 0 10c0 1.68.146 3.32.418 4.814a2.5 2.5 0 0 0 1.768 1.768C3.746 17 10 17 10 17s6.254 0 7.814-.418a2.5 2.5 0 0 0 1.768-1.768C19.854 13.32 20 11.68 20 10c0-1.68-.146-3.32-.418-4.814zM8 13V7l5.196 3L8 13z" fill="#FF0000"/></svg>`,
|
||
'Instagram': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><linearGradient id="ig-grad" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#FED576;stop-opacity:1" /><stop offset="50%" style="stop-color:#F47133;stop-opacity:1" /><stop offset="100%" style="stop-color:#BC3081;stop-opacity:1" /></linearGradient><rect x="1" y="1" width="18" height="18" rx="5" fill="url(#ig-grad)"/><circle cx="10" cy="10" r="4.5" fill="none" stroke="white" stroke-width="1.5"/><circle cx="15.5" cy="4.5" r="1" fill="white"/></svg>`,
|
||
'Facebook': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#1877F2"/><path d="M13.75 12.5l.469-3.125H11.25V7.188c0-.86.422-1.688 1.766-1.688h1.359V2.89s-1.234-.211-2.414-.211c-2.461 0-4.086 1.492-4.086 4.195v2.375H5v3.125h2.875V20h3.375v-7.5h2.5z" fill="white"/></svg>`,
|
||
'LinkedIn': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect width="20" height="20" rx="2" fill="#0A66C2"/><path d="M5.5 7.5H3v8h2.5v-8zm.25-2.5c0-.69-.56-1.25-1.375-1.25S2.75 4.31 2.75 5s.56 1.25 1.375 1.25S5.75 5.69 5.75 5zm11.25 10.5h-2.5v-4c0-1-.5-1.5-1.25-1.5s-1.25.5-1.25 1.5v4H9.5v-8h2.5v1.125c.375-.625 1.125-1.375 2.375-1.375 1.625 0 2.625 1 2.625 2.875v5.375z" fill="white"/></svg>`,
|
||
'TikTok': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M16 7.5c-1.5 0-2.75-1-3.25-2.5h-2.5v9c0 1.25-1 2.25-2.25 2.25S5.75 15.25 5.75 14s1-2.25 2.25-2.25c.25 0 .5 0 .75.125V9.375C7.5 9.25 6.25 9.25 6 9.25c-2.625 0-4.75 2.125-4.75 4.75S3.375 18.75 6 18.75s4.75-2.125 4.75-4.75V7.5c1 .75 2.25 1.25 3.5 1.25 1.25 0 2.375-.5 3.25-1.25V5c-1.5 0-2.75-1-3.25-2.5h-2.5v9c0 1.25-1 2.25-2.25 2.25S6.25 12.75 6.25 11.5s1-2.25 2.25-2.25c.25 0 .5 0 .75.125V6.875C8 6.75 6.75 6.75 6.5 6.75c-2.625 0-4.75 2.125-4.75 4.75S3.875 16.25 6.5 16.25s4.75-2.125 4.75-4.75V5c1 .75 2.25 1.25 3.5 1.25" fill="black"/><path d="M16 7.5c-1.5 0-2.75-1-3.25-2.5h-2.5v9c0 1.25-1 2.25-2.25 2.25S5.75 15.25 5.75 14s1-2.25 2.25-2.25c.25 0 .5 0 .75.125V9.375C7.5 9.25 6.25 9.25 6 9.25c-2.625 0-4.75 2.125-4.75 4.75S3.375 18.75 6 18.75s4.75-2.125 4.75-4.75V7.5c1 .75 2.25 1.25 3.5 1.25" fill="#00F2EA"/><path d="M13.25 5v2.5c1.25 0 2.5-.5 3.5-1.25V4.5c-1 .75-2.25 1.25-3.5 1.25V5z" fill="#FF004F"/></svg>`,
|
||
'Snapchat': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 1.5c2.25 0 4 1.75 4 4v4c0 .5.25.75.5.75s.5-.25.75-.5c.25-.25.5-.25.75-.25s.5.25.5.5c0 .5-.25 1-.75 1.25-.25.25-.75.5-1.25.75-.25.25-.5.5-.5.75s.25.5.5.5c1.5.25 2.5.75 3.25 1.5.25.25.5.5.5.75 0 .25-.25.5-.5.5h-1.5c-.5 0-1 .25-1.25.5-.5.5-1 .75-1.75.75h-6c-.75 0-1.25-.25-1.75-.75-.25-.25-.75-.5-1.25-.5H3c-.25 0-.5-.25-.5-.5 0-.25.25-.5.5-.75.75-.75 1.75-1.25 3.25-1.5.25 0 .5-.25.5-.5s-.25-.5-.5-.75c-.5-.25-1-.5-1.25-.75C4.25 11 4 10.5 4 10c0-.25.25-.5.5-.5s.5 0 .75.25c.25.25.5.5.75.5s.5-.25.5-.75V6c0-2.25 1.75-4 4-4z" fill="#FFFC00" stroke="#000" stroke-width="0.5"/></svg>`,
|
||
'Reddit': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#FF4500"/><path d="M16 10c0-.825-.675-1.5-1.5-1.5-.4 0-.775.15-1.05.425-1.05-.75-2.475-1.25-4.05-1.3l.825-3.75 2.575.575c0 .625.5 1.125 1.125 1.125S14.5 5.075 14.5 4.45s-.5-1.125-1.125-1.125c-.45 0-.85.275-1.025.675l-2.875-.65c-.15-.025-.3.075-.325.225l-.9 4.15c-1.625.025-3.1.525-4.175 1.3-.275-.275-.65-.425-1.05-.425C2.175 8.6 1.5 9.275 1.5 10c0 .5.275.95.675 1.2-.025.15-.025.3-.025.45 0 2.275 2.65 4.125 5.925 4.125S14 13.925 14 11.65c0-.15 0-.3-.025-.45.4-.25.675-.7.675-1.2zM5.5 11c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1zm5.825 2.75c-.7.7-2.025.75-2.325.75s-1.625-.05-2.325-.75c-.1-.1-.1-.25 0-.35.1-.1.25-.1.35 0 .45.45 1.4.6 1.975.6s1.525-.15 1.975-.6c.1-.1.25-.1.35 0 .1.1.1.25 0 .35zm-.075-1.75c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" fill="white"/></svg>`,
|
||
'Telegram': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#229ED9"/><path d="M4.5 9.75l10.75-4.25c.5-.2 1 .125.875.875l-1.825 8.625c-.15.65-.55.8-1.1.5L9.75 13l-1.5 1.45c-.175.175-.325.325-.65.325l.225-3.25 5.925-5.35c.25-.225-.05-.35-.4-.125L6.25 11.5l-3.075-.95c-.675-.2-.675-.65.125-.975z" fill="white"/></svg>`,
|
||
'WhatsApp': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#25D366"/><path d="M14.5 5.45C13.45 4.4 12.025 3.8 10.5 3.8c-3.05 0-5.525 2.475-5.525 5.525 0 .975.25 1.925.75 2.75L4.95 15.2l3.175-.825c.8.45 1.7.675 2.625.675h.002c3.05 0 5.525-2.475 5.525-5.525 0-1.475-.575-2.875-1.625-3.925zM10.5 14.2h-.002c-.825 0-1.625-.225-2.325-.625l-.175-.1-1.775.45.475-1.725-.125-.175c-.45-.725-.675-1.55-.675-2.4 0-2.5 2.025-4.525 4.525-4.525 1.2 0 2.35.475 3.2 1.325s1.325 2 1.325 3.2c0 2.5-2.025 4.525-4.525 4.525zm2.475-3.375c-.15-.075-.85-.425-1-.475s-.225-.075-.325.075-.375.475-.475.575-.175.125-.325.05c-.15-.075-.625-.225-1.2-.725-.45-.4-.75-.875-.85-1.025s-.025-.225.05-.3c.075-.075.15-.175.225-.275.075-.1.1-.15.15-.25s.025-.175-.025-.25-.325-.775-.45-1.075c-.125-.275-.25-.25-.325-.25h-.275c-.1 0-.25.025-.375.175s-.5.475-.5 1.175.525 1.375.6 1.475c.075.1 1.05 1.6 2.55 2.25.35.15.625.25.85.325.35.1.675.1.925.05.275-.05.85-.35 1-.675s.15-.625.1-.675-.15-.1-.3-.175z" fill="white"/></svg>`,
|
||
'Discord': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M16.5 3.5c-1.25-.575-2.575-1-4-1.25-.025 0-.05.025-.075.05-.175.325-.375.75-.5 1.075-1.475-.225-2.95-.225-4.4 0-.125-.325-.325-.75-.5-1.075-.025-.025-.05-.05-.075-.05-1.425.25-2.75.675-4 1.25-.025 0-.05.025-.05.05C.75 7.25.075 10.9.4 14.5c0 .025.025.05.05.075 1.65 1.2 3.25 1.925 4.825 2.425.025 0 .05 0 .075-.025.375-.525.725-1.075 1.025-1.65.025-.05 0-.1-.05-.125-.525-.2-1.025-.45-1.5-.75-.05-.025-.05-.1 0-.125.1-.075.2-.15.3-.225.025-.025.05-.025.075 0 3.125 1.425 6.5 1.425 9.575 0 .025-.025.05-.025.075 0 .1.075.2.15.3.225.05.025.05.1 0 .125-.475.3-.975.55-1.5.75-.05.025-.075.075-.05.125.3.575.65 1.125 1.025 1.65.025.025.05.025.075.025 1.575-.5 3.175-1.225 4.825-2.425.025-.025.05-.05.05-.075.375-4.1-.625-7.65-2.65-10.8-.025-.025-.025-.025-.05-.05zM7 12.25c-.875 0-1.6-.8-1.6-1.775s.7-1.775 1.6-1.775c.9 0 1.625.8 1.6 1.775 0 .975-.7 1.775-1.6 1.775zm6 0c-.875 0-1.6-.8-1.6-1.775s.7-1.775 1.6-1.775c.9 0 1.625.8 1.6 1.775 0 .975-.7 1.775-1.6 1.775z" fill="#5865F2"/></svg>`,
|
||
'X': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M11.9 9.3l5.7-6.6h-1.4L11.3 8l-4.5-5.3H3.2l6 8.7-6 7h1.4l4.9-5.7 4.6 5.7h3.6l-6.2-9zm-1.7 2l-.6-.8L4.8 4.5h1.9l3.8 5.5.6.8 4.8 6.9h-1.9l-4-5.8z" fill="black"/></svg>`,
|
||
'Personal Website': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#888" stroke-width="1.5" fill="none"/><ellipse cx="10" cy="10" rx="4" ry="9" stroke="#888" stroke-width="1.5" fill="none"/><line x1="1" y1="10" x2="19" y2="10" stroke="#888" stroke-width="1.5"/><path d="M10 1c1.5 2 2.5 5.5 2.5 9s-1 7-2.5 9" stroke="#888" stroke-width="1.5" fill="none"/><path d="M10 1c-1.5 2-2.5 5.5-2.5 9s1 7 2.5 9" stroke="#888" stroke-width="1.5" fill="none"/></svg>`,
|
||
'Other': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#888" stroke-width="1.5" fill="none"/><circle cx="5" cy="10" r="1.5" fill="#888"/><circle cx="10" cy="10" r="1.5" fill="#888"/><circle cx="15" cy="10" r="1.5" fill="#888"/></svg>`
|
||
};
|
||
|
||
iconContainer.innerHTML = platformIcons[selectedPlatform] || platformIcons['Other'];
|
||
}
|
||
|
||
|
||
|
||
|
||
function handleFileSelect(event, index) {
|
||
const file = event.target.files[0];
|
||
const fileNameDisplay = document.getElementById(`file-name-${index}`);
|
||
|
||
if (file) {
|
||
fileNameDisplay.textContent = `📎 ${file.name}`;
|
||
fileNameDisplay.classList.add('show');
|
||
} else {
|
||
fileNameDisplay.textContent = '';
|
||
fileNameDisplay.classList.remove('show');
|
||
}
|
||
}
|
||
|
||
function handleSubmit() {
|
||
const formData = {
|
||
experience: document.querySelector('input[name="experience"]:checked')?.value,
|
||
platforms: document.getElementById('platform-input').value,
|
||
companyType: document.querySelector('input[name="company-type"]:checked')?.value,
|
||
customers: document.querySelector('input[name="customers"]:checked')?.value,
|
||
clientType: document.querySelector('input[name="client-type"]:checked')?.value
|
||
};
|
||
|
||
const successMessage = document.createElement('div');
|
||
successMessage.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: #F98715;
|
||
color: white;
|
||
padding: 16px 24px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 24px rgba(249, 135, 21, 0.4);
|
||
z-index: 9999;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
`;
|
||
successMessage.textContent = '✓ Form submitted successfully!';
|
||
document.body.appendChild(successMessage);
|
||
|
||
setTimeout(() => {
|
||
successMessage.remove();
|
||
}, 3000);
|
||
}
|
||
</script>
|
||
|
||
|
||
<script>
|
||
function bindRowEvents(row){
|
||
const input = row.find('.platform-input');
|
||
const dropdown = row.find('.platform-dropdown');
|
||
const icon = row.find('.platform-icon');
|
||
const fileInput = row.find('.file-input');
|
||
const attachBtn = row.find('.btn-attach');
|
||
|
||
// platform dropdown
|
||
input.on('focus click', function(){
|
||
$('.platform-dropdown').not(dropdown).hide();
|
||
dropdown.show();
|
||
});
|
||
|
||
dropdown.find('.platform-item').on('click', function(){
|
||
icon.attr('class','fab '+$(this).data('icon')+' platform-icon');
|
||
input.attr('placeholder', $(this).data('name') + ' URL');
|
||
dropdown.hide();
|
||
});
|
||
|
||
// attach click
|
||
attachBtn.on('click', function(){
|
||
fileInput.trigger('click');
|
||
});
|
||
|
||
// file selected
|
||
fileInput.on('change', function(){
|
||
if(this.files.length){
|
||
attachBtn
|
||
.addClass('attached')
|
||
.text(this.files[0].name);
|
||
}
|
||
});
|
||
|
||
// delete row
|
||
row.find('.btn-delete').on('click', function(){
|
||
row.remove();
|
||
});
|
||
}
|
||
|
||
bindRowEvents($('.platform-row'));
|
||
|
||
$(document).on('click', function(e){
|
||
if(!$(e.target).closest('.platform-row').length){
|
||
$('.platform-dropdown').hide();
|
||
}
|
||
});
|
||
|
||
// add platform
|
||
$('.add-platform').on('click', function(){
|
||
const newRow = $('.platform-row:first').clone();
|
||
newRow.find('input[type=text]').val('');
|
||
newRow.find('.file-input').val('');
|
||
newRow.find('.btn-attach')
|
||
.removeClass('attached')
|
||
.text('Attach File');
|
||
newRow.find('.platform-dropdown').hide();
|
||
|
||
$('#platformList').append(newRow);
|
||
bindRowEvents(newRow);
|
||
});
|
||
|
||
</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();
|
||
}
|
||
});
|
||
|
||
$(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> |