AI Blog Builder
Générateur visuel HTML/CSS/JS + export ZIP
Canvas (glisser pour déplacer, alt+glisser pour redimensionner)
Conseil: Utilise "Curator IA" pour générer un blog de départ.
Aucun contenu — ajoute un header ou clique "Curator IA"
`; const scriptJs = "document.addEventListener('DOMContentLoaded',()=>console.log('Site chargé'));"; const files = {'index.html':indexHtml, 'styles.css':css, 'script.js':scriptJs}; const assets = {}; DB.assets.forEach(a=>{ assets['assets/'+sanitizeFilename(a.name)] = a.data; }); const config = {site, elements:DB.elements, assets:DB.assets.map(a=>({id:a.id,name:a.name}))}; if(document.getElementById('includeJson').value==='yes') files['config.json'] = JSON.stringify(config, null, 2); return {files, assets}; } function sanitizeFilename(name){ return name.replace(/[^a-z0-9\.\-\_]/gi,'_'); } function downloadZip(){ const out = generateFiles(); const zip = new JSZip(); Object.keys(out.files).forEach(k=> zip.file(k, out.files[k])); Object.keys(out.assets).forEach(k=>{ const data = out.assets[k]; const comma = data.indexOf(','); const bin = data.substring(comma+1); zip.file(k, bin, {base64:true}); }); zip.generateAsync({type:'blob'}).then(content=>{ saveAs(content, (document.getElementById('exportName').value||'my-blog')+'.zip'); }); } function openPreview(){ const files = generateFiles().files; showCode(files['index.html']); } function showCode(code){ document.getElementById('codeView').textContent = code; document.getElementById('modal').style.display='flex'; } function smartGenerate(auto=false){ const title = document.getElementById('siteTitle').value || 'Mon Blog'; const menu = (document.getElementById('menuInput').value||'Accueil | Blog | À propos').split('|').map(s=>s.trim()); DB.menu = menu; DB.elements = []; DB.elements.push({id:'e_'+Math.random().toString(36).slice(2,9),type:'header',x:20,y:20,w:940,h:120,content:title,style:{fontSize:28,color:'#fff',bg:document.getElementById('primaryColor').value}}); DB.elements.push({id:'e_'+Math.random().toString(36).slice(2,9),type:'hero',x:20,y:160,w:940,h:220,content:document.getElementById('siteTag').value||'Explorations, tutoriels, récits',style:{fontSize:20,color:'#041023',bg:'#f3f6fb'}}); for(let i=1;i<=3;i++){ DB.elements.push({id:'e_'+Math.random().toString(36).slice(2,9),type:'post',x:20,y:420 + (i-1)*180,w:320,h:160,content:`Article ${i} Ceci est un extrait généré par Curator IA.`,style:{fontSize:16}}); } saveState(); renderCanvasFromDB(); if(!auto) alert('Curator IA a généré une structure initiale. Tu peux modifier, déplacer et ajouter images.'); } function escapeHtml(s){ return (s||'').toString().replace(/&/g,'&').replace(//g,'>'); } function downloadBlob(filename, data) { const blob = new Blob([data], {type:'application/octet-stream'}); saveAs(blob, filename); } if(!DB.elements || DB.elements.length===0){ /* vide jusqu'à génération */ } window.addEventListener('beforeunload', ()=> saveState());