Changes to shareflow.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     ShareFlow
+     
+       Upload
+       Pricing
+       About
+       Login
+     
+   
+ 
+ 
+ 
+   
+     Share Files Securely
+     Fast, reliable, and secure file sharing platform
+ 
+     
+       
+         
+       
+       Drag & Drop files here or
+       
+       
+     
+ 
+     
+       Up to 2GB per file - Free account
+       Unlimited speed - Premium account
+     
+   
+ 
+   
+     
+       Secure Storage
+       End-to-end encryption for your files
+     
+     
+       Fast Transfer
+       High-speed upload and download
+     
+     
+       Easy Sharing
+       Simple link sharing system
+     
+   
+ 
+ 
+ 
+   
+     
+       ShareFlow
+       Professional file sharing made simple
+     
+     
+       Links
+       Terms
+       Privacy
+       Contact
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://shareflow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title ShareFlow - Fast & Secure File Sharing
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01RDC1pQrfazyNkRN3htZxGi",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll create a file sharing website with a modern, clean design. For the domain, I suggest:\n\n---domain---\nshareflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://shareflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ShareFlow - Fast & Secure File Sharing\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    ShareFlow
\n    \n      Upload\n      Pricing\n      About\n      Login\n    
\n  \n\n\n\n  \n    Share Files Securely\n    Fast, reliable, and secure file sharing platform
\n    \n    \n      \n        \n      
\n      Drag & Drop files here or
\n      \n      \n    
\n    \n    \n      Up to 2GB per file - Free account
\n      Unlimited speed - Premium account
\n    
\n  \n\n  \n    \n      Secure Storage\n      End-to-end encryption for your files
\n    
\n    \n      Fast Transfer\n      High-speed upload and download
\n    
\n    \n      Easy Sharing\n      Simple link sharing system
\n    
\n  \n\n\n\n  \n    \n      ShareFlow\n      Professional file sharing made simple
\n    
\n    \n      Links\n      Terms\n      Privacy\n      Contact\n    
\n  
\n\n\n---style.css---\n:root {\n  --primary-color: #2563eb;\n  --secondary-color: #1e40af;\n  --bg-color: #f8fafc;\n  --text-color: #1e293b;\n  --accent-color: #3b82f6;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  line-height: 1.6;\n  color: var(--text-color);\n  background: var(--bg-color);\n}\n\nheader {\n  background: white;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n  position: fixed;\n  width: 100%;\n  top: 0;\n  z-index: 100;\n}\n\nnav {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 1rem 2rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.logo {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--primary-color);\n}\n\n.nav-links a {\n  margin-left: 2rem;\n  text-decoration: none;\n  color: var(--text-color);\n  transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n  color: var(--primary-color);\n}\n\n.login-btn {\n  background: var(--primary-color);\n  color: white !important;\n  padding: 0.5rem 1.5rem;\n  border-radius: 25px;\n}\n\nmain {\n  margin-top: 80px;\n  padding: 2rem;\n}\n\n.hero {\n  text-align: center;\n  padding: 4rem 0;\n}\n\n.hero h1 {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.upload-zone {\n  max-width: 600px;\n  margin: 2rem auto;\n  padding: 3rem;\n  border: 2px dashed var(--accent-color);\n  border-radius: 10px;\n  background: white;\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n\n.upload-zone:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n}\n\n.upload-icon {\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 1rem;\n  border-radius: 50%;\n  background: var(--bg-color);\n  position: relative;\n}\n\n.upload-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 30px;\n  height: 30px;\n  border: solid var(--primary-color);\n  border-width: 0 3px 3px 0;\n  padding: 3px;\n  transform: rotate(-135deg);\n}\n\n.select-files-btn {\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  padding: 0.8rem 2rem;\n  border-radius: 25px;\n  font-size: 1rem;\n  cursor: pointer;\n  margin-top: 1rem;\n  transition: background 0.3s ease;\n}\n\n.select-files-btn:hover {\n  background: var(--secondary-color);\n}\n\n.features {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n  padding: 4rem 0;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.feature-card {\n  background: white;\n  padding: 2rem;\n  border-radius: 10px;\n  text-align: center;\n  transition: transform 0.3s ease;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.feature-card:hover {\n  transform: translateY(-10px);\n}\n\nfooter {\n  background: white;\n  padding: 3rem 2rem;\n  margin-top: 4rem;\n}\n\n.footer-content {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 2rem;\n}\n\n.footer-section h4 {\n  color: var(--primary-color);\n  margin-bottom: 1rem;\n}\n\n.footer-section a {\n  display: block;\n  color: var(--text-color);\n  text-decoration: none;\n  margin-bottom: 0.5rem;\n}\n\n@media (max-width: 768px) {\n  nav {\n    flex-direction: column;\n    gap: 1rem;\n  }\n  \n  .nav-links {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    text-align: center;\n  }\n  \n  .nav-links a {\n    margin: 0;\n  }\n  \n  .hero h1 {\n    font-size: 2rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const uploadZone = document.getElementById('uploadZone');\n  const fileInput = document.getElementById('fileInput');\n  \n  uploadZone.addEventListener('click', () => {\n    fileInput.click();\n  });\n  \n  uploadZone.addEventListener('dragover', (e) => {\n    e.preventDefault();\n    uploadZone.style.borderColor = '#2563eb';\n    uploadZone.style.backgroundColor = '#f0f9ff';\n  });\n  \n  uploadZone.addEventListener('dragleave', (e) => {\n    e.preventDefault();\n    uploadZone.style.borderColor = '#3b82f6';\n    uploadZone.style.backgroundColor = 'white';\n  });\n  \n  uploadZone.addEventListener('drop', (e) => {\n    e.preventDefault();\n    uploadZone.style.borderColor = '#3b82f6';\n    uploadZone.style.backgroundColor = 'white';\n    \n    const files = e.dataTransfer.files;\n    handleFiles(files);\n  });\n  \n  fileInput.addEventListener('change', (e) => {\n    const files = e.target.files;\n    handleFiles(files);\n  });\n  \n  function handleFiles(files) {\n    // This is where you would implement file upload logic\n    console.log('Files to upload:', files);\n    \n    // Example feedback to user\n    const feedback = document.createElement('div');\n    feedback.textContent = `${files.length} file(s) selected for upload`;\n    feedback.style.marginTop = '1rem';\n    feedback.style.color = '#2563eb';\n    \n    const existingFeedback = uploadZone.querySelector('div:last-child');\n    if (existingFeedback) {\n      uploadZone.removeChild(existingFeedback);\n    }\n    uploadZone.appendChild(feedback);\n  }\n});\n\n---end---\n\nThis implementation features:\n\n1. Clean, modern design with smooth animations and transitions\n2. Fully responsive layout\n3. Drag and drop file upload functionality\n4. Accessible semantic HTML structure\n5. Progressive enhancement\n6. Modern CSS with custom properties\n7. Interactive hover effects\n8. Gradient text effects\n9. Card-based feature display\n10. Professional navigation and footer\n11. Clear visual hierarchy\n12. Smooth animations and transitions\n\nThe design is minimal yet engaging, with a focus on user experience and visual appeal. The color scheme is professional and the layout is optimized for both desktop and mobile viewing."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 280,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2751
+   }
+ }

readme.scroll

Changed around line 1

+ # shareflow.scroll.pub

+ Website generated by Claude from prompt: a file sharing website like turbobit.net

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const uploadZone = document.getElementById('uploadZone');
+   const fileInput = document.getElementById('fileInput');
+ 
+   uploadZone.addEventListener('click', () => {
+     fileInput.click();
+   });
+ 
+   uploadZone.addEventListener('dragover', (e) => {
+     e.preventDefault();
+     uploadZone.style.borderColor = '#2563eb';
+     uploadZone.style.backgroundColor = '#f0f9ff';
+   });
+ 
+   uploadZone.addEventListener('dragleave', (e) => {
+     e.preventDefault();
+     uploadZone.style.borderColor = '#3b82f6';
+     uploadZone.style.backgroundColor = 'white';
+   });
+ 
+   uploadZone.addEventListener('drop', (e) => {
+     e.preventDefault();
+     uploadZone.style.borderColor = '#3b82f6';
+     uploadZone.style.backgroundColor = 'white';
+ 
+     const files = e.dataTransfer.files;
+     handleFiles(files);
+   });
+ 
+   fileInput.addEventListener('change', (e) => {
+     const files = e.target.files;
+     handleFiles(files);
+   });
+ 
+   function handleFiles(files) {
+     // This is where you would implement file upload logic
+     console.log('Files to upload:', files);
+ 
+     // Example feedback to user
+     const feedback = document.createElement('div');
+     feedback.textContent = `${files.length} file(s) selected for upload`;
+     feedback.style.marginTop = '1rem';
+     feedback.style.color = '#2563eb';
+ 
+     const existingFeedback = uploadZone.querySelector('div:last-child');
+     if (existingFeedback) {
+       uploadZone.removeChild(existingFeedback);
+     }
+     uploadZone.appendChild(feedback);
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2563eb;
+   --secondary-color: #1e40af;
+   --bg-color: #f8fafc;
+   --text-color: #1e293b;
+   --accent-color: #3b82f6;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+   background: var(--bg-color);
+ }
+ 
+ header {
+   background: white;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+   position: fixed;
+   width: 100%;
+   top: 0;
+   z-index: 100;
+ }
+ 
+ nav {
+   max-width: 1200px;
+   margin: 0 auto;
+   padding: 1rem 2rem;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: 700;
+   color: var(--primary-color);
+ }
+ 
+ .nav-links a {
+   margin-left: 2rem;
+   text-decoration: none;
+   color: var(--text-color);
+   transition: color 0.3s ease;
+ }
+ 
+ .nav-links a:hover {
+   color: var(--primary-color);
+ }
+ 
+ .login-btn {
+   background: var(--primary-color);
+   color: white !important;
+   padding: 0.5rem 1.5rem;
+   border-radius: 25px;
+ }
+ 
+ main {
+   margin-top: 80px;
+   padding: 2rem;
+ }
+ 
+ .hero {
+   text-align: center;
+   padding: 4rem 0;
+ }
+ 
+ .hero h1 {
+   font-size: 3rem;
+   margin-bottom: 1rem;
+   background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+ }
+ 
+ .upload-zone {
+   max-width: 600px;
+   margin: 2rem auto;
+   padding: 3rem;
+   border: 2px dashed var(--accent-color);
+   border-radius: 10px;
+   background: white;
+   transition: all 0.3s ease;
+   cursor: pointer;
+ }
+ 
+ .upload-zone:hover {
+   transform: translateY(-5px);
+   box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+ }
+ 
+ .upload-icon {
+   width: 60px;
+   height: 60px;
+   margin: 0 auto 1rem;
+   border-radius: 50%;
+   background: var(--bg-color);
+   position: relative;
+ }
+ 
+ .upload-arrow {
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+   width: 30px;
+   height: 30px;
+   border: solid var(--primary-color);
+   border-width: 0 3px 3px 0;
+   padding: 3px;
+   transform: rotate(-135deg);
+ }
+ 
+ .select-files-btn {
+   background: var(--primary-color);
+   color: white;
+   border: none;
+   padding: 0.8rem 2rem;
+   border-radius: 25px;
+   font-size: 1rem;
+   cursor: pointer;
+   margin-top: 1rem;
+   transition: background 0.3s ease;
+ }
+ 
+ .select-files-btn:hover {
+   background: var(--secondary-color);
+ }
+ 
+ .features {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+   padding: 4rem 0;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .feature-card {
+   background: white;
+   padding: 2rem;
+   border-radius: 10px;
+   text-align: center;
+   transition: transform 0.3s ease;
+   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+ 
+ .feature-card:hover {
+   transform: translateY(-10px);
+ }
+ 
+ footer {
+   background: white;
+   padding: 3rem 2rem;
+   margin-top: 4rem;
+ }
+ 
+ .footer-content {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 2rem;
+ }
+ 
+ .footer-section h4 {
+   color: var(--primary-color);
+   margin-bottom: 1rem;
+ }
+ 
+ .footer-section a {
+   display: block;
+   color: var(--text-color);
+   text-decoration: none;
+   margin-bottom: 0.5rem;
+ }
+ 
+ @media (max-width: 768px) {
+   nav {
+     flex-direction: column;
+     gap: 1rem;
+   }
+ 
+   .nav-links {
+     display: flex;
+     flex-direction: column;
+     gap: 1rem;
+     text-align: center;
+   }
+ 
+   .nav-links a {
+     margin: 0;
+   }
+ 
+   .hero h1 {
+     font-size: 2rem;
+   }
+ }