File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090006/shop/ui-utils.js

Back
function formatFullAddress(addrObj) { if (!addrObj) return ""; if (typeof addrObj === "string") return addrObj; const parts = []; if (addrObj.detail \|\| addrObj.address) { parts.push(addrObj.detail \|\| addrObj.address); } if (addrObj.subdistrict) { const sub = addrObj.subdistrict.startsWith("ต.") \|\| addrObj.subdistrict.startsWith("แขวง") ? addrObj.subdistrict : `ต.${addrObj.subdistrict}`; parts.push(sub); } if (addrObj.district) { const dist = addrObj.district.startsWith("อ.") \|\| addrObj.district.startsWith("เขต") ? addrObj.district : `อ.${addrObj.district}`; parts.push(dist); } if (addrObj.province) { const prov = addrObj.province.startsWith("จ.") ? addrObj.province : `จ.${addrObj.province}`; parts.push(prov); } if (addrObj.zipcode) { parts.push(addrObj.zipcode); } let result = parts.join(" "); if (addrObj.gpsLocation \|\| addrObj.mapUrl) { const gps = addrObj.gpsLocation \|\| addrObj.mapUrl; result += ` (พิกัด: ${gps})`; } return result \|\| addrObj.address \|\| ""; } window.formatFullAddress = formatFullAddress; function showToast(message, type = 'success') { let container = document.getElementById("toastContainer"); if (!container) { container = document.createElement("div"); container.id = "toastContainer"; container.className = "toast-container"; document.body.appendChild(container); } const toast = document.createElement("div"); toast.className = `toast-notification ${type}`; const icon = type === 'success' ? 'fa-circle-check' : 'fa-circle-exclamation'; const iconColor = type === 'success' ? '#22c55e' : '#ef4444'; toast.innerHTML = ` <i class="fa-solid ${icon}" style="color: ${iconColor}; font-size: 16px;"></i> <div class="toast-content">${message}</div> <button class="toast-close-btn">×</button> `; container.appendChild(toast); const closeBtn = toast.querySelector(".toast-close-btn"); const dismissToast = () => { toast.style.opacity = '0'; toast.style.transform = 'translateY(-10px)'; setTimeout(() => { toast.remove(); }, 300); }; if (closeBtn) { closeBtn.addEventListener("click", dismissToast); } setTimeout(dismissToast, 3000); } // Global alert override window.alert = function (msg) { showToast(msg, 'success'); }; // Followers Helper function getOfficialBadgeHtml(sellerUsernameOrId) { if (!sellerUsernameOrId) return ''; try { const users = db.getUsers(); const seller = users.find(u => u.username === sellerUsernameOrId \|\| u.name === sellerUsernameOrId); if (seller && seller.sellerType === 'corporate') { return ` <span class="official-seller-badge" title="Official Corporate Seller"><i class="fa-solid fa-circle-check"></i> Official</span>`; } } catch (e) { console.error("Error generating official badge:", e); } return ''; } function initFooterModals() { const termsBtn = document.getElementById("termsLinkBtn"); const privacyBtn = document.getElementById("privacyLinkBtn"); const pdpaPrivacyBtn = document.getElementById("pdpaPrivacyLink"); const termsModal = document.getElementById("termsModal"); const privacyModal = document.getElementById("privacyModal"); const closeTermsBtn = document.getElementById("closeTermsModalBtn"); const acceptTermsBtn = document.getElementById("acceptTermsBtn"); const closePrivacyBtn = document.getElementById("closePrivacyModalBtn"); const acceptPrivacyBtn = document.getElementById("acceptPrivacyBtn"); if (termsBtn && termsModal) { termsBtn.addEventListener("click", (e) => { e.preventDefault(); termsModal.style.display = "flex"; }); } if (closeTermsBtn && termsModal) { closeTermsBtn.addEventListener("click", () => termsModal.style.display = "none"); } if (acceptTermsBtn && termsModal) { acceptTermsBtn.addEventListener("click", () => { termsModal.style.display = "none"; showToast("รับทราบข้อตกลงและเงื่อนไขการใช้งานเรียบร้อยแล้ว", "success"); }); } if (termsModal) { termsModal.addEventListener("click", (e) => { if (e.target === termsModal) termsModal.style.display = "none"; }); } if (privacyBtn && privacyModal) { privacyBtn.addEventListener("click", (e) => { e.preventDefault(); privacyModal.style.display = "flex"; }); } if (pdpaPrivacyBtn && privacyModal) { pdpaPrivacyBtn.addEventListener("click", (e) => { e.preventDefault(); privacyModal.style.display = "flex"; }); } if (closePrivacyBtn && privacyModal) { closePrivacyBtn.addEventListener("click", () => privacyModal.style.display = "none"); } if (acceptPrivacyBtn && privacyModal) { acceptPrivacyBtn.addEventListener("click", () => { privacyModal.style.display = "none"; showToast("ยอมรับนโยบายความเป็นส่วนตัวเรียบร้อยแล้ว", "success"); }); } if (privacyModal) { privacyModal.addEventListener("click", (e) => { if (e.target === privacyModal) privacyModal.style.display = "none"; }); } } function createFlyingCartAnimation(startX, startY, imageSource) { const cartTrigger = document.getElementById("cartTrigger"); if (!cartTrigger) return; const targetRect = cartTrigger.getBoundingClientRect(); const targetX = targetRect.left + targetRect.width / 2; const targetY = targetRect.top + targetRect.height / 2; const img = document.createElement("img"); img.src = imageSource; img.className = "flying-cart-item"; img.style.left = `${startX}px`; img.style.top = `${startY}px`; img.style.width = "50px"; img.style.height = "50px"; img.style.objectFit = "cover"; document.body.appendChild(img); requestAnimationFrame(() => { img.style.left = `${targetX}px`; img.style.top = `${targetY}px`; img.style.width = "20px"; img.style.height = "20px"; img.style.opacity = "0.5"; img.style.transform = "scale(0.3)"; }); setTimeout(() => { if (img.parentNode) { img.parentNode.removeChild(img); } const cartIcon = cartTrigger.querySelector("i") \|\| cartTrigger; cartIcon.classList.add("cart-bump"); setTimeout(() => { cartIcon.classList.remove("cart-bump"); }, 400); }, 1500); } function openSlipOverlay(src) { const modal = document.getElementById("slipOverlayModal"); const img = document.getElementById("expandedSlipImg"); const newTabBtn = document.getElementById("btnOpenSlipNewTab"); if (modal && img) { img.src = src; if (newTabBtn) { newTabBtn.href = src; } modal.style.display = "flex"; } } const closeSlipBtn = document.getElementById("closeSlipOverlayBtn"); if (closeSlipBtn) { closeSlipBtn.addEventListener("click", () => { const modal = document.getElementById("slipOverlayModal"); if (modal) modal.style.display = "none"; }); } // PRINT PREVIEW PACKING SLIP // ========================================================================== function initTheme() { const themeToggleBtn = document.getElementById("themeToggleBtn"); if (!themeToggleBtn) return; // Check localStorage const savedTheme = localStorage.getItem("sk_theme"); // Apply initial theme if (savedTheme === "dark") { document.body.classList.add("dark-theme"); updateThemeIcon(themeToggleBtn, "dark"); } else { document.body.classList.remove("dark-theme"); updateThemeIcon(themeToggleBtn, "light"); } // Toggle theme on click themeToggleBtn.addEventListener("click", () => { const isDark = document.body.classList.toggle("dark-theme"); const newTheme = isDark ? "dark" : "light"; localStorage.setItem("sk_theme", newTheme); updateThemeIcon(themeToggleBtn, newTheme); // Update Chart if currently in admin mode and showing the dashboard if (state.currentRole === "admin") { const adminDashboardSec = document.getElementById("admin-page-dashboard"); if (adminDashboardSec && adminDashboardSec.style.display !== "none") { renderAdminDashboard(); } } }); } function updateThemeIcon(btn, theme) { const icon = btn.querySelector("i"); if (!icon) return; if (theme === "dark") { icon.className = "fa-solid fa-moon"; } else { icon.className = "fa-solid fa-sun"; } } // ========================================================================== // HERO SLIDER AND INTERACTIVE MEMBER WIDGET LOGIC // ========================================================================== let currentHeroSlide = 0; let heroSliderInterval = null; function claimDailyPoints() { if (state.dailyPointsClaimed) { showToast("คุณได้รับพอยต์รายวันสำหรับรอบนี้ไปแล้วค่ะ", "warning"); return; } state.dailyPointsClaimed = true; if (state.currentUser) { state.currentUser.points = (state.currentUser.points \|\| 1450) + 50; if (typeof db !== 'undefined') { const users = db.getUsers(); const userObj = users.find(u => u.username === state.currentUser.username); if (userObj) { userObj.points = state.currentUser.points; db.saveUsers(users); } } } showToast("เก็บคะแนนพิเศษรายวันสำเร็จ! (+50 แต้ม)", "success"); updateHeroWidgets(); } window.claimDailyPoints = claimDailyPoints; function claimSlideCoupon(code) { const user = (typeof db !== "undefined" && db.getCurrentUser) ? db.getCurrentUser() : (state ? state.currentUser : null); if (!user) { showToast("กรุณาเข้าสู่ระบบก่อนดำเนินการค่ะ", "danger"); document.querySelectorAll(".modal-overlay").forEach(m => m.style.display = "none"); if (state) state.postLoginRedirect = "home"; if (typeof navigateTo === "function") navigateTo("auth"); return; } const collected = typeof getCollectedCoupons === "function" ? getCollectedCoupons() : []; if (collected.includes(code)) { showToast(`คุณได้ทำการเก็บโค้ด ${code} ไปแล้วค่ะ`, "info"); return; } if (typeof saveCollectedCoupon === "function") { saveCollectedCoupon(code); } showToast(`เก็บโค้ดส่วนลดพิเศษ ${code} สำเร็จ!`, "success"); updateHeroWidgets(); if (typeof renderCouponShowcase === "function") { renderCouponShowcase(); } } window.claimSlideCoupon = claimSlideCoupon; function updateHeroWidgets() { let banners = typeof getHeroBanners === "function" ? getHeroBanners() : []; if (!banners \|\| banners.length === 0) { const saved = localStorage.getItem("sk_hero_banners"); if (saved) { try { banners = JSON.parse(saved); } catch (e) {} } } if (banners && banners.length > 0) { const activeBanners = banners.filter(b => b.active !== false); const displayBanners = activeBanners.length > 0 ? activeBanners : banners; updateHeroWidgetsDynamic(displayBanners); return; } const slideWidgets = [ document.getElementById("heroWidgetSlide0"), document.getElementById("heroWidgetSlide1"), document.getElementById("heroWidgetSlide2"), document.getElementById("heroWidgetSlide3"), document.getElementById("heroWidgetSlide4") ]; const user = (typeof db !== "undefined" && db.getCurrentUser) ? db.getCurrentUser() : (state ? state.currentUser : null); const collected = typeof getCollectedCoupons === "function" ? getCollectedCoupons() : []; // กำหนดโค้ดโปรโมชั่นประจำสไลด์ const slideCoupons = [ { code: "TECH100", label: "โค้ดลดไอที ฿100", title: "Tech Deals 2026", color: "#0ea5e9" }, { code: "FASHION50", label: "โค้ดลดแฟชั่น ฿50", title: "Fashion Minimal", color: "#e11d48" }, { code: "PETS20", label: "โค้ดลดสัตว์เลี้ยง 20%", title: "Aqua & Pets", color: "#00bfa5" }, { code: "VINTAGE15", label: "โค้ดลดของสะสม 15%", title: "Pre-Loved Deals", color: "#ea580c" }, { code: "FLASH15", label: "โค้ดลด Flash Sale 15%", title: "Flash Coupon", color: "#9333ea" } ]; slideWidgets.forEach((widget, index) => { if (!widget) return; const coupon = slideCoupons[index]; if (!coupon) return; const isCollected = collected.includes(coupon.code); // สไตล์และข้อความปุ่มตามสถานะการเก็บโค้ดของสไลด์นั้นๆ const btnText = isCollected ? `<i class="fa-solid fa-check"></i> เก็บโค้ดแล้ว` : `<i class="fa-solid fa-ticket"></i> รับโค้ด ${coupon.code}`; const btnClass = isCollected ? "btn btn-secondary w-100 btn-sm" : "btn w-100 btn-sm"; const btnStyle = isCollected ? "style='font-size:11px; padding: 6px 12px; opacity:0.75; cursor:not-allowed;'" : `style='font-size:11px; padding: 6px 12px; background:${coupon.color}; color:#fff; border:none;'`; const btnAction = isCollected ? "disabled" : `onclick="claimSlideCoupon('${coupon.code}')"`; if (!user) { // กรณี Guest ยังไม่ได้ล็อกอิน widget.innerHTML = ` <div class="widget-guest-card"> <div class="widget-header" style="display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--color-sky-dark); margin-bottom: 6px;"> <i class="fa-solid fa-ticket widget-user-icon" style="color: ${coupon.color}; font-size: 18px;"></i> <span>${coupon.title}</span> </div> <p style="font-size: 12px; line-height: 1.4; color: var(--color-sky-slate); margin-bottom: 8px;">รับคูปองส่วนลดพิเศษ <strong>${coupon.code}</strong> สำหรับสั่งซื้อสินค้าหมวดนี้</p> <div style="background: rgba(0,0,0,0.04); padding: 6px 10px; border-radius: 6px; font-family: monospace; font-weight: 700; color: ${coupon.color}; font-size: 13px; text-align: center; margin-bottom: 10px; border: 1px dashed ${coupon.color};"> ${coupon.code} (${coupon.label}) </div> <div class="widget-actions"> <button class="btn btn-sky w-100 btn-sm" onclick="navigateTo('auth')" style="font-size:11px; padding: 6px 12px;"><i class="fa-solid fa-right-to-bracket"></i> เข้าสู่ระบบเพื่อรับโค้ด</button> </div> </div> `; } else { // กรณีสมาชิกล็อกอินแล้ว widget.innerHTML = ` <div class="widget-member-card"> <div class="widget-header" style="display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--color-sky-dark); margin-bottom: 4px;"> <i class="fa-solid fa-ticket widget-member-icon" style="color: ${coupon.color}; font-size: 18px;"></i> <span>โค้ดส่วนลดเอ็กซ์คลูซีฟ</span> </div> <div style="font-size:11px; color:var(--color-sky-slate); margin-top:2px;">สำหรับคุณ: <strong>${user.name \|\| user.username}</strong></div> <div class="widget-points-box mt-2" style="background: rgba(255,255,255,0.08); padding: 8px 12px; border-radius: 8px; border: 1px dashed ${coupon.color}; margin: 10px 0; text-align: center;"> <div class="points-label" style="font-size: 10px; color: var(--color-sky-slate); text-transform: uppercase;">ส่วนลดพิเศษเฉพาะสไลด์นี้</div> <div class="points-val" style="font-size: 15px; font-weight: 800; color: ${coupon.color}; margin-top: 2px; font-family: monospace;"> ${coupon.code} </div> <div style="font-size: 11px; color: var(--color-sky-slate); font-weight: 600;">${coupon.label}</div> </div> <div class="widget-actions mt-2"> <button class="${btnClass}" ${btnStyle} ${btnAction}>${btnText}</button> </div> </div> `; } }); } function showHeroSlide(index) { const slides = document.querySelectorAll(".hero-slide"); const dots = document.querySelectorAll("#heroSliderDots .dot"); if (slides.length === 0) return; if (index >= slides.length) index = 0; if (index < 0) index = slides.length - 1; currentHeroSlide = index; slides.forEach((slide, idx) => { if (idx === currentHeroSlide) { slide.classList.add("active"); } else { slide.classList.remove("active"); } }); dots.forEach((dot, idx) => { if (idx === currentHeroSlide) { dot.classList.add("active"); } else { dot.classList.remove("active"); } }); } function renderHeroSlider() { const track = document.getElementById("heroBannerSlider") \|\| document.getElementById("heroSliderTrack"); const dotsContainer = document.getElementById("heroSliderDots"); if (!track \|\| !dotsContainer) return; let banners = typeof getHeroBanners === "function" ? getHeroBanners() : []; if (!banners \|\| banners.length === 0) { const saved = localStorage.getItem("sk_hero_banners"); if (saved) { try { banners = JSON.parse(saved); } catch (e) {} } } if (!banners \|\| banners.length === 0) { banners = [ { title: "ก้าวสู่อนาคตกับ SkyTech Gadgets", subtitle: "สัมผัสเทคโนโลยีอัจฉริยะ โทรศัพท์ สมาร์ตโฟน และอุปกรณ์ไอทีลดสูงสุด 50%", badge: "Tech Deals 2026", couponCode: "TECH100", bgStyle: "linear-gradient(135deg, #e0f2fe, #bae6fd, #e0f2fe)", sellerTarget: "seller1", active: true }, { title: "แต่งตัวอย่างมีสไตล์กับ SkyThreads", subtitle: "เสื้อผ้าแฟชั่นมินิมอล เนื้อผ้าเกรดพรีเมียม สวมใส่สบาย โปรแรงต้อนรับซีซันใหม่", badge: "Minimal Chic", couponCode: "FASHION20", bgStyle: "linear-gradient(135deg, #fef2f2, #fecdd3, #fef2f2)", sellerTarget: "seller2", active: true }, { title: "ส่งมอบความสุขให้สัตว์เลี้ยงตัวโปรด", subtitle: "อาหารและอุปกรณ์สำหรับน้องหมาน้องแมว เกรดโภชนาการสูง ลดพิเศษ 30%", badge: "Aqua & Pets", couponCode: "PETLOVE", bgStyle: "linear-gradient(135deg, #f0fdf4, #bbf7d0, #f0fdf4)", sellerTarget: "all", active: true } ]; } const activeBanners = banners.filter(b => b.active !== false); const displayBanners = activeBanners.length > 0 ? activeBanners : banners; track.innerHTML = ""; dotsContainer.innerHTML = ""; displayBanners.forEach((b, idx) => { const slide = document.createElement("div"); slide.className = `hero-slide ${idx === 0 ? 'active' : ''}`; slide.setAttribute("data-slide-index", idx); if (b.bgStyle) slide.style.background = b.bgStyle; const badgeHtml = b.badge ? `<span class="badge badge-sky mb-2" style="background:var(--color-sky-lightest); color:var(--color-sky-brand); font-weight:700;"><i class="fa-solid fa-tag"></i> ${b.badge}</span>` : ""; const titleHtml = b.title ? `<h1 style="margin-top:8px;">${b.title}</h1>` : ""; const subHtml = b.subtitle ? `<p>${b.subtitle}</p>` : ""; let buttonAction = `onclick="navigateTo('home');"`; if (b.sellerTarget && b.sellerTarget !== "all") { buttonAction = `onclick="navigateTo('home'); document.getElementById('filterSeller').value='${b.sellerTarget}'; if(state.activeFilters) state.activeFilters.sellerId='${b.sellerTarget}'; renderCatalog();"`; } slide.innerHTML = ` <div class="hero-slide-content"> <div class="hero-slide-left"> ${badgeHtml} ${titleHtml} ${subHtml} <button ${buttonAction} class="btn btn-sky mt-2"><i class="fa-solid fa-bag-shopping"></i> ช้อปเลยตอนนี้</button> </div> <div class="hero-slide-right"> <div class="hero-interactive-widget" id="heroWidgetSlide${idx}"> <!-- Loaded dynamically --> </div> </div> </div> `; track.appendChild(slide); const dot = document.createElement("span"); dot.className = `dot ${idx === 0 ? 'active' : ''}`; dot.setAttribute("data-slide-to", idx); dotsContainer.appendChild(dot); }); updateHeroWidgetsDynamic(displayBanners); showHeroSlide(0); initHeroSlider(); } window.renderHeroSlider = renderHeroSlider; function updateHeroWidgetsDynamic(displayBanners) { const user = state.currentUser; const collected = typeof getCollectedCoupons === "function" ? getCollectedCoupons() : []; displayBanners.forEach((b, index) => { const widget = document.getElementById(`heroWidgetSlide${index}`); if (!widget) return; const couponCode = b.couponCode \|\| "SKY100"; const isCollected = collected.includes(couponCode); const btnText = isCollected ? `<i class="fa-solid fa-check"></i> เก็บโค้ดแล้ว` : `<i class="fa-solid fa-ticket"></i> รับโค้ด ${couponCode}`; const btnClass = isCollected ? "btn btn-secondary w-100 btn-sm" : "btn btn-sky w-100 btn-sm"; const btnStyle = isCollected ? "style='font-size:11px; padding: 6px 12px; opacity:0.75; cursor:not-allowed;'" : `style='font-size:11px; padding: 6px 12px; font-weight: 600;'`; const btnAction = isCollected ? "disabled" : `onclick="claimSlideCoupon('${couponCode}')"`; if (!user) { widget.innerHTML = ` <div class="widget-guest-card"> <div class="widget-header" style="display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--color-sky-dark); margin-bottom: 6px;"> <i class="fa-solid fa-ticket widget-user-icon" style="color: var(--color-sky-brand); font-size: 18px;"></i> <span>${b.badge \|\| 'สิทธิพิเศษ'}</span> </div> <p style="font-size: 12px; line-height: 1.4; color: var(--color-sky-slate); margin-bottom: 8px;">รับคูปองส่วนลดพิเศษ <strong>${couponCode}</strong> สำหรับสั่งซื้อสินค้า</p> <div style="background: rgba(0,0,0,0.04); padding: 6px 10px; border-radius: 6px; font-family: monospace; font-weight: 700; color: var(--color-sky-brand); font-size: 13px; text-align: center; margin-bottom: 10px; border: 1px dashed var(--color-sky-brand);"> ${couponCode} </div> <div class="widget-actions"> <button class="btn btn-sky w-100 btn-sm" onclick="navigateTo('auth')" style="font-size:11px; padding: 6px 12px;"><i class="fa-solid fa-right-to-bracket"></i> เข้าสู่ระบบเพื่อรับโค้ด</button> </div> </div> `; } else { widget.innerHTML = ` <div class="widget-member-card"> <div class="widget-header" style="display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--color-sky-dark); margin-bottom: 4px;"> <i class="fa-solid fa-ticket widget-member-icon" style="color: var(--color-sky-brand); font-size: 18px;"></i> <span>โค้ดส่วนลดเอ็กซ์คลูซีฟ</span> </div> <div style="font-size:11px; color:var(--color-sky-slate); margin-top:2px;">สำหรับคุณ: <strong>${user.name}</strong></div> <div class="widget-points-box mt-2" style="background: rgba(255,255,255,0.08); padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--color-sky-brand); margin: 10px 0; text-align: center;"> <div class="points-label" style="font-size: 10px; color: var(--color-sky-slate); text-transform: uppercase;">ส่วนลดพิเศษเฉพาะสไลด์นี้</div> <div class="points-val" style="font-size: 15px; font-weight: 800; color: var(--color-sky-brand); margin-top: 2px; font-family: monospace;"> ${couponCode} </div> </div> <div class="widget-actions mt-2"> <button class="${btnClass}" ${btnStyle} ${btnAction}>${btnText}</button> </div> </div> `; } }); } window.updateHeroWidgetsDynamic = updateHeroWidgetsDynamic; function initHeroSlider() { const prevBtn = document.getElementById("prevHeroSlideBtn"); const nextBtn = document.getElementById("nextHeroSlideBtn"); const dots = document.querySelectorAll("#heroSliderDots .dot"); if (prevBtn) { const newPrev = prevBtn.cloneNode(true); prevBtn.parentNode.replaceChild(newPrev, prevBtn); newPrev.addEventListener("click", (e) => { e.preventDefault(); showHeroSlide(currentHeroSlide - 1); resetHeroSliderAutoplay(); }); } if (nextBtn) { const newNext = nextBtn.cloneNode(true); nextBtn.parentNode.replaceChild(newNext, nextBtn); newNext.addEventListener("click", (e) => { e.preventDefault(); showHeroSlide(currentHeroSlide + 1); resetHeroSliderAutoplay(); }); } dots.forEach((dot, idx) => { const targetIdx = parseInt(dot.getAttribute("data-slide-to")); dot.addEventListener("click", (e) => { e.preventDefault(); showHeroSlide(isNaN(targetIdx) ? idx : targetIdx); resetHeroSliderAutoplay(); }); }); startHeroSliderAutoplay(); } function startHeroSliderAutoplay() { stopHeroSliderAutoplay(); heroSliderInterval = setInterval(() => { showHeroSlide(currentHeroSlide + 1); }, 5000); } function stopHeroSliderAutoplay() { if (heroSliderInterval) { clearInterval(heroSliderInterval); heroSliderInterval = null; } } function resetHeroSliderAutoplay() { startHeroSliderAutoplay(); } // ========================================================================== // FOMO PURCHASE POPUP NOTIFICATION SYSTEM // ========================================================================== function initFomoNotifications() { const fomoEl = document.getElementById("fomoNotification"); if (!fomoEl) return; const sampleUsers = [ "คุณสมชาย", "คุณกนกวรรณ", "คุณวิชัย", "คุณณัฐพล", "คุณอนันต์", "คุณพิมลวรรณ", "คุณชลธิชา", "คุณภัทร", "คุณสุรศักดิ์" ]; const timeTexts = ["เมื่อสักครู่", "เมื่อ 1 นาทีที่แล้ว", "เมื่อ 2 นาทีที่แล้ว", "เมื่อ 3 นาทีที่แล้ว", "เมื่อ 5 นาทีที่แล้ว"]; function showRandomFomo() { const products = db.getProducts(); if (!products \|\| products.length === 0) return; const randomUser = sampleUsers[Math.floor(Math.random() * sampleUsers.length)]; const randomProduct = products[Math.floor(Math.random() * products.length)]; const randomTime = timeTexts[Math.floor(Math.random() * timeTexts.length)]; const userEl = document.getElementById("fomoUser"); const prodNameEl = document.getElementById("fomoProdName"); const imgEl = document.getElementById("fomoImg"); const timeEl = document.getElementById("fomoTime"); if (userEl) userEl.innerText = randomUser; if (prodNameEl) prodNameEl.innerText = randomProduct.name; if (imgEl) imgEl.src = randomProduct.image \|\| (typeof DEFAULT_IMAGE_PLACEHOLDERS !== 'undefined' ? DEFAULT_IMAGE_PLACEHOLDERS.default : ''); if (timeEl) timeEl.innerText = randomTime; fomoEl.style.display = "flex"; setTimeout(() => { fomoEl.style.display = "none"; }, 5000); const nextInterval = Math.floor(Math.random() * 15000) + 30000; setTimeout(showRandomFomo, nextInterval); } setTimeout(showRandomFomo, 6000); } function initPasswordToggle() { document.querySelectorAll(".toggle-password-btn").forEach(btn => { // ป้องกันการผูก Event ซ้ำ if (btn.dataset.bound === "true") return; btn.dataset.bound = "true"; btn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); const targetId = btn.getAttribute("data-target"); const input = targetId ? document.getElementById(targetId) : btn.previousElementSibling; if (!input) return; if (input.type === "password") { input.type = "text"; btn.classList.remove("fa-eye"); btn.classList.add("fa-eye-slash"); btn.style.color = "var(--color-sky-brand)"; } else { input.type = "password"; btn.classList.remove("fa-eye-slash"); btn.classList.add("fa-eye"); btn.style.color = ""; } }); }); } window.initPasswordToggle = initPasswordToggle;

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.23 | proxy | phpinfo | Settings