docs.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>InteeBuild — Documentación</title>
<meta name="description" content="Guías completas de InteeBuild: permisos, foreground, providers, API, decompiler y producción."/>
<link rel="stylesheet" href="./css/style.css"/>
<link rel="icon" href="./assets/icon.svg" type="image/svg+xml"/>
<style>
.docs-wrap{max-width:1120px;margin:0 auto;padding:24px;display:grid;grid-template-columns:250px 1fr;gap:20px;align-items:start;}
@media(max-width:860px){.docs-wrap{grid-template-columns:1fr}}
.docs-nav{position:sticky;top:88px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;}
.docs-nav b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:4px 0 10px;}
.docs-nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;}
.docs-nav a:hover{background:var(--surface-2);color:#fff;}
.docs-nav a.active{background:var(--accent-soft);color:#fff;border:1px solid rgba(99,102,241,.35);}
.docs-content{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;min-height:400px;}
.docs-content h1{font-size:24px;margin:0 0 12px;color:#fff;}
.docs-content h2{font-size:17px;margin:26px 0 10px;color:#fff;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:8px;}
.docs-content h3{font-size:14.5px;margin:18px 0 8px;color:#fff;}
.docs-content p{color:var(--muted);font-size:13.5px;line-height:1.65;}
.docs-content li{color:var(--muted);font-size:13px;margin-bottom:6px;line-height:1.6;}
.docs-content code{font-family:monospace;font-size:12px;background:var(--surface-2);border:1px solid var(--border);padding:2px 6px;border-radius:6px;color:#38bdf8;}
.docs-content pre{background:#0b0f1a;border:1px solid var(--border);border-radius:10px;padding:14px;overflow:auto;font-size:12px;color:#38bdf8;line-height:1.55;}
.docs-content pre code{background:none;border:none;padding:0;}
.docs-content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:12.5px;}
.docs-content th,.docs-content td{border:1px solid var(--border);padding:8px 10px;text-align:left;}
.docs-content th{background:var(--surface-2);color:#fff;}
.docs-content td{color:var(--muted);}
.docs-content blockquote{border-left:3px solid var(--accent);margin:14px 0;padding:8px 14px;background:var(--accent-soft);border-radius:0 8px 8px 0;color:#c7d2fe;font-size:13px;}
.docs-content a{color:var(--accent);}
.docs-loading{color:var(--muted);font-size:13px;}
</style>

  <link rel="alternate" hreflang="es" href="https://inteebuild.onrender.com/docs.html" />
  <link rel="alternate" hreflang="en" href="https://inteebuild.onrender.com/en/docs.html" />
  <link rel="alternate" hreflang="ru" href="https://inteebuild.onrender.com/ru/docs.html" />
  <link rel="alternate" hreflang="ch" href="https://inteebuild.onrender.com/ch/docs.html" />
  <link rel="alternate" hreflang="br" href="https://inteebuild.onrender.com/br/docs.html" />
  <link rel="alternate" hreflang="x-default" href="https://inteebuild.onrender.com/docs.html" />
  <link rel="canonical" href="https://inteebuild.onrender.com/docs.html" />
  <meta property="og:locale" content="es_ES" />
  <meta property="og:url" content="https://inteebuild.onrender.com/docs.html" />
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","url":"https://inteebuild.onrender.com/","name":"InteeBuild"}</script>
</head>
<body>
<header class="topbar">
<div class="brand"><span class="logo"><img src="./assets/icon.svg" width="22" height="22" alt="IB"/></span><div class="brand-txt"><strong>InteeBuild</strong><small>Documentación</small></div></div>
<div class="topbar-right"><a href="./index.html" class="btn ghost sm">← Studio</a><a href="./developer.html" class="btn ghost sm">Developer API</a></div>
</header>
<main class="docs-wrap">
<nav class="docs-nav" id="docsNav"><b>Guías</b></nav>
<article class="docs-content" id="docsContent"><p class="docs-loading">Cargando documentación…</p></article>
</main>
<footer style="max-width:1120px;margin:0 auto;padding:0 24px 30px;display:flex;gap:8px;color:var(--faint);font-size:12px;justify-content:center">
<span>InteeBuild Docs</span><span class="sep">·</span><a href="./index.html">Studio</a><span class="sep">·</span><a href="./developer.html">Developer API</a><span class="sep">·</span><a href="./historial.html">Historial</a>
</footer>
<script src="./js/icons.js"></script>
<script>
const DOCS=[
  {id:'README', file:'docs/README.md', icon:'book', label:'Índice'},
  {id:'quickstart', file:'docs/quickstart.md', icon:'rocket', label:'Inicio rápido'},
  {id:'templates', file:'docs/templates.md', icon:'palette', label:'Plantillas'},
  {id:'permissions', file:'docs/permissions.md', icon:'shield', label:'Permisos'},
  {id:'foreground', file:'docs/foreground.md', icon:'radio', label:'Foreground'},
  {id:'ui-ux', file:'docs/ui-ux.md', icon:'sparkles', label:'UI/UX'},
  {id:'security', file:'docs/security.md', icon:'lock', label:'Seguridad'},
  {id:'providers', file:'docs/providers.md', icon:'package', label:'Providers'},
  {id:'outputs', file:'docs/outputs.md', icon:'globe', label:'Salidas gratis'},
  {id:'versions', file:'docs/versions.md', icon:'refresh', label:'Versiones y CI/CD'},
  {id:'analyzer', file:'docs/analyzer.md', icon:'search', label:'Analyzer'},
  {id:'api', file:'docs/api.md', icon:'terminal', label:'API'},
  {id:'decompiler', file:'docs/decompiler.md', icon:'box', label:'Decompiler'},
  {id:'production', file:'docs/production.md', icon:'server', label:'Producción'},
  {id:'troubleshooting', file:'docs/troubleshooting.md', icon:'life-buoy', label:'Problemas'},
  {id:'faq', file:'docs/faq.md', icon:'help-circle', label:'FAQ'},
  {id:'autobuild', file:'docs/autobuild.md', icon:'git-branch', label:'Auto-compilación'}
];
function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
function md(src){
  const lines=src.split('\n');
  let html='', inCode=false, codeLang='', codeBuf=[], inTable=false, tableHead=null, tableRows=[], inList=false;
  function flushTable(){
    if(!tableHead) return;
    html+='<table><thead><tr>'+tableHead.map(c=>'<th>'+inline(c)+'</th>').join('')+'</tr></thead><tbody>'
      +tableRows.map(r=>'<tr>'+r.map(c=>'<td>'+inline(c)+'</td>').join('')+'</tr>').join('')+'</tbody></table>';
    tableHead=null; tableRows=[]; inTable=false;
  }
  function inline(t){
    let s=esc(t);
    s=s.replace(/`([^`]+)`/g,'<code>$1</code>');
    s=s.replace(/\*\*([^*]+)\*\*/g,'<b>$1</b>');
    s=s.replace(/\[([^\]]+)\]\(([^)]+)\)/g,(m,a,b)=>{
      if(b.endsWith('.md')) return '<a href="#" data-doc="'+b+'">'+a+'</a>';
      return '<a href="'+b+'">'+a+'</a>';
    });
    return s;
  }
  for(const line of lines){
    if(line.trim().startsWith('```')){ if(!inCode){inCode=true;codeBuf=[];} else {inCode=false;html+='<pre><code>'+esc(codeBuf.join('\n'))+'</code></pre>';} continue; }
    if(inCode){codeBuf.push(line);continue;}
    if(/^\|.+\|$/.test(line.trim())){
      const cells=line.trim().slice(1,-1).split('|').map(c=>c.trim());
      if(cells.every(c=>/^:?-{3,}:?$/.test(c))){continue;}
      if(!inTable){inTable=true;tableHead=cells;}
      else tableRows.push(cells);
      continue;
    } else if(inTable){flushTable();}
    const h=line.match(/^(#{1,3})\s+(.*)/);
    if(h){ if(inList){html+='</ul>';inList=false;} html+='<h'+h[1].length+'>'+inline(h[2])+'</h'+h[1].length+'>'; continue; }
    if(/^>\s?/.test(line)){ if(inList){html+='</ul>';inList=false;} html+='<blockquote>'+inline(line.replace(/^>\s?/,''))+'</blockquote>'; continue; }
    if(/^[-*]\s+/.test(line)){ if(!inList){html+='<ul>';inList=true;} html+='<li>'+inline(line.replace(/^[-*]\s+/,''))+'</li>'; continue; }
    if(/^\d+\.\s+/.test(line)){ if(!inList){html+='<ul>';inList=true;} html+='<li>'+inline(line.replace(/^\d+\.\s+/,''))+'</li>'; continue; }
    if(!line.trim()){ if(inList){html+='</ul>';inList=false;} continue; }
    if(inList){html+='</ul>';inList=false;}
    html+='<p>'+inline(line)+'</p>';
  }
  if(inTable) flushTable();
  if(inList) html+='</ul>';
  if(inCode) html+='<pre><code>'+esc(codeBuf.join('\n'))+'</code></pre>';
  return html;
}
const DOCS_LANG=(location.pathname.match(/^\/(es|en|ru|ch|br)(?=\/)/)||[])[1]||'es';
function mdUrl(file){return DOCS_LANG==='es'?file:'docs/'+DOCS_LANG+'/'+file.split('/').pop();}
async function loadDoc(id){
  const d=DOCS.find(x=>x.id===id)||DOCS[0];
  document.querySelectorAll('#docsNav a').forEach(a=>a.classList.toggle('active',a.dataset.doc===d.id));
  const box=document.getElementById('docsContent');
  box.innerHTML='<p class="docs-loading"><b>'+esc(d.label)+'</b> <span>Cargando documentación…</span></p>';
  try{
    let r=await fetch(mdUrl(d.file));
    if(!r.ok&&DOCS_LANG!=='es') r=await fetch(d.file);
    if(!r.ok) throw new Error('No se pudo cargar '+d.file);
    const t=await r.text();
    box.innerHTML=md(t);
    box.scrollIntoView({behavior:'smooth',block:'start'});
    box.querySelectorAll('a[data-doc]').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();const f=a.getAttribute('data-doc');const m=f.match(/([^/]+)\.md/);loadDoc(m?m[1]:'README');}));
  }catch(e){box.innerHTML='<p style="color:var(--danger)">'+esc(e.message)+'</p>';}
  location.hash='docs-'+d.id;
}
const nav=document.getElementById('docsNav');
DOCS.forEach(d=>{
  const a=document.createElement('a');
  a.href='#docs-'+d.id;
  a.dataset.doc=d.id;
  a.innerHTML=IBIcon(d.icon)+'<span>'+esc(d.label)+'</span>';
  a.onclick=e=>{e.preventDefault();loadDoc(d.id);};
  nav.appendChild(a);
});
const initial=(location.hash||'').replace('#docs-','');
loadDoc(DOCS.some(d=>d.id===initial)?initial:'README');
</script>
</body>
</html>