titaniumtown/YTBN-Graphing-Software
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements

Browse Source
This commit is contained in:
Simon Gardling
2022-03-01 00:36:13 -05:00
parent 2cdf5ccd31
commit 5c38fe514f
6 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
www/index.html
View File

@@ -7,17 +7,29 @@
<meta charset="utf-8">
<title>Integral Demonstration</title>
<link rel="stylesheet" href="style.css">
</head>
</head>
<body>
<noscript>Please enable Javascript, this page uses both WebAssembly and Javascript to run.</noscript>
<canvas id="canvas"></canvas>
<div id="panic">
<h1>application encountered a panic!</h1>
<div>the application will no longer respond to user inputs</div>
<div>check the console for more information</div>
</div>
<div class="centered" id="loading">
<p style="font-size:16px">
Loading…
</p>
<div class="lds-dual-ring"></div>
</div>
<script type="module">
import init, { start } from '../pkg/integral_site.js';
async function run() {
await init();
document.getElementById("loading").remove();
start("canvas");
}
run();

63
www/style.css
View File

@@ -48,4 +48,67 @@ canvas {
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
}
/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body[data-panicked = true] {
background-color: #ce2828;
#panic {
display: block;
}
}
#panic {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ce2828;
color: #000;
font-weight: bold;
text-align: center;
padding: 1em 2em;
border-radius: 2em;
pointer-events: none;
h1 {
margin: 0;
}
z-index: 1000000;
}