✳ AGENCY AI OSAgente 8 · Comparativa personalizada← Constructor
De briefing a propuesta visual

Una comparativa que habla de tu cliente.

Selecciona un proyecto guardado o importa su JSON. Personaliza la narrativa, carga capturas y documenta si las métricas son reales, estimaciones, objetivos o están pendientes.

1 · Proyecto y copy

Se leen los proyectos del mismo navegador/origen. Para otro dispositivo, importa el JSON exportado desde Agency AI OS.

2 · Antes y después

3 · Métricas y evidencia

Los valores son opcionales. Si no hay medición, déjalos vacíos.

No confundas objetivos con resultados. Para comparar PageSpeed, registra URL, fecha, dispositivo y condiciones equivalentes.

El borrador se guarda en este navegador. Las capturas se incrustan en el HTML exportado y no se suben a un servidor.

Live preview
Cliente de demostración · Antes / Después
Captura anterior
NEGOCIOServicios · Contacto
Situación actual

Una presencia digital que no explica con claridad el valor del negocio.

Más información
Captura de la propuesta
CLIENTEServicios · Contacto
Propuesta personalizada

Una propuesta clara para dar el siguiente paso.

Hablemos de tu proyecto ↗
ANTESPendiente
DESPUÉSPendiente
↔
ANTESDESPUÉS

Importa un proyecto o edita los campos para crear una propuesta específica.

Exporta un único HTML con CSS, interacción y capturas embebidas; no requiere CDN. No es una auditoría automática de rendimiento.

'} function exportHtml(){const d=data();fileDownload("propuesta_interactiva_"+slug(d.client)+".html",standalone(d),"text/html;charset=utf-8");toast("HTML autónomo generado. Ya puedes enviarlo al cliente.")} $("#project-select").addEventListener("change",e=>fromProject(project(e.target.value)));$("#import-json").addEventListener("change",async e=>{const f=e.target.files?.[0];if(!f)return;try{const raw=JSON.parse(await f.text());const arr=raw.projects&&Array.isArray(raw.projects)?raw.projects:[raw.project||raw];imported.push(...arr.filter(p=>p&&typeof p==="object"));options();const p=imported[imported.length-1];$("#project-select").value=p.id||("import-"+(all().length-1));fromProject(p);toast("Proyecto importado.")}catch(err){toast("JSON no reconocido. Usa la exportación de proyecto de Agency AI OS.")}e.target.value=""}); $("#upload-before").addEventListener("change",e=>imageFile(e.target,"before"));$("#upload-after").addEventListener("change",e=>imageFile(e.target,"after"));function imageFile(input,side){const f=input.files?.[0];if(!f)return;if(!f.type.startsWith("image/")||f.size>8*1024*1024){toast("Usa una imagen válida de hasta 8 MB.");input.value="";return}const reader=new FileReader();reader.onload=()=>{if(side==="before")beforeImg=String(reader.result);else afterImg=String(reader.result);render();toast("Captura lista para incrustar en la exportación.")};reader.readAsDataURL(f)} $("#refresh").addEventListener("click",()=>{render();toast("Comparativa actualizada.")});$("#save-local").addEventListener("click",()=>{try{localStorage.setItem(LKEY,JSON.stringify({...data(),savedAt:new Date().toISOString()}));toast("Ajustes guardados en este navegador.")}catch(e){toast("No se pudo guardar el borrador.")}});$("#export-html").addEventListener("click",exportHtml);$("#export-json").addEventListener("click",()=>fileDownload("datos-comparativa-"+slug($("#client").value)+".json",JSON.stringify(data(),null,2),"application/json;charset=utf-8"));$("#present").addEventListener("click",()=>{if($("#stage").requestFullscreen)$("#stage").requestFullscreen().catch(()=>toast("Usa el modo pantalla completa del navegador."));else toast("Usa el modo pantalla completa del navegador.")}); $$("input,textarea,select").forEach(el=>{if(["project-select","import-json","upload-before","upload-after"].includes(el.id))return;el.addEventListener("input",render);el.addEventListener("change",render)});$$("[data-device]").forEach(b=>b.addEventListener("click",()=>{$("#stage").style.height=b.dataset.device==="mobile"?"670px":b.dataset.device==="tablet"?"580px":"";$$("[data-device]").forEach(x=>x.setAttribute("aria-pressed",String(x===b)))})); metricUI();options();try{const d=JSON.parse(localStorage.getItem(LKEY)||"null");if(d){for(const [k,id] of [["client","client"],["sector","sector"],["accent","accent"],["offer","offer"],["audience","audience"],["goal","goal"],["beforeTitle","before-title"],["beforeCopy","before-copy"],["afterTitle","after-title"],["afterCopy","after-copy"],["cta","cta"],["phone","phone"],["note","evidence-note"]])if(typeof d[k]==="string")$("#"+id).value=d[k];if(d.metrics)for(const side of ["before","after"])for(const [id] of defs){const m=d.metrics[side]?.[id];if(m){$("#"+(side==="before"?"b-":"a-")+id).value=m.value??"";$("#"+(side==="before"?"bs-":"as-")+id).value=m.status||"pending"}}}}catch(e){}const pid=new URLSearchParams(location.search).get("project");if(pid){const p=project(pid);if(p){$("#project-select").value=pid;fromProject(p)}else $("#status").textContent="No se encontró el proyecto en este origen. Importa el JSON exportado."}else render(); })();