File "kubio-iframe-loader.html"
Full Path: /home/lacostenacom/public_html/wp/wp-content/plugins/kubio/static/kubio-iframe-loader.html
File size: 9.09 KB
MIME-type: text/html
Charset: utf-8
<!doctype html>
<html lang="en-US">
<head>
<title>Kubio Loader</title>
<style>
:root {
--logo-size: 120px;
--logo-color: #a4afb7;
--bg-color: #f1f3f5;
}
html,
body {
background: var( --bg-color );
}
html,
body,
body * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
justify-content: center;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
.container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
color: inherit;
}
.message {
font-size: 1.2rem;
color: var( --logo-color );
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
sans-serif;
margin: 1em;
}
.hide {
display: none;
}
#eKIDzSscbEO1 {
overflow: visible;
width: var( --logo-size ) !important;
height: var( --logo-size ) !important;
max-width: var( --logo-size ) !important;
fill: var( --logo-color ) !important;
display: block;
}
#eKIDzSscbEO3_tr {
animation: eKIDzSscbEO3_tr__tr 2000ms linear infinite normal
forwards;
}
@keyframes eKIDzSscbEO3_tr__tr {
0% {
transform: translate( 193.209984px, 190.850067px )
rotate( 0deg );
}
12% {
transform: translate( 193.209984px, 190.850067px )
rotate( 0deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
20% {
transform: translate( 193.209984px, 190.850067px )
rotate( 90deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
52% {
transform: translate( 193.209984px, 190.850067px )
rotate( 90deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
60% {
transform: translate( 193.209984px, 190.850067px )
rotate( 0deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
68% {
transform: translate( 193.209984px, 190.850067px )
rotate( 0deg );
}
100% {
transform: translate( 193.209984px, 190.850067px )
rotate( 0deg );
}
}
#eKIDzSscbEO5_tr {
animation: eKIDzSscbEO5_tr__tr 2000ms linear infinite normal
forwards;
}
@keyframes eKIDzSscbEO5_tr__tr {
0% {
transform: translate( 193.219933px, 61.519987px )
rotate( 360deg );
}
20% {
transform: translate( 193.219933px, 61.519987px )
rotate( 360deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
28% {
transform: translate( 193.219933px, 61.519987px )
rotate( 270deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
84% {
transform: translate( 193.219933px, 61.519987px )
rotate( 270deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
92% {
transform: translate( 193.219933px, 61.519987px )
rotate( 360deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
100% {
transform: translate( 193.219933px, 61.519987px )
rotate( 360deg );
}
}
#eKIDzSscbEO7_tr {
animation: eKIDzSscbEO7_tr__tr 2000ms linear infinite normal
forwards;
}
@keyframes eKIDzSscbEO7_tr__tr {
0% {
transform: translate( 59.18501px, 193.18499px )
rotate( 0deg );
}
28% {
transform: translate( 59.18501px, 193.18499px )
rotate( 0deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
36% {
transform: translate( 59.18501px, 193.18499px )
rotate( 90deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
68% {
transform: translate( 59.18501px, 193.18499px )
rotate( 90deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
76% {
transform: translate( 59.18501px, 193.18499px )
rotate( 0deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
84% {
transform: translate( 59.18501px, 193.18499px )
rotate( 0deg );
}
100% {
transform: translate( 59.18501px, 193.18499px )
rotate( 0deg );
}
}
#eKIDzSscbEO9_tr {
animation: eKIDzSscbEO9_tr__tr 2000ms linear infinite normal
forwards;
}
@keyframes eKIDzSscbEO9_tr__tr {
0% {
transform: translate( 59.149774px, 59.150009px )
rotate( 360deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
8% {
transform: translate( 59.149774px, 59.150009px )
rotate( 270deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
36% {
transform: translate( 59.149774px, 59.150009px )
rotate( 270deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
44% {
transform: translate( 59.149774px, 59.150009px )
rotate( 360deg );
animation-timing-function: cubic-bezier(
0.39,
0.575,
0.565,
1
);
}
52% {
transform: translate( 59.149774px, 59.150009px )
rotate( 360deg );
}
100% {
transform: translate( 59.149774px, 59.150009px )
rotate( 360deg );
}
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<svg
id="eKIDzSscbEO1"
viewBox="0 0 250 252.37"
shapeRendering="geometricPrecision"
textRendering="geometricPrecision"
>
<G id="eKIDzSscbEO2">
<G
id="eKIDzSscbEO3_tr"
transform="translate(193.209984,190.850067) rotate(0)"
>
<Path
id="eKIDzSscbEO3"
d="M138,247.63C137.581068,247.63538,137.177581,247.472023,136.880388,247.176711C136.583195,246.8814,136.41728,246.478957,136.42,246.06L136.42,135.6C136.422814,134.882088,136.90636,134.255118,137.6,134.07C198.879988,135.943871,248.120677,185.180179,250,246.46C249.817233,247.153771,249.187422,247.635392,248.47,247.63Z"
transform="translate(-193.209984,-190.850067)"
stroke="none"
strokeWidth="1"
/>
</G>
</G>
<G id="eKIDzSscbEO4">
<G
id="eKIDzSscbEO5_tr"
transform="translate(193.219933,61.519987) rotate(360)"
>
<Path
id="eKIDzSscbEO5"
d="M137.62,118.3C136.924324,118.117949,136.43933,117.489102,136.44,116.77L136.44,6.32C136.434651,5.902808,136.596643,5.500858,136.889782,5.203962C137.18292,4.907065,137.582774,4.739966,138,4.74L248.47,4.74C249.190306,4.735777,249.82108,5.222256,250,5.92C248.116056,67.188442,198.888442,116.416056,137.62,118.3Z"
transform="translate(-193.219933,-61.519987)"
stroke="none"
strokeWidth="1"
/>
</G>
</G>
<G id="eKIDzSscbEO6">
<G
id="eKIDzSscbEO7_tr"
transform="translate(59.18501,193.18499) rotate(0)"
>
<Path
id="eKIDzSscbEO7"
d="M3.36,252.37C1.425962,252.086502,-0.005746,250.424697,0,248.47L0,138C-0.016073,136.94469,0.391927,135.927052,1.13257,135.175131C1.873212,134.42321,2.884568,133.999878,3.94,134L114.4,134C116.354697,133.994254,118.016502,135.425962,118.3,137.36C116.553688,200.113674,66.112599,250.585482,3.36,252.37Z"
transform="translate(-59.149771,-193.18499)"
stroke="none"
strokeWidth="1"
/>
</G>
</G>
<G id="eKIDzSscbEO8">
<G
id="eKIDzSscbEO9_tr"
transform="translate(59.149774,59.150009) rotate(360)"
>
<Path
id="eKIDzSscbEO9"
d="M118.3,114.94C118.016502,116.874038,116.354697,118.305746,114.4,118.3L3.94,118.3C2.884568,118.300122,1.873212,117.87679,1.13257,117.124869C0.391927,116.372948,-0.016073,115.35531,0,114.3L0,3.9C-0.005746,1.945303,1.425962,0.283498,3.36,0C66.08421,1.787676,116.512324,52.21579,118.3,114.94Z"
transform="translate(-59.149774,-59.150009)"
stroke="none"
strokeWidth="1"
/>
</G>
</G>
</svg>
<p class="message hide"></p>
</div>
</div>
<script>
var search = new URLSearchParams( window.location.search );
var colorSearchMap = {
color: '--logo-color',
size: '--logo-size',
'bg-color': '--bg-color',
};
Object.keys( colorSearchMap ).forEach( ( searchField ) => {
var searchVal = search.get( searchField );
if ( searchVal ) {
document.documentElement.style.setProperty(
colorSearchMap[ searchField ],
searchVal
);
}
} );
var message = search.get( 'message' );
if ( message ) {
var messageEl = document.querySelector( '.message' );
messageEl.textContent = decodeURIComponent( message );
messageEl.classList.remove( 'hide' );
}
</script>
</body>
</html>