<script>
window.addEventListener("load", function() {
    let username = document.querySelector('h2').innerText.trim();
    
    if (username.endsWith('*')) {
        let reportWarning = document.createElement('p');
        reportWarning.classList = 'alert alert-danger';
        reportWarning.innerHTML = 'If you need to report rule-breaking content, use the report button or the Contact Us link at the bottom of the page.<br/><b>Please DO NOT publicly report other users, as this is not allowed, even if you are trying to do a good thing.</b>';
        reportWarning.style = 'margin-top: 5px; margin-bottom: -20px;';
        document.querySelector('#comment-form').append(reportWarning);
    }
});
</script>

<script>
// this will add an eventlistener to the page, meaning that it will run the code only when the event happens.
// the event here is "load", meaning that the code will only run once, the moment that the page is fully loaded
window.addEventListener("load", function() {
    // this defines the variable "username", with the username of the user (asterisk included)
    // it selects the "h2" tag (the header tag, in which the username is located) takes the text, and then trims it (it removes any spaces before and after it)
    let username = document.querySelector('h2').innerText.trim();
    // it checks if the username ends with an asterisk, meaning that this user is a scratch team member
    if (username.endsWith('*')) {
    // this code only runs if the user is a scratch team member
    // it creates the actual message element
        let reportWarning = document.createElement('p');
    // it adds the "alert" styling, as seen in the picture above
        reportWarning.classList = 'alert alert-danger';
    // it adds the actual text. <br/> means a new line (enter), and <b> means bold text.
        reportWarning.innerHTML = 'If you need to report rule-breaking content, use the report button or the Contact Us link at the bottom of the page.<br/><b>Please DO NOT publicly report other users, as this is not allowed, even if you are trying to do a good thing.</b>';
    // it adds some extra styling, specifically removing some space after it
    // otherwise there would be a lot of space between the warning and the first comment
        reportWarning.style = 'margin-top: 5px; margin-bottom: -20px;';
    // this code basically selects the comment box and adds the message element after it
        document.querySelector('#comment-form').append(reportWarning);
    }
   // if the user is NOT a scratch team member, nothing happens.
   // end of code
});
</script>