https://html-load.com/

提交的 URL:
https://html-load.com/
报告完成时间:

链接 · 找到 0 个

从页面中识别出的传出链接

JavaScript 变量 · 找到 12 个

在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量,可以从当前范围内的代码中的任何位置访问

名称类型
0object
1object
2object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
___grecaptcha_cfgobject
grecaptchaobject
__recaptcha_apistring
__google_recaptcha_clientboolean

控制台日志消息 · 找到 0 条

记录到 Web 控制台的消息

HTML

页面的原始 HTML 正文

<!DOCTYPE html><html lang="en"><head><meta http-equiv="origin-trial" content="A/kargTFyk8MR5ueravczef/wIlTkbVk1qXQesp39nV+xNECPdLBVeYffxrM8TmZT6RArWGQVCJ0LRivD7glcAUAAACQeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZS5jb206NDQzIiwiZmVhdHVyZSI6IkRpc2FibGVUaGlyZFBhcnR5U3RvcmFnZVBhcnRpdGlvbmluZzIiLCJleHBpcnkiOjE3NDIzNDIzOTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&amp;family=Noto+Sans:ital,wght@0,100..900;1,100..900&amp;display=swap" rel="stylesheet">
  <script type="text/javascript" async="" charset="utf-8" src="https://www.gstatic.com/recaptcha/releases/zIriijn3uj5Vpknvt_LnfNbF/recaptcha__en.js" crossorigin="anonymous" integrity="sha384-8mJgBUBw4uTWF9Ooxgb4sUuO9jKtaVm1I+8vb0qpxxX3cafec7ovH+goM3yD4UyO"></script><script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
  <title>HL.C | The fast and easy way to secure web resources</title>
  <style>
    body {
      background-image: url("https://asset.html-load.com/image/main_bg.png");
      background-repeat: no-repeat;
      background-position: top center;
      background-color: white;
      background-size: 1750px;
      width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
      overflow-y: scroll;
      margin: auto;

      @media screen and (max-width: 767px) {
        background-image: none;
      }
    }

    #header {
      width: 100%;
      max-width: 1152px;
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      padding: 18px 0 18px 0;

      @media screen and (max-width: 1239px) and (min-width: 768px) {
        padding: 18px 32px 18px 32px;
      }

      @media screen and (max-width: 767px) {
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: white;
        padding: 0 32px 0 32px;
      }
    }

    .mainSection {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 48px;
      padding: 64px 0 90px 0;

      @media screen and (max-width: 767px) {
        background-image: url("https://asset.html-load.com/image/main_bg.png");
        background-repeat: no-repeat;
        background-position: top center;
        background-color: white;
        background-size: 1152px;

        padding: 80px 0 96px 0;
        box-sizing: border-box;
      }
    }

    #icon {
      width: 79px;
      height: 96px;

      @media screen and (max-width: 767px) {
        width: 60px;
        height: 72px;
      }
    }

    .mainSection>.icon {
      padding: 22px 30.5px;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 28px;
      box-shadow: 0px 4px 53.1px 0px rgba(100, 72, 255, 0.25);


      @media screen and (max-width: 767px) {
        padding: 14px 22px;
        border-radius: 20px;
      }
    }

    .mainSection>.text_container>.title {
      width: 640px;
      font-family: Inter;
      font-size: 56px;
      font-weight: 700;
      line-height: 61.6px;
      letter-spacing: -0.03em;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      margin: auto;
      margin-bottom: 24px;

      @media screen and (max-width: 767px) {
        width: 100%;
        font-size: 32px;
        line-height: 35.2px;
      }
    }

    #container {
      width: 100%;
    }

    .mainSection>.text_container>.description {
      width: 775px;
      margin: auto;
      font-family: Inter;
      font-size: 20px;
      font-weight: 400;
      line-height: 28px;
      text-align: center;
      color: #787E84;

      @media screen and (max-width: 767px) {
        width: 100%;
        font-size: 18px;
        line-height: 25.2px;
      }
    }

    #container>section {
      @media screen and (max-width: 1239px) {
        box-sizing: border-box;
        padding-left: 32px;
        padding-right: 32px;
      }
    }

    .divider {
      width: 100%;
      max-width: 1152px;
      margin: auto;
      height: 1px;
      background: rgba(234, 235, 237, 1);

      @media screen {
        width: calc(100% - 64px);
        margin: auto;
      }
    }

    .secondSection {
      width: 100%;
      background: radial-gradient(15.1% 26.7% at 93.89% 55.18%, rgba(117, 139, 255, 0.1) 0%, rgba(117, 139, 255, 0) 100%),
        radial-gradient(19.3% 34.83% at 98.71% 76.5%, rgba(242, 0, 255, 0.03) 0%, rgba(242, 0, 255, 0) 100%),
        radial-gradient(16.55% 30.42% at 103.91% 47.96%, rgba(0, 187, 255, 0.04) 29.5%, rgba(0, 187, 255, 0) 100%);

      .secondContainer {
        width: 100%;
        max-width: 1152px;
        padding: 96px 0 90px 0;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 48px;

        @media screen and (max-width: 767px) {
          padding: 48px 0 48px 0;
          row-gap: 32px;
        }
      }
    }

    .secondContainer>.title {
      width: 356px;
      font-family: Inter;
      font-size: 32px;
      font-weight: 600;
      line-height: 38.4px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      align-self: flex-start;

      @media screen and (max-width: 767px) {
        width: 100%;
        font-size: 24px;
        line-height: 28.8px;
      }
    }

    .secondContainer>.cards {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 20px;
      row-gap: 24px;

      @media screen and (max-width: 1239px) {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 32px;
      }
    }

    .card>svg {
      @media screen and (max-width: 767px) {
        width: 28px;
        height: 28px;
      }
    }

    .secondContainer>.cards>.card {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 24px;
      padding: 32px;
      box-sizing: border-box;
      border: 1px solid #EAEBED;
      row-gap: 16px;
      display: flex;
      flex-direction: column;
      box-shadow: 0px 8px 30px -10px #363C4514;

      @media screen and (max-width: 767px) {
        padding: 24px;
        row-gap: 8px;
      }

      .title {
        font-family: Inter;
        font-size: 24px;
        font-weight: 600;
        line-height: 28.8px;
        letter-spacing: -0.02em;
        text-align: left;

        @media screen and (max-width: 767px) {
          font-size: 18px;
          line-height: 21.6px;
        }
      }

      .description {
        font-family: Inter;
        font-size: 18px;
        font-weight: 400;
        line-height: 25.2px;
        text-align: left;
        color: #787E84;

        @media screen and (max-width: 767px) {
          font-size: 16px;
          line-height: 20.8px;
        }
      }
    }

    .secondContainer>.footer {
      margin-top: 48px;
      width: 670px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      row-gap: 24px;
      font-family: Inter;
      font-size: 18px;
      font-weight: 400;
      line-height: 25.2px;
      letter-spacing: -0.01em;
      text-align: center;
      color: #70757F;

      @media screen and (max-width: 767px) {
        width: 100%;
        font-size: 16px;
        line-height: 20.8px;
      }

      .img_container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media screen and (max-width: 767px) {
          width: 100%;
          flex-direction: column;
          row-gap: 24px;
        }
      }
    }

    .thirdSection {
      width: 100%;
      background: radial-gradient(25.7% 63.36% at 1.53% 92.24%, rgba(117, 139, 255, 0.1) 0%, rgba(117, 139, 255, 0) 100%),
        radial-gradient(38.2% 74.19% at 0% 108.18%, rgba(242, 0, 255, 0.03) 0%, rgba(242, 0, 255, 0) 100%),
        radial-gradient(14.26% 36.29% at 0% 71.15%, rgba(0, 187, 255, 0.04) 29.5%, rgba(0, 187, 255, 0) 100%)
    }

    .thirdContainer {
      width: 100%;
      max-width: 1152px;
      padding: 96px 0 94px 0;
      margin: auto;
      display: flex;
      flex-direction: row;
      align-items: flex-start;

      @media screen and (max-width: 1239px) and (min-width: 768px) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 76px;
      }

      @media screen and (max-width: 767px) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 0 48px 0;
        row-gap: 76px;
      }

      .leftContainer {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 24px;

        @media screen and (max-width: 1239px) {
          width: 100%;
        }

        @media screen and (max-width: 767px) {
          row-gap: 16px;
        }

        .title {
          width: 287px;
          font-family: Inter;
          font-size: 32px;
          font-weight: 600;
          line-height: 38.4px;
          letter-spacing: -0.02em;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;

          @media screen and (max-width: 767px) {
            width: 100%;
            font-size: 24px;
            line-height: 28.8px;
          }
        }

        .description {
          width: 420px;
          font-family: Inter;
          font-size: 18px;
          font-weight: 400;
          line-height: 25.2px;
          letter-spacing: -0.01em;
          text-align: left;
          color: #787E84;

          @media screen and (max-width: 767px) {
            width: 100%;
            font-size: 16px;
            line-height: 20.8px;
          }
        }
      }

      .rightContainer {
        width: 50%;

        @media screen and (max-width: 1239px){
          width: 100%;
        }
      }

      .rightContainer>form {
        width: 565px;
        display: flex;
        flex-direction: column;
        row-gap: 40px;

        @media screen and (max-width: 1239px) {
          width: 100%;
        }
      }
    }

    .inputContainer {
      display: flex;
      flex-direction: column;
      row-gap: 8px;
      font-family: Inter;
      font-size: var(--sds-typography-body-size-medium);
      font-weight: 400;
      line-height: 22.4px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;

      input {
        width: 100%;
        padding: 12px 16px;
        box-sizing: border-box;
        border-radius: 8px;
        border: 1px solid #DFE1E3;
        background: #ffffff;

        &:hover {
          outline: 1px solid #B7BCC3;
        }

        &:focus, &:active, &:focus-visible, &:focus-within, &:target {
          outline: 1px solid #2C2C2C;
        }
      }
    }

    #submit {
      width: 100%;
      padding: 12px;
      box-sizing: border-box;
      border-radius: 8px;
      background: #2c2c2c;
      color: white;

      font-family: Inter;
      font-size: 16px;
      font-weight: 400;
      line-height: 16px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;

      cursor: pointer;
    }

    footer.footer {
      padding: 40px 0 74px 0;
      font-family: Inter;
      font-size: 16px;
      font-weight: 400;
      line-height: 20.8px;
      letter-spacing: -0.01em;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #A0A0A0;
    }

    #cloudflareImg {
      width: 210px;
      @media screen and (max-width: 767px) {
        width: 175px;
      }
    }

    #awsImg {
      width: 68.5px;
      @media screen and (max-width: 767px) {
        width: 50px;
      }
    }

    #googleCloudImg {
      width: 210px;
      @media screen and (max-width: 767px) {
        width: 150px;
      }
    }

  </style>
</head>

<body>
  <header id="header">
    <div id="logo">
      <svg width="66" height="24" viewBox="0 0 66 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12.912 20V13.736H7.08V20H1.776V3.488H7.08V9.512H12.912V3.488H18.216V20H12.912ZM21.7682 3.488H27.0722V15.776H35.5442V20H21.7682V3.488ZM56.5202 3.2C58.9682 3.2 60.9042 3.816 62.3282 5.048C63.7522 6.264 64.4642 8.008 64.4642 10.28H59.4002C59.4002 9.32 59.1442 8.56 58.6322 8C58.1362 7.44 57.4242 7.16 56.4962 7.16C55.4242 7.16 54.6322 7.496 54.1202 8.168C53.6242 8.84 53.3762 9.776 53.3762 10.976V12.512C53.3762 13.696 53.6242 14.632 54.1202 15.32C54.6322 15.992 55.4082 16.328 56.4482 16.328C57.4722 16.328 58.2482 16.064 58.7762 15.536C59.3042 15.008 59.5682 14.264 59.5682 13.304H64.4642C64.4642 15.56 63.7682 17.288 62.3762 18.488C61.0002 19.688 59.0482 20.288 56.5202 20.288C53.7042 20.288 51.5682 19.568 50.1122 18.128C48.6722 16.688 47.9522 14.56 47.9522 11.744C47.9522 8.928 48.6722 6.8 50.1122 5.36C51.5682 3.92 53.7042 3.2 56.5202 3.2Z" fill="black"></path>
        <ellipse cx="42" cy="16" rx="4" ry="4" transform="rotate(-90 42 16)" fill="#758BFF"></ellipse>
      </svg>
    </div>
  </header>
  <container id="container">
    <section class="mainSection">
      <div class="icon">
        <img id="icon" width="79" height="96" src="https://asset.html-load.com/image/icon_image.png">
      </div>
      <div class="text_container">
        <h2 class="title">The fast and easy way to secure web resources</h2>
        <p class="description">
          Protect your web assets with cutting-edge real-time obfuscation. Ensure your JavaScript, CSS, and HTML are
          secure from
          unauthorized access, while delivering seamless performance for your users.
        </p>
      </div>
    </section>
    <div class="divider"></div>
    <section class="secondSection">
      <div class="secondContainer">
        <div class="title">
          Empower Your Code <br>With Advanced Security
        </div>
        <div class="cards">
          <div class="card">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_27_7259)">
                <path d="M19.9835 3.33334C10.7835 3.33334 3.3335 10.8 3.3335 20C3.3335 29.2 10.7835 36.6667 19.9835 36.6667C29.2002 36.6667 36.6668 29.2 36.6668 20C36.6668 10.8 29.2002 3.33334 19.9835 3.33334ZM25.4835 27.85L18.3335 20.6833V11.6667H21.6668V19.3167L27.8502 25.5L25.4835 27.85Z" fill="#2C2C2C"></path>
              </g>
              <defs>
                <clipPath id="clip0_27_7259">
                  <rect width="40" height="40" fill="white"></rect>
                </clipPath>
              </defs>
            </svg>
            <div class="title">
              Real-Time Obfuscation
            </div>
            <div class="description">
              Automatically obfuscate JavaScript, CSS, and HTML files in real-time to prevent code theft and tampering.
            </div>
          </div>
          <div class="card">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.7083 20L17.1667 17.5417C17.5 17.2083 17.6667 16.8194 17.6667 16.375C17.6667 15.9306 17.5 15.5417 17.1667 15.2083C16.8333 14.875 16.4378 14.7083 15.98 14.7083C15.5211 14.7083 15.125 14.875 14.7917 15.2083L11.1667 18.8333C11 19 10.8822 19.1806 10.8133 19.375C10.7433 19.5694 10.7083 19.7778 10.7083 20C10.7083 20.2222 10.7433 20.4306 10.8133 20.625C10.8822 20.8194 11 21 11.1667 21.1667L14.7917 24.7917C15.125 25.125 15.5211 25.2917 15.98 25.2917C16.4378 25.2917 16.8333 25.125 17.1667 24.7917C17.5 24.4583 17.6667 24.0694 17.6667 23.625C17.6667 23.1806 17.5 22.7917 17.1667 22.4583L14.7083 20ZM25.2917 20L22.8333 22.4583C22.5 22.7917 22.3333 23.1806 22.3333 23.625C22.3333 24.0694 22.5 24.4583 22.8333 24.7917C23.1667 25.125 23.5628 25.2917 24.0217 25.2917C24.4794 25.2917 24.875 25.125 25.2083 24.7917L28.8333 21.1667C29 21 29.1178 20.8194 29.1867 20.625C29.2567 20.4306 29.2917 20.2222 29.2917 20C29.2917 19.7778 29.2567 19.5694 29.1867 19.375C29.1178 19.1806 29 19 28.8333 18.8333L25.2083 15.2083C25.0417 15.0417 24.8544 14.9167 24.6467 14.8333C24.4378 14.75 24.2294 14.7083 24.0217 14.7083C23.8128 14.7083 23.6044 14.75 23.3967 14.8333C23.1878 14.9167 23 15.0417 22.8333 15.2083C22.5 15.5417 22.3333 15.9306 22.3333 16.375C22.3333 16.8194 22.5 17.2083 22.8333 17.5417L25.2917 20ZM8.33333 35C7.41667 35 6.63167 34.6739 5.97833 34.0217C5.32611 33.3683 5 32.5833 5 31.6667V8.33333C5 7.41667 5.32611 6.63167 5.97833 5.97833C6.63167 5.32611 7.41667 5 8.33333 5H31.6667C32.5833 5 33.3683 5.32611 34.0217 5.97833C34.6739 6.63167 35 7.41667 35 8.33333V31.6667C35 32.5833 34.6739 33.3683 34.0217 34.0217C33.3683 34.6739 32.5833 35 31.6667 35H8.33333Z" fill="#2C2C2C"></path>
            </svg>
            <div class="title">
              Developer-Friendly API
            </div>
            <div class="description">
              Easily integrate our powerful obfuscation service with your existing workflow using a developer-first API.
            </div>
          </div>
          <div class="card">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_27_7243)">
                <path d="M15.3168 10.5833C11.9168 14.4 9.5835 19.8833 9.36683 20.4L3.3335 17.8167L10.0835 11.0667C10.8668 10.2833 12.0002 9.93333 13.1002 10.15L15.3168 10.5833ZM18.6168 28.3333C18.6168 28.3333 24.8502 25.75 28.4335 22.1667C37.4335 13.1667 35.9335 6.13333 35.4502 4.55C33.8668 4.05 26.8335 2.56666 17.8335 11.5667C14.2502 15.15 11.6668 21.3833 11.6668 21.3833L18.6168 28.3333ZM29.4168 24.6833C25.6002 28.0833 20.1168 30.4167 19.6002 30.6333L22.1835 36.6667L28.9335 29.9167C29.7168 29.1333 30.0668 28 29.8502 26.9L29.4168 24.6833ZM15.0002 30C15.0002 31.3833 14.4335 32.6333 13.5335 33.5333C11.5668 35.5 3.3335 36.6667 3.3335 36.6667C3.3335 36.6667 4.50016 28.4333 6.46683 26.4667C7.36683 25.5667 8.61683 25 10.0002 25C12.7668 25 15.0002 27.2333 15.0002 30ZM21.6668 15C21.6668 13.1667 23.1668 11.6667 25.0002 11.6667C26.8335 11.6667 28.3335 13.1667 28.3335 15C28.3335 16.8333 26.8335 18.3333 25.0002 18.3333C23.1668 18.3333 21.6668 16.8333 21.6668 15Z" fill="#2C2C2C"></path>
              </g>
              <defs>
                <clipPath id="clip0_27_7243">
                  <rect width="40" height="40" fill="white"></rect>
                </clipPath>
              </defs>
            </svg>
            <div class="title">
              Performance Optimized
            </div>
            <div class="description">
              Enjoy top-tier security without compromising on speed or user experience.
            </div>
          </div>
          <div class="card">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M32.5769 12.9972C32.2216 13.7788 31.1114 13.7788 30.7561 12.9972L29.7383 10.7581C29.6383 10.5379 29.4619 10.3615 29.2418 10.2615L27.0026 9.2437C26.221 8.88843 26.221 7.77824 27.0026 7.42296L29.2418 6.40517C29.4619 6.30512 29.6383 6.12872 29.7383 5.90861L30.7561 3.66947C31.1114 2.88787 32.2216 2.88787 32.5769 3.66947L33.5947 5.90861C33.6947 6.12872 33.8711 6.30512 34.0912 6.40517L36.3304 7.42296C37.112 7.77824 37.112 8.88843 36.3304 9.2437L34.0912 10.2615C33.8711 10.3615 33.6947 10.5379 33.5947 10.7581L32.5769 12.9972ZM32.5769 36.3305C32.2216 37.1121 31.1114 37.1121 30.7561 36.3305L29.7383 34.0914C29.6383 33.8713 29.4619 33.6949 29.2418 33.5948L27.0026 32.577C26.221 32.2218 26.221 31.1116 27.0026 30.7563L29.2418 29.7385C29.4619 29.6385 29.6383 29.4621 29.7383 29.2419L30.7561 27.0028C31.1114 26.2212 32.2216 26.2212 32.5769 27.0028L33.5947 29.2419C33.6947 29.4621 33.8711 29.6385 34.0912 29.7385L36.3304 30.7563C37.112 31.1116 37.112 32.2218 36.3304 32.577L34.0912 33.5948C33.8711 33.6949 33.6947 33.8713 33.5947 34.0914L32.5769 36.3305ZM16.3654 30.3291C15.8325 31.5015 14.1672 31.5015 13.6343 30.3291L10.9883 24.5081C10.8883 24.2879 10.7119 24.1115 10.4918 24.0115L4.67071 21.3655C3.49832 20.8326 3.49832 19.1674 4.67071 18.6344L10.4918 15.9885C10.7119 15.8885 10.8883 15.7121 10.9883 15.4919L13.6343 9.67087C14.1672 8.49848 15.8325 8.49848 16.3654 9.67087L19.0113 15.4919C19.1114 15.7121 19.2878 15.8885 19.5079 15.9885L25.329 18.6344C26.5014 19.1674 26.5014 20.8326 25.329 21.3655L19.5079 24.0115C19.2878 24.1115 19.1114 24.2879 19.0113 24.5081L16.3654 30.3291Z" fill="#2C2C2C"></path>
            </svg>
            <div class="title">
              Customizable Rules
            </div>
            <div class="description">
              Define your own security rules to meet the unique needs of your application.
            </div>
          </div>
        </div>
        <div class="footer">
          <div>
            multi-CDN powered by
          </div>
          <div class="img_container">
            <img id="cloudflareImg" src="https://asset.html-load.com/image/cloudflare.png">
            <img id="awsImg" src="https://asset.html-load.com/image/aws.png">
            <img id="googleCloudImg" src="https://asset.html-load.com/image/googlecloud.png">
          </div>
        </div>
      </div>
    </section>
    <div class="divider"></div>
    <section class="thirdSection">
      <div class="thirdContainer">
        <div class="leftContainer">
          <div class="title">
            Let’s Secure Your Web Together
          </div>
          <div class="description">
            Have questions or need a customized solution? Get in touch with our experts today and take the first step
            towards securing your web resources.
          </div>
        </div>
        <div class="rightContainer">
          <form id="form">
            <div class="inputContainer">
              Name
              <input type="text" name="name">
            </div>
            <div class="inputContainer">
              Company
              <input type="text" name="company">
            </div>
            <div class="inputContainer">
              Email
              <input type="text" name="email">
            </div>
            <div class="inputContainer">
              Message
              <input type="text" name="message">
            </div>
            <div class="g-recaptcha" data-sitekey="6LdvWpknAAAAAENy0nArVOQS1krtjMK-cQWwm4p9"><div style="width: 304px; height: 78px;"><div><iframe title="reCAPTCHA" width="304" height="78" role="presentation" name="a-5pc380vabafp" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LdvWpknAAAAAENy0nArVOQS1krtjMK-cQWwm4p9&amp;co=aHR0cHM6Ly9odG1sLWxvYWQuY29tOjQ0Mw..&amp;hl=en&amp;v=zIriijn3uj5Vpknvt_LnfNbF&amp;size=normal&amp;cb=h3ivtp68mqyy"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea></div><iframe style="display: none;"></iframe></div>
            <button id="submit" type="submit">Submit</button>
          </form>
        </div>
      </div>
      <div class="divider"></div>
      <footer class="footer">
        © html-load.com
      </footer>
    </section>
  </container>
  <script>
    const form = document.getElementById('form');
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      
      const name = form.querySelector('input[name="name"]').value;
      const company = form.querySelector('input[name="company"]').value;
      const email = form.querySelector('input[name="email"]').value;
      const message = form.querySelector('input[name="message"]').value;

      if (!name || !company || !email || !message) {
        alert('Please fill in all the fields.');
        return;
      }

      const recaptchaResponse = grecaptcha.getResponse();
      if (!recaptchaResponse) {
        alert('Please complete the reCAPTCHA.');
        return;
      }

      fetch('/inquiry', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          channel: '2_sales_pub',
          message: `Inquiry html-load.com
Name: ${ name } 
Company: ${ company } 
Email: ${ email } 
Message: ${ message }`,
          recaptchaToken: recaptchaResponse
        })
      }).then(response => {
        if (response.ok) {
          alert('Thank you for your inquiry. We will get back to you soon.');
          form.reset();
        } else {
          alert('Error submitting the form. Please try again.');
        }
      }).catch(error => {
        console.error('Error submitting the form:', error);
        alert('Error submitting the form. Please try again.');
      });
    });
  </script>


<div style="background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px; position: absolute; transition: visibility 0s linear 0.3s, opacity 0.3s linear 0s; opacity: 0; visibility: hidden; z-index: 2000000000; left: 0px; top: -10000px;"><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2000000000; background-color: rgb(255, 255, 255); opacity: 0.05;"></div><div class="g-recaptcha-bubble-arrow" style="border: 11px solid transparent; width: 0px; height: 0px; position: absolute; pointer-events: none; margin-top: -11px; z-index: 2000000000;"></div><div class="g-recaptcha-bubble-arrow" style="border: 10px solid transparent; width: 0px; height: 0px; position: absolute; pointer-events: none; margin-top: -10px; z-index: 2000000000;"></div><div style="z-index: 2000000000; position: relative;"><iframe title="recaptcha challenge expires in two minutes" name="c-5pc380vabafp" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" src="https://www.google.com/recaptcha/api2/bframe?hl=en&amp;v=zIriijn3uj5Vpknvt_LnfNbF&amp;k=6LdvWpknAAAAAENy0nArVOQS1krtjMK-cQWwm4p9" style="width: 100%; height: 100%;"></iframe></div></div></body></html>