בונה דף אוטומטי

מאת מחיר למשתתף: משתתפים: משך האירוע:

`; return; } const mediaListTargets = new Set(); let templateImageEntry = null; let templateStage = "options"; let instagramScriptLoaded = false; if (dom.mediaList) { mediaListTargets.add(dom.mediaList); } init(); async function init() { const heroImageSeed = state.layout?.hero?.image || state.pageData?.hero?.image || (state.pageData && !state.pageData.layout ? state.pageData.image : null); if (state.layout) { applyLayout(state.layout, heroImageSeed); } else if (state.pageId) { await loadLayoutFromApi(); } else { alert("Missing page data/layout. Cannot render page."); return; } if (!state.viewOnly) { bindCTA(); initSelection(); attachSectionControls(dom.heroBlock); renderMediaLists(); } else { stripViewUi(); } } function hydrateHero(heroSource) { const source = heroSource || state.layout?.hero || state.pageData?.hero || (state.pageData && !state.pageData.layout ? state.pageData : null) || {}; const hero = { ...HERO_DEFAULTS, ...source }; dom.heroTitle.textContent = hero.title || HERO_DEFAULTS.title; dom.heroSubtitle.textContent = hero.subtitle || HERO_DEFAULTS.subtitle; dom.heroDescription.textContent = hero.description || HERO_DEFAULTS.description; dom.heroHost.textContent = hero.host || HERO_DEFAULTS.host; dom.heroPrice.textContent = hero.price || HERO_DEFAULTS.price; dom.heroParticipants.textContent = hero.participants || HERO_DEFAULTS.participants; dom.heroDuration.textContent = hero.duration || HERO_DEFAULTS.duration; setHeroMedia(hero.image || HERO_DEFAULTS.image); } function setHeroImage(url) { if (!dom.heroImage) return; dom.heroImage.style.backgroundImage = `url("${url}")`; } function isVideoUrl(url = "") { return /\.(mp4|webm|ogg|mov|m4v)(\?|$)/i.test(url); } function setHeroMedia(url) { if (!dom.heroImage) return; const existingVideo = dom.heroImage.querySelector("video"); if (isVideoUrl(url)) { if (!existingVideo) { const vid = document.createElement("video"); vid.muted = true; vid.loop = true; vid.autoplay = true; vid.playsInline = true; dom.heroImage.appendChild(vid); } const videoEl = dom.heroImage.querySelector("video"); if (videoEl) { videoEl.src = url; videoEl.play().catch(() => {}); } dom.heroImage.style.backgroundImage = "none"; return; } if (existingVideo) { existingVideo.remove(); } dom.heroImage.style.backgroundImage = `url("${url}")`; } function bindCTA() { const openBtn = document.getElementById("open-options"); const closeBtn = document.getElementById("close-options"); const generateClean = document.getElementById("generate-clean"); const clearClean = document.getElementById("clear-clean"); const mediaUploadBtn = document.getElementById("media-upload-btn"); const mediaFileInput = document.getElementById("media-file-input"); const uploadSiteBtn = document.getElementById("upload-site"); const cleanChoiceBtn = document.getElementById("choose-clean"); const templateChoiceBtn = document.getElementById("choose-template"); const templateImageOption = document.getElementById("template-image-option"); const templateInstagramOption = document.getElementById("template-instagram-option"); openBtn?.addEventListener("click", () => { dom.ctaInitial?.classList.add("hidden"); dom.ctaOptions?.classList.add("hidden"); dom.ctaChoice?.classList.remove("hidden"); }); closeBtn?.addEventListener("click", () => { dom.ctaOptions?.classList.add("hidden"); dom.ctaChoice?.classList.add("hidden"); dom.ctaInitial?.classList.remove("hidden"); clearCleanForm(); resetTemplatePanel(); }); cleanChoiceBtn?.addEventListener("click", () => showOptionsPanel("clean")); templateChoiceBtn?.addEventListener("click", () => showOptionsPanel("template")); dom.backClean?.addEventListener("click", () => { dom.ctaOptions?.classList.add("hidden"); dom.ctaChoice?.classList.remove("hidden"); clearCleanForm(); }); dom.backTemplate?.addEventListener("click", () => { if (templateStage === "image" || templateStage === "instagram") { templateStage = "options"; dom.templateImageTool?.classList.add("hidden"); dom.templateInstagramTool?.classList.add("hidden"); dom.templateOptions?.classList.remove("hidden"); return; } dom.ctaOptions?.classList.add("hidden"); dom.ctaChoice?.classList.remove("hidden"); resetTemplatePanel(); }); templateImageOption?.addEventListener("click", () => { templateStage = "image"; dom.templateOptions?.classList.add("hidden"); dom.templateInstagramTool?.classList.add("hidden"); dom.templateImageTool?.classList.remove("hidden"); }); templateInstagramOption?.addEventListener("click", () => { templateStage = "instagram"; dom.templateOptions?.classList.add("hidden"); dom.templateImageTool?.classList.add("hidden"); dom.templateInstagramTool?.classList.remove("hidden"); dom.templateInstagramStatus.textContent = ""; }); generateClean?.addEventListener("click", async () => { const prompt = buildStructuredPrompt(); if (!prompt) return; const images = getImageUrls(); await requestAndInsert(prompt, images); clearCleanForm(); }); clearClean?.addEventListener("click", clearCleanForm); mediaUploadBtn?.addEventListener("click", () => mediaFileInput?.click()); mediaFileInput?.addEventListener("change", async (event) => { const file = event.target.files?.[0]; if (!file) return; try { await uploadMediaFile(file); event.target.value = ""; } catch (err) { console.error(err); dom.mediaUploadStatus.textContent = err.message || "העלאה נכשלה"; } }); uploadSiteBtn?.addEventListener("click", async () => { if (!state.pageId) { alert("לא ניתן לפרסם דף לפני שנוצר pageId על ידי השרת."); return; } try { await publishCurrentLayout(); } catch { /* errors handled in publishCurrentLayout */ } }); dom.templateImageUploadBtn?.addEventListener("click", () => dom.templateImageFile?.click()); dom.templateImageFile?.addEventListener("change", async (event) => { const file = event.target.files?.[0]; if (!file) return; try { if (dom.templateImageStatus) dom.templateImageStatus.textContent = "מעלה..."; templateImageEntry = await uploadMediaFile(file, dom.templateImageStatus); if (dom.templateImageStatus) dom.templateImageStatus.textContent = "✔ המדיה הועלתה"; updateTemplateImagePreview(templateImageEntry); } catch (err) { console.error(err); if (dom.templateImageStatus) { dom.templateImageStatus.textContent = err.message || "העלאה נכשלה"; } } finally { event.target.value = ""; } }); dom.templateImageCreate?.addEventListener("click", () => { if (!templateImageEntry) { alert("בחרו מדיה לפני יצירת האלמנט"); return; } const isVideo = (templateImageEntry.type || "").startsWith("video/"); if (isVideo) { insertVideoSection(templateImageEntry.url); } else { insertImageSection(templateImageEntry.url); } resetTemplatePanel(); dom.ctaOptions?.classList.add("hidden"); dom.ctaChoice?.classList.add("hidden"); dom.ctaInitial?.classList.remove("hidden"); }); dom.templateInstagramCreate?.addEventListener("click", () => { const rawUrl = dom.templateInstagramInput?.value.trim(); const embedUrl = buildInstagramEmbedUrl(rawUrl); if (!embedUrl) { if (dom.templateInstagramStatus) { dom.templateInstagramStatus.textContent = "קישור אינסטגרם לא תקין"; } else { alert("קישור אינסטגרם לא תקין"); } return; } insertInstagramSection(embedUrl); dom.templateInstagramInput.value = ""; if (dom.templateInstagramStatus) dom.templateInstagramStatus.textContent = ""; templateStage = "options"; dom.templateInstagramTool?.classList.add("hidden"); dom.templateOptions?.classList.remove("hidden"); }); function showOptionsPanel(type) { dom.ctaChoice?.classList.add("hidden"); dom.ctaOptions?.classList.remove("hidden"); if (dom.cleanPanel && dom.templatePanel) { dom.cleanPanel.classList.toggle("hidden", type !== "clean"); dom.templatePanel.classList.toggle("hidden", type !== "template"); } if (type === "clean") { resetTemplatePanel(); } if (type === "template") { showTemplateOptions(); } } function showTemplateOptions() { resetTemplatePanel(); dom.templateOptions?.classList.remove("hidden"); dom.templateImageTool?.classList.add("hidden"); } } function clearCleanForm() { if (dom.fieldTitle) dom.fieldTitle.value = ""; if (dom.fieldSubtitle) dom.fieldSubtitle.value = ""; if (dom.fieldParagraph) dom.fieldParagraph.value = ""; if (dom.fieldNotes) dom.fieldNotes.value = ""; if (dom.mediaUploadStatus) dom.mediaUploadStatus.textContent = ""; resetMediaLibrary(); } function resetTemplatePanel() { templateImageEntry = null; templateStage = "options"; dom.templateImageTool?.classList.add("hidden"); dom.templateOptions?.classList.remove("hidden"); if (dom.templateImageStatus) dom.templateImageStatus.textContent = ""; updateTemplateImagePreview(null); } function updateTemplateImagePreview(entry) { if (!dom.templateImagePreview) return; if (!entry) { dom.templateImagePreview.classList.add("hidden"); dom.templateImagePreview.innerHTML = ""; return; } dom.templateImagePreview.classList.remove("hidden"); dom.templateImagePreview.innerHTML = `

${entry.label || "מדיה"} `; } function insertImageSection(url) { if (!url) return; const html = `

`; const element = createGeneratedSection(html); dom.generated?.appendChild(element); attachSectionControls(element); selectSection(element); } function insertVideoSection(url) { if (!url) return; const html = `

`; const element = createGeneratedSection(html); dom.generated?.appendChild(element); attachSectionControls(element); selectSection(element); } function buildInstagramEmbedUrl(input) { if (!input) return ""; let url; try { url = new URL(input); } catch { return ""; } if (!url.hostname.includes("instagram.com")) return ""; const path = url.pathname.endsWith("/") ? url.pathname : `${url.pathname}/`; return `https://www.instagram.com${path}`; } function insertInstagramSection(permalink) { const html = `

`; const element = createGeneratedSection(html); dom.generated?.appendChild(element); attachSectionControls(element); selectSection(element); ensureInstagramScript(); } function ensureInstagramScript() { if (window.instgrm?.Embeds) { window.instgrm.Embeds.process(); return; } if (instagramScriptLoaded) return; instagramScriptLoaded = true; const script = document.createElement("script"); script.src = "https://www.instagram.com/embed.js"; script.async = true; script.onload = () => window.instgrm?.Embeds?.process(); document.body.appendChild(script); } function buildMediaGuidanceLines() { if (!state.mediaLibrary.length) return []; const lines = ["מדיה זמינה לשימוש (תמונה/וידאו):"]; state.mediaLibrary.forEach((item, index) => { const label = item.label || `מדיה ${index + 1}`; const type = (item.type || "").toLowerCase().startsWith("video/") ? "וידאו" : "תמונה"; lines.push(`- ${label} [${type}] ${item.url}`); }); lines.push( "אם יש וידאו השתמשו בו בדיוק כמו תמונה (לדוגמה כרקע/hero), אל תוסיפו בלוק נוסף רק בגלל שהוא וידאו. שמרו על יחס מקור וללא עיוות פיקסלים." ); lines.push("אם שם המדיה מכיל 'reference' או 'רפרנס' מדובר בהשראה בלבד."); return lines; } function buildStructuredPrompt() { const title = dom.fieldTitle?.value.trim() || ""; const subtitle = dom.fieldSubtitle?.value.trim() || ""; const paragraph = dom.fieldParagraph?.value.trim() || ""; const notes = dom.fieldNotes?.value.trim() || ""; if (!title && !subtitle && !paragraph && !notes) { alert("הכניסו לפחות פריט תוכן אחד"); return ""; } const lines = [ "שמור על RTL, על צבעי טסוף ועל מרווחי כרטיס אסתטיים.", "חזרי רק HTML תקין. אין להחזיר Markdown או טקסט חופשי.", "אסור להשתמש ב-