Changes to myshelf.scroll.pub

root

18 days ago

Initial commit

body.html

Changed around line 1
+ 
+   My Digital Library
+   A collection of my written works
+ 
+ 
+ 
+   
+     
+       
+         
+           Research Paper 2023
+           By Me
+         
+       
+       
+         
+           Technical Guide
+           By Me
+         
+       
+       
+         
+           Essays Collection
+           By Me
+         
+       
+     
+     
+   
+ 
+ 
+ 
+   Built with passion by me
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://myshelf.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Digital Bookshelf
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01QmG5KWFQAYA3ECUGG41gNJ",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help create a website for your PDF bookshelf. For the domain, I suggest:\n\n---domain---\nmyshelf.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://myshelf.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Digital Bookshelf\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  My Digital Library\n  A collection of my written works
\n\n\n\n  \n    \n      \n        \n          Research Paper 2023\n          By Me
\n        
\n      
\n      \n        \n          Technical Guide\n          By Me
\n        
\n      
\n      \n        \n          Essays Collection\n          By Me
\n        
\n      
\n    
\n    
\n  \n\n\n\n  Built with passion by me
\n\n\n---style.css---\n:root {\n  --primary-color: #2c3e50;\n  --accent-color: #e74c3c;\n  --wood-color: #8b4513;\n  --book-height: 200px;\n  --book-depth: 40px;\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  background: #f5f6fa;\n  color: var(--primary-color);\n}\n\nheader {\n  text-align: center;\n  padding: 3rem 1rem;\n  background: linear-gradient(135deg, #fff 0%, #f5f6fa 100%);\n  box-shadow: 0 2px 15px rgba(0,0,0,0.1);\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n  color: var(--primary-color);\n}\n\n.subtitle {\n  color: #666;\n  font-style: italic;\n}\n\n.bookshelf {\n  max-width: 1200px;\n  margin: 4rem auto;\n  padding: 0 2rem;\n  perspective: 1000px;\n}\n\n.shelf {\n  display: flex;\n  gap: 20px;\n  padding: 20px;\n  background: var(--wood-color);\n  border-radius: 5px 5px 0 0;\n  transform: rotateX(10deg);\n  transform-style: preserve-3d;\n}\n\n.book {\n  height: var(--book-height);\n  width: var(--book-depth);\n  position: relative;\n  transform-style: preserve-3d;\n  transition: transform 0.3s ease;\n  cursor: pointer;\n}\n\n.book:hover {\n  transform: translateY(-20px) rotateX(-10deg);\n}\n\n.spine {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: var(--accent-color);\n  padding: 20px 10px;\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n  color: white;\n  text-align: center;\n  box-shadow: -2px 0 10px rgba(0,0,0,0.2);\n  border-radius: 3px 0 0 3px;\n}\n\n.shelf-edge {\n  height: 20px;\n  background: linear-gradient(var(--wood-color), #5c2c0d);\n  margin-top: -1px;\n  transform: rotateX(-90deg);\n  transform-origin: top;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--primary-color);\n  color: white;\n}\n\n@media (max-width: 768px) {\n  .shelf {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  \n  .book {\n    margin: 10px;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const books = document.querySelectorAll('.book');\n  \n  books.forEach(book => {\n    book.addEventListener('click', () => {\n      const pdfFile = book.dataset.pdf;\n      if (pdfFile) {\n        // In a real implementation, this would trigger the PDF download\n        console.log(`Downloading: ${pdfFile}`);\n        alert('Download starting...');\n      }\n    });\n\n    // Add 3D hover effect\n    book.addEventListener('mousemove', (e) => {\n      const rect = book.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n      \n      const rotateY = (x / rect.width - 0.5) * 20;\n      const rotateX = (y / rect.height - 0.5) * 20;\n      \n      book.style.transform = `\n        translateY(-20px)\n        rotateX(${-rotateX}deg)\n        rotateY(${rotateY}deg)\n      `;\n    });\n\n    book.addEventListener('mouseleave', () => {\n      book.style.transform = '';\n    });\n  });\n});\n\n---end---\n\nThis creates a beautiful 3D bookshelf with hover effects and smooth animations. The books are displayed with vertical text on their spines and respond to mouse movements with realistic 3D transformations. The design is clean, modern, and fully responsive. The color scheme is professional and the wood texture gives it a realistic feel.\n\nTo use it, you would need to:\n1. Add your actual PDF files to the project\n2. Update the data-pdf attributes in the HTML to match your PDF filenames\n3. Implement the actual download functionality in the JavaScript (currently it just shows an alert)\n\nThe site features:\n- 3D transformed bookshelf with perspective\n- Interactive books with hover effects\n- Responsive design that works on mobile\n- Semantic HTML5 structure\n- Accessible color contrast\n- Smooth animations\n- Professional typography"
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 286,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 1688
+   }
+ }

readme.scroll

Changed around line 1

+ # myshelf.scroll.pub

+ Website generated by Claude from prompt: a website with a bookshelf for downaloadble pdfs i wrote

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const books = document.querySelectorAll('.book');
+ 
+   books.forEach(book => {
+     book.addEventListener('click', () => {
+       const pdfFile = book.dataset.pdf;
+       if (pdfFile) {
+         // In a real implementation, this would trigger the PDF download
+         console.log(`Downloading: ${pdfFile}`);
+         alert('Download starting...');
+       }
+     });
+ 
+     // Add 3D hover effect
+     book.addEventListener('mousemove', (e) => {
+       const rect = book.getBoundingClientRect();
+       const x = e.clientX - rect.left;
+       const y = e.clientY - rect.top;
+ 
+       const rotateY = (x / rect.width - 0.5) * 20;
+       const rotateX = (y / rect.height - 0.5) * 20;
+ 
+       book.style.transform = `
+         translateY(-20px)
+         rotateX(${-rotateX}deg)
+         rotateY(${rotateY}deg)
+       `;
+     });
+ 
+     book.addEventListener('mouseleave', () => {
+       book.style.transform = '';
+     });
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2c3e50;
+   --accent-color: #e74c3c;
+   --wood-color: #8b4513;
+   --book-height: 200px;
+   --book-depth: 40px;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, sans-serif;
+   line-height: 1.6;
+   background: #f5f6fa;
+   color: var(--primary-color);
+ }
+ 
+ header {
+   text-align: center;
+   padding: 3rem 1rem;
+   background: linear-gradient(135deg, #fff 0%, #f5f6fa 100%);
+   box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin-bottom: 0.5rem;
+   color: var(--primary-color);
+ }
+ 
+ .subtitle {
+   color: #666;
+   font-style: italic;
+ }
+ 
+ .bookshelf {
+   max-width: 1200px;
+   margin: 4rem auto;
+   padding: 0 2rem;
+   perspective: 1000px;
+ }
+ 
+ .shelf {
+   display: flex;
+   gap: 20px;
+   padding: 20px;
+   background: var(--wood-color);
+   border-radius: 5px 5px 0 0;
+   transform: rotateX(10deg);
+   transform-style: preserve-3d;
+ }
+ 
+ .book {
+   height: var(--book-height);
+   width: var(--book-depth);
+   position: relative;
+   transform-style: preserve-3d;
+   transition: transform 0.3s ease;
+   cursor: pointer;
+ }
+ 
+ .book:hover {
+   transform: translateY(-20px) rotateX(-10deg);
+ }
+ 
+ .spine {
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   background: var(--accent-color);
+   padding: 20px 10px;
+   writing-mode: vertical-rl;
+   text-orientation: mixed;
+   color: white;
+   text-align: center;
+   box-shadow: -2px 0 10px rgba(0,0,0,0.2);
+   border-radius: 3px 0 0 3px;
+ }
+ 
+ .shelf-edge {
+   height: 20px;
+   background: linear-gradient(var(--wood-color), #5c2c0d);
+   margin-top: -1px;
+   transform: rotateX(-90deg);
+   transform-origin: top;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--primary-color);
+   color: white;
+ }
+ 
+ @media (max-width: 768px) {
+   .shelf {
+     flex-wrap: wrap;
+     justify-content: center;
+   }
+ 
+   .book {
+     margin: 10px;
+   }
+ }