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