Changes to techimport.scroll.pub

root
root
8 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
    +
  • Главная
    • +
  • Продукция
    • +
  • Преимущества
    • +
  • О нас
    • +
  • Контакты
    • +
    +
    +
    +
    +
    +
    +

    Надежные поставки компьютерного оборудования из Китая

    +

    Качественное оборудование напрямую от производителей

    +
    +
    +
    +
    +

    Наша продукция

    +
    +
    +
    💻
    +

    Компьютеры

    +

    Серверы, рабочие станции, ноутбуки

    +
    +
    +
    🔧
    +

    Комплектующие

    +

    Процессоры, материнские платы, видеокарты

    +
    +
    +
    🖨️
    +

    Периферия

    +

    Принтеры, сканеры, МФУ

    +
    +
    +
    +
    +
    +

    Наши преимущества

    +
    +
    +

    Прямые поставки

    +

    Работаем напрямую с производителями

    +
    +
    +

    Гарантия качества

    +

    Проверка каждой партии товара

    +
    +
    +

    Быстрая доставка

    +

    Оптимальные маршруты поставок

    +
    +
    +
    +
    +
    +

    Свяжитесь с нами

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    ТехИмпорт

    +

    Ваш надежный партнер в поставках компьютерного оборудования

    +
    +
    +

    Контакты

    +

    Email: info@techimport.ru

    +

    Тел: +7 (495) 123-45-67

    +
    +
    +
    index.scroll
    Changed around line 1
    + buildHtml
    + baseUrl https://techimport.scroll.pub
    + metaTags
    + editButton /edit.html
    + title ТехИмпорт - Поставки компьютерного оборудования из Китая
    + style.css
    + body.html
    + script.js
    prompt.json
    Changed around line 1
    + {
    + "id": "msg_01XscPTJnpbqQ4gAJcY7gD2K",
    + "type": "message",
    + "role": "assistant",
    + "model": "claude-3-5-sonnet-20241022",
    + "content": [
    + {
    + "type": "text",
    + "text": "I'll create a website for a company specializing in computer hardware imports from China, targeting Russian-speaking customers.\n\n---domain---\ntechimport.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://techimport.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ТехИмпорт - Поставки компьютерного оборудования из Китая\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
    \n \n
    \n\n
    \n
    \n

    Надежные поставки компьютерного оборудования из Китая

    \n

    Качественное оборудование напрямую от производителей

    \n \n
    \n\n
    \n

    Наша продукция

    \n
    \n
    \n
    💻
    \n

    Компьютеры

    \n

    Серверы, рабочие станции, ноутбуки

    \n
    \n
    \n
    🔧
    \n

    Комплектующие

    \n

    Процессоры, материнские платы, видеокарты

    \n
    \n
    \n
    🖨️
    \n

    Периферия

    \n

    Принтеры, сканеры, МФУ

    \n
    \n
    \n
    \n\n
    \n

    Наши преимущества

    \n
    \n
    \n

    Прямые поставки

    \n

    Работаем напрямую с производителями

    \n
    \n
    \n

    Гарантия качества

    \n

    Проверка каждой партии товара

    \n
    \n
    \n

    Быстрая доставка

    \n

    Оптимальные маршруты поставок

    \n
    \n
    \n
    \n\n
    \n

    Свяжитесь с нами

    \n
    \n \n \n \n \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    ТехИмпорт

    \n

    Ваш надежный партнер в поставках компьютерного оборудования

    \n
    \n
    \n

    Контакты

    \n

    Email: info@techimport.ru

    \n

    Тел: +7 (495) 123-45-67

    \n
    \n
    \n
    \n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --text-color: #333;\n --background-light: #f5f6fa;\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: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n.main-nav {\n background: var(--primary-color);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\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-btn {\n display: none;\n background: none;\n border: none;\n color: white;\n font-size: 1.5rem;\n cursor: pointer;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n color: white;\n padding: 8rem 2rem 4rem;\n text-align: center;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n background: white;\n color: var(--primary-color);\n border: none;\n padding: 1rem 2rem;\n border-radius: 25px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: var(--transition);\n margin-top: 2rem;\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.product-grid, .advantages-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.product-card, .advantage-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.product-card:hover, .advantage-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\n}\n\n.product-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\nsection {\n padding: 4rem 2rem;\n}\n\nsection:nth-child(even) {\n background: var(--background-light);\n}\n\nh2 {\n text-align: center;\n margin-bottom: 2rem;\n color: var(--primary-color);\n}\n\n.contact-form {\n max-width: 600px;\n margin: 0 auto;\n display: grid;\n gap: 1rem;\n}\n\n.contact-form input,\n.contact-form textarea {\n padding: 0.8rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\n.contact-form button {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 1rem;\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: 2rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: block;\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 }\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', () => {\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 });\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 });\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Contact form handling\n const contactForm = document.getElementById('contact-form');\n \n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n // Simple form validation feedback\n const formData = new FormData(contactForm);\n alert('Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.');\n contactForm.reset();\n });\n\n // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1\n };\n\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 }, observerOptions);\n\n document.querySelectorAll('.product-card, .advantage-card').forEach(element => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(20px)';\n element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(element);\n });\n});\n\n---end---\n\nThis website features:\n1. Modern, clean design with smooth animations\n2. Fully responsive layout\n3. Interactive elements with hover effects\n4. Smooth scrolling navigation\n5. Contact form with basic validation\n6. Intersection Observer for scroll animations\n7. Mobile-friendly navigation menu\n8. Semantic HTML structure\n9. Accessible design elements\n10. Performance-optimized CSS animations\n\nThe color scheme is professional and trustworthy, using deep blues and clean whites. The layout is organized to guide visitors through the company's offerings, advantages, and contact information."
    + }
    + ],
    + "stop_reason": "end_turn",
    + "stop_sequence": null,
    + "usage": {
    + "input_tokens": 299,
    + "cache_creation_input_tokens": 0,
    + "cache_read_input_tokens": 0,
    + "output_tokens": 3106
    + }
    + }
    readme.scroll
    Changed around line 1
    + # techimport.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');
    + });
    +
    + // 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'
    + });
    + navLinks.classList.remove('active');
    + }
    + });
    + });
    +
    + // Contact form handling
    + const contactForm = document.getElementById('contact-form');
    +
    + contactForm.addEventListener('submit', (e) => {
    + e.preventDefault();
    +
    + // Simple form validation feedback
    + const formData = new FormData(contactForm);
    + alert('Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.');
    + contactForm.reset();
    + });
    +
    + // Intersection Observer for fade-in animations
    + const observerOptions = {
    + threshold: 0.1
    + };
    +
    + const observer = new IntersectionObserver((entries) => {
    + entries.forEach(entry => {
    + if (entry.isIntersecting) {
    + entry.target.style.opacity = '1';
    + entry.target.style.transform = 'translateY(0)';
    + }
    + });
    + }, observerOptions);
    +
    + document.querySelectorAll('.product-card, .advantage-card').forEach(element => {
    + element.style.opacity = '0';
    + element.style.transform = 'translateY(20px)';
    + element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    + observer.observe(element);
    + });
    + });
    style.css
    Changed around line 1
    + :root {
    + --primary-color: #2c3e50;
    + --accent-color: #3498db;
    + --text-color: #333;
    + --background-light: #f5f6fa;
    + --transition: all 0.3s ease;
    + }
    +
    + * {
    + 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);
    + }
    +
    + .main-nav {
    + background: var(--primary-color);
    + padding: 1rem;
    + position: fixed;
    + width: 100%;
    + top: 0;
    + z-index: 1000;
    + 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-btn {
    + display: none;
    + background: none;
    + border: none;
    + color: white;
    + font-size: 1.5rem;
    + cursor: pointer;
    + }
    +
    + .hero {
    + background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    + color: white;
    + padding: 8rem 2rem 4rem;
    + text-align: center;
    + }
    +
    + .hero h1 {
    + font-size: 2.5rem;
    + margin-bottom: 1rem;
    + }
    +
    + .cta-button {
    + background: white;
    + color: var(--primary-color);
    + border: none;
    + padding: 1rem 2rem;
    + border-radius: 25px;
    + font-size: 1.1rem;
    + cursor: pointer;
    + transition: var(--transition);
    + margin-top: 2rem;
    + }
    +
    + .cta-button:hover {
    + transform: translateY(-3px);
    + box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    + }
    +
    + .product-grid, .advantages-grid {
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    + gap: 2rem;
    + padding: 2rem;
    + }
    +
    + .product-card, .advantage-card {
    + background: white;
    + padding: 2rem;
    + border-radius: 10px;
    + box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    + transition: var(--transition);
    + }
    +
    + .product-card:hover, .advantage-card:hover {
    + transform: translateY(-5px);
    + box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    + }
    +
    + .product-icon {
    + font-size: 2.5rem;
    + margin-bottom: 1rem;
    + }
    +
    + section {
    + padding: 4rem 2rem;
    + }
    +
    + section:nth-child(even) {
    + background: var(--background-light);
    + }
    +
    + h2 {
    + text-align: center;
    + margin-bottom: 2rem;
    + color: var(--primary-color);
    + }
    +
    + .contact-form {
    + max-width: 600px;
    + margin: 0 auto;
    + display: grid;
    + gap: 1rem;
    + }
    +
    + .contact-form input,
    + .contact-form textarea {
    + padding: 0.8rem;
    + border: 1px solid #ddd;
    + border-radius: 5px;
    + }
    +
    + .contact-form button {
    + background: var(--accent-color);
    + color: white;
    + border: none;
    + padding: 1rem;
    + border-radius: 5px;
    + cursor: pointer;
    + transition: var(--transition);
    + }
    +
    + .contact-form button:hover {
    + background: var(--primary-color);
    + }
    +
    + footer {
    + background: var(--primary-color);
    + color: white;
    + padding: 2rem;
    + }
    +
    + .footer-content {
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    + gap: 2rem;
    + max-width: 1200px;
    + margin: 0 auto;
    + }
    +
    + @media (max-width: 768px) {
    + .mobile-menu-btn {
    + display: block;
    + }
    +
    + .nav-links {
    + display: none;
    + position: absolute;
    + top: 100%;
    + left: 0;
    + right: 0;
    + background: var(--primary-color);
    + flex-direction: column;
    + padding: 1rem;
    + }
    +
    + .nav-links.active {
    + display: flex;
    + }
    +
    + .hero h1 {
    + font-size: 2rem;
    + }
    + }