Skip to content
This repository was archived by the owner on Jan 7, 2026. It is now read-only.

Commit b5c9461

Browse files
StolasStolas
authored
Merge pull request #7 from Stolas/copilot/redesign-nginx-landing-page
Redesign nginx landing page with modern dark blueish theme
2 parents ecca42c + 12c994d commit b5c9461

4 files changed

Lines changed: 444 additions & 23 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ frigate_config.yml
77

88
# Generated configurations
99
nginx/nginx.conf
10+
nginx/index.html
1011

1112
# Vim temporary files
1213
*~

‎nginx/index.html.template‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Home IoT/SCADA Stack</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header>
12+
<div class="logo-section">
13+
<svg class="nginx-logo" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
14+
<text x="10" y="35" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#009639">nginx</text>
15+
</svg>
16+
</div>
17+
<h1>Home IoT/SCADA Stack</h1>
18+
<p class="subtitle">Containerized IoT & Home Automation Platform</p>
19+
</header>
20+
21+
<main>
22+
<section class="services-section">
23+
<h2>Available Services</h2>
24+
<div class="services-grid" id="services-grid">
25+
<!-- Services will be injected here by startup.sh -->
26+
SERVICES_LIST
27+
</div>
28+
</section>
29+
30+
<section class="info-section">
31+
<div class="info-card">
32+
<h3>📚 Documentation</h3>
33+
<p>Access comprehensive documentation for setup and configuration</p>
34+
<a href="https://github.com/Stolas/Home-IOT-SCADA-Stack" target="_blank" class="doc-link">View Documentation</a>
35+
</div>
36+
37+
<div class="info-card">
38+
<h3>🔧 Features</h3>
39+
<ul class="features-list">
40+
<li>MQTT Broker (Mosquitto)</li>
41+
<li>Time Series Database (InfluxDB)</li>
42+
<li>Data Visualization (Grafana)</li>
43+
<li>Flow Automation (Node-RED)</li>
44+
<li>NVR & Object Detection (Frigate)</li>
45+
<li>Zigbee Gateway (Zigbee2MQTT)</li>
46+
</ul>
47+
</div>
48+
49+
<div class="info-card">
50+
<h3>🛡️ Security</h3>
51+
<p>Powered by Podman with automatic secret generation and hostname-based routing</p>
52+
<a href="https://github.com/Stolas/Home-IOT-SCADA-Stack#security" target="_blank" class="doc-link">Security Details</a>
53+
</div>
54+
</section>
55+
</main>
56+
57+
<footer>
58+
<p>Powered by <strong>nginx</strong> | Running on <strong>Podman</strong></p>
59+
<p class="footer-note">Home IoT/SCADA Stack</p>
60+
</footer>
61+
</div>
62+
</body>
63+
</html>

‎nginx/style.css‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
/* Modern Dark Blueish Theme */
2+
:root {
3+
--primary-bg: #0a1628;
4+
--secondary-bg: #132337;
5+
--card-bg: #1a2f4a;
6+
--accent-blue: #2563eb;
7+
--accent-teal: #06b6d4;
8+
--text-primary: #e2e8f0;
9+
--text-secondary: #94a3b8;
10+
--border-color: #2d4663;
11+
--hover-bg: #243b5a;
12+
--success-green: #009639;
13+
}
14+
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
21+
body {
22+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
23+
background: linear-gradient(135deg, var(--primary-bg) 0%, #1a2c47 100%);
24+
color: var(--text-primary);
25+
line-height: 1.6;
26+
min-height: 100vh;
27+
}
28+
29+
.container {
30+
max-width: 1200px;
31+
margin: 0 auto;
32+
padding: 2rem 1.5rem;
33+
}
34+
35+
/* Header Styles */
36+
header {
37+
text-align: center;
38+
margin-bottom: 3rem;
39+
padding: 2rem 0;
40+
}
41+
42+
.logo-section {
43+
margin-bottom: 1.5rem;
44+
}
45+
46+
.nginx-logo {
47+
width: 120px;
48+
height: auto;
49+
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
50+
}
51+
52+
h1 {
53+
font-size: 2.5rem;
54+
font-weight: 700;
55+
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-teal) 100%);
56+
-webkit-background-clip: text;
57+
-webkit-text-fill-color: transparent;
58+
background-clip: text;
59+
margin-bottom: 0.5rem;
60+
letter-spacing: -0.5px;
61+
}
62+
63+
.subtitle {
64+
font-size: 1.125rem;
65+
color: var(--text-secondary);
66+
font-weight: 400;
67+
}
68+
69+
/* Services Section */
70+
.services-section {
71+
margin-bottom: 3rem;
72+
}
73+
74+
.services-section h2 {
75+
font-size: 1.75rem;
76+
margin-bottom: 1.5rem;
77+
color: var(--text-primary);
78+
border-left: 4px solid var(--accent-blue);
79+
padding-left: 1rem;
80+
}
81+
82+
.services-grid {
83+
display: grid;
84+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
85+
gap: 1.25rem;
86+
margin-bottom: 2rem;
87+
}
88+
89+
.service-card {
90+
background: var(--card-bg);
91+
border: 1px solid var(--border-color);
92+
border-radius: 12px;
93+
padding: 1.5rem;
94+
transition: all 0.3s ease;
95+
text-decoration: none;
96+
color: var(--text-primary);
97+
display: block;
98+
}
99+
100+
.service-card:hover {
101+
background: var(--hover-bg);
102+
border-color: var(--accent-blue);
103+
transform: translateY(-4px);
104+
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
105+
}
106+
107+
.service-card h3 {
108+
font-size: 1.25rem;
109+
margin-bottom: 0.5rem;
110+
color: var(--accent-teal);
111+
}
112+
113+
.service-card p {
114+
font-size: 0.95rem;
115+
color: var(--text-secondary);
116+
margin-bottom: 0.75rem;
117+
}
118+
119+
.service-card .service-url {
120+
font-size: 0.875rem;
121+
color: var(--accent-blue);
122+
font-family: 'Courier New', monospace;
123+
}
124+
125+
/* Info Section */
126+
.info-section {
127+
display: grid;
128+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
129+
gap: 1.5rem;
130+
margin-bottom: 3rem;
131+
}
132+
133+
.info-card {
134+
background: var(--secondary-bg);
135+
border: 1px solid var(--border-color);
136+
border-radius: 12px;
137+
padding: 2rem;
138+
transition: all 0.3s ease;
139+
}
140+
141+
.info-card:hover {
142+
border-color: var(--accent-blue);
143+
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
144+
}
145+
146+
.info-card h3 {
147+
font-size: 1.5rem;
148+
margin-bottom: 1rem;
149+
color: var(--text-primary);
150+
}
151+
152+
.info-card p {
153+
color: var(--text-secondary);
154+
margin-bottom: 1rem;
155+
line-height: 1.7;
156+
}
157+
158+
.features-list {
159+
list-style: none;
160+
padding-left: 0;
161+
}
162+
163+
.features-list li {
164+
padding: 0.5rem 0;
165+
padding-left: 1.5rem;
166+
color: var(--text-secondary);
167+
position: relative;
168+
}
169+
170+
.features-list li::before {
171+
content: "▸";
172+
position: absolute;
173+
left: 0;
174+
color: var(--accent-teal);
175+
font-weight: bold;
176+
}
177+
178+
.doc-link {
179+
display: inline-block;
180+
padding: 0.75rem 1.5rem;
181+
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-teal) 100%);
182+
color: white;
183+
text-decoration: none;
184+
border-radius: 8px;
185+
font-weight: 600;
186+
transition: all 0.3s ease;
187+
margin-top: 0.5rem;
188+
}
189+
190+
.doc-link:hover {
191+
transform: translateY(-2px);
192+
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
193+
}
194+
195+
/* Footer */
196+
footer {
197+
text-align: center;
198+
padding: 2rem 0;
199+
border-top: 1px solid var(--border-color);
200+
margin-top: 3rem;
201+
color: var(--text-secondary);
202+
}
203+
204+
footer p {
205+
margin: 0.5rem 0;
206+
}
207+
208+
footer strong {
209+
color: var(--success-green);
210+
font-weight: 600;
211+
}
212+
213+
.footer-note {
214+
font-size: 0.875rem;
215+
color: var(--text-secondary);
216+
}
217+
218+
/* Responsive Design */
219+
@media (max-width: 768px) {
220+
.container {
221+
padding: 1.5rem 1rem;
222+
}
223+
224+
h1 {
225+
font-size: 2rem;
226+
}
227+
228+
.subtitle {
229+
font-size: 1rem;
230+
}
231+
232+
.services-grid {
233+
grid-template-columns: 1fr;
234+
}
235+
236+
.info-section {
237+
grid-template-columns: 1fr;
238+
}
239+
240+
.nginx-logo {
241+
width: 100px;
242+
}
243+
}
244+
245+
@media (max-width: 480px) {
246+
h1 {
247+
font-size: 1.75rem;
248+
}
249+
250+
.services-section h2 {
251+
font-size: 1.5rem;
252+
}
253+
254+
.info-card {
255+
padding: 1.5rem;
256+
}
257+
258+
.service-card {
259+
padding: 1.25rem;
260+
}
261+
}
262+
263+
/* Loading Animation */
264+
@keyframes fadeIn {
265+
from {
266+
opacity: 0;
267+
transform: translateY(20px);
268+
}
269+
to {
270+
opacity: 1;
271+
transform: translateY(0);
272+
}
273+
}
274+
275+
.service-card, .info-card {
276+
animation: fadeIn 0.6s ease-out;
277+
}

0 commit comments

Comments
 (0)