source: src/main/resources/templates/login.html

Last change on this file was fdfbdde, checked in by Stojilkova Sara <sara.stojilkova.students.finki.ukim.mk>, 9 months ago

Initial commit
  • Property mode set to 100644
File size: 3.6 KB
Line 
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 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
8 integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
9 <title>Login</title>
10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11
12 <style>
13 body {
14 background-size: cover;
15 background-repeat: no-repeat;
16 background-attachment: fixed;
17 margin: 0;
18 padding: 0;
19 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20 }
21
22 .container {
23 display: flex;
24 justify-content: center;
25 align-items: center;
26 min-height: 100vh;
27 }
28
29 .card {
30 background: rgba(255, 255, 255, 0.9);
31 border: none;
32 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
33 border-radius: 10px;
34 width: 450px;
35 }
36
37 .card-title {
38 text-align: center;
39 font-size: 24px;
40 font-weight: bold;
41 margin-bottom: 20px;
42 color: #333;
43 }
44
45 .form-label {
46 font-weight: bold;
47 }
48
49 .form-control {
50 border: 2px solid #ccc; /* Increased border width */
51 border-radius: 5px;
52 padding: 16px; /* Increased padding */
53 font-weight: bold; /* Increased font weight */
54 }
55
56 .form-control:focus {
57 border-color: #007bff;
58 box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
59 }
60
61 .btn-primary {
62 background-color: #007bff;
63 border: none;
64 border-radius: 5px;
65 padding: 12px 24px; /* Increased padding */
66 font-size: 16px;
67 font-weight: bold;
68 color: white;
69 transition: background-color 0.3s ease;
70 }
71
72 .btn-primary:hover {
73 background-color: #0056b3;
74 }
75
76 .card-footer {
77 text-align: center;
78 background-color: #f8f9fa;
79 border-top: 1px solid #ccc;
80 border-radius: 0 0 10px 10px;
81 padding: 10px;
82 }
83 </style>
84
85</head>
86
87<body>
88<div class="container">
89 <div class="card">
90 <div class="card-body">
91 <h2 class="card-title">Login</h2>
92 <form method="post" action="/login">
93
94 <div class="mb-3">
95 <label for="username" class="form-label">Username</label>
96 <input type="text" class="form-control" id="username" name="username"
97 placeholder="Enter your username">
98 </div>
99
100 <div class="mb-3">
101 <label for="password" class="form-label">Password</label>
102 <input type="password" class="form-control" id="password" name="password"
103 placeholder="Enter your password">
104 </div>
105
106 <div class="d-grid">
107 <button type="submit" class="btn btn-primary">Login</button>
108 </div>
109 </form>
110 </div>
111 <div class="card-footer">
112 <p>&copy; 2023 Your STMA</p>
113 </div>
114 </div>
115</div>
116
117<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
118 integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
119
120</body>
121
122</html>
Note: See TracBrowser for help on using the repository browser.