Hide From the Monster!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hide From the Monster!</title>
<style>
    body {
        background-color: #000;
        color: #0f0;
        font-family: Consolas, monospace;
        padding: 20px;
    }
    h1 {
        color: #0f0;
    }
    button {
        background-color: #003300;
        color: #0f0;
        border: 1px solid #0f0;
        padding: 10px 20px;
        margin: 10px 0;
        cursor: pointer;
        font-size: 16px;
    }
    button:hover {
        background-color: #005500;
    }
    #result {
        margin-top: 20px;
        font-size: 18px;
    }
</style>
</head>
<body>

<h1>Hide From the Monster!</h1>
<p>Choose a hiding spot before the monster arrives:</p>

<button onclick="chooseSpot(1)">1. Closet</button><br>
<button onclick="chooseSpot(2)">2. Under the bed</button><br>
<button onclick="chooseSpot(3)">3. Behind the curtain</button><br>
<button onclick="chooseSpot(1)">4. under the table</button><br>

<div id="result"></div>

<script>
function chooseSpot(choice) {
    const monsterLocation = Math.floor(Math.random() * 3) + 1;

    document.getElementById("result").innerHTML = "The monster is searching...";

    setTimeout(() => {
        if (choice === monsterLocation) {
            document.getElementById("result").innerHTML =
                "The monster checked your hiding spot!<br>You were found!";
        } else {
            document.getElementById("result").innerHTML =
                "The monster looked somewhere else.<br>You stayed hidden and safe!";
        }
    }, 1500);
}
</script>

</body>
</html>