Create index.html for DevLabStudy Hub

Initial HTML structure for the DevLabStudy Hub page with styling and content.

Author: DevLabStudy

index.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevLabStudy© | Hub</title>
+
+    <link rel="icon" type="image/png" href="qr-code.png?v=fixed_buttons">
+    <link rel="shortcut icon" type="image/png" href="qr-code.png?v=fixed_buttons">
+
+    <style>
+        :root {
+            --bg-body: #f4f7fa; --bg-card: #ffffff;
+            --text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0;
+            --accent-blue: #2563eb; --accent-purple: #4b0082; --accent-green: #10b981;
+            --shadow-sm: 0 4px 6px rgba(0,0,0,0.05); --shadow-md: 0 10px 25px rgba(0,0,0,0.1);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-body: #0f172a; --bg-card: #1e293b;
+                --text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155;
+                --accent-blue: #3b82f6; --accent-purple: #8b5cf6;
+                --shadow-sm: 0 4px 6px rgba(0,0,0,0.3); --shadow-md: 0 10px 25px rgba(0,0,0,0.4);
+            }
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background: var(--bg-body); color: var(--text-main);
+            margin: 0; padding: 0; display: flex; flex-direction: column;
+            min-height: 100vh; justify-content: center; align-items: center;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .hub-container {
+            max-width: 800px; width: 100%; padding: 40px 20px;
+            text-align: center; box-sizing: border-box;
+        }
+
+        .brand-title { font-size: 3rem; font-weight: 800; margin-bottom: 10px; letter-spacing: -1px; }
+        .brand-subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 50px; }
+
+        .path-grid {
+            display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            gap: 20px; margin-bottom: 50px;
+        }
+
+        .path-card {
+            background: var(--bg-card); border: 1px solid var(--border-color);
+            border-radius: 16px; padding: 30px 20px; text-decoration: none;
+            color: var(--text-main); transition: all 0.3s ease;
+            box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center;
+        }
+
+        .path-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-blue); }
+        .path-icon { font-size: 2.5rem; margin-bottom: 15px; }
+        .path-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
+        .path-desc { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
+
+        .social-links { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
+        .social-btn {
+            background: var(--bg-card); border: 1px solid var(--border-color);
+            color: var(--text-main); text-decoration: none; padding: 8px 16px;
+            border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: 0.2s;
+        }
+        .social-btn:hover { background: var(--border-color); }
+    </style>
+</head>
+<body>
+
+    <div class="hub-container">
+        <div class="brand-title">DevLabStudy©</div>
+        <div class="brand-subtitle">Self-Taught Infrastructure Enthusiast</div>
+
+        <div class="path-grid">
+            <a href="/blog.html" class="path-card" style="border-top: 4px solid var(--accent-blue);">
+                <div class="path-icon">📚</div>
+                <div class="path-title">DevLab Blog</div>
+                <p class="path-desc">Artykuły, wiedza, optymalizacja Dockera i IT.</p>
+            </a>
+
+            <a href="/homelab.html" class="path-card" style="border-top: 4px solid var(--accent-green);">
+                <div class="path-icon">🖥️</div>
+                <div class="path-title">Mój HomeLab</div>
+                <p class="path-desc">Infrastruktura, serwery Proxmox i status węzłów.</p>
+            </a>
+
+            <a href="/orbit.html" class="path-card" style="border-top: 4px solid var(--accent-purple);">
+                <div class="path-icon">🚀</div>
+                <div class="path-title">Projekt Orbit™</div>
+                <p class="path-desc">Aplikacja w budowie. Roadmapa i architektura.</p>
+            </a>
+        </div>
+
+        <div class="social-links">
+            <a href="https://github.com/DevLabStudy" class="social-btn">GitHub</a>
+            <a href="https://www.youtube.com/channel/UCisFPSU_Y8hznpqrcewcJAg?app=desktop" class="social-btn">YouTube</a>
+            <a href="https://x.com/DevLabStudy" class="social-btn">X / Twitter</a>
+        </div>
+    </div>
+
+</body>
+</html>