Choose Your Path of Peaceful Protest
\nSelect the type of protest that resonates with your values and circumstances.
\n
body.html
Changed around line 1
+
+
Peaceful Voice
+
Empowering peaceful expression
+
+
+
+
+
Choose Your Path of Peaceful Protest
+
Select the type of protest that resonates with your values and circumstances.
+
+
+
+
+
Silent Vigil
+
A quiet, respectful gathering to express dissent.
+
+
+
+
+
Artistic Expression
+
Use creativity to convey your message peacefully.
+
+
+
+
+
Tiananmen Memorial
+
Honor the past while advocating for change.
+
+
+
+
+
+
Protest Details
+
+
+
+
+
+
Remember: Peaceful protest is a fundamental right.
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://peacefulvoice.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Peaceful Voice - Choose Your Protest
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "8d7b060e-8584-4edd-bab5-b65480d5af06",
+ "object": "chat.completion",
+ "created": 1735311732,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\npeacefulvoice.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://peacefulvoice.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Peaceful Voice - Choose Your Protest\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n \n\n\n \n \n\n \n\n \n \n \n\n\n---style.css---\n:root {\n --primary-color: #4CAF50;\n --secondary-color: #2196F3;\n --accent-color: #FFC107;\n --text-color: #333;\n --bg-color: #f5f5f5;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--bg-color);\n margin: 0;\n padding: 0;\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.intro {\n padding: 2rem;\n text-align: center;\n}\n\n.options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n padding: 2rem;\n}\n\n.card {\n background: white;\n border-radius: 8px;\n padding: 1.5rem;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.card h3 {\n color: var(--primary-color);\n margin-bottom: 1rem;\n}\n\n.card button {\n background: var(--secondary-color);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.card button:hover {\n background: var(--accent-color);\n}\n\n.details {\n padding: 2rem;\n background: white;\n margin: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\nfooter {\n background: var(--text-color);\n color: white;\n text-align: center;\n padding: 1rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .options {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const cards = document.querySelectorAll('.card');\n const protestInfo = document.getElementById('protest-info');\n\n const protestDetails = {\n silent: {\n title: 'Silent Vigil',\n description: 'A peaceful gathering where participants stand in silence to express their dissent. This form of protest is powerful in its simplicity and respectfulness.',\n tips: [\n 'Choose a meaningful location',\n 'Wear symbolic clothing or colors',\n 'Maintain complete silence throughout'\n ]\n },\n art: {\n title: 'Artistic Expression',\n description: 'Use creative means like painting, music, or performance art to convey your message. This approach can be particularly effective in reaching diverse audiences.',\n tips: [\n 'Choose a medium that resonates with you',\n 'Focus on positive messaging',\n 'Consider public spaces for display'\n ]\n },\n tiananmen: {\n title: 'Tiananmen Memorial',\n description: 'Honor the memory of those who stood for freedom while advocating for change. This form of protest carries deep historical significance.',\n tips: [\n 'Educate yourself about the history',\n 'Be mindful of local laws and regulations',\n 'Consider virtual participation for safety'\n ]\n }\n };\n\n cards.forEach(card => {\n card.addEventListener('click', function() {\n const type = this.dataset.type;\n const details = protestDetails[type];\n\n let tipsHTML = details.tips.map(tip => `${tip} `).join('');\n \n protestInfo.innerHTML = `\n
Peaceful Voice
\nEmpowering peaceful expression
\n${details.title}
\n${details.description}
\nTips:
\n- ${tipsHTML}
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 272,
+ "completion_tokens": 1295,
+ "total_tokens": 1567,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 272
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # peacefulvoice.scroll.pub
+ Website generated by DeepSeek from prompt: chinese national with negative views on CCP and communism, and make an interactive wbesite with fancy css to help me choose between types of peaceful protest, including one at Tiananmen square
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const cards = document.querySelectorAll('.card');
+ const protestInfo = document.getElementById('protest-info');
+
+ const protestDetails = {
+ silent: {
+ title: 'Silent Vigil',
+ description: 'A peaceful gathering where participants stand in silence to express their dissent. This form of protest is powerful in its simplicity and respectfulness.',
+ tips: [
+ 'Choose a meaningful location',
+ 'Wear symbolic clothing or colors',
+ 'Maintain complete silence throughout'
+ ]
+ },
+ art: {
+ title: 'Artistic Expression',
+ description: 'Use creative means like painting, music, or performance art to convey your message. This approach can be particularly effective in reaching diverse audiences.',
+ tips: [
+ 'Choose a medium that resonates with you',
+ 'Focus on positive messaging',
+ 'Consider public spaces for display'
+ ]
+ },
+ tiananmen: {
+ title: 'Tiananmen Memorial',
+ description: 'Honor the memory of those who stood for freedom while advocating for change. This form of protest carries deep historical significance.',
+ tips: [
+ 'Educate yourself about the history',
+ 'Be mindful of local laws and regulations',
+ 'Consider virtual participation for safety'
+ ]
+ }
+ };
+
+ cards.forEach(card => {
+ card.addEventListener('click', function() {
+ const type = this.dataset.type;
+ const details = protestDetails[type];
+
+ let tipsHTML = details.tips.map(tip => `${tip} `).join('');
+
+ protestInfo.innerHTML = `
+
${details.title}
+
${details.description}
+
Tips:
+
- ${tipsHTML}
+ `;
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #4CAF50;
+ --secondary-color: #2196F3;
+ --accent-color: #FFC107;
+ --text-color: #333;
+ --bg-color: #f5f5f5;
+ }
+
+ body {
+ font-family: 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--bg-color);
+ margin: 0;
+ padding: 0;
+ }
+
+ header {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .intro {
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .options {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+ padding: 2rem;
+ }
+
+ .card {
+ background: white;
+ border-radius: 8px;
+ padding: 1.5rem;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+ }
+
+ .card:hover {
+ transform: translateY(-5px);
+ }
+
+ .card h3 {
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+ }
+
+ .card button {
+ background: var(--secondary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+ }
+
+ .card button:hover {
+ background: var(--accent-color);
+ }
+
+ .details {
+ padding: 2rem;
+ background: white;
+ margin: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+
+ footer {
+ background: var(--text-color);
+ color: white;
+ text-align: center;
+ padding: 1rem;
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .options {
+ grid-template-columns: 1fr;
+ }
+ }