Es sollen es soll noch jemand eingeladen werden der seine Sprache wählen kann und dann soll der Chat stattfinden halt die Seite bitte ein bisschen mehr dunkel augenfreundlich und sag der Name ist wie folgt also wir ändern den Namen wie folgt

components/invite-modal.js

@@ -0,0 +1,133 @@
+class InviteModal extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .modal-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.8);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1000;
+        }
+        .modal-content {
+          background: #111;
+          border-radius: 12px;
+          padding: 24px;
+          width: 90%;
+          max-width: 500px;
+          border: 1px solid #333;
+        }
+        .modal-header {
+          margin-bottom: 20px;
+          text-align: center;
+        }
+        .modal-title {
+          font-size: 1.5rem;
+          margin: 0;
+          color: #fff;
+        }
+        .input-group {
+          margin-bottom: 15px;
+        }
+        label {
+          display: block;
+          margin-bottom: 8px;
+          color: #aaa;
+          font-size: 0.9rem;
+        }
+        input {
+          width: 100%;
+          padding: 12px;
+          background: #222;
+          border: 1px solid #333;
+          border-radius: 6px;
+          color: #fff;
+          font-size: 1rem;
+        }
+        .btn-group {
+          display: flex;
+          gap: 10px;
+          margin-top: 20px;
+        }
+        button {
+          flex: 1;
+          padding: 12px;
+          border-radius: 6px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .btn-primary {
+          background: #4f46e5;
+          color: white;
+          border: none;
+        }
+        .btn-primary:hover {
+          background: #4338ca;
+        }
+        .btn-secondary {
+          background: #222;
+          color: #fff;
+          border: 1px solid #333;
+        }
+        .btn-secondary:hover {
+          background: #333;
+        }
+      </style>
+      <div class="modal-overlay">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h3 class="modal-title">Invite Partner</h3>
+          </div>
+          <div class="input-group">
+            <label>Partner's Name</label>
+            <input type="text" id="partner-name" placeholder="Enter partner's name">
+          </div>
+          <div class="input-group">
+            <label>Partner's Language</label>
+            <select id="partner-language" class="w-full px-4 py-2 bg-dark-700 border border-dark-600 rounded-md text-dark-100">
+              <option value="en">🇬🇧 English</option>
+              <option value="es">🇪🇸 Spanish</option>
+              <option value="fr">🇫🇷 French</option>
+              <option value="de">🇩🇪 German</option>
+              <option value="it">🇮🇹 Italian</option>
+              <option value="ja">🇯🇵 Japanese</option>
+            </select>
+          </div>
+          <div class="btn-group">
+            <button class="btn-secondary" id="cancel-btn">Cancel</button>
+            <button class="btn-primary" id="invite-btn">Invite</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById('cancel-btn').addEventListener('click', () => {
+      this.remove();
+    });
+
+    this.shadowRoot.getElementById('invite-btn').addEventListener('click', () => {
+      const partnerName = this.shadowRoot.getElementById('partner-name').value.trim();
+      const partnerLanguage = this.shadowRoot.getElementById('partner-language').value;
+      
+      if (partnerName) {
+        const event = new CustomEvent('partner-invited', {
+          detail: {
+            name: partnerName,
+            language: partnerLanguage
+          }
+        });
+        this.dispatchEvent(event);
+        this.remove();
+      }
+    });
+  }
+}
+
+customElements.define('invite-modal', InviteModal);

index.html

@@ -3,11 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>QuickTranslate Chat - Dark Mode</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <title>PolyGlot Chat - Dark Mode</title>
+<script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="components/invite-modal.js"></script>
     <script>
-        tailwind.config = {
+tailwind.config = {
             darkMode: 'class',
             theme: {
                 extend: {
@@ -142,8 +143,8 @@
         <div id="language-screen" class="flex flex-col items-center justify-center min-h-screen p-4">
             <div class="w-full max-w-md bg-dark-800 rounded-xl shadow-xl overflow-hidden border border-dark-700">
                 <div class="gradient-bg text-white p-6 text-center">
-                    <h1 class="text-3xl font-bold mb-2 text-glow">QuickTranslate</h1>
-                    <p class="opacity-90">Select your languages to start chatting</p>
+                    <h1 class="text-3xl font-bold mb-2 text-glow">PolyGlot</h1>
+<p class="opacity-90">Select your languages to start chatting</p>
                 </div>
                 
                 <div class="p-6">
@@ -211,11 +212,15 @@
                         <label class="block text-sm font-medium text-dark-300 mb-2">Your Name</label>
                         <input type="text" id="user-name" placeholder="Enter your name" class="w-full px-4 py-2 bg-dark-700 border border-dark-600 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent text-dark-100 placeholder-dark-400">
                     </div>
-                    
-                    <button id="start-chat" class="w-full gradient-bg text-white py-3 rounded-md font-medium hover:opacity-90 transition duration-200 disabled:opacity-50 glow disabled:glow-none">
-                        <i class="fas fa-comments mr-2"></i> Start Chatting
-                    </button>
-                </div>
+            <div class="flex space-x-4 mt-4">
+              <button id="start-chat" class="flex-1 gradient-bg text-white py-3 rounded-md font-medium hover:opacity-90 transition duration-200 disabled:opacity-50 glow disabled:glow-none">
+                  <i class="fas fa-comments mr-2"></i> Start Demo Chat
+              </button>
+              <button id="invite-partner" class="flex-1 bg-dark-600 text-white py-3 rounded-md font-medium hover:bg-dark-500 transition duration-200 border border-dark-500">
+                  <i class="fas fa-user-plus mr-2"></i> Invite Partner
+              </button>
+            </div>
+</div>
             </div>
         </div>
         
@@ -223,8 +228,8 @@
         <div id="chat-screen" class="hidden flex flex-col h-screen">
             <div class="gradient-bg text-white p-4 flex justify-between items-center shadow-lg">
                 <div>
-                    <h1 class="text-xl font-bold text-glow">QuickTranslate</h1>
-                    <p class="text-xs opacity-80">Translating from <span id="from-lang" class="font-medium"></span> to <span id="to-lang" class="font-medium"></span></p>
+                    <h1 class="text-xl font-bold text-glow">PolyGlot</h1>
+<p class="text-xs opacity-80">Translating from <span id="from-lang" class="font-medium"></span> to <span id="to-lang" class="font-medium"></span></p>
                 </div>
                 <div id="participants-display" class="flex space-x-2">
                     <!-- Participants will be shown here -->
@@ -460,11 +465,20 @@
             closeModalBtn.addEventListener('click', () => joinModal.classList.add('hidden'));
             
             micButton.addEventListener('click', toggleSpeechRecognition);
-            
             // Initialize speech recognition when the page loads
             initSpeechRecognition();
-            
-            // Functions
+
+            // Invite partner button
+            document.getElementById('invite-partner').addEventListener('click', () => {
+              const modal = document.createElement('invite-modal');
+              document.body.appendChild(modal);
+              
+              modal.addEventListener('partner-invited', (e) => {
+                const { name, language } = e.detail;
+                startChatWithPartner(name, language);
+              });
+            });
+// Functions
             function generateChatId() {
                 // Generate a random 6-character alphanumeric code
                 const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
@@ -489,11 +503,53 @@
                     button.innerHTML = '<i class="fas fa-copy"></i>';
                 }, 2000);
             }
-            
-            function startChat() {
+            function startChatWithPartner(partnerName, partnerLanguage) {
                 const userName = userNameInput.value.trim();
                 if (!userName) return;
                 
+                // Set current user
+                currentUser = {
+                    id: 'user-' + Date.now(),
+                    name: userName,
+                    language: userLanguage
+                };
+                
+                // Create partner
+                participants = [
+                    currentUser,
+                    { 
+                        id: 'partner-' + Date.now(),
+                        name: partnerName,
+                        language: partnerLanguage 
+                    }
+                ];
+                
+                // Update UI
+                languageScreen.classList.add('hidden');
+                chatScreen.classList.remove('hidden');
+                
+                // Set language info
+                fromLangElement.textContent = languageData[userLanguage].name;
+                toLangElement.textContent = languageData[partnerLanguage].name;
+                welcomeMessage.textContent = `You're chatting in ${languageData[userLanguage].name} with ${partnerName} who speaks ${languageData[partnerLanguage].name}`;
+                
+                // Update participants display
+                updateParticipantsDisplay();
+                
+                // Update current user display
+                updateCurrentUserDisplay();
+                
+                // Focus on input
+                messageInput.focus();
+                
+                // Add welcome message
+                addSystemMessage(`${userName} started a chat with ${partnerName} (${languageData[userLanguage].name} ↔ ${languageData[partnerLanguage].name})`);
+            }
+
+            function startChat() {
+const userName = userNameInput.value.trim();
+                if (!userName) return;
+                
                 // Generate chat ID
                 chatId = generateChatId();
                 

style.css

@@ -1,6 +1,8 @@
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background-color: #0a0a0a;
+    color: #e5e5e5;
 }
 h1 {
 	font-size: 16px;