commit c2e5e6a1e232b47732bd3122c6c45e3b5ed9d163
Author: root <root@hub.scroll.pub>
Date: 2025-01-07 04:28:27 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0834017
--- /dev/null
+++ b/body.html
@@ -0,0 +1,61 @@
+<header>
+ <nav>
+ <div class="logo">T</div>
+ <button class="menu-toggle" aria-label="Toggle menu">
+ <span></span>
+ <span></span>
+ <span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <h1>Welcome to Test</h1>
+ <p class="subtitle">A beautiful demonstration of modern web design</p>
+ <div class="animated-shape"></div>
+ </section>
+
+ <section id="about" class="content">
+ <h2>About This Site</h2>
+ <p>This is a demonstration of clean, modern web development using pure HTML, CSS, and JavaScript.</p>
+ <div class="features">
+ <div class="feature">
+ <h3>Responsive</h3>
+ <p>Looks great on all devices</p>
+ </div>
+ <div class="feature">
+ <h3>Fast</h3>
+ <p>No frameworks or dependencies</p>
+ </div>
+ <div class="feature">
+ <h3>Accessible</h3>
+ <p>Built for everyone</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Get in Touch</h2>
+ <form id="contact-form">
+ <input type="text" placeholder="Name" required aria-label="Name">
+ <input type="email" placeholder="Email" required aria-label="Email">
+ <textarea placeholder="Message" required aria-label="Message"></textarea>
+ <button type="submit">Send Message</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <p>Built with modern web standards</p>
+ <nav>
+ <a href="#home">Home</a>
+ <a href="#about">About</a>
+ <a href="#contact">Contact</a>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9962300
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://neat-test.scroll.pub
+metaTags
+editButton /edit.html
+title Modern Test Page
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..e7004c3
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01CsTcB8Ussr6MJXYYkJpoWn",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Since this is a test website, I'll suggest a simple but memorable domain:\n\n---domain---\nneat-test.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://neat-test.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Modern Test Page\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">T</div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span>\n <span></span>\n <span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <h1>Welcome to Test</h1>\n <p class=\"subtitle\">A beautiful demonstration of modern web design</p>\n <div class=\"animated-shape\"></div>\n </section>\n\n <section id=\"about\" class=\"content\">\n <h2>About This Site</h2>\n <p>This is a demonstration of clean, modern web development using pure HTML, CSS, and JavaScript.</p>\n <div class=\"features\">\n <div class=\"feature\">\n <h3>Responsive</h3>\n <p>Looks great on all devices</p>\n </div>\n <div class=\"feature\">\n <h3>Fast</h3>\n <p>No frameworks or dependencies</p>\n </div>\n <div class=\"feature\">\n <h3>Accessible</h3>\n <p>Built for everyone</p>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Get in Touch</h2>\n <form id=\"contact-form\">\n <input type=\"text\" placeholder=\"Name\" required aria-label=\"Name\">\n <input type=\"email\" placeholder=\"Email\" required aria-label=\"Email\">\n <textarea placeholder=\"Message\" required aria-label=\"Message\"></textarea>\n <button type=\"submit\">Send Message</button>\n </form>\n </section>\n</main>\n\n<footer>\n <p>Built with modern web standards</p>\n <nav>\n <a href=\"#home\">Home</a>\n <a href=\"#about\">About</a>\n <a href=\"#contact\">Contact</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6bff;\n --secondary: #ff6b6b;\n --text: #2c3e50;\n --background: #ffffff;\n --accent: #34495e;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n color: var(--text);\n overflow-x: hidden;\n}\n\n/* Header & Navigation */\nheader {\n position: fixed;\n width: 100%;\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 max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary);\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n/* Hero Section */\n.hero {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n position: relative;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.subtitle {\n font-size: 1.5rem;\n color: var(--accent);\n margin-bottom: 2rem;\n}\n\n.animated-shape {\n position: absolute;\n width: 300px;\n height: 300px;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\n animation: morphing 15s ease-in-out infinite;\n opacity: 0.1;\n z-index: 0;\n}\n\n@keyframes morphing {\n 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }\n 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }\n 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }\n 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }\n 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }\n}\n\n/* Features Section */\n.content {\n padding: 5rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.features {\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: 1rem;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n}\n\n.feature:hover {\n transform: translateY(-5px);\n}\n\n/* Contact Form */\n.contact {\n padding: 5rem 2rem;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n}\n\nform {\n max-width: 600px;\n margin: 2rem auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput, textarea {\n padding: 1rem;\n border: none;\n border-radius: 0.5rem;\n background: white;\n font-size: 1rem;\n}\n\nbutton {\n padding: 1rem 2rem;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 0.5rem;\n cursor: pointer;\n font-size: 1rem;\n transition: background 0.3s;\n}\n\nbutton:hover {\n background: var(--secondary);\n}\n\n/* Footer */\nfooter {\n padding: 2rem;\n text-align: center;\n background: var(--accent);\n color: white;\n}\n\nfooter nav {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\nfooter a {\n color: white;\n text-decoration: none;\n}\n\n/* Mobile Menu */\n.menu-toggle {\n display: none;\n flex-direction: column;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n\n.menu-toggle span {\n width: 25px;\n height: 2px;\n background: var(--text);\n transition: 0.3s;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .menu-toggle {\n display: flex;\n }\n\n .nav-links {\n position: fixed;\n top: 70px;\n right: -100%;\n flex-direction: column;\n background: white;\n width: 100%;\n text-align: center;\n transition: 0.3s;\n padding: 2rem;\n }\n\n .nav-links.active {\n right: 0;\n }\n\n .hero h1 {\n font-size: 3rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n \n // Animate hamburger to X\n const spans = menuToggle.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 const target = document.querySelector(this.getAttribute('href'));\n \n if (target) {\n navLinks.classList.remove('active');\n target.scrollIntoView({\n behavior: 'smooth'\n });\n }\n });\n });\n\n // Form submission handler\n const form = document.getElementById('contact-form');\n if (form) {\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n // Add form submission logic here\n alert('Thank you for your message! This is a demo form.');\n form.reset();\n });\n }\n\n // Intersection Observer for fade-in 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('visible');\n }\n });\n }, observerOptions);\n\n // Observe all sections\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis creates a modern, beautiful single-page website with smooth animations, responsive design, and interactive elements. Key features include:\n\n1. Animated gradient hero section with morphing shape\n2. Smooth scroll navigation\n3. Mobile-responsive design with hamburger menu\n4. Beautiful hover effects and transitions\n5. Accessible form elements\n6. Intersection Observer for scroll animations\n7. Clean semantic HTML structure\n8. Modern CSS with variables and gradients\n9. Performance-optimized with no external dependencies\n\nThe design is both minimalist and engaging, with careful attention to typography, spacing, and visual hierarchy. The color scheme is professional yet vibrant, using CSS variables for easy customization."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 271,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3051
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2d3f8c6
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# neat-test.scroll.pub
+Website generated by Claude from prompt: test
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..7eaef7c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger to X
+ const spans = menuToggle.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();
+ const target = document.querySelector(this.getAttribute('href'));
+
+ if (target) {
+ navLinks.classList.remove('active');
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ }
+ });
+ });
+
+ // Form submission handler
+ const form = document.getElementById('contact-form');
+ if (form) {
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ // Add form submission logic here
+ alert('Thank you for your message! This is a demo form.');
+ form.reset();
+ });
+ }
+
+ // Intersection Observer for fade-in animations
+ const observerOptions = {
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, observerOptions);
+
+ // Observe all sections
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c539438
--- /dev/null
+++ b/style.css
@@ -0,0 +1,241 @@
+:root {
+ --primary: #2a6bff;
+ --secondary: #ff6b6b;
+ --text: #2c3e50;
+ --background: #ffffff;
+ --accent: #34495e;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ overflow-x: hidden;
+}
+
+/* Header & Navigation */
+header {
+ position: fixed;
+ width: 100%;
+ 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 {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 2rem;
+ font-weight: bold;
+ color: var(--primary);
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text);
+ font-weight: 500;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+/* Hero Section */
+.hero {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ position: relative;
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.hero h1 {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.subtitle {
+ font-size: 1.5rem;
+ color: var(--accent);
+ margin-bottom: 2rem;
+}
+
+.animated-shape {
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+ animation: morphing 15s ease-in-out infinite;
+ opacity: 0.1;
+ z-index: 0;
+}
+
+@keyframes morphing {
+ 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
+ 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
+ 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
+ 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
+ 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
+}
+
+/* Features Section */
+.content {
+ padding: 5rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.features {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+}
+
+.feature {
+ padding: 2rem;
+ background: white;
+ border-radius: 1rem;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.feature:hover {
+ transform: translateY(-5px);
+}
+
+/* Contact Form */
+.contact {
+ padding: 5rem 2rem;
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+form {
+ max-width: 600px;
+ margin: 2rem auto;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+input, textarea {
+ padding: 1rem;
+ border: none;
+ border-radius: 0.5rem;
+ background: white;
+ font-size: 1rem;
+}
+
+button {
+ padding: 1rem 2rem;
+ background: var(--primary);
+ color: white;
+ border: none;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background 0.3s;
+}
+
+button:hover {
+ background: var(--secondary);
+}
+
+/* Footer */
+footer {
+ padding: 2rem;
+ text-align: center;
+ background: var(--accent);
+ color: white;
+}
+
+footer nav {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-top: 1rem;
+}
+
+footer a {
+ color: white;
+ text-decoration: none;
+}
+
+/* Mobile Menu */
+.menu-toggle {
+ display: none;
+ flex-direction: column;
+ gap: 6px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.5rem;
+}
+
+.menu-toggle span {
+ width: 25px;
+ height: 2px;
+ background: var(--text);
+ transition: 0.3s;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: flex;
+ }
+
+ .nav-links {
+ position: fixed;
+ top: 70px;
+ right: -100%;
+ flex-direction: column;
+ background: white;
+ width: 100%;
+ text-align: center;
+ transition: 0.3s;
+ padding: 2rem;
+ }
+
+ .nav-links.active {
+ right: 0;
+ }
+
+ .hero h1 {
+ font-size: 3rem;
+ }
+}