commit 73a80f77e2d78c1afc45a7952a440bcab78299eb
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 18:56:27 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..032ceba
--- /dev/null
+++ b/body.html
@@ -0,0 +1,28 @@
+<header>
+ <h1>Star Name Sorter</h1>
+ <p class="subtitle">Organize the cosmos, one name at a time</p>
+</header>
+
+<main>
+ <section class="input-section">
+ <label for="starInput">Enter Star Names (one per line):</label>
+ <textarea id="starInput" rows="8" placeholder="Sirius Vega Polaris Betelgeuse"></textarea>
+
+ <div class="controls">
+ <button id="sortAZ" class="btn">Sort A-Z</button>
+ <button id="sortZA" class="btn">Sort Z-A</button>
+ <button id="clear" class="btn btn-secondary">Clear</button>
+ </div>
+ </section>
+
+ <section class="output-section">
+ <h2>Sorted Stars</h2>
+ <div id="result" class="result-box">
+ <p class="placeholder">Your sorted star names will appear here</p>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with 💫 for astronomers and star enthusiasts</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..e80d2bf
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://starsorter.scroll.pub
+metaTags
+editButton /edit.html
+title Star Name Sorter - Organize Celestial Objects
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..db85613
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01GB29vPXqxBaf3276qsYfGE",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a beautiful star name sorting website.\n\n---domain---\nstarsorter.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://starsorter.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Star Name Sorter - Organize Celestial Objects\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Star Name Sorter</h1>\n <p class=\"subtitle\">Organize the cosmos, one name at a time</p>\n</header>\n\n<main>\n <section class=\"input-section\">\n <label for=\"starInput\">Enter Star Names (one per line):</label>\n <textarea id=\"starInput\" rows=\"8\" placeholder=\"Sirius Vega Polaris Betelgeuse\"></textarea>\n \n <div class=\"controls\">\n <button id=\"sortAZ\" class=\"btn\">Sort A-Z</button>\n <button id=\"sortZA\" class=\"btn\">Sort Z-A</button>\n <button id=\"clear\" class=\"btn btn-secondary\">Clear</button>\n </div>\n </section>\n\n <section class=\"output-section\">\n <h2>Sorted Stars</h2>\n <div id=\"result\" class=\"result-box\">\n <p class=\"placeholder\">Your sorted star names will appear here</p>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with 💫 for astronomers and star enthusiasts</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --bg-color: #f9f9f9;\n --text-color: #2c3e50;\n --border-radius: 12px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--bg-color);\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, #1a2a3a 0%, #2c3e50 100%);\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n animation: fadeIn 1s ease-out;\n}\n\n.subtitle {\n font-size: 1.1rem;\n opacity: 0.9;\n}\n\nmain {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n flex: 1;\n}\n\n.input-section, .output-section {\n margin-bottom: 2rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ntextarea {\n width: 100%;\n padding: 1rem;\n border: 2px solid #ddd;\n border-radius: var(--border-radius);\n font-size: 1rem;\n transition: border-color 0.3s ease;\n resize: vertical;\n}\n\ntextarea:focus {\n outline: none;\n border-color: var(--accent-color);\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);\n}\n\n.controls {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n flex-wrap: wrap;\n}\n\n.btn {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n background: var(--accent-color);\n color: white;\n font-size: 1rem;\n cursor: pointer;\n transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.btn:hover {\n transform: translateY(-2px);\n background: #2980b9;\n}\n\n.btn-secondary {\n background: #95a5a6;\n}\n\n.btn-secondary:hover {\n background: #7f8c8d;\n}\n\n.result-box {\n background: white;\n padding: 1.5rem;\n border-radius: var(--border-radius);\n min-height: 200px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.placeholder {\n color: #95a5a6;\n text-align: center;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(-20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n \n .controls {\n flex-direction: column;\n }\n \n .btn {\n width: 100%;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const starInput = document.getElementById('starInput');\n const sortAZBtn = document.getElementById('sortAZ');\n const sortZABtn = document.getElementById('sortZA');\n const clearBtn = document.getElementById('clear');\n const result = document.getElementById('result');\n\n function sortStars(direction = 'asc') {\n const stars = starInput.value\n .split('\\n')\n .filter(star => star.trim() !== '')\n .map(star => star.trim());\n\n if (stars.length === 0) {\n result.innerHTML = '<p class=\"placeholder\">Please enter some star names first</p>';\n return;\n }\n\n const sortedStars = stars.sort((a, b) => {\n return direction === 'asc' \n ? a.localeCompare(b)\n : b.localeCompare(a);\n });\n\n result.innerHTML = sortedStars\n .map(star => `<p>${star}</p>`)\n .join('');\n }\n\n function clearAll() {\n starInput.value = '';\n result.innerHTML = '<p class=\"placeholder\">Your sorted star names will appear here</p>';\n }\n\n sortAZBtn.addEventListener('click', () => sortStars('asc'));\n sortZABtn.addEventListener('click', () => sortStars('desc'));\n clearBtn.addEventListener('click', clearAll);\n\n // Add animation when new results are displayed\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'childList') {\n const newNodes = Array.from(mutation.addedNodes);\n newNodes.forEach((node, index) => {\n if (node.nodeType === 1) {\n node.style.animation = `fadeIn 0.3s ease-out ${index * 0.1}s forwards`;\n }\n });\n }\n });\n });\n\n observer.observe(result, { childList: true });\n});\n\n---end---\n\nThis implementation creates a beautiful, responsive star name sorting application with the following features:\n\n1. Clean, modern design with smooth animations\n2. Responsive layout that works on all devices\n3. Elegant gradient header\n4. Smooth transitions and hover effects\n5. Animated results when sorting\n6. Error handling for empty input\n7. Accessible form controls with proper labeling\n8. Clear visual hierarchy\n9. Subtle shadows and depth\n10. Consistent color scheme and spacing\n\nThe site allows users to:\n- Input multiple star names (one per line)\n- Sort names alphabetically (A-Z or Z-A)\n- Clear all input and results\n- See results with a fade-in animation\n\nThe design is professional yet engaging, with careful attention to detail in the styling and interactions. It's built with vanilla JavaScript and CSS, requiring no external dependencies while maintaining modern best practices and accessibility standards."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 275,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2111
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..82ead9e
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# starsorter.scroll.pub
+Website generated by Claude from prompt: Star Name Sorter
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b504a6a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const starInput = document.getElementById('starInput');
+ const sortAZBtn = document.getElementById('sortAZ');
+ const sortZABtn = document.getElementById('sortZA');
+ const clearBtn = document.getElementById('clear');
+ const result = document.getElementById('result');
+
+ function sortStars(direction = 'asc') {
+ const stars = starInput.value
+ .split('\n')
+ .filter(star => star.trim() !== '')
+ .map(star => star.trim());
+
+ if (stars.length === 0) {
+ result.innerHTML = '<p class="placeholder">Please enter some star names first</p>';
+ return;
+ }
+
+ const sortedStars = stars.sort((a, b) => {
+ return direction === 'asc'
+ ? a.localeCompare(b)
+ : b.localeCompare(a);
+ });
+
+ result.innerHTML = sortedStars
+ .map(star => `<p>${star}</p>`)
+ .join('');
+ }
+
+ function clearAll() {
+ starInput.value = '';
+ result.innerHTML = '<p class="placeholder">Your sorted star names will appear here</p>';
+ }
+
+ sortAZBtn.addEventListener('click', () => sortStars('asc'));
+ sortZABtn.addEventListener('click', () => sortStars('desc'));
+ clearBtn.addEventListener('click', clearAll);
+
+ // Add animation when new results are displayed
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ if (mutation.type === 'childList') {
+ const newNodes = Array.from(mutation.addedNodes);
+ newNodes.forEach((node, index) => {
+ if (node.nodeType === 1) {
+ node.style.animation = `fadeIn 0.3s ease-out ${index * 0.1}s forwards`;
+ }
+ });
+ }
+ });
+ });
+
+ observer.observe(result, { childList: true });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c01a7af
--- /dev/null
+++ b/style.css
@@ -0,0 +1,144 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --bg-color: #f9f9f9;
+ --text-color: #2c3e50;
+ --border-radius: 12px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--bg-color);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ text-align: center;
+ padding: 3rem 1rem;
+ background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 100%);
+ color: white;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ animation: fadeIn 1s ease-out;
+}
+
+.subtitle {
+ font-size: 1.1rem;
+ opacity: 0.9;
+}
+
+main {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ flex: 1;
+}
+
+.input-section, .output-section {
+ margin-bottom: 2rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+textarea {
+ width: 100%;
+ padding: 1rem;
+ border: 2px solid #ddd;
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+ resize: vertical;
+}
+
+textarea:focus {
+ outline: none;
+ border-color: var(--accent-color);
+ box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+}
+
+.controls {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+ flex-wrap: wrap;
+}
+
+.btn {
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: var(--border-radius);
+ background: var(--accent-color);
+ color: white;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.btn:hover {
+ transform: translateY(-2px);
+ background: #2980b9;
+}
+
+.btn-secondary {
+ background: #95a5a6;
+}
+
+.btn-secondary:hover {
+ background: #7f8c8d;
+}
+
+.result-box {
+ background: white;
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ min-height: 200px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.placeholder {
+ color: #95a5a6;
+ text-align: center;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(-20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 600px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .controls {
+ flex-direction: column;
+ }
+
+ .btn {
+ width: 100%;
+ }
+}