changelog shortlog graph tags branches changeset files revisions annotate raw help

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