Untitled
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