У меня есть свой сайт на хостинге. Мне нужно подключить к нему базу данных через phpmyadmin (это есть на самом сайте). Нужно сохранять и использовать данные вводимые в форму авторизации пользователя. Вот мой script.js: // РЎРїРёСЃРѕРє РіРѕС‚РѕРІС‹С… РџРљ СЃ РєРѕРјРїР»РµРєС‚СѓСЋС‰РёРјРё
const products = [
    {
        id: 1,
        name: "Thunder spear",
        image: "https://www.1stplayer.com/uploads/images/20201023/b85c7a696f245f6e82415b24832bf0cf.png",
        price: 150000,
        category: "PC", 
        components: {
            "CPU": { name: "Intel core ultra 5", image: "https://r2p.com.ua/content/images/41/protsesor-intel-core-ultra-5-245k-bx80768245k-64139805826454_+0d6d2747a2.png", price: 16000 },
            "Motherboard": { name: "ASUS Z990 Gaming", image: "https://dlcdnwebimgs.asus.com/gain/06c30b53-c697-4c79-a567-8ae099943f1c/w800", price: 12000 },
            "RAM": { name: "GSkill 32GB DDR5", image: "https://images.1a.lv/display/aikido/cache/7e415e0532139638f14ae5f1a40c08ee.png", price: 8000 },
            "GPU": { name: "NVIDIA RTX 4070 SUPER", image: "https://24.lv/images/detailed/870/600_a2ba-d9.png", price: 20000 },
            "PSU": { name: "Cougar GEX750 80+", image: "https://spbsis.ru/wa-data/public/shop/products/27/35/53527/images/110618/110618.420.png", price: 20000 },
            "CASE": { name: "MONTECH KING 95 PRO Full-Tower", image: "https://www.1stplayer.com/uploads/images/20201023/b85c7a696f245f6e82415b24832bf0cf.png", price: 17000 }
        }
    },
    {
        id: 2,
        name: "GAMING Capitan PRO",
        image: "https://www.lyambda.com/wp-content/uploads/2023/03/L-GM1738-BK_1-p-s.png.webp",
        price: 100000,
        category: "PC",
        components: {
            "CPU": { name: "AMD Ryzen 7", image: "https://cdn0.it4profit.com/s3size/rt:fill/w:900/h:900/g:no/el:1/f:webp/plain/s3://cms/product/0d/3f/0d3fd3857ded8a62bed53d1f1c224058/240912140040010910.webp", price: 22000 },
            "Motherboard": { name: "MSI B650 WIFI PLUS", image: "https://asset.msi.com/resize/image/global/product/product_16647820029d01ca38195280b73c7eb1a9d602e855.png62405b38c58fe0f07fcef2367d8a9ba1/600.png", price: 13000 },
            "RAM": { name: "ADATA Lancer 32GB DDR5", image: "https://pcbelfast.co.uk/wp-content/uploads/2023/10/XPG-LANCER.png", price: 15000 },
            "GPU": { name: "NVIDIA RTX 4060", image: "https://i.ebayimg.com/images/g/~uoAAOSwtFZkpmcS/s-l1200.png", price: 35000 },
            "PSU": { name: "DEEPCOOL PF750 Bronze 80+", image: "https://royal-computers.ru/upload/thumbs/catalog/source/power_5e4e84.png", price: 35000 },
            "CASE": { name: "DEEPCOOL CK560 Mid-Tower", image: "https://www.lyambda.com/wp-content/uploads/2023/03/L-GM1738-BK_1-p-s.png.webp", price: 9600 }
        }
    },
    {
        id: 3,
        name: "Infinity X-101",
        image: "https://cougargaming.com/_cgrwdr_/wwdpp/wp-content/uploads/2022/06/MX330-F-03.png",
        price: 80000,
        category: "PC",
        components: {
            "CPU": { name: "AMD Ryzen 5", image: "https://images.satu.kz/218218703_w600_h600_218218703.jpg", price: 16000 },
            "Motherboard": { name: "ASUS A620 Gaming", image: "https://dlcdnwebimgs.asus.com/gain/041d5ac0-be0d-4caf-a31a-0ffee9ab637a/", price: 12000 },
            "RAM": { name: "GSkill 16GB DDR5", image: "https://images.1a.lv/display/aikido/cache/7e415e0532139638f14ae5f1a40c08ee.png", price: 8000 },
            "GPU": { name: "NVIDIA GTX 1660 SUPER", image: "https://pcmarket.uz/wp-content/uploads/2022/11/p03423_bigimage_104160384c3ce5df3.png", price: 20000 },
            "PSU": { name: "DEEPCOOL PF550 80+", image: "https://royal-computers.ru/upload/thumbs/catalog/source/power_5e4e84.png", price: 20000 },
            "CASE": { name: "MSI MAG FORGE M111R Mini-Tower", image: "https://cougargaming.com/_cgrwdr_/wwdpp/wp-content/uploads/2022/06/MX330-F-03.png", price: 6000 }
        }
    },
    {
        id: 4,
        name: "Steel Titan",
        image: "https://gamingpc.com.ua/image/cache/component-description/12de29b6595f86dec38a7e19a7bdfb1b-590.webp",
        price: 200000,
        category: "PC",
        components: {
            "CPU": { name: "AMD Ryzen 9", image: "https://gamezone.com.ua/media/gamezone/gamezone/galley/image/E/R/I/media_240826_080418.webp", price: 22000 },
            "Motherboard": { name: "MSI X670 PREMIUM PLUS", image: "https://www.avadirect.com/Pictures/Big/17207459_1.png", price: 13000 },
            "RAM": { name: "KINGSTON FURY 128GB DDR5", image: "https://www.avadirect.com/Pictures/500/16023785_1.png", price: 15000 },
            "GPU": { name: "NVIDIA RTX 4070 Ti SUPER", image: "https://static0.xdaimages.com/wordpress/wp-content/uploads/2024/01/zotac-gaming-geforce-rtx-4070-ti-super-amp-holo-product.png", price: 35000 },
            "PSU": { name: "Cougar GEX950 80+ Gold", image: "https://spbsis.ru/wa-data/public/shop/products/27/35/53527/images/110618/110618.420.png", price: 35000 },
            "CASE": { name: "MONTECH KING 95 PRO Full-Tower", image: "https://gamingpc.com.ua/image/cache/component-description/12de29b6595f86dec38a7e19a7bdfb1b-590.webp", price: 17000 }
        }
    },
];

// РљРѕРјРїР»РµРєС‚СѓСЋС‰РёРµ РґР»СЏ СЃРѕР±СЃС‚РІРµРЅРЅРѕР№ СЃР±РѕСЂРєРё
const componentCategories = {
    "CPU": [
        {
            id: 1,
            name: "Intel core ultra 5",
            image: "https:// ",
            price: 16000
        },
        {
            id: 2,
            name: "AMD Ryzen 7",
            image: "https:// ",
            price: 22000
        }
    ],
    "Motherboard": [
        {
            id: 3,
            name: "ASUS A620 Gaming",
            image: "https:// ",
            price: 10000
        },
        {
            id: 4,
            name: "MSI B650 WIFI PLUS",
            image: "https:// ",
            price: 19000
        },
        {
            id: 14,
            name: "GIGABYTE H810",
            image: "https:// ",
            price: 9000
        },
        {
            id: 15,
            name: "ASUS Z890 ROG MAXIMUS",
            image: "https:// ",
            price: 26000
        }
    ],
    "RAM": [
        {
            id: 5,
            name: "GSkill 16GB DDR5",
            image: "https:// ",
            price: 8000
        },
        {
            id: 6,
            name: "ADATA Lancer 32GB DDR5",
            image: "https:// ",
            price: 15000
        }
    ],
    "GPU": [
        {
            id: 7,
            name: "NVIDIA GTX 1660 SUPER",
            image: "https:// ",
            price: 20000
        },
        {
            id: 8,
            name: "NVIDIA RTX 4060",
            image: "https:// ",
            price: 35000
        }
    ],
    "PSU": [
        {
            id: 9,
            name: "DEEPCOOL PF750 Bronze 80+",
            image: "https:// ",
            price: 20000
        },
        {
            id: 10,
            name: "Cougar GEX950 80+ Gold",
            image: "https:// ",
            price: 35000
        }
    ],
    "CASE": [
        {
            id: 11,
            name: "MONTECH KING 95 PRO Full-Tower",
            image: "https:// ",
            price: 17000
        },
        {
            id: 12,
            name: "DEEPCOOL CK560 Mid-Tower",
            image: "https:// ",
            price: 9600
        },
        {
            id: 13,
            name: "MSI MAG FORGE M111R Mini-Tower",
            image: "https:// ",
            price: 6000
        }
    ],
};

// Р”Р»СЏ С…СЂР°РЅРµРЅРёСЏ РІС‹Р±СЂР°РЅРЅС‹С… РєРѕРјРїРѕРЅРµРЅС‚РѕРІ СЃРѕР±СЃС‚РІРµРЅРЅРѕР№ СЃР±РѕСЂРєРё
let selectedComponents = {
    "CPU": null,
    "Motherboard": null,
    "RAM": null,
    "GPU": null,
    "PSU": null,
    "CASE": null
};

const SERVER_URL = 'http://localhost:3000/api/auth';

// Р РµРіРёСЃС‚СЂР°С†РёСЏ Рё Р°РІС‚РѕСЂРёР·Р°С†РёСЏ
const authModal = document.getElementById('authModal');
const loginBtn = document.getElementById('loginBtn');
const closeModal = document.getElementById('closeModal');
const authForm = document.getElementById('authForm');
const authMessage = document.getElementById('authMessage');
const userSection = document.getElementById('userSection');

// РџРѕРєР°Р·С‹РІР°РµРј РѕРєРЅРѕ
loginBtn.addEventListener('click', () => {
    authModal.style.display = 'block';
});

// Р—Р°РєСЂС‹РІР°РµРј РѕРєРЅРѕ
closeModal.addEventListener('click', () => {
    authModal.style.display = 'none';
});

// Р—Р°РєСЂС‹РІР°РµРј РїСЂРё РєР»РёРєРµ РІРЅРµ РѕРєРЅР°
window.addEventListener('click', (e) => {
    if (e.target == authModal) {
        authModal.style.display = 'none';
    }
});

// РћР±СЂР°Р±РѕС‚РєР° С„РѕСЂРјС‹ Р°РІС‚РѕСЂРёР·Р°С†РёРё
authForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const username = authForm.username.value.trim();
    const password = authForm.password.value.trim();

    if (!username || !password) {
        authMessage.textContent = "РџРѕР¶Р°Р»СѓР№СЃС‚Р°, Р·Р°РїРѕР»РЅРёС‚Рµ РІСЃРµ РїРѕР»СЏ.";
        return;
    }

    // РћРїСЂРµРґРµР»СЏРµРј РґРµР№СЃС‚РІРёРµ: СЂРµРіРёСЃС‚СЂР°С†РёСЏ РёР»Рё РІС…РѕРґ
    let action = 'login';
    if (!localStorage.getItem('currentUser')) {
        action = 'register';
    }

    try {
        const response = await fetch(SERVER_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ action, username, password })
        });

        const data = await response.json();

        if (response.ok) {
            if (action === 'register') {
                authMessage.style.color = 'green';
                authMessage.textContent = data.message;
                // РђРІС‚РѕРјР°С‚РёС‡РµСЃРєРё РІС…РѕРґ РїРѕСЃР»Рµ СЂРµРіРёСЃС‚СЂР°С†РёРё
                localStorage.setItem('currentUser', username);
                updateUserSection();
                authModal.style.display = 'none';
                authMessage.textContent = '';
            } else {
                // РђРІС‚РѕСЂРёР·Р°С†РёСЏ
                localStorage.setItem('currentUser', data.username);
                updateUserSection();
                authModal.style.display = 'none';
                authMessage.textContent = '';
            }
        } else {
            authMessage.style.color = 'red';
            authMessage.textContent = data.message;
        }
    } catch (error) {
        console.error('РћС€РёР±РєР°:', error);
        authMessage.textContent = "РџСЂРѕРёР·РѕС€Р»Р° РѕС€РёР±РєР°. РџРѕРїСЂРѕР±СѓР№С‚Рµ РїРѕР·Р¶Рµ.";
    }
});

// РћР±РЅРѕРІР»РµРЅРёРµ СЃРµРєС†РёРё РїРѕР»СЊР·РѕРІР°С‚РµР»СЏ
function updateUserSection() {
    const currentUser = localStorage.getItem('currentUser');
    if (currentUser) {
        userSection.innerHTML = `<span>Р”РѕР±СЂРѕ РїРѕР¶Р°Р»РѕРІР°С‚СЊ, ${currentUser}</span> <button id="logoutBtn">Р’С‹Р№С‚Рё</button>`;

        document.getElementById('logoutBtn').addEventListener('click', () => {
            localStorage.removeItem('currentUser');
            userSection.innerHTML = `<button id="loginBtn">Р’С…РѕРґ / Р РµРіРёСЃС‚СЂР°С†РёСЏ</button>`;
            document.getElementById('loginBtn').addEventListener('click', () => {
                authModal.style.display = 'block';
            });

            // Р•СЃР»Рё РїРѕР»СЊР·РѕРІР°С‚РµР»СЊ РІС‹С€РµР», СЃРєСЂС‹РІР°РµРј РІРєР»Р°РґРєСѓ "РљРѕРјРїР»РµРєС‚Р°С†РёСЏ РџРљ"
            const detailsTabButton = document.querySelector('.tab-btn[data-tab="details"]');
            if (detailsTabButton) {
                detailsTabButton.style.display = 'none';
            }
        });

        // РџРѕРєР°Р·С‹РІР°РµРј РІРєР»Р°РґРєСѓ "РљРѕРјРїР»РµРєС‚Р°С†РёСЏ РџРљ"
        const detailsTabButton = document.querySelector('.tab-btn[data-tab="details"]');
        if (detailsTabButton) {
            detailsTabButton.style.display = 'inline-block';
        }
    } else {
        // Р•СЃР»Рё РїРѕР»СЊР·РѕРІР°С‚РµР»СЊ РІС‹С€РµР», СЃРєСЂС‹РІР°РµРј РІРєР»Р°РґРєСѓ "РљРѕРјРїР»РµРєС‚Р°С†РёСЏ РџРљ"
        const detailsTabButton = document.querySelector('.tab-btn[data-tab="details"]');
        if (detailsTabButton) {
            detailsTabButton.style.display = 'none';
        }
    }
}

// РРЅРёС†РёР°Р»РёР·Р°С†РёСЏ РїСЂРё Р·Р°РіСЂСѓР·РєРµ СЃС‚СЂР°РЅРёС†С‹
document.addEventListener('DOMContentLoaded', () => {
    updateUserSection();
    displayProducts(products);
    initializeCustomBuild();
});

// РџРµСЂРµРєР»СЋС‡РµРЅРёРµ РІРєР»Р°РґРѕРє
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

// Р¤СѓРЅРєС†РёСЏ РґР»СЏ РїРµСЂРµРєР»СЋС‡РµРЅРёСЏ РІРєР»Р°РґРѕРє
function switchTab(tabName) {
    // РџСЂРѕРІРµСЂРєР° Р°РІС‚РѕСЂРёР·Р°С†РёРё РґР»СЏ РІРєР»Р°РґРєРё "details"
    if (tabName === "details" && !localStorage.getItem('currentUser')) {
        alert("РџРѕР¶Р°Р»СѓР№СЃС‚Р°, РІС‹РїРѕР»РЅРёС‚Рµ РІС…РѕРґ РёР»Рё Р·Р°СЂРµРіРёСЃС‚СЂРёСЂСѓР№С‚РµСЃСЊ РґР»СЏ РїСЂРѕСЃРјРѕС‚СЂР° РґРµС‚Р°Р»РµР№ Рё РѕС„РѕСЂРјР»РµРЅРёСЏ Р·Р°РєР°Р·Р°.");
        return;
    }

    // РЈРґР°Р»СЏРµРј Р°РєС‚РёРІРЅС‹Р№ РєР»Р°СЃСЃ Сѓ РІСЃРµС… РєРЅРѕРїРѕРє
    tabButtons.forEach(b => b.classList.remove('active'));

    // Р”РѕР±Р°РІР»СЏРµРј Р°РєС‚РёРІРЅС‹Р№ РєР»Р°СЃСЃ СЃРѕРѕС‚РІРµС‚СЃС‚РІСѓСЋС‰РµР№ РєРЅРѕРїРєРµ, РµСЃР»Рё РѕРЅР° СЃСѓС‰РµСЃС‚РІСѓРµС‚
    const correspondingButton = document.querySelector(`.tab-btn[data-tab="${tabName}"]`);
    if (correspondingButton) {
        correspondingButton.classList.add('active');
    }

    // РЎРєСЂС‹РІР°РµРј РІСЃРµ СЃРѕРґРµСЂР¶РёРјС‹Рµ РІРєР»Р°РґРѕРє
    tabContents.forEach(content => content.classList.remove('active'));

    // РџРѕРєР°Р·С‹РІР°РµРј РІС‹Р±СЂР°РЅРЅСѓСЋ РІРєР»Р°РґРєСѓ
    const targetTab = document.getElementById(tabName);
    if (targetTab) {
        targetTab.classList.add('active');
    }
}

// Р”РѕР±Р°РІР»СЏРµРј РѕР±СЂР°Р±РѕС‚С‡РёРєРё РЅР° РєРЅРѕРїРєРё РІРєР»Р°РґРѕРє
tabButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        const activeTab = btn.getAttribute('data-tab');
        switchTab(activeTab);
    });
});

tabButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        const activeTab = btn.getAttribute('data-tab');

        // Р•СЃР»Рё РїРѕР»СЊР·РѕРІР°С‚РµР»СЊ РЅРµ Р°РІС‚РѕСЂРёР·РѕРІР°РЅ Рё РїС‹С‚Р°РµС‚СЃСЏ РѕС‚РєСЂС‹С‚СЊ "РљРѕРјРїР»РµРєС‚Р°С†РёСЏ РџРљ", РїРѕРєР°Р·С‹РІР°РµРј СЃРѕРѕР±С‰РµРЅРёРµ
        if (activeTab === "details" && !localStorage.getItem('currentUser')) {
            alert("РџРѕР¶Р°Р»СѓР№СЃС‚Р°, РІС‹РїРѕР»РЅРёС‚Рµ РІС…РѕРґ РёР»Рё Р·Р°СЂРµРіРёСЃС‚СЂРёСЂСѓР№С‚РµСЃСЊ РґР»СЏ РїСЂРѕСЃРјРѕС‚СЂР° РґРµС‚Р°Р»РµР№ Рё РѕС„РѕСЂРјР»РµРЅРёСЏ Р·Р°РєР°Р·Р°.");
            return;
        }

        // РЈРґР°Р»СЏРµРј Р°РєС‚РёРІРЅС‹Р№ РєР»Р°СЃСЃ Сѓ РІСЃРµС… РєРЅРѕРїРѕРє Рё РґРѕР±Р°РІР»СЏРµРј С‚РµРєСѓС‰РµР№
        tabButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        // РЎРєСЂС‹РІР°РµРј РІСЃРµ РєРѕРЅС‚РµРЅС‚С‹ Рё РїРѕРєР°Р·С‹РІР°РµРј РЅСѓР¶РЅС‹Р№
        tabContents.forEach(content => content.classList.remove('active'));
        document.getElementById(activeTab).classList.add('active');
    });
});

// РћС‚РѕР±СЂР°Р¶РµРЅРёРµ РїСЂРѕРґСѓРєС‚РѕРІ
function displayProducts(productList) {
    const container = document.getElementById('productsContainer');
    container.innerHTML = '';

    if (productList.length === 0) {
        container.innerHTML = '<p>РўРѕРІР°СЂС‹ РЅРµ РЅР°Р№РґРµРЅС‹.</p>';
        return;
    }

    productList.forEach(product => {
        const div = document.createElement('div');
        div.classList.add('product');
        div.innerHTML = `
            <img src="${product.image}" alt="${product.name}">
            <h3>${product.name}</h3>
            <p>${product.price} СЂСѓР±</p>
            <button class="view-components-btn" data-id="${product.id}">РџРѕСЃРјРѕС‚СЂРµС‚СЊ РєРѕРјРїР»РµРєС‚СѓСЋС‰РёРµ</button>
        `;
        container.appendChild(div);
    });

    // Р”РѕР±Р°РІР»СЏРµРј РѕР±СЂР°Р±РѕС‚С‡РёРєРё РґР»СЏ РєРЅРѕРїРѕРє
    const viewButtons = document.querySelectorAll('.view-components-btn');
    viewButtons.forEach(button => {
        button.addEventListener('click', () => {
            const productId = parseInt(button.getAttribute('data-id'));
            showProductDetails(productId);
        });
    });
}

// РџРѕРёСЃРє С‚РѕРІР°СЂРѕРІ
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', () => {
    const query = searchInput.value.toLowerCase();
    const filteredProducts = products.filter(p => p.name.toLowerCase().includes(query));
    displayProducts(filteredProducts);
});

/* РЎРѕР±СЃС‚РІРµРЅРЅР°СЏ СЃР±РѕСЂРєР° */

// Р¤СѓРЅРєС†РёСЏ РґР»СЏ РѕС‚РѕР±СЂР°Р¶РµРЅРёСЏ СѓРІРµРґРѕРјР»РµРЅРёР№
function showNotification(message) {
    let notification = document.getElementById('notification');
    if (!notification) {
        notification = document.createElement('div');
        notification.id = 'notification';
        document.body.appendChild(notification);
    }
    notification.textContent = message;
    notification.classList.add('show');
    setTimeout(() => {
        notification.classList.remove('show');
    }, 1500); // РЈР±СЂР°С‚СЊ С‡РµСЂРµР· 1.5 СЃРµРєСѓРЅРґС‹
}

// РРЅРёС†РёР°Р»РёР·Р°С†РёСЏ РёРЅС‚РµСЂС„РµР№СЃР° СЃРѕР±СЃС‚РІРµРЅРЅРѕР№ СЃР±РѕСЂРєРё
function initializeCustomBuild() {
    const customBuildForm = document.getElementById('customBuildForm');

    for (const category in componentCategories) {
        const select = customBuildForm.querySelector(`select[data-category="${category}"]`);
        if (select) {
            componentCategories[category].forEach(component => {
                const option = document.createElement('option');
                option.value = component.id;
                option.textContent = `${component.name} (${component.price} СЂСѓР±)`;
                select.appendChild(option);
            });

            // Р”РѕР±Р°РІР»СЏРµРј РѕР±СЂР°Р±РѕС‚С‡РёРє РёР·РјРµРЅРµРЅРёСЏ
            select.addEventListener('change', (e) => {
                const selectedId = parseInt(e.target.value);
                const selectedComp = componentCategories[category].find(c => c.id === selectedId) || null;
                selectedComponents[category] = selectedComp;
                updateTotalPrice();
                if (selectedComp) {
                    showNotification(`${category} РІС‹Р±СЂР°РЅ: ${selectedComp.name}`);
                }
            });
        }
    }

    // РћР±СЂР°Р±РѕС‚С‡РёРє РєРЅРѕРїРєРё "РЎРґРµР»Р°С‚СЊ Р·Р°РєР°Р·"
    const makeOrderBtn = document.getElementById('makeOrderBtn');
    makeOrderBtn.addEventListener('click', makeOrder);
}

// РћР±РЅРѕРІР»РµРЅРёРµ РѕР±С‰РµР№ СЃС‚РѕРёРјРѕСЃС‚Рё СЃР±РѕСЂРєРё
function updateTotalPrice() {
    let total = 0;
    Object.values(selectedComponents).forEach(comp => {
        if (comp) {
            total += comp.price;
        }
    });
    document.getElementById('totalPrice').textContent = `${total} СЂСѓР±`;
}

// РћР±СЂР°Р±РѕС‚РєР° Р·Р°РєР°Р·Р° СЃРѕР±СЃС‚РІРµРЅРЅРѕР№ СЃР±РѕСЂРєРё
function makeOrder() {
    // РџСЂРѕРІРµСЂСЏРµРј, РІСЃРµ Р»Рё РєРѕРјРїРѕРЅРµРЅС‚С‹ РІС‹Р±СЂР°РЅС‹ (РѕРїС†РёРѕРЅР°Р»СЊРЅРѕ)
    const allSelected = Object.values(selectedComponents).every(comp => comp !== null);
    if (!allSelected) {
        alert("РџРѕР¶Р°Р»СѓР№СЃС‚Р°, РІС‹Р±РµСЂРёС‚Рµ РІСЃРµ РЅРµРѕР±С…РѕРґРёРјС‹Рµ РєРѕРјРїРѕРЅРµРЅС‚С‹ РґР»СЏ СЃР±РѕСЂРєРё.");
        return;
    }

    // РџСЂРѕРІРµСЂРєР° Р°РІС‚РѕСЂРёР·Р°С†РёРё РїРѕР»СЊР·РѕРІР°С‚РµР»СЏ
    const currentUser = localStorage.getItem('currentUser');
    if (!currentUser) {
        alert("РџРѕР¶Р°Р»СѓР№СЃС‚Р°, РІС‹РїРѕР»РЅРёС‚Рµ РІС…РѕРґ РёР»Рё Р·Р°СЂРµРіРёСЃС‚СЂРёСЂСѓР№С‚РµСЃСЊ РґР»СЏ РѕС„РѕСЂРјР»РµРЅРёСЏ Р·Р°РєР°Р·Р°.");
        return;
    }

    // РџСЂРёРјРµСЂ СЃРѕС…СЂР°РЅРµРЅРёСЏ Р·Р°РєР°Р·Р° РІ localStorage
    let orders = JSON.parse(localStorage.getItem('orders')) || [];
    const order = {
        id: Date.now(),
        user: currentUser,
        type: 'Custom Build',
        components: { ...selectedComponents },
        price: Object.values(selectedComponents).reduce((sum, comp) => sum + (comp.price || 0), 0),
        date: new Date().toLocaleString()
    };
    orders.push(order);
    localStorage.setItem('orders', JSON.stringify(orders));

    alert("Р—Р°РєР°Р· СѓСЃРїРµС€РЅРѕ СЃРґРµР»Р°РЅ! РЎ РІР°РјРё СЃРІСЏР¶РµС‚СЃСЏ РјРµРЅРµРґР¶РµСЂ.");

    // РЎР±СЂРѕСЃ СЃР±РѕСЂРєРё
    resetCustomBuild();
}

// РЎР±СЂРѕСЃ СЃРѕР±СЃС‚РІРµРЅРЅРѕР№ СЃР±РѕСЂРєРё
function resetCustomBuild() {
    selectedComponents = {
        "CPU": null,
        "Motherboard": null,
        "RAM": null,
        "GPU": null,
        "PSU": null,
        "CASE": null
    };
    const customBuildForm = document.getElementById('customBuildForm');
    customBuildForm.reset();
    updateTotalPrice();
}

// РћС‚РѕР±СЂР°Р¶РµРЅРёРµ РґРµС‚Р°Р»РµР№ РІС‹Р±СЂР°РЅРЅРѕРіРѕ РџРљ
function showProductDetails(productId) {
    const product = products.find(p => p.id === productId);
    if (!product) {
        alert("РџСЂРѕРґСѓРєС‚ РЅРµ РЅР°Р№РґРµРЅ.");
        return;
    }

    // РџРµСЂРµРєР»СЋС‡Р°РµРјСЃСЏ РЅР° РІРєР»Р°РґРєСѓ "РљРѕРјРїР»РµРєС‚Р°С†РёСЏ РџРљ"
    tabButtons.forEach(b => b.classList.remove('active'));
    const detailsTabButton = document.querySelector('.tab-btn[data-tab="details"]');
    //detailsTabButton.style.display = 'inline-block'; //РєРЅРѕРїРєР° РІРёРґРЅР°
    detailsTabButton.classList.add('active');

    tabContents.forEach(content => content.classList.remove('active'));
    document.getElementById('details').classList.add('active');

    // РћС‚РѕР±СЂР°Р¶Р°РµРј РєРѕРјРїР»РµРєС‚СѓСЋС‰РёРµ
    displayProductComponents(product);
}

// РћС‚РѕР±СЂР°Р¶РµРЅРёРµ РєРѕРјРїР»РµРєС‚СѓСЋС‰РёС… РІС‹Р±СЂР°РЅРЅРѕРіРѕ РџРљ
function displayProductComponents(product) {
    const componentsGrid = document.getElementById('productComponentsGrid');
    componentsGrid.innerHTML = '';

    for (const category in product.components) {
        const component = product.components[category];
        const cell = document.createElement('div');
        cell.classList.add('component-cell');
        cell.innerHTML = `
            <img src="${component.image}" alt="${component.name}">
            <span class="component-name">${component.name}</span>
        `;
        componentsGrid.appendChild(cell);
    }

    // РЈСЃС‚Р°РЅР°РІР»РёРІР°РµРј С„РёРєСЃРёСЂРѕРІР°РЅРЅСѓСЋ СЃС‚РѕРёРјРѕСЃС‚СЊ РёР· РїСЂРѕРґСѓРєС‚Р°
    document.getElementById('productTotalPrice').textContent = `${product.price} СЂСѓР±`;

    // РЎРѕС…СЂР°РЅРµРЅРёРµ С†РµРЅС‹ Рё РЅР°Р·РІР°РЅРёСЏ РїСЂРѕРґСѓРєС‚Р° РІ data-Р°С‚СЂРёР±СѓС‚С‹ РєРЅРѕРїРєРё Р·Р°РєР°Р·Р°
    const orderButton = document.getElementById('makeProductOrderBtn');
    orderButton.setAttribute('data-price', product.price);
    orderButton.setAttribute('data-name', product.name);
}

// РћР±СЂР°Р±РѕС‚С‡РёРє РєРЅРѕРїРєРё "РћС„РѕСЂРјРёС‚СЊ Р·Р°РєР°Р·" РґР»СЏ РІС‹Р±СЂР°РЅРЅРѕРіРѕ РџРљ
const makeProductOrderBtn = document.getElementById('makeProductOrderBtn');
makeProductOrderBtn.addEventListener('click', () => {
    const productName = makeProductOrderBtn.getAttribute('data-name');
    const productPrice = makeProductOrderBtn.getAttribute('data-price');

    // РџСЂРѕРІРµСЂРєР° Р°РІС‚РѕСЂРёР·Р°С†РёРё РїРѕР»СЊР·РѕРІР°С‚РµР»СЏ
    const currentUser = localStorage.getItem('currentUser');
    if (!currentUser) {
        alert("РџРѕР¶Р°Р»СѓР№СЃС‚Р°, РІС‹РїРѕР»РЅРёС‚Рµ РІС…РѕРґ РёР»Рё Р·Р°СЂРµРіРёСЃС‚СЂРёСЂСѓР№С‚РµСЃСЊ РґР»СЏ РѕС„РѕСЂРјР»РµРЅРёСЏ Р·Р°РєР°Р·Р°.");
        return;
    }

    // РџСЂРёРјРµСЂ СЃРѕС…СЂР°РЅРµРЅРёСЏ Р·Р°РєР°Р·Р° РІ localStorage
    let orders = JSON.parse(localStorage.getItem('orders')) || [];
    const order = {
        id: Date.now(),
        user: currentUser,
        type: 'Ready PC',
        product: productName,
        price: parseInt(productPrice),
        date: new Date().toLocaleString()
    };
    orders.push(order);
    localStorage.setItem('orders', JSON.stringify(orders));

    alert("Р—Р°РєР°Р· СѓСЃРїРµС€РЅРѕ РѕС„РѕСЂРјР»РµРЅ! РЎ РІР°РјРё СЃРІСЏР¶РµС‚СЃСЏ РјРµРЅРµРґР¶РµСЂ.");

    // РЎР±СЂРѕСЃ РёР»Рё РІРѕР·РІСЂР°С‚ РЅР° РІРєР»Р°РґРєСѓ "Р“РѕС‚РѕРІС‹Рµ РџРљ"
    resetProductDetails();
});

// Р¤СѓРЅРєС†РёСЏ СЃР±СЂРѕСЃР° РґРµС‚Р°Р»РµР№ РїСЂРѕРґСѓРєС‚Р°
function resetProductDetails() {
    const componentsGrid = document.getElementById('productComponentsGrid');
    componentsGrid.innerHTML = '';
    document.getElementById('productTotalPrice').textContent = '0 СЂСѓР±';

    // РћС‡РёСЃС‚РєР° data-Р°С‚СЂРёР±СѓС‚РѕРІ РєРЅРѕРїРєРё Р·Р°РєР°Р·Р°
    const orderButton = document.getElementById('makeProductOrderBtn');
    orderButton.removeAttribute('data-price');
    orderButton.removeAttribute('data-name');

    // РџРµСЂРµРєР»СЋС‡Р°РµРјСЃСЏ РѕР±СЂР°С‚РЅРѕ РЅР° РІРєР»Р°РґРєСѓ "Р“РѕС‚РѕРІС‹Рµ РџРљ"
    tabButtons.forEach(b => b.classList.remove('active'));
    const readyTabButton = document.querySelector('.tab-btn[data-tab="ready"]');
    readyTabButton.classList.add('active');

    tabContents.forEach(content => content.classList.remove('active'));
    document.getElementById('ready').classList.add('active');
}

// РћР±СЂР°Р±РѕС‚С‡РёРє РєРЅРѕРїРєРё "РљРѕРЅС‚Р°РєС‚РЅР°СЏ РёРЅС„РѕСЂРјР°С†РёСЏ"
const contactButton = document.getElementById('contactButton');
const contactTabButton = document.querySelector('.tab-btn[data-tab="contact"]');

contactButton.addEventListener('click', () => {
    if (contactTabButton) {
        contactTabButton.click(); // РџРµСЂРµРєР»СЋС‡Р°РµРјСЃСЏ РЅР° РІРєР»Р°РґРєСѓ "РљРѕРЅС‚Р°РєС‚РЅР°СЏ РёРЅС„РѕСЂРјР°С†РёСЏ"
    } else {
        // Р•СЃР»Рё РєРЅРѕРїРєР° РІРєР»Р°РґРєРё РЅРµ РЅР°Р№РґРµРЅР°, РІС‹РІРѕРґРёРј СЃРѕРѕР±С‰РµРЅРёРµ РёР»Рё РїРµСЂРµРєР»СЋС‡Р°РµРјСЃСЏ РґСЂСѓРіРёРј СЃРїРѕСЃРѕР±РѕРј
        alert("Р’РєР»Р°РґРєР° 'РљРѕРЅС‚Р°РєС‚РЅР°СЏ РёРЅС„РѕСЂРјР°С†РёСЏ' РЅРµ РЅР°Р№РґРµРЅР°.");
    }
});

function animateComponents() {
    const grid = document.getElementById('productComponentsGrid');
    const cells = grid.getElementsByClassName('component-cell');

    Array.from(cells).forEach((cell, index) => {
        // Р”РѕР±Р°РІР»СЏРµРј РєР»Р°СЃСЃС‹ РЅР°С‡Р°Р»СЊРЅРѕР№ РїРѕР·РёС†РёРё
        cell.classList.add('initial');
        switch (index) {
            case 0:
                cell.classList.add('motherboard-initial');
                break;
            case 1:
                cell.classList.add('cpu-initial');                break;
            case 2:
                cell.classList.add('ram-initial');
                break;
            case 3:
                cell.classList.add('gpu-initial');
                break;
            case 4:
                cell.classList.add('psu-initial');
                break;
            case 5:
                cell.classList.add('case-initial');
                break;
        }
    });

    setTimeout(() => {
        Array.from(cells).forEach((cell, index) => {
            setTimeout(() => {
                cell.classList.remove('initial'); // РЈР±РёСЂР°РµРј РЅР°С‡Р°Р»СЊРЅСѓСЋ РїСЂРѕР·СЂР°С‡РЅРѕСЃС‚СЊ
                cell.classList.add('animate'); // Р—Р°РїСѓСЃРєР°РµРј Р°РЅРёРјР°С†РёСЋ
            }, index * 150); // Р—Р°РґРµСЂР¶РєР° РјРµР¶РґСѓ Р°РЅРёРјР°С†РёРµР№ РєР°Р¶РґРѕРіРѕ СЌР»РµРјРµРЅС‚Р°
        });
    }, 1000); // РћР±С‰Р°СЏ Р·Р°РґРµСЂР¶РєР° РїРµСЂРµРґ РЅР°С‡Р°Р»РѕРј Р°РЅРёРјР°С†РёРё
}

function displayProductComponents(product) {
    const componentsGrid = document.getElementById('productComponentsGrid');
    componentsGrid.innerHTML = '';

    for (const category in product.components) {
        const component = product.components[category];
        const cell = document.createElement('div');
        cell.classList.add('component-cell');
        cell.innerHTML = `
            <img src="${component.image}" alt="${component.name}">
            <span class="component-name">${component.name}</span>
        `;
        componentsGrid.appendChild(cell);
    }

    document.getElementById('productTotalPrice').textContent = `${product.price} СЂСѓР±`;

    const orderButton = document.getElementById('makeProductOrderBtn');
    orderButton.setAttribute('data-price', product.price);
    orderButton.setAttribute('data-name', product.name);

    animateComponents(); // Р—Р°РїСѓСЃРє Р°РЅРёРјР°С†РёРё РїРѕСЃР»Рµ РѕС‚РѕР±СЂР°Р¶РµРЅРёСЏ РєРѕРјРїРѕРЅРµРЅС‚РѕРІ
}