Changes to toyland.scroll.pub

root
root
8 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+

ToyLand

+ Where Magic Comes to Play
+
+
+
+
+
    +
  • Featured
    • +
  • Categories
    • +
  • New Arrivals
    • +
  • Sale
    • +
    +
    +
    +
    +
    +
    +
    +

    Welcome to Wonderland

    +

    Discover our magical collection of toys that spark imagination

    + Explore Now
    +
    +
    +
    +
    +

    Featured Toys

    +
    +
    +
    +
    New
    + Plush Teddy Bear
    +
    +
    +

    Cuddly Teddy Bear

    +

    $24.99

    +
    +
    +
    +
    +
    +
    +
    +
    +

    Shop by Category

    +
    +
    +
    🧸
    +

    Plush Toys

    +
    +
    +
    🎮
    +

    Games

    +
    +
    +
    🚂
    +

    Vehicles

    +
    +
    +
    🎨
    +

    Arts & Crafts

    +
    +
    +
    +
    +
    +
    +
    +
    +

    Contact Us

    +

    Email: hello@toyland.scroll.pub

    +

    Phone: (555) 123-4567

    +
    +
    +

    Quick Links

    +
      +
    • About Us
      • +
    • Shipping Policy
      • +
    • Returns
      • +
    • FAQ
      • +
      +
      +
      +
      index.scroll
      Changed around line 1
      + buildHtml
      + baseUrl https://toyland.scroll.pub
      + metaTags
      + title ToyLand - Magical Toys for Every Child
      + description Experience the joy of play at ToyLand - your one-stop shop for quality toys, games, and magical childhood memories.
      + keywords toys, children toys, games, educational toys, toy store, kids toys
      + editButton /edit.html
      + style.css
      + body.html
      + script.js
      prompt.json
      Changed around line 1
      + {
      + "id": "msg_01CKh2s22SPtWF9k4rX5YBhv",
      + "type": "message",
      + "role": "assistant",
      + "model": "claude-3-5-sonnet-20241022",
      + "content": [
      + {
      + "type": "text",
      + "text": "I'll create a fun and engaging toy store website.\n\nSuggested domain: toyland.scroll.pub\n\n---domain---\ntoyland.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://toyland.scroll.pub\nmetaTags\ntitle ToyLand - Magical Toys for Every Child\ndescription Experience the joy of play at ToyLand - your one-stop shop for quality toys, games, and magical childhood memories.\nkeywords toys, children toys, games, educational toys, toy store, kids toys\neditButton /edit.html\nstyle.css\nbody.html\nscript.js\n---body.html---\n
      \n \n
      \n\n
      \n
      \n
      \n

      Welcome to Wonderland

      \n

      Discover our magical collection of toys that spark imagination

      \n Explore Now\n
      \n
      \n\n
      \n

      Featured Toys

      \n
      \n
      \n
      \n
      New
      \n \"Plush\n
      \n
      \n

      Cuddly Teddy Bear

      \n

      $24.99

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

      Shop by Category

      \n
      \n \n
      🧸
      \n

      Plush Toys

      \n       \n \n
      🎮
      \n

      Games

      \n       \n \n
      🚂
      \n

      Vehicles

      \n       \n \n
      🎨
      \n

      Arts & Crafts

      \n       \n
      \n
      \n
      \n\n\n---style.css---\n:root {\n --primary: #ff6b6b;\n --secondary: #4ecdc4;\n --accent: #ffe66d;\n --text: #2f2f2f;\n --background: #ffffff;\n --spacing: 2rem;\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 color: var(--text);\n line-height: 1.6;\n}\n\n/* Header & Navigation */\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem var(--spacing);\n background: var(--background);\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.logo {\n display: flex;\n flex-direction: column;\n}\n\n.logo h1 {\n font-size: 2rem;\n color: var(--primary);\n margin: 0;\n}\n\n.tagline {\n font-size: 0.9rem;\n color: var(--text);\n opacity: 0.8;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n/* Hero Section */\n.hero {\n background: linear-gradient(45deg, var(--primary), var(--secondary));\n min-height: 60vh;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: white;\n padding: var(--spacing);\n}\n\n.hero-content h2 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--accent);\n color: var(--text);\n text-decoration: none;\n border-radius: 50px;\n font-weight: bold;\n transition: transform 0.3s ease;\n}\n\n.cta-button:hover {\n transform: scale(1.05);\n}\n\n/* Product Grid */\n.product-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: var(--spacing);\n padding: var(--spacing);\n}\n\n.product-card {\n background: var(--background);\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.product-card:hover {\n transform: translateY(-5px);\n}\n\n.product-image {\n position: relative;\n padding-top: 100%;\n}\n\n.product-image img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.ribbon {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: var(--accent);\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-weight: bold;\n}\n\n.product-info {\n padding: 1rem;\n text-align: center;\n}\n\n/* Category Grid */\n.category-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: var(--spacing);\n padding: var(--spacing);\n}\n\n.category-card {\n background: var(--background);\n padding: 2rem;\n border-radius: 15px;\n text-align: center;\n text-decoration: none;\n color: var(--text);\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.category-card:hover {\n transform: translateY(-5px);\n}\n\n.category-icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n/* Footer */\nfooter {\n background: var(--text);\n color: var(--background);\n padding: var(--spacing);\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: var(--spacing);\n}\n\n.footer-section h3 {\n margin-bottom: 1rem;\n}\n\n.footer-section ul {\n list-style: none;\n}\n\n.footer-section a {\n color: var(--background);\n text-decoration: none;\n opacity: 0.8;\n transition: opacity 0.3s ease;\n}\n\n.footer-section a:hover {\n opacity: 1;\n}\n\n/* Mobile Responsiveness */\n.mobile-menu {\n display: none;\n flex-direction: column;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n\n.mobile-menu span {\n width: 25px;\n height: 2px;\n background: var(--text);\n transition: 0.3s ease;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: flex;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--background);\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---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile Menu Toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n mobileMenu.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 document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Add to Cart Animation\n const addToCartButtons = document.querySelectorAll('.add-to-cart');\n addToCartButtons.forEach(button => {\n button.addEventListener('click', function() {\n this.innerHTML = '✓ Added';\n this.style.background = '#4ecdc4';\n setTimeout(() => {\n this.innerHTML = 'Add to Cart';\n this.style.background = '';\n }, 2000);\n });\n });\n\n // Intersection Observer for Fade-in Animation\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.product-card, .category-card').forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(20px)';\n el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(el);\n });\n});\n\n// Add CSS class for fade-in animation\ndocument.head.insertAdjacentHTML('beforeend', `\n \n`);\n---end---"
      + }
      + ],
      + "stop_reason": "end_turn",
      + "stop_sequence": null,
      + "usage": {
      + "input_tokens": 275,
      + "cache_creation_input_tokens": 0,
      + "cache_read_input_tokens": 0,
      + "output_tokens": 3228
      + }
      + }
      readme.scroll
      Changed around line 1
      + # toyland.scroll.pub
      +
      + website generated by Claude from prompt: a website that sells toys
      script.js
      Changed around line 1
      + document.addEventListener('DOMContentLoaded', () => {
      + // Mobile Menu Toggle
      + const mobileMenu = document.querySelector('.mobile-menu');
      + const navLinks = document.querySelector('.nav-links');
      +
      + mobileMenu.addEventListener('click', () => {
      + navLinks.classList.toggle('active');
      + mobileMenu.classList.toggle('active');
      + });
      +
      + // 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'
      + });
      + });
      + });
      +
      + // Add to Cart Animation
      + const addToCartButtons = document.querySelectorAll('.add-to-cart');
      + addToCartButtons.forEach(button => {
      + button.addEventListener('click', function() {
      + this.innerHTML = '✓ Added';
      + this.style.background = '#4ecdc4';
      + setTimeout(() => {
      + this.innerHTML = 'Add to Cart';
      + this.style.background = '';
      + }, 2000);
      + });
      + });
      +
      + // Intersection Observer for Fade-in Animation
      + const observerOptions = {
      + threshold: 0.1,
      + rootMargin: '0px 0px -50px 0px'
      + };
      +
      + const observer = new IntersectionObserver((entries) => {
      + entries.forEach(entry => {
      + if (entry.isIntersecting) {
      + entry.target.classList.add('visible');
      + observer.unobserve(entry.target);
      + }
      + });
      + }, observerOptions);
      +
      + document.querySelectorAll('.product-card, .category-card').forEach(el => {
      + el.style.opacity = '0';
      + el.style.transform = 'translateY(20px)';
      + el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
      + observer.observe(el);
      + });
      + });
      +
      + // Add CSS class for fade-in animation
      + document.head.insertAdjacentHTML('beforeend', `
      +
      + `);
      style.css
      Changed around line 1
      + :root {
      + --primary: #ff6b6b;
      + --secondary: #4ecdc4;
      + --accent: #ffe66d;
      + --text: #2f2f2f;
      + --background: #ffffff;
      + --spacing: 2rem;
      + }
      +
      + * {
      + margin: 0;
      + padding: 0;
      + box-sizing: border-box;
      + }
      +
      + body {
      + font-family: 'Segoe UI', system-ui, sans-serif;
      + color: var(--text);
      + line-height: 1.6;
      + }
      +
      + /* Header & Navigation */
      + .main-nav {
      + display: flex;
      + justify-content: space-between;
      + align-items: center;
      + padding: 1rem var(--spacing);
      + background: var(--background);
      + box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      + }
      +
      + .logo {
      + display: flex;
      + flex-direction: column;
      + }
      +
      + .logo h1 {
      + font-size: 2rem;
      + color: var(--primary);
      + margin: 0;
      + }
      +
      + .tagline {
      + font-size: 0.9rem;
      + color: var(--text);
      + opacity: 0.8;
      + }
      +
      + .nav-links {
      + display: flex;
      + gap: 2rem;
      + list-style: none;
      + }
      +
      + .nav-links a {
      + text-decoration: none;
      + color: var(--text);
      + font-weight: 500;
      + transition: color 0.3s ease;
      + }
      +
      + .nav-links a:hover {
      + color: var(--primary);
      + }
      +
      + /* Hero Section */
      + .hero {
      + background: linear-gradient(45deg, var(--primary), var(--secondary));
      + min-height: 60vh;
      + display: flex;
      + align-items: center;
      + justify-content: center;
      + text-align: center;
      + color: white;
      + padding: var(--spacing);
      + }
      +
      + .hero-content h2 {
      + font-size: 3rem;
      + margin-bottom: 1rem;
      + }
      +
      + .cta-button {
      + display: inline-block;
      + padding: 1rem 2rem;
      + background: var(--accent);
      + color: var(--text);
      + text-decoration: none;
      + border-radius: 50px;
      + font-weight: bold;
      + transition: transform 0.3s ease;
      + }
      +
      + .cta-button:hover {
      + transform: scale(1.05);
      + }
      +
      + /* Product Grid */
      + .product-grid {
      + display: grid;
      + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      + gap: var(--spacing);
      + padding: var(--spacing);
      + }
      +
      + .product-card {
      + background: var(--background);
      + border-radius: 15px;
      + overflow: hidden;
      + box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      + transition: transform 0.3s ease;
      + }
      +
      + .product-card:hover {
      + transform: translateY(-5px);
      + }
      +
      + .product-image {
      + position: relative;
      + padding-top: 100%;
      + }
      +
      + .product-image img {
      + position: absolute;
      + top: 0;
      + left: 0;
      + width: 100%;
      + height: 100%;
      + object-fit: cover;
      + }
      +
      + .ribbon {
      + position: absolute;
      + top: 1rem;
      + right: 1rem;
      + background: var(--accent);
      + padding: 0.5rem 1rem;
      + border-radius: 20px;
      + font-weight: bold;
      + }
      +
      + .product-info {
      + padding: 1rem;
      + text-align: center;
      + }
      +
      + /* Category Grid */
      + .category-grid {
      + display: grid;
      + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      + gap: var(--spacing);
      + padding: var(--spacing);
      + }
      +
      + .category-card {
      + background: var(--background);
      + padding: 2rem;
      + border-radius: 15px;
      + text-align: center;
      + text-decoration: none;
      + color: var(--text);
      + box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      + transition: transform 0.3s ease;
      + }
      +
      + .category-card:hover {
      + transform: translateY(-5px);
      + }
      +
      + .category-icon {
      + font-size: 3rem;
      + margin-bottom: 1rem;
      + }
      +
      + /* Footer */
      + footer {
      + background: var(--text);
      + color: var(--background);
      + padding: var(--spacing);
      + }
      +
      + .footer-content {
      + display: grid;
      + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      + gap: var(--spacing);
      + }
      +
      + .footer-section h3 {
      + margin-bottom: 1rem;
      + }
      +
      + .footer-section ul {
      + list-style: none;
      + }
      +
      + .footer-section a {
      + color: var(--background);
      + text-decoration: none;
      + opacity: 0.8;
      + transition: opacity 0.3s ease;
      + }
      +
      + .footer-section a:hover {
      + opacity: 1;
      + }
      +
      + /* Mobile Responsiveness */
      + .mobile-menu {
      + display: none;
      + flex-direction: column;
      + gap: 6px;
      + background: none;
      + border: none;
      + cursor: pointer;
      + padding: 0.5rem;
      + }
      +
      + .mobile-menu span {
      + width: 25px;
      + height: 2px;
      + background: var(--text);
      + transition: 0.3s ease;
      + }
      +
      + @media (max-width: 768px) {
      + .mobile-menu {
      + display: flex;
      + }
      +
      + .nav-links {
      + display: none;
      + position: absolute;
      + top: 100%;
      + left: 0;
      + right: 0;
      + background: var(--background);
      + flex-direction: column;
      + padding: 1rem;
      + text-align: center;
      + }
      +
      + .nav-links.active {
      + display: flex;
      + }
      +
      + .hero-content h2 {
      + font-size: 2rem;
      + }
      + }