commit 1185709a8e75ea50c82c82ddc6ddf26f66f53fa1
Author: root <root@hub.scroll.pub>
Date: 2025-01-06 21:47:02 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..159ef6b
--- /dev/null
+++ b/body.html
@@ -0,0 +1,22 @@
+<main class="converter">
+ <h1>XML to Scroll Converter</h1>
+ <div class="container">
+ <div class="input-panel">
+ <h2>XML Input</h2>
+ <textarea id="xmlInput" placeholder="Paste your XML here..."></textarea>
+ </div>
+ <div class="controls">
+ <button id="convertBtn" aria-label="Convert">
+ <span class="arrow">→</span>
+ </button>
+ </div>
+ <div class="output-panel">
+ <h2>Scroll Output</h2>
+ <textarea id="scrollOutput" readonly></textarea>
+ <button id="copyBtn" aria-label="Copy to clipboard">Copy</button>
+ </div>
+ </div>
+</main>
+<footer>
+ <p>Built with love for the Scroll community</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..ec20c41
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://xml2scroll.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..a79496c
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01C19pGiQwBwcjNr6RVpjQCB",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a website that converts XML to Scroll notation with a beautiful, minimalist design:\n\n---domain---\nxml2scroll.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://xml2scroll.scroll.pub\nmetaTags\neditButton /edit.html\ntitle XML to Scroll Converter\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"converter\">\n <h1>XML to Scroll Converter</h1>\n <div class=\"container\">\n <div class=\"input-panel\">\n <h2>XML Input</h2>\n <textarea id=\"xmlInput\" placeholder=\"Paste your XML here...\"></textarea>\n </div>\n <div class=\"controls\">\n <button id=\"convertBtn\" aria-label=\"Convert\">\n <span class=\"arrow\">→</span>\n </button>\n </div>\n <div class=\"output-panel\">\n <h2>Scroll Output</h2>\n <textarea id=\"scrollOutput\" readonly></textarea>\n <button id=\"copyBtn\" aria-label=\"Copy to clipboard\">Copy</button>\n </div>\n </div>\n</main>\n<footer>\n <p>Built with love for the Scroll community</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #6366f1;\n --bg: #fafafa;\n --text: #1f2937;\n --panel: #ffffff;\n --shadow: rgba(0, 0, 0, 0.1);\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(--bg);\n color: var(--text);\n line-height: 1.5;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.converter {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n flex: 1;\n}\n\nh1 {\n text-align: center;\n font-size: 2.5rem;\n margin-bottom: 2rem;\n background: linear-gradient(135deg, var(--primary), #818cf8);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.container {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 1rem;\n align-items: center;\n}\n\n.input-panel, .output-panel {\n background: var(--panel);\n padding: 1.5rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px var(--shadow);\n transition: transform 0.2s;\n}\n\n.input-panel:hover, .output-panel:hover {\n transform: translateY(-2px);\n}\n\nh2 {\n margin-bottom: 1rem;\n font-size: 1.25rem;\n color: var(--primary);\n}\n\ntextarea {\n width: 100%;\n height: 400px;\n padding: 1rem;\n border: 1px solid #e5e7eb;\n border-radius: 0.5rem;\n resize: vertical;\n font-family: monospace;\n font-size: 0.9rem;\n}\n\n.controls {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\nbutton {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 0.5rem;\n background: var(--primary);\n color: white;\n cursor: pointer;\n transition: all 0.2s;\n}\n\nbutton:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);\n}\n\n#convertBtn {\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n padding: 0;\n}\n\n.arrow {\n font-size: 1.5rem;\n}\n\n#copyBtn {\n margin-top: 1rem;\n width: 100%;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n color: #6b7280;\n}\n\n@media (max-width: 768px) {\n .container {\n grid-template-columns: 1fr;\n }\n \n .controls {\n transform: rotate(90deg);\n margin: 1rem 0;\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 function xmlToScroll(xml) {\n // Remove XML declaration\n xml = xml.replace(/<\\?xml.*?\\?>/, '');\n \n // Convert self-closing tags\n xml = xml.replace(/<([^\\s>]+)([^>]*)\\/>/g, '<$1$2></$1>');\n \n // Convert attributes to Scroll format\n xml = xml.replace(/<([^\\s>]+)([^>]*)>/g, (match, tag, attrs) => {\n const attributes = attrs.match(/(\\w+)=\"([^\"]*)\"/g);\n if (!attributes) return tag + '\\n';\n \n const scrollAttrs = attributes\n .map(attr => {\n const [key, value] = attr.split('=');\n return `${key} ${value.replace(/\"/g, '')}`;\n })\n .join('\\n');\n \n return `${tag}\\n${scrollAttrs}\\n`;\n });\n \n // Remove closing tags\n xml = xml.replace(/<\\/[^>]+>/g, '');\n \n // Clean up whitespace\n return xml.trim().split('\\n').map(line => line.trim()).filter(Boolean).join('\\n');\n }\n\n convertBtn.addEventListener('click', () => {\n try {\n const xml = xmlInput.value;\n const scroll = xmlToScroll(xml);\n scrollOutput.value = scroll;\n } catch (error) {\n scrollOutput.value = 'Error: Invalid XML format';\n }\n });\n\n copyBtn.addEventListener('click', async () => {\n try {\n await navigator.clipboard.writeText(scrollOutput.value);\n copyBtn.textContent = 'Copied!';\n setTimeout(() => {\n copyBtn.textContent = 'Copy';\n }, 2000);\n } catch (error) {\n copyBtn.textContent = 'Failed to copy';\n }\n });\n});\n\n---end---\n\nThis website features:\n1. A beautiful gradient text header\n2. Smooth animations and transitions\n3. Responsive design that works on all devices\n4. Clean, semantic HTML structure\n5. Modern CSS with custom properties\n6. Error handling and user feedback\n7. Clipboard integration\n8. Accessible buttons and labels\n9. Elegant card-based layout\n10. Professional monospace font for code\n11. Hover effects and visual feedback\n12. Optimized for both desktop and mobile views\n\nThe XML to Scroll converter handles basic XML conversion including:\n- Removal of XML declarations\n- Converting attributes to Scroll format\n- Handling self-closing tags\n- Removing closing tags\n- Proper whitespace formatting\n\nThe domain name \"xml2scroll.scroll.pub\" is:\n- Short and memorable\n- Descriptive of the tool's purpose\n- Easy to type\n- Professional"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 287,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1949
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7505169
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# xml2scroll.scroll.pub
+Website generated by Claude from prompt: make a website that converts XML to scroll notation. all javascript. make it look cool
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..cc070dc
--- /dev/null
+++ b/script.js
@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const xmlInput = document.getElementById('xmlInput');
+ const scrollOutput = document.getElementById('scrollOutput');
+ const convertBtn = document.getElementById('convertBtn');
+ const copyBtn = document.getElementById('copyBtn');
+
+ function xmlToScroll(xml) {
+ // Remove XML declaration
+ xml = xml.replace(/<\?xml.*?\?>/, '');
+
+ // Convert self-closing tags
+ xml = xml.replace(/<([^\s>]+)([^>]*)\/>/g, '<$1$2></$1>');
+
+ // Convert attributes to Scroll format
+ xml = xml.replace(/<([^\s>]+)([^>]*)>/g, (match, tag, attrs) => {
+ const attributes = attrs.match(/(\w+)="([^"]*)"/g);
+ if (!attributes) return tag + '\n';
+
+ const scrollAttrs = attributes
+ .map(attr => {
+ const [key, value] = attr.split('=');
+ return `${key} ${value.replace(/"/g, '')}`;
+ })
+ .join('\n');
+
+ return `${tag}\n${scrollAttrs}\n`;
+ });
+
+ // Remove closing tags
+ xml = xml.replace(/<\/[^>]+>/g, '');
+
+ // Clean up whitespace
+ return xml.trim().split('\n').map(line => line.trim()).filter(Boolean).join('\n');
+ }
+
+ convertBtn.addEventListener('click', () => {
+ try {
+ const xml = xmlInput.value;
+ const scroll = xmlToScroll(xml);
+ scrollOutput.value = scroll;
+ } catch (error) {
+ scrollOutput.value = 'Error: Invalid XML format';
+ }
+ });
+
+ copyBtn.addEventListener('click', async () => {
+ try {
+ await navigator.clipboard.writeText(scrollOutput.value);
+ copyBtn.textContent = 'Copied!';
+ setTimeout(() => {
+ copyBtn.textContent = 'Copy';
+ }, 2000);
+ } catch (error) {
+ copyBtn.textContent = 'Failed to copy';
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c430170
--- /dev/null
+++ b/style.css
@@ -0,0 +1,130 @@
+:root {
+ --primary: #6366f1;
+ --bg: #fafafa;
+ --text: #1f2937;
+ --panel: #ffffff;
+ --shadow: rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ line-height: 1.5;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.converter {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ flex: 1;
+}
+
+h1 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ background: linear-gradient(135deg, var(--primary), #818cf8);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.container {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ gap: 1rem;
+ align-items: center;
+}
+
+.input-panel, .output-panel {
+ background: var(--panel);
+ padding: 1.5rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px var(--shadow);
+ transition: transform 0.2s;
+}
+
+.input-panel:hover, .output-panel:hover {
+ transform: translateY(-2px);
+}
+
+h2 {
+ margin-bottom: 1rem;
+ font-size: 1.25rem;
+ color: var(--primary);
+}
+
+textarea {
+ width: 100%;
+ height: 400px;
+ padding: 1rem;
+ border: 1px solid #e5e7eb;
+ border-radius: 0.5rem;
+ resize: vertical;
+ font-family: monospace;
+ font-size: 0.9rem;
+}
+
+.controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+button {
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 0.5rem;
+ background: var(--primary);
+ color: white;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+button:hover {
+ transform: scale(1.05);
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
+}
+
+#convertBtn {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ padding: 0;
+}
+
+.arrow {
+ font-size: 1.5rem;
+}
+
+#copyBtn {
+ margin-top: 1rem;
+ width: 100%;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ color: #6b7280;
+}
+
+@media (max-width: 768px) {
+ .container {
+ grid-template-columns: 1fr;
+ }
+
+ .controls {
+ transform: rotate(90deg);
+ margin: 1rem 0;
+ }
+}