+=======
+>>>>>>> upstream/main
+<<<<<<< HEAD
+ {/* Password Field */}
+
+=======
+>>>>>>> upstream/main
+
+ {/* Confirm Password Field */}
+
+=======
+>>>>>>> upstream/main
);
+
};
Signup.propTypes = {
diff --git a/client/src/component/css/Login.css b/client/src/component/css/Login.css
new file mode 100644
index 0000000..7ca916b
--- /dev/null
+++ b/client/src/component/css/Login.css
@@ -0,0 +1,236 @@
+body {
+ width: 100vw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ padding: 20px;
+ font-family: 'Montserrat', sans-serif;
+}
+
+.wrapper {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ width: 90vw;
+ max-width: 1200px;
+ background: #f9f9f9;
+ border-radius: 20px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ overflow: hidden;
+ transition: all 0.3s ease;
+}
+
+.form {
+ padding: 40px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background-color: var(--form-bg, #fff);
+}
+
+.title {
+ font-size: 3rem;
+ color: #6366F1;
+ font-weight: 700;
+ margin-bottom: 10px;
+}
+
+.title-line {
+ width: 80px;
+ height: 5px;
+ background-color: #6366F1;
+ border-radius: 50px;
+ margin: 10px auto;
+}
+
+.inp {
+ margin-bottom: 20px;
+ width: 100%;
+}
+
+.input {
+ width: 100%;
+ padding: 15px;
+ border-radius: 10px;
+ border: 1px solid #ddd;
+ font-size: 1rem;
+ outline: none;
+ transition: all 0.3s ease;
+ font-family: 'Montserrat', sans-serif;
+}
+
+.input:focus {
+ border-color: #6366F1;
+ box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
+}
+
+.submit {
+ border: none;
+ padding: 15px 0;
+ width: 100%;
+ font-size: 1.2rem;
+ background-color: #6366F1;
+ color: white;
+ border-radius: 50px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.submit:hover {
+ background-color: #5054e5;
+ box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
+}
+
+.footer {
+ margin-top: 20px;
+ font-size: 0.9rem;
+}
+
+.link {
+ color: #6366F1;
+ text-decoration: none;
+ transition: color 0.2s;
+}
+
+.link:hover {
+ color: #5054e5;
+}
+
+.banner {
+ background-color: #6366F1;
+ color: white;
+ padding: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ text-align: center;
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%);
+}
+
+.wel_text {
+ font-size: 3rem;
+ font-weight: 700;
+ line-height: 1.2;
+ color: white;
+}
+
+.para {
+ font-size: 1.2rem;
+ margin-top: 45px;
+ line-height: 1.5;
+ margin-left: 100px;
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .wrapper {
+ grid-template-columns: 1fr;
+ width: 100vw;
+ }
+
+ .banner {
+ clip-path: none;
+ width: 100%;
+ height: auto;
+ padding: 30px;
+ }
+
+ .wel_text {
+ font-size: 2.5rem;
+ }
+
+ .para {
+ font-size: 1.2rem;
+ }
+
+ .form {
+ padding: 20px;
+ }
+
+ .input,
+ .submit {
+ width: 100%;
+ }
+
+ .title {
+ font-size: 2.5rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .wrapper {
+ grid-template-columns: 1fr;
+ width: 100vw;
+ border-radius: 15px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ }
+
+ .banner {
+ clip-path: none;
+ width: 100%;
+ height: auto;
+ padding: 20px;
+ background-color: #5054e5;
+ order: -1;
+ }
+
+ .wel_text {
+ font-size: 2.5rem;
+ line-height: 1.1;
+ margin-bottom: 15px;
+ }
+
+ .para {
+ font-size: 1rem;
+ margin-left: 0;
+ margin-top: 20px;
+ }
+
+ .form {
+ padding: 20px;
+ border-radius: 0 0 15px 15px;
+ background-color: var(--form-bg, #f9f9f9);
+ box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
+ }
+
+ .title {
+ font-size: 2.2rem;
+ margin-bottom: 10px;
+ }
+
+ .title-line {
+ width: 60px;
+ height: 4px;
+ }
+
+ .inp {
+ margin-bottom: 15px;
+ }
+
+ .input {
+ padding: 12px;
+ font-size: 1rem;
+ border-radius: 8px;
+ border: 1px solid #ccc;
+ }
+
+ .submit {
+ padding: 12px 0;
+ font-size: 1.1rem;
+ border-radius: 40px;
+ box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2);
+ }
+
+ .footer {
+ margin-top: 15px;
+ font-size: 0.85rem;
+ }
+
+ .link {
+ font-size: 0.95rem;
+ }
+}
diff --git a/client/src/css/Navbar.css b/client/src/css/Navbar.css
index 573483b..4c00ba9 100644
--- a/client/src/css/Navbar.css
+++ b/client/src/css/Navbar.css
@@ -1,20 +1,19 @@
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;700;900&display=swap");
-/* title heading change */
#navbar {
z-index: 1000;
min-height: 10vh;
+<<<<<<< HEAD:client/src/component/css/Navbar.css
+
+=======
/* Set the background to white */
+>>>>>>> upstream/main:client/src/css/Navbar.css
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
- /* Black shadow */
border-bottom: none;
- /* Remove the bottom line */
overflow: initial;
- /* Avoid conflicts with other layouts */
background-color: #b3bef9;
- /* background: linear-gradient(72deg , #000000eb , #6386f42e); */
}
.header {
@@ -175,7 +174,6 @@
align-items: center;
}
-/* Dark Mode Toggle Button */
.darkThemeBtn * {
transition: all 0.3s;
}
@@ -209,7 +207,6 @@
width: 16px;
transition: 0.3s;
z-index: 1;
- /* fill: white; */
}
.darkThemeBtn label .sun {
@@ -251,21 +248,15 @@
border: 3px solid white;
color: #486c98;
padding: 0.5rem 1rem;
- /* Add padding for better appearance */
text-decoration: none;
- /* Remove underline from text */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
- /* Shadow to create a floating effect */
transition: color 0.3s, box-shadow 0.3s;
- /* Smooth transition for color and shadow changes */
}
.loginbtn:hover {
color: white;
background: #1173eb;
- /* Make sure only one hover color is applied */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
- /* Enhanced shadow effect */
}
.button {
@@ -276,12 +267,10 @@
font-size: medium;
}
-/* .......................... */
.title-wrapper {
display: grid;
- /* display: flex; */
- align-items: center;
+= align-items: center;
justify-content: center;
}
@@ -354,19 +343,16 @@
}
}
-/* Upload Project */
.modal-backdrop {
--bs-backdrop-zindex: 0;
}
-/* Media query for desktop screens */
@media (min-width: 1024px) {
.collapse {
visibility: visible;
}
}
-/* Media query for mobile screens */
@media (max-width: 768px) {
.logoTitle {
font-size: 1rem;
@@ -389,8 +375,12 @@
.sidebar.open {
left: 0;
+<<<<<<< HEAD:client/src/component/css/Navbar.css
+
+=======
display: flex;
/* Show sidebar */
+>>>>>>> upstream/main:client/src/css/Navbar.css
}
.sidebar-links {
@@ -405,7 +395,7 @@
.sidebar-links a {
text-decoration: none;
color: black !important;
- /* Change according to your theme */
+
font-size: 18px;
}
@@ -432,16 +422,16 @@
@media (min-width: 768px) {
.sidebar {
display: none;
- /* Hide on larger screens */
+
}
.sidebar-toggle {
display: none;
- /* Hide toggle on larger screens */
+
}
}
-/* Navbar styles */
+
.navbar {
display: flex;
justify-content: space-between;
diff --git a/client/src/css/Signup.css b/client/src/css/Signup.css
index f7ab315..595bb6e 100644
--- a/client/src/css/Signup.css
+++ b/client/src/css/Signup.css
@@ -4,10 +4,12 @@
max-width: 100%;
background: white;
border-radius: 15px;
+ border: 2px solid #6366F1;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
overflow: hidden;
transition: all 0.3s ease;
- width: 80%;
+ width: 90%;
+ margin: 0 auto;
}
.signup-form {
@@ -23,6 +25,7 @@
font-size: 2.5rem;
color: #6366F1;
font-weight: 700;
+ margin-bottom: 20px;
}
.signup-title-line {
@@ -43,14 +46,14 @@
padding: 15px;
border-radius: 10px;
border: 1px solid #ddd;
- font-size: 1rem;
+ font-size: 1.5rem;
outline: none;
transition: all 0.3s ease;
}
.signup-input:focus {
border-color: #6366F1;
- box-shadow: 0 0 5px rgba(111, 44, 145, 0.5);
+ box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
}
.signup-submit {
@@ -63,6 +66,7 @@
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
+ font-weight: bold;
}
.signup-submit:hover {
@@ -82,12 +86,13 @@
}
.signup-link:hover {
- color: #6366F1;
+ color: #4b56e8;
}
@media (max-width: 600px) {
.signup-wrapper {
padding: 20px;
+ width: 95%;
}
.signup-title {
@@ -106,4 +111,4 @@
.signup-submit {
padding: 12px 0;
}
-}
\ No newline at end of file
+}
diff --git a/client/src/index.css b/client/src/index.css
index 2f5adf3..dcf216a 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -68,25 +68,77 @@ html.dark-mode {
background: #a2a2a2;
}
-/* Dark Theme Scrollbar */
body.dark-mode ::-webkit-scrollbar {
width: 12px;
}
body.dark-mode ::-webkit-scrollbar-track {
background: #000000;
- /* Black track */
}
body.dark-mode ::-webkit-scrollbar-thumb {
background-color: #ffffff;
- /* White thumb */
border-radius: 10px;
border: 3px solid #1a1a1a;
- /* Dark border for the thumb */
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
background: #e5e5e5;
- /* Lighter color on hover */
-}
\ No newline at end of file
+}
+
+ @layer components{
+ .animate-stroke{
+ text-transform:uppercase;
+ animation:stroke 2.5s infinite alternate;
+ stroke-width:5;
+ stroke:#5f6786;
+ font-size:80px;
+ font-family:"Arial",sans-serif;
+ }
+ }
+ body{
+ width:100%;
+ height:auto;
+ margin:0;
+ padding:0;
+ background:white;
+
+ }
+ @keyframes stroke{
+ 0%{
+ fill:#fff;
+ stroke:#dfe2e4;
+ stroke-dashoffset:25%;
+ stroke-dasharray:0 50%;
+ stroke-width:2;
+ }
+ 70%{
+ fill:#fff;
+ stroke:#dfe2e4;
+ }
+ 80% {
+ fill: #fff;
+ stroke:#dfe2e4;
+ stroke-width: 3;
+ }
+ 100% {
+ fill: #fff;
+ stroke: #dfe2e4;
+ stroke-dashoffset: -25%;
+ stroke-dasharray: 50% 0;
+ stroke-width: 0;
+ text-shadow: 0 0 10px #fff, 0 0 15px whitesmoke;
+ }
+ }
+ .tooltip {
+ @apply relative;
+ }
+
+ .tooltip::after {
+ @apply absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded py-1 px-2 opacity-0 transition-opacity duration-300 pointer-events-none;
+ content: attr(data-tooltip);
+ }
+
+ .tooltip:hover::after {
+ @apply opacity-100;
+ }
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 5f7d043..16926b4 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -4,8 +4,12 @@ export default {
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
+ darkMode:'class',
theme: {
extend: {
+ boxShadow: {
+ 'custom-pink': "rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px",
+ },
colors:{
"blue-main":"#0000ff",
}