add modified code

eggp · Nov 14, 2023 · b280858 · b280858
1 parent 0ee8388
commit b280858
Showing 1 changed file with 43 additions and 32 deletions.
diff --git a/web/index.html b/web/index.html
@@ -39,21 +39,43 @@
 
 
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
-
-
-  <style id="splash-screen-style">
-    html {
-      height: 100%
+
+  <script id="splash-screen-script">
+    function removeSplashFromWeb() {
+      const splashElement = document.getElementById("splash");
+      splashElement.classList.add("remove");
+      setTimeout(function () {
+        splashElement.remove();
+        document.getElementById("splash-screen-script")?.remove();
+      }, 2000/* animation time + wait rendering and others(500ms) */);
+    }
+  </script>
+</head>
+<body>
+  <div id="splash">
+    <style>
+
+    #splash {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        z-index: 999999;
+        opacity: 1;
+        /* animation type and duration */
+        transition: opacity 1.5s;
+        background-color: #e1f5fe;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
     }
 
-    body {
-      margin: 0;
-      min-height: 100%;
-      background-color: #e1f5fe;
-          background-size: 100% 100%;
+    #splash.remove {
+      /* enable click trought when run animation */
+      pointer-events: none;
+      /* start animation */
+      opacity: 0;
     }
 
-    .center {
+    #splash .center {
       margin: 0;
       position: absolute;
       top: 50%;
@@ -62,66 +84,55 @@
       transform: translate(-50%, -50%);
     }
 
-    .contain {
+    #splash .contain {
       display:block;
       width:100%; height:100%;
       object-fit: contain;
     }
 
-    .stretch {
+    #splash .stretch {
       display:block;
       width:100%; height:100%;
     }
 
-    .cover {
+    #splash .cover {
       display:block;
       width:100%; height:100%;
       object-fit: cover;
     }
 
-    .bottom {
+    #splash .bottom {
       position: absolute;
       bottom: 0;
       left: 50%;
       -ms-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
     }
 
-    .bottomLeft {
+    #splash .bottomLeft {
       position: absolute;
       bottom: 0;
       left: 0;
     }
 
-    .bottomRight {
+    #splash .bottomRight {
       position: absolute;
       bottom: 0;
       right: 0;
     }
 
     @media (prefers-color-scheme: dark) {
-      body {
+      #splash {
         background-color: #042a49;
           }
     }
   </style>
-  <script id="splash-screen-script">
-    function removeSplashFromWeb() {
-      document.getElementById("splash")?.remove();
-      document.getElementById("splash-branding")?.remove();
-      document.body.style.background = "transparent";
-    }
-  </script>
-</head>
-<body>
-  <picture id="splash">
+    <picture>
       <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
       <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
       <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
-  </picture>
-  <div>
-
-  </div>
+  </picture></div>
+
   <script>
     window.addEventListener('load', function(ev) {
       // Download main.dart.js