top-banner-code.html

<style>

#sw-banner {
    background-color: #69C3FF;
    color: #181818;
    width: 100%;
    display: block; 
    padding-top: 8px;
    padding-bottom: 8px;
    -webkit-transition: background-color 200ms ease-in-out;
    transition: background-color 200ms ease-in-out;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
}

#sw-banner .center{
    display: flex;
    justify-content: center;
    align-items: center;
}
#sw-banner .center span{
    margin-left: 8px;
    margin-right: 8px;
    font-weight: 600;
}

#sw-banner span a {
    text-decoration: underline;
    color: #181818;
}

#sw-banner  img:first-child{
    width: 18px;
    height: 18px;
    margin-left: 5px;
    margin-right: 15px;
    animation: slideLeft 1s ease-in-out infinite;
}
#sw-banner  img:last-child{
    width: 18px;
    height: 18px;
    margin-left: 5px;
    margin-right: 15px;
    animation: slideRight 1s ease-in-out infinite;
}

@keyframes slideLeft {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, 0);
    }
}
@keyframes slideRight {
    0%,
    100% {
        transform: translate(10px, 0);
    }

    50% {
        transform: translate(0, 0);
    }
}

</style>

<script>
    
;(function () {
    function createBanner() {

        var swBannerLink = "https://www.producthunt.com/posts/softr";
        var swBannerTarget = "_blank";
        var swBannerText = 'We’re live on <u>ProductHunt</u> right now! Support us and get your exclusive LIFETIME DISCOUNT!';
        var leftImageSrc = 'https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/5f0a3c8bd3ce592c26f1d05b_point-right.png'
        var rightImageSrc = 'https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/5f0a3c8b2ae54491dca18237_point-left.png'


        var body = document.body;
        var swBanner = document.createElement('a');
        var centerDiv = document.createElement('div');
        var leftImage = document.createElement('img');
        var rightImage = document.createElement('img');
        var text = document.createElement('span');
        swBanner.href = swBannerLink;
        swBanner.target = swBannerTarget;
        text.innerHTML = swBannerText;
        leftImage.src = leftImageSrc;
        rightImage.src = rightImageSrc;
        swBanner.id = 'sw-banner';
        centerDiv.classList.add('center');
        centerDiv.append(leftImage, text, rightImage);
        swBanner.append(centerDiv);
        body.insertBefore(swBanner, body.firstChild);
    }
    
    document.addEventListener('DOMContentLoaded', function () {
        console.log('DOMContentLoaded');
        createBanner();
    });

  })();


</script>