/ index.html
index.html
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>Crops š„</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" data-target-path="assets"/> 23 <link data-trunk rel="copy-file" href="assets/icon-256.png" data-target-path="assets"/> 24 <link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" data-target-path="assets"/> 25 <link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" data-target-path="assets"/> 26 27 28 <link rel="manifest" href="manifest.json"> 29 <link rel="apple-touch-icon" href="assets/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 /* Make canvas fill entire document: */ 64 canvas { 65 margin-right: auto; 66 margin-left: auto; 67 display: block; 68 position: absolute; 69 top: 0; 70 left: 0; 71 width: 100%; 72 height: 100%; 73 } 74 75 .centered { 76 margin-right: auto; 77 margin-left: auto; 78 display: block; 79 position: absolute; 80 top: 50%; 81 left: 50%; 82 transform: translate(-50%, -50%); 83 color: #f0f0f0; 84 font-size: 24px; 85 font-family: Ubuntu-Light, Helvetica, sans-serif; 86 text-align: center; 87 } 88 89 /* ---------------------------------------------- */ 90 /* Loading animation from https://loading.io/css/ */ 91 .lds-dual-ring { 92 display: inline-block; 93 width: 24px; 94 height: 24px; 95 } 96 97 .lds-dual-ring:after { 98 content: " "; 99 display: block; 100 width: 24px; 101 height: 24px; 102 margin: 0px; 103 border-radius: 50%; 104 border: 3px solid #fff; 105 border-color: #fff transparent #fff transparent; 106 animation: lds-dual-ring 1.2s linear infinite; 107 } 108 109 @keyframes lds-dual-ring { 110 0% { 111 transform: rotate(0deg); 112 } 113 114 100% { 115 transform: rotate(360deg); 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 <!-- the loading spinner will be removed in main.rs --> 127 <div class="centered" id="loading_text"> 128 <noscript>You need javascript to use this website</noscript> 129 <p style="font-size:16px"> 130 Loadingā¦ 131 </p> 132 <div class="lds-dual-ring"></div> 133 </div> 134 135 <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). --> 136 <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files --> 137 <script> 138 // We disable caching during development so that we always view the latest version. 139 if ('serviceWorker' in navigator && window.location.hash !== "#dev") { 140 window.addEventListener('load', function () { 141 navigator.serviceWorker.register('sw.js'); 142 }); 143 } 144 </script> 145 </body> 146 147 </html> 148 149 <!-- Powered by egui: https://github.com/emilk/egui/ -->