Last 10 Commits for digibazaar.scroll.pub

commit ad20fcf2681b34443b3c7a55dde87d1d1aa921d7 Author: root <root@hub.scroll.pub> Date: 2024-12-27 19:13:29 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..c7ef860 --- /dev/null +++ b/body.html @@ -0,0 +1,64 @@ +<header> + <nav> + <div class="logo">DigiBazaar</div> + <div class="nav-links"> + <a href="#products">Products</a> + <a href="#sell">Start Selling</a> + <a href="#login" class="btn-login">Login</a> + <a href="#register" class="btn-register">Register</a> + </div> + </nav> +</header> + +<main> + <section class="hero"> + <h1>Turn Your Knowledge Into Profit</h1> + <p>Create, sell, and manage digital products with ease</p> + <button class="cta-button">Start Now</button> + </section> + + <section class="features"> + <h2>Why Choose DigiBazaar?</h2> + <div class="feature-grid"> + <div class="feature-card"> + <i class="icon-secure"></i> + <h3>Secure Payments</h3> + <p>Multi-layer security for safe transactions</p> + </div> + <div class="feature-card"> + <i class="icon-analytics"></i> + <h3>Sales Analytics</h3> + <p>Track your performance in real-time</p> + </div> + <div class="feature-card"> + <i class="icon-support"></i> + <h3>24/7 Support</h3> + <p>We're here whenever you need help</p> + </div> + </div> + </section> + + <section class="products"> + <h2>Featured Products</h2> + <div class="product-grid" id="productGrid"></div> + </section> +</main> + +<footer> + <div class="footer-content"> + <div class="footer-section"> + <h4>DigiBazaar</h4> + <p>Your trusted platform for digital product sales</p> + </div> + <div class="footer-section"> + <h4>Quick Links</h4> + <a href="#about">About Us</a> + <a href="#terms">Terms</a> + <a href="#privacy">Privacy</a> + </div> + <div class="footer-section"> + <h4>Contact</h4> + <p>support@digibazaar.scroll.pub</p> + </div> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..9c467f0 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://digibazaar.scroll.pub +metaTags +editButton /edit.html +title DigiBazaar - Your Digital Product Marketplace +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..954b108 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_017TuWUqHejD1PHbxU1izQz8", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a Hotmart-style digital product marketplace website.\n\n---domain---\ndigibazaar.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://digibazaar.scroll.pub\nmetaTags\neditButton /edit.html\ntitle DigiBazaar - Your Digital Product Marketplace\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">DigiBazaar</div>\n <div class=\"nav-links\">\n <a href=\"#products\">Products</a>\n <a href=\"#sell\">Start Selling</a>\n <a href=\"#login\" class=\"btn-login\">Login</a>\n <a href=\"#register\" class=\"btn-register\">Register</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Turn Your Knowledge Into Profit</h1>\n <p>Create, sell, and manage digital products with ease</p>\n <button class=\"cta-button\">Start Now</button>\n </section>\n\n <section class=\"features\">\n <h2>Why Choose DigiBazaar?</h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <i class=\"icon-secure\"></i>\n <h3>Secure Payments</h3>\n <p>Multi-layer security for safe transactions</p>\n </div>\n <div class=\"feature-card\">\n <i class=\"icon-analytics\"></i>\n <h3>Sales Analytics</h3>\n <p>Track your performance in real-time</p>\n </div>\n <div class=\"feature-card\">\n <i class=\"icon-support\"></i>\n <h3>24/7 Support</h3>\n <p>We're here whenever you need help</p>\n </div>\n </div>\n </section>\n\n <section class=\"products\">\n <h2>Featured Products</h2>\n <div class=\"product-grid\" id=\"productGrid\"></div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>DigiBazaar</h4>\n <p>Your trusted platform for digital product sales</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <a href=\"#about\">About Us</a>\n <a href=\"#terms\">Terms</a>\n <a href=\"#privacy\">Privacy</a>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <p>support@digibazaar.scroll.pub</p>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #4a90e2;\n --secondary: #2c3e50;\n --accent: #e74c3c;\n --background: #f8f9fa;\n --text: #333;\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);\n background: var(--background);\n}\n\nheader {\n background: white;\n box-shadow: 0 2px 10px 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);\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--secondary);\n transition: color 0.3s;\n}\n\n.btn-login, .btn-register {\n padding: 0.5rem 1rem;\n border-radius: 5px;\n}\n\n.btn-login {\n color: var(--primary);\n}\n\n.btn-register {\n background: var(--primary);\n color: white;\n}\n\nmain {\n margin-top: 70px;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n text-align: center;\n padding: 4rem 1rem;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n background: var(--accent);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 25px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n.feature-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.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.product-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nfooter {\n background: var(--secondary);\n color: white;\n padding: 3rem 1rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Sample product data\n const products = [\n {\n title: 'Digital Marketing Mastery',\n price: 97,\n author: 'John Smith',\n image: 'product1.jpg'\n },\n {\n title: 'Web Development Course',\n price: 199,\n author: 'Sarah Johnson',\n image: 'product2.jpg'\n },\n {\n title: 'Social Media Strategy',\n price: 49,\n author: 'Mike Wilson',\n image: 'product3.jpg'\n }\n ];\n\n // Render products\n const productGrid = document.getElementById('productGrid');\n \n products.forEach(product => {\n const productCard = document.createElement('div');\n productCard.className = 'product-card';\n productCard.innerHTML = `\n <div class=\"product-image\"></div>\n <h3>${product.title}</h3>\n <p class=\"author\">by ${product.author}</p>\n <p class=\"price\">$${product.price}</p>\n <button class=\"buy-button\">Learn More</button>\n `;\n productGrid.appendChild(productCard);\n });\n\n // Smooth scroll for navigation\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 // Header scroll effect\n let lastScroll = 0;\n window.addEventListener('scroll', () => {\n const header = document.querySelector('header');\n const currentScroll = window.pageYOffset;\n\n if (currentScroll > lastScroll) {\n header.style.transform = 'translateY(-100%)';\n } else {\n header.style.transform = 'translateY(0)';\n }\n lastScroll = currentScroll;\n });\n});\n\n---end---\n\nThis implementation provides a modern, responsive digital marketplace platform similar to Hotmart. Key features include:\n\n1. Clean, minimalist design with smooth animations\n2. Responsive navigation with scroll effects\n3. Hero section with gradient background\n4. Feature cards with hover effects\n5. Dynamic product grid\n6. Mobile-responsive layout\n7. Modern CSS using CSS variables\n8. Smooth scroll behavior\n9. Interactive UI elements\n10. Semantic HTML5 structure\n\nThe website uses CSS Grid and Flexbox for layouts, includes smooth transitions and transforms for interactions, and follows accessibility best practices. The JavaScript handles dynamic content loading and interactive features while keeping the codebase lightweight and efficient." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 283, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2415 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..235cde9 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# digibazaar.scroll.pub +Website generated by Claude from prompt: Cria pra mim um app estilo hotmart \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5b643f6 --- /dev/null +++ b/script.js @@ -0,0 +1,63 @@ +document.addEventListener('DOMContentLoaded', () => { + // Sample product data + const products = [ + { + title: 'Digital Marketing Mastery', + price: 97, + author: 'John Smith', + image: 'product1.jpg' + }, + { + title: 'Web Development Course', + price: 199, + author: 'Sarah Johnson', + image: 'product2.jpg' + }, + { + title: 'Social Media Strategy', + price: 49, + author: 'Mike Wilson', + image: 'product3.jpg' + } + ]; + + // Render products + const productGrid = document.getElementById('productGrid'); + + products.forEach(product => { + const productCard = document.createElement('div'); + productCard.className = 'product-card'; + productCard.innerHTML = ` + <div class="product-image"></div> + <h3>${product.title}</h3> + <p class="author">by ${product.author}</p> + <p class="price">$${product.price}</p> + <button class="buy-button">Learn More</button> + `; + productGrid.appendChild(productCard); + }); + + // Smooth scroll for navigation + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Header scroll effect + let lastScroll = 0; + window.addEventListener('scroll', () => { + const header = document.querySelector('header'); + const currentScroll = window.pageYOffset; + + if (currentScroll > lastScroll) { + header.style.transform = 'translateY(-100%)'; + } else { + header.style.transform = 'translateY(0)'; + } + lastScroll = currentScroll; + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..85778d7 --- /dev/null +++ b/style.css @@ -0,0 +1,152 @@ +:root { + --primary: #4a90e2; + --secondary: #2c3e50; + --accent: #e74c3c; + --background: #f8f9fa; + --text: #333; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + color: var(--text); + background: var(--background); +} + +header { + background: white; + box-shadow: 0 2px 10px 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); +} + +.nav-links a { + margin-left: 2rem; + text-decoration: none; + color: var(--secondary); + transition: color 0.3s; +} + +.btn-login, .btn-register { + padding: 0.5rem 1rem; + border-radius: 5px; +} + +.btn-login { + color: var(--primary); +} + +.btn-register { + background: var(--primary); + color: white; +} + +main { + margin-top: 70px; +} + +.hero { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; + text-align: center; + padding: 4rem 1rem; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.cta-button { + background: var(--accent); + color: white; + border: none; + padding: 1rem 2rem; + border-radius: 25px; + font-size: 1.1rem; + cursor: pointer; + transition: transform 0.3s; +} + +.cta-button:hover { + transform: translateY(-2px); +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.feature-card { + background: white; + padding: 2rem; + border-radius: 10px; + text-align: center; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.3s; +} + +.feature-card:hover { + transform: translateY(-5px); +} + +.product-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 2rem; + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +footer { + background: var(--secondary); + color: white; + padding: 3rem 1rem; + margin-top: 4rem; +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; +} + +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .hero h1 { + font-size: 2rem; + } +}