Nieuwe test

2026-09-07 12:01:51 +02:00
parent caa2c2fc2a
commit c2effc697d
3 changed files with 886 additions and 39 deletions
@@ -55,17 +55,113 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
            background-color: var(--bg);
            color: var(--text-main);
            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 24px;
+            padding: 24px 16px 60px;
            background-image: 
                radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
        }

+        .main-wrapper {
+            max-width: 780px;
+            margin: 0 auto;
+        }
+
+        /* Top Menu Balk */
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(15, 23, 42, 0.85);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid var(--card-border);
+            border-radius: 18px;
+            padding: 12px 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
+        }
+
+        .nav-brand {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            text-decoration: none;
+            color: white;
+        }
+
+        .nav-logo {
+            background: linear-gradient(135deg, var(--primary), var(--purple));
+            width: 38px;
+            height: 38px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.1rem;
+            color: white;
+            box-shadow: 0 4px 12px var(--primary-glow);
+        }
+
+        .nav-title {
+            font-size: 1.05rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+        }
+
+        .nav-menu {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(0, 0, 0, 0.25);
+            padding: 4px;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.04);
+        }
+
+        .nav-item {
+            text-decoration: none;
+            color: var(--text-muted);
+            font-size: 0.88rem;
+            font-weight: 600;
+            padding: 8px 16px;
+            border-radius: 8px;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .nav-item:hover {
+            color: white;
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .nav-item.active {
+            background: rgba(59, 130, 246, 0.25);
+            color: #ffffff;
+            border: 1px solid rgba(59, 130, 246, 0.4);
+        }
+
+        .nav-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(16, 185, 129, 0.12);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            color: #34d399;
+            padding: 5px 12px;
+            border-radius: 9999px;
+            font-size: 0.78rem;
+            font-weight: 600;
+        }
+
+        @media (max-width: 760px) {
+            .navbar { flex-direction: column; gap: 12px; }
+            .nav-menu { width: 100%; justify-content: center; flex-wrap: wrap; }
+        }
+
        .container {
-            max-width: 680px;
            width: 100%;
            background: var(--card-bg);
            backdrop-filter: blur(20px);
@@ -326,37 +422,54 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
    </style>
 </head>
 <body>
-    <div class="container">
-        <!-- Header -->
-        <div class="header">
-            <div class="badges-row">
-                <span class="badge badge-success">
-                    <span class="pulse-dot"></span>
-                    Git Systeem Actief
-                </span>
-                <span class="badge badge-php">
-                    ⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
-                </span>
+    <div class="main-wrapper">
+        <!-- Bovenste Menu Balk (Navigatie) -->
+        <nav class="navbar">
+            <a href="index.php" class="nav-brand">
+                <div class="nav-logo">⚡</div>
+                <div class="nav-title">Web &amp; PC Studio</div>
+            </a>
+            <div class="nav-menu">
+                <a href="index.php" class="nav-item active">🏠 Home</a>
+                <a href="lab.php" class="nav-item">🧪 Dev Lab</a>
+                <a href="services.php" class="nav-item">🛠️ Diensten &amp; Offerte</a>
            </div>
-            <h1>Web & PC Studio</h1>
-            <p class="subtitle">
-                Interactieve testomgeving ter verificatie van de Git webhook &amp; PHP server-runtime.
-            </p>
-        </div>
+            <div class="nav-badge">
+                <span class="pulse-dot"></span>
+                <span>Git Online</span>
+            </div>
+        </nav>

-        <!-- Live Clock Bar (JavaScript) -->
-        <div class="clock-bar">
-            <span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
-            <span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
-        </div>
+        <div class="container">
+            <!-- Header -->
+            <div class="header">
+                <div class="badges-row">
+                    <span class="badge badge-success">
+                        <span class="pulse-dot"></span>
+                        Git Systeem Actief
+                    </span>
+                    <span class="badge badge-php">
+                        ⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
+                    </span>
+                </div>
+                <h1>Web &amp; PC Studio</h1>
+                <p class="subtitle">
+                    Interactieve testomgeving ter verificatie van de Git webhook &amp; PHP server-runtime.
+                </p>
+            </div>

-        <!-- Tab Navigatie -->
-        <div class="tabs">
-            <button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
-            <button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
-            <button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
-            <a href="lab.php" class="tab-btn" style="text-decoration: none; text-align: center; color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); background: rgba(6, 182, 212, 0.1);">✨ Dev Lab &rarr;</a>
-        </div>
+            <!-- Live Clock Bar (JavaScript) -->
+            <div class="clock-bar">
+                <span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
+                <span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
+            </div>
+
+            <!-- Tab Navigatie -->
+            <div class="tabs">
+                <button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
+                <button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
+                <button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
+            </div>

        <!-- Tab 1: Overzicht -->
        <div id="tab-overzicht" class="tab-content active">
@@ -387,9 +500,12 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
                </div>
            </div>

-            <div style="margin-top: 16px;">
-                <a href="lab.php" class="btn btn-primary" style="text-decoration: none; width: 100%; box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #06b6d4, #3b82f6);">
-                    🚀 Open Interactief Developer Lab (Subpagina)
+            <div style="margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+                <a href="lab.php" class="btn btn-primary" style="text-decoration: none; box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #06b6d4, #2563eb);">
+                    🧪 Developer Lab
+                </a>
+                <a href="services.php" class="btn btn-primary" style="text-decoration: none; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25); background: linear-gradient(135deg, #10b981, #059669);">
+                    🛠️ Diensten &amp; Offerte
                </a>
            </div>
        </div>
@@ -438,6 +554,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
            &copy; <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
        </div>
    </div>
+    </div>

    <!-- JavaScript Functionaliteit -->
    <script>