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); }
 }