commit 19878b13ac6058bfd9832fd8166b8167f91296b5
Author: root <root@hub.scroll.pub>
Date: 2025-01-07 06:34:05 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8076f0b
--- /dev/null
+++ b/body.html
@@ -0,0 +1,96 @@
+<header>
+ <nav class="navbar">
+ <div class="logo">Clean Slate</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#services">Services</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#pricing">Pricing</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Professional Garbage Removal Services</h1>
+ <p>Fast, reliable, and eco-friendly waste management solutions</p>
+ <button class="cta-button">Get a Quote</button>
+ </div>
+ </section>
+
+ <section id="services" class="services">
+ <h2>Our Services</h2>
+ <div class="service-grid">
+ <div class="service-card">
+ <div class="icon">🏠</div>
+ <h3>Residential</h3>
+ <p>Regular household waste collection and disposal services</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">🏢</div>
+ <h3>Commercial</h3>
+ <p>Business waste management and recycling solutions</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">🏗️</div>
+ <h3>Construction</h3>
+ <p>Building site debris removal and disposal</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">♻️</div>
+ <h3>Recycling</h3>
+ <p>Eco-friendly sorting and recycling services</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="about" class="about">
+ <h2>Why Choose Us</h2>
+ <div class="features">
+ <div class="feature">
+ <h3>Reliable Service</h3>
+ <p>On-time pickup and professional handling of your waste</p>
+ </div>
+ <div class="feature">
+ <h3>Eco-Friendly</h3>
+ <p>Committed to sustainable waste management practices</p>
+ </div>
+ <div class="feature">
+ <h3>Competitive Pricing</h3>
+ <p>Transparent pricing with no hidden fees</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Contact Us</h2>
+ <form id="contact-form" class="contact-form">
+ <input type="text" placeholder="Name" required>
+ <input type="email" placeholder="Email" required>
+ <input type="tel" placeholder="Phone">
+ <textarea placeholder="Message" required></textarea>
+ <button type="submit">Send Message</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Contact Info</h4>
+ <p>123 Waste Street</p>
+ <p>Cityville, ST 12345</p>
+ <p>Phone: (555) 123-4567</p>
+ </div>
+ <div class="footer-section">
+ <h4>Hours</h4>
+ <p>Monday - Friday: 7am - 6pm</p>
+ <p>Saturday: 8am - 2pm</p>
+ <p>Sunday: Closed</p>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..47aa96b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://cleanslate.scroll.pub
+metaTags
+description Professional garbage removal services for residential and commercial properties. Fast, reliable, and eco-friendly waste management solutions.
+keywords garbage removal, waste management, junk removal, trash pickup, debris removal, residential waste, commercial waste
+author Clean Slate Waste Management
+editButton /edit.html
+title Clean Slate - Professional Garbage Removal Services
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..043cab5
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Q9hrtYEXqrTs9JEQq5zW2L",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a website for a garbage removal company. For the domain, I suggest:\n\n---domain---\ncleanslate.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://cleanslate.scroll.pub\nmetaTags\ndescription Professional garbage removal services for residential and commercial properties. Fast, reliable, and eco-friendly waste management solutions.\nkeywords garbage removal, waste management, junk removal, trash pickup, debris removal, residential waste, commercial waste\nauthor Clean Slate Waste Management\neditButton /edit.html\ntitle Clean Slate - Professional Garbage Removal Services\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"navbar\">\n <div class=\"logo\">Clean Slate</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#services\">Services</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#pricing\">Pricing</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Professional Garbage Removal Services</h1>\n <p>Fast, reliable, and eco-friendly waste management solutions</p>\n <button class=\"cta-button\">Get a Quote</button>\n </div>\n </section>\n\n <section id=\"services\" class=\"services\">\n <h2>Our Services</h2>\n <div class=\"service-grid\">\n <div class=\"service-card\">\n <div class=\"icon\">🏠</div>\n <h3>Residential</h3>\n <p>Regular household waste collection and disposal services</p>\n </div>\n <div class=\"service-card\">\n <div class=\"icon\">🏢</div>\n <h3>Commercial</h3>\n <p>Business waste management and recycling solutions</p>\n </div>\n <div class=\"service-card\">\n <div class=\"icon\">🏗️</div>\n <h3>Construction</h3>\n <p>Building site debris removal and disposal</p>\n </div>\n <div class=\"service-card\">\n <div class=\"icon\">♻️</div>\n <h3>Recycling</h3>\n <p>Eco-friendly sorting and recycling services</p>\n </div>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <h2>Why Choose Us</h2>\n <div class=\"features\">\n <div class=\"feature\">\n <h3>Reliable Service</h3>\n <p>On-time pickup and professional handling of your waste</p>\n </div>\n <div class=\"feature\">\n <h3>Eco-Friendly</h3>\n <p>Committed to sustainable waste management practices</p>\n </div>\n <div class=\"feature\">\n <h3>Competitive Pricing</h3>\n <p>Transparent pricing with no hidden fees</p>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Contact Us</h2>\n <form id=\"contact-form\" class=\"contact-form\">\n <input type=\"text\" placeholder=\"Name\" required>\n <input type=\"email\" placeholder=\"Email\" required>\n <input type=\"tel\" placeholder=\"Phone\">\n <textarea placeholder=\"Message\" required></textarea>\n <button type=\"submit\">Send Message</button>\n </form>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Contact Info</h4>\n <p>123 Waste Street</p>\n <p>Cityville, ST 12345</p>\n <p>Phone: (555) 123-4567</p>\n </div>\n <div class=\"footer-section\">\n <h4>Hours</h4>\n <p>Monday - Friday: 7am - 6pm</p>\n <p>Saturday: 8am - 2pm</p>\n <p>Sunday: Closed</p>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2ecc71;\n --secondary-color: #27ae60;\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', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n.navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background: white;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\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(--text-color);\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\n.hero {\n height: 100vh;\n background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),\n url('images/hero-bg.jpg');\n background-size: cover;\n background-position: center;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: white;\n}\n\n.hero-content {\n max-width: 800px;\n padding: 2rem;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n background: var(--secondary-color);\n transform: translateY(-2px);\n}\n\n.services, .about {\n padding: 5rem 5%;\n background: var(--light-bg);\n}\n\n.service-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.service-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.service-card:hover {\n transform: translateY(-5px);\n}\n\n.icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.contact {\n padding: 5rem 5%;\n}\n\n.contact-form {\n max-width: 600px;\n margin: 2rem auto;\n display: grid;\n gap: 1rem;\n}\n\n.contact-form input,\n.contact-form textarea {\n padding: 1rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\n.contact-form textarea {\n height: 150px;\n}\n\nfooter {\n background: #333;\n color: white;\n padding: 3rem 5%;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\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-color);\n margin: 5px 0;\n transition: var(--transition);\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\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', function() {\n navLinks.classList.toggle('active');\n \n // Animate hamburger to X\n const spans = this.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 target.scrollIntoView({\n behavior: 'smooth'\n });\n \n // Close mobile menu if open\n navLinks.classList.remove('active');\n });\n });\n\n // Form submission\n const contactForm = document.getElementById('contact-form');\n contactForm.addEventListener('submit', function(e) {\n e.preventDefault();\n \n // Add animation to button\n const submitButton = this.querySelector('button[type=\"submit\"]');\n submitButton.textContent = 'Sending...';\n submitButton.disabled = true;\n \n // Simulate form submission\n setTimeout(() => {\n submitButton.textContent = 'Message Sent!';\n this.reset();\n \n setTimeout(() => {\n submitButton.textContent = 'Send Message';\n submitButton.disabled = false;\n }, 2000);\n }, 1500);\n });\n\n // Scroll animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate');\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.service-card, .feature').forEach((element) => {\n observer.observe(element);\n });\n});\n\n---end---\n\nThis website features a modern, clean design with smooth animations, mobile responsiveness, and intuitive navigation. The color scheme uses green to emphasize environmental responsibility. Key features include:\n\n1. Fixed navigation header\n2. Full-screen hero section\n3. Service cards with hover effects\n4. Responsive grid layouts\n5. Animated mobile menu\n6. Contact form with feedback\n7. Smooth scroll behavior\n8. Intersection Observer for scroll animations\n9. Accessible semantic HTML\n10. Modern CSS with variables and flexbox/grid\n\nThe design is professional yet approachable, emphasizing reliability and eco-friendliness while maintaining a clean, modern aesthetic."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 273,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3131
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..64f0fa3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# cleanslate.scroll.pub
+Website generated by Claude from prompt: garbage removal company
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..047e634
--- /dev/null
+++ b/script.js
@@ -0,0 +1,62 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', function() {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger to X
+ const spans = this.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'));
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ });
+ });
+
+ // Form submission
+ const contactForm = document.getElementById('contact-form');
+ contactForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ // Add animation to button
+ const submitButton = this.querySelector('button[type="submit"]');
+ submitButton.textContent = 'Sending...';
+ submitButton.disabled = true;
+
+ // Simulate form submission
+ setTimeout(() => {
+ submitButton.textContent = 'Message Sent!';
+ this.reset();
+
+ setTimeout(() => {
+ submitButton.textContent = 'Send Message';
+ submitButton.disabled = false;
+ }, 2000);
+ }, 1500);
+ });
+
+ // Scroll animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('animate');
+ }
+ });
+ }, { threshold: 0.1 });
+
+ document.querySelectorAll('.service-card, .feature').forEach((element) => {
+ observer.observe(element);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..855164f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,206 @@
+:root {
+ --primary-color: #2ecc71;
+ --secondary-color: #27ae60;
+ --text-color: #333;
+ --light-bg: #f9f9f9;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background: white;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+.hero {
+ height: 100vh;
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
+ url('images/hero-bg.jpg');
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: white;
+}
+
+.hero-content {
+ max-width: 800px;
+ padding: 2rem;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+}
+
+.cta-button {
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.cta-button:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+}
+
+.services, .about {
+ padding: 5rem 5%;
+ background: var(--light-bg);
+}
+
+.service-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.service-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.service-card:hover {
+ transform: translateY(-5px);
+}
+
+.icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.features {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.contact {
+ padding: 5rem 5%;
+}
+
+.contact-form {
+ max-width: 600px;
+ margin: 2rem auto;
+ display: grid;
+ gap: 1rem;
+}
+
+.contact-form input,
+.contact-form textarea {
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+
+.contact-form textarea {
+ height: 150px;
+}
+
+footer {
+ background: #333;
+ color: white;
+ padding: 3rem 5%;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ margin: 5px 0;
+ transition: var(--transition);
+ }
+
+ .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;
+ }
+}