Fix API connectivity and language translation issues

- Implement environment-aware API base URL detection
  * Auto-detects localhost vs production environment
  * Uses http://localhost:3002 for local development
  * Uses relative URLs for production deployment

- Add placeholder translation support
  * Extended applyTranslations() to handle data-translate-placeholder
  * Fixed language mismatch where interface was German but placeholder stayed English
  * Now properly translates placeholder text when switching languages

- Update cache-busting versions to force browser reload
  * Updated from v=20250629181500 to v=20250630173957
  * Ensures browser loads updated JavaScript with fixes

- Verify full API connectivity working
  * Local development server on port 3002 fully functional
  * AI-powered Socratic teaching system working perfectly
  * German/English language support complete

Resolves 502 Bad Gateway errors and language consistency issues.

html/kidsai/index.html

@@ -176,9 +176,9 @@
         }, 100);
     </script>
 
-    <script src="translations.js?v=20250629181500"></script>
+    <script src="translations.js?v=20250630173957"></script>
-    <script src="ai-responses.js?v=20250629181500"></script>
+    <script src="ai-responses.js?v=20250630173957"></script>
-    <script src="script-new.js?v=20250629181500"></script>
+    <script src="script-new.js?v=20250630173957"></script>
     
     <!-- Inline debugging script -->
     <script>

html/kidsai/script-new.js

@@ -15,6 +15,10 @@ class KidsAIExplorer {
         
         this.currentLanguage = localStorage.getItem('kidsai-language') || 'en';
         
+        // Configure API base URL based on environment
+        this.apiBaseUrl = this.getApiBaseUrl();
+        console.log('🔗 API Base URL:', this.apiBaseUrl);
+        
         // Get DOM elements
         this.questionInput = document.getElementById('question-input');
         this.askButton = document.getElementById('ask-button');
@@ -49,6 +53,16 @@ class KidsAIExplorer {
                || window.innerWidth <= 768;
     }
 
+    // Get API base URL based on environment
+    getApiBaseUrl() {
+        // Check if we're running on localhost (development)
+        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+            return 'http://localhost:3002';
+        }
+        // Production environment - use relative URLs to work with proxy/same domain
+        return '';
+    }
+
     initializeEventListeners() {
         console.log('🔗 Setting up event listeners');
         
@@ -138,6 +152,14 @@ class KidsAIExplorer {
                     element.textContent = t[key];
                 }
             });
+            
+            // Update all elements with data-translate-placeholder attribute
+            document.querySelectorAll('[data-translate-placeholder]').forEach(element => {
+                const key = element.getAttribute('data-translate-placeholder');
+                if (t[key]) {
+                    element.placeholder = t[key];
+                }
+            });
         } catch (error) {
             console.error('❌ Error applying translations:', error);
         }
@@ -190,7 +212,7 @@ class KidsAIExplorer {
         console.log('🔄 Sending question to API...');
         
         try {
-            const response = await fetch('/api/ask', {
+            const response = await fetch(`${this.apiBaseUrl}/api/ask`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -493,7 +515,7 @@ class KidsAIExplorer {
                 
                 const contextReason = needsExplanationDueToRepeatedDontKnowChat ? 'repeated_dont_know' : 'confusion_explanation';
                 
-                response = await fetch('/api/respond-to-answer', {
+                response = await fetch(`${this.apiBaseUrl}/api/respond-to-answer`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -522,7 +544,7 @@ class KidsAIExplorer {
                     ? `Ein Kind hat "${answer}" geantwortet auf die Frage "${currentQuestion}". Das Kind weiß die Antwort nicht. Führe es durch 2-3 aufbauende Socratic Fragen zur Entdeckung, ohne direkte Antworten zu geben. Beginne mit einfachen Beobachtungen, die das Kind kennt.`
                     : `A child answered "${answer}" to the question "${currentQuestion}". The child doesn't know the answer. Guide them through 2-3 building Socratic questions to discovery without giving direct answers. Start with simple observations the child would know.`;
 
-                response = await fetch('/api/ask', {
+                response = await fetch(`${this.apiBaseUrl}/api/ask`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -536,7 +558,7 @@ class KidsAIExplorer {
                 // For substantial answers, acknowledge and validate
                 console.log('📤 Sending validation request to /api/respond-to-answer');
                 
-                response = await fetch('/api/respond-to-answer', {
+                response = await fetch(`${this.apiBaseUrl}/api/respond-to-answer`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -737,7 +759,7 @@ class KidsAIExplorer {
                 
                 const contextReason = needsExplanationDueToRepeatedDontKnow ? 'repeated_dont_know' : 'confusion_explanation';
                 
-                response = await fetch('/api/respond-to-answer', {
+                response = await fetch(`${this.apiBaseUrl}/api/respond-to-answer`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -762,7 +784,7 @@ class KidsAIExplorer {
                 // Child is asking for a definition - provide a clear definition response
                 console.log('📤 Sending definition response request');
                 
-                response = await fetch('/api/respond-to-answer', {
+                response = await fetch(`${this.apiBaseUrl}/api/respond-to-answer`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -787,7 +809,7 @@ class KidsAIExplorer {
                     ? `Ein Kind hat "${answer}" geantwortet auf die Frage "${currentQuestion}" über das Thema "${originalQuestion}". Das Kind weiß die Antwort nicht und braucht einfachere Grundlagen. Gib KEINE weiteren abstrakten Fragen! Stattdessen: 1) Beschreibe eine einfache Beobachtung, die das Kind machen kann (z.B. "Hast du schon mal Licht durch ein Glas Wasser gesehen?") 2) Lade zum praktischen Ausprobieren ein 3) Baue auf dem auf, was das Kind bereits kennt. Verwende konkrete, sichtbare Beispiele statt abstrakter Konzepte.`
                     : `A child answered "${answer}" to the question "${currentQuestion}" about the topic "${originalQuestion}". The child doesn't know and needs simpler foundations. Give NO more abstract questions! Instead: 1) Describe a simple observation the child can make (e.g. "Have you ever seen light through a glass of water?") 2) Invite practical experimentation 3) Build on what the child already knows. Use concrete, visible examples instead of abstract concepts.`;
 
-                response = await fetch('/api/ask', {
+                response = await fetch(`${this.apiBaseUrl}/api/ask`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -801,7 +823,7 @@ class KidsAIExplorer {
                 // For substantial answers, acknowledge and validate
                 console.log('📤 Sending validation request to /api/respond-to-answer');
                 
-                response = await fetch('/api/respond-to-answer', {
+                response = await fetch(`${this.apiBaseUrl}/api/respond-to-answer`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -975,7 +997,7 @@ class KidsAIExplorer {
 
         try {
             // Request deeper exploration from the server
-            const response = await fetch('/api/explore-deeper', {
+            const response = await fetch(`${this.apiBaseUrl}/api/explore-deeper`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -1162,7 +1184,7 @@ class KidsAIExplorer {
             console.log('📤 Sending deeper exploration response request:', { answer, lastExplorationQuestion });
 
             // Call server API for contextual response
-            const response = await fetch('/api/respond-to-answer', {
+            const response = await fetch(`${this.apiBaseUrl}/api/respond-to-answer`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',