> ## Documentation Index > Fetch the complete documentation index at: https://docs.morada.ai/llms.txt > Use this file to discover all available pages before exploring further. # Teste a ideia de um app com um protótipo navegável > Clique entre telas e teste uma ideia de fluxo antes de investir no desenvolvimento do aplicativo. export const mockupArtifact = { filename: "prototipo-obra-aurora.html", sha256: "44cf73565af3b498852693c4169cb84b7c74cda53c2f667d4ecb0baaaef4d466", html: ["\n\n\n \n \n \n Obra Aurora — Protótipo de acompanhamento\n \n\n\n
\n
\n
\n
\n

Acompanhamento de obra

\n

Obra Aurora

\n
\n Protótipo\n
\n

Todos os nomes, datas, percentuais e responsáveis são exemplos fictícios.

\n
\n\n
\n
\n
\n
\n

Visão geral

\n

Resumo rápido para acompanhar o andamento.

\n
\n Dados de exemplo\n
\n\n
\n

Avanço físico · exemplo

\n
\n 42%\n Percentual ilustrativo do projeto completo\n
\n
\n
\n
\n
Início: 10/02/2026Entrega: 15/11/2027
\n
\n\n
\n
\n \n \n \n

Prazo · exemplo

\n

No planejado

\n

Referência fictícia

\n
\n
\n \n \n \n

Etapa · exemplo

\n

Estrutura

\n

63% concluída

\n
\n
\n\n
\n
\n

Marcos da obra

\n Exemplos\n
\n
\n
\n \n
Fundação
Concluída em 18/08/2026 · exemplo
\n Concluída\n
\n
\n \n
Estrutura
20/08 a 28/09/2026 · exemplo
\n Atual\n
\n
\n \n
Alvenaria
Início previsto: 01/10/2026 · exemplo
\n Próxima\n
\n
\n \n
Instalações
Início previsto: 16/11/2026 · exemplo
\n Planejada\n
\n
\n
\n
\n\n \n\n \n
\n\n \n\n
\n
\n\n \n\n\n"].join("") }; export const GeneratedArtifact = ({example, source, language = "pt"}) => { const [artifact, setArtifact] = useState(null); const [expanded, setExpanded] = useState(false); const [canExpand, setCanExpand] = useState(false); const [expandFailed, setExpandFailed] = useState(false); const id = `generated-artifact-${example}`; const labels = language === "en" ? { loading: "Opening the generated example…", expand: "Enlarge example", restore: "Exit full screen", download: "Download original file", title: "Complete generated example", expandError: "Full screen is unavailable in this browser. You can still explore the example below or download it.", note: "Complete file generated in a Morada OS test conversation with fictional data. Scroll inside the example to explore the whole page." } : { loading: "Abrindo o exemplo gerado…", expand: "Ampliar exemplo", restore: "Sair da tela cheia", download: "Baixar arquivo original", title: "Exemplo completo gerado", expandError: "Não foi possível ampliar neste navegador. Você pode explorar o exemplo abaixo ou baixar o arquivo.", note: "Arquivo completo gerado em uma conversa de teste do Morada OS, com dados fictícios. Role dentro do exemplo para explorar a página inteira." }; useEffect(() => { setExpandFailed(false); const escapes = { "&": "&", '"': """, "<": "<", ">": ">" }; const html = source.html.replace(/[&"<>]/g, character => escapes[character]); const policy = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; connect-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'; worker-src 'none'; webrtc 'block'"; const srcDoc = ``; setArtifact({ filename: source.filename, html: source.html, srcDoc }); }, [source.html, source.filename, language]); useEffect(() => { setCanExpand(Boolean(document.fullscreenEnabled)); const changed = () => setExpanded(document.fullscreenElement?.id === id); document.addEventListener("fullscreenchange", changed); return () => document.removeEventListener("fullscreenchange", changed); }, [id]); const download = () => { if (!artifact) return; const url = URL.createObjectURL(new Blob([artifact.html], { type: "text/html;charset=utf-8" })); const anchor = document.createElement("a"); anchor.href = url; anchor.download = artifact.filename; document.body.appendChild(anchor); anchor.click(); anchor.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); }; const enlarge = () => { setExpandFailed(false); const action = expanded ? document.exitFullscreen() : document.getElementById(id)?.requestFullscreen(); action?.catch(() => setExpandFailed(true)); }; const css = ` .mo-artifact { --artifact-bg:#f8fafc; --artifact-ink:#1e293b; --artifact-line:#cbd5e1; --artifact-hover:#e2e8f0; margin:24px 0; border:1px solid var(--artifact-line); border-radius:16px; overflow:hidden; background:var(--artifact-bg); color:var(--artifact-ink); } .dark .mo-artifact { --artifact-bg:#18212e; --artifact-ink:#f1f5f9; --artifact-line:#475569; --artifact-hover:#334155; } .mo-artifact:fullscreen { width:100vw; height:100dvh; border:0; border-radius:0; margin:0; display:flex; flex-direction:column; } .mo-artifact .artifact-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px; border-bottom:1px solid var(--artifact-line); flex-shrink:0; } .mo-artifact .artifact-name { flex:1 1 180px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .mo-artifact button { min-height:44px; padding:8px 12px; border:1px solid var(--artifact-line); border-radius:8px; color:var(--artifact-ink); background:transparent; cursor:pointer; font:inherit; font-size:12px; } .mo-artifact button:hover { background:var(--artifact-hover); } .mo-artifact button:active { box-shadow:inset 0 0 0 2px var(--artifact-ink); } .mo-artifact button:focus-visible { outline:3px solid #2683eb; outline-offset:2px; } .mo-artifact button:disabled { cursor:default; opacity:.5; } .mo-artifact > iframe { display:block; width:100%; height:720px; border:0; background:white; } .mo-artifact:fullscreen > iframe { flex:1; min-height:0; height:100%; } .mo-artifact .artifact-status { padding:24px; font-size:14px; } .mo-artifact .artifact-note { margin:0; padding:12px; font-size:12px; line-height:1.6; color:var(--artifact-ink); border-top:1px solid var(--artifact-line); } .mo-artifact:fullscreen .artifact-note { display:none; } @media(max-width:600px) { .mo-artifact > iframe { height:640px; } .mo-artifact .artifact-name { flex-basis:100%; } } `; return
{artifact?.filename || labels.title} {canExpand && }
{artifact ?