Changes to yiqi.scroll.pub

root

19 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     YiQi Industries
+     
+       
+     
+     
+       Home
+       Products
+       Solutions
+       Support
+       Contact
+     
+   
+ 
+ 
+ 
+   
+     
+       Advanced Instrumentation Solutions
+       Precision engineering meets innovation
+       Explore Products
+     
+   
+ 
+   
+     Featured Products
+     
+       
+         
+         Precision Sensors
+         High-accuracy measurement solutions
+       
+       
+         
+         Calibration Tools
+         Professional calibration equipment
+       
+       
+         
+         Data Loggers
+         Advanced data collection systems
+       
+     
+   
+ 
+   
+     Industry Solutions
+     
+       
+         Manufacturing
+         Quality control and process monitoring
+       
+       
+         Research
+         Laboratory and scientific instruments
+       
+       
+         Healthcare
+         Medical device calibration
+       
+     
+   
+ 
+   
+     Contact Us
+     
+       
+       
+       
+       
+     
+   
+ 
+ 
+ 
+   
+     
+       YiQi Industries
+       Leading provider of precision instrumentation solutions
+     
+     
+       Contact
+       Email: info@yiqi.scroll.pub
+       Phone: +86 123 456 7890
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://yiqi.scroll.pub
+ metaTags
+  description Professional instrumentation and measurement equipment supplier
+  keywords instrumentation, measurement equipment, sensors, calibration, industrial instruments
+ editButton /edit.html
+ title Professional Instrumentation Solutions | YiQi Industries
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01Lp6sw2ZiQ1Z954xtKg5VAt",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Let me create a professional website for an instrumentation industry company.\n\n---domain---\nyiqi.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://yiqi.scroll.pub\nmetaTags\n description Professional instrumentation and measurement equipment supplier\n keywords instrumentation, measurement equipment, sensors, calibration, industrial instruments\neditButton /edit.html\ntitle Professional Instrumentation Solutions | YiQi Industries\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    YiQi Industries
\n    \n    \n      Home
\n      Products
\n      Solutions
\n      Support
\n      Contact
\n    \n  \n\n\n\n  \n    \n      Advanced Instrumentation Solutions\n      Precision engineering meets innovation
\n      Explore Products\n    
\n  \n\n  \n    Featured Products\n    \n      \n        
\n        Precision Sensors\n        High-accuracy measurement solutions
\n      \n      \n        
\n        Calibration Tools\n        Professional calibration equipment
\n      \n      \n        
\n        Data Loggers\n        Advanced data collection systems
\n      \n    
\n  \n\n  \n    Industry Solutions\n    \n      \n        Manufacturing\n        Quality control and process monitoring
\n      
\n      \n        Research\n        Laboratory and scientific instruments
\n      
\n      \n        Healthcare\n        Medical device calibration
\n      
\n    
\n  \n\n  \n    Contact Us\n    \n      \n      \n      \n      \n    \n  \n\n\n\n  \n    \n      YiQi Industries\n      Leading provider of precision instrumentation solutions
\n    
\n    \n      Contact\n      Email: info@yiqi.scroll.pub
\n      Phone: +86 123 456 7890
\n    
\n  
\n\n\n---style.css---\n:root {\n  --primary-color: #2c3e50;\n  --accent-color: #3498db;\n  --text-color: #333;\n  --light-bg: #f8f9fa;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  line-height: 1.6;\n  color: var(--text-color);\n}\n\n.main-header {\n  background: var(--primary-color);\n  position: fixed;\n  width: 100%;\n  top: 0;\n  z-index: 1000;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\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  color: white;\n  font-size: 1.5rem;\n  font-weight: bold;\n}\n\n.nav-links {\n  display: flex;\n  list-style: none;\n  gap: 2rem;\n}\n\n.nav-links a {\n  color: white;\n  text-decoration: none;\n  transition: var(--transition);\n}\n\n.nav-links a:hover {\n  color: var(--accent-color);\n}\n\n.mobile-menu {\n  display: none;\n}\n\n.hero {\n  height: 100vh;\n  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: white;\n}\n\n.hero-content {\n  padding: 2rem;\n}\n\n.hero h1 {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n}\n\n.cta-button {\n  display: inline-block;\n  padding: 1rem 2rem;\n  background: white;\n  color: var(--primary-color);\n  text-decoration: none;\n  border-radius: 50px;\n  margin-top: 2rem;\n  transition: var(--transition);\n}\n\n.cta-button:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}\n\n.products, .solutions {\n  padding: 5rem 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.product-grid, .solutions-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: white;\n  border-radius: 10px;\n  padding: 1.5rem;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n  transition: var(--transition);\n}\n\n.product-card:hover {\n  transform: translateY(-5px);\n}\n\n.product-image {\n  height: 200px;\n  background: var(--light-bg);\n  border-radius: 5px;\n  margin-bottom: 1rem;\n}\n\n.contact {\n  background: var(--light-bg);\n  padding: 5rem 2rem;\n}\n\n.contact-form {\n  max-width: 600px;\n  margin: 2rem auto;\n  display: flex;\n  flex-direction: column;\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 button {\n  padding: 1rem;\n  background: var(--accent-color);\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: var(--transition);\n}\n\n.contact-form button:hover {\n  background: var(--primary-color);\n}\n\nfooter {\n  background: var(--primary-color);\n  color: white;\n  padding: 3rem 2rem;\n}\n\n.footer-content {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 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: white;\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: var(--primary-color);\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: 2rem;\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.getElementsByTagName('span');\n    this.classList.toggle('active');\n    if (this.classList.contains('active')) {\n      spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';\n      spans[1].style.opacity = '0';\n      spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)';\n    } else {\n      spans[0].style.transform = 'none';\n      spans[1].style.opacity = '1';\n      spans[2].style.transform = 'none';\n    }\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      document.querySelector(this.getAttribute('href')).scrollIntoView({\n        behavior: 'smooth'\n      });\n    });\n  });\n\n  // Form submission handler\n  const contactForm = document.querySelector('.contact-form');\n  if (contactForm) {\n    contactForm.addEventListener('submit', function(e) {\n      e.preventDefault();\n      // Add form submission logic here\n      alert('Thank you for your message. We will contact you soon.');\n      this.reset();\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.style.opacity = '1';\n        entry.target.style.transform = 'translateY(0)';\n      }\n    });\n  });\n\n  // Apply fade-in animation to sections\n  document.querySelectorAll('section').forEach((section) => {\n    section.style.opacity = '0';\n    section.style.transform = 'translateY(20px)';\n    section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n    observer.observe(section);\n  });\n});\n\n---end---\n\nThis website features:\n1. Modern, clean design with smooth animations\n2. Fully responsive layout\n3. Hamburger menu for mobile devices\n4. Smooth scrolling navigation\n5. Intersection Observer for scroll animations\n6. Contact form with basic validation\n7. Beautiful gradient hero section\n8. Card-based product showcase\n9. CSS Grid and Flexbox layouts\n10. Semantic HTML5 structure\n11. Optimized for accessibility\n12. Clean, maintainable code structure\n13. Professional color scheme\n14. Performance-optimized animations\n15. Modern CSS variables for easy theming\n\nThe domain name \"yiqi\" (仪器) directly translates to \"instrument\" in Chinese, making it relevant and memorable for the target audience."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 279,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 3191
+   }
+ }

readme.scroll

Changed around line 1

+ # yiqi.scroll.pub

+ Website generated by Claude from prompt: 仪器行业官方网站

script.js

Changed around line 1
+ 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.getElementsByTagName('span');
+     this.classList.toggle('active');
+     if (this.classList.contains('active')) {
+       spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
+       spans[1].style.opacity = '0';
+       spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)';
+     } else {
+       spans[0].style.transform = 'none';
+       spans[1].style.opacity = '1';
+       spans[2].style.transform = 'none';
+     }
+   });
+ 
+   // Smooth scroll for navigation links
+   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+       e.preventDefault();
+       document.querySelector(this.getAttribute('href')).scrollIntoView({
+         behavior: 'smooth'
+       });
+     });
+   });
+ 
+   // Form submission handler
+   const contactForm = document.querySelector('.contact-form');
+   if (contactForm) {
+     contactForm.addEventListener('submit', function(e) {
+       e.preventDefault();
+       // Add form submission logic here
+       alert('Thank you for your message. We will contact you soon.');
+       this.reset();
+     });
+   }
+ 
+   // Intersection Observer for fade-in animations
+   const observer = new IntersectionObserver((entries) => {
+     entries.forEach(entry => {
+       if (entry.isIntersecting) {
+         entry.target.style.opacity = '1';
+         entry.target.style.transform = 'translateY(0)';
+       }
+     });
+   });
+ 
+   // Apply fade-in animation to sections
+   document.querySelectorAll('section').forEach((section) => {
+     section.style.opacity = '0';
+     section.style.transform = 'translateY(20px)';
+     section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+     observer.observe(section);
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2c3e50;
+   --accent-color: #3498db;
+   --text-color: #333;
+   --light-bg: #f8f9fa;
+   --transition: all 0.3s ease;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+ }
+ 
+ .main-header {
+   background: var(--primary-color);
+   position: fixed;
+   width: 100%;
+   top: 0;
+   z-index: 1000;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ .nav-container {
+   max-width: 1200px;
+   margin: 0 auto;
+   padding: 1rem;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ .logo {
+   color: white;
+   font-size: 1.5rem;
+   font-weight: bold;
+ }
+ 
+ .nav-links {
+   display: flex;
+   list-style: none;
+   gap: 2rem;
+ }
+ 
+ .nav-links a {
+   color: white;
+   text-decoration: none;
+   transition: var(--transition);
+ }
+ 
+ .nav-links a:hover {
+   color: var(--accent-color);
+ }
+ 
+ .mobile-menu {
+   display: none;
+ }
+ 
+ .hero {
+   height: 100vh;
+   background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   text-align: center;
+   color: white;
+ }
+ 
+ .hero-content {
+   padding: 2rem;
+ }
+ 
+ .hero h1 {
+   font-size: 3rem;
+   margin-bottom: 1rem;
+ }
+ 
+ .cta-button {
+   display: inline-block;
+   padding: 1rem 2rem;
+   background: white;
+   color: var(--primary-color);
+   text-decoration: none;
+   border-radius: 50px;
+   margin-top: 2rem;
+   transition: var(--transition);
+ }
+ 
+ .cta-button:hover {
+   transform: translateY(-3px);
+   box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+ }
+ 
+ .products, .solutions {
+   padding: 5rem 2rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .product-grid, .solutions-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .product-card {
+   background: white;
+   border-radius: 10px;
+   padding: 1.5rem;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+   transition: var(--transition);
+ }
+ 
+ .product-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .product-image {
+   height: 200px;
+   background: var(--light-bg);
+   border-radius: 5px;
+   margin-bottom: 1rem;
+ }
+ 
+ .contact {
+   background: var(--light-bg);
+   padding: 5rem 2rem;
+ }
+ 
+ .contact-form {
+   max-width: 600px;
+   margin: 2rem auto;
+   display: flex;
+   flex-direction: column;
+   gap: 1rem;
+ }
+ 
+ .contact-form input,
+ .contact-form textarea {
+   padding: 1rem;
+   border: 1px solid #ddd;
+   border-radius: 5px;
+ }
+ 
+ .contact-form button {
+   padding: 1rem;
+   background: var(--accent-color);
+   color: white;
+   border: none;
+   border-radius: 5px;
+   cursor: pointer;
+   transition: var(--transition);
+ }
+ 
+ .contact-form button:hover {
+   background: var(--primary-color);
+ }
+ 
+ footer {
+   background: var(--primary-color);
+   color: white;
+   padding: 3rem 2rem;
+ }
+ 
+ .footer-content {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 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: white;
+     margin: 5px 0;
+     transition: var(--transition);
+   }
+ 
+   .nav-links {
+     display: none;
+     position: absolute;
+     top: 100%;
+     left: 0;
+     right: 0;
+     background: var(--primary-color);
+     flex-direction: column;
+     padding: 1rem;
+     text-align: center;
+   }
+ 
+   .nav-links.active {
+     display: flex;
+   }
+ 
+   .hero h1 {
+     font-size: 2rem;
+   }
+ }