cubicdone/packages/app/index.html
gregortokarev 346f02129c merge
2024-07-29 11:07:30 +03:00

114 lines
2.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/ico" sizes="32x32" href="/favicon.ico" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cubicdone</title>
<style>
.loader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.loader__content {
width: fit-content;
font-weight: bold;
font-family: monospace;
font-size: 30px;
background: radial-gradient(circle closest-side, #000 94%, #0000)
right/calc(200% - 1em) 100%;
animation: l24 1s infinite alternate linear;
}
.loader__content::before {
content: "Loading...";
line-height: 1em;
color: #0000;
background: inherit;
background-image: radial-gradient(circle closest-side, #fff 94%, #000);
-webkit-background-clip: text;
background-clip: text;
}
@keyframes l24 {
100% {
background-position: left;
}
}
</style>
</head>
<body class="overflow-y-hidden">
<div id="app"></div>
<div class="loader">
<div class="loader__content"></div>
</div>
<script>
const loader = document.querySelector(".loader");
loader.style.opacity = 0;
setTimeout(() => {
loader.style.opacity = 1;
}, 100);
window.addEventListener("load", () => {
loader.remove();
});
</script>
<script type="module" src="/src/main.ts"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (m, e, t, r, i, k, a) {
m[i] =
m[i] ||
function () {
(m[i].a = m[i].a || []).push(arguments);
};
m[i].l = 1 * new Date();
for (var j = 0; j < document.scripts.length; j++) {
if (document.scripts[j].src === r) {
return;
}
}
(k = e.createElement(t)),
(a = e.getElementsByTagName(t)[0]),
(k.async = 1),
(k.src = r),
a.parentNode.insertBefore(k, a);
})(
window,
document,
"script",
"https://mc.yandex.ru/metrika/tag.js",
"ym",
);
ym(97930340, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true,
});
</script>
<noscript
><div>
<img
src="https://mc.yandex.ru/watch/97930340"
style="position: absolute; left: -9999px"
alt=""
/></div
></noscript>
<!-- /Yandex.Metrika counter -->
</body>
</html>