Add Profile modal and Logout button for logged-in users

css/styles.css

@@ -72,6 +72,13 @@ a:hover { text-decoration: underline; }
 .user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
 .user-info h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
 .user-company, .user-email { font-size: .9rem; color: #6b7280; margin: 0; }
+.user-actions { display: flex; gap: 12px; align-items: center; }
+.user-btn { padding: 8px 16px; font-size: .85rem; }
+.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999; display: flex; align-items: center; justify-content: center; }
+.modal.hidden { display: none; }
+.modal-content { background: var(--white); padding: 32px; border-radius: 16px; width: 90%; max-width: 500px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
+.modal-content h3 { margin-bottom: 24px; }
+.close-btn { position: absolute; top: 16px; right: 20px; font-size: 24px; cursor: pointer; color: #6b7280; }
 .login-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
 .form-group { margin-bottom: 16px; }
 .form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }

index.html

@@ -19,6 +19,10 @@
         <button class="lang-btn active" data-lang="de">DE</button>
         <button class="lang-btn" data-lang="en">EN</button>
       </div>
+      <div class="user-actions hidden">
+        <button class="btn-secondary user-btn" onclick="openProfileModal()"><span class="hide-de">Profil</span><span class="hide-en">Profile</span></button>
+        <button class="btn-secondary user-btn" onclick="logout()"><span class="hide-de">Abmelden</span><span class="hide-en">Logout</span></button>
+      </div>
     </div>
   </header>
 
@@ -159,6 +163,34 @@
     </div>
   </main>
 
+  <!-- Profile Modal -->
+  <div id="profile-modal" class="modal hidden">
+    <div class="modal-content">
+      <span class="close-btn" onclick="closeProfileModal()">&times;</span>
+      <h3 class="hide-de">Profil bearbeiten</h3>
+      <h3 class="hide-en">Edit Profile</h3>
+      <form id="profile-form">
+        <div class="form-group">
+          <label for="profile-username" class="hide-de">Telegram Nutzername</label>
+          <label for="profile-username" class="hide-en">Telegram Username</label>
+          <input type="text" id="profile-username" disabled />
+        </div>
+        <div class="form-group">
+          <label for="profile-name" class="hide-de">Vollständiger Name</label>
+          <label for="profile-name" class="hide-en">Full name</label>
+          <input type="text" id="profile-name" required />
+        </div>
+        <div class="form-group">
+          <label for="profile-llc" class="hide-de">Name der LLC / SRL</label>
+          <label for="profile-llc" class="hide-en">LLC / SRL name</label>
+          <input type="text" id="profile-llc" required />
+        </div>
+        <button type="button" class="btn-primary hide-de" onclick="saveProfile()">Speichern</button>
+        <button type="button" class="btn-primary hide-en" onclick="saveProfile()">Save</button>
+      </form>
+    </div>
+  </div>
+
   <footer class="footer">
     <p>
       <span class="hide-de">Sponsored by</span>

js/main.js

@@ -33,10 +33,12 @@ function checkSession() {
     if (news) news.classList.add('hidden');
     if (login) login.classList.add('hidden');
     if (notebook) notebook.classList.remove('hidden');
+    document.querySelectorAll('.user-actions').forEach(el => el.classList.remove('hidden'));
   } else {
     if (notebook) notebook.classList.add('hidden');
     if (login) login.classList.remove('hidden');
     if (newsletter) newsletter.classList.remove('hidden');
+    document.querySelectorAll('.user-actions').forEach(el => el.classList.add('hidden'));
   }
 }
 
@@ -166,6 +168,9 @@ async function submitLoginData() {
       document.getElementById('news-col').classList.add('hidden');
       document.getElementById('login-panel').classList.add('hidden');
       document.getElementById('notebook-panel').classList.remove('hidden');
+      document.getElementById('profile-username').value = document.getElementById('telegram-user').value;
+      document.getElementById('profile-name').value = document.getElementById('full-name').value;
+      document.getElementById('profile-llc').value = document.getElementById('llc-name').value;
       alert('Erfolgreich angemeldet! Willkommen!');
     } else {
       alert('Fehler bei der Anmeldung.');
@@ -247,4 +252,46 @@ function filterUsers(searchTerm) {
     const text = card.innerText.toLowerCase();
     card.style.display = text.includes(term) ? 'block' : 'none';
   });
+}
+
+function openProfileModal() {
+  document.getElementById('profile-modal').classList.remove('hidden');
+}
+
+function closeProfileModal() {
+  document.getElementById('profile-modal').classList.add('hidden');
+}
+
+function logout() {
+  setCookie('sessionid', '', -1);
+  checkSession();
+  closeProfileModal();
+}
+
+async function saveProfile() {
+  const name = document.getElementById('profile-name').value.trim();
+  const llc = document.getElementById('profile-llc').value.trim();
+  if (!name || !llc) { alert('Bitte geben Sie Name und LLC-Namen ein.'); return; }
+  
+  try {
+    const response = await fetch(API_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        username: document.getElementById('profile-username').value,
+        name: name,
+        llc: llc
+      })
+    });
+    console.log('saveProfile response:', response.status, await response.clone().json());
+    if (response.ok) {
+      alert('Profil erfolgreich gespeichert!');
+      closeProfileModal();
+    } else {
+      alert('Fehler beim Speichern.');
+    }
+  } catch (error) {
+    console.error('saveProfile error:', error);
+    alert('Fehler bei der Verbindung.');
+  }
 }