У меня код для сайта по продаже ПК. Твоя задача добавить функционал при выборе комплектующих во вкладки "Собственная сборка". Чтобы при нажатии данный товар выбирался, его фотка и название отражались в соответствующем окне, прибавлялась стоимость сборки. Также необходимо, чтобы при выборе товара в правом нижнем углу сбоку вылетало окно зелёного цвета с надписью "Товар добавлен". Длительность отображения этого окна 1.5 секунды. Остальное ничего не трогай и оставь как было.

script.js:
// Список готовых ПК с комплектующими
const products = [
    {
        id: 1,
        name: "Thunder spear",
        image: "https://via.placeholder.com/150",
        price: 150000, // Числовое значение
        category: "PC",
        components: {
            "CPU": { name: "Intel i5", image: "https://via.placeholder.com/100", price: 16000 },
            "Motherboard": { name: "ASUS A620 Gaming", image: "https://via.placeholder.com/100", price: 12000 },
            "RAM": { name: "GSkill 16GB DDR4", image: "https://via.placeholder.com/100", price: 8000 },
            "GPU": { name: "NVIDIA GTX 1660", image: "https://via.placeholder.com/100", price: 20000 },
            "PSU": { name: "DEEPCOOL PF750 Bronze 80+", image: "https://via.placeholder.com/100", price: 20000 },
            "CASE": { name: "MONTECH KING 95 PRO Full-Tower", image: "https://via.placeholder.com/100", price: 17000 }
        }
    },
    {
        id: 2,
        name: "GAMING Capitan PRO",
        image: "https://via.placeholder.com/150",
        price: 100000,
        category: "PC",
        components: {
            "CPU": { name: "AMD Ryzen 7", image: "https://via.placeholder.com/100", price: 22000 },
            "Motherboard": { name: "MSI B650 WIFI PLUS", image: "https://via.placeholder.com/100", price: 13000 },
            "RAM": { name: "ADATA Lancer 32GB DDR5", image: "https://via.placeholder.com/100", price: 15000 },
            "GPU": { name: "NVIDIA RTX 3060", image: "https://via.placeholder.com/100", price: 35000 },
            "PSU": { name: "Cougar GEX950 80+ Gold", image: "https://via.placeholder.com/100", price: 35000 },
            "CASE": { name: "DEEPCOOL CK560 Mid-Tower", image: "https://via.placeholder.com/100", price: 9600 }
        }
    },
    {
        id: 3,
        name: "Infinity X-101",
        image: "https://via.placeholder.com/150",
        price: 80000,
        category: "PC",
        components: {
            "CPU": { name: "Intel i5", image: "https://via.placeholder.com/100", price: 16000 },
            "Motherboard": { name: "ASUS A620 Gaming", image: "https://via.placeholder.com/100", price: 12000 },
            "RAM": { name: "GSkill 16GB DDR4", image: "https://via.placeholder.com/100", price: 8000 },
            "GPU": { name: "NVIDIA GTX 1660", image: "https://via.placeholder.com/100", price: 20000 },
            "PSU": { name: "DEEPCOOL PF750 Bronze 80+", image: "https://via.placeholder.com/100", price: 20000 },
            "CASE": { name: "MSI MAG FORGE M111R Mini-Tower", image: "https://via.placeholder.com/100", price: 6000 }
        }
    },
    {
        id: 4,
        name: "Steel Titan",
        image: "https://via.placeholder.com/150",
        price: 200000,
        category: "PC",
        components: {
            "CPU": { name: "AMD Ryzen 7", image: "https://via.placeholder.com/100", price: 22000 },
            "Motherboard": { name: "MSI B650 WIFI PLUS", image: "https://via.placeholder.com/100", price: 13000 },
            "RAM": { name: "ADATA Lancer 32GB DDR5", image: "https://via.placeholder.com/100", price: 15000 },
            "GPU": { name: "NVIDIA RTX 3060", image: "https://via.placeholder.com/100", price: 35000 },
            "PSU": { name: "Cougar GEX950 80+ Gold", image: "https://via.placeholder.com/100", price: 35000 },
            "CASE": { name: "MONTECH KING 95 PRO Full-Tower", image: "https://via.placeholder.com/100", price: 17000 }
        }
    },
];

// Комплектующие для собственной сборки
const componentCategories = {
    "CPU": [
        {
            id: 1,
            name: "Intel i5",
            image: "https://via.placeholder.com/100",
            price: 16000
        },
        {
            id: 2,
            name: "AMD Ryzen 7",
            image: "https://via.placeholder.com/100",
            price: 22000
        }
    ],
    "Motherboard": [
        {
            id: 3,
            name: "ASUS A620 Gaming",
            image: "https://via.placeholder.com/100",
            price: 12000
        },
        {
            id: 4,
            name: "MSI B650 WIFI PLUS",
            image: "https://via.placeholder.com/100",
            price: 13000
        }
    ],
    "RAM": [
        {
            id: 5,
            name: "GSkill 16GB DDR4",
            image: "https://via.placeholder.com/100",
            price: 8000
        },
        {
            id: 6,
            name: "ADATA Lancer 32GB DDR5",
            image: "https://via.placeholder.com/100",
            price: 15000
        }
    ],
    "GPU": [
        {
            id: 7,
            name: "NVIDIA GTX 1660",
            image: "https://via.placeholder.com/100",
            price: 20000
        },
        {
            id: 8,
            name: "NVIDIA RTX 3060",
            image: "https://via.placeholder.com/100",
            price: 35000
        }
    ],
    "PSU": [
        {
            id: 9,
            name: "DEEPCOOL PF750 Bronze 80+",
            image: "https://via.placeholder.com/100",
            price: 20000
        },
        {
            id: 10,
            name: "Cougar GEX950 80+ Gold",
            image: "https://via.placeholder.com/100",
            price: 35000
        }
    ],
    "CASE": [
        {
            id: 11,
            name: "MONTECH KING 95 PRO Full-Tower",
            image: "https://via.placeholder.com/100",
            price: 17000
        },
        {
            id: 12,
            name: "DEEPCOOL CK560 Mid-Tower",
            image: "https://via.placeholder.com/100",
            price: 9600
        },
        {
            id: 13,
            name: "MSI MAG FORGE M111R Mini-Tower",
            image: "https://via.placeholder.com/100",
            price: 6000
        }
    ],
};

// Для хранения выбранных компонентов собственной сборки
let selectedComponents = {
    "CPU": null,
    "Motherboard": null,
    "RAM": null,
    "GPU": null,
    "PSU": null,
    "CASE": null
};

// Регистрация и авторизация
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', (e) => {
    e.preventDefault();
    const username = authForm.username.value.trim();
    const password = authForm.password.value.trim();

    if (!username || !password) {
        authMessage.textContent = "Пожалуйста, заполните все поля.";
        return;
    }

    // Получаем пользователей из localStorage
    let users = JSON.parse(localStorage.getItem('users')) || [];

    // Проверка, существует ли пользователь
    const user = users.find(u => u.username === username);

    if (user) {
        // Проверка пароля
        if (user.password === password) {
            // Успешный вход
            localStorage.setItem('currentUser', username);
            updateUserSection();
            authModal.style.display = 'none';
            authMessage.textContent = '';
        } else {
            authMessage.textContent = "Неверный пароль.";
        }
    } else {
        // Регистрация нового пользователя
        users.push({ username, password });
        localStorage.setItem('users', JSON.stringify(users));
        localStorage.setItem('currentUser', username);
        updateUserSection();
        authModal.style.display = 'none';
        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';
            });
        });
    } 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');

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) {
    const notification = document.getElementById('notification');
    notification.textContent = message;
    notification.classList.add('show');
    setTimeout(() => {
        notification.classList.remove('show');
    }, 1500); // Убрать через 1.5 секунды
}

// Инициализация интерфейса собственной сборки
function initializeCustomBuild() {
    const componentsGrid = document.getElementById('componentsGrid');

    // Определяем категории, которые будут доступны для сборки
    const categories = Object.keys(componentCategories);

    categories.forEach(category => {
        const cell = document.createElement('div');
        cell.classList.add('component-cell');
        cell.setAttribute('data-category', category);

        cell.innerHTML = `
            <span class="component-name">${category}</span>
            <div class="dropdown" id="dropdown-${category}">
                ${componentCategories[category].map(comp => `<div data-id="${comp.id}">${comp.name} (${comp.price} руб)</div>`).join('')}
            </div>
        `;

        // Обработчик клика для отображения/скрытия списка
        cell.addEventListener('click', (e) => {
            e.stopPropagation();
            // Закрыть другие dropdown
            closeAllDropdowns();
            const dropdown = cell.querySelector('.dropdown');
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        });

        componentsGrid.appendChild(cell);
    });

    // Закрытие dropdown при клике вне
    window.addEventListener('click', () => {
        closeAllDropdowns();
    });

    // Обработчик выбора компонента
    componentsGrid.addEventListener('click', (e) => {
        if (e.target && e.target.matches('div[data-id]')) {
            const selectedId = parseInt(e.target.getAttribute('data-id'));
            const cell = e.target.closest('.component-cell');
            const category = cell.getAttribute('data-category');
            const component = componentCategories[category].find(c => c.id === selectedId);
            if (component) {
                selectComponent(category, component, cell);
            }
            closeAllDropdowns();
            e.stopPropagation();
        }
    });

    // Обработчик кнопки "Сделать заказ"
    const makeOrderBtn = document.getElementById('makeOrderBtn');
    makeOrderBtn.addEventListener('click', makeOrder);
}

// Закрыть все dropdown
function closeAllDropdowns() {
    const dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(dd => dd.style.display = 'none');
}

// Выбор компонента для собственной сборки
function selectComponent(category, component, cell) {
    selectedComponents[category] = component;
    updateComponentsGrid(category, component, cell);
    updateTotalPrice();

    // Показать уведомление
    showNotification("Товар добавлен");
}

// Обновление конкретной ячейки после выбора компонента
function updateComponentsGrid(category, component, cell) {
    // Очистить содержимое ячейки и добавить выбранный компонент
    cell.innerHTML = `
        <img src="${component.image}" alt="${component.name}" style="max-width: 80%; max-height: 60%; margin-bottom: 5px;">
        <span class="component-name">${component.name}</span>
    `;

    // Добавить обработчик клика для повторного выбора компонента
    cell.addEventListener('click', (e) => {
        e.stopPropagation();
        // Закрыть другие dropdown
        closeAllDropdowns();
        const dropdown = cell.querySelector('.dropdown-hidden');
        if (dropdown) {
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        }
    });
}

// Обновление общей стоимости сборки
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: selectedComponents ? Object.values(selectedComponents).reduce((sum, comp) => sum + (comp.price || 0), 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 componentsGrid = document.getElementById('componentsGrid');
    componentsGrid.innerHTML = '';

    initializeCustomBuild();
    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() {
    selectedProductComponents = {};
    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');
}