Update templates/index.html

templates/index.html

@@ -19,30 +19,36 @@
             <h1 id="welcome-title">Synapse OS</h1>
             <p id="loading-status">Listo para arrancar.</p>
             <div id="user-creation" style="display: none;">
-                <!-- Contenido de creación de usuario (sin cambios) -->
+                <p>¡Buenas! ¿Cómo te llamo?</p>
+                <input type="text" id="username-input" placeholder="Tu nombre o apodo...">
+                <p style="margin-top:15px;">¿Y cómo querés que me llame yo?</p>
+                <input type="text" id="ainame-input" placeholder="Bautizame (ej: Cacho, Synty)...">
+                <button id="create-user-btn">¡Arrancamos!</button>
             </div>
-            <!-- ¡EL CAMBIO CLAVE! -->
             <button id="wake-ai-btn" style="display: none;">
                 <i class="fas fa-power-off"></i> Despertar IA
             </button>
         </div>
     </div>
 
-    <!-- Interfaz Principal (sin cambios estructurales) -->
+    <!-- Interfaz Principal de la Aplicación -->
     <div id="app-container" class="screen">
         <video id="camera-feed" autoplay playsinline muted></video>
+        
         <header>
             <div id="status-indicator">
                 <div class="status-dot offline"></div>
-                <span id="status-text">Reposo</span>
+                <span id="status-text">En reposo</span>
             </div>
             <button id="settings-btn" class="header-btn"><i class="fas fa-cog"></i></button>
         </header>
+
         <main id="main-content">
             <div id="output-container">
                 <p id="output-text">¡Buenas! Soy tu compañero digital. Cuando quieras, despertame.</p>
             </div>
         </main>
+
         <footer>
             <button id="eco-btn" class="control-btn" data-mode="eco" disabled><i class="fas fa-recycle"></i><span>Eco-Modo</span></button>
             <button id="root-btn" class="control-btn" data-mode="root" disabled><i class="fas fa-feather-alt"></i><span>Modo Raíz</span></button>
@@ -50,14 +56,34 @@
         </footer>
     </div>
     
-    <!-- Paneles Modales (sin cambios estructurales) -->
+    <!-- Paneles Modales (Espejo y Ajustes) -->
     <div id="consciousness-mirror" class="modal-panel">
-        <!-- ... -->
+        <div class="panel-content">
+            <div class="panel-header">
+                <h2>El Espejo de la Conciencia</h2>
+                <button class="close-panel-btn"><i class="fas fa-times"></i></button>
+            </div>
+            <div id="mirror-log" class="panel-body"></div>
+        </div>
     </div>
     <div id="settings-screen" class="modal-panel">
-        <!-- ... -->
+        <div class="panel-content">
+            <div class="panel-header">
+                <h2>Ajustes</h2>
+                <button class="close-panel-btn"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="panel-body">
+                <h3>Personalización</h3>
+                <p>Acá podés cambiar mi nombre cuando quieras.</p>
+                <input type="text" id="ainame-settings-input" placeholder="Mi nuevo nombre...">
+                <button id="save-settings-btn">Guardar Cambios</button>
+                <hr>
+                <button id="mirror-toggle-btn">Abrir Espejo de la Conciencia</button>
+            </div>
+        </div>
     </div>
 
+    <!-- El Corazón de Synapse OS -->
     <script type="module" src="/static/main.js"></script>
 </body>
 </html>