Stolas · Stolas · Nov 24, 2025 · Nov 24, 2025 · Nov 24, 2025 · Nov 24, 2025
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@ frigate_config.yml
 
 # Generated configurations
 nginx/nginx.conf
+nginx/index.html
 
 # Vim temporary files
 *~

diff --git a/nginx/index.html.template b/nginx/index.html.template
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home IoT/SCADA Stack</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo-section">
+                <svg class="nginx-logo" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
+                    <text x="10" y="35" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#009639">nginx</text>
+                </svg>
+            </div>
+            <h1>Home IoT/SCADA Stack</h1>
+            <p class="subtitle">Containerized IoT & Home Automation Platform</p>
+        </header>
+
+        <main>
+            <section class="services-section">
+                <h2>Available Services</h2>
+                <div class="services-grid" id="services-grid">
+                    <!-- Services will be injected here by startup.sh -->
+                    SERVICES_LIST
+                </div>
+            </section>
+
+            <section class="info-section">
+                <div class="info-card">
+                    <h3>📚 Documentation</h3>
+                    <p>Access comprehensive documentation for setup and configuration</p>
+                    <a href="https://github.com/Stolas/Home-IOT-SCADA-Stack" target="_blank" class="doc-link">View Documentation</a>
+                </div>
+
+                <div class="info-card">
+                    <h3>🔧 Features</h3>
+                    <ul class="features-list">
+                        <li>MQTT Broker (Mosquitto)</li>
+                        <li>Time Series Database (InfluxDB)</li>
+                        <li>Data Visualization (Grafana)</li>
+                        <li>Flow Automation (Node-RED)</li>
+                        <li>NVR & Object Detection (Frigate)</li>
+                        <li>Zigbee Gateway (Zigbee2MQTT)</li>
+                    </ul>
+                </div>
+
+                <div class="info-card">
+                    <h3>🛡️ Security</h3>
+                    <p>Powered by Podman with automatic secret generation and hostname-based routing</p>
+                    <a href="https://github.com/Stolas/Home-IOT-SCADA-Stack#security" target="_blank" class="doc-link">Security Details</a>
+                </div>
+            </section>
+        </main>
+
+        <footer>
+            <p>Powered by <strong>nginx</strong> | Running on <strong>Podman</strong></p>
+            <p class="footer-note">Home IoT/SCADA Stack</p>
+        </footer>
+    </div>
+</body>
+</html>
diff --git a/nginx/style.css b/nginx/style.css
@@ -0,0 +1,277 @@
+/* Modern Dark Blueish Theme */
+:root {
+    --primary-bg: #0a1628;
+    --secondary-bg: #132337;
+    --card-bg: #1a2f4a;
+    --accent-blue: #2563eb;
+    --accent-teal: #06b6d4;
+    --text-primary: #e2e8f0;
+    --text-secondary: #94a3b8;
+    --border-color: #2d4663;
+    --hover-bg: #243b5a;
+    --success-green: #009639;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: linear-gradient(135deg, var(--primary-bg) 0%, #1a2c47 100%);
+    color: var(--text-primary);
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+}
+
+/* Header Styles */
+header {
+    text-align: center;
+    margin-bottom: 3rem;
+    padding: 2rem 0;
+}
+
+.logo-section {
+    margin-bottom: 1.5rem;
+}
+
+.nginx-logo {
+    width: 120px;
+    height: auto;
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
+}
+
+h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-teal) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.5px;
+}
+
+.subtitle {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+    font-weight: 400;
+}
+
+/* Services Section */
+.services-section {
+    margin-bottom: 3rem;
+}
+
+.services-section h2 {
+    font-size: 1.75rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+    border-left: 4px solid var(--accent-blue);
+    padding-left: 1rem;
+}
+
+.services-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.25rem;
+    margin-bottom: 2rem;
+}
+
+.service-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    color: var(--text-primary);
+    display: block;
+}
+
+.service-card:hover {
+    background: var(--hover-bg);
+    border-color: var(--accent-blue);
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
+}
+
+.service-card h3 {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem;
+    color: var(--accent-teal);
+}
+
+.service-card p {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.75rem;
+}
+
+.service-card .service-url {
+    font-size: 0.875rem;
+    color: var(--accent-blue);
+    font-family: 'Courier New', monospace;
+}
+
+/* Info Section */
+.info-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+}
+
+.info-card {
+    background: var(--secondary-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 2rem;
+    transition: all 0.3s ease;
+}
+
+.info-card:hover {
+    border-color: var(--accent-blue);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
+}
+
+.info-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.info-card p {
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    line-height: 1.7;
+}
+
+.features-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+.features-list li {
+    padding: 0.5rem 0;
+    padding-left: 1.5rem;
+    color: var(--text-secondary);
+    position: relative;
+}
+
+.features-list li::before {
+    content: "▸";
+    position: absolute;
+    left: 0;
+    color: var(--accent-teal);
+    font-weight: bold;
+}
+
+.doc-link {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-teal) 100%);
+    color: white;
+    text-decoration: none;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    margin-top: 0.5rem;
+}
+
+.doc-link:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 2rem 0;
+    border-top: 1px solid var(--border-color);
+    margin-top: 3rem;
+    color: var(--text-secondary);
+}
+
+footer p {
+    margin: 0.5rem 0;
+}
+
+footer strong {
+    color: var(--success-green);
+    font-weight: 600;
+}
+
+.footer-note {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 1.5rem 1rem;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    .subtitle {
+        font-size: 1rem;
+    }
+
+    .services-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .info-section {
+        grid-template-columns: 1fr;
+    }
+
+    .nginx-logo {
+        width: 100px;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.75rem;
+    }
+
+    .services-section h2 {
+        font-size: 1.5rem;
+    }
+
+    .info-card {
+        padding: 1.5rem;
+    }
+
+    .service-card {
+        padding: 1.25rem;
+    }
+}
+
+/* Loading Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.service-card, .info-card {
+    animation: fadeIn 0.6s ease-out;
+}