commit d7fd78727ef670fa672ba3d078e257f5e8f7278b
Author: root <root@hub.scroll.pub>
Date: 2024-12-30 11:11:46 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8e1b0f6
--- /dev/null
+++ b/body.html
@@ -0,0 +1,97 @@
+<header>
+ <nav class="nav-container">
+ <div class="logo">CodeCraft</div>
+ <button class="mobile-menu-btn" 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="#services">Services</a></li>
+ <li><a href="#work">Our Work</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="hero-content">
+ <h1>Crafting Digital Excellence</h1>
+ <p>We transform ideas into powerful software solutions</p>
+ <a href="#contact" class="cta-button">Start Your Project</a>
+ </div>
+ <div class="hero-animation"></div>
+ </section>
+
+ <section id="services" class="services">
+ <h2>Our Services</h2>
+ <div class="services-grid">
+ <article class="service-card">
+ <div class="service-icon">📱</div>
+ <h3>Web Development</h3>
+ <p>Custom websites and web applications built with cutting-edge technologies.</p>
+ </article>
+ <article class="service-card">
+ <div class="service-icon">💻</div>
+ <h3>Software Development</h3>
+ <p>Scalable software solutions tailored to your business needs.</p>
+ </article>
+ <article class="service-card">
+ <div class="service-icon">🔄</div>
+ <h3>Digital Transformation</h3>
+ <p>Modernize your business with innovative digital solutions.</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="work" class="work">
+ <h2>Featured Projects</h2>
+ <div class="project-grid">
+ <article class="project-card">
+ <div class="project-image"></div>
+ <h3>E-Commerce Platform</h3>
+ <p>A scalable online marketplace solution</p>
+ </article>
+ <article class="project-card">
+ <div class="project-image"></div>
+ <h3>Healthcare App</h3>
+ <p>Patient management system</p>
+ </article>
+ <article class="project-card">
+ <div class="project-image"></div>
+ <h3>FinTech Solution</h3>
+ <p>Secure banking application</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Get In Touch</h2>
+ <form id="contact-form">
+ <div class="form-group">
+ <input type="text" id="name" required placeholder="Your Name">
+ </div>
+ <div class="form-group">
+ <input type="email" id="email" required placeholder="Your Email">
+ </div>
+ <div class="form-group">
+ <textarea id="message" required placeholder="Your Message"></textarea>
+ </div>
+ <button type="submit" class="submit-btn">Send Message</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>CodeCraft</h4>
+ <p>Building tomorrow's digital solutions today</p>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <p>hello@codecraft.scroll.pub</p>
+ <p>+1 (555) 123-4567</p>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..1bfb0b9
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+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
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..1bc2a49
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<header>\n <nav class=\"nav-container\">\n <div class=\"logo\">CodeCraft</div>\n <button class=\"mobile-menu-btn\" 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=\"#services\">Services</a></li>\n <li><a href=\"#work\">Our Work</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>Crafting Digital Excellence</h1>\n <p>We transform ideas into powerful software solutions</p>\n <a href=\"#contact\" class=\"cta-button\">Start Your Project</a>\n </div>\n <div class=\"hero-animation\"></div>\n </section>\n\n <section id=\"services\" class=\"services\">\n <h2>Our Services</h2>\n <div class=\"services-grid\">\n <article class=\"service-card\">\n <div class=\"service-icon\">📱</div>\n <h3>Web Development</h3>\n <p>Custom websites and web applications built with cutting-edge technologies.</p>\n </article>\n <article class=\"service-card\">\n <div class=\"service-icon\">💻</div>\n <h3>Software Development</h3>\n <p>Scalable software solutions tailored to your business needs.</p>\n </article>\n <article class=\"service-card\">\n <div class=\"service-icon\">🔄</div>\n <h3>Digital Transformation</h3>\n <p>Modernize your business with innovative digital solutions.</p>\n </article>\n </div>\n </section>\n\n <section id=\"work\" class=\"work\">\n <h2>Featured Projects</h2>\n <div class=\"project-grid\">\n <article class=\"project-card\">\n <div class=\"project-image\"></div>\n <h3>E-Commerce Platform</h3>\n <p>A scalable online marketplace solution</p>\n </article>\n <article class=\"project-card\">\n <div class=\"project-image\"></div>\n <h3>Healthcare App</h3>\n <p>Patient management system</p>\n </article>\n <article class=\"project-card\">\n <div class=\"project-image\"></div>\n <h3>FinTech Solution</h3>\n <p>Secure banking application</p>\n </article>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Get In Touch</h2>\n <form id=\"contact-form\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"name\" required placeholder=\"Your Name\">\n </div>\n <div class=\"form-group\">\n <input type=\"email\" id=\"email\" required placeholder=\"Your Email\">\n </div>\n <div class=\"form-group\">\n <textarea id=\"message\" required placeholder=\"Your Message\"></textarea>\n </div>\n <button type=\"submit\" class=\"submit-btn\">Send Message</button>\n </form>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>CodeCraft</h4>\n <p>Building tomorrow's digital solutions today</p>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <p>hello@codecraft.scroll.pub</p>\n <p>+1 (555) 123-4567</p>\n </div>\n </div>\n</footer>\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
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..92d7772
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# codecraft.scroll.pub
+Website generated by Claude from prompt: Create a website for a software development agency
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..448c2fc
--- /dev/null
+++ b/script.js
@@ -0,0 +1,58 @@
+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);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c91b3eb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,221 @@
+: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;
+ }
+}