| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> |
| <title>Lumi · Sofía</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900&family=Fredoka:wght@400;500;600;700&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="/static/style.css" /> |
| </head> |
| <body> |
| <div class="app"> |
| <div class="ambient a1"></div> |
| <div class="ambient a2"></div> |
|
|
| <div class="screens"> |
|
|
| |
| <section class="screen active mood-idle" id="screen-hablar"> |
| <button class="parent-gate" id="parentGate" aria-label="Panel de padres (mantener presionado)" type="button">🔒</button> |
| <div class="stage" id="stage"> |
| <div class="sofia-wrap"> |
| <div class="halo"></div> |
| <div class="rings"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div> |
| <div class="sofia-float"> |
| <div class="sofia-body"> |
| <div class="face"> |
| <div class="eyes"><div class="eye"></div><div class="eye"></div></div> |
| <div class="cheek l"></div> |
| <div class="cheek r"></div> |
| <div class="mouth"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="caption" id="caption"> |
| <div class="c-es" id="captionText">Tocá para hablar</div> |
| </div> |
|
|
| <div class="error-banner" id="error"></div> |
|
|
| <div class="dock"> |
| <button class="mic-btn" id="micBtn" aria-label="Hablar con Sofía" type="button"> |
| <svg width="38" height="38" viewBox="0 0 38 38" fill="none" aria-hidden="true"> |
| <g id="micIconIdle" fill="#fff"> |
| <rect x="14" y="8" width="10" height="17" rx="5" /> |
| <path d="M10 19a9 9 0 0 0 18 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" /> |
| <rect x="17.6" y="29" width="2.8" height="4" rx="1.4" /> |
| </g> |
| <g id="micIconListening" stroke="#fff" stroke-width="3.4" stroke-linecap="round" style="display:none"> |
| <line x1="12" y1="15" x2="12" y2="23"> |
| <animate attributeName="y1" values="15;11;15" dur="0.9s" repeatCount="indefinite"/> |
| <animate attributeName="y2" values="23;27;23" dur="0.9s" repeatCount="indefinite"/> |
| </line> |
| <line x1="19" y1="11" x2="19" y2="27"> |
| <animate attributeName="y1" values="11;16;11" dur="0.7s" repeatCount="indefinite"/> |
| <animate attributeName="y2" values="27;22;27" dur="0.7s" repeatCount="indefinite"/> |
| </line> |
| <line x1="26" y1="14" x2="26" y2="24"> |
| <animate attributeName="y1" values="14;10;14" dur="1.05s" repeatCount="indefinite"/> |
| <animate attributeName="y2" values="24;28;24" dur="1.05s" repeatCount="indefinite"/> |
| </line> |
| </g> |
| <g id="micIconStop" fill="#fff" style="display:none"> |
| <rect x="11" y="11" width="16" height="16" rx="4" /> |
| </g> |
| </svg> |
| </button> |
| <div class="hint" id="hint"></div> |
| </div> |
| </section> |
|
|
| </div> |
|
|
| |
| <section class="overlay" id="overlay-padres"> |
| <button class="overlay-close" id="closePadres" aria-label="Cerrar" type="button">✕</button> |
| <div class="section-head"> |
| <div class="ghi">Panel de padres</div> |
| <div class="gsub">ACTIVIDAD RECIENTE</div> |
| </div> |
| <div class="screen-scroll"> |
| <div class="parent-body"> |
| <div class="parent-summary" id="parentSummary"></div> |
| <div class="parent-section-title">Conversación reciente</div> |
| <div class="parent-log" id="parentLog"></div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <script type="module" src="/static/app.js"></script> |
| </body> |
| </html> |
|
|
