firstpr

backend/.env

@@ -1,3 +1,3 @@
-MONGO_URI=mongodb://localhost:27017/mern-auth
+MONGO_URI=mongodb://0.0.0.0:27017/mern-auth
 JWT_SECRET=your_secret_key
 PORT=5000

frontend/src/assets/css/Login.css

@@ -4,32 +4,27 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 62px); /* Adjusted for navbar space */
   background: #f4f4f4; /* Light gray background */
 }
 
 /* Rectangular Form Box */
 .form-container {
   width: 400px; /* Rectangle shape */
   padding: 30px;
-  background: #fff; /* White background for contrast */
+  background: #fff; /* White background */
   border: 2px solid #8364BC; /* Purple border */
-  border-radius: 8px; /* Slight rounding */
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Raised effect */
+  border-radius: 8px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Shadow effect */
   text-align: center;
-  position: relative;
 }
 
-/* Login Title at the Top */
+/* Login Title */
 h2 {
   font-size: 26px;
   font-weight: bold;
   color: #8364BC; /* Purple font color */
-  position: absolute;
-  top: 188px; /* Move slightly above */
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 0 15px;
+  margin-bottom: 15px;
 }
 
 /* Form Inputs */
@@ -48,21 +43,21 @@ button {
   width: 100%;
   padding: 12px;
   background-color: #8364BC; /* Purple background */
-  color: #fff; /* White text */
+  color: #fff;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 16px;
   font-weight: bold;
-  transition: 0.3s; /* Smooth hover effect */
-  margin: 0 auto; /* Center the button horizontally */
+  transition: 0.3s;
+  margin-left: 120px;
 }
 
 button:hover {
-  background-color: #6b52a3; /* Darker purple on hover */
+  background-color: #6b52a3; /* Darker purple */
 }
 
-/* Paragraph under the form with a link */
+/* Paragraph & Link */
 p {
   margin-top: 20px;
   font-size: 14px;
@@ -78,7 +73,7 @@ a:hover {
   text-decoration: underline;
 }
 
-/* Responsive Design for Mobile */
+/* Responsive Design */
 @media (max-width: 600px) {
   .form-container {
     width: 90%;
@@ -92,4 +87,4 @@ a:hover {
   button {
     font-size: 14px;
   }
-}
+}

frontend/src/assets/css/Registration.css

@@ -1,16 +1,28 @@
-/* .form-container */
+/* Full-page centering */
+.main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Full height */
+  background-color: white; /* Keeping your original background color */
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Form container */
 .form-container {
-  top: 70px;
   max-width: 400px;
-  margin: 50px auto;
+  width: 90%;
   padding: 30px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-  font-family: Arial, sans-serif;
+  text-align: center;
   z-index: 5;
 }
 
+/* Heading */
 h2 {
   text-align: center;
   font-size: 24px;
@@ -32,6 +44,7 @@ input {
   border: 1px solid #ddd;
   border-radius: 8px;
   background-color: #f9f9f9;
+  width: 100%;
   transition: all 0.3s ease;
 }
 
@@ -42,16 +55,21 @@ input:focus {
 }
 
 /* Button styles */
-button {
+.btn21 button {
+  background-color: #28a745;
+  color: white;
+  border-radius: 8px;
+  font-weight: bold;
   padding: 12px;
   font-size: 16px;
-  background-color: #28a745;
-  color: #fff;
+
+
   border: none;
   border-radius: 8px;
   cursor: pointer;
+
   transition: background-color 0.3s ease;
-  font-weight: bold;
+
 }
 
 button:hover {
@@ -72,7 +90,6 @@ button:disabled {
 
   h2 {
     font-size: 20px;
-
   }
 
   input {
@@ -83,4 +100,4 @@ button:disabled {
   button {
     font-size: 14px;
   }
-}
+}

frontend/src/assets/css/nav.css

@@ -1,4 +1,8 @@
 /* Navbar Styling */
+@font-face {
+    font-family: 'Slackey';
+    src: url('../fonts/Slackey-Regular.ttf') format('truetype');
+}
 .navbar {
     height: 62px;
     width: 100%;
@@ -16,9 +20,10 @@
 
 /* Logo Styling */
 .logo {
-    font-size: 24px;
+    font-size: 26px;
     font-weight: bold;
     color: black;
+    font-family: 'Slackey';
 }
 
 /* Navigation Links */