commit 6c992d8cd0c9c4ad68bd0a30cb6d4cd9450171d0
Author: root <root@hub.scroll.pub>
Date: 2025-01-03 06:00:50 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..4c2cc48
--- /dev/null
+++ b/body.html
@@ -0,0 +1,69 @@
+<header>
+ <nav>
+ <a href="#home" class="logo">The Art of Living</a>
+ <div class="nav-links">
+ <a href="#book">The Book</a>
+ <a href="#author">Author</a>
+ <a href="#preview">Preview</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="hero-content">
+ <h1>The Art of Living</h1>
+ <p>A transformative guide to mindful living in the modern world</p>
+ <button class="cta-button">Buy Now - $24.99</button>
+ </div>
+ <div class="book-preview">
+ <img src="book-cover.jpg" alt="The Art of Living book cover" class="book-image">
+ </div>
+ </section>
+
+ <section id="book" class="features">
+ <h2>What's Inside</h2>
+ <div class="feature-grid">
+ <div class="feature">
+ <h3>Practical Wisdom</h3>
+ <p>300 pages of actionable insights for daily life</p>
+ </div>
+ <div class="feature">
+ <h3>Expert Guidance</h3>
+ <p>Research-backed strategies for personal growth</p>
+ </div>
+ <div class="feature">
+ <h3>Real Stories</h3>
+ <p>Inspiring case studies from real people</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="author" class="author">
+ <div class="author-content">
+ <img src="author.jpg" alt="Sarah Mitchell" class="author-image">
+ <div class="author-info">
+ <h2>About the Author</h2>
+ <p>Sarah Mitchell is a renowned mindfulness expert with 15 years of experience helping people transform their lives.</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="preview" class="preview">
+ <h2>Read a Preview</h2>
+ <div class="preview-content">
+ <p class="preview-text">"Begin each day with intention, and watch as your life transforms..."</p>
+ <button class="preview-button">Download Sample Chapter</button>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-links">
+ <a href="#privacy">Privacy Policy</a>
+ <a href="#terms">Terms of Service</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..fec5db9
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://readnow.scroll.pub
+metaTags
+ description "Discover an inspiring journey through pages of wisdom. Get your copy of 'The Art of Living' today."
+ keywords "book, self-help, personal growth, inspiration, mindfulness"
+ author "Sarah Mitchell"
+editButton /edit.html
+title The Art of Living - A Guide to Mindful Living
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..65d4cb5
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01BqxuAdDkMnPjFDC39uZZM2",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a clean and professional book sales website:\n\n---domain---\nreadnow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://readnow.scroll.pub\nmetaTags\n description \"Discover an inspiring journey through pages of wisdom. Get your copy of 'The Art of Living' today.\"\n keywords \"book, self-help, personal growth, inspiration, mindfulness\"\n author \"Sarah Mitchell\"\neditButton /edit.html\ntitle The Art of Living - A Guide to Mindful Living\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <a href=\"#home\" class=\"logo\">The Art of Living</a>\n <div class=\"nav-links\">\n <a href=\"#book\">The Book</a>\n <a href=\"#author\">Author</a>\n <a href=\"#preview\">Preview</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"hero-content\">\n <h1>The Art of Living</h1>\n <p>A transformative guide to mindful living in the modern world</p>\n <button class=\"cta-button\">Buy Now - $24.99</button>\n </div>\n <div class=\"book-preview\">\n <img src=\"book-cover.jpg\" alt=\"The Art of Living book cover\" class=\"book-image\">\n </div>\n </section>\n\n <section id=\"book\" class=\"features\">\n <h2>What's Inside</h2>\n <div class=\"feature-grid\">\n <div class=\"feature\">\n <h3>Practical Wisdom</h3>\n <p>300 pages of actionable insights for daily life</p>\n </div>\n <div class=\"feature\">\n <h3>Expert Guidance</h3>\n <p>Research-backed strategies for personal growth</p>\n </div>\n <div class=\"feature\">\n <h3>Real Stories</h3>\n <p>Inspiring case studies from real people</p>\n </div>\n </div>\n </section>\n\n <section id=\"author\" class=\"author\">\n <div class=\"author-content\">\n <img src=\"author.jpg\" alt=\"Sarah Mitchell\" class=\"author-image\">\n <div class=\"author-info\">\n <h2>About the Author</h2>\n <p>Sarah Mitchell is a renowned mindfulness expert with 15 years of experience helping people transform their lives.</p>\n </div>\n </div>\n </section>\n\n <section id=\"preview\" class=\"preview\">\n <h2>Read a Preview</h2>\n <div class=\"preview-content\">\n <p class=\"preview-text\">\"Begin each day with intention, and watch as your life transforms...\"</p>\n <button class=\"preview-button\">Download Sample Chapter</button>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-links\">\n <a href=\"#privacy\">Privacy Policy</a>\n <a href=\"#terms\">Terms of Service</a>\n <a href=\"#contact\">Contact</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --text-color: #333;\n --light-bg: #f9f9f9;\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}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem 5%;\n background: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n z-index: 1000;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n text-decoration: none;\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text-color);\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.hero {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: 100vh;\n padding: 8rem 5%;\n background: linear-gradient(135deg, #f6f8fa 0%, #ffffff 100%);\n}\n\n.hero-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 2rem;\n}\n\nh1 {\n font-size: 3.5rem;\n color: var(--primary-color);\n line-height: 1.2;\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n background: var(--accent-color);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: var(--transition);\n width: fit-content;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);\n}\n\n.book-image {\n max-width: 100%;\n height: auto;\n box-shadow: 20px 20px 60px rgba(0,0,0,0.1);\n border-radius: 10px;\n transform: perspective(1000px) rotateY(-15deg);\n transition: var(--transition);\n}\n\n.book-image:hover {\n transform: perspective(1000px) rotateY(-5deg);\n}\n\n.features {\n padding: 5rem 5%;\n background: var(--light-bg);\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.feature {\n padding: 2rem;\n background: white;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n transition: var(--transition);\n}\n\n.feature:hover {\n transform: translateY(-5px);\n}\n\n.author {\n padding: 5rem 5%;\n}\n\n.author-content {\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 3rem;\n align-items: center;\n}\n\n.author-image {\n width: 100%;\n border-radius: 50%;\n}\n\n.preview {\n padding: 5rem 5%;\n background: var(--primary-color);\n color: white;\n text-align: center;\n}\n\n.preview-text {\n font-size: 1.5rem;\n font-style: italic;\n margin: 2rem 0;\n}\n\n.preview-button {\n padding: 1rem 2rem;\n background: white;\n color: var(--primary-color);\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: var(--transition);\n}\n\nfooter {\n padding: 2rem 5%;\n background: var(--light-bg);\n text-align: center;\n}\n\n.footer-links a {\n margin: 0 1rem;\n color: var(--text-color);\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .hero {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .hero-content {\n align-items: center;\n }\n\n .book-image {\n margin-top: 2rem;\n }\n\n .author-content {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .author-image {\n max-width: 200px;\n margin: 0 auto;\n }\n\n .nav-links {\n display: none;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling 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 // Buy button functionality\n const buyButton = document.querySelector('.cta-button');\n buyButton.addEventListener('click', () => {\n // Simple modal or alert for demo purposes\n alert('Thank you for your interest! This would redirect to a payment processor in a real implementation.');\n });\n\n // Preview button functionality\n const previewButton = document.querySelector('.preview-button');\n previewButton.addEventListener('click', () => {\n // This would typically trigger a PDF download or preview\n alert('Sample chapter download would start in a real implementation.');\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.classList.add('fade-in');\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis design features:\n- Clean, modern aesthetic with smooth animations\n- Responsive layout that works on all devices\n- Engaging hero section with 3D book preview\n- Clear call-to-action buttons\n- Feature highlights section\n- Author introduction\n- Book preview section\n- Professional navigation and footer\n- Accessibility-friendly markup\n- SEO-optimized structure\n- Smooth scrolling behavior\n- Intersection Observer for scroll animations\n- CSS variables for easy theming\n- Beautiful typography and spacing\n- Subtle shadows and hover effects\n\nNote: The images (book-cover.jpg and author.jpg) would need to be added to the project directory. The current implementation assumes their existence."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 275,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2716
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..c15538b
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# readnow.scroll.pub
+Website generated by Claude from prompt: simple for selling a book
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c951147
--- /dev/null
+++ b/script.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Buy button functionality
+ const buyButton = document.querySelector('.cta-button');
+ buyButton.addEventListener('click', () => {
+ // Simple modal or alert for demo purposes
+ alert('Thank you for your interest! This would redirect to a payment processor in a real implementation.');
+ });
+
+ // Preview button functionality
+ const previewButton = document.querySelector('.preview-button');
+ previewButton.addEventListener('click', () => {
+ // This would typically trigger a PDF download or preview
+ alert('Sample chapter download would start in a real implementation.');
+ });
+
+ // Add scroll-based animations
+ const observerOptions = {
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('fade-in');
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2761037
--- /dev/null
+++ b/style.css
@@ -0,0 +1,204 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --text-color: #333;
+ --light-bg: #f9f9f9;
+ --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);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem 5%;
+ background: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text-color);
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.hero {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ min-height: 100vh;
+ padding: 8rem 5%;
+ background: linear-gradient(135deg, #f6f8fa 0%, #ffffff 100%);
+}
+
+.hero-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 2rem;
+}
+
+h1 {
+ font-size: 3.5rem;
+ color: var(--primary-color);
+ line-height: 1.2;
+}
+
+.cta-button {
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: var(--transition);
+ width: fit-content;
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
+}
+
+.book-image {
+ max-width: 100%;
+ height: auto;
+ box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
+ border-radius: 10px;
+ transform: perspective(1000px) rotateY(-15deg);
+ transition: var(--transition);
+}
+
+.book-image:hover {
+ transform: perspective(1000px) rotateY(-5deg);
+}
+
+.features {
+ padding: 5rem 5%;
+ background: var(--light-bg);
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+}
+
+.feature {
+ padding: 2rem;
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ transition: var(--transition);
+}
+
+.feature:hover {
+ transform: translateY(-5px);
+}
+
+.author {
+ padding: 5rem 5%;
+}
+
+.author-content {
+ display: grid;
+ grid-template-columns: 300px 1fr;
+ gap: 3rem;
+ align-items: center;
+}
+
+.author-image {
+ width: 100%;
+ border-radius: 50%;
+}
+
+.preview {
+ padding: 5rem 5%;
+ background: var(--primary-color);
+ color: white;
+ text-align: center;
+}
+
+.preview-text {
+ font-size: 1.5rem;
+ font-style: italic;
+ margin: 2rem 0;
+}
+
+.preview-button {
+ padding: 1rem 2rem;
+ background: white;
+ color: var(--primary-color);
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+footer {
+ padding: 2rem 5%;
+ background: var(--light-bg);
+ text-align: center;
+}
+
+.footer-links a {
+ margin: 0 1rem;
+ color: var(--text-color);
+ text-decoration: none;
+}
+
+@media (max-width: 768px) {
+ .hero {
+ grid-template-columns: 1fr;
+ text-align: center;
+ }
+
+ .hero-content {
+ align-items: center;
+ }
+
+ .book-image {
+ margin-top: 2rem;
+ }
+
+ .author-content {
+ grid-template-columns: 1fr;
+ text-align: center;
+ }
+
+ .author-image {
+ max-width: 200px;
+ margin: 0 auto;
+ }
+
+ .nav-links {
+ display: none;
+ }
+}