TF-2135 Add splash screen for web

(cherry picked from commit da3c6133d7ae9210dd7dcbe98470f1836cea8e33)
2023-09-13 18:27:12 +07:00
parent 5f053be2de
commit fa589fc81c
21 changed files with 105 additions and 1 deletions
@@ -302,7 +302,6 @@ flutter_native_splash:
  color: "#000000"
  branding: "assets/icons/icon_branding.png"
  image: "assets/icons/icon_logo.png"
-  web: false

 cider:
  link_template:
@@ -31,10 +31,30 @@

  <title>Team Mail</title>
  <link rel="manifest" href="manifest.json">
+  <link rel="stylesheet" type="text/css" href="splash/style.css">
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

  <script type="application/javascript" src="assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
+  <script src="splash/splash.js"></script>
 </head>
 <body>
+
+    <picture id="splash-branding">
+        <source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" media="(prefers-color-scheme: light)">
+        <source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+        <img class="bottom" aria-hidden="true" src="splash/img/branding-1x.png" alt="">
+    </picture>
+
+    <div class="center">
+        <div align="center">
+            <picture id="splash">
+                <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 aria-hidden="true" src="splash/img/light-1x.png" alt="">
+            </picture>
+            <div class="loader"></div>
+        </div>
+    </div>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
@@ -0,0 +1,5 @@
+function removeSplashFromWeb() {
+  document.getElementById("splash")?.remove();
+  document.getElementById("splash-branding")?.remove();
+  document.body.style.background = "transparent";
+}
@@ -0,0 +1,80 @@
+html {
+  height: 100%
+}
+
+body {
+  margin: 0;
+  min-height: 100%;
+  background-color: #000000;
+  background-size: 100% 100%;
+}
+
+.center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.contain {
+  display:block;
+  width:100%;
+  height:100%;
+  object-fit: contain;
+}
+
+.stretch {
+  display:block;
+  width:100%;
+  height:100%;
+}
+
+.cover {
+  display:block;
+  width:100%;
+  height:100%;
+  object-fit: cover;
+}
+
+.bottom {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+
+.bottomLeft {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.bottomRight {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.loader {
+  margin: 16px;
+  border: 2px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 2px solid #007AFF;
+  width: 18px;
+  height: 18px;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}