script.js

const colorInput = document.getElementById('color');
const hexDisplay = document.getElementById('hexDisplay');
const preview = document.getElementById('preview');
const downloadButton = document.getElementById('download');
const widthInput = document.getElementById('width');
const heightInput = document.getElementById('height');
const errorMessage = document.getElementById('errorMessage');

const MIN_RES = 1;
const MAX_RES = 7680;

function showError(msg) {
    errorMessage.textContent = msg;
    errorMessage.classList.add('visible');
}

function hideError() {
    errorMessage.classList.remove('visible');
}

function validateResolution(value, dimension) {
    if (value === '' || value === null || value === undefined) {
        return `[ERR::EMPTY] ${dimension} field is empty. Can't do much with null values.`;
    }

    if (!/^-?\d+$/.test(value.toString().trim())) {
        return `[ERR::NaN] ${dimension} contains non-numeric characters. I'm only trying to help, give me some numbers.`;
    }

    const num = parseInt(value);

    if (num < 0) {
        return `[ERR::NEGATIVE] ${dimension}=${num}px is negative. Trying to create anti-matter with negative pixels?`;
    }
    if (num === 0) {
        return `[ERR::ZERO] ${dimension}=0px detected. Sure, I'll just give you a blank wallpaper.`;
    }

    if (num > MAX_RES) {
        return `[ERR::OVERFLOW] ${dimension}=${num}px exceeds ${MAX_RES}px limit. I thought about making the number bigger, but it's still 2026, wait and see.`;
    }
    return null;
}

function validateColor(hex) {
    const clean = hex.replace('#', '');
    if (clean.length !== 6) {
        return `[ERR::INVALID_LENGTH] Expected 6 hex chars, got ${clean.length}. Format: #RRGGBB. How did you even manage to do that?`;
    }
    if (!/^[0-9A-Fa-f]{6}$/.test(clean)) {
        return `[ERR::ILLEGAL_CHARS] '${hex}' contains forbidden symbols. Hex only accepts content from the picker man.`;
    }
    return null;
}

function updatePreview() {
    const color = colorInput.value;
    preview.style.backgroundColor = color;
    hexDisplay.textContent = color.toUpperCase();

    document.documentElement.style.setProperty('--accent-color', color);
    const r = parseInt(color.slice(1, 3), 16);
    const g = parseInt(color.slice(3, 5), 16);
    const b = parseInt(color.slice(5, 7), 16);
    const darkColor = `rgb(${Math.floor(r * 0.5)}, ${Math.floor(g * 0.5)}, ${Math.floor(b * 0.5)})`;
    document.documentElement.style.setProperty('--accent-dark', darkColor);
}

colorInput.addEventListener('input', updatePreview);

downloadButton.addEventListener('click', () => {
    hideError();

    const width = widthInput.value;
    const height = heightInput.value;
    const color = colorInput.value;

    let error = validateResolution(width, 'width');
    if (error) { showError(error); return; }

    error = validateResolution(height, 'height');
    if (error) { showError(error); return; }

    error = validateColor(color);
    if (error) { showError(error); return; }

    const w = parseInt(width);
    const h = parseInt(height);

    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;

    const ctx = canvas.getContext('2d');
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, w, h);

    const link = document.createElement('a');
    link.download = `colorpaper_${color.replace('#', '')}_${w}x${h}.png`;
    link.href = canvas.toDataURL('image/png');
    link.click();
});

// Set default resolution to device screen size
widthInput.value = window.screen.availWidth;
heightInput.value = window.screen.availHeight;

updatePreview();