ornithe-installer-rs/index.html at main · OrnitheMC/ornithe-installer-rs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Disable zooming: -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>Ornithe Installer</title>
    <script type="module">
      import init, * as bindings from "./public/ornithe-installer-rs.js";
      const wasm = await init({
        module_or_path: "./ornithe-installer-rs_bg.wasm",
      });

      window.wasmBindings = bindings;
    </script>

    <link rel="icon" href="res/icon.png" />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white"
    />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="#404040"
    />

    <style>
      html {
        /* Remove touch delay: */
        touch-action: manipulation;
      }

      body {
        /* Light mode background color for what is not covered by the egui canvas,
            or where the egui canvas is translucent. */
        background: #909090;
      }

      @media (prefers-color-scheme: dark) {
        body {
          /* Dark mode background color for what is not covered by the egui canvas,
                or where the egui canvas is translucent. */
          background: #404040;
        }
      }

      /* Allow canvas to fill entire web page: */
      html,
      body {
        margin: 0 !important;
        padding: 0 !important;
        height: 100%;
        width: 100%;
      }

      /* Make canvas fill entire document: */
      canvas {
        margin-right: auto;
        margin-left: auto;
        display: block;
        position: absolute;
        width: calc(min(630px, 100%));
        height: calc(min(490px, 100%));
      }

      .centered {
        margin-right: auto;
        margin-left: auto;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #f0f0f0;
        font-size: 24px;
        font-family: Ubuntu-Light, Helvetica, sans-serif;
        text-align: center;
        width: calc(min(100%, 25em));
      }

      /* ---------------------------------------------- */
      /* 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);
        }
      }
    </style>
  </head>

  <body>
    <!-- The WASM code will resize the canvas dynamically -->
    <!-- the id is hardcoded in gui.rs. so, make sure both match. -->
    <canvas class="centered" id="main_canvas"></canvas>

    <!-- the loading spinner will be removed in gui.rs -->
    <!-- make sure the ids of these elements are kept, they are referenced in rust (both gui.rs and cli.rs)! -->
    <div class="centered">
      <div id="loading_text">
        <noscript
          >You need javascript to use this page. Alternatively, you may use the
          downloadable version of this installer.</noscript
        >
        <p style="font-size: 16px" id="loading_status">Loading…</p>
        <div class="lds-dual-ring"></div>
      </div>
    </div>
  </body>
</html>