changelog shortlog graph tags branches changeset files file revisions raw help

Mercurial > core / annotate rust/ui/alik/index.html

changeset 698: 96958d3eb5b0
parent: 7963217e1d39
author: Richard Westhaver <ellis@rwest.io>
date: Fri, 04 Oct 2024 22:04:59 -0400
permissions: -rw-r--r--
description: fixes
399
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
1
 <!DOCTYPE html>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
2
 <html>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
3
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
4
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
5
 <!-- Disable zooming: -->
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
6
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
7
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
8
 <head>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
9
     <!-- change this to your project name -->
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
10
     <title>alik</title>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
11
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
12
     <!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
13
     <link data-trunk rel="rust" data-wasm-opt="2" />
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
14
     <!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
15
     <base data-trunk-public-url />
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
16
     <link data-trunk rel="copy-file" href="sw.js" />
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
17
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
18
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040">
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
19
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
20
     <style>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
21
         html {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
22
             /* Remove touch delay: */
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
23
             touch-action: manipulation;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
24
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
25
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
26
         body {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
27
             /* Light mode background color for what is not covered by the egui canvas,
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
28
             or where the egui canvas is translucent. */
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
29
             background: #909090;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
30
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
31
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
32
         @media (prefers-color-scheme: dark) {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
33
             body {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
34
                 /* Dark mode background color for what is not covered by the egui canvas,
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
35
                 or where the egui canvas is translucent. */
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
36
                 background: #404040;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
37
             }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
38
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
39
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
40
         /* Allow canvas to fill entire web page: */
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
41
         html,
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
42
         body {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
43
             overflow: hidden;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
44
             margin: 0 !important;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
45
             padding: 0 !important;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
46
             height: 100%;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
47
             width: 100%;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
48
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
49
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
50
         /* Position canvas in center-top: */
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
51
         canvas {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
52
             margin-right: auto;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
53
             margin-left: auto;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
54
             display: block;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
55
             position: absolute;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
56
             top: 0%;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
57
             left: 50%;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
58
             transform: translate(-50%, 0%);
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
59
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
60
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
61
         .centered {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
62
             margin-right: auto;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
63
             margin-left: auto;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
64
             display: block;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
65
             position: absolute;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
66
             top: 50%;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
67
             left: 50%;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
68
             transform: translate(-50%, -50%);
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
69
             color: #f0f0f0;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
70
             font-size: 24px;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
71
             font-family: Ubuntu-Light, Helvetica, sans-serif;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
72
             text-align: center;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
73
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
74
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
75
         /* ---------------------------------------------- */
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
76
         /* Loading animation from https://loading.io/css/ */
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
77
         .lds-dual-ring {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
78
             display: inline-block;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
79
             width: 24px;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
80
             height: 24px;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
81
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
82
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
83
         .lds-dual-ring:after {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
84
             content: " ";
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
85
             display: block;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
86
             width: 24px;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
87
             height: 24px;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
88
             margin: 0px;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
89
             border-radius: 50%;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
90
             border: 3px solid #fff;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
91
             border-color: #fff transparent #fff transparent;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
92
             animation: lds-dual-ring 1.2s linear infinite;
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
93
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
94
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
95
         @keyframes lds-dual-ring {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
96
             0% {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
97
                 transform: rotate(0deg);
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
98
             }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
99
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
100
             100% {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
101
                 transform: rotate(360deg);
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
102
             }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
103
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
104
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
105
     </style>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
106
 </head>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
107
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
108
 <body>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
109
     <!-- The WASM code will resize the canvas dynamically -->
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
110
     <!-- the id is hardcoded in main.rs . so, make sure both match. -->
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
111
     <canvas id="app_canvas"></canvas>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
112
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
113
     <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
114
     <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files  -->
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
115
     <script>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
116
         // We disable caching during development so that we always view the latest version.
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
117
         if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
118
             window.addEventListener('load', function () {
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
119
                 navigator.serviceWorker.register('sw.js');
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
120
             });
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
121
         }
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
122
     </script>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
123
 </body>
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
124
 
7963217e1d39 init alik ui
Richard Westhaver <ellis@rwest.io>
parents:
diff changeset
125
 </html>