when the webpage opened three containers in the page are along with the browser page, i will describe more, when i open the webpage the three container have the same height with the page height and i don't know why. but the page working properly if i'm running in windows or android all the containers are well suited. and i will send you pictures for how it looks in windows browser, and how it looks in safary mac-os system or any apple device
and this is the last version of the code: - 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Reaction Game V1.0 </title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <style>
      body {
        font-family: 'Roboto', sans-serif;
        text-align: center;
        background: linear-gradient(to right, #000547,#000000,#000547);
        overflow-x: hidden; /* Hide horizontal scrollbar */
        overflow-y: scroll; /* Add vertical scrollbar */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        color: #ffffff;
      }
      /*The eye icon on the password can be stylize with any tool you want
  to use (the only way i know to do this correctly is using JS)
  this is meant to be wide supported and it really depends on you browsers
  if i realize any way to stylize the eye it could be added in the future
  in other input type*/
  
  .containerBox {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    font-weight: bold;
    display: flex;
    margin: auto;
    aspect-ratio: 16/9;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 1em;
    -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
  }
  
  .input-containerBox {
    filter: drop-shadow(46px 36px 24px #4090b5)
      drop-shadow(-55px -40px 25px #9e30a9);
      -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
    animation: blinkShadowsFilter 8s ease-in infinite;
  
  }
  
  .input-content {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    padding-inline: 1em;
  }
  
  .input-content::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(40px);
    -webkit-clip-path: polygon(
      26% 0,
      66% 0,
      92% 0,
      100% 8%,
      100% 89%,
      91% 100%,
      7% 100%,
      0 92%,
      0 0
    );
    clip-path: polygon(
      26% 0,
      66% 0,
      92% 0,
      100% 8%,
      100% 89%,
      91% 100%,
      7% 100%,
      0 92%,
      0 0
    );
    background: rgba(122, 251, 255, 0.5568627451);
    transition: all 1s ease-in-out;
  }
  
  .input-content::after {
    content: "";
    position: absolute;
    width: 98%;
    height: 98%;
    box-shadow: inset 0px 0px 20px 20px #212121;
    -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0%,
        #002b47 1px,
        rgb(0, 0, 0) 3px,
        hsl(295, 60%, 12%) 5px,
        #153544 4px,
        transparent 0.5%
      ),
      repeating-linear-gradient(
        to left,
        hsl(295, 60%, 12%) 100%,
        hsla(295, 60%, 12%, 0.99) 100%
      );
    -webkit-clip-path: polygon(
      26% 0,
      31% 5%,
      61% 5%,
      66% 0,
      92% 0,
      100% 8%,
      100% 89%,
      91% 100%,
      7% 100%,
      0 92%,
      0 0
    );
    clip-path: polygon(
      26% 0,
      31% 5%,
      61% 5%,
      66% 0,
      92% 0,
      100% 8%,
      100% 89%,
      91% 100%,
      7% 100%,
      0 92%,
      0 0
    );
    animation: backglitch 50ms linear infinite;
  }
  
  .input-dist {
    z-index: 80;
    display: grid;
    align-items: center;
    text-align: center;
    width: 100%;
    padding-inline: 1em;
    padding-block: 1.2em;
    grid-template-columns: 1fr;
  }
  
  .input-type {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1em;
    font-size: 1.1rem;
    background-color: transparent;
    width: 100%;
    border: none;
  }
  
  .input-is {
    color: #fff;
    font-size: 0.9rem;
    background-color: transparent;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 0.5em;
    padding-block: 0.7em;
    border: none;
    transition: all 1s ease-in-out;
    border-bottom: 1px solid hsl(221, 26%, 43%);
  }
  
  .input-is:hover {
    transition: all 1s ease-in-out;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(102, 224, 255, 0.2) 27%,
      rgba(102, 224, 255, 0.2) 63%,
      transparent 100%
    );
  }
  
  .input-content:focus-within::before {
    transition: all 1s ease-in-out;
    background: hsla(0, 0%, 100%, 0.814);
  }
  
  .input-is:focus {
    outline: none;
    border-bottom: 1px solid hsl(192, 100%, 100%);
    color: hsl(192, 100%, 88%);
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(102, 224, 255, 0.2) 27%,
      rgba(102, 224, 255, 0.2) 63%,
      transparent 100%
    );
  }
  
  .input-is::-moz-placeholder {
    color: hsla(192, 100%, 88%, 0.806);
  }
  
  .input-is::placeholder {
    color: hsla(192, 100%, 88%, 0.806);
  }
  
  .submit-button {
    width: 100%;
    border: none;
    color: hsla(192, 100%, 88%, 0.806);
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(102, 224, 255, 0.2) 27%,
      rgba(102, 224, 255, 0.2) 63%,
      transparent 100%
    );
    clip-path: polygon(0 0, 85% 0%, 100% 0, 100% 15%, 100% 90%, 91% 100%, 0 100%);
    padding: 0.5em;
    animation: blinkShadowsFilter 0.5s ease-in infinite;
    transition: all 500ms;
  }
  
  .submit-button:hover {
    color: hsl(0, 0%, 100%);
    cursor: pointer;
    font-size: medium;
    font-weight: bold;
  }
  
  @keyframes backglitch {
    0% {
      box-shadow: inset 0px 20px 20px 30px #212121;
      -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
      -webkit-appearance: none;
    }
  
    50% {
      box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%);
      -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
      -webkit-appearance: none;
    }
  
    to {
      box-shadow: inset 0px 20px 20px 30px #212121;
      -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
      -webkit-appearance: none;
    }
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg) translate(-50%, 20%);
    }
  
    50% {
      transform: rotate(180deg) translate(40%, 10%);
    }
  
    to {
      transform: rotate(360deg) translate(-50%, 20%);
    }
  }
  
  @keyframes blinkShadowsFilter {
    0% {
      filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
        drop-shadow(-55px -40px 28px #9e30a9);
        -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
    }
  
    25% {
      filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157))
        drop-shadow(-55px 40px 24px #9e30a9);
        -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
    }
  
    50% {
      filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157))
        drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
        -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
    }
  
    75% {
      filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157))
        drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
        -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
    }
  
    to {
      filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
        drop-shadow(-55px -40px 28px #9e30a9);
        -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
    }
  }
  
  
      h2 {
        color: #ffffff;
        margin-bottom: 20px;
      }
      
  
      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5%;
        -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
        /*padding: 5%; */
      }
  
      .box {
        flex: 1 1 300px;
        padding: 20px;
        border-radius: 10px;
        background-color: #ffffff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;
        margin: 10px;
        text-align: left;
      }
  
      .input {
        width: calc(100% - 20px);
        padding: 10px;
        margin-bottom: 10px;
        border: 2px solid #3498db;
        border-radius: 5px;
        box-sizing: border-box;
      }
  
      .btn {
        width: calc(100% - 20px);
        padding: 10px;
        border: none;
        border-radius: 5px;
        background-color: #3498db;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
      }
  
      .btn:hover {
        background-color: #2980b9;
      }
  
      table {
        width: 100%;
        margin-top: 20px;
        border-collapse: collapse;
      }
  
      th, td {
        background-color: #00172f;
        color: #ecf0f1;
        border: 1px solid #001e3d;
        padding: 10px;
        text-align: center;
      }
  
      th {
        font-size: 18px;
      }
  
      td {
        font-size: 16px;
      }
  
      @media (max-width: 600px) {
        .container {
          -webkit-appearance: none;
border:0;
border-radius: 1px;
height: 100%;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }
  
        .box {
          width: 100%;
        }
      }
        /* Use a different color for the table header */
        .history {
              margin-top: 20px;
              width: 100%;
              border-collapse: collapse;
          }
  
          .history th,
          .history td {
              background-color:#00172f;
              color: white;
              border: 1px solid black;
              padding: 10px;
              text-align: center;
          }
  
          .history th {
              font-size: 18px;
          }
  
          .history td {
              font-size: 16px;
          }
      
  </style>
</head>
<body>

<h2>Reaction Game V1.0</h2>

<div class="container">

    <div class= "container">
    <form class="containerBox">
        <div class="input-containerBox">
          <div class="input-content">
            <div class="input-dist">
              <div class="input-type">
                <input class="input-is" type="text" required=""id="player" placeholder="Enter Player Name" />
                <button class="submit-button" onclick="addPlayer()">add Player</button>
                <button class="submit-button" onclick="removePlayer()">Remove Player</button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
      
  
  <div class= "container" >
    <form class="containerBox" >
        <div class="input-containerBox">
          <div class="input-content">
            <div class="input-dist">
              <div class="input-type">
                <button class="submit-button" onclick="startProgramOne()">Start program one</button>
              </div>
            </div>
          </div>
        </div>
      </form>
  </div>
  
  <div class= "container">
    <!-- <form class="containerBox" action=""> -->
        <div class="input-containerBox">
          <div class="input-content">
            <div class="input-dist">
              <div class="input-type">
                <input class="input-is" type="number" required=""id="ProgramPeriod" placeholder="Enter program perion in Seconds" />
                <input class="input-is" type="number" required=""id="SwitchTime" placeholder="Time of Switch period" />
                <button  class="submit-button" onclick="startProgramTwo()">Start Program Two</button>
              </div>
            </div>
          </div>
        </div>
      <!-- </form> -->
  </div>

</div>

<div class="container">
        <h3>Score Board</h3>
        <table class="history">
            <thead>
                <tr>
                    <th>Player Name</th>
                    <th>Score</th>
                    <th>High Score</th>
                    <th>Miss</th>
                    <th>Selected Player</th>
                </tr>
            </thead>
            <tbody id="playerTableBody">
                <!-- Player rows will be added dynamically here -->
            </tbody>
        </table>
</div>


    <script>
        var gateway = ws://${window.location.hostname}/ws;
        var websocket;
        var table = document.querySelector(".history");
        var tableBody = document.getElementById("playerTableBody");
        // Init web socket when the page loads
        window.addEventListener('load', onload);

        function onload(event) {
            initWebSocket();
        }



        function initWebSocket() {
            console.log('Trying to open a WebSocket connection…');
            websocket = new WebSocket(gateway);
            websocket.onopen = onOpen;
            websocket.onclose = onClose;
            websocket.onmessage = onMessage;


        }

        function onsend(data) {

            websocket.send(data);
        }

        // When websocket is established, call the getReadings() function
        function onOpen(event) {
            console.log('Connection opened');

        }

        function onClose(event) {
            console.log('Connection closed');
            setTimeout(initWebSocket, 2000);
        }

        // Function to get the selected player from the table
        function getSelectedPlayer() {
            var radioInputs = document.querySelectorAll('input[type="radio"]:checked');

            if (radioInputs.length > 0) {
                var selectedRow = radioInputs[0].closest('tr');
                var playerNameCell = selectedRow.querySelector('td:first-child');

                if (playerNameCell) {
                    return playerNameCell.textContent.trim();
                }
            }

            return null;
        }


        // function to add player to the table
        function createTableRow(playerName, score, highScore, miss) {
            var row = document.createElement("tr");
            var selectCell = document.createElement("td");

            // Create the radio input element
            var radioInput = document.createElement("input");
            radioInput.type = "radio";
            radioInput.name = "selectedPlayer";
            radioInput.className = "input"; // Apply the custom styling class
            selectCell.appendChild(radioInput);

            var nameCell = document.createElement("td");
            var scoreCell = document.createElement("td");
            var highScoreCell = document.createElement("td");
            var missCell = document.createElement("td");


            nameCell.textContent = String(playerName);
            scoreCell.textContent = String(score);
            highScoreCell.textContent = String(highScore);
            missCell.textContent = String(miss);


            row.appendChild(nameCell);
            row.appendChild(scoreCell);
            row.appendChild(highScoreCell);
            row.appendChild(missCell);
            row.appendChild(selectCell);

            return row;
        }
        // Function to check if a player is already in the table
        function isPlayerInTable(playerName) {
            var rows = table.getElementsByTagName("tr");

            // Iterate through each row (excluding the header)
            for (var i = 1; i < rows.length; i++) {
                var cells = rows[i].getElementsByTagName("td");

                // Check if the player name matches the one in the current row
                if (cells.length >= 1 && cells[0].textContent === playerName) {
                    return true; // Player is found in the table
                }
            }

            return false; // Player is not found in the table
        }
        function updatePlayerInTable(playerName, score, highScore, miss) {
            var rows = table.getElementsByTagName("tr");

            // Iterate through each row (excluding the header)
            for (var i = 1; i < rows.length; i++) {
                var cells = rows[i].getElementsByTagName("td");

                // Check if the player name matches the one in the current row
                if (cells.length >= 1 && cells[0].textContent === playerName) {
                    // Update the player's score and high score
                    cells[1].textContent = score;
                    cells[2].textContent = highScore;
                    cells[3].textContent = miss;
                    break;
                }
            }
        }
        function addPlayerToTable(playerName, score, highScore, miss) {
            var row = createTableRow(playerName, score, highScore, miss);
            tableBody.appendChild(row);
        }


        // Function that receives the message from the ESP32 with the readings

        function onMessage(event) {
            console.log('Received data:', event.data);
            var playersData = JSON.parse(event.data);


            for (var i = 0; i < playersData.length; i++) {
                var playerName = playersData[i].Name;
                var score = playersData[i].Score;
                var highScore = playersData[i].HighScore;
                var miss = playersData[i].Miss;


                if (isPlayerInTable(playerName)) {
                    // Update the player's information if already in the table
                    updatePlayerInTable(playerName, score, highScore, miss);
                } else {
                    // Add a new row for the player if not in the table
                    addPlayerToTable(playerName, score, highScore, miss);
                }
            }
            // var tableBody = document.getElementById("playerTableBody");

            // for (var i = 0; i < playersData.length; i++) {
            //     var playerName = playersData[i].Name;
            //     var score = playersData[i].Score;
            //     var highScore = playersData[i].HighScore;
            //     var row = createTableRow(playerName, score, highScore);
            //     tableBody.appendChild(row);
            // }
        }

        // function onMessage(event) {
        //    console.log(event.data);
        //    var myObj = JSON.parse(event.data);

        //    if (myObj["playerName"] !== undefined && myObj["playerName"] !== "") {
        //       var playerName = myObj["playerName"];
        //       var score = myObj["score"];

        //       var row = createTableRow(playerName, score);
        //       table.appendChild(row);
        //    }
        // }

        // function onMessage(event) {
        //     console.log(event.data); // hena ana bakteb 3la el console bta3 el webpage
        //     var myObj = JSON.parse(event.data); // hena ana b3ml parsing 3shan a7ol el jason file l7aga mfhoma lel jason script
        //     var keys = Object.keys(myObj); // ba5od el key for every value KEY==ID.

        //     for (var i = 0; i < keys.length; i++){
        //         var key = keys[i];
        //         document.getElementById(key).innerHTML = myObj[key]; // assign every value for every key 
        //         // key is the name for every id for example "played", "minutes".. hena b2a ana b7ot el value le kol id 
        //         // da keda ana ba3rd 3la el webpage

        //         if (key == "playerName" && myObj[key] != "") {
        //       // Get the player name and score from the data
        //       var playerName = myObj[key];
        //       var score = myObj["score"];
        //       // Create a new table row with the player name and score
        //       var row = createTableRow(playerName, score);
        //       // Append the row to the table
        //       table.appendChild(row);
        //     }
        //     }
        // }
        function addPlayer() {
            var playerName = "Player:";
            playerName += document.getElementById("player").value;
            console.log(playerName);
            websocket.send(playerName);

            // code to add player
        }
        // Function to remove player from the table
        function removePlayerFromTable(playerName) {
            var rows = table.getElementsByTagName("tr");

            // Iterate through each row in reverse order
            for (var i = rows.length - 1; i > 0; i--) { // Start from the last row (excluding the header)
                var cells = rows[i].getElementsByTagName("td");

                // Check if the player name matches the one to be removed
                if (cells.length >= 2 && cells[0].textContent === playerName) {
                    // Remove the matching row
                    rows[i].parentNode.removeChild(rows[i]);
                    break; // Exit the loop after removing the row
                }
            }
        }

        function removePlayer() {
            // code to remove player
            var playerName = document.getElementById("player").value;
            var dataToSend = "Remove player:" + playerName;
            console.log(dataToSend);
            websocket.send(dataToSend);
            // Remove the player from the table immediately (before receiving confirmation from the server)
            removePlayerFromTable(playerName);
        }

        function startProgramOne() {
            // code to start program one
            var selectedPlayer = getSelectedPlayer();
            console.log(selectedPlayer);

            if (selectedPlayer) {
                var dataToSend = "startProgramOne:" + selectedPlayer.toString();
                console.log(dataToSend);
                websocket.send(dataToSend);
            } else {
                alert("Please select a player before starting the program.");
            }
        }
        function startProgramTwo() {
            // code to start program two
            var selectedPlayer = getSelectedPlayer();
            console.log(selectedPlayer);
            var ProgramPeriod = "";
            ProgramPeriod = document.getElementById("ProgramPeriod").value;
            var SwitchTime = "";
            SwitchTime = document.getElementById("SwitchTime").value;



            if (selectedPlayer) {
                var obj = {
                    "ProgramPeriod": ProgramPeriod,
                    "SwitchTime": SwitchTime,
                    "SelectedPlayer": selectedPlayer.toString()
                };
                if (ProgramPeriod !== "" || SwitchTime !== "") {

                    var dataToSend = "startProgramtwo:"
                    dataToSend += JSON.stringify(obj);

                    console.log(dataToSend);
                    websocket.send(dataToSend)




                    // var dataToSend = "startProgramtwo:"

                    // var ProgramPeriod = "";
                    // ProgramPeriod = document.getElementById("ProgramPeriod").value;
                    // var SwitchTime = "";
                    // SwitchTime = document.getElementById("SwitchTime").value;
                    // if (ProgramPeriod !== "" || SwitchTime !== ""){
                    // dataToSend += "{\"ProgramPeriod\":"+ProgramPeriod + ",\"SwitchTime\":" + SwitchTime + ",\"SelectedPlayer\":" + selectedPlayer.toString() + "}" ;
                    // console.log(dataToSend);
                    // websocket.send(dataToSend);
                } else {
                    alert("Please enter Program Period or Switch Time correctly before starting Program Two.");
                }
            } else {
                alert("Please select a player before starting Program Two.");
            }


        }


    </script>

</body>

</html>