commit 8ac30d30d29bc168b34d35859e2faa8f95ef913a
Author: root <root@hub.scroll.pub>
Date: 2025-01-06 18:50:45 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..fcc2860
--- /dev/null
+++ b/body.html
@@ -0,0 +1,32 @@
+<header>
+ <h1>XML to Scroll Converter</h1>
+ <p class="tagline">Transform XML into clean Scroll format instantly</p>
+</header>
+
+<main>
+ <div class="converter-container">
+ <div class="input-section">
+ <label for="xmlInput">XML Input</label>
+ <textarea id="xmlInput" placeholder="Paste your XML here..." aria-label="XML input"></textarea>
+ </div>
+
+ <button id="convertBtn" class="convert-button" aria-label="Convert XML to Scroll">
+ <span class="button-text">Convert</span>
+ <span class="button-icon">→</span>
+ </button>
+
+ <div class="output-section">
+ <label for="scrollOutput">Scroll Output</label>
+ <textarea id="scrollOutput" readonly aria-label="Scroll output"></textarea>
+ <button id="copyBtn" class="copy-button" aria-label="Copy to clipboard">Copy</button>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <nav>
+ <a href="/about">About</a>
+ <a href="/docs">Documentation</a>
+ <a href="/api">API</a>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..06653f7
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://xmltoscroll.scroll.pub
+metaTags
+editButton /edit.html
+title XML to Scroll Converter
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..7a0f9b5
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01GngBnYN6VobkGE6RwDq3Cw",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website for converting XML to Scroll format.\n\n---domain---\nxmltoscroll.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://xmltoscroll.scroll.pub\nmetaTags\neditButton /edit.html\ntitle XML to Scroll Converter\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>XML to Scroll Converter</h1>\n <p class=\"tagline\">Transform XML into clean Scroll format instantly</p>\n</header>\n\n<main>\n <div class=\"converter-container\">\n <div class=\"input-section\">\n <label for=\"xmlInput\">XML Input</label>\n <textarea id=\"xmlInput\" placeholder=\"Paste your XML here...\" aria-label=\"XML input\"></textarea>\n </div>\n \n <button id=\"convertBtn\" class=\"convert-button\" aria-label=\"Convert XML to Scroll\">\n <span class=\"button-text\">Convert</span>\n <span class=\"button-icon\">→</span>\n </button>\n \n <div class=\"output-section\">\n <label for=\"scrollOutput\">Scroll Output</label>\n <textarea id=\"scrollOutput\" readonly aria-label=\"Scroll output\"></textarea>\n <button id=\"copyBtn\" class=\"copy-button\" aria-label=\"Copy to clipboard\">Copy</button>\n </div>\n </div>\n</main>\n\n<footer>\n <nav>\n <a href=\"/about\">About</a>\n <a href=\"/docs\">Documentation</a>\n <a href=\"/api\">API</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6366f1;\n --secondary-color: #818cf8;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --border-radius: 12px;\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 background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 3rem 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n font-weight: 800;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\nmain {\n flex: 1;\n padding: 2rem 1rem;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n}\n\n.converter-container {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 2rem;\n align-items: center;\n}\n\n.input-section, .output-section {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\nlabel {\n font-weight: 600;\n color: var(--text-color);\n}\n\ntextarea {\n height: 400px;\n padding: 1rem;\n border: 2px solid #e2e8f0;\n border-radius: var(--border-radius);\n font-family: monospace;\n font-size: 1rem;\n resize: vertical;\n transition: border-color 0.3s ease;\n}\n\ntextarea:focus {\n outline: none;\n border-color: var(--primary-color);\n}\n\n.convert-button {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 1rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n transition: transform 0.3s ease;\n}\n\n.convert-button:hover {\n transform: scale(1.1);\n}\n\n.button-icon {\n font-size: 1.5rem;\n}\n\n.copy-button {\n background: #e2e8f0;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-weight: 600;\n transition: background-color 0.3s ease;\n}\n\n.copy-button:hover {\n background: #cbd5e1;\n}\n\nfooter {\n padding: 2rem;\n text-align: center;\n background: white;\n box-shadow: 0 -2px 10px rgba(0,0,0,0.1);\n}\n\nfooter nav {\n display: flex;\n justify-content: center;\n gap: 2rem;\n}\n\nfooter a {\n color: var(--text-color);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\nfooter a:hover {\n color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n .converter-container {\n grid-template-columns: 1fr;\n }\n \n .convert-button {\n flex-direction: row;\n justify-content: center;\n padding: 1rem 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const xmlInput = document.getElementById('xmlInput');\n const scrollOutput = document.getElementById('scrollOutput');\n const convertBtn = document.getElementById('convertBtn');\n const copyBtn = document.getElementById('copyBtn');\n\n const convertXmlToScroll = (xml) => {\n try {\n // Basic XML to Scroll conversion logic\n // This is a simplified example - expand based on requirements\n const parser = new DOMParser();\n const xmlDoc = parser.parseFromString(xml, 'text/xml');\n \n let scroll = '';\n const processNode = (node, indent = '') => {\n if (node.nodeType === 1) { // Element node\n scroll += `${indent}${node.nodeName}\\n`;\n if (node.attributes.length > 0) {\n Array.from(node.attributes).forEach(attr => {\n scroll += `${indent} ${attr.name} ${attr.value}\\n`;\n });\n }\n Array.from(node.childNodes).forEach(child => {\n processNode(child, indent + ' ');\n });\n } else if (node.nodeType === 3 && node.nodeValue.trim()) { // Text node\n scroll += `${indent}${node.nodeValue.trim()}\\n`;\n }\n };\n \n processNode(xmlDoc.documentElement);\n return scroll;\n } catch (error) {\n return `Error: ${error.message}`;\n }\n };\n\n convertBtn.addEventListener('click', () => {\n const xml = xmlInput.value;\n if (!xml.trim()) {\n scrollOutput.value = 'Please enter XML content';\n return;\n }\n \n scrollOutput.value = convertXmlToScroll(xml);\n });\n\n copyBtn.addEventListener('click', async () => {\n try {\n await navigator.clipboard.writeText(scrollOutput.value);\n const originalText = copyBtn.textContent;\n copyBtn.textContent = 'Copied!';\n setTimeout(() => {\n copyBtn.textContent = originalText;\n }, 2000);\n } catch (err) {\n console.error('Failed to copy text:', err);\n }\n });\n\n // Add animation effects\n const addTypingEffect = (element) => {\n element.addEventListener('input', () => {\n element.style.borderColor = var(--primary-color);\n setTimeout(() => {\n element.style.borderColor = '';\n }, 500);\n });\n };\n\n addTypingEffect(xmlInput);\n});\n\n---end---\n\nThis implementation creates a sleek, modern converter with a beautiful gradient header, responsive design, and smooth animations. The converter includes:\n\n1. Input/output areas with monospace font for code\n2. Animated convert button\n3. Copy-to-clipboard functionality\n4. Responsive layout that adapts to mobile devices\n5. Smooth transitions and hover effects\n6. Accessibility features including ARIA labels\n7. Error handling for invalid XML\n8. Beautiful color scheme with CSS variables\n9. Professional typography and spacing\n\nThe domain name \"xmltoscroll.scroll.pub\" is:\n- Short and memorable\n- Describes the tool's purpose\n- Easy to type\n- Follows the .scroll.pub format\n\nThe conversion logic in the JavaScript can be expanded based on specific XML-to-Scroll conversion requirements."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2267
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..bd62649
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# xmltoscroll.scroll.pub
+Website generated by Claude from prompt: xml to scroll converter
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..11c6988
--- /dev/null
+++ b/script.js
@@ -0,0 +1,72 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const xmlInput = document.getElementById('xmlInput');
+ const scrollOutput = document.getElementById('scrollOutput');
+ const convertBtn = document.getElementById('convertBtn');
+ const copyBtn = document.getElementById('copyBtn');
+
+ const convertXmlToScroll = (xml) => {
+ try {
+ // Basic XML to Scroll conversion logic
+ // This is a simplified example - expand based on requirements
+ const parser = new DOMParser();
+ const xmlDoc = parser.parseFromString(xml, 'text/xml');
+
+ let scroll = '';
+ const processNode = (node, indent = '') => {
+ if (node.nodeType === 1) { // Element node
+ scroll += `${indent}${node.nodeName}\n`;
+ if (node.attributes.length > 0) {
+ Array.from(node.attributes).forEach(attr => {
+ scroll += `${indent} ${attr.name} ${attr.value}\n`;
+ });
+ }
+ Array.from(node.childNodes).forEach(child => {
+ processNode(child, indent + ' ');
+ });
+ } else if (node.nodeType === 3 && node.nodeValue.trim()) { // Text node
+ scroll += `${indent}${node.nodeValue.trim()}\n`;
+ }
+ };
+
+ processNode(xmlDoc.documentElement);
+ return scroll;
+ } catch (error) {
+ return `Error: ${error.message}`;
+ }
+ };
+
+ convertBtn.addEventListener('click', () => {
+ const xml = xmlInput.value;
+ if (!xml.trim()) {
+ scrollOutput.value = 'Please enter XML content';
+ return;
+ }
+
+ scrollOutput.value = convertXmlToScroll(xml);
+ });
+
+ copyBtn.addEventListener('click', async () => {
+ try {
+ await navigator.clipboard.writeText(scrollOutput.value);
+ const originalText = copyBtn.textContent;
+ copyBtn.textContent = 'Copied!';
+ setTimeout(() => {
+ copyBtn.textContent = originalText;
+ }, 2000);
+ } catch (err) {
+ console.error('Failed to copy text:', err);
+ }
+ });
+
+ // Add animation effects
+ const addTypingEffect = (element) => {
+ element.addEventListener('input', () => {
+ element.style.borderColor = var(--primary-color);
+ setTimeout(() => {
+ element.style.borderColor = '';
+ }, 500);
+ });
+ };
+
+ addTypingEffect(xmlInput);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b4f196f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,154 @@
+:root {
+ --primary-color: #6366f1;
+ --secondary-color: #818cf8;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --border-radius: 12px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ text-align: center;
+ padding: 3rem 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ font-weight: 800;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+}
+
+main {
+ flex: 1;
+ padding: 2rem 1rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.converter-container {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ gap: 2rem;
+ align-items: center;
+}
+
+.input-section, .output-section {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+label {
+ font-weight: 600;
+ color: var(--text-color);
+}
+
+textarea {
+ height: 400px;
+ padding: 1rem;
+ border: 2px solid #e2e8f0;
+ border-radius: var(--border-radius);
+ font-family: monospace;
+ font-size: 1rem;
+ resize: vertical;
+ transition: border-color 0.3s ease;
+}
+
+textarea:focus {
+ outline: none;
+ border-color: var(--primary-color);
+}
+
+.convert-button {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 1rem;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ transition: transform 0.3s ease;
+}
+
+.convert-button:hover {
+ transform: scale(1.1);
+}
+
+.button-icon {
+ font-size: 1.5rem;
+}
+
+.copy-button {
+ background: #e2e8f0;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ font-weight: 600;
+ transition: background-color 0.3s ease;
+}
+
+.copy-button:hover {
+ background: #cbd5e1;
+}
+
+footer {
+ padding: 2rem;
+ text-align: center;
+ background: white;
+ box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+}
+
+footer nav {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+}
+
+footer a {
+ color: var(--text-color);
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+footer a:hover {
+ color: var(--primary-color);
+}
+
+@media (max-width: 768px) {
+ .converter-container {
+ grid-template-columns: 1fr;
+ }
+
+ .convert-button {
+ flex-direction: row;
+ justify-content: center;
+ padding: 1rem 2rem;
+ }
+}