1

Profice WebSite/index.html

@@ -520,11 +520,103 @@
         </div>
     </footer>
 
+    <!-- Debug Section (remove for production) -->
+    <div id="debug-panel" style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.9); color: white; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 12px; z-index: 9999; max-width: 300px; display: none;">
+        <h4 style="margin: 0 0 10px 0;">Debug Panel</h4>
+        <button onclick="testPHP()" style="background: #007bff; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Test PHP</button>
+        <button onclick="testForm()" style="background: #28a745; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Test Form</button>
+        <button onclick="toggleDebug()" style="background: #dc3545; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Hide</button>
+        <div id="debug-output" style="margin-top: 10px; max-height: 200px; overflow-y: auto;"></div>
+    </div>
+
+    <!-- Debug Toggle Button -->
+    <button id="debug-toggle" onclick="toggleDebug()" style="position: fixed; bottom: 20px; right: 20px; background: #007bff; color: white; border: none; padding: 10px; border-radius: 50%; cursor: pointer; z-index: 9998; width: 40px; height: 40px; font-weight: bold;">?</button>
+
     <!-- Optimized script loading -->
     <script src="scripts/script.js" defer></script>
     <script src="scripts/tech-onepager.js" defer></script>
     <script src="scripts/cursor.js" defer></script>
     <script src="scripts/scroll-header.min.js" defer></script>
     <script src="scripts/chat.js" defer></script>
+
+    <!-- Debug Script -->
+    <script>
+        function toggleDebug() {
+            const panel = document.getElementById('debug-panel');
+            const toggle = document.getElementById('debug-toggle');
+            if (panel.style.display === 'none') {
+                panel.style.display = 'block';
+                toggle.style.display = 'none';
+            } else {
+                panel.style.display = 'none';
+                toggle.style.display = 'block';
+            }
+        }
+
+        function logDebug(message, isError = false) {
+            const output = document.getElementById('debug-output');
+            const timestamp = new Date().toLocaleTimeString();
+            const color = isError ? '#ff6b6b' : '#51cf66';
+            output.innerHTML += `<div style="color: ${color};">[${timestamp}] ${message}</div>`;
+            output.scrollTop = output.scrollHeight;
+        }
+
+        async function testPHP() {
+            logDebug('Testing PHP connection...');
+            try {
+                const response = await fetch('scripts/add/test.php');
+                if (response.ok) {
+                    const result = await response.json();
+                    logDebug(`✓ PHP OK: ${result.message}`);
+                    logDebug(`PHP Version: ${result.server_info?.php_version || 'Unknown'}`);
+                } else {
+                    logDebug(`✗ PHP Error: HTTP ${response.status}`, true);
+                }
+            } catch (error) {
+                logDebug(`✗ PHP Failed: ${error.message}`, true);
+            }
+        }
+
+        async function testForm() {
+            logDebug('Testing contact form...');
+            try {
+                const response = await fetch('scripts/add/send.php', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        type: 'contact',
+                        name: 'Debug Test',
+                        contact: 'test@example.com',
+                        service: 'website',
+                        description: 'Debug test submission'
+                    })
+                });
+
+                if (response.ok) {
+                    const result = await response.json();
+                    if (result.success) {
+                        logDebug('✓ Form submission successful');
+                        logDebug(`Webhook: ${result.data?.webhook_result?.success ? 'OK' : 'Failed'}`);
+                    } else {
+                        logDebug(`✗ Form failed: ${result.message}`, true);
+                    }
+                } else {
+                    logDebug(`✗ Form Error: HTTP ${response.status}`, true);
+                }
+            } catch (error) {
+                logDebug(`✗ Form Failed: ${error.message}`, true);
+            }
+        }
+
+        // Auto-test on load
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                logDebug('Debug panel ready - Click ? button to show');
+                testPHP();
+            }, 1000);
+        });
+    </script>
 </body>
 </html>