187 lines
5.7 KiB
HTML
187 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="%PUBLIC_URL%/logo.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<meta name="description" content="Web site created using create-react-app" />
|
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
|
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<title>Robossembler</title>
|
|
</head>
|
|
|
|
<body style="overflow: auto;">
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
<div style="width: 100%; height: 100%" id="root"></div>
|
|
</body>
|
|
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
|
|
</style>
|
|
<style>
|
|
[contenteditable]:focus {
|
|
outline: 0px solid transparent;
|
|
}
|
|
/* Absolute Center Spinner */
|
|
.loading {
|
|
}
|
|
|
|
/* Transparent Overlay */
|
|
.loading:before {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
/* :not(:required) hides these rules from IE9 and below */
|
|
.loading:not(:required) {
|
|
/* hide "loading..." text */
|
|
font: 0/0 a;
|
|
color: transparent;
|
|
text-shadow: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.loading:not(:required):after {
|
|
margin-top: 14px;
|
|
content: "";
|
|
display: block;
|
|
font-size: 8px;
|
|
width: 8px;
|
|
height: 8px;
|
|
-webkit-animation: spinner 1500ms infinite linear;
|
|
-moz-animation: spinner 1500ms infinite linear;
|
|
-ms-animation: spinner 1500ms infinite linear;
|
|
-o-animation: spinner 1500ms infinite linear;
|
|
animation: spinner 1500ms infinite linear;
|
|
border-radius: 0.5em;
|
|
-webkit-box-shadow: white 1.5em 0 0 0, white 1.1em 1.1em 0 0, white 0 1.5em 0 0, white -1.1em 1.1em 0 0,
|
|
rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, white 0 -1.5em 0 0,
|
|
white 1.1em -1.1em 0 0;
|
|
box-shadow: white 1.5em 0 0 0, white 1.1em 1.1em 0 0, white 0 1.5em 0 0, white -1.1em 1.1em 0 0,
|
|
white -1.5em 0 0 0, white -1.1em -1.1em 0 0, white 0 -1.5em 0 0, white 1.1em -1.1em 0 0;
|
|
}
|
|
|
|
/* Animation */
|
|
|
|
@-webkit-keyframes spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@-moz-keyframes spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@-o-keyframes spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.dotted {
|
|
background-image: -webkit-repeating-radial-gradient(
|
|
center center,
|
|
rgba(147, 147, 147, 30%),
|
|
rgba(147, 147, 147, 30%) 2px,
|
|
transparent 2px,
|
|
transparent 100%
|
|
);
|
|
|
|
background-image: -moz-repeating-radial-gradient(
|
|
center center,
|
|
rgba(147, 147, 147, 30%),
|
|
rgba(147, 147, 147, 30%) 2px,
|
|
transparent 2px,
|
|
transparent 100%
|
|
);
|
|
background-image: -ms-repeating-radial-gradient(
|
|
center center,
|
|
rgba(147, 147, 147, 30%),
|
|
rgba(147, 147, 147, 30%) 2px,
|
|
transparent 2px,
|
|
transparent 100%
|
|
);
|
|
background-image: repeating-radial-gradient(
|
|
center center,
|
|
rgba(147, 147, 147, 30%),
|
|
rgba(147, 147, 147, 30%) 2px,
|
|
transparent 2px,
|
|
transparent 100%
|
|
);
|
|
-webkit-background-size: 20px 20px;
|
|
-moz-background-size: 20px 20px;
|
|
background-size: 20px 20px;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #d6dee1;
|
|
border-radius: 20px;
|
|
}
|
|
</style>
|
|
</html>
|