// 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);
