kubio-iframe-loader.html — Kubio AI Page Builder 2.8.2

kubio / static / kubio-iframe-loader.html

kubio / static Last commit date

admin-assets 3 months ago admin-pages 1 year ago ai-assets 2 years ago default-assets 4 years ago fancybox 1 year ago icons 1 year ago kubio-iframe-loader.html 7 months ago kubio-logo.svg 4 years ago maintain-preview-url.js 2 years ago questioning.jpg 2 years ago

kubio-iframe-loader.html

395 lines

1	<!doctype html>
2	<html lang="en-US">
3	<head>
4	<title>Kubio Loader</title>
5	<style>
6	:root {
7	--logo-size: 120px;
8	--logo-color: #a4afb7;
9	--bg-color: #f1f3f5;
10	}
11	html,
12	body {
13	background: var( --bg-color );
14	}
15
16	html,
17	body,
18	body * {
19	margin: 0;
20	padding: 0;
21	box-sizing: border-box;
22	}
23
24	.content {
25	display: flex;
26	flex-direction: column;
27	align-items: center;
28	justify-items: center;
29	justify-content: center;
30	position: fixed;
31	left: 0;
32	top: 0;
33	width: 100vw;
34	height: 100vh;
35	}
36
37	.container {
38	text-align: center;
39	display: flex;
40	flex-direction: column;
41	align-items: center;
42	color: inherit;
43	}
44	.message {
45	font-size: 1.2rem;
46	color: var( --logo-color );
47	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
48	Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
49	sans-serif;
50	margin: 1em;
51	}
52
53	.hide {
54	display: none;
55	}
56
57	#eKIDzSscbEO1 {
58	overflow: visible;
59	width: var( --logo-size ) !important;
60	height: var( --logo-size ) !important;
61	max-width: var( --logo-size ) !important;
62	fill: var( --logo-color ) !important;
63	display: block;
64	}
65	#eKIDzSscbEO3_tr {
66	animation: eKIDzSscbEO3_tr__tr 2000ms linear infinite normal
67	forwards;
68	}
69	@keyframes eKIDzSscbEO3_tr__tr {
70	0% {
71	transform: translate( 193.209984px, 190.850067px )
72	rotate( 0deg );
73	}
74	12% {
75	transform: translate( 193.209984px, 190.850067px )
76	rotate( 0deg );
77	animation-timing-function: cubic-bezier(
78	0.39,
79	0.575,
80	0.565,
81	1
82	);
83	}
84	20% {
85	transform: translate( 193.209984px, 190.850067px )
86	rotate( 90deg );
87	animation-timing-function: cubic-bezier(
88	0.39,
89	0.575,
90	0.565,
91	1
92	);
93	}
94	52% {
95	transform: translate( 193.209984px, 190.850067px )
96	rotate( 90deg );
97	animation-timing-function: cubic-bezier(
98	0.39,
99	0.575,
100	0.565,
101	1
102	);
103	}
104	60% {
105	transform: translate( 193.209984px, 190.850067px )
106	rotate( 0deg );
107	animation-timing-function: cubic-bezier(
108	0.39,
109	0.575,
110	0.565,
111	1
112	);
113	}
114	68% {
115	transform: translate( 193.209984px, 190.850067px )
116	rotate( 0deg );
117	}
118	100% {
119	transform: translate( 193.209984px, 190.850067px )
120	rotate( 0deg );
121	}
122	}
123
124	#eKIDzSscbEO5_tr {
125	animation: eKIDzSscbEO5_tr__tr 2000ms linear infinite normal
126	forwards;
127	}
128
129	@keyframes eKIDzSscbEO5_tr__tr {
130	0% {
131	transform: translate( 193.219933px, 61.519987px )
132	rotate( 360deg );
133	}
134	20% {
135	transform: translate( 193.219933px, 61.519987px )
136	rotate( 360deg );
137	animation-timing-function: cubic-bezier(
138	0.39,
139	0.575,
140	0.565,
141	1
142	);
143	}
144	28% {
145	transform: translate( 193.219933px, 61.519987px )
146	rotate( 270deg );
147	animation-timing-function: cubic-bezier(
148	0.39,
149	0.575,
150	0.565,
151	1
152	);
153	}
154	84% {
155	transform: translate( 193.219933px, 61.519987px )
156	rotate( 270deg );
157	animation-timing-function: cubic-bezier(
158	0.39,
159	0.575,
160	0.565,
161	1
162	);
163	}
164	92% {
165	transform: translate( 193.219933px, 61.519987px )
166	rotate( 360deg );
167	animation-timing-function: cubic-bezier(
168	0.39,
169	0.575,
170	0.565,
171	1
172	);
173	}
174	100% {
175	transform: translate( 193.219933px, 61.519987px )
176	rotate( 360deg );
177	}
178	}
179
180	#eKIDzSscbEO7_tr {
181	animation: eKIDzSscbEO7_tr__tr 2000ms linear infinite normal
182	forwards;
183	}
184
185	@keyframes eKIDzSscbEO7_tr__tr {
186	0% {
187	transform: translate( 59.18501px, 193.18499px )
188	rotate( 0deg );
189	}
190	28% {
191	transform: translate( 59.18501px, 193.18499px )
192	rotate( 0deg );
193	animation-timing-function: cubic-bezier(
194	0.39,
195	0.575,
196	0.565,
197	1
198	);
199	}
200	36% {
201	transform: translate( 59.18501px, 193.18499px )
202	rotate( 90deg );
203	animation-timing-function: cubic-bezier(
204	0.39,
205	0.575,
206	0.565,
207	1
208	);
209	}
210	68% {
211	transform: translate( 59.18501px, 193.18499px )
212	rotate( 90deg );
213	animation-timing-function: cubic-bezier(
214	0.39,
215	0.575,
216	0.565,
217	1
218	);
219	}
220	76% {
221	transform: translate( 59.18501px, 193.18499px )
222	rotate( 0deg );
223	animation-timing-function: cubic-bezier(
224	0.39,
225	0.575,
226	0.565,
227	1
228	);
229	}
230	84% {
231	transform: translate( 59.18501px, 193.18499px )
232	rotate( 0deg );
233	}
234	100% {
235	transform: translate( 59.18501px, 193.18499px )
236	rotate( 0deg );
237	}
238	}
239
240	#eKIDzSscbEO9_tr {
241	animation: eKIDzSscbEO9_tr__tr 2000ms linear infinite normal
242	forwards;
243	}
244
245	@keyframes eKIDzSscbEO9_tr__tr {
246	0% {
247	transform: translate( 59.149774px, 59.150009px )
248	rotate( 360deg );
249	animation-timing-function: cubic-bezier(
250	0.39,
251	0.575,
252	0.565,
253	1
254	);
255	}
256	8% {
257	transform: translate( 59.149774px, 59.150009px )
258	rotate( 270deg );
259	animation-timing-function: cubic-bezier(
260	0.39,
261	0.575,
262	0.565,
263	1
264	);
265	}
266	36% {
267	transform: translate( 59.149774px, 59.150009px )
268	rotate( 270deg );
269	animation-timing-function: cubic-bezier(
270	0.39,
271	0.575,
272	0.565,
273	1
274	);
275	}
276	44% {
277	transform: translate( 59.149774px, 59.150009px )
278	rotate( 360deg );
279	animation-timing-function: cubic-bezier(
280	0.39,
281	0.575,
282	0.565,
283	1
284	);
285	}
286	52% {
287	transform: translate( 59.149774px, 59.150009px )
288	rotate( 360deg );
289	}
290	100% {
291	transform: translate( 59.149774px, 59.150009px )
292	rotate( 360deg );
293	}
294	}
295	</style>
296	</head>
297
298	<body>
299	<div class="content">
300	<div class="container">
301	<svg
302	id="eKIDzSscbEO1"
303	viewBox="0 0 250 252.37"
304	shapeRendering="geometricPrecision"
305	textRendering="geometricPrecision"
306	>
307	<G id="eKIDzSscbEO2">
308	<G
309	id="eKIDzSscbEO3_tr"
310	transform="translate(193.209984,190.850067) rotate(0)"
311	>
312	<Path
313	id="eKIDzSscbEO3"
314	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"
315	transform="translate(-193.209984,-190.850067)"
316	stroke="none"
317	strokeWidth="1"
318	/>
319	</G>
320	</G>
321	<G id="eKIDzSscbEO4">
322	<G
323	id="eKIDzSscbEO5_tr"
324	transform="translate(193.219933,61.519987) rotate(360)"
325	>
326	<Path
327	id="eKIDzSscbEO5"
328	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"
329	transform="translate(-193.219933,-61.519987)"
330	stroke="none"
331	strokeWidth="1"
332	/>
333	</G>
334	</G>
335	<G id="eKIDzSscbEO6">
336	<G
337	id="eKIDzSscbEO7_tr"
338	transform="translate(59.18501,193.18499) rotate(0)"
339	>
340	<Path
341	id="eKIDzSscbEO7"
342	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"
343	transform="translate(-59.149771,-193.18499)"
344	stroke="none"
345	strokeWidth="1"
346	/>
347	</G>
348	</G>
349	<G id="eKIDzSscbEO8">
350	<G
351	id="eKIDzSscbEO9_tr"
352	transform="translate(59.149774,59.150009) rotate(360)"
353	>
354	<Path
355	id="eKIDzSscbEO9"
356	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"
357	transform="translate(-59.149774,-59.150009)"
358	stroke="none"
359	strokeWidth="1"
360	/>
361	</G>
362	</G>
363	</svg>
364	<p class="message hide"></p>
365	</div>
366	</div>
367	<script>
368	var search = new URLSearchParams( window.location.search );
369	var colorSearchMap = {
370	color: '--logo-color',
371	size: '--logo-size',
372	'bg-color': '--bg-color',
373	};
374
375	Object.keys( colorSearchMap ).forEach( ( searchField ) => {
376	var searchVal = search.get( searchField );
377	if ( searchVal ) {
378	document.documentElement.style.setProperty(
379	colorSearchMap[ searchField ],
380	searchVal
381	);
382	}
383	} );
384
385	var message = search.get( 'message' );
386
387	if ( message ) {
388	var messageEl = document.querySelector( '.message' );
389	messageEl.textContent = decodeURIComponent( message );
390	messageEl.classList.remove( 'hide' );
391	}
392	</script>
393	</body>
394	</html>
395