DEMO — SEIS PROMPTS 1: reglas. 2: primera web /01/. 3: diseño /02/. 4: atlas /03/. 5: identidad e historia /04/. 6: Órbita completa /05/. Todas las rutas web parten de /demo/etapas/. Seis prompts registrados. Cinco webs originales de Bob. 24 capturas reales. Las cifras de los pedidos ya enviados se conservan como registro; el prompt 5 ajusta las reglas al nuevo alcance. Desde el prompt 3 omitimos capturas de permisos para evitar repeticiones. PROMPT 1 — REGISTRADO Vamos a construir un explorador de estrellas en siete etapas. Antes de empezar, creá `.bob/rules/demo.md` con estas reglas: - Respondé en español. - Usá HTML, CSS y JavaScript, sin dependencias ni recursos remotos para la web. - Cada versión tendrá su propia ruta, desde `/demo/etapas/01/` hasta `/demo/etapas/07/`, con un `index.html`. - Para cada entrega, copiá la etapa anterior y modificá únicamente la nueva. Conservá las versiones anteriores y sus recursos. - Implementá solo lo pedido en cada prompt, sin adelantar funciones. - Cuidá celular y navegación con teclado. - Aclará que el mapa es ilustrativo. No inventes datos ni pruebas. - Terminá cada entrega indicando su URL y qué verificaste. - No hagas commits ni despliegues. Las capturas las hago yo. Todavía no construyas la web. Mostrame las reglas y explicame brevemente cómo las vas a aplicar. PROMPT 2 — REGISTRADO Arranquemos con la etapa 01. Primero confirmá la carpeta del proyecto y verificá que nuestras reglas estén en `.bob/rules/demo.md` dentro de ella: en el permiso anterior apareció una ruta global. Si faltan las reglas locales, crealas con lo que acordamos, sin modificar las globales. Creá la primera web en `demo/etapas/01/index.html`, accesible desde `/demo/etapas/01/` al servir la raíz del proyecto. Quiero algo muy básico: - Fondo claro y título “Explorador de estrellas”. - Una breve explicación. - Un mapa sencillo con 12 estrellas representadas por puntos con sus nombres. - Al elegir una estrella, mostrar su nombre y constelación debajo del mapa. - Aclarar que las posiciones son ilustrativas y no representan el cielo real de una fecha o ubicación. Todavía sin buscador, zoom, animaciones ni galaxias. Usá HTML, CSS y JavaScript locales y cuidá que funcione en celular. Explicá brevemente el plan y después implementalo. Al terminar, indicame cómo abrirlo, la URL completa y qué pruebas ejecutaste. PROMPT 3 — REGISTRADO Sigamos con la etapa 02 dentro del mismo proyecto: `/Users/athinasalim/.bob/playground`. Leé las reglas locales. Copiá `demo/etapas/01/` a `demo/etapas/02/` y trabajá únicamente sobre esa nueva versión. Conservá intacta la etapa 01. Ahora quiero un salto visual: - Fondo azul muy oscuro en toda la página, estrellas luminosas y acentos cian. - Un encabezado más cuidado y un mapa amplio. - Una ficha lateral que se actualice al elegir una estrella; en celular puede ir debajo. - Conservá las mismas 12 estrellas, sus nombres y la selección con teclado. - Mantené el aviso de posiciones ilustrativas. Todavía no agregues buscador, zoom, arrastre, partículas ni galaxias. Esta etapa es para mejorar el diseño y la distribución. La nueva versión debe abrir en `/demo/etapas/02/` al servir la raíz del proyecto. No modifiques recursos compartidos que cambien la etapa anterior. Explicá brevemente el plan, implementalo y terminá con la URL completa y las pruebas realmente ejecutadas. PROMPT 4 — REGISTRADO Acortemos la demo a cinco prompts en total, contando el de reglas. Este es el cuarto: agrupemos varias mejoras en una entrega. Seguí en `/Users/athinasalim/.bob/playground`. Actualizá las reglas locales para reflejar cuatro versiones web, de `/demo/etapas/01/` a `/demo/etapas/04/`. Conservá las demás reglas. Copiá `demo/etapas/02/` a `demo/etapas/03/` y modificá únicamente la nueva versión, sin alterar las anteriores ni sus recursos. Convertí el mapa en un atlas interactivo: - Buscador por nombre y constelación, ignorando tildes, mayúsculas y espacios sobrantes. Vacío muestra las 12 estrellas; sin coincidencias muestra un mensaje claro. - Al elegir un resultado, resaltá y centrá la estrella y abrí su ficha. - Arrastre para mover el mapa, botones de acercar y alejar y uno para restablecer la vista. - Ficha con nombre y constelación, botón de cierre y cierre con Escape. - Conservá el estilo oscuro con cian, las mismas estrellas, el aviso ilustrativo y la navegación con teclado. No interceptes teclas mientras escribo en el buscador. - En celular, evitá que los controles y la ficha se tapen. Todavía sin galaxia, nuevas estrellas ni animaciones: eso queda para el último prompt. Explicá un plan breve, implementá y terminá con la URL completa de `/demo/etapas/03/`, un resumen de los cambios y las pruebas realmente ejecutadas. Si no probaste en un navegador, aclaralo. Las capturas las hago yo. PROMPT 5 — REGISTRADO Antes del cierre, sumemos una etapa intermedia. Vamos a mostrar seis prompts en total: este es el quinto y Órbita completa queda para el sexto. Seguí en `/Users/athinasalim/.bob/playground`. Actualizá las reglas locales para contemplar cinco versiones web, de `/demo/etapas/01/` a `/demo/etapas/05/`. Conservá las demás reglas. Copiá `demo/etapas/03/` a `demo/etapas/04/` y trabajá solo en la nueva versión. No modifiques las anteriores ni sus recursos. Quiero empezar a ver la idea de Órbita: - Presentá el nombre “Órbita” y una frase breve que invite a explorar. - Agregá un fondo de estrellas sutil, estático y decorativo, que dé profundidad sin confundirse con las 12 estrellas seleccionables. - Usá fondo casi negro, acentos violeta y cian, paneles ligeramente translúcidos, mejor tipografía y más espacio entre elementos. Mantené buena legibilidad. - Conservá las mismas 12 estrellas, búsqueda, arrastre, zoom, reinicio y ficha. Corregí el buscador: con el campo vacío y enfocado debe mostrar las 12 estrellas; Escape o clic afuera pueden cerrar la lista. - Recopilá las versiones anteriores en una sección “Cómo llegamos hasta acá”: una tarjeta con título, resumen breve de lo que cambió y enlace a cada ruta `/demo/etapas/01/`, `/demo/etapas/02/` y `/demo/etapas/03/`. Basate en esos archivos reales. No inventes conversaciones, resultados ni capturas. - Cuidá escritorio y celular, foco visible y navegación con teclado. Conservá el aviso de mapa ilustrativo y el funcionamiento offline. Todavía no agregues galaxia animada, nuevas estrellas, conexiones ni recorrido guiado: quedan para el prompt 6. Explicá un plan breve e implementalo. Terminá con la URL completa de `/demo/etapas/04/`, los cambios y las pruebas realmente ejecutadas, distinguiendo revisión de código de prueba en navegador. Las capturas las hago yo. PROMPT 6 — REGISTRADO Vamos con el sexto y último prompt: completar Órbita a partir de la identidad que ya construimos. Seguí en `/Users/athinasalim/.bob/playground`. Leé las reglas y copiá `demo/etapas/04/` a `demo/etapas/05/`. Trabajá solo en la nueva versión, conservando intactas las anteriores y sus recursos. Conservá el nombre, la paleta violeta y cian, los paneles translúcidos y el historial. Ahora sumá: - Dos vistas: Atlas y Galaxia. En Galaxia, una composición espiral ilustrativa con miles de partículas y movimiento suave. Diferenciá el fondo decorativo de las estrellas seleccionables. - Controles para mostrar nombres y conexiones, pausar el movimiento y cambiar de vista. Respetá la preferencia de movimiento reducido. - Un catálogo de 27 estrellas, conservando las 12 actuales. Usá solo datos que puedas justificar, documentá las fuentes y dejá sin completar lo que no puedas comprobar. La web debe funcionar offline después de construirla. - Un recorrido guiado por Sirio, Aldebarán, Betelgeuse, Vega, Antares y Deneb, con anterior, siguiente y salir. Sumá pantalla completa. - Conservá búsqueda, arrastre, zoom, reinicio y fichas. Al elegir desde el buscador, centrá la estrella incluso si estaba cerca de un borde. El campo vacío y enfocado debe mostrar todo el catálogo. - En “Cómo llegamos hasta acá”, agregá la etapa 04 y mantené los enlaces anteriores. Explicá los cambios en lenguaje sencillo para quien mira la demo. - En celular, evitá que los controles, la lista y la ficha se tapen. Conservá teclado, foco visible y el aviso de mapa ilustrativo. Explicá un plan breve e implementalo. Verificá búsqueda con “ aldebaran ”, campo de búsqueda vacío, selección, centrado, zoom, pausa, cambio de vista, recorrido y enlaces del historial. Distinguí revisión de código de pruebas realmente ejecutadas en navegador. Terminá con la URL completa de `/demo/etapas/05/`, el resumen y cualquier pendiente. No tomes capturas, no hagas commits ni despliegues.