Remove demo links and update container styles for auth pages

Author: ralyodio

public/js/components/pf-header.js

@@ -28,10 +28,6 @@ class PfHeader extends HTMLElement {
       window.app._t('navigation.dashboard') : 'Dashboard';
     const apiKeysText = window.app && window.app._t ?
       window.app._t('navigation.api_keys') : 'API Keys';
-    const stateDemoText = window.app && window.app._t ?
-      window.app._t('navigation.state_demo') : 'State Demo';
-    const i18nDemoText = window.app && window.app._t ?
-      window.app._t('navigation.i18n_demo') : 'i18n Demo';
     const loginText = window.app && window.app._t ?
       window.app._t('navigation.login') : 'Login';
     const registerText = window.app && window.app._t ?
@@ -308,8 +304,6 @@ class PfHeader extends HTMLElement {
         <div class="nav-links">
           <a href="/dashboard" class="nav-link" id="dashboard-link" data-i18n="navigation.dashboard">${dashboardText}</a>
           <a href="/api-keys" class="nav-link" id="api-keys-link" data-i18n="navigation.api_keys">${apiKeysText}</a>
-          <a href="/simple-state-demo" class="nav-link" id="state-demo-link" data-i18n="navigation.state_demo">${stateDemoText}</a>
-          <a href="/i18n-demo" class="nav-link" id="i18n-demo-link" data-i18n="navigation.i18n_demo">${i18nDemoText}</a>
           <a href="/login" class="nav-link login-link" id="login-link" data-i18n="navigation.login">${loginText}</a>
           <a href="/register" class="subscription-link register-link" id="register-link" data-i18n="navigation.register">${registerText}</a>
           
@@ -332,8 +326,6 @@ class PfHeader extends HTMLElement {
       <div class="mobile-menu">
         <a href="/dashboard" class="nav-link" id="mobile-dashboard-link" data-i18n="navigation.dashboard">${dashboardText}</a>
         <a href="/api-keys" class="nav-link" id="mobile-api-keys-link" data-i18n="navigation.api_keys">${apiKeysText}</a>
-        <a href="/state-demo" class="nav-link" id="mobile-state-demo-link" data-i18n="navigation.state_demo">${stateDemoText}</a>
-        <a href="/i18n-demo" class="nav-link" id="mobile-i18n-demo-link" data-i18n="navigation.i18n_demo">${i18nDemoText}</a>
         <a href="/login" class="nav-link login-link" id="mobile-login-link" data-i18n="navigation.login">${loginText}</a>
         <a href="/register" class="subscription-link register-link" id="mobile-register-link" data-i18n="navigation.register">${registerText}</a>
         
@@ -451,10 +443,6 @@ class PfHeader extends HTMLElement {
       this.shadowRoot.querySelector('#dashboard-link')?.classList.add('active');
     } else if (currentPath.startsWith('/api-keys')) {
       this.shadowRoot.querySelector('#api-keys-link')?.classList.add('active');
-    } else if (currentPath.startsWith('/state-demo')) {
-      this.shadowRoot.querySelector('#state-demo-link')?.classList.add('active');
-    } else if (currentPath.startsWith('/i18n-demo')) {
-      this.shadowRoot.querySelector('#i18n-demo-link')?.classList.add('active');
     } else if (currentPath.startsWith('/login')) {
       this.shadowRoot.querySelector('#login-link')?.classList.add('active');
     } else if (currentPath.startsWith('/register')) {

public/views/api-keys.html

@@ -11,7 +11,7 @@
     </div>
 
   <div class="tab-content" id="docs-tab" style="display: none;">
-    <div class="api-documentation container">
+    <div class="api-documentation">
       <h1>API Documentation</h1>
 
       <div class="api-section">
@@ -319,18 +319,10 @@ <h2>API Key Management</h2>
           </div>
         </div>
       </div>
-      
-      <div class="api-key-section">
-        <h2>Manage Your API Keys</h2>
-        <p>Create and manage your API keys directly from this page.</p>
-        
-        <div class="api-key-manager">
-          <api-key-manager></api-key-manager>
-        </div>
-      </div>
     </div>    
   </div>
 </div>
+
 <script type="module" src="/js/views/api-keys.js"></script>
 
 <style>

public/views/login.html

@@ -28,6 +28,14 @@ <h2 data-i18n="navigation.login">Login</h2>
 <script type="module" src="/js/views/login.js"></script>
 
 <style>
+  .login-container {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
   .debug-section {
     margin-top: 30px;
     padding: 15px;

public/views/register.html

@@ -1,4 +1,4 @@
-<div class="register-container container">
+<div class="register-container">
   <h2 data-i18n="auth.create_account">Create an Account</h2>
   <form id="register-form">
     <div class="form-group">
@@ -60,6 +60,13 @@ <h3 data-i18n="subscription.payment_method">Payment Method</h3>
 </div>
 
 <style>
+  .register-container {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
   .plan-options {
     display: flex;
     gap: 15px;