examples/slide_puzzle/index.html

<!DOCTYPE html>

<!-- Copyright © SixtyFPS GmbH <info@slint-ui.com> -->
<!-- SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial -->

<html>

<head>
  <meta charset="UTF-8">
  <title>Slint Slide Puzzle Demo (Web Assembly version)</title>
</head>
<link rel="stylesheet" href="https://slint-ui.com/css/demos-v1.css">
<style>
  body {
    padding: 0px;
    margin: 0px;
    max-width: none;
  }

  #container {
    display: grid;
    justify-items: stretch;
    align-content: stretch;
    align-items: stretch;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 0px;
    margin: 0px;
    grid-template-columns: auto;
    grid-template-rows: max-content auto max-content;
  }

</style>

<body>
  <div id="spinner" style="position: absolute; top: 50%; width: 100%">
    <div class="spinner">Loading...</div>
  </div>
  <div id="container">
    <p>This is the <a href="https://slint-ui.com">Slint</a> Slide Puzzle compiled to WebAssembly. Note that the wasm
      build is done for demonstration purposes. Native applications are the real target of the toolkit.
    </p>
    <canvas id="canvas"></canvas>
    <p class="links">
      <a href="https://github.com/slint-ui/slint/blob/master/examples/slide_puzzle/">
        View Source Code on GitHub</a> -
      <a href="https://slint-ui.com/editor?load_demo=examples/slide_puzzle/slide_puzzle.slint">
        Open in SlintPad
      </a>
    </p>
  </div>
  <script type="module">
    import init from './pkg/slide_puzzle.js';
    init().finally(() => {
      document.getElementById("spinner").remove();
    });
  </script>
</body>

</html>