update

assets/js/main.js

@@ -0,0 +1,314 @@
+$(document).ready(function () {
+    // menu
+    ShowMenu();
+
+    // click tab
+    enableSmoothScroll("#tab a", 800);
+
+    btnPricing();
+
+
+    showInput();
+
+    showSelect();
+})
+
+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
+}
+
+
+initPasswordStrength();

assets/script/style.css

@@ -0,0 +1,202 @@
+:root {
+  --color-blue: #0f5edd;
+  --text-green: #00c75d;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  background-color: #fff;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #00112b;
+  border-radius: 20px;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #00112b), color-stop(0.5, transparent), to(transparent));
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  background: #fcfcfc;
+  max-width: 1920px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: space-between;
+}
+
+html {
+  font-family: "Roboto", sans-serif;
+}
+
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+.container {
+  max-width: 1200px !important;
+  margin: 0 auto;
+}
+
+.icon_2025 {
+  display: block;
+  background: url(../images/icon_2025.png) no-repeat;
+  background-size: 92px 82px;
+}
+.icon_2025.checkbox {
+  width: 18px;
+  height: 23px;
+  background-position: 0 0;
+}
+.icon_2025.boxreview {
+  width: 18px;
+  height: 23px;
+  background-position: -34px 0;
+}
+.icon_2025.cart {
+  width: 23px;
+  height: 23px;
+  background-position: -68px 0;
+}
+.icon_2025.up {
+  width: 22px;
+  height: 22px;
+  background-position: 1px -29px;
+}
+.icon_2025.thuhut {
+  width: 22px;
+  height: 22px;
+  background-position: -34px -29px;
+}
+.icon_2025.tietkiem {
+  width: 22px;
+  height: 22px;
+  background-position: -69px -29px;
+}
+.icon_2025.up-sale {
+  width: 22px;
+  height: 22px;
+  background-position: 1px -58px;
+}
+.icon_2025.setting {
+  width: 22px;
+  height: 22px;
+  background-position: -33px -58px;
+}
+.icon_2025.support {
+  width: 24px;
+  height: 24px;
+  background-position: -68px -60px;
+}
+
+.homepage .banner {
+  background: url(../images/background-banner.jpg) no-repeat;
+  background-size: 100% 100%;
+  min-height: 920px;
+}
+.homepage .background-tamnhin {
+  background: url(../images/background-tamnhin.jpg) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}
+
+.effect-image {
+  position: relative;
+  overflow: hidden;
+}
+
+.effect-image:before {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  z-index: 2;
+  display: block;
+  content: "";
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
+  transform: skewX(-25deg);
+  cursor: pointer;
+}
+
+.effect-image:hover:before {
+  animation: image 1.1s;
+}
+
+@keyframes image {
+  100% {
+    left: 125%;
+  }
+}
+.breadcrumb li:last-child i {
+  display: none;
+}
+
+.breadcrumb li a span:hover {
+  color: var(--color-blue);
+  font-weight: bold;
+}
+
+.background-pricing {
+  background: url(../images/background-pricing.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center center;
+}
+
+.content-compare li {
+  margin-bottom: 10px;
+  position: relative;
+  padding-left: 15px;
+  color: #5d5d69;
+}
+.content-compare li::before {
+  position: absolute;
+  content: "";
+  left: 0;
+  top: 7px;
+  width: 5px;
+  height: 5px;
+  background: #000;
+  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+}
+
+.background-free {
+  background: url(../images/background-banner.jpg) no-repeat;
+  background-size: 100% 100%;
+  min-height: 640px;
+}
+
+.form-input label::before {
+  position: absolute;
+  content: "*";
+  right: -10px;
+  top: -3px;
+  color: red;
+}
+
+.form-select select:focus {
+  outline: none;
+}
+.form-select option {
+  padding: 0 10px;
+}
+.form-select label::before {
+  position: absolute;
+  content: "*";
+  right: -10px;
+  top: -3px;
+  color: red;
+}
+
+.page-login {
+  background: url(../images/background-login.jpg) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}/*# sourceMappingURL=style.css.map */

assets/script/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,qBAAA;ACCJ;;ADCA;EACI,yBAAA;EACA,mBAAA;ACEJ;;ADAA;EACI,UAAA;EACA,sBAAA;ACGJ;;ADDA;EACI,mBAAA;EACA,mBAAA;EACA,gIAAA;ACIJ;;ADKA;EACI,iCAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,8BAAA;ACFJ;;ADIA;EACI,iCAAA;ACDJ;;ADGA;EACI,WAAA;EACA,WAAA;EACA,cAAA;ACAJ;;ADEA;EACI,4BAAA;EACA,cAAA;ACCJ;;ADEA;EACI,cAAA;EACA,kDAAA;EACA,0BAAA;ACCJ;ADAI;EACI,WAAA;EACA,YAAA;EACA,wBAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,4BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,4BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,8BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,8BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;;ADGI;EACI,0DAAA;EACA,0BAAA;EACA,iBAAA;ACAR;ADEI;EACI,2DAAA;EACA,0BAAA;EACA,2BAAA;ACAR;;ADIA;EACI,kBAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,cAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,+FAAA;EACA,wBAAA;EACA,eAAA;ACDJ;;ADIA;EACI,qBAAA;ACDJ;;ADIA;EACI;IACI,UAAA;ECDN;AACF;ADIA;EACI,aAAA;ACFJ;;ADKA;EACI,wBAAA;EACA,iBAAA;ACFJ;;ADKA;EACI,2DAAA;EACA,0BAAA;EACA,kCAAA;ACFJ;;ADMI;EACI,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;ACHR;ADIQ;EACI,kBAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;EACA,UAAA;EACA,WAAA;EACA,gBAAA;EACA,8CAAA;ACFZ;;ADMA;EACI,0DAAA;EACA,0BAAA;EACA,iBAAA;ACHJ;;ADQQ;EACI,kBAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;ACLZ;;ADWI;EACI,aAAA;ACRR;ADUI;EACI,eAAA;ACRR;ADWQ;EACI,kBAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;ACTZ;;ADcA;EACI,yDAAA;EACA,0BAAA;EACA,2BAAA;ACXJ","file":"style.css"}

assets/script/style.scss

@@ -0,0 +1,214 @@
+:root {
+    --color-blue: #0f5edd;
+    --text-green: #00c75d;
+}
+::-webkit-scrollbar-track {
+    background-color: #f5f5f5;
+    border-radius: 10px;
+}
+::-webkit-scrollbar {
+    width: 7px;
+    background-color: #fff;
+}
+::-webkit-scrollbar-thumb {
+    background: #00112b;
+    border-radius: 20px;
+    background-image: -webkit-gradient(
+        linear,
+        0 0,
+        0 100%,
+        color-stop(0.7, #00112b),
+        color-stop(0.5, transparent),
+        to(transparent)
+    );
+}
+body {
+    font-family: "Roboto", sans-serif;
+    font-size: 14px;
+    background: #fcfcfc;
+    max-width: 1920px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    justify-content: space-between;
+}
+html {
+    font-family: "Roboto", sans-serif;
+}
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+.container {
+    max-width: 1200px !important;
+    margin: 0 auto;
+}
+
+.icon_2025 {
+    display: block;
+    background: url(../images/icon_2025.png) no-repeat;
+    background-size: 92px 82px;
+    &.checkbox {
+        width: 18px;
+        height: 23px;
+        background-position: 0 0;
+    }
+    &.boxreview {
+        width: 18px;
+        height: 23px;
+        background-position: -34px 0;
+    }
+    &.cart {
+        width: 23px;
+        height: 23px;
+        background-position: -68px 0;
+    }
+    &.up {
+        width: 22px;
+        height: 22px;
+        background-position: 1px -29px;
+    }
+    &.thuhut {
+        width: 22px;
+        height: 22px;
+        background-position: -34px -29px;
+    }
+    &.tietkiem {
+        width: 22px;
+        height: 22px;
+        background-position: -69px -29px;
+    }
+    &.up-sale {
+        width: 22px;
+        height: 22px;
+        background-position: 1px -58px;
+    }
+    &.setting {
+        width: 22px;
+        height: 22px;
+        background-position: -33px -58px;
+    }
+    &.support {
+        width: 24px;
+        height: 24px;
+        background-position: -68px -60px;
+    }
+}
+
+.homepage {
+    .banner {
+        background: url(../images/background-banner.jpg) no-repeat;
+        background-size: 100% 100%;
+        min-height: 920px;
+    }
+    .background-tamnhin {
+        background: url(../images/background-tamnhin.jpg) no-repeat;
+        background-size: 100% 100%;
+        background-position: center;
+    }
+}
+
+.effect-image {
+    position: relative;
+    overflow: hidden;
+}
+
+.effect-image:before {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    z-index: 2;
+    display: block;
+    content: "";
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
+    transform: skewX(-25deg);
+    cursor: pointer;
+}
+
+.effect-image:hover:before {
+    animation: image 1.1s;
+}
+
+@keyframes image {
+    100% {
+        left: 125%;
+    }
+}
+
+.breadcrumb li:last-child i {
+    display: none;
+}
+
+.breadcrumb li a span:hover {
+    color: var(--color-blue);
+    font-weight: bold;
+}
+
+.background-pricing {
+    background: url(../images/background-pricing.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: center center;
+}
+
+.content-compare {
+    li {
+        margin-bottom: 10px;
+        position: relative;
+        padding-left: 15px;
+        color: #5d5d69;
+        &::before {
+            position: absolute;
+            content: "";
+            left: 0;
+            top: 7px;
+            width: 5px;
+            height: 5px;
+            background: #000;
+            clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+        }
+    }
+}
+.background-free {
+    background: url(../images/background-banner.jpg) no-repeat;
+    background-size: 100% 100%;
+    min-height: 640px;
+}
+
+.form-input {
+    label {
+        &::before {
+            position: absolute;
+            content: "*";
+            right: -10px;
+            top: -3px;
+            color: red;
+        }
+    }
+}
+
+.form-select {
+    select:focus {
+        outline: none;
+    }
+    option {
+        padding: 0 10px;
+    }
+    label {
+        &::before {
+            position: absolute;
+            content: "*";
+            right: -10px;
+            top: -3px;
+            color: red;
+        }
+    }
+}
+
+.page-login {
+    background: url(../images/background-login.jpg) no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+}