TF-3772 Animated splash Web
DatDang
@@ -41,25 +41,12 @@
|
|||||||
<script src="splash/splash.js"></script>
|
<script src="splash/splash.js"></script>
|
||||||
<script src="worker_service/worker_service.js"></script>
|
<script src="worker_service/worker_service.js"></script>
|
||||||
<script src="i18n/translater.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<picture id="splash-branding">
|
<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>
|
||||||
<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)">
|
<img src="splash/img/icon_twp.png" alt="Twake Workplace logo" class="bottom-image">
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="smart-banner">
|
<div class="smart-banner">
|
||||||
<button class="button close" onClick={handleContinueTwakeMailOnWeb()}>
|
<button class="button close" onClick={handleContinueTwakeMailOnWeb()}>
|
||||||
@@ -108,7 +95,9 @@
|
|||||||
_flutter.loader.load({
|
_flutter.loader.load({
|
||||||
onEntrypointLoaded: async function(engineInitializer) {
|
onEntrypointLoaded: async function(engineInitializer) {
|
||||||
const appRunner = await engineInitializer.initializeEngine();
|
const appRunner = await engineInitializer.initializeEngine();
|
||||||
await appRunner.runApp();
|
await setTimeout( async function () {
|
||||||
|
await appRunner.runApp();
|
||||||
|
}, 2000);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -116,7 +105,9 @@
|
|||||||
_flutter.loader.load({
|
_flutter.loader.load({
|
||||||
onEntrypointLoaded: async function(engineInitializer) {
|
onEntrypointLoaded: async function(engineInitializer) {
|
||||||
const appRunner = await engineInitializer.initializeEngine();
|
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 {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
background-color: #000000;
|
background-color: #ffffff;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -55,23 +55,11 @@ body {
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader {
|
.bottom-image {
|
||||||
margin: 16px;
|
position: absolute; /* Position relative to the .container */
|
||||||
border: 2px solid #f3f3f3;
|
bottom: 40px; /* 40px from the bottom */
|
||||||
border-radius: 50%;
|
width: 210px; /* Fixed width */
|
||||||
border-top: 2px solid #007AFF;
|
height: auto; /* Maintain aspect ratio */
|
||||||
width: 18px;
|
left: 50%; /* Start from the horizontal center */
|
||||||
height: 18px;
|
transform: translateX(-50%); /* Adjust to truly center the image */
|
||||||
-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); }
|
|
||||||
}
|
}
|
||||||