steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
724 lines
36 KiB
HTML
724 lines
36 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/question.css" rel="">
|
||
</head>
|
||
|
||
|
||
<body class="aifo-bg-primary">
|
||
|
||
<main class="login-page d-flex align-items-center" id="affliate-register-question">
|
||
|
||
|
||
<!-- Questionnaire Modal - Step 1 -->
|
||
<div class="modal-overlay questionnaireModalStep" id="questionnaireModalStep1" >
|
||
<!-- style="display: flex;" -->
|
||
<div class="questionnaire-modal">
|
||
|
||
<div class="main-container">
|
||
<div class="questionnaire-card">
|
||
<div class="card-content">
|
||
<!-- <button class="back-button" aria-label="Back"> <span
|
||
class="back-icon">←</span> <span class="back-text" id="backText">Back</span>
|
||
</button> -->
|
||
<div class="question_content">
|
||
<form id="questionnaireForm"><!-- Question 1 -->
|
||
<div class="question-section" data-question="1">
|
||
<h2 class="question-title" id="question1Title">How many years of experience do you have in CFD trading?</h2>
|
||
<div class="options-container">
|
||
<div class="custom-checkbox">
|
||
<input type="checkbox" id="q1_option1" name="q1" value="A">
|
||
<label for="q1_option1">
|
||
<span class="checkbox-custom"></span>
|
||
<span>Less than 1 year</span>
|
||
</label>
|
||
</div>
|
||
<div class="custom-checkbox">
|
||
<input type="checkbox" id="q1_option2" name="q1" value="B">
|
||
<label for="q1_option2">
|
||
<span class="checkbox-custom"></span>
|
||
<span>1–3 years</span>
|
||
</label>
|
||
</div>
|
||
<div class="custom-checkbox">
|
||
<input type="checkbox" id="q1_option3" name="q1" value="C">
|
||
<label for="q1_option3">
|
||
<span class="checkbox-custom"></span> <span>3–5 years</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox">
|
||
<input type="checkbox" id="q1_option4" name="q1" value="D">
|
||
<label for="q1_option4">
|
||
<span
|
||
class="checkbox-custom"></span> <span>More than 5 years</span> </label>
|
||
</div>
|
||
</div>
|
||
</div><!-- Question 2 -->
|
||
|
||
<div class="question-section question-block question-section" data-question="2">
|
||
<div class="question-title" id="question-2-title">
|
||
Which prop trading platforms have you previously partnered with?
|
||
</div>
|
||
<div class="mixed-input-row">
|
||
<div class="custom-checkbox">
|
||
<input type="checkbox" id="q2_option1" name="q2" value="A">
|
||
<label for="q2_option1">
|
||
<span class="checkbox-custom"></span>
|
||
<span class="checkbox-label">Never</span>
|
||
</label>
|
||
</div>
|
||
<input type="text" class="form-input" name="q2_other_input" id="platform-input" placeholder="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 3 -->
|
||
<div class="question-section question-block" data-question="3">
|
||
<div class="question-title" id="question-3-title">
|
||
Do you have a registered company, or are you an independent IB?
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="custom-checkbox"><input type="checkbox" name="q3" id="q3_option1"
|
||
value="A">
|
||
|
||
<label for="q3_option1"> <span class="checkbox-custom"></span> <span
|
||
class="checkbox-label">Registered company</span> </label>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="custom-checkbox">
|
||
<input type="checkbox" name="q3"
|
||
value="B" id="q3_option2">
|
||
<label for="q3_option2">
|
||
<span class="checkbox-custom"></span> <span
|
||
class="checkbox-label">Independent IB</span> </label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Question 4 with Links Section -->
|
||
<div class="question-section question-block" data-question="4">
|
||
<div class="question-title" id="question-4-title">
|
||
What marketing channels do you primarily use to attract new clients?
|
||
</div>
|
||
<div class="links-section">
|
||
|
||
<div class="platform-box">
|
||
<div class="d-flex justify-content-between mb-3">
|
||
<strong>Links & ownership files</strong>
|
||
<span class="add-platform">+ Add platform</span>
|
||
</div>
|
||
|
||
<div id="platformList">
|
||
|
||
<div class="platform-row">
|
||
<div class="platform-input-wrap">
|
||
<i class="fab fa-youtube platform-icon"></i>
|
||
<!-- testtest -->
|
||
<input class="form-control platform-input" name="platform-url" placeholder="Platform URL">
|
||
|
||
<div class="platform-dropdown">
|
||
<div class="platform-search">
|
||
<input class="platform-search-input" placeholder="Search platform">
|
||
</div>
|
||
|
||
<div class="platform-list">
|
||
<div class="platform-item" data-name="YouTube" data-icon="fab fa-youtube">
|
||
<i class="fab fa-youtube"></i> YouTube
|
||
</div>
|
||
<div class="platform-item" data-name="Instagram" data-icon="fab fa-instagram">
|
||
<i class="fab fa-instagram"></i> Instagram
|
||
</div>
|
||
<div class="platform-item" data-name="Facebook" data-icon="fab fa-facebook">
|
||
<i class="fab fa-facebook"></i> Facebook
|
||
</div>
|
||
<div class="platform-item" data-name="LinkedIn" data-icon="fab fa-linkedin">
|
||
<i class="fab fa-linkedin"></i> LinkedIn
|
||
</div>
|
||
<div class="platform-item" data-name="TikTok" data-icon="fab fa-tiktok">
|
||
<i class="fab fa-tiktok"></i> TikTok
|
||
</div>
|
||
<div class="platform-item" data-name="Other" data-icon="fas fa-globe">
|
||
<i class="fas fa-globe"></i> Other
|
||
</div>
|
||
</div>
|
||
|
||
<div class="platform-empty">No results</div>
|
||
</div>
|
||
</div>
|
||
|
||
<input type="file" class="file-input">
|
||
<button class="btn btn-attach">Attach File</button>
|
||
<div class="upload-progress"><div class="upload-bar"></div></div>
|
||
<button class="btn-delete"><i class="fas fa-trash"></i></button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- question 5 -->
|
||
<div class="question-section" data-question="5">
|
||
<h2 class="question-title" id="question2Title">How many customers do you estimate you can bring in each month?</h2>
|
||
<div class="options-container">
|
||
<div class="custom-checkbox"><input type="checkbox" id="q5_option1"
|
||
name="q5" value="A"> <label for="q5_option1"> <span
|
||
class="checkbox-custom"></span> <span>>10</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q5_option2"
|
||
name="q5" value="B"> <label for="q5_option2"> <span
|
||
class="checkbox-custom"></span> <span>50-100</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q5_option3"
|
||
name="q5" value="C"> <label for="q5_option3"> <span
|
||
class="checkbox-custom"></span> <span>100-500</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q5_option4"
|
||
name="q5" value="D"> <label for="q5_option4"> <span
|
||
class="checkbox-custom"></span> <span>More than 500</span> </label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 6 -->
|
||
<div class="question-section question-block" data-question="6">
|
||
<div class="question-title" id="question-6-title">
|
||
What types of clients do you usually work with?
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="custom-checkbox"><input type="checkbox" name="q6" id="q6_option1"
|
||
value="Retail traders">
|
||
<label for="q6_option1">
|
||
<span class="checkbox-custom"></span> <span
|
||
class="checkbox-label">Retail traders</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"> <input type="checkbox" name="q6" id="q6_option2"
|
||
value="professional"> <label for="q6_option2"> <span class="checkbox-custom"></span> <span
|
||
class="checkbox-label">Institutional clients</span> </label>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="custom-checkbox"> <input type="checkbox" name="q6" id="q6_option3"
|
||
value="institutional"><label for="q6_option3"> <span class="checkbox-custom"></span> <span
|
||
class="checkbox-label">Professional traders </span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"> <input type="checkbox" name="q6" id="q6_option4"
|
||
value="mixed"><label for="q6_option4"> <span class="checkbox-custom"></span> <span
|
||
class="checkbox-label">Mixed client base</span> </label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- Question 7 -->
|
||
|
||
<div class="question-section question-block" data-question="7">
|
||
<div class="question-title" id="question-7-title">
|
||
Which prop trading platforms have you previously partnered with?
|
||
</div><input type="text" name="q7" class="form-input" placeholder="">
|
||
</div>
|
||
|
||
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="cta-section"><button type="submit" class="cta-button" id="submitButton" >
|
||
<span id="ctaButtonText">Start Earning</span> </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Questionnaire Modal - Step 2 -->
|
||
<div class="modal-overlay questionnaireModalStep" id="questionnaireModalStep2">
|
||
<!-- style="display: flex;" -->
|
||
<div class="questionnaire-modal">
|
||
<div class="page-wrapper">
|
||
<div class="form-card questionnaire-card"><!-- Back Button -->
|
||
<div class="back-button" >
|
||
<div class="back-icon" id="backButton" >
|
||
<svg width="14" height="14" viewbox="0 0 14 14" fill="none">
|
||
<path d="M8.75 11.375L4.375 7L8.75 2.625" stroke="white" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round" />
|
||
</svg>
|
||
</div><span class="back-text" id="back-text">Back</span>
|
||
</div>
|
||
<!-- Question 8 -->
|
||
<div class="question-section" data-question="8">
|
||
<h2 class="question-title" id="question3Title">Are you aware that trading CFDs and leveraged products involve a high risk of losing money?</h2>
|
||
<div class="options-container">
|
||
<div class="custom-checkbox"><input type="checkbox" id="q8_option1"
|
||
name="q8" value="A"> <label for="q8_option1"> <span
|
||
class="checkbox-custom"></span> <span>Yes, I fully understand the risks.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q8_option2"
|
||
name="q8" value="B"> <label for="q8_option2"> <span
|
||
class="checkbox-custom"></span> <span>I have some knowledge but would like more details.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q8_option3"
|
||
name="q8" value="C"> <label for="q8_option3"> <span
|
||
class="checkbox-custom"></span> <span>No, I am not fully aware of the risks.</span> </label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Question 9 -->
|
||
<div class="question-section" data-question="9">
|
||
<h2 class="question-title" id="question3Title">How do you educate your clients about trading risks?</h2>
|
||
<div class="options-container">
|
||
<div class="custom-checkbox"><input type="checkbox" id="q9_option1"
|
||
name="q9" value="A"> <label for="q9_option1"> <span
|
||
class="checkbox-custom"></span> <span>I provide risk management education.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q9_option2"
|
||
name="q9" value="B"> <label for="q9_option2"> <span
|
||
class="checkbox-custom"></span> <span>I encourage clients to use demo accounts first.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q9_option3"
|
||
name="q9" value="C"> <label for="q9_option3"> <span
|
||
class="checkbox-custom"></span> <span>I inform them but leave risk decisions to them.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q9_option4"
|
||
name="q9" value="D"> <label for="q9_option4"> <span
|
||
class="checkbox-custom"></span> <span>I do not provide risk education.</span> </label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Question 10 -->
|
||
<div class="question-section" data-question="10">
|
||
<h2 class="question-title" id="question3Title">What steps do you take to ensure responsible trading among your clients?</h2>
|
||
<div class="options-container">
|
||
<div class="custom-checkbox"><input type="checkbox" id="q10_option1"
|
||
name="q10" value="A"> <label for="q10_option1"> <span
|
||
class="checkbox-custom"></span> <span>I educate them on proper risk management.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q10_option2"
|
||
name="q10" value="B"> <label for="q10_option2"> <span
|
||
class="checkbox-custom"></span> <span>I recommend stop-loss and risk limits.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q10_option3"
|
||
name="q10" value="C"> <label for="q10_option3"> <span
|
||
class="checkbox-custom"></span> <span>I encourage them to trade more without considering risks.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q10_option4"
|
||
name="q10" value="D"> <label for="q10_option4"> <span
|
||
class="checkbox-custom"></span> <span>I do not provide any specific guidance.</span> </label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Question 11 -->
|
||
<div class="question-section" data-question="11">
|
||
<h2 class="question-title" id="question3Title">If a client experiences losses and complains, how would you handle the situation?</h2>
|
||
<div class="options-container">
|
||
<div class="custom-checkbox"><input type="checkbox" id="q11_option1"
|
||
name="q11" value="A"> <label for="q11_option1"> <span
|
||
class="checkbox-custom"></span> <span>Explain that trading carries risks and provide guidance on improving strategies.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q11_option2"
|
||
name="q11" value="B"> <label for="q11_option2"> <span
|
||
class="checkbox-custom"></span> <span>Offer them compensation from my own commission.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q11_option3"
|
||
name="q11" value="C"> <label for="q11_option3"> <span
|
||
class="checkbox-custom"></span> <span>Encourage them to deposit more to recover losses quickly.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q11_option4"
|
||
name="q11" value="D"> <label for="q11_option4"> <span
|
||
class="checkbox-custom"></span> <span>Ignore the complaint, as losses are the client’s responsibility.</span> </label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Question 12 -->
|
||
<div class="question-section" data-question="12">
|
||
<h2 class="question-title" id="question3Title">How do you ensure a long-term and mutually beneficial relationship as an IB?</h2>
|
||
<div class="options-container">
|
||
<div class="custom-checkbox"><input type="checkbox" id="q12_option1"
|
||
name="q12" value="A"> <label for="q12_option1"> <span
|
||
class="checkbox-custom"></span> <span>By maintaining transparency and ethical client management.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q12_option2"
|
||
name="q12" value="B"> <label for="q12_option2"> <span
|
||
class="checkbox-custom"></span> <span>By focusing only on commissions without client education.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q12_option3"
|
||
name="q12" value="C"> <label for="q12_option3"> <span
|
||
class="checkbox-custom"></span> <span>By frequently switching brokers to find better payouts.</span> </label>
|
||
</div>
|
||
<div class="custom-checkbox"><input type="checkbox" id="q12_option4"
|
||
name="q12" value="D"> <label for="q12_option4"> <span
|
||
class="checkbox-custom"></span> <span>By pushing clients to trade more, regardless of risk.</span> </label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<button class="btn-submit" id="submit-button" onclick="handleSubmit()">Add Platform</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
|
||
|
||
<!-- Core -->
|
||
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
|
||
<script src="../assets/vendor/popper/popper.min.js"></script>
|
||
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
|
||
|
||
|
||
|
||
</body>
|
||
|
||
<script>
|
||
/**
|
||
* ===============================
|
||
* Step 1 Validation
|
||
* ===============================
|
||
*/
|
||
function validateStep1() {
|
||
let isValid = true;
|
||
const $step = $('#questionnaireModalStep1');
|
||
|
||
$step.find('.question-section').removeClass('has-error');
|
||
|
||
$step.find('.question-section').each(function () {
|
||
const $section = $(this);
|
||
const q = $section.data('question');
|
||
|
||
// q2 特殊处理
|
||
if (q == 2) return;
|
||
|
||
const $checkboxes = $section.find('input[type="checkbox"]');
|
||
if ($checkboxes.length && $checkboxes.filter(':checked').length !== 1) {
|
||
$section.addClass('has-error');
|
||
isValid = false;
|
||
}
|
||
});
|
||
|
||
// q2：checkbox OR text（二选一）
|
||
const $q2 = $step.find('.question-section[data-question="2"]');
|
||
if ($q2.length) {
|
||
const checked = $q2.find('input[type="checkbox"]:checked').length;
|
||
const inputVal = $.trim($q2.find('input[type="text"]').val());
|
||
|
||
if (checked === 0 && inputVal === '') {
|
||
$q2.addClass('has-error');
|
||
isValid = false;
|
||
}
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
|
||
/**
|
||
* ===============================
|
||
* Step 2 Validation
|
||
* ===============================
|
||
*/
|
||
function validateStep2() {
|
||
let isValid = true;
|
||
const $step = $('#questionnaireModalStep2');
|
||
|
||
$step.find('.question-section').removeClass('has-error');
|
||
|
||
$step.find('.question-section').each(function () {
|
||
const $section = $(this);
|
||
const $checkboxes = $section.find('input[type="checkbox"]');
|
||
|
||
if ($checkboxes.length && $checkboxes.filter(':checked').length !== 1) {
|
||
$section.addClass('has-error');
|
||
isValid = false;
|
||
}
|
||
});
|
||
|
||
return isValid;
|
||
}
|
||
|
||
/**
|
||
* ===============================
|
||
* Scroll To Error (Scoped)
|
||
* ===============================
|
||
*/
|
||
function scrollToFirstError(stepId) {
|
||
const $step = $(stepId);
|
||
const $error = $step.find('.has-error').first();
|
||
if (!$error.length) return;
|
||
|
||
const $modal = $error.closest('.questionnaire-modal');
|
||
|
||
$modal.animate({
|
||
scrollTop: $error.position().top - 40
|
||
}, 400);
|
||
|
||
$error.addClass('error-focus');
|
||
setTimeout(() => $error.removeClass('error-focus'), 1200);
|
||
}
|
||
|
||
/**
|
||
* ===============================
|
||
* SINGLE CHOICE BEHAVIOR
|
||
* ===============================
|
||
*/
|
||
$(document).on('change', '.question-section input[type="checkbox"]', function () {
|
||
const $current = $(this);
|
||
const $section = $current.closest('.question-section');
|
||
const q = $section.data('question');
|
||
|
||
// q2 例外
|
||
if (q == 2) {
|
||
validateQ2Live();
|
||
return;
|
||
}
|
||
|
||
// 强制单选
|
||
$section.find('input[type="checkbox"]').not(this).prop('checked', false);
|
||
$section.removeClass('has-error');
|
||
});
|
||
|
||
/**
|
||
* ===============================
|
||
* q2 Live Validation
|
||
* ===============================
|
||
*/
|
||
function validateQ2Live() {
|
||
const $q2 = $('#questionnaireModalStep1')
|
||
.find('.question-section[data-question="2"]');
|
||
|
||
const checked = $q2.find('input[type="checkbox"]:checked').length;
|
||
const inputVal = $.trim($q2.find('input[type="text"]').val());
|
||
|
||
// checkbox 单选
|
||
if (checked > 1) {
|
||
const $last = $q2.find('input[type="checkbox"]:checked').last();
|
||
$q2.find('input[type="checkbox"]').not($last).prop('checked', false);
|
||
}
|
||
|
||
if (checked > 0 || inputVal !== '') {
|
||
$q2.removeClass('has-error');
|
||
}
|
||
}
|
||
|
||
$(document).on(
|
||
'keyup change',
|
||
'#questionnaireModalStep1 .question-section[data-question="2"] input',
|
||
validateQ2Live
|
||
);
|
||
|
||
/**
|
||
* ===============================
|
||
* Submit Buttons
|
||
* ===============================
|
||
*/
|
||
$('#submitButton').on('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
if (!validateStep1()) {
|
||
scrollToFirstError('#questionnaireModalStep1');
|
||
return;
|
||
}
|
||
|
||
// 切换到 Step2
|
||
$('#questionnaireModalStep1').hide();
|
||
$('#questionnaireModalStep2').show();
|
||
});
|
||
|
||
$('#submit-button').on('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
if (!validateStep2()) {
|
||
scrollToFirstError('#questionnaireModalStep2');
|
||
return;
|
||
}
|
||
|
||
alert('✅ All questionnaire validation passed');
|
||
});
|
||
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<script>
|
||
/**
|
||
* ===============================
|
||
* Step2 → Step1 Back
|
||
* ===============================
|
||
*/
|
||
$('#backButton').on('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
$('#questionnaireModalStep2').hide();
|
||
$('#questionnaireModalStep1').show();
|
||
|
||
// 可选：回到 Step1 顶部
|
||
const $modal = $('#questionnaireModalStep1 .questionnaire-modal');
|
||
if ($modal.length) {
|
||
$modal.scrollTop(0);
|
||
}
|
||
});
|
||
|
||
</script>
|
||
|
||
<script>
|
||
const PLATFORM_MAP=[
|
||
{name:'YouTube',icon:'fab fa-youtube',placeholder:'YouTube URL',match:/youtube\.com|youtu\.be/i},
|
||
{name:'Instagram',icon:'fab fa-instagram',placeholder:'Instagram URL',match:/instagram\.com/i},
|
||
{name:'Facebook',icon:'fab fa-facebook',placeholder:'Facebook URL',match:/facebook\.com|fb\.com/i},
|
||
{name:'LinkedIn',icon:'fab fa-linkedin',placeholder:'LinkedIn URL',match:/linkedin\.com/i},
|
||
{name:'TikTok',icon:'fab fa-tiktok',placeholder:'TikTok URL',match:/tiktok\.com/i},
|
||
|
||
];
|
||
|
||
function detectPlatformByUrl(url){
|
||
return PLATFORM_MAP.find(p=>p.match.test(url))||null;
|
||
}
|
||
|
||
function getSelectedPlatforms(){
|
||
const set=new Set();
|
||
$('.platform-input').each(function(){
|
||
const ph=$(this).attr('placeholder');
|
||
PLATFORM_MAP.forEach(p=>{
|
||
if(ph===p.placeholder) set.add(p.name);
|
||
});
|
||
});
|
||
return set;
|
||
}
|
||
|
||
function updateAvailability(row){
|
||
const used=getSelectedPlatforms();
|
||
const current=row.find('.platform-input').attr('placeholder');
|
||
row.find('.platform-item').each(function(){
|
||
const name=$(this).data('name');
|
||
if(current && current.startsWith(name)){
|
||
$(this).removeClass('disabled');
|
||
}else if(used.has(name)){
|
||
$(this).addClass('disabled');
|
||
}else{
|
||
$(this).removeClass('disabled');
|
||
}
|
||
});
|
||
}
|
||
|
||
function simulateUpload(btn,prog,bar){
|
||
let p=0;
|
||
prog.show();bar.width(0);
|
||
btn.text('Uploading...').prop('disabled',true);
|
||
const t=setInterval(()=>{
|
||
p+=10;bar.width(p+'%');
|
||
if(p>=100){
|
||
clearInterval(t);
|
||
btn.text('Uploaded').addClass('attached').prop('disabled',false);
|
||
}
|
||
},200);
|
||
}
|
||
|
||
function bindRow(row){
|
||
const input=row.find('.platform-input');
|
||
const icon=row.find('.platform-icon');
|
||
const dropdown=row.find('.platform-dropdown');
|
||
const search=row.find('.platform-search-input');
|
||
const items=row.find('.platform-item');
|
||
const empty=row.find('.platform-empty');
|
||
const file=row.find('.file-input');
|
||
const btn=row.find('.btn-attach');
|
||
const prog=row.find('.upload-progress');
|
||
const bar=row.find('.upload-bar');
|
||
|
||
icon.on('click',function(e){
|
||
e.stopPropagation();
|
||
const open=dropdown.is(':visible');
|
||
$('.platform-dropdown').hide();
|
||
if(!open){
|
||
dropdown.show();
|
||
updateAvailability(row);
|
||
search.val('').trigger('input').focus();
|
||
}
|
||
});
|
||
|
||
items.on('click',function(){
|
||
if($(this).hasClass('disabled')) return;
|
||
icon.attr('class',$(this).data('icon')+' platform-icon');
|
||
input.attr('placeholder',$(this).data('name')+' URL');
|
||
dropdown.hide();
|
||
$('.platform-row').each(function(){updateAvailability($(this));});
|
||
});
|
||
|
||
search.on('input',function(){
|
||
let v=$(this).val().toLowerCase(),c=0;
|
||
items.each(function(){
|
||
const s=$(this).text().toLowerCase().includes(v);
|
||
$(this).toggle(s); if(s) c++;
|
||
});
|
||
empty.toggle(!c);
|
||
});
|
||
|
||
input.on('input paste',function(){
|
||
const p=detectPlatformByUrl($(this).val());
|
||
if(p){
|
||
icon.attr('class',p.icon+' platform-icon');
|
||
input.attr('placeholder',p.placeholder);
|
||
$('.platform-row').each(function(){updateAvailability($(this));});
|
||
}
|
||
});
|
||
|
||
btn.on('click',()=>file.click());
|
||
file.on('change',()=>file[0].files.length&&simulateUpload(btn,prog,bar));
|
||
|
||
row.find('.btn-delete').on('click',()=>{
|
||
if($('.platform-row').length>1) row.remove();
|
||
else{
|
||
input.val('').attr('placeholder','Platform URL');
|
||
icon.attr('class','fab fa-youtube platform-icon');
|
||
btn.text('Attach File').removeClass('attached').prop('disabled',false);
|
||
prog.hide();bar.width(0);file.val('');
|
||
}
|
||
$('.platform-row').each(function(){updateAvailability($(this));});
|
||
});
|
||
}
|
||
|
||
bindRow($('.platform-row'));
|
||
|
||
$('.add-platform').on('click',()=>{
|
||
const n=$('.platform-row:first').clone();
|
||
n.find('input').val('');
|
||
n.find('.btn-attach').text('Attach File').removeClass('attached').prop('disabled',false);
|
||
n.find('.upload-progress').hide();
|
||
n.find('.upload-bar').width(0);
|
||
$('#platformList').append(n);
|
||
bindRow(n);
|
||
$('.platform-row').each(function(){updateAvailability($(this));});
|
||
});
|
||
|
||
$(document).on('click',e=>{
|
||
if(!$(e.target).closest('.platform-row').length){
|
||
$('.platform-dropdown').hide();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html> |