Untitled

<style>
    #loading {
        display: inline-block;
        width: 50px;
        height: 50px;
        border: 3px solid rgba(255, 255, 255, .3);
        border-radius: 50%;
        border-top-color: blue;
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
    }

    .center {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    @keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }
</style>


<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TC Control Panel</title>
</head>

<body style="font-family: Roboto, Helvetica, Arial, sans-serif;">

    <div style="max-width: 30em; margin: 10ex auto;">
        <img src="TC_logo.png" width="300"><br />
        <h1 style="font-size: 20pt; margin: 0">Welcome to TraumaCad!</h1>
        <p><strong>Your product has to be activated prior to its first usage.</strong></p>
        <p>Type in the activation key to activate TraumaCad online (an internet connection is required at this point):
        </p>
        <form method="POST" action=".">
            <p><input type="text" minlength="8" style="width: 20em;" /> <input id="submit" type="submit"
                    value="Activate online" /><br />
            <div id="loading" class="center"></div>
            <span id="error" style="color: red;">Activation failed</span></p>
        </form>
    </div>
    <script>
        const loaderContainer = document.querySelector('#loading');
        const error = document.querySelector('#error');

        loaderContainer.style.display = 'none';
        error.style.display = 'none';

        const displayLoading = () => {
            loaderContainer.style.display = 'block';
        };

        const getQuoteBtn = document.querySelector('#submit');

        getQuoteBtn.addEventListener('click', () => {
            displayLoading();

            fetch('https://dog.ceo/api/breeds/image/random', { method: 'POST', redirect: 'follow' })
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    console.log(data)
                })
                .catch((err) => {
                    console.log('Something went wrong.', err);
                    error.style.display = 'block';
                })
        });
    </script>
</body>

</html>
Editor is loading...