overpastor

Back Back Up Advanced Editor

<!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>