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 ee75826

Browse files
spring-boot application
1 parent 7b5377e commit ee75826

File tree

1 file changed

+111
-33
lines changed

1 file changed

+111
-33
lines changed

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

Lines changed: 111 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,90 +6,148 @@
66
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
77
body {
88
font-family: 'Poppins', sans-serif;
9-
background: #eef2f7;
9+
background: linear-gradient(135deg,#667eea0%,#764ba2100%);
1010
margin: 0;
1111
padding: 0;
12+
color: #333;
1213
}
1314
.navbar {
14-
background-color: #4a148c;
15+
background-color: #2e0854;
1516
padding: 18px 40px;
1617
color: white;
1718
display: flex;
1819
justify-content: space-between;
1920
align-items: center;
20-
box-shadow: 0 4px 12px rgba(74,20,140, 0.3);
21+
box-shadow: 0 4px 15px rgba(46,8,84, 0.7);
2122
}
2223
.navbar h2 {
2324
margin: 0;
2425
font-size: 28px;
25-
letter-spacing: 0.08em;
26+
letter-spacing: 0.1em;
2627
font-weight: 700;
28+
text-shadow: 0 0 5px rgba(255,255,255,0.3);
2729
}
2830
.logout-button {
29-
background-color: #7b1fa2;
31+
background-color: #b33a3a;
3032
color: white;
31-
padding: 10px 20px;
33+
padding: 10px 22px;
3234
border: none;
33-
border-radius: 25px;
35+
border-radius: 30px;
3436
font-size: 14px;
3537
font-weight: 600;
3638
cursor: pointer;
3739
transition: background-color 0.3s ease;
3840
text-decoration: none;
39-
box-shadow: 0 4px12px rgba(123,31,162, 0.5);
41+
box-shadow: 0 5px15px rgba(179,58,58, 0.6);
4042
}
4143
.logout-button:hover {
42-
background-color: #4a148c;
43-
box-shadow: 0 6px16px rgba(74,20,140, 0.8);
44+
background-color: #7f2828;
45+
box-shadow: 0 7px20px rgba(127,40,40, 0.8);
4446
}
4547
.container {
46-
margin: 40px auto;
47-
max-width: 900px;
48+
margin: 40px auto70px auto;
49+
max-width: 960px;
4850
background: white;
49-
padding: 35px40px;
50-
border-radius: 15px;
51-
box-shadow: 0 16px30px rgba(0,0,0,0.07);
51+
padding: 40px50px;
52+
border-radius: 20px;
53+
box-shadow: 0 20px50px rgba(0,0,0,0.15);
5254
}
5355
h3 {
54-
color: #4a148c;
56+
color: #4b2a8a;
5557
margin-bottom: 25px;
56-
font-weight: 600;
57-
letter-spacing: 0.04em;
58+
font-weight: 700;
59+
letter-spacing: 0.05em;
60+
border-bottom: 3px solid #764ba2;
61+
padding-bottom: 8px;
5862
}
5963
ul {
60-
padding-left: 20px;
64+
padding-left: 22px;
6165
list-style-type: disc;
62-
color: #333;
63-
font-size: 16px;
64-
line-height: 1.6;
66+
color: #444;
67+
font-size: 17px;
68+
line-height: 1.75;
69+
margin-bottom: 40px;
70+
}
71+
ul li {
72+
margin-bottom: 12px;
73+
transition: color 0.3s ease;
74+
cursor: default;
75+
}
76+
ul li:hover {
77+
color: #764ba2;
78+
font-weight: 600;
6579
}
6680
.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;
81+
margin-bottom: 40px;
82+
background-color: #f0f0ff;
83+
padding: 25px 30px;
84+
border-left: 7px solid #764ba2;
85+
border-radius: 12px;
86+
font-size: 17px;
87+
color: #222;
88+
box-shadow: 0 6px 18px rgba(118, 75, 162, 0.2);
7489
}
7590
table {
7691
width: 100%;
7792
border-collapse: collapse;
7893
margin-top: 15px;
79-
font-size: 15px;
94+
font-size: 15.5px;
95+
box-shadow: 0 0 10px rgba(0,0,0,0.05);
96+
border-radius: 12px;
97+
overflow: hidden;
8098
}
8199
table th, table td {
82100
border: 1px solid #ddd;
83-
padding: 12px15px;
101+
padding: 14px18px;
84102
text-align: left;
85103
}
86104
table th {
87-
background-color: #7b1fa2;
105+
background-color: #7f56d9;
88106
color: white;
89107
font-weight: 600;
108+
letter-spacing: 0.03em;
90109
}
91110
table tr:nth-child(even) {
92-
background-color: #f4f0fa;
111+
background-color: #faf7ff;
112+
}
113+
table tr:hover {
114+
background-color: #dcd4ff;
115+
}
116+
/* About Me Section */
117+
.about-me {
118+
margin-top: 60px;
119+
background: #4b2a8a;
120+
color: white;
121+
padding: 35px 40px;
122+
border-radius: 20px;
123+
box-shadow: 0 15px 40px rgba(75, 42, 138, 0.7);
124+
font-size: 16.8px;
125+
line-height: 1.6;
126+
}
127+
.about-me h3 {
128+
color: #f8e8ff;
129+
margin-bottom: 20px;
130+
font-size: 26px;
131+
}
132+
.about-me p {
133+
max-width: 700px;
134+
margin-bottom: 12px;
135+
}
136+
.contact-info {
137+
margin-top: 15px;
138+
}
139+
.contact-info strong {
140+
display: inline-block;
141+
width: 90px;
142+
color: #d6bcfa;
143+
}
144+
.contact-info a {
145+
color: #e4d4ff;
146+
text-decoration: underline;
147+
transition: color 0.3s ease;
148+
}
149+
.contact-info a:hover {
150+
color: #f2e7ff;
93151
}
94152
</style>
95153
</head>
@@ -109,6 +167,15 @@ <h2>DevOps Dashboard</h2>
109167
<h3>DevOps Tutorials & Tools</h3>
110168
<ul>
111169
<li th:each="item : ${materials}" th:text="${item}">Sample tutorial/tool</li>
170+
<!-- Added more items for content richness -->
171+
<li>CI/CD with Jenkins and GitHub Actions</li>
172+
<li>Containerization using Docker and Best Practices</li>
173+
<li>Microservices Architecture with Spring Boot and Kubernetes</li>
174+
<li>Infrastructure as Code with Terraform & CloudFormation</li>
175+
<li>Monitoring and Alerting with Prometheus & Grafana</li>
176+
<li>Cloud Providers: AWS, Azure, GCP Fundamentals</li>
177+
<li>Security and Compliance in DevOps Pipelines</li>
178+
<li>Automated Testing and Quality Gates with SonarQube</li>
112179
</ul>
113180

114181
<h3>All Registered Users</h3>
@@ -128,6 +195,17 @@ <h3>All Registered Users</h3>
128195
</tr>
129196
</tbody>
130197
</table>
198+
199+
<section class="about-me">
200+
<h3>About Me</h3>
201+
<p>Hello! I'm <strong>Your Name</strong>, a passionate DevOps enthusiast and lifelong learner. I specialize in bridging development and operations to build efficient, scalable, and secure software pipelines.</p>
202+
<p>With hands-on experience in cloud automation, container orchestration, and continuous integration/delivery, I love helping teams accelerate their software delivery cycles while maintaining top-notch quality.</p>
203+
<div class="contact-info">
204+
<p><strong>Email:</strong> <a href="mailto:your.email@example.com">your.email@example.com</a></p>
205+
<p><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener">linkedin.com/in/yourprofile</a></p>
206+
<p><strong>GitHub:</strong> <a href="https://github.com/yourusername" target="_blank" rel="noopener">github.com/yourusername</a></p>
207+
</div>
208+
</section>
131209
</div>
132210
</body>
133211
</html>

0 commit comments

Comments
(0)

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