Merge pull request #838 from aditya-bhaumik/ui2

improved the background of the login page
Anishkagupta04 · Jul 14, 2024 · 2583e6a · 2583e6a
2 parents 7b47090 + 31e86d7
commit 2583e6a
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 22 deletions.
diff --git a/log/login.css b/log/login.css
@@ -6,7 +6,7 @@
 
 body {
   display: flex;
-  background-color: #f6f5f7;
+  background: linear-gradient(270deg, #06bdc0, #05d3e2);  
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -35,7 +35,7 @@ body {
 }
 
 .home-button:hover {
-  background-color: #e2e6ea;
+  background-color: #6be1f9;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
@@ -114,8 +114,8 @@ a:hover {
 button {
   position: relative;
   border-radius: 20px;
-  border: 1px solid #4bb6b7;
-  background-color: #4bb6b7;
+  border: 1px solid #022a2d;
+  background-color: #022a2d;
   color: #fff;
   font-size: 15px;
   font-weight: 700;
@@ -128,6 +128,7 @@ button {
 
 button:hover {
   letter-spacing: 3px;
+  background-color: #28cacd;
 }
 
 button:active {
@@ -341,4 +342,112 @@ input {
 
 .social-container a:hover {
   border: 1px solid #4bb6b7;
-}
+  background-color: #6be1f9;
+}
+
+
+/* Adjustments for screens smaller than 1024px */
+@media (max-width: 1024px) {
+  .container {
+    width: 80%;
+  }
+
+  .overlay-panel {
+    padding: 0 30px;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  input {
+    padding: 10px;
+    font-size: 1rem;
+  }
+
+  button {
+    padding: 10px 30px;
+    font-size: 1rem;
+  }
+}
+
+/* Adjustments for screens smaller than 768px */
+@media (max-width: 768px) {
+  .container {
+    width: 90%;
+    min-height: 450px;
+    padding: 20px;
+  }
+
+  form {
+    padding: 0 20px;
+  }
+
+  input {
+    padding: 10px;
+    margin: 6px 0;
+    font-size: 0.9rem;
+  }
+
+  button {
+    padding: 10px 30px;
+    margin: 8px;
+    font-size: 0.9rem;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .overlay {
+    width: 100%;
+    left: 0;
+    transform: none;
+  }
+
+  .overlay-panel {
+    width: 100%;
+    position: relative;
+    transform: none;
+    padding: 20px;
+  }
+
+  .overlay-left{
+    display: none;
+  }
+
+}
+
+/* Further adjustments for screens smaller than 480px */
+@media (max-width: 480px) {
+  .container {
+    width: 100%;
+    min-height: 400px;
+    padding: 10px;
+  }
+
+  h1 {
+    font-size: 1.2rem;
+    margin-bottom: 10px;
+  }
+
+  input {
+    padding: 8px;
+    margin: 5px 0;
+    font-size: 0.8rem;
+  }
+
+  button {
+    padding: 8px 20px;
+    margin: 6px;
+    font-size: 0.8rem;
+  }
+
+  .overlay {
+    height: 100%;
+  }
+
+  .overlay-panel {
+    padding: 10px;
+  }
+}
diff --git a/login.html → log/login.html b/login.html → log/login.html
@@ -7,7 +7,7 @@
   <title>RAPIDOC</title>
   <link rel="icon" type="image/x-icon" href="log/favicon.ico">
   <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
-  <link rel="stylesheet" href="log/login.css">
+  <link rel="stylesheet" href="login.css">
   <script src="scriptsignup.js" defer type="module"></script>
   <script src="signupjs.js" defer type="module"></script>
   <script src="signupjs1.js" defer type="module"></script>
@@ -85,22 +85,7 @@ <h1 class="title">Start your <br> journey now</h1>
 
   </div>
 
-  <script src="log/script.js"></script>
+  <script src="script.js"></script>
   <script src="https://apis.google.com/js/platform.js" async defer></script>
-  <script>
-    document.addEventListener("DOMContentLoaded", function() {
-      const registerButton = document.getElementById("register");
-      const container = document.getElementById("container");
-
-      registerButton.addEventListener("click", (event) => {
-        event.preventDefault(); // Prevent the default behavior of the anchor tag
-
-        container.classList.add("right-panel-active");
-
-        // Scroll to the top of the form for better visibility
-        document.getElementById("registerForm").scrollIntoView({ behavior: "smooth" });
-      });
-    });
-  </script>
 </body>
 </html>