function updateOutput() {
    const elementWidth = parseFloat(document.getElementById('elementWidth').value);
    const elementHeight = parseFloat(document.getElementById('elementHeight').value);
    const screenWidth = parseFloat(document.getElementById('screenWidth').value);

    const elementWidthVW = parseFloat(document.getElementById('elementWidthVW').value);
    const elementHeightVW = parseFloat(document.getElementById('elementHeightVW').value);
    const screenWidthVW = parseFloat(document.getElementById('screenWidthVW').value);

    // Вычисления для VH
    if (!isNaN(elementWidth) && !isNaN(screenWidth) && screenWidth !== 0) {
        let vhValueWidth = (elementWidth / screenWidth) * 100;
        let vhValueHeight = (!isNaN(elementHeight) && elementHeight !== 0) ? (elementHeight / screenWidth) * 100 : '';

        document.getElementById('outputWidth').textContent = `${vhValueWidth.toFixed(2)}vh`;
        document.getElementById('outputHeight').textContent = vhValueHeight === '' ? 'N/A' : `${vhValueHeight.toFixed(2)}vh`;
    } else {
        document.getElementById('outputWidth').textContent = "Invalid input";
        document.getElementById('outputHeight').textContent = "Invalid input";
    }

    // Вычисления для VW
    if (!isNaN(elementWidthVW) && !isNaN(screenWidthVW) && screenWidthVW !== 0) {
        let vwValueWidth = (elementWidthVW / screenWidthVW) * 100;
        let vwValueHeight = (!isNaN(elementHeightVW) && elementHeightVW !== 0) ? (elementHeightVW / screenWidthVW) * 100 : '';

        document.getElementById('outputWidthVW').textContent = `${vwValueWidth.toFixed(2)}vw`;
        document.getElementById('outputHeightVW').textContent = vwValueHeight === '' ? 'N/A' : `${vwValueHeight.toFixed(2)}vw`;
    } else {
        document.getElementById('outputWidthVW').textContent = "Invalid input";
        document.getElementById('outputHeightVW').textContent = "Invalid input";
    }
}

// Функция копирования размеров (vh/vw)
function copySizeToClipboard(event) {
    const value = event.target.textContent;
    if (value !== "Invalid input" && value !== "N/A") {
        navigator.clipboard.writeText(value).catch(err => console.error('Error copying text:', err));
    }
}

// Функция копирования цвета
function copyColorToClipboard() {
    const output = document.getElementById("output").textContent;
    if (output !== "Invalid Input") {
        navigator.clipboard.writeText(output).catch(err => {
            console.error("Error copying text: ", err);
        });
    }
}

// Добавляем обработчики клика для копирования размеров
['outputWidth', 'outputHeight', 'outputWidthVW', 'outputHeightVW'].forEach(id => {
    document.getElementById(id).addEventListener('click', copySizeToClipboard);
});

// Добавляем обработчик клика для копирования цвета
document.getElementById("output").addEventListener("click", copyColorToClipboard);

// Обновление значений при вводе
['elementWidth', 'elementHeight', 'screenWidth', 'elementWidthVW', 'elementHeightVW', 'screenWidthVW'].forEach(id => {
    document.getElementById(id).addEventListener('input', updateOutput);
});

// Функция конвертации HEX в RGBA
function hexToRgba(hex, alpha = 1) {
    hex = hex.replace(/^#/, '');
    let r, g, b;
    if (hex.length === 3) {
        r = parseInt(hex[0] + hex[0], 16);
        g = parseInt(hex[1] + hex[1], 16);
        b = parseInt(hex[2] + hex[2], 16);
    } else if (hex.length === 6) {
        r = parseInt(hex.substring(0, 2), 16);
        g = parseInt(hex.substring(2, 4), 16);
        b = parseInt(hex.substring(4, 6), 16);
    } else {
        document.getElementById("output").textContent = "Invalid Input";
        return;
    }
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

function convertColor() {
    const hex = document.getElementById("hexInput").value;
    const alpha = parseFloat(document.getElementById("alphaInput").value);
    const rgba = hexToRgba(hex, alpha);
    document.getElementById("output").textContent = rgba || "Invalid Input";
    if (rgba) {
        document.getElementById("colorPreview").style.backgroundColor = rgba;
    }
}