Splash screen

packages/agenciafmd/frontend/src/resources/views/components/splash-screen.blade.php

@@ -0,0 +1,11 @@
+<div class="splash-screen">
+<!--    Adicionar stroke-dashoffset="1000" no path do svg-->
+  <svg width="138" height="76" viewBox="0 0 88 26" fill="none"
+       xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          id="logoPath"
+          stroke-dashoffset="1000"
+          d="M24.0313 25.6322C25.3092 25.6496 26.5768 25.4016 27.7539 24.904C28.9148 24.3879 29.9705 23.6621 30.8679 22.7628L32.8406 25.1594H37.9762V25.1757H42.9759V8.14408H43.0411L49.019 25.1757H53.084L59.0619 7.97561H59.1272V25.1757H64.1269V0.905346H56.6327L51.2635 17.5946H51.1928L45.5192 0.905346H37.9762V24.2031L33.8677 19.4152C34.5431 18.5634 35.0821 17.6119 35.4655 16.5947C35.8503 15.577 36.1024 14.514 36.2154 13.4318H32.0309C31.965 13.9312 31.8633 14.4252 31.7265 14.91C31.5884 15.4012 31.3951 15.8752 31.1505 16.323L28.0202 12.4808C29.1901 11.8661 30.2336 11.0365 31.0961 10.0353C31.9335 9.02487 32.374 7.74394 32.3352 6.43222C32.3492 5.56294 32.1633 4.70206 31.7917 3.91605C31.4586 3.21077 30.9721 2.58879 30.3679 2.0955C29.741 1.60179 29.0252 1.23284 28.2593 1.0086C27.4068 0.750277 26.5198 0.623822 25.629 0.633624C24.8265 0.631405 24.0293 0.763663 23.2705 1.02491C22.5338 1.27251 21.8473 1.6498 21.2434 2.13898C20.6587 2.62128 20.1796 3.2188 19.8359 3.89431C19.4762 4.6006 19.2952 5.38431 19.3087 6.1768C19.2868 7.14759 19.5151 8.10769 19.9717 8.96469C20.4408 9.80489 20.9866 10.5999 21.6021 11.3396C20.8945 11.6857 20.2134 12.0835 19.5642 12.5297C18.9325 12.9763 18.356 13.4962 17.8469 14.0785C17.3376 14.6521 16.9296 15.3082 16.6404 16.0186C16.3382 16.7679 16.1867 17.5694 16.1948 18.3772C16.1752 19.4348 16.3847 20.4841 16.8089 21.4531C17.1953 22.323 17.7643 23.0996 18.4773 23.7302C19.1959 24.3712 20.0397 24.856 20.9554 25.154C21.9489 25.4754 22.9871 25.6368 24.0313 25.6322ZM21.8249 16.0023C22.146 15.6614 22.5116 15.3652 22.9118 15.122V15.1165C23.3077 14.8697 23.722 14.6535 24.1509 14.4698L28.3028 19.5348C27.7742 20.1365 27.1609 20.6582 26.4823 21.0836C25.7991 21.489 25.0157 21.6942 24.2215 21.6759C23.7725 21.6763 23.3278 21.5895 22.9118 21.4205C22.513 21.2586 22.1452 21.0288 21.8249 20.7412C21.5036 20.4576 21.243 20.1119 21.0586 19.725C20.8701 19.3391 20.7716 18.9154 20.7706 18.4859C20.765 18.0173 20.8633 17.5533 21.0586 17.1273C21.2527 16.714 21.5114 16.3342 21.8249 16.0023ZM26.7141 4.03836C26.9807 4.15531 27.2201 4.32649 27.417 4.54102C27.6304 4.755 27.799 5.00942 27.9128 5.28937C28.0266 5.56932 28.0835 5.86917 28.08 6.17136C28.1021 6.54799 28.0486 6.92523 27.9226 7.28083C27.7966 7.63644 27.6006 7.96322 27.3463 8.2419C26.8193 8.77548 26.2321 9.24601 25.5964 9.644C25.4488 9.45366 25.3035 9.26741 25.1603 9.08389L25.16 9.08348L25.1598 9.08327L25.1595 9.08286C24.8656 8.70608 24.5806 8.34084 24.303 7.97561C23.8871 7.40368 23.673 6.70975 23.6944 6.00289C23.6803 5.7105 23.731 5.41861 23.8428 5.14806C23.9546 4.87752 24.1247 4.63498 24.3411 4.43776C24.756 4.05468 25.3036 3.84809 25.8682 3.86171C26.1593 3.86124 26.4474 3.9214 26.7141 4.03836ZM17.0643 5.39423V0.905346H0V25.1757H5.33666V15.1491H15.4991V11.0026H5.33666V5.39423H17.0643ZM80.9358 1.6553C79.5427 1.14884 78.0704 0.894873 76.5882 0.90534H66.1159V25.1649H76.5882C78.2506 25.2047 79.9021 24.8859 81.4303 24.2301C82.7543 23.6457 83.9286 22.7687 84.8649 21.6651C85.8089 20.5277 86.5099 19.209 86.9246 17.7903C87.3892 16.202 87.6181 14.5541 87.6039 12.8992C87.6406 11.1085 87.3591 9.32551 86.7724 7.63323C86.2781 6.23514 85.4885 4.95991 84.4573 3.8943C83.4665 2.89301 82.2628 2.12773 80.9358 1.6553ZM78.4576 20.3173C77.7357 20.567 76.9771 20.6938 76.2132 20.6923H71.4417V5.39422H75.2459C76.3759 5.35577 77.5023 5.54044 78.5609 5.93767C79.417 6.27911 80.1672 6.84172 80.7347 7.56802C81.301 8.31948 81.7011 9.1827 81.9085 10.1005C82.1589 11.1874 82.2793 12.3002 82.2672 13.4155C82.2941 14.5705 82.1213 15.7214 81.7564 16.8175C81.4689 17.6573 81.0058 18.4262 80.3978 19.0728C79.8585 19.6351 79.1936 20.0616 78.4576 20.3173Z"
+          fill="black"/>
+  </svg>
+</div>

public/service-worker.js

@@ -1 +1,23 @@
-const applicationName="fmd-starter",assets=["/","/index.html","/css/frontend.css","/js/frontend.js"];self.addEventListener("install",(e=>{e.waitUntil(caches.open("fmd-starter").then((e=>{e.addAll(assets)})))})),self.addEventListener("fetch",(e=>{e.respondWith(caches.match(e.request).then((t=>t||fetch(e.request))))}));
+const applicationName = "fmd-starter";
+const assets = [
+  "/",
+  "/index.html",
+  "/css/frontend.css",
+  "/js/frontend.js",
+];
+
+self.addEventListener("install", installEvent => {
+  installEvent.waitUntil(
+      caches.open(applicationName).then(cache => {
+        cache.addAll(assets)
+      }),
+  );
+});
+
+self.addEventListener("fetch", fetchEvent => {
+  fetchEvent.respondWith(
+      caches.match(fetchEvent.request).then(res => {
+        return res || fetch(fetchEvent.request)
+      }),
+  );
+});

resources/js/components/splash-screen.js

@@ -0,0 +1,39 @@
+function AnimateSplashScreen(hastFirstLoadSplashScreen) {
+  const splashScreen = document.querySelector('.splash-screen')
+  const svg = splashScreen.querySelector('svg')
+  svg.classList.add("d-block")
+  if (hastFirstLoadSplashScreen === true) {
+    if (!sessionStorage.isVisited) {
+      sessionStorage.isVisited = true;
+      setTimeout(firstLoadSplashScreen(splashScreen), 100)
+      return
+    }
+  }
+  reloadSplashScreen(splashScreen)
+}
+function reloadSplashScreen(splashScreen) {
+  document.addEventListener("readystatechange", function () {
+    if (document.readyState === "complete") {
+      splashScreen.addEventListener("transitionend", function () {
+        splashScreen.classList.add('d-none');
+      })
+      splashScreen.classList.add('splash-screen-hidden');
+    }
+  });
+}
+
+function firstLoadSplashScreen(splashScreen) {
+  splashScreen.classList.add('splash-screen-first-load')
+  splashScreen.addEventListener("animationend", function () {
+    splashScreen.classList.add('splash-screen-hidden');
+      splashScreen.addEventListener("transitionend", function () {
+        splashScreen.classList.add('d-none');
+      })
+  });
+}
+
+window.addEventListener('DOMContentLoaded', function () {
+
+  AnimateSplashScreen(true)
+
+});

resources/js/frontend-imports.js

@@ -32,6 +32,7 @@ module.exports = (function () {
     // 'resources/js/components/lax.js',
     'resources/js/components/smooth-scroll.js',
     'resources/js/components/light-dark-controller.js',
+    // 'resources/js/components/splash-screen.js',
 
     // Global usages
     'resources/js/frontend.js',

resources/sass/components/_splash-screen.scss

@@ -0,0 +1,47 @@
+.splash-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: $zindex-toast + 1;
+  background: $primary;
+  display: flex;
+  opacity: 1;
+  justify-content: center;
+  align-items: center;
+  transition: opacity ease-in-out 0.5s;
+
+  svg {
+    display: none;
+  }
+
+  &-hidden {
+    opacity: 0;
+  }
+
+  &-first-load {
+    path {
+      fill: rgba($black, 0);
+      stroke-dasharray: 1000;
+      stroke-dashoffset: 1000;
+      stroke: rgba($black, 20);
+      animation: draw-logo 3s linear forwards 0.75s, fill-logo .5s forwards 2s;
+    }
+  }
+
+  @keyframes draw-logo {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes fill-logo {
+    to {
+      fill: rgba($black, 1);
+      stroke: rgba($black, 0);
+    }
+  }
+}
+
+

resources/sass/frontend.scss

@@ -78,6 +78,7 @@
 @import "components/navbar";
 @import "components/videos";
 @import "components/light-dark-toggle";
+//@import "components/splash-screen";
 @import "styles";
 
 // 5.3 Partial`s styles