splash screen and check minimal browser version

3 months ago · b6680d7cab
parent c956cfcb35
commit b6680d7cab
3 changed files with 63 additions and 2 deletions
--- a/ng-app/index-web.html
+++ b/ng-app/index-web.html
@ -57,9 +57,62 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NextGraph</title>
  </head>
-
+  <style>
+    .splashing {
+      height: 95vh;display: grid;
+    }
+    .error-no-wasm-hidden {
+      display:none;
+    }
+  </style>
+  
  <body>
-    <div id="app"></div>
+    <div id="splash" class="splashing">
+      <div style="margin: auto; display: grid;">
+        <svg
+          style="width:100px;height:100px;margin: 0 auto 20px ;"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 225 225"
+        >
+          <g>
+            <circle
+              r="106.98013"
+              cy="112.90476"
+              cx="109.88096"
+              style="fill:#ffffff;stroke:none;stroke-width:0.268375" />
+            <path
+              d="M 98.343352,190.26108 C 80.403778,187.53354 65.011938,179.57839 52.608228,166.62327 38.602093,151.99448 31.178059,133.41381 31.178059,112.98841 c 0,-10.21889 1.700058,-19.44396 5.221234,-28.332119 4.28678,-10.820699 10.037295,-19.39063 18.535095,-27.62263 4.72982,-4.58187 6.60687,-6.10643 11.28099,-9.16256 11.89869,-7.779841 24.173884,-11.879991 38.095802,-12.724761 19.80437,-1.2017 39.11165,5.11306 54.60284,17.858751 1.50718,1.24006 2.72951,2.35934 2.71628,2.48729 -0.0132,0.12795 -3.85821,3.63443 -8.54442,7.79217 -4.6862,4.157729 -10.04724,8.96276 -11.91342,10.677819 -1.86617,1.715071 -3.54094,3.11831 -3.7217,3.11831 -0.18075,0 -1.39985,-0.745188 -2.70911,-1.655969 -7.53011,-5.23834 -15.99428,-7.82188 -25.62597,-7.82188 -12.731628,0 -23.249192,4.3379 -32.143882,13.257541 -6.39594,6.413868 -10.70387,14.555268 -12.50018,23.623578 -0.69099,3.48832 -0.68968,13.53072 0.002,17.00893 3.70508,18.62577 18.31886,33.10194 36.642322,36.29729 4.16439,0.72621 11.98099,0.71223 15.98975,-0.0286 14.03187,-2.59311 25.86047,-11.36806 32.26533,-23.93578 0.77379,-1.51834 1.26018,-2.88461 1.08086,-3.03616 -0.17934,-0.15156 -6.87448,-1.1779 -14.87813,-2.28078 -9.7795,-1.34758 -14.92353,-2.21379 -15.68471,-2.64117 -1.52067,-0.85379 -2.83611,-2.88806 -2.83611,-4.3859 0,-1.1732 2.02687,-15.86876 2.49085,-18.05962 0.29676,-1.40127 2.42559,-3.4934 3.84317,-3.77691 0.62227,-0.12445 8.82712,0.85555 18.28065,2.18348 9.43343,1.32511 17.26269,2.29453 17.39833,2.15427 0.13566,-0.14026 1.11808,-6.54833 2.18313,-14.24014 1.10778,-8.000208 2.20407,-14.60184 2.56177,-15.426229 0.34392,-0.792599 1.11019,-1.849131 1.70287,-2.34782 2.06321,-1.736079 3.1433,-1.785011 12.20439,-0.55291 9.63637,1.310309 10.70873,1.56224 12.28077,2.88503 1.64359,1.382979 2.2732,2.810909 2.25906,5.123309 -0.007,1.10173 -0.92172,8.29645 -2.03332,15.98826 -1.11158,7.69182 -1.97159,14.04091 -1.91113,14.1091 0.0605,0.0682 7.16644,1.11143 15.79109,2.31832 11.10566,1.55407 16.00827,2.38757 16.80223,2.85657 1.53015,0.90389 2.48023,2.64785 2.45017,4.49756 -0.0462,2.84349 -2.41252,18.12279 -2.97521,19.21089 -0.66164,1.27949 -2.60244,2.54696 -3.92109,2.56074 -0.51973,0.005 -7.87449,-0.95937 -16.34391,-2.144 -8.46944,-1.18464 -15.47588,-2.077 -15.56986,-1.98301 -0.094,0.094 -1.18792,7.34163 -2.43097,16.10589 -1.44004,10.15311 -2.49792,16.43621 -2.91556,17.31631 -0.72531,1.52848 -2.76261,3.06291 -4.53817,3.41802 -0.95688,0.19138 -10.90014,-0.92798 -13.59859,-1.53084 -0.5471,-0.12223 -1.89146,0.67252 -4.50941,2.66588 -11.2627,8.57562 -24.34195,13.90917 -38.35741,15.64164 -4.40038,0.54395 -15.72658,0.43298 -19.853658,-0.19451 z"
+              style="fill:#4972a5;fill-opacity:1;stroke:#4972a5;stroke-width:0.377976;stroke-opacity:1" />
+          </g>
+        </svg>
+        <br/>
+        <div id="error-no-wasm" class="error-no-wasm-hidden" style="text-align: center;">
+          Your browser is too old and does not support NextGraph. <br/>Please upgrade to a newer version of this browser,<br/> try with another browser, <br/>or <a href="https://nextgraph.org/install">install our native app</a>.
+        </div>
+        <noscript style="text-align: center;">
+          NextGraph cannot load as Javascript is deactivated
+        </noscript>
+      </div>
+    </div>
+    <div id="app">
+    </div>
+    <script>
+      const supported = (() => {
+      try {
+          if (typeof WebAssembly === "object"
+              && typeof WebAssembly.instantiate === "function") {
+              const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
+              if (module instanceof WebAssembly.Module)
+                  return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
+          }
+      } catch (e) {
+      }
+      return false;
+      })();
+      if (!supported || RegExp().hasIndices === undefined) {
+        window.document.getElementById("error-no-wasm").className="";
+      }
+    </script>
    <script type="module" src="/src/main-web.ts"></script>
  </body>
 </html>
--- a/ng-app/src/App.svelte
+++ b/ng-app/src/App.svelte
@ -74,6 +74,7 @@
  // };

  onMount(async () => {
+    //window.document.getElementById("splash").className="splash-loaded";
    try {
      await disconnections_subscribe();
      await select_default_lang();
--- a/ng-app/src/styles.css
+++ b/ng-app/src/styles.css
@ -19,6 +19,13 @@ td.hljs {
    font-family: monospace;
    background-color: rgba(73, 114, 165, 0.1);
 }
+/* .splash-loaded {
+    display: none;
+} */
+
+.splashing {
+    display: none;
+}

 .menu-bg-modal + div {
    padding: 0 !important;