feat: remove direct image polling, removed timeout from loader, some …

…changes in other files

CONTRIBUTE.md

@@ -22,4 +22,4 @@ If you find a bug, please open an issue with a clear description of the problem
 
 ## Contact
 
-If you have any questions or concerns, please contact us at [lookinlabs@example.com](mailto:lookinlabs@example.com).
+If you have any questions or concerns, please contact us at [support@lookinlabs.com](mailto:support@lookinlabs.com).

bin/compress_images.js

@@ -3,6 +3,20 @@ import imageminMozjpeg from 'imagemin-mozjpeg';
 import imageminPngquant from 'imagemin-pngquant';
 import imageminWebp from 'imagemin-webp';
 
+
+(async () => {
+    await imagemin(['resources/img/*.{jpg,png}'], {
+        destination: 'compressed',
+        plugins: [
+            imageminMozjpeg({ quality: 75 }),
+            imageminPngquant({ quality: [0.6, 0.8] }),
+            imageminWebp({ quality: 75 })
+        ]
+    });
+
+    console.log('Basic Images optimized');
+})();
+
 (async () => {
     await imagemin(['resources/img/*.{jpg,png}'], {
         destination: 'compressed',

index.html

@@ -8,17 +8,7 @@
   <meta name="description" content="" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <!-- Favicon -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.webp">
-  <link rel="icon" type="image/webp" sizes="32x32" href="/favicon-32x32.webp">
-  <link rel="icon" type="image/webp" sizes="16x16" href="/favicon-16x16.webp">
-  <link rel="manifest" href="/site.webmanifest">
-
   <link rel="stylesheet" href="resources/css/main.css" />
-
-  <!-- Load Google Fonts-->
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-
   <!-- Load Fonts Awesome-->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
 
@@ -228,7 +218,7 @@ <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translatio
           <div class="flex flex-col md:flex-row w-full items-center mt-12 md:mt-6 mb-12 px-4">
               <div class="flex flex-1 justify-center md:justify-end pr-2 md:pr-8">
                   <a href="https://aws.amazon.com/what-is-cloud-computing">
-                      <img class="w-40" src="https://d0.awsstatic.com/logos/powered-by-aws-white.png" alt="Powered by AWS">
+                      <img class="w-40" src="./resources/img/powered-by-aws-white.webp" alt="Powered by AWS">
                   </a>
               </div>
               <div class="flex flex-1 justify-center md:justify-start pl-2 md:pl-8 mt-8 md:mt-0">

resources/css/main.css

@@ -8,19 +8,18 @@
   overflow: hidden;
   aspect-ratio: 1;
   animation: rotate 6s linear infinite;
+}
 
-  img {
-    display: block;
-    width: 100%;
-    animation: bounce 0.2s linear infinite alternate;
-  }
+.spinner img {
+  display: block;
+  width: 100%;
+  animation: bounce 0.2s linear infinite alternate;
 }
 
 @keyframes rotate {
   from {
     transform: rotate(0deg);
   }
-
   to {
     transform: rotate(-360deg);
   }
@@ -30,7 +29,6 @@
   from {
     transform: translateY(-10%);
   }
-
   to {
     transform: translateY(10%);
   }
@@ -40,20 +38,14 @@
 .lookinlabs-body-bg {
   height: 100%;
   margin: 0;
-  background: linear-gradient(156deg,
-      #02181d 13.54%,
-      #000312 36.46%,
-      rgba(23, 1, 37, 1) 68.23%);
+  background: linear-gradient(156deg, #02181d 13.54%, #000312 36.46%, rgba(23, 1, 37, 1) 68.23%);
   background-blend-mode: darken;
   background-repeat: no-repeat;
   background-attachment: fixed;
 }
 
 .button-gradient {
-  background: linear-gradient(156deg,
-      #02181d 13.54%,
-      #000312 36.46%,
-      rgba(23, 1, 37, 1) 68.23%);
+  background: linear-gradient(156deg, #02181d 13.54%, #000312 36.46%, rgba(23, 1, 37, 1) 68.23%);
   background-blend-mode: darken;
   background-repeat: no-repeat;
   background-attachment: fixed;
@@ -62,21 +54,16 @@
 }
 
 .button-gradient:hover {
-  background: linear-gradient(156deg,
-      #02181d 33.54%,
-      #000312 56.46%,
-      rgba(23, 1, 37, 1) 88.23%);
+  background: linear-gradient(156deg, #02181d 33.54%, #000312 56.46%, rgba(23, 1, 37, 1) 88.23%);
 }
 
 #carousel::-webkit-scrollbar {
   display: none;
 }
 
 #carousel {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
   position: relative;
   padding: 0 50px;
 }
@@ -86,7 +73,8 @@
   overflow: hidden;
 }
 
-.carousel-container::before {
+.carousel-container::before,
+.carousel-container::after {
   content: "";
   position: absolute;
   top: 0;
@@ -97,14 +85,7 @@
 }
 
 .carousel-container::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
   right: 0;
-  width: 10%;
-  z-index: 2;
-  pointer-events: none;
 }
 
 /* Animation */
@@ -126,10 +107,6 @@
   z-index: 9999; /* High z-index to ensure it's on top of all other content */
 }
 
-#refreshLoader.hide-loader {
-  display: none;
-}
-
 header.loader-active {
   display: none;
 }
@@ -166,14 +143,12 @@ header.loader-active {
 @media (max-width: 768px) {
   .g-recaptcha {
     transform: scale(0.85);
-    transform-origin: 0 0;
   }
 }
 
 @media (max-width: 480px) {
   .g-recaptcha {
     transform: scale(0.75);
-    transform-origin: 0 0;
   }
 }