commit 98f290cf43130b4f956cdc63d3641f5dd8fca7a6
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 11:01:58 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..4289452
--- /dev/null
+++ b/body.html
@@ -0,0 +1,52 @@
+<header>
+ <nav>
+ <div class="logo">SEO Genius</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#generate">Generate</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>AI-Powered SEO Content Generation</h1>
+ <p>Create optimized content and images using advanced natural language processing</p>
+ </section>
+
+ <section id="generate" class="content-form">
+ <h2>Generate Content</h2>
+ <form id="seoForm">
+ <div class="form-group">
+ <label for="keywords">Target Keywords</label>
+ <input type="text" id="keywords" name="keywords" required placeholder="Enter keywords separated by commas">
+ </div>
+
+ <div class="form-group">
+ <label for="instructions">Content Instructions</label>
+ <textarea id="instructions" name="instructions" required placeholder="Describe what kind of content you want to generate"></textarea>
+ </div>
+
+ <div class="form-group checkbox">
+ <input type="checkbox" id="generateImages" name="generateImages">
+ <label for="generateImages">Generate Supporting Images</label>
+ </div>
+
+ <button type="submit" class="generate-btn">Generate Content</button>
+ </form>
+
+ <div id="result" class="result hidden">
+ <h3>Generated Content</h3>
+ <div id="content-output"></div>
+ <div id="image-output" class="image-grid"></div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ❤️ by SEO Genius</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6ef4b49
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://seogenius.scroll.pub
+metaTags
+ description "Generate SEO-optimized content and images using AI and natural language processing"
+ keywords "SEO content generator, AI content writing, semantic SEO, NLP content"
+editButton /edit.html
+title SEO Genius - AI-Powered Content Generation
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..05cb6d1
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01PcTWaXUMzq5RVLqtvgte1r",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a website that meets your requirements.\n\n---domain---\nseogenius.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://seogenius.scroll.pub\nmetaTags\n description \"Generate SEO-optimized content and images using AI and natural language processing\"\n keywords \"SEO content generator, AI content writing, semantic SEO, NLP content\"\neditButton /edit.html\ntitle SEO Genius - AI-Powered Content Generation\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">SEO Genius</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#generate\">Generate</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>AI-Powered SEO Content Generation</h1>\n <p>Create optimized content and images using advanced natural language processing</p>\n </section>\n\n <section id=\"generate\" class=\"content-form\">\n <h2>Generate Content</h2>\n <form id=\"seoForm\">\n <div class=\"form-group\">\n <label for=\"keywords\">Target Keywords</label>\n <input type=\"text\" id=\"keywords\" name=\"keywords\" required placeholder=\"Enter keywords separated by commas\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"instructions\">Content Instructions</label>\n <textarea id=\"instructions\" name=\"instructions\" required placeholder=\"Describe what kind of content you want to generate\"></textarea>\n </div>\n\n <div class=\"form-group checkbox\">\n <input type=\"checkbox\" id=\"generateImages\" name=\"generateImages\">\n <label for=\"generateImages\">Generate Supporting Images</label>\n </div>\n\n <button type=\"submit\" class=\"generate-btn\">Generate Content</button>\n </form>\n\n <div id=\"result\" class=\"result hidden\">\n <h3>Generated Content</h3>\n <div id=\"content-output\"></div>\n <div id=\"image-output\" class=\"image-grid\"></div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with ❤️ by SEO Genius</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6bf2;\n --secondary: #1a1b4b;\n --accent: #4cd964;\n --background: #f8f9ff;\n --text: #2c3e50;\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 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: 100;\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: linear-gradient(45deg, var(--primary), var(--accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\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);\n font-weight: 500;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.mobile-menu {\n display: none;\n}\n\nmain {\n margin-top: 4rem;\n padding: 2rem;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n color: white;\n border-radius: 1rem;\n margin-bottom: 3rem;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.content-form {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n background: white;\n border-radius: 1rem;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput[type=\"text\"],\ntextarea {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid #eee;\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: border-color 0.3s;\n}\n\ninput[type=\"text\"]:focus,\ntextarea:focus {\n border-color: var(--primary);\n outline: none;\n}\n\ntextarea {\n min-height: 150px;\n resize: vertical;\n}\n\n.checkbox {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.checkbox label {\n margin: 0;\n}\n\n.generate-btn {\n background: var(--primary);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: transform 0.3s, background 0.3s;\n}\n\n.generate-btn:hover {\n background: var(--secondary);\n transform: translateY(-2px);\n}\n\n.result {\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #eee;\n}\n\n.hidden {\n display: none;\n}\n\n.image-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n margin-top: 4rem;\n background: white;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--text);\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 .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n const form = document.getElementById('seoForm');\n const result = document.getElementById('result');\n const contentOutput = document.getElementById('content-output');\n const imageOutput = document.getElementById('image-output');\n\n // Mobile menu toggle\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n mobileMenu.classList.toggle('active');\n });\n\n // Form submission\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n \n const keywords = document.getElementById('keywords').value;\n const instructions = document.getElementById('instructions').value;\n const generateImages = document.getElementById('generateImages').checked;\n\n // Show loading state\n form.querySelector('button').disabled = true;\n form.querySelector('button').textContent = 'Generating...';\n\n try {\n // Here you would typically make API calls to Claude\n // For demo purposes, we'll simulate the response\n await simulateContentGeneration(keywords, instructions, generateImages);\n } catch (error) {\n console.error('Error generating content:', error);\n alert('An error occurred while generating content. Please try again.');\n } finally {\n form.querySelector('button').disabled = false;\n form.querySelector('button').textContent = 'Generate Content';\n }\n });\n\n // Simulate content generation (replace with actual API calls)\n async function simulateContentGeneration(keywords, instructions, generateImages) {\n // Simulate API delay\n await new Promise(resolve => setTimeout(resolve, 2000));\n\n // Show results\n result.classList.remove('hidden');\n contentOutput.innerHTML = `\n <h4>Generated content for keywords: ${keywords}</h4>\n <p>This is where the AI-generated content would appear...</p>\n `;\n\n if (generateImages) {\n imageOutput.innerHTML = `\n <div class=\"generated-image\">Image placeholder 1</div>\n <div class=\"generated-image\">Image placeholder 2</div>\n `;\n } else {\n imageOutput.innerHTML = '';\n }\n\n // Smooth scroll to results\n result.scrollIntoView({ behavior: 'smooth' });\n }\n});\n\n---end---\n\nThis implementation provides a clean, modern, and responsive website with a beautiful gradient-based design. Key features include:\n\n1. Semantic HTML5 structure\n2. Mobile-first responsive design\n3. Smooth animations and transitions\n4. Accessible form controls\n5. Loading states and error handling\n6. Clean, modular JavaScript\n7. Beautiful CSS with gradients and shadows\n8. Mobile menu functionality\n9. Proper meta tags for SEO\n10. Form validation and user feedback\n\nThe domain name \"seogenius.scroll.pub\" is memorable and accurately represents the website's purpose. To implement the actual functionality, you would need to add API calls to Claude for content generation and image creation."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 332,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2769
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2207de9
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# seogenius.scroll.pub
+Website generated by Claude from prompt: A website that uses Claude to write SEO content and generate images, based on specific key phrases. Add a form which will allow me to add instructions, key phrases I want to optimize for, and a checkbox to optionally generate images. The content should be written using Natural Language Processing and semantic SEO code.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..7c96169
--- /dev/null
+++ b/script.js
@@ -0,0 +1,64 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+ const form = document.getElementById('seoForm');
+ const result = document.getElementById('result');
+ const contentOutput = document.getElementById('content-output');
+ const imageOutput = document.getElementById('image-output');
+
+ // Mobile menu toggle
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ mobileMenu.classList.toggle('active');
+ });
+
+ // Form submission
+ form.addEventListener('submit', async (e) => {
+ e.preventDefault();
+
+ const keywords = document.getElementById('keywords').value;
+ const instructions = document.getElementById('instructions').value;
+ const generateImages = document.getElementById('generateImages').checked;
+
+ // Show loading state
+ form.querySelector('button').disabled = true;
+ form.querySelector('button').textContent = 'Generating...';
+
+ try {
+ // Here you would typically make API calls to Claude
+ // For demo purposes, we'll simulate the response
+ await simulateContentGeneration(keywords, instructions, generateImages);
+ } catch (error) {
+ console.error('Error generating content:', error);
+ alert('An error occurred while generating content. Please try again.');
+ } finally {
+ form.querySelector('button').disabled = false;
+ form.querySelector('button').textContent = 'Generate Content';
+ }
+ });
+
+ // Simulate content generation (replace with actual API calls)
+ async function simulateContentGeneration(keywords, instructions, generateImages) {
+ // Simulate API delay
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Show results
+ result.classList.remove('hidden');
+ contentOutput.innerHTML = `
+ <h4>Generated content for keywords: ${keywords}</h4>
+ <p>This is where the AI-generated content would appear...</p>
+ `;
+
+ if (generateImages) {
+ imageOutput.innerHTML = `
+ <div class="generated-image">Image placeholder 1</div>
+ <div class="generated-image">Image placeholder 2</div>
+ `;
+ } else {
+ imageOutput.innerHTML = '';
+ }
+
+ // Smooth scroll to results
+ result.scrollIntoView({ behavior: 'smooth' });
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ca69525
--- /dev/null
+++ b/style.css
@@ -0,0 +1,217 @@
+:root {
+ --primary: #2a6bf2;
+ --secondary: #1a1b4b;
+ --accent: #4cd964;
+ --background: #f8f9ff;
+ --text: #2c3e50;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, 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: 100;
+}
+
+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: linear-gradient(45deg, var(--primary), var(--accent));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text);
+ font-weight: 500;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+main {
+ margin-top: 4rem;
+ padding: 2rem;
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ color: white;
+ border-radius: 1rem;
+ margin-bottom: 3rem;
+}
+
+.hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.content-form {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem;
+ background: white;
+ border-radius: 1rem;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+input[type="text"],
+textarea {
+ width: 100%;
+ padding: 0.8rem;
+ border: 2px solid #eee;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ transition: border-color 0.3s;
+}
+
+input[type="text"]:focus,
+textarea:focus {
+ border-color: var(--primary);
+ outline: none;
+}
+
+textarea {
+ min-height: 150px;
+ resize: vertical;
+}
+
+.checkbox {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.checkbox label {
+ margin: 0;
+}
+
+.generate-btn {
+ background: var(--primary);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: transform 0.3s, background 0.3s;
+}
+
+.generate-btn:hover {
+ background: var(--secondary);
+ transform: translateY(-2px);
+}
+
+.result {
+ margin-top: 2rem;
+ padding-top: 2rem;
+ border-top: 2px solid #eee;
+}
+
+.hidden {
+ display: none;
+}
+
+.image-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ margin-top: 4rem;
+ background: white;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--text);
+ 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;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+}