| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en">
|
|---|
| 3 |
|
|---|
| 4 | <head>
|
|---|
| 5 | <meta charset="UTF-8">
|
|---|
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|---|
| 7 | <title>Login</title>
|
|---|
| 8 | <style>
|
|---|
| 9 |
|
|---|
| 10 | .header {
|
|---|
| 11 | text-align: center;
|
|---|
| 12 | padding: 30px 0;
|
|---|
| 13 | margin-bottom: 100px;
|
|---|
| 14 | }
|
|---|
| 15 |
|
|---|
| 16 | .logoheader {
|
|---|
| 17 | font-size: 36px;
|
|---|
| 18 | font-weight: bold;
|
|---|
| 19 | color: #2c3e50;
|
|---|
| 20 | }
|
|---|
| 21 |
|
|---|
| 22 | .sloganheader {
|
|---|
| 23 | font-size: 18px;
|
|---|
| 24 | color: #666;
|
|---|
| 25 | margin-top: 10px;
|
|---|
| 26 | }
|
|---|
| 27 |
|
|---|
| 28 | /*lart headeri*/
|
|---|
| 29 |
|
|---|
| 30 | body {
|
|---|
| 31 | background-color: rgb(36 49 62 / 15%);
|
|---|
| 32 | font-family: "Asap", sans-serif;
|
|---|
| 33 | margin: 0;
|
|---|
| 34 | padding: 0;
|
|---|
| 35 | }
|
|---|
| 36 |
|
|---|
| 37 | h4 {
|
|---|
| 38 | color: #ff0000;
|
|---|
| 39 | }
|
|---|
| 40 |
|
|---|
| 41 | .login {
|
|---|
| 42 | overflow: hidden;
|
|---|
| 43 | background-color: white;
|
|---|
| 44 | padding: 40px 30px 30px 30px;
|
|---|
| 45 | border-radius: 10px;
|
|---|
| 46 | position: absolute;
|
|---|
| 47 | top: 50%;
|
|---|
| 48 | left: 50%;
|
|---|
| 49 | width: 90%; /* Adjust the width as needed */
|
|---|
| 50 | max-width: 400px;
|
|---|
| 51 | -webkit-transform: translate(-50%, -50%);
|
|---|
| 52 | -moz-transform: translate(-50%, -50%);
|
|---|
| 53 | -ms-transform: translate(-50%, -50%);
|
|---|
| 54 | -o-transform: translate(-50%, -50%);
|
|---|
| 55 | transform: translate(-50%, -50%);
|
|---|
| 56 | -webkit-transition: -webkit-transform 300ms, box-shadow 300ms;
|
|---|
| 57 | -moz-transition: -moz-transform 300ms, box-shadow 300ms;
|
|---|
| 58 | transition: transform 300ms, box-shadow 300ms;
|
|---|
| 59 | box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
|
|---|
| 60 | }
|
|---|
| 61 |
|
|---|
| 62 | .login::before,
|
|---|
| 63 | .login::after {
|
|---|
| 64 | content: "";
|
|---|
| 65 | position: absolute;
|
|---|
| 66 | width: 600px;
|
|---|
| 67 | height: 600px;
|
|---|
| 68 | border-top-left-radius: 40%;
|
|---|
| 69 | border-top-right-radius: 45%;
|
|---|
| 70 | border-bottom-left-radius: 35%;
|
|---|
| 71 | border-bottom-right-radius: 40%;
|
|---|
| 72 | z-index: -1;
|
|---|
| 73 | }
|
|---|
| 74 |
|
|---|
| 75 | .login::before {
|
|---|
| 76 | left: 40%;
|
|---|
| 77 | bottom: -130%;
|
|---|
| 78 | background-color: rgba(69, 105, 144, 0.15);
|
|---|
| 79 | -webkit-animation: wawes 6s infinite linear;
|
|---|
| 80 | -moz-animation: wawes 6s infinite linear;
|
|---|
| 81 | animation: wawes 6s infinite linear;
|
|---|
| 82 | }
|
|---|
| 83 |
|
|---|
| 84 | .login::after {
|
|---|
| 85 | left: 35%;
|
|---|
| 86 | bottom: -125%;
|
|---|
| 87 | background-color: rgba(2, 128, 144, 0.2);
|
|---|
| 88 | -webkit-animation: wawes 7s infinite;
|
|---|
| 89 | -moz-animation: wawes 7s infinite;
|
|---|
| 90 | animation: wawes 7s infinite;
|
|---|
| 91 | }
|
|---|
| 92 |
|
|---|
| 93 | .login > input {
|
|---|
| 94 | font-family: "Asap", sans-serif;
|
|---|
| 95 | display: block;
|
|---|
| 96 | border-radius: 5px;
|
|---|
| 97 | font-size: 16px;
|
|---|
| 98 | background: white;
|
|---|
| 99 | width: 100%;
|
|---|
| 100 | border: 0;
|
|---|
| 101 | padding: 10px 10px;
|
|---|
| 102 | margin: 15px -10px;
|
|---|
| 103 | }
|
|---|
| 104 |
|
|---|
| 105 | .login > button {
|
|---|
| 106 | font-family: "Asap", sans-serif;
|
|---|
| 107 | cursor: pointer;
|
|---|
| 108 | color: #fff;
|
|---|
| 109 | font-size: 16px;
|
|---|
| 110 | text-transform: uppercase;
|
|---|
| 111 | width: 100%; /* Changed width */
|
|---|
| 112 | border: 0;
|
|---|
| 113 | padding: 10px 0;
|
|---|
| 114 | margin-top: 10px;
|
|---|
| 115 | margin-left: 0; /* Removed margin-left */
|
|---|
| 116 | border-radius: 5px;
|
|---|
| 117 | background-color: #f45b69;
|
|---|
| 118 | -webkit-transition: background-color 300ms;
|
|---|
| 119 | -moz-transition: background-color 300ms;
|
|---|
| 120 | transition: background-color 300ms;
|
|---|
| 121 | }
|
|---|
| 122 |
|
|---|
| 123 | .login > button:hover {
|
|---|
| 124 | background-color: #f24353;
|
|---|
| 125 | }
|
|---|
| 126 |
|
|---|
| 127 | -webkit-keyframes wawes {
|
|---|
| 128 | from
|
|---|
| 129 |
|
|---|
| 130 | {
|
|---|
| 131 | -webkit-transform: rotate(0);
|
|---|
| 132 | }
|
|---|
| 133 |
|
|---|
| 134 | to {
|
|---|
| 135 | -webkit-transform: rotate(360deg);
|
|---|
| 136 | }
|
|---|
| 137 |
|
|---|
| 138 | }
|
|---|
| 139 |
|
|---|
| 140 | -moz-keyframes wawes {
|
|---|
| 141 | from
|
|---|
| 142 |
|
|---|
| 143 | {
|
|---|
| 144 | -moz-transform: rotate(0);
|
|---|
| 145 | }
|
|---|
| 146 |
|
|---|
| 147 | to {
|
|---|
| 148 | -moz-transform: rotate(360deg);
|
|---|
| 149 | }
|
|---|
| 150 |
|
|---|
| 151 | }
|
|---|
| 152 |
|
|---|
| 153 | keyframes wawes from {
|
|---|
| 154 | -webkit-transform: rotate(0);
|
|---|
| 155 | -moz-transform: rotate(0);
|
|---|
| 156 | -ms-transform: rotate(0);
|
|---|
| 157 | -o-transform: rotate(0);
|
|---|
| 158 | transform: rotate(0);
|
|---|
| 159 | }
|
|---|
| 160 |
|
|---|
| 161 | to {
|
|---|
| 162 | -webkit-transform: rotate(360deg);
|
|---|
| 163 | -moz-transform: rotate(360deg);
|
|---|
| 164 | -ms-transform: rotate(360deg);
|
|---|
| 165 | -o-transform: rotate(360deg);
|
|---|
| 166 | transform: rotate(360deg);
|
|---|
| 167 | }
|
|---|
| 168 |
|
|---|
| 169 | a {
|
|---|
| 170 | text-decoration: none;
|
|---|
| 171 | color: rgba(255, 255, 255, 0.6);
|
|---|
| 172 | position: absolute;
|
|---|
| 173 | right: 10px;
|
|---|
| 174 | bottom: 10px;
|
|---|
| 175 | font-size: 12px;
|
|---|
| 176 | }
|
|---|
| 177 |
|
|---|
| 178 |
|
|---|
| 179 | .error-container {
|
|---|
| 180 | background-color: #f8d7da;
|
|---|
| 181 | border: 1px solid #f5c6cb;
|
|---|
| 182 | border-radius: 4px;
|
|---|
| 183 | padding: 10px;
|
|---|
| 184 | margin-bottom: 10px;
|
|---|
| 185 | width: fit-content;
|
|---|
| 186 | max-width: 45%;
|
|---|
| 187 | margin-left: 32%;
|
|---|
| 188 | }
|
|---|
| 189 |
|
|---|
| 190 | .error-text {
|
|---|
| 191 | color: #721c24;
|
|---|
| 192 | font-size: 14px;
|
|---|
| 193 | font-weight: bold;
|
|---|
| 194 | }
|
|---|
| 195 |
|
|---|
| 196 | .register-link {
|
|---|
| 197 | text-align: center; /* Center-align the text */
|
|---|
| 198 | margin-top: 20px; /* Adjust spacing */
|
|---|
| 199 | }
|
|---|
| 200 |
|
|---|
| 201 | .register-link p {
|
|---|
| 202 | margin: 0; /* Remove default paragraph margin */
|
|---|
| 203 | }
|
|---|
| 204 |
|
|---|
| 205 | .register-link a {
|
|---|
| 206 | color: #007bff; /* Blue color */
|
|---|
| 207 | text-decoration: none;
|
|---|
| 208 | font-weight: bold; /* Bold font weight */
|
|---|
| 209 | transition: color 0.3s; /* Smooth color transition */
|
|---|
| 210 | }
|
|---|
| 211 |
|
|---|
| 212 | .register-link a:hover {
|
|---|
| 213 | color: #0056b3; /* Darker blue on hover */
|
|---|
| 214 | }
|
|---|
| 215 |
|
|---|
| 216 | </style>
|
|---|
| 217 | </head>
|
|---|
| 218 |
|
|---|
| 219 | <body>
|
|---|
| 220 | <div class="header">
|
|---|
| 221 | <div class="logoheader">Trust Shield</div>
|
|---|
| 222 | <div class="sloganheader">@ViewData["message"]</div>
|
|---|
| 223 | </div>
|
|---|
| 224 | <form class="login" action="@Url.Action("RegisterOrLogin", "Account")" method="POST">
|
|---|
| 225 | <input type="text" name="email" placeholder="Email" required oninvalid="this.setCustomValidity('Please fill the box')" oninput="this.setCustomValidity('')">
|
|---|
| 226 | <input type="password" name="password" placeholder="Password" required oninvalid="this.setCustomValidity('Please fill the box')" oninput="this.setCustomValidity('')">
|
|---|
| 227 | <button type="submit">Login</button> <!-- Changed to button element -->
|
|---|
| 228 | <div class="register-link">
|
|---|
| 229 | <p>Don't have an account? <a href="@Url.Action("Register", "Account")" class="register-link">Register</a></p>
|
|---|
| 230 | </div>
|
|---|
| 231 |
|
|---|
| 232 | </form>
|
|---|
| 233 | </body>
|
|---|
| 234 |
|
|---|
| 235 | </html>
|
|---|
