344 lines
10 KiB
JavaScript
344 lines
10 KiB
JavaScript
$(document).ready(function () {
|
|
// menu
|
|
ShowMenu();
|
|
|
|
// click tab
|
|
enableSmoothScroll("#tab a", 800);
|
|
|
|
btnPricing();
|
|
|
|
|
|
showInput();
|
|
|
|
showSelect();
|
|
|
|
|
|
AOS.init();
|
|
|
|
|
|
showCateMobile();
|
|
initPasswordStrength();
|
|
|
|
})
|
|
|
|
function ShowMenu() {
|
|
$menu = $('#js-show-menu .item-menu a');
|
|
$box_menu = $('#box-menu');
|
|
|
|
$menu.on('click', function () {
|
|
$data_menu = $(this).attr('data-menu');
|
|
$('.content-menu').addClass('hidden')
|
|
$('#' + $data_menu).removeClass('hidden');
|
|
if ($(this).hasClass('active')) {
|
|
$(this).removeClass('active');
|
|
$('#background-opacity').addClass('hidden');
|
|
$('#box-menu').addClass('translate-y-[-100%]');
|
|
$(this).find($('i')).removeClass('fa-sort-up mt-[10px]');
|
|
} else {
|
|
$(this).addClass('active');
|
|
$('#background-opacity').removeClass('hidden');
|
|
$('#box-menu').removeClass('translate-y-[-100%]');
|
|
$(this).find($('i')).addClass('fa-sort-up mt-[10px]');
|
|
}
|
|
|
|
|
|
|
|
})
|
|
}
|
|
|
|
function closeBackgorund() {
|
|
$('#background-opacity').addClass('hidden');
|
|
$('#box-menu').addClass('translate-y-[-100%]');
|
|
$('#js-show-menu .item-menu').find($('i')).removeClass('fa-sort-up mt-[10px]');
|
|
}
|
|
|
|
function toggleFaq(el) {
|
|
var $el = $(el);
|
|
var $content = $el.next(".content-faq");
|
|
var $icon = $el.find("i");
|
|
|
|
if ($content.hasClass("open")) {
|
|
// Đóng
|
|
$content.removeClass("open").css("max-height", 0);
|
|
$icon.removeClass("rotate-180");
|
|
} else {
|
|
// Đóng các FAQ khác (nếu muốn accordion)
|
|
$(".content-faq").removeClass("open").css("max-height", 0);
|
|
$(".title i").removeClass("rotate-180");
|
|
|
|
// Mở
|
|
$content.addClass("open").css("max-height", $content.prop("scrollHeight") + "px");
|
|
$icon.addClass("rotate-180");
|
|
}
|
|
}
|
|
|
|
|
|
function enableSmoothScroll(selector, speed) {
|
|
$(selector).click(function (e) {
|
|
e.preventDefault();
|
|
var target = $($(this).attr("href"));
|
|
if (target.length) {
|
|
$("html, body").animate(
|
|
{ scrollTop: target.offset().top - 100 },
|
|
speed
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
function btnPricing() {
|
|
$('#billingToggle').on('change', function () {
|
|
if ($(this).is(':checked')) {
|
|
// Annually
|
|
$('#labelMonthly').removeClass('text-black').addClass('text-gray-500');
|
|
$('#labelAnnually').removeClass('text-gray-500').addClass('text-black');
|
|
$('#toggleBox').removeClass('border-gray-300').addClass('border-black')
|
|
.addClass('after:translate-x-6');
|
|
} else {
|
|
// Monthly
|
|
$('#labelAnnually').removeClass('text-black').addClass('text-gray-500');
|
|
$('#labelMonthly').removeClass('text-gray-500').addClass('text-black');
|
|
$('#toggleBox').removeClass('border-black').addClass('border-gray-300')
|
|
.removeClass('after:translate-x-6');
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
function showCompare() {
|
|
$('.item-compare i').toggleClass('fa-plus fa-minus');
|
|
$('.content-compare').toggleClass('hidden mt-[15px] pt-[15px]');
|
|
}
|
|
|
|
|
|
function showInput() {
|
|
$('.form-input input').on('focus', function () {
|
|
$lable = $(this).closest($('.form-input')).find($('label'));
|
|
$error = $(this).closest($('.check-form')).find('.note-error');
|
|
$lable.toggleClass('top-[-1.75rem] text-[15px] text-[12px]');
|
|
$error.html('');
|
|
})
|
|
}
|
|
|
|
function showSelect() {
|
|
$('.form-select').on('click', function () {
|
|
$(this).find($('label')).removeClass('text-[15px] top-[2px]')
|
|
$(this).find($('label')).addClass('top-[-1.75rem] text-[12px]');
|
|
})
|
|
}
|
|
|
|
|
|
function checkInputName() {
|
|
var error = false;
|
|
var check_name = document.getElementById('first_name').value;
|
|
var $name = $('#first_name');
|
|
var item_name = $name.parents(".check-form");
|
|
if (check_name.length < 4) {
|
|
item_name.find($('.note-error')).html("Tên quá ngắn");
|
|
error = true;
|
|
} else if (check_name.indexOf('<script') > -1) {
|
|
item_name.find($('.note-error')).html("Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại");
|
|
error = true;
|
|
} else {
|
|
item_name.find($('.note-error')).html("");
|
|
}
|
|
return error
|
|
}
|
|
|
|
function checkInputPhone() {
|
|
var number_regex1 = /^[0]\d{9}$/i;
|
|
var number_regex2 = /^[0]\d{10}$/i;
|
|
|
|
var check_tel = document.getElementById('phone').value;
|
|
var $tel = $("#phone");
|
|
var item_tel = $tel.parents(".check-form");
|
|
if (check_tel.length < 4) {
|
|
item_tel.addClass('error')
|
|
item_tel.find($('.note-error')).html("Bạn chưa nhập SĐT");
|
|
error = true;
|
|
} else if (!check_tel.match(number_regex1) && !check_tel.match(number_regex2)) {
|
|
item_tel.addClass('error')
|
|
item_tel.find($('.note-error')).html("Số điện thoại chưa chính xác");
|
|
error = true;
|
|
} else {
|
|
item_tel.removeClass('error');
|
|
item_tel.find($('.note-error')).html("");
|
|
}
|
|
|
|
return error
|
|
}
|
|
|
|
|
|
function checkInputEmail() {
|
|
var check_email = document.getElementById('email').value;
|
|
var $email = $("#email");
|
|
var item_email = $email.parents(".check-form");
|
|
if (check_email.length < 4) {
|
|
item_email.addClass('error')
|
|
item_email.find($('.note-error')).html("Bạn chưa nhập Email");
|
|
error = true;
|
|
} else if (!validateEmail(check_email)) {
|
|
item_email.addClass('error')
|
|
item_email.find($('.note-error')).html("Địa chỉ email chưa chính xác");
|
|
error = true;
|
|
} else {
|
|
item_email.removeClass('error');
|
|
item_email.find($('.note-error')).html("");
|
|
}
|
|
|
|
return error
|
|
}
|
|
|
|
|
|
function checkProvince() {
|
|
var check_province = document.getElementById('province').value;
|
|
var $check_province = $('#province');
|
|
var item_province = $check_province.parents('.check-form');
|
|
if (check_province == 0) {
|
|
item_province.addClass('error');
|
|
item_province.find($('.note-error')).html("Bạn chưa chọn Tỉnh/Thành phố");
|
|
error = true;
|
|
} else {
|
|
item_province.removeClass('error');
|
|
item_province.find($('.note-error')).html("");
|
|
}
|
|
|
|
return error;
|
|
}
|
|
|
|
|
|
function checkInputShop() {
|
|
var error = false;
|
|
var check_shop = document.getElementById('shop').value;
|
|
var $shop = $('#shop');
|
|
var item_shop = $shop.parents(".check-form");
|
|
if (check_shop.length < 4) {
|
|
item_shop.find($('.note-error')).html("Tên quá ngắn");
|
|
error = true;
|
|
} else if (check_shop.indexOf('<script') > -1) {
|
|
item_shop.find($('.note-error')).html("Tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại");
|
|
error = true;
|
|
} else {
|
|
item_shop.find($('.note-error')).html("");
|
|
}
|
|
return error
|
|
}
|
|
|
|
|
|
function checkformTrial() {
|
|
|
|
var error = false;
|
|
|
|
checkInputName();
|
|
|
|
checkInputPhone();
|
|
|
|
checkInputEmail();
|
|
|
|
checkInputShop();
|
|
|
|
checkProvince();
|
|
|
|
|
|
if (error) {
|
|
alert('Vui lòng kiểm tra lại thông tin');
|
|
return false;
|
|
} else {
|
|
$(".button-send").css("pointer-events", "none");
|
|
$(".button-send").html("ĐANG XỬ LÝ...");
|
|
localStorage.getItem("Key_voucher");
|
|
return true;
|
|
}
|
|
}
|
|
|
|
|
|
function validateEmail(sEmail) {
|
|
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
|
|
if (filter.test(sEmail)) {
|
|
return true;
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
|
|
function initPasswordStrength() {
|
|
const inputPassword = document.getElementById('password');
|
|
const toggleBtn = document.getElementById('togglePassword');
|
|
const strengthBar = document.getElementById('strengthBar');
|
|
const strengthText = document.getElementById('strengthText');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
// Đánh giá mật khẩu
|
|
function evaluateStrength(password) {
|
|
let score = 0;
|
|
if (password.length >= 8) score++;
|
|
if (/[A-Z]/.test(password)) score++;
|
|
if (/\d/.test(password)) score++;
|
|
if (/[^A-Za-z0-9]/.test(password)) score++;
|
|
return score; // 0..4
|
|
}
|
|
|
|
// Render UI
|
|
function renderStrength(score) {
|
|
let label = "—", color = "bg-gray-300", width = "0%";
|
|
if (score === 1) { label = "yếu"; color = "bg-red-500"; width = "25%"; }
|
|
if (score === 2) { label = "trung bình"; color = "bg-yellow-500"; width = "50%"; }
|
|
if (score === 3) { label = "khá"; color = "bg-lime-500"; width = "75%"; }
|
|
if (score === 4) { label = "mạnh"; color = "bg-green-500"; width = "100%"; }
|
|
|
|
const levels = [
|
|
{ label: "—", color: "bg-gray-300", width: "0%" },
|
|
{ label: "yếu", color: "bg-red-500", width: "25%" },
|
|
{ label: "trung bình", color: "bg-yellow-500", width: "50%" },
|
|
{ label: "khá", color: "bg-lime-500", width: "75%" },
|
|
{ label: "mạnh", color: "bg-green-500", width: "100%" }
|
|
];
|
|
|
|
const level = levels[score];
|
|
strengthBar.className = "h-1 rounded transition-all " + level.color;
|
|
strengthBar.style.width = width;
|
|
strengthText.textContent = "Độ mạnh của mật khẩu: " + level.label;
|
|
submitBtn.disabled = score < 3;
|
|
}
|
|
|
|
// Event nhập mật khẩu
|
|
inputPassword.addEventListener('input', e => {
|
|
$('#check-pass').removeClass('hidden');
|
|
const score = evaluateStrength(e.target.value);
|
|
renderStrength(score);
|
|
});
|
|
|
|
// Toggle hiển thị/ẩn mật khẩu
|
|
toggleBtn.addEventListener('click', () => {
|
|
inputPassword.type = inputPassword.type === 'password' ? 'text' : 'password';
|
|
});
|
|
|
|
renderStrength(0); // khởi tạo
|
|
}
|
|
|
|
|
|
function showMenuMb() {
|
|
$('body').toggleClass('overflow-hidden')
|
|
$('#js-menu-mobile').toggleClass('hidden');
|
|
}
|
|
|
|
|
|
function showCateMobile() {
|
|
$('#js-menu-mobile .item-menu').on('click', function () {
|
|
|
|
$(this).toggleClass('active')
|
|
$(this).find($('.content-menu')).toggleClass('hidden');
|
|
})
|
|
}
|
|
|
|
|
|
function toggleFooter(el) {
|
|
var $el = $(el);
|
|
var $content = $el.next(".content-footer");
|
|
var $icon = $el.find("i");
|
|
|
|
$content.toggleClass("hidden");
|
|
$icon.toggleClass("fa-sort-down fa-sort-up");
|
|
}
|