TF-3772 Animated splash Web
DatDang
@@ -41,25 +41,12 @@
|
||||
<script src="splash/splash.js"></script>
|
||||
<script src="worker_service/worker_service.js"></script>
|
||||
<script src="i18n/translater.js"></script>
|
||||
<script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></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>
|
||||
<dotlottie-player class="center" src="splash/lottie-tmail.json" background="transparent" speed="1" style="width: 176px; height: 176px" direction="1" playmode="forward" autoplay=""></dotlottie-player>
|
||||
<img src="splash/img/icon_twp.png" alt="Twake Workplace logo" class="bottom-image">
|
||||
|
||||
<div class="smart-banner">
|
||||
<button class="button close" onClick={handleContinueTwakeMailOnWeb()}>
|
||||
@@ -108,7 +95,9 @@
|
||||
_flutter.loader.load({
|
||||
onEntrypointLoaded: async function(engineInitializer) {
|
||||
const appRunner = await engineInitializer.initializeEngine();
|
||||
await appRunner.runApp();
|
||||
await setTimeout( async function () {
|
||||
await appRunner.runApp();
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -116,7 +105,9 @@
|
||||
_flutter.loader.load({
|
||||
onEntrypointLoaded: async function(engineInitializer) {
|
||||
const appRunner = await engineInitializer.initializeEngine();
|
||||
await appRunner.runApp();
|
||||
await setTimeout( async function () {
|
||||
await appRunner.runApp();
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 65 KiB |
@@ -5,7 +5,7 @@ html {
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
background-color: #000000;
|
||||
background-color: #ffffff;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -55,23 +55,11 @@ body {
|
||||
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); }
|
||||
.bottom-image {
|
||||
position: absolute; /* Position relative to the .container */
|
||||
bottom: 40px; /* 40px from the bottom */
|
||||
width: 210px; /* Fixed width */
|
||||
height: auto; /* Maintain aspect ratio */
|
||||
left: 50%; /* Start from the horizontal center */
|
||||
transform: translateX(-50%); /* Adjust to truly center the image */
|
||||
}
|
||||