<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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



    <title>Scattered Letters</title>

    <meta name="description" content="Scatter the letters of a word around the screen">

    <meta name="keywords" content="scattered letters, word, scatter">



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



    <style>

        body {

            font-family: 'Arial', sans-serif;

            background-color: #f5f5f5;

        }



        .input-container {

            margin-top: 20px;

        }



        .letter {

            position: absolute;

            font-size: 36px;

            font-weight: bold;

            color: #ffffff;

            background-color: #007bff;

            padding: 5px 10px;

            border-radius: 5px;

            animation: scatterAnimation 3s infinite linear;

        }



        @keyframes scatterAnimation {

            0% {

                transform: translate(0, 0);

            }

            100% {

                transform: translate(calc(100vw - 100px), calc(100vh - 100px));

            }

        }

    </style>

</head>

<body>

<div id="main-container" class="container">

    <div class="input-container">

        <input type="text" id="word-input" placeholder="Enter a word">

        <button id="scatter-button" class="btn btn-primary">Scatter</button>

    </div>

    <div id="letter-container"></div>

</div>



<script type="text/javascript">

    $(document).ready(function () {

        $("#scatter-button").click(function () {

            var word = $("#word-input").val().toUpperCase();

            var letterContainer = $("#letter-container");

            letterContainer.empty();



            for (var i = 0; i < word.length; i++) {

                var letter = $("<div>").addClass("letter").text(word[i]);

                letter.css({

                    top: getRandomNumber(0, window.innerHeight - 100) + "px",

                    left: getRandomNumber(0, window.innerWidth - 100) + "px",

                    animation: getRandomDirection() + " 3s infinite linear"

                });

                letterContainer.append(letter);

            }

        });



        function getRandomNumber(min, max) {

            return Math.floor(Math.random() * (max - min + 1)) + min;

        }



        function getRandomDirection() {

            var directions = ["scatterAnimationUp", "scatterAnimationDown", "scatterAnimationLeft", "scatterAnimationRight"];

            return directions[Math.floor(Math.random() * directions.length)];

        }

    });

</script>

</body>

</html>