commit 62767345b2f70eb241a581905d2f5604f0df1807
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 14:52:17 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..864617e
--- /dev/null
+++ b/body.html
@@ -0,0 +1,102 @@
+<header>
+ <nav class="main-nav">
+ <div class="logo">
+ <h1>Yamaha SMT</h1>
+ </div>
+ <button class="mobile-menu-btn" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#products">Products</a></li>
+ <li><a href="#features">Features</a></li>
+ <li><a href="#specifications">Specifications</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h2>Professional SMT Pick and Place Solutions</h2>
+ <p>Industry-leading precision and reliability for your electronics manufacturing</p>
+ <a href="#contact" class="cta-button">Request Quote</a>
+ </div>
+ </section>
+
+ <section id="products" class="products">
+ <h2>Featured Products</h2>
+ <div class="product-grid">
+ <article class="product-card">
+ <div class="product-image">
+ <img src="images/ysh20.jpg" alt="YSH20 Pick and Place Machine">
+ </div>
+ <h3>YSH20</h3>
+ <p>High-speed modular mounter with advanced vision system</p>
+ <button class="details-btn">View Details</button>
+ </article>
+ <article class="product-card">
+ <div class="product-image">
+ <img src="images/ys12.jpg" alt="YS12 Pick and Place Machine">
+ </div>
+ <h3>YS12</h3>
+ <p>Compact and flexible placement solution</p>
+ <button class="details-btn">View Details</button>
+ </article>
+ </div>
+ </section>
+
+ <section id="features" class="features">
+ <h2>Key Features</h2>
+ <div class="features-grid">
+ <div class="feature">
+ <i class="icon-speed"></i>
+ <h3>High Speed</h3>
+ <p>Up to 95,000 CPH placement speed</p>
+ </div>
+ <div class="feature">
+ <i class="icon-precision"></i>
+ <h3>Precision</h3>
+ <p>±0.025mm placement accuracy</p>
+ </div>
+ <div class="feature">
+ <i class="icon-flexible"></i>
+ <h3>Flexibility</h3>
+ <p>Multiple component compatibility</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Contact Us</h2>
+ <form id="contact-form" class="contact-form">
+ <div class="form-group">
+ <label for="name">Name</label>
+ <input type="text" id="name" required>
+ </div>
+ <div class="form-group">
+ <label for="email">Email</label>
+ <input type="email" id="email" required>
+ </div>
+ <div class="form-group">
+ <label for="message">Message</label>
+ <textarea id="message" required></textarea>
+ </div>
+ <button type="submit" class="submit-btn">Send Message</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-info">
+ <h3>Yamaha SMT Solutions</h3>
+ <p>Professional Pick and Place Machines</p>
+ </div>
+ <div class="footer-links">
+ <a href="#products">Products</a>
+ <a href="#features">Features</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..95c8a4e
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://yamaha-smt.scroll.pub
+metaTags
+editButton /edit.html
+title Yamaha SMT Machines | Professional Pick and Place Solutions
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..5e56efc
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_018GnFyyMAWPicMo8QYqHtTF",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a website for selling Yamaha SMT (Surface Mount Technology) machines.\n\n---domain---\nyamaha-smt.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://yamaha-smt.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Yamaha SMT Machines | Professional Pick and Place Solutions\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">\n <h1>Yamaha SMT</h1>\n </div>\n <button class=\"mobile-menu-btn\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#products\">Products</a></li>\n <li><a href=\"#features\">Features</a></li>\n <li><a href=\"#specifications\">Specifications</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 <h2>Professional SMT Pick and Place Solutions</h2>\n <p>Industry-leading precision and reliability for your electronics manufacturing</p>\n <a href=\"#contact\" class=\"cta-button\">Request Quote</a>\n </div>\n </section>\n\n <section id=\"products\" class=\"products\">\n <h2>Featured Products</h2>\n <div class=\"product-grid\">\n <article class=\"product-card\">\n <div class=\"product-image\">\n <img src=\"images/ysh20.jpg\" alt=\"YSH20 Pick and Place Machine\">\n </div>\n <h3>YSH20</h3>\n <p>High-speed modular mounter with advanced vision system</p>\n <button class=\"details-btn\">View Details</button>\n </article>\n <article class=\"product-card\">\n <div class=\"product-image\">\n <img src=\"images/ys12.jpg\" alt=\"YS12 Pick and Place Machine\">\n </div>\n <h3>YS12</h3>\n <p>Compact and flexible placement solution</p>\n <button class=\"details-btn\">View Details</button>\n </article>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <h2>Key Features</h2>\n <div class=\"features-grid\">\n <div class=\"feature\">\n <i class=\"icon-speed\"></i>\n <h3>High Speed</h3>\n <p>Up to 95,000 CPH placement speed</p>\n </div>\n <div class=\"feature\">\n <i class=\"icon-precision\"></i>\n <h3>Precision</h3>\n <p>±0.025mm placement accuracy</p>\n </div>\n <div class=\"feature\">\n <i class=\"icon-flexible\"></i>\n <h3>Flexibility</h3>\n <p>Multiple component compatibility</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 <div class=\"form-group\">\n <label for=\"name\">Name</label>\n <input type=\"text\" id=\"name\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"email\">Email</label>\n <input type=\"email\" id=\"email\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"message\">Message</label>\n <textarea id=\"message\" required></textarea>\n </div>\n <button type=\"submit\" class=\"submit-btn\">Send Message</button>\n </form>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-info\">\n <h3>Yamaha SMT Solutions</h3>\n <p>Professional Pick and Place Machines</p>\n </div>\n <div class=\"footer-links\">\n <a href=\"#products\">Products</a>\n <a href=\"#features\">Features</a>\n <a href=\"#contact\">Contact</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #0066cc;\n --secondary-color: #004d99;\n --accent-color: #ff9900;\n --text-color: #333333;\n --light-gray: #f5f5f5;\n --white: #ffffff;\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\n/* Header & Navigation */\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background: var(--white);\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n z-index: 1000;\n}\n\n.logo h1 {\n font-size: 1.8rem;\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: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white);\n padding: 0 1rem;\n}\n\n.hero-content h2 {\n font-size: 3rem;\n margin-bottom: 1rem;\n animation: fadeInUp 1s ease;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--accent-color);\n color: var(--white);\n text-decoration: none;\n border-radius: 5px;\n font-weight: bold;\n transition: transform 0.3s ease;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n/* Products Section */\n.products {\n padding: 5rem 5%;\n background: var(--light-gray);\n}\n\n.product-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.product-card {\n background: var(--white);\n border-radius: 10px;\n overflow: hidden;\n transition: transform 0.3s ease;\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n}\n\n.product-card:hover {\n transform: translateY(-5px);\n}\n\n.product-image {\n height: 200px;\n background: #ddd;\n}\n\n.product-card h3 {\n padding: 1rem;\n color: var(--primary-color);\n}\n\n/* Features Section */\n.features {\n padding: 5rem 5%;\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.feature {\n text-align: center;\n padding: 2rem;\n border-radius: 10px;\n background: var(--light-gray);\n transition: transform 0.3s ease;\n}\n\n.feature:hover {\n transform: translateY(-5px);\n}\n\n/* Contact Form */\n.contact {\n padding: 5rem 5%;\n background: var(--light-gray);\n}\n\n.contact-form {\n max-width: 600px;\n margin: 0 auto;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.form-group input,\n.form-group textarea {\n width: 100%;\n padding: 0.8rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\n.submit-btn {\n background: var(--primary-color);\n color: var(--white);\n padding: 1rem 2rem;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.submit-btn:hover {\n background: var(--secondary-color);\n}\n\n/* Mobile Menu */\n.mobile-menu-btn {\n display: none;\n flex-direction: column;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 10px;\n}\n\n.mobile-menu-btn span {\n display: block;\n width: 25px;\n height: 2px;\n background: var(--text-color);\n transition: 0.3s ease;\n}\n\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: flex;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background: var(--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-content h2 {\n font-size: 2rem;\n }\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenuBtn = document.querySelector('.mobile-menu-btn');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenuBtn.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n mobileMenuBtn.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 if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n // Close mobile menu if open\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Contact form handling\n const contactForm = document.getElementById('contact-form');\n if (contactForm) {\n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n // Form validation\n const name = document.getElementById('name').value;\n const email = document.getElementById('email').value;\n const message = document.getElementById('message').value;\n\n if (name && email && message) {\n // Here you would typically send the form data to a server\n alert('Thank you for your message. We will contact you soon!');\n contactForm.reset();\n }\n });\n }\n\n // Intersection Observer for animation\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, {\n threshold: 0.1\n });\n\n // Observe all sections\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis website features:\n1. Clean, modern design with smooth animations\n2. Fully responsive layout\n3. Interactive product cards\n4. Smooth scrolling navigation\n5. Mobile-friendly menu\n6. Contact form with validation\n7. Intersection Observer for scroll animations\n8. Accessible navigation and structure\n9. Optimized performance with minimal JavaScript\n10. Professional color scheme and typography\n\nThe design focuses on showcasing Yamaha SMT machines with a professional, tech-focused aesthetic while maintaining ease of use and clear call-to-actions."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 290,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3341
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..12f90fd
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# yamaha-smt.scroll.pub
+Website generated by Claude from prompt: 创建一个销售网站，推销雅马哈贴片机
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..1330693
--- /dev/null
+++ b/script.js
@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenuBtn.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ mobileMenuBtn.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) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ }
+ });
+ });
+
+ // Contact form handling
+ const contactForm = document.getElementById('contact-form');
+ if (contactForm) {
+ contactForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ // Form validation
+ const name = document.getElementById('name').value;
+ const email = document.getElementById('email').value;
+ const message = document.getElementById('message').value;
+
+ if (name && email && message) {
+ // Here you would typically send the form data to a server
+ alert('Thank you for your message. We will contact you soon!');
+ contactForm.reset();
+ }
+ });
+ }
+
+ // Intersection Observer for animation
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, {
+ threshold: 0.1
+ });
+
+ // 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..7e61019
--- /dev/null
+++ b/style.css
@@ -0,0 +1,245 @@
+:root {
+ --primary-color: #0066cc;
+ --secondary-color: #004d99;
+ --accent-color: #ff9900;
+ --text-color: #333333;
+ --light-gray: #f5f5f5;
+ --white: #ffffff;
+}
+
+* {
+ 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);
+}
+
+/* Header & Navigation */
+.main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background: var(--white);
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+}
+
+.logo h1 {
+ font-size: 1.8rem;
+ 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: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: var(--white);
+ padding: 0 1rem;
+}
+
+.hero-content h2 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ animation: fadeInUp 1s ease;
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--accent-color);
+ color: var(--white);
+ text-decoration: none;
+ border-radius: 5px;
+ font-weight: bold;
+ transition: transform 0.3s ease;
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+}
+
+/* Products Section */
+.products {
+ padding: 5rem 5%;
+ background: var(--light-gray);
+}
+
+.product-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.product-card {
+ background: var(--white);
+ border-radius: 10px;
+ overflow: hidden;
+ transition: transform 0.3s ease;
+ box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+}
+
+.product-card:hover {
+ transform: translateY(-5px);
+}
+
+.product-image {
+ height: 200px;
+ background: #ddd;
+}
+
+.product-card h3 {
+ padding: 1rem;
+ color: var(--primary-color);
+}
+
+/* Features Section */
+.features {
+ padding: 5rem 5%;
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.feature {
+ text-align: center;
+ padding: 2rem;
+ border-radius: 10px;
+ background: var(--light-gray);
+ transition: transform 0.3s ease;
+}
+
+.feature:hover {
+ transform: translateY(-5px);
+}
+
+/* Contact Form */
+.contact {
+ padding: 5rem 5%;
+ background: var(--light-gray);
+}
+
+.contact-form {
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+}
+
+.form-group input,
+.form-group textarea {
+ width: 100%;
+ padding: 0.8rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+
+.submit-btn {
+ background: var(--primary-color);
+ color: var(--white);
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.submit-btn:hover {
+ background: var(--secondary-color);
+}
+
+/* Mobile Menu */
+.mobile-menu-btn {
+ display: none;
+ flex-direction: column;
+ gap: 6px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 10px;
+}
+
+.mobile-menu-btn span {
+ display: block;
+ width: 25px;
+ height: 2px;
+ background: var(--text-color);
+ transition: 0.3s ease;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu-btn {
+ display: flex;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background: var(--white);
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero-content h2 {
+ font-size: 2rem;
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}