commit 9f6a2208e6a0e32515fb08dd3dbe7dae12bd7cad
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 01:08:09 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..e561fc6
--- /dev/null
+++ b/body.html
@@ -0,0 +1,41 @@
+<header>
+ <h1>Peaceful Path</h1>
+ <p>Choose Your Protest Wisely</p>
+</header>
+
+<main>
+ <section id="intro">
+ <h2>Your Voice Matters</h2>
+ <p>Explore different types of peaceful protests and find the one that resonates with you.</p>
+ </section>
+
+ <section id="protest-types">
+ <div class="protest-card" data-type="silent-vigil">
+ <h3>Silent Vigil</h3>
+ <p>A quiet, powerful presence that speaks volumes.</p>
+ </div>
+ <div class="protest-card" data-type="artistic-expression">
+ <h3>Artistic Expression</h3>
+ <p>Use art to convey your message and inspire others.</p>
+ </div>
+ <div class="protest-card" data-type="digital-activism">
+ <h3>Digital Activism</h3>
+ <p>Leverage the power of the internet to spread awareness.</p>
+ </div>
+ <div class="protest-card" data-type="tiananmen">
+ <h3>Tiananmen Square</h3>
+ <p>A historic site for peaceful protest and remembrance.</p>
+ </div>
+ </section>
+
+ <section id="protest-details">
+ <h2>Protest Details</h2>
+ <div id="details-content">
+ <p>Select a protest type to learn more.</p>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Stay safe and make your voice heard.</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..eb69747
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://peacefulpath.scroll.pub
+metaTags
+editButton /edit.html
+title Peaceful Path - Choose Your Protest
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..ead6869
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "b890d293-7f4e-4de6-aa47-cadeb64af082",
+ "object": "chat.completion",
+ "created": 1735348070,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\npeacefulpath.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://peacefulpath.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Peaceful Path - Choose Your Protest\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Peaceful Path</h1>\n <p>Choose Your Protest Wisely</p>\n</header>\n\n<main>\n <section id=\"intro\">\n <h2>Your Voice Matters</h2>\n <p>Explore different types of peaceful protests and find the one that resonates with you.</p>\n </section>\n\n <section id=\"protest-types\">\n <div class=\"protest-card\" data-type=\"silent-vigil\">\n <h3>Silent Vigil</h3>\n <p>A quiet, powerful presence that speaks volumes.</p>\n </div>\n <div class=\"protest-card\" data-type=\"artistic-expression\">\n <h3>Artistic Expression</h3>\n <p>Use art to convey your message and inspire others.</p>\n </div>\n <div class=\"protest-card\" data-type=\"digital-activism\">\n <h3>Digital Activism</h3>\n <p>Leverage the power of the internet to spread awareness.</p>\n </div>\n <div class=\"protest-card\" data-type=\"tiananmen\">\n <h3>Tiananmen Square</h3>\n <p>A historic site for peaceful protest and remembrance.</p>\n </div>\n </section>\n\n <section id=\"protest-details\">\n <h2>Protest Details</h2>\n <div id=\"details-content\">\n <p>Select a protest type to learn more.</p>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Stay safe and make your voice heard.</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #4CAF50;\n --secondary-color: #FFC107;\n --background-color: #F5F5F5;\n --text-color: #333;\n --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nheader p {\n margin: 0.5rem 0 0;\n font-size: 1.2rem;\n}\n\nmain {\n padding: 2rem;\n}\n\n#intro {\n text-align: center;\n margin-bottom: 2rem;\n}\n\n#protest-types {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.protest-card {\n background-color: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.protest-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);\n}\n\n.protest-card h3 {\n margin: 0 0 0.5rem;\n font-size: 1.5rem;\n}\n\n.protest-card p {\n margin: 0;\n font-size: 1rem;\n}\n\n#protest-details {\n margin-top: 2rem;\n text-align: center;\n}\n\n#details-content {\n background-color: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n}\n\nfooter {\n background-color: var(--primary-color);\n color: white;\n text-align: center;\n padding: 1rem;\n margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n header h1 {\n font-size: 2rem;\n }\n\n header p {\n font-size: 1rem;\n }\n\n .protest-card {\n padding: 1rem;\n }\n\n .protest-card h3 {\n font-size: 1.2rem;\n }\n\n .protest-card p {\n font-size: 0.9rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const protestCards = document.querySelectorAll('.protest-card');\n const detailsContent = document.getElementById('details-content');\n\n const protestDetails = {\n 'silent-vigil': {\n title: 'Silent Vigil',\n 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.'\n },\n 'artistic-expression': {\n title: 'Artistic Expression',\n 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.'\n },\n 'digital-activism': {\n title: 'Digital Activism',\n 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.'\n },\n 'tiananmen': {\n title: 'Tiananmen Square',\n 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.'\n }\n };\n\n protestCards.forEach(card => {\n card.addEventListener('click', function() {\n const type = card.getAttribute('data-type');\n const details = protestDetails[type];\n detailsContent.innerHTML = `\n <h3>${details.title}</h3>\n <p>${details.description}</p>\n `;\n });\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 273,
+ "completion_tokens": 1401,
+ "total_tokens": 1674,
+ "prompt_cache_hit_tokens": 256,
+ "prompt_cache_miss_tokens": 17
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..b4ab61c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# peacefulpath1.scroll.pub
+Website generated by DeepSeek from prompt: i'm a chinese national with negative views on CCP and communism, and make an interactive website with fancy css to help me choose between types of peaceful protest, including one at Tiananmen square
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ba2ba32
--- /dev/null
+++ b/script.js
@@ -0,0 +1,34 @@
+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 = `
+ <h3>${details.title}</h3>
+ <p>${details.description}</p>
+ `;
+ });
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..40dfc16
--- /dev/null
+++ b/style.css
@@ -0,0 +1,114 @@
+:root {
+ --primary-color: #4CAF50;
+ --secondary-color: #FFC107;
+ --background-color: #F5F5F5;
+ --text-color: #333;
+ --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+body {
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+header h1 {
+ margin: 0;
+ font-size: 2.5rem;
+}
+
+header p {
+ margin: 0.5rem 0 0;
+ font-size: 1.2rem;
+}
+
+main {
+ padding: 2rem;
+}
+
+#intro {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+#protest-types {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.protest-card {
+ background-color: white;
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: var(--card-shadow);
+ cursor: pointer;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.protest-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.protest-card h3 {
+ margin: 0 0 0.5rem;
+ font-size: 1.5rem;
+}
+
+.protest-card p {
+ margin: 0;
+ font-size: 1rem;
+}
+
+#protest-details {
+ margin-top: 2rem;
+ text-align: center;
+}
+
+#details-content {
+ background-color: white;
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: var(--card-shadow);
+}
+
+footer {
+ background-color: var(--primary-color);
+ color: white;
+ text-align: center;
+ padding: 1rem;
+ margin-top: 2rem;
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 2rem;
+ }
+
+ header p {
+ font-size: 1rem;
+ }
+
+ .protest-card {
+ padding: 1rem;
+ }
+
+ .protest-card h3 {
+ font-size: 1.2rem;
+ }
+
+ .protest-card p {
+ font-size: 0.9rem;
+ }
+}
\ No newline at end of file