Changes to hub.powerhouse.wiki

+ div

+ class project-card

+ a Orgs

+ href https://orgs.powerhouse.wiki

+ class project-link

+ p Database of Mitochondria Organizations

+ href https://pioneers.powerhouse.wiki

+ div

+ class project-card

+ a Pioneers

+ href https://mitosite.powerhouse.wiki

+ class project-link

+ p Database of Pioneering Mitochondria Researchers

+ div

+ class project-card

+ a Mitosite

+ href https://mitosite.powerhouse.wiki

+ class project-link

+ p Real-time AI HUD for Microscopes

+

+

+ a Mito PDFs

+ p Collection of Mitochondria Papers

+ powerhouse.parsers

+

+ powerhouseButton.parsers

+ powerhouseButton

+

+ powerhouseButtonParser

+ popularity 0.006294

+ description Powerhouse button with mitochondria icon.

+ extends abstractIconButtonParser

+ catchAllAtomType urlAtom

+ string style position:relative;

+ string svg

+ javascript

+ get link() {

+ return "https://powerhouse.wiki"

+ }

+

+ powerhouseButton

+ p See expenses and materials

+ p Follow our journey live

+ a Follow Breck on X

+ href https://twitter.com/breckyunits

+ p Follow Breck on X

+ Follow Breck on X

+ * Follow Breck on X

+ style color:white;

+ a Follow Breck on X

+ color white

+ p Follow Breck on X

+ https://twitter.com/breckyunits

+ p Measure your mitochondria at home

+ p Measure your mitochondria at home.

+ --primary-color: #6366f1; /* Indigo */

+ --secondary-color: #1e293b; /* Slate gray */

+ --accent-color: #f43f5e; /* Rose */

+ --text-color: #f8fafc; /* Light gray */

+ --card-bg: rgba(30, 41, 59, 0.7);

+ --gradient: linear-gradient(135deg, #0f172a, #1e293b);

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ font-family:

+ "system-ui",

+ -apple-system,

+ sans-serif;

+ background: var(--gradient);

+ color: var(--text-color);

+ min-height: 100vh;

+ line-height: 1.6;

+ padding: 4rem 2rem;

+ text-align: center;

+ background: rgba(15, 23, 42, 0.6);

+ backdrop-filter: blur(10px);

+ border-bottom: 1px solid rgba(99, 102, 241, 0.1);

+ font-size: 3.5rem;

+ margin-bottom: 1rem;

+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));

+ -webkit-background-clip: text;

+ -webkit-text-fill-color: transparent;

+ animation: glow 3s ease-in-out infinite alternate;

+ font-size: 1.2rem;

+ max-width: 600px;

+ margin: 0 auto;

+ color: rgba(248, 250, 252, 0.9);

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

+ gap: 2rem;

+ padding: 4rem 2rem;

+ max-width: 1200px;

+ margin: 0 auto;

+ background: var(--card-bg);

+ border-radius: 1rem;

+ padding: 2rem;

+ text-align: center;

+ transition: all 0.3s ease;

+ backdrop-filter: blur(8px);

+ border: 1px solid rgba(99, 102, 241, 0.1);

+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

+ transform: translateY(-5px);

+ box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.3);

+ border-color: rgba(99, 102, 241, 0.3);

+ color: var(--primary-color);

+ text-decoration: none;

+ font-size: 1.5rem;

+ font-weight: bold;

+ display: block;

+ margin-bottom: 1rem;

+ transition: color 0.2s ease;

+ }

+

+ .project-link:hover {

+ color: var(--accent-color);

+ color: rgba(248, 250, 252, 0.8);

+ opacity: 0.6;

+ color: var(--accent-color);

+ font-size: 1.5rem;

+ font-weight: bold;

+ text-align: center;

+ padding: 2rem;

+ background: rgba(15, 23, 42, 0.6);

+ border-top: 1px solid rgba(99, 102, 241, 0.1);

+ from {

+ text-shadow:

+ 0 0 20px rgba(99, 102, 241, 0.5),

+ 0 0 30px rgba(99, 102, 241, 0.3);

+ }

+ to {

+ text-shadow:

+ 0 0 30px rgba(244, 63, 94, 0.5),

+ 0 0 40px rgba(244, 63, 94, 0.3);

+ }

+ .hero-section h1 {

+ font-size: 2.5rem;

+ }

+

+ .projects-grid {

+ grid-template-columns: 1fr;

+ padding: 2rem 1rem;

+ }

+ }

+ buildHtml

+ baseUrl https://hub.powerhouse.wiki

+ metaTags

+ editButton /edit.html

+ title Project Powerhouse - Advancing DIY Mitochondria Research

+ style.css

+ header

+ class hero-section

+ div

+ class container

+ h1 Project Powerhouse

+ p Democratizing mitochondrial research through DIY science

+ main

+ section

+ class projects-grid

+ div

+ class project-card

+ a Project Journal

+ href https://powerhouse.breckyunits.com

+ class project-link

+ p Document our journey and discoveries

+ div

+ class project-card

+ a Receipts

+ href https://receipts.powerhouse.wiki

+ class project-link

+ p Track expenses and materials

+ div

+ class project-card

+ a Research PDFs

+ href https://pdfs.powerhouse.wiki

+ class project-link

+ p Access our knowledge base

+ div

+ class project-card coming-soon

+ span Future Project

+ p Coming Soon

+ div

+ class project-card coming-soon

+ span Future Project

+ p Coming Soon

+ div

+ class project-card coming-soon

+ span Future Project

+ p Coming Soon

+ footer

+ p Together, we're revolutionizing personal health monitoring

+ script.js

+ {

+ "id": "msg_018V8QKGambckiJQnGbbPjQW",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "I'll help create this landing page. For the domain, I suggest \"hub.powerhouse.wiki\" - it's short, descriptive, and represents its function as a central directory.\n\n---domain---\nhub.powerhouse.wiki\n---index.scroll---\nbuildHtml\nbaseUrl https://hub.powerhouse.wiki\nmetaTags\neditButton /edit.html\ntitle Project Powerhouse - Advancing DIY Mitochondria Research\nstyle.css\nheader\n class hero-section\n div\n class container\n h1 Project Powerhouse\n p Democratizing mitochondrial research through DIY science\nmain\n section\n class projects-grid\n div\n class project-card\n a Project Journal\n href https://powerhouse.breckyunits.com\n class project-link\n p Document our journey and discoveries\n div\n class project-card\n a Receipts\n href https://receipts.powerhouse.wiki\n class project-link\n p Track expenses and materials\n div\n class project-card\n a Research PDFs\n href https://pdfs.powerhouse.wiki\n class project-link\n p Access our knowledge base\n div\n class project-card coming-soon\n span Future Project\n p Coming Soon\n div\n class project-card coming-soon\n span Future Project\n p Coming Soon\n div\n class project-card coming-soon\n span Future Project\n p Coming Soon\nfooter\n p Together, we're revolutionizing personal health monitoring\nscript.js\n---style.css---\n:root {\n --primary-color: #00ff9d;\n --secondary-color: #001a2c;\n --accent-color: #ff3366;\n --text-color: #ffffff;\n --card-bg: rgba(255, 255, 255, 0.1);\n --gradient: linear-gradient(135deg, var(--secondary-color), #004466);\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 background: var(--gradient);\n color: var(--text-color);\n min-height: 100vh;\n line-height: 1.6;\n}\n\n.hero-section {\n padding: 4rem 2rem;\n text-align: center;\n background: rgba(0, 0, 0, 0.2);\n backdrop-filter: blur(10px);\n}\n\n.hero-section h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n animation: glow 2s ease-in-out infinite alternate;\n}\n\n.hero-section p {\n font-size: 1.2rem;\n max-width: 600px;\n margin: 0 auto;\n color: var(--primary-color);\n}\n\n.projects-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.project-card {\n background: var(--card-bg);\n border-radius: 15px;\n padding: 2rem;\n text-align: center;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n backdrop-filter: blur(5px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.project-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n}\n\n.project-link {\n color: var(--primary-color);\n text-decoration: none;\n font-size: 1.5rem;\n font-weight: bold;\n display: block;\n margin-bottom: 1rem;\n}\n\n.project-card p {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.coming-soon {\n opacity: 0.7;\n}\n\n.coming-soon span {\n color: var(--accent-color);\n font-size: 1.5rem;\n font-weight: bold;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: rgba(0, 0, 0, 0.2);\n}\n\n@keyframes glow {\n from {\n text-shadow: 0 0 10px var(--primary-color),\n 0 0 20px var(--primary-color),\n 0 0 30px var(--primary-color);\n }\n to {\n text-shadow: 0 0 20px var(--primary-color),\n 0 0 30px var(--primary-color),\n 0 0 40px var(--primary-color);\n }\n}\n\n@media (max-width: 768px) {\n .hero-section h1 {\n font-size: 2.5rem;\n }\n \n .projects-grid {\n grid-template-columns: 1fr;\n padding: 2rem 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Add smooth hover effect for project cards\n const cards = document.querySelectorAll('.project-card');\n \n cards.forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n card.style.setProperty('--x', `${x}px`);\n card.style.setProperty('--y', `${y}px`);\n });\n });\n});\n---end---\n\nThis design features:\n1. A modern, sci-fi inspired aesthetic with glowing elements\n2. Responsive grid layout for project cards\n3. Smooth animations and transitions\n4. Frosted glass effect using backdrop-filter\n5. Gradient backgrounds and text effects\n6. Placeholder cards for future projects\n7. Mobile-responsive design\n8. Interactive hover effects\n9. High contrast for accessibility\n10. Clean, semantic HTML structure\n\nThe color scheme uses bright, energetic colors against a deep background to convey the innovative and scientific nature of the project. The layout is designed to scale easily as more projects are added."

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 957,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 1687

+ }

+ }

+ # hub.powerhouse.wiki

+

+ website generated by Claude from prompt: A landing page for Project Powerhouse. A project to figure out how to build at home mitochondria imaging lab. This landing page should be a directory just showing all of the subprojects. So right now those sub projects include Project Journal - powerhouse.breckyunits.com, Receipts - receipts.powerhouse.wiki, PDFS - pdfs.powerhouse.wiki. But imagine we will get to 10-20 projects, so design a nice landing page for that. Dont have any other links. Just links to the subprojects. Make it look exciting, inspiring, this is going to change human health!

+ document.addEventListener('DOMContentLoaded', () => {

+ // Add smooth hover effect for project cards

+ const cards = document.querySelectorAll('.project-card');

+

+ cards.forEach(card => {

+ card.addEventListener('mousemove', (e) => {

+ const rect = card.getBoundingClientRect();

+ const x = e.clientX - rect.left;

+ const y = e.clientY - rect.top;

+

+ card.style.setProperty('--x', `${x}px`);

+ card.style.setProperty('--y', `${y}px`);

+ });

+ });

+ });

+ :root {

+ --primary-color: #00ff9d;

+ --secondary-color: #001a2c;

+ --accent-color: #ff3366;

+ --text-color: #ffffff;

+ --card-bg: rgba(255, 255, 255, 0.1);

+ --gradient: linear-gradient(135deg, var(--secondary-color), #004466);

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ font-family: 'system-ui', -apple-system, sans-serif;

+ background: var(--gradient);

+ color: var(--text-color);

+ min-height: 100vh;

+ line-height: 1.6;

+ }

+

+ .hero-section {

+ padding: 4rem 2rem;

+ text-align: center;

+ background: rgba(0, 0, 0, 0.2);

+ backdrop-filter: blur(10px);

+ }

+

+ .hero-section h1 {

+ font-size: 3.5rem;

+ margin-bottom: 1rem;

+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));

+ -webkit-background-clip: text;

+ -webkit-text-fill-color: transparent;

+ animation: glow 2s ease-in-out infinite alternate;

+ }

+

+ .hero-section p {

+ font-size: 1.2rem;

+ max-width: 600px;

+ margin: 0 auto;

+ color: var(--primary-color);

+ }

+

+ .projects-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

+ gap: 2rem;

+ padding: 4rem 2rem;

+ max-width: 1200px;

+ margin: 0 auto;

+ }

+

+ .project-card {

+ background: var(--card-bg);

+ border-radius: 15px;

+ padding: 2rem;

+ text-align: center;

+ transition: transform 0.3s ease, box-shadow 0.3s ease;

+ backdrop-filter: blur(5px);

+ border: 1px solid rgba(255, 255, 255, 0.1);

+ }

+

+ .project-card:hover {

+ transform: translateY(-10px);

+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

+ }

+

+ .project-link {

+ color: var(--primary-color);

+ text-decoration: none;

+ font-size: 1.5rem;

+ font-weight: bold;

+ display: block;

+ margin-bottom: 1rem;

+ }

+

+ .project-card p {

+ color: rgba(255, 255, 255, 0.8);

+ }

+

+ .coming-soon {

+ opacity: 0.7;

+ }

+

+ .coming-soon span {

+ color: var(--accent-color);

+ font-size: 1.5rem;

+ font-weight: bold;

+ }

+

+ footer {

+ text-align: center;

+ padding: 2rem;

+ background: rgba(0, 0, 0, 0.2);

+ }

+

+ @keyframes glow {

+ from {

+ text-shadow: 0 0 10px var(--primary-color),

+ 0 0 20px var(--primary-color),

+ 0 0 30px var(--primary-color);

+ }

+ to {

+ text-shadow: 0 0 20px var(--primary-color),

+ 0 0 30px var(--primary-color),

+ 0 0 40px var(--primary-color);

+ }

+ }

+

+ @media (max-width: 768px) {

+ .hero-section h1 {

+ font-size: 2.5rem;

+ }

+

+ .projects-grid {

+ grid-template-columns: 1fr;

+ padding: 2rem 1rem;

+ }

+ }