Changes to codecraft.scroll.pub

root

22 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     CodeCraft
+     
+       
+     
+     
+       Home
+       Services
+       Our Work
+       Contact
+     
+   
+ 
+ 
+ 
+   
+     
+       Crafting Digital Excellence
+       We transform ideas into powerful software solutions
+       Start Your Project
+     
+     
+   
+ 
+   
+     Our Services
+     
+       
+         📱
+         Web Development
+         Custom websites and web applications built with cutting-edge technologies.
+       
+       
+         💻
+         Software Development
+         Scalable software solutions tailored to your business needs.
+       
+       
+         🔄
+         Digital Transformation
+         Modernize your business with innovative digital solutions.
+       
+     
+   
+ 
+   
+     Featured Projects
+     
+       
+         
+         E-Commerce Platform
+         A scalable online marketplace solution
+       
+       
+         
+         Healthcare App
+         Patient management system
+       
+       
+         
+         FinTech Solution
+         Secure banking application
+       
+     
+   
+ 
+   
+     Get In Touch
+     
+       
+         
+       
+       
+         
+       
+       
+         
+       
+       
+     
+   
+ 
+ 
+ 
+   
+     
+       CodeCraft
+       Building tomorrow's digital solutions today
+     
+     
+       Contact
+       hello@codecraft.scroll.pub
+       +1 (555) 123-4567
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://codecraft.scroll.pub
+ metaTags
+  description "CodeCraft - Expert Software Development Agency specializing in custom solutions, web applications, and digital transformation"
+  keywords "software development, web development, custom software, digital solutions, software agency"
+ editButton /edit.html
+ title CodeCraft - Expert Software Development Agency
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01CrQxPVWNnJuHVYs4vqxAeN",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Let me create a clean, modern website for a software development agency.\n\n---domain---\ncodecraft.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://codecraft.scroll.pub\nmetaTags\n description \"CodeCraft - Expert Software Development Agency specializing in custom solutions, web applications, and digital transformation\"\n keywords \"software development, web development, custom software, digital solutions, software agency\"\neditButton /edit.html\ntitle CodeCraft - Expert Software Development Agency\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    CodeCraft
\n    \n    \n      Home
\n      Services
\n      Our Work
\n      Contact
\n    \n  \n\n\n\n  \n    \n      Crafting Digital Excellence\n      We transform ideas into powerful software solutions
\n      Start Your Project\n    
\n    
\n  \n\n  \n    Our Services\n    \n      \n        📱
\n        Web Development\n        Custom websites and web applications built with cutting-edge technologies.
\n      \n      \n        💻
\n        Software Development\n        Scalable software solutions tailored to your business needs.
\n      \n      \n        🔄
\n        Digital Transformation\n        Modernize your business with innovative digital solutions.
\n      \n    
\n  \n\n  \n    Featured Projects\n    \n      \n        
\n        E-Commerce Platform\n        A scalable online marketplace solution
\n      \n      \n        
\n        Healthcare App\n        Patient management system
\n      \n      \n        
\n        FinTech Solution\n        Secure banking application
\n      \n    
\n  \n\n  \n    Get In Touch\n    \n      \n        \n      
\n      \n        \n      
\n      \n        \n      
\n      \n    \n  \n\n\n\n  \n    \n      CodeCraft\n      Building tomorrow's digital solutions today
\n    
\n    \n      Contact\n      hello@codecraft.scroll.pub
\n      +1 (555) 123-4567
\n    
\n  
\n\n\n---style.css---\n:root {\n  --primary-color: #2d3436;\n  --accent-color: #00b894;\n  --text-color: #2d3436;\n  --light-bg: #f5f6fa;\n  --transition: all 0.3s ease;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  line-height: 1.6;\n  color: var(--text-color);\n}\n\n/* Navigation */\n.nav-container {\n  position: fixed;\n  width: 100%;\n  padding: 1rem 2rem;\n  background: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(10px);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 1000;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\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: var(--transition);\n}\n\n.nav-links a:hover {\n  color: var(--accent-color);\n}\n\n/* Hero Section */\n.hero {\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 2rem;\n  background: linear-gradient(135deg, #fff 0%, var(--light-bg) 100%);\n}\n\n.hero-content {\n  max-width: 600px;\n}\n\n.hero h1 {\n  font-size: 3.5rem;\n  margin-bottom: 1rem;\n  background: linear-gradient(to right, var(--primary-color), var(--accent-color));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.hero-animation {\n  width: 400px;\n  height: 400px;\n  background: radial-gradient(circle at center, var(--accent-color) 0%, transparent 70%);\n  animation: pulse 4s infinite;\n}\n\n/* Services Section */\n.services {\n  padding: 5rem 2rem;\n  background: var(--light-bg);\n}\n\n.services-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  margin-top: 3rem;\n}\n\n.service-card {\n  background: white;\n  padding: 2rem;\n  border-radius: 10px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  transition: var(--transition);\n}\n\n.service-card:hover {\n  transform: translateY(-5px);\n}\n\n.service-icon {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n}\n\n/* Projects Section */\n.work {\n  padding: 5rem 2rem;\n}\n\n.project-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  margin-top: 3rem;\n}\n\n.project-card {\n  position: relative;\n  overflow: hidden;\n  border-radius: 10px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.project-image {\n  height: 200px;\n  background: var(--accent-color);\n  opacity: 0.8;\n}\n\n/* Contact Section */\n.contact {\n  padding: 5rem 2rem;\n  background: var(--light-bg);\n}\n\n.form-group {\n  margin-bottom: 1.5rem;\n}\n\ninput, textarea {\n  width: 100%;\n  padding: 1rem;\n  border: 2px solid transparent;\n  border-radius: 5px;\n  background: white;\n  transition: var(--transition);\n}\n\ninput:focus, textarea:focus {\n  outline: none;\n  border-color: var(--accent-color);\n}\n\n.submit-btn {\n  background: var(--accent-color);\n  color: white;\n  padding: 1rem 2rem;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: var(--transition);\n}\n\n.submit-btn:hover {\n  background: var(--primary-color);\n}\n\n/* Footer */\nfooter {\n  background: var(--primary-color);\n  color: white;\n  padding: 3rem 2rem;\n}\n\n.footer-content {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n}\n\n/* Animations */\n@keyframes pulse {\n  0% { transform: scale(1); opacity: 0.6; }\n  50% { transform: scale(1.05); opacity: 0.8; }\n  100% { transform: scale(1); opacity: 0.6; }\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n  .nav-links {\n    display: none;\n  }\n  \n  .mobile-menu-btn {\n    display: block;\n  }\n  \n  .hero h1 {\n    font-size: 2.5rem;\n  }\n  \n  .hero-animation {\n    display: none;\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.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\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      target?.scrollIntoView({\n        behavior: 'smooth'\n      });\n    });\n  });\n\n  // Form submission handling\n  const contactForm = document.getElementById('contact-form');\n  contactForm?.addEventListener('submit', (e) => {\n    e.preventDefault();\n    const formData = {\n      name: document.getElementById('name').value,\n      email: document.getElementById('email').value,\n      message: document.getElementById('message').value\n    };\n    \n    // Here you would typically send the form data to a server\n    console.log('Form submitted:', formData);\n    alert('Thank you for your message! We will get back to you soon.');\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  // 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 = 'all 0.6s ease-out';\n    observer.observe(section);\n  });\n});\n\n---end---\n\nThe website features a modern, clean design with smooth animations, responsive layout, and interactive elements. Key features include:\n\n1. Sticky navigation with smooth scroll\n2. Hero section with gradient text and animation\n3. Services section with hover effects\n4. Project showcase\n5. Contact form with validation\n6. Responsive design for all screen sizes\n7. Intersection Observer for scroll animations\n8. Accessibility considerations\n9. SEO-friendly structure\n10. Performance optimizations\n\nThe design uses CSS variables for easy theme customization and follows modern best practices for both desktop and mobile experiences."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 278,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 3323
+   }
+ }

readme.scroll

Changed around line 1

+ # codecraft.scroll.pub

+ Website generated by Claude from prompt: Create a website for a software development agency

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.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+   });
+ 
+   // 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'));
+       target?.scrollIntoView({
+         behavior: 'smooth'
+       });
+     });
+   });
+ 
+   // Form submission handling
+   const contactForm = document.getElementById('contact-form');
+   contactForm?.addEventListener('submit', (e) => {
+     e.preventDefault();
+     const formData = {
+       name: document.getElementById('name').value,
+       email: document.getElementById('email').value,
+       message: document.getElementById('message').value
+     };
+ 
+     // Here you would typically send the form data to a server
+     console.log('Form submitted:', formData);
+     alert('Thank you for your message! We will get back to you soon.');
+     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);
+ 
+   // Apply fade-in animation to sections
+   document.querySelectorAll('section').forEach(section => {
+     section.style.opacity = '0';
+     section.style.transform = 'translateY(20px)';
+     section.style.transition = 'all 0.6s ease-out';
+     observer.observe(section);
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2d3436;
+   --accent-color: #00b894;
+   --text-color: #2d3436;
+   --light-bg: #f5f6fa;
+   --transition: all 0.3s ease;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ html {
+   scroll-behavior: smooth;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+ }
+ 
+ /* Navigation */
+ .nav-container {
+   position: fixed;
+   width: 100%;
+   padding: 1rem 2rem;
+   background: rgba(255, 255, 255, 0.95);
+   backdrop-filter: blur(10px);
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   z-index: 1000;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ .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: var(--transition);
+ }
+ 
+ .nav-links a:hover {
+   color: var(--accent-color);
+ }
+ 
+ /* Hero Section */
+ .hero {
+   min-height: 100vh;
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   padding: 2rem;
+   background: linear-gradient(135deg, #fff 0%, var(--light-bg) 100%);
+ }
+ 
+ .hero-content {
+   max-width: 600px;
+ }
+ 
+ .hero h1 {
+   font-size: 3.5rem;
+   margin-bottom: 1rem;
+   background: linear-gradient(to right, var(--primary-color), var(--accent-color));
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+ }
+ 
+ .hero-animation {
+   width: 400px;
+   height: 400px;
+   background: radial-gradient(circle at center, var(--accent-color) 0%, transparent 70%);
+   animation: pulse 4s infinite;
+ }
+ 
+ /* Services Section */
+ .services {
+   padding: 5rem 2rem;
+   background: var(--light-bg);
+ }
+ 
+ .services-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+   margin-top: 3rem;
+ }
+ 
+ .service-card {
+   background: white;
+   padding: 2rem;
+   border-radius: 10px;
+   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+   transition: var(--transition);
+ }
+ 
+ .service-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .service-icon {
+   font-size: 2.5rem;
+   margin-bottom: 1rem;
+ }
+ 
+ /* Projects Section */
+ .work {
+   padding: 5rem 2rem;
+ }
+ 
+ .project-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+   margin-top: 3rem;
+ }
+ 
+ .project-card {
+   position: relative;
+   overflow: hidden;
+   border-radius: 10px;
+   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+ 
+ .project-image {
+   height: 200px;
+   background: var(--accent-color);
+   opacity: 0.8;
+ }
+ 
+ /* Contact Section */
+ .contact {
+   padding: 5rem 2rem;
+   background: var(--light-bg);
+ }
+ 
+ .form-group {
+   margin-bottom: 1.5rem;
+ }
+ 
+ input, textarea {
+   width: 100%;
+   padding: 1rem;
+   border: 2px solid transparent;
+   border-radius: 5px;
+   background: white;
+   transition: var(--transition);
+ }
+ 
+ input:focus, textarea:focus {
+   outline: none;
+   border-color: var(--accent-color);
+ }
+ 
+ .submit-btn {
+   background: var(--accent-color);
+   color: white;
+   padding: 1rem 2rem;
+   border: none;
+   border-radius: 5px;
+   cursor: pointer;
+   transition: var(--transition);
+ }
+ 
+ .submit-btn:hover {
+   background: var(--primary-color);
+ }
+ 
+ /* Footer */
+ footer {
+   background: var(--primary-color);
+   color: white;
+   padding: 3rem 2rem;
+ }
+ 
+ .footer-content {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+ }
+ 
+ /* Animations */
+ @keyframes pulse {
+   0% { transform: scale(1); opacity: 0.6; }
+   50% { transform: scale(1.05); opacity: 0.8; }
+   100% { transform: scale(1); opacity: 0.6; }
+ }
+ 
+ /* Mobile Responsiveness */
+ @media (max-width: 768px) {
+   .nav-links {
+     display: none;
+   }
+ 
+   .mobile-menu-btn {
+     display: block;
+   }
+ 
+   .hero h1 {
+     font-size: 2.5rem;
+   }
+ 
+   .hero-animation {
+     display: none;
+   }
+ }