form.html

<!DOCTYPE html>
<html>


<head>
  <base target="_top">


  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<style>


   body{
     background: #eee;
   }


   .frame{
      box-shadow: 10px 10px 15px rgb(193,182,182), -6px -6px 15px #eee;
      padding: 20px;
      max-width: 480px;
      margin: 40px auto;
      margin-top: 50px;
      border-radius: 7px;
      background: white;
   }

    #centered-table {
      margin-left: auto;
      margin-right: auto;
    }

    button {
      text-transform: uppercase;
      transition: transform 80ms ease-in;
      border-radius: 7px;
    }

    button:active {
        transform: scale(0.95);
        color: white
    }

    .btn.focus, .btn:focus {
        outline: 0;
        box-shadow: none!important;
        color: white;
    }


    .btn-info:hover {
      background-color: gold;
      color: white;
      border-color: gold;
    }

    .btn-info {color: white;}


    .box {
        border: 1px solid rgba(0,0,0,0.2);
        padding: 1.5rem;
        margin-left:10px;
        margin-right:10px;
        border-radius: 13px;
        margin: auto;
        width: 100%;
    }


    .inp {
        border:none;
        border-bottom: 1px solid rgba(0,0,0,0.2);
        border-radius: 0px;
        padding: 5px 10px;
        outline: none;
    }


    [placeholder]:focus::-webkit-input-placeholder {
        transition: text-indent 0.4s 0.4s ease;
        text-indent: -100%;
        opacity: 1;
    }


     .inp.focus, .inp:focus {
        outline: 0;
        box-shadow: none!important;
        /* color: green; */
        border-bottom: 1px solid rgba(0,0,0,0.2);
    }


</style>


</head>


<body>


 <div class="container">
  <div class="row frame">

   <h5 class="mt-4 text-center">WebApp ESP32 Google Script</h5>
   <h5 id="titles" class="mt-4 text-center"></h5>
   <h6 id="sub-titles" class="mb-4 text-center"></h6>

   <div class="form-group mt-4 mb-4 text-center">
   <a id="dynamic-link" href="https://google.com">
   <button type="button" class="btn btn-info">GPS Location</button>
   </a>
   </div>

<!-- create form element here -->

   <div class="form-group mt-4 mb-4 text-center">
    <table class="mb-4" id="centered-table">
        <tr>
            <td style="font-weight: bold" width="135">Temperature</td>
            <td width="15">:</td>
            <td id="data1"></td>
        </tr>
        <tr>
            <td style="font-weight: bold" >Humidity</td>
            <td>:</td>
            <td id="data2"></td>
        </tr>
        <tr>
            <td style="font-weight: bold" >Loction</td>
            <td>:</td>
            <td id="data3"></td>
        </tr>
      </table>
   </div>

<!-- create form until element here -->


   <!--div class="form-group mt-4 mb-4 text-center">
      <button type="button" class="btn btn-info" onclick="whenButtonClicked()">submit</button>
   </div-->


  </div>
 </div>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>


<script>

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

setInterval(function(){

  let title = document.getElementById('titles');
  let subTitle = document.getElementById('sub-titles');
  let d1 = document.getElementById('data1');
  let d2 = document.getElementById('data2');
  let d3 = document.getElementById('data3');
  ////////////////////////////////////////////////////////////////////////////
  // Get the HTML element by its ID
  var linkElement = document.getElementById("dynamic-link");
  ////////////////////////////////////////////////////////////////////////////

  google.script.run
  .withSuccessHandler(data => {
      title.innerHTML = data[0];
      subTitle.innerHTML = data[1];
      d1.innerHTML = data[2];
      d2.innerHTML = data[3];
      d3.innerHTML = data[4];
      var dynamicHref = data[5];
      var url = "https://www.google.com/maps/dir/" + encodeURIComponent(dynamicHref);
      linkElement.setAttribute("href", url);

  })
  .setAutomatically();

}, 500)

})


</script>


</body>


</html>