From ad0489f0370120fcb3a7934a220e852caa1b372a Mon Sep 17 00:00:00 2001
From: Mojahidul Islam <itsemon245@gmail.com>
Date: Thu, 25 Apr 2024 01:25:14 +0600
Subject: [PATCH] added preloader

---
 app/View/Components/Preloader.php             |  26 ++
 public/assets/css/preloader.css               | 243 ++++++++++++++++++
 public/assets/css/preloader.css.map           |   1 +
 resources/css/app.css                         |  14 +-
 resources/scss/app.scss                       |   3 +-
 resources/views/backend/layouts/app.blade.php |   4 +-
 .../views/backend/layouts/head.blade.php      |   4 +-
 .../frontend/layouts/head.blade.php           |   3 +-
 .../views/components/preloader.blade.php      |  51 ++++
 .../views/frontend/layouts/app.blade.php      |   3 +-
 10 files changed, 340 insertions(+), 12 deletions(-)
 create mode 100644 app/View/Components/Preloader.php
 create mode 100644 public/assets/css/preloader.css
 create mode 100644 public/assets/css/preloader.css.map
 create mode 100644 resources/views/components/preloader.blade.php

diff --git a/app/View/Components/Preloader.php b/app/View/Components/Preloader.php
new file mode 100644
index 00000000..4c4393e2
--- /dev/null
+++ b/app/View/Components/Preloader.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Preloader extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.preloader');
+    }
+}
diff --git a/public/assets/css/preloader.css b/public/assets/css/preloader.css
new file mode 100644
index 00000000..6cee54f6
--- /dev/null
+++ b/public/assets/css/preloader.css
@@ -0,0 +1,243 @@
+:root {
+  --hue: 223;
+  --sat: 90%;
+  --bg: #38BDF8;
+  --fg: hsl(var(--hue), var(--sat), 10%);
+  --bar-light-t: 60%;
+  --bar-light-l: 50%;
+  --bar-light-r: 40%;
+  --bar-a-hue: 223;
+  --bar-a-t: hsl(var(--bar-a-hue), var(--sat), var(--bar-light-t));
+  --bar-a-l: hsl(var(--bar-a-hue), var(--sat), var(--bar-light-l));
+  --bar-a-r: hsl(var(--bar-a-hue), var(--sat), var(--bar-light-r));
+  --bar-b-hue: 253;
+  --bar-b-t: hsl(var(--bar-b-hue), var(--sat), var(--bar-light-t));
+  --bar-b-l: hsl(var(--bar-b-hue), var(--sat), var(--bar-light-l));
+  --bar-b-r: hsl(var(--bar-b-hue), var(--sat), var(--bar-light-r));
+  --bar-c-hue: 283;
+  --bar-c-t: hsl(var(--bar-c-hue), var(--sat), var(--bar-light-t));
+  --bar-c-l: hsl(var(--bar-c-hue), var(--sat), var(--bar-light-l));
+  --bar-c-r: hsl(var(--bar-c-hue), var(--sat), var(--bar-light-r));
+  --bar-d-hue: 313;
+  --bar-d-t: hsl(var(--bar-d-hue), var(--sat), var(--bar-light-t));
+  --bar-d-l: hsl(var(--bar-d-hue), var(--sat), var(--bar-light-l));
+  --bar-d-r: hsl(var(--bar-d-hue), var(--sat), var(--bar-light-r));
+  --bar-shadow-op: 0.4;
+  --trans-dur: 0.3s;
+}
+
+.preloader {
+  font-size: calc(14px + 16 * (100vw - 280px) / 3560);
+  background-color: var(--bg);
+  color: var(--fg);
+  display: grid;
+  place-items: center;
+  font: 1em/1.5 sans-serif;
+  height: 100vh;
+  transition: background-color var(--trans-dur), color var(--trans-dur);
+}
+
+.pl {
+  width: 12em;
+  height: 12em;
+}
+.pl, .pl__bars {
+  display: flex;
+}
+.pl__bars, .pl__bar {
+  transform-style: preserve-3d;
+}
+.pl__bars {
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+  width: 8em;
+  height: 8em;
+  transform: translateY(2.75em) rotateX(60deg) rotateZ(-45deg);
+}
+.pl__bar {
+  position: relative;
+  width: 1em;
+  height: 1em;
+}
+.pl__bar-t, .pl__bar-l, .pl__bar-r, .pl__bar-s {
+  animation: bounce-t 3s infinite;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: 0 0;
+}
+.pl__bar-t {
+  top: 0;
+  transform: translateZ(1em);
+}
+.pl__bar-l, .pl__bar-r, .pl__bar-s {
+  top: 100%;
+}
+.pl__bar-l {
+  animation-name: bounce-l;
+  transform: rotateX(90deg) rotateY(-90deg);
+}
+.pl__bar-r {
+  animation-name: bounce-r;
+  transform: rotateX(90deg);
+}
+.pl__bar-s {
+  animation-name: bounce-s;
+  background-color: hsl(0, 0%, 0%);
+  box-shadow: 0 0 0.125em 0.125em hsl(0, 0%, 0%);
+  opacity: var(--bar-shadow-op);
+  left: 0.125em;
+  width: calc(100% - 0.25em);
+  height: calc(100% - 0.125em);
+  transition: opacity var(--trans-dur);
+}
+.pl__bar:nth-child(1) .pl__bar-t, .pl__bar:nth-child(1) .pl__bar-l, .pl__bar:nth-child(1) .pl__bar-r, .pl__bar:nth-child(1) .pl__bar-s {
+  animation-delay: 0s;
+}
+.pl__bar:nth-child(1) .pl__bar-t {
+  background-color: var(--bar-a-t);
+}
+.pl__bar:nth-child(1) .pl__bar-l {
+  background-color: var(--bar-a-l);
+}
+.pl__bar:nth-child(1) .pl__bar-r {
+  background-color: var(--bar-a-r);
+}
+.pl__bar:nth-child(2) .pl__bar-t, .pl__bar:nth-child(2) .pl__bar-l, .pl__bar:nth-child(2) .pl__bar-r, .pl__bar:nth-child(2) .pl__bar-s {
+  animation-delay: 0.15s;
+}
+.pl__bar:nth-child(2) .pl__bar-t {
+  background-color: var(--bar-b-t);
+}
+.pl__bar:nth-child(2) .pl__bar-l {
+  background-color: var(--bar-b-l);
+}
+.pl__bar:nth-child(2) .pl__bar-r {
+  background-color: var(--bar-b-r);
+}
+.pl__bar:nth-child(3) .pl__bar-t, .pl__bar:nth-child(3) .pl__bar-l, .pl__bar:nth-child(3) .pl__bar-r, .pl__bar:nth-child(3) .pl__bar-s {
+  animation-delay: 0.3s;
+}
+.pl__bar:nth-child(3) .pl__bar-t {
+  background-color: var(--bar-c-t);
+}
+.pl__bar:nth-child(3) .pl__bar-l {
+  background-color: var(--bar-c-l);
+}
+.pl__bar:nth-child(3) .pl__bar-r {
+  background-color: var(--bar-c-r);
+}
+.pl__bar:nth-child(4) .pl__bar-t, .pl__bar:nth-child(4) .pl__bar-l, .pl__bar:nth-child(4) .pl__bar-r, .pl__bar:nth-child(4) .pl__bar-s {
+  animation-delay: 0.45s;
+}
+.pl__bar:nth-child(4) .pl__bar-t {
+  background-color: var(--bar-d-t);
+}
+.pl__bar:nth-child(4) .pl__bar-l {
+  background-color: var(--bar-d-l);
+}
+.pl__bar:nth-child(4) .pl__bar-r {
+  background-color: var(--bar-d-r);
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: hsl(var(--hue), var(--sat), 20%);
+    --fg: hsl(var(--hue), var(--sat), 90%);
+    --bar-shadow-op: 0.8;
+  }
+}
+/* Animation */
+@keyframes bounce-t {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
+    transform: translateZ(1em);
+  }
+  10% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: translateZ(8em);
+  }
+  30% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: translateZ(4em);
+  }
+  50% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: translateZ(2em);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: translateZ(1.5em);
+  }
+}
+@keyframes bounce-l {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
+    transform: rotateX(90deg) rotateY(-90deg) scaleY(1);
+  }
+  10% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: rotateX(90deg) rotateY(-90deg) scaleY(8);
+  }
+  30% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: rotateX(90deg) rotateY(-90deg) scaleY(4);
+  }
+  50% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: rotateX(90deg) rotateY(-90deg) scaleY(2);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: rotateX(90deg) rotateY(-90deg) scaleY(1.5);
+  }
+}
+@keyframes bounce-r {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
+    transform: rotateX(90deg) scaleY(1);
+  }
+  10% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: rotateX(90deg) scaleY(8);
+  }
+  30% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: rotateX(90deg) scaleY(4);
+  }
+  50% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: rotateX(90deg) scaleY(2);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: rotateX(90deg) scaleY(1.5);
+  }
+}
+@keyframes bounce-s {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
+    transform: scaleY(0.5);
+  }
+  10% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: scaleY(4);
+  }
+  30% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: scaleY(2);
+  }
+  50% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: scaleY(1);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
+    transform: scaleY(0.75);
+  }
+}
+
+/*# sourceMappingURL=preloader.css.map */
diff --git a/public/assets/css/preloader.css.map b/public/assets/css/preloader.css.map
new file mode 100644
index 00000000..c850fa96
--- /dev/null
+++ b/public/assets/css/preloader.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../resources/scss/_preloader.scss"],"names":[],"mappings":"AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACI;;;AAIR;EAII;EACA;;AAEA;EAMI;;AAGJ;EAEI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EAII;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EAGI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAaJ;EAII;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAhBJ;EAII;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAhBJ;EAII;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAhBJ;EAII;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAMZ;AACA;EACI;IACI;IACA;IACA;;;AAIR;AACA;EAEI;IAMI,2BA7KG;IA8KH;;EAGJ;IACI,2BAnLE;IAoLF;;EAGJ;IACI,2BAxLE;IAyLF;;EAGJ;IACI,2BA7LE;IA8LF;;EAGJ;IACI,2BAlME;IAmMF;;;AAIR;EAEI;IAMI,2BA9MG;IA+MH;;EAGJ;IACI,2BApNE;IAqNF;;EAGJ;IACI,2BAzNE;IA0NF;;EAGJ;IACI,2BA9NE;IA+NF;;EAGJ;IACI,2BAnOE;IAoOF;;;AAIR;EAEI;IAMI,2BA/OG;IAgPH;;EAGJ;IACI,2BArPE;IAsPF;;EAGJ;IACI,2BA1PE;IA2PF;;EAGJ;IACI,2BA/PE;IAgQF;;EAGJ;IACI,2BApQE;IAqQF;;;AAIR;EAEI;IAMI,2BAhRG;IAiRH;;EAGJ;IACI,2BAtRE;IAuRF;;EAGJ;IACI,2BA3RE;IA4RF;;EAGJ;IACI,2BAhSE;IAiSF;;EAGJ;IACI,2BArSE;IAsSF","file":"preloader.css"}
\ No newline at end of file
diff --git a/resources/css/app.css b/resources/css/app.css
index 88b1285d..c177b949 100755
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -39,11 +39,11 @@ header {
     height: max-content;
 }
 
-.sticky{
-    position:sticky !important;
-    top:0;
+.sticky {
+    position: sticky !important;
+    top: 0;
 }
-.fixed{
+.fixed {
     position: fixed;
 }
 .sidebar {
@@ -222,12 +222,12 @@ footer .social-handles {
         display: none !important;
     }
 }
-@media (min-width: 1230px){
-    .user-menu-btn{
+@media (min-width: 1230px) {
+    .user-menu-btn {
         display: block;
     }
 }
-.user-menu-btn{
+.user-menu-btn {
     display: none;
 }
 /* up to midium devices like tablet */
diff --git a/resources/scss/app.scss b/resources/scss/app.scss
index ee095897..9d4d41cc 100755
--- a/resources/scss/app.scss
+++ b/resources/scss/app.scss
@@ -2,4 +2,5 @@
 @import 'bootstrap/scss/bootstrap';
 body{
     font-family: 'Poppins', sans-serif;
-}
\ No newline at end of file
+}
+
diff --git a/resources/views/backend/layouts/app.blade.php b/resources/views/backend/layouts/app.blade.php
index b2887492..a5f23844 100755
--- a/resources/views/backend/layouts/app.blade.php
+++ b/resources/views/backend/layouts/app.blade.php
@@ -6,7 +6,9 @@
 <!-- body start -->
 
 <body data-layout-mode="default" data-theme="light" data-topbar-color="dark" data-menu-position="fixed"
-    data-leftbar-color="light" data-leftbar-size='default' data-sidebar-user='false'>
+    data-leftbar-color="light" data-leftbar-size='default' data-sidebar-user='false' style="overflow: hidden!important;height: 100vh;">
+    <x-preloader />
+
     <style>
         @media print {
             .container-fluid {
diff --git a/resources/views/backend/layouts/head.blade.php b/resources/views/backend/layouts/head.blade.php
index 7a53fab0..41006531 100755
--- a/resources/views/backend/layouts/head.blade.php
+++ b/resources/views/backend/layouts/head.blade.php
@@ -12,12 +12,14 @@
     <style>
         .tail-select {
             width: 100% !important;
-            padding: 0.75rem!important;
+            padding: 0.75rem !important;
         }
     </style>
     {{-- @vite(['resources/css/tailwind.css']) --}}
     <!-- App favicon -->
     <link rel="shortcut icon" href="{{ asset('backend/assets/images/favicon.ico') }}">
+    <link rel="stylesheet" href="{{ asset('assets/css/preloader.css') }}">
+
 
     <!-- Bootstrap css -->
     <link href="{{ asset('backend/assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
diff --git a/resources/views/components/frontend/layouts/head.blade.php b/resources/views/components/frontend/layouts/head.blade.php
index fd8a84fa..f9fdd346 100755
--- a/resources/views/components/frontend/layouts/head.blade.php
+++ b/resources/views/components/frontend/layouts/head.blade.php
@@ -14,6 +14,8 @@
 
     <link rel="stylesheet" href="{{ asset('libs/tail.select.js-1.0.2/css/tail.select.css') }}">
     @vite(['resources/css/tailwind.css'])
+    <link rel="stylesheet" href="{{ asset('assets/css/preloader.css') }}">
+
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -26,7 +28,6 @@
     <link href="{{ asset('frontend/assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" id="app-style">
     {{-- icons css  --}}
     <link href="{{ asset('frontend/assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" id="app-style">
-    @stack('customCss')
     {{-- Head JS  --}}
     <script src="{{ asset('frontend/assets/js/head.js') }}"></script>
     {{-- Color extractor for matching image color --}}
diff --git a/resources/views/components/preloader.blade.php b/resources/views/components/preloader.blade.php
new file mode 100644
index 00000000..060312d0
--- /dev/null
+++ b/resources/views/components/preloader.blade.php
@@ -0,0 +1,51 @@
+<div class="preloader"
+    style="
+position: relative;
+z-index: 99999!important;
+background-color: #38BDF8;
+width: 100vw;
+height: 100vh;
+">
+    <div class="pl">
+        <div class="pl__bars">
+            <div class="pl__bar">
+                <div class="pl__bar-s"></div>
+                <div class="pl__bar-t"></div>
+                <div class="pl__bar-l"></div>
+                <div class="pl__bar-r"></div>
+            </div>
+            <div class="pl__bar">
+                <div class="pl__bar-s"></div>
+                <div class="pl__bar-t"></div>
+                <div class="pl__bar-l"></div>
+                <div class="pl__bar-r"></div>
+            </div>
+            <div class="pl__bar">
+                <div class="pl__bar-s"></div>
+                <div class="pl__bar-t"></div>
+                <div class="pl__bar-l"></div>
+                <div class="pl__bar-r"></div>
+            </div>
+            <div class="pl__bar">
+                <div class="pl__bar-s"></div>
+                <div class="pl__bar-t"></div>
+                <div class="pl__bar-l"></div>
+                <div class="pl__bar-r"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@push('customJs')
+    <script>
+        $(document).ready(function() {
+            setTimeout(() => {
+                $('.preloader').fadeOut('slow', function() {
+                    $('.preloader').css('display', 'none!important');
+                    $('body').css('overflow', 'auto');
+                    $('body').css('height', 'auto');
+                });
+            }, 700);
+        })
+    </script>
+@endpush
diff --git a/resources/views/frontend/layouts/app.blade.php b/resources/views/frontend/layouts/app.blade.php
index 7152cf79..b9f58055 100755
--- a/resources/views/frontend/layouts/app.blade.php
+++ b/resources/views/frontend/layouts/app.blade.php
@@ -3,7 +3,7 @@
 
 <x-frontend.layouts.head title="Home" description="This is the home page for TextAct website" :favicon="$settings->basic->favicon" />
 
-<body class="w-100 position-relative">
+<body class="w-100 position-relative" style="overflow: hidden!important;height: 100vh;">
     <style>
         @media (min-width: 992px) {
             #auth-sidebar {
@@ -39,6 +39,7 @@
             }
         }
     </style>
+    <x-preloader />
     {{-- Messenger Chat Plugin Code --}}
     <div id="fb-root"></div>