Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7b5377e

Browse files
spring-boot application
1 parent 600909a commit 7b5377e

File tree

3 files changed

+228
-108
lines changed

3 files changed

+228
-108
lines changed

‎src/main/resources/templates/dashboard.html

Lines changed: 79 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,108 +3,131 @@
33
<head>
44
<title>Dashboard - DevOps Tutorials</title>
55
<style>
6+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
67
body {
7-
font-family: 'Segoe UI', sans-serif;
8-
background: #f0f2f5;
8+
font-family: 'Poppins', sans-serif;
9+
background: #eef2f7;
910
margin: 0;
1011
padding: 0;
1112
}
1213
.navbar {
13-
background-color: #2c3e50;
14-
padding: 15px30px;
14+
background-color: #4a148c;
15+
padding: 18px40px;
1516
color: white;
1617
display: flex;
1718
justify-content: space-between;
1819
align-items: center;
20+
box-shadow: 0 4px 12px rgba(74, 20, 140, 0.3);
1921
}
2022
.navbar h2 {
2123
margin: 0;
22-
font-size: 24px;
24+
font-size: 28px;
25+
letter-spacing: 0.08em;
26+
font-weight: 700;
2327
}
2428
.logout-button {
25-
background-color: #e74c3c;
29+
background-color: #7b1fa2;
2630
color: white;
27-
padding: 10px 16px;
31+
padding: 10px 20px;
2832
border: none;
29-
border-radius: 6px;
33+
border-radius: 25px;
3034
font-size: 14px;
35+
font-weight: 600;
3136
cursor: pointer;
3237
transition: background-color 0.3s ease;
3338
text-decoration: none;
39+
box-shadow: 0 4px 12px rgba(123, 31, 162, 0.5);
3440
}
3541
.logout-button:hover {
36-
background-color: #c0392b;
42+
background-color: #4a148c;
43+
box-shadow: 0 6px 16px rgba(74, 20, 140, 0.8);
3744
}
3845
.container {
39-
margin: 30px auto;
40-
max-width: 1000px;
46+
margin: 40px auto;
47+
max-width: 900px;
4148
background: white;
42-
padding: 30px;
43-
border-radius: 12px;
44-
box-shadow: 0 8px16px rgba(0,0,0,0.1);
49+
padding: 35px40px;
50+
border-radius: 15px;
51+
box-shadow: 0 16px 30pxrgba(0,0,0,0.07);
4552
}
4653
h3 {
47-
color: #333;
54+
color: #4a148c;
55+
margin-bottom: 25px;
56+
font-weight: 600;
57+
letter-spacing: 0.04em;
4858
}
4959
ul {
5060
padding-left: 20px;
61+
list-style-type: disc;
62+
color: #333;
63+
font-size: 16px;
64+
line-height: 1.6;
65+
}
66+
.userinfo {
67+
margin-bottom: 30px;
68+
background-color: #f9f9f9;
69+
padding: 20px 25px;
70+
border-left: 6px solid #4a148c;
71+
border-radius: 8px;
72+
font-size: 16px;
73+
color: #333;
5174
}
5275
table {
5376
width: 100%;
5477
border-collapse: collapse;
55-
margin-top: 25px;
78+
margin-top: 15px;
79+
font-size: 15px;
5680
}
5781
table th, table td {
58-
border: 1px solid #ccc;
59-
padding: 12px;
82+
border: 1px solid #ddd;
83+
padding: 12px15px;
6084
text-align: left;
6185
}
6286
table th {
63-
background: #eee;
87+
background-color: #7b1fa2;
88+
color: white;
89+
font-weight: 600;
6490
}
65-
.userinfo {
66-
margin-top: 10px;
67-
background-color: #f9f9f9;
68-
padding: 15px;
69-
border-left: 4px solid #3498db;
91+
table tr:nth-child(even) {
92+
background-color: #f4f0fa;
7093
}
7194
</style>
7295
</head>
7396
<body>
74-
<div class="navbar">
75-
<h2>DevOps Dashboard</h2>
76-
<a href="/logout" class="logout-button">Logout</a>
77-
</div>
78-
79-
<div class="container">
80-
<div class="userinfo">
81-
<p><strong>Logged-in User:</strong></p>
82-
<p>Username: <span th:text="${username}"></span></p>
83-
<p>Email: <span th:text="${email}"></span></p>
97+
<div class="navbar">
98+
<h2>DevOps Dashboard</h2>
99+
<a href="/logout" class="logout-button">Logout</a>
84100
</div>
85101

86-
<h3>DevOps Tutorials & Tools</h3>
87-
<ul>
88-
<li th:each="item : ${materials}" th:text="${item}"></li>
89-
</ul>
102+
<div class="container">
103+
<div class="userinfo">
104+
<p><strong>Logged-in User:</strong></p>
105+
<p>Username: <span th:text="${username}">[username]</span></p>
106+
<p>Email: <span th:text="${email}">[email]</span></p>
107+
</div>
108+
109+
<h3>DevOps Tutorials & Tools</h3>
110+
<ul>
111+
<li th:each="item : ${materials}" th:text="${item}">Sample tutorial/tool</li>
112+
</ul>
90113

91-
<h3>All Registered Users</h3>
92-
<table>
93-
<thead>
94-
<tr>
95-
<th>#</th>
96-
<th>Username</th>
97-
<th>Email</th>
98-
</tr>
99-
</thead>
100-
<tbody>
101-
<tr th:each="user, iterStat : ${allUsers}">
102-
<td th:text="${iterStat.index + 1}"></td>
103-
<td th:text="${user.username}"></td>
104-
<td th:text="${user.email}"></td>
105-
</tr>
106-
</tbody>
107-
</table>
108-
</div>
114+
<h3>All Registered Users</h3>
115+
<table>
116+
<thead>
117+
<tr>
118+
<th>#</th>
119+
<th>Username</th>
120+
<th>Email</th>
121+
</tr>
122+
</thead>
123+
<tbody>
124+
<tr th:each="user, iterStat : ${allUsers}">
125+
<td th:text="${iterStat.index + 1}">1</td>
126+
<td th:text="${user.username}">sampleUser</td>
127+
<td th:text="${user.email}">sample@example.com</td>
128+
</tr>
129+
</tbody>
130+
</table>
131+
</div>
109132
</body>
110133
</html>

‎src/main/resources/templates/login.html

Lines changed: 73 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,81 @@
33
<head>
44
<title>Login - DevOps App</title>
55
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
6+
<style>
7+
body {
8+
background: linear-gradient(135deg, #667eea, #764ba2);
9+
height: 100vh;
10+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11+
}
12+
.card {
13+
border-radius: 15px;
14+
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
15+
transition: transform 0.3s ease;
16+
}
17+
.card:hover {
18+
transform: translateY(-8px);
19+
}
20+
.btn-primary {
21+
background: #764ba2;
22+
border: none;
23+
font-weight: 600;
24+
letter-spacing: 0.05em;
25+
transition: background 0.3s ease;
26+
}
27+
.btn-primary:hover {
28+
background: #5a3780;
29+
}
30+
a {
31+
color: #764ba2;
32+
font-weight: 500;
33+
text-decoration: none;
34+
transition: color 0.3s ease;
35+
}
36+
a:hover {
37+
color: #5a3780;
38+
text-decoration: underline;
39+
}
40+
.form-label {
41+
font-weight: 600;
42+
color: #333;
43+
}
44+
.alert {
45+
border-radius: 10px;
46+
font-weight: 500;
47+
}
48+
.card-header {
49+
background: #764ba2;
50+
color: white;
51+
font-weight: 700;
52+
font-size: 1.8rem;
53+
border-top-left-radius: 15px;
54+
border-top-right-radius: 15px;
55+
}
56+
</style>
657
</head>
7-
<body class="bg-light">
8-
<div class="container mt-5">
9-
<div class="row justify-content-center">
10-
<div class="col-md-5">
11-
<div class="card shadow-sm">
12-
<div class="card-header text-center">
13-
<h3>Login</h3>
14-
</div>
15-
<div class="card-body">
16-
<form method="post" th:action="@{/login}">
17-
<div class="mb-3">
18-
<label for="username" class="form-label">Email address</label>
19-
<input type="text" class="form-control" id="username" name="username" placeholder="Enter email" required/>
20-
</div>
21-
<div class="mb-3">
22-
<label for="password" class="form-label">Password</label>
23-
<input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required/>
24-
</div>
25-
<div th:if="${errorMsg}" class="alert alert-danger" th:text="${errorMsg}"></div>
26-
<div th:if="${msg}" class="alert alert-success" th:text="${msg}"></div>
27-
<button type="submit" class="btn btn-primary w-100">Login</button>
28-
</form>
29-
<div class="mt-3 text-center">
30-
<a href="/register">New user? Register here</a>
58+
<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/>
3174
</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>
3281
</div>
3382
</div>
3483
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /