mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-03 18:29:09 +00:00
83 lines
2.3 KiB
HTML
83 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!-- Copyright © SixtyFPS GmbH <info@sixtyfps.io> -->
|
|
<!-- SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial) -->
|
|
|
|
<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>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: radial-gradient(108.19% 165.77% at 1.67% -32.72%, #2C2F36 10%, #040708 96.35%);
|
|
color: white;
|
|
text-align: center;
|
|
max-width: 1100px;
|
|
margin: 0px auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
p:not(.links) {
|
|
text-align: left;
|
|
padding: 1ex 5ex;
|
|
}
|
|
|
|
h1 {
|
|
text-align: left;
|
|
padding: 0.5ex 1ex
|
|
}
|
|
|
|
a {
|
|
color: #DBFF00
|
|
}
|
|
|
|
a:not(:hover) {
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/* 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://slint-ui.com">Slint</a> Plotter example compiled to WebAssembly.</p>
|
|
<div id="spinner" style="position: relative;">
|
|
<div class="spinner">Loading...</div>
|
|
</div>
|
|
<canvas id="canvas"></canvas>
|
|
<p class="links">
|
|
<a href="https://github.com/slint-ui/slint/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>
|