commit b8a2fd71cab4da5f58a90b8e5019b4a0160d88b7

Author: root <root@hub.scroll.pub> Date: 2025-01-03 04:02:41 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..85a6848 --- /dev/null +++ b/body.html @@ -0,0 +1,82 @@ +<header class="navbar"> + <div class="nav-container"> + <div class="logo">GreenThreads</div> + <nav> + <button class="mobile-menu" aria-label="Menu">☰</button> + <ul class="nav-links"> + <li><a href="/">Home</a></li> + <li><a href="#works">Shop</a></li> + <li><a href="#skills">Sustainability</a></li> + <li><a href="#blog">Blog</a></li> + <li><a href="#contact">Contact</a></li> + <li><button class="theme-toggle" aria-label="Toggle theme">🌓</button></li> + </ul> + </nav> + </div> +</header> + +<main> + <section class="hero"> + <div class="hero-content"> + <h1>Wear the Change You Wish to See</h1> + <p>Sustainable fashion that respects our planet</p> + <button class="cta-button">Shop Now</button> + </div> + </section> + + <section class="impact"> + <h2>Our Impact</h2> + <div class="stats-grid"> + <div class="stat-card"> + <span class="stat-number">50K</span> + <p>Trees Planted</p> + </div> + <div class="stat-card"> + <span class="stat-number">1M</span> + <p>Liters Water Saved</p> + </div> + <div class="stat-card"> + <span class="stat-number">100%</span> + <p>Organic Materials</p> + </div> + </div> + </section> + + <section class="featured-products"> + <h2>Featured Collection</h2> + <div class="product-grid"> + <article class="product-card"> + <div class="product-image"></div> + <h3>Organic Cotton Tee</h3> + <p class="price">$35</p> + <button class="add-to-cart">Add to Cart</button> + </article> + <!-- More product cards would go here --> + </div> + </section> + + <section class="newsletter"> + <h2>Join Our Community</h2> + <form class="newsletter-form"> + <input type="email" placeholder="Enter your email" required> + <button type="submit">Subscribe</button> + </form> + </section> +</main> + +<footer> + <div class="footer-content"> + <div class="footer-section"> + <h3>GreenThreads</h3> + <p>Sustainable fashion for a better tomorrow</p> + </div> + <div class="footer-section"> + <h3>Connect</h3> + <div class="social-links"> + <a href="#" target="_blank">Instagram</a> + <a href="#" target="_blank">Facebook</a> + <a href="#" target="_blank">Twitter</a> + </div> + </div> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..2728e45 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://greenthreads.scroll.pub +metaTags +editButton /edit.html +title GreenThreads - Sustainable Fashion for a Better World +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..07df1e1 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01XQYiq2kzGz2WS7Zb6uEdaW", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create this eco-friendly clothing brand website. For the domain, I suggest:\n\n---domain---\ngreenthreads.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://greenthreads.scroll.pub\nmetaTags\neditButton /edit.html\ntitle GreenThreads - Sustainable Fashion for a Better World\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"navbar\">\n <div class=\"nav-container\">\n <div class=\"logo\">GreenThreads</div>\n <nav>\n <button class=\"mobile-menu\" aria-label=\"Menu\">☰</button>\n <ul class=\"nav-links\">\n <li><a href=\"/\">Home</a></li>\n <li><a href=\"#works\">Shop</a></li>\n <li><a href=\"#skills\">Sustainability</a></li>\n <li><a href=\"#blog\">Blog</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n <li><button class=\"theme-toggle\" aria-label=\"Toggle theme\">🌓</button></li>\n </ul>\n </nav>\n </div>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Wear the Change You Wish to See</h1>\n <p>Sustainable fashion that respects our planet</p>\n <button class=\"cta-button\">Shop Now</button>\n </div>\n </section>\n\n <section class=\"impact\">\n <h2>Our Impact</h2>\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <span class=\"stat-number\">50K</span>\n <p>Trees Planted</p>\n </div>\n <div class=\"stat-card\">\n <span class=\"stat-number\">1M</span>\n <p>Liters Water Saved</p>\n </div>\n <div class=\"stat-card\">\n <span class=\"stat-number\">100%</span>\n <p>Organic Materials</p>\n </div>\n </div>\n </section>\n\n <section class=\"featured-products\">\n <h2>Featured Collection</h2>\n <div class=\"product-grid\">\n <article class=\"product-card\">\n <div class=\"product-image\"></div>\n <h3>Organic Cotton Tee</h3>\n <p class=\"price\">$35</p>\n <button class=\"add-to-cart\">Add to Cart</button>\n </article>\n <!-- More product cards would go here -->\n </div>\n </section>\n\n <section class=\"newsletter\">\n <h2>Join Our Community</h2>\n <form class=\"newsletter-form\">\n <input type=\"email\" placeholder=\"Enter your email\" required>\n <button type=\"submit\">Subscribe</button>\n </form>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h3>GreenThreads</h3>\n <p>Sustainable fashion for a better tomorrow</p>\n </div>\n <div class=\"footer-section\">\n <h3>Connect</h3>\n <div class=\"social-links\">\n <a href=\"#\" target=\"_blank\">Instagram</a>\n <a href=\"#\" target=\"_blank\">Facebook</a>\n <a href=\"#\" target=\"_blank\">Twitter</a>\n </div>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c5530;\n --secondary-color: #8ba888;\n --accent-color: #d4e4d2;\n --text-color: #333;\n --background-color: #fff;\n --transition: all 0.3s ease;\n}\n\n[data-theme=\"dark\"] {\n --text-color: #e0e0e0;\n --background-color: #1a1a1a;\n --secondary-color: #4a6b47;\n --accent-color: #243c23;\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 color: var(--text-color);\n background: var(--background-color);\n transition: var(--transition);\n}\n\n.navbar {\n position: fixed;\n width: 100%;\n background: var(--background-color);\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 1000;\n}\n\n.nav-container {\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: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n color: var(--text-color);\n text-decoration: none;\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 display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),\n url('images/hero-bg.jpg') center/cover;\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: 30px;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 4rem 2rem;\n}\n\n.stat-card {\n text-align: center;\n padding: 2rem;\n background: var(--accent-color);\n border-radius: 10px;\n transition: var(--transition);\n}\n\n.stat-card:hover {\n transform: translateY(-5px);\n}\n\n.stat-number {\n font-size: 2.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background: var(--background-color);\n padding: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n flex-direction: column;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Theme Toggle\n const themeToggle = document.querySelector('.theme-toggle');\n const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');\n \n const currentTheme = localStorage.getItem('theme');\n if (currentTheme) {\n document.documentElement.setAttribute('data-theme', currentTheme);\n }\n\n themeToggle.addEventListener('click', () => {\n let theme = document.documentElement.getAttribute('data-theme');\n let newTheme = theme === 'dark' ? 'light' : 'dark';\n \n document.documentElement.setAttribute('data-theme', newTheme);\n localStorage.setItem('theme', newTheme);\n });\n\n // Mobile Menu\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n });\n\n // Smooth Scroll\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 // Intersection Observer for fade-in animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('fade-in');\n }\n });\n });\n\n document.querySelectorAll('.stat-card, .product-card').forEach((el) => observer.observe(el));\n});\n\n---end---\n\nThis implementation provides a modern, responsive website with a clean design focused on sustainability. It includes all the main features requested while keeping the code vanilla and framework-free. The color scheme and animations create an engaging user experience that aligns with the eco-friendly brand identity.\n\nThe CSS uses custom properties for easy theme switching and includes modern features like grid and flexbox for layouts. The JavaScript handles theme toggling, mobile menu functionality, and smooth scrolling with clean, efficient code.\n\nNote that this is a basic version - you would need to add more pages and features as specified in the requirements, but this gives you a solid foundation to build upon." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 1249, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2575 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..997d276 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# greenthreads.scroll.pub +Website generated by Claude from prompt: "I want to create a modern, responsive, and visually appealing website for a fictional eco-friendly clothing brand called 'GreenThreads.' The website should reflect the brand's commitment to sustainability, nature, and ethical fashion. Here are the specific requirements: 1. Design & Layout: Use a centered grid layout for all pages, including the homepage, shop, blog, and about sections. Everything should be aligned neatly in the center of the screen. The design should be minimalist with a nature-inspired color palette (e.g., shades of green, brown, and beige). Include high-quality images of models wearing the clothing in natural settings (e.g., forests, beaches). Ensure the website is fully mobile-responsive and looks great on all devices (desktop, tablet, and mobile). Add subtle animations or transitions to enhance user experience (e.g., fade-ins, hover effects). 2. Pages & Navigation: Navbar: Include a sticky navbar at the top with the following sections: Home: Links back to the homepage. My Works: A section showcasing the brand's portfolio or featured products. My Skills: A section highlighting the brand's expertise (e.g., sustainable materials, ethical production). Blog: Links to the blog section. Contact: Links to the contact page. Add a toggle button in the navbar to switch between dark and light themes. The theme should persist across all pages and posts. Homepage: A hero section with a captivating tagline (e.g., 'Wear the Change You Wish to See') and a call-to-action button (e.g., 'Shop Now'). A brief introduction to the brand and its mission, displayed in a centered grid layout. A Sustainability Impact section with statistics or infographics about the brand's positive environmental impact (e.g., 'X trees planted,' 'Y liters of water saved'). Shop Page: Display products in a centered grid layout with filters for categories (e.g., Men, Women, Accessories) and sorting options (e.g., Price, Popularity). Each product should have an image, title, price, and an 'Add to Cart' button. About Us: Share the brand's story, values, and commitment to sustainability in a centered grid layout. Include a team section with photos and short bios of key members. Blog: A section for articles on eco-friendly living, fashion tips, and sustainability news. Display blog posts in a centered grid layout with a featured image, title, and short excerpt. Ensure all blog posts open in a new tab when clicked. Include a sidebar with categories and a search bar. Contact Us: A simple contact form, the brand's email address, phone number, and a map showing the location of the headquarters, all centered on the page. 3. Functionality: E-commerce Integration: Enable users to add products to a cart, view their cart, and proceed to checkout. Include options for different payment methods (e.g., credit card, PayPal). Newsletter Signup: Add a subscription form for a monthly newsletter on the homepage footer. Social Media Integration: Include links to the brand's social media profiles (Instagram, Facebook, Twitter) and a feed displaying the latest posts. Ensure all social media links open in a new tab. Search Bar: Add a search bar in the header for users to easily find products or blog posts. 4. Content: Write compelling copy for the homepage, about us, and product descriptions. The tone should be friendly, inspiring, and professional. Include placeholder text for the blog section, but ensure it aligns with the brand's theme. 5. Additional Features: Customer Reviews: Include a customer review section on product pages with a star rating system. FAQ Page: Add a FAQ page addressing common questions about shipping, returns, and sustainability practices. Dark/Light Theme: The theme toggle should work seamlessly across all pages and posts. The dark theme should use a dark background with light text, and the light theme should use a light background with dark text. 6. SEO & Performance: Optimize the website for search engines with proper meta tags, alt text for images, and fast loading times. Ensure the website is secure with HTTPS and has a privacy policy page. 7. Link Behavior: Ensure that all external links, including blog posts and social media links, open in a new tab when clicked. Please generate a preview of the website based on these requirements, and let me know if you need any additional details or clarifications." \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..287f4f5 --- /dev/null +++ b/script.js @@ -0,0 +1,47 @@ +document.addEventListener('DOMContentLoaded', () => { + // Theme Toggle + const themeToggle = document.querySelector('.theme-toggle'); + const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); + + const currentTheme = localStorage.getItem('theme'); + if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); + } + + themeToggle.addEventListener('click', () => { + let theme = document.documentElement.getAttribute('data-theme'); + let newTheme = theme === 'dark' ? 'light' : 'dark'; + + document.documentElement.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + }); + + // Mobile Menu + const mobileMenu = document.querySelector('.mobile-menu'); + const navLinks = document.querySelector('.nav-links'); + + mobileMenu.addEventListener('click', () => { + navLinks.classList.toggle('active'); + }); + + // Smooth Scroll + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + 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.classList.add('fade-in'); + } + }); + }); + + document.querySelectorAll('.stat-card, .product-card').forEach((el) => observer.observe(el)); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..f1c1877 --- /dev/null +++ b/style.css @@ -0,0 +1,158 @@ +:root { + --primary-color: #2c5530; + --secondary-color: #8ba888; + --accent-color: #d4e4d2; + --text-color: #333; + --background-color: #fff; + --transition: all 0.3s ease; +} + +[data-theme="dark"] { + --text-color: #e0e0e0; + --background-color: #1a1a1a; + --secondary-color: #4a6b47; + --accent-color: #243c23; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + color: var(--text-color); + background: var(--background-color); + transition: var(--transition); +} + +.navbar { + position: fixed; + width: 100%; + background: var(--background-color); + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + z-index: 1000; +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + color: var(--primary-color); +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav-links a { + color: var(--text-color); + text-decoration: none; + transition: var(--transition); +} + +.nav-links a:hover { + color: var(--primary-color); +} + +.mobile-menu { + display: none; +} + +.hero { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), + url('images/hero-bg.jpg') center/cover; + 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: 30px; + cursor: pointer; + transition: var(--transition); +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0,0,0,0.2); +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + padding: 4rem 2rem; +} + +.stat-card { + text-align: center; + padding: 2rem; + background: var(--accent-color); + border-radius: 10px; + transition: var(--transition); +} + +.stat-card:hover { + transform: translateY(-5px); +} + +.stat-number { + font-size: 2.5rem; + font-weight: bold; + color: var(--primary-color); +} + +@media (max-width: 768px) { + .mobile-menu { + display: block; + } + + .nav-links { + display: none; + position: absolute; + top: 100%; + left: 0; + width: 100%; + background: var(--background-color); + padding: 1rem; + } + + .nav-links.active { + display: flex; + flex-direction: column; + } + + .hero h1 { + font-size: 2.5rem; + } +}