index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://mitoimaging.powerhouse.wiki
+ metaTags
+ editButton /edit.html
+ title Mitochondrial Imaging Labs Database
+ style.css
+ header
+ class hero
+ nav
+ div MitoImaging
+ class logo
+ div
+ class nav-links
+ a Database
+ href #database
+ a Submit
+ href #submit
+ a About
+ href #about
+ a Search
+ class search-button
+ href #search
+ div
+ class hero-content
+ h1 Global Mitochondrial Imaging Labs
+ p Discover world-leading laboratories specializing in mitochondrial microscopy and imaging
+ main
+ section
+ id database
+ class lab-grid
+ h2 Featured Labs
+ div
+ class filters
+ button All
+ class active
+ button Super-Resolution
+ button Live-Cell
+ button Electron Microscopy
+ div
+ class lab-cards
+ div
+ class lab-card
+ h3 Mitochondrial Dynamics Lab
+ p Harvard University
+ span Super-Resolution, Live-Cell
+ class tags
+ a View Details
+ class view-button
+ div
+ class lab-card
+ h3 Cell Bioenergetics Group
+ p Max Planck Institute
+ span Electron Microscopy
+ class tags
+ a View Details
+ class view-button
+ div
+ class lab-card
+ h3 Molecular Imaging Center
+ p UC Berkeley
+ span Super-Resolution, Live-Cell
+ class tags
+ a View Details
+ class view-button
+ section
+ id submit
+ class submit-form
+ h2 Submit Your Lab
+ form
+ input
+ type text
+ placeholder Lab Name
+ input
+ type text
+ placeholder Institution
+ input
+ type email
+ placeholder Contact Email
+ textarea
+ placeholder Lab Description
+ button Submit
+ type submit
+ class submit-button
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Contact
+ href #contact
+ a Privacy Policy
+ href #privacy
+ a Terms
+ href #terms
+ p A community-driven database for mitochondrial research
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01NpwNxEvLM1rCtRLKE1RYSt",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a database website for top mitochondrial imaging labs. For the domain, I suggest:\n\n---domain---\nmitoimaging.powerhouse.wiki\n\n---index.scroll---\nbuildHtml\nbaseUrl https://mitoimaging.powerhouse.wiki\nmetaTags\neditButton /edit.html\ntitle Mitochondrial Imaging Labs Database\nstyle.css\nheader\n class hero\n nav\n div MitoImaging\n class logo\n div\n class nav-links\n a Database\n href #database\n a Submit\n href #submit\n a About\n href #about\n a Search\n class search-button\n href #search\n div\n class hero-content\n h1 Global Mitochondrial Imaging Labs\n p Discover world-leading laboratories specializing in mitochondrial microscopy and imaging\nmain\n section\n id database\n class lab-grid\n h2 Featured Labs\n div\n class filters\n button All\n class active\n button Super-Resolution\n button Live-Cell\n button Electron Microscopy\n div\n class lab-cards\n div\n class lab-card\n h3 Mitochondrial Dynamics Lab\n p Harvard University\n span Super-Resolution, Live-Cell\n class tags\n a View Details\n class view-button\n div\n class lab-card\n h3 Cell Bioenergetics Group\n p Max Planck Institute\n span Electron Microscopy\n class tags\n a View Details\n class view-button\n div\n class lab-card\n h3 Molecular Imaging Center\n p UC Berkeley\n span Super-Resolution, Live-Cell\n class tags\n a View Details\n class view-button\n section\n id submit\n class submit-form\n h2 Submit Your Lab\n form\n input\n type text\n placeholder Lab Name\n input\n type text\n placeholder Institution\n input\n type email\n placeholder Contact Email\n textarea\n placeholder Lab Description\n button Submit\n type submit\n class submit-button\nfooter\n div\n class footer-content\n div\n class footer-links\n a Contact\n href #contact\n a Privacy Policy\n href #privacy\n a Terms\n href #terms\n p A community-driven database for mitochondrial research\nscript.js\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #27ae60;\n --background-color: #f8f9fa;\n --text-color: #2c3e50;\n --card-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', 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), #34495e);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: linear-gradient(45deg, #2ecc71, #27ae60);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\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: color 0.3s ease;\n}\n\n.search-button {\n background: var(--accent-color);\n padding: 0.5rem 1rem;\n border-radius: 4px;\n}\n\n.lab-grid {\n padding: 4rem 2rem;\n}\n\n.filters {\n display: flex;\n gap: 1rem;\n margin-bottom: 2rem;\n justify-content: center;\n}\n\n.filters button {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 4px;\n background: white;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.filters button.active {\n background: var(--accent-color);\n color: white;\n}\n\n.lab-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem 0;\n}\n\n.lab-card {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.lab-card:hover {\n transform: translateY(-5px);\n}\n\n.tags {\n display: inline-block;\n font-size: 0.8rem;\n color: var(--accent-color);\n margin: 1rem 0;\n}\n\n.view-button {\n display: inline-block;\n padding: 0.5rem 1rem;\n background: var(--accent-color);\n color: white;\n text-decoration: none;\n border-radius: 4px;\n transition: background 0.3s ease;\n}\n\n.submit-form {\n max-width: 600px;\n margin: 0 auto;\n padding: 4rem 2rem;\n}\n\n.submit-form form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.submit-form input,\n.submit-form textarea {\n padding: 0.8rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.submit-button {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 1rem;\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .lab-cards {\n grid-template-columns: 1fr;\n }\n \n .hero {\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Filter functionality\n const filterButtons = document.querySelectorAll('.filters button');\n const labCards = document.querySelectorAll('.lab-card');\n \n filterButtons.forEach(button => {\n button.addEventListener('click', () => {\n // Remove active class from all buttons\n filterButtons.forEach(btn => btn.classList.remove('active'));\n // Add active class to clicked button\n button.classList.add('active');\n \n const filter = button.textContent;\n \n labCards.forEach(card => {\n if (filter === 'All') {\n card.style.display = 'block';\n } else {\n const tags = card.querySelector('.tags').textContent;\n if (tags.includes(filter)) {\n card.style.display = 'block';\n } else {\n card.style.display = 'none';\n }\n }\n });\n });\n });\n\n // Form submission\n const form = document.querySelector('.submit-form form');\n if (form) {\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n // Add form submission logic here\n alert('Thank you for your submission! We will review it shortly.');\n form.reset();\n });\n }\n\n // Smooth scroll for navigation\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---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 828,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2080
+ }
+ }
readme.scroll
Changed around line 1
+ # mitoimaging.powerhouse.wiki
+
+ website generated by Claude from prompt: a database of top mitochondrial imaging labs
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ // Filter functionality
+ const filterButtons = document.querySelectorAll('.filters button');
+ const labCards = document.querySelectorAll('.lab-card');
+
+ filterButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ // Remove active class from all buttons
+ filterButtons.forEach(btn => btn.classList.remove('active'));
+ // Add active class to clicked button
+ button.classList.add('active');
+
+ const filter = button.textContent;
+
+ labCards.forEach(card => {
+ if (filter === 'All') {
+ card.style.display = 'block';
+ } else {
+ const tags = card.querySelector('.tags').textContent;
+ if (tags.includes(filter)) {
+ card.style.display = 'block';
+ } else {
+ card.style.display = 'none';
+ }
+ }
+ });
+ });
+ });
+
+ // Form submission
+ const form = document.querySelector('.submit-form form');
+ if (form) {
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ // Add form submission logic here
+ alert('Thank you for your submission! We will review it shortly.');
+ form.reset();
+ });
+ }
+
+ // Smooth scroll for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --accent-color: #27ae60;
+ --background-color: #f8f9fa;
+ --text-color: #2c3e50;
+ --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Inter', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--primary-color), #34495e);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, #2ecc71, #27ae60);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: color 0.3s ease;
+ }
+
+ .search-button {
+ background: var(--accent-color);
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ }
+
+ .lab-grid {
+ padding: 4rem 2rem;
+ }
+
+ .filters {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 2rem;
+ justify-content: center;
+ }
+
+ .filters button {
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 4px;
+ background: white;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .filters button.active {
+ background: var(--accent-color);
+ color: white;
+ }
+
+ .lab-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem 0;
+ }
+
+ .lab-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: var(--card-shadow);
+ transition: transform 0.3s ease;
+ }
+
+ .lab-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .tags {
+ display: inline-block;
+ font-size: 0.8rem;
+ color: var(--accent-color);
+ margin: 1rem 0;
+ }
+
+ .view-button {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ background: var(--accent-color);
+ color: white;
+ text-decoration: none;
+ border-radius: 4px;
+ transition: background 0.3s ease;
+ }
+
+ .submit-form {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 4rem 2rem;
+ }
+
+ .submit-form form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .submit-form input,
+ .submit-form textarea {
+ padding: 0.8rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+
+ .submit-button {
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ padding: 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .lab-cards {
+ grid-template-columns: 1fr;
+ }
+
+ .hero {
+ padding: 1rem;
+ }
+ }