Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Parallax effect for hero section
+ window.addEventListener('scroll', () => {
+ const parallax = document.querySelector('.parallax-container');
+ const scrolled = window.pageYOffset;
+ parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
+ });
+
+ // Population chart
+ const ctx = document.getElementById('populationChart').getContext('2d');
+ const data = {
+ labels: ['1850', '1880', '1920', '1960', '2000', '2020'],
+ values: [4000, 105000, 61000, 237000, 2432000, 5400000]
+ };
+
+ function drawChart() {
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+ const maxValue = Math.max(...data.values);
+ const heightRatio = ctx.canvas.height / maxValue;
+ const barWidth = ctx.canvas.width / data.labels.length - 40;
+
+ ctx.fillStyle = '#c41e3a';
+
+ data.values.forEach((value, index) => {
+ const x = (ctx.canvas.width / data.labels.length) * index + 20;
+ const barHeight = value * heightRatio;
+ const y = ctx.canvas.height - barHeight;
+
+ ctx.fillRect(x, y, barWidth, barHeight);
+
+ // Add labels
+ ctx.fillStyle = '#333';
+ ctx.font = '12px Arial';
+ ctx.fillText(data.labels[index], x, ctx.canvas.height - 10);
+ ctx.fillText(value.toLocaleString(), x, y - 10);
+ ctx.fillStyle = '#c41e3a';
+ });
+ }
+
+ // Responsive chart
+ function resizeChart() {
+ ctx.canvas.width = ctx.canvas.parentNode.offsetWidth;
+ ctx.canvas.height = 400;
+ drawChart();
+ }
+
+ window.addEventListener('resize', resizeChart);
+ resizeChart();
+
+ // Intersection Observer for timeline items
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateX(0)';
+ }
+ });
+ }, { threshold: 0.1 });
+
+ document.querySelectorAll('.timeline-item').forEach(item => {
+ item.style.opacity = '0';
+ item.style.transform = 'translateX(-50px)';
+ item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(item);
+ });
+ });
