commit caef508e95f010c2daf6ef062de93443d6fb73bd
Author: root <root@hub.scroll.pub>
Date: 2025-01-14 01:33:40 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..14097c5
--- /dev/null
+++ b/body.html
@@ -0,0 +1,100 @@
+<header class="nav-header">
+ <nav>
+ <div class="logo">VisionBot</div>
+ <div class="nav-links">
+ <a href="#features">Features</a>
+ <a href="#how-it-works">How It Works</a>
+ <a href="#pricing">Pricing</a>
+ <a href="#contact" class="cta-button">Get Started</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Automate Any Device with Computer Vision</h1>
+ <p>Create powerful automation workflows across phones, tablets, and computers - no coding required.</p>
+ <a href="#contact" class="cta-button pulse">Start Free Trial</a>
+ </div>
+ <div class="hero-image">
+ <div class="floating-device phone"></div>
+ <div class="floating-device laptop"></div>
+ <div class="floating-device tablet"></div>
+ </div>
+ </section>
+
+ <section id="features" class="features">
+ <h2>Why Choose VisionBot</h2>
+ <div class="feature-grid">
+ <div class="feature-card">
+ <div class="feature-icon">👁️</div>
+ <h3>Visual Recognition</h3>
+ <p>Powerful AI that sees and understands any screen element</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🤖</div>
+ <h3>Cross-Device</h3>
+ <p>Works seamlessly across mobile, desktop and web apps</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">⚡</div>
+ <h3>No-Code Builder</h3>
+ <p>Create automation flows with simple drag and drop</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🔒</div>
+ <h3>Enterprise Security</h3>
+ <p>Bank-grade encryption and privacy controls</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="how-it-works" class="how-it-works">
+ <h2>How It Works</h2>
+ <div class="steps">
+ <div class="step">
+ <div class="step-number">1</div>
+ <h3>Record Actions</h3>
+ <p>Capture your workflow with our screen recorder</p>
+ </div>
+ <div class="step">
+ <div class="step-number">2</div>
+ <h3>Train AI</h3>
+ <p>Our AI learns to recognize interface elements</p>
+ </div>
+ <div class="step">
+ <div class="step-number">3</div>
+ <h3>Automate</h3>
+ <p>Run your automation anywhere, anytime</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Start Automating Today</h2>
+ <form id="contact-form" class="contact-form">
+ <input type="email" placeholder="Enter your work email" required>
+ <button type="submit" class="cta-button">Get Started</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>VisionBot</h4>
+ <p>Automation powered by computer vision</p>
+ </div>
+ <div class="footer-section">
+ <h4>Links</h4>
+ <a href="#features">Features</a>
+ <a href="#how-it-works">How It Works</a>
+ <a href="#pricing">Pricing</a>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <a href="mailto:hello@visionbot.scroll.pub">hello@visionbot.scroll.pub</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..ab1295c
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://visionbot.scroll.pub
+metaTags
+editButton /edit.html
+title VisionBot - Automate Anything with Computer Vision
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..ab4d16f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01UJ47qrwWhHPJ4FHWCuRpJE",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a landing page for this computer vision automation platform. For the domain, I suggest:\n\n---domain---\nvisionbot.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://visionbot.scroll.pub\nmetaTags\neditButton /edit.html\ntitle VisionBot - Automate Anything with Computer Vision\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"nav-header\">\n <nav>\n <div class=\"logo\">VisionBot</div>\n <div class=\"nav-links\">\n <a href=\"#features\">Features</a>\n <a href=\"#how-it-works\">How It Works</a>\n <a href=\"#pricing\">Pricing</a>\n <a href=\"#contact\" class=\"cta-button\">Get Started</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Automate Any Device with Computer Vision</h1>\n <p>Create powerful automation workflows across phones, tablets, and computers - no coding required.</p>\n <a href=\"#contact\" class=\"cta-button pulse\">Start Free Trial</a>\n </div>\n <div class=\"hero-image\">\n <div class=\"floating-device phone\"></div>\n <div class=\"floating-device laptop\"></div>\n <div class=\"floating-device tablet\"></div>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <h2>Why Choose VisionBot</h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">👁️</div>\n <h3>Visual Recognition</h3>\n <p>Powerful AI that sees and understands any screen element</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🤖</div>\n <h3>Cross-Device</h3>\n <p>Works seamlessly across mobile, desktop and web apps</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">⚡</div>\n <h3>No-Code Builder</h3>\n <p>Create automation flows with simple drag and drop</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🔒</div>\n <h3>Enterprise Security</h3>\n <p>Bank-grade encryption and privacy controls</p>\n </div>\n </div>\n </section>\n\n <section id=\"how-it-works\" class=\"how-it-works\">\n <h2>How It Works</h2>\n <div class=\"steps\">\n <div class=\"step\">\n <div class=\"step-number\">1</div>\n <h3>Record Actions</h3>\n <p>Capture your workflow with our screen recorder</p>\n </div>\n <div class=\"step\">\n <div class=\"step-number\">2</div>\n <h3>Train AI</h3>\n <p>Our AI learns to recognize interface elements</p>\n </div>\n <div class=\"step\">\n <div class=\"step-number\">3</div>\n <h3>Automate</h3>\n <p>Run your automation anywhere, anytime</p>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Start Automating Today</h2>\n <form id=\"contact-form\" class=\"contact-form\">\n <input type=\"email\" placeholder=\"Enter your work email\" required>\n <button type=\"submit\" class=\"cta-button\">Get Started</button>\n </form>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>VisionBot</h4>\n <p>Automation powered by computer vision</p>\n </div>\n <div class=\"footer-section\">\n <h4>Links</h4>\n <a href=\"#features\">Features</a>\n <a href=\"#how-it-works\">How It Works</a>\n <a href=\"#pricing\">Pricing</a>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <a href=\"mailto:hello@visionbot.scroll.pub\">hello@visionbot.scroll.pub</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #4A90E2;\n --secondary: #6C63FF;\n --dark: #2C3E50;\n --light: #F5F6FA;\n --gradient: linear-gradient(135deg, var(--primary), var(--secondary));\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, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--dark);\n}\n\n.nav-header {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);\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 background: var(--gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--dark);\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.cta-button {\n background: var(--gradient);\n color: white;\n padding: 0.8rem 1.5rem;\n border-radius: 25px;\n text-decoration: none;\n transition: transform 0.3s;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n padding: 6rem 2rem 2rem;\n background: linear-gradient(135deg, #f6f9fc 0%, #f1f4f8 100%);\n}\n\n.hero-content {\n flex: 1;\n max-width: 600px;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1.5rem;\n line-height: 1.2;\n background: var(--gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.hero-image {\n flex: 1;\n position: relative;\n height: 500px;\n}\n\n.floating-device {\n position: absolute;\n background: white;\n border-radius: 20px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n animation: float 6s ease-in-out infinite;\n}\n\n.phone {\n width: 150px;\n height: 300px;\n left: 20%;\n top: 20%;\n animation-delay: 0s;\n}\n\n.laptop {\n width: 400px;\n height: 250px;\n right: 10%;\n top: 30%;\n animation-delay: 1s;\n}\n\n.tablet {\n width: 200px;\n height: 280px;\n left: 40%;\n top: 40%;\n animation-delay: 2s;\n}\n\n@keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-20px); }\n 100% { transform: translateY(0px); }\n}\n\n.features {\n padding: 5rem 2rem;\n background: white;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.feature-card {\n padding: 2rem;\n border-radius: 15px;\n background: white;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n transition: transform 0.3s;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.feature-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.how-it-works {\n padding: 5rem 2rem;\n background: var(--light);\n}\n\n.steps {\n display: flex;\n justify-content: space-around;\n max-width: 1200px;\n margin: 0 auto;\n flex-wrap: wrap;\n gap: 2rem;\n}\n\n.step {\n flex: 1;\n min-width: 250px;\n text-align: center;\n}\n\n.step-number {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: var(--gradient);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1rem;\n font-size: 1.5rem;\n}\n\n.contact {\n padding: 5rem 2rem;\n text-align: center;\n background: white;\n}\n\n.contact-form {\n max-width: 500px;\n margin: 2rem auto;\n display: flex;\n gap: 1rem;\n}\n\n.contact-form input {\n flex: 1;\n padding: 0.8rem 1.5rem;\n border: 2px solid #eee;\n border-radius: 25px;\n font-size: 1rem;\n}\n\nfooter {\n background: var(--dark);\n color: white;\n padding: 3rem 2rem;\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.footer-section a {\n color: white;\n text-decoration: none;\n display: block;\n margin: 0.5rem 0;\n opacity: 0.8;\n transition: opacity 0.3s;\n}\n\n.footer-section a:hover {\n opacity: 1;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero {\n flex-direction: column;\n text-align: center;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n \n .hero-image {\n height: 300px;\n margin-top: 2rem;\n }\n \n .contact-form {\n flex-direction: column;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling 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 // Form submission handler\n const form = document.getElementById('contact-form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n const email = form.querySelector('input[type=\"email\"]').value;\n alert(`Thank you! We'll contact you at ${email} soon.`);\n form.reset();\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.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, {\n threshold: 0.1\n });\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 = 'opacity 0.6s ease-out, transform 0.6s ease-out';\n observer.observe(section);\n });\n});\n\n---end---\n\nThis creates a modern, responsive landing page with smooth animations, floating device illustrations, and a clean, professional design. The page includes:\n\n1. Fixed navigation header with blur effect\n2. Hero section with animated floating devices\n3. Features section with hover effects\n4. How it works section with numbered steps\n5. Contact form section\n6. Responsive footer\n\nThe design uses CSS variables, modern layout techniques (Grid/Flexbox), and smooth animations. It's fully responsive and works on all device sizes. The JavaScript adds smooth scrolling, form handling, and intersection observer for scroll animations."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 302,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3544
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7c1a80c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# visionbot1.scroll.pub
+
+website generated by Claude from prompt: make a landing page, of computer use agents that can navigate mobile phones, laptops using computer vision. Think of it as Zapier but with computer vision
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a088117
--- /dev/null
+++ b/script.js
@@ -0,0 +1,40 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Form submission handler
+ const form = document.getElementById('contact-form');
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const email = form.querySelector('input[type="email"]').value;
+ alert(`Thank you! We'll contact you at ${email} soon.`);
+ form.reset();
+ });
+
+ // Intersection Observer for fade-in animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, {
+ threshold: 0.1
+ });
+
+ // Apply fade-in animation to sections
+ document.querySelectorAll('section').forEach(section => {
+ section.style.opacity = '0';
+ section.style.transform = 'translateY(20px)';
+ section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5a4d19f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,270 @@
+:root {
+ --primary: #4A90E2;
+ --secondary: #6C63FF;
+ --dark: #2C3E50;
+ --light: #F5F6FA;
+ --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+}
+
+.nav-header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+}
+
+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;
+ background: var(--gradient);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--dark);
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+.cta-button {
+ background: var(--gradient);
+ color: white;
+ padding: 0.8rem 1.5rem;
+ border-radius: 25px;
+ text-decoration: none;
+ transition: transform 0.3s;
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+}
+
+.hero {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ padding: 6rem 2rem 2rem;
+ background: linear-gradient(135deg, #f6f9fc 0%, #f1f4f8 100%);
+}
+
+.hero-content {
+ flex: 1;
+ max-width: 600px;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1.5rem;
+ line-height: 1.2;
+ background: var(--gradient);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.hero-image {
+ flex: 1;
+ position: relative;
+ height: 500px;
+}
+
+.floating-device {
+ position: absolute;
+ background: white;
+ border-radius: 20px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+ animation: float 6s ease-in-out infinite;
+}
+
+.phone {
+ width: 150px;
+ height: 300px;
+ left: 20%;
+ top: 20%;
+ animation-delay: 0s;
+}
+
+.laptop {
+ width: 400px;
+ height: 250px;
+ right: 10%;
+ top: 30%;
+ animation-delay: 1s;
+}
+
+.tablet {
+ width: 200px;
+ height: 280px;
+ left: 40%;
+ top: 40%;
+ animation-delay: 2s;
+}
+
+@keyframes float {
+ 0% { transform: translateY(0px); }
+ 50% { transform: translateY(-20px); }
+ 100% { transform: translateY(0px); }
+}
+
+.features {
+ padding: 5rem 2rem;
+ background: white;
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.feature-card {
+ padding: 2rem;
+ border-radius: 15px;
+ background: white;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+ transition: transform 0.3s;
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+}
+
+.feature-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.how-it-works {
+ padding: 5rem 2rem;
+ background: var(--light);
+}
+
+.steps {
+ display: flex;
+ justify-content: space-around;
+ max-width: 1200px;
+ margin: 0 auto;
+ flex-wrap: wrap;
+ gap: 2rem;
+}
+
+.step {
+ flex: 1;
+ min-width: 250px;
+ text-align: center;
+}
+
+.step-number {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: var(--gradient);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 1rem;
+ font-size: 1.5rem;
+}
+
+.contact {
+ padding: 5rem 2rem;
+ text-align: center;
+ background: white;
+}
+
+.contact-form {
+ max-width: 500px;
+ margin: 2rem auto;
+ display: flex;
+ gap: 1rem;
+}
+
+.contact-form input {
+ flex: 1;
+ padding: 0.8rem 1.5rem;
+ border: 2px solid #eee;
+ border-radius: 25px;
+ font-size: 1rem;
+}
+
+footer {
+ background: var(--dark);
+ color: white;
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+.footer-section a {
+ color: white;
+ text-decoration: none;
+ display: block;
+ margin: 0.5rem 0;
+ opacity: 0.8;
+ transition: opacity 0.3s;
+}
+
+.footer-section a:hover {
+ opacity: 1;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero-image {
+ height: 300px;
+ margin-top: 2rem;
+ }
+
+ .contact-form {
+ flex-direction: column;
+ }
+}