commit 61f1335f340ec7072ec85cd82ede50c9c91a1b42
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 16:10:59 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..68b81eb
--- /dev/null
+++ b/body.html
@@ -0,0 +1,63 @@
+<header>
+ <nav>
+ <div class="logo">PromptPal</div>
+ <button class="menu-toggle" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#apps">Apps</a></li>
+ <li><a href="#about">About</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <h1>Create Perfect AI Prompts</h1>
+ <p>Select your AI application and craft the perfect prompt</p>
+ </section>
+
+ <section id="apps" class="app-selector">
+ <h2>Choose Your AI Application</h2>
+ <div class="app-grid">
+ <button class="app-card" data-app="chatgpt">
+ <img src="images/chatgpt.svg" alt="ChatGPT" />
+ <span>ChatGPT</span>
+ </button>
+ <button class="app-card" data-app="dalle">
+ <img src="images/dalle.svg" alt="DALL-E" />
+ <span>DALL-E</span>
+ </button>
+ <button class="app-card" data-app="midjourney">
+ <img src="images/midjourney.svg" alt="Midjourney" />
+ <span>Midjourney</span>
+ </button>
+ <button class="app-card" data-app="stable">
+ <img src="images/stable.svg" alt="Stable Diffusion" />
+ <span>Stable Diffusion</span>
+ </button>
+ </div>
+
+ <div class="prompt-builder hidden">
+ <h3>Create Your Prompt</h3>
+ <div class="selected-app"></div>
+ <textarea id="promptInput" placeholder="Enter your prompt here..." rows="4"></textarea>
+ <div class="prompt-controls">
+ <button id="generateBtn" class="primary-btn">Generate</button>
+ <button id="copyBtn" class="secondary-btn">Copy</button>
+ <button id="clearBtn" class="secondary-btn">Clear</button>
+ </div>
+ <div id="output" class="output-area hidden"></div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>PromptPal - Crafting AI Prompts Made Simple</p>
+ <nav>
+ <a href="/privacy">Privacy</a>
+ <a href="/terms">Terms</a>
+ <a href="/contact">Contact</a>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..fb26b86
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://promptpal.scroll.pub
+metaTags
+ description "Create and customize AI prompts for your favorite AI applications"
+ keywords "AI prompts, prompt generator, AI applications, prompt engineering"
+editButton /edit.html
+title PromptPal - AI Prompt Generator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..6ed2fe8
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01S3wf8tQnEJNb9ciQ3myWeq",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's my solution for an AI prompt generation website:\n\n---domain---\npromptpal.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://promptpal.scroll.pub\nmetaTags\n description \"Create and customize AI prompts for your favorite AI applications\"\n keywords \"AI prompts, prompt generator, AI applications, prompt engineering\"\neditButton /edit.html\ntitle PromptPal - AI Prompt Generator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">PromptPal</div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#apps\">Apps</a></li>\n <li><a href=\"#about\">About</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <h1>Create Perfect AI Prompts</h1>\n <p>Select your AI application and craft the perfect prompt</p>\n </section>\n\n <section id=\"apps\" class=\"app-selector\">\n <h2>Choose Your AI Application</h2>\n <div class=\"app-grid\">\n <button class=\"app-card\" data-app=\"chatgpt\">\n <img src=\"images/chatgpt.svg\" alt=\"ChatGPT\" />\n <span>ChatGPT</span>\n </button>\n <button class=\"app-card\" data-app=\"dalle\">\n <img src=\"images/dalle.svg\" alt=\"DALL-E\" />\n <span>DALL-E</span>\n </button>\n <button class=\"app-card\" data-app=\"midjourney\">\n <img src=\"images/midjourney.svg\" alt=\"Midjourney\" />\n <span>Midjourney</span>\n </button>\n <button class=\"app-card\" data-app=\"stable\">\n <img src=\"images/stable.svg\" alt=\"Stable Diffusion\" />\n <span>Stable Diffusion</span>\n </button>\n </div>\n\n <div class=\"prompt-builder hidden\">\n <h3>Create Your Prompt</h3>\n <div class=\"selected-app\"></div>\n <textarea id=\"promptInput\" placeholder=\"Enter your prompt here...\" rows=\"4\"></textarea>\n <div class=\"prompt-controls\">\n <button id=\"generateBtn\" class=\"primary-btn\">Generate</button>\n <button id=\"copyBtn\" class=\"secondary-btn\">Copy</button>\n <button id=\"clearBtn\" class=\"secondary-btn\">Clear</button>\n </div>\n <div id=\"output\" class=\"output-area hidden\"></div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>PromptPal - Crafting AI Prompts Made Simple</p>\n <nav>\n <a href=\"/privacy\">Privacy</a>\n <a href=\"/terms\">Terms</a>\n <a href=\"/contact\">Contact</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6366f1;\n --secondary-color: #4f46e5;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --card-bg: #ffffff;\n --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\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: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\n/* Header & Navigation */\nheader {\n background: var(--card-bg);\n box-shadow: var(--shadow);\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 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: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n/* Main Content */\nmain {\n margin-top: 4rem;\n padding: 2rem;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 1rem;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\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/* App Grid */\n.app-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin: 2rem 0;\n}\n\n.app-card {\n background: var(--card-bg);\n border: none;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: var(--shadow);\n cursor: pointer;\n transition: var(--transition);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.app-card:hover {\n transform: translateY(-5px);\n}\n\n.app-card img {\n width: 64px;\n height: 64px;\n}\n\n/* Prompt Builder */\n.prompt-builder {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: var(--shadow);\n margin: 2rem 0;\n}\n\ntextarea {\n width: 100%;\n padding: 1rem;\n border: 1px solid #e2e8f0;\n border-radius: 0.5rem;\n margin: 1rem 0;\n resize: vertical;\n}\n\n.prompt-controls {\n display: flex;\n gap: 1rem;\n}\n\nbutton {\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n border: none;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.primary-btn {\n background: var(--primary-color);\n color: white;\n}\n\n.secondary-btn {\n background: #e2e8f0;\n color: var(--text-color);\n}\n\n.output-area {\n margin-top: 2rem;\n padding: 1rem;\n background: #f1f5f9;\n border-radius: 0.5rem;\n}\n\n/* Utilities */\n.hidden {\n display: none;\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n }\n \n .nav-links {\n display: none;\n }\n \n .nav-links.active {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--card-bg);\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const appCards = document.querySelectorAll('.app-card');\n const promptBuilder = document.querySelector('.prompt-builder');\n const selectedApp = document.querySelector('.selected-app');\n const promptInput = document.getElementById('promptInput');\n const generateBtn = document.getElementById('generateBtn');\n const copyBtn = document.getElementById('copyBtn');\n const clearBtn = document.getElementById('clearBtn');\n const output = document.getElementById('output');\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n // Mobile menu toggle\n menuToggle?.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n });\n\n // App selection\n appCards.forEach(card => {\n card.addEventListener('click', () => {\n const app = card.dataset.app;\n promptBuilder.classList.remove('hidden');\n selectedApp.textContent = `Selected App: ${app.charAt(0).toUpperCase() + app.slice(1)}`;\n promptInput.placeholder = getPlaceholder(app);\n scrollTo(promptBuilder);\n });\n });\n\n // Generate prompt\n generateBtn.addEventListener('click', () => {\n const prompt = promptInput.value.trim();\n if (!prompt) return;\n \n output.classList.remove('hidden');\n output.textContent = enhancePrompt(prompt);\n });\n\n // Copy prompt\n copyBtn.addEventListener('click', () => {\n const textToCopy = output.classList.contains('hidden') ? \n promptInput.value : output.textContent;\n \n navigator.clipboard.writeText(textToCopy)\n .then(() => {\n copyBtn.textContent = 'Copied!';\n setTimeout(() => copyBtn.textContent = 'Copy', 2000);\n });\n });\n\n // Clear prompt\n clearBtn.addEventListener('click', () => {\n promptInput.value = '';\n output.classList.add('hidden');\n });\n\n // Helper functions\n function getPlaceholder(app) {\n const placeholders = {\n chatgpt: \"Enter your question or task...\",\n dalle: \"Describe the image you want to generate...\",\n midjourney: \"Describe your artistic vision...\",\n stable: \"Enter your image generation prompt...\"\n };\n return placeholders[app] || \"Enter your prompt...\";\n }\n\n function enhancePrompt(prompt) {\n // This is where you could add app-specific prompt enhancement logic\n return prompt;\n }\n\n function scrollTo(element) {\n element.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n});\n\n---end---\n\nThis implementation provides a clean, modern interface for users to select AI applications and create prompts. Key features include:\n\n1. Responsive design that works on all devices\n2. Smooth animations and transitions\n3. App selection cards with hover effects\n4. Prompt builder with generate/copy/clear functionality\n5. Mobile-friendly navigation\n6. Gradient text effects\n7. Modern card-based layout\n8. Accessible button and form controls\n9. Clean semantic HTML structure\n10. Professional color scheme with CSS variables\n\nThe design uses modern CSS features like grid, flexbox, and custom properties while maintaining broad browser compatibility. The JavaScript is modular and handles all user interactions smoothly."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 295,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2882
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..3f4e995
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# promptpal.scroll.pub
+Website generated by Claude from prompt: this website will allow users to select the application they want then allow them to enter prompts to be used in an AI obligation
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d22f59c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,75 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const appCards = document.querySelectorAll('.app-card');
+ const promptBuilder = document.querySelector('.prompt-builder');
+ const selectedApp = document.querySelector('.selected-app');
+ const promptInput = document.getElementById('promptInput');
+ const generateBtn = document.getElementById('generateBtn');
+ const copyBtn = document.getElementById('copyBtn');
+ const clearBtn = document.getElementById('clearBtn');
+ const output = document.getElementById('output');
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ // Mobile menu toggle
+ menuToggle?.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+
+ // App selection
+ appCards.forEach(card => {
+ card.addEventListener('click', () => {
+ const app = card.dataset.app;
+ promptBuilder.classList.remove('hidden');
+ selectedApp.textContent = `Selected App: ${app.charAt(0).toUpperCase() + app.slice(1)}`;
+ promptInput.placeholder = getPlaceholder(app);
+ scrollTo(promptBuilder);
+ });
+ });
+
+ // Generate prompt
+ generateBtn.addEventListener('click', () => {
+ const prompt = promptInput.value.trim();
+ if (!prompt) return;
+
+ output.classList.remove('hidden');
+ output.textContent = enhancePrompt(prompt);
+ });
+
+ // Copy prompt
+ copyBtn.addEventListener('click', () => {
+ const textToCopy = output.classList.contains('hidden') ?
+ promptInput.value : output.textContent;
+
+ navigator.clipboard.writeText(textToCopy)
+ .then(() => {
+ copyBtn.textContent = 'Copied!';
+ setTimeout(() => copyBtn.textContent = 'Copy', 2000);
+ });
+ });
+
+ // Clear prompt
+ clearBtn.addEventListener('click', () => {
+ promptInput.value = '';
+ output.classList.add('hidden');
+ });
+
+ // Helper functions
+ function getPlaceholder(app) {
+ const placeholders = {
+ chatgpt: "Enter your question or task...",
+ dalle: "Describe the image you want to generate...",
+ midjourney: "Describe your artistic vision...",
+ stable: "Enter your image generation prompt..."
+ };
+ return placeholders[app] || "Enter your prompt...";
+ }
+
+ function enhancePrompt(prompt) {
+ // This is where you could add app-specific prompt enhancement logic
+ return prompt;
+ }
+
+ function scrollTo(element) {
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ac0d8ca
--- /dev/null
+++ b/style.css
@@ -0,0 +1,188 @@
+:root {
+ --primary-color: #6366f1;
+ --secondary-color: #4f46e5;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --card-bg: #ffffff;
+ --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+}
+
+/* Header & Navigation */
+header {
+ background: var(--card-bg);
+ box-shadow: var(--shadow);
+ 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;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+/* Main Content */
+main {
+ margin-top: 4rem;
+ padding: 2rem;
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 1rem;
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+/* App Grid */
+.app-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ margin: 2rem 0;
+}
+
+.app-card {
+ background: var(--card-bg);
+ border: none;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: var(--shadow);
+ cursor: pointer;
+ transition: var(--transition);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+.app-card:hover {
+ transform: translateY(-5px);
+}
+
+.app-card img {
+ width: 64px;
+ height: 64px;
+}
+
+/* Prompt Builder */
+.prompt-builder {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: var(--shadow);
+ margin: 2rem 0;
+}
+
+textarea {
+ width: 100%;
+ padding: 1rem;
+ border: 1px solid #e2e8f0;
+ border-radius: 0.5rem;
+ margin: 1rem 0;
+ resize: vertical;
+}
+
+.prompt-controls {
+ display: flex;
+ gap: 1rem;
+}
+
+button {
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ border: none;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.primary-btn {
+ background: var(--primary-color);
+ color: white;
+}
+
+.secondary-btn {
+ background: #e2e8f0;
+ color: var(--text-color);
+}
+
+.output-area {
+ margin-top: 2rem;
+ padding: 1rem;
+ background: #f1f5f9;
+ border-radius: 0.5rem;
+}
+
+/* Utilities */
+.hidden {
+ display: none;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: block;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .nav-links.active {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--card-bg);
+ padding: 1rem;
+ }
+}