// Add Chart.js const chartScript = document.createElement('script'); chartScript.src = 'https://cdn.jsdelivr.net/npm/chart.js'; document.head.appendChild(chartScript); // Add audio element const sound = new Audio('https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg'); // Scroll trigger and animation logic function isInViewport(el) { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } function animateCounter() { fetch("https://script.google.com/macros/s/AKfycbwN0ZtCZtFzvwHLYyMbQtJXENU5u5jj05cFE1J2A6fEV4WgGkA21gLhnfuGEyLOq17y/exec") .then(res => res.text()) .then(data => { const [count, timestamp] = data.split("|"); let display = document.getElementById("pubCount"); display.style.fontSize = "24px"; display.style.fontWeight = "bold"; display.style.color = "#ffffff"; display.style.background = "linear-gradient(90deg, #00c6ff, #0072ff)"; display.style.padding = "10px 20px"; display.style.borderRadius = "12px"; display.style.boxShadow = "0 0 12px rgba(0, 114, 255, 0.6)"; display.style.transition = "all 0.3s ease-in-out"; display.style.animation = "pulse 1s infinite alternate"; let start = 0; let end = parseInt(count); let duration = 1000; let stepTime = Math.abs(Math.floor(duration / end)); let timer = setInterval(() => { start++; display.innerText = `📚 Total Publications: ${start}`; display.style.boxShadow = `0 0 ${10 + start}px rgba(0, 114, 255, 0.6)`; if (start >= end) { clearInterval(timer); sound.play(); const updateEl = document.getElementById("lastUpdated"); if (updateEl) { updateEl.innerText = `⏱️ Last Updated: ${timestamp}`; } } }, stepTime); const stats = [ { id: "authorCount", value: 15, label: "👥 Total Authors", color: "#0077cc" }, { id: "submissionCount", value: 58, label: "📝 Total Submissions", color: "#28a745" }, { id: "countryCount", value: 9, label: "🌍 Countries Represented", color: "#ff9900" }, { id: "downloadsCount", value: 1450, label: "⬇️ Total Downloads", color: "#663399" }, { id: "viewsCount", value: 3150, label: "👁️ Total Views", color: "#ff5722" }, { id: "reviewersCount", value: 12, label: "🎓 Peer Reviewers", color: "#17a2b8" } ]; const labels = []; const values = []; const colors = []; stats.forEach(stat => { let el = document.getElementById(stat.id); labels.push(stat.label); values.push(stat.value); colors.push(stat.color); if (el) { el.style.fontSize = "22px"; el.style.marginTop = "15px"; el.style.color = stat.color; el.style.animation = "pulse 1s infinite alternate"; let val = 0; let step = Math.abs(Math.floor(duration / stat.value)); let interval = setInterval(() => { val++; el.innerText = `${stat.label}: ${val}`; if (val >= stat.value) clearInterval(interval); }, step); } }); const chartContainer = document.getElementById("statsChart"); if (chartContainer) { let currentChart; function renderChart(type = 'bar') { if (currentChart) currentChart.destroy(); currentChart = new Chart(chartContainer, { type: type, data: { labels: labels, datasets: [{ label: 'AJSS Metrics Overview', data: values, backgroundColor: colors, borderColor: '#333', borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { display: type !== 'bar' }, tooltip: { enabled: true } }, scales: type === 'bar' || type === 'line' ? { y: { beginAtZero: true } } : {} } }); } renderChart(); document.getElementById("chartType").addEventListener("change", function (e) { renderChart(e.target.value); }); } }); } window.addEventListener('scroll', function() { const pubCount = document.getElementById("pubCount"); if (pubCount && isInViewport(pubCount) && !pubCount.dataset.animated) { pubCount.dataset.animated = true; animateCounter(); } }); const style = document.createElement('style'); style.textContent = ` @keyframes pulse { from { transform: scale(1); } to { transform: scale(1.05); } }`; document.head.appendChild(style);