slint/examples/plotter/index.html
Olivier Goffart 013eee351c Wasm demos: add touch-action: none to all canvas
So that the Slider, Flickabke and such works on android/chrome
2021-08-20 09:33:49 +02:00

46 lines
1.5 KiB
HTML

<html>
<!--
This is a static html file used to display the wasm build.
In order to generate the build
- uncomment the #wasm# lines in Cargo.toml
- Run `wasm-pack build --release --target web` in this directory.
-->
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<style>
/* beautify ignore:start */
.spinner:before {
content: ''; box-sizing: border-box; position: absolute;
top: 50%; left: 50%; width: 100px; height: 100px;
margin-top: -10px; margin-left: -10px;
border-radius: 50%; border: 2px solid transparent;
border-top-color: #07d; border-bottom-color: #07d;
animation: spinner 1s ease infinite;
}
@keyframes spinner { to { transform: rotate(360deg); } }
canvas { touch-action: none; }
/* beautify ignore:end */
</style>
</head>
<body>
<p>This is the <a href="https://sixtyfps.io">SixtyFPS</a> Plotter example compiled to WebAssembly.</p>
<div id="spinner" style="position: relative;">
<div class="spinner">Loading...</div>
</div>
<canvas id="canvas"></canvas>
<p>
<a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/plotter/main.rs">
View Source Code on GitHub</a>
</p>
<script type="module">
import init from "./pkg/plotter.js";
init().finally(() => {
document.getElementById("spinner").remove();
});
</script>
</body>
</html>