up

assets/js/deal_detail.js

@@ -0,0 +1,157 @@
+var swiper_thumb = new Swiper(".thumbImage", {
+    spaceBetween: 10,
+    slidesPerView: 4,
+    direction: "vertical",
+    loop: true,
+    on: {
+        init: (swiper) => {
+            let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
+            let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
+            swiper.el.style.height = containerHeight + 'px';
+        },
+    },
+});
+
+var swiper_big = new Swiper(".BigImage", {
+    spaceBetween: 10,
+    watchSlidesProgress: true,
+    noSwiping: true,
+    navigation: {
+        nextEl: "#js-image-next",
+        prevEl: "#js-image-prev",
+    },
+    thumbs: {
+        swiper: swiper_thumb,
+    },
+});
+
+function addDealCart() {
+    $('.box-popup').removeClass('active')
+    $('.overlay').addClass('active')
+    $('.popup-add-cart').addClass('active')
+}
+
+function checkbuy() {
+    var number_regex1 = /^[0]\d{9}$/i;
+    var number_regex2 = /^[0]\d{10}$/i;
+    var error = false;
+    var name = $('#name').val();
+    var $name = $('#name');
+    var email = $('#email').val();
+    var $email = $('#email');
+    var phone = $('#phone').val();
+    var $phone = $('#phone');
+    var city = $('#city').val();
+    var $city = $('#city');
+    var district = $('#district').val();
+    var $district = $('#district');
+    var address = $('#address').val();
+    var $address = $('#address');
+
+    var item_name = $name.parents(".item-input");
+    if (name.length < 4) {
+        item_name.addClass('error');
+        item_name.find($('.note-error')).html('Tên quá ngắn')
+    } else if (name.indexOf('<script') > -1) {
+        item_name.addClass('error');
+        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');
+    }
+
+    var item_email = $email.parents(".item-input");
+    if (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(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("");
+    }
+
+    var item_phone = $phone.parents(".item-input");
+    if (phone.length < 4) {
+        item_phone.addClass('error')
+        item_phone.find($('.note-error')).html("Bạn chưa nhập SĐT");
+        error = true;
+    } else if (!phone.match(number_regex1) && !phone.match(number_regex2)) {
+        item_phone.addClass('error')
+        item_phone.find($('.note-error')).html("Số điện thoại chưa chính xác");
+        error = true;
+    } else {
+        item_phone.removeClass('error');
+        item_phone.find($('.note-error')).html("");
+    }
+
+
+    var item_city = $city.parents('.item-input');
+    if (city == 0) {
+        item_city.addClass('error');
+        item_city.find($('.note-error')).html("Bạn chưa chọn Tỉnh/Thành phố");
+        error = true;
+    } else {
+        item_city.removeClass('error');
+        item_city.find($('.note-error')).html("");
+    }
+
+    var item_district = $district.parents('.item-input');
+    if (district == 0) {
+        item_district.addClass('error');
+        item_district.find($('.note-error')).html("Bạn chưa chọn Quận/Huyện");
+        error = true;
+    } else {
+        item_district.removeClass('error');
+        item_district.find($('.note-error')).html("");
+    }
+
+    var item_check_add = $address.parents(".item-input");
+    if (address.length < 5) {
+        item_check_add.addClass('error')
+        item_check_add.find($('.note-error')).html("Địa chỉ quá ngắn");
+        error = true;
+    } else if (address.indexOf('<script') > -1) {
+        item_check_add.addClass('error')
+        item_check_add.find($('.note-error')).html("Địa chỉ 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_check_add.removeClass('error');
+        item_check_add.find($('.note-error')).html("");
+    }
+
+
+    if (error) {
+        alert('Vui lòng kiểm tra lại thông tin đơn hàng');
+        return false;
+    } else {
+        $('.box-popup').removeClass('active');
+        $('.popup-buy-success').addClass('active')
+        $('.overlay').addClass('active')
+    }
+
+
+}
+
+function closePopop() {
+    $('.box-popup').removeClass('active');
+    $('.overlay').removeClass('active')
+}
+
+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 validatePhoneNumber(a) {
+    var number_regex1 = /^[0]\d{9}$/i;
+    var number_regex2 = /^[0]\d{10}$/i;
+
+    if (number_regex1.test(a) == false && number_regex2.test(a) == false) return false;
+    return true;
+}

assets/js/edit.js

@@ -0,0 +1,365 @@
+let historyStates = [];
+let currentStateIndex = -1;
+
+
+const $toggleEditModeButton = $('#toggleEditMode');
+const $tabBar = $('#tabBar');
+const $textOptions = $('#textOptions');
+const $imageOptions = $('#imageOptions');
+const $BoxOptions = $('#BoxOptions');
+const $textColorInput = $('#textColor');
+const $textBackgroundInput = $('#textBackground');
+const $textContentInput = $('#textContent');
+const $imageURLInput = $('#imageURL');
+const $imageUploadInput = $('#imageUpload');
+const $logoSizeInput = $('#logoSize');
+const $sizeValueSpan = $('#sizeValue');
+const $lineHeightInput = $('#lineHeight');
+let currentElement = null;
+let isEditMode = false;
+
+
+$(window).scroll(function () {
+
+    if ($(window).scrollTop() > 100) {
+        $(".mode-edit").addClass('fixed');
+    }
+    else {
+        $(".mode-edit").removeClass('fixed');
+    }
+
+})
+
+
+$toggleEditModeButton.on('click', function () {
+    isEditMode = !isEditMode;
+    $('.editable-element').toggleClass('editable', isEditMode);
+    $toggleEditModeButton.html(isEditMode ? '<i class="fas fa-sign-out-alt"></i> Thoát chỉnh sửa' : '<i class="far fa-edit"></i> Chỉnh sửa');
+    $tabBar.hide();
+});
+
+$imageUploadInput.on('change', function (event) {
+    const file = event.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = function () {
+        currentElement.find('img').attr('src', reader.result);
+    };
+    reader.readAsDataURL(file);
+});
+
+$textColorInput.on('input', function (e) {
+    updateTextColor($(this).val());
+});
+
+$textBackgroundInput.on('input', function (e) {
+    updateBackgroundColor($(this).val());
+});
+
+$logoSizeInput.on('input', function () {
+    $sizeValueSpan.text(`${$logoSizeInput.val()}px`);
+    currentElement.find('img').css('width', `${$logoSizeInput.val()}px`);
+});
+
+$lineHeightInput.on('input', function () {
+    if (currentElement && currentElement.data('type') === 'title') {
+        currentElement.find('.title').css('line-height', `${$lineHeightInput.val()}px`);
+    }
+});
+
+
+function startEditing(event, button) {
+    if (!isEditMode) return;
+    event.stopPropagation();
+    currentElement = $(button).closest('.editable-element');
+    $tabBar.show();
+    setupOptions();
+}
+
+function setupOptions() {
+    if (currentElement.data('type') === 'box') {
+        $BoxOptions.show();
+        $textOptions.hide();
+        $imageOptions.hide();
+        const $title = currentElement.find('.title');
+        $('#BackgroundColor').val(extractColor(currentElement, 'bg'));
+        $('#InputCodeBg').val(extractColor(currentElement, 'bg'));
+        $('#changeInputBg').val(extractColor(currentElement, 'bg'));
+        $textContentInput.val($title.text().trim());
+        $textColorInput.val(extractColor($title, 'text'));
+        $textBackgroundInput.val(extractColor($title, 'bg'));
+        $lineHeightInput.val(parseFloat($title.css('line-height')));
+        $('#fontSize').val(parseFloat($title.css('font-size')));
+        $('#fontFamily').val($title.css('font-family'));
+        $('#BgcolorCode').val(extractColor($title, 'bg'));
+        $('#colorCodeTitle').val(extractColor($title, 'text'));
+        $('#borderColorBg').val(extractColor(currentElement, 'border'))
+    } else if (currentElement.data('type') === 'title') {
+        $textOptions.show();
+        $BoxOptions.hide();
+        $imageOptions.hide();
+
+        const $title = currentElement.find('.title');
+        $textContentInput.val($title.text().trim());
+        $textColorInput.val(extractColor($title, 'text'));
+        $textBackgroundInput.val(extractColor($title, 'bg'));
+        $lineHeightInput.val(parseFloat($title.css('line-height')));
+        $('#fontSize').val(parseFloat($title.css('font-size')));
+        $('#fontFamily').val($title.css('font-family'));
+        $('#BgcolorCode').val(extractColor($title, 'bg'));
+        $('#colorCodeTitle').val(extractColor($title, 'text'));
+        $('#borderColorBg').val(extractColor($title, 'bg'))
+    } else if (currentElement.data('type') === 'background') {
+
+    } else {
+        $imageOptions.show();
+        $textOptions.hide();
+        $BoxOptions.hide();
+
+        const $img = currentElement.find('img');
+
+        $imageURLInput.attr('src', $img.attr('src'));
+        $imageUploadInput.val('');
+
+        const $logoImage = currentElement.find('img');
+        $logoSizeInput.val($logoImage.width());
+        $sizeValueSpan.text(`${$logoImage.width()}px`);
+    }
+}
+
+function applyChanges() {
+    if (!currentElement) return;
+    if (currentElement.data('type') === 'title') {
+        updateTextStyles();
+    } else if (currentElement.data('type') === 'image') {
+        updateImage();
+    } else if (currentElement.data('type') === 'background') {
+        updateBgStyles()
+    }
+    saveCurrentState()
+    $tabBar.hide();
+}
+
+function updateTextStyles() {
+    const $title = currentElement.find('h2');
+    $title.text($textContentInput.val());
+    updateClass($title, 'text', $textColorInput.val());
+    updateClass($title, 'bg', $textBackgroundInput.val());
+}
+
+function updateImage() {
+    const $img = currentElement.find('img');
+    $img.attr('src', $imageURLInput.val() || $img.attr('src'));
+}
+
+function updateBgStyles() {
+    updateClass(currentElement, 'bg', $('#changeInputBg').val());
+    updateClass(currentElement, 'bg', $('#InputCodeBg').val());
+}
+
+
+function updateTextColor(color) {
+    if (!currentElement) return;
+    updateClass(currentElement.find('h2'), 'text', color);
+}
+
+function updateBackgroundColor(color) {
+    if (!currentElement) return;
+    updateClass(currentElement.find('h2'), 'bg', color);
+}
+
+function updateClass($element, type, color) {
+    const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
+    const regex = new RegExp(`^${type}-\\[#[0-9A-Fa-f]{3,6}\\]$`);
+    $element.attr('class', function (i, c) {
+        return c.split(' ').filter(cls => !regex.test(cls)).concat(className).join(' ');
+    });
+}
+
+function extractColor($element, type) {
+    const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
+    const match = $element.attr('class').match(regex);
+    return match ? match[1] : '#000000';
+}
+
+function formatText(command, value) {
+    let $title = '';
+    if (currentElement.data('type') === 'title' || currentElement.data('type') == 'box') {
+        $title = currentElement.find('.title');
+    } else {
+        $title = currentElement;
+    }
+    switch (command) {
+        case 'size':
+            $title.css('font-size', `${value}px`);
+            break;
+        case 'bold':
+            $title.toggleClass('font-bold');
+            break;
+        case 'italic':
+            $title.toggleClass('italic');
+            break;
+        case 'underline':
+            $title.toggleClass('underline');
+            break;
+        case 'line-through':
+            $title.toggleClass('line-through');
+            break;
+        case 'justifyLeft':
+            $title.removeClass('text-center text-right text-justify').addClass('text-left');
+            break;
+        case 'justifyCenter':
+            $title.removeClass('text-left text-right text-justify').addClass('text-center');
+            break;
+        case 'justifyRight':
+            $title.removeClass('text-left text-center text-justify').addClass('text-right');
+            break;
+        case 'justifyFull':
+            $title.removeClass('text-left text-center text-right').addClass('text-justify');
+            break;
+    }
+}
+
+function updateColorPicker(event, type) {
+    const textColor = $("#textColor");
+    const textCodeColor = $("#colorCodeTitle");
+    const BgColor = $("#textBackground");
+    let element = '';
+    if (currentElement.data('type') === 'title') {
+        element = currentElement.find('.title');
+
+    } else {
+        element = currentElement;
+    }
+
+    if (type === 'text') {
+        const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test(textCodeColor.val());
+        if (isValidHex) {
+            textColor.val(textCodeColor.val());
+            element.css('color', textCodeColor.val());
+        } else {
+            alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733).");
+        }
+    } else if (type === 'background') {
+        const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val());
+        if (isValidHex) {
+            BgColor.val($(event.target).val());
+            element.css('background', $(event.target).val());
+        } else {
+            alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733).");
+        }
+    }
+}
+
+function syncColorInputs(event, type) {
+    const inputColorText = $('#colorCodeTitle');
+    let inputBg = '';
+    let Bg = '';
+    if (currentElement.data('type') === 'title') {
+        inputBg = $('#BgcolorCode');
+        bg = $(currentElement).find('.title');
+    } else {
+        inputBg = $('#InputCodeBg');
+        bg = $(currentElement);
+    }
+
+    if (type == 'text') {
+        inputColorText.val($(event.target).val());
+    } else {
+        inputBg.val($(event.target).val());
+        bg.css('background', $(event.target).val());
+    }
+
+}
+
+
+function updatePosition(event, action) {
+    $('.edit-position').removeClass('active')
+    $(event.target).addClass('active');
+    console.log(action)
+    if (action == 'left') {
+        currentElement.find('.title').css({ 'margin': 'auto auto auto 0', 'justify-content': 'start' });
+    } else if (action == 'center') {
+        currentElement.find('.title').css({ 'margin': '0 auto', 'justify-content': 'center' });
+    } else if (action == 'right') {
+        console.log('aaa', currentElement)
+        currentElement.find('.title').css({ 'margin': 'auto 0 auto auto', 'justify-content': 'end' });
+    }
+}
+
+
+function updateSizeBox(type, value) {
+    if (type == 'width') {
+        currentElement.find('.title').css('width', value + 'px')
+    } else if (type == 'height') {
+        currentElement.find('.title').css('height', value + 'px')
+    }
+}
+
+
+function updateBoderRadius(type, key, value) {
+    let element = '';
+    if (key == 'background') {
+        element = currentElement;
+    } else if (key == 'text') {
+        element = currentElement.find('.title');
+    }
+
+    if (type == 'top-left') {
+        element.css('border-top-left-radius', value + 'px');
+    } else if (type == 'top-right') {
+        element.css('border-top-right-radius', value + 'px');
+    } else if (type == 'bottom-left') {
+        element.css('border-bottom-left-radius', value + 'px');
+    } else if (type == 'bottom-right') {
+        element.css('border-bottom-right-radius', value + 'px');
+    }
+}
+
+
+function updateBorder(type, key, value) {
+    let element = '';
+    if (key == 'background') {
+        element = currentElement;
+    } else if (key == 'text') {
+        element = currentElement.find('.title');
+    }
+
+    if (type == 'border-width') {
+        element.css('border-width', value + 'px');
+    } else if (type == 'border-color') {
+        element.css('border-color', value);
+    } else if (type == 'border-style') {
+        element.css('border-style', value);
+    }
+}
+
+
+function saveCurrentState() {
+    // Lưu HTML hiện tại của giao diện
+    const currentHTML = document.documentElement.innerHTML;
+
+    // Nếu không ở cuối mảng (khi đã dùng nút back hoặc forward), loại bỏ các trạng thái phía sau
+    if (currentStateIndex < historyStates.length - 1) {
+        historyStates = historyStates.slice(0, currentStateIndex + 1);
+    }
+
+    // Lưu trạng thái mới và cập nhật chỉ số trạng thái hiện tại
+    historyStates.push(currentHTML);
+    currentStateIndex++;
+}
+
+
+function goBack() {
+    if (currentStateIndex > 0) {
+        currentStateIndex--;
+        document.documentElement.innerHTML = historyStates[currentStateIndex];
+    }
+}
+
+function goForward() {
+    if (currentStateIndex < historyStates.length - 1) {
+        currentStateIndex++;
+        document.documentElement.innerHTML = historyStates[currentStateIndex];
+    }
+}

assets/js/main.js

@@ -0,0 +1,196 @@
+$(document).ready(function () {
+    $('.faqlink').click(function () {
+        $(this).parents('.item').toggleClass('active');
+    });
+});
+
+
+var swiper_thumb = new Swiper(".thumbImage", {
+    spaceBetween: 10,
+    slidesPerView: 4,
+    direction: "vertical",
+    loop: true,
+    on: {
+        init: (swiper) => {
+            let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
+            let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
+            swiper.el.style.height = containerHeight + 'px';
+        },
+    },
+});
+
+var swiper_big = new Swiper(".BigImage", {
+    spaceBetween: 10,
+    watchSlidesProgress: true,
+    noSwiping: true,
+    navigation: {
+        nextEl: "#js-image-next",
+        prevEl: "#js-image-prev",
+    },
+    thumbs: {
+        swiper: swiper_thumb,
+    },
+});
+
+
+const showButton = document.getElementById('click-show');
+const priceList = document.getElementById('price-list');
+let currentIndex = 4; // Ban đầu hiển thị 4 item
+
+showButton.addEventListener('click', () => {
+    const itemWidth = document.querySelector('.item').offsetWidth;
+    priceList.scrollBy({ left: itemWidth, behavior: 'smooth' });
+    currentIndex++;
+
+    // Nếu đã scroll qua hết các item thì ẩn nút
+    if (currentIndex >= document.querySelectorAll('.item').length) {
+        showButton.style.display = 'none';
+    }
+});
+
+
+function formatCurrency(a) {
+    var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    var len = b.length;
+    b = b.substring(0, len - 3);
+    return b;
+}
+
+$('#price-list .item').on('click', function () {
+    var price = $(this).attr('data-price');
+    $('#js-input-price').val(formatCurrency(price));
+})
+
+
+
+productDetailTab()
+function productDetailTab() {
+    $(".tab .item-tab").click(function () {
+        var datatab = $(this).attr("data-id");
+        $(".tab .item-tab").removeClass("active");
+        $('.content-tab').removeClass("active");
+        $(this).addClass("active");
+        $(datatab).addClass("active");
+    });
+}
+
+TabHistory();
+function TabHistory() {
+    $(".tab-history .item-tab").click(function () {
+        var datatab = $(this).attr("data-id");
+        $(".tab-history .item-tab").removeClass("active");
+        $('.table-tab').removeClass("active");
+        $(this).addClass("active");
+        $(datatab).addClass("active");
+    });
+}
+
+
+
+checkRules();
+function checkRules() {
+    $('#submit_rules').on('click', function () {
+        if ($('#check_rules').is(':checked')) {
+            $('.box-popup').removeClass('active');
+            $('.popup-login').addClass('active')
+        } else {
+            alert('Quý khách cần đồng ý với thể lệ của chương trình')
+        }
+    })
+}
+
+
+function closePopop() {
+    $('.box-popup').removeClass('active');
+    $('.overlay').removeClass('active')
+}
+
+
+
+function checkAucton() {
+    $('.overlay').addClass('active')
+    $('.popup-rules').addClass('active')
+}
+
+
+function checklogin() {
+    $('.box-popup').removeClass('active');
+    $('.popup-yeucau').addClass('active')
+}
+
+function showInfoPay() {
+    $('.box-popup').removeClass('active');
+    $('.popup-info-pay').addClass('active')
+}
+
+formatPrice();
+function formatPrice() {
+    $('#js-input-price').on('input', function () {
+        let inputValue = $(this).val().replace(/\D/g, '');
+        let formattedValue = new Intl.NumberFormat().format(inputValue);
+
+        $(this).val(formattedValue);
+    });
+}
+
+
+function checkSendAuction() {
+    $('.box-popup').removeClass('active');
+
+    const price_present = _strToNumber($('#js-price-present').html());
+    const price_auction = _strToNumber($('#js-input-price').val());
+
+    const price_min = price_present + 300000;
+
+    if (price_auction > price_present) {
+        $('.overlay').addClass('active')
+        $('.popup-success').addClass('active')
+    } else {
+        $('.overlay').addClass('active')
+        $('.popup-error').addClass('active')
+        $('#js-price-min').html(formatCurrency(price_min))
+    }
+}
+
+
+function _strToNumber(str) {
+    str += '';
+    while (str.indexOf(".") > 0) {
+        str = str.replace('.', '');
+    }
+    var result = parseFloat(str);
+    return isNaN(result) ? 0 : result;
+}
+
+
+
+function checkOTP() {
+    $('.box-popup').removeClass('active');
+    $('.overlay').addClass('active')
+    $('.popup-thongbao').addClass('active')
+}
+
+function SendcheckOTP() {
+    $('.box-popup').removeClass('active');
+    $('.overlay').addClass('active')
+    $('.popup-input-opt').addClass('active')
+}
+
+
+function closePopop() {
+    $('.box-popup').removeClass('active');
+    $('.overlay').removeClass('active')
+}
+
+
+
+Tab();
+function Tab() {
+    $(".tab .item-tab").click(function () {
+        var datatab = $(this).attr("data-id");
+        $(".tab .item-tab").removeClass("active");
+        $('.content-tab').removeClass("active");
+        $(this).addClass("active");
+        $(datatab).addClass("active");
+    });
+}

assets/js/server.js

@@ -0,0 +1,21 @@
+// server.js
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+const app = express();
+const port = 5500;
+
+app.use(cors()); // Cho phép CORS
+app.use(bodyParser.json()); // Middleware để phân tích JSON
+
+// Endpoint để nhận yêu cầu POST
+app.post('/submit-bid', (req, res) => {
+    console.log(req.body); // In ra thông tin đã gửi
+    // Xử lý thông tin ở đây (lưu vào DB hoặc làm gì đó)
+    res.status(200).json({ message: 'Bid received', data: req.body });
+});
+
+// Khởi động server
+app.listen(port, () => {
+    console.log(`Server is running at 192.168.1.71:${port}`);
+});