commit d06021d949302db45ca122f1dafbb607d8684814
Author: root <root@hub.scroll.pub>
Date: 2025-01-03 04:08:26 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..b608051
--- /dev/null
+++ b/body.html
@@ -0,0 +1,70 @@
+<header>
+ <nav>
+ <div class="logo">Scroll</div>
+ <div class="nav-links">
+ <a href="#features">Features</a>
+ <a href="#docs">Docs</a>
+ <a href="#start">Get Started</a>
+ </div>
+ <button class="mobile-menu" aria-label="Menu">
+ <span></span><span></span><span></span>
+ </button>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Create Beautiful Web Content</h1>
+ <p>Build stunning websites with simple, elegant markup</p>
+ <a href="#start" class="cta">Start Publishing</a>
+ </section>
+
+ <section id="features" class="features">
+ <h2>Why Scroll?</h2>
+ <div class="feature-grid">
+ <div class="feature">
+ <h3>Simple Syntax</h3>
+ <p>Write content in an intuitive, minimal format</p>
+ </div>
+ <div class="feature">
+ <h3>Built-in SEO</h3>
+ <p>Optimized meta tags and semantic structure</p>
+ </div>
+ <div class="feature">
+ <h3>Fast & Light</h3>
+ <p>No bloat, no dependencies, pure speed</p>
+ </div>
+ <div class="feature">
+ <h3>Modern Stack</h3>
+ <p>Uses latest web standards and best practices</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="start" class="get-started">
+ <h2>Get Started</h2>
+ <div class="code-sample">
+ <pre><code>---index.scroll---
+buildHtml
+title My Site
+style.css
+body.html</code></pre>
+ </div>
+ <a href="#docs" class="secondary-cta">View Documentation</a>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-links">
+ <a href="/about">About</a>
+ <a href="/docs">Documentation</a>
+ <a href="/community">Community</a>
+ </div>
+ <div class="footer-social">
+ <a href="#" aria-label="GitHub">
+ <svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+ </a>
+ </div>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..02f1371
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://scroll.scroll.pub
+metaTags
+editButton /edit.html
+title Scroll Publishing - Create Beautiful Web Content
+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..8848b94
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_012b47KJSsv6oamWGUALPG41",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a clean, modern website for Scroll publishing.\n\n---domain---\nscroll.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://scroll.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Scroll Publishing - Create Beautiful Web Content\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Scroll</div>\n <div class=\"nav-links\">\n <a href=\"#features\">Features</a>\n <a href=\"#docs\">Docs</a>\n <a href=\"#start\">Get Started</a>\n </div>\n <button class=\"mobile-menu\" aria-label=\"Menu\">\n <span></span><span></span><span></span>\n </button>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Create Beautiful Web Content</h1>\n <p>Build stunning websites with simple, elegant markup</p>\n <a href=\"#start\" class=\"cta\">Start Publishing</a>\n </section>\n\n <section id=\"features\" class=\"features\">\n <h2>Why Scroll?</h2>\n <div class=\"feature-grid\">\n <div class=\"feature\">\n <h3>Simple Syntax</h3>\n <p>Write content in an intuitive, minimal format</p>\n </div>\n <div class=\"feature\">\n <h3>Built-in SEO</h3>\n <p>Optimized meta tags and semantic structure</p>\n </div>\n <div class=\"feature\">\n <h3>Fast & Light</h3>\n <p>No bloat, no dependencies, pure speed</p>\n </div>\n <div class=\"feature\">\n <h3>Modern Stack</h3>\n <p>Uses latest web standards and best practices</p>\n </div>\n </div>\n </section>\n\n <section id=\"start\" class=\"get-started\">\n <h2>Get Started</h2>\n <div class=\"code-sample\">\n <pre><code>---index.scroll---\nbuildHtml\ntitle My Site\nstyle.css\nbody.html</code></pre>\n </div>\n <a href=\"#docs\" class=\"secondary-cta\">View Documentation</a>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-links\">\n <a href=\"/about\">About</a>\n <a href=\"/docs\">Documentation</a>\n <a href=\"/community\">Community</a>\n </div>\n <div class=\"footer-social\">\n <a href=\"#\" aria-label=\"GitHub\">\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"/></svg>\n </a>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary: #2563eb;\n --primary-dark: #1d4ed8;\n --text: #1f2937;\n --text-light: #6b7280;\n --bg: #ffffff;\n --bg-alt: #f3f4f6;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n color: var(--text);\n line-height: 1.5;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem 2rem;\n background: var(--bg);\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary);\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n transition: color 0.2s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.mobile-menu {\n display: none;\n}\n\n.hero {\n text-align: center;\n padding: 6rem 2rem;\n background: linear-gradient(135deg, var(--bg-alt), var(--bg));\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(to right, var(--primary), var(--primary-dark));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.hero p {\n font-size: 1.25rem;\n color: var(--text-light);\n margin-bottom: 2rem;\n}\n\n.cta {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--primary);\n color: white;\n text-decoration: none;\n border-radius: 0.5rem;\n font-weight: 500;\n transition: background 0.2s;\n}\n\n.cta:hover {\n background: var(--primary-dark);\n}\n\n.features {\n padding: 6rem 2rem;\n background: var(--bg);\n}\n\n.features h2 {\n text-align: center;\n margin-bottom: 3rem;\n font-size: 2.5rem;\n}\n\n.feature-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.feature {\n padding: 2rem;\n background: var(--bg-alt);\n border-radius: 1rem;\n transition: transform 0.2s;\n}\n\n.feature:hover {\n transform: translateY(-5px);\n}\n\n.feature h3 {\n margin-bottom: 1rem;\n color: var(--primary);\n}\n\n.get-started {\n padding: 6rem 2rem;\n text-align: center;\n background: var(--bg-alt);\n}\n\n.code-sample {\n max-width: 600px;\n margin: 2rem auto;\n background: var(--text);\n padding: 2rem;\n border-radius: 0.5rem;\n overflow-x: auto;\n}\n\n.code-sample code {\n color: white;\n font-family: monospace;\n white-space: pre;\n}\n\n.secondary-cta {\n display: inline-block;\n padding: 0.75rem 1.5rem;\n border: 2px solid var(--primary);\n color: var(--primary);\n text-decoration: none;\n border-radius: 0.5rem;\n font-weight: 500;\n transition: all 0.2s;\n}\n\n.secondary-cta:hover {\n background: var(--primary);\n color: white;\n}\n\nfooter {\n background: var(--bg-alt);\n padding: 3rem 2rem;\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.footer-links a {\n margin-right: 2rem;\n color: var(--text-light);\n text-decoration: none;\n}\n\n.footer-social svg {\n opacity: 0.7;\n transition: opacity 0.2s;\n}\n\n.footer-social svg:hover {\n opacity: 1;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .mobile-menu {\n display: flex;\n flex-direction: column;\n gap: 0.3rem;\n background: none;\n border: none;\n cursor: pointer;\n }\n \n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--text);\n transition: 0.2s;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n \n .feature-grid {\n grid-template-columns: 1fr;\n }\n \n .footer-content {\n flex-direction: column;\n gap: 2rem;\n text-align: center;\n }\n \n .footer-links a {\n display: block;\n margin: 1rem 0;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n \n mobileMenu.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'block' ? 'none' : 'block';\n mobileMenu.classList.toggle('active');\n });\n\n // Smooth scroll for anchor 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 // Add animation class to features when they come into view\n const features = document.querySelectorAll('.feature');\n \n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px'\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 features.forEach(feature => {\n feature.style.opacity = '0';\n feature.style.transform = 'translateY(20px)';\n feature.style.transition = 'opacity 0.5s, transform 0.5s';\n observer.observe(feature);\n });\n});\n---end---\n\nThis implementation creates a modern, responsive website for Scroll publishing with:\n\n1. Clean semantic HTML5 structure\n2. Modern CSS with variables, flexbox, and grid\n3. Smooth animations and transitions\n4. Mobile-responsive design\n5. Accessibility features\n6. Performance optimizations\n7. Interactive features\n8. Gradient effects and modern design elements\n9. Intersection Observer for scroll animations\n10. Clean and professional layout\n\nThe domain \"scroll.scroll.pub\" is simple, memorable, and directly represents the purpose of the site. The design is minimal yet engaging, with careful attention to typography, spacing, and user experience across all devices."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 277,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3270
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..507f404
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# scroll.scroll.pub
+Website generated by Claude from prompt: https://hub.scroll.pub/
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8611260
--- /dev/null
+++ b/script.js
@@ -0,0 +1,43 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.style.display = navLinks.style.display === 'block' ? 'none' : 'block';
+ mobileMenu.classList.toggle('active');
+ });
+
+ // Smooth scroll for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add animation class to features when they come into view
+ const features = document.querySelectorAll('.feature');
+
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ features.forEach(feature => {
+ feature.style.opacity = '0';
+ feature.style.transform = 'translateY(20px)';
+ feature.style.transition = 'opacity 0.5s, transform 0.5s';
+ observer.observe(feature);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..46ef7da
--- /dev/null
+++ b/style.css
@@ -0,0 +1,228 @@
+:root {
+ --primary: #2563eb;
+ --primary-dark: #1d4ed8;
+ --text: #1f2937;
+ --text-light: #6b7280;
+ --bg: #ffffff;
+ --bg-alt: #f3f4f6;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ color: var(--text);
+ line-height: 1.5;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem 2rem;
+ background: var(--bg);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--primary);
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text);
+ font-weight: 500;
+ transition: color 0.2s;
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+.hero {
+ text-align: center;
+ padding: 6rem 2rem;
+ background: linear-gradient(135deg, var(--bg-alt), var(--bg));
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(to right, var(--primary), var(--primary-dark));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.hero p {
+ font-size: 1.25rem;
+ color: var(--text-light);
+ margin-bottom: 2rem;
+}
+
+.cta {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--primary);
+ color: white;
+ text-decoration: none;
+ border-radius: 0.5rem;
+ font-weight: 500;
+ transition: background 0.2s;
+}
+
+.cta:hover {
+ background: var(--primary-dark);
+}
+
+.features {
+ padding: 6rem 2rem;
+ background: var(--bg);
+}
+
+.features h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ font-size: 2.5rem;
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.feature {
+ padding: 2rem;
+ background: var(--bg-alt);
+ border-radius: 1rem;
+ transition: transform 0.2s;
+}
+
+.feature:hover {
+ transform: translateY(-5px);
+}
+
+.feature h3 {
+ margin-bottom: 1rem;
+ color: var(--primary);
+}
+
+.get-started {
+ padding: 6rem 2rem;
+ text-align: center;
+ background: var(--bg-alt);
+}
+
+.code-sample {
+ max-width: 600px;
+ margin: 2rem auto;
+ background: var(--text);
+ padding: 2rem;
+ border-radius: 0.5rem;
+ overflow-x: auto;
+}
+
+.code-sample code {
+ color: white;
+ font-family: monospace;
+ white-space: pre;
+}
+
+.secondary-cta {
+ display: inline-block;
+ padding: 0.75rem 1.5rem;
+ border: 2px solid var(--primary);
+ color: var(--primary);
+ text-decoration: none;
+ border-radius: 0.5rem;
+ font-weight: 500;
+ transition: all 0.2s;
+}
+
+.secondary-cta:hover {
+ background: var(--primary);
+ color: white;
+}
+
+footer {
+ background: var(--bg-alt);
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.footer-links a {
+ margin-right: 2rem;
+ color: var(--text-light);
+ text-decoration: none;
+}
+
+.footer-social svg {
+ opacity: 0.7;
+ transition: opacity 0.2s;
+}
+
+.footer-social svg:hover {
+ opacity: 1;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .mobile-menu {
+ display: flex;
+ flex-direction: column;
+ gap: 0.3rem;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--text);
+ transition: 0.2s;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .feature-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ gap: 2rem;
+ text-align: center;
+ }
+
+ .footer-links a {
+ display: block;
+ margin: 1rem 0;
+ }
+}
\ No newline at end of file