מחולל אתרים וקוד עצמאי

עריכת פסקאות, קישורים, תצוגה מקדימה ויצירת קוד מלא

עורך הפסקאות

הטקסט מתעדכן מיד. אפשר להוסיף קישור לכל פסקה.

תצוגה מקדימה חיה

קוד HTML + CSS מלא

קוד JavaScript עצמאי

'} function runtimeSourceString(){return ${jsonJS(runtimeSource(data))}} function siteJS(){return ${jsonJS("/* JavaScript עצמאי: נתוני האתר ותבניות המקור מוטמעים בקובץ. */")}+'\\nconst INITIAL_PARAGRAPHS='+JSON.stringify(items)+';\\nconst SITE_CSS='+JSON.stringify(css())+';\\nconst SITE_BODY='+JSON.stringify(body())+';\\n'+${jsonJS(runtimeSource(data))}} function status(s){$("gStatus").textContent=s} function save(){try{localStorage.setItem(KEY,JSON.stringify(items))}catch(e){}render()} function field(card,label,key,p,multi){const l=document.createElement("label");l.textContent=label;const el=document.createElement(multi?"textarea":"input");el.value=p[key];el.addEventListener("input",()=>{p[key]=el.value;save()});card.append(l,el)} function render(){const editors=$("gEditors"),preview=$("gPreview");editors.replaceChildren();preview.replaceChildren();if(!items.length){const e=document.createElement("div");e.className="empty";e.textContent="אין פסקאות. אפשר להוסיף פסקה חדשה.";editors.append(e);const q=e.cloneNode(true);preview.append(q)} items.forEach((p,i)=>{const c=document.createElement("article");c.className="editor-card";const h=document.createElement("h3");h.textContent="פסקה "+(i+1);c.append(h);field(c,"טקסט הפסקה","text",p,true);field(c,"טקסט הקישור","linkText",p,false);field(c,"כתובת הקישור","linkUrl",p,false);const actions=document.createElement("div");actions.className="actions";const d=document.createElement("button");d.className="danger";d.textContent="מחק פסקה";d.onclick=()=>{items=items.filter(x=>x.id!==p.id);save();status("הפסקה נמחקה")};const cp=document.createElement("button");cp.className="secondary";cp.textContent="שכפל";cp.onclick=()=>{items.splice(i+1,0,{...p,id:uid()});save();status("הפסקה שוכפלה")};actions.append(d,cp);c.append(actions);editors.append(c);const par=document.createElement("p");par.innerHTML=htmlContent(p);preview.append(par)})} function add(){items.push({id:uid(),text:"",linkText:"",linkUrl:""});save();status("נוספה פסקה")} async function copy(s,label){try{if(navigator.clipboard&&isSecureContext)await navigator.clipboard.writeText(s);else{const t=document.createElement("textarea");t.value=s;t.style.position="fixed";t.style.opacity="0";document.body.append(t);t.select();if(!document.execCommand("copy"))throw Error();t.remove()}status(label+" הועתק")}catch(e){status("ההעתקה נכשלה. ניתן להעתיק ידנית מהתיבה.")}} $("gAdd").onclick=add; $("gCopyHTML").onclick=()=>copy(siteHTML(),"HTML + CSS"); $("gCopyJS").onclick=()=>copy(siteJS(),"JavaScript"); render(); })();` } function buildHTML(data){ const body=generatedBody(); const css=generatedCSS(); const runtime=runtimeSource(data); return '\n\n\n\n\nאתר עצמאי\n\n\n\n'+body+'\n