program finalizat

User/render/css/reset_password.css

@@ -1,110 +1,151 @@
 body, html {
-    height: 100%;
-    width: 100%;
+    height: 100vh;
+    width: 100vw;
     margin: 0;
     padding: 0;
 
-    font-family: "Roboto", sans-serif;
-    font-weight: 500;
-    font-style: normal;
+    font-family: "Pridi", sans-serif; /* Use sans-serif fallback */
+    background-color: #4A628A;
+}
 
-    background-image: url('../assets/background.png');
-    background-size: cover;
-    background-repeat: no-repeat;
+h4, h2, h1{
+    margin: 0;
+}
 
+.page{
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .container {
-    opacity: 0;
-
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-    min-height: 100vh;
-}
-
-.header {
-    color: #1B1A55;
-    font-size: 4vh;
-    text-transform: uppercase;
-    line-height: 2.5rem;
-    margin-bottom: 10rem;
-}
-
-.login-form {
-    background-color: #535C91;
-    opacity: 71;
-    padding: 9vh 3vh 5vh;
-    border-radius: 1rem;
-    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
-    width: 25%;
-}
-
-.login-form-title {
-    margin: 0 0 5vh 0;
-    text-align: center;
-}
-
-.login-form-title h2 {
-    color: #FFFFFF;
-    font-size: 5vh;
-    margin: 0;
-    padding: 0;
-}
-
-.login-form hr {
-    width: 40%;
-}
-
-.login-form-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-input {
-    text-align: center;
-    color: white;
-    font-weight: bold;
-    font-size: 1.2rem;
-    width: 70%;
-    padding: 1rem;
-    margin: 0.7rem;
-    background-color: #1B1A55;
     border-radius: 10px;
-}
-
-button {
-    font-weight: bold;
+    background: linear-gradient(to bottom,  rgba(74, 98, 138, 0.0) 30%, rgba(186, 237, 255, 0.7));
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 90%;
     width: 35%;
-    font-size: 1rem;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-    margin-top: 1rem;
-    cursor: pointer;
 }
 
-button:hover {
-    filter: brightness(85%);
+.header{
+    display: flex;
+    width: 80%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 20%;
+    text-align: center;
+    padding-bottom: 16px;
+    padding-top: 16px;
+}
+
+.title{
+    font-size: 48px;
+    font-weight: 500;
+    letter-spacing: -1px;
+    color: white;
+}
+
+.subheading{
+    font-size: 16px;
+    letter-spacing: -0.5px;
+    padding-top: 8px;
+    color: rgba(255,255,255, 0.8);
+}
+
+.login-form{
+    height: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    width: 80%;
+}
+
+.login-title {
+    font-size: 24px;
+    font-weight: 500;
+    color: white;
+    margin-bottom: 16px;
+}
+
+.login-form-content input {
+    width: 100%;
+    padding: 15px;
+    margin: 10px 0;
+    border: 1px solid #ccc; /* Light gray border */
+    border-radius: 8px; /* Rounded corners */
+    font-size: 1em;
+    font-family: inherit;
+    box-sizing: border-box;
+    background-color: #f9f9f9; /* Light background */
+    color: #333; /* Dark text color */
+    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for interaction */
+}
+
+/* Placeholder Text Styling */
+.login-form-content input::placeholder {
+    color: #aaa; /* Lighter color for placeholders */
+}
+
+/* Focus State Styling */
+.login-form-content input:focus {
+    outline: none; /* Remove default focus outline */
+    border-color: #4A628A; /* Blue border on focus */
+    box-shadow: 0 0 5px rgba(74, 98, 138, 0.5); /* Subtle shadow for focus */
+    background-color: #fff; /* Slightly brighter background on focus */
+}
+
+/* Input Field Hover Effect */
+.login-form-content input:hover {
+    border-color: #888; /* Darker gray border on hover */
+}
+
+/* Disabled Input Styling */
+.login-form-content input:disabled {
+    background-color: #e0e0e0; /* Light gray background for disabled input */
+    cursor: not-allowed; /* Show "not allowed" cursor */
+    opacity: 0.7; /* Slight transparency */
 }
 
 .login-form-footer {
-    margin-top: 3vh;
     display: flex;
-    flex-wrap: wrap;
-    align-content: center;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between; /* Align buttons next to each other */
     align-items: center;
-    justify-content: space-evenly;
+    gap: 10px; /* Space between buttons */
+    margin-top: 20px;
+}
+
+/* Styling for buttons */
+.login-form-footer button {
+    flex: 1; /* Ensure buttons are equal width */
+    padding: 16px;
+    font-weight: 300;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button[name="underline"] {
+    background-color: transparent; /* No background */
+    border: none; /* Remove default button border */
+    color: #4A628A; /* Set text color */
+    font-size: 1em; /* Set font size */
+    cursor: pointer; /* Add pointer cursor for interactivity */
+    text-decoration: underline; /* Underline text */
+    padding: 0; /* Remove default padding */
 }
 
 button[name="submit"] {
-    background-color: #F44336;
-    color: white;
+    width: 100%;
+    background-color: #4A628A; /* Blue background */
+    color: white; /* White text color */
 }
-
-button[name="signup"] {
-    background-color: #2196F3;
-    color: white;
-}