Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>nome</title>
    <style type="text/css">
      .button {
        border: none;
        color: white;
        padding: 10px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
      }
      .button2 {
        background-color: white;
        color: black;
        border: 2px solid #008cba;
      }
      .button2:hover {
        background-color: #008cba;
        color: white;
      }
      .partita {
        position: absolute;
        width: 500px;
        height: 80px;
        top: 20%;
        left: 50%;
        margin-left: -250px;
        line-height: 80px;
      }
      .casa {
        position: absolute;
        height: 100%;
        width: auto;
        left: 0%;
      }
      .ospite {
        position: absolute;
        height: 100%;
        width: auto;
        right: 0%;
      }
      .risultato {
        position: absolute;
        width: 70%;
        height: 100%;
        left: 50%;
        margin-left: -35%;
        text-align: center;
        font-size: 30pt;
        margin-top: 0%;
      }
      .tim {
        position: absolute;
        top: -50%;
        height: auto;
        width: 30px;
        margin-left: -15px;
        left: 50%;
      }
      .quote {
        position: absolute;
        width: 500px;
        height: 80px;
        top: 100%;
        left: 50%;
        margin-left: -250px;
        line-height: 80px;
        margin-top: -80px;
      }
      .qt {
        position: absolute;
        width: 80%;
        height: 40px;
        left: 50%;
        margin-left: -40%;
      }
      .q1 {
        position: absolute;
        left: 25%;
        margin-left: -42.175px;
      }
      .qx {
        position: absolute;
        margin-left: -42.175px;
        left: 50%;
      }
      .q2 {
        position: absolute;
        left: 75%;
        margin-left: -42.175px;
      }
      .b1 {
        position: absolute;
        top: 100%;
        margin-top: -21.2px;
        margin-left: -48.345px;
        left: 50%;
      }
      .rel {
        position: relative;
        width: 100%;
        height: 300px;
        margin: 0 auto;
      }
      .marcatori {
        position: absolute;
        width: 340px;
        height: 80px;
        top: 40%;
        left: 50%;
        margin-left: -170px;
        line-height: 80px;
      }
      .timer {
        position: absolute;
        top: 0%;
        width: 30px;
        height: 30px;
        left: 50%;
        margin-left: -15px;
        margin-top: 0;
        line-height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body onload="main()">
    <script>
      var gol1 = 0;
      var gol2 = 0;
      casuale = Math.round(Math.random() * 99);
      casuale2 = Math.round(Math.random() * 99);
      if (casuale < 10) {
        gol1 = 0;
      } else {
        if (casuale < 25 && casuale > 9) {
          gol1 = 1;
        } else {
          if (casuale < 55 && casuale > 24) {
            gol1 = 2;
          } else {
            if (casuale < 80 && casuale > 54) {
              gol1 = 3;
            } else {
              if (casuale < 95 && casuale > 79) {
                gol1 = 4;
              } else {
                gol1 = 5;
              }
            }
          }
        }
      }
      casuale2 = Math.round(Math.random() * 99);
      if (casuale2 < 10) {
        gol2 = 0;
      } else {
        if (casuale2 < 25 && casuale2 > 9) {
          gol2 = 1;
        } else {
          if (casuale2 < 55 && casuale2 > 24) {
            gol2 = 2;
          } else {
            if (casuale2 < 80 && casuale2 > 54) {
              gol2 = 3;
            } else {
              if (casuale2 < 95 && casuale2 > 79) {
                gol2 = 4;
              } else {
                gol2 = 5;
              }
            }
          }
        }
      }

      document.addEventListener("DOMContentLoaded", function (event) {
        let s = gol1 + gol2;
        for (let i = 0; i < s; i++) {
          let n = Math.floor(
            Math.random() *
              ((i + 1) * (90 / s) - i * (90 / s + 1) + i * (90 / s) * 1)
          );
          document.getElementById("marcatori").innerHTML = n;
        }
      });

      function cas() {
        str1 = gol1.toString();
        str2 = gol2.toString();
        str = "-";
        result = str1.concat(str).concat(str2);
        document.getElementById("result").innerHTML = result;
      }
      var startTime; // to keep track of the start time
      var stopwatchInterval; // to keep track of the interval
      var elapsedPausedTime = 0; // to keep track of the elapsed time while stopped
      function startStopwatch() {
        if (!stopwatchInterval) {
          startTime = new Date().getTime() - elapsedPausedTime; // get the starting time by subtracting the elapsed paused time from the current time
          stopwatchInterval = setInterval(updateStopwatch, 250); // update every second
        }
      }

      function updateStopwatch() {
        var currentTime = new Date().getTime(); // get current time in milliseconds
        var elapsedTime = currentTime - startTime; // calculate elapsed time in milliseconds
        var seconds = Math.floor(elapsedTime / 250) % 100; // calculate seconds
        var displayTime = seconds; // format display time
        document.getElementById("stopwatch").innerHTML = displayTime; // update the display
        if (seconds == 90) {
          stopStopwatch();
        }
        if (seconds == casuale) {
          document.getElementById("marcatori").innerHTML =
            "lautaro " + "&nbsp" + seconds + "'";
        }
      }

      function stopStopwatch() {
        clearInterval(stopwatchInterval); // stop the interval
        elapsedPausedTime = new Date().getTime() - startTime; // calculate elapsed paused time
        stopwatchInterval = null; // reset the interval variable
      }
      function main() {
        var a, b, d, x, y, z, t;
        a = 1;
        b = 2;
        if (a < b) {
          t = a;
          a = b;
          b = t;
          i = 1;
        }

        d = a - b;
        x = Math.sqrt((6.25 * (4 + d)) / 4);
        y = 6.25 / x;
        z = ((x + y) * 3) / 5;

        if (i === 1) {
          t = x;
          x = y;
          y = t;
        }
        x = x.toFixed(2);
        y = y.toFixed(2);
        z = z.toFixed(2);
        document.getElementById("home").innerHTML = x;
        document.getElementById("draw").innerHTML = z;
        document.getElementById("away").innerHTML = y;
      }
    </script>
    <div class="rel">
      <div class="partita">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/FC_Internazionale_Milano_2021.svg/512px-FC_Internazionale_Milano_2021.svg.png"
          class="casa"
        />
        <p id="result" class="risultato"></p>
        <img
          src="https://www.calcioefinanza.it/wp-content/uploads/2022/06/SerieA_TIM_RGB.jpg"
          class="tim"
        />
        <img
          src="https://kassiesa.net/uefa/clubs/images/Juventus.png"
          class="ospite"
        />
      </div>
      <div class="marcatori">
        <p id="stopwatch" class="timer"></p>
        <p id="marcatori"></p>
      </div>
      <div class="quote">
        <div class="qt">
          <button class="button button2 q1" id="home"></button>
          <button class="button button2 qx" id="draw"></button>
          <button class="button button2 q2" id="away"></button>
        </div>
        <input
          type="button"
          onclick="cas(),startStopwatch()"
          value="Simula partita"
          class="b1"
        />
      </div>
    </div>
  </body>
</html>