Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const protestCards = document.querySelectorAll('.protest-card');
+ const detailsContent = document.getElementById('details-content');
+
+ const protestDetails = {
+ 'silent-vigil': {
+ title: 'Silent Vigil',
+ description: 'A silent vigil is a powerful form of protest where participants stand quietly, often holding candles or signs, to draw attention to an issue. It is a peaceful and respectful way to make your voice heard.'
+ },
+ 'artistic-expression': {
+ title: 'Artistic Expression',
+ description: 'Artistic expression involves using various forms of art, such as paintings, music, or performances, to convey a message. It can be a creative and impactful way to protest and inspire others.'
+ },
+ 'digital-activism': {
+ title: 'Digital Activism',
+ description: 'Digital activism leverages the power of the internet and social media to spread awareness and mobilize people. It includes activities like online petitions, hashtag campaigns, and sharing information.'
+ },
+ 'tiananmen': {
+ title: 'Tiananmen Square',
+ description: 'Tiananmen Square is a historic site in Beijing known for its significance in the 1989 pro-democracy protests. It remains a symbol of peaceful resistance and the fight for freedom.'
+ }
+ };
+
+ protestCards.forEach(card => {
+ card.addEventListener('click', function() {
+ const type = card.getAttribute('data-type');
+ const details = protestDetails[type];
+ detailsContent.innerHTML = `
+
${details.title}
+ `;
+ });
+ });
+ });
