commit 7f605be29cbbbde093d79b6d530d0a211a631882
Author: root <root@hub.scroll.pub>
Date: 2025-01-03 09:43:20 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..419b9e8
--- /dev/null
+++ b/body.html
@@ -0,0 +1,88 @@
+<header class="main-header">
+ <nav class="nav-container">
+ <div class="logo">YiQi Industries</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#products">Products</a></li>
+ <li><a href="#solutions">Solutions</a></li>
+ <li><a href="#support">Support</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="hero-content">
+ <h1>Advanced Instrumentation Solutions</h1>
+ <p>Precision engineering meets innovation</p>
+ <a href="#products" class="cta-button">Explore Products</a>
+ </div>
+ </section>
+
+ <section id="products" class="products">
+ <h2>Featured Products</h2>
+ <div class="product-grid">
+ <article class="product-card">
+ <div class="product-image"></div>
+ <h3>Precision Sensors</h3>
+ <p>High-accuracy measurement solutions</p>
+ </article>
+ <article class="product-card">
+ <div class="product-image"></div>
+ <h3>Calibration Tools</h3>
+ <p>Professional calibration equipment</p>
+ </article>
+ <article class="product-card">
+ <div class="product-image"></div>
+ <h3>Data Loggers</h3>
+ <p>Advanced data collection systems</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="solutions" class="solutions">
+ <h2>Industry Solutions</h2>
+ <div class="solutions-grid">
+ <div class="solution-item">
+ <h3>Manufacturing</h3>
+ <p>Quality control and process monitoring</p>
+ </div>
+ <div class="solution-item">
+ <h3>Research</h3>
+ <p>Laboratory and scientific instruments</p>
+ </div>
+ <div class="solution-item">
+ <h3>Healthcare</h3>
+ <p>Medical device calibration</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Contact Us</h2>
+ <form class="contact-form">
+ <input type="text" placeholder="Name" required>
+ <input type="email" placeholder="Email" required>
+ <textarea placeholder="Message" required></textarea>
+ <button type="submit">Send Message</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>YiQi Industries</h4>
+ <p>Leading provider of precision instrumentation solutions</p>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <p>Email: info@yiqi.scroll.pub</p>
+ <p>Phone: +86 123 456 7890</p>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9ded46c
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+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
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..250bc41
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<header class=\"main-header\">\n <nav class=\"nav-container\">\n <div class=\"logo\">YiQi Industries</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=\"#home\">Home</a></li>\n <li><a href=\"#products\">Products</a></li>\n <li><a href=\"#solutions\">Solutions</a></li>\n <li><a href=\"#support\">Support</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"hero-content\">\n <h1>Advanced Instrumentation Solutions</h1>\n <p>Precision engineering meets innovation</p>\n <a href=\"#products\" class=\"cta-button\">Explore Products</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\"></div>\n <h3>Precision Sensors</h3>\n <p>High-accuracy measurement solutions</p>\n </article>\n <article class=\"product-card\">\n <div class=\"product-image\"></div>\n <h3>Calibration Tools</h3>\n <p>Professional calibration equipment</p>\n </article>\n <article class=\"product-card\">\n <div class=\"product-image\"></div>\n <h3>Data Loggers</h3>\n <p>Advanced data collection systems</p>\n </article>\n </div>\n </section>\n\n <section id=\"solutions\" class=\"solutions\">\n <h2>Industry Solutions</h2>\n <div class=\"solutions-grid\">\n <div class=\"solution-item\">\n <h3>Manufacturing</h3>\n <p>Quality control and process monitoring</p>\n </div>\n <div class=\"solution-item\">\n <h3>Research</h3>\n <p>Laboratory and scientific instruments</p>\n </div>\n <div class=\"solution-item\">\n <h3>Healthcare</h3>\n <p>Medical device calibration</p>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Contact Us</h2>\n <form class=\"contact-form\">\n <input type=\"text\" placeholder=\"Name\" required>\n <input type=\"email\" placeholder=\"Email\" required>\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>YiQi Industries</h4>\n <p>Leading provider of precision instrumentation solutions</p>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <p>Email: info@yiqi.scroll.pub</p>\n <p>Phone: +86 123 456 7890</p>\n </div>\n </div>\n</footer>\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
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..6b82eef
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# yiqi.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..799d135
--- /dev/null
+++ b/script.js
@@ -0,0 +1,61 @@
+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);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e1c2272
--- /dev/null
+++ b/style.css
@@ -0,0 +1,216 @@
+: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;
+ }
+}