index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://mitopowerhouse.wiki
+ metaTags
+ editButton /edit.html
+ title MitoPDFs - Mitochondrial Research Library
+ style.css
+ header
+ class hero
+ nav
+ div MitoPDFs
+ class logo
+ div
+ class nav-links
+ a Gallery
+ href #gallery
+ a Table
+ href #table
+ a About
+ href #about
+ main
+ section
+ id gallery
+ h1 Mitochondrial Research Papers
+ div
+ class search-container
+ input Search papers...
+ type text
+ id searchInput
+ placeholder Enter keywords...
+ select
+ id filterSelect
+ option All Categories
+ value all
+ option Cell Biology
+ value cell-biology
+ option Metabolism
+ value metabolism
+ option Disease
+ value disease
+ div
+ class pdf-grid
+ div
+ class pdf-card
+ img thumbnail1.jpg
+ class pdf-thumbnail
+ alt Paper thumbnail
+ h3 Mitochondrial DNA and Human Evolution
+ p Authors: Wilson et al., 2023
+ div
+ class pdf-meta
+ span Cell Biology
+ class tag
+ span 2.3 MB
+ class size
+ a Download PDF
+ href papers/mito-evolution.pdf
+ class download-btn
+ div
+ class pdf-card
+ img thumbnail2.jpg
+ class pdf-thumbnail
+ alt Paper thumbnail
+ h3 Role of Mitochondria in Energy Metabolism
+ p Authors: Smith et al., 2023
+ div
+ class pdf-meta
+ span Metabolism
+ class tag
+ span 1.8 MB
+ class size
+ a Download PDF
+ href papers/mito-metabolism.pdf
+ class download-btn
+ footer
+ div
+ class footer-content
+ p Built for the advancement of mitochondrial research
+ div
+ class footer-links
+ a About
+ href #about
+ a Contact
+ href mailto:contact@mitopowerhouse.wiki
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01YQCD2KGtDuUmsZMMhZ67tJ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create this website for mitochondrial research PDFs. For the domain, I suggest:\n\n---domain---\nmitopowerhouse.wiki\n\n---index.scroll---\nbuildHtml\nbaseUrl https://mitopowerhouse.wiki\nmetaTags\neditButton /edit.html\ntitle MitoPDFs - Mitochondrial Research Library\nstyle.css\nheader\n class hero\n nav\n div MitoPDFs\n class logo\n div\n class nav-links\n a Gallery\n href #gallery\n a Table\n href #table\n a About\n href #about\nmain\n section\n id gallery\n h1 Mitochondrial Research Papers\n div\n class search-container\n input Search papers...\n type text\n id searchInput\n placeholder Enter keywords...\n select\n id filterSelect\n option All Categories\n value all\n option Cell Biology\n value cell-biology\n option Metabolism\n value metabolism\n option Disease\n value disease\n div\n class pdf-grid\n div\n class pdf-card\n img thumbnail1.jpg\n class pdf-thumbnail\n alt Paper thumbnail\n h3 Mitochondrial DNA and Human Evolution\n p Authors: Wilson et al., 2023\n div\n class pdf-meta\n span Cell Biology\n class tag\n span 2.3 MB\n class size\n a Download PDF\n href papers/mito-evolution.pdf\n class download-btn\n div\n class pdf-card\n img thumbnail2.jpg\n class pdf-thumbnail\n alt Paper thumbnail\n h3 Role of Mitochondria in Energy Metabolism\n p Authors: Smith et al., 2023\n div\n class pdf-meta\n span Metabolism\n class tag\n span 1.8 MB\n class size\n a Download PDF\n href papers/mito-metabolism.pdf\n class download-btn\nfooter\n div\n class footer-content\n p Built for the advancement of mitochondrial research\n div\n class footer-links\n a About\n href #about\n a Contact\n href mailto:contact@mitopowerhouse.wiki\nscript.js\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --background-color: #f9fafb;\n --card-background: #ffffff;\n --text-color: #2c3e50;\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: 'Inter', system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n padding: 2rem;\n color: white;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n letter-spacing: -0.5px;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: opacity 0.2s;\n}\n\n.nav-links a:hover {\n opacity: 0.8;\n}\n\n.search-container {\n max-width: 800px;\n margin: 2rem auto;\n display: flex;\n gap: 1rem;\n}\n\ninput, select {\n padding: 0.8rem;\n border: 2px solid #e2e8f0;\n border-radius: 8px;\n font-size: 1rem;\n}\n\ninput {\n flex: 1;\n}\n\n.pdf-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.pdf-card {\n background: var(--card-background);\n border-radius: 12px;\n overflow: hidden;\n box-shadow: var(--shadow);\n transition: transform 0.2s;\n}\n\n.pdf-card:hover {\n transform: translateY(-4px);\n}\n\n.pdf-thumbnail {\n width: 100%;\n height: 200px;\n object-fit: cover;\n}\n\n.pdf-card h3 {\n padding: 1rem;\n font-size: 1.1rem;\n}\n\n.pdf-meta {\n padding: 0 1rem;\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\n.tag {\n background: #e2e8f0;\n padding: 0.2rem 0.6rem;\n border-radius: 20px;\n font-size: 0.8rem;\n}\n\n.download-btn {\n display: block;\n background: var(--accent-color);\n color: white;\n text-decoration: none;\n padding: 0.8rem;\n text-align: center;\n transition: background-color 0.2s;\n}\n\n.download-btn:hover {\n background-color: #2980b9;\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n text-align: center;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n gap: 1rem;\n }\n \n .pdf-grid {\n grid-template-columns: 1fr;\n padding: 1rem;\n }\n \n .search-container {\n flex-direction: column;\n padding: 0 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const searchInput = document.getElementById('searchInput');\n const filterSelect = document.getElementById('filterSelect');\n const pdfCards = document.querySelectorAll('.pdf-card');\n\n function filterPDFs() {\n const searchTerm = searchInput.value.toLowerCase();\n const selectedCategory = filterSelect.value;\n\n pdfCards.forEach(card => {\n const title = card.querySelector('h3').textContent.toLowerCase();\n const category = card.querySelector('.tag').textContent.toLowerCase();\n \n const matchesSearch = title.includes(searchTerm);\n const matchesCategory = selectedCategory === 'all' || category === selectedCategory;\n\n card.style.display = matchesSearch && matchesCategory ? 'block' : 'none';\n });\n }\n\n searchInput.addEventListener('input', filterPDFs);\n filterSelect.addEventListener('change', filterPDFs);\n\n // Lazy loading for thumbnails\n if ('IntersectionObserver' in window) {\n const imageObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target;\n img.src = img.dataset.src;\n observer.unobserve(img);\n }\n });\n });\n\n document.querySelectorAll('img[data-src]').forEach(img => {\n imageObserver.observe(img);\n });\n }\n});\n\n---end---\n\nThis implementation creates a beautiful, responsive gallery of PDF research papers with:\n\n1. Clean, modern design with smooth animations\n2. Search and filter functionality\n3. Card-based layout with thumbnails\n4. Responsive design that works on all devices\n5. Lazy loading for images\n6. Accessible semantic HTML\n7. Beautiful gradient header\n8. Smooth hover effects\n9. Professional typography\n\nThe domain name \"mitopowerhouse.wiki\" is perfect because:\n- \"Mito\" refers to mitochondria\n- \"Powerhouse\" references the famous \"powerhouse of the cell\" phrase\n- \".wiki\" indicates it's a knowledge repository\n- It's memorable and easy to type\n\nYou can add more PDF cards by copying the existing card structure and updating the content. The JavaScript includes search and filter functionality that will work with any number of PDFs added to the gallery."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 932,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2183
+ }
+ }
readme.scroll
Changed around line 1
+ # mitopowerhouse.wiki.powerhouse.wiki
+
+ website generated by Claude from prompt: A website that showcases academic pdfs about mitochondria research. Mito PDFs. Beautiful landing page, with a card for each PDF, listing the title, and maybe eventually a screenshot. Just make it a single page, that could eventually showcase dozens or even hundreds of PDFs. like a beautifual gallary. maybe a link to an about page and table view as well. We want all the PDFs, eboks, etc, on one page. I have all the files in the folder. So someone can click them to download
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const searchInput = document.getElementById('searchInput');
+ const filterSelect = document.getElementById('filterSelect');
+ const pdfCards = document.querySelectorAll('.pdf-card');
+
+ function filterPDFs() {
+ const searchTerm = searchInput.value.toLowerCase();
+ const selectedCategory = filterSelect.value;
+
+ pdfCards.forEach(card => {
+ const title = card.querySelector('h3').textContent.toLowerCase();
+ const category = card.querySelector('.tag').textContent.toLowerCase();
+
+ const matchesSearch = title.includes(searchTerm);
+ const matchesCategory = selectedCategory === 'all' || category === selectedCategory;
+
+ card.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
+ });
+ }
+
+ searchInput.addEventListener('input', filterPDFs);
+ filterSelect.addEventListener('change', filterPDFs);
+
+ // Lazy loading for thumbnails
+ if ('IntersectionObserver' in window) {
+ const imageObserver = new IntersectionObserver((entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const img = entry.target;
+ img.src = img.dataset.src;
+ observer.unobserve(img);
+ }
+ });
+ });
+
+ document.querySelectorAll('img[data-src]').forEach(img => {
+ imageObserver.observe(img);
+ });
+ }
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --background-color: #f9fafb;
+ --card-background: #ffffff;
+ --text-color: #2c3e50;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+ padding: 2rem;
+ color: white;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ letter-spacing: -0.5px;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: opacity 0.2s;
+ }
+
+ .nav-links a:hover {
+ opacity: 0.8;
+ }
+
+ .search-container {
+ max-width: 800px;
+ margin: 2rem auto;
+ display: flex;
+ gap: 1rem;
+ }
+
+ input, select {
+ padding: 0.8rem;
+ border: 2px solid #e2e8f0;
+ border-radius: 8px;
+ font-size: 1rem;
+ }
+
+ input {
+ flex: 1;
+ }
+
+ .pdf-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1400px;
+ margin: 0 auto;
+ }
+
+ .pdf-card {
+ background: var(--card-background);
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+ transition: transform 0.2s;
+ }
+
+ .pdf-card:hover {
+ transform: translateY(-4px);
+ }
+
+ .pdf-thumbnail {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+ }
+
+ .pdf-card h3 {
+ padding: 1rem;
+ font-size: 1.1rem;
+ }
+
+ .pdf-meta {
+ padding: 0 1rem;
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .tag {
+ background: #e2e8f0;
+ padding: 0.2rem 0.6rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ }
+
+ .download-btn {
+ display: block;
+ background: var(--accent-color);
+ color: white;
+ text-decoration: none;
+ padding: 0.8rem;
+ text-align: center;
+ transition: background-color 0.2s;
+ }
+
+ .download-btn:hover {
+ background-color: #2980b9;
+ }
+
+ footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ margin-top: 4rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ text-align: center;
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ gap: 1rem;
+ }
+
+ .pdf-grid {
+ grid-template-columns: 1fr;
+ padding: 1rem;
+ }
+
+ .search-container {
+ flex-direction: column;
+ padding: 0 1rem;
+ }
+ }