body.html
Changed around line 1
+
+
Peaceful Path
+
Empowering Choices for Peaceful Protest
+
+
+
+
+
Welcome to Peaceful Path
+
This interactive app helps you choose the best type of peaceful protest for your situation. Explore the options below and make your voice heard.
+
+
+
+
Choose Your Protest
+
+
Silent Vigil
+
A quiet, reflective protest that speaks volumes through presence.
+
+
+
March
+
Join a group and walk together to show solidarity.
+
+
+
Artistic Expression
+
Use art, music, or performance to convey your message.
+
+
+
Tiananmen Square
+
Learn about the historical significance of Tiananmen Square.
+
+
+
+
+
Your Chosen Path
+
+
+
+
+
+
Stay safe and make your voice heard.
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://peacefulpath.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Peaceful Path - Choose Your Protest
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # peacefulpath.scroll.pub
+ Website generated by DeepSeek from prompt: I am a chinese national with negative views on CCP and communism, and build me an interactive app with fancy css affects that helps me choose between types of peaceful protest, including one at Tiananmen square
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function () {
+ const options = document.querySelectorAll('.option');
+ const resultContent = document.getElementById('result-content');
+
+ options.forEach(option => {
+ option.addEventListener('click', function () {
+ const type = this.getAttribute('data-type');
+ let resultText = '';
+
+ switch (type) {
+ case 'silent-vigil':
+ resultText = 'You have chosen a Silent Vigil. This peaceful protest involves standing or sitting quietly in a public place to show solidarity and reflection.';
+ break;
+ case 'march':
+ resultText = 'You have chosen to March. Joining a group and walking together is a powerful way to show unity and demand change.';
+ break;
+ case 'artistic':
+ resultText = 'You have chosen Artistic Expression. Using art, music, or performance can convey your message in a creative and impactful way.';
+ break;
+ case 'tiananmen':
+ resultText = 'You have chosen to learn about Tiananmen Square. This historical site is a symbol of the struggle for democracy and human rights.';
+ break;
+ default:
+ resultText = 'Please choose a protest type.';
+ }
+
+ resultContent.innerHTML = `
${resultText}
`;+ });
+ });
+ });
style.css
Changed around line 1
+ body {
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+ color: #333;
+ }
+
+ header {
+ text-align: center;
+ padding: 2rem;
+ background: rgba(255, 255, 255, 0.8);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin: 0;
+ }
+
+ p {
+ font-size: 1.2rem;
+ }
+
+ main {
+ padding: 2rem;
+ }
+
+ section {
+ margin-bottom: 2rem;
+ }
+
+ .option {
+ background: rgba(255, 255, 255, 0.9);
+ padding: 1rem;
+ margin: 1rem 0;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .option:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ }
+
+ #result {
+ text-align: center;
+ }
+
+ #result-content {
+ background: rgba(255, 255, 255, 0.9);
+ padding: 1rem;
+ border-radius: 8px;
+ margin-top: 1rem;
+ }
+
+ footer {
+ text-align: center;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.8);
+ box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ p {
+ font-size: 1rem;
+ }
+
+ .option {
+ padding: 0.8rem;
+ }
+ }