commit 06439f73bfbd82640e491916db00e992a7da5ba9
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 09:51:27 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..ae082d4
--- /dev/null
+++ b/body.html
@@ -0,0 +1,55 @@
+<header>
+ <nav>
+ <div class="logo">心</div>
+ <div class="nav-links">
+ <a href="#practice">Practice</a>
+ <a href="#reflections">Reflections</a>
+ <a href="#wisdom">Wisdom</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero" id="hero">
+ <div class="chinese-characters">每日三醒吾心</div>
+ <h1>Daily Heart Reflection</h1>
+ <p>Awaken your consciousness three times daily</p>
+ </section>
+
+ <section id="practice" class="practice">
+ <h2>Three Daily Reflections</h2>
+ <div class="reflection-cards">
+ <div class="card morning">
+ <h3>Morning</h3>
+ <p>What intentions do I set for today?</p>
+ <div class="reflection-input">
+ <textarea placeholder="Write your morning reflection..."></textarea>
+ </div>
+ </div>
+ <div class="card noon">
+ <h3>Noon</h3>
+ <p>How am I maintaining my mindfulness?</p>
+ <div class="reflection-input">
+ <textarea placeholder="Write your midday reflection..."></textarea>
+ </div>
+ </div>
+ <div class="card evening">
+ <h3>Evening</h3>
+ <p>What lessons did I learn today?</p>
+ <div class="reflection-input">
+ <textarea placeholder="Write your evening reflection..."></textarea>
+ </div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <p>Mindful reflection for inner peace</p>
+ <div class="social-links">
+ <a href="#" aria-label="Share on social media">Share</a>
+ <a href="#" aria-label="Contact us">Contact</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..7672c13
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://mindful-heart.scroll.pub
+metaTags
+ description Daily self-reflection practice based on ancient wisdom - nurture your inner peace through mindful awareness
+ keywords mindfulness, self-reflection, meditation, daily practice, inner peace
+editButton /edit.html
+title Daily Heart Reflection | 每日三醒吾心
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..a44f704
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_015kcLcFsksyqeF2FqdcrB6e",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a website focused on \"每日三醒吾心\" (Daily Three Self-Reflections), which is a concept about mindful self-reflection.\n\n---domain---\nmindful-heart.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://mindful-heart.scroll.pub\nmetaTags\n description Daily self-reflection practice based on ancient wisdom - nurture your inner peace through mindful awareness\n keywords mindfulness, self-reflection, meditation, daily practice, inner peace\neditButton /edit.html\ntitle Daily Heart Reflection | 每日三醒吾心\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">心</div>\n <div class=\"nav-links\">\n <a href=\"#practice\">Practice</a>\n <a href=\"#reflections\">Reflections</a>\n <a href=\"#wisdom\">Wisdom</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\" id=\"hero\">\n <div class=\"chinese-characters\">每日三醒吾心</div>\n <h1>Daily Heart Reflection</h1>\n <p>Awaken your consciousness three times daily</p>\n </section>\n\n <section id=\"practice\" class=\"practice\">\n <h2>Three Daily Reflections</h2>\n <div class=\"reflection-cards\">\n <div class=\"card morning\">\n <h3>Morning</h3>\n <p>What intentions do I set for today?</p>\n <div class=\"reflection-input\">\n <textarea placeholder=\"Write your morning reflection...\"></textarea>\n </div>\n </div>\n <div class=\"card noon\">\n <h3>Noon</h3>\n <p>How am I maintaining my mindfulness?</p>\n <div class=\"reflection-input\">\n <textarea placeholder=\"Write your midday reflection...\"></textarea>\n </div>\n </div>\n <div class=\"card evening\">\n <h3>Evening</h3>\n <p>What lessons did I learn today?</p>\n <div class=\"reflection-input\">\n <textarea placeholder=\"Write your evening reflection...\"></textarea>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <p>Mindful reflection for inner peace</p>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"Share on social media\">Share</a>\n <a href=\"#\" aria-label=\"Contact us\">Contact</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --bg-color: #f9f9f9;\n --text-color: #333;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Segoe UI\", system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--bg-color);\n}\n\nheader {\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 2rem;\n color: var(--accent-color);\n font-weight: bold;\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--primary-color);\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: linear-gradient(45deg, #2c3e50, #3498db);\n color: white;\n}\n\n.chinese-characters {\n font-size: 4rem;\n margin-bottom: 1rem;\n animation: fadeIn 2s ease-out;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.practice {\n padding: 5rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.reflection-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.card:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(0,0,0,0.15);\n}\n\ntextarea {\n width: 100%;\n height: 150px;\n padding: 1rem;\n border: 1px solid #ddd;\n border-radius: 8px;\n margin-top: 1rem;\n resize: vertical;\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n padding: 2rem 5%;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .chinese-characters {\n font-size: 2.5rem;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .footer-content {\n flex-direction: column;\n text-align: center;\n gap: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Save reflections to localStorage\n const textareas = document.querySelectorAll('textarea');\n textareas.forEach(textarea => {\n const savedValue = localStorage.getItem(textarea.placeholder);\n if (savedValue) {\n textarea.value = savedValue;\n }\n\n textarea.addEventListener('input', (e) => {\n localStorage.setItem(e.target.placeholder, e.target.value);\n });\n });\n\n // Smooth scroll for navigation\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Add scroll-based animations\n const observerOptions = {\n threshold: 0.1\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.card').forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n observer.observe(card);\n });\n});\n\n---end---\n\nThis website features:\n1. A fixed header with a minimalist navigation\n2. A full-screen hero section with animated Chinese characters\n3. Three reflection cards for morning, noon, and evening\n4. Smooth animations and transitions\n5. Local storage to save reflections\n6. Fully responsive design\n7. Accessibility features\n8. Modern gradient backgrounds\n9. Clean typography and spacing\n10. Subtle hover effects and animations\n\nThe design emphasizes simplicity while maintaining visual appeal through careful use of color, typography, and spacing. The functionality focuses on the core purpose: daily reflection and mindfulness."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2244
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..db55242
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# mindful-heart.scroll.pub
+Website generated by Claude from prompt: 每日三醒吾心
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..dd0170e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Save reflections to localStorage
+ const textareas = document.querySelectorAll('textarea');
+ textareas.forEach(textarea => {
+ const savedValue = localStorage.getItem(textarea.placeholder);
+ if (savedValue) {
+ textarea.value = savedValue;
+ }
+
+ textarea.addEventListener('input', (e) => {
+ localStorage.setItem(e.target.placeholder, e.target.value);
+ });
+ });
+
+ // Smooth scroll for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add scroll-based animations
+ const observerOptions = {
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ observer.observe(card);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b975e77
--- /dev/null
+++ b/style.css
@@ -0,0 +1,153 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --bg-color: #f9f9f9;
+ --text-color: #333;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Segoe UI", system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--bg-color);
+}
+
+header {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 2rem;
+ color: var(--accent-color);
+ font-weight: bold;
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--primary-color);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(45deg, #2c3e50, #3498db);
+ color: white;
+}
+
+.chinese-characters {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ animation: fadeIn 2s ease-out;
+}
+
+.hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.practice {
+ padding: 5rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.reflection-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+}
+
+textarea {
+ width: 100%;
+ height: 150px;
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ margin-top: 1rem;
+ resize: vertical;
+}
+
+footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem 5%;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+ .chinese-characters {
+ font-size: 2.5rem;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+}