|
4 | 4 | <title>Login - DevOps App</title> |
5 | 5 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/> |
6 | 6 | <style> |
7 | | - body { |
8 | | - background: linear-gradient(135deg, #667eea, #764ba2); |
9 | | - height: 100vh; |
| 7 | + /* Fullscreen background image with blur */ |
| 8 | + body, html { |
| 9 | + height: 100%; |
| 10 | + margin: 0; |
10 | 11 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| 12 | + overflow: hidden; |
| 13 | + } |
| 14 | + |
| 15 | + .bg-image { |
| 16 | + background: url('https://images.unsplash.com/photo-1537432376769-00a6d3f5d4a7?auto=format&fit=crop&w=1470&q=80') no-repeat center center fixed; |
| 17 | + background-size: cover; |
| 18 | + filter: blur(8px); |
| 19 | + height: 100%; |
| 20 | + width: 100%; |
| 21 | + position: fixed; |
| 22 | + top: 0; |
| 23 | + left: 0; |
| 24 | + z-index: -1; |
| 25 | + } |
| 26 | + |
| 27 | + /* Overlay to darken background for better contrast */ |
| 28 | + .bg-overlay { |
| 29 | + position: fixed; |
| 30 | + top: 0; left: 0; width: 100%; height: 100%; |
| 31 | + background-color: rgba(20, 20, 35, 0.5); |
| 32 | + z-index: 0; |
| 33 | + } |
| 34 | + |
| 35 | + /* Container to keep content above background */ |
| 36 | + .container { |
| 37 | + position: relative; |
| 38 | + z-index: 1; |
| 39 | + height: 100vh; |
11 | 40 | } |
| 41 | + |
| 42 | + /* Login card with shadow and rounded corners */ |
12 | 43 | .card { |
13 | | - border-radius: 15px; |
14 | | - box-shadow: 0 8px 25px rgba(0,0,0,0.15); |
15 | | - transition: transform 0.3s ease; |
| 44 | + border-radius: 20px; |
| 45 | + box-shadow: 0 15px 40px rgba(0,0,0,0.5); |
| 46 | + background-color: rgba(255, 255, 255, 0.95); |
| 47 | + transition: transform 0.3s ease, box-shadow 0.3s ease; |
16 | 48 | } |
17 | 49 | .card:hover { |
18 | | - transform: translateY(-8px); |
| 50 | + transform: translateY(-10px); |
| 51 | + box-shadow: 0 25px 60px rgba(0,0,0,0.7); |
19 | 52 | } |
| 53 | + |
20 | 54 | .btn-primary { |
21 | 55 | background: #764ba2; |
22 | 56 | border: none; |
|
50 | 84 | color: white; |
51 | 85 | font-weight: 700; |
52 | 86 | font-size: 1.8rem; |
53 | | - border-top-left-radius: 15px; |
54 | | - border-top-right-radius: 15px; |
| 87 | + border-top-left-radius: 20px; |
| 88 | + border-top-right-radius: 20px; |
55 | 89 | } |
56 | 90 | </style> |
57 | 91 | </head> |
58 | 92 | <body> |
59 | | -<div class="container d-flex justify-content-center align-items-center" style="height:100vh;"> |
60 | | - <div class="col-md-5"> |
61 | | - <div class="card shadow-sm"> |
62 | | - <div class="card-header text-center"> |
63 | | - Login |
64 | | - </div> |
65 | | - <div class="card-body p-4"> |
66 | | - <form method="post" th:action="@{/login}"> |
67 | | - <div class="mb-4"> |
68 | | - <label for="username" class="form-label">Email address</label> |
69 | | - <input type="text" class="form-control" id="username" name="username" placeholder="Enter email" required/> |
70 | | - </div> |
71 | | - <div class="mb-4"> |
72 | | - <label for="password" class="form-label">Password</label> |
73 | | - <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required/> |
| 93 | + <div class="bg-image"></div> |
| 94 | + <div class="bg-overlay"></div> |
| 95 | + |
| 96 | + <div class="container d-flex justify-content-center align-items-center"> |
| 97 | + <div class="col-md-5"> |
| 98 | + <div class="card shadow-sm"> |
| 99 | + <div class="card-header text-center"> |
| 100 | + Login |
| 101 | + </div> |
| 102 | + <div class="card-body p-4"> |
| 103 | + <form method="post" th:action="@{/login}"> |
| 104 | + <div class="mb-4"> |
| 105 | + <label for="username" class="form-label">Email address</label> |
| 106 | + <input type="text" class="form-control" id="username" name="username" placeholder="Enter email" required/> |
| 107 | + </div> |
| 108 | + <div class="mb-4"> |
| 109 | + <label for="password" class="form-label">Password</label> |
| 110 | + <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required/> |
| 111 | + </div> |
| 112 | + <div th:if="${errorMsg}" class="alert alert-danger" th:text="${errorMsg}"></div> |
| 113 | + <div th:if="${msg}" class="alert alert-success" th:text="${msg}"></div> |
| 114 | + <button type="submit" class="btn btn-primary w-100">Login</button> |
| 115 | + </form> |
| 116 | + <div class="mt-3 text-center"> |
| 117 | + <a href="/register">New user? Register here</a> |
74 | 118 | </div> |
75 | | - <div th:if="${errorMsg}" class="alert alert-danger" th:text="${errorMsg}"></div> |
76 | | - <div th:if="${msg}" class="alert alert-success" th:text="${msg}"></div> |
77 | | - <button type="submit" class="btn btn-primary w-100">Login</button> |
78 | | - </form> |
79 | | - <div class="mt-3 text-center"> |
80 | | - <a href="/register">New user? Register here</a> |
81 | 119 | </div> |
82 | 120 | </div> |
83 | 121 | </div> |
84 | 122 | </div> |
85 | | -</div> |
86 | 123 | </body> |
87 | 124 | </html> |
0 commit comments