commit 4ea91ae0a534734bab6c0970a15e21cf3fd82b4a
Author: root <root@hub.scroll.pub> Date: 2025-01-15 03:41:57 +0000 Subject: Initial commit diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..4132cc1 --- /dev/null +++ b/index.scroll @@ -0,0 +1,113 @@ +buildHtml +baseUrl https://cellpowerhouse.wiki +metaTags +editButton /edit.html +title MitoVision - Home Mitochondria Testing & Imaging +style.css +header + class hero + nav + div MitoVision + class logo + div + class nav-links + a Home + href #home + a Products + href #products + a Technology + href #technology + a Contact + href #contact + class cta-button + div + class hero-content + h1 See Your Cellular Health + p Professional-grade mitochondria testing and imaging, now available at home + div + class cta-group + a Get Started + class primary-button + href #products + a Learn More + class secondary-button + href #technology +main + section + id products + class products-section + h2 Our Products + div + class product-grid + div + class product-card + img + src images/device.svg + alt MitoVision Device + h3 MitoVision Scanner + p Advanced imaging device for real-time mitochondrial analysis + a Learn More + class button + href #scanner + div + class product-card + img + src images/test-kit.svg + alt Test Kit + h3 Home Test Kit + p Complete testing solution with lab-grade accuracy + a Learn More + class button + href #kit + section + id technology + class tech-section + h2 Revolutionary Technology + div + class tech-features + div + class feature + h3 AI-Powered Analysis + p Advanced algorithms provide instant health insights + div + class feature + h3 Lab-Grade Results + p Professional accuracy in the comfort of your home + div + class feature + h3 Real-Time Monitoring + p Track your cellular health over time + section + id contact + class contact-section + h2 Ready to Transform Your Health? + form + class contact-form + input + type text + placeholder Your Name + required true + input + type email + placeholder Email Address + required true + textarea + placeholder Message + required true + button + type submit + class submit-button + text Contact Us +footer + div + class footer-content + div + class footer-links + a About Us + href #about + a Privacy Policy + href #privacy + a Terms of Service + href #terms + p Made with passion by scientists for everyone +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..223c31e --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01VyFu1Gxn2jnNfoUrkLgFeB", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "Let me create a professional website for your mitochondria testing startup with the domain \"cellpowerhouse.wiki\"\n\n---domain---\ncellpowerhouse.wiki\n---index.scroll---\nbuildHtml\nbaseUrl https://cellpowerhouse.wiki\nmetaTags\neditButton /edit.html\ntitle MitoVision - Home Mitochondria Testing & Imaging\nstyle.css\nheader\n class hero\n nav\n div MitoVision\n class logo\n div\n class nav-links\n a Home\n href #home\n a Products\n href #products\n a Technology\n href #technology\n a Contact\n href #contact\n class cta-button\n div\n class hero-content\n h1 See Your Cellular Health\n p Professional-grade mitochondria testing and imaging, now available at home\n div\n class cta-group\n a Get Started\n class primary-button\n href #products\n a Learn More\n class secondary-button\n href #technology\nmain\n section\n id products\n class products-section\n h2 Our Products\n div\n class product-grid\n div\n class product-card\n img\n src images/device.svg\n alt MitoVision Device\n h3 MitoVision Scanner\n p Advanced imaging device for real-time mitochondrial analysis\n a Learn More\n class button\n href #scanner\n div\n class product-card\n img\n src images/test-kit.svg\n alt Test Kit\n h3 Home Test Kit\n p Complete testing solution with lab-grade accuracy\n a Learn More\n class button\n href #kit\n section\n id technology\n class tech-section\n h2 Revolutionary Technology\n div\n class tech-features\n div\n class feature\n h3 AI-Powered Analysis\n p Advanced algorithms provide instant health insights\n div\n class feature\n h3 Lab-Grade Results\n p Professional accuracy in the comfort of your home\n div\n class feature\n h3 Real-Time Monitoring\n p Track your cellular health over time\n section\n id contact\n class contact-section\n h2 Ready to Transform Your Health?\n form\n class contact-form\n input\n type text\n placeholder Your Name\n required true\n input\n type email\n placeholder Email Address\n required true\n textarea\n placeholder Message\n required true\n button\n type submit\n class submit-button\n text Contact Us\nfooter\n div\n class footer-content\n div\n class footer-links\n a About Us\n href #about\n a Privacy Policy\n href #privacy\n a Terms of Service\n href #terms\n p Made with passion by scientists for everyone\nscript.js\n---style.css---\n:root {\n --primary: #2C3E50;\n --secondary: #3498DB;\n --accent: #E74C3C;\n --light: #ECF0F1;\n --dark: #2C3E50;\n --spacing: 2rem;\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(--dark);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n min-height: 100vh;\n color: white;\n padding: 2rem;\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: 2rem;\n font-weight: bold;\n background: linear-gradient(45deg, #fff, var(--light));\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: all 0.3s ease;\n}\n\n.cta-button {\n background: var(--accent);\n padding: 0.5rem 1.5rem;\n border-radius: 25px;\n font-weight: bold;\n}\n\n.hero-content {\n text-align: center;\n margin-top: 10vh;\n}\n\nh1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, #fff, var(--light));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.cta-group {\n display: flex;\n gap: 1rem;\n justify-content: center;\n margin-top: 2rem;\n}\n\n.primary-button, .secondary-button {\n padding: 1rem 2rem;\n border-radius: 25px;\n text-decoration: none;\n font-weight: bold;\n transition: transform 0.3s ease;\n}\n\n.primary-button {\n background: var(--accent);\n color: white;\n}\n\n.secondary-button {\n background: transparent;\n border: 2px solid white;\n color: white;\n}\n\n.primary-button:hover, .secondary-button:hover {\n transform: translateY(-3px);\n}\n\nsection {\n padding: var(--spacing);\n}\n\n.product-grid, .tech-features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.product-card {\n background: white;\n border-radius: 15px;\n padding: 2rem;\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.product-card:hover {\n transform: translateY(-5px);\n}\n\n.contact-form {\n max-width: 600px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput, textarea {\n padding: 1rem;\n border: 2px solid var(--light);\n border-radius: 8px;\n font-size: 1rem;\n}\n\n.submit-button {\n background: var(--accent);\n color: white;\n border: none;\n padding: 1rem;\n border-radius: 8px;\n cursor: pointer;\n font-weight: bold;\n}\n\nfooter {\n background: var(--primary);\n color: white;\n padding: 2rem;\n}\n\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n .nav-links {\n flex-direction: column;\n align-items: center;\n }\n \n h1 {\n font-size: 2.5rem;\n }\n \n .cta-group {\n flex-direction: column;\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 // Form submission handling\n const form = document.querySelector('.contact-form');\n if (form) {\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n // Add form submission logic here\n alert('Thank you for your message. We will get back to you soon!');\n form.reset();\n });\n }\n\n // Navigation menu toggle for mobile\n const nav = document.querySelector('.nav-links');\n const createMobileMenu = () => {\n if (window.innerWidth <= 768) {\n nav.style.display = 'none';\n const menuButton = document.createElement('button');\n menuButton.innerHTML = '☰';\n menuButton.className = 'mobile-menu-button';\n menuButton.onclick = () => {\n nav.style.display = nav.style.display === 'none' ? 'flex' : 'none';\n };\n nav.parentNode.insertBefore(menuButton, nav);\n }\n };\n \n window.addEventListener('resize', createMobileMenu);\n createMobileMenu();\n});\n---end---\n\nThis design features:\n1. A stunning hero section with gradient background\n2. Smooth animations and transitions\n3. Responsive design that works on all devices\n4. Modern, clean typography\n5. Accessible form elements\n6. Interactive product cards\n7. Smooth scrolling navigation\n8. Mobile-friendly navigation menu\n9. Professional color scheme\n10. Optimized performance with minimal JavaScript\n\nThe website effectively communicates the value proposition of at-home mitochondria testing while maintaining a professional, medical-tech aesthetic. The color scheme suggests trust and innovation, while the layout guides users through the product offerings and technology benefits." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 838, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2336 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..0472597 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# cellpowerhouse.wiki.powerhouse.wiki + +website generated by Claude from prompt: a pitch for indie bio for a startup that makes at home mitochondria imaging and testing products \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..9b3af20 --- /dev/null +++ b/script.js @@ -0,0 +1,40 @@ +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' + }); + }); + }); + + // Form submission handling + const form = document.querySelector('.contact-form'); + if (form) { + form.addEventListener('submit', (e) => { + e.preventDefault(); + // Add form submission logic here + alert('Thank you for your message. We will get back to you soon!'); + form.reset(); + }); + } + + // Navigation menu toggle for mobile + const nav = document.querySelector('.nav-links'); + const createMobileMenu = () => { + if (window.innerWidth <= 768) { + nav.style.display = 'none'; + const menuButton = document.createElement('button'); + menuButton.innerHTML = '☰'; + menuButton.className = 'mobile-menu-button'; + menuButton.onclick = () => { + nav.style.display = nav.style.display === 'none' ? 'flex' : 'none'; + }; + nav.parentNode.insertBefore(menuButton, nav); + } + }; + + window.addEventListener('resize', createMobileMenu); + createMobileMenu(); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9a84fb7 --- /dev/null +++ b/style.css @@ -0,0 +1,177 @@ +:root { + --primary: #2C3E50; + --secondary: #3498DB; + --accent: #E74C3C; + --light: #ECF0F1; + --dark: #2C3E50; + --spacing: 2rem; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + line-height: 1.6; + color: var(--dark); +} + +.hero { + background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); + min-height: 100vh; + color: white; + padding: 2rem; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; +} + +.logo { + font-size: 2rem; + font-weight: bold; + background: linear-gradient(45deg, #fff, var(--light)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.nav-links { + display: flex; + gap: 2rem; +} + +.nav-links a { + color: white; + text-decoration: none; + transition: all 0.3s ease; +} + +.cta-button { + background: var(--accent); + padding: 0.5rem 1.5rem; + border-radius: 25px; + font-weight: bold; +} + +.hero-content { + text-align: center; + margin-top: 10vh; +} + +h1 { + font-size: 4rem; + margin-bottom: 1rem; + background: linear-gradient(45deg, #fff, var(--light)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.cta-group { + display: flex; + gap: 1rem; + justify-content: center; + margin-top: 2rem; +} + +.primary-button, .secondary-button { + padding: 1rem 2rem; + border-radius: 25px; + text-decoration: none; + font-weight: bold; + transition: transform 0.3s ease; +} + +.primary-button { + background: var(--accent); + color: white; +} + +.secondary-button { + background: transparent; + border: 2px solid white; + color: white; +} + +.primary-button:hover, .secondary-button:hover { + transform: translateY(-3px); +} + +section { + padding: var(--spacing); +} + +.product-grid, .tech-features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.product-card { + background: white; + border-radius: 15px; + padding: 2rem; + box-shadow: 0 10px 20px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.product-card:hover { + transform: translateY(-5px); +} + +.contact-form { + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1rem; +} + +input, textarea { + padding: 1rem; + border: 2px solid var(--light); + border-radius: 8px; + font-size: 1rem; +} + +.submit-button { + background: var(--accent); + color: white; + border: none; + padding: 1rem; + border-radius: 8px; + cursor: pointer; + font-weight: bold; +} + +footer { + background: var(--primary); + color: white; + padding: 2rem; +} + +@media (max-width: 768px) { + nav { + flex-direction: column; + gap: 1rem; + } + + .nav-links { + flex-direction: column; + align-items: center; + } + + h1 { + font-size: 2.5rem; + } + + .cta-group { + flex-direction: column; + } +} \ No newline at end of file