/** * Serah Store - Splash Screen * Usage: Add to your HTML or before */ (function () { const LOGO_URL = "https://cdn.files.salla.network/theme/1817505418/8622df2d-ceee-4367-ae2a-a44fa4c413a2.webp"; const DURATION = 1500; // ms before fade starts const FADE_MS = 1000; // fade-out duration function injectStyles() { const style = document.createElement("style"); style.textContent = ` #serah-splash { position: fixed; inset: 0; z-index: 999999; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity ${FADE_MS}ms ease; } #serah-splash.hidden { opacity: 0; pointer-events: none; } #serah-splash-logo { width: 180px; max-width: 60vw; animation: serahPulse 1.6s ease-in-out infinite; } #serah-splash-bar-wrap { margin-top: 36px; width: 140px; height: 3px; background: #f0f0f0; border-radius: 99px; overflow: hidden; } #serah-splash-bar { height: 100%; width: 0%; background: #c9a96e; border-radius: 99px; animation: serahLoad ${DURATION}ms ease forwards; } @keyframes serahPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.85; } } @keyframes serahLoad { 0% { width: 0%; } 100% { width: 100%; } } `; document.head.appendChild(style); } function createSplash() { const overlay = document.createElement("div"); overlay.id = "serah-splash"; overlay.setAttribute("role", "status"); overlay.setAttribute("aria-label", "Loading Serah Store"); const logo = document.createElement("img"); logo.id = "serah-splash-logo"; logo.src = LOGO_URL; logo.alt = "Serah Store"; const barWrap = document.createElement("div"); barWrap.id = "serah-splash-bar-wrap"; const bar = document.createElement("div"); bar.id = "serah-splash-bar"; barWrap.appendChild(bar); overlay.appendChild(logo); overlay.appendChild(barWrap); document.body.appendChild(overlay); return overlay; } function removeSplash(overlay) { overlay.classList.add("hidden"); setTimeout(() => overlay.remove(), FADE_MS); } function init() { injectStyles(); const overlay = createSplash(); // Remove after DURATION ms, but also wait for the page to fully load const minTimer = new Promise((res) => setTimeout(res, DURATION)); const pageLoad = new Promise((res) => { if (document.readyState === "complete") return res(); window.addEventListener("load", res, { once: true }); }); Promise.all([minTimer, pageLoad]).then(() => removeSplash(overlay)); } // Only run on the home page function isHomePage() { const path = window.location.pathname.replace(/\/+$/, ""); // strip trailing slashes return path === "" || path === "/index.html" || path === "/index"; } if (isHomePage()) { if (document.body) { init(); } else { document.addEventListener("DOMContentLoaded", init); } } })(); // Get all elements that match .banner.banner--fixed.overflow-hidden const banners = document.querySelectorAll('.banner.banner--fixed.overflow-hidden'); // Hide the last one if (banners.length > 0) { const lastBanner = banners[banners.length - 1]; lastBanner.style.display = 'none'; }