Untitled

 avatar
unknown
plain_text
2 years ago
10 kB
3
Indexable
<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <div id="shipwallet-container" style="min-height: 350px">
      <style>
        #ingrid-loader {
          min-height: 350px;
          padding: 32px 12px 12px 12px;
          border: 1px solid #e6e6e6;
          border-radius: 6px;
          background-color: white;
        }
        ._ingrid-skeleton {
          background-color: #ededed;
          position: relative;
          overflow: hidden;
          -webkit-mask-image: -webkit-radial-gradient(white, black);
        }
        ._ingrid-skeleton::before {
          content: "";
          background-image: linear-gradient(
            90deg,
            #ededed 0px,
            #f8f8f8 80px,
            #ededed 160px
          );
          animation: transform 1.8s ease-out infinite;
          transform-origin: 0 0;
          width: 100vw;
          height: 100%;
          left: -160px;
          position: absolute;
          display: block;
        }
        ._ingrid-skeleton-text {
          height: 10px;
        }
        ._ingrid-skeleton-shipping-indicator {
          height: 45px;
          width: 100%;
        }
        ._ingrid-skeleton-shipping-indicator-label {
          margin-bottom: 20px;
          width: 100px;
        }
        ._ingrid-skeleton-delivery-categories-wrapper {
          display: flex;
          flex-direction: column;
          width: 100%;
          padding-bottom: 9px;
        }
        ._ingrid-skeleton-shipping-option-first-row {
          display: flex;
          align-items: center;
          width: 100%;
        }
        ._ingrid-skeleton-checkbox {
          width: 20px;
          height: 20px;
          border-radius: 10px;
          margin-right: 8px;
        }
        ._ingrid-skeleton-flex-1 {
          flex: 1;
        }
        ._ingrid-skeleton-shipping-option-name {
          width: 60%;
        }
        ._ingrid-skeleton-price {
          width: 30px;
          margin-right: 12px;
        }
        ._ingrid-skeleton-shipping-option-second-row {
          display: flex;
          width: 100%;
        }
        ._ingrid-skeleton-delivery-description {
          width: 35%;
        }
        ._ingrid-skeleton-delivery-logo {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
        ._ingrid-skeleton-delivery-categories-label {
          width: 200px;
        }
        ._ingrid-skeleton-delivery-category-wrapper {
          padding-bottom: 16px;
        }
        @keyframes transform {
          to {
            transform: translateX(120%);
          }
        }
        ._ingrid-skeleton-zipcode-label {
          width: 70px;
          margin-bottom: 12px;
        }
        ._ingrid-skeleton-zipcode-input {
          height: 50px;
          width: 100%;
          margin-bottom: 28px;
        }
      </style>
      <div id="ingrid-loader">
        <div style="width: 100%">
          <div>
            <div
              class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-zipcode-label"
            ></div>
            <div class="_ingrid-skeleton _ingrid-skeleton-zipcode-input"></div>
            <div
              class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-shipping-indicator-label"
            ></div>
            <div class="_ingrid-skeleton-delivery-categories-wrapper">
              <div class="_ingrid-skeleton-delivery-category-wrapper">
                <div class="_ingrid-skeleton-shipping-option-first-row">
                  <div class="_ingrid-skeleton _ingrid-skeleton-checkbox"></div>
                  <div class="_ingrid-skeleton-flex-1">
                    <div
                      class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-shipping-option-name"
                    ></div>
                  </div>
                  <div
                    class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-price"
                  ></div>
                  <div
                    class="_ingrid-skeleton _ingrid-skeleton-delivery-logo"
                  ></div>
                </div>
                <div class="_ingrid-skeleton-shipping-option-second-row">
                  <div class="_ingrid-skeleton-checkbox"></div>
                  <div class="_ingrid-skeleton-flex-1">
                    <div
                      class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-delivery-description"
                    ></div>
                  </div>
                </div>
              </div>
              <div class="_ingrid-skeleton-delivery-category-wrapper">
                <div class="_ingrid-skeleton-shipping-option-first-row">
                  <div class="_ingrid-skeleton _ingrid-skeleton-checkbox"></div>
                  <div class="_ingrid-skeleton-flex-1">
                    <div
                      class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-shipping-option-name"
                    ></div>
                  </div>
                  <div
                    class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-price"
                  ></div>
                  <div
                    class="_ingrid-skeleton _ingrid-skeleton-delivery-logo"
                  ></div>
                </div>
                <div class="_ingrid-skeleton-shipping-option-second-row">
                  <div class="_ingrid-skeleton-checkbox"></div>
                  <div class="_ingrid-skeleton-flex-1">
                    <div
                      class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-delivery-description"
                    ></div>
                  </div>
                </div>
              </div>
              <div class="_ingrid-skeleton-delivery-category-wrapper">
                <div class="_ingrid-skeleton-shipping-option-first-row">
                  <div class="_ingrid-skeleton _ingrid-skeleton-checkbox"></div>
                  <div class="_ingrid-skeleton-flex-1">
                    <div
                      class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-shipping-option-name"
                    ></div>
                  </div>
                  <div
                    class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-price"
                  ></div>
                  <div
                    class="_ingrid-skeleton _ingrid-skeleton-delivery-logo"
                  ></div>
                </div>
                <div class="_ingrid-skeleton-shipping-option-second-row">
                  <div class="_ingrid-skeleton-checkbox"></div>
                  <div class="_ingrid-skeleton-flex-1">
                    <div
                      class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-delivery-description"
                    ></div>
                  </div>
                </div>
              </div>
              <div class="_ingrid-skeleton-shipping-option-first-row">
                <div class="_ingrid-skeleton _ingrid-skeleton-checkbox"></div>
                <div class="_ingrid-skeleton-flex-1">
                  <div
                    class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-shipping-option-name"
                  ></div>
                </div>
                <div
                  class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-price"
                ></div>
                <div
                  class="_ingrid-skeleton _ingrid-skeleton-delivery-logo"
                ></div>
              </div>
              <div class="_ingrid-skeleton-shipping-option-second-row">
                <div class="_ingrid-skeleton-checkbox"></div>
                <div class="_ingrid-skeleton-flex-1">
                  <div
                    class="_ingrid-skeleton _ingrid-skeleton-text _ingrid-skeleton-delivery-description"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Your HTML content -->

    <script>
      let counter = 0;
      setTimeout(() => {
        if (counter == 0) {
          counter++;
          location.reload();
        } else {
        }
      }, 2000);
      window.onload = function () {
        (function (window, instanceId, containerId, document) {
          window[instanceId] =
            window[instanceId] ||
            function () {
              (window[instanceId].q = window[instanceId].q || []).push(
                arguments
              );
            };
          var bootstrapURL =
            "https://cdn-stage.ingrid.com/checkout-widget/553f1d1/bootstrap.js";
          var bootstrapFallbackURL = "";
          if (/MSIE|Trident/.test(window.navigator.userAgent)) {
            bootstrapURL = bootstrapFallbackURL;
          }
          window[instanceId].config = {
            container: document.getElementById(containerId),
            bootstrapURL: bootstrapURL,
            bootstrapFallbackURL: bootstrapFallbackURL,
            features: {
              // Your features here
            },
            instanceId: instanceId,
            locale: "sv-SE",
            logging:
              "https://c7a68a2a3cfe4024bf719e6485aa8751@sentry.io/141995",
            status: "",
            style: null,
            session: "VM2-417d15049cb94ff397fba4ffca775f5a",
            token: "Y2xpZW50dHdvOjNmZjBhYWIwN2NlNTQ2N2Y4NzllNDk3ZWExNDgzMTcz",
            version: "72be568e",
            loaderId: "ingrid-loader",
          };
          var container = document.getElementById(containerId);
          var bootstrapScript = document.createElement("script");
          bootstrapScript.async = true;
          bootstrapScript.src = bootstrapURL;
          bootstrapScript.className = "ingrid-bootstrap-script";
          bootstrapScript.addEventListener("load", function (e) {
            if (typeof _ingrid_initializeWidgetInstance === "function") {
              _ingrid_initializeWidgetInstance(instanceId);
            }
          });
          container.appendChild(bootstrapScript);
        })(window, "_sw", "shipwallet-container", document);
      };
    </script>
  </body>
</html>
Editor is loading...
Leave a Comment