Changes to webstash.scroll.pub

root

15 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     WebStash
+     
+   
+ 
+ 
+ 
+   
+     
+       Add New Website
+       
+         
+         
+         
+         
+         
+           
+           
+         
+       
+     
+   
+ 
+   
+ 
+ 
+ 
+   Built with ♥️ by WebStash
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://webstash.scroll.pub
+ metaTags
+ editButton /edit.html
+ title WebStash - Save & Organize Beautiful Bookmarks
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01YL2AJbAM2M937C6egDgXFZ",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Let me create a beautiful website for saving and organizing web bookmarks with a modern dark UI.\n\n---domain---\nwebstash.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://webstash.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WebStash - Save & Organize Beautiful Bookmarks\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    WebStash\n    \n  \n\n\n\n  \n    \n      Add New Website\n      \n        \n        \n        \n        \n        \n          \n          \n        
\n      \n    
\n  
\n\n  
\n\n\n\n  Built with ♥️ by WebStash
\n\n\n---style.css---\n:root {\n  --bg-primary: #0f172a;\n  --bg-secondary: #1e293b;\n  --text-primary: #e2e8f0;\n  --text-secondary: #94a3b8;\n  --accent: #6366f1;\n  --accent-hover: #818cf8;\n  --radius: 12px;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  background: var(--bg-primary);\n  color: var(--text-primary);\n  font-family: system-ui, -apple-system, sans-serif;\n  line-height: 1.6;\n  min-height: 100vh;\n}\n\nheader {\n  padding: 1.5rem;\n  background: var(--bg-secondary);\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\nh1 {\n  font-size: 1.8rem;\n  background: linear-gradient(to right, var(--accent), var(--accent-hover));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n\n.btn-primary {\n  background: var(--accent);\n  color: white;\n  border: none;\n  padding: 0.75rem 1.5rem;\n  border-radius: var(--radius);\n  cursor: pointer;\n  font-weight: 600;\n  transition: all 0.3s ease;\n}\n\n.btn-primary:hover {\n  background: var(--accent-hover);\n  transform: translateY(-2px);\n}\n\n.btn-secondary {\n  background: transparent;\n  color: var(--text-primary);\n  border: 1px solid var(--text-secondary);\n  padding: 0.75rem 1.5rem;\n  border-radius: var(--radius);\n  cursor: pointer;\n  font-weight: 600;\n  transition: all 0.3s ease;\n}\n\n.btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\nmain {\n  max-width: 1200px;\n  margin: 2rem auto;\n  padding: 0 1.5rem;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 2rem;\n  margin-top: 2rem;\n}\n\n.card {\n  background: var(--bg-secondary);\n  border-radius: var(--radius);\n  overflow: hidden;\n  transition: transform 0.3s ease;\n}\n\n.card:hover {\n  transform: translateY(-4px);\n}\n\n.card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n.card-content {\n  padding: 1.5rem;\n}\n\n.card h3 {\n  margin-bottom: 0.5rem;\n  color: var(--text-primary);\n}\n\n.card p {\n  color: var(--text-secondary);\n  font-size: 0.9rem;\n}\n\n.form-container {\n  background: var(--bg-secondary);\n  padding: 2rem;\n  border-radius: var(--radius);\n  margin-bottom: 2rem;\n}\n\n.form-container h2 {\n  margin-bottom: 1.5rem;\n}\n\nform {\n  display: grid;\n  gap: 1rem;\n}\n\ninput, textarea {\n  background: var(--bg-primary);\n  border: 1px solid var(--text-secondary);\n  padding: 0.75rem;\n  border-radius: var(--radius);\n  color: var(--text-primary);\n  font-size: 1rem;\n}\n\ntextarea {\n  min-height: 100px;\n  resize: vertical;\n}\n\n.form-actions {\n  display: flex;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.hidden {\n  display: none;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  color: var(--text-secondary);\n}\n\n@media (max-width: 768px) {\n  .grid {\n    grid-template-columns: 1fr;\n  }\n  \n  nav {\n    flex-direction: column;\n    gap: 1rem;\n    text-align: center;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const addButton = document.getElementById('addNew');\n  const addForm = document.getElementById('addForm');\n  const cancelButton = document.getElementById('cancelAdd');\n  const websiteForm = document.getElementById('websiteForm');\n  const websiteGrid = document.getElementById('websiteGrid');\n\n  // Load saved websites from localStorage\n  let websites = JSON.parse(localStorage.getItem('websites')) || [];\n\n  // Show/hide form\n  addButton.addEventListener('click', () => {\n    addForm.classList.remove('hidden');\n  });\n\n  cancelButton.addEventListener('click', () => {\n    addForm.classList.add('hidden');\n    websiteForm.reset();\n  });\n\n  // Handle form submission\n  websiteForm.addEventListener('submit', (e) => {\n    e.preventDefault();\n\n    const newWebsite = {\n      url: document.getElementById('urlInput').value,\n      title: document.getElementById('titleInput').value,\n      description: document.getElementById('descInput').value,\n      image: document.getElementById('imageInput').value,\n      id: Date.now()\n    };\n\n    websites.push(newWebsite);\n    localStorage.setItem('websites', JSON.stringify(websites));\n    \n    renderWebsites();\n    websiteForm.reset();\n    addForm.classList.add('hidden');\n  });\n\n  // Render websites\n  function renderWebsites() {\n    websiteGrid.innerHTML = websites.map(site => `\n      \n        No Image'\">\n        \n          ${site.title}\n          ${site.description}
\n        
\n      
\n    `).join('');\n  }\n\n  // Initial render\n  renderWebsites();\n});\n\n---end---\n\nThis implementation creates a beautiful, modern website for saving and organizing web bookmarks. Key features include:\n\n1. Clean, minimalist dark mode UI with smooth animations\n2. Responsive grid layout that adapts to different screen sizes\n3. Local storage persistence\n4. Form validation and error handling\n5. Fallback image handling\n6. Smooth transitions and hover effects\n7. Accessible form controls and semantic HTML\n8. Modern CSS features including CSS variables, grid, and flexbox\n9. Clean and maintainable JavaScript code\n\nThe domain name \"webstash\" combines \"web\" with \"stash\" (meaning a collection or storage), making it memorable and relevant to the site's purpose."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 294,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2364
+   }
+ }

readme.scroll

Changed around line 1

+ # webstash.scroll.pub

+ Website generated by Claude from prompt: Create a listing website where you can save websites with images, title and description. the ui should be dark mode rounded corners.

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const addButton = document.getElementById('addNew');
+   const addForm = document.getElementById('addForm');
+   const cancelButton = document.getElementById('cancelAdd');
+   const websiteForm = document.getElementById('websiteForm');
+   const websiteGrid = document.getElementById('websiteGrid');
+ 
+   // Load saved websites from localStorage
+   let websites = JSON.parse(localStorage.getItem('websites')) || [];
+ 
+   // Show/hide form
+   addButton.addEventListener('click', () => {
+     addForm.classList.remove('hidden');
+   });
+ 
+   cancelButton.addEventListener('click', () => {
+     addForm.classList.add('hidden');
+     websiteForm.reset();
+   });
+ 
+   // Handle form submission
+   websiteForm.addEventListener('submit', (e) => {
+     e.preventDefault();
+ 
+     const newWebsite = {
+       url: document.getElementById('urlInput').value,
+       title: document.getElementById('titleInput').value,
+       description: document.getElementById('descInput').value,
+       image: document.getElementById('imageInput').value,
+       id: Date.now()
+     };
+ 
+     websites.push(newWebsite);
+     localStorage.setItem('websites', JSON.stringify(websites));
+ 
+     renderWebsites();
+     websiteForm.reset();
+     addForm.classList.add('hidden');
+   });
+ 
+   // Render websites
+   function renderWebsites() {
+     websiteGrid.innerHTML = websites.map(site => `
+       
+         
+         
+           ${site.title}
+           ${site.description}
+         
+       
+     `).join('');
+   }
+ 
+   // Initial render
+   renderWebsites();
+ });

style.css

Changed around line 1
+ :root {
+   --bg-primary: #0f172a;
+   --bg-secondary: #1e293b;
+   --text-primary: #e2e8f0;
+   --text-secondary: #94a3b8;
+   --accent: #6366f1;
+   --accent-hover: #818cf8;
+   --radius: 12px;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   background: var(--bg-primary);
+   color: var(--text-primary);
+   font-family: system-ui, -apple-system, sans-serif;
+   line-height: 1.6;
+   min-height: 100vh;
+ }
+ 
+ header {
+   padding: 1.5rem;
+   background: var(--bg-secondary);
+   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ }
+ 
+ nav {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ h1 {
+   font-size: 1.8rem;
+   background: linear-gradient(to right, var(--accent), var(--accent-hover));
+   -webkit-background-clip: text;
+   background-clip: text;
+   color: transparent;
+ }
+ 
+ .btn-primary {
+   background: var(--accent);
+   color: white;
+   border: none;
+   padding: 0.75rem 1.5rem;
+   border-radius: var(--radius);
+   cursor: pointer;
+   font-weight: 600;
+   transition: all 0.3s ease;
+ }
+ 
+ .btn-primary:hover {
+   background: var(--accent-hover);
+   transform: translateY(-2px);
+ }
+ 
+ .btn-secondary {
+   background: transparent;
+   color: var(--text-primary);
+   border: 1px solid var(--text-secondary);
+   padding: 0.75rem 1.5rem;
+   border-radius: var(--radius);
+   cursor: pointer;
+   font-weight: 600;
+   transition: all 0.3s ease;
+ }
+ 
+ .btn-secondary:hover {
+   background: rgba(255, 255, 255, 0.1);
+ }
+ 
+ main {
+   max-width: 1200px;
+   margin: 2rem auto;
+   padding: 0 1.5rem;
+ }
+ 
+ .grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .card {
+   background: var(--bg-secondary);
+   border-radius: var(--radius);
+   overflow: hidden;
+   transition: transform 0.3s ease;
+ }
+ 
+ .card:hover {
+   transform: translateY(-4px);
+ }
+ 
+ .card img {
+   width: 100%;
+   height: 200px;
+   object-fit: cover;
+ }
+ 
+ .card-content {
+   padding: 1.5rem;
+ }
+ 
+ .card h3 {
+   margin-bottom: 0.5rem;
+   color: var(--text-primary);
+ }
+ 
+ .card p {
+   color: var(--text-secondary);
+   font-size: 0.9rem;
+ }
+ 
+ .form-container {
+   background: var(--bg-secondary);
+   padding: 2rem;
+   border-radius: var(--radius);
+   margin-bottom: 2rem;
+ }
+ 
+ .form-container h2 {
+   margin-bottom: 1.5rem;
+ }
+ 
+ form {
+   display: grid;
+   gap: 1rem;
+ }
+ 
+ input, textarea {
+   background: var(--bg-primary);
+   border: 1px solid var(--text-secondary);
+   padding: 0.75rem;
+   border-radius: var(--radius);
+   color: var(--text-primary);
+   font-size: 1rem;
+ }
+ 
+ textarea {
+   min-height: 100px;
+   resize: vertical;
+ }
+ 
+ .form-actions {
+   display: flex;
+   gap: 1rem;
+   margin-top: 1rem;
+ }
+ 
+ .hidden {
+   display: none;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   color: var(--text-secondary);
+ }
+ 
+ @media (max-width: 768px) {
+   .grid {
+     grid-template-columns: 1fr;
+   }
+ 
+   nav {
+     flex-direction: column;
+     gap: 1rem;
+     text-align: center;
+   }
+ }