feat(umind): Umi, la mascota, y un solo vocabulario en toda la interfaz
La mascota. Umi sale del logo, no es un dibujo aparte: su cuerpo es la "u" del monograma y el punto del logo pasa a ser su antena, así que símbolo y personaje son la misma forma vista dos veces. Por eso puede estar al lado del logo sin competirle. Tiene estados, y no son decoración: cada pantalla vacía dice algo distinto y la cara lo dice antes que el texto. Dormida cuando todavía no pasó nada, buscando cuando falta cargarle información, contenta cuando no hay errores, alerta cuando algo se rompió. Los ojos toman el color de la superficie de atrás en vez de ser blancos, así se apoya sobre cualquier tarjeta y en modo oscuro no quedan dos puntos flotando. Las pantallas vacías. Había una buena y ocho que decían "Sin canales configurados." y nada más — el usuario quedaba resolviendo solo qué significa eso y qué hacer. Ahora las ocho explican qué va ahí y por qué importa: "No está atendiendo en ningún lado", "Todavía no sabe nada de tu negocio". El vocabulario. La misma cosa tenía dos nombres según la pantalla: tenant y espacio, tool y herramienta. Un producto que se llama distinto a sí mismo en cada lugar se siente como varios productos pegados. Queda: espacio, agente, herramienta, fuente. Y "al AI" pasa a "a la IA", que además es el género que ya usaba el resto del panel. Y la barra de scroll de las pestañas, que se veía gris y gruesa sobre el contenido: en escritorio las siete entran holgadas y no hacía falta, en móvil siguen deslizándose pero sin la barra encima. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
5086087e1b
commit
3ceb61c035
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -5,8 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='22' fill='%238eb02f'/%3E%3Cpath d='M32,42 V58 A14,14 0 0 0 60,58 V42' fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M60,58 V64' fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='28' r='7' fill='%23fff'/%3E%3C/svg%3E" />
|
||||
<title>uMind Studio</title>
|
||||
<script type="module" crossorigin src="/orchestrator/assets/index-CRnmvnlL.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/orchestrator/assets/index-Culm0hM7.css">
|
||||
<script type="module" crossorigin src="/orchestrator/assets/index-Da7ZrNMD.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/orchestrator/assets/index-DNRtUHD7.css">
|
||||
</head>
|
||||
<!-- Sin clase de fondo: el color lo pone body en style.css desde los tokens,
|
||||
que son los que cambian con el tema. Una utilidad acá le ganaba a la
|
||||
|
||||
+26
-1
@@ -387,6 +387,14 @@ a:focus-visible, button:focus-visible {
|
||||
}
|
||||
|
||||
.salida.on { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }
|
||||
.umi-mini {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
vertical-align: -3px;
|
||||
margin-right: 5px;
|
||||
color: var(--lime);
|
||||
}
|
||||
|
||||
.salida-rotulo {
|
||||
display: block;
|
||||
font-family: var(--mono);
|
||||
@@ -569,6 +577,20 @@ footer a:hover { color: var(--cyan); }
|
||||
<div class="marco">
|
||||
|
||||
<div class="escenario" id="escenario">
|
||||
<!-- Umi vive en el mismo archivo que la usa: una promo tiene que poder
|
||||
copiarse a cualquier lado sin arrastrar dependencias. -->
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||
<symbol id="umi" viewBox="0 0 120 120">
|
||||
<circle cx="60" cy="26" r="6" fill="currentColor" />
|
||||
<line x1="60" y1="32" x2="60" y2="44" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
|
||||
<path d="M30,46 V76 A30,30 0 0 0 90,76 V46 Z" fill="currentColor" />
|
||||
<circle cx="47" cy="66" r="6" fill="var(--panel)" />
|
||||
<circle cx="73" cy="66" r="6" fill="var(--panel)" />
|
||||
<circle cx="48" cy="67" r="3" fill="#11150F" />
|
||||
<circle cx="74" cy="67" r="3" fill="#11150F" />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<canvas id="campo" class="campo" aria-hidden="true"></canvas>
|
||||
<div class="foco" id="foco" aria-hidden="true"></div>
|
||||
|
||||
@@ -641,7 +663,10 @@ footer a:hover { color: var(--cyan); }
|
||||
</div>
|
||||
|
||||
<div class="salida" id="salida">
|
||||
<span class="salida-rotulo">Lo que recibe tu cliente</span>
|
||||
<span class="salida-rotulo">
|
||||
<svg class="umi-mini" viewBox="0 0 120 120" aria-hidden="true"><use href="#umi" /></svg>
|
||||
Lo que recibe tu cliente
|
||||
</span>
|
||||
<span id="texto-salida"></span><span class="cursor" id="cursor"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user