source: db_tsh/Views/Account/RegisterOrLogin.cshtml

main
Last change on this file was 705d6f5, checked in by ardit <ardit@…>, 3 days ago

Commiting all files of project - 20250224
  • Property mode set to 100644
File size: 6.7 KB
RevLine 
[705d6f5]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>
Note: See TracBrowser for help on using the repository browser.