commit c5ee52a0759543f8ed348cbb2d5b98724450765d
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 01:33:57 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..eee4eb8
--- /dev/null
+++ b/body.html
@@ -0,0 +1,86 @@
+<header>
+ <nav class="main-nav">
+ <div class="logo">ProcureHub</div>
+ <button class="mobile-menu-btn" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#categories">Categories</a></li>
+ <li><a href="#suppliers">Suppliers</a></li>
+ <li><a href="#solutions">Solutions</a></li>
+ <li><a href="#contact">Contact</a></li>
+ <li><button class="login-btn">Login</button></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Streamline Your B2B Procurement</h1>
+ <p>Connect with verified suppliers and optimize your purchasing workflow</p>
+ <button class="cta-button">Get Started</button>
+ </div>
+ </section>
+
+ <section id="categories" class="categories">
+ <h2>Product Categories</h2>
+ <div class="category-grid">
+ <div class="category-card">
+ <div class="icon">🏭</div>
+ <h3>Industrial</h3>
+ </div>
+ <div class="category-card">
+ <div class="icon">💻</div>
+ <h3>Technology</h3>
+ </div>
+ <div class="category-card">
+ <div class="icon">🏗️</div>
+ <h3>Construction</h3>
+ </div>
+ <div class="category-card">
+ <div class="icon">🔧</div>
+ <h3>Equipment</h3>
+ </div>
+ </div>
+ </section>
+
+ <section class="features">
+ <h2>Why Choose ProcureHub</h2>
+ <div class="features-grid">
+ <div class="feature">
+ <h3>Verified Suppliers</h3>
+ <p>Connect with pre-vetted suppliers ensuring quality and reliability</p>
+ </div>
+ <div class="feature">
+ <h3>Smart Analytics</h3>
+ <p>Track spending patterns and optimize procurement decisions</p>
+ </div>
+ <div class="feature">
+ <h3>Secure Platform</h3>
+ <p>Enterprise-grade security for all transactions</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>ProcureHub</h4>
+ <p>Your trusted B2B procurement platform</p>
+ </div>
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <ul>
+ <li><a href="#about">About Us</a></li>
+ <li><a href="#terms">Terms</a></li>
+ <li><a href="#privacy">Privacy</a></li>
+ </ul>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <p>support@procure.scroll.pub</p>
+ </div>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..da99852
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://procure.scroll.pub
+metaTags
+editButton /edit.html
+title ProcureHub - B2B Procurement Platform
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..02f3620
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01GNybqGDzFV8Bv3dbwPvEkN",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a B2B storefront for buyers with a professional and modern design.\n\nSuggested domain: procure.scroll.pub (short, professional, and clearly indicates B2B purchasing)\n\n---domain---\nprocure.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://procure.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ProcureHub - B2B Procurement Platform\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">ProcureHub</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=\"#categories\">Categories</a></li>\n <li><a href=\"#suppliers\">Suppliers</a></li>\n <li><a href=\"#solutions\">Solutions</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n <li><button class=\"login-btn\">Login</button></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Streamline Your B2B Procurement</h1>\n <p>Connect with verified suppliers and optimize your purchasing workflow</p>\n <button class=\"cta-button\">Get Started</button>\n </div>\n </section>\n\n <section id=\"categories\" class=\"categories\">\n <h2>Product Categories</h2>\n <div class=\"category-grid\">\n <div class=\"category-card\">\n <div class=\"icon\">🏭</div>\n <h3>Industrial</h3>\n </div>\n <div class=\"category-card\">\n <div class=\"icon\">💻</div>\n <h3>Technology</h3>\n </div>\n <div class=\"category-card\">\n <div class=\"icon\">🏗️</div>\n <h3>Construction</h3>\n </div>\n <div class=\"category-card\">\n <div class=\"icon\">🔧</div>\n <h3>Equipment</h3>\n </div>\n </div>\n </section>\n\n <section class=\"features\">\n <h2>Why Choose ProcureHub</h2>\n <div class=\"features-grid\">\n <div class=\"feature\">\n <h3>Verified Suppliers</h3>\n <p>Connect with pre-vetted suppliers ensuring quality and reliability</p>\n </div>\n <div class=\"feature\">\n <h3>Smart Analytics</h3>\n <p>Track spending patterns and optimize procurement decisions</p>\n </div>\n <div class=\"feature\">\n <h3>Secure Platform</h3>\n <p>Enterprise-grade security for all transactions</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>ProcureHub</h4>\n <p>Your trusted B2B procurement platform</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <ul>\n <li><a href=\"#about\">About Us</a></li>\n <li><a href=\"#terms\">Terms</a></li>\n <li><a href=\"#privacy\">Privacy</a></li>\n </ul>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <p>support@procure.scroll.pub</p>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #2a4365;\n --secondary-color: #4299e1;\n --accent-color: #ebf8ff;\n --text-color: #2d3748;\n --light-gray: #edf2f7;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background: white;\n box-shadow: 0 2px 4px 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 gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.login-btn {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 0.5rem 1.5rem;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.login-btn:hover {\n background: var(--secondary-color);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 4rem 2rem;\n text-align: center;\n}\n\n.hero-content {\n max-width: 800px;\n margin: 0 auto;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n background: white;\n color: var(--primary-color);\n border: none;\n padding: 1rem 2rem;\n border-radius: 4px;\n font-size: 1.1rem;\n margin-top: 2rem;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n.categories {\n padding: 4rem 2rem;\n background: var(--accent-color);\n}\n\n.category-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.category-card {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 4px 6px 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-card .icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.features {\n padding: 4rem 2rem;\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.feature {\n padding: 2rem;\n background: var(--light-gray);\n border-radius: 8px;\n}\n\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(200px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.footer-section ul {\n list-style: none;\n}\n\n.footer-section a {\n color: white;\n text-decoration: none;\n}\n\n.mobile-menu-btn {\n display: none;\n}\n\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu-btn span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--primary-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---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const mobileMenuBtn = document.querySelector('.mobile-menu-btn');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenuBtn.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n \n const spans = mobileMenuBtn.querySelectorAll('span');\n spans.forEach(span => span.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 animation on scroll for features\n const features = document.querySelectorAll('.feature');\n const observerOptions = {\n threshold: 0.2\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 features.forEach(feature => {\n feature.style.opacity = 0;\n feature.style.transform = 'translateY(20px)';\n feature.style.transition = 'all 0.5s ease-out';\n observer.observe(feature);\n });\n});\n---end---\n\nThis implementation creates a modern, responsive B2B procurement platform with:\n\n1. Clean, semantic HTML5 structure\n2. Mobile-responsive design with hamburger menu\n3. Smooth animations and transitions\n4. Accessible navigation and content structure\n5. Modern CSS features including Grid, Flexbox, and CSS Variables\n6. Intersection Observer for scroll animations\n7. Professional color scheme and typography\n8. Clear information hierarchy\n9. Optimized for both desktop and mobile devices\n\nThe design focuses on clarity and professionalism while maintaining visual appeal through subtle animations and modern design elements."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 277,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2838
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..3d71d02
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# procure.scroll.pub
+Website generated by Claude from prompt: b2b store front for buyer
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ca9e0e7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,43 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenuBtn.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+
+ const spans = mobileMenuBtn.querySelectorAll('span');
+ spans.forEach(span => span.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 animation on scroll for features
+ const features = document.querySelectorAll('.feature');
+ const observerOptions = {
+ threshold: 0.2
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = 1;
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ features.forEach(feature => {
+ feature.style.opacity = 0;
+ feature.style.transform = 'translateY(20px)';
+ feature.style.transition = 'all 0.5s ease-out';
+ observer.observe(feature);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..36d88db
--- /dev/null
+++ b/style.css
@@ -0,0 +1,205 @@
+:root {
+ --primary-color: #2a4365;
+ --secondary-color: #4299e1;
+ --accent-color: #ebf8ff;
+ --text-color: #2d3748;
+ --light-gray: #edf2f7;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+.main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ background: white;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--secondary-color);
+}
+
+.login-btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1.5rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.login-btn:hover {
+ background: var(--secondary-color);
+}
+
+.hero {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 4rem 2rem;
+ text-align: center;
+}
+
+.hero-content {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.cta-button {
+ background: white;
+ color: var(--primary-color);
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 4px;
+ font-size: 1.1rem;
+ margin-top: 2rem;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+}
+
+.categories {
+ padding: 4rem 2rem;
+ background: var(--accent-color);
+}
+
+.category-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.category-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 8px;
+ text-align: center;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.category-card:hover {
+ transform: translateY(-5px);
+}
+
+.category-card .icon {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+}
+
+.features {
+ padding: 4rem 2rem;
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.feature {
+ padding: 2rem;
+ background: var(--light-gray);
+ border-radius: 8px;
+}
+
+footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section a {
+ color: white;
+ text-decoration: none;
+}
+
+.mobile-menu-btn {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu-btn {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu-btn span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--primary-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;
+ }
+}
\ No newline at end of file