commit 8f6f5e9109840595957dcd9e320750307ff5edc8

Author: root <root@hub.scroll.pub> Date: 2025-01-09 16:02:32 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..6f421bd --- /dev/null +++ b/body.html @@ -0,0 +1,68 @@ +<header> + <nav> + <div class="logo">MitoPix</div> + <div class="nav-links"> + <a href="#gallery">Gallery</a> + <a href="#about">About</a> + <a href="#search">Search</a> + </div> + </nav> +</header> + +<main> + <section class="hero"> + <h1>Explore the Powerhouse of the Cell</h1> + <p>The world's largest collection of public domain mitochondria images</p> + <div class="search-bar"> + <input type="search" placeholder="Search images..." aria-label="Search images"> + <button type="button">Search</button> + </div> + </section> + + <section id="gallery" class="gallery"> + <h2>Featured Images</h2> + <div class="image-grid"> + <div class="image-card"> + <img src="images/mito1.jpg" alt="Electron microscopy of mitochondria in liver cell" loading="lazy"> + <div class="image-info"> + <h3>Liver Cell Mitochondria</h3> + <p>Transmission electron microscopy, 50,000x</p> + </div> + </div> + <!-- More image cards would be dynamically loaded --> + </div> + <button class="load-more">Load More Images</button> + </section> + + <section id="about" class="about"> + <h2>About MitoPix</h2> + <div class="about-content"> + <p>MitoPix hosts the world's largest collection of public domain mitochondria images, serving both researchers and curious minds. All images are free to use and modify without attribution.</p> + <div class="stats"> + <div class="stat"> + <span class="number">10,000+</span> + <span class="label">Images</span> + </div> + <div class="stat"> + <span class="number">500+</span> + <span class="label">Contributors</span> + </div> + </div> + </div> + </section> +</main> + +<footer> + <div class="footer-content"> + <div class="footer-section"> + <h4>MitoPix</h4> + <p>Advancing science through open access imagery</p> + </div> + <div class="footer-section"> + <h4>Quick Links</h4> + <a href="#gallery">Gallery</a> + <a href="#about">About</a> + <a href="#search">Search</a> + </div> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..0e461a8 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://mitopix.scroll.pub +metaTags +editButton /edit.html +title MitoPix - The World's Largest Public Domain Mitochondria Image Collection +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..8d3f518 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01JbZkTLR7oUXq6UqnANVDHY", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "Here's my implementation:\n\n---domain---\nmitopix.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://mitopix.scroll.pub\nmetaTags\neditButton /edit.html\ntitle MitoPix - The World's Largest Public Domain Mitochondria Image Collection\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">MitoPix</div>\n <div class=\"nav-links\">\n <a href=\"#gallery\">Gallery</a>\n <a href=\"#about\">About</a>\n <a href=\"#search\">Search</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Explore the Powerhouse of the Cell</h1>\n <p>The world's largest collection of public domain mitochondria images</p>\n <div class=\"search-bar\">\n <input type=\"search\" placeholder=\"Search images...\" aria-label=\"Search images\">\n <button type=\"button\">Search</button>\n </div>\n </section>\n\n <section id=\"gallery\" class=\"gallery\">\n <h2>Featured Images</h2>\n <div class=\"image-grid\">\n <div class=\"image-card\">\n <img src=\"images/mito1.jpg\" alt=\"Electron microscopy of mitochondria in liver cell\" loading=\"lazy\">\n <div class=\"image-info\">\n <h3>Liver Cell Mitochondria</h3>\n <p>Transmission electron microscopy, 50,000x</p>\n </div>\n </div>\n <!-- More image cards would be dynamically loaded -->\n </div>\n <button class=\"load-more\">Load More Images</button>\n </section>\n\n <section id=\"about\" class=\"about\">\n <h2>About MitoPix</h2>\n <div class=\"about-content\">\n <p>MitoPix hosts the world's largest collection of public domain mitochondria images, serving both researchers and curious minds. All images are free to use and modify without attribution.</p>\n <div class=\"stats\">\n <div class=\"stat\">\n <span class=\"number\">10,000+</span>\n <span class=\"label\">Images</span>\n </div>\n <div class=\"stat\">\n <span class=\"number\">500+</span>\n <span class=\"label\">Contributors</span>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>MitoPix</h4>\n <p>Advancing science through open access imagery</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <a href=\"#gallery\">Gallery</a>\n <a href=\"#about\">About</a>\n <a href=\"#search\">Search</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #2D3436;\n --accent: #00B894;\n --light: #F5F6FA;\n --gradient: linear-gradient(135deg, #00B894, #00CEC9);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--primary);\n background: var(--light);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\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: 1000;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: var(--gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--primary);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--accent);\n}\n\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background: var(--gradient);\n color: white;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-out;\n}\n\n.search-bar {\n margin-top: 2rem;\n display: flex;\n gap: 0.5rem;\n width: 100%;\n max-width: 600px;\n}\n\n.search-bar input {\n flex: 1;\n padding: 1rem;\n border: none;\n border-radius: 50px;\n font-size: 1rem;\n}\n\n.search-bar button {\n padding: 1rem 2rem;\n border: none;\n border-radius: 50px;\n background: var(--primary);\n color: white;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.search-bar button:hover {\n transform: scale(1.05);\n}\n\n.gallery {\n padding: 5rem 5%;\n}\n\n.image-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.image-card {\n background: white;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.image-card:hover {\n transform: translateY(-5px);\n}\n\n.image-card img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n}\n\n.image-info {\n padding: 1rem;\n}\n\n.load-more {\n display: block;\n margin: 3rem auto;\n padding: 1rem 2rem;\n background: var(--gradient);\n border: none;\n border-radius: 50px;\n color: white;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.load-more:hover {\n transform: scale(1.05);\n}\n\n.about {\n padding: 5rem 5%;\n background: white;\n}\n\n.about-content {\n max-width: 800px;\n margin: 0 auto;\n}\n\n.stats {\n display: flex;\n justify-content: space-around;\n margin-top: 3rem;\n}\n\n.stat {\n text-align: center;\n}\n\n.number {\n display: block;\n font-size: 2.5rem;\n font-weight: bold;\n color: var(--accent);\n}\n\nfooter {\n background: var(--primary);\n color: white;\n padding: 3rem 5%;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .stats {\n flex-direction: column;\n gap: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Intersection Observer for fade-in animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = 1;\n entry.target.style.transform = 'translateY(0)';\n }\n });\n });\n\n // Apply fade-in animation to sections\n document.querySelectorAll('section').forEach(section => {\n section.style.opacity = 0;\n section.style.transform = 'translateY(20px)';\n section.style.transition = 'all 0.6s ease-out';\n observer.observe(section);\n });\n\n // Search functionality\n const searchInput = document.querySelector('.search-bar input');\n const searchButton = document.querySelector('.search-bar button');\n\n searchButton.addEventListener('click', () => {\n const searchTerm = searchInput.value.trim();\n if (searchTerm) {\n // Here you would typically implement the search functionality\n console.log(`Searching for: ${searchTerm}`);\n }\n });\n\n // Load more images functionality\n const loadMoreButton = document.querySelector('.load-more');\n loadMoreButton.addEventListener('click', () => {\n // Here you would typically load more images\n console.log('Loading more images...');\n });\n});\n\n---end---\n\nThis implementation creates a beautiful, modern website with smooth animations, responsive design, and a clean interface. The color scheme uses a professional teal gradient combined with clean whites and dark grays. Key features include:\n\n1. Fixed navigation with gradient logo\n2. Full-screen hero section with search\n3. Responsive image grid with hover effects\n4. Clean about section with statistics\n5. Mobile-responsive footer\n6. Smooth scroll behavior\n7. Intersection Observer for scroll animations\n8. Accessible semantic HTML\n9. Modern CSS with variables and gradients\n10. Performance optimized with lazy loading\n\nThe domain name \"mitopix\" is short, memorable, and combines \"mitochondria\" with \"pix\" (pictures)." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 304, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2703 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..d239d29 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# mitopix.scroll.pub + +website generated by Claude from prompt: A beautiful website containing the worlds largest collection of public domain mitochondria images. Useable by researchers, and by the lay public to learn more about mitochondria \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..7976175 --- /dev/null +++ b/script.js @@ -0,0 +1,48 @@ +document.addEventListener('DOMContentLoaded', () => { + // Smooth scrolling for navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Intersection Observer for fade-in animations + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = 1; + entry.target.style.transform = 'translateY(0)'; + } + }); + }); + + // Apply fade-in animation to sections + document.querySelectorAll('section').forEach(section => { + section.style.opacity = 0; + section.style.transform = 'translateY(20px)'; + section.style.transition = 'all 0.6s ease-out'; + observer.observe(section); + }); + + // Search functionality + const searchInput = document.querySelector('.search-bar input'); + const searchButton = document.querySelector('.search-bar button'); + + searchButton.addEventListener('click', () => { + const searchTerm = searchInput.value.trim(); + if (searchTerm) { + // Here you would typically implement the search functionality + console.log(`Searching for: ${searchTerm}`); + } + }); + + // Load more images functionality + const loadMoreButton = document.querySelector('.load-more'); + loadMoreButton.addEventListener('click', () => { + // Here you would typically load more images + console.log('Loading more images...'); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a456ae7 --- /dev/null +++ b/style.css @@ -0,0 +1,207 @@ +:root { + --primary: #2D3436; + --accent: #00B894; + --light: #F5F6FA; + --gradient: linear-gradient(135deg, #00B894, #00CEC9); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: system-ui, -apple-system, sans-serif; + line-height: 1.6; + color: var(--primary); + background: var(--light); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 5%; + background: white; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + position: fixed; + width: 100%; + top: 0; + z-index: 1000; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.nav-links a { + margin-left: 2rem; + text-decoration: none; + color: var(--primary); + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: var(--accent); +} + +.hero { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 2rem; + background: var(--gradient); + color: white; +} + +.hero h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + animation: fadeIn 1s ease-out; +} + +.search-bar { + margin-top: 2rem; + display: flex; + gap: 0.5rem; + width: 100%; + max-width: 600px; +} + +.search-bar input { + flex: 1; + padding: 1rem; + border: none; + border-radius: 50px; + font-size: 1rem; +} + +.search-bar button { + padding: 1rem 2rem; + border: none; + border-radius: 50px; + background: var(--primary); + color: white; + cursor: pointer; + transition: transform 0.2s ease; +} + +.search-bar button:hover { + transform: scale(1.05); +} + +.gallery { + padding: 5rem 5%; +} + +.image-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.image-card { + background: white; + border-radius: 15px; + overflow: hidden; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.image-card:hover { + transform: translateY(-5px); +} + +.image-card img { + width: 100%; + height: 200px; + object-fit: cover; +} + +.image-info { + padding: 1rem; +} + +.load-more { + display: block; + margin: 3rem auto; + padding: 1rem 2rem; + background: var(--gradient); + border: none; + border-radius: 50px; + color: white; + cursor: pointer; + transition: transform 0.2s ease; +} + +.load-more:hover { + transform: scale(1.05); +} + +.about { + padding: 5rem 5%; + background: white; +} + +.about-content { + max-width: 800px; + margin: 0 auto; +} + +.stats { + display: flex; + justify-content: space-around; + margin-top: 3rem; +} + +.stat { + text-align: center; +} + +.number { + display: block; + font-size: 2.5rem; + font-weight: bold; + color: var(--accent); +} + +footer { + background: var(--primary); + color: white; + padding: 3rem 5%; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +@media (max-width: 768px) { + .hero h1 { + font-size: 2.5rem; + } + + .nav-links { + display: none; + } + + .stats { + flex-direction: column; + gap: 2rem; + } +}