commit 42be429166637a616d171912e44f4281ac80afcd
Author: root <root@hub.scroll.pub>
Date: 2025-01-03 17:11:36 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d5f1bdb
--- /dev/null
+++ b/body.html
@@ -0,0 +1,97 @@
+<header>
+ <nav class="main-nav">
+ <div class="logo">Flourish</div>
+ <button class="mobile-menu-btn" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#mind">Mind</a></li>
+ <li><a href="#spirit">Spirit</a></li>
+ <li><a href="#body">Body</a></li>
+ <li><a href="#self">Self</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Embrace Your Journey</h1>
+ <p>Nurture your mind, body, and spirit</p>
+ </section>
+
+ <section id="mind" class="category">
+ <h2>Mind</h2>
+ <div class="card-grid">
+ <article class="card">
+ <h3>Reading List</h3>
+ <p>Curated books for intellectual growth</p>
+ </article>
+ <article class="card">
+ <h3>Learning Resources</h3>
+ <p>Online courses and educational content</p>
+ </article>
+ <article class="card">
+ <h3>Critical Thinking</h3>
+ <p>Exercises to sharpen your mind</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="spirit" class="category">
+ <h2>Spirit</h2>
+ <div class="card-grid">
+ <article class="card">
+ <h3>Meditation</h3>
+ <p>Guided practices for inner peace</p>
+ </article>
+ <article class="card">
+ <h3>Journaling</h3>
+ <p>Prompts for self-reflection</p>
+ </article>
+ <article class="card">
+ <h3>Mindfulness</h3>
+ <p>Daily spiritual practices</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="body" class="category">
+ <h2>Body</h2>
+ <div class="card-grid">
+ <article class="card">
+ <h3>Wellness</h3>
+ <p>Holistic health guidelines</p>
+ </article>
+ <article class="card">
+ <h3>Movement</h3>
+ <p>Exercise routines and yoga</p>
+ </article>
+ <article class="card">
+ <h3>Nutrition</h3>
+ <p>Balanced meal planning</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="self" class="category">
+ <h2>Self</h2>
+ <div class="card-grid">
+ <article class="card">
+ <h3>Style</h3>
+ <p>Personal aesthetic development</p>
+ </article>
+ <article class="card">
+ <h3>Growth</h3>
+ <p>Personal development tools</p>
+ </article>
+ <article class="card">
+ <h3>Community</h3>
+ <p>Connect with like-minded women</p>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Flourish - Nurturing the modern woman's journey</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..f62ad74
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://flourish.scroll.pub
+metaTags
+editButton /edit.html
+title Flourish - Holistic Self-Development for Women
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..01fca04
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01HqhN4KkCPaD4fZzWKvnYTW",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website called \"Flourish\" - focused on holistic female self-development.\n\n---domain---\nflourish.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://flourish.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Flourish - Holistic Self-Development for Women\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">Flourish</div>\n <button class=\"mobile-menu-btn\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#mind\">Mind</a></li>\n <li><a href=\"#spirit\">Spirit</a></li>\n <li><a href=\"#body\">Body</a></li>\n <li><a href=\"#self\">Self</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Embrace Your Journey</h1>\n <p>Nurture your mind, body, and spirit</p>\n </section>\n\n <section id=\"mind\" class=\"category\">\n <h2>Mind</h2>\n <div class=\"card-grid\">\n <article class=\"card\">\n <h3>Reading List</h3>\n <p>Curated books for intellectual growth</p>\n </article>\n <article class=\"card\">\n <h3>Learning Resources</h3>\n <p>Online courses and educational content</p>\n </article>\n <article class=\"card\">\n <h3>Critical Thinking</h3>\n <p>Exercises to sharpen your mind</p>\n </article>\n </div>\n </section>\n\n <section id=\"spirit\" class=\"category\">\n <h2>Spirit</h2>\n <div class=\"card-grid\">\n <article class=\"card\">\n <h3>Meditation</h3>\n <p>Guided practices for inner peace</p>\n </article>\n <article class=\"card\">\n <h3>Journaling</h3>\n <p>Prompts for self-reflection</p>\n </article>\n <article class=\"card\">\n <h3>Mindfulness</h3>\n <p>Daily spiritual practices</p>\n </article>\n </div>\n </section>\n\n <section id=\"body\" class=\"category\">\n <h2>Body</h2>\n <div class=\"card-grid\">\n <article class=\"card\">\n <h3>Wellness</h3>\n <p>Holistic health guidelines</p>\n </article>\n <article class=\"card\">\n <h3>Movement</h3>\n <p>Exercise routines and yoga</p>\n </article>\n <article class=\"card\">\n <h3>Nutrition</h3>\n <p>Balanced meal planning</p>\n </article>\n </div>\n </section>\n\n <section id=\"self\" class=\"category\">\n <h2>Self</h2>\n <div class=\"card-grid\">\n <article class=\"card\">\n <h3>Style</h3>\n <p>Personal aesthetic development</p>\n </article>\n <article class=\"card\">\n <h3>Growth</h3>\n <p>Personal development tools</p>\n </article>\n <article class=\"card\">\n <h3>Community</h3>\n <p>Connect with like-minded women</p>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Flourish - Nurturing the modern woman's journey</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #f8d7e8;\n --secondary: #a8516e;\n --accent: #5e2b3e;\n --light: #fff5f8;\n --dark: #2c1720;\n --shadow: rgba(0, 0, 0, 0.1);\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(--dark);\n background: var(--light);\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background: white;\n box-shadow: 0 2px 10px var(--shadow);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: bold;\n color: var(--secondary);\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--accent);\n font-weight: 500;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--secondary);\n}\n\n.mobile-menu-btn {\n display: none;\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, var(--primary), white);\n padding: 2rem;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n color: var(--accent);\n margin-bottom: 1rem;\n}\n\n.hero p {\n font-size: 1.5rem;\n color: var(--secondary);\n}\n\n.category {\n padding: 5rem 5%;\n}\n\n.category h2 {\n text-align: center;\n color: var(--accent);\n margin-bottom: 3rem;\n font-size: 2.5rem;\n}\n\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 5px 15px var(--shadow);\n transition: transform 0.3s;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.card h3 {\n color: var(--secondary);\n margin-bottom: 1rem;\n}\n\nfooter {\n background: var(--accent);\n color: white;\n text-align: center;\n padding: 2rem;\n}\n\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu-btn span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--secondary);\n transition: 0.3s;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n flex-direction: column;\n padding: 1rem;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n\n .hero p {\n font-size: 1.2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const mobileMenuBtn = document.querySelector('.mobile-menu-btn');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenuBtn.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n \n const spans = mobileMenuBtn.querySelectorAll('span');\n spans.forEach(span => span.classList.toggle('active'));\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n navLinks.classList.remove('active');\n\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Intersection Observer for fade-in animations\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 });\n\n document.querySelectorAll('.card').forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.6s, transform 0.6s';\n observer.observe(card);\n });\n});\n\n---end---\n\nThis website features:\n- Clean, semantic HTML5 structure\n- Beautiful gradient backgrounds and subtle animations\n- Mobile-responsive design with hamburger menu\n- Smooth scrolling navigation\n- Intersection Observer for scroll animations\n- Card-based layout for content organization\n- Feminine color palette with soft pinks and burgundy\n- Accessible navigation and contrast\n- Modern CSS with variables and flexbox/grid\n- Performance optimized with minimal JavaScript\n- SEO-friendly structure and meta tags\n\nThe design is elegant and feminine while maintaining professionalism and usability. The content is organized into four main categories (Mind, Spirit, Body, Self) for easy navigation and comprehension."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 298,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2584
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..19b44be
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# flourish.scroll.pub
+Website generated by Claude from prompt: a website containing everything that a young woman needs for intellectual, spiritual physical and self-improvement, also beautify the website with feminine aesthetics
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8f7fd7f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,40 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenuBtn.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+
+ const spans = mobileMenuBtn.querySelectorAll('span');
+ spans.forEach(span => span.classList.toggle('active'));
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ navLinks.classList.remove('active');
+
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Intersection Observer for fade-in animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ });
+
+ document.querySelectorAll('.card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.6s, transform 0.6s';
+ observer.observe(card);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..74e27d7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,169 @@
+:root {
+ --primary: #f8d7e8;
+ --secondary: #a8516e;
+ --accent: #5e2b3e;
+ --light: #fff5f8;
+ --dark: #2c1720;
+ --shadow: rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+ background: var(--light);
+}
+
+.main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background: white;
+ box-shadow: 0 2px 10px var(--shadow);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+.logo {
+ font-size: 1.8rem;
+ font-weight: bold;
+ color: var(--secondary);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--accent);
+ font-weight: 500;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--secondary);
+}
+
+.mobile-menu-btn {
+ display: none;
+}
+
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(135deg, var(--primary), white);
+ padding: 2rem;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ color: var(--accent);
+ margin-bottom: 1rem;
+}
+
+.hero p {
+ font-size: 1.5rem;
+ color: var(--secondary);
+}
+
+.category {
+ padding: 5rem 5%;
+}
+
+.category h2 {
+ text-align: center;
+ color: var(--accent);
+ margin-bottom: 3rem;
+ font-size: 2.5rem;
+}
+
+.card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 5px 15px var(--shadow);
+ transition: transform 0.3s;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+.card h3 {
+ color: var(--secondary);
+ margin-bottom: 1rem;
+}
+
+footer {
+ background: var(--accent);
+ color: white;
+ text-align: center;
+ padding: 2rem;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu-btn {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu-btn span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--secondary);
+ transition: 0.3s;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero p {
+ font-size: 1.2rem;
+ }
+}