XML to Scroll Converter
\n\n
\n\n
\n XML Input
\n \n\n \n
\n \n
\n 
body.html
Changed around line 1
+
+
XML to Scroll Converter
+
+
+
XML Input
+
+
+
+
+ →
+
+
+
+
Scroll Output
+
+
+
+
+
+
+
Built with love for the Scroll community
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://xml2scroll.scroll.pub
+ metaTags
+ editButton /edit.html
+ title XML to Scroll Converter
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "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\n \n\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>');\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
+ }
+ }
readme.scroll
Changed around line 1
+ # xml2scroll.scroll.pub
+ Website generated by Claude from prompt: make a website that converts XML to scroll notation. all javascript. make it look cool
script.js
Changed around line 1
+ 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>');
+
+ // 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';
+ }
+ });
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }