commit 56f045e0bb93f82fc2acf7139fde4132c4d95ffc
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 13:03:05 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..bbfc36b
--- /dev/null
+++ b/body.html
@@ -0,0 +1,54 @@
+<header>
+ <nav>
+ <div class="logo">Purpose</div>
+ <div class="nav-links">
+ <a href="#discover">Discover</a>
+ <a href="#reflect">Reflect</a>
+ <a href="#guidance">Guidance</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section id="hero">
+ <h1>Discover Your Life's Purpose</h1>
+ <p>Begin your journey to finding deeper meaning</p>
+ <button id="startJourney">Start Your Journey</button>
+ </section>
+
+ <section id="discover" class="content-section">
+ <h2>Self-Discovery Questions</h2>
+ <div class="question-container">
+ <div class="question-card" tabindex="0">
+ <h3>What brings you joy?</h3>
+ <textarea placeholder="Reflect and write your thoughts..."></textarea>
+ </div>
+ <div class="question-card" tabindex="0">
+ <h3>What impact do you want to make?</h3>
+ <textarea placeholder="Reflect and write your thoughts..."></textarea>
+ </div>
+ <div class="question-card" tabindex="0">
+ <h3>What are your core values?</h3>
+ <textarea placeholder="Reflect and write your thoughts..."></textarea>
+ </div>
+ </div>
+ </section>
+
+ <section id="reflect" class="content-section">
+ <h2>Your Life Path</h2>
+ <div class="path-visualizer">
+ <div class="path-node" data-step="1">Past</div>
+ <div class="path-node" data-step="2">Present</div>
+ <div class="path-node" data-step="3">Future</div>
+ </div>
+ </section>
+
+ <section id="guidance" class="content-section">
+ <h2>Guidance & Wisdom</h2>
+ <div id="wisdomContainer"></div>
+ </section>
+</main>
+
+<footer>
+ <p>Created with purpose and care</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6e2f5cd
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://purpose.scroll.pub
+metaTags
+editButton /edit.html
+title Find Your Life's Purpose | Journey to Meaning
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..e51df73
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01UUL2Z1cYV77ZEEuJcteTRh",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a website for finding life's meaning. For the domain, I suggest:\n\n---domain---\npurpose.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://purpose.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Find Your Life's Purpose | Journey to Meaning\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Purpose</div>\n <div class=\"nav-links\">\n <a href=\"#discover\">Discover</a>\n <a href=\"#reflect\">Reflect</a>\n <a href=\"#guidance\">Guidance</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>Discover Your Life's Purpose</h1>\n <p>Begin your journey to finding deeper meaning</p>\n <button id=\"startJourney\">Start Your Journey</button>\n </section>\n\n <section id=\"discover\" class=\"content-section\">\n <h2>Self-Discovery Questions</h2>\n <div class=\"question-container\">\n <div class=\"question-card\" tabindex=\"0\">\n <h3>What brings you joy?</h3>\n <textarea placeholder=\"Reflect and write your thoughts...\"></textarea>\n </div>\n <div class=\"question-card\" tabindex=\"0\">\n <h3>What impact do you want to make?</h3>\n <textarea placeholder=\"Reflect and write your thoughts...\"></textarea>\n </div>\n <div class=\"question-card\" tabindex=\"0\">\n <h3>What are your core values?</h3>\n <textarea placeholder=\"Reflect and write your thoughts...\"></textarea>\n </div>\n </div>\n </section>\n\n <section id=\"reflect\" class=\"content-section\">\n <h2>Your Life Path</h2>\n <div class=\"path-visualizer\">\n <div class=\"path-node\" data-step=\"1\">Past</div>\n <div class=\"path-node\" data-step=\"2\">Present</div>\n <div class=\"path-node\" data-step=\"3\">Future</div>\n </div>\n </section>\n\n <section id=\"guidance\" class=\"content-section\">\n <h2>Guidance & Wisdom</h2>\n <div id=\"wisdomContainer\"></div>\n </section>\n</main>\n\n<footer>\n <p>Created with purpose and care</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #3a86ff;\n --secondary-color: #8338ec;\n --accent-color: #ff006e;\n --background-color: #f8f9fa;\n --text-color: #2b2d42;\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(--background-color);\n}\n\nheader {\n position: fixed;\n width: 100%;\n top: 0;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);\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: 1.5rem;\n font-weight: bold;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-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(135deg, rgba(58, 134, 255, 0.1), rgba(131, 56, 236, 0.1));\n}\n\nh1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n#startJourney {\n padding: 1rem 2rem;\n font-size: 1.2rem;\n border: none;\n border-radius: 50px;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n color: white;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n#startJourney:hover {\n transform: translateY(-2px);\n}\n\n.content-section {\n padding: 5rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.question-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.question-card {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.question-card:hover {\n transform: translateY(-5px);\n}\n\ntextarea {\n width: 100%;\n min-height: 150px;\n margin-top: 1rem;\n padding: 1rem;\n border: 1px solid #ddd;\n border-radius: 8px;\n resize: vertical;\n}\n\n.path-visualizer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 3rem;\n position: relative;\n}\n\n.path-node {\n background: white;\n padding: 1rem 2rem;\n border-radius: 50px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 1;\n}\n\n.path-node::before {\n content: '';\n position: absolute;\n top: 50%;\n left: -100%;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n}\n\n.path-node:first-child::before {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: white;\n margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .path-visualizer {\n flex-direction: column;\n gap: 2rem;\n }\n \n .path-node::before {\n left: 50%;\n top: -100%;\n width: 2px;\n height: 100%;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scroll for navigation links\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 // Start Journey button animation\n const startButton = document.getElementById('startJourney');\n startButton.addEventListener('click', () => {\n document.querySelector('#discover').scrollIntoView({\n behavior: 'smooth'\n });\n });\n\n // Wisdom quotes rotation\n const wisdomContainer = document.getElementById('wisdomContainer');\n const wisdomQuotes = [\n \"The meaning of life is to find your gift. The purpose of life is to give it away.\",\n \"Life is not about finding yourself. Life is about creating yourself.\",\n \"The purpose of life is a life of purpose.\",\n \"The two most important days in your life are the day you are born and the day you find out why.\"\n ];\n\n let currentQuote = 0;\n \n function rotateQuotes() {\n wisdomContainer.style.opacity = '0';\n setTimeout(() => {\n wisdomContainer.textContent = wisdomQuotes[currentQuote];\n wisdomContainer.style.opacity = '1';\n currentQuote = (currentQuote + 1) % wisdomQuotes.length;\n }, 500);\n }\n\n rotateQuotes();\n setInterval(rotateQuotes, 5000);\n\n // Save textarea content to localStorage\n document.querySelectorAll('textarea').forEach((textarea, index) => {\n const savedContent = localStorage.getItem(`reflection-${index}`);\n if (savedContent) {\n textarea.value = savedContent;\n }\n\n textarea.addEventListener('input', () => {\n localStorage.setItem(`reflection-${index}`, textarea.value);\n });\n });\n});\n\n---end---\n\nThis website features:\n1. A beautiful gradient-based design system\n2. Smooth scrolling navigation\n3. Interactive question cards for self-reflection\n4. A visual path representation\n5. Rotating wisdom quotes\n6. Local storage for saving user reflections\n7. Fully responsive design\n8. Accessibility features\n9. Modern animations and transitions\n10. Clean, semantic HTML structure\n\nThe design uses a combination of subtle gradients, shadows, and animations to create an engaging but professional experience while maintaining simplicity and usability."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2641
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..a967ad8
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# purpose.scroll.pub
+Website generated by Claude from prompt: helps you to find your meaning of life
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..fc57fff
--- /dev/null
+++ b/script.js
@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Start Journey button animation
+ const startButton = document.getElementById('startJourney');
+ startButton.addEventListener('click', () => {
+ document.querySelector('#discover').scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+
+ // Wisdom quotes rotation
+ const wisdomContainer = document.getElementById('wisdomContainer');
+ const wisdomQuotes = [
+ "The meaning of life is to find your gift. The purpose of life is to give it away.",
+ "Life is not about finding yourself. Life is about creating yourself.",
+ "The purpose of life is a life of purpose.",
+ "The two most important days in your life are the day you are born and the day you find out why."
+ ];
+
+ let currentQuote = 0;
+
+ function rotateQuotes() {
+ wisdomContainer.style.opacity = '0';
+ setTimeout(() => {
+ wisdomContainer.textContent = wisdomQuotes[currentQuote];
+ wisdomContainer.style.opacity = '1';
+ currentQuote = (currentQuote + 1) % wisdomQuotes.length;
+ }, 500);
+ }
+
+ rotateQuotes();
+ setInterval(rotateQuotes, 5000);
+
+ // Save textarea content to localStorage
+ document.querySelectorAll('textarea').forEach((textarea, index) => {
+ const savedContent = localStorage.getItem(`reflection-${index}`);
+ if (savedContent) {
+ textarea.value = savedContent;
+ }
+
+ textarea.addEventListener('input', () => {
+ localStorage.setItem(`reflection-${index}`, textarea.value);
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e9c870c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,188 @@
+:root {
+ --primary-color: #3a86ff;
+ --secondary-color: #8338ec;
+ --accent-color: #ff006e;
+ --background-color: #f8f9fa;
+ --text-color: #2b2d42;
+}
+
+* {
+ 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(--background-color);
+}
+
+header {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+#hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(135deg, rgba(58, 134, 255, 0.1), rgba(131, 56, 236, 0.1));
+}
+
+h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+#startJourney {
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ border: none;
+ border-radius: 50px;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+#startJourney:hover {
+ transform: translateY(-2px);
+}
+
+.content-section {
+ padding: 5rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.question-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.question-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.question-card:hover {
+ transform: translateY(-5px);
+}
+
+textarea {
+ width: 100%;
+ min-height: 150px;
+ margin-top: 1rem;
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ resize: vertical;
+}
+
+.path-visualizer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 3rem;
+ position: relative;
+}
+
+.path-node {
+ background: white;
+ padding: 1rem 2rem;
+ border-radius: 50px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ position: relative;
+ z-index: 1;
+}
+
+.path-node::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: -100%;
+ width: 100%;
+ height: 2px;
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+}
+
+.path-node:first-child::before {
+ display: none;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: white;
+ margin-top: 4rem;
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .path-visualizer {
+ flex-direction: column;
+ gap: 2rem;
+ }
+
+ .path-node::before {
+ left: 50%;
+ top: -100%;
+ width: 2px;
+ height: 100%;
+ }
+}