Logo update

index.html

@@ -26,31 +26,31 @@
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="/favicons/apple-touch-icon.png?v=0.0.1-sep-9-2022"
+      href="/favicons/apple-touch-icon.png?v=jan27deltaburn"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="/favicons/favicon-32x32.png?v=0.0.1-sep-9-2022"
+      href="/favicons/favicon-32x32.png?v=jan27deltaburn"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="/favicons/favicon-16x16.png?v=0.0.1-sep-9-2022"
+      href="/favicons/favicon-16x16.png?v=jan27deltaburn"
     />
-    <link rel="manifest" href="/favicons/site.webmanifest?v=0.0.1-sep-9-2022" />
+    <link rel="manifest" href="/favicons/site.webmanifest?v=jan27deltaburn" />
     <link
       rel="mask-icon"
-      href="/favicons/safari-pinned-tab.svg?v=0.0.1-sep-9-2022"
+      href="/favicons/safari-pinned-tab.svg?v=jan27deltaburn"
       color="#ffc40d"
     />
-    <link rel="shortcut icon" href="/favicons/favicon.ico?v=0.0.1-sep-9-2022" />
+    <link rel="shortcut icon" href="/favicons/favicon.ico?v=jan27deltaburn" />
     <meta name="msapplication-TileColor" content="#ffc40d" />
     <meta
       name="msapplication-config"
-      content="/favicons/browserconfig.xml?v=0.0.1-sep-9-2022"
+      content="/favicons/browserconfig.xml?v=jan27deltaburn"
     />
     <meta name="theme-color" content="#5d5d5d" />
   </head>
@@ -62,10 +62,8 @@
       </header>
       <div class="loading-content">
         <div class="loading-content-wrapper">
-          <img
-            src="/images/phx-animated-compressed.gif"
-            class="loading-content-media"
-          />
+          <img src="/images/phx-micro.png" class="loading-content-media" />
+          <div id="loading-content-media-cover"></div>
         </div>
       </div>
       <h1 class="loading-content-subtitle">Loading</h1>
@@ -73,7 +71,7 @@
     <div id="root"></div>
     <style>
       body {
-        background: linear-gradient(to bottom, #eee, #fff);
+        background: linear-gradient(to bottom, #eee, #fff 20%);
         background-size: cover;
         background-repeat: no-repeat;
       }
@@ -100,20 +98,68 @@
         height: 100%;
         text-align: center;
         max-width: 1024px;
+        position: relative;
+        overflow: hidden;
       }
 
       #loading .loading-content-media {
-        width: 50%;
-        height: 50%;
+        width: 100%;
+        height: 100%;
         max-height: 100vh;
         max-width: 1024px;
         margin: auto;
       }
 
+      #loading-content-media-cover {
+        position: absolute;
+        min-width: 100%;
+        min-height: 100%;
+        bottom: 0px;
+        background-color: #fff;
+        -webkit-animation: load 2s ease;
+        animation: load 2s ease;
+        -webkit-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        animation-direction: normal;
+        -webkit-animation-direction: normal;
+        display: none;
+      }
+
       #loading .loading-content-subtitle {
         text-align: center;
       }
+
+      @keyframes load {
+        15% {
+          min-height: 100%;
+        }
+
+        30% {
+          min-height: 0px;
+        }
+
+        100% {
+          min-height: 0px;
+        }
+      }
     </style>
+    <script>
+      function loaderInitScript() {
+        function showLoader() {
+          const mediaCover = document.getElementById(
+            "loading-content-media-cover"
+          );
+          mediaCover.style.display = "block";
+        }
+
+        function onDocumentStateChange(e) {
+          if (document.readyState === "interactive")
+            setTimeout(showLoader, 2000);
+        }
+        document.addEventListener("readystatechange", onDocumentStateChange);
+      }
+      loaderInitScript();
+    </script>
     <script type="module" src="/src/App.jsx"></script>
   </body>
 </html>