socket.on('new_link', (data) => {
    const linkElement = createLinkElement(data);
    document.getElementById('board').appendChild(linkElement);
});

function createLinkElement(data) {
    const link = document.createElement('div');
    link.className = 'link';
    link.dataset.id = data.id;
    link.style.left = `${data.x}px`;
    link.style.top = `${data.y}px`;
    link.style.width = `${data.width}px`;
    link.style.height = `${data.height}px`;

    const anchor = document.createElement('a');
    anchor.href = data.url;
    anchor.target = '_blank';
    anchor.textContent = data.name;

    link.appendChild(anchor);

    // Add event listeners
    addLinkEventListeners(link, data.id);

    return link;
}

// Добавление слушателей событий для элемента ссылки
function addLinkEventListeners(link, id) {
    link.addEventListener('mouseenter', () => {
        link.style.backgroundColor = '#e0e0e0';
    });

    link.addEventListener('mouseleave', () => {
        link.style.backgroundColor = '#f5f5f5';
    });

    link.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return; // Только левая кнопка мыши
        e.preventDefault();
        e.stopPropagation();
        const startX = e.clientX;
        const startY = e.clientY;
        const startLeft = parseFloat(link.style.left) || 0;
        const startTop = parseFloat(link.style.top) || 0;

        function moveLink(e) {
            const deltaX = (e.clientX - startX) / scale;
            const deltaY = (e.clientY - startY) / scale;
            link.style.left = `${startLeft + deltaX}px`;
            link.style.top = `${startTop + deltaY}px`;
            const x = parseFloat(link.style.left) || 0;
            const y = parseFloat(link.style.top) || 0;
            const width = link.offsetWidth;
            const height = link.offsetHeight;
            socket.emit('update_link', { id, name: link.querySelector('a').textContent, url: link.querySelector('a').href, x, y, width, height });
        }

        document.addEventListener('mousemove', moveLink);

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', moveLink);
        }, { once: true });
    });

    link.addEventListener('dblclick', (e) => {
        e.preventDefault();
        e.stopPropagation();
        showContextMenu(link, id, e.clientX, e.clientY); // Предполагается, что у вас есть такая функция
    });

    addResizeListeners(link, id);
}

function addResizeListeners(element, id) {
    const resizeHandle = document.createElement('div');
    resizeHandle.style.position = 'absolute';
    resizeHandle.style.width = '10px';
    resizeHandle.style.height = '10px';
    resizeHandle.style.right = '0';
    resizeHandle.style.bottom = '0';
    resizeHandle.style.cursor = 'se-resize';
    resizeHandle.style.backgroundColor = '#ccc';

    element.appendChild(resizeHandle);

    resizeHandle.addEventListener('mousedown', function(e) {
        e.preventDefault();
        e.stopPropagation();

        const startX = e.clientX;
        const startY = e.clientY;
        const startWidth = element.offsetWidth;
        const startHeight = element.offsetHeight;

        function resizeElement(e) {
            const newWidth = startWidth + (e.clientX - startX) / scale;
            const newHeight = startHeight + (e.clientY - startY) / scale;
            element.style.width = `${newWidth}px`;
            element.style.height = `${newHeight}px`;
            socket.emit('update_link', { id, name: element.querySelector('a').textContent, url: element.querySelector('a').href, x: element.offsetLeft, y: element.offsetTop, width: newWidth, height: newHeight });
        }

        document.addEventListener('mousemove', resizeElement);

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', resizeElement);
        }, { once: true });
    });
}

// Добавление нового элемента-ссылки на доску
document.getElementById('add-link').addEventListener('click', showLinkForm);

function showLinkForm() {
    const formHtml = `
        <div id="link-form" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.1); z-index: 1000;">
            <label for="link-name" style="display:block; margin-bottom:8px;">Название ссылки:</label>
            <input type="text" id="link-name" placeholder="Введите имя ссылки" style="width: calc(100% - 22px); padding:10px; margin-bottom:12px; border:1px solid #ccc; border-radius:4px;"><br>
            <label for="link-url" style="display:block; margin-bottom:8px;">URL:</label>
            <input type="text" id="link-url" placeholder="Введите URL" style="width: calc(100% - 22px); padding:10px; margin-bottom:12px; border:1px solid #ccc; border-radius:4px;"><br>
            <button id="add-link-submit" style="padding:10px 20px; background-color:#007bff; color:white; border:none; border-radius:4px; cursor:pointer; margin-right:8px;">Добавить ссылку</button>
            <button id="cancel-link" style="padding:10px 20px; background-color:#ccc; color:white; border:none; border-radius:4px; cursor:pointer;">Отмена</button>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', formHtml);

    document.getElementById('add-link-submit').addEventListener('click', submitLinkForm);
    document.getElementById('cancel-link').addEventListener('click', closeModal);
}

function submitLinkForm() {
    const name = document.getElementById('link-name').value;
    const url = document.getElementById('link-url').value;

    if (name && url) {
        const rect = boardWrapper.getBoundingClientRect();
        const width = 150;
        const height = 30;
        const centerX = ((rect.width / 2 - translateX) / scale) - width / 2;
        const centerY = ((rect.height / 2 - translateY) / scale) - height / 2;

        socket.emit('create_link', {
            name: name,
            url: url,
            x: centerX,
            y: centerY,
            width,
            height,
            board_id: currentBoardId
        });
        closeModal();
    }
}

function closeModal() {
    const form = document.getElementById('link-form');
    if (form) {
        form.remove();
    }
}

// Функция для обработки существующих ссылок на доске
function handleExistingLinks() {
    document.querySelectorAll('.link').forEach(link => {
        const id = link.dataset.id;
        addLinkEventListeners(link, id);
    });
}
/* link.css */

.link {
    position: absolute;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
}

.link:hover {
    background-color: #e0e0e0;
}

.link a {
    text-decoration: none;
    color: #333;
}

.link .resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 0;
    bottom: 0;
    cursor: se-resize;
    background-color: #ccc;
}

Мне надо улучшить стиль элемента ссылки, чтобы он стал красивым, стильным и был похож на ярлык. Также нужно переделать события, надо чтобы перейти по ссылке можно было кликнув на любое место элемента, а не только на саму ссылку внутри элемента