commit 5343fffb1d3b8105d61baf10da3536fd998de37d
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 16:52:35 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..000ea9d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,92 @@
+<header>
+ <nav>
+ <div class="logo">PayFlo</div>
+ <div class="menu-toggle" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </div>
+ <ul class="nav-links">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#solutions">Solutions</a></li>
+ <li><a href="#pricing">Pricing</a></li>
+ <li><a href="#contact">Contact</a></li>
+ <li><a href="#login" class="btn-login">Login</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="hero-content">
+ <h1>Seamless Payments for the Digital Age</h1>
+ <p>Accept payments anywhere, anytime with our secure and flexible payment solutions.</p>
+ <a href="#get-started" class="cta-button">Get Started</a>
+ </div>
+ <div class="hero-animation"></div>
+ </section>
+
+ <section id="solutions" class="features">
+ <h2>Payment Solutions</h2>
+ <div class="features-grid">
+ <div class="feature-card">
+ <div class="icon">💳</div>
+ <h3>Card Payments</h3>
+ <p>Accept all major credit and debit cards with minimal fees.</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">📱</div>
+ <h3>Mobile Payments</h3>
+ <p>Enable payments through digital wallets and mobile apps.</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">🔒</div>
+ <h3>Secure Transfers</h3>
+ <p>Bank-grade security for all your transactions.</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="pricing" class="pricing">
+ <h2>Simple Pricing</h2>
+ <div class="pricing-grid">
+ <div class="price-card">
+ <h3>Starter</h3>
+ <div class="price">1.5%</div>
+ <p>per transaction</p>
+ <ul>
+ <li>Standard Support</li>
+ <li>Basic Analytics</li>
+ <li>Up to 1000 transactions/month</li>
+ </ul>
+ <a href="#" class="btn-secondary">Choose Plan</a>
+ </div>
+ <div class="price-card featured">
+ <h3>Business</h3>
+ <div class="price">1.2%</div>
+ <p>per transaction</p>
+ <ul>
+ <li>24/7 Support</li>
+ <li>Advanced Analytics</li>
+ <li>Unlimited transactions</li>
+ </ul>
+ <a href="#" class="btn-primary">Choose Plan</a>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>PayFlo</h4>
+ <p>Making payments simple and secure for businesses worldwide.</p>
+ </div>
+ <div class="footer-section">
+ <h4>Links</h4>
+ <ul>
+ <li><a href="#about">About</a></li>
+ <li><a href="#careers">Careers</a></li>
+ <li><a href="#support">Support</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..52cb5a8
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://payflo.scroll.pub
+metaTags
+editButton /edit.html
+title PayFlo - Modern Payment Solutions
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d196043
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_0118LYqVULAz11tN1uHCKT9D",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a payment company website. For the domain, I suggest:\n\n---domain---\npayflo.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://payflo.scroll.pub\nmetaTags\neditButton /edit.html\ntitle PayFlo - Modern Payment Solutions\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">PayFlo</div>\n <div class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </div>\n <ul class=\"nav-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#solutions\">Solutions</a></li>\n <li><a href=\"#pricing\">Pricing</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n <li><a href=\"#login\" class=\"btn-login\">Login</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"hero-content\">\n <h1>Seamless Payments for the Digital Age</h1>\n <p>Accept payments anywhere, anytime with our secure and flexible payment solutions.</p>\n <a href=\"#get-started\" class=\"cta-button\">Get Started</a>\n </div>\n <div class=\"hero-animation\"></div>\n </section>\n\n <section id=\"solutions\" class=\"features\">\n <h2>Payment Solutions</h2>\n <div class=\"features-grid\">\n <div class=\"feature-card\">\n <div class=\"icon\">💳</div>\n <h3>Card Payments</h3>\n <p>Accept all major credit and debit cards with minimal fees.</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">📱</div>\n <h3>Mobile Payments</h3>\n <p>Enable payments through digital wallets and mobile apps.</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">🔒</div>\n <h3>Secure Transfers</h3>\n <p>Bank-grade security for all your transactions.</p>\n </div>\n </div>\n </section>\n\n <section id=\"pricing\" class=\"pricing\">\n <h2>Simple Pricing</h2>\n <div class=\"pricing-grid\">\n <div class=\"price-card\">\n <h3>Starter</h3>\n <div class=\"price\">1.5%</div>\n <p>per transaction</p>\n <ul>\n <li>Standard Support</li>\n <li>Basic Analytics</li>\n <li>Up to 1000 transactions/month</li>\n </ul>\n <a href=\"#\" class=\"btn-secondary\">Choose Plan</a>\n </div>\n <div class=\"price-card featured\">\n <h3>Business</h3>\n <div class=\"price\">1.2%</div>\n <p>per transaction</p>\n <ul>\n <li>24/7 Support</li>\n <li>Advanced Analytics</li>\n <li>Unlimited transactions</li>\n </ul>\n <a href=\"#\" class=\"btn-primary\">Choose Plan</a>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>PayFlo</h4>\n <p>Making payments simple and secure for businesses worldwide.</p>\n </div>\n <div class=\"footer-section\">\n <h4>Links</h4>\n <ul>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#careers\">Careers</a></li>\n <li><a href=\"#support\">Support</a></li>\n </ul>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --text-color: #1f2937;\n --light-bg: #f3f4f6;\n --white: #ffffff;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\nheader {\n position: fixed;\n width: 100%;\n background: var(--white);\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 1000;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\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 font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.btn-login {\n background: var(--primary-color);\n color: var(--white) !important;\n padding: 0.5rem 1.5rem;\n border-radius: 25px;\n}\n\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n padding: 6rem 5%;\n background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n}\n\n.hero-content {\n max-width: 600px;\n}\n\nh1 {\n font-size: 3.5rem;\n line-height: 1.2;\n margin-bottom: 1.5rem;\n background: linear-gradient(to right, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--primary-color);\n color: var(--white);\n text-decoration: none;\n border-radius: 30px;\n font-weight: 600;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n background: var(--secondary-color);\n transform: translateY(-2px);\n}\n\n.features {\n padding: 5rem 5%;\n background: var(--white);\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.feature-card {\n padding: 2rem;\n border-radius: 15px;\n background: var(--light-bg);\n transition: var(--transition);\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n}\n\n.icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.pricing {\n padding: 5rem 5%;\n background: var(--light-bg);\n}\n\n.pricing-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.price-card {\n background: var(--white);\n padding: 2rem;\n border-radius: 15px;\n text-align: center;\n transition: var(--transition);\n}\n\n.price-card.featured {\n transform: scale(1.05);\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.price {\n font-size: 3rem;\n font-weight: 700;\n color: var(--primary-color);\n margin: 1rem 0;\n}\n\nfooter {\n background: var(--text-color);\n color: var(--white);\n padding: 3rem 5%;\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@media (max-width: 768px) {\n .menu-toggle {\n display: flex;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n }\n\n .menu-toggle span {\n width: 25px;\n height: 3px;\n background: var(--text-color);\n transition: var(--transition);\n }\n\n .nav-links {\n display: none;\n }\n\n h1 {\n font-size: 2.5rem;\n }\n\n .price-card.featured {\n transform: none;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle.addEventListener('click', function() {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n\n // Smooth scroll for anchor 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 if (target) {\n window.scrollTo({\n top: target.offsetTop - 80,\n behavior: 'smooth'\n });\n }\n });\n });\n\n // Intersection Observer for fade-in animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('fade-in');\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.feature-card, .price-card').forEach((el) => {\n observer.observe(el);\n });\n});\n\n---end---\n\nThis creates a modern, responsive payment company website with smooth animations, professional design, and full mobile compatibility. The design uses a clean color scheme with gradient accents and subtle animations to create visual interest while maintaining professionalism. The code follows semantic HTML5 standards and includes accessibility features like ARIA labels and proper heading hierarchy."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2890
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..523e5ff
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# payflo.scroll.pub
+Website generated by Claude from prompt: Create a payment company website with fully z
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..fcc7042
--- /dev/null
+++ b/script.js
@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', function() {
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ });
+
+ // Smooth scroll for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target) {
+ window.scrollTo({
+ top: target.offsetTop - 80,
+ behavior: 'smooth'
+ });
+ }
+ });
+ });
+
+ // Intersection Observer for fade-in animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('fade-in');
+ }
+ });
+ }, { threshold: 0.1 });
+
+ document.querySelectorAll('.feature-card, .price-card').forEach((el) => {
+ observer.observe(el);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c2eb938
--- /dev/null
+++ b/style.css
@@ -0,0 +1,207 @@
+:root {
+ --primary-color: #2563eb;
+ --secondary-color: #1e40af;
+ --text-color: #1f2937;
+ --light-bg: #f3f4f6;
+ --white: #ffffff;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+header {
+ position: fixed;
+ width: 100%;
+ background: var(--white);
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ z-index: 1000;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.btn-login {
+ background: var(--primary-color);
+ color: var(--white) !important;
+ padding: 0.5rem 1.5rem;
+ border-radius: 25px;
+}
+
+.hero {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ padding: 6rem 5%;
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+}
+
+.hero-content {
+ max-width: 600px;
+}
+
+h1 {
+ font-size: 3.5rem;
+ line-height: 1.2;
+ margin-bottom: 1.5rem;
+ background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--primary-color);
+ color: var(--white);
+ text-decoration: none;
+ border-radius: 30px;
+ font-weight: 600;
+ transition: var(--transition);
+}
+
+.cta-button:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+}
+
+.features {
+ padding: 5rem 5%;
+ background: var(--white);
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+}
+
+.feature-card {
+ padding: 2rem;
+ border-radius: 15px;
+ background: var(--light-bg);
+ transition: var(--transition);
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+
+.icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.pricing {
+ padding: 5rem 5%;
+ background: var(--light-bg);
+}
+
+.pricing-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+}
+
+.price-card {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 15px;
+ text-align: center;
+ transition: var(--transition);
+}
+
+.price-card.featured {
+ transform: scale(1.05);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.price {
+ font-size: 3rem;
+ font-weight: 700;
+ color: var(--primary-color);
+ margin: 1rem 0;
+}
+
+footer {
+ background: var(--text-color);
+ color: var(--white);
+ padding: 3rem 5%;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ cursor: pointer;
+ }
+
+ .menu-toggle span {
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ transition: var(--transition);
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .price-card.featured {
+ transform: none;
+ }
+}