Changes to photoscape1.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   PhotoScape
+   Your personal photo gallery in the cloud
+ 
+ 
+ 
+   
+     Upload Photos
+     
+     
+   
+ 
+   
+     Your Gallery
+     
+       
+     
+   
+ 
+ 
+ 
+   PhotoScape - Simple, Secure, Stunning
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://photoscape.scroll.pub
+ metaTags
+ editButton /edit.html
+ title PhotoScape - Upload, Download & Display Your Photos
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "b444ef62-a035-41f0-b35d-11e667a546c7",
+   "object": "chat.completion",
+   "created": 1735356100,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nphotoscape.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://photoscape.scroll.pub\nmetaTags\neditButton /edit.html\ntitle PhotoScape - Upload, Download & Display Your Photos\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  PhotoScape\n  Your personal photo gallery in the cloud
\n\n\n\n  \n    Upload Photos\n    \n    \n  \n\n  \n    Your Gallery\n    \n      \n    
\n  \n\n\n\n  PhotoScape - Simple, Secure, Stunning
\n\n---style.css---\n:root {\n  --primary-color: #4a90e2;\n  --secondary-color: #50e3c2;\n  --background-color: #f5f5f5;\n  --text-color: #333;\n  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n  font-family: 'Segoe UI', system-ui, sans-serif;\n  line-height: 1.6;\n  margin: 0;\n  padding: 0;\n  background-color: var(--background-color);\n  color: var(--text-color);\n}\n\nheader {\n  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n  color: white;\n  padding: 2rem;\n  text-align: center;\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin: 0;\n}\n\np {\n  margin: 0.5rem 0 0;\n}\n\nmain {\n  padding: 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.upload-section {\n  background: white;\n  padding: 2rem;\n  border-radius: 8px;\n  box-shadow: var(--card-shadow);\n  margin-bottom: 2rem;\n}\n\n#photo-upload {\n  display: block;\n  margin: 1rem 0;\n}\n\n#upload-btn {\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  padding: 0.75rem 1.5rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n#upload-btn:hover {\n  background-color: #357abd;\n}\n\n.gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-top: 1rem;\n}\n\n.gallery-item {\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  box-shadow: var(--card-shadow);\n  transition: transform 0.3s ease;\n}\n\n.gallery-item:hover {\n  transform: translateY(-5px);\n}\n\n.gallery-item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\nfooter {\n  text-align: center;\n  padding: 1.5rem;\n  background-color: white;\n  margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n  h1 {\n    font-size: 2rem;\n  }\n  \n  .gallery-grid {\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n  const uploadInput = document.getElementById('photo-upload');\n  const uploadBtn = document.getElementById('upload-btn');\n  const gallery = document.getElementById('gallery');\n\n  uploadBtn.addEventListener('click', function() {\n    const files = uploadInput.files;\n    if (files.length > 0) {\n      Array.from(files).forEach(file => {\n        if (file.type.startsWith('image/')) {\n          const reader = new FileReader();\n          reader.onload = function(e) {\n            const imgElement = document.createElement('div');\n            imgElement.classList.add('gallery-item');\n            imgElement.innerHTML = ``;\n            gallery.appendChild(imgElement);\n          };\n          reader.readAsDataURL(file);\n        }\n      });\n    }\n  });\n\n  // Drag and drop functionality\n  document.body.addEventListener('dragover', function(e) {\n    e.preventDefault();\n    document.body.classList.add('dragover');\n  });\n\n  document.body.addEventListener('dragleave', function() {\n    document.body.classList.remove('dragover');\n  });\n\n  document.body.addEventListener('drop', function(e) {\n    e.preventDefault();\n    document.body.classList.remove('dragover');\n    uploadInput.files = e.dataTransfer.files;\n  });\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 252,
+     "completion_tokens": 1116,
+     "total_tokens": 1368,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 252
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # photoscape1.scroll.pub

+ Website generated by DeepSeek 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', function() {
+   const uploadInput = document.getElementById('photo-upload');
+   const uploadBtn = document.getElementById('upload-btn');
+   const gallery = document.getElementById('gallery');
+ 
+   uploadBtn.addEventListener('click', function() {
+     const files = uploadInput.files;
+     if (files.length > 0) {
+       Array.from(files).forEach(file => {
+         if (file.type.startsWith('image/')) {
+           const reader = new FileReader();
+           reader.onload = function(e) {
+             const imgElement = document.createElement('div');
+             imgElement.classList.add('gallery-item');
+             imgElement.innerHTML = ``;
+             gallery.appendChild(imgElement);
+           };
+           reader.readAsDataURL(file);
+         }
+       });
+     }
+   });
+ 
+   // Drag and drop functionality
+   document.body.addEventListener('dragover', function(e) {
+     e.preventDefault();
+     document.body.classList.add('dragover');
+   });
+ 
+   document.body.addEventListener('dragleave', function() {
+     document.body.classList.remove('dragover');
+   });
+ 
+   document.body.addEventListener('drop', function(e) {
+     e.preventDefault();
+     document.body.classList.remove('dragover');
+     uploadInput.files = e.dataTransfer.files;
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #4a90e2;
+   --secondary-color: #50e3c2;
+   --background-color: #f5f5f5;
+   --text-color: #333;
+   --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, sans-serif;
+   line-height: 1.6;
+   margin: 0;
+   padding: 0;
+   background-color: var(--background-color);
+   color: var(--text-color);
+ }
+ 
+ header {
+   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+   color: white;
+   padding: 2rem;
+   text-align: center;
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin: 0;
+ }
+ 
+ p {
+   margin: 0.5rem 0 0;
+ }
+ 
+ main {
+   padding: 2rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .upload-section {
+   background: white;
+   padding: 2rem;
+   border-radius: 8px;
+   box-shadow: var(--card-shadow);
+   margin-bottom: 2rem;
+ }
+ 
+ #photo-upload {
+   display: block;
+   margin: 1rem 0;
+ }
+ 
+ #upload-btn {
+   background-color: var(--primary-color);
+   color: white;
+   border: none;
+   padding: 0.75rem 1.5rem;
+   border-radius: 4px;
+   cursor: pointer;
+   transition: background-color 0.3s ease;
+ }
+ 
+ #upload-btn:hover {
+   background-color: #357abd;
+ }
+ 
+ .gallery-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+   gap: 1.5rem;
+   margin-top: 1rem;
+ }
+ 
+ .gallery-item {
+   position: relative;
+   overflow: hidden;
+   border-radius: 8px;
+   box-shadow: var(--card-shadow);
+   transition: transform 0.3s ease;
+ }
+ 
+ .gallery-item:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .gallery-item img {
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+   display: block;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1.5rem;
+   background-color: white;
+   margin-top: 2rem;
+ }
+ 
+ @media (max-width: 768px) {
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   .gallery-grid {
+     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+   }
+ }