<!DOCTYPE html><html lang="[LNG]"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Initializing</title> <style> :root { --brand-dark: #0c121a; --brand-mid: #1c2734; --brand-accent: #0075ff; --brand-accent2: #00daff; --text-main: #ffffff; --text-sub: rgba(255, 255, 255, 0.75); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; font-family: "Segoe UI", Tahoma, sans-serif; } body { width: 100vw; height: 100vh; overflow: hidden; background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid)); display: flex; align-items: center; justify-content: center; color: var(--text-main); position: relative; text-align: center; } body::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--brand-mid), var(--brand-dark)); opacity: 0.35; animation: bgPulse 22s infinite alternate ease-in-out; z-index: -3; } @keyframes bgPulse { 0% { opacity: 0.25; } 100% { opacity: 0.45; } } .particles { position: absolute; inset: 0; overflow: hidden; z-index: -1; } .particles span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--text-main); opacity: 0.55; animation: drift 8s infinite linear; } @keyframes drift { 0% { transform: translateY(0px); } 100% { transform: translateY(300px); } } .loader-block { width: 300px; text-align: center; opacity: 0; animation: fadeIn 1.4s forwards ease; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(18px); filter: blur(2px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } .status { font-size: 1.1rem; margin-bottom: 20px; opacity: 0.9; min-height: 20px; } .bar { width: 100%; height: 12px; background: rgba(255, 255, 255, 0.10); border-radius: 50px; overflow: hidden; margin-bottom: 10px; } .fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-accent2), var(--brand-accent)); background-size: 200% 100%; animation: shimmer 2s infinite linear; transition: width 0.3s ease-out; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .percent { font-size: 1rem; color: var(--text-sub); margin-bottom: 18px; font-variant-numeric: tabular-nums; } .brand-line { font-size: 0.85rem; opacity: 0.7; margin-bottom: 14px; min-height: 18px; } .warning { margin-top: 10px; font-size: 0.85rem; color: #ffb0b0; opacity: 0.85; line-height: 1.3em; padding: 0 10px; } .app-icon { width: 70px; height: 70px; margin-bottom: 25px; } </style></head><body oncontextmenu="return false;"> <div class="particles" id="particles"></div> <div class="loader-block" id="loaderBlock"> <img src="data:image/png;base64,[BASE-ICO]" alt="App Icon" onerror="this.style.display='none'" class="app-icon"> <div class="status" id="statusText">Initializing...</div> <div class="bar"> <div class="fill" id="progressFill"></div> </div> <div class="percent" id="percentText">0%</div> <div class="brand-line" id="brandLine"></div> <div class="warning" id="warningText"></div> </div> <script> let currentLang = document.documentElement.lang || navigator.language.slice(0, 2); const translations = { ar: [ "جارٍ البدء", "جارٍ التحميل", "تحديث البيانات", "تحسين التجربة", "قيد التجهيز", "ضبط الإعدادات", "تشغيل الخدمة", "جارٍ العمل" ], zh: [ "正在开始", "正在加载", "更新数据", "提升体验", "准备中", "设置中", "启动中", "处理中" ], ru: [ "Запуск", "Загрузка", "Обновление данных", "Улучшение работы", "Подготовка", "Настройка", "Запуск", "Выполняется" ], tr: [ "Başlıyor", "Yükleniyor", "Veriler Güncelleniyor", "Deneyim İyileştiriliyor", "Hazırlanıyor", "Ayarlar Yapılıyor", "Çalıştırılıyor", "Devam Ediyor" ], es: [ "Iniciando", "Cargando", "Actualizando Datos", "Mejorando Experiencia", "Preparando", "Ajustando", "Iniciando", "En Proceso" ], pt: [ "Iniciando", "Carregando", "Atualizando Dados", "Melhorando Experiência", "Preparando", "Ajustando", "Iniciando", "Em Progresso" ], en: [ "Starting", "Loading", "Updating Data", "Improving Experience", "Getting Ready", "Adjusting Settings", "Launching", "In Progress" ] }; const warningTranslations = { ar: "يرجى عدم إغلاق التطبيق أثناء الإعداد", zh: "请在设置期间不要关闭应用程序", ru: "Пожалуйста, не закрывайте приложение во время настройки", tr: "Kurulum sırasında lütfen uygulamayı kapatmayın", es: "Por favor, no cierre la aplicación durante la configuración", pt: "Por favor, não feche o aplicativo durante a configuração", en: "Please don't close the app during setup" }; const messages = translations[currentLang] || translations["en"]; const warningMsg = warningTranslations[currentLang] || warningTranslations["en"]; const brandLines = [ "Optimized for Performance", "Enterprise-Grade Architecture", "Secure Infrastructure Layer", "Compliance-Ready Framework", "Scalable by Design", "Built for Reliability", "High-Availability Systems", "Cloud-Native Foundation", "Resilient Core Services", "Production-Ready Stack", "Future-Proof Technology", "Data-Driven Engineering" ]; const gradients = [ "linear-gradient(135deg, #0b1119, #15202c, #1a2d3c)", "linear-gradient(135deg, #0b111a, #16212e, #1b2f3e)", "linear-gradient(135deg, #0c121c, #172330, #1c3141)", "linear-gradient(135deg, #0d131e, #192532, #1e3444)", "linear-gradient(135deg, #0e1420, #1a2735, #203647)", "linear-gradient(135deg, #0f1522, #1c2937, #22394a)", "linear-gradient(135deg, #0f1624, #1d2b3a, #243c4e)", "linear-gradient(135deg, #101726, #1f2d3d, #263e51)" ]; function setBackgroundByIndex(i) { document.body.style.background = gradients[i]; } const particleContainer = document.getElementById("particles"); for (let i = 0; i < 70; i++) { const p = document.createElement("span"); p.style.left = Math.random() * 100 + "%"; p.style.top = Math.random() * -200 + "px"; p.style.animationDelay = Math.random() * 8 + "s"; particleContainer.appendChild(p); } const fill = document.getElementById("progressFill"); const percentText = document.getElementById("percentText"); const statusText = document.getElementById("statusText"); const brandLine = document.getElementById("brandLine"); const warningText = document.getElementById("warningText"); statusText.textContent = messages[0]; warningText.textContent = warningMsg; let progress = 0; let msgIndex = 0; let brandIndex = 0; setInterval(() => { progress += Math.random() * 6; if (progress > 100) { progress = 0; if (msgIndex >= 8) { msgIndex = 0; } setBackgroundByIndex(msgIndex); } fill.style.width = progress + "%"; percentText.textContent = Math.floor(progress) + "%"; if (Math.floor(progress) % 25 === 0 && msgIndex < messages.length - 1) { msgIndex++; statusText.textContent = messages[msgIndex]; } if (Math.floor(progress) % 30 === 0) { brandLine.textContent = brandLines[brandIndex++ % brandLines.length]; } }, 300); </script></body></html>