Changes to techbooks1.scroll.pub

root
root
19 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
    +
  • Featured
    • +
  • Categories
    • +
  • Deals
    • +
  • Contact
    • +
    +
    +
    +
    +
    +
    +

    Discover the Future of Tech Learning

    +

    Premium ICT books at unbeatable prices

    + Explore Books
    +
    +
    +
    +

    Featured Books

    +
    +
    +
    +

    Python Mastery

    +

    $49.99 $29.99

    +
    +
    +
    +
    +

    Web Development Guide

    +

    $59.99 $39.99

    +
    +
    +
    +
    +

    Cybersecurity Essentials

    +

    $69.99 $44.99

    +
    +
    +
    +
    +
    +
    +

    Categories

    +
    +
    Programming
    +
    Networking
    +
    Security
    +
    Data Science
    +
    +
    +
    +
    +

    Special Deals

    +
    +
    +

    Student Discount

    +

    20% off with valid student ID

    +
    +
    +

    Bundle Offer

    +

    Buy 3 books, get 1 free

    +
    +
    +
    +
    +
    +
    +
    +
    +

    Contact Us

    +

    Email: info@techbooks.scroll.pub

    +

    Phone: (555) 123-4567

    +
    +
    +

    Quick Links

    +
      +
    • Featured Books
      • +
    • Categories
      • +
    • Special Deals
      • +
      +
      +
      +
      index.scroll
      Changed around line 1
      + buildHtml
      + baseUrl https://techbooks.scroll.pub
      + metaTags
      + editButton /edit.html
      + title TechBooks - Premium ICT & Programming Books
      + style.css
      + body.html
      + script.js
      prompt.json
      Changed around line 1
      + {
      + "id": "msg_01KVdt9GWhnZKdCEmmjwxYJS",
      + "type": "message",
      + "role": "assistant",
      + "model": "claude-3-5-sonnet-20241022",
      + "content": [
      + {
      + "type": "text",
      + "text": "I'll create an ICT book sales promotion website focused on technology and educational books.\n\n---domain---\ntechbooks.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://techbooks.scroll.pub\nmetaTags\neditButton /edit.html\ntitle TechBooks - Premium ICT & Programming Books\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
      \n \n
      \n\n
      \n
      \n

      Discover the Future of Tech Learning

      \n

      Premium ICT books at unbeatable prices

      \n Explore Books\n
      \n\n
      \n

      Featured Books

      \n
      \n
      \n
      \n

      Python Mastery

      \n

      $49.99 $29.99

      \n \n
      \n
      \n
      \n

      Web Development Guide

      \n

      $59.99 $39.99

      \n \n
      \n
      \n
      \n

      Cybersecurity Essentials

      \n

      $69.99 $44.99

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

      Categories

      \n
      \n
      Programming
      \n
      Networking
      \n
      Security
      \n
      Data Science
      \n
      \n
      \n\n
      \n

      Special Deals

      \n
      \n
      \n

      Student Discount

      \n

      20% off with valid student ID

      \n
      \n
      \n

      Bundle Offer

      \n

      Buy 3 books, get 1 free

      \n
      \n
      \n
      \n
      \n\n\n\n---style.css---\n:root {\n --primary-color: #2a6af3;\n --secondary-color: #1d4ed8;\n --text-color: #333;\n --background-color: #f8fafc;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\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 background-color: var(--background-color);\n}\n\n/* Header & Navigation */\nheader {\n background: white;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\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 font-size: 1.5rem;\n font-weight: bold;\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: 80vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, #2a6af3 0%, #1d4ed8 100%);\n color: white;\n margin-top: 60px;\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: 30px;\n font-weight: bold;\n margin-top: 2rem;\n transition: transform 0.3s ease;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n/* Book Cards */\n.book-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.book-card {\n background: white;\n border-radius: 10px;\n padding: 1rem;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.book-card:hover {\n transform: translateY(-5px);\n}\n\n.book-image {\n height: 200px;\n background: #eee;\n border-radius: 5px;\n margin-bottom: 1rem;\n}\n\n.price {\n color: var(--primary-color);\n font-weight: bold;\n}\n\n.original {\n text-decoration: line-through;\n color: #666;\n margin-right: 0.5rem;\n}\n\n.buy-button {\n width: 100%;\n padding: 0.8rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.buy-button:hover {\n background: var(--secondary-color);\n}\n\n/* Categories */\n.category-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.category {\n background: white;\n padding: 2rem;\n text-align: center;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.category:hover {\n transform: scale(1.05);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .nav-toggle {\n display: block;\n cursor: pointer;\n }\n \n .nav-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--text-color);\n margin: 5px 0;\n transition: 0.3s;\n }\n \n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: 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 h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile Navigation Toggle\n const navToggle = document.querySelector('.nav-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n navToggle.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 // Close mobile menu if open\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Add to Cart Animation\n const buyButtons = document.querySelectorAll('.buy-button');\n buyButtons.forEach(button => {\n button.addEventListener('click', () => {\n button.textContent = 'Added to Cart!';\n button.style.backgroundColor = '#4CAF50';\n setTimeout(() => {\n button.textContent = 'Add to Cart';\n button.style.backgroundColor = '';\n }, 2000);\n });\n });\n\n // Intersection Observer for Fade-in Animation\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('fade-in');\n }\n });\n }, {\n threshold: 0.1\n });\n\n document.querySelectorAll('.book-card, .category').forEach(element => {\n observer.observe(element);\n });\n});\n\n---end---\n\nThis website features a modern, responsive design with smooth animations and transitions. It includes:\n\n1. Fixed header with responsive navigation\n2. Hero section with gradient background\n3. Featured books section with hover effects\n4. Categories grid with scale animations\n5. Special deals section\n6. Mobile-responsive design\n7. Smooth scroll behavior\n8. Add to Cart animations\n9. Intersection Observer for fade-in effects\n10. Clean, semantic HTML structure\n11. Accessible navigation\n12. Modern CSS with variables and flexbox/grid layouts\n13. Performance-optimized JavaScript\n\nThe design is professional yet engaging, with careful attention to typography, spacing, and color theory. The blue color scheme conveys trust and professionalism while maintaining visual appeal."
      + }
      + ],
      + "stop_reason": "end_turn",
      + "stop_sequence": null,
      + "usage": {
      + "input_tokens": 279,
      + "cache_creation_input_tokens": 0,
      + "cache_read_input_tokens": 0,
      + "output_tokens": 3071
      + }
      + }
      readme.scroll
      Changed around line 1
      + # techbooks1.scroll.pub
      + Website generated by Claude from prompt: i want my ICT book sales promotion site
      script.js
      Changed around line 1
      + document.addEventListener('DOMContentLoaded', () => {
      + // Mobile Navigation Toggle
      + const navToggle = document.querySelector('.nav-toggle');
      + const navLinks = document.querySelector('.nav-links');
      +
      + navToggle.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'
      + });
      + // Close mobile menu if open
      + navLinks.classList.remove('active');
      + }
      + });
      + });
      +
      + // Add to Cart Animation
      + const buyButtons = document.querySelectorAll('.buy-button');
      + buyButtons.forEach(button => {
      + button.addEventListener('click', () => {
      + button.textContent = 'Added to Cart!';
      + button.style.backgroundColor = '#4CAF50';
      + setTimeout(() => {
      + button.textContent = 'Add to Cart';
      + button.style.backgroundColor = '';
      + }, 2000);
      + });
      + });
      +
      + // Intersection Observer for Fade-in Animation
      + const observer = new IntersectionObserver((entries) => {
      + entries.forEach(entry => {
      + if (entry.isIntersecting) {
      + entry.target.classList.add('fade-in');
      + }
      + });
      + }, {
      + threshold: 0.1
      + });
      +
      + document.querySelectorAll('.book-card, .category').forEach(element => {
      + observer.observe(element);
      + });
      + });
      style.css
      Changed around line 1
      + :root {
      + --primary-color: #2a6af3;
      + --secondary-color: #1d4ed8;
      + --text-color: #333;
      + --background-color: #f8fafc;
      + --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      + }
      +
      + * {
      + 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);
      + background-color: var(--background-color);
      + }
      +
      + /* Header & Navigation */
      + header {
      + background: white;
      + box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      + position: fixed;
      + width: 100%;
      + top: 0;
      + z-index: 1000;
      + }
      +
      + nav {
      + max-width: 1200px;
      + margin: 0 auto;
      + padding: 1rem;
      + display: flex;
      + justify-content: space-between;
      + align-items: center;
      + }
      +
      + .logo {
      + font-size: 1.5rem;
      + font-weight: bold;
      + 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: 80vh;
      + display: flex;
      + flex-direction: column;
      + justify-content: center;
      + align-items: center;
      + text-align: center;
      + padding: 2rem;
      + background: linear-gradient(135deg, #2a6af3 0%, #1d4ed8 100%);
      + color: white;
      + margin-top: 60px;
      + }
      +
      + .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: 30px;
      + font-weight: bold;
      + margin-top: 2rem;
      + transition: transform 0.3s ease;
      + }
      +
      + .cta-button:hover {
      + transform: translateY(-2px);
      + }
      +
      + /* Book Cards */
      + .book-grid {
      + display: grid;
      + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      + gap: 2rem;
      + padding: 2rem;
      + max-width: 1200px;
      + margin: 0 auto;
      + }
      +
      + .book-card {
      + background: white;
      + border-radius: 10px;
      + padding: 1rem;
      + box-shadow: var(--card-shadow);
      + transition: transform 0.3s ease;
      + }
      +
      + .book-card:hover {
      + transform: translateY(-5px);
      + }
      +
      + .book-image {
      + height: 200px;
      + background: #eee;
      + border-radius: 5px;
      + margin-bottom: 1rem;
      + }
      +
      + .price {
      + color: var(--primary-color);
      + font-weight: bold;
      + }
      +
      + .original {
      + text-decoration: line-through;
      + color: #666;
      + margin-right: 0.5rem;
      + }
      +
      + .buy-button {
      + width: 100%;
      + padding: 0.8rem;
      + background: var(--primary-color);
      + color: white;
      + border: none;
      + border-radius: 5px;
      + cursor: pointer;
      + transition: background-color 0.3s ease;
      + }
      +
      + .buy-button:hover {
      + background: var(--secondary-color);
      + }
      +
      + /* Categories */
      + .category-grid {
      + display: grid;
      + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      + gap: 1rem;
      + padding: 2rem;
      + max-width: 1200px;
      + margin: 0 auto;
      + }
      +
      + .category {
      + background: white;
      + padding: 2rem;
      + text-align: center;
      + border-radius: 10px;
      + box-shadow: var(--card-shadow);
      + cursor: pointer;
      + transition: transform 0.3s ease;
      + }
      +
      + .category:hover {
      + transform: scale(1.05);
      + }
      +
      + /* Responsive Design */
      + @media (max-width: 768px) {
      + .nav-toggle {
      + display: block;
      + cursor: pointer;
      + }
      +
      + .nav-toggle span {
      + display: block;
      + width: 25px;
      + height: 3px;
      + background: var(--text-color);
      + margin: 5px 0;
      + transition: 0.3s;
      + }
      +
      + .nav-links {
      + display: none;
      + position: absolute;
      + top: 100%;
      + left: 0;
      + right: 0;
      + background: white;
      + flex-direction: column;
      + padding: 1rem;
      + text-align: center;
      + }
      +
      + .nav-links.active {
      + display: flex;
      + }
      +
      + .hero h1 {
      + font-size: 2rem;
      + }
      + }