\n
\n \n
\n Drop image here or
\n \n \n
body.html
Changed around line 1
+
+
+
PixelPort
+
+
+
+
+
+
+
+
Drop image here or
+
+
+
+
+
+
+
+
Gallery
+
+
+
+
+
+
PixelPort - Share your moments
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://pixelport.scroll.pub
+ metaTags
+ title "PixelPort - Simple Image Sharing"
+ description "Upload and share your images instantly with our beautiful gallery interface"
+ keywords "image upload, photo sharing, image gallery, pictures"
+ editButton /edit.html
+ title PixelPort - Simple Image Sharing
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01NrTY2viugQRuW7DY4iEYhd",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create an elegant image upload and gallery website.\n\n---domain---\npixelport.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://pixelport.scroll.pub\nmetaTags\n title \"PixelPort - Simple Image Sharing\"\n description \"Upload and share your images instantly with our beautiful gallery interface\"\n keywords \"image upload, photo sharing, image gallery, pictures\"\neditButton /edit.html\ntitle PixelPort - Simple Image Sharing\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n \n\n\n \n \n\n \n \n \n\n\n\n---style.css---\n:root {\n --primary-color: #2d3436;\n --accent-color: #0984e3;\n --bg-color: #f5f6fa;\n --text-color: #2d3436;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\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, sans-serif;\n background: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: var(--primary-color);\n padding: 1rem;\n box-shadow: var(--shadow);\n}\n\nheader h1 {\n color: white;\n font-size: 2rem;\n text-align: center;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.upload-section {\n margin-bottom: 3rem;\n}\n\n.upload-container {\n background: white;\n border-radius: 10px;\n padding: 2rem;\n box-shadow: var(--shadow);\n}\n\n#drop-zone {\n border: 3px dashed #ddd;\n border-radius: 8px;\n padding: 3rem;\n text-align: center;\n transition: all 0.3s ease;\n}\n\n#drop-zone.dragover {\n border-color: var(--accent-color);\n background: rgba(9, 132, 227, 0.1);\n}\n\n.upload-btn {\n display: inline-block;\n background: var(--accent-color);\n color: white;\n padding: 0.8rem 1.5rem;\n border-radius: 25px;\n cursor: pointer;\n margin-top: 1rem;\n transition: transform 0.2s ease;\n}\n\n.upload-btn:hover {\n transform: translateY(-2px);\n}\n\n.gallery-section {\n background: white;\n border-radius: 10px;\n padding: 2rem;\n box-shadow: var(--shadow);\n}\n\n.gallery-section h2 {\n margin-bottom: 1.5rem;\n color: var(--primary-color);\n}\n\n.gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 1.5rem;\n}\n\n.gallery-item {\n position: relative;\n border-radius: 8px;\n overflow: hidden;\n aspect-ratio: 1;\n}\n\n.gallery-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n}\n\n.gallery-item:hover img {\n transform: scale(1.05);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n .gallery-grid {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const dropZone = document.getElementById('drop-zone');\n const fileInput = document.getElementById('file-input');\n const gallery = document.getElementById('image-gallery');\n \n // Store images in memory (in a real app, you'd use a backend)\n const images = [];\n\n // Drag and drop handlers\n dropZone.addEventListener('dragover', (e) => {\n e.preventDefault();\n dropZone.classList.add('dragover');\n });\n\n dropZone.addEventListener('dragleave', () => {\n dropZone.classList.remove('dragover');\n });\n\n dropZone.addEventListener('drop', (e) => {\n e.preventDefault();\n dropZone.classList.remove('dragover');\n handleFiles(e.dataTransfer.files);\n });\n\n fileInput.addEventListener('change', (e) => {\n handleFiles(e.target.files);\n });\n\n function handleFiles(files) {\n const file = files[0];\n if (file && file.type.startsWith('image/')) {\n const reader = new FileReader();\n \n reader.onload = (e) => {\n const imageUrl = e.target.result;\n images.unshift(imageUrl);\n updateGallery();\n };\n\n reader.readAsDataURL(file);\n }\n }\n\n function updateGallery() {\n gallery.innerHTML = '';\n images.forEach(imageUrl => {\n const item = document.createElement('div');\n item.className = 'gallery-item';\n \n const img = document.createElement('img');\n img.src = imageUrl;\n img.alt = 'Uploaded image';\n img.loading = 'lazy';\n \n item.appendChild(img);\n gallery.appendChild(item);\n });\n }\n});\n\n---end---\n\nThis creates a beautiful, responsive image upload website with drag-and-drop functionality and a masonry-style gallery. Key features:\n\n1. Clean, minimalist design with smooth animations\n2. Drag-and-drop upload zone with visual feedback\n3. Responsive gallery grid that adapts to screen size\n4. Lazy loading for images\n5. Hover effects on gallery items\n6. Accessible semantic HTML\n7. Modern CSS with CSS variables\n8. Mobile-first approach\n9. Proper meta tags for SEO\n\nNote that this is a frontend-only implementation. In a real application, you'd need to add backend storage and proper image processing."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1847
+ }
+ }
readme.scroll
Changed around line 1
+ # pixelport.scroll.pub
+ Website generated by Claude from prompt: make website for uploading and displaying image
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const dropZone = document.getElementById('drop-zone');
+ const fileInput = document.getElementById('file-input');
+ const gallery = document.getElementById('image-gallery');
+
+ // Store images in memory (in a real app, you'd use a backend)
+ const images = [];
+
+ // Drag and drop handlers
+ dropZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropZone.classList.add('dragover');
+ });
+
+ dropZone.addEventListener('dragleave', () => {
+ dropZone.classList.remove('dragover');
+ });
+
+ dropZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ dropZone.classList.remove('dragover');
+ handleFiles(e.dataTransfer.files);
+ });
+
+ fileInput.addEventListener('change', (e) => {
+ handleFiles(e.target.files);
+ });
+
+ function handleFiles(files) {
+ const file = files[0];
+ if (file && file.type.startsWith('image/')) {
+ const reader = new FileReader();
+
+ reader.onload = (e) => {
+ const imageUrl = e.target.result;
+ images.unshift(imageUrl);
+ updateGallery();
+ };
+
+ reader.readAsDataURL(file);
+ }
+ }
+
+ function updateGallery() {
+ gallery.innerHTML = '';
+ images.forEach(imageUrl => {
+ const item = document.createElement('div');
+ item.className = 'gallery-item';
+
+ const img = document.createElement('img');
+ img.src = imageUrl;
+ img.alt = 'Uploaded image';
+ img.loading = 'lazy';
+
+ item.appendChild(img);
+ gallery.appendChild(item);
+ });
+ }
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2d3436;
+ --accent-color: #0984e3;
+ --bg-color: #f5f6fa;
+ --text-color: #2d3436;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+ background: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ }
+
+ header {
+ background: var(--primary-color);
+ padding: 1rem;
+ box-shadow: var(--shadow);
+ }
+
+ header h1 {
+ color: white;
+ font-size: 2rem;
+ text-align: center;
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ }
+
+ .upload-section {
+ margin-bottom: 3rem;
+ }
+
+ .upload-container {
+ background: white;
+ border-radius: 10px;
+ padding: 2rem;
+ box-shadow: var(--shadow);
+ }
+
+ #drop-zone {
+ border: 3px dashed #ddd;
+ border-radius: 8px;
+ padding: 3rem;
+ text-align: center;
+ transition: all 0.3s ease;
+ }
+
+ #drop-zone.dragover {
+ border-color: var(--accent-color);
+ background: rgba(9, 132, 227, 0.1);
+ }
+
+ .upload-btn {
+ display: inline-block;
+ background: var(--accent-color);
+ color: white;
+ padding: 0.8rem 1.5rem;
+ border-radius: 25px;
+ cursor: pointer;
+ margin-top: 1rem;
+ transition: transform 0.2s ease;
+ }
+
+ .upload-btn:hover {
+ transform: translateY(-2px);
+ }
+
+ .gallery-section {
+ background: white;
+ border-radius: 10px;
+ padding: 2rem;
+ box-shadow: var(--shadow);
+ }
+
+ .gallery-section h2 {
+ margin-bottom: 1.5rem;
+ color: var(--primary-color);
+ }
+
+ .gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 1.5rem;
+ }
+
+ .gallery-item {
+ position: relative;
+ border-radius: 8px;
+ overflow: hidden;
+ aspect-ratio: 1;
+ }
+
+ .gallery-item img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+ }
+
+ .gallery-item:hover img {
+ transform: scale(1.05);
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+ margin-top: 3rem;
+ }
+
+ @media (max-width: 768px) {
+ .gallery-grid {
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 1rem;
+ }
+ }