|
@@ -1,12 +1,56 @@
|
|
|
-<!DOCTYPE html>
|
|
|
+<!doctype html>
|
|
|
<html lang="">
|
|
|
<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <link rel="icon" href="/favicon.ico">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
- <title>Angel Toke</title>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <link rel="icon" href="/favicon.ico" />
|
|
|
+ <meta
|
|
|
+ name="viewport"
|
|
|
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
|
+ />
|
|
|
+ <title>Angel Token</title>
|
|
|
+ <style type="text/css">
|
|
|
+ /* HTML: <div class="loader"></div> */
|
|
|
+ #Loading {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateY(-50%) translateX(-50%);
|
|
|
+ white-space: nowrap;
|
|
|
+ width: fit-content;
|
|
|
+ font-size: 40px;
|
|
|
+ font-family: system-ui, sans-serif;
|
|
|
+ font-weight: bold;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: #0000;
|
|
|
+ -webkit-text-stroke: 1px #000;
|
|
|
+ background:
|
|
|
+ radial-gradient(0.71em at 50% 1em, #000 99%, #0000 101%)
|
|
|
+ calc(50% - 1em) 1em/2em 200% repeat-x text,
|
|
|
+ radial-gradient(0.71em at 50% -0.5em, #0000 99%, #000 101%) 50%
|
|
|
+ 1.5em/2em 200% repeat-x text;
|
|
|
+ animation:
|
|
|
+ l10-0 0.8s linear infinite alternate,
|
|
|
+ l10-1 4s linear infinite;
|
|
|
+
|
|
|
+ text-shadow: 1px 1px 2px #40A4FB;
|
|
|
+ }
|
|
|
+ #Loading:before {
|
|
|
+ content: "Angel Token";
|
|
|
+ }
|
|
|
+ @keyframes l10-0 {
|
|
|
+ to {
|
|
|
+ background-position-x: 50%, calc(50% + 1em);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes l10-1 {
|
|
|
+ to {
|
|
|
+ background-position-y: -0.5em, 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
+ <div id="Loading"></div>
|
|
|
<div id="app"></div>
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
|
</body>
|