commit 1a01f95c9c52b40345e993d16c04b6be3fcde57d
Author: root <root@hub.scroll.pub>
Date: 2025-01-12 18:07:53 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..5889be7
--- /dev/null
+++ b/body.html
@@ -0,0 +1,42 @@
+<header>
+ <h1>Elegant Gallery</h1>
+ <nav>
+ <button class="view-toggle" aria-label="Toggle view mode">
+ <span class="grid-icon">⊞</span>
+ <span class="list-icon">☰</span>
+ </button>
+ </nav>
+</header>
+
+<main class="gallery-container">
+ <div class="gallery grid-view">
+ <figure class="gallery-item">
+ <img src="nature1.jpg" alt="Misty mountain landscape" loading="lazy">
+ <figcaption>Mountain Vista</figcaption>
+ </figure>
+ <figure class="gallery-item">
+ <img src="nature2.jpg" alt="Ocean sunset" loading="lazy">
+ <figcaption>Ocean Sunset</figcaption>
+ </figure>
+ <figure class="gallery-item">
+ <img src="nature3.jpg" alt="Forest pathway" loading="lazy">
+ <figcaption>Forest Path</figcaption>
+ </figure>
+ <figure class="gallery-item">
+ <img src="urban1.jpg" alt="City skyline" loading="lazy">
+ <figcaption>City Lights</figcaption>
+ </figure>
+ <figure class="gallery-item">
+ <img src="urban2.jpg" alt="Street photography" loading="lazy">
+ <figcaption>Urban Life</figcaption>
+ </figure>
+ <figure class="gallery-item">
+ <img src="urban3.jpg" alt="Architecture detail" loading="lazy">
+ <figcaption>Modern Architecture</figcaption>
+ </figure>
+ </div>
+</main>
+
+<footer>
+ <p>Built with passion by Gallery Team</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9cbcc89
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://gallery.scroll.pub
+metaTags
+editButton /edit.html
+title Elegant Gallery
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..bccd6c1
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_013jenmA2C2uMXKYDk1NCbZQ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a modern, responsive image gallery website.\n\nFor the domain, I suggest: gallery.scroll.pub - simple, memorable, and directly communicates the purpose.\n\n---domain---\ngallery.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://gallery.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Elegant Gallery\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Elegant Gallery</h1>\n <nav>\n <button class=\"view-toggle\" aria-label=\"Toggle view mode\">\n <span class=\"grid-icon\">⊞</span>\n <span class=\"list-icon\">☰</span>\n </button>\n </nav>\n</header>\n\n<main class=\"gallery-container\">\n <div class=\"gallery grid-view\">\n <figure class=\"gallery-item\">\n <img src=\"nature1.jpg\" alt=\"Misty mountain landscape\" loading=\"lazy\">\n <figcaption>Mountain Vista</figcaption>\n </figure>\n <figure class=\"gallery-item\">\n <img src=\"nature2.jpg\" alt=\"Ocean sunset\" loading=\"lazy\">\n <figcaption>Ocean Sunset</figcaption>\n </figure>\n <figure class=\"gallery-item\">\n <img src=\"nature3.jpg\" alt=\"Forest pathway\" loading=\"lazy\">\n <figcaption>Forest Path</figcaption>\n </figure>\n <figure class=\"gallery-item\">\n <img src=\"urban1.jpg\" alt=\"City skyline\" loading=\"lazy\">\n <figcaption>City Lights</figcaption>\n </figure>\n <figure class=\"gallery-item\">\n <img src=\"urban2.jpg\" alt=\"Street photography\" loading=\"lazy\">\n <figcaption>Urban Life</figcaption>\n </figure>\n <figure class=\"gallery-item\">\n <img src=\"urban3.jpg\" alt=\"Architecture detail\" loading=\"lazy\">\n <figcaption>Modern Architecture</figcaption>\n </figure>\n </div>\n</main>\n\n<footer>\n <p>Built with passion by Gallery Team</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --text-color: #333;\n --background-color: #f5f6fa;\n --transition-speed: 0.3s;\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, 'Segoe UI', sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nh1 {\n font-size: 2.5rem;\n font-weight: 300;\n letter-spacing: 2px;\n margin-bottom: 1rem;\n}\n\n.view-toggle {\n background: transparent;\n border: 2px solid white;\n color: white;\n padding: 0.5rem 1rem;\n border-radius: 25px;\n cursor: pointer;\n transition: all var(--transition-speed);\n}\n\n.view-toggle:hover {\n background: white;\n color: var(--primary-color);\n}\n\n.gallery-container {\n max-width: 1400px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.gallery {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n padding: 1rem;\n}\n\n.gallery.list-view {\n grid-template-columns: 1fr;\n}\n\n.gallery-item {\n position: relative;\n overflow: hidden;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: transform var(--transition-speed);\n}\n\n.gallery-item:hover {\n transform: translateY(-5px);\n}\n\n.gallery-item img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n display: block;\n}\n\n.gallery-item figcaption {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1rem;\n background: linear-gradient(transparent, rgba(0,0,0,0.7));\n color: white;\n transform: translateY(100%);\n transition: transform var(--transition-speed);\n}\n\n.gallery-item:hover figcaption {\n transform: translateY(0);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .gallery {\n grid-template-columns: 1fr;\n }\n \n .gallery-item img {\n height: 250px;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const gallery = document.querySelector('.gallery');\n const viewToggle = document.querySelector('.view-toggle');\n \n // View toggle functionality\n viewToggle.addEventListener('click', () => {\n gallery.classList.toggle('list-view');\n });\n \n // Lazy loading images with animation\n const images = document.querySelectorAll('.gallery-item img');\n \n const imageObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target;\n img.style.opacity = '0';\n img.src = img.getAttribute('src');\n \n img.onload = () => {\n img.style.transition = 'opacity 0.5s ease-in-out';\n img.style.opacity = '1';\n };\n \n observer.unobserve(img);\n }\n });\n });\n \n images.forEach(img => imageObserver.observe(img));\n \n // Add touch support for mobile devices\n let touchStartY;\n \n gallery.addEventListener('touchstart', (e) => {\n touchStartY = e.touches[0].clientY;\n });\n \n gallery.addEventListener('touchmove', (e) => {\n if (!touchStartY) return;\n \n const touchEndY = e.touches[0].clientY;\n const diff = touchStartY - touchEndY;\n \n if (Math.abs(diff) > 50) {\n gallery.style.transform = `translateY(${-diff}px)`;\n }\n });\n \n gallery.addEventListener('touchend', () => {\n gallery.style.transform = '';\n touchStartY = null;\n });\n});\n---end---\n\nThis gallery website features:\n\n1. Responsive grid/list view toggle\n2. Beautiful hover effects with caption reveals\n3. Lazy loading of images with fade-in animation\n4. Touch support for mobile devices\n5. Sticky header with view toggle\n6. Smooth transitions and animations\n7. Modern, clean design with CSS variables\n8. Accessible markup and ARIA labels\n9. Optimized for performance with lazy loading\n10. Mobile-first responsive design\n\nThe CSS includes advanced features like:\n- CSS Grid for layout\n- CSS Variables for theming\n- Transform and transition effects\n- Linear gradients\n- Box shadows and border radius\n- Sticky positioning\n- Smooth animations\n\nThe JavaScript includes:\n- Intersection Observer for lazy loading\n- Touch event handling\n- View toggle functionality\n- Smooth animations"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 271,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2085
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..4cd7951
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# gallery.scroll.pub
+
+website generated by Claude from prompt: Gallery
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..80ec7dd
--- /dev/null
+++ b/script.js
@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const gallery = document.querySelector('.gallery');
+ const viewToggle = document.querySelector('.view-toggle');
+
+ // View toggle functionality
+ viewToggle.addEventListener('click', () => {
+ gallery.classList.toggle('list-view');
+ });
+
+ // Lazy loading images with animation
+ const images = document.querySelectorAll('.gallery-item img');
+
+ const imageObserver = new IntersectionObserver((entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const img = entry.target;
+ img.style.opacity = '0';
+ img.src = img.getAttribute('src');
+
+ img.onload = () => {
+ img.style.transition = 'opacity 0.5s ease-in-out';
+ img.style.opacity = '1';
+ };
+
+ observer.unobserve(img);
+ }
+ });
+ });
+
+ images.forEach(img => imageObserver.observe(img));
+
+ // Add touch support for mobile devices
+ let touchStartY;
+
+ gallery.addEventListener('touchstart', (e) => {
+ touchStartY = e.touches[0].clientY;
+ });
+
+ gallery.addEventListener('touchmove', (e) => {
+ if (!touchStartY) return;
+
+ const touchEndY = e.touches[0].clientY;
+ const diff = touchStartY - touchEndY;
+
+ if (Math.abs(diff) > 50) {
+ gallery.style.transform = `translateY(${-diff}px)`;
+ }
+ });
+
+ gallery.addEventListener('touchend', () => {
+ gallery.style.transform = '';
+ touchStartY = null;
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..754fb7c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,127 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --text-color: #333;
+ --background-color: #f5f6fa;
+ --transition-speed: 0.3s;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+h1 {
+ font-size: 2.5rem;
+ font-weight: 300;
+ letter-spacing: 2px;
+ margin-bottom: 1rem;
+}
+
+.view-toggle {
+ background: transparent;
+ border: 2px solid white;
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: all var(--transition-speed);
+}
+
+.view-toggle:hover {
+ background: white;
+ color: var(--primary-color);
+}
+
+.gallery-container {
+ max-width: 1400px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+.gallery {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 1rem;
+}
+
+.gallery.list-view {
+ grid-template-columns: 1fr;
+}
+
+.gallery-item {
+ position: relative;
+ overflow: hidden;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: transform var(--transition-speed);
+}
+
+.gallery-item:hover {
+ transform: translateY(-5px);
+}
+
+.gallery-item img {
+ width: 100%;
+ height: 300px;
+ object-fit: cover;
+ display: block;
+}
+
+.gallery-item figcaption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 1rem;
+ background: linear-gradient(transparent, rgba(0,0,0,0.7));
+ color: white;
+ transform: translateY(100%);
+ transition: transform var(--transition-speed);
+}
+
+.gallery-item:hover figcaption {
+ transform: translateY(0);
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .gallery {
+ grid-template-columns: 1fr;
+ }
+
+ .gallery-item img {
+ height: 250px;
+ }
+}
\ No newline at end of file