mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-17 05:47:42 +00:00
75 lines
2.3 KiB
HTML
75 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> -->
|
|
<!-- SPDX-License-Identifier: MIT -->
|
|
|
|
<html>
|
|
<head>
|
|
<title>Slint Material 3 Gallery (Web Assembly version)</title>
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
|
/>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
|
|
canvas {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background: white;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: #040620;
|
|
}
|
|
canvas {
|
|
background: #040620;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px), (pointer: coarse) and (hover: none) {
|
|
.canvas-container {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
height: 100vh !important;
|
|
max-height: 100vh !important;
|
|
aspect-ratio: unset !important;
|
|
transform: none !important;
|
|
margin: 0 !important;
|
|
}
|
|
.canvas-container canvas {
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
}
|
|
.canvas-container img {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- canvas required by the Slint runtime -->
|
|
<div style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;">
|
|
<div class="canvas-container" style="position: fixed; top: 50%; left: 50%; width: 80vw; max-width: 1000px; aspect-ratio: 10 / 7; transform: translate(-50%, -50%); margin: 0; overflow: visible; z-index: 0; display: flex; align-items: center; justify-content: center;">
|
|
<canvas id="canvas" style="display: block; width: 100%; height: 100%; background: black;"></canvas>
|
|
<img src="./frame-tablet.webp" alt="Tablet Frame" style="position: absolute; top: -5%; left: -3.8%; width: 107.4%; height: 110%; pointer-events: none; z-index: 1;" />
|
|
</div>
|
|
</div>
|
|
<script type="module">
|
|
import init from "./pkg/gallery_lib.js";
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|