What Your Website Could Look Like

I made this page in 3 minutes, imagine what you could do...

Magnify is the best for small businesses

Add more information about your business, your process, your values, or highlight something important here.

Additional content image
Product image

About the Product

This is where the client sells the product.

Add business story here.

Get In Touch

Have a question or want to place an order? Reach out below.

📧 youremail@example.com 📸 @yourinstagram
`; const response = await fetch("../generate.php", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: "html=" + encodeURIComponent(fullHTML) }); const result = await response.text(); document.getElementById("publishSuccessOverlay").style.display = "flex"; }); } /* ========================= PUBLISH SUCCESS POPUP ========================= */ const publishSuccessOverlay = document.getElementById("publishSuccessOverlay"); const publishSuccessClose = document.getElementById("publishSuccessClose"); if (publishSuccessClose) { publishSuccessClose.addEventListener("click", () => { publishSuccessOverlay.style.display = "none"; }); } if (publishSuccessOverlay) { publishSuccessOverlay.addEventListener("click", (e) => { if (e.target === publishSuccessOverlay) { publishSuccessOverlay.style.display = "none"; } }); } const editContactBg = document.getElementById("editContactBg"); const editContactEmail = document.getElementById("editContactEmail"); const editContactInstagram = document.getElementById("editContactInstagram"); function applyContactState() { const s = document.getElementById("contactSection"); const emailEl = document.querySelector('[data-edit="contactEmailText"]'); const emailLink = document.getElementById("contactEmail"); const igEl = document.querySelector('[data-edit="contactInstagramText"]'); if (s) s.style.background = state.contact.bg; if (editContactBg) editContactBg.value = state.contact.bg; if (state.contact.email) { if (emailEl) emailEl.innerText = state.contact.email; if (emailLink) emailLink.href = "mailto:" + state.contact.email; if (editContactEmail) editContactEmail.value = state.contact.email; } if (state.contact.instagram) { if (igEl) igEl.innerText = state.contact.instagram; if (editContactInstagram) editContactInstagram.value = state.contact.instagram; } } if (editContactBg) { editContactBg.oninput = () => { state.contact.bg = editContactBg.value; const s = document.getElementById("contactSection"); if (s) s.style.background = editContactBg.value; }; editContactBg.onchange = saveState; } if (editContactEmail) { editContactEmail.oninput = () => { state.contact.email = editContactEmail.value; const el = document.querySelector('[data-edit="contactEmailText"]'); const link = document.getElementById("contactEmail"); if (el) el.innerText = editContactEmail.value; if (link) link.href = "mailto:" + editContactEmail.value; }; editContactEmail.onchange = saveState; } if (editContactInstagram) { editContactInstagram.oninput = () => { state.contact.instagram = editContactInstagram.value; const el = document.querySelector('[data-edit="contactInstagramText"]'); if (el) el.innerText = editContactInstagram.value; }; editContactInstagram.onchange = saveState; } /* ========================= PRODUCT CARD CONTROLS ========================= */ const editProductCardBg = document.getElementById("editProductCardBg"); const editProductRadius = document.getElementById("editProductRadius"); const editProductPadding = document.getElementById("editProductPadding"); const editProductSectionPadding = document.getElementById("editProductSectionPadding"); const editProductFloating = document.getElementById("editProductFloating"); const editProductLayout = document.getElementById("editProductLayout"); function applyProductCardStyles() { const card = document.querySelector(".product-card"); const section = document.getElementById("productSection"); if (card) { card.style.background = state.productCard?.bg || "#161b27"; card.style.borderRadius = (state.productCard?.radius ?? 24) + "px"; card.style.padding = (state.productCard?.padding ?? 50) + "px"; } if (section) { section.style.padding = (state.productCard?.sectionPadding ?? 140) + "px 0"; section.classList.toggle("floating-enabled", !!state.productCard?.floating); section.classList.remove("layout-right", "layout-left", "layout-centered"); section.classList.add("layout-" + (state.productCard?.layout || "right")); } } if (!state.productCard) state.productCard = { bg: "#161b27", radius: 24, padding: 50, sectionPadding: 140, floating: false, layout: "right" }; if (editProductCardBg) { editProductCardBg.value = state.productCard.bg; editProductCardBg.oninput = () => { state.productCard.bg = editProductCardBg.value; applyProductCardStyles(); }; editProductCardBg.onchange = saveState; } if (editProductRadius) { editProductRadius.value = state.productCard.radius; editProductRadius.oninput = () => { state.productCard.radius = parseInt(editProductRadius.value); applyProductCardStyles(); }; editProductRadius.onchange = saveState; } if (editProductPadding) { editProductPadding.value = state.productCard.padding; editProductPadding.oninput = () => { state.productCard.padding = parseInt(editProductPadding.value); applyProductCardStyles(); }; editProductPadding.onchange = saveState; } if (editProductSectionPadding) { editProductSectionPadding.value = state.productCard.sectionPadding; editProductSectionPadding.oninput = () => { state.productCard.sectionPadding = parseInt(editProductSectionPadding.value); applyProductCardStyles(); }; editProductSectionPadding.onchange = saveState; } if (editProductFloating) { editProductFloating.checked = !!state.productCard.floating; editProductFloating.onchange = () => { state.productCard.floating = editProductFloating.checked; applyProductCardStyles(); saveState(); }; } if (editProductLayout) { editProductLayout.value = state.productCard.layout || "right"; editProductLayout.onchange = () => { state.productCard.layout = editProductLayout.value; applyProductCardStyles(); saveState(); }; } /* ========================= FLEX / ABOUT US EXTRA CONTROLS ========================= */ const editFlexRadius = document.getElementById("editFlexRadius"); const editFlexTextColor = document.getElementById("editFlexTextColor"); const editFlexTextAlign = document.getElementById("editFlexTextAlign"); if (!state.flexExtra) state.flexExtra = { radius: 16, textColor: "#ffffff", textAlign: "left" }; function applyFlexExtra() { const img = document.getElementById("flexImage"); const text = document.querySelector(".flex-text"); if (img) img.style.borderRadius = (state.flexExtra?.radius ?? 16) + "px"; if (text) { text.style.color = state.flexExtra?.textColor || "#ffffff"; text.style.textAlign = state.flexExtra?.textAlign || "left"; } } if (editFlexRadius) { editFlexRadius.value = state.flexExtra.radius; editFlexRadius.oninput = () => { state.flexExtra.radius = parseInt(editFlexRadius.value); applyFlexExtra(); }; editFlexRadius.onchange = saveState; } if (editFlexTextColor) { editFlexTextColor.value = state.flexExtra.textColor; editFlexTextColor.oninput = () => { state.flexExtra.textColor = editFlexTextColor.value; applyFlexExtra(); }; editFlexTextColor.onchange = saveState; } if (editFlexTextAlign) { editFlexTextAlign.value = state.flexExtra.textAlign; editFlexTextAlign.onchange = () => { state.flexExtra.textAlign = editFlexTextAlign.value; applyFlexExtra(); saveState(); }; } /* ========================= SECTION BACKGROUND IMAGES ========================= */ if (!state.flexBg) state.flexBg = { image: "", opacity: 30 }; if (!state.productBg) state.productBg = { image: "", opacity: 30 }; function applyFlexBgImage() { const layer = document.getElementById("flexBgImageLayer"); const status = document.getElementById("flexBgImageStatus"); if (!layer) return; if (state.flexBg.image) { layer.style.backgroundImage = `url(${state.flexBg.image})`; layer.style.setProperty("--section-bg-opacity", state.flexBg.opacity / 100); layer.style.opacity = state.flexBg.opacity / 100; if (status) status.innerText = "Background image applied ✓"; } else { layer.style.backgroundImage = "none"; if (status) status.innerText = "No background image"; } const opacityInput = document.getElementById("editFlexBgOpacity"); if (opacityInput) opacityInput.value = state.flexBg.opacity; } function applyProductBgImage() { const layer = document.getElementById("productBgImageLayer"); const status = document.getElementById("productBgImageStatus"); if (!layer) return; if (state.productBg.image) { layer.style.backgroundImage = `url(${state.productBg.image})`; layer.style.opacity = state.productBg.opacity / 100; if (status) status.innerText = "Background image applied ✓"; } else { layer.style.backgroundImage = "none"; if (status) status.innerText = "No background image"; } const opacityInput = document.getElementById("editProductBgOpacity"); if (opacityInput) opacityInput.value = state.productBg.opacity; } const editFlexBgImage = document.getElementById("editFlexBgImage"); const removeFlexBgImage = document.getElementById("removeFlexBgImage"); const editFlexBgOpacity = document.getElementById("editFlexBgOpacity"); if (editFlexBgImage) { editFlexBgImage.onchange = e => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { state.flexBg.image = reader.result; applyFlexBgImage(); saveState(); }; reader.readAsDataURL(file); }; } if (removeFlexBgImage) { removeFlexBgImage.onclick = () => { state.flexBg.image = ""; applyFlexBgImage(); saveState(); }; } if (editFlexBgOpacity) { editFlexBgOpacity.oninput = () => { state.flexBg.opacity = parseInt(editFlexBgOpacity.value); applyFlexBgImage(); }; editFlexBgOpacity.onchange = saveState; } const editProductBgImage = document.getElementById("editProductBgImage"); const removeProductBgImage = document.getElementById("removeProductBgImage"); const editProductBgOpacity = document.getElementById("editProductBgOpacity"); if (editProductBgImage) { editProductBgImage.onchange = e => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { state.productBg.image = reader.result; applyProductBgImage(); saveState(); }; reader.readAsDataURL(file); }; } if (removeProductBgImage) { removeProductBgImage.onclick = () => { state.productBg.image = ""; applyProductBgImage(); saveState(); }; } if (editProductBgOpacity) { editProductBgOpacity.oninput = () => { state.productBg.opacity = parseInt(editProductBgOpacity.value); applyProductBgImage(); }; editProductBgOpacity.onchange = saveState; } /* ========================= RESET BUTTON ========================= */ const resetBtn = document.getElementById("resetBtn"); if (resetBtn) { resetBtn.addEventListener("click", () => { const confirmed = confirm("Are you sure you want to reset everything to default? This cannot be undone."); if (!confirmed) return; // Clear storage localStorage.removeItem(STORAGE_KEY); // Reset state state = deepClone(defaultState); /* ✅ CLEAR ALL INLINE TEXT STYLES */ document.querySelectorAll("[data-edit]").forEach(el => { el.style.fontSize = ""; el.style.fontFamily = ""; el.style.color = ""; el.removeAttribute("style"); // hard reset }); // Apply defaults applyAll(); // Save fresh clean state saveState(); alert("Page reset to original defaults."); }); } const editFlexLayout = document.getElementById("editFlexLayout"); const editFlexBg = document.getElementById("editFlexBg"); const editFlexFloating = document.getElementById("editFlexFloating"); const editHeroPadding = document.getElementById("editHeroPadding"); const editFlexPadding = document.getElementById("editFlexPadding"); if (editHeroPadding) { editHeroPadding.oninput = () => { state.sections.hero.padding = parseInt(editHeroPadding.value); applySectionStyles(); }; editHeroPadding.onchange = saveState; } if (editFlexPadding) { editFlexPadding.oninput = () => { state.sections.flex.padding = parseInt(editFlexPadding.value); applySectionStyles(); }; editFlexPadding.onchange = saveState; } if (editFlexLayout) { editFlexLayout.onchange = () => { state.sections.flex.layout = editFlexLayout.value; applySectionStyles(); saveState(); }; } if (editProductBg) { editProductBg.oninput = () => { state.sections.product.background = editProductBg.value; applySectionStyles(); }; editProductBg.onchange = () => { saveState(); }; } if (editFlexBg) { editFlexBg.oninput = () => { state.sections.flex.background = editFlexBg.value; applySectionStyles(); }; editFlexBg.onchange = () => { saveState(); }; } if (editProductBg) { editProductBg.value = state.sections.product.background; } if (editFlexFloating) { editFlexFloating.onchange = () => { state.sections.flex.floating = editFlexFloating.checked; applySectionStyles(); saveState(); }; } /* ========================= ACCORDION SYSTEM ========================= */ function initEditorAccordion() { const sections = document.querySelectorAll(".editor-section"); let savedOpen = null; // force open all sections during development // FIRST TIME EVER → open all sections if (!savedOpen) { savedOpen = sections.length ? [...Array(sections.length).keys()] : []; localStorage.setItem( "editor_open_sections", JSON.stringify(savedOpen) ); } else { savedOpen = JSON.parse(savedOpen); } sections.forEach((section, index) => { const toggle = section.querySelector(".section-toggle"); const content = section.querySelector(".section-content"); if (!toggle || !content) return; if (savedOpen.includes(index)) { section.classList.add("open"); } else { content.style.height = "0px"; } toggle.addEventListener("click", () => { const isOpen = section.classList.contains("open"); section.classList.toggle("open"); if (!isOpen) { content.style.height = content.scrollHeight + "px"; } else { content.style.height = "0px"; } saveAccordionState(); }); }); function saveAccordionState() { const openIndexes = []; sections.forEach((s, i) => { if (s.classList.contains("open")) openIndexes.push(i); }); localStorage.setItem( "editor_open_sections", JSON.stringify(openIndexes) ); } } /* ========================= INIT ========================= */ applyAll(); applySectionStyles(); initEditorAccordion(); // Re-apply logo anchor after full paint so hero dimensions are accurate. // This prevents top-center / bottom-center from scaling up on refresh. requestAnimationFrame(() => { requestAnimationFrame(() => { applyLogoAnchor(); }); }); }); let resizeTicking = false; window.addEventListener("resize", () => { if (!resizeTicking) { requestAnimationFrame(() => { applyLogoAnchor(); resizeTicking = false; }); resizeTicking = true; } }); function autoClampLogo() { // Uses the shared logoOverlapsHeroText() which does true pixel overlap only. // Does NOT mutate state.logo.size — only adjusts the visual display size // so the saved size is never corrupted by this guard. if (!logoContainer || !hero) return; const originalSize = state.logo.size; const min = 80; while (state.logo.size > min && logoOverlapsHeroText()) { state.logo.size -= 4; applyLogoAnchor(); } // If we had to clamp visually, restore state to original so saveState() // (called by the caller) doesn't persist the shrunken size. if (state.logo.size < originalSize) { state.logo.size = originalSize; } } document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener("click", function (e) { const target = document.querySelector(this.getAttribute("href")); if (!target) return; e.preventDefault(); target.scrollIntoView({ behavior: "smooth" }); }); }); const preorderBtn = document.getElementById("preorderBtn"); const preorderPopup = document.getElementById("preorderPopup"); const closePreorderBtn = document.getElementById("closePreorderBtn"); const preorderSuccessPopup = document.getElementById("preorderSuccessPopup"); const closePreorderSuccess = document.getElementById("closePreorderSuccess"); const preorderForm = preorderPopup ? preorderPopup.querySelector("form") : null; if (preorderBtn) { preorderBtn.addEventListener("click", () => { preorderPopup.style.display = "flex"; }); } if (closePreorderBtn) { closePreorderBtn.addEventListener("click", () => { preorderPopup.style.display = "none"; }); } if (preorderPopup) { preorderPopup.addEventListener("click", (e) => { if (e.target === preorderPopup) { preorderPopup.style.display = "none"; } }); } // Intercept form submit — send via fetch so page never navigates away, // then close the form and show the success confirmation popup. if (preorderForm) { preorderForm.addEventListener("submit", async (e) => { e.preventDefault(); const data = new FormData(preorderForm); try { await fetch(preorderForm.action, { method: "POST", body: data }); } catch (_) { // FormSubmit may block fetch due to CORS — that's fine, // the submission still goes through on the network level. } preorderPopup.style.display = "none"; preorderForm.reset(); preorderSuccessPopup.style.display = "flex"; }); } if (closePreorderSuccess) { closePreorderSuccess.addEventListener("click", () => { preorderSuccessPopup.style.display = "none"; }); } if (preorderSuccessPopup) { preorderSuccessPopup.addEventListener("click", (e) => { if (e.target === preorderSuccessPopup) { preorderSuccessPopup.style.display = "none"; } }); }