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 1db018b

Browse files
changing to docker
1 parent ee75826 commit 1db018b

File tree

2 files changed

+198
-94
lines changed

2 files changed

+198
-94
lines changed
Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
1-
spring.data.mongodb.uri=mongodb://localhost:27017/devopsdb
1+
# MongoDB
2+
spring.data.mongodb.uri=mongodb://mongo-service:27017/devopsdb
23

4+
# RabbitMQ
5+
spring.rabbitmq.host=rabbitmq-service
6+
spring.rabbitmq.port=5672
7+
spring.rabbitmq.username=guest
8+
spring.rabbitmq.password=guest
9+
10+
# Memcached (via Spring Cache or custom client like spymemcached)
11+
memcached.host=memcached-service
12+
memcached.port=11211
13+
14+
# Disable Thymeleaf cache (for live reload)
315
spring.thymeleaf.cache=false
416

17+
# Security
518
spring.security.user.name=admin
619
spring.security.user.password=admin
Lines changed: 184 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,264 @@
11
<!DOCTYPE html>
22
<html xmlns:th="http://www.thymeleaf.org">
33
<head>
4-
<title>Dashboard - DevOps Tutorials</title>
4+
<title>DevOps Dashboard</title>
5+
<!-- Font Awesome for icons -->
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
9+
integrity="sha512-papbK/Ce/kZCHuKqaWmFxXlI4Rg6e+QONSh3pHklE2BvmX/k9o1kCFJrcBvM6e9hYuGgwFY9nV7Hdt4tYk0V6g=="
10+
crossorigin="anonymous"
11+
referrerpolicy="no-referrer"
12+
/>
513
<style>
614
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
15+
16+
/* Reset */
17+
* {
18+
box-sizing: border-box;
19+
}
20+
721
body {
822
font-family: 'Poppins', sans-serif;
9-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1023
margin: 0;
1124
padding: 0;
12-
color: #333;
25+
color: #222;
26+
min-height: 100vh;
27+
/* DevOps-themed background image from Unsplash - free to use */
28+
background: url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80') no-repeat center center fixed;
29+
background-size: cover;
30+
display: flex;
31+
flex-direction: column;
32+
}
33+
34+
/* Overlay to darken background for text readability */
35+
body::before {
36+
content: "";
37+
position: fixed;
38+
top: 0; left: 0; right: 0; bottom: 0;
39+
background: rgba(25, 25, 40, 0.75);
40+
z-index: 0;
1341
}
14-
.navbar {
15-
background-color: #2e0854;
16-
padding: 18px 40px;
42+
43+
/* Top navigation bar container */
44+
.topbar {
45+
position: fixed;
46+
top: 0;
47+
width: 100%;
48+
height: 60px;
49+
background-color: rgba(30, 30, 50, 0.85);
1750
color: white;
1851
display: flex;
19-
justify-content: space-between;
2052
align-items: center;
21-
box-shadow: 0 4px 15px rgba(46, 8, 84, 0.7);
53+
justify-content: center; /* center the title */
54+
z-index: 10;
55+
box-shadow: 0 3px 15px rgba(0,0,0,0.4);
56+
user-select: none;
2257
}
23-
.navbarh2 {
24-
margin:0;
25-
font-size:28px;
26-
letter-spacing:0.1em;
58+
59+
/* Title centered */
60+
.topbarh1 {
61+
font-size:2.4rem;
2762
font-weight: 700;
28-
text-shadow: 0 0 5px rgba(255,255,255,0.3);
63+
letter-spacing: 0.18em;
64+
margin: 0;
65+
flex-grow: 1;
66+
text-align: center;
67+
color: #FFD43B; /* DevOps yellow */
68+
text-shadow: 0 0 6px #FFC107;
2969
}
30-
.logout-button {
31-
background-color: #b33a3a;
32-
color: white;
33-
padding: 10px 22px;
34-
border: none;
35-
border-radius: 30px;
36-
font-size: 14px;
70+
71+
/* User info at right corner */
72+
.user-info {
73+
position: absolute;
74+
right: 20px;
75+
top: 50%;
76+
transform: translateY(-50%);
77+
display: flex;
78+
align-items: center;
79+
font-size: 15px;
3780
font-weight: 600;
38-
cursor: pointer;
39-
transition: background-color 0.3s ease;
40-
text-decoration: none;
41-
box-shadow: 0 5px 15px rgba(179, 58, 58, 0.6);
81+
background: rgba(255, 255, 255, 0.15);
82+
padding: 8px 14px;
83+
border-radius: 50px;
84+
box-shadow: 0 0 10px rgba(255, 196, 0, 0.6);
85+
cursor: default;
4286
}
43-
.logout-button:hover {
44-
background-color: #7f2828;
45-
box-shadow: 0 7px 20px rgba(127, 40, 40, 0.8);
87+
88+
.user-info i {
89+
margin-right: 10px;
90+
color: #FFD43B;
91+
font-size: 18px;
4692
}
93+
94+
/* Main container */
4795
.container {
48-
margin: 40px auto 70px auto;
49-
max-width: 960px;
50-
background: white;
51-
padding:40px50px;
52-
border-radius:20px;
96+
margin: 90px auto 60px auto;
97+
max-width: 900px;
98+
background: rgba(255,255,255,0.95);
99+
border-radius:18px;
100+
padding:40px45px;
53101
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
102+
z-index: 5;
103+
position: relative;
54104
}
105+
55106
h3 {
56-
color: #4b2a8a;
107+
color: #444;
57108
margin-bottom: 25px;
58109
font-weight: 700;
59-
letter-spacing: 0.05em;
60-
border-bottom: 3px solid #764ba2;
110+
border-bottom: 3px solid #FFD43B;
61111
padding-bottom: 8px;
112+
letter-spacing: 0.06em;
113+
font-size: 1.6rem;
62114
}
115+
63116
ul {
64-
padding-left:22px;
65-
list-style-type: disc;
66-
color: #444;
117+
list-style: none;
118+
padding-left:0;
119+
color: #333;
67120
font-size: 17px;
68-
line-height: 1.75;
69-
margin-bottom: 40px;
121+
line-height: 1.8;
122+
margin-bottom: 45px;
70123
}
124+
71125
ul li {
72-
margin-bottom: 12px;
73-
transition: color 0.3s ease;
126+
padding: 8px 0;
127+
display: flex;
128+
align-items: center;
129+
gap: 12px;
74130
cursor: default;
131+
transition: color 0.3s ease;
75132
}
133+
134+
ul li i {
135+
color: #FFD43B;
136+
min-width: 22px;
137+
text-align: center;
138+
}
139+
76140
ul li:hover {
77-
color: #764ba2;
141+
color: #bf9100;
78142
font-weight: 600;
79143
}
80-
.userinfo {
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);
89-
}
144+
90145
table {
91146
width: 100%;
92147
border-collapse: collapse;
93-
margin-top: 15px;
94148
font-size: 15.5px;
95-
box-shadow:0010pxrgba(0,0,0,0.05);
96-
border-radius: 12px;
149+
margin-top:10px;
150+
border-radius: 10px;
97151
overflow: hidden;
152+
box-shadow: 0 0 12px rgba(0,0,0,0.08);
98153
}
154+
99155
table th, table td {
100156
border: 1px solid #ddd;
101157
padding: 14px 18px;
102158
text-align: left;
103159
}
160+
104161
table th {
105-
background-color: #7f56d9;
106-
color: white;
107-
font-weight: 600;
162+
background-color: #FFD43B;
163+
color: #3c3c3c;
164+
font-weight: 700;
108165
letter-spacing: 0.03em;
109166
}
167+
110168
table tr:nth-child(even) {
111-
background-color: #faf7ff;
169+
background-color: #fef8d8;
112170
}
171+
113172
table tr:hover {
114-
background-color: #dcd4ff;
173+
background-color: #ffe763;
115174
}
175+
116176
/* About Me Section */
117177
.about-me {
118-
margin-top: 60px;
119-
background: #4b2a8a;
120-
color: white;
121-
padding: 35px40px;
122-
border-radius: 20px;
123-
box-shadow: 0 15px 40px rgba(75,42,138, 0.7);
178+
margin-top: 50px;
179+
background: #3e2a00;
180+
color: #fff9d1;
181+
padding: 32px38px;
182+
border-radius: 18px;
183+
box-shadow: 0 14px 40px rgba(255,212,59, 0.6);
124184
font-size: 16.8px;
125185
line-height: 1.6;
126186
}
187+
127188
.about-me h3 {
128-
color: #f8e8ff;
129-
margin-bottom: 20px;
189+
color: #fff4a3;
190+
margin-bottom: 18px;
130191
font-size: 26px;
131192
}
193+
132194
.about-me p {
133-
max-width: 700px;
195+
max-width: 720px;
134196
margin-bottom: 12px;
135197
}
198+
136199
.contact-info {
137-
margin-top: 15px;
200+
margin-top: 14px;
138201
}
202+
139203
.contact-info strong {
140204
display: inline-block;
141205
width: 90px;
142-
color: #d6bcfa;
206+
color: #ffe97a;
143207
}
208+
144209
.contact-info a {
145-
color: #e4d4ff;
210+
color: #fff9d1;
146211
text-decoration: underline;
147212
transition: color 0.3s ease;
148213
}
214+
149215
.contact-info a:hover {
150-
color: #f2e7ff;
216+
color: #ffffb0;
217+
}
218+
219+
/* Responsive */
220+
@media (max-width: 700px) {
221+
.container {
222+
margin: 100px 20px 60px 20px;
223+
padding: 30px 25px;
224+
}
225+
h3 {
226+
font-size: 1.3rem;
227+
}
228+
.topbar h1 {
229+
font-size: 1.7rem;
230+
letter-spacing: 0.1em;
231+
}
232+
.user-info {
233+
font-size: 14px;
234+
padding: 6px 10px;
235+
right: 12px;
236+
}
151237
}
152238
</style>
153239
</head>
154240
<body>
155-
<div class="navbar">
156-
<h2>DevOps Dashboard</h2>
157-
<a href="/logout" class="logout-button">Logout</a>
241+
<div class="topbar">
242+
<h1>DEVOPS DASHBOARD</h1>
243+
<div class="user-info">
244+
<i class="fa-solid fa-user-gear"></i>
245+
<span th:text="${username}">Username</span>
246+
<a href="/logout" class="logout-button">Logout</a>
247+
</div>
158248
</div>
159249

160-
<div class="container">
161-
<div class="userinfo">
162-
<p><strong>Logged-in User:</strong></p>
163-
<p>Username: <span th:text="${username}">[username]</span></p>
164-
<p>Email: <span th:text="${email}">[email]</span></p>
165-
</div>
166250

251+
<div class="container">
167252
<h3>DevOps Tutorials & Tools</h3>
168253
<ul>
169-
<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>
254+
<li><i class="fa-brands fa-jenkins"></i> CI/CD with Jenkins and GitHub Actions</li>
255+
<li><i class="fa-brands fa-docker"></i> Containerization using Docker and Best Practices</li>
256+
<li><i class="fa-solid fa-network-wired"></i> Microservices Architecture with Spring Boot and Kubernetes</li>
257+
<li><i class="fa-solid fa-code-branch"></i> Infrastructure as Code with Terraform & CloudFormation</li>
258+
<li><i class="fa-solid fa-chart-line"></i> Monitoring and Alerting with Prometheus & Grafana</li>
259+
<li><i class="fa-brands fa-aws"></i> Cloud Providers: AWS, Azure, GCP Fundamentals</li>
260+
<li><i class="fa-solid fa-shield-halved"></i> Security and Compliance in DevOps Pipelines</li>
261+
<li><i class="fa-solid fa-vial-virus"></i> Automated Testing and Quality Gates with SonarQube</li>
179262
</ul>
180263

181264
<h3>All Registered Users</h3>
@@ -207,5 +290,13 @@ <h3>About Me</h3>
207290
</div>
208291
</section>
209292
</div>
293+
294+
<footer>
295+
&copy; 2025 — Made by <strong>Deepak Sagar</strong> |
296+
Contact: <a href="mailto:sagardeepak@example.com">sagardeepak@example.com</a> | All Rights Reserved.
297+
</footer>
298+
299+
300+
210301
</body>
211302
</html>

0 commit comments

Comments
(0)

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