| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
| <title>Synapse OS</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| <link rel="stylesheet" href="/static/style.css"> |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1"></script> |
| </head> |
| <body id="synapse-body"> |
| |
| <div id="welcome-screen" class="screen visible"> |
| <div class="welcome-content"> |
| <div class="logo-container"> |
| <div class="logo-bg"></div> |
| <i class="fas fa-brain logo-icon"></i> |
| </div> |
| <h1 id="welcome-title">Synapse OS</h1> |
| <p id="loading-status">Listo para arrancar.</p> |
| <div id="user-creation" style="display: none;"> |
| <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> |
| <button id="wake-ai-btn" style="display: none;"> |
| <i class="fas fa-power-off"></i> Despertar IA |
| </button> |
| </div> |
| </div> |
|
|
| |
| <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">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> |
| <button id="serenity-btn" class="control-btn" data-mode="serenity"><i class="fas fa-peace"></i><span>Modo Zen</span></button> |
| </footer> |
| </div> |
| |
| |
| <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> |
|
|
| |
| <script type="module" src="/static/main.js"></script> |
| </body> |
| </html> |
