crosshairs.js

(function() {
    const existingH = document.getElementById('crosshair-h');
    const existingV = document.getElementById('crosshair-v');

    // Toggle: If they exist, remove them and stop
    if (existingH) {
        existingH.remove();
        existingV.remove();
        return;
    }

    const style = 'position: fixed; background: rgba(255, 0, 0, 0.5); pointer-events: none; z-index: 999999;';
    const hLine = document.createElement('div');
    const vLine = document.createElement('div');

    hLine.id = 'crosshair-h';
    vLine.id = 'crosshair-v';

    hLine.style.cssText = style + 'height: 1px; width: 100%; left: 0;';
    vLine.style.cssText = style + 'width: 1px; height: 100%; top: 0;';

    document.body.appendChild(hLine);
    document.body.appendChild(vLine);

    window.addEventListener('mousemove', (e) => {
        hLine.style.top = e.clientY + 'px';
        vLine.style.left = e.clientX + 'px';
    });
})();