index.html (4523B)
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>domus</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 17 <link data-trunk rel="icon" href="assets/favicon.ico"> 18 19 20 <link data-trunk rel="copy-file" href="assets/sw.js" /> 21 <link data-trunk rel="copy-file" href="assets/manifest.json" /> 22 <link data-trunk rel="copy-file" href="assets/icon-1024.png" /> 23 <link data-trunk rel="copy-file" href="assets/icon-256.png" /> 24 <link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" /> 25 <link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" /> 26 27 28 <link rel="manifest" href="manifest.json"> 29 <link rel="apple-touch-icon" href="icon_ios_touch_192.png"> 30 <meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> 31 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040"> 32 33 <style> 34 html { 35 /* Remove touch delay: */ 36 touch-action: manipulation; 37 } 38 39 body { 40 /* Light mode background color for what is not covered by the egui canvas, 41 or where the egui canvas is translucent. */ 42 background: #909090; 43 } 44 45 @media (prefers-color-scheme: dark) { 46 body { 47 /* Dark mode background color for what is not covered by the egui canvas, 48 or where the egui canvas is translucent. */ 49 background: #404040; 50 } 51 } 52 53 /* Allow canvas to fill entire web page: */ 54 html, 55 body { 56 overflow: hidden; 57 margin: 0 !important; 58 padding: 0 !important; 59 height: 100%; 60 width: 100%; 61 } 62 63 /* Position canvas in center-top: */ 64 canvas { 65 margin-right: auto; 66 margin-left: auto; 67 display: block; 68 position: absolute; 69 top: 0%; 70 left: 50%; 71 transform: translate(-50%, 0%); 72 } 73 74 .centered { 75 margin-right: auto; 76 margin-left: auto; 77 display: block; 78 position: absolute; 79 top: 50%; 80 left: 50%; 81 transform: translate(-50%, -50%); 82 color: #f0f0f0; 83 font-size: 24px; 84 font-family: Ubuntu-Light, Helvetica, sans-serif; 85 text-align: center; 86 } 87 88 /* ---------------------------------------------- */ 89 /* Loading animation from https://loading.io/css/ */ 90 .lds-dual-ring { 91 display: inline-block; 92 width: 24px; 93 height: 24px; 94 } 95 96 .lds-dual-ring:after { 97 content: " "; 98 display: block; 99 width: 24px; 100 height: 24px; 101 margin: 0px; 102 border-radius: 50%; 103 border: 3px solid #fff; 104 border-color: #fff transparent #fff transparent; 105 animation: lds-dual-ring 1.2s linear infinite; 106 } 107 108 @keyframes lds-dual-ring { 109 0% { 110 transform: rotate(0deg); 111 } 112 113 100% { 114 transform: rotate(360deg); 115 } 116 } 117 118 </style> 119 </head> 120 121 <body> 122 <!-- The WASM code will resize the canvas dynamically --> 123 <!-- the id is hardcoded in main.rs . so, make sure both match. --> 124 <canvas id="the_canvas_id"></canvas> 125 126 <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). --> 127 <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files --> 128 <script> 129 // We disable caching during development so that we always view the latest version. 130 if ('serviceWorker' in navigator && window.location.hash !== "#dev") { 131 window.addEventListener('load', function () { 132 navigator.serviceWorker.register('sw.js'); 133 }); 134 } 135 </script> 136 </body> 137 138 </html> 139 140 <!-- Powered by egui: https://github.com/emilk/egui/ -->