\n \n );\n}\n```" } ] } }; let currentTypeTimeout; function switchTab(tabId) { // Update UI document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active')); document.getElementById(`btn-${tabId}`).classList.add('active'); // Clear content document.getElementById('demo-content').innerHTML = ''; document.getElementById('demo-agent-name').innerText = DEMO_DATA[tabId].agent; // Start Typing Simulation simulateChat(DEMO_DATA[tabId].messages); } async function simulateChat(messages) { clearTimeout(currentTypeTimeout); const container = document.getElementById('demo-content'); for (let msg of messages) { // Formatting let fmtText = msg.text.replace(/\n/g, '
').replace(/\*\*(.*?)\*\*/g, '$1'); // Add Typing Bubble const typingDiv = document.createElement('div'); typingDiv.className = `chat-bubble ${msg.role === 'user' ? 'chat-user' : 'chat-ai'} w-16`; typingDiv.innerHTML = ``; container.appendChild(typingDiv); container.scrollTop = container.scrollHeight; await new Promise(r => currentTypeTimeout = setTimeout(r, 800)); // Fake processing delay // Remove typing, add real message typingDiv.remove(); const msgDiv = document.createElement('div'); msgDiv.className = `chat-bubble ${msg.role === 'user' ? 'chat-user' : 'chat-ai'} opacity-0 animate-[fade-in_0.3s_ease-out_forwards]`; msgDiv.innerHTML = fmtText; // Simple animation hack msgDiv.style.animation = "fadeIn 0.5s forwards"; container.appendChild(msgDiv); container.scrollTop = container.scrollHeight; await new Promise(r => currentTypeTimeout = setTimeout(r, msg.role === 'user' ? 500 : 1500)); // Read delay } } // --- I18N LOGIC --- function setLanguage(lang) { currentLang = lang; localStorage.setItem('x10_lang', lang); // Update static elements document.querySelectorAll('[data-t]').forEach(el => { const key = el.getAttribute('data-t'); if (i18n[lang][key]) { el.innerHTML = i18n[lang][key]; } }); // Special handling for HTML titles (rich text) if (document.getElementById('hero-title')) { document.getElementById('hero-title').innerHTML = i18n[lang].hero_title; } // Update Switcher UI document.getElementById('current-flag').innerText = i18n[lang].flag; document.getElementById('current-lang-name').innerText = i18n[lang].name; // Re-render kits to update "Get it" button and loading text renderKits(); } async function detectLanguage() { // Priority: 1. LocalStorage, 2. IP Geo (optional feature), 3. Browser Locale const saved = localStorage.getItem('x10_lang'); if (saved) return setLanguage(saved); try { // Quick IP Check (Free & Fast) const res = await fetch('https://ipapi.co/json/'); const data = await res.json(); const country = data.country_code; if (country === 'VN') return setLanguage('vi'); if (country === 'JP') return setLanguage('ja'); if (country === 'KR') return setLanguage('ko'); } catch (e) { // Fallback to browser locale if IP detection fails const locale = navigator.language.toLowerCase(); if (locale.startsWith('vi')) return setLanguage('vi'); if (locale.startsWith('ja')) return setLanguage('ja'); if (locale.startsWith('ko')) return setLanguage('ko'); } setLanguage('en'); // Final Default } // --- RENDER LOGIC --- function renderKits() { const container = document.getElementById('kits-container'); const loader = document.getElementById('loading-kits'); // Hide Loader if (loader) loader.style.display = 'none'; container.innerHTML = ''; // Clear for re-render STATIC_KITS.forEach(item => { const card = document.createElement('div'); card.className = "group relative bg-white border border-slate-200 rounded-3xl p-8 hover:shadow-2xl hover:shadow-primary/10 transition duration-300 hover:-translate-y-1"; card.innerHTML = `

${item.title}

${item.desc}

`; container.appendChild(card); }); } // Init document.addEventListener('DOMContentLoaded', () => { detectLanguage(); renderKits(); // Initial Render loadBlog(); // Fetch Blog Posts });