index.html

<html>
    <head>
        <title>No.</title>
        <style>
            body { font-family: helvetica, sans-serif; padding-top: 10em; text-align: center; }
            h1 { font-size: 10em; }
            strong { color: red; }
            p { color: gray; }
        </style>
    </head>
    <body>
        <h1>Hey!</h1>
        <h2>You're viewing the <strong></strong> environment.</h2>
        <p>Now that you know better, don't ever do any of this stuff.</p>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script>
            $(function(){
                // this should be defined by an environment variable and not derived this way
                let env = $(location).attr("href").includes("dev") ? "development" : "production";
                $("strong").html(env);
            });
        </script>
    </body>
</html>