EverBalm

Everlasting hydration 🌿🌿

Get your refillable lip balm today!

About EverBalm 🌿🌿 

EverBalm is a lip balm brand that aims to reduce unnecessary cosmetic packaging waste while providing a practical, stylish, and affordable beauty product. We believe sustainability should be simple and accessible in everyday routines, not complicated or expensive and are completely natural therefore so good for the environment. 


Our product is a refillable lip balm which the packaging is made from recycled-plastic and comes with a separate bag of lip balm containing enough for 2 refills. Including a recyclable funnel which helps for easy pour. Our lip balm formula will be liquid, similar to the consistency of other brands like PawPaw or Carmex. The size of these will be a 5ml lip balm tube with a 20ml bag of lip balm. It will be a cylindrical tube of lip balm that is smooth, so it feels elegant. The packaging will come in cardboard/paper boxes, so we are not adding plastic waste. 

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.

📧 everbalm2026@gmail.com 📸 @everbalm__
`; 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"; } }); }