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 |