Changes to starsorter.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Star Name Sorter
+   Organize the cosmos, one name at a time
+ 
+ 
+ 
+   
+     Enter Star Names (one per line):
+     
+ 
+     
+       
+       
+       
+     
+   
+ 
+   
+     Sorted Stars
+     
+       Your sorted star names will appear here
+     
+   
+ 
+ 
+ 
+   Made with 💫 for astronomers and star enthusiasts
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://starsorter.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Star Name Sorter - Organize Celestial Objects
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  Star Name Sorter\n  Organize the cosmos, one name at a time
\n\n\n\n  \n    Enter Star Names (one per line):\n    \n    \n    \n      \n      \n      \n    
\n  \n\n  \n    Sorted Stars\n    \n      Your sorted star names will appear here
\n    
\n  \n\n\n\n  Made with 💫 for astronomers and star enthusiasts
\n\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 = 'Please enter some star names first
';\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 => `${star}
`)\n            .join('');\n    }\n\n    function clearAll() {\n        starInput.value = '';\n        result.innerHTML = 'Your sorted star names will appear here
';\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
+   }
+ }

readme.scroll

Changed around line 1

+ # starsorter.scroll.pub

+ Website generated by Claude from prompt: Star Name Sorter

script.js

Changed around line 1
+ 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 = 'Please enter some star names first
';
+             return;
+         }
+ 
+         const sortedStars = stars.sort((a, b) => {
+             return direction === 'asc'
+                 ? a.localeCompare(b)
+                 : b.localeCompare(a);
+         });
+ 
+         result.innerHTML = sortedStars
+             .map(star => `${star}
`)
+             .join('');
+     }
+ 
+     function clearAll() {
+         starInput.value = '';
+         result.innerHTML = 'Your sorted star names will appear here
';
+     }
+ 
+     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 });
+ });

style.css

Changed around line 1
+ :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%;
+   }
+ }