const styleElement = document.createElement('style');
    styleElement.textContent = `
        .sslink-links-list {
        vertical-align: middle;
        list-style-type: none;
        margin: 0;
        padding: 0;
        }
        .sslink-links-list li {
        display:inline-block;
        margin-right: 1em;
        }
        .sslink-links-list li a {
        font-size: 1em;
        color: inherit;
        text-decoration: inherit;
        transition: all 0.3s ease;
        }
        .sslink-links-list li a:hover {
        font-size: 1.2em; /* Increase the font size by 20% */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Add a subtle text shadow */
        opacity: 0.8; /* Set the opacity to 80% */
        }
        .sslink-links-list li a img {
        vertical-align: middle;
        height: 30px;
        width: 30px;
        margin-right: 5px;
        }
    `;
    document.head.appendChild(styleElement);

    // Fetch the JSON data from the URL
    fetch('https://link.sitesolution.it/api/getAll')
    .then(response => response.json())
    .then(data => {
    // Process the JSON data and create HTML links with icons
    const linksList = document.getElementById('sslink-links-list');
    data.forEach(link => {
        const listItem = document.createElement('li');
        const linkElement = document.createElement('a');
        linkElement.href = link.url;
        linkElement.title = link.description;
        linkElement.textContent = link.title;

        const iconImage = document.createElement('img');
        iconImage.src = "https://link.sitesolution.it/api/getIcon/"+link.id;
        iconImage.alt = 'Icona';
        linkElement.insertBefore(iconImage, linkElement.firstChild);


        listItem.appendChild(linkElement);
        linksList.appendChild(listItem);
    });
    })
    .catch(error => {
        console.error('Error fetching JSON data:', error);
    });