index.html (3060B)
1 <!DOCTYPE html> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 5 <head> 6 <!-- change this to your project name --> 7 <title>Poetry Magnets Online</title> 8 <link data-trunk rel="rust" data-wasm-opt="2" /> 9 <base data-trunk-public-url /> 10 11 <link data-trunk rel="copy-file" href="assets/sw.js"/> 12 <link data-trunk rel="copy-file" href="assets/manifest.json"/> 13 14 <link rel="manifest" href="manifest.json"> 15 <meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> 16 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040"> 17 18 <style> 19 html { 20 touch-action: manipulation; 21 } 22 body { 23 background: #909090; 24 } 25 @media (prefers-color-scheme: dark) { 26 body { 27 background: #404040; 28 } 29 } 30 html, 31 body { 32 overflow: hidden; 33 margin: 0 !important; 34 padding: 0 !important; 35 height: 100%; 36 width: 100%; 37 } 38 canvas { 39 margin-right: auto; 40 margin-left: auto; 41 display: block; 42 position: absolute; 43 top: 0; 44 left: 0; 45 width: 100%; 46 height: 100%; 47 } 48 .centered { 49 margin-right: auto; 50 margin-left: auto; 51 display: block; 52 position: absolute; 53 top: 50%; 54 left: 50%; 55 transform: translate(-50%, -50%); 56 color: #f0f0f0; 57 font-size: 24px; 58 font-family: Ubuntu-Light, Helvetica, sans-serif; 59 text-align: center; 60 } 61 .lds-dual-ring { 62 display: inline-block; 63 width: 24px; 64 height: 24px; 65 } 66 .lds-dual-ring:after { 67 content: " "; 68 display: block; 69 width: 24px; 70 height: 24px; 71 margin: 0px; 72 border-radius: 50%; 73 border: 3px solid #fff; 74 border-color: #fff transparent #fff transparent; 75 animation: lds-dual-ring 1.2s linear infinite; 76 } 77 @keyframes lds-dual-ring { 78 0% { 79 transform: rotate(0deg); 80 } 81 100% { 82 transform: rotate(360deg); 83 } 84 } 85 </style> 86 </head> 87 88 <body> 89 <canvas id="poetry-magnets-online-canvas"></canvas> 90 91 <div class="centered" id="loading_text"> 92 <noscript>You need javascript to use this website</noscript> 93 <p style="font-size:16px"> 94 Loading… 95 </p> 96 <div class="lds-dual-ring"></div> 97 </div> 98 99 <script> 100 if ('serviceWorker' in navigator && window.location.hash !== "#dev") { 101 window.addEventListener('load', function () { 102 navigator.serviceWorker.register('sw.js'); 103 }); 104 } 105 </script> 106 </body> 107 108 </html>