Changes to photovault.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   PhotoVault
+   Your Personal Photo Gallery
+ 
+ 
+ 
+   
+     Upload Photos
+     
+       
+         Choose Files
+         
+       
+       
+     
+   
+ 
+   
+     My Gallery
+     
+   
+ 
+ 
+ 
+   PhotoVault - Created with passion
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://photovault.scroll.pub
+ metaTags
+   title "PhotoVault - Your Personal Photo Gallery"
+   description "Upload, download and display your photos in a beautiful gallery"
+   keywords "photo gallery, image upload, photo storage, photo sharing"
+ editButton /edit.html
+ title PhotoVault
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_012fX8tXXwYAM7NyAThv4Q5h",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Here's a photo gallery website implementation:\n\n---domain---\nphotovault.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://photovault.scroll.pub\nmetaTags\n  title \"PhotoVault - Your Personal Photo Gallery\"\n  description \"Upload, download and display your photos in a beautiful gallery\"\n  keywords \"photo gallery, image upload, photo storage, photo sharing\"\neditButton /edit.html\ntitle PhotoVault\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  PhotoVault\n  Your Personal Photo Gallery
\n\n\n\n  \n    Upload Photos\n    \n      \n        Choose Files\n        \n      \n      
\n    
\n  \n\n  \n    My Gallery\n    
\n  \n\n\n\n  PhotoVault - Created with passion
\n\n\n---style.css---\n:root {\n  --primary-color: #2c3e50;\n  --accent-color: #3498db;\n  --light-bg: #ecf0f1;\n  --text-color: #2c3e50;\n  --spacing: 2rem;\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(--light-bg);\n}\n\nheader {\n  background: var(--primary-color);\n  color: white;\n  padding: var(--spacing);\n  text-align: center;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.tagline {\n  font-size: 1.2rem;\n  opacity: 0.9;\n}\n\nmain {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: var(--spacing);\n}\n\nsection {\n  margin-bottom: var(--spacing);\n}\n\nh2 {\n  margin-bottom: 1rem;\n  color: var(--primary-color);\n}\n\n.upload-container {\n  background: white;\n  padding: var(--spacing);\n  border-radius: 8px;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.custom-upload {\n  display: inline-block;\n  padding: 1rem 2rem;\n  background: var(--accent-color);\n  color: white;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n}\n\n.custom-upload:hover {\n  background: #2980b9;\n}\n\ninput[type=\"file\"] {\n  display: none;\n}\n\n.gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.gallery-item {\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease;\n}\n\n.gallery-item:hover {\n  transform: scale(1.02);\n}\n\n.gallery-item img {\n  width: 100%;\n  height: 250px;\n  object-fit: cover;\n}\n\n.gallery-item .download-btn {\n  position: absolute;\n  bottom: 1rem;\n  right: 1rem;\n  background: var(--accent-color);\n  color: white;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  text-decoration: none;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.gallery-item:hover .download-btn {\n  opacity: 1;\n}\n\nfooter {\n  text-align: center;\n  padding: var(--spacing);\n  background: var(--primary-color);\n  color: white;\n}\n\n@media (max-width: 768px) {\n  :root {\n    --spacing: 1rem;\n  }\n\n  h1 {\n    font-size: 2rem;\n  }\n\n  .gallery-grid {\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const fileUpload = document.getElementById('file-upload');\n  const gallery = document.getElementById('gallery');\n  const uploadPreview = document.getElementById('upload-preview');\n\n  // Store images in localStorage\n  const savedImages = JSON.parse(localStorage.getItem('gallery-images') || '[]');\n  \n  // Load saved images\n  savedImages.forEach(createGalleryItem);\n\n  fileUpload.addEventListener('change', handleFileUpload);\n\n  function handleFileUpload(e) {\n    const files = Array.from(e.target.files);\n    \n    files.forEach(file => {\n      if (!file.type.startsWith('image/')) return;\n\n      const reader = new FileReader();\n      \n      reader.onload = (event) => {\n        const imageData = event.target.result;\n        savedImages.push(imageData);\n        localStorage.setItem('gallery-images', JSON.stringify(savedImages));\n        createGalleryItem(imageData);\n      };\n\n      reader.readAsDataURL(file);\n    });\n  }\n\n  function createGalleryItem(imageData) {\n    const item = document.createElement('div');\n    item.className = 'gallery-item';\n    \n    const img = document.createElement('img');\n    img.src = imageData;\n    img.alt = 'Gallery image';\n    \n    const downloadBtn = document.createElement('a');\n    downloadBtn.className = 'download-btn';\n    downloadBtn.innerHTML = 'Download';\n    downloadBtn.href = imageData;\n    downloadBtn.download = `image-${Date.now()}.jpg`;\n    \n    item.appendChild(img);\n    item.appendChild(downloadBtn);\n    gallery.appendChild(item);\n  }\n});\n\n---end---\n\nThis implementation creates a beautiful and functional photo gallery website with the following features:\n\n1. Clean, modern design with smooth animations\n2. Responsive layout that works on all devices\n3. Upload multiple images at once\n4. Preview uploaded images in a grid layout\n5. Download functionality for each image\n6. Local storage to persist uploaded images\n7. Accessibility-friendly semantic HTML\n8. Proper meta tags for SEO\n9. Beautiful hover effects and transitions\n10. No external dependencies\n\nThe design uses a professional color scheme and includes subtle shadows and animations to enhance the user experience. The layout is responsive and adjusts gracefully on mobile devices. All images are stored in the browser's localStorage for persistence between sessions.\n\nThe domain name \"photovault.scroll.pub\" is memorable and clearly communicates the purpose of the website while maintaining professionalism."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 287,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 1919
+   }
+ }

readme.scroll

Changed around line 1

+ # photovault.scroll.pub

+ Website generated by Claude from prompt: I want to create a websit that could upload&dowload and display my photos

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const fileUpload = document.getElementById('file-upload');
+   const gallery = document.getElementById('gallery');
+   const uploadPreview = document.getElementById('upload-preview');
+ 
+   // Store images in localStorage
+   const savedImages = JSON.parse(localStorage.getItem('gallery-images') || '[]');
+ 
+   // Load saved images
+   savedImages.forEach(createGalleryItem);
+ 
+   fileUpload.addEventListener('change', handleFileUpload);
+ 
+   function handleFileUpload(e) {
+     const files = Array.from(e.target.files);
+ 
+     files.forEach(file => {
+       if (!file.type.startsWith('image/')) return;
+ 
+       const reader = new FileReader();
+ 
+       reader.onload = (event) => {
+         const imageData = event.target.result;
+         savedImages.push(imageData);
+         localStorage.setItem('gallery-images', JSON.stringify(savedImages));
+         createGalleryItem(imageData);
+       };
+ 
+       reader.readAsDataURL(file);
+     });
+   }
+ 
+   function createGalleryItem(imageData) {
+     const item = document.createElement('div');
+     item.className = 'gallery-item';
+ 
+     const img = document.createElement('img');
+     img.src = imageData;
+     img.alt = 'Gallery image';
+ 
+     const downloadBtn = document.createElement('a');
+     downloadBtn.className = 'download-btn';
+     downloadBtn.innerHTML = 'Download';
+     downloadBtn.href = imageData;
+     downloadBtn.download = `image-${Date.now()}.jpg`;
+ 
+     item.appendChild(img);
+     item.appendChild(downloadBtn);
+     gallery.appendChild(item);
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2c3e50;
+   --accent-color: #3498db;
+   --light-bg: #ecf0f1;
+   --text-color: #2c3e50;
+   --spacing: 2rem;
+ }
+ 
+ * {
+   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(--light-bg);
+ }
+ 
+ header {
+   background: var(--primary-color);
+   color: white;
+   padding: var(--spacing);
+   text-align: center;
+   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin-bottom: 0.5rem;
+ }
+ 
+ .tagline {
+   font-size: 1.2rem;
+   opacity: 0.9;
+ }
+ 
+ main {
+   max-width: 1200px;
+   margin: 0 auto;
+   padding: var(--spacing);
+ }
+ 
+ section {
+   margin-bottom: var(--spacing);
+ }
+ 
+ h2 {
+   margin-bottom: 1rem;
+   color: var(--primary-color);
+ }
+ 
+ .upload-container {
+   background: white;
+   padding: var(--spacing);
+   border-radius: 8px;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ .custom-upload {
+   display: inline-block;
+   padding: 1rem 2rem;
+   background: var(--accent-color);
+   color: white;
+   border-radius: 4px;
+   cursor: pointer;
+   transition: background 0.3s ease;
+ }
+ 
+ .custom-upload:hover {
+   background: #2980b9;
+ }
+ 
+ input[type="file"] {
+   display: none;
+ }
+ 
+ .gallery-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+   gap: 1rem;
+   padding: 1rem;
+ }
+ 
+ .gallery-item {
+   position: relative;
+   overflow: hidden;
+   border-radius: 8px;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+   transition: transform 0.3s ease;
+ }
+ 
+ .gallery-item:hover {
+   transform: scale(1.02);
+ }
+ 
+ .gallery-item img {
+   width: 100%;
+   height: 250px;
+   object-fit: cover;
+ }
+ 
+ .gallery-item .download-btn {
+   position: absolute;
+   bottom: 1rem;
+   right: 1rem;
+   background: var(--accent-color);
+   color: white;
+   padding: 0.5rem 1rem;
+   border-radius: 4px;
+   text-decoration: none;
+   opacity: 0;
+   transition: opacity 0.3s ease;
+ }
+ 
+ .gallery-item:hover .download-btn {
+   opacity: 1;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: var(--spacing);
+   background: var(--primary-color);
+   color: white;
+ }
+ 
+ @media (max-width: 768px) {
+   :root {
+     --spacing: 1rem;
+   }
+ 
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   .gallery-grid {
+     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+   }
+ }