From 46d9b0f4a06d24abf6d9545ffe6923a4055018f3 Mon Sep 17 00:00:00 2001
From: Philipp Urbschat <philipp.urbschat@gmail.com>
Date: Sat, 12 Sep 2026 23:29:01 +0200
Subject: [PATCH] fix(test): rename module to Test in overview and restore
 original web audio synth look

---
 home/app/services/ModuleService.php |   4 +-
 test/index.php                      | 313 ++++++++++++----------------
 2 files changed, 140 insertions(+), 177 deletions(-)
diff --git a/home/app/services/ModuleService.php b/home/app/services/ModuleService.php
index 6d15788..05ec59d 100644
--- a/home/app/services/ModuleService.php
+++ b/home/app/services/ModuleService.php
@@ -27,8 +27,8 @@ class ModuleService {
         ],
         'test' => [
             'slug' => 'test',
-            'name' => 'Web Audio Synth',
-            'badge' => 'Audio / Test',
+            'name' => 'Test',
+            'badge' => 'Test',
             'description' => 'Interaktive Web Audio API Synthese & Soundtest',
             'path' => '/test',
             'adminOnly' => false
diff --git a/test/index.php b/test/index.php
index 7476a80..fd1628c 100644
--- a/test/index.php
+++ b/test/index.php
@@ -1,15 +1,22 @@
 <?php
-// DATEI: ./test/index.php
+// Session starten, falls noch nicht geschehen
 if (session_status() === PHP_SESSION_NONE) {
     session_start();
 }
 
+// Einfache Logout-Logik direkt in dieser Datei
+if (isset($_GET['logout'])) {
+    session_destroy();
+    header("Location: /");
+    exit;
+}
+
 // 1. Projekt identifizieren und schützen
 $current_project = 'test';
 require_once __DIR__ . '/../auth.php';
 
 // 2. Nutzerdaten abrufen
-$loggedInUser = isset($_SESSION['user_email']) ? $_SESSION['user_email'] : 'Gast';
+$loggedInUser = isset($_SESSION['user_email']) ? $_SESSION['user_email'] : 'neuankoemmling@beispiel.de';
 $isAdmin = !empty($_SESSION['is_admin']);
 ?>
 <!DOCTYPE html>
@@ -17,251 +24,216 @@ $isAdmin = !empty($_SESSION['is_admin']);
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Web Audio Synth | Test-Modul</title>
+    <title>Erster Login-Check: Erfolgreich!</title>
     <style>
         :root {
-            --primary: #06b6d4;
-            --secondary: #10b981;
-            --bg: #020617;
-            --surface: #0b1120;
-            --card-border: #1e293b;
-            --text: #f8fafc;
-            --muted: #94a3b8;
-            --accent: #d946ef;
-        }
-
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
+            --primary: #ff00ff;
+            --secondary: #00ff00;
+            --bg: #222;
+            --text: #fff;
+            --accent: #ffff00;
         }
 
         body {
             background-color: var(--bg);
             color: var(--text);
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
+            font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
+            margin: 0;
             padding: 20px;
             overflow-x: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
             position: relative;
         }
 
-        /* Top Bar */
-        .top-nav {
+        .top-bar {
             position: fixed;
-            top: 16px;
-            left: 20px;
-            right: 20px;
+            top: 15px;
+            left: 15px;
+            z-index: 100;
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            z-index: 50;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-            font-size: 12px;
+            gap: 10px;
+            font-family: sans-serif;
+            font-size: 13px;
         }
 
-        .nav-links {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-        }
-
-        .top-nav a {
-            color: var(--muted);
-            text-decoration: none;
+        .top-bar a {
+            color: #fff;
+            background: #000;
             padding: 8px 14px;
-            background: rgba(11, 17, 32, 0.85);
-            border: 1px solid var(--card-border);
-            border-radius: 10px;
-            backdrop-filter: blur(8px);
-            transition: all 0.2s ease;
+            border: 2px solid var(--accent);
+            border-radius: 8px;
+            text-decoration: none;
+            font-weight: bold;
+            transition: transform 0.1s;
         }
 
-        .top-nav a:hover {
-            color: var(--primary);
-            border-color: rgba(6, 182, 212, 0.4);
+        .top-bar a:hover {
+            transform: scale(1.05);
         }
 
-        .top-nav a.admin-link {
-            color: var(--primary);
-            border-color: rgba(6, 182, 212, 0.3);
-            background: rgba(6, 182, 212, 0.08);
+        .top-bar a.admin-btn {
+            color: #000;
+            background: var(--secondary);
+            border-color: #000;
         }
 
-        .top-nav a.admin-link:hover {
-            background: rgba(6, 182, 212, 0.18);
-        }
-
-        /* Container */
         .container {
-            background: var(--surface);
-            border: 1px solid var(--card-border);
+            background: #333;
+            border: 8px solid var(--primary);
             padding: 40px;
-            max-width: 540px;
+            max-width: 600px;
             width: 100%;
-            border-radius: 28px;
-            box-shadow: 0 0 50px rgba(6, 182, 212, 0.08);
+            border-radius: 30px;
+            transform: rotate(-1.5deg);
+            box-shadow: 20px 20px 0px var(--secondary);
             position: relative;
-            text-align: center;
-        }
-
-        .container::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, var(--primary), transparent);
-            border-radius: 28px 28px 0 0;
         }
 
         .header {
-            margin-bottom: 24px;
-        }
-
-        .badge {
-            display: inline-block;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-            font-size: 10px;
-            text-transform: uppercase;
-            letter-spacing: 0.15em;
-            color: var(--primary);
-            background: rgba(6, 182, 212, 0.1);
-            border: 1px solid rgba(6, 182, 212, 0.25);
-            padding: 4px 10px;
-            border-radius: 9999px;
-            margin-bottom: 12px;
+            text-align: center;
+            border-bottom: 4px dashed var(--accent);
+            margin-bottom: 20px;
+            transform: rotate(2deg);
         }
 
         h1 {
-            color: var(--text);
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-            font-size: 1.6rem;
-            font-weight: 800;
-            letter-spacing: -0.02em;
-            margin-bottom: 8px;
+            color: var(--secondary);
+            text-shadow: 3px 3px 0px var(--primary);
+            font-size: 2.2rem;
+            margin-bottom: 5px;
+            line-height: 1.2;
         }
 
         .user-info {
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-            font-size: 11px;
-            color: var(--muted);
+            background: #444;
+            padding: 5px 15px;
+            display: inline-block;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            border: 2px solid var(--accent);
         }
 
         .main-content {
-            margin: 28px 0;
+            text-align: center;
+            margin: 30px 0;
         }
 
-        .description {
-            font-size: 13px;
-            color: var(--muted);
-            line-height: 1.6;
-            margin-bottom: 28px;
-        }
-
-        /* Sound Button */
         #whoopee-cushion {
-            width: 140px;
-            height: 140px;
-            background: radial-gradient(circle, #f43f5e 0%, #be123c 100%);
+            width: 160px;
+            height: 160px;
+            background: #ff4d4d;
             border-radius: 50%;
-            border: 4px solid #e11d48;
+            border: 6px solid #b30000;
             cursor: pointer;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-            font-size: 11px;
+            font-size: 14px;
             font-weight: bold;
             color: white;
             text-align: center;
             margin: 0 auto;
             position: relative;
             user-select: none;
-            transition: transform 0.08s, box-shadow 0.08s;
-            box-shadow: 0 10px 0 #881337, 0 15px 25px rgba(244, 63, 94, 0.3);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
+            transition: transform 0.05s;
+            box-shadow: 0 12px 0 #b30000;
         }
 
         #whoopee-cushion:active {
-            transform: translateY(8px) scale(0.95);
-            box-shadow: 0 2px 0 #881337, 0 5px 15px rgba(244, 63, 94, 0.2);
+            transform: translateY(10px) scale(0.92);
+            box-shadow: 0 2px 0 #b30000;
+        }
+
+        #whoopee-cushion::after {
+            content: "HIER DRÜCKEN!";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
         }
 
         .fart-cloud {
             position: absolute;
-            background: rgba(16, 185, 129, 0.4);
+            background: rgba(180, 255, 100, 0.7);
             border-radius: 50%;
             pointer-events: none;
             z-index: 10;
-            animation: float-up 1.2s ease-out forwards;
-            filter: blur(8px);
+            animation: float-up 1.5s ease-out forwards;
+            filter: blur(5px);
         }
 
         @keyframes float-up {
-            0% { transform: translateY(0) scale(0.6); opacity: 0.7; }
-            100% { transform: translateY(-130px) scale(3.5); opacity: 0; }
+            0% { transform: translateY(0) scale(0.5); opacity: 0.8; }
+            100% { transform: translateY(-150px) scale(4); opacity: 0; }
         }
 
-        .status-msg {
-            margin-top: 20px;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-            font-size: 11px;
-            color: var(--muted);
+        .logout-btn {
+            display: block;
+            width: fit-content;
+            margin: 30px auto 0;
+            background: var(--accent);
+            color: #000;
+            padding: 12px 25px;
+            text-decoration: none;
+            font-weight: bold;
+            border-radius: 10px;
+            transform: rotate(-2deg);
+            border: 4px solid #000;
+            transition: 0.2s;
+        }
+
+        .logout-btn:hover {
+            transform: rotate(0deg) scale(1.1);
+            background: #ff3300;
+            color: #fff;
         }
 
         .shake {
-            animation: shake 0.35s cubic-bezier(.36,.07,.19,.97) both;
+            animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
         }
 
         @keyframes shake {
-            10%, 90% { transform: translate3d(-2px, 0, 0); }
-            20%, 80% { transform: translate3d(3px, 0, 0); }
-            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
-            40%, 60% { transform: translate3d(4px, 0, 0); }
+            10%, 90% { transform: translate3d(-2px, 0, 0) rotate(-1.5deg); }
+            20%, 80% { transform: translate3d(4px, 0, 0) rotate(-2deg); }
+            30%, 50%, 70% { transform: translate3d(-6px, 0, 0) rotate(-1deg); }
+            40%, 60% { transform: translate3d(6px, 0, 0) rotate(-1.8deg); }
         }
     </style>
 </head>
 <body>
-    <!-- Top Navigation -->
-    <nav class="top-nav">
-        <div class="nav-links">
-            <a href="/">← Website</a>
-            <?php if ($isAdmin): ?>
-                <a href="/admin" class="admin-link">Admin Dashboard</a>
-                <a href="/admin/users" class="admin-link">Benutzerverwaltung</a>
-            <?php endif; ?>
-        </div>
-        <div class="nav-links">
-            <a href="/login/logout" style="color: #f43f5e;">Logout</a>
-        </div>
-    </nav>
+    <div class="top-bar">
+        <a href="/">← Website</a>
+        <?php if ($isAdmin): ?>
+            <a href="/admin" class="admin-btn">Admin-Bereich</a>
+            <a href="/admin/users" class="admin-btn">Benutzerverwaltung</a>
+        <?php endif; ?>
+    </div>
 
     <div class="container" id="app-container">
         <header class="header">
-            <span class="badge">Web Audio API / Test-Modul</span>
-            <h1>Web Audio Synth</h1>
+            <h1>Willkommen beim ersten Check! 🎉</h1>
             <div class="user-info">
-                Angemeldet: <span><?php echo htmlspecialchars($loggedInUser); ?></span>
+                Eingeloggt als: <strong><?php echo htmlspecialchars($loggedInUser); ?></strong>
             </div>
         </header>
         
         <main class="main-content">
-            <p class="description">
-                Interaktiver Audiotest zur dynamischen Klangsynthese mit Oszillatoren, Rauschgeneratoren und Filtern über die HTML5 Web Audio API.
-            </p>
+            <p><strong>Glückwunsch!</strong> Deine Zugangsdaten sind korrekt und du bist erfolgreich im System gelandet.</p>
+            <p style="font-size: 0.9rem;">Um sicherzugehen, dass auch interaktive Elemente bei dir funktionieren, teste bitte unser hochmodernes Belohnungsmodul:</p>
             
-            <div class="synth-section">
-                <div id="whoopee-cushion" role="button" tabindex="0">TRIGGER</div>
-                <p id="status-msg" class="status-msg">Klicke auf den Button, um den Soundtest zu starten.</p>
+            <div class="fart-section" style="margin-top: 30px;">
+                <div id="whoopee-cushion" title="Funktionstest für Sound und Animation"></div>
+                <p id="status-msg" style="margin-top: 20px; font-style: italic; color: #888;">Hinweis: Sound bitte einschalten!</p>
             </div>
         </main>
+
+        <footer>
+            <!-- Link angepasst auf Parameter-Logout -->
+            <a href="?logout=1" class="logout-btn">Test beendet? Hier abmelden!</a>
+        </footer>
     </div>
 
     <script>
@@ -270,11 +242,10 @@ $isAdmin = !empty($_SESSION['is_admin']);
         const statusMsg = document.getElementById('status-msg');
 
         function playOrganicFart() {
-            const AudioCtx = window.AudioContext || window.webkitAudioContext;
-            const audioCtx = new AudioCtx();
+            const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
             if (audioCtx.state === 'suspended') audioCtx.resume();
 
-            const duration = 0.4 + Math.random() * 0.4;
+            const duration = 0.4 + Math.random() * 0.5;
             const mainGain = audioCtx.createGain();
             
             const osc = audioCtx.createOscillator();
@@ -327,38 +298,30 @@ $isAdmin = !empty($_SESSION['is_admin']);
             lfo.stop(audioCtx.currentTime + duration);
             noise.stop(audioCtx.currentTime + duration);
             
-            statusMsg.textContent = "Audio-Synthese aktiv. Interaktionstest bestanden.";
-            statusMsg.style.color = "#10b981";
+            statusMsg.textContent = "Interaktionstest: Bestanden! 👍";
         }
 
         function createCloud() {
             const cloud = document.createElement('div');
             cloud.classList.add('fart-cloud');
-            const size = Math.random() * 50 + 20;
+            const size = Math.random() * 60 + 20;
             cloud.style.width = size + 'px';
             cloud.style.height = size + 'px';
             const rect = cushion.getBoundingClientRect();
-            cloud.style.left = (rect.left + rect.width / 2 - size / 2 + (Math.random() * 80 - 40)) + 'px';
+            cloud.style.left = (rect.left + rect.width / 2 - size / 2 + (Math.random() * 100 - 50)) + 'px';
             cloud.style.top = (rect.top + rect.height / 2 - size / 2) + 'px';
             document.body.appendChild(cloud);
-            setTimeout(() => cloud.remove(), 1200);
+            setTimeout(() => cloud.remove(), 1500);
         }
 
         cushion.addEventListener('click', () => {
             playOrganicFart();
             container.classList.add('shake');
-            setTimeout(() => container.classList.remove('shake'), 350);
-            for(let i = 0; i < 8; i++) {
+            setTimeout(() => container.classList.remove('shake'), 400);
+            for(let i = 0; i < 12; i++) {
                 setTimeout(createCloud, i * 80);
             }
         });
-
-        cushion.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                cushion.click();
-            }
-        });
     </script>
 </body>
 </html>
\ No newline at end of file
