Untitled

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JS vs No-JS Interface</title>

    <script>

        // JavaScript is enabled, load the enhanced interface

        document.addEventListener("DOMContentLoaded", function() {

            document.body.classList.add('js-enabled');

        });

    </script>

</head>

<body>


    <!-- Content for JS users -->

    <div id="js-interface" style="display:none;">

        <h1>Enhanced Interface with JavaScript</h1>

        <p>This content is shown to users with JavaScript enabled.</p>

    </div>


    <!-- Content for No-JS users and bots -->

    <noscript>

        <div id="no-js-interface">

            <h1>Basic Interface</h1>

            <p>This content is shown to users or bots with JavaScript disabled.</p>

        </div>

    </noscript>


    <script>

        // Make the JS interface visible when JavaScript is enabled

        document.getElementById('js-interface').style.display = 'block';

    </script>


</body>

</html>