redesign this page
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-M59D6LXT6L"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-M59D6LXT6L');
  </script>
  <meta charset="UTF-8">
  <title>Find Best Seat to Minimize Sun Exposure While Traveling - Sit In Shade</title>
  <meta name="title" content="Sit In Shade-Find Best Seat to Minimize Sun Exposure While Traveling">
  <meta name="description"
    content="Sit in Shade - Discover the optimal seat to stay in the shade during your journey. Sit In Shade provides real-time sun exposure data and route visualization.">
  <meta name="keywords"
    content="SitInShade,SunSeat, Travel sun exposure, Seat selection for sun protection, Shade during travel, Sun-safe seat, Sun exposure minimization, Route sun data, Visual route map, Travel comfort and sun protection, Sun sensitivity, SunShield app, Sun-glare reduction, Best seat for sun protection, Traveling in the shade, Node.js sun app, Travel comfort tips, Sun exposure calculator, Optimal travel seat, Sun safety for travelers, Sun avoidance while traveling">
  <meta name="robots" content="index, follow">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="language" content="English">
  <meta name="author" content="Amith V Purushothaman">
  <meta name="theme-color" content="#319197">

  <link rel="canonical" href="https://sitinshade.com" />
  <link rel="icon" type="image/x-icon" href="/favicon.ico">

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/tomickigrzegorz/autocomplete@1.8.6/dist/js/autocomplete.min.js"></script>
  <script src="multioptionpolyline.js"></script>
  <meta name="viewport" content="width=device-width, user-scalable=no" />

  <link rel="manifest" href="manifest.json" />
</head>

<body>
  <div class="container">
    <h1 style="color:white;padding-left:10px">Sit in Shade</h1>
    <div style="width:290px;color:white;padding-left:10px"> Find Best Bus Seat to Minimize Sun Exposure While Traveling
    </div>
    <div class="text writing auto-search-wrapper">
      <input type="text" autocomplete="off" id="source" placeholder="Enter Place">
      <span></span>
    </div>
    <div class="text writing auto-search-wrapper">
      <input type="text" id="destination" autocomplete="off" placeholder="Enter Destination">
      <span></span>
    </div>


    

    <div class="datetime">
      <div class="date">
        <label class="titulo">Date</label>
        <div class="fecha">
          <input type="date" id="date" name="fecha">
          <span></span>
        </div>
      </div>

      <div class="time">
        <label class="titulo">Time</label>
        <div class="tiempo">
          <input type="time" id="time" name="tiempo" step="60">
          <span></span>
        </div>
      </div>


      



    </div>
    <div class="datetime">
      <!-- <div class="time">
        <label class="titulo">Estimate Duration</label>
        <div style="padding:38px 0px 0px 0px;">
          <input id="checkboxInput" type="checkbox">
          <label class="toggleSwitch" for="checkboxInput">
          </label>
        </div> -->
      <!-- </div> -->

      <!-- <div class="date">
        <label class="titulo">Flight Duration</label>
        <div class="fecha">
          <div class="duration-input">
            <div class="hours">
              <input id="hour-input" type="number" min="0" max="50" placeholder="Hour">
              <span></span>
            </div>
            <div class="mins">
              <input id="min-input" type="number" min="0" max="59" placeholder="Minute">
              <span></span>
            </div>
          </div>
        </div>
      </div> -->



    </div>

    <div id="buttondiv">
      <button id="current-time-button" class="buttoncurrent ghost tiempo">Use Current Time</button>
      <button id="current-location-button" class="buttoncurrent ghost tiempo">Use Current Location</button>
    </div>
    <div class="selectsubmit">
      <div class="select ">
        <div class="date">
          <label class="titulo">Flight Duration</label>
          <div class="fecha">
            <div class="duration-input">
              <div class="hours">
                <input id="hour-input" type="number" min="0" max="50" placeholder="Hour">
                <span></span>
              </div>
              <div class="mins">
                <input id="min-input" type="number" min="0" max="59" placeholder="Minute">
                <span></span>
              </div>
            </div>
          </div>
        </div>
  


      </div>

      <div class="submit">
        <button class="btn " id="submit-button" value="Enviar">Submit</button>
      </div>
    </div>

  </div>


  <button class="installbtn" style="display: none;">Add To Homescreen</button>

  <!-- map -->
  <div id="map"
    class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
    tabindex="0" style="position: relative;"></div>



  <script src="index.js"></script>
  <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
    data-id="amithv" data-description="Support me on Buy me a coffee!"
    data-message="Keep the Shade and Ditch the Ads - Support Me" data-color="#40DCA5" data-position="Right"
    data-x_margin="5" data-y_margin="20"></script> <!-- https://github.com/tomickigrzegorz/autosuggest -->
  <!-- Cloudflare Web Analytics -->
  <script defer src='https://static.cloudflareinsights.com/beacon.min.js'
    data-cf-beacon='{"token": "21f807806f6c4263ba46106778cf857f"}'></script><!-- End Cloudflare Web Analytics -->

</body>

</html>