Changes to yamaha-smt.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     
+       Yamaha SMT
+     
+     
+       
+     
+     
+       Products
+       Features
+       Specifications
+       Contact
+     
+   
+ 
+ 
+ 
+   
+     
+       Professional SMT Pick and Place Solutions
+       Industry-leading precision and reliability for your electronics manufacturing
+       Request Quote
+     
+   
+ 
+   
+     Featured Products
+     
+       
+         
+           
+         
+         YSH20
+         High-speed modular mounter with advanced vision system
+         
+       
+       
+         
+           
+         
+         YS12
+         Compact and flexible placement solution
+         
+       
+     
+   
+ 
+   
+     Key Features
+     
+       
+         
+         High Speed
+         Up to 95,000 CPH placement speed
+       
+       
+         
+         Precision
+         ±0.025mm placement accuracy
+       
+       
+         
+         Flexibility
+         Multiple component compatibility
+       
+     
+   
+ 
+   
+     Contact Us
+     
+       
+         Name
+         
+       
+       
+         Email
+         
+       
+       
+         Message
+         
+       
+       
+     
+   
+ 
+ 
+ 
+   
+     
+       Yamaha SMT Solutions
+       Professional Pick and Place Machines
+     
+     
+       Products
+       Features
+       Contact
+     
+   
+ 

index.scroll

Changed around line 1
+ 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

prompt.json

Changed around line 1
+ {
+   "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\n  \n    \n      Yamaha SMT\n    
\n    \n    \n      Products
\n      Features
\n      Specifications
\n      Contact
\n    \n  \n\n\n\n  \n    \n      Professional SMT Pick and Place Solutions\n      Industry-leading precision and reliability for your electronics manufacturing
\n      Request Quote\n    
\n  \n\n  \n    Featured Products\n    \n      \n        \n          \n        
\n        YSH20\n        High-speed modular mounter with advanced vision system
\n        \n      \n      \n        \n          \n        
\n        YS12\n        Compact and flexible placement solution
\n        \n      \n    
\n  \n\n  \n    Key Features\n    \n      \n        \n        High Speed\n        Up to 95,000 CPH placement speed
\n      
\n      \n        \n        Precision\n        ±0.025mm placement accuracy
\n      
\n      \n        \n        Flexibility\n        Multiple component compatibility
\n      
\n    
\n  \n\n  \n    Contact Us\n    \n      \n        Name\n        \n      
\n      \n        Email\n        \n      
\n      \n        Message\n        \n      
\n      \n    \n  \n\n\n\n  \n    \n      Yamaha SMT Solutions\n      Professional Pick and Place Machines
\n    
\n    \n      Products\n      Features\n      Contact\n    
\n  
\n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # yamaha-smt.scroll.pub

+ Website generated by Claude from prompt: 创建一个销售网站，推销雅马哈贴片机

script.js

Changed around line 1
+ 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);
+   });
+ });

style.css

Changed around line 1
+ :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);
+   }
+ }