Add files via upload

Alex-L3 · Oct 26, 2023 · 9f4c0bf · 9f4c0bf
1 parent 69938e1
commit 9f4c0bf
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -15,9 +15,11 @@
     <title>CryptoBot | Crypto Payments for Telegram Bots</title>
   </head>
   <body>
-
+    <div id="preloader">
+        <div class="spinner"></div>
+    </div>
 
-    <div name="root" class=" bg-white dark:bg-[#0D0D12] mx-auto w-full ">
+    <div name="root" id="main" class=" bg-white dark:bg-[#0D0D12] mx-auto w-full">
 
       <section id="header" class="mx-auto max-w-7xl px-5 sm:px-10 py-[44px] sm:py-[40px] ">
           <section name="navigation" class="flex justify-between items-center">
@@ -936,6 +938,7 @@ <h2 class="h2-header sm:h2-header-lg text-[#0D0D12] dark:text-white">Join dev co
 
     console.log('hello')
 
+
     </script>
   </body>
 </html>
diff --git a/input.css b/input.css
@@ -14,7 +14,7 @@
     html {
         scroll-behavior: smooth;
     }
-    
+
 }
 
 @layer components {
@@ -364,4 +364,38 @@
         z-index: 0;
         transform: translateX(0);
     }
+}
+
+
+/* Preloader */
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #cccccc;
+    border-top-color: #1a1a1a;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
diff --git a/js/app.js b/js/app.js
@@ -441,3 +441,8 @@ async function scrollAnimateHeadings(target) {
 
 const headers = document.querySelectorAll("#yBlockAPI .h2-header, #yBlockDevCommunity .h2-header ");
 headers.forEach((el) => observer3.observe(el));
+
+window.addEventListener('load', function () {
+  var preloader = document.getElementById('preloader');
+  preloader.style.display = 'none';
+});
diff --git a/output.css b/output.css
@@ -2003,6 +2003,40 @@ html {
   }
 }
 
+/* Preloader */
+
+#preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid #cccccc;
+  border-top-color: #1a1a1a;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @media (min-width: 640px){
   .sm\:h2-header-lg {
     /* desktop/H2 header */