Changes to devpins.scroll.pub

root

11 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     
+       DevPins
+     
+     
+       
+     
+     
+       
+       
+         
+       
+     
+   
+ 
+ 
+ 
+   
+     
+     
+       
+         const hello = () => {
+   console.log("Hello Dev!");
+ }
+       
+       
+         Clean Arrow Function
+         Modern JavaScript syntax example
+         
+           JavaScript
+           
+         
+       
+     
+ 
+     
+       
+         
+       
+       
+         Responsive Grid Layout
+         CSS Grid made simple
+         
+           CSS
+           
+         
+       
+     
+   
+ 
+ 
+ 
+   
+     About
+     Blog
+     Terms
+     Privacy
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://devpins.scroll.pub
+ metaTags
+   description A Pinterest-style platform for developers to discover and share code snippets, project ideas, and development resources
+   keywords developer, programming, code sharing, project ideas, dev resources, pinterest for developers
+   author DevPins Team
+ editButton /edit.html
+ title DevPins - Developer Inspiration Hub
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01HSEsXFpYKq5WbLUto7mQxd",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll create a Pinterest-like website for developers called \"DevPins\" - a place where developers can share and discover code snippets, project ideas, and development resources in a visual, card-based layout.\n\n---domain---\ndevpins.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://devpins.scroll.pub\nmetaTags\n  description A Pinterest-style platform for developers to discover and share code snippets, project ideas, and development resources\n  keywords developer, programming, code sharing, project ideas, dev resources, pinterest for developers\n  author DevPins Team\neditButton /edit.html\ntitle DevPins - Developer Inspiration Hub\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    \n      DevPins\n    
\n    \n      \n    
\n    \n      \n      \n    
\n  \n\n\n\n  \n    \n    \n      \n        const hello = () => {\n  console.log(\"Hello Dev!\");\n}\n      
\n      \n        Clean Arrow Function\n        Modern JavaScript syntax example
\n        \n          JavaScript\n          \n        
\n      
\n    \n\n    \n      \n        \n      
\n      \n        Responsive Grid Layout\n        CSS Grid made simple
\n        \n          CSS\n          \n        
\n      
\n    \n  
\n\n\n\n  \n    About\n    Blog\n    Terms\n    Privacy\n  \n\n\n---style.css---\n:root {\n  --primary-color: #2d3436;\n  --accent-color: #6c5ce7;\n  --bg-color: #f5f6fa;\n  --text-color: #2d3436;\n  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  --transition: all 0.3s ease;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: var(--bg-color);\n  color: var(--text-color);\n  line-height: 1.6;\n}\n\n.top-nav {\n  position: fixed;\n  top: 0;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 2rem;\n  background: white;\n  box-shadow: var(--card-shadow);\n  z-index: 1000;\n}\n\n.logo h1 {\n  font-size: 1.5rem;\n  color: var(--accent-color);\n  font-weight: 800;\n}\n\n.search-bar input {\n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: 25px;\n  background: var(--bg-color);\n  width: 300px;\n  font-size: 1rem;\n}\n\n.nav-actions button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  margin-left: 1rem;\n  transition: var(--transition);\n}\n\n.create-pin {\n  font-size: 2rem;\n  color: var(--accent-color);\n}\n\n.pins-grid {\n  margin-top: 80px;\n  padding: 2rem;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 2rem;\n  max-width: 1600px;\n  margin-inline: auto;\n}\n\n.pin {\n  background: white;\n  border-radius: 16px;\n  overflow: hidden;\n  box-shadow: var(--card-shadow);\n  transition: var(--transition);\n}\n\n.pin:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);\n}\n\n.pin-image {\n  width: 100%;\n  padding-top: 100%;\n  position: relative;\n  background: var(--primary-color);\n  overflow: hidden;\n}\n\n.pin-image pre {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 1rem;\n  margin: 0;\n  background: #282c34;\n  color: #abb2bf;\n  font-family: 'Fira Code', monospace;\n  font-size: 0.9rem;\n  overflow: auto;\n}\n\n.pin-content {\n  padding: 1rem;\n}\n\n.pin-meta {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 1rem;\n}\n\n.language {\n  background: var(--bg-color);\n  padding: 0.25rem 0.75rem;\n  border-radius: 15px;\n  font-size: 0.8rem;\n}\n\n.save-btn {\n  background: var(--accent-color);\n  color: white;\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: var(--transition);\n}\n\n.save-btn:hover {\n  background: #5849c4;\n}\n\nfooter {\n  padding: 2rem;\n  text-align: center;\n  background: white;\n  margin-top: 2rem;\n}\n\n.footer-nav a {\n  color: var(--text-color);\n  text-decoration: none;\n  margin: 0 1rem;\n  transition: var(--transition);\n}\n\n.footer-nav a:hover {\n  color: var(--accent-color);\n}\n\n@media (max-width: 768px) {\n  .search-bar input {\n    width: 200px;\n  }\n  \n  .pins-grid {\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    padding: 1rem;\n  }\n}\n\n@media (max-width: 480px) {\n  .top-nav {\n    padding: 1rem;\n  }\n  \n  .search-bar input {\n    width: 150px;\n  }\n  \n  .pins-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Save button functionality\n  document.querySelectorAll('.save-btn').forEach(button => {\n    button.addEventListener('click', (e) => {\n      const btn = e.target;\n      btn.textContent = 'Saved';\n      btn.style.background = '#27ae60';\n      setTimeout(() => {\n        btn.textContent = 'Save';\n        btn.style.background = '';\n      }, 1500);\n    });\n  });\n\n  // Search functionality\n  const searchInput = document.querySelector('.search-bar input');\n  searchInput.addEventListener('input', (e) => {\n    const searchTerm = e.target.value.toLowerCase();\n    const pins = document.querySelectorAll('.pin');\n    \n    pins.forEach(pin => {\n      const title = pin.querySelector('h2').textContent.toLowerCase();\n      const description = pin.querySelector('p').textContent.toLowerCase();\n      \n      if (title.includes(searchTerm) || description.includes(searchTerm)) {\n        pin.style.display = 'block';\n      } else {\n        pin.style.display = 'none';\n      }\n    });\n  });\n\n  // Create pin button functionality\n  const createPinBtn = document.querySelector('.create-pin');\n  createPinBtn.addEventListener('click', () => {\n    alert('Create pin feature coming soon!');\n  });\n\n  // Lazy loading for images\n  if ('IntersectionObserver' in window) {\n    const imageObserver = new IntersectionObserver((entries, observer) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          const img = entry.target;\n          img.src = img.dataset.src;\n          img.classList.remove('lazy');\n          observer.unobserve(img);\n        }\n      });\n    });\n\n    document.querySelectorAll('img[data-src]').forEach(img => {\n      imageObserver.observe(img);\n    });\n  }\n});\n\n---end---"
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 275,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2507
+   }
+ }

readme.scroll

Changed around line 1

+ # devpins.scroll.pub

+ website generated by Claude from prompt: a pinterest built for developers

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Save button functionality
+   document.querySelectorAll('.save-btn').forEach(button => {
+     button.addEventListener('click', (e) => {
+       const btn = e.target;
+       btn.textContent = 'Saved';
+       btn.style.background = '#27ae60';
+       setTimeout(() => {
+         btn.textContent = 'Save';
+         btn.style.background = '';
+       }, 1500);
+     });
+   });
+ 
+   // Search functionality
+   const searchInput = document.querySelector('.search-bar input');
+   searchInput.addEventListener('input', (e) => {
+     const searchTerm = e.target.value.toLowerCase();
+     const pins = document.querySelectorAll('.pin');
+ 
+     pins.forEach(pin => {
+       const title = pin.querySelector('h2').textContent.toLowerCase();
+       const description = pin.querySelector('p').textContent.toLowerCase();
+ 
+       if (title.includes(searchTerm) || description.includes(searchTerm)) {
+         pin.style.display = 'block';
+       } else {
+         pin.style.display = 'none';
+       }
+     });
+   });
+ 
+   // Create pin button functionality
+   const createPinBtn = document.querySelector('.create-pin');
+   createPinBtn.addEventListener('click', () => {
+     alert('Create pin feature coming soon!');
+   });
+ 
+   // Lazy loading for images
+   if ('IntersectionObserver' in window) {
+     const imageObserver = new IntersectionObserver((entries, observer) => {
+       entries.forEach(entry => {
+         if (entry.isIntersecting) {
+           const img = entry.target;
+           img.src = img.dataset.src;
+           img.classList.remove('lazy');
+           observer.unobserve(img);
+         }
+       });
+     });
+ 
+     document.querySelectorAll('img[data-src]').forEach(img => {
+       imageObserver.observe(img);
+     });
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2d3436;
+   --accent-color: #6c5ce7;
+   --bg-color: #f5f6fa;
+   --text-color: #2d3436;
+   --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+   --transition: all 0.3s ease;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+   background: var(--bg-color);
+   color: var(--text-color);
+   line-height: 1.6;
+ }
+ 
+ .top-nav {
+   position: fixed;
+   top: 0;
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 1rem 2rem;
+   background: white;
+   box-shadow: var(--card-shadow);
+   z-index: 1000;
+ }
+ 
+ .logo h1 {
+   font-size: 1.5rem;
+   color: var(--accent-color);
+   font-weight: 800;
+ }
+ 
+ .search-bar input {
+   padding: 0.5rem 1rem;
+   border: none;
+   border-radius: 25px;
+   background: var(--bg-color);
+   width: 300px;
+   font-size: 1rem;
+ }
+ 
+ .nav-actions button {
+   background: none;
+   border: none;
+   cursor: pointer;
+   margin-left: 1rem;
+   transition: var(--transition);
+ }
+ 
+ .create-pin {
+   font-size: 2rem;
+   color: var(--accent-color);
+ }
+ 
+ .pins-grid {
+   margin-top: 80px;
+   padding: 2rem;
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+   gap: 2rem;
+   max-width: 1600px;
+   margin-inline: auto;
+ }
+ 
+ .pin {
+   background: white;
+   border-radius: 16px;
+   overflow: hidden;
+   box-shadow: var(--card-shadow);
+   transition: var(--transition);
+ }
+ 
+ .pin:hover {
+   transform: translateY(-4px);
+   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+ }
+ 
+ .pin-image {
+   width: 100%;
+   padding-top: 100%;
+   position: relative;
+   background: var(--primary-color);
+   overflow: hidden;
+ }
+ 
+ .pin-image pre {
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   padding: 1rem;
+   margin: 0;
+   background: #282c34;
+   color: #abb2bf;
+   font-family: 'Fira Code', monospace;
+   font-size: 0.9rem;
+   overflow: auto;
+ }
+ 
+ .pin-content {
+   padding: 1rem;
+ }
+ 
+ .pin-meta {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   margin-top: 1rem;
+ }
+ 
+ .language {
+   background: var(--bg-color);
+   padding: 0.25rem 0.75rem;
+   border-radius: 15px;
+   font-size: 0.8rem;
+ }
+ 
+ .save-btn {
+   background: var(--accent-color);
+   color: white;
+   border: none;
+   padding: 0.5rem 1rem;
+   border-radius: 20px;
+   cursor: pointer;
+   transition: var(--transition);
+ }
+ 
+ .save-btn:hover {
+   background: #5849c4;
+ }
+ 
+ footer {
+   padding: 2rem;
+   text-align: center;
+   background: white;
+   margin-top: 2rem;
+ }
+ 
+ .footer-nav a {
+   color: var(--text-color);
+   text-decoration: none;
+   margin: 0 1rem;
+   transition: var(--transition);
+ }
+ 
+ .footer-nav a:hover {
+   color: var(--accent-color);
+ }
+ 
+ @media (max-width: 768px) {
+   .search-bar input {
+     width: 200px;
+   }
+ 
+   .pins-grid {
+     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+     padding: 1rem;
+   }
+ }
+ 
+ @media (max-width: 480px) {
+   .top-nav {
+     padding: 1rem;
+   }
+ 
+   .search-bar input {
+     width: 150px;
+   }
+ 
+   .pins-grid {
+     grid-template-columns: 1fr;
+   }
+ }