Visual Effects updated

Css/download.css

@@ -9,10 +9,12 @@
     padding: 0;
 }
 
+
 html
 {
     font-size: 12pt;
     font-family: Poppins, Segoe UI, "Tahoma", Verdana, sans-serif;
+    scroll-behavior: smooth;
 }
 
 nav

Css/index.css

@@ -13,8 +13,10 @@ html
 {
     font-size: 12pt;
     font-family: Poppins, Segoe UI, "Tahoma", Verdana, sans-serif;
+    scroll-behavior: smooth;
 }
 
+
 nav
 {
    height: 90px;

Css/login.css

@@ -1,4 +1,7 @@
 
+html {
+  scroll-behavior: smooth;
+}
 
 body{
     font-family: sans-serif;

Css/signup.css

@@ -1,4 +1,8 @@
 
+html {
+  scroll-behavior: smooth;
+}
+
 
 body{
 font-family: sans-serif;

Css/support.css

@@ -1,4 +1,9 @@
 
+html {
+  scroll-behavior: smooth;
+}
+
+
 body{
   background: linear-gradient(-5deg, #000000 80%, #1ed760 100%);
   font-family: sans-serif;

Javascript/Left.js

@@ -0,0 +1,61 @@
+
+
+(function() {
+    var style = document.createElement('style');
+    style.textContent = `
+        body {
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        #page-transition-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: black;
+            transform: translateX(-100%);
+            transition: transform 0.3s ease-in-out;
+            z-index: 9999;
+        }
+        .transitioning {
+            transform: translateX(0) !important;
+        }
+    `;
+    document.head.appendChild(style);
+
+    var overlay = document.createElement('div');
+    overlay.id = 'page-transition-overlay';
+    document.body.appendChild(overlay);
+
+    function initPageTransitions() {
+        const links = document.querySelectorAll('a');
+
+        links.forEach(link => {
+            link.addEventListener('click', function (e) {
+                if (this.hostname === window.location.hostname && !this.hash) {
+                    e.preventDefault();
+                    const href = this.getAttribute('href');
+                    overlay.classList.add('transitioning');
+                    setTimeout(() => {
+                        window.location.href = href;
+                    }, 300);
+                }
+            });
+        });
+
+        const logo = document.getElementById("logo");
+        if (logo) {
+            logo.addEventListener("click", function() {
+                window.location.href = "index.html";
+            });
+        }
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", initPageTransitions);
+    } else {
+        initPageTransitions();
+    }
+})();

Javascript/Right.js

@@ -0,0 +1,59 @@
+(function() {
+    var style = document.createElement('style');
+    style.textContent = `
+        body {
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        #page-transition-overlay {
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            background-color: black;
+            transform: translateX(100%);
+            transition: transform 0.3s ease-in-out;
+            z-index: 9999;
+        }
+        .transitioning {
+            transform: translateX(0) !important;
+        }
+    `;
+    document.head.appendChild(style);
+
+    var overlay = document.createElement('div');
+    overlay.id = 'page-transition-overlay';
+    document.body.appendChild(overlay);
+
+    function initPageTransitions() {
+        const links = document.querySelectorAll('a');
+
+        links.forEach(link => {
+            link.addEventListener('click', function (e) {
+                if (this.hostname === window.location.hostname && !this.hash) {
+                    e.preventDefault();
+                    const href = this.getAttribute('href');
+                    overlay.classList.add('transitioning');
+                    setTimeout(() => {
+                        window.location.href = href;
+                    }, 300);
+                }
+            });
+        });
+
+        const logo = document.getElementById("logo");
+        if (logo) {
+            logo.addEventListener("click", function() {
+                window.location.href = "index.html";
+            });
+        }
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", initPageTransitions);
+    } else {
+        initPageTransitions();
+    }
+})();

downlaod.html

@@ -113,6 +113,8 @@ <h1 style="color:rgb(0, 0, 0); font-size: 30px; width: 85%;">Bring your music to
 
 </script>
 
+<script src="Javascript\Left.js"></script>
+
 
 </body>
 </html>

index.html

@@ -199,16 +199,17 @@ <h2 style="color: rgb(255, 200, 98);">Enterprise</h2>
 <!-----------------JavaScript--------------------->
 <script>
 
-
 const logo = document.getElementById("logo");
-
 logo.addEventListener("click", function() {
   window.location.href = "index.html";  
 });
 
 </script>
 
 
+<script src="Javascript\Left.js"></script>
+
+
 
 
 </body>

login.html

@@ -94,6 +94,8 @@ <h2 class="hr-lines"> <div class="txt">OR</div> </h2> </center>
 
 </script>
 
+<script src="Javascript\Left.js"></script>
+
 
 </body>
 </html>

signup.html

@@ -84,5 +84,7 @@ <h2 class="hr-lines"> <div class="txt">OR</div> </h2> </center>
 
 </script>
 
+<script src="Javascript\Right.js"></script>
+
 </body>
 </html>

support.html

@@ -116,6 +116,8 @@ <h1>Quick Help<br><br></h1>
 
 </script>
 
+<script src="Javascript\Right.js"></script>
+
 
 </body>
 </html>