commit fd451e5d2e6ce12351c2c61e89a0b6a22b30fd01
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 03:21:39 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0d8bd49
--- /dev/null
+++ b/body.html
@@ -0,0 +1,26 @@
+<header>
+ <h1>PhotoVault</h1>
+ <p class="tagline">Your Personal Photo Gallery</p>
+</header>
+
+<main>
+ <section class="upload-section">
+ <h2>Upload Photos</h2>
+ <div class="upload-container">
+ <label for="file-upload" class="custom-upload">
+ <span>Choose Files</span>
+ <input type="file" id="file-upload" multiple accept="image/*">
+ </label>
+ <div id="upload-preview"></div>
+ </div>
+ </section>
+
+ <section class="gallery-section">
+ <h2>My Gallery</h2>
+ <div id="gallery" class="gallery-grid"></div>
+ </section>
+</main>
+
+<footer>
+ <p>PhotoVault - Created with passion</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..a20b598
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+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
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..81bfda5
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<header>\n <h1>PhotoVault</h1>\n <p class=\"tagline\">Your Personal Photo Gallery</p>\n</header>\n\n<main>\n <section class=\"upload-section\">\n <h2>Upload Photos</h2>\n <div class=\"upload-container\">\n <label for=\"file-upload\" class=\"custom-upload\">\n <span>Choose Files</span>\n <input type=\"file\" id=\"file-upload\" multiple accept=\"image/*\">\n </label>\n <div id=\"upload-preview\"></div>\n </div>\n </section>\n\n <section class=\"gallery-section\">\n <h2>My Gallery</h2>\n <div id=\"gallery\" class=\"gallery-grid\"></div>\n </section>\n</main>\n\n<footer>\n <p>PhotoVault - Created with passion</p>\n</footer>\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
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1117f0d
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# photovault.scroll.pub
+Website generated by Claude from prompt: I want to create a websit that could upload&dowload and display my photos
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..07dbc89
--- /dev/null
+++ b/script.js
@@ -0,0 +1,51 @@
+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);
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..68333ed
--- /dev/null
+++ b/style.css
@@ -0,0 +1,141 @@
+: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));
+ }
+}